@marigold/components 0.1.0 → 0.2.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/Button/Button.tsx","../src/Label/Label.tsx","../src/Checkbox/Checkbox.tsx","../src/Input/Input.tsx","../src/ValidationMessage/ValidationMessage.tsx","../src/Heading/Heading.tsx","../src/Text/Text.tsx","../src/Link/Link.tsx","../src/Radio/Radio.tsx","../src/Stack/Stack.tsx","../src/Alert/Alert.tsx","../src/Badge/Badge.tsx","../src/Column/Column.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/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 { createElement, forwardRef } from 'react';\nimport { ResponsiveStyleValue, useStyles } from '@marigold/system';\nimport {\n  PolymorphicPropsWithRef,\n  PolymorphicComponentWithRef,\n} from '@marigold/types';\n\nexport type BoxOwnProps = {\n  className?: string;\n  variant?: string | string[];\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      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    const cn = useStyles({\n      element: as,\n      variant,\n      className,\n      css: {\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    });\n    return createElement(as, { ...props, ref, className: cn }, children);\n  }\n);\n","import React from 'react';\nimport { ComponentPropsWithRef } from '@marigold/types';\nimport { Box } from '../Box';\n\nexport type ButtonProps = {\n  variant?: string;\n} & ComponentPropsWithRef<'button'>;\n\nexport const Button: React.FC<ButtonProps> = ({\n  variant = 'primary.large',\n  children,\n  ...props\n}) => {\n  return (\n    <Box as=\"button\" {...props} variant={`button.${variant}`}>\n      <Box as=\"span\" display=\"inline-flex\" alignItems=\"center\">\n        {children}\n      </Box>\n    </Box>\n  );\n};\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { Box } from '../Box';\n\nexport type LabelProps = {\n  htmlFor: string;\n  variant?: string;\n} & ComponentProps<'label'>;\n\nexport const Label: React.FC<LabelProps> = ({\n  variant = 'default',\n  children,\n  ...props\n}) => (\n  <Box {...props} as=\"label\" variant={`label.${variant}`}>\n    {children}\n  </Box>\n);\n","import React from 'react';\nimport { Required, SquareUnchecked, SquareChecked } from '@marigold/icons';\nimport { useStyles } from '@marigold/system';\nimport { ComponentProps } from '@marigold/types';\n\nimport { Box } from '../Box';\nimport { Label } from '../Label';\n\n// Checkbox Icon\n// ---------------\ntype CheckboxIconProps = {\n  className?: string;\n  variant?: string;\n  checked?: boolean;\n  children?: never;\n};\n\nconst CheckboxIcon: React.FC<CheckboxIconProps> = ({\n  className,\n  variant,\n  checked,\n}) => {\n  const checkboxIconStyle = useStyles({\n    variant: variant,\n    css: {\n      ariaHidden: 'true',\n      mr: 2,\n      verticalAlign: 'middle',\n      ':hover': { cursor: 'pointer' },\n      'input:disabled ~ &': {\n        color: 'disabled',\n        cursor: 'not-allowed',\n      },\n    },\n    className,\n  });\n\n  if (checked) {\n    return <SquareChecked className={checkboxIconStyle} />;\n  }\n  return <SquareUnchecked className={checkboxIconStyle} />;\n};\n\n// Checkbox Input\n// ---------------\ntype CheckboxInputProps = {\n  variant?: string;\n} & ComponentProps<'input'>;\n\nconst CheckboxInput: React.FC<CheckboxInputProps> = ({\n  className,\n  variant = 'default',\n  ...props\n}) => {\n  const checkboxStyle = useStyles({\n    css: {\n      position: 'absolute',\n      opacity: 0,\n      zIndex: -1,\n      width: 1,\n      height: 1,\n      overflow: 'hidden',\n    },\n  });\n\n  return (\n    <Box display=\"inline-block\">\n      <input type=\"checkbox\" className={checkboxStyle} {...props} />\n      <CheckboxIcon\n        checked={props.checked}\n        className={className}\n        variant={variant}\n      />\n    </Box>\n  );\n};\n\n// Checkbox\n// ---------------\nexport type CheckboxProps = {\n  id: string;\n  label?: string;\n  required?: boolean;\n} & CheckboxInputProps;\n\nexport const Checkbox: React.FC<CheckboxProps> = ({\n  label,\n  required,\n  ...props\n}) => {\n  if (label) {\n    return (\n      <Label htmlFor={props.id}>\n        <CheckboxInput {...props} />\n        {label}\n        {required && <Required size={16} />}\n      </Label>\n    );\n  }\n\n  return <CheckboxInput {...props} />;\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 from 'react';\nimport { useStyles } from '@marigold/system';\nimport { ComponentProps } from '@marigold/types';\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  const classNames = useStyles({\n    variant: `validation.${variant}`,\n    css: {\n      display: 'flex',\n      alignItems: 'center',\n    },\n    className,\n  });\n\n  return (\n    <span className={classNames} {...props}>\n      {children}\n    </span>\n  );\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, { forwardRef } from 'react';\nimport { ResponsiveStyleValue, useStyles } 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      const cn = useStyles({\n        className,\n        variant: `text.${variant}`,\n        css: { textAlign: align, color, cursor, outline, userSelect },\n      });\n\n      return (\n        <Box {...props} as={as} className={cn} ref={ref}>\n          {children}\n        </Box>\n      );\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 { CircleUnchecked, CircleChecked, Required } from '@marigold/icons';\nimport { useStyles } from '@marigold/system';\nimport { ComponentProps } from '@marigold/types';\nimport { Box } from '../Box';\nimport { Label } from '../Label';\n\n// Radio Icon\n// ---------------\ntype RadioIconProps = {\n  className?: string;\n  variant?: string;\n  checked?: boolean;\n  children?: never;\n};\n\nconst RadioIcon: React.FC<RadioIconProps> = ({\n  className,\n  variant,\n  checked,\n}) => {\n  const radioIconStyle = useStyles({\n    variant: `form.${variant}`,\n    css: {\n      ariaHidden: 'true',\n      mr: 2,\n      verticalAlign: 'middle',\n      ':hover': { cursor: 'pointer' },\n      'input:disabled ~ &': {\n        color: 'muted',\n        cursor: 'not-allowed',\n      },\n    },\n    className,\n  });\n\n  if (checked) {\n    return <CircleChecked className={radioIconStyle} />;\n  }\n  return <CircleUnchecked className={radioIconStyle} />;\n};\n\n// Radio Input\n// ---------------\ntype RadioInputProps = {\n  variant?: string;\n} & ComponentProps<'input'>;\n\nconst RadioInput: React.FC<RadioInputProps> = ({\n  className,\n  variant = 'radio',\n  ...props\n}) => {\n  const radioStyle = useStyles({\n    css: {\n      position: 'absolute',\n      opacity: 0,\n      zIndex: -1,\n      width: 1,\n      height: 1,\n      overflow: 'hidden',\n    },\n  });\n\n  return (\n    <Box display=\"inline-block\">\n      <input type=\"radio\" className={radioStyle} {...props} />\n      <RadioIcon\n        checked={props.checked}\n        className={className}\n        variant={variant}\n      />\n    </Box>\n  );\n};\n\n// Radio\n// ---------------\nexport type RadioProps = {\n  id: string;\n  label?: string;\n  required?: boolean;\n} & RadioInputProps;\n\nexport const Radio: React.FC<RadioProps> = ({ label, required, ...props }) => {\n  if (label) {\n    return (\n      <Label htmlFor={props.id}>\n        <RadioInput {...props} />\n        {label}\n        {required && <Required size={16} />}\n      </Label>\n    );\n  }\n\n  return <RadioInput {...props} />;\n};\n","import React, { Children } from 'react';\nimport { ResponsiveStyleValue } from '@marigold/system';\nimport { Box } from '../Box';\nimport flattenChildren from 'react-keyed-flatten-children';\n\nexport type StackProps = {\n  className?: string;\n  space?: ResponsiveStyleValue<number | string>;\n  align?: 'left' | 'right' | 'center';\n  title?: string; // For Testing\n};\n\nconst ALIGN_STYLES = {\n  left: {\n    display: 'block',\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n  },\n  center: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n  },\n  right: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-end',\n  },\n};\n\nexport const Stack: React.FC<StackProps> = ({\n  space = 0,\n  align = 'left',\n  children,\n  ...props\n}) => {\n  const stackItems = flattenChildren(children);\n  const { display, flexDirection, alignItems } = ALIGN_STYLES[align];\n\n  return (\n    <Box p={space} display={display} flexDirection={flexDirection} {...props}>\n      {Children.map(stackItems, (child, index) => (\n        <Box\n          display={display}\n          flexDirection={flexDirection}\n          alignItems={alignItems}\n          pt={space}\n          mt={index === 0 ? -space! : 0}\n        >\n          {child}\n        </Box>\n      ))}\n    </Box>\n  );\n};\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { Exclamation, Check, Notification } from '@marigold/icons';\nimport { useStyles } from '@marigold/system';\nimport { Box } from '../Box';\n\nexport type AlertProps = {\n  variant?: string;\n} & ComponentProps<'div'>;\n\nexport const Alert: React.FC<AlertProps> = ({\n  variant = 'success',\n  children,\n  className,\n  ...props\n}) => {\n  const classNames = useStyles({\n    css: {\n      display: 'flex',\n      alignItems: 'center',\n    },\n    variant: `alerts.${variant}`,\n    className,\n  });\n\n  var bgColor = 'success';\n  if (variant === 'warning') {\n    bgColor = 'warning';\n  } else if (variant === 'error') {\n    bgColor = 'error';\n  }\n  const iconClassName = useStyles({ css: { bg: bgColor, m: '10px' } });\n\n  var icon = <Check size={12} color=\"#ffffff\" className={iconClassName} />;\n  if (variant === 'warning') {\n    icon = <Notification size={12} color=\"#ffffff\" className={iconClassName} />;\n  } else if (variant === 'error') {\n    icon = <Exclamation size={12} color=\"#ffffff\" className={iconClassName} />;\n  }\n\n  return (\n    <Box {...props} className={classNames}>\n      <Box\n        display=\"inline-block\"\n        alignItems=\"center\"\n        width=\"32px\"\n        height=\"32px\"\n        className={useStyles({\n          css: {\n            bg: bgColor,\n          },\n        })}\n      >\n        {icon}\n      </Box>\n      <Box mx=\"16px\">{children}</Box>\n    </Box>\n  );\n};\n","import React from 'react';\nimport { ComponentProps } from '@marigold/types';\nimport { Box } from '../Box';\nimport { useStyles } from '@marigold/system';\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    className={useStyles({ css: { bg: bgColor, borderColor: borderColor } })}\n    variant={`badge.${variant}`}\n    {...props}\n  >\n    {children}\n  </Box>\n);\n","import React from 'react';\nimport { Box } from '../Box';\n\nexport type ColumnProps = {\n  className?: string;\n  width?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n};\n\nexport const Column: React.FC<ColumnProps> = ({\n  width = 12,\n  children,\n  ...props\n}) => (\n  <Box {...props} width={`${(width / 12) * 100}%`}>\n    {children}\n  </Box>\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 from 'react';\nimport { ComponentProps } from '@marigold/types';\n\nimport { Close } from '@marigold/icons';\nimport { Button } from '../Button';\nimport { Box } from '../Box';\n\nexport type DialogProps = {\n  onClose?: ComponentProps<typeof Button>['onClick'];\n} & ComponentProps<'div'>;\n\nexport const Dialog: React.FC<DialogProps> = ({\n  onClose,\n  children,\n  className,\n  ...props\n}) => {\n  return (\n    <Box display=\"flex\" width=\"100%\">\n      <Box {...props} variant=\"dialog.wrapper\" className={className}>\n        <Box display=\"flex\">\n          <Box variant=\"dialog.body\">{children}</Box>\n          <Box variant=\"dialog.onClose\">\n            <Button variant=\"text.root\" onClick={onClose}>\n              <Close size={16} />\n            </Button>\n          </Box>\n        </Box>\n      </Box>\n    </Box>\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 { useStyles } from '@marigold/system';\nimport { Exclamation, Required } 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  variant?: string;\n  htmlFor: string;\n  label: string;\n  error?: string;\n} & ComponentProps<'input'>;\n\nexport const Field: React.FC<FieldProps> = ({\n  variant = 'default',\n  type = 'text',\n  className = '',\n  htmlFor,\n  label,\n  error,\n  ...props\n}) => {\n  const labelClassName = useStyles({\n    variant: `field.${variant}`,\n    className,\n  });\n  const errorClassName = useStyles({ css: { color: 'red60' } });\n\n  return (\n    <div>\n      <Label className={labelClassName} htmlFor={htmlFor}>\n        {label}\n        {error ? <Required size={16} className={errorClassName} /> : ''}\n      </Label>\n      <Input {...props} type={type} id={htmlFor} />\n      {error ? (\n        <ValidationMessage>\n          <Exclamation size={16} />\n          {error}\n        </ValidationMessage>\n      ) : (\n        ''\n      )}\n    </div>\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 { useStyles } from '@marigold/system';\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 = 'menu',\n  label = 'Menu',\n  onClick,\n  show = false,\n  children,\n  ...props\n}) => {\n  const itemStyles = useStyles({\n    css: {\n      position: 'absolute',\n      minWidth: '120px',\n      display: 'block',\n      textAlign: 'left',\n      borderRadius: '2px',\n    },\n  });\n\n  return (\n    <Box variant={`content.${variant}`} {...props}>\n      <Button onClick={onClick} variant=\"menu\">\n        {label}\n      </Button>\n      {show ? <div className={itemStyles}>{children}</div> : null}\n    </Box>\n  );\n};\n","import React from 'react';\nimport { useStyles } from '@marigold/system';\nimport { ComponentProps } from '@marigold/types';\nimport { Link } from '../Link';\n\nexport type MenuItemProps = {\n  variant?: string;\n} & ComponentProps<typeof Link>;\n\nexport const MenuItem: React.FC<MenuItemProps> = ({\n  variant = 'menuItem',\n  className,\n  children,\n  ...props\n}) => {\n  const classNames = useStyles({\n    variant: `menu.${variant}`,\n    className,\n  });\n\n  return (\n    <Link {...props} variant=\"menu\" className={classNames}>\n      {children}\n    </Link>\n  );\n};\n","import React from 'react';\nimport { Exclamation, Info, Notification } from '@marigold/icons';\nimport { useStyles } from '@marigold/system';\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\n          variant=\"h4\"\n          className={useStyles({\n            css: {\n              display: 'inline',\n            },\n          })}\n        >\n          {messageTitle}\n        </Heading>\n      </Box>\n      <Box className={useStyles({ css: { color: 'black' } })}>{children}</Box>\n    </Box>\n  );\n};\n","import React from 'react';\nimport { ArrowDown } from '@marigold/icons';\nimport { useStyles } from '@marigold/system';\nimport { ComponentProps } from '@marigold/types';\nimport { Box } from '../Box';\n\nexport type SelectProps = { variant?: string } & ComponentProps<'select'>;\n\nexport const Select: React.FC<SelectProps> = ({\n  variant = 'default',\n  children,\n  ...props\n}) => {\n  const iconStyles = useStyles({\n    css: {\n      alignSelf: 'center',\n      pointerEvents: 'none',\n      ml: '-28px',\n    },\n  });\n\n  return (\n    <Box display=\"flex\">\n      <Box as=\"select\" variant={`select.${variant}`} {...props}>\n        {children}\n      </Box>\n      <ArrowDown className={iconStyles} />\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 { useStyles } from '@marigold/system';\nimport { Exclamation, Required } 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  errorMessage?: string;\n  required?: boolean;\n} & ComponentProps<'textarea'>;\n\nexport const Textarea: React.FC<TextareaProps> = ({\n  variant = 'default',\n  htmlFor = 'textarea',\n  label,\n  errorMessage,\n  required = false,\n  className = '',\n  children,\n  ...props\n}) => {\n  const errorClassName = useStyles({ css: { color: 'error' } });\n  const textareaClassNames = useStyles({\n    css: { outlineColor: errorMessage && 'error' },\n    className,\n  });\n\n  return (\n    <Box>\n      {label && (\n        <Label htmlFor={htmlFor}>\n          {label}\n          {(errorMessage || required) && (\n            <Required size={16} className={errorClassName} />\n          )}\n        </Label>\n      )}\n      <Box\n        as=\"textarea\"\n        {...props}\n        display=\"block\"\n        variant={`textarea.${variant}`}\n        className={textareaClassNames}\n      />\n      {errorMessage && (\n        <ValidationMessage>\n          <Exclamation size={16} />\n          {errorMessage}\n        </ValidationMessage>\n      )}\n    </Box>\n  );\n};\n"],"names":["Box","forwardRef","ref","variant","as","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","cn","useStyles","element","css","createElement","Button","React","Label","CheckboxIcon","checked","checkboxIconStyle","ariaHidden","verticalAlign","cursor","color","SquareChecked","SquareUnchecked","CheckboxInput","checkboxStyle","type","Input","ValidationMessage","classNames","Heading","Text","align","outline","userSelect","textAlign","Link","disabled","useRef","useLink","elementType","isDisabled","linkProps","RadioIcon","radioIconStyle","CircleChecked","CircleUnchecked","RadioInput","radioStyle","ALIGN_STYLES","center","bgColor","iconClassName","icon","Check","size","Notification","Exclamation","borderColor","label","required","htmlFor","id","Required","space","horizontalAlign","columnItems","flattenChildren","childClassNames","justify","Children","map","child","cloneElement","onClose","onClick","Close","error","labelClassName","errorClassName","show","itemStyles","messageTitle","Info","iconStyles","alignSelf","pointerEvents","ArrowDown","stackItems","index","errorMessage","textareaClassNames","outlineColor"],"mappings":"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"}
+{"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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"}