npm - @marigold/components - Versions diffs - 0.3.1 → 0.3.2 - Mend

@marigold/components 0.3.1 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/CHANGELOG.md +6 -0
package/dist/Divider/Divider.d.ts +2 -3
package/dist/components.cjs.development.js +13 -4
package/dist/components.cjs.development.js.map +1 -1
package/dist/components.cjs.production.min.js +1 -1
package/dist/components.cjs.production.min.js.map +1 -1
package/dist/components.esm.js +13 -4
package/dist/components.esm.js.map +1 -1
package/package.json +2 -1
package/src/Divider/Divider.stories.tsx +2 -2
package/src/Divider/Divider.test.tsx +26 -25
package/src/Divider/Divider.tsx +15 -7

package/dist/components.cjs.production.min.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"components.cjs.production.min.js","sources":["../src/Inline/Inline.tsx","../src/Stack/Stack.tsx","../src/Alert/Alert.tsx","../src/Button/Button.tsx","../src/Checkbox/CheckboxIcons.tsx","../src/Label/Label.tsx","../src/ValidationMessage/ValidationMessage.tsx","../src/Checkbox/Checkbox.tsx","../src/Column/Column.tsx","../src/Columns/Columns.tsx","../src/Text/Text.tsx","../src/Dialog/ModalDialog.tsx","../src/Input/Input.tsx","../src/Link/Link.tsx","../src/Radio/RadioIcon.tsx","../src/Radio/Radio.tsx","../src/Select/Option.tsx","../src/Select/ListBoxSection.tsx","../src/Select/ListBox.tsx","../src/Select/Popover.tsx","../src/ActionGroup/ActionGroup.tsx","../src/Badge/Badge.tsx","../src/Card/Card.tsx","../src/Container/Container.tsx","../src/Dialog/Dialog.tsx","../src/Divider/Divider.tsx","../src/Field/Field.tsx","../src/Image/Image.tsx","../src/Provider/MarigoldProvider.tsx","../src/Menu/Menu.tsx","../src/MenuItem/MenuItem.tsx","../src/Message/Message.tsx","../src/Select/Select.tsx","../src/Slider/Slider.tsx","../src/Textarea/Textarea.tsx"],"sourcesContent":["import React, { Children } from 'react';\nimport flattenChildren from 'react-keyed-flatten-children';\n\nimport { ResponsiveStyleValue } from '@marigold/system';\n\nimport { Box } from '../Box';\n\nexport type InlineProps = {\n space?: ResponsiveStyleValue<string>;\n align?: 'top' \| 'center' \| 'bottom';\n};\n\nconst ALIGNMENT = {\n top: 'flex-start',\n center: 'center',\n bottom: 'flex-end',\n};\n\nexport const Inline: React.FC<InlineProps> = ({\n space = 'none',\n align = 'center',\n children,\n ...props\n}) => (\n <Box\n display=\"inline-flex\"\n css={{ '> * + ': { pl: space } }}\n alignItems={ALIGNMENT[align]}\n {...props}\n >\n {Children.map(\n flattenChildren(children) as unknown as React.ReactElement,\n (child: React.ReactElement) => (\n <Box>{React.cloneElement(child, {}, child.props.children)}</Box>\n )\n )}\n </Box>\n);\n","import React, { Children } from 'react';\nimport flattenChildren from 'react-keyed-flatten-children';\n\nimport { ResponsiveStyleValue } from '@marigold/system';\n\nimport { Box } from '../Box';\n\nexport type StackProps = {\n space?: ResponsiveStyleValue<string>;\n align?: 'left' \| 'right' \| 'center';\n};\n\nconst ALIGNMENT = {\n left: 'flex-start',\n center: 'center',\n right: 'flex-end',\n};\n\nexport const Stack: React.FC<StackProps> = ({\n space = 'none',\n align = 'left',\n children,\n ...props\n}) => (\n <Box\n {...props}\n display=\"flex\"\n flexDirection=\"column\"\n alignItems={ALIGNMENT[align]}\n css={{ '> + ': { pt: space } }}\n >\n {Children.map(\n flattenChildren(children) as unknown as React.ReactElement,\n (child: React.ReactElement) => (\n <Box>{React.cloneElement(child, {}, child.props.children)}</Box>\n )\n )}\n </Box>\n);\n","import React from 'react';\nimport { Exclamation, Check, Notification } from '@marigold/icons';\nimport { type ComponentProps } from '@marigold/types';\n\nimport { Box } from '../Box';\n\nconst ICON_MAP = {\n success: Check,\n warning: Notification,\n error: Exclamation,\n} as const;\n\nexport type AlertVariants = keyof typeof ICON_MAP;\n\n// Theme Extension\n// ---------------\nexport interface AlertThemeExtension<Value> {\n alert?: {\n [key in AlertVariants]?: Value;\n };\n}\n\n// Props\n// ---------------\nexport type AlertProps = {\n variant?: AlertVariants;\n} & ComponentProps<'div'>;\n\n// Component\n// ---------------\nexport const Alert: React.FC<AlertProps> = ({\n variant = 'success',\n children,\n ...props\n}) => {\n const Icon = ICON_MAP[variant];\n\n return (\n <Box {...props} display=\"flex\" variant={`alert.${variant}`}>\n <Box\n display=\"inline-block\"\n alignItems=\"center\"\n width=\"32px\"\n height=\"32px\"\n bg={variant}\n >\n <Box as={Icon} size={12} color=\"#fff\" bg={variant} m={10} />\n </Box>\n <Box mx=\"16px\">{children}</Box>\n </Box>\n );\n};\n","import React, { forwardRef, RefObject } from 'react';\nimport { useButton } from '@react-aria/button';\nimport {\n PolymorphicComponentWithRef,\n PolymorphicPropsWithRef,\n} from '@marigold/types';\n\nimport { Box, BoxOwnProps } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface ButtonThemeExtension<Value> {\n button?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type ButtonProps = PolymorphicPropsWithRef<BoxOwnProps, 'button'>;\n\n// Component\n// ---------------\nexport const Button: PolymorphicComponentWithRef<BoxOwnProps, 'button'> =\n forwardRef(\n (\n {\n as = 'button',\n variant = 'primary',\n size = 'large',\n space = 'none',\n disabled,\n children,\n className,\n ...props\n },\n ref\n ) => {\n const { buttonProps } = useButton(\n {\n ...props,\n elementType: typeof as === 'string' ? as : 'span',\n isDisabled: disabled,\n },\n ref as RefObject<HTMLSpanElement>\n );\n\n return (\n <Box\n {...buttonProps}\n {...props}\n as={as}\n display=\"inline-flex\"\n alignItems=\"center\"\n variant={[`button.${variant}`, `button.${size}`]}\n className={className}\n ref={ref}\n css={{ columnGap: space }}\n >\n {children}\n </Box>\n );\n }\n );\n","import React from 'react';\nimport { conditional, State, SVG } from '@marigold/system';\n\nimport { Box } from '../Box';\n\n// Checkbox Icon\n// ---------------\nexport type CheckboxIconProps = {\n variant?: string;\n checked?: boolean;\n disabled?: boolean;\n error?: boolean;\n children?: never;\n};\n\nexport const CheckboxIcon: React.FC<CheckboxIconProps> = ({\n variant = '',\n checked = false,\n disabled = false,\n error = false,\n}) => {\n const conditionalStates: State = disabled\n ? {\n disabled: disabled,\n }\n : {\n checked: checked,\n error: error,\n };\n\n return (\n <SVG\n width=\"16\"\n height=\"32\"\n viewBox=\"0 0 16 32\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <Box\n as=\"rect\"\n x=\"0.5\"\n y=\"8.5\"\n width=\"15px\"\n height=\"15px\"\n rx=\"1.5\"\n variant={conditional(`checkbox.${variant}`, conditionalStates)}\n />\n {checked && (\n <Box\n __baseCSS={{ fill: 'gray00' }}\n as=\"path\"\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M13.9571 12.8338L12.4085 11.2852L6.08699 17.6007L3.59887 15.1126L2.04163 16.6588L6.08682 20.704L13.9571 12.8338Z\"\n />\n )}\n </SVG>\n );\n};\n","import React from 'react';\n\nimport { ComponentProps } from '@marigold/types';\nimport { Required } from '@marigold/icons';\nimport { ResponsiveStyleValue } from '@marigold/system';\n\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface LabelThemeExtension<Value> {\n label?: {\n [key: string]: Value;\n };\n}\n\n// LabelBase\n// ---------------\nexport type LabelBaseProps = {\n htmlFor?: string;\n variant?: string;\n required?: boolean;\n color?: ResponsiveStyleValue<string>;\n} & ComponentProps<'label'>;\n\nexport const LabelBase: React.FC<LabelProps> = ({\n variant = 'above',\n required,\n color = 'text',\n children,\n ...props\n}) => {\n return (\n <Box\n {...props}\n as=\"label\"\n __baseCSS={{ color: color }}\n variant={`label.${variant}`}\n >\n {children}\n </Box>\n );\n};\n\n// Label\n// ---------------\nexport type LabelProps = {\n required?: boolean;\n} & LabelBaseProps;\n\nexport const Label: React.FC<LabelProps> = ({\n required,\n children,\n ...props\n}) => {\n return required ? (\n <Box as=\"span\" display=\"inline-flex\" alignItems=\"center\">\n <LabelBase {...props}>{children}</LabelBase>\n {required && <Box as={Required} size={16} css={{ color: 'error' }} />}\n </Box>\n ) : (\n <LabelBase {...props}>{children}</LabelBase>\n );\n};\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\n\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface ValidationMessageThemeExtension<Value> {\n validation?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type ValidationMessageProps = {\n variant?: string;\n} & ComponentProps<'span'>;\n\n// Component\n// ---------------\nexport const ValidationMessage: React.FC<ValidationMessageProps> = ({\n variant = 'error',\n children,\n className,\n ...props\n}) => {\n return (\n <Box\n as=\"span\"\n display=\"flex\"\n alignItems=\"center\"\n variant={`validation.${variant}`}\n className={className}\n {...props}\n >\n {children}\n </Box>\n );\n};\n","import React from 'react';\nimport { useFocusRing } from '@react-aria/focus';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { useCheckbox } from '@react-aria/checkbox';\nimport { useToggleState } from '@react-stately/toggle';\nimport { ToggleProps } from '@react-types/checkbox';\n\nimport { ComponentProps } from '@marigold/types';\nimport { Exclamation } from '@marigold/icons';\n\nimport { CheckboxIcon, CheckboxIconProps } from './CheckboxIcons';\nimport { Box } from '../Box';\nimport { Label } from '../Label';\nimport { ValidationMessage } from '../ValidationMessage';\n\n// Theme Extension\n// ---------------\nexport interface CheckboxThemeExtension<Value> {\n checkbox?: {\n [key: string]: Value;\n };\n}\n\n// Checkbox Input\n// ---------------\ntype CheckboxInputProps = CheckboxIconProps &\n ToggleProps &\n ComponentProps<'input'>;\n\nconst CheckboxInput: React.FC<CheckboxInputProps> = ({ error, ...props }) => {\n const state = useToggleState(props);\n const ref = React.useRef<HTMLInputElement>(null);\n const { inputProps } = useCheckbox(props, state, ref);\n const { focusProps } = useFocusRing();\n\n return (\n <Box pr=\"xsmall\">\n <VisuallyHidden>\n <Box\n as=\"input\"\n type=\"checkbox\"\n disabled={props.disabled}\n {...inputProps}\n {...focusProps}\n ref={ref}\n {...props}\n />\n </VisuallyHidden>\n <CheckboxIcon\n checked={props.checked}\n variant={props.variant}\n disabled={props.disabled}\n error={error}\n />\n </Box>\n );\n};\n\n// Checkbox\n// ---------------\nexport type CheckboxProps = {\n id: string;\n label: string;\n required?: boolean;\n labelVariant?: string;\n error?: boolean;\n errorMessage?: string;\n} & CheckboxInputProps;\n\nexport const Checkbox: React.FC<CheckboxProps> = ({\n label,\n required,\n labelVariant = 'inline',\n error,\n errorMessage,\n ...props\n}) => {\n return (\n <>\n <Box\n as={Label}\n __baseCSS={{\n ':hover': { cursor: props.disabled ? 'not-allowed' : 'pointer' },\n }}\n htmlFor={props.id}\n required={required}\n variant={`label.${labelVariant}`}\n color={props.disabled ? 'disabled' : 'text'}\n >\n <Box as={CheckboxInput} error={error} {...props} />\n {label}\n </Box>\n {error && errorMessage && (\n <ValidationMessage>\n <Exclamation size={16} />\n {errorMessage}\n </ValidationMessage>\n )}\n </>\n );\n};\n","import React from 'react';\nimport { Box } from '../Box';\n\ntype WidthValues = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12;\n\nexport type ColumnProps = {\n className?: string;\n width?: WidthValues \| WidthValues[];\n};\n\nconst transform = (width: WidthValues \| WidthValues[]) => {\n if (Array.isArray(width)) {\n return width.map(v => `${(v / 12) 100}%`);\n }\n\n return `${(width / 12) * 100}%`;\n};\n\nexport const Column: React.FC<ColumnProps> = ({\n width = 12,\n children,\n ...props\n}) => (\n <Box {...props} width={transform(width)}>\n {children}\n </Box>\n);\n","import React, { Children } from 'react';\nimport { Box } from '../Box';\nimport flattenChildren from 'react-keyed-flatten-children';\nimport { ResponsiveStyleValue, useTheme } from '@marigold/system';\n\ntype ColumnsProps = {\n className?: string;\n space?: ResponsiveStyleValue<string>;\n horizontalAlign?: 'left' \| 'right' \| 'center';\n verticalAlign?: 'top' \| 'bottom' \| 'center';\n};\n\nconst useAlignment = (direction: string) => {\n switch (direction) {\n case 'right':\n return 'flex-end';\n case 'bottom':\n return 'flex-end';\n case 'center':\n return 'center';\n }\n return 'flex-start';\n};\n\nexport const Columns: React.FC<ColumnsProps> = ({\n space = 'none',\n horizontalAlign = 'left',\n verticalAlign = 'top',\n className,\n children,\n ...props\n}) => {\n const justifyContent = useAlignment(horizontalAlign);\n const alignItems = useAlignment(verticalAlign);\n\n /*\n transform space string to space value from theme\n */\n const { css } = useTheme();\n const spaceObject = css({ space }) as Object;\n const spaceValue = Object.values(spaceObject)[0];\n\n return (\n <Box p={space} display=\"flex\" className={className}>\n <Box\n width={`calc(100% + ${spaceValue}px)`}\n m={`${-spaceValue / 2}px`}\n display=\"flex\"\n flexWrap=\"wrap\"\n alignItems={alignItems}\n justifyContent={justifyContent}\n {...props}\n >\n {Children.map(\n flattenChildren(children) as unknown as React.ReactElement,\n (child: React.ReactElement) => {\n return React.cloneElement(\n child,\n {},\n <Box css={{ p: `${spaceValue / 2}px` }}>\n {child.props.children}\n </Box>\n );\n }\n )}\n </Box>\n </Box>\n );\n};\n","import React, { forwardRef } from 'react';\nimport { ResponsiveStyleValue } from '@marigold/system';\nimport {\n PolymorphicComponentWithRef,\n PolymorphicPropsWithRef,\n} from '@marigold/types';\n\nimport { Box, BoxOwnProps } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface TextThemeExtension<Value> {\n text?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type TextOwnProps = {\n align?: ResponsiveStyleValue<string>;\n color?: ResponsiveStyleValue<string>;\n cursor?: ResponsiveStyleValue<string>;\n outline?: ResponsiveStyleValue<string>;\n userSelect?: ResponsiveStyleValue<string>;\n} & BoxOwnProps;\n\nexport type TextProps = PolymorphicPropsWithRef<TextOwnProps, 'span'>;\n\n// Component\n// ---------------\nexport const Text: PolymorphicComponentWithRef<TextOwnProps, 'span'> =\n forwardRef(\n (\n {\n as = 'span',\n variant = 'body',\n children,\n className,\n align,\n color,\n cursor,\n outline,\n userSelect,\n ...props\n },\n ref\n ) => (\n <Box\n {...props}\n as={as}\n variant={`text.${variant}`}\n css={{ textAlign: align, color, cursor, outline, userSelect }}\n className={className}\n ref={ref}\n >\n {children}\n </Box>\n )\n );\n","import React, { RefObject } from 'react';\nimport {\n useOverlay,\n usePreventScroll,\n useModal,\n OverlayProps,\n} from '@react-aria/overlays';\nimport { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { AriaDialogProps } from '@react-types/dialog';\n\nimport { Box } from '../Box';\n\n// Props\n// ---------------\nexport type ModalDialogProps = {\n variant?: string;\n backdropVariant?: string;\n} & OverlayProps &\n AriaDialogProps;\n\n// Component\n// ---------------\nexport const ModalDialog: React.FC<ModalDialogProps> = ({\n variant,\n backdropVariant = 'backdrop',\n children,\n ...props\n}) => {\n const { isDismissable, isOpen, onClose, ...restProps } = props;\n\n // Handle interacting outside the dialog and pressing\n // the Escape key to close the modal.\n const ref = React.useRef<HTMLElement>() as RefObject<HTMLElement>;\n const { overlayProps, underlayProps } = useOverlay(\n { isDismissable, isOpen, onClose },\n ref\n );\n\n // Prevent scrolling while the modal is open, and hide content\n // outside the modal from screen readers.\n usePreventScroll();\n\n const { modalProps } = useModal();\n const { dialogProps } = useDialog(props, ref);\n\n return (\n <Box\n __baseCSS={{\n display: 'grid',\n placeItems: 'center',\n position: 'fixed',\n zIndex: 100,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n }}\n variant={`dialog.${backdropVariant}`}\n {...underlayProps}\n >\n <FocusScope contain restoreFocus autoFocus>\n <Box\n {...overlayProps}\n {...dialogProps}\n {...modalProps}\n ref={ref}\n variant={variant ? `dialog.${variant}` : `dialog`}\n {...restProps}\n >\n {children}\n </Box>\n </FocusScope>\n </Box>\n );\n};\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface InputThemeExtension<Value> {\n input?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type InputProps = {\n variant?: string;\n} & ComponentProps<'input'>;\n\n// Component\n// ---------------\nexport const Input: React.FC<InputProps> = ({\n variant = '',\n type = 'text',\n ...props\n}) => <Box {...props} as=\"input\" type={type} variant={`input.${variant}`} />;\n","import React, { useRef } from 'react';\nimport { useLink } from '@react-aria/link';\nimport { PolymorphicComponent, PolymorphicProps } from '@marigold/types';\n\nimport { Text, TextOwnProps } from '../Text';\n\n// Theme Extension\n// ---------------\nexport interface LinkThemeExtension<Value> {\n link?: Value;\n}\n\n// Props\n// ---------------\nexport type LinkOwnProps = { disabled?: boolean } & TextOwnProps;\nexport type LinkProps = PolymorphicProps<LinkOwnProps, 'a'>;\n\n// Component\n// ---------------\nexport const Link = (({\n as = 'a',\n variant = 'link',\n children,\n disabled,\n ...props\n}: LinkProps) => {\n const ref = useRef<any>();\n const { linkProps } = useLink(\n {\n // We typecast here because the element could very well be a `span`\n ...(props as PolymorphicProps<LinkOwnProps, any>),\n elementType: typeof as === 'string' ? as : 'span',\n isDisabled: disabled,\n },\n ref\n );\n\n return (\n <Text {...props} {...linkProps} as={as} variant={variant} ref={ref}>\n {children}\n </Text>\n );\n}) as PolymorphicComponent<LinkOwnProps, 'a'>;\n","import React from 'react';\nimport { conditional, State, SVG } from '@marigold/system';\n\nimport { Box } from '../Box';\n\n// Radio Icon\n// ---------------\nexport type RadioIconProps = {\n variant?: string;\n checked?: boolean;\n disabled?: boolean;\n error?: boolean;\n children?: never;\n};\n\nexport const RadioIcon: React.FC<RadioIconProps> = ({\n variant = '',\n checked = false,\n disabled = false,\n error = false,\n}) => {\n const conditionalStates: State = disabled\n ? {\n disabled: disabled,\n }\n : {\n checked: checked,\n error: error,\n };\n\n return (\n <SVG\n width=\"16\"\n height=\"32\"\n viewBox=\"0 0 16 32\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <Box\n variant={conditional(`radio.${variant}`, conditionalStates)}\n as=\"circle\"\n cx=\"8\"\n cy=\"16\"\n r=\"7.5\"\n />\n {checked && <circle fill=\"white\" cx=\"8\" cy=\"16\" r=\"3\" />}\n </SVG>\n );\n};\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { Exclamation } from '@marigold/icons';\nimport { useFocusRing } from '@react-aria/focus';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { RadioIcon, RadioIconProps } from './RadioIcon';\nimport { Box } from '../Box';\nimport { Label } from '../Label';\nimport { ValidationMessage } from '../ValidationMessage';\n\n// Theme Extension\n// ---------------\nexport interface RadioThemeExtension<Value> {\n radio?: {\n [key: string]: Value;\n };\n}\n\n// Radio Input\n// ---------------\ntype RadioInputProps = RadioIconProps & ComponentProps<'input'>;\n\nconst RadioInput: React.FC<RadioInputProps> = ({ error, ...props }) => {\n const { focusProps } = useFocusRing();\n\n return (\n <Box pr=\"xsmall\">\n <VisuallyHidden>\n <input\n type=\"radio\"\n disabled={props.disabled}\n {...focusProps}\n {...props}\n />\n </VisuallyHidden>\n <RadioIcon\n variant={props.variant}\n disabled={props.disabled}\n checked={props.checked}\n error={error}\n />\n </Box>\n );\n};\n\n// Radio\n// ---------------\nexport type RadioProps = {\n id: string;\n label: string;\n required?: boolean;\n labelVariant?: string;\n error?: boolean;\n errorMessage?: string;\n} & RadioInputProps;\n\nexport const Radio: React.FC<RadioProps> = ({\n label,\n required,\n labelVariant = 'inline',\n error,\n errorMessage,\n ...props\n}) => (\n <>\n <Box\n as={Label}\n htmlFor={props.id}\n required={required}\n variant={`label.${labelVariant}`}\n css={\n props.disabled\n ? { color: 'disabled', ':hover': { cursor: 'not-allowed' } }\n : { color: 'text', ':hover': { cursor: 'pointer' } }\n }\n >\n <Box as={RadioInput} error={error} {...props} />\n {label}\n </Box>\n {error && errorMessage && (\n <ValidationMessage>\n <Exclamation size={16} />\n {errorMessage}\n </ValidationMessage>\n )}\n </>\n);\n","import React, { useEffect, useRef, useState } from 'react';\nimport type { ListState } from '@react-stately/list';\nimport type { Node } from '@react-types/shared';\nimport { useOption } from '@react-aria/listbox';\n\nimport { Box } from '../Box';\n\ninterface OptionProps {\n item: Node<unknown>;\n state: ListState<unknown>;\n}\n\nexport const Option = ({ item, state }: OptionProps) => {\n const ref = useRef<HTMLLIElement>(null);\n const [disabled, setDisabled] = useState(false);\n const { optionProps, isSelected } = useOption(\n {\n key: item.key,\n },\n state,\n ref\n );\n\n useEffect(() => {\n for (const key of state.disabledKeys.values()) {\n if (key === item.key) {\n setDisabled(true);\n }\n }\n }, [state.disabledKeys, item.key]);\n\n return (\n <Box\n as=\"li\"\n {...optionProps}\n ref={ref}\n variant={\n isSelected\n ? 'select.option.selected'\n : disabled\n ? 'select.option.disabled'\n : 'select.option'\n }\n >\n {item.rendered}\n </Box>\n );\n};\n","import React from 'react';\nimport { useListBoxSection } from '@react-aria/listbox';\nimport type { ListState } from '@react-stately/list';\nimport type { Node } from '@react-types/shared';\n\nimport { Box } from '../Box';\nimport { Option } from './Option';\n\ninterface SectionProps {\n section: Node<unknown>;\n state: ListState<unknown>;\n}\n\nexport const ListBoxSection = ({ section, state }: SectionProps) => {\n const { itemProps, headingProps, groupProps } = useListBoxSection({\n heading: section.rendered,\n 'aria-label': section['aria-label'],\n });\n\n return (\n <Box\n as=\"li\"\n {...itemProps}\n css={{\n cursor: 'not-allowed',\n }}\n >\n {section.rendered && (\n <Box as=\"span\" {...headingProps} variant={'select.section'}>\n {section.rendered}\n </Box>\n )}\n <Box as=\"ul\" {...groupProps}>\n {[...section.childNodes].map(node => (\n <Option key={node.key} item={node} state={state} />\n ))}\n </Box>\n </Box>\n );\n};\n","import React, { useRef } from 'react';\nimport { useListBox } from '@react-aria/listbox';\nimport type { AriaListBoxOptions } from '@react-aria/listbox';\nimport type { ListState } from '@react-stately/list';\n\nimport { Box } from '../Box';\nimport { Option } from './Option';\nimport { ListBoxSection } from './ListBoxSection';\n\ninterface ListBoxProps extends AriaListBoxOptions<unknown> {\n state: ListState<unknown>;\n error?: boolean;\n}\n\nexport const ListBox = (props: ListBoxProps) => {\n const ref = useRef<HTMLUListElement>(null);\n const { state, error } = props;\n const { listBoxProps } = useListBox(props, state, ref);\n\n return (\n <Box\n as=\"ul\"\n p=\"none\"\n css={{\n listStyle: 'none',\n }}\n {...listBoxProps}\n variant={error ? 'select.listbox.error' : 'select.listbox'}\n ref={ref}\n >\n {[...state.collection].map(item =>\n item.type === 'section' ? (\n <ListBoxSection key={item.key} section={item} state={state} />\n ) : (\n <Option key={item.key} item={item} state={state} />\n )\n )}\n </Box>\n );\n};\n","import React, { forwardRef, RefObject } from 'react';\nimport { FocusScope } from '@react-aria/focus';\nimport {\n DismissButton,\n OverlayContainer,\n useModal,\n useOverlay,\n} from '@react-aria/overlays';\nimport { mergeProps } from '@react-aria/utils';\n\nimport { Box } from '../Box';\n\ninterface PopoverProps {\n isOpen?: boolean;\n onClose?: () => void;\n ref?: React.Ref<HTMLDivElement>;\n className?: string;\n}\n\nexport const Popover: React.FC<PopoverProps> = forwardRef(\n ({ children, className, isOpen, onClose, ...otherProps }, ref) => {\n // Handle events that should cause the popup to close,\n const { overlayProps } = useOverlay(\n {\n isOpen,\n onClose,\n shouldCloseOnBlur: true,\n isDismissable: true,\n },\n ref as RefObject<HTMLElement>\n );\n // Hide content outside the modal from screen readers.\n const { modalProps } = useModal();\n\n return (\n <OverlayContainer>\n <FocusScope restoreFocus>\n <Box\n {...mergeProps(overlayProps, otherProps, modalProps)}\n className={className}\n ref={ref}\n >\n {children}\n <DismissButton onDismiss={onClose} />\n </Box>\n </FocusScope>\n </OverlayContainer>\n );\n }\n);\n","import React from 'react';\n\nimport { ResponsiveStyleValue } from '@marigold/system';\nimport { ComponentProps } from '@marigold/types';\n\nimport { Inline } from '../Inline';\nimport { Stack } from '../Stack';\n\n// Props\n// ---------------\nexport type ActionGroupProps = {\n space?: ResponsiveStyleValue<string>;\n verticalAlignment?: boolean;\n} & ComponentProps<'div'>;\n\n// Component\n// ---------------\nexport const ActionGroup: React.FC<ActionGroupProps> = ({\n space = 'none',\n verticalAlignment = false,\n children,\n ...props\n}) =>\n verticalAlignment ? (\n <Stack space={space} {...props}>\n {children}\n </Stack>\n ) : (\n <Inline space={space} {...props}>\n {children}\n </Inline>\n );\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface BadgeThemeExtension<Value> {\n badge?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type BadgeProps = {\n variant?: string;\n bgColor?: string;\n borderColor?: string;\n} & ComponentProps<'div'>;\n\n// Component\n// ---------------\nexport const Badge: React.FC<BadgeProps> = ({\n variant = '',\n bgColor = 'transparent',\n borderColor = 'transparent',\n children,\n ...props\n}) => (\n <Box\n css={{ bg: bgColor, borderColor: borderColor }}\n variant={`badge.${variant}`}\n {...props}\n >\n {children}\n </Box>\n);\n","import React from 'react';\nimport { ResponsiveStyleValue } from '@marigold/system';\nimport { ComponentProps } from '@marigold/types';\n\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface CardThemeExtension<Value> {\n card?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type CardProps = {\n title?: string;\n width?: ResponsiveStyleValue<string>;\n variant?: string;\n} & ComponentProps<'div'>;\n\n// Component\n// ---------------\nexport const Card: React.FC<CardProps> = ({\n variant = '',\n title,\n width,\n className,\n children,\n ...props\n}) => {\n return (\n <Box\n {...props}\n variant={`card.${variant}`}\n maxWidth={width}\n className={className}\n >\n {title && (\n <Box as=\"h2\" variant=\"text.h2\" pb=\"small\">\n {title}\n </Box>\n )}\n {children}\n </Box>\n );\n};\n","import React from 'react';\nimport { Box } from '../Box';\n\nexport type ContainerProps = {\n className?: string;\n title?: string; // Used for testing.\n};\n\nexport const Container: React.FC<ContainerProps> = ({ children, ...props }) => (\n <Box {...props} width=\"100%\">\n {children}\n </Box>\n);\n","import React, { RefObject } from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { useOverlayTriggerState } from '@react-stately/overlays';\nimport { OverlayContainer } from '@react-aria/overlays';\nimport { useButton } from '@react-aria/button';\nimport { Close } from '@marigold/icons';\n\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { Text } from '../Text';\n\nimport { ModalDialog, ModalDialogProps } from './ModalDialog';\n\n// Props\n// ---------------\nexport type DialogProps = {\n backdropVariant?: string;\n close: ComponentProps<typeof Button>['onClick'];\n isOpen: boolean;\n title?: string;\n variant?: string;\n} & ModalDialogProps &\n ComponentProps<'div'>;\n\n// Component\n// ---------------\nexport const Dialog: React.FC<DialogProps> = ({\n backdropVariant,\n children,\n className,\n close,\n isOpen,\n title,\n variant,\n ...props\n}) => {\n const closeButtonRef = React.useRef<HTMLElement>() as RefObject<HTMLElement>;\n\n // useButton ensures that focus management is handled correctly,\n // across all browsers. Focus is restored to the button once the\n // dialog closes.\n const { buttonProps: closeButtonProps } = useButton(\n {\n onPress: () => close(),\n },\n closeButtonRef\n );\n\n return (\n <OverlayContainer>\n <ModalDialog\n variant={variant}\n backdropVariant={backdropVariant}\n isOpen={isOpen}\n onClose={close}\n isDismissable\n {...props}\n >\n <Box\n __baseCSS={{\n display: 'flex',\n justifyContent: 'space-between',\n borderRadius: 'small',\n pl: 'large',\n pb: 'large',\n }}\n className={className}\n >\n <Box pt=\"medium\">\n {title && (\n <Text as=\"h4\" variant=\"headline4\">\n {title}\n </Text>\n )}\n {children}\n </Box>\n <Box\n __baseCSS={{\n display: 'flex',\n justifyContent: 'flex-end',\n alignItems: 'start',\n paddingTop: 'xsmall',\n paddingX: 'xsmall',\n }}\n >\n <Box\n as={Button}\n __baseCSS={{\n color: 'text',\n bg: 'transparent',\n lineHeight: 'xsmall',\n px: 'xxsmall',\n ':hover': {\n color: 'text',\n bg: 'transparent',\n cursor: 'pointer',\n },\n ':focus': {\n outline: 0,\n },\n }}\n {...closeButtonProps}\n ref={closeButtonRef}\n >\n <Close size={16} />\n </Box>\n </Box>\n </Box>\n </ModalDialog>\n </OverlayContainer>\n );\n};\n\n// get the overlayTriggerState and openButton props for using the dialog component\nexport const useDialogButtonProps = () => {\n const state = useOverlayTriggerState({});\n const openButtonRef = React.useRef<HTMLElement>() as RefObject<HTMLElement>;\n const { buttonProps: openButtonProps } = useButton(\n {\n onPress: () => state.open(),\n },\n openButtonRef\n );\n\n return {\n state,\n openButtonProps,\n openButtonRef,\n };\n};\n","import React from 'react';\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface DividerThemeExtension<Value> {\n divider?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type DividerProps = {\n className?: string;\n variant?: string;\n title?: string; // Should only be used for testing.\n};\n\n// Component\n// ---------------\nexport const Divider: React.FC<DividerProps> = ({\n variant = 'regular',\n ...props\n}) => <Box {...props} as=\"hr\" variant={`divider.${variant}`} />;\n","import React from 'react';\nimport { Exclamation } from '@marigold/icons';\nimport { ComponentProps } from '@marigold/types';\n\nimport { Input } from '../Input';\nimport { Label } from '../Label';\nimport { ValidationMessage } from '../ValidationMessage';\n\n// Props\n// ---------------\nexport type FieldProps = {\n variant?: string;\n labelVariant?: string;\n htmlFor: string;\n label: string;\n required?: boolean;\n error?: boolean;\n errorMessage?: string;\n disabled?: boolean;\n} & ComponentProps<'input'>;\n\n// Component\n// ---------------\nexport const Field: React.FC<FieldProps> = ({\n type = 'text',\n variant = '',\n labelVariant = 'above',\n htmlFor,\n label,\n required,\n error,\n errorMessage,\n disabled,\n ...props\n}) => {\n return (\n <>\n <Label variant={labelVariant} htmlFor={htmlFor} required={required}>\n {label}\n </Label>\n <Input\n {...props}\n type={type}\n id={htmlFor}\n disabled={disabled}\n variant={variant}\n />\n {error && errorMessage && (\n <ValidationMessage>\n <Exclamation size={16} />\n {errorMessage}\n </ValidationMessage>\n )}\n </>\n );\n};\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface ImageThemeExtension<Value> {\n image?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type ImageProps = {\n variant?: string;\n children?: never;\n} & ComponentProps<'img'>;\n\n// Component\n// ---------------\nexport const Image: React.FC<ImageProps> = ({\n variant = 'fullWidth',\n ...props\n}) => <Box {...props} as=\"img\" variant={`image.${variant}`} />;\n","import React from 'react';\nimport { OverlayProvider } from '@react-aria/overlays';\nimport {\n Theme,\n Global,\n ThemeProvider,\n ThemeProviderProps,\n useTheme,\n __defaultTheme,\n} from '@marigold/system';\n\n// Theme Extension\n// ---------------\nexport interface RootThemeExtension<Value> {\n root?: {\n body?: Value;\n html?: Value;\n };\n}\n\n// Props\n// ---------------\nexport interface MarigoldProviderProps<T extends Theme>\n extends ThemeProviderProps<T> {}\n\n// Provider\n// ---------------\nexport function MarigoldProvider<T extends Theme>({\n theme,\n children,\n}: MarigoldProviderProps<T>) {\n const outer = useTheme();\n const isTopLevel = outer.theme === __defaultTheme;\n\n return (\n <ThemeProvider theme={theme}>\n {isTopLevel ? (\n <>\n <Global />\n <OverlayProvider>{children}</OverlayProvider>\n </>\n ) : (\n children\n )}\n </ThemeProvider>\n );\n}\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\n\nimport { Button } from '../Button';\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface MenuThemeExtension<Value> {\n menu?: Value;\n}\n\n// Props\n// ---------------\nexport type MenuProps = {\n variant?: string;\n label?: string;\n onClick: ComponentProps<typeof Button>['onClick'];\n show?: boolean;\n className?: string;\n title?: string; // For testing\n};\n\n// Component\n// ---------------\nexport const Menu: React.FC<MenuProps> = ({\n variant = 'default',\n label = 'Menu',\n onClick,\n show = false,\n children,\n ...props\n}) => {\n return (\n <Box variant={`menu.${variant}`} {...props}>\n <Button onClick={onClick} variant=\"menu\">\n {label}\n </Button>\n {show ? (\n <Box\n display=\"block\"\n position=\"absolute\"\n minWidth=\"120px\"\n borderRadius=\"2px\"\n >\n {children}\n </Box>\n ) : null}\n </Box>\n );\n};\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { Link } from '../Link';\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface MenuItemThemeExtension<Value> {\n menuItem?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type MenuItemProps = {\n variant?: string;\n} & ComponentProps<typeof Link>;\n\n// Component\n// ---------------\nexport const MenuItem: React.FC<MenuItemProps> = ({\n variant = 'default',\n className,\n children,\n ...props\n}) => {\n return (\n <Box variant={`menuItem.${variant}`} className={className}>\n <Link variant=\"menuItemLink\" {...props}>\n {children}\n </Link>\n </Box>\n );\n};\n","import React from 'react';\nimport { Exclamation, Info, Notification } from '@marigold/icons';\nimport { ComponentProps } from '@marigold/types';\nimport { Box } from '../Box';\nimport { Text } from '../Text';\n\n// Theme Extension\n// ---------------\nexport interface MessageThemeExtension<Value> {\n message?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type MessageProps = {\n messageTitle: string;\n variant?: string;\n} & ComponentProps<'div'>;\n\n// Component\n// ---------------\nexport const Message: React.FC<MessageProps> = ({\n messageTitle,\n variant = 'info',\n className,\n children,\n ...props\n}) => {\n var icon = <Info />;\n if (variant === 'warning') {\n icon = <Notification />;\n }\n if (variant === 'error') {\n icon = <Exclamation />;\n }\n\n return (\n <Box\n display=\"inline-block\"\n variant={`message.${variant}`}\n className={className}\n {...props}\n >\n <Box display=\"flex\" alignItems=\"center\" variant=\"message.title\">\n {icon}\n <Text as=\"h4\" variant=\"headline4\">\n {messageTitle}\n </Text>\n </Box>\n <Box css={{ color: 'black' }}>{children}</Box>\n </Box>\n );\n};\n","import React, { Ref, RefObject, useRef } from 'react';\nimport { useSelectState } from '@react-stately/select';\nimport { useButton } from '@react-aria/button';\nimport { mergeProps } from '@react-aria/utils';\nimport { useFocusRing } from '@react-aria/focus';\nimport { HiddenSelect, useSelect } from '@react-aria/select';\nimport type { AriaSelectProps } from '@react-types/select';\nimport { useOverlayTriggerState } from '@react-stately/overlays';\nimport { useOverlayTrigger, useOverlayPosition } from '@react-aria/overlays';\nimport { SingleSelection } from '@react-types/shared';\n\nimport { ComponentProps } from '@marigold/types';\nimport { ArrowDown, ArrowUp, Exclamation, Required } from '@marigold/icons';\nimport { ResponsiveStyleValue } from '@marigold/system';\n\nimport { Box } from '../Box';\nimport { Label } from '../Label';\nimport { ValidationMessage } from '../ValidationMessage';\nimport { ListBox } from './ListBox';\nimport { Popover } from './Popover';\n\n// Theme Extension\n// ---------------\nexport interface SelectThemeExtension<Value> {\n select?: {\n __default: Value;\n disabled?: Value;\n listbox?: {\n __default: Value;\n error?: Value;\n };\n section?: Value;\n option?: Value;\n };\n}\n\n// Props\n// ---------------\nexport type SelectProps = {\n labelVariant?: string;\n placeholder?: string;\n disabled?: boolean;\n required?: boolean;\n width?: ResponsiveStyleValue<number \| string>;\n error?: boolean;\n errorMessage?: string;\n} & ComponentProps<'select'> &\n AriaSelectProps<object> &\n SingleSelection;\n\n// Component\n// ---------------\nexport const Select = ({\n labelVariant = 'above',\n placeholder = 'Select an option',\n disabled,\n required,\n error,\n errorMessage,\n width,\n className,\n ...props\n}: SelectProps) => {\n const state = useSelectState(props);\n const overlayTriggerState = useOverlayTriggerState({});\n const triggerRef = useRef<HTMLElement>() as RefObject<HTMLElement>;\n const overlayRef = useRef<HTMLDivElement>();\n\n // Get props for the overlay\n const { overlayProps } = useOverlayTrigger(\n { type: 'listbox' },\n overlayTriggerState,\n triggerRef\n );\n // Get popover positioning props relative to the trigger\n const { overlayProps: positionProps } = useOverlayPosition({\n targetRef: triggerRef,\n overlayRef: overlayRef as RefObject<HTMLElement>,\n placement: 'bottom',\n shouldFlip: false,\n isOpen: state.isOpen,\n onClose: state.close,\n });\n // Get props for child elements from useSelect\n const { labelProps, triggerProps, valueProps, menuProps } = useSelect(\n props,\n state,\n triggerRef\n );\n // Get props for the button based on the trigger props from useSelect\n const { buttonProps } = useButton(triggerProps, triggerRef);\n\n const { focusProps } = useFocusRing();\n\n return (\n <Box position=\"relative\" display=\"inline-block\" width={width && width}>\n {props.label && (\n <Box>\n <Label {...labelProps} htmlFor={labelProps.id} variant={labelVariant}>\n {required ? (\n <Box as=\"span\" display=\"inline-flex\" alignItems=\"center\">\n {props.label}\n <Box as={Required} size={16} css={{ color: 'error' }} />\n </Box>\n ) : (\n props.label\n )}\n </Label>\n </Box>\n )}\n <HiddenSelect\n state={state}\n triggerRef={triggerRef}\n label={props.label}\n name={props.name}\n isDisabled={disabled}\n />\n <Box\n as=\"button\"\n {...mergeProps(buttonProps, focusProps)}\n ref={triggerRef as RefObject<HTMLButtonElement>}\n variant={\n error && state.isOpen && !disabled\n ? 'button.select.errorOpened'\n : error\n ? 'button.select.error'\n : state.isOpen && !disabled\n ? 'button.select.open'\n : 'button.select'\n }\n disabled={disabled}\n className={className}\n >\n <Box\n as=\"span\"\n {...valueProps}\n variant={disabled ? 'select.disabled' : 'select'}\n >\n {state.selectedItem ? state.selectedItem.rendered : placeholder}\n </Box>\n {state.isOpen && !disabled ? (\n <Box as={ArrowUp} size={16} css={{ fill: 'text' }} />\n ) : (\n <Box\n as={ArrowDown}\n size={16}\n css={{ fill: disabled ? 'disabled' : 'text' }}\n />\n )}\n </Box>\n {state.isOpen && !disabled && (\n <Box\n as={Popover}\n {...overlayProps}\n {...positionProps}\n css={{\n width: triggerRef.current && triggerRef.current.offsetWidth + 'px',\n }}\n ref={overlayRef as Ref<HTMLDivElement>}\n isOpen={state.isOpen}\n onClose={state.close}\n >\n <ListBox error={error} {...menuProps} state={state} />\n </Box>\n )}\n {error && errorMessage && (\n <Box as=\"span\" display=\"inline-flex\" alignItems=\"center\">\n <Box as={Exclamation} size={16} css={{ color: 'error' }} />\n <ValidationMessage>{errorMessage}</ValidationMessage>\n </Box>\n )}\n </Box>\n );\n};\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\n\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface SliderThemeExtension<Value> {\n slider?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type SliderProps = {\n variant?: string;\n} & ComponentProps<'input'>;\n\n// Component\n// ---------------\nexport const Slider: React.FC<SliderProps> = ({\n variant = '',\n className,\n ...props\n}) => (\n <Box\n as=\"input\"\n type=\"range\"\n css={{ verticalAlign: 'middle' }}\n variant={`slider.${variant}`}\n className={className}\n {...props}\n />\n);\n","import React from 'react';\nimport { Exclamation } from '@marigold/icons';\nimport { ComponentProps } from '@marigold/types';\n\nimport { ValidationMessage } from '../ValidationMessage';\nimport { Label } from '../Label';\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface TextareaThemeExtension<Value> {\n textarea?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type TextareaProps = {\n variant?: string;\n label?: string;\n htmlFor?: string;\n required?: boolean;\n error?: boolean;\n errorMessage?: string;\n} & ComponentProps<'textarea'>;\n\n// Component\n// ---------------\nexport const Textarea: React.FC<TextareaProps> = ({\n variant = '',\n htmlFor = 'textarea',\n label,\n error,\n errorMessage,\n required,\n className = '',\n children,\n ...props\n}) => (\n <Box>\n {label && (\n <Label htmlFor={htmlFor} required={required}>\n {label}\n </Label>\n )}\n <Box\n as=\"textarea\"\n {...props}\n display=\"block\"\n variant={`textarea.${variant}`}\n css={{ outlineColor: error && 'error' }}\n className={className}\n />\n {error && errorMessage && (\n <ValidationMessage>\n <Exclamation size={16} />\n {errorMessage}\n </ValidationMessage>\n )}\n </Box>\n);\n"],"names":["ALIGNMENT","top","center","bottom","Inline","space","align","children","props","React","Box","display","css","pl","alignItems","Children","map","flattenChildren","child","cloneElement","left","right","Stack","flexDirection","pt","ICON_MAP","success","Check","warning","Notification","error","Exclamation","Button","forwardRef","ref","as","variant","size","disabled","className","useButton","elementType","isDisabled","buttonProps","columnGap","CheckboxIcon","checked","SVG","width","height","viewBox","fill","x","y","rx","conditional","__baseCSS","fillRule","clipRule","d","LabelBase","required","color","Label","Required","ValidationMessage","CheckboxInput","state","useToggleState","useRef","inputProps","useCheckbox","useFocusRing","pr","VisuallyHidden","type","focusProps","transform","Array","isArray","v","useAlignment","direction","Text","cursor","outline","userSelect","textAlign","ModalDialog","backdropVariant","isDismissable","isOpen","onClose","restProps","useOverlay","overlayProps","underlayProps","usePreventScroll","modalProps","useModal","dialogProps","useDialog","placeItems","position","zIndex","FocusScope","contain","restoreFocus","autoFocus","Input","Link","useLink","linkProps","RadioIcon","cx","cy","r","RadioInput","Option","item","useState","setDisabled","useOption","key","optionProps","isSelected","useEffect","disabledKeys","values","rendered","ListBoxSection","section","useListBoxSection","heading","headingProps","groupProps","itemProps","childNodes","node","ListBox","useListBox","p","listStyle","listBoxProps","collection","Popover","otherProps","shouldCloseOnBlur","OverlayContainer","mergeProps","DismissButton","onDismiss","verticalAlignment","Icon","bg","m","mx","bgColor","borderColor","title","maxWidth","pb","label","labelVariant","errorMessage","htmlFor","id","horizontalAlign","verticalAlign","justifyContent","spaceObject","useTheme","spaceValue","Object","flexWrap","close","closeButtonRef","closeButtonProps","onPress","borderRadius","paddingTop","paddingX","lineHeight","px","Close","theme","outer","ThemeProvider","__defaultTheme","Global","OverlayProvider","onClick","show","minWidth","messageTitle","icon","Info","placeholder","useSelectState","overlayTriggerState","useOverlayTriggerState","triggerRef","overlayRef","useOverlayTrigger","positionProps","useOverlayPosition","targetRef","placement","shouldFlip","useSelect","labelProps","valueProps","menuProps","triggerProps","HiddenSelect","name","selectedItem","ArrowUp","ArrowDown","current","offsetWidth","outlineColor","openButtonRef","open","openButtonProps"],"mappings":"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"}
1	+ {"version":3,"file":"components.cjs.production.min.js","sources":["../src/Inline/Inline.tsx","../src/Stack/Stack.tsx","../src/Alert/Alert.tsx","../src/Button/Button.tsx","../src/Checkbox/CheckboxIcons.tsx","../src/Label/Label.tsx","../src/ValidationMessage/ValidationMessage.tsx","../src/Checkbox/Checkbox.tsx","../src/Column/Column.tsx","../src/Columns/Columns.tsx","../src/Text/Text.tsx","../src/Dialog/ModalDialog.tsx","../src/Input/Input.tsx","../src/Link/Link.tsx","../src/Radio/RadioIcon.tsx","../src/Radio/Radio.tsx","../src/Select/Option.tsx","../src/Select/ListBoxSection.tsx","../src/Select/ListBox.tsx","../src/Select/Popover.tsx","../src/ActionGroup/ActionGroup.tsx","../src/Badge/Badge.tsx","../src/Card/Card.tsx","../src/Container/Container.tsx","../src/Dialog/Dialog.tsx","../src/Divider/Divider.tsx","../src/Field/Field.tsx","../src/Image/Image.tsx","../src/Provider/MarigoldProvider.tsx","../src/Menu/Menu.tsx","../src/MenuItem/MenuItem.tsx","../src/Message/Message.tsx","../src/Select/Select.tsx","../src/Slider/Slider.tsx","../src/Textarea/Textarea.tsx"],"sourcesContent":["import React, { Children } from 'react';\nimport flattenChildren from 'react-keyed-flatten-children';\n\nimport { ResponsiveStyleValue } from '@marigold/system';\n\nimport { Box } from '../Box';\n\nexport type InlineProps = {\n space?: ResponsiveStyleValue<string>;\n align?: 'top' \| 'center' \| 'bottom';\n};\n\nconst ALIGNMENT = {\n top: 'flex-start',\n center: 'center',\n bottom: 'flex-end',\n};\n\nexport const Inline: React.FC<InlineProps> = ({\n space = 'none',\n align = 'center',\n children,\n ...props\n}) => (\n <Box\n display=\"inline-flex\"\n css={{ '> * + ': { pl: space } }}\n alignItems={ALIGNMENT[align]}\n {...props}\n >\n {Children.map(\n flattenChildren(children) as unknown as React.ReactElement,\n (child: React.ReactElement) => (\n <Box>{React.cloneElement(child, {}, child.props.children)}</Box>\n )\n )}\n </Box>\n);\n","import React, { Children } from 'react';\nimport flattenChildren from 'react-keyed-flatten-children';\n\nimport { ResponsiveStyleValue } from '@marigold/system';\n\nimport { Box } from '../Box';\n\nexport type StackProps = {\n space?: ResponsiveStyleValue<string>;\n align?: 'left' \| 'right' \| 'center';\n};\n\nconst ALIGNMENT = {\n left: 'flex-start',\n center: 'center',\n right: 'flex-end',\n};\n\nexport const Stack: React.FC<StackProps> = ({\n space = 'none',\n align = 'left',\n children,\n ...props\n}) => (\n <Box\n {...props}\n display=\"flex\"\n flexDirection=\"column\"\n alignItems={ALIGNMENT[align]}\n css={{ '> + ': { pt: space } }}\n >\n {Children.map(\n flattenChildren(children) as unknown as React.ReactElement,\n (child: React.ReactElement) => (\n <Box>{React.cloneElement(child, {}, child.props.children)}</Box>\n )\n )}\n </Box>\n);\n","import React from 'react';\nimport { Exclamation, Check, Notification } from '@marigold/icons';\nimport { type ComponentProps } from '@marigold/types';\n\nimport { Box } from '../Box';\n\nconst ICON_MAP = {\n success: Check,\n warning: Notification,\n error: Exclamation,\n} as const;\n\nexport type AlertVariants = keyof typeof ICON_MAP;\n\n// Theme Extension\n// ---------------\nexport interface AlertThemeExtension<Value> {\n alert?: {\n [key in AlertVariants]?: Value;\n };\n}\n\n// Props\n// ---------------\nexport type AlertProps = {\n variant?: AlertVariants;\n} & ComponentProps<'div'>;\n\n// Component\n// ---------------\nexport const Alert: React.FC<AlertProps> = ({\n variant = 'success',\n children,\n ...props\n}) => {\n const Icon = ICON_MAP[variant];\n\n return (\n <Box {...props} display=\"flex\" variant={`alert.${variant}`}>\n <Box\n display=\"inline-block\"\n alignItems=\"center\"\n width=\"32px\"\n height=\"32px\"\n bg={variant}\n >\n <Box as={Icon} size={12} color=\"#fff\" bg={variant} m={10} />\n </Box>\n <Box mx=\"16px\">{children}</Box>\n </Box>\n );\n};\n","import React, { forwardRef, RefObject } from 'react';\nimport { useButton } from '@react-aria/button';\nimport {\n PolymorphicComponentWithRef,\n PolymorphicPropsWithRef,\n} from '@marigold/types';\n\nimport { Box, BoxOwnProps } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface ButtonThemeExtension<Value> {\n button?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type ButtonProps = PolymorphicPropsWithRef<BoxOwnProps, 'button'>;\n\n// Component\n// ---------------\nexport const Button: PolymorphicComponentWithRef<BoxOwnProps, 'button'> =\n forwardRef(\n (\n {\n as = 'button',\n variant = 'primary',\n size = 'large',\n space = 'none',\n disabled,\n children,\n className,\n ...props\n },\n ref\n ) => {\n const { buttonProps } = useButton(\n {\n ...props,\n elementType: typeof as === 'string' ? as : 'span',\n isDisabled: disabled,\n },\n ref as RefObject<HTMLSpanElement>\n );\n\n return (\n <Box\n {...buttonProps}\n {...props}\n as={as}\n display=\"inline-flex\"\n alignItems=\"center\"\n variant={[`button.${variant}`, `button.${size}`]}\n className={className}\n ref={ref}\n css={{ columnGap: space }}\n >\n {children}\n </Box>\n );\n }\n );\n","import React from 'react';\nimport { conditional, State, SVG } from '@marigold/system';\n\nimport { Box } from '../Box';\n\n// Checkbox Icon\n// ---------------\nexport type CheckboxIconProps = {\n variant?: string;\n checked?: boolean;\n disabled?: boolean;\n error?: boolean;\n children?: never;\n};\n\nexport const CheckboxIcon: React.FC<CheckboxIconProps> = ({\n variant = '',\n checked = false,\n disabled = false,\n error = false,\n}) => {\n const conditionalStates: State = disabled\n ? {\n disabled: disabled,\n }\n : {\n checked: checked,\n error: error,\n };\n\n return (\n <SVG\n width=\"16\"\n height=\"32\"\n viewBox=\"0 0 16 32\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <Box\n as=\"rect\"\n x=\"0.5\"\n y=\"8.5\"\n width=\"15px\"\n height=\"15px\"\n rx=\"1.5\"\n variant={conditional(`checkbox.${variant}`, conditionalStates)}\n />\n {checked && (\n <Box\n __baseCSS={{ fill: 'gray00' }}\n as=\"path\"\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M13.9571 12.8338L12.4085 11.2852L6.08699 17.6007L3.59887 15.1126L2.04163 16.6588L6.08682 20.704L13.9571 12.8338Z\"\n />\n )}\n </SVG>\n );\n};\n","import React from 'react';\n\nimport { ComponentProps } from '@marigold/types';\nimport { Required } from '@marigold/icons';\nimport { ResponsiveStyleValue } from '@marigold/system';\n\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface LabelThemeExtension<Value> {\n label?: {\n [key: string]: Value;\n };\n}\n\n// LabelBase\n// ---------------\nexport type LabelBaseProps = {\n htmlFor?: string;\n variant?: string;\n required?: boolean;\n color?: ResponsiveStyleValue<string>;\n} & ComponentProps<'label'>;\n\nexport const LabelBase: React.FC<LabelProps> = ({\n variant = 'above',\n required,\n color = 'text',\n children,\n ...props\n}) => {\n return (\n <Box\n {...props}\n as=\"label\"\n __baseCSS={{ color: color }}\n variant={`label.${variant}`}\n >\n {children}\n </Box>\n );\n};\n\n// Label\n// ---------------\nexport type LabelProps = {\n required?: boolean;\n} & LabelBaseProps;\n\nexport const Label: React.FC<LabelProps> = ({\n required,\n children,\n ...props\n}) => {\n return required ? (\n <Box as=\"span\" display=\"inline-flex\" alignItems=\"center\">\n <LabelBase {...props}>{children}</LabelBase>\n {required && <Box as={Required} size={16} css={{ color: 'error' }} />}\n </Box>\n ) : (\n <LabelBase {...props}>{children}</LabelBase>\n );\n};\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\n\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface ValidationMessageThemeExtension<Value> {\n validation?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type ValidationMessageProps = {\n variant?: string;\n} & ComponentProps<'span'>;\n\n// Component\n// ---------------\nexport const ValidationMessage: React.FC<ValidationMessageProps> = ({\n variant = 'error',\n children,\n className,\n ...props\n}) => {\n return (\n <Box\n as=\"span\"\n display=\"flex\"\n alignItems=\"center\"\n variant={`validation.${variant}`}\n className={className}\n {...props}\n >\n {children}\n </Box>\n );\n};\n","import React from 'react';\nimport { useFocusRing } from '@react-aria/focus';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { useCheckbox } from '@react-aria/checkbox';\nimport { useToggleState } from '@react-stately/toggle';\nimport { ToggleProps } from '@react-types/checkbox';\n\nimport { ComponentProps } from '@marigold/types';\nimport { Exclamation } from '@marigold/icons';\n\nimport { CheckboxIcon, CheckboxIconProps } from './CheckboxIcons';\nimport { Box } from '../Box';\nimport { Label } from '../Label';\nimport { ValidationMessage } from '../ValidationMessage';\n\n// Theme Extension\n// ---------------\nexport interface CheckboxThemeExtension<Value> {\n checkbox?: {\n [key: string]: Value;\n };\n}\n\n// Checkbox Input\n// ---------------\ntype CheckboxInputProps = CheckboxIconProps &\n ToggleProps &\n ComponentProps<'input'>;\n\nconst CheckboxInput: React.FC<CheckboxInputProps> = ({ error, ...props }) => {\n const state = useToggleState(props);\n const ref = React.useRef<HTMLInputElement>(null);\n const { inputProps } = useCheckbox(props, state, ref);\n const { focusProps } = useFocusRing();\n\n return (\n <Box pr=\"xsmall\">\n <VisuallyHidden>\n <Box\n as=\"input\"\n type=\"checkbox\"\n disabled={props.disabled}\n {...inputProps}\n {...focusProps}\n ref={ref}\n {...props}\n />\n </VisuallyHidden>\n <CheckboxIcon\n checked={props.checked}\n variant={props.variant}\n disabled={props.disabled}\n error={error}\n />\n </Box>\n );\n};\n\n// Checkbox\n// ---------------\nexport type CheckboxProps = {\n id: string;\n label: string;\n required?: boolean;\n labelVariant?: string;\n error?: boolean;\n errorMessage?: string;\n} & CheckboxInputProps;\n\nexport const Checkbox: React.FC<CheckboxProps> = ({\n label,\n required,\n labelVariant = 'inline',\n error,\n errorMessage,\n ...props\n}) => {\n return (\n <>\n <Box\n as={Label}\n __baseCSS={{\n ':hover': { cursor: props.disabled ? 'not-allowed' : 'pointer' },\n }}\n htmlFor={props.id}\n required={required}\n variant={`label.${labelVariant}`}\n color={props.disabled ? 'disabled' : 'text'}\n >\n <Box as={CheckboxInput} error={error} {...props} />\n {label}\n </Box>\n {error && errorMessage && (\n <ValidationMessage>\n <Exclamation size={16} />\n {errorMessage}\n </ValidationMessage>\n )}\n </>\n );\n};\n","import React from 'react';\nimport { Box } from '../Box';\n\ntype WidthValues = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12;\n\nexport type ColumnProps = {\n className?: string;\n width?: WidthValues \| WidthValues[];\n};\n\nconst transform = (width: WidthValues \| WidthValues[]) => {\n if (Array.isArray(width)) {\n return width.map(v => `${(v / 12) 100}%`);\n }\n\n return `${(width / 12) * 100}%`;\n};\n\nexport const Column: React.FC<ColumnProps> = ({\n width = 12,\n children,\n ...props\n}) => (\n <Box {...props} width={transform(width)}>\n {children}\n </Box>\n);\n","import React, { Children } from 'react';\nimport { Box } from '../Box';\nimport flattenChildren from 'react-keyed-flatten-children';\nimport { ResponsiveStyleValue, useTheme } from '@marigold/system';\n\ntype ColumnsProps = {\n className?: string;\n space?: ResponsiveStyleValue<string>;\n horizontalAlign?: 'left' \| 'right' \| 'center';\n verticalAlign?: 'top' \| 'bottom' \| 'center';\n};\n\nconst useAlignment = (direction: string) => {\n switch (direction) {\n case 'right':\n return 'flex-end';\n case 'bottom':\n return 'flex-end';\n case 'center':\n return 'center';\n }\n return 'flex-start';\n};\n\nexport const Columns: React.FC<ColumnsProps> = ({\n space = 'none',\n horizontalAlign = 'left',\n verticalAlign = 'top',\n className,\n children,\n ...props\n}) => {\n const justifyContent = useAlignment(horizontalAlign);\n const alignItems = useAlignment(verticalAlign);\n\n /*\n transform space string to space value from theme\n */\n const { css } = useTheme();\n const spaceObject = css({ space }) as Object;\n const spaceValue = Object.values(spaceObject)[0];\n\n return (\n <Box p={space} display=\"flex\" className={className}>\n <Box\n width={`calc(100% + ${spaceValue}px)`}\n m={`${-spaceValue / 2}px`}\n display=\"flex\"\n flexWrap=\"wrap\"\n alignItems={alignItems}\n justifyContent={justifyContent}\n {...props}\n >\n {Children.map(\n flattenChildren(children) as unknown as React.ReactElement,\n (child: React.ReactElement) => {\n return React.cloneElement(\n child,\n {},\n <Box css={{ p: `${spaceValue / 2}px` }}>\n {child.props.children}\n </Box>\n );\n }\n )}\n </Box>\n </Box>\n );\n};\n","import React, { forwardRef } from 'react';\nimport { ResponsiveStyleValue } from '@marigold/system';\nimport {\n PolymorphicComponentWithRef,\n PolymorphicPropsWithRef,\n} from '@marigold/types';\n\nimport { Box, BoxOwnProps } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface TextThemeExtension<Value> {\n text?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type TextOwnProps = {\n align?: ResponsiveStyleValue<string>;\n color?: ResponsiveStyleValue<string>;\n cursor?: ResponsiveStyleValue<string>;\n outline?: ResponsiveStyleValue<string>;\n userSelect?: ResponsiveStyleValue<string>;\n} & BoxOwnProps;\n\nexport type TextProps = PolymorphicPropsWithRef<TextOwnProps, 'span'>;\n\n// Component\n// ---------------\nexport const Text: PolymorphicComponentWithRef<TextOwnProps, 'span'> =\n forwardRef(\n (\n {\n as = 'span',\n variant = 'body',\n children,\n className,\n align,\n color,\n cursor,\n outline,\n userSelect,\n ...props\n },\n ref\n ) => (\n <Box\n {...props}\n as={as}\n variant={`text.${variant}`}\n css={{ textAlign: align, color, cursor, outline, userSelect }}\n className={className}\n ref={ref}\n >\n {children}\n </Box>\n )\n );\n","import React, { RefObject } from 'react';\nimport {\n useOverlay,\n usePreventScroll,\n useModal,\n OverlayProps,\n} from '@react-aria/overlays';\nimport { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { AriaDialogProps } from '@react-types/dialog';\n\nimport { Box } from '../Box';\n\n// Props\n// ---------------\nexport type ModalDialogProps = {\n variant?: string;\n backdropVariant?: string;\n} & OverlayProps &\n AriaDialogProps;\n\n// Component\n// ---------------\nexport const ModalDialog: React.FC<ModalDialogProps> = ({\n variant,\n backdropVariant = 'backdrop',\n children,\n ...props\n}) => {\n const { isDismissable, isOpen, onClose, ...restProps } = props;\n\n // Handle interacting outside the dialog and pressing\n // the Escape key to close the modal.\n const ref = React.useRef<HTMLElement>() as RefObject<HTMLElement>;\n const { overlayProps, underlayProps } = useOverlay(\n { isDismissable, isOpen, onClose },\n ref\n );\n\n // Prevent scrolling while the modal is open, and hide content\n // outside the modal from screen readers.\n usePreventScroll();\n\n const { modalProps } = useModal();\n const { dialogProps } = useDialog(props, ref);\n\n return (\n <Box\n __baseCSS={{\n display: 'grid',\n placeItems: 'center',\n position: 'fixed',\n zIndex: 100,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n }}\n variant={`dialog.${backdropVariant}`}\n {...underlayProps}\n >\n <FocusScope contain restoreFocus autoFocus>\n <Box\n {...overlayProps}\n {...dialogProps}\n {...modalProps}\n ref={ref}\n variant={variant ? `dialog.${variant}` : `dialog`}\n {...restProps}\n >\n {children}\n </Box>\n </FocusScope>\n </Box>\n );\n};\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface InputThemeExtension<Value> {\n input?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type InputProps = {\n variant?: string;\n} & ComponentProps<'input'>;\n\n// Component\n// ---------------\nexport const Input: React.FC<InputProps> = ({\n variant = '',\n type = 'text',\n ...props\n}) => <Box {...props} as=\"input\" type={type} variant={`input.${variant}`} />;\n","import React, { useRef } from 'react';\nimport { useLink } from '@react-aria/link';\nimport { PolymorphicComponent, PolymorphicProps } from '@marigold/types';\n\nimport { Text, TextOwnProps } from '../Text';\n\n// Theme Extension\n// ---------------\nexport interface LinkThemeExtension<Value> {\n link?: Value;\n}\n\n// Props\n// ---------------\nexport type LinkOwnProps = { disabled?: boolean } & TextOwnProps;\nexport type LinkProps = PolymorphicProps<LinkOwnProps, 'a'>;\n\n// Component\n// ---------------\nexport const Link = (({\n as = 'a',\n variant = 'link',\n children,\n disabled,\n ...props\n}: LinkProps) => {\n const ref = useRef<any>();\n const { linkProps } = useLink(\n {\n // We typecast here because the element could very well be a `span`\n ...(props as PolymorphicProps<LinkOwnProps, any>),\n elementType: typeof as === 'string' ? as : 'span',\n isDisabled: disabled,\n },\n ref\n );\n\n return (\n <Text {...props} {...linkProps} as={as} variant={variant} ref={ref}>\n {children}\n </Text>\n );\n}) as PolymorphicComponent<LinkOwnProps, 'a'>;\n","import React from 'react';\nimport { conditional, State, SVG } from '@marigold/system';\n\nimport { Box } from '../Box';\n\n// Radio Icon\n// ---------------\nexport type RadioIconProps = {\n variant?: string;\n checked?: boolean;\n disabled?: boolean;\n error?: boolean;\n children?: never;\n};\n\nexport const RadioIcon: React.FC<RadioIconProps> = ({\n variant = '',\n checked = false,\n disabled = false,\n error = false,\n}) => {\n const conditionalStates: State = disabled\n ? {\n disabled: disabled,\n }\n : {\n checked: checked,\n error: error,\n };\n\n return (\n <SVG\n width=\"16\"\n height=\"32\"\n viewBox=\"0 0 16 32\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <Box\n variant={conditional(`radio.${variant}`, conditionalStates)}\n as=\"circle\"\n cx=\"8\"\n cy=\"16\"\n r=\"7.5\"\n />\n {checked && <circle fill=\"white\" cx=\"8\" cy=\"16\" r=\"3\" />}\n </SVG>\n );\n};\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { Exclamation } from '@marigold/icons';\nimport { useFocusRing } from '@react-aria/focus';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { RadioIcon, RadioIconProps } from './RadioIcon';\nimport { Box } from '../Box';\nimport { Label } from '../Label';\nimport { ValidationMessage } from '../ValidationMessage';\n\n// Theme Extension\n// ---------------\nexport interface RadioThemeExtension<Value> {\n radio?: {\n [key: string]: Value;\n };\n}\n\n// Radio Input\n// ---------------\ntype RadioInputProps = RadioIconProps & ComponentProps<'input'>;\n\nconst RadioInput: React.FC<RadioInputProps> = ({ error, ...props }) => {\n const { focusProps } = useFocusRing();\n\n return (\n <Box pr=\"xsmall\">\n <VisuallyHidden>\n <input\n type=\"radio\"\n disabled={props.disabled}\n {...focusProps}\n {...props}\n />\n </VisuallyHidden>\n <RadioIcon\n variant={props.variant}\n disabled={props.disabled}\n checked={props.checked}\n error={error}\n />\n </Box>\n );\n};\n\n// Radio\n// ---------------\nexport type RadioProps = {\n id: string;\n label: string;\n required?: boolean;\n labelVariant?: string;\n error?: boolean;\n errorMessage?: string;\n} & RadioInputProps;\n\nexport const Radio: React.FC<RadioProps> = ({\n label,\n required,\n labelVariant = 'inline',\n error,\n errorMessage,\n ...props\n}) => (\n <>\n <Box\n as={Label}\n htmlFor={props.id}\n required={required}\n variant={`label.${labelVariant}`}\n css={\n props.disabled\n ? { color: 'disabled', ':hover': { cursor: 'not-allowed' } }\n : { color: 'text', ':hover': { cursor: 'pointer' } }\n }\n >\n <Box as={RadioInput} error={error} {...props} />\n {label}\n </Box>\n {error && errorMessage && (\n <ValidationMessage>\n <Exclamation size={16} />\n {errorMessage}\n </ValidationMessage>\n )}\n </>\n);\n","import React, { useEffect, useRef, useState } from 'react';\nimport type { ListState } from '@react-stately/list';\nimport type { Node } from '@react-types/shared';\nimport { useOption } from '@react-aria/listbox';\n\nimport { Box } from '../Box';\n\ninterface OptionProps {\n item: Node<unknown>;\n state: ListState<unknown>;\n}\n\nexport const Option = ({ item, state }: OptionProps) => {\n const ref = useRef<HTMLLIElement>(null);\n const [disabled, setDisabled] = useState(false);\n const { optionProps, isSelected } = useOption(\n {\n key: item.key,\n },\n state,\n ref\n );\n\n useEffect(() => {\n for (const key of state.disabledKeys.values()) {\n if (key === item.key) {\n setDisabled(true);\n }\n }\n }, [state.disabledKeys, item.key]);\n\n return (\n <Box\n as=\"li\"\n {...optionProps}\n ref={ref}\n variant={\n isSelected\n ? 'select.option.selected'\n : disabled\n ? 'select.option.disabled'\n : 'select.option'\n }\n >\n {item.rendered}\n </Box>\n );\n};\n","import React from 'react';\nimport { useListBoxSection } from '@react-aria/listbox';\nimport type { ListState } from '@react-stately/list';\nimport type { Node } from '@react-types/shared';\n\nimport { Box } from '../Box';\nimport { Option } from './Option';\n\ninterface SectionProps {\n section: Node<unknown>;\n state: ListState<unknown>;\n}\n\nexport const ListBoxSection = ({ section, state }: SectionProps) => {\n const { itemProps, headingProps, groupProps } = useListBoxSection({\n heading: section.rendered,\n 'aria-label': section['aria-label'],\n });\n\n return (\n <Box\n as=\"li\"\n {...itemProps}\n css={{\n cursor: 'not-allowed',\n }}\n >\n {section.rendered && (\n <Box as=\"span\" {...headingProps} variant={'select.section'}>\n {section.rendered}\n </Box>\n )}\n <Box as=\"ul\" {...groupProps}>\n {[...section.childNodes].map(node => (\n <Option key={node.key} item={node} state={state} />\n ))}\n </Box>\n </Box>\n );\n};\n","import React, { useRef } from 'react';\nimport { useListBox } from '@react-aria/listbox';\nimport type { AriaListBoxOptions } from '@react-aria/listbox';\nimport type { ListState } from '@react-stately/list';\n\nimport { Box } from '../Box';\nimport { Option } from './Option';\nimport { ListBoxSection } from './ListBoxSection';\n\ninterface ListBoxProps extends AriaListBoxOptions<unknown> {\n state: ListState<unknown>;\n error?: boolean;\n}\n\nexport const ListBox = (props: ListBoxProps) => {\n const ref = useRef<HTMLUListElement>(null);\n const { state, error } = props;\n const { listBoxProps } = useListBox(props, state, ref);\n\n return (\n <Box\n as=\"ul\"\n p=\"none\"\n css={{\n listStyle: 'none',\n }}\n {...listBoxProps}\n variant={error ? 'select.listbox.error' : 'select.listbox'}\n ref={ref}\n >\n {[...state.collection].map(item =>\n item.type === 'section' ? (\n <ListBoxSection key={item.key} section={item} state={state} />\n ) : (\n <Option key={item.key} item={item} state={state} />\n )\n )}\n </Box>\n );\n};\n","import React, { forwardRef, RefObject } from 'react';\nimport { FocusScope } from '@react-aria/focus';\nimport {\n DismissButton,\n OverlayContainer,\n useModal,\n useOverlay,\n} from '@react-aria/overlays';\nimport { mergeProps } from '@react-aria/utils';\n\nimport { Box } from '../Box';\n\ninterface PopoverProps {\n isOpen?: boolean;\n onClose?: () => void;\n ref?: React.Ref<HTMLDivElement>;\n className?: string;\n}\n\nexport const Popover: React.FC<PopoverProps> = forwardRef(\n ({ children, className, isOpen, onClose, ...otherProps }, ref) => {\n // Handle events that should cause the popup to close,\n const { overlayProps } = useOverlay(\n {\n isOpen,\n onClose,\n shouldCloseOnBlur: true,\n isDismissable: true,\n },\n ref as RefObject<HTMLElement>\n );\n // Hide content outside the modal from screen readers.\n const { modalProps } = useModal();\n\n return (\n <OverlayContainer>\n <FocusScope restoreFocus>\n <Box\n {...mergeProps(overlayProps, otherProps, modalProps)}\n className={className}\n ref={ref}\n >\n {children}\n <DismissButton onDismiss={onClose} />\n </Box>\n </FocusScope>\n </OverlayContainer>\n );\n }\n);\n","import React from 'react';\n\nimport { ResponsiveStyleValue } from '@marigold/system';\nimport { ComponentProps } from '@marigold/types';\n\nimport { Inline } from '../Inline';\nimport { Stack } from '../Stack';\n\n// Props\n// ---------------\nexport type ActionGroupProps = {\n space?: ResponsiveStyleValue<string>;\n verticalAlignment?: boolean;\n} & ComponentProps<'div'>;\n\n// Component\n// ---------------\nexport const ActionGroup: React.FC<ActionGroupProps> = ({\n space = 'none',\n verticalAlignment = false,\n children,\n ...props\n}) =>\n verticalAlignment ? (\n <Stack space={space} {...props}>\n {children}\n </Stack>\n ) : (\n <Inline space={space} {...props}>\n {children}\n </Inline>\n );\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface BadgeThemeExtension<Value> {\n badge?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type BadgeProps = {\n variant?: string;\n bgColor?: string;\n borderColor?: string;\n} & ComponentProps<'div'>;\n\n// Component\n// ---------------\nexport const Badge: React.FC<BadgeProps> = ({\n variant = '',\n bgColor = 'transparent',\n borderColor = 'transparent',\n children,\n ...props\n}) => (\n <Box\n css={{ bg: bgColor, borderColor: borderColor }}\n variant={`badge.${variant}`}\n {...props}\n >\n {children}\n </Box>\n);\n","import React from 'react';\nimport { ResponsiveStyleValue } from '@marigold/system';\nimport { ComponentProps } from '@marigold/types';\n\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface CardThemeExtension<Value> {\n card?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type CardProps = {\n title?: string;\n width?: ResponsiveStyleValue<string>;\n variant?: string;\n} & ComponentProps<'div'>;\n\n// Component\n// ---------------\nexport const Card: React.FC<CardProps> = ({\n variant = '',\n title,\n width,\n className,\n children,\n ...props\n}) => {\n return (\n <Box\n {...props}\n variant={`card.${variant}`}\n maxWidth={width}\n className={className}\n >\n {title && (\n <Box as=\"h2\" variant=\"text.h2\" pb=\"small\">\n {title}\n </Box>\n )}\n {children}\n </Box>\n );\n};\n","import React from 'react';\nimport { Box } from '../Box';\n\nexport type ContainerProps = {\n className?: string;\n title?: string; // Used for testing.\n};\n\nexport const Container: React.FC<ContainerProps> = ({ children, ...props }) => (\n <Box {...props} width=\"100%\">\n {children}\n </Box>\n);\n","import React, { RefObject } from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { useOverlayTriggerState } from '@react-stately/overlays';\nimport { OverlayContainer } from '@react-aria/overlays';\nimport { useButton } from '@react-aria/button';\nimport { Close } from '@marigold/icons';\n\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { Text } from '../Text';\n\nimport { ModalDialog, ModalDialogProps } from './ModalDialog';\n\n// Props\n// ---------------\nexport type DialogProps = {\n backdropVariant?: string;\n close: ComponentProps<typeof Button>['onClick'];\n isOpen: boolean;\n title?: string;\n variant?: string;\n} & ModalDialogProps &\n ComponentProps<'div'>;\n\n// Component\n// ---------------\nexport const Dialog: React.FC<DialogProps> = ({\n backdropVariant,\n children,\n className,\n close,\n isOpen,\n title,\n variant,\n ...props\n}) => {\n const closeButtonRef = React.useRef<HTMLElement>() as RefObject<HTMLElement>;\n\n // useButton ensures that focus management is handled correctly,\n // across all browsers. Focus is restored to the button once the\n // dialog closes.\n const { buttonProps: closeButtonProps } = useButton(\n {\n onPress: () => close(),\n },\n closeButtonRef\n );\n\n return (\n <OverlayContainer>\n <ModalDialog\n variant={variant}\n backdropVariant={backdropVariant}\n isOpen={isOpen}\n onClose={close}\n isDismissable\n {...props}\n >\n <Box\n __baseCSS={{\n display: 'flex',\n justifyContent: 'space-between',\n borderRadius: 'small',\n pl: 'large',\n pb: 'large',\n }}\n className={className}\n >\n <Box pt=\"medium\">\n {title && (\n <Text as=\"h4\" variant=\"headline4\">\n {title}\n </Text>\n )}\n {children}\n </Box>\n <Box\n __baseCSS={{\n display: 'flex',\n justifyContent: 'flex-end',\n alignItems: 'start',\n paddingTop: 'xsmall',\n paddingX: 'xsmall',\n }}\n >\n <Box\n as={Button}\n __baseCSS={{\n color: 'text',\n bg: 'transparent',\n lineHeight: 'xsmall',\n px: 'xxsmall',\n ':hover': {\n color: 'text',\n bg: 'transparent',\n cursor: 'pointer',\n },\n ':focus': {\n outline: 0,\n },\n }}\n {...closeButtonProps}\n ref={closeButtonRef}\n >\n <Close size={16} />\n </Box>\n </Box>\n </Box>\n </ModalDialog>\n </OverlayContainer>\n );\n};\n\n// get the overlayTriggerState and openButton props for using the dialog component\nexport const useDialogButtonProps = () => {\n const state = useOverlayTriggerState({});\n const openButtonRef = React.useRef<HTMLElement>() as RefObject<HTMLElement>;\n const { buttonProps: openButtonProps } = useButton(\n {\n onPress: () => state.open(),\n },\n openButtonRef\n );\n\n return {\n state,\n openButtonProps,\n openButtonRef,\n };\n};\n","import React from 'react';\nimport { SeparatorProps, useSeparator } from '@react-aria/separator';\n\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface DividerThemeExtension<Value> {\n divider?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type DividerProps = {\n variant?: string;\n} & SeparatorProps;\n\n// Component\n// ---------------\nexport const Divider: React.FC<DividerProps> = ({ variant = '', ...props }) => {\n const { separatorProps } = useSeparator(props);\n\n return (\n <Box\n __baseCSS={{ width: '100%', height: '1px', m: 'none', bg: 'text' }}\n variant={`divider.${variant}`}\n {...props}\n {...separatorProps}\n />\n );\n};\n","import React from 'react';\nimport { Exclamation } from '@marigold/icons';\nimport { ComponentProps } from '@marigold/types';\n\nimport { Input } from '../Input';\nimport { Label } from '../Label';\nimport { ValidationMessage } from '../ValidationMessage';\n\n// Props\n// ---------------\nexport type FieldProps = {\n variant?: string;\n labelVariant?: string;\n htmlFor: string;\n label: string;\n required?: boolean;\n error?: boolean;\n errorMessage?: string;\n disabled?: boolean;\n} & ComponentProps<'input'>;\n\n// Component\n// ---------------\nexport const Field: React.FC<FieldProps> = ({\n type = 'text',\n variant = '',\n labelVariant = 'above',\n htmlFor,\n label,\n required,\n error,\n errorMessage,\n disabled,\n ...props\n}) => {\n return (\n <>\n <Label variant={labelVariant} htmlFor={htmlFor} required={required}>\n {label}\n </Label>\n <Input\n {...props}\n type={type}\n id={htmlFor}\n disabled={disabled}\n variant={variant}\n />\n {error && errorMessage && (\n <ValidationMessage>\n <Exclamation size={16} />\n {errorMessage}\n </ValidationMessage>\n )}\n </>\n );\n};\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface ImageThemeExtension<Value> {\n image?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type ImageProps = {\n variant?: string;\n children?: never;\n} & ComponentProps<'img'>;\n\n// Component\n// ---------------\nexport const Image: React.FC<ImageProps> = ({\n variant = 'fullWidth',\n ...props\n}) => <Box {...props} as=\"img\" variant={`image.${variant}`} />;\n","import React from 'react';\nimport { OverlayProvider } from '@react-aria/overlays';\nimport {\n Theme,\n Global,\n ThemeProvider,\n ThemeProviderProps,\n useTheme,\n __defaultTheme,\n} from '@marigold/system';\n\n// Theme Extension\n// ---------------\nexport interface RootThemeExtension<Value> {\n root?: {\n body?: Value;\n html?: Value;\n };\n}\n\n// Props\n// ---------------\nexport interface MarigoldProviderProps<T extends Theme>\n extends ThemeProviderProps<T> {}\n\n// Provider\n// ---------------\nexport function MarigoldProvider<T extends Theme>({\n theme,\n children,\n}: MarigoldProviderProps<T>) {\n const outer = useTheme();\n const isTopLevel = outer.theme === __defaultTheme;\n\n return (\n <ThemeProvider theme={theme}>\n {isTopLevel ? (\n <>\n <Global />\n <OverlayProvider>{children}</OverlayProvider>\n </>\n ) : (\n children\n )}\n </ThemeProvider>\n );\n}\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\n\nimport { Button } from '../Button';\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface MenuThemeExtension<Value> {\n menu?: Value;\n}\n\n// Props\n// ---------------\nexport type MenuProps = {\n variant?: string;\n label?: string;\n onClick: ComponentProps<typeof Button>['onClick'];\n show?: boolean;\n className?: string;\n title?: string; // For testing\n};\n\n// Component\n// ---------------\nexport const Menu: React.FC<MenuProps> = ({\n variant = 'default',\n label = 'Menu',\n onClick,\n show = false,\n children,\n ...props\n}) => {\n return (\n <Box variant={`menu.${variant}`} {...props}>\n <Button onClick={onClick} variant=\"menu\">\n {label}\n </Button>\n {show ? (\n <Box\n display=\"block\"\n position=\"absolute\"\n minWidth=\"120px\"\n borderRadius=\"2px\"\n >\n {children}\n </Box>\n ) : null}\n </Box>\n );\n};\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { Link } from '../Link';\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface MenuItemThemeExtension<Value> {\n menuItem?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type MenuItemProps = {\n variant?: string;\n} & ComponentProps<typeof Link>;\n\n// Component\n// ---------------\nexport const MenuItem: React.FC<MenuItemProps> = ({\n variant = 'default',\n className,\n children,\n ...props\n}) => {\n return (\n <Box variant={`menuItem.${variant}`} className={className}>\n <Link variant=\"menuItemLink\" {...props}>\n {children}\n </Link>\n </Box>\n );\n};\n","import React from 'react';\nimport { Exclamation, Info, Notification } from '@marigold/icons';\nimport { ComponentProps } from '@marigold/types';\nimport { Box } from '../Box';\nimport { Text } from '../Text';\n\n// Theme Extension\n// ---------------\nexport interface MessageThemeExtension<Value> {\n message?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type MessageProps = {\n messageTitle: string;\n variant?: string;\n} & ComponentProps<'div'>;\n\n// Component\n// ---------------\nexport const Message: React.FC<MessageProps> = ({\n messageTitle,\n variant = 'info',\n className,\n children,\n ...props\n}) => {\n var icon = <Info />;\n if (variant === 'warning') {\n icon = <Notification />;\n }\n if (variant === 'error') {\n icon = <Exclamation />;\n }\n\n return (\n <Box\n display=\"inline-block\"\n variant={`message.${variant}`}\n className={className}\n {...props}\n >\n <Box display=\"flex\" alignItems=\"center\" variant=\"message.title\">\n {icon}\n <Text as=\"h4\" variant=\"headline4\">\n {messageTitle}\n </Text>\n </Box>\n <Box css={{ color: 'black' }}>{children}</Box>\n </Box>\n );\n};\n","import React, { Ref, RefObject, useRef } from 'react';\nimport { useSelectState } from '@react-stately/select';\nimport { useButton } from '@react-aria/button';\nimport { mergeProps } from '@react-aria/utils';\nimport { useFocusRing } from '@react-aria/focus';\nimport { HiddenSelect, useSelect } from '@react-aria/select';\nimport type { AriaSelectProps } from '@react-types/select';\nimport { useOverlayTriggerState } from '@react-stately/overlays';\nimport { useOverlayTrigger, useOverlayPosition } from '@react-aria/overlays';\nimport { SingleSelection } from '@react-types/shared';\n\nimport { ComponentProps } from '@marigold/types';\nimport { ArrowDown, ArrowUp, Exclamation, Required } from '@marigold/icons';\nimport { ResponsiveStyleValue } from '@marigold/system';\n\nimport { Box } from '../Box';\nimport { Label } from '../Label';\nimport { ValidationMessage } from '../ValidationMessage';\nimport { ListBox } from './ListBox';\nimport { Popover } from './Popover';\n\n// Theme Extension\n// ---------------\nexport interface SelectThemeExtension<Value> {\n select?: {\n __default: Value;\n disabled?: Value;\n listbox?: {\n __default: Value;\n error?: Value;\n };\n section?: Value;\n option?: Value;\n };\n}\n\n// Props\n// ---------------\nexport type SelectProps = {\n labelVariant?: string;\n placeholder?: string;\n disabled?: boolean;\n required?: boolean;\n width?: ResponsiveStyleValue<number \| string>;\n error?: boolean;\n errorMessage?: string;\n} & ComponentProps<'select'> &\n AriaSelectProps<object> &\n SingleSelection;\n\n// Component\n// ---------------\nexport const Select = ({\n labelVariant = 'above',\n placeholder = 'Select an option',\n disabled,\n required,\n error,\n errorMessage,\n width,\n className,\n ...props\n}: SelectProps) => {\n const state = useSelectState(props);\n const overlayTriggerState = useOverlayTriggerState({});\n const triggerRef = useRef<HTMLElement>() as RefObject<HTMLElement>;\n const overlayRef = useRef<HTMLDivElement>();\n\n // Get props for the overlay\n const { overlayProps } = useOverlayTrigger(\n { type: 'listbox' },\n overlayTriggerState,\n triggerRef\n );\n // Get popover positioning props relative to the trigger\n const { overlayProps: positionProps } = useOverlayPosition({\n targetRef: triggerRef,\n overlayRef: overlayRef as RefObject<HTMLElement>,\n placement: 'bottom',\n shouldFlip: false,\n isOpen: state.isOpen,\n onClose: state.close,\n });\n // Get props for child elements from useSelect\n const { labelProps, triggerProps, valueProps, menuProps } = useSelect(\n props,\n state,\n triggerRef\n );\n // Get props for the button based on the trigger props from useSelect\n const { buttonProps } = useButton(triggerProps, triggerRef);\n\n const { focusProps } = useFocusRing();\n\n return (\n <Box position=\"relative\" display=\"inline-block\" width={width && width}>\n {props.label && (\n <Box>\n <Label {...labelProps} htmlFor={labelProps.id} variant={labelVariant}>\n {required ? (\n <Box as=\"span\" display=\"inline-flex\" alignItems=\"center\">\n {props.label}\n <Box as={Required} size={16} css={{ color: 'error' }} />\n </Box>\n ) : (\n props.label\n )}\n </Label>\n </Box>\n )}\n <HiddenSelect\n state={state}\n triggerRef={triggerRef}\n label={props.label}\n name={props.name}\n isDisabled={disabled}\n />\n <Box\n as=\"button\"\n {...mergeProps(buttonProps, focusProps)}\n ref={triggerRef as RefObject<HTMLButtonElement>}\n variant={\n error && state.isOpen && !disabled\n ? 'button.select.errorOpened'\n : error\n ? 'button.select.error'\n : state.isOpen && !disabled\n ? 'button.select.open'\n : 'button.select'\n }\n disabled={disabled}\n className={className}\n >\n <Box\n as=\"span\"\n {...valueProps}\n variant={disabled ? 'select.disabled' : 'select'}\n >\n {state.selectedItem ? state.selectedItem.rendered : placeholder}\n </Box>\n {state.isOpen && !disabled ? (\n <Box as={ArrowUp} size={16} css={{ fill: 'text' }} />\n ) : (\n <Box\n as={ArrowDown}\n size={16}\n css={{ fill: disabled ? 'disabled' : 'text' }}\n />\n )}\n </Box>\n {state.isOpen && !disabled && (\n <Box\n as={Popover}\n {...overlayProps}\n {...positionProps}\n css={{\n width: triggerRef.current && triggerRef.current.offsetWidth + 'px',\n }}\n ref={overlayRef as Ref<HTMLDivElement>}\n isOpen={state.isOpen}\n onClose={state.close}\n >\n <ListBox error={error} {...menuProps} state={state} />\n </Box>\n )}\n {error && errorMessage && (\n <Box as=\"span\" display=\"inline-flex\" alignItems=\"center\">\n <Box as={Exclamation} size={16} css={{ color: 'error' }} />\n <ValidationMessage>{errorMessage}</ValidationMessage>\n </Box>\n )}\n </Box>\n );\n};\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\n\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface SliderThemeExtension<Value> {\n slider?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type SliderProps = {\n variant?: string;\n} & ComponentProps<'input'>;\n\n// Component\n// ---------------\nexport const Slider: React.FC<SliderProps> = ({\n variant = '',\n className,\n ...props\n}) => (\n <Box\n as=\"input\"\n type=\"range\"\n css={{ verticalAlign: 'middle' }}\n variant={`slider.${variant}`}\n className={className}\n {...props}\n />\n);\n","import React from 'react';\nimport { Exclamation } from '@marigold/icons';\nimport { ComponentProps } from '@marigold/types';\n\nimport { ValidationMessage } from '../ValidationMessage';\nimport { Label } from '../Label';\nimport { Box } from '../Box';\n\n// Theme Extension\n// ---------------\nexport interface TextareaThemeExtension<Value> {\n textarea?: {\n [key: string]: Value;\n };\n}\n\n// Props\n// ---------------\nexport type TextareaProps = {\n variant?: string;\n label?: string;\n htmlFor?: string;\n required?: boolean;\n error?: boolean;\n errorMessage?: string;\n} & ComponentProps<'textarea'>;\n\n// Component\n// ---------------\nexport const Textarea: React.FC<TextareaProps> = ({\n variant = '',\n htmlFor = 'textarea',\n label,\n error,\n errorMessage,\n required,\n className = '',\n children,\n ...props\n}) => (\n <Box>\n {label && (\n <Label htmlFor={htmlFor} required={required}>\n {label}\n </Label>\n )}\n <Box\n as=\"textarea\"\n {...props}\n display=\"block\"\n variant={`textarea.${variant}`}\n css={{ outlineColor: error && 'error' }}\n className={className}\n />\n {error && errorMessage && (\n <ValidationMessage>\n <Exclamation size={16} />\n {errorMessage}\n </ValidationMessage>\n )}\n </Box>\n);\n"],"names":["ALIGNMENT","top","center","bottom","Inline","space","align","children","props","React","Box","display","css","pl","alignItems","Children","map","flattenChildren","child","cloneElement","left","right","Stack","flexDirection","pt","ICON_MAP","success","Check","warning","Notification","error","Exclamation","Button","forwardRef","ref","as","variant","size","disabled","className","useButton","elementType","isDisabled","buttonProps","columnGap","CheckboxIcon","checked","SVG","width","height","viewBox","fill","x","y","rx","conditional","__baseCSS","fillRule","clipRule","d","LabelBase","required","color","Label","Required","ValidationMessage","CheckboxInput","state","useToggleState","useRef","inputProps","useCheckbox","useFocusRing","pr","VisuallyHidden","type","focusProps","transform","Array","isArray","v","useAlignment","direction","Text","cursor","outline","userSelect","textAlign","ModalDialog","backdropVariant","isDismissable","isOpen","onClose","restProps","useOverlay","overlayProps","underlayProps","usePreventScroll","modalProps","useModal","dialogProps","useDialog","placeItems","position","zIndex","FocusScope","contain","restoreFocus","autoFocus","Input","Link","useLink","linkProps","RadioIcon","cx","cy","r","RadioInput","Option","item","useState","setDisabled","useOption","key","optionProps","isSelected","useEffect","disabledKeys","values","rendered","ListBoxSection","section","useListBoxSection","heading","headingProps","groupProps","itemProps","childNodes","node","ListBox","useListBox","p","listStyle","listBoxProps","collection","Popover","otherProps","shouldCloseOnBlur","OverlayContainer","mergeProps","DismissButton","onDismiss","verticalAlignment","Icon","bg","m","mx","bgColor","borderColor","title","maxWidth","pb","label","labelVariant","errorMessage","htmlFor","id","horizontalAlign","verticalAlign","justifyContent","spaceObject","useTheme","spaceValue","Object","flexWrap","close","closeButtonRef","closeButtonProps","onPress","borderRadius","paddingTop","paddingX","lineHeight","px","Close","useSeparator","separatorProps","theme","outer","ThemeProvider","__defaultTheme","Global","OverlayProvider","onClick","show","minWidth","messageTitle","icon","Info","placeholder","useSelectState","overlayTriggerState","useOverlayTriggerState","triggerRef","overlayRef","useOverlayTrigger","positionProps","useOverlayPosition","targetRef","placement","shouldFlip","useSelect","labelProps","valueProps","menuProps","triggerProps","HiddenSelect","name","selectedItem","ArrowUp","ArrowDown","current","offsetWidth","outlineColor","openButtonRef","open","openButtonProps"],"mappings":"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"}

package/dist/components.esm.js CHANGED Viewed

@@ -12,6 +12,7 @@ import { useToggleState } from '@react-stately/toggle';
 import { useOverlayTriggerState } from '@react-stately/overlays';
 import { useOverlay, usePreventScroll, useModal, OverlayContainer, OverlayProvider, DismissButton, useOverlayTrigger, useOverlayPosition } from '@react-aria/overlays';
 import { useDialog } from '@react-aria/dialog';
+import { useSeparator } from '@react-aria/separator';
 import { useLink } from '@react-aria/link';
 export { SSRProvider } from '@react-aria/ssr';
 import { useSelectState } from '@react-stately/select';
@@ -709,13 +710,21 @@ var _excluded$f = ["variant"];
 var Divider = function Divider(_ref) {
   var _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
+      variant = _ref$variant === void 0 ? '' : _ref$variant,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
-  return React.createElement(Box, Object.assign({}, props, {
-    as: "hr",
+  var _useSeparator = useSeparator(props),
+      separatorProps = _useSeparator.separatorProps;
+  return React.createElement(Box, Object.assign({
+    __baseCSS: {
+      width: '100%',
+      height: '1px',
+      m: 'none',
+      bg: 'text'
+    },
     variant: "divider." + variant
-  }));
+  }, props, separatorProps));
 };
 var _excluded$g = ["variant", "type"];