@marigold/components 0.2.0 → 0.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"components.cjs.production.min.js","sources":["../src/Box/Box.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/Heading/Heading.tsx","../src/Dialog/ModalDialog.tsx","../src/Input/Input.tsx","../src/Text/Text.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/Stack/Stack.tsx","../src/ActionGroup/ActionGroup.tsx","../src/Badge/Badge.tsx","../src/Card/Card.tsx","../src/Columns/Columns.tsx","../src/Container/Container.tsx","../src/Dialog/Dialog.tsx","../src/Divider/Divider.tsx","../src/Field/Field.tsx","../src/Hidden/Hidden.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, { forwardRef } from 'react';\nimport { CSSObject, Element, ResponsiveStyleValue } from '@marigold/system';\nimport {\n  PolymorphicPropsWithRef,\n  PolymorphicComponentWithRef,\n} from '@marigold/types';\n\nexport type BoxOwnProps = {\n  className?: string;\n  variant?: string | string[];\n  css?: CSSObject;\n\n  display?: ResponsiveStyleValue<string>;\n\n  height?: ResponsiveStyleValue<number | string>;\n  width?: ResponsiveStyleValue<number | string>;\n  minWidth?: ResponsiveStyleValue<number | string>;\n  maxWidth?: ResponsiveStyleValue<number | string>;\n\n  position?: ResponsiveStyleValue<string>;\n  top?: ResponsiveStyleValue<number | string>;\n  bottom?: ResponsiveStyleValue<number | string>;\n  right?: ResponsiveStyleValue<number | string>;\n  left?: ResponsiveStyleValue<number | string>;\n  zIndex?: ResponsiveStyleValue<number | string>;\n\n  p?: ResponsiveStyleValue<number | string>;\n  px?: ResponsiveStyleValue<number | string>;\n  py?: ResponsiveStyleValue<number | string>;\n  pt?: ResponsiveStyleValue<number | string>;\n  pb?: ResponsiveStyleValue<number | string>;\n  pl?: ResponsiveStyleValue<number | string>;\n  pr?: ResponsiveStyleValue<number | string>;\n\n  m?: ResponsiveStyleValue<number | string>;\n  mx?: ResponsiveStyleValue<number | string>;\n  my?: ResponsiveStyleValue<number | string>;\n  mt?: ResponsiveStyleValue<number | string>;\n  mb?: ResponsiveStyleValue<number | string>;\n  ml?: ResponsiveStyleValue<number | string>;\n  mr?: ResponsiveStyleValue<number | string>;\n\n  flexDirection?: ResponsiveStyleValue<string>;\n  flexWrap?: ResponsiveStyleValue<string>;\n  flexShrink?: ResponsiveStyleValue<number | string>;\n  flexGrow?: ResponsiveStyleValue<number | string>;\n  alignItems?: ResponsiveStyleValue<string>;\n  justifyContent?: ResponsiveStyleValue<string>;\n\n  bg?: ResponsiveStyleValue<number | string>;\n  border?: ResponsiveStyleValue<number | string>;\n  borderRadius?: ResponsiveStyleValue<number | string>;\n  boxShadow?: ResponsiveStyleValue<number | string>;\n  opacity?: ResponsiveStyleValue<number | string>;\n  overflow?: ResponsiveStyleValue<string>;\n\n  transition?: ResponsiveStyleValue<number | string>;\n};\n\nexport type BoxProps = PolymorphicPropsWithRef<BoxOwnProps, 'div'>;\n\nexport const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'> = forwardRef(\n  (\n    {\n      variant,\n      as = 'div',\n      css,\n      children,\n      className,\n      display,\n      height,\n      width,\n      minWidth,\n      maxWidth,\n      position,\n      top,\n      bottom,\n      right,\n      left,\n      zIndex,\n      p,\n      px,\n      py,\n      pt,\n      pb,\n      pl,\n      pr,\n      m,\n      mx,\n      my,\n      mt,\n      mb,\n      ml,\n      mr,\n      flexDirection,\n      flexWrap,\n      flexShrink,\n      flexGrow,\n      alignItems,\n      justifyContent,\n      bg,\n      border,\n      borderRadius,\n      boxShadow,\n      opacity,\n      overflow,\n      transition,\n      ...props\n    },\n    ref\n  ) => (\n    <Element\n      as={as}\n      ref={ref}\n      variant={variant}\n      css={{\n        ...{\n          display,\n          height,\n          width,\n          minWidth,\n          maxWidth,\n          position,\n          top,\n          bottom,\n          right,\n          left,\n          zIndex,\n          p,\n          px,\n          py,\n          pt,\n          pb,\n          pl,\n          pr,\n          m,\n          mx,\n          my,\n          mt,\n          mb,\n          ml,\n          mr,\n          flexDirection,\n          flexWrap,\n          flexShrink,\n          flexGrow,\n          alignItems,\n          justifyContent,\n          bg,\n          border,\n          borderRadius,\n          boxShadow,\n          opacity,\n          overflow,\n          transition,\n        },\n        ...css,\n      }}\n      className={className}\n      {...props}\n    >\n      {children}\n    </Element>\n  )\n);\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { Exclamation, Check, Notification } from '@marigold/icons';\nimport { Box } from '../Box';\n\nconst ICON_MAP = {\n  success: Check,\n  warning: Notification,\n  error: Exclamation,\n} as const;\n\nexport type AlertProps = {\n  variant?: keyof typeof ICON_MAP;\n} & ComponentProps<'div'>;\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={`alerts.${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\nexport type ButtonProps = PolymorphicPropsWithRef<BoxOwnProps, 'button'>;\n\nexport const Button: PolymorphicComponentWithRef<BoxOwnProps, 'button'> =\n  forwardRef(\n    (\n      {\n        as = 'button',\n        variant = 'primary',\n        size = 'large',\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          variant={[`button.${variant}`, `button.${size}`]}\n          className={className}\n          ref={ref}\n        >\n          <Box as=\"span\" display=\"inline-flex\" alignItems=\"center\">\n            {children}\n          </Box>\n        </Box>\n      );\n    }\n  );\n","import React from 'react';\nimport { SVG } from '@marigold/icons';\n\nimport { Box } from '../Box';\n\nexport const CheckboxChecked = ({ disabled = false, ...props }) => (\n  <SVG width=\"16\" height=\"32\" viewBox=\"0 0 16 32\" fill=\"none\" {...props}>\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={disabled ? 'checkbox.checked.disabled' : 'checkbox.checked'}\n    />\n    <Box\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      variant=\"checkbox.checked.icon\"\n    />\n  </SVG>\n);\n\nexport const CheckboxUnchecked = ({\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=\"rect\"\n      x=\"0.5\"\n      y=\"8.5\"\n      width=\"15px\"\n      height=\"15px\"\n      rx=\"1.5\"\n      variant={\n        disabled\n          ? 'checkbox.unchecked.disabled'\n          : error\n          ? 'checkbox.unchecked.error'\n          : 'checkbox.unchecked'\n      }\n    />\n  </SVG>\n);\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { Required } from '@marigold/icons';\n\nimport { Box } from '../Box';\n\nexport type LabelProps = {\n  htmlFor?: string;\n  variant?: string;\n  required?: boolean;\n} & ComponentProps<'label'>;\n\nexport const Label: React.FC<LabelProps> = ({\n  variant = 'above',\n  required,\n  children,\n  ...props\n}) => {\n  return required ? (\n    <Box as=\"span\" display=\"inline-flex\" alignItems=\"center\">\n      <Box {...props} as=\"label\" variant={`label.${variant}`}>\n        {children}\n      </Box>\n      {required && <Box as={Required} size={16} css={{ color: 'red60' }} />}\n    </Box>\n  ) : (\n    <Box {...props} as=\"label\" variant={`label.${variant}`}>\n      {children}\n    </Box>\n  );\n};\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\n\nimport { Box } from '../Box';\n\nexport type ValidationMessageProps = {\n  variant?: string;\n} & ComponentProps<'span'>;\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 { ComponentProps } from '@marigold/types';\nimport { Exclamation } from '@marigold/icons';\n\nimport { CheckboxChecked, CheckboxUnchecked } from './CheckboxIcons';\n\nimport { Box } from '../Box';\nimport { Label } from '../Label';\nimport { ValidationMessage } from '../ValidationMessage';\n\n// Checkbox Icon\n// ---------------\ntype CheckboxIconProps = {\n  variant?: string;\n  checked?: boolean;\n  disabled?: boolean;\n  children?: never;\n  error?: boolean;\n};\n\nconst CheckboxIcon: React.FC<CheckboxIconProps> = ({\n  variant,\n  checked,\n  disabled,\n  error,\n}) => {\n  if (checked) {\n    return (\n      <Box\n        as={CheckboxChecked}\n        variant={`checkbox.${variant}`}\n        disabled={disabled}\n      />\n    );\n  }\n  return (\n    <Box\n      as={CheckboxUnchecked}\n      variant={`checkbox.${variant}`}\n      disabled={disabled}\n      error={error}\n    />\n  );\n};\n\n// Checkbox Input\n// ---------------\ntype CheckboxInputProps = {\n  variant?: string;\n  error?: boolean;\n} & ComponentProps<'input'>;\n\nconst CheckboxInput: React.FC<CheckboxInputProps> = ({\n  className,\n  variant = 'default',\n  error,\n  ...props\n}) => (\n  <Box display=\"inline-block\" className={className}>\n    <Box\n      as=\"input\"\n      type=\"checkbox\"\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    <CheckboxIcon\n      checked={props.checked}\n      variant={variant}\n      disabled={props.disabled}\n      error={error}\n    />\n  </Box>\n);\n\n// Checkbox\n// ---------------\nexport type CheckboxProps = {\n  id: string;\n  label?: string;\n  required?: boolean;\n  error?: boolean;\n  errorMessage?: string;\n} & CheckboxInputProps;\n\nexport const Checkbox: React.FC<CheckboxProps> = ({\n  label,\n  required,\n  error,\n  errorMessage,\n  ...props\n}) => {\n  if (label) {\n    return (\n      <>\n        <Label\n          htmlFor={props.id}\n          required={required}\n          variant={props.disabled ? 'disabled' : 'inline'}\n        >\n          <Box as={CheckboxInput} 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 <CheckboxInput {...props} />;\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 from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { Box } from '../Box';\n\nexport type HeadingProps = {\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  variant?: string;\n} & ComponentProps<'h1'>;\n\nexport const Heading: React.FC<HeadingProps> = ({\n  as = 'h2',\n  variant = 'h2',\n  children,\n  ...props\n}) => (\n  <Box {...props} as={as} variant={`text.${variant}`}>\n    {children}\n  </Box>\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\nexport type ModalDialogProps = OverlayProps & AriaDialogProps;\n\nexport const ModalDialog: React.FC<ModalDialogProps> = ({\n  children,\n  ...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(props, ref);\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 variant=\"dialog.modalWrapper\" {...underlayProps}>\n      <FocusScope contain restoreFocus autoFocus>\n        <Box\n          {...overlayProps}\n          {...dialogProps}\n          {...modalProps}\n          ref={ref}\n          variant=\"dialog.modalBody\"\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\nexport type InputProps = {\n  variant?: string;\n} & ComponentProps<'input'>;\n\nexport const Input: React.FC<InputProps> = ({\n  variant = 'default',\n  type = 'text',\n  ...props\n}) => <Box {...props} as=\"input\" type={type} variant={`input.${variant}`} />;\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\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\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, { useRef } from 'react';\nimport { useLink } from '@react-aria/link';\nimport { PolymorphicComponent, PolymorphicProps } from '@marigold/types';\n\nimport { Text, TextOwnProps } from '../Text';\n\nexport type LinkOwnProps = { disabled?: boolean } & TextOwnProps;\nexport type LinkProps = PolymorphicProps<LinkOwnProps, 'a'>;\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/icons';\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// 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 = 'default',\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  error?: boolean;\n  errorMessage?: string;\n} & RadioInputProps;\n\nexport const Radio: React.FC<RadioProps> = ({\n  label,\n  required,\n  error,\n  errorMessage,\n  ...props\n}) => {\n  if (label) {\n    return (\n      <>\n        <Label\n          htmlFor={props.id}\n          required={required}\n          variant={props.disabled ? 'disabled' : 'inline'}\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      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, { 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, { Children } from 'react';\nimport flattenChildren from 'react-keyed-flatten-children';\n\nimport { ResponsiveStyleValue } from '@marigold/system';\nimport { ComponentProps } from '@marigold/types';\n\nimport { Box } from '../Box';\n\nexport type ActionGroupProps = {\n  variant?: string;\n  space?: ResponsiveStyleValue<number | string>;\n  verticalAlignment?: boolean;\n} & ComponentProps<'div'>;\n\nexport const ActionGroup: React.FC<ActionGroupProps> = ({\n  variant = 'default',\n  space = 'none',\n  verticalAlignment = false,\n  children,\n  className,\n  ...props\n}) => {\n  const childStyle = verticalAlignment\n    ? { marginBottom: space }\n    : { marginRight: space };\n  return (\n    <Box variant={`actionGroup.${variant}`} className={className} {...props}>\n      {Children.map(\n        flattenChildren(children),\n        (child, i) =>\n          child !== null &&\n          child !== undefined && (\n            <Box\n              as={verticalAlignment ? 'div' : 'span'}\n              css={i < Children.count(children) - 1 ? childStyle : undefined}\n            >\n              {child}\n            </Box>\n          )\n      )}\n    </Box>\n  );\n};\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { Box } from '../Box';\n\nexport type BadgeProps = {\n  variant?: string;\n  bgColor?: string;\n  borderColor?: string;\n} & ComponentProps<'div'>;\n\nexport const Badge: React.FC<BadgeProps> = ({\n  variant = 'default',\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\nexport type CardProps = {\n  title?: string;\n  width?: ResponsiveStyleValue<string>;\n  variant?: string;\n} & ComponentProps<'div'>;\n\nexport const Card: React.FC<CardProps> = ({\n  variant = 'default',\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, { Children } from 'react';\nimport { useStyles } from '@marigold/system';\nimport { Box } from '../Box';\nimport flattenChildren from 'react-keyed-flatten-children';\n\ntype ColumnsProps = {\n  className?: string;\n  space?: number;\n  horizontalAlign?: 'left' | 'right' | 'center';\n  verticalAlign?: 'top' | 'bottom' | 'center';\n  title?: string; // Should only be used for testing.\n};\n\nexport const Columns: React.FC<ColumnsProps> = ({\n  space = 0,\n  horizontalAlign = 'left',\n  verticalAlign = 'top',\n  className,\n  children,\n  ...props\n}) => {\n  let columnItems = flattenChildren(children);\n  let childClassNames = useStyles({ css: { p: `${space / 2}px` } });\n\n  // horizontal Alignment\n  let justify = 'flex-start';\n  if (horizontalAlign === 'right') {\n    justify = 'flex-end';\n  } else if (horizontalAlign === 'center') {\n    justify = 'center';\n  }\n\n  // vertical Alignment\n  let alignItems = 'flex-start';\n  if (verticalAlign === 'bottom') {\n    alignItems = 'flex-end';\n  } else if (verticalAlign === 'center') {\n    alignItems = 'center';\n  }\n\n  return (\n    <Box p={`${space}px`} display=\"flex\" className={className}>\n      <Box\n        width={`calc(100% + ${space}px)`}\n        m={`${-space / 2}px`}\n        display=\"flex\"\n        flexWrap=\"wrap\"\n        alignItems={alignItems}\n        justifyContent={justify}\n        {...props}\n      >\n        {Children.map(\n          columnItems as unknown as React.ReactElement,\n          (child: React.ReactElement) => {\n            return React.cloneElement(\n              child,\n              {\n                className: childClassNames,\n              },\n              <Box className={child && child.props.className}>\n                {child.props.children}\n              </Box>\n            );\n          }\n        )}\n      </Box>\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 { Heading } from '../Heading';\n\nimport { ModalDialog } from './ModalDialog';\n\nexport type DialogProps = {\n  isOpen: boolean;\n  close: ComponentProps<typeof Button>['onClick'];\n  title?: string;\n} & ComponentProps<'div'>;\n\nexport const Dialog: React.FC<DialogProps> = ({\n  children,\n  title,\n  className,\n  isOpen,\n  close,\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 isOpen={isOpen} onClose={close} isDismissable>\n        <Box variant=\"dialog.wrapper\" className={className} {...props}>\n          <Box variant=\"dialog.body\">\n            {title && (\n              <Heading as=\"h4\" variant=\"h4\">\n                {title}\n              </Heading>\n            )}\n            {children}\n          </Box>\n          <Box variant=\"dialog.onClose\">\n            <Button\n              variant=\"close\"\n              size=\"xsmall\"\n              {...closeButtonProps}\n              ref={closeButtonRef}\n            >\n              <Close size={16} />\n            </Button>\n          </Box>\n        </Box>\n      </ModalDialog>\n    </OverlayContainer>\n  );\n};\n\n// use this hook to 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\nexport type DividerProps = {\n  className?: string;\n  variant?: string;\n  title?: string; // Should only be used for testing.\n};\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\nexport type FieldProps = {\n  htmlFor: string;\n  label: string;\n  required?: boolean;\n  error?: boolean;\n  errorMessage?: string;\n  disabled?: boolean;\n} & ComponentProps<'input'>;\n\nexport const Field: React.FC<FieldProps> = ({\n  type = 'text',\n  className,\n  htmlFor,\n  label,\n  required,\n  error,\n  errorMessage,\n  disabled,\n  ...props\n}) => {\n  return (\n    <>\n      <Label\n        variant={disabled ? 'disabled' : 'above'}\n        htmlFor={htmlFor}\n        required={required}\n      >\n        {label}\n      </Label>\n      <Input\n        {...props}\n        type={type}\n        id={htmlFor}\n        disabled={disabled}\n        variant={error ? 'error' : 'default'}\n        className={className}\n      />\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\nexport type HiddenProps = {\n  show?: boolean;\n};\n\nexport const Hidden: React.FC<HiddenProps> = ({\n  show = false,\n  children,\n  ...props\n}) => (\n  <Box {...props} as=\"span\" display={show ? 'display' : 'none'}>\n    {children}\n  </Box>\n);\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { Box } from '../Box';\n\nexport type ImageProps = {\n  variant?: string;\n  children?: never;\n} & ComponentProps<'img'>;\n\nexport const Image: React.FC<ImageProps> = ({\n  variant = 'fullWidth',\n  ...props\n}) => <Box {...props} as=\"img\" variant={`images.${variant}`} />;\n","import React from 'react';\nimport { OverlayProvider } from '@react-aria/overlays';\nimport { ThemeProvider, ThemeProviderProps } from '@marigold/system';\n// import { Global } from '@emotion/react';\n// import { css } from '@theme-ui/css';\n\n// const GlobalStyles = () => {\n//   const theme = useTheme();\n//   const styles = css({\n//     body: { variant: 'root.body' },\n//     html: { variant: 'root.html' },\n//   })(theme);\n\n//   return <Global styles={styles} />;\n// };\n// a merge of the ThemeProvider and the react-aria OverlayProvider\nexport const MarigoldProvider: React.FC<ThemeProviderProps> = ({\n  theme,\n  children,\n}) => {\n  return (\n    <ThemeProvider theme={theme}>\n      <OverlayProvider>\n        {/* <GlobalStyles /> */}\n        {children}\n      </OverlayProvider>\n    </ThemeProvider>\n  );\n};\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\n\nimport { Button } from '../Button';\nimport { Box } from '../Box';\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\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\nexport type MenuItemProps = {\n  variant?: string;\n} & ComponentProps<typeof Link>;\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 { Heading } from '../Heading';\n\nexport type MessageProps = {\n  messageTitle: string;\n  variant?: string;\n} & ComponentProps<'div'>;\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={`messages.${variant}`}\n      className={className}\n      {...props}\n    >\n      <Box display=\"flex\" alignItems=\"center\" variant=\"messages.title\">\n        {icon}\n        <Heading as=\"h4\" variant=\"h4\">\n          {messageTitle}\n        </Heading>\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\nexport type SelectProps = {\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\nexport const Select = ({\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\n            {...labelProps}\n            htmlFor={labelProps.id}\n            variant={disabled ? 'disabled' : 'above'}\n          >\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\n            as={ArrowUp}\n            size={16}\n            css={{ fill: disabled ? 'disabled' : 'text' }}\n          />\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: width\n              ? width\n              : 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 { useStyles } from '@marigold/system';\nimport { ComponentProps } from '@marigold/types';\n\nexport type SliderProps = {\n  variant?: string;\n} & ComponentProps<'input'>;\n\nexport const Slider: React.FC<SliderProps> = ({\n  variant = 'slider',\n  className,\n  ...props\n}) => {\n  const classNames = useStyles({\n    variant: `form.${variant}`,\n    css: {\n      verticalAlign: 'middle',\n    },\n    className,\n  });\n\n  return <input type=\"range\" className={classNames} {...props} />;\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\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\nexport const Textarea: React.FC<TextareaProps> = ({\n  variant = 'default',\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":["Box","forwardRef","ref","variant","as","css","children","className","display","height","width","minWidth","maxWidth","position","top","bottom","right","left","zIndex","p","px","py","pt","pb","pl","pr","m","mx","my","mt","mb","ml","mr","flexDirection","flexWrap","flexShrink","flexGrow","alignItems","justifyContent","bg","border","borderRadius","boxShadow","opacity","overflow","transition","props","React","Element","ICON_MAP","success","Check","warning","Notification","error","Exclamation","Button","size","disabled","useButton","elementType","isDisabled","buttonProps","CheckboxChecked","SVG","viewBox","fill","x","y","rx","fillRule","clipRule","d","CheckboxUnchecked","Label","required","Required","color","ValidationMessage","CheckboxIcon","checked","CheckboxInput","type","transform","Array","isArray","map","v","Heading","ModalDialog","useRef","useOverlay","overlayProps","underlayProps","usePreventScroll","modalProps","useModal","dialogProps","useDialog","FocusScope","contain","restoreFocus","autoFocus","Input","Text","align","cursor","outline","userSelect","textAlign","Link","useLink","linkProps","RadioChecked","cx","cy","r","RadioUnchecked","RadioIcon","RadioInput","Option","item","state","useState","setDisabled","useOption","key","optionProps","isSelected","useEffect","disabledKeys","values","rendered","ListBoxSection","section","useListBoxSection","heading","headingProps","groupProps","itemProps","childNodes","node","ListBox","useListBox","listStyle","listBoxProps","collection","Popover","isOpen","onClose","otherProps","shouldCloseOnBlur","isDismissable","OverlayContainer","mergeProps","DismissButton","onDismiss","ALIGNMENT","center","space","verticalAlignment","childStyle","marginBottom","marginRight","Children","flattenChildren","child","i","count","undefined","Icon","bgColor","borderColor","title","label","errorMessage","htmlFor","id","horizontalAlign","verticalAlign","columnItems","childClassNames","useStyles","justify","cloneElement","close","closeButtonRef","closeButtonProps","onPress","Close","show","ThemeProvider","theme","OverlayProvider","onClick","messageTitle","icon","Info","placeholder","useSelectState","overlayTriggerState","useOverlayTriggerState","triggerRef","overlayRef","useOverlayTrigger","positionProps","useOverlayPosition","targetRef","placement","shouldFlip","useSelect","labelProps","valueProps","menuProps","triggerProps","focusProps","useFocusRing","HiddenSelect","name","selectedItem","ArrowUp","ArrowDown","current","offsetWidth","classNames","outlineColor","openButtonRef","open","openButtonProps"],"mappings":"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"}
+{"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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"}