{"version":3,"file":"index.mjs","sources":["../src/helpers/context.tsx","../src/helpers/objects.ts","../src/helpers/theme.ts","../src/helpers/handleResponsiveValues.ts","../src/utilities/forwardRef.ts","../src/primitives/Box/Box.tsx","../src/primitives/Flex/Flex.tsx","../src/styles/type.ts","../src/primitives/Typography/Typography.tsx","../src/components/Accordion/Accordion.tsx","../src/styles/buttons.ts","../src/utilities/VisuallyHidden/VisuallyHidden.tsx","../src/utilities/AccessibleIcon/AccessibleIcon.tsx","../src/components/Alert/utils.ts","../src/components/Alert/Alert.tsx","../src/hooks/useControllableState.ts","../src/styles/motion.ts","../src/components/Avatar/Avatar.tsx","../src/components/Badge/Badge.tsx","../src/components/BaseLink/BaseLink.tsx","../src/components/Breadcrumbs/Divider.tsx","../src/components/Breadcrumbs/Breadcrumbs.tsx","../src/components/Breadcrumbs/Crumb.tsx","../src/components/Breadcrumbs/CrumbLink.tsx","../src/helpers/strings.ts","../src/hooks/useComposeRefs.ts","../src/hooks/useIsomorphicLayoutEffect.ts","../src/hooks/useId.ts","../src/hooks/useIntersection.ts","../src/components/Button/constants.ts","../src/components/Button/utils.ts","../src/components/Button/Button.tsx","../src/components/Tooltip/Tooltip.tsx","../src/components/IconButton/IconButton.tsx","../src/components/Link/Link.tsx","../src/components/SimpleMenu/Menu.tsx","../src/components/SimpleMenu/SimpleMenu.tsx","../src/components/Breadcrumbs/CrumbSimpleMenu.tsx","../src/components/Card/CardContext.tsx","../src/components/Card/Card.tsx","../src/components/Card/CardAction.tsx","../src/components/Card/CardAsset.tsx","../src/components/Card/CardBadge.tsx","../src/components/Card/CardBody.tsx","../src/components/Checkbox/Checkbox.tsx","../src/components/Card/CardCheckbox.tsx","../src/components/Card/CardContent.tsx","../src/components/Card/CardHeader.tsx","../src/components/Card/CardTimer.tsx","../src/components/Card/CardTitle.tsx","../src/helpers/keyboardKeys.ts","../src/components/CarouselInput/Carousel.tsx","../src/themes/sizes.ts","../src/themes/common-theme.ts","../src/themes/lightTheme/light-colors.ts","../src/themes/lightTheme/light-shadows.ts","../src/themes/lightTheme/index.ts","../src/themes/darkTheme/dark-colors.ts","../src/themes/darkTheme/dark-shadows.ts","../src/themes/darkTheme/index.ts","../src/themes/extendTheme.ts","../src/themes/utils.ts","../src/components/Field/Field.tsx","../src/components/CarouselInput/CarouselInput.tsx","../src/components/CarouselInput/CarouselActions.tsx","../src/components/CarouselInput/CarouselImage.tsx","../src/components/CarouselInput/CarouselSlide.tsx","../src/utilities/ScrollArea/ScrollArea.tsx","../src/components/Loader/assets/loader.svg","../src/components/Loader/Loader.tsx","../src/components/Combobox/Combobox.tsx","../src/components/Dialog/Dialog.tsx","../src/hooks/useDateFormatter.ts","../src/components/LiveRegions/constants.ts","../src/components/LiveRegions/useNotifyAT.ts","../src/components/LiveRegions/LiveRegions.tsx","../src/styles/global.ts","../src/utilities/DesignSystemProvider.tsx","../src/utilities/DismissibleLayer/index.ts","../src/utilities/Portal/Portal.tsx","../src/components/Select/SelectParts.tsx","../src/components/Select/SingleSelect.tsx","../src/components/DatePicker/DatePicker.tsx","../src/components/TimePicker/TimePicker.tsx","../src/components/DateTimePicker/DateTimePicker.tsx","../src/components/Divider/Divider.tsx","../src/components/EmptyStateLayout/EmptyStateLayout.tsx","../src/components/JSONInput/utils/decorationExtension.ts","../src/components/JSONInput/JSONInput.tsx","../src/components/LinkButton/LinkButton.tsx","../src/components/Main/Main.tsx","../src/components/Main/SkipToContent.tsx","../src/components/Modal/Modal.tsx","../src/components/NumberInput/NumberInput.tsx","../src/components/Pagination/PaginationContext.ts","../src/components/Pagination/Pagination.tsx","../src/components/Pagination/components.tsx","../src/components/Popover/Popover.tsx","../src/components/ProgressBar/ProgressBar.tsx","../src/components/Radio/Radio.tsx","../src/components/RawTable/focusFocusable.ts","../src/components/RawTable/RawTableContext.ts","../src/components/RawTable/RawTable.tsx","../src/helpers/getFocusableNodes.ts","../src/components/RawTable/RawCell.tsx","../src/components/RawTable/RawThead.tsx","../src/components/RawTable/RawTbody.tsx","../src/components/RawTable/RawTr.tsx","../src/components/Searchbar/Searchbar.tsx","../src/components/Searchbar/SearchForm.tsx","../src/components/Tag/Tag.tsx","../src/components/Select/MultiSelect.tsx","../src/components/Select/MultiSelectNested.tsx","../src/components/Status/Status.tsx","../src/components/SubNav/SubNav.tsx","../src/components/SubNav/SubNavHeader.tsx","../src/components/SubNav/SubNavLink.tsx","../src/components/SubNav/SubNavLinkSection.tsx","../src/components/SubNav/SubNavSectionLabel.tsx","../src/components/SubNav/SubNavSection.tsx","../src/components/SubNav/SubNavSections.tsx","../src/components/Switch/Switch.tsx","../src/components/Tabs/Tabs.tsx","../src/components/Table/Table.tsx","../src/components/Table/Tbody.tsx","../src/components/Table/Thead.tsx","../src/components/Table/Tr.tsx","../src/components/Table/Cell.tsx","../src/components/Table/TFooter.tsx","../src/components/TextButton/TextButton.tsx","../src/components/TextInput/TextInput.tsx","../src/components/Textarea/Textarea.tsx","../src/components/Toggle/Toggle.tsx","../src/primitives/Grid/Grid.tsx","../src/hooks/useMeasure.ts","../src/utilities/FocusTrap/FocusTrap.tsx","../src/utilities/KeyboardNavigable/KeyboardNavigable.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const createContext = (\n rootComponentName: string,\n defaultContext?: ContextValueType,\n) => {\n const Context = React.createContext(defaultContext);\n\n const Provider = (props: ContextValueType & { children: React.ReactNode }) => {\n const { children, ...context } = props;\n // Only re-memoize when prop values change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const value = React.useMemo(() => context, Object.values(context)) as ContextValueType;\n\n return {children};\n };\n\n function useContext(consumerName: string) {\n const context = React.useContext(Context);\n\n if (context) return context;\n\n if (defaultContext !== undefined) return defaultContext;\n // if a defaultContext wasn't specified, it's a required context.\n throw new Error(`\\`${consumerName}\\` must be used within \\`${rootComponentName}\\``);\n }\n\n Provider.displayName = `${rootComponentName}Provider`;\n\n return [Provider, useContext] as const;\n};\n","export function isKeyOf(o: object | [] | string, s: string | number | symbol): s is keyof typeof o {\n if (typeof o === 'string') {\n return false;\n }\n\n return s in o;\n}\n\n/**\n * @description Simple object check.\n * @export\n * @param item\n * @returns {boolean}\n */\nexport function isObject(item: any): boolean {\n return item && typeof item === 'object' && !Array.isArray(item);\n}\n","import { DefaultTheme } from 'styled-components';\n\nimport { isKeyOf } from './objects';\n\nexport function extractStyleFromTheme(\n themeSection: TSection | null | undefined,\n key: string | number | symbol | undefined,\n defaultValue: any,\n): string | number {\n if (themeSection && key && isKeyOf(themeSection, key)) {\n return themeSection[key];\n }\n\n return defaultValue;\n}\n","import { DefaultTheme } from 'styled-components';\n\nimport { extractStyleFromTheme } from './theme';\n\nimport type { TransientBoxProps } from '../primitives/Box/Box';\nimport type { TransientFlexProps } from '../primitives/Flex/Flex';\nimport type { TransientTypographyProps } from '../primitives/Typography/Typography';\nimport type { DefaultThemeOrCSSProp } from '../types';\n\ntype Breakpoint = 'initial' | 'small' | 'medium' | 'large';\n\n/**\n * A property is either a responsive object, or a single\n * value that is applied as the initial value.\n */\ntype ResponsiveProperty =\n | {\n [key in Breakpoint]?: T;\n }\n | T;\n\n/**\n * Currently, only margin or padding accept an array of values.\n */\ntype ResponsiveThemeProperty = K extends\n | 'padding'\n | 'margin'\n ? ResponsiveProperty | Array>>\n : ResponsiveProperty>;\n\n/**\n * This should ONLY ever be CSS property names, never shorthands or aliases.\n */\ntype ResponsiveProps = Omit &\n Omit &\n Omit & {\n boxShadow?: TransientBoxProps['shadow'];\n flexBasis?: TransientBoxProps['basis'];\n flexDirection?: TransientFlexProps['direction'];\n flexGrow?: TransientBoxProps['grow'];\n flexShrink?: TransientBoxProps['shrink'];\n flexWrap?: TransientFlexProps['wrap'];\n };\n\nconst mappedCSSProps: Partial> = {\n padding: ['padding-block-start', 'padding-inline-end', 'padding-block-end', 'padding-inline-start'],\n paddingTop: 'padding-block-start',\n paddingRight: 'padding-inline-end',\n paddingBottom: 'padding-block-end',\n paddingLeft: 'padding-inline-start',\n margin: ['margin-block-start', 'margin-inline-end', 'margin-block-end', 'margin-inline-start'],\n marginLeft: 'margin-inline-start',\n marginRight: 'margin-inline-end',\n marginTop: 'margin-block-start',\n marginBottom: 'margin-block-end',\n borderRadius: 'border-radius',\n borderStyle: 'border-style',\n borderWidth: 'border-width',\n borderColor: 'border-color',\n fontSize: 'font-size',\n fontWeight: 'font-weight',\n lineHeight: 'line-height',\n zIndex: 'z-index',\n boxShadow: 'box-shadow',\n pointerEvents: 'pointer-events',\n textAlign: 'text-align',\n textTransform: 'text-transform',\n textDecoration: 'text-decoration',\n flexGrow: 'flex-grow',\n flexShrink: 'flex-shrink',\n flexBasis: 'flex-basis',\n minWidth: 'min-width',\n maxWidth: 'max-width',\n minHeight: 'min-height',\n maxHeight: 'max-height',\n flexDirection: 'flex-direction',\n flexWrap: 'flex-wrap',\n justifyContent: 'justify-content',\n alignItems: 'align-items',\n};\n\n/**\n * Fills the shorthand CSS properties with their corresponding logical properties\n * @param value An array of CSS values for shorthand properties\n * @returns An array of CSS values filled with logical properties\n */\n\nconst fillCssValues = (value: DefaultThemeOrCSSProp<'spaces', 'margin' | 'padding'>[]) => {\n const [top, right, bottom, left] = value;\n const rightValue = right ?? top;\n const bottomValue = bottom ?? top;\n const leftValue = left ?? rightValue;\n\n return [top, rightValue, bottomValue, leftValue] as const;\n};\n\nfunction getThemeSection(key: keyof ResponsiveProps, theme: DefaultTheme) {\n switch (key) {\n case 'gap':\n case 'padding':\n case 'margin':\n case 'paddingTop':\n case 'paddingLeft':\n case 'paddingRight':\n case 'paddingBottom':\n case 'marginTop':\n case 'marginLeft':\n case 'marginRight':\n case 'marginBottom':\n case 'left':\n case 'right':\n case 'top':\n case 'bottom':\n case 'width':\n case 'maxWidth':\n case 'minWidth':\n case 'height':\n case 'maxHeight':\n case 'minHeight':\n case 'borderRadius':\n case 'borderWidth':\n return theme.spaces;\n case 'color':\n case 'background':\n case 'borderColor':\n return theme.colors;\n case 'fontSize':\n return theme.fontSizes;\n case 'fontWeight':\n return theme.fontWeights;\n case 'lineHeight':\n return theme.lineHeights;\n case 'zIndex':\n return theme.zIndices;\n case 'boxShadow':\n return theme.shadows;\n default:\n return null;\n }\n}\n\nconst handleResponsiveValues = (values: ResponsiveProps, theme: DefaultTheme) => {\n const stylesByBreakpoint = Object.entries(values).reduce(\n (acc, curr) => {\n const [key, value] = curr as [key: keyof ResponsiveProps, value: ResponsiveProps[keyof ResponsiveProps]];\n const themeSection = getThemeSection(key, theme);\n\n const cssProperty = Object.prototype.hasOwnProperty.call(mappedCSSProps, key) ? mappedCSSProps[key] : key;\n\n if (cssProperty && (value || value === 0)) {\n // If the value is an responsive object e.g padding : { initial: 1, medium: 2, large: [3, 4] }\n if (typeof value === 'object' && !Array.isArray(value)) {\n Object.entries(value).forEach(([breakpointName, breakpointValue]) => {\n acc[breakpointName] = {\n ...acc[breakpointName],\n ...convertCssPropertiesToCssValues(cssProperty, breakpointValue, themeSection),\n };\n });\n } else {\n /**\n * If we don't pass a responsive object, we just set the value to respective prop.\n */\n acc.initial = {\n ...acc.initial,\n ...convertCssPropertiesToCssValues(cssProperty, value, themeSection),\n };\n }\n }\n\n return acc;\n },\n {\n initial: {},\n small: {},\n medium: {},\n large: {},\n },\n );\n\n /**\n * Stringify our styles.\n */\n return Object.entries(stylesByBreakpoint)\n .reduce((acc, [key, value]) => {\n if (value && Object.keys(value).length > 0) {\n const breakpointStyles = Object.entries(value)\n .reduce((arr, [property, value]) => {\n arr.push(`${property}: ${value};`);\n\n return arr;\n }, [])\n .join('\\n');\n\n if (key === 'initial') {\n acc.push(breakpointStyles);\n } else {\n acc.push(`${theme.breakpoints[key]}{ ${breakpointStyles} }`);\n }\n }\n\n return acc;\n }, [])\n .join('\\n');\n};\n\n/**\n * This function takes either a single CSS property or an array of CSS\n * properties & applies the provided value during the process, the value\n * is extracted from the provided themeSection if possible. If not, we assume\n * the user has provided a CSS value directly and fallback to that.\n */\nconst convertCssPropertiesToCssValues = (\n property: string | string[],\n value: DefaultThemeOrCSSProp | Array>,\n themeSection: DefaultTheme[keyof DefaultTheme],\n) => {\n if (Array.isArray(property) && Array.isArray(value)) {\n /**\n * If the value is an array & the cssProperty is an array, map the values to respective logical props.\n * This is normally the case for padding, margin, etc. where we extract each value and turn it into a single logical prop.\n *\n * @example cssProperty = ['padding-block-start', 'padding-inline-end', 'padding-block-end', 'padding-inline-start'] and breakpointValue = [3, 4]\n *\n * so this code would become\n * ```css\n * padding-block-start: 3;\n * padding-block-end: 3;\n * padding-inline-start: 4;\n * padding-inline-end: 4;\n * ```\n */\n const shorthandValues = fillCssValues(value);\n\n return property.reduce((acc, prop, index) => {\n acc[prop] = extractStyleFromTheme(themeSection, shorthandValues[index], shorthandValues[index]);\n\n return acc;\n }, {});\n } else if (Array.isArray(property) && !Array.isArray(value)) {\n /**\n * If the value is not an array & the cssProperty is an array, map the value to respective logical props (they'd all be the same).\n *\n * @example cssProperty = ['padding-block-start', 'padding-inline-end', 'padding-block-end', 'padding-inline-start'] and breakpointValue = 1\n *\n * so this code would become\n * ```css\n * padding-inline-start: 1;\n * padding-inline-end: 1;\n * padding-block-start: 1;\n * padding-block-end: 1;\n * ```\n */\n return property.reduce((acc, prop) => {\n acc[prop] = extractStyleFromTheme(themeSection, value, value);\n\n return acc;\n }, {});\n } else if (!Array.isArray(property) && !Array.isArray(value)) {\n return {\n [property]: extractStyleFromTheme(themeSection, value, value),\n };\n } else {\n console.warn(\n \"You've passed an array of values to a property that does not support it. Please check the property and value you're passing.\",\n );\n\n return {};\n }\n};\n\nexport { handleResponsiveValues };\nexport type { ResponsiveProps, ResponsiveThemeProperty, ResponsiveProperty, Breakpoint };\n","import * as React from 'react';\n\n/**\n * A utility function to create a forwardRef component.\n * This is a workaround to allow generics to be passed\n * to forwardRef components.\n */\nconst forwardRef = React.forwardRef as (\n render: (props: P, ref: React.ForwardedRef) => ReturnType,\n) => (props: React.PropsWithoutRef

& React.RefAttributes) => ReturnType;\n\nexport { forwardRef };\n","import * as React from 'react';\n\nimport { styled, type CSSProperties } from 'styled-components';\n\nimport {\n handleResponsiveValues,\n type ResponsiveProperty,\n type ResponsiveThemeProperty,\n} from '../../helpers/handleResponsiveValues';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef, PropsToTransientProps } from '../../types';\nimport { forwardRef } from '../../utilities/forwardRef';\n\ninterface TransientBoxProps {\n /**\n * CSS Properties\n */\n pointerEvents?: ResponsiveProperty;\n display?: ResponsiveProperty;\n position?: ResponsiveProperty;\n overflow?: ResponsiveProperty;\n cursor?: ResponsiveProperty;\n transition?: ResponsiveProperty;\n transform?: ResponsiveProperty;\n animation?: ResponsiveProperty;\n textAlign?: ResponsiveProperty;\n textTransform?: ResponsiveProperty;\n flex?: ResponsiveProperty;\n grow?: ResponsiveProperty;\n basis?: ResponsiveProperty;\n shrink?: ResponsiveProperty;\n borderStyle?: ResponsiveProperty;\n /**\n * Shorthand Responsive Properties\n */\n margin?: ResponsiveThemeProperty<'spaces', 'margin'>;\n padding?: ResponsiveThemeProperty<'spaces', 'padding'>;\n\n /**\n * Individual Responsive Properties\n */\n marginLeft?: ResponsiveThemeProperty<'spaces', 'marginLeft'>;\n marginRight?: ResponsiveThemeProperty<'spaces', 'marginRight'>;\n marginTop?: ResponsiveThemeProperty<'spaces', 'marginTop'>;\n marginBottom?: ResponsiveThemeProperty<'spaces', 'marginBottom'>;\n marginBlock?: ResponsiveThemeProperty<'spaces', 'marginBlock'>;\n marginBlockStart?: ResponsiveThemeProperty<'spaces', 'marginBlockStart'>;\n marginBlockEnd?: ResponsiveThemeProperty<'spaces', 'marginBlockEnd'>;\n marginInline?: ResponsiveThemeProperty<'spaces', 'marginInline'>;\n marginInlineStart?: ResponsiveThemeProperty<'spaces', 'marginInlineStart'>;\n marginInlineEnd?: ResponsiveThemeProperty<'spaces', 'marginInlineEnd'>;\n paddingLeft?: ResponsiveThemeProperty<'spaces', 'paddingLeft'>;\n paddingRight?: ResponsiveThemeProperty<'spaces', 'paddingRight'>;\n paddingTop?: ResponsiveThemeProperty<'spaces', 'paddingTop'>;\n paddingBottom?: ResponsiveThemeProperty<'spaces', 'paddingBottom'>;\n paddingBlock?: ResponsiveThemeProperty<'spaces', 'paddingBlock'>;\n paddingBlockStart?: ResponsiveThemeProperty<'spaces', 'paddingBlockStart'>;\n paddingBlockEnd?: ResponsiveThemeProperty<'spaces', 'paddingBlockEnd'>;\n paddingInline?: ResponsiveThemeProperty<'spaces', 'paddingInline'>;\n paddingInlineStart?: ResponsiveThemeProperty<'spaces', 'paddingInlineStart'>;\n paddingInlineEnd?: ResponsiveThemeProperty<'spaces', 'paddingInlineEnd'>;\n borderRadius?: ResponsiveThemeProperty<'spaces', 'borderRadius'>;\n borderWidth?: ResponsiveThemeProperty<'spaces', 'borderWidth'>;\n top?: ResponsiveThemeProperty<'spaces', 'top'>;\n left?: ResponsiveThemeProperty<'spaces', 'left'>;\n bottom?: ResponsiveThemeProperty<'spaces', 'bottom'>;\n right?: ResponsiveThemeProperty<'spaces', 'right'>;\n width?: ResponsiveThemeProperty<'spaces', 'width'>;\n height?: ResponsiveThemeProperty<'spaces', 'height'>;\n maxWidth?: ResponsiveThemeProperty<'spaces', 'maxWidth'>;\n minWidth?: ResponsiveThemeProperty<'spaces', 'minWidth'>;\n maxHeight?: ResponsiveThemeProperty<'spaces', 'maxHeight'>;\n minHeight?: ResponsiveThemeProperty<'spaces', 'minHeight'>;\n /**\n * Theme Properties\n */\n borderColor?: ResponsiveThemeProperty<'colors', 'borderColor'>;\n color?: ResponsiveThemeProperty<'colors', 'color'>;\n background?: ResponsiveThemeProperty<'colors', 'background'>;\n shadow?: ResponsiveThemeProperty<'shadows', 'boxShadow'>;\n fontSize?: ResponsiveThemeProperty<'fontSizes', 'fontSize'>;\n fontWeight?: ResponsiveThemeProperty<'fontWeights', 'fontWeight'>;\n lineHeight?: ResponsiveThemeProperty<'lineHeights', 'lineHeight'>;\n zIndex?: ResponsiveThemeProperty<'zIndices', 'zIndex'>;\n hasRadius?: boolean;\n}\n\ntype BoxProps = PolymorphicComponentPropsWithRef<\n C,\n TransientBoxProps & {\n children?: React.ReactNode;\n }\n>;\n\nconst Box = forwardRef((props: BoxProps, ref: PolymorphicRef) => {\n const {\n background,\n basis,\n borderColor,\n color,\n flex,\n fontSize,\n grow,\n hasRadius,\n padding,\n paddingBottom,\n paddingLeft,\n paddingRight,\n paddingTop,\n margin,\n marginLeft,\n marginBottom,\n marginRight,\n marginTop,\n shadow,\n shrink,\n lineHeight,\n fontWeight,\n width,\n minWidth,\n maxWidth,\n height,\n minHeight,\n maxHeight,\n top,\n left,\n bottom,\n right,\n borderRadius,\n borderStyle,\n borderWidth,\n tag,\n pointerEvents,\n display,\n position,\n zIndex,\n overflow,\n cursor,\n transition,\n transform,\n animation,\n textAlign,\n textTransform,\n ...rest\n } = props;\n\n const AsComponent = tag || 'div';\n\n const mappedProps: PropsToTransientProps = {\n $background: background,\n $basis: basis,\n $borderColor: borderColor,\n $color: color,\n $flex: flex,\n $fontSize: fontSize,\n $grow: grow,\n $hasRadius: hasRadius,\n $padding: padding,\n $paddingBottom: paddingBottom,\n $paddingLeft: paddingLeft,\n $paddingRight: paddingRight,\n $paddingTop: paddingTop,\n $margin: margin,\n $marginLeft: marginLeft,\n $marginBottom: marginBottom,\n $marginRight: marginRight,\n $marginTop: marginTop,\n $shadow: shadow,\n $shrink: shrink,\n $lineHeight: lineHeight,\n $fontWeight: fontWeight,\n $width: width,\n $minWidth: minWidth,\n $maxWidth: maxWidth,\n $height: height,\n $minHeight: minHeight,\n $maxHeight: maxHeight,\n $top: top,\n $left: left,\n $bottom: bottom,\n $right: right,\n $borderRadius: borderRadius,\n $borderStyle: borderStyle,\n $borderWidth: borderWidth,\n $pointerEvents: pointerEvents,\n $display: display,\n $position: position,\n $zIndex: zIndex,\n $overflow: overflow,\n $cursor: cursor,\n $transition: transition,\n $transform: transform,\n $animation: animation,\n $textAlign: textAlign,\n $textTransform: textTransform,\n };\n\n return ;\n}) as BoxComponent;\n\nconst StyledBox = styled.div>`\n ${({ theme, ...props }) => {\n return handleResponsiveValues(\n {\n padding: props.$padding,\n paddingTop: props.$paddingTop,\n paddingBottom: props.$paddingBottom,\n paddingLeft: props.$paddingLeft,\n paddingRight: props.$paddingRight,\n margin: props.$margin,\n marginTop: props.$marginTop,\n marginBottom: props.$marginBottom,\n marginLeft: props.$marginLeft,\n marginRight: props.$marginRight,\n top: props.$top,\n left: props.$left,\n bottom: props.$bottom,\n right: props.$right,\n width: props.$width,\n minWidth: props.$minWidth,\n maxWidth: props.$maxWidth,\n height: props.$height,\n minHeight: props.$minHeight,\n maxHeight: props.$maxHeight,\n color: props.$color,\n background: props.$background,\n fontSize: props.$fontSize,\n fontWeight: props.$fontWeight,\n lineHeight: props.$lineHeight,\n borderRadius: props.$hasRadius ? theme.borderRadius : props.$borderRadius,\n borderStyle: props.$borderColor && !props.$borderStyle ? 'solid' : props.$borderStyle,\n borderWidth: props.$borderColor && !props.$borderWidth ? '1px' : props.$borderWidth,\n borderColor: props.$borderColor,\n zIndex: props.$zIndex,\n boxShadow: props.$shadow,\n display: props.$display,\n pointerEvents: props.$pointerEvents,\n cursor: props.$cursor,\n textAlign: props.$textAlign,\n textTransform: props.$textTransform,\n transition: props.$transition,\n transform: props.$transform,\n animation: props.$animation,\n position: props.$position,\n overflow: props.$overflow,\n flex: props.$flex,\n flexShrink: props.$shrink,\n flexGrow: props.$grow,\n flexBasis: props.$basis,\n },\n theme,\n );\n }};\n`;\n\ntype BoxComponent = (\n props: BoxProps,\n) => JSX.Element;\n\nexport { Box };\nexport type { BoxComponent, BoxProps, TransientBoxProps };\n","import * as React from 'react';\n\nimport { styled, type CSSProperties } from 'styled-components';\n\nimport {\n handleResponsiveValues,\n type ResponsiveProperty,\n type ResponsiveThemeProperty,\n} from '../../helpers/handleResponsiveValues';\nimport { PolymorphicRef, PropsToTransientProps } from '../../types';\nimport { forwardRef } from '../../utilities/forwardRef';\nimport { Box, BoxComponent, BoxProps } from '../Box';\n\ninterface TransientFlexProps {\n alignItems?: ResponsiveProperty;\n justifyContent?: ResponsiveProperty;\n wrap?: ResponsiveProperty;\n direction?: ResponsiveProperty;\n gap?: ResponsiveThemeProperty<'spaces', 'gap'>;\n inline?: boolean;\n}\n\ntype FlexProps = BoxProps & TransientFlexProps;\n\nconst Flex = forwardRef((props: FlexProps, ref: PolymorphicRef) => {\n const { className, alignItems, direction, inline, gap, justifyContent, wrap, ...rest } = props;\n const mappedProps = {\n $alignItems: alignItems,\n $direction: direction,\n $gap: gap,\n $justifyContent: justifyContent,\n $wrap: wrap,\n $inline: inline,\n };\n\n // @ts-expect-error fix: Type 'symbol' is not assignable to type `gap?: ResponsiveThemeProperty<'spaces', 'gap'>`;\n return ;\n});\n\ntype FlexComponent = typeof Flex;\n\nconst StyledFlex = styled(Box)>`\n ${({ theme, $display = 'flex', $alignItems = 'center', $direction = 'row', ...props }) =>\n handleResponsiveValues(\n {\n gap: props.$gap,\n alignItems: $alignItems,\n justifyContent: props.$justifyContent,\n flexWrap: props.$wrap,\n flexDirection: $direction,\n display: props.$inline ? 'inline-flex' : $display,\n },\n theme,\n )};\n`;\n\nexport { Flex };\nexport type { FlexComponent, FlexProps, TransientFlexProps };\n","import { DefaultTheme, css } from 'styled-components';\n\n/* -------------------------------------------------------------------------------------------------\n * Text Variants\n * -----------------------------------------------------------------------------------------------*/\n\nconst ALPHA = 'alpha';\nconst BETA = 'beta';\nconst DELTA = 'delta';\nconst EPSILON = 'epsilon';\nconst OMEGA = 'omega';\nconst PI = 'pi';\nconst SIGMA = 'sigma';\n\nconst TEXT_VARIANTS = [ALPHA, BETA, DELTA, EPSILON, OMEGA, PI, SIGMA] as const;\n\n/* -------------------------------------------------------------------------------------------------\n * Ellipsis Style\n * -----------------------------------------------------------------------------------------------*/\n\nconst ellipsis = css`\n display: block;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Variant Style\n * -----------------------------------------------------------------------------------------------*/\n\ninterface VariantProps {\n $variant?: (typeof TEXT_VARIANTS)[number];\n theme: DefaultTheme;\n}\n\nconst variant = ({ $variant = OMEGA, theme }: VariantProps) => {\n switch ($variant) {\n case ALPHA: {\n return `\n font-weight: ${theme.fontWeights.bold};\n font-size: ${theme.fontSizes[5]};\n line-height: ${theme.lineHeights[2]};\n `;\n }\n case BETA: {\n return `\n font-weight: ${theme.fontWeights.bold};\n font-size: ${theme.fontSizes[4]};\n line-height: ${theme.lineHeights[1]};\n `;\n }\n case DELTA: {\n return `\n font-weight: ${theme.fontWeights.semiBold};\n font-size: ${theme.fontSizes[3]};\n line-height: ${theme.lineHeights[2]};\n `;\n }\n case EPSILON: {\n return `\n font-size: ${theme.fontSizes[3]};\n line-height: ${theme.lineHeights[6]};\n `;\n }\n case OMEGA: {\n return `\n font-size: ${theme.fontSizes[2]};\n line-height: ${theme.lineHeights[4]};\n `;\n }\n case PI: {\n return `\n font-size: ${theme.fontSizes[1]};\n line-height: ${theme.lineHeights[3]};\n `;\n }\n case SIGMA: {\n return `\n font-weight: ${theme.fontWeights.bold};\n font-size: ${theme.fontSizes[0]};\n line-height: ${theme.lineHeights[5]};\n text-transform: uppercase;\n `;\n }\n default: {\n return `\n font-size: ${theme.fontSizes[2]};\n `;\n }\n }\n};\n\nexport { TEXT_VARIANTS, ellipsis, variant };\nexport type { VariantProps };\n","import * as React from 'react';\n\nimport { styled, type CSSProperties } from 'styled-components';\n\nimport {\n handleResponsiveValues,\n type ResponsiveProperty,\n type ResponsiveThemeProperty,\n} from '../../helpers/handleResponsiveValues';\nimport { ellipsis, variant, type TEXT_VARIANTS } from '../../styles/type';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef, PropsToTransientProps } from '../../types';\nimport { forwardRef } from '../../utilities/forwardRef';\nimport { Box, BoxComponent, BoxProps } from '../Box';\n\ninterface TransientTypographyProps {\n ellipsis?: boolean;\n textColor?: ResponsiveThemeProperty<'colors', 'color'>;\n textDecoration?: ResponsiveProperty;\n variant?: (typeof TEXT_VARIANTS)[number];\n}\n\ntype TypographyProps = Omit, 'ref'> & TransientTypographyProps;\n\nconst Typography = forwardRef(\n (props: TypographyProps, ref: PolymorphicRef) => {\n const {\n ellipsis,\n textColor = 'currentcolor',\n textDecoration,\n textTransform,\n variant,\n lineHeight,\n fontWeight,\n fontSize,\n ...rest\n } = props;\n\n const mappedProps = {\n $ellipsis: ellipsis,\n $textColor: textColor,\n $textDecoration: textDecoration,\n $textTransform: textTransform,\n $variant: variant,\n $lineHeight: lineHeight,\n $fontWeight: fontWeight,\n $fontSize: fontSize,\n };\n\n return ;\n },\n) as TypographyComponent;\n\ntype TypographyComponent = (\n props: PolymorphicComponentPropsWithRef>,\n) => JSX.Element;\n\nconst StyledTypography = styled>(Box)>`\n ${variant}\n ${({ $ellipsis }) => ($ellipsis ? ellipsis : '')}\n\n ${({ theme, ...props }) => {\n return handleResponsiveValues(\n {\n color: props.$textColor,\n textDecoration: props.$textDecoration,\n textTransform: props.$textTransform,\n lineHeight: props.$lineHeight,\n fontWeight: props.$fontWeight,\n fontSize: props.$fontSize,\n },\n theme,\n );\n }}\n`;\n\nexport { Typography };\nexport type { TypographyProps, TypographyComponent, TransientTypographyProps };\n","import * as React from 'react';\n\nimport * as RadixAccordion from '@radix-ui/react-accordion';\nimport { CaretDown } from '@strapi/icons';\nimport { css, keyframes, styled } from 'styled-components';\n\nimport { createContext } from '../../helpers/context';\nimport { Box, BoxComponent } from '../../primitives/Box';\nimport { Flex, FlexComponent, FlexProps } from '../../primitives/Flex';\nimport { Typography } from '../../primitives/Typography';\n\ntype Size = 'S' | 'M';\ntype Variant = 'primary' | 'secondary';\n\n/* -------------------------------------------------------------------------------------------------\n * Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ContextValue {\n /**\n * @default \"S\"\n */\n size: Size;\n}\n\nconst [AccordionProvider, useAccordion] = createContext('Accordion');\n\ntype Element = HTMLDivElement;\n\ntype Props = Omit & Partial;\n\nconst Root = React.forwardRef(({ children, size = 'S', ...props }, forwardedRef) => {\n return (\n \n {children}\n \n );\n});\n\nconst AccordionRoot = styled(RadixAccordion.Root)<{ $size: Size }>`\n background-color: ${(props) => props.theme.colors.neutral0};\n\n ${(props) => {\n if (props.$size === 'S') {\n return css`\n border-radius: ${(props) => props.theme.borderRadius};\n border: solid 1px ${(props) => props.theme.colors.neutral200};\n `;\n } else {\n return css``;\n }\n }}\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Item\n * -----------------------------------------------------------------------------------------------*/\n\ntype ItemElement = HTMLDivElement;\n\ninterface ItemProps extends RadixAccordion.AccordionItemProps {}\n\nconst Item = React.forwardRef((props, forwardedRef) => {\n const { size } = useAccordion('Item');\n\n return ;\n});\n\nconst AccordionItem = styled(RadixAccordion.Item)<{ $size: Size; $disabled?: boolean }>`\n overflow: hidden;\n margin: 1px 0;\n\n &:first-child {\n border-top-left-radius: 0.3rem;\n border-top-right-radius: 0.3rem;\n margin-top: 0;\n }\n\n &:last-child {\n border-bottom-left-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n margin-bottom: 0;\n }\n\n &[data-size='S'] {\n & + & {\n border-top: solid 1px ${(props) => props.theme.colors.neutral200};\n }\n }\n\n &[data-state='open'] {\n box-shadow: 0 0 0 1px ${(props) => props.theme.colors.primary600};\n }\n\n &:not([data-disabled]):hover {\n box-shadow: 0 0 0 1px ${(props) => props.theme.colors.primary600};\n }\n\n /* This applies our desired focus effect correctly. */\n &:focus-within {\n position: relative;\n z-index: 1;\n box-shadow: 0 0 0 1px ${(props) => props.theme.colors.primary600};\n }\n\n @media (prefers-reduced-motion: no-preference) {\n transition: box-shadow ${(props) => props.theme.motion.timings['120']}\n ${(props) => props.theme.motion.easings.easeOutQuad};\n }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Trigger\n * -----------------------------------------------------------------------------------------------*/\n\ntype TriggerElement = HTMLButtonElement;\n\ninterface TriggerProps extends Omit {\n /**\n * @default \"left\"\n */\n caretPosition?: 'left' | 'right';\n description?: string;\n icon?: React.ElementType>;\n iconProps?: React.SVGProps;\n}\n\nconst Trigger = React.forwardRef(\n ({ caretPosition = 'left', description, icon: Icon, iconProps, children, ...restProps }, forwardedRef) => {\n const { size } = useAccordion('Trigger');\n\n return (\n \n {caretPosition === 'left' ? (\n \n \n \n ) : null}\n \n {Icon && size === 'S' ? (\n \n \n \n ) : null}\n \n \n {children}\n \n {description && size === 'M' ? {description} : null}\n \n \n {caretPosition === 'right' ? (\n \n \n \n ) : null}\n \n );\n },\n);\n\nconst IconBox = styled>(Box)`\n color: ${(props) => props.theme.colors.neutral500};\n display: flex;\n\n @media (prefers-reduced-motion: no-preference) {\n transition: ${(props) => props.theme.transitions.color};\n }\n`;\n\nconst TriggerIcon = styled>(Flex).attrs((props) => ({\n ...props,\n tag: 'span',\n}))<{ $size: Size }>`\n background-color: ${(props) => props.theme.colors.neutral200};\n width: ${(props) => (props.$size === 'S' ? '2.4rem' : '3.2rem')};\n height: ${(props) => (props.$size === 'S' ? '2.4rem' : '3.2rem')};\n flex: ${(props) => (props.$size === 'S' ? '0 0 2.4rem' : '0 0 3.2rem')};\n border-radius: 50%;\n justify-content: center;\n\n @media (prefers-reduced-motion: no-preference) {\n transition:\n transform ${(props) => props.theme.motion.timings['200']} ${(props) => props.theme.motion.easings.authenticMotion},\n ${(props) => props.theme.transitions.backgroundColor};\n }\n`;\n\nconst AccordionTrigger = styled(RadixAccordion.Trigger)<{ $caretPosition: TriggerProps['caretPosition']; $size: Size }>`\n display: flex;\n align-items: center;\n justify-content: ${(props) => (props.$caretPosition === 'left' ? 'flex-start' : 'space-between')};\n width: 100%;\n gap: ${(props) => props.theme.spaces[4]};\n padding-inline: ${(props) => (props.$size === 'S' ? props.theme.spaces[4] : props.theme.spaces[6])};\n padding-block: ${(props) => (props.$size === 'S' ? props.theme.spaces[3] : props.theme.spaces[6])};\n cursor: pointer;\n color: ${(props) => props.theme.colors.neutral800};\n overflow: hidden;\n\n &[data-disabled] {\n cursor: default;\n color: ${(props) => props.theme.colors.neutral600};\n }\n\n &[data-state='open'] > ${TriggerIcon} {\n transform: rotate(180deg);\n }\n\n /* we remove the default focus because the entire item should have the focus style and the default would be hidden. */\n &:focus-visible {\n outline: none;\n }\n\n @media (prefers-reduced-motion: no-preference) {\n transition: ${(props) => props.theme.transitions.color};\n }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Actions\n * -----------------------------------------------------------------------------------------------*/\n\ntype ActionsElement = HTMLSpanElement;\n\ninterface ActionsProps extends FlexProps<'span'> {}\n\nconst Actions = React.forwardRef((props, forwardedRef) => {\n const { size } = useAccordion('Trigger');\n\n return ;\n});\n\nconst ActionWrapper = styled>(Flex).attrs((props) => ({\n ...props,\n tag: 'span',\n}))<{ $size: Size }>`\n padding-inline: ${(props) => (props.$size === 'S' ? props.theme.spaces[2] : props.theme.spaces[6])};\n padding-block: ${(props) => (props.$size === 'S' ? props.theme.spaces[2] : props.theme.spaces[6])};\n\n // Remove default IconButton styles so there are no backgrounds or borders.\n & > button {\n border: none;\n background: none;\n color: ${(props) => props.theme.colors.neutral600};\n\n @media (prefers-reduced-motion: no-preference) {\n transition: ${(props) => props.theme.transitions.color};\n }\n }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Header\n * -----------------------------------------------------------------------------------------------*/\n\ntype HeaderElement = HTMLHeadingElement;\n\ninterface HeaderProps extends Omit {\n /**\n * @default \"primary\"\n */\n variant?: Variant;\n}\n\nconst Header = React.forwardRef(({ variant = 'primary', ...props }, forwardedRef) => {\n return ;\n});\n\nconst AccordionHeader = styled(RadixAccordion.Header)<{ $variant: Variant }>`\n display: flex;\n align-items: center;\n background-color: ${(props) =>\n props.$variant === 'primary' ? props.theme.colors.neutral0 : props.theme.colors.neutral100};\n\n &[data-disabled] {\n background-color: ${(props) => props.theme.colors.neutral150};\n }\n\n &:not([data-disabled]) {\n &:hover,\n &[data-state='open'] {\n background-color: ${(props) => props.theme.colors.primary100};\n\n & > ${AccordionTrigger} {\n color: ${(props) => props.theme.colors.primary600};\n\n & ${IconBox} {\n color: ${(props) => props.theme.colors.primary600};\n }\n\n & ${TriggerIcon} {\n background-color: ${(props) => props.theme.colors.primary200};\n }\n }\n\n & > ${ActionWrapper} > button {\n color: ${(props) => props.theme.colors.primary600};\n }\n }\n }\n\n @media (prefers-reduced-motion: no-preference) {\n transition: ${(props) => props.theme.transitions.backgroundColor};\n }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Content\n * -----------------------------------------------------------------------------------------------*/\n\ntype ContentElement = HTMLDivElement;\n\ninterface ContentProps extends RadixAccordion.AccordionContentProps {}\n\nconst Content = React.forwardRef((props, forwardedRef) => {\n return ;\n});\n\nconst slideDown = keyframes`\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n`;\n\nconst slideUp = keyframes`\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n`;\n\nconst AccordionContent = styled(RadixAccordion.Content)`\n overflow: hidden;\n\n @media (prefers-reduced-motion: no-preference) {\n &[data-state='open'] {\n animation: ${slideDown} ${(props) => props.theme.motion.timings['320']}\n ${(props) => props.theme.motion.easings.authenticMotion};\n }\n\n &[data-state='closed'] {\n animation: ${slideUp} ${(props) => props.theme.motion.timings['320']}\n ${(props) => props.theme.motion.easings.authenticMotion};\n }\n }\n`;\n\nexport { Root, Item, Header, Trigger, Actions, Content };\nexport type {\n ContextValue,\n Element,\n Props,\n ItemElement,\n ItemProps,\n HeaderElement,\n HeaderProps,\n TriggerElement,\n TriggerProps,\n ActionsElement,\n ActionsProps,\n ContentElement,\n ContentProps,\n Size,\n Variant,\n};\n","import { css } from 'styled-components';\n\nconst focus = css`\n position: relative;\n outline: none;\n\n &:after {\n transition-property: all;\n transition-duration: 0.2s;\n border-radius: 8px;\n content: '';\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border: 2px solid transparent;\n }\n\n &:focus-visible {\n outline: none;\n\n &:after {\n border-radius: 8px;\n content: '';\n position: absolute;\n top: -5px;\n bottom: -5px;\n left: -5px;\n right: -5px;\n border: 2px solid ${(props) => props.theme.colors.primary600};\n }\n }\n`;\n\nexport { focus };\n","import { styled } from 'styled-components';\n\nimport { PolymorphicComponentProps } from '../../types';\n\ntype VisuallyHiddenProps = PolymorphicComponentProps<\n C,\n { children?: React.ReactNode }\n>;\n\nconst VisuallyHidden = ({ tag, ...props }: VisuallyHiddenProps) => {\n const AsComponent = tag || 'span';\n\n return ;\n};\n\nconst Span = styled.span`\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n`;\n\nexport { VisuallyHidden };\n","import * as React from 'react';\n\nimport { VisuallyHidden } from '../VisuallyHidden';\n\ninterface AccessibleIconProps {\n children?: React.ReactNode;\n /**\n * The accessible label for the icon. This label will be visually hidden but announced to screen\n * reader users, similar to `alt` text for `img` tags.\n */\n label: string;\n}\n\nconst AccessibleIcon: React.FC = ({ children, label }) => {\n const child = React.Children.only(children);\n\n return (\n <>\n {React.cloneElement(child as React.ReactElement, {\n // accessibility\n 'aria-hidden': 'true',\n focusable: 'false', // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable\n })}\n {label}\n \n );\n};\n\nAccessibleIcon.displayName = 'AccessibleIcon';\n\nexport { AccessibleIcon };\nexport type { AccessibleIconProps };\n","import { DefaultTheme } from 'styled-components';\n\nimport type { AlertVariant } from './Alert';\n\ninterface StyledProps {\n theme: DefaultTheme;\n $variant: AlertVariant;\n}\n\nexport const handleBackgroundColor = (variant: AlertVariant): keyof DefaultTheme['colors'] => {\n switch (variant) {\n case 'danger':\n return 'danger100';\n case 'success':\n return 'success100';\n case 'warning':\n return 'warning100';\n default:\n return 'primary100';\n }\n};\n\n// border-color is always 1 shade darker than background-color\nexport const handleBorderColor = (variant: AlertVariant): keyof DefaultTheme['colors'] => {\n return handleBackgroundColor(variant).replace('100', '200') as keyof DefaultTheme['colors'];\n};\n\nexport const handleIconColor = ({ theme, $variant }: StyledProps) => {\n if ($variant === 'danger') {\n return theme.colors.danger700;\n }\n\n if ($variant === 'success') {\n return theme.colors.success700;\n }\n\n if ($variant === 'warning') {\n return theme.colors.warning700;\n }\n\n return theme.colors.primary700;\n};\n","import * as React from 'react';\n\nimport { Information, CheckCircle, WarningCircle, Cross } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nimport { Box, BoxComponent, BoxProps } from '../../primitives/Box';\nimport { Flex, FlexComponent } from '../../primitives/Flex';\nimport { Typography } from '../../primitives/Typography';\nimport { focus } from '../../styles/buttons';\nimport { AccessibleIcon } from '../../utilities/AccessibleIcon';\n\nimport { handleBackgroundColor, handleBorderColor, handleIconColor } from './utils';\n\nconst CloseButton = styled>(Box)`\n ${focus};\n`;\n\nconst AlertIconWrapper = styled(Flex)<{ $variant: AlertVariant }>`\n svg {\n height: 100%;\n width: 100%;\n\n path {\n fill: ${handleIconColor};\n }\n }\n`;\n\ninterface AlertIconProps extends React.SVGProps {\n variant: AlertVariant;\n}\n\nconst AlertIcon = ({ variant, ...props }: AlertIconProps) => {\n if (variant === 'success') {\n return ;\n }\n\n if (variant === 'danger' || variant === 'warning') {\n return ;\n }\n\n return ;\n};\n\nconst ActionBox = styled(Box)<{ $variant: AlertVariant }>`\n & a > span {\n color: ${handleIconColor};\n }\n\n svg path {\n fill: ${handleIconColor};\n }\n`;\n\nexport type AlertVariant = 'success' | 'danger' | 'default' | 'warning';\n\nexport interface AlertProps extends BoxProps {\n /**\n * Render a React element below the body of an `Alert` (Mainly used to render a Link).\n */\n action?: React.ReactNode;\n /**\n * The body of the `Alert` (Will be rendered under the `Alert` title).\n */\n children: React.ReactNode;\n /**\n * Accessible label for the close icon button.\n */\n closeLabel: string;\n /**\n * The callback invoked when click on the close icon button.\n */\n onClose?: () => void;\n /**\n * The title of the `Alert`.\n */\n title?: string;\n /**\n * Changes the element, as which a component will render (similar to styled-components).\n */\n titleAs?: React.ElementType;\n /**\n * `Alert` color variant.\n */\n variant?: AlertVariant;\n}\n\nexport const Alert = ({\n title,\n children,\n variant = 'default',\n onClose,\n closeLabel,\n titleAs = 'p',\n action,\n ...props\n}: AlertProps) => {\n return (\n \n \n \n \n\n \n {title && (\n \n {title}\n \n )}\n\n \n {children}\n \n\n {action && {action}}\n \n\n \n \n \n \n \n \n );\n};\n","import * as React from 'react';\n\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\n\ntype UseControllableStateParams = {\n prop?: T | undefined;\n defaultProp?: T | undefined;\n onChange?: (state: T) => void;\n};\n\ntype SetStateFn = (prevState?: T) => T;\n\nfunction useControllableState({ prop, defaultProp, onChange = () => {} }: UseControllableStateParams) {\n const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });\n const isControlled = prop !== undefined;\n const value = isControlled ? prop : uncontrolledProp;\n const handleChange = useCallbackRef(onChange);\n\n const setValue: React.Dispatch> = React.useCallback(\n (nextValue) => {\n if (isControlled) {\n const setter = nextValue as SetStateFn;\n const value = typeof nextValue === 'function' ? setter(prop) : nextValue;\n if (value !== prop) handleChange(value as T);\n } else {\n setUncontrolledProp(nextValue);\n }\n },\n [isControlled, prop, setUncontrolledProp, handleChange],\n );\n\n return [value, setValue] as const;\n}\n\nfunction useUncontrolledState({ defaultProp, onChange }: Omit, 'prop'>) {\n const uncontrolledState = React.useState(defaultProp);\n const [value] = uncontrolledState;\n const prevValueRef = React.useRef(value);\n const handleChange = useCallbackRef(onChange);\n\n React.useEffect(() => {\n if (prevValueRef.current !== value) {\n handleChange(value as T);\n prevValueRef.current = value;\n }\n }, [value, prevValueRef, handleChange]);\n\n return uncontrolledState;\n}\n\nexport { useControllableState, useUncontrolledState as _internaluseUncontrolledState };\n","import { keyframes } from 'styled-components';\n\nconst EASINGS = {\n easeInSine: 'cubic-bezier(0.47, 0, 0.745, 0.715)',\n easeOutSine: 'cubic-bezier(0.39, 0.575, 0.565, 1)',\n easeInOutSine: 'cubic-bezier(0.39, 0.575, 0.565, 1)',\n\n easeInQuad: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',\n easeOutQuad: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',\n easeInOutQuad: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',\n\n easeInCubic: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',\n easeOutCubic: 'cubic-bezier(0.215, 0.61, 0.355, 1)',\n easeInOutCubic: 'cubic-bezier(0.215, 0.61, 0.355, 1)',\n\n easeInQuart: 'cubic-bezier(0.895, 0.03, 0.685, 0.22)',\n easeOutQuart: 'cubic-bezier(0.165, 0.84, 0.44, 1)',\n easeInOutQuart: 'cubic-bezier(0.165, 0.84, 0.44, 1)',\n\n easeInQuint: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',\n easeOutQuint: 'cubic-bezier(0.23, 1, 0.32, 1)',\n easeInOutQuint: 'cubic-bezier(0.23, 1, 0.32, 1)',\n\n easeInExpo: 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',\n easeOutExpo: 'cubic-bezier(0.19, 1, 0.22, 1)',\n easeInOutExpo: 'cubic-bezier(0.19, 1, 0.22, 1)',\n\n easeInCirc: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)',\n easeOutCirc: 'cubic-bezier(0.075, 0.82, 0.165, 1)',\n easeInOutCirc: 'cubic-bezier(0.075, 0.82, 0.165, 1)',\n\n easeInBack: 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',\n easeOutBack: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n easeInOutBack: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',\n\n easeInOutFast: 'cubic-bezier(1,0,0,1)',\n\n authenticMotion: 'cubic-bezier(.4,0,.2,1)',\n};\n\nconst TIMINGS = {\n '320': '320ms',\n '200': '200ms',\n '120': '120ms',\n};\n\n/**\n * A collection of common transitions attached to the theme to be used.\n */\nconst TRANSITIONS = {\n color: `color ${TIMINGS['120']} ${EASINGS.easeOutQuad}`,\n backgroundColor: `background-color ${TIMINGS['120']} ${EASINGS.easeOutQuad}`,\n};\n\nconst ANIMATIONS = {\n overlayFadeIn: keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 0.2;\n }\n `,\n modalPopIn: keyframes`\n from {\n transform:translate(-50%, -50%) scale(0.8);\n opacity: 0;\n }\n to {\n transform: translate(-50%, -50%) scale(1);\n opacity: 1;\n }\n `,\n modalPopOut: keyframes`\n from {\n transform: translate(-50%, -50%) scale(1);\n opacity: 1;\n }\n to {\n transform:translate(-50%, -50%) scale(0.8);\n opacity: 0;\n }\n `,\n popIn: keyframes`\n from {\n transform: scale(0.8);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n `,\n popOut: keyframes`\n from {\n transform: scale(1);\n opacity: 1;\n }\n to {\n transform: scale(0.8);\n opacity: 0;\n }\n `,\n slideDownIn: keyframes`\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n `,\n slideDownOut: keyframes`\n from {\n opacity: 1;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n transform: translateY(-10px);\n }\n `,\n slideUpIn: keyframes`\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n `,\n slideUpOut: keyframes`\n from {\n opacity: 1;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n transform: translateY(10px);\n }\n `,\n fadeIn: keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n `,\n fadeOut: keyframes`\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n `,\n};\n\nexport { ANIMATIONS, EASINGS, TRANSITIONS, TIMINGS };\n","import * as React from 'react';\n\nimport * as Avatar from '@radix-ui/react-avatar';\nimport * as Tooltip from '@radix-ui/react-tooltip';\nimport { css, styled } from 'styled-components';\n\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { Box, BoxComponent } from '../../primitives/Box';\nimport { Flex, FlexComponent, FlexProps } from '../../primitives/Flex';\nimport { Typography } from '../../primitives/Typography';\nimport { ANIMATIONS } from '../../styles/motion';\n\n/* -------------------------------------------------------------------------------------------------\n * Item\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * The size of the avatar in pixels.\n */\nconst SIZE = 32;\n/**\n * The scale of the preview image relative to the avatar.\n */\nconst PREVIEW_SCALE = 2;\n\ntype ItemElement = HTMLSpanElement;\n\ninterface ItemProps extends Avatar.AvatarProps, Pick {\n /**\n * @default 600\n * @description Useful for delaying rendering so it only\n * appears for those with slower connections.\n */\n delayMs?: Avatar.AvatarFallbackProps['delayMs'];\n fallback: React.ReactNode;\n /**\n * @default false\n * @description Useful for showing a preview of the image\n * on hover in a tooltip.\n */\n preview?: boolean;\n}\n\nconst Item = React.forwardRef(\n ({ onLoadingStatusChange, delayMs = 600, src, alt, fallback, preview = false, ...restProps }, forwardedRef) => {\n const [loadingStatus, setLoadingStatus] = useControllableState({\n onChange: onLoadingStatusChange,\n });\n const [tooltipOpen, setTooltipOpen] = React.useState(false);\n\n const hasPreview = preview && loadingStatus === 'loaded';\n\n const handleTooltipOpen = (isOpen: boolean) => {\n if (hasPreview) {\n setTooltipOpen(isOpen);\n }\n };\n\n return (\n \n \n \n {hasPreview ? (\n \n ) : null}\n \n \n \n {fallback}\n \n \n \n \n {hasPreview ? (\n \n \n \n \n \n ) : null}\n \n );\n },\n);\n\nconst avatarStyles = css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n overflow: hidden;\n user-select: none;\n overflow: hidden;\n border-radius: 50%;\n`;\n\nconst imgStyles = css`\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: inherit;\n`;\n\nconst AvatarRoot = styled(Avatar.Root)`\n position: relative;\n z-index: 0;\n ${avatarStyles}\n width: ${SIZE / 10}rem;\n height: ${SIZE / 10}rem;\n /* TODO: we should get the user email & hash it to turn it into a hex-value so different emails can consistently get a different background */\n background-color: ${(p) => p.theme.colors.primary600};\n color: ${(p) => p.theme.colors.neutral0};\n`;\n\nconst AvatarOverlay = styled(Box)`\n @media (prefers-reduced-motion: no-preference) {\n transition: opacity ${(props) => props.theme.motion.timings['200']}\n ${(props) => props.theme.motion.easings.authenticMotion};\n }\n`;\n\nconst AvatarImage = styled(Avatar.Image)`\n ${imgStyles}\n`;\n\nconst PreviewContent = styled(Tooltip.Content)`\n ${avatarStyles}\n width: ${(SIZE * PREVIEW_SCALE) / 10}rem;\n height: ${(SIZE * PREVIEW_SCALE) / 10}rem;\n\n @media (prefers-reduced-motion: no-preference) {\n animation: ${ANIMATIONS.fadeIn} ${(props) => props.theme.motion.timings['200']}\n ${(props) => props.theme.motion.easings.authenticMotion};\n }\n`;\n\nconst PreviewImg = styled.img`\n ${imgStyles}\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Group\n * -----------------------------------------------------------------------------------------------*/\n\ntype GroupElement = HTMLDivElement;\n\ninterface GroupProps extends Omit {}\n\nconst Group = React.forwardRef((props, forwarededRef) => {\n return ;\n});\n\nconst GroupFlex = styled(Flex)`\n & > ${AvatarRoot} + ${AvatarRoot} {\n margin-left: -${SIZE / 10 / 2}rem;\n }\n`;\n\nexport { Item, Group };\nexport type { ItemElement, ItemProps, GroupElement, GroupProps };\n","import { css, styled } from 'styled-components';\n\nimport { Flex, FlexComponent, FlexProps } from '../../primitives/Flex';\nimport { Typography } from '../../primitives/Typography';\nimport { DefaultThemeOrCSSProp } from '../../types';\n\ntype BadgeSize = 'S' | 'M';\n\ninterface BadgeProps extends FlexProps {\n /**\n * If `true`, it changes the `backgroundColor` to `primary200` and the `textColor` to `primary600`\n */\n active?: boolean;\n backgroundColor?: DefaultThemeOrCSSProp<'colors', 'background'>;\n /**\n * @default 'M'\n */\n size?: BadgeSize;\n textColor?: DefaultThemeOrCSSProp<'colors', 'color'>;\n}\n\nconst Badge = ({\n active = false,\n size = 'M',\n textColor = 'neutral600',\n backgroundColor = 'neutral150',\n children,\n minWidth = 5,\n ...props\n}: BadgeProps) => {\n const paddingX = size === 'S' ? 1 : 2;\n\n return (\n \n \n {children}\n \n \n );\n};\n\nconst Base = styled(Flex)<{ $size: BadgeSize }>`\n border-radius: ${({ theme, $size }) => ($size === 'S' ? '2px' : theme.borderRadius)};\n ${({ $size, theme }) => {\n if ($size === 'S') {\n return css`\n padding-block: 0.3rem;\n padding-inline ${theme.spaces[1]}\n `;\n }\n\n return css`\n padding-block: 0.7rem;\n padding-inline ${theme.spaces[2]}\n `;\n }};\n`;\n\nexport { Badge };\nexport type { BadgeProps, BadgeSize };\n","import * as React from 'react';\n\nimport { styled } from 'styled-components';\n\nimport { Box, BoxComponent, BoxProps } from '../../primitives/Box';\nimport { forwardRef } from '../../utilities/forwardRef';\n\ntype BaseLinkProps = BoxProps & {\n disabled?: boolean;\n isExternal?: boolean;\n};\n\nconst BaseLinkImpl = forwardRef(\n ({ href, disabled = false, isExternal = false, ...props }, ref) => {\n return (\n \n );\n },\n);\n\nconst BaseLink = styled>(Box)`\n text-decoration: none;\n\n &:visited {\n color: inherit;\n }\n`;\n\ntype BaseLinkComponent = (props: BaseLinkProps) => React.ReactNode;\n\nexport { BaseLinkImpl as BaseLink };\nexport type { BaseLinkProps, BaseLinkComponent };\n","import * as React from 'react';\n\nimport { Box } from '../../primitives/Box';\nimport { Typography } from '../../primitives/Typography';\n\nexport const Divider = () => {\n return (\n \n \n /\n \n \n );\n};\n\nDivider.displayName = 'Divider';\n","import * as React from 'react';\n\nimport { styled } from 'styled-components';\n\nimport { Box } from '../../primitives/Box';\nimport { Flex, FlexComponent, FlexProps } from '../../primitives/Flex';\n\nimport { Divider } from './Divider';\n\nconst AlignedList = styled>(Flex)`\n // CrumbLinks do have padding-x, because they need to have a\n // interaction effect, which mis-aligns the breadcrumbs on the left.\n // This normalizes the behavior by moving the first item to left by\n // the same amount it has inner padding\n & > *:first-child {\n margin-left: ${({ theme }) => `calc(-1*${theme.spaces[2]})`};\n }\n`;\n\nexport interface BreadcrumbsProps extends FlexProps {\n label?: string;\n}\n\nexport const Breadcrumbs = React.forwardRef(\n ({ label, children, ...props }, forwardedRef) => {\n const childrenArray = React.Children.toArray(children);\n\n return (\n \n \n {React.Children.map(childrenArray, (child, index) => {\n const shouldDisplayDivider = childrenArray.length > 1 && index + 1 < childrenArray.length;\n\n return (\n \n {child}\n {shouldDisplayDivider && }\n \n );\n })}\n \n \n );\n },\n);\n\nBreadcrumbs.displayName = 'Breadcrumbs';\n","import * as React from 'react';\n\nimport { Box } from '../../primitives/Box';\nimport { Typography, TypographyProps } from '../../primitives/Typography';\n\nexport interface CrumbProps extends TypographyProps {\n isCurrent?: boolean;\n}\n\nexport const Crumb = React.forwardRef(\n ({ children, isCurrent = false, ...props }, forwardedRef) => (\n \n \n {children}\n \n \n ),\n);\n\nCrumb.displayName = 'Crumb';\n","import * as React from 'react';\n\nimport { styled } from 'styled-components';\n\nimport { BaseLink, BaseLinkProps } from '../BaseLink';\n\nconst StyledLink = styled(BaseLink)`\n border-radius: ${({ theme }) => theme.borderRadius};\n color: ${({ theme }) => theme.colors.neutral600};\n font-size: ${({ theme }) => theme.fontSizes[1]};\n line-height: ${({ theme }) => theme.lineHeights[4]};\n padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[2]}`};\n text-decoration: none;\n\n :hover,\n :focus {\n background-color: ${({ theme }) => theme.colors.neutral200};\n color: ${({ theme }) => theme.colors.neutral700};\n }\n`;\n\nexport const CrumbLink = React.forwardRef(({ children, ...props }, forwardedRef) => (\n \n {children}\n \n));\n\nCrumbLink.displayName = 'CrumbLink';\n","export const stripReactIdOfColon = (str: string): string => str.replaceAll(':', '');\n","import * as React from 'react';\n\ntype PossibleRef = React.Ref | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef(ref: PossibleRef, value: T) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject).current = value;\n }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs(...refs: PossibleRef[]) {\n return (node: T) => refs.forEach((ref) => setRef(ref, node));\n}\n\n/**\n * Takes multiple React like refs either React.Ref or a callback:\n * (node: T) => void and returns a single function that can be\n * passed to a React component as a ref.\n *\n * Example:\n * ```tsx\n * import { useComposedRefs } from '../hooks/useComposedRefs';\n *\n * const Component = React.forwardRef((props, forwardedRef) => {\n * const ref = useComposedRefs(internalRef, forwardedRef);\n *\n * React.useEffect(() => {\n * ref.current.focus();\n * }, [ref]);\n *\n * return \n * }\n * ```\n */\nfunction useComposedRefs(...refs: PossibleRef[]) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n","import { useEffect, useLayoutEffect } from 'react';\n\n// For server-side rendering: https://github.com/react-spring/zustand/pull/34\n// Deno support: https://github.com/pmndrs/zustand/issues/347\n\nexport const isSSR = () =>\n typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\\//.test(window.navigator.userAgent);\n\n/**\n * Use this to read layout from the DOM and synchronously\n * re-render if the isSSR returns true. Updates scheduled\n * inside `useIsomorphicLayoutEffect` will be flushed\n * synchronously in the browser, before the browser has\n * a chance to paint.\n */\nconst useIsomorphicLayoutEffect = isSSR() ? useEffect : useLayoutEffect;\n\nexport { useIsomorphicLayoutEffect };\n","import * as React from 'react';\n\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\n// Inspired by radix-ui useId hook https://github.com/radix-ui/primitives/blob/main/packages/react/id/src/id.tsx\n// We `toString()` to prevent bundlers from trying to `import { useId } from 'react';`\nconst useReactId = (React as any)['useId'.toString()] || (() => undefined);\nlet count = 0;\n\nexport const useId = (initialId?: string | number | undefined): string => {\n const [id, setId] = React.useState(useReactId());\n\n // React versions older than 18 will have client-side ids only.\n useIsomorphicLayoutEffect(() => {\n if (!initialId) setId((reactId) => reactId ?? String(count++));\n }, [initialId]);\n\n return initialId?.toString() ?? (id || '');\n};\n","import * as React from 'react';\n\nimport { useCallbackRef } from '@strapi/ui-primitives';\n\ninterface UseIntersectionOptions {\n selectorToWatch: string;\n skipWhen?: boolean;\n}\n\n/**\n * TODO: refactor this before v2 stable.\n */\n\nexport const useIntersection = (\n scrollableAreaRef: React.MutableRefObject,\n callback: (entry: IntersectionObserverEntry) => void,\n { selectorToWatch, skipWhen = false }: UseIntersectionOptions,\n) => {\n const handleIntersection = useCallbackRef(callback);\n\n React.useEffect(() => {\n if (skipWhen || !scrollableAreaRef.current) return;\n\n const options = {\n root: scrollableAreaRef.current,\n rootMargin: '0px',\n };\n\n const onEnterZone: IntersectionObserverCallback = (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting && scrollableAreaRef.current) {\n if (scrollableAreaRef.current.scrollHeight > scrollableAreaRef.current.clientHeight) {\n handleIntersection(entry);\n }\n }\n });\n };\n\n const observer = new IntersectionObserver(onEnterZone, options);\n /**\n * @note We need to escape the selector because we use `React.useId` to generate our ids an\n * they contain `:` which is not a valid selector because it's part of the CSS spec\n */\n const target = scrollableAreaRef.current.querySelector(selectorToWatch);\n\n if (target) {\n observer.observe(target);\n }\n\n return () => {\n observer.disconnect();\n };\n }, [skipWhen, handleIntersection, selectorToWatch, scrollableAreaRef]);\n};\n","export const SUCCESS_LIGHT = 'success-light';\nexport const DANGER_LIGHT = 'danger-light';\nexport const DEFAULT = 'default';\nexport const TERTIARY = 'tertiary';\nexport const SECONDARY = 'secondary';\nexport const DANGER = 'danger';\nexport const SUCCESS = 'success';\nexport const GHOST = 'ghost';\n\nexport const LIGHT_VARIANTS = [SUCCESS_LIGHT, DANGER_LIGHT] as const;\nexport const VARIANTS = [DEFAULT, TERTIARY, SECONDARY, DANGER, SUCCESS, GHOST, ...LIGHT_VARIANTS] as const;\nexport const BUTTON_SIZES = ['XS', 'S', 'M', 'L'] as const;\n\nexport type ButtonVariant = (typeof VARIANTS)[number];\nexport type ButtonSize = (typeof BUTTON_SIZES)[number];\n","import { DefaultTheme, css } from 'styled-components';\n\nimport {\n LIGHT_VARIANTS,\n VARIANTS,\n SECONDARY,\n TERTIARY,\n DEFAULT,\n GHOST,\n DANGER,\n SUCCESS,\n DANGER_LIGHT,\n SUCCESS_LIGHT,\n type ButtonVariant,\n} from './constants';\n\nexport const getVariantColorName = (variant: ButtonVariant): 'success' | 'danger' | 'neutral' | 'primary' => {\n if (variant === SUCCESS_LIGHT || variant === DANGER_LIGHT) {\n return `${variant.substring(0, variant.lastIndexOf('-'))}` as 'success' | 'danger';\n }\n if (variant === TERTIARY) {\n return 'neutral';\n }\n if (variant === DEFAULT || variant === SECONDARY || VARIANTS.every((vari) => vari !== variant)) {\n return 'primary';\n }\n\n // @ts-expect-error ghost is a variant, but ghostXXX is not any color...\n return `${variant}`;\n};\n\nexport const getDisabledStyle = ({ theme }: { theme: DefaultTheme }) => {\n return css`\n border: 1px solid ${theme.colors.neutral200};\n background: ${theme.colors.neutral150};\n color: ${theme.colors.neutral600};\n cursor: default;\n `;\n};\n\nexport const getHoverStyle = ({ theme, $variant }: { theme: DefaultTheme; $variant: ButtonVariant }) => {\n if ([...LIGHT_VARIANTS, SECONDARY].includes($variant)) {\n return css`\n background-color: ${theme.colors.neutral0};\n `;\n }\n if ($variant === TERTIARY) {\n return css`\n background-color: ${theme.colors.neutral100};\n `;\n }\n\n if ($variant === GHOST) {\n return css`\n background-color: ${theme.colors.neutral100};\n `;\n }\n\n if ($variant === DEFAULT) {\n return css`\n border: 1px solid ${theme.colors.buttonPrimary500};\n background: ${theme.colors.buttonPrimary500};\n `;\n }\n\n return css`\n border: 1px solid ${theme.colors[`${getVariantColorName($variant)}500`]};\n background: ${theme.colors[`${getVariantColorName($variant)}500`]};\n `;\n};\n\nexport const getActiveStyle = ({ theme, $variant }: { theme: DefaultTheme; $variant: ButtonVariant }) => {\n if ([...LIGHT_VARIANTS, SECONDARY].includes($variant)) {\n return css`\n background-color: ${theme.colors.neutral0};\n border: 1px solid ${theme.colors[`${getVariantColorName($variant)}600`]};\n color: ${theme.colors[`${getVariantColorName($variant)}600`]};\n `;\n }\n if ($variant === TERTIARY || $variant === GHOST) {\n return css`\n background-color: ${theme.colors.neutral150};\n `;\n }\n\n return css`\n border: 1px solid ${theme.colors[`${getVariantColorName($variant)}600`]};\n background: ${theme.colors[`${getVariantColorName($variant)}600`]};\n `;\n};\n\nexport const getVariantStyle = ({ theme, $variant }: { theme: DefaultTheme; $variant: ButtonVariant }) => {\n switch ($variant) {\n case DANGER_LIGHT:\n case SUCCESS_LIGHT:\n case SECONDARY: {\n return css`\n border: 1px solid ${theme.colors[`${getVariantColorName($variant)}200`]};\n background: ${theme.colors[`${getVariantColorName($variant)}100`]};\n color: ${theme.colors[`${getVariantColorName($variant)}700`]};\n `;\n }\n case TERTIARY: {\n return css`\n border: 1px solid ${theme.colors.neutral200};\n background: ${theme.colors.neutral0};\n color: ${theme.colors.neutral800};\n `;\n }\n case GHOST: {\n return css`\n border: 1px solid transparent;\n background: transparent;\n color: ${theme.colors.neutral800};\n\n svg {\n fill: ${theme.colors.neutral500};\n }\n `;\n }\n case SUCCESS:\n case DANGER: {\n return css`\n border: 1px solid ${theme.colors[`${getVariantColorName($variant)}600`]};\n background: ${theme.colors[`${getVariantColorName($variant)}600`]};\n color: ${theme.colors.neutral0};\n `;\n }\n default: {\n return css`\n border: 1px solid ${theme.colors.buttonPrimary600};\n background: ${theme.colors.buttonPrimary600};\n color: ${theme.colors.buttonNeutral0};\n `;\n }\n }\n};\n","import * as React from 'react';\n\nimport { Loader } from '@strapi/icons';\nimport { styled, keyframes } from 'styled-components';\n\nimport { Flex, FlexComponent, FlexProps } from '../../primitives/Flex';\nimport { Typography } from '../../primitives/Typography';\nimport { PolymorphicRef, PropsToTransientProps } from '../../types';\nimport { forwardRef } from '../../utilities/forwardRef';\n\nimport { BUTTON_SIZES, ButtonVariant, ButtonSize, DEFAULT } from './constants';\nimport { getDisabledStyle, getHoverStyle, getActiveStyle, getVariantStyle } from './utils';\n\ntype ButtonProps = FlexProps & {\n disabled?: boolean;\n endIcon?: React.ReactNode;\n fullWidth?: boolean;\n loading?: boolean;\n onClick?: (event: React.MouseEvent) => void;\n size?: ButtonSize;\n startIcon?: React.ReactNode;\n variant?: ButtonVariant;\n};\n\nconst Button = forwardRef(\n (\n {\n variant = DEFAULT,\n startIcon,\n endIcon,\n disabled = false,\n children,\n onClick,\n size = BUTTON_SIZES[1],\n loading = false,\n fullWidth = false,\n ...props\n }: ButtonProps,\n ref: PolymorphicRef,\n ) => {\n const isDisabled = disabled || loading;\n\n const handleClick: React.MouseEventHandler = (e) => {\n if (!isDisabled && onClick) {\n onClick(e);\n }\n };\n\n return (\n \n {(startIcon || loading) && (\n \n {loading ? : startIcon}\n \n )}\n\n \n {children}\n \n\n {endIcon && (\n \n {endIcon}\n \n )}\n \n );\n },\n);\n\ntype ButtonComponent = (props: ButtonProps) => React.ReactNode;\n\nconst rotation = keyframes`\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(359deg);\n }\n`;\n\nconst LoaderAnimated = styled(Loader)`\n animation: ${rotation} 2s infinite linear;\n will-change: transform;\n`;\n\ntype ButtonWrapperProps = PropsToTransientProps>>;\n\nconst ButtonWrapper = styled>(Flex)`\n height: ${({ theme, $size }) => theme.sizes.button[$size]};\n text-decoration: none;\n ${getVariantStyle}\n\n &:hover {\n ${getHoverStyle}\n }\n\n &:active {\n ${getActiveStyle}\n }\n\n &[aria-disabled='true'] {\n ${getDisabledStyle}\n }\n\n @media (prefers-reduced-motion: no-preference) {\n transition:\n ${(props) => props.theme.transitions.backgroundColor},\n ${(props) => props.theme.transitions.color},\n border-color ${(props) => props.theme.motion.timings['200']} ${(props) => props.theme.motion.easings.easeOutQuad};\n }\n`;\n\nexport { Button };\nexport type { ButtonComponent, ButtonProps };\n","import * as React from 'react';\n\nimport * as Tooltip from '@radix-ui/react-tooltip';\nimport { styled } from 'styled-components';\n\nimport { Typography } from '../../primitives/Typography';\nimport { ANIMATIONS } from '../../styles/motion';\n\ntype TooltipElement = HTMLDivElement;\n\ninterface TooltipProps extends Tooltip.TooltipContentProps {\n children?: React.ReactNode;\n defaultOpen?: boolean;\n /**\n * The duration from when the pointer enters the trigger until the tooltip gets opened. This will\n * override the prop with the same name passed to Provider.\n * @default 500\n */\n delayDuration?: number;\n /**\n * @deprecated Use `label` instead.\n */\n description?: string;\n /**\n * When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.\n * @default false\n */\n disableHoverableContent?: boolean;\n label?: React.ReactNode;\n onOpenChange?: (open: boolean) => void;\n open?: boolean;\n}\n\nconst TooltipImpl = React.forwardRef(\n (\n {\n children,\n description,\n label,\n defaultOpen,\n open,\n onOpenChange,\n delayDuration = 500,\n disableHoverableContent,\n ...restProps\n },\n forwardedRef,\n ) => {\n if (!label && !description) return children;\n\n return (\n \n {children}\n \n \n \n {label || description}\n \n \n \n \n );\n },\n);\n\nconst TooltipContent = styled(Tooltip.Content)`\n background-color: ${(props) => props.theme.colors.neutral900};\n color: ${(props) => props.theme.colors.neutral0};\n padding-inline: ${(props) => props.theme.spaces[2]};\n padding-block: ${(props) => props.theme.spaces[2]};\n border-radius: ${(props) => props.theme.borderRadius};\n z-index: ${(props) => props.theme.zIndices.tooltip};\n will-change: opacity;\n transform-origin: var(--radix-tooltip-content-transform-origin);\n\n @media (prefers-reduced-motion: no-preference) {\n animation: ${ANIMATIONS.fadeIn} ${(props) => props.theme.motion.timings['200']}\n ${(props) => props.theme.motion.easings.authenticMotion};\n }\n`;\n\nexport { TooltipImpl as Tooltip };\nexport type { TooltipProps, TooltipElement };\n","import * as React from 'react';\n\nimport { css, styled } from 'styled-components';\n\nimport { Flex, FlexComponent, FlexProps } from '../../primitives/Flex';\nimport { PolymorphicRef, PropsToTransientProps } from '../../types';\nimport { AccessibleIcon } from '../../utilities/AccessibleIcon';\nimport { forwardRef } from '../../utilities/forwardRef';\nimport { ButtonProps } from '../Button';\nimport { getActiveStyle, getDisabledStyle, getHoverStyle, getVariantStyle } from '../Button/utils';\nimport { Tooltip } from '../Tooltip';\n\ntype IconButtonProps = FlexProps &\n Pick & {\n children: React.ReactNode;\n disabled?: boolean;\n /**\n * This isn't visually rendered, but required for accessibility.\n */\n label: string;\n onClick?: React.MouseEventHandler;\n /**\n * @default true\n */\n withTooltip?: boolean;\n };\n\nconst IconButton = forwardRef(\n (\n {\n label,\n background,\n children,\n disabled = false,\n onClick,\n size = 'S',\n variant = 'tertiary',\n withTooltip = true,\n ...restProps\n }: IconButtonProps,\n ref: PolymorphicRef,\n ) => {\n const handleClick: React.MouseEventHandler = (e) => {\n if (!disabled && onClick) {\n onClick(e);\n }\n };\n\n const component = (\n \n {children}\n \n );\n\n return withTooltip ? {component} : component;\n },\n);\n\ntype IconButtonComponent = (props: IconButtonProps) => React.ReactNode;\n\ntype IconButtonWrapperProps = PropsToTransientProps>>;\n\nconst IconButtonWrapper = styled>(Flex)`\n text-decoration: none;\n\n ${(props) => {\n // NOTE! the border adds `1px` on each edge, so the padding accounts for this.\n switch (props.$size) {\n case 'XS': {\n return css`\n padding-block: 0.25rem;\n padding-inline: 0.25rem;\n `;\n }\n case 'S': {\n return css`\n padding-block: 0.7rem;\n padding-inline: 0.7rem;\n `;\n }\n case 'M': {\n return css`\n padding-block: 0.9rem;\n padding-inline: 0.9rem;\n `;\n }\n case 'L': {\n return css`\n padding-block: 1.1rem;\n padding-inline: 1.1rem;\n `;\n }\n }\n }}\n ${getVariantStyle}\n ${(props) =>\n props.$variant === 'tertiary'\n ? css`\n color: ${props.theme.colors.neutral500};\n `\n : ''}\n\n &:hover {\n ${getHoverStyle}\n ${(props) =>\n props.$variant === 'tertiary'\n ? css`\n color: ${props.theme.colors.neutral600};\n `\n : ''}\n }\n\n &:active {\n ${getActiveStyle}\n }\n\n &[aria-disabled='true'] {\n ${getDisabledStyle}\n }\n\n @media (prefers-reduced-motion: no-preference) {\n transition:\n ${(props) => props.theme.transitions.backgroundColor},\n ${(props) => props.theme.transitions.color},\n border-color ${(props) => props.theme.motion.timings['200']} ${(props) => props.theme.motion.easings.easeOutQuad};\n }\n`;\n\nconst IconButtonGroup = styled(Flex)`\n & ${IconButtonWrapper}:first-child {\n border-radius: ${({ theme }) => `${theme.borderRadius} 0 0 ${theme.borderRadius}`};\n }\n\n & ${IconButtonWrapper}:last-child {\n border-radius: ${({ theme }) => `0 ${theme.borderRadius} ${theme.borderRadius} 0`};\n }\n\n & ${IconButtonWrapper} {\n border-radius: 0;\n\n & + ${IconButtonWrapper} {\n border-left: none;\n }\n }\n`;\n\nexport { IconButton, IconButtonGroup };\nexport type { IconButtonProps, IconButtonComponent };\n","import * as React from 'react';\n\nimport { ExternalLink } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nimport { Typography } from '../../primitives/Typography';\nimport { focus } from '../../styles/buttons';\nimport { PolymorphicRef } from '../../types';\nimport { forwardRef } from '../../utilities/forwardRef';\nimport { BaseLink, BaseLinkComponent, BaseLinkProps } from '../BaseLink';\n\ntype LinkProps = BaseLinkProps & {\n startIcon?: React.ReactNode;\n endIcon?: React.ReactNode;\n /**\n * @default false\n */\n isExternal?: boolean;\n};\n\nconst Link = forwardRef(\n (\n { children, href, disabled = false, startIcon, endIcon, isExternal = false, ...props }: LinkProps,\n ref: PolymorphicRef,\n ) => {\n return (\n \n {startIcon}\n {children}\n {endIcon}\n {href && !endIcon && isExternal && }\n \n );\n },\n);\n\ntype LinkComponent = (props: LinkProps) => React.ReactNode;\n\nconst LinkWrapper = styled(BaseLink)`\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n gap: ${({ theme }) => theme.spaces[2]};\n pointer-events: ${({ disabled }) => (disabled ? 'none' : undefined)};\n\n svg {\n font-size: 1rem;\n\n path {\n fill: ${({ disabled, theme }) => (disabled ? theme.colors.neutral600 : theme.colors.primary600)};\n }\n }\n\n &:hover {\n & > span {\n color: ${({ theme }) => theme.colors.primary500};\n }\n\n svg path {\n fill: ${({ theme }) => theme.colors.primary500};\n }\n }\n\n &:active {\n color: ${({ theme }) => theme.colors.primary700};\n }\n\n ${focus};\n`;\n\nexport { Link };\nexport type { LinkProps, LinkComponent };\n","import * as React from 'react';\n\nimport * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport { CaretDown, ChevronRight } from '@strapi/icons';\nimport { styled, css, type DefaultTheme } from 'styled-components';\n\nimport { extractStyleFromTheme } from '../../helpers/theme';\nimport { Box, BoxProps } from '../../primitives/Box';\nimport { Flex, FlexComponent, FlexProps } from '../../primitives/Flex';\nimport { Typography, TypographyComponent, TypographyProps } from '../../primitives/Typography';\nimport { ANIMATIONS } from '../../styles/motion';\nimport { BaseLink } from '../BaseLink';\nimport { Button, ButtonProps } from '../Button';\nimport { IconButton } from '../IconButton';\nimport { Link, LinkProps } from '../Link';\n\n/* -------------------------------------------------------------------------------------------------\n * MenuRoot\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RootProps extends DropdownMenu.DropdownMenuProps {}\n\nconst MenuRoot = DropdownMenu.Root;\n\n/* -------------------------------------------------------------------------------------------------\n * MenuTrigger\n * -----------------------------------------------------------------------------------------------*/\n\ntype TriggerPropsBase = Omit & {\n endIcon?: React.ReactNode;\n label?: React.ReactNode | string;\n};\n\ntype TriggerPropsWithButton = TriggerPropsBase & {\n tag?: typeof Button;\n icon?: React.ReactNode;\n};\n\ntype TriggerPropsWithIconButton = TriggerPropsBase & {\n tag: typeof IconButton;\n icon: React.ReactNode;\n};\n\ntype TriggerProps = TriggerPropsWithButton | TriggerPropsWithIconButton;\n\nconst MenuTrigger = React.forwardRef(\n ({ label, endIcon = , tag = Button, icon, ...rest }, ref) => {\n const props: ButtonProps = {\n ...rest,\n ref,\n type: 'button',\n };\n\n return (\n \n {tag === IconButton ? (\n \n {icon}\n \n ) : (\n