@marigold/components 0.3.0 → 0.3.1

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 (21) hide show
  1. package/CHANGELOG.md +48 -168
  2. package/dist/Alert/Alert.d.ts +12 -3
  3. package/dist/Link/Link.d.ts +1 -1
  4. package/dist/Radio/Radio.d.ts +3 -5
  5. package/dist/Radio/Radio.stories.d.ts +5 -0
  6. package/dist/Radio/RadioIcon.d.ts +9 -0
  7. package/dist/components.cjs.development.js +76 -113
  8. package/dist/components.cjs.development.js.map +1 -1
  9. package/dist/components.cjs.production.min.js +1 -1
  10. package/dist/components.cjs.production.min.js.map +1 -1
  11. package/dist/components.esm.js +76 -113
  12. package/dist/components.esm.js.map +1 -1
  13. package/package.json +1 -1
  14. package/src/Link/Link.tsx +2 -1
  15. package/src/Radio/{Radio.stories.mdx → Radio.stories.tsx} +27 -46
  16. package/src/Radio/Radio.test.tsx +42 -7
  17. package/src/Radio/Radio.tsx +49 -89
  18. package/src/Radio/RadioIcon.tsx +49 -0
  19. package/dist/Radio/RadioIcons.d.ts +0 -10
  20. package/src/Checkbox/Checkbox.stories.mdx +0 -97
  21. package/src/Radio/RadioIcons.tsx +0 -39
package/dist/components.cjs.production.min.js.map CHANGED
@@ -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/RadioIcons.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 ...props,\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 { SVG } from '@marigold/system';\n\nimport { Box } from '../Box';\n\nexport const RadioChecked = ({ disabled = false, ...props }) => (\n <SVG width=\"16\" height=\"32\" viewBox=\"0 0 16 32\" fill=\"none\" {...props}>\n <Box\n as=\"circle\"\n cx=\"8\"\n cy=\"16\"\n r=\"7.5\"\n variant={disabled ? 'radio.checked.disabled' : 'radio.checked'}\n />\n <Box as=\"circle\" cx=\"8\" cy=\"16\" r=\"3\" variant=\"radio.checked.circle\" />\n </SVG>\n);\n\nexport const RadioUnchecked = ({\n disabled = false,\n error = false,\n ...props\n}) => (\n <SVG width=\"16\" height=\"32\" viewBox=\"0 0 16 32\" fill=\"none\" {...props}>\n <Box\n as=\"circle\"\n cx=\"8\"\n cy=\"16\"\n r=\"7.5\"\n variant={\n disabled\n ? 'radio.unchecked.disabled'\n : error\n ? 'radio.unchecked.error'\n : 'radio.unchecked'\n }\n />\n </SVG>\n);\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { Exclamation } from '@marigold/icons';\n\nimport { Box } from '../Box';\nimport { Label } from '../Label';\nimport { ValidationMessage } from '../ValidationMessage';\n\nimport { RadioChecked, RadioUnchecked } from './RadioIcons';\n\n// Theme Extension\n// ---------------\nexport interface RadioThemeExtension<Value> {\n radio?: {\n [key: string]: Value;\n };\n}\n\n// Radio Icon\n// ---------------\ntype RadioIconProps = {\n variant?: string;\n checked?: boolean;\n disabled?: boolean;\n error?: boolean;\n children?: never;\n};\n\nconst RadioIcon: React.FC<RadioIconProps> = ({\n variant,\n checked,\n disabled,\n error,\n}) => {\n if (checked) {\n return (\n <Box as={RadioChecked} variant={`radio.${variant}`} disabled={disabled} />\n );\n }\n return (\n <Box\n as={RadioUnchecked}\n variant={`radio.${variant}`}\n disabled={disabled}\n error={error}\n />\n );\n};\n\n// Radio Input\n// ---------------\ntype RadioInputProps = {\n variant?: string;\n error?: boolean;\n} & ComponentProps<'input'>;\n\nconst RadioInput: React.FC<RadioInputProps> = ({\n className,\n variant = '',\n error,\n ...props\n}) => (\n <Box display=\"inline-block\" className={className}>\n <Box\n as=\"input\"\n type=\"radio\"\n css={{\n position: 'absolute',\n opacity: 0,\n zIndex: -1,\n width: 1,\n height: 1,\n overflow: 'hidden',\n }}\n {...props}\n />\n <RadioIcon\n checked={props.checked}\n variant={variant}\n disabled={props.disabled}\n error={error}\n />\n </Box>\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 if (label) {\n return (\n <>\n <Label\n htmlFor={props.id}\n required={required}\n variant={labelVariant}\n color={props.disabled ? 'disabled' : 'text'}\n >\n <Box as={RadioInput} pr=\"8px\" error={error} {...props} />\n {label}\n </Label>\n {error && errorMessage && (\n <ValidationMessage>\n <Exclamation size={16} />\n {errorMessage}\n </ValidationMessage>\n )}\n </>\n );\n }\n\n return <RadioInput {...props} />;\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","RadioChecked","cx","cy","r","RadioUnchecked","RadioIcon","RadioInput","opacity","overflow","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 { 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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"}
package/dist/components.esm.js CHANGED
@@ -904,142 +904,105 @@ function MarigoldProvider(_ref) {
904
904
  }, isTopLevel ? React.createElement(React.Fragment, null, React.createElement(Global, null), React.createElement(OverlayProvider, null, children)) : children);
905
905
  }
906
906
 
907
- var _excluded$n = ["disabled"],
908
- _excluded2$3 = ["disabled", "error"];
909
- var RadioChecked = function RadioChecked(_ref) {
910
- var _ref$disabled = _ref.disabled,
907
+ var RadioIcon = function RadioIcon(_ref) {
908
+ var _ref$variant = _ref.variant,
909
+ variant = _ref$variant === void 0 ? '' : _ref$variant,
910
+ _ref$checked = _ref.checked,
911
+ checked = _ref$checked === void 0 ? false : _ref$checked,
912
+ _ref$disabled = _ref.disabled,
911
913
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
912
- props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
913
-
914
- return React.createElement(SVG, Object.assign({
914
+ _ref$error = _ref.error,
915
+ error = _ref$error === void 0 ? false : _ref$error;
916
+ var conditionalStates = disabled ? {
917
+ disabled: disabled
918
+ } : {
919
+ checked: checked,
920
+ error: error
921
+ };
922
+ return React.createElement(SVG, {
915
923
  width: "16",
916
924
  height: "32",
917
925
  viewBox: "0 0 16 32",
918
- fill: "none"
919
- }, props), React.createElement(Box, {
920
- as: "circle",
921
- cx: "8",
922
- cy: "16",
923
- r: "7.5",
924
- variant: disabled ? 'radio.checked.disabled' : 'radio.checked'
925
- }), React.createElement(Box, {
926
+ fill: "none",
927
+ "aria-hidden": "true"
928
+ }, React.createElement(Box, {
929
+ variant: conditional("radio." + variant, conditionalStates),
926
930
  as: "circle",
927
931
  cx: "8",
928
932
  cy: "16",
929
- r: "3",
930
- variant: "radio.checked.circle"
931
- }));
932
- };
933
- var RadioUnchecked = function RadioUnchecked(_ref2) {
934
- var _ref2$disabled = _ref2.disabled,
935
- disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
936
- _ref2$error = _ref2.error,
937
- error = _ref2$error === void 0 ? false : _ref2$error,
938
- props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
939
-
940
- return React.createElement(SVG, Object.assign({
941
- width: "16",
942
- height: "32",
943
- viewBox: "0 0 16 32",
944
- fill: "none"
945
- }, props), React.createElement(Box, {
946
- as: "circle",
933
+ r: "7.5"
934
+ }), checked && React.createElement("circle", {
935
+ fill: "white",
947
936
  cx: "8",
948
937
  cy: "16",
949
- r: "7.5",
950
- variant: disabled ? 'radio.unchecked.disabled' : error ? 'radio.unchecked.error' : 'radio.unchecked'
938
+ r: "3"
951
939
  }));
952
940
  };
953
941
 
954
- var _excluded$o = ["className", "variant", "error"],
955
- _excluded2$4 = ["label", "required", "labelVariant", "error", "errorMessage"];
942
+ var _excluded$n = ["error"],
943
+ _excluded2$3 = ["label", "required", "labelVariant", "error", "errorMessage"];
956
944
 
957
- var RadioIcon = function RadioIcon(_ref) {
958
- var variant = _ref.variant,
959
- checked = _ref.checked,
960
- disabled = _ref.disabled,
961
- error = _ref.error;
962
-
963
- if (checked) {
964
- return React.createElement(Box, {
965
- as: RadioChecked,
966
- variant: "radio." + variant,
967
- disabled: disabled
968
- });
969
- }
970
-
971
- return React.createElement(Box, {
972
- as: RadioUnchecked,
973
- variant: "radio." + variant,
974
- disabled: disabled,
975
- error: error
976
- });
977
- };
945
+ var RadioInput = function RadioInput(_ref) {
946
+ var error = _ref.error,
947
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
978
948
 
979
- var RadioInput = function RadioInput(_ref2) {
980
- var className = _ref2.className,
981
- _ref2$variant = _ref2.variant,
982
- variant = _ref2$variant === void 0 ? '' : _ref2$variant,
983
- error = _ref2.error,
984
- props = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
949
+ var _useFocusRing = useFocusRing(),
950
+ focusProps = _useFocusRing.focusProps;
985
951
 
986
952
  return React.createElement(Box, {
987
- display: "inline-block",
988
- className: className
989
- }, React.createElement(Box, Object.assign({
990
- as: "input",
953
+ pr: "xsmall"
954
+ }, React.createElement(VisuallyHidden, null, React.createElement("input", Object.assign({
991
955
  type: "radio",
992
- css: {
993
- position: 'absolute',
994
- opacity: 0,
995
- zIndex: -1,
996
- width: 1,
997
- height: 1,
998
- overflow: 'hidden'
999
- }
1000
- }, props)), React.createElement(RadioIcon, {
1001
- checked: props.checked,
1002
- variant: variant,
956
+ disabled: props.disabled
957
+ }, focusProps, props))), React.createElement(RadioIcon, {
958
+ variant: props.variant,
1003
959
  disabled: props.disabled,
960
+ checked: props.checked,
1004
961
  error: error
1005
962
  }));
1006
963
  };
1007
964
 
1008
- var Radio = function Radio(_ref3) {
1009
- var label = _ref3.label,
1010
- required = _ref3.required,
1011
- _ref3$labelVariant = _ref3.labelVariant,
1012
- labelVariant = _ref3$labelVariant === void 0 ? 'inline' : _ref3$labelVariant,
1013
- error = _ref3.error,
1014
- errorMessage = _ref3.errorMessage,
1015
- props = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
1016
-
1017
- if (label) {
1018
- return React.createElement(React.Fragment, null, React.createElement(Label, {
1019
- htmlFor: props.id,
1020
- required: required,
1021
- variant: labelVariant,
1022
- color: props.disabled ? 'disabled' : 'text'
1023
- }, React.createElement(Box, Object.assign({
1024
- as: RadioInput,
1025
- pr: "8px",
1026
- error: error
1027
- }, props)), label), error && errorMessage && React.createElement(ValidationMessage, null, React.createElement(Exclamation, {
1028
- size: 16
1029
- }), errorMessage));
1030
- }
965
+ var Radio = function Radio(_ref2) {
966
+ var label = _ref2.label,
967
+ required = _ref2.required,
968
+ _ref2$labelVariant = _ref2.labelVariant,
969
+ labelVariant = _ref2$labelVariant === void 0 ? 'inline' : _ref2$labelVariant,
970
+ error = _ref2.error,
971
+ errorMessage = _ref2.errorMessage,
972
+ props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
1031
973
 
1032
- return React.createElement(RadioInput, Object.assign({}, props));
974
+ return React.createElement(React.Fragment, null, React.createElement(Box, {
975
+ as: Label,
976
+ htmlFor: props.id,
977
+ required: required,
978
+ variant: "label." + labelVariant,
979
+ css: props.disabled ? {
980
+ color: 'disabled',
981
+ ':hover': {
982
+ cursor: 'not-allowed'
983
+ }
984
+ } : {
985
+ color: 'text',
986
+ ':hover': {
987
+ cursor: 'pointer'
988
+ }
989
+ }
990
+ }, React.createElement(Box, Object.assign({
991
+ as: RadioInput,
992
+ error: error
993
+ }, props)), label), error && errorMessage && React.createElement(ValidationMessage, null, React.createElement(Exclamation, {
994
+ size: 16
995
+ }), errorMessage));
1033
996
  };
1034
997
 
1035
- var _excluded$p = ["variant", "className"];
998
+ var _excluded$o = ["variant", "className"];
1036
999
  // ---------------
1037
1000
 
1038
1001
  var Slider = function Slider(_ref) {
1039
1002
  var _ref$variant = _ref.variant,
1040
1003
  variant = _ref$variant === void 0 ? '' : _ref$variant,
1041
1004
  className = _ref.className,
1042
- props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
1005
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
1043
1006
 
1044
1007
  return React.createElement(Box, Object.assign({
1045
1008
  as: "input",
@@ -1147,13 +1110,13 @@ var ListBox = function ListBox(props) {
1147
1110
  }));
1148
1111
  };
1149
1112
 
1150
- var _excluded$q = ["children", "className", "isOpen", "onClose"];
1113
+ var _excluded$p = ["children", "className", "isOpen", "onClose"];
1151
1114
  var Popover = /*#__PURE__*/forwardRef(function (_ref, ref) {
1152
1115
  var children = _ref.children,
1153
1116
  className = _ref.className,
1154
1117
  isOpen = _ref.isOpen,
1155
1118
  onClose = _ref.onClose,
1156
- otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
1119
+ otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
1157
1120
 
1158
1121
  // Handle events that should cause the popup to close,
1159
1122
  var _useOverlay = useOverlay({
@@ -1178,7 +1141,7 @@ var Popover = /*#__PURE__*/forwardRef(function (_ref, ref) {
1178
1141
  }))));
1179
1142
  });
1180
1143
 
1181
- var _excluded$r = ["labelVariant", "placeholder", "disabled", "required", "error", "errorMessage", "width", "className"];
1144
+ var _excluded$q = ["labelVariant", "placeholder", "disabled", "required", "error", "errorMessage", "width", "className"];
1182
1145
  // ---------------
1183
1146
 
1184
1147
  var Select = function Select(_ref) {
@@ -1192,7 +1155,7 @@ var Select = function Select(_ref) {
1192
1155
  errorMessage = _ref.errorMessage,
1193
1156
  width = _ref.width,
1194
1157
  className = _ref.className,
1195
- props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
1158
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
1196
1159
 
1197
1160
  var state = useSelectState(props);
1198
1161
  var overlayTriggerState = useOverlayTriggerState({});
@@ -1301,7 +1264,7 @@ var Select = function Select(_ref) {
1301
1264
  }), React.createElement(ValidationMessage, null, errorMessage)));
1302
1265
  };
1303
1266
 
1304
- var _excluded$s = ["variant", "htmlFor", "label", "error", "errorMessage", "required", "className", "children"];
1267
+ var _excluded$r = ["variant", "htmlFor", "label", "error", "errorMessage", "required", "className", "children"];
1305
1268
  // ---------------
1306
1269
 
1307
1270
  var Textarea = function Textarea(_ref) {
@@ -1315,7 +1278,7 @@ var Textarea = function Textarea(_ref) {
1315
1278
  required = _ref.required,
1316
1279
  _ref$className = _ref.className,
1317
1280
  className = _ref$className === void 0 ? '' : _ref$className,
1318
- props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
1281
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
1319
1282
 
1320
1283
  return React.createElement(Box, null, label && React.createElement(Label, {
1321
1284
  htmlFor: htmlFor,
@@ -1334,10 +1297,10 @@ var Textarea = function Textarea(_ref) {
1334
1297
  }), errorMessage));
1335
1298
  };
1336
1299
 
1337
- var _excluded$t = ["children"];
1300
+ var _excluded$s = ["children"];
1338
1301
  var Container = function Container(_ref) {
1339
1302
  var children = _ref.children,
1340
- props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
1303
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
1341
1304
 
1342
1305
  return React.createElement(Box, Object.assign({}, props, {
1343
1306
  width: "100%"