@audius/harmony 0.1.0 → 0.3.0

package/dist/components/input/TextInput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sources":["../../../../src/components/input/TextInput/TextInput.tsx"],"sourcesContent":["import { ReactNode, forwardRef, useId } from 'react'\n\nimport cn from 'classnames'\n\nimport { Text, TextSize } from 'components/text'\nimport type { TextColors } from 'foundations/color/semantic'\n\nimport { Flex } from '../../layout'\nimport { useFocusState } from '../useFocusState'\n\nimport styles from './TextInput.module.css'\nimport { TextInputSize, type TextInputProps } from './types'\n\n/**\n * An input is a field where users can enter and edit text and  enables the user to provide input in the form of plain text.\n */\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n  (props, ref) => {\n    const {\n      'aria-label': ariaLabel,\n      required,\n      className,\n      inputRootClassName,\n      maxLength,\n      showMaxLengthThreshold = 0.7,\n      maxLengthWarningThreshold = 0.9,\n      size = TextInputSize.DEFAULT,\n      hideLabel,\n      label: labelProp,\n      value,\n      id: idProp,\n      warning: warningProp,\n      error,\n      className: inputClassName,\n      disabled,\n      onFocus: onFocusProp,\n      onBlur: onBlurProp,\n      placeholder,\n      helperText,\n      startAdornmentText,\n      endAdornmentText,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      IconProps,\n      endAdornment: endAdornmentProp,\n      _incorrectError,\n      _isHovered,\n      _isFocused,\n      _disablePointerEvents,\n      ...other\n    } = props\n\n    let endAdornment: null | ReactNode\n    if (EndIcon != null) {\n      endAdornment = <EndIcon size='m' color='subdued' {...IconProps} />\n    } else if (endAdornmentProp != null) {\n      endAdornment = endAdornmentProp\n    } else {\n      endAdornment = null\n    }\n\n    /**\n     * Since Firefox doesn't support the :has() pseudo selector,\n     * manually track the focused state and use classes for focus, required, and disabled\n     */\n    const [isFocusedState, handleFocus, handleBlur] = useFocusState(\n      onFocusProp,\n      onBlurProp\n    )\n\n    const isFocused = _isFocused ?? isFocusedState\n\n    // For focus behavior and accessiblity, <label> needs to have a htmlFor={} provided to an id matching the input\n    const backupId = useId()\n    const id = idProp ?? backupId\n\n    const characterCount = value !== undefined ? `${value}`.length : 0\n    const hasValue = characterCount > 0\n\n    // Hide the label when requested or when the size is set to small\n    const shouldShowLabel = !hideLabel && size !== TextInputSize.SMALL\n    const labelText = required ? `${labelProp} *` : labelProp\n    const placeholderText =\n      required && hideLabel ? `${placeholder} *` : placeholder\n    const helperTextSize: TextSize = size === TextInputSize.SMALL ? 'xs' : 's'\n\n    // Whenever a label isn't visible the placeholder should be visible in it's place (if provided)\n    const shouldShowPlaceholder = isFocused || !shouldShowLabel\n    const shouldShowAdornments = isFocused || hasValue || !shouldShowLabel\n    // Show the maxlength text whenever we hit a certain threshold (default 70%) + the input is focused\n    const shouldShowMaxLengthText =\n      isFocused &&\n      maxLength &&\n      characterCount >= showMaxLengthThreshold * maxLength\n    // Turn the maxlength text to the warning color whenever we hit a certain threshold (default 90%)\n    let maxLengthTextColor: TextColors = 'default'\n    if (maxLength && characterCount > maxLength) {\n      maxLengthTextColor = 'danger'\n    } else if (\n      maxLength &&\n      characterCount >= maxLengthWarningThreshold * maxLength\n    ) {\n      maxLengthTextColor = 'warning'\n    }\n\n    // Styles for the root of the input\n    const inputRootStyle = {\n      [styles.default]: size === TextInputSize.DEFAULT,\n      [styles.small]: size === TextInputSize.SMALL,\n      [styles.warning]: warningProp,\n      [styles.error]: error,\n      [styles.focused]: isFocused || _isFocused,\n      [styles.disabled]: disabled,\n      [styles.required]: required,\n      [styles.hover]: _isHovered,\n      [styles.incorrectError]: _incorrectError,\n      [styles.disablePointerEvents]: _disablePointerEvents\n    }\n\n    // Styles for the input element itself\n    const inputElStyle = {\n      [styles.default]: size === TextInputSize.DEFAULT,\n      [styles.small]: size === TextInputSize.SMALL,\n      [styles.disabled]: disabled,\n      [styles.focused]: isFocused\n    }\n\n    const inputRender = (\n      <Flex alignItems='center' justifyContent='space-between'>\n        {startAdornmentText && shouldShowAdornments ? (\n          <Text variant='label' size='l' color='subdued'>\n            {startAdornmentText}\n          </Text>\n        ) : null}\n        <input\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          ref={ref}\n          className={cn(styles.input, inputClassName, inputElStyle)}\n          value={value}\n          maxLength={maxLength}\n          disabled={disabled}\n          placeholder={shouldShowPlaceholder ? placeholderText : undefined}\n          aria-label={ariaLabel ?? shouldShowLabel ? labelText : undefined}\n          aria-required={required}\n          id={id}\n          {...other}\n        />\n        {endAdornmentText && shouldShowAdornments ? (\n          <Text variant='label' size='l' color='subdued'>\n            {endAdornmentText}\n          </Text>\n        ) : null}\n      </Flex>\n    )\n\n    const isLabelElevated = hasValue || isFocused\n\n    return (\n      <Flex\n        className={cn(styles.root, className)}\n        direction='column'\n        gap='xs'\n        alignItems='flex-start'\n        w='100%'\n      >\n        <label\n          htmlFor={id}\n          className={cn(\n            styles.contentContainer,\n            inputRootClassName,\n            inputRootStyle\n          )}\n        >\n          {StartIcon ? (\n            <StartIcon\n              size={size === TextInputSize.SMALL ? 's' : 'm'}\n              color='subdued'\n              {...IconProps}\n            />\n          ) : null}\n          <Flex direction='column' gap='xs' justifyContent='center' w='100%'>\n            {shouldShowLabel ? (\n              <Flex\n                className={styles.labelRow}\n                direction='row'\n                alignItems='center'\n                justifyContent='space-between'\n                gap='s'\n              >\n                <Text\n                  variant='body'\n                  tag='span'\n                  size={isLabelElevated ? 's' : 'l'}\n                  color='subdued'\n                  css={(theme) => ({\n                    whiteSpace: 'nowrap',\n                    overflow: 'hidden',\n                    textOverflow: 'ellipsis',\n                    zIndex: 2,\n                    transition: `all ${theme.motion.expressive}`,\n                    transform: isLabelElevated\n                      ? 'translate(0, 0)'\n                      : 'translate(0px, 13px)'\n                  })}\n                >\n                  {labelText}\n                </Text>\n                {shouldShowMaxLengthText ? (\n                  <Text\n                    variant='body'\n                    size='xs'\n                    tag='span'\n                    color={maxLengthTextColor}\n                  >\n                    {characterCount}/{maxLength}\n                  </Text>\n                ) : null}\n              </Flex>\n            ) : null}\n            {inputRender}\n          </Flex>\n          {endAdornment}\n        </label>\n        {helperText ? (\n          <Text\n            variant='body'\n            size={helperTextSize}\n            color={error ? 'danger' : _incorrectError ? 'warning' : 'default'}\n          >\n            {helperText}\n          </Text>\n        ) : null}\n      </Flex>\n    )\n  }\n)\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"TextInput.js","sources":["../../../../src/components/input/TextInput/TextInput.tsx"],"sourcesContent":["import { ReactNode, forwardRef, useId } from 'react'\n\nimport cn from 'classnames'\n\nimport { Text, TextSize } from 'components/text'\nimport type { TextColors } from 'foundations/color/semantic'\n\nimport { Flex } from '../../layout'\nimport { useFocusState } from '../useFocusState'\n\nimport styles from './TextInput.module.css'\nimport { TextInputSize, type TextInputProps } from './types'\n\n/**\n * An input is a field where users can enter and edit text and  enables the user to provide input in the form of plain text.\n */\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n  (props, ref) => {\n    const {\n      'aria-label': ariaLabel,\n      required,\n      className,\n      inputRootClassName,\n      maxLength,\n      showMaxLengthThreshold = 0.7,\n      maxLengthWarningThreshold = 0.9,\n      size = TextInputSize.DEFAULT,\n      hideLabel,\n      hidePlaceholder,\n      label: labelProp,\n      value,\n      id: idProp,\n      warning: warningProp,\n      error,\n      className: inputClassName,\n      disabled,\n      onFocus: onFocusProp,\n      onBlur: onBlurProp,\n      placeholder,\n      helperText,\n      startAdornmentText,\n      endAdornmentText,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      IconProps,\n      endAdornment: endAdornmentProp,\n      elevateLabel,\n      _incorrectError,\n      _isHovered,\n      _isFocused,\n      _disablePointerEvents,\n      ...other\n    } = props\n\n    let endAdornment: null | ReactNode\n    if (EndIcon != null) {\n      endAdornment = <EndIcon size='m' color='subdued' {...IconProps} />\n    } else if (endAdornmentProp != null) {\n      endAdornment = endAdornmentProp\n    } else {\n      endAdornment = null\n    }\n\n    /**\n     * Since Firefox doesn't support the :has() pseudo selector,\n     * manually track the focused state and use classes for focus, required, and disabled\n     */\n    const [isFocusedState, handleFocus, handleBlur] = useFocusState(\n      onFocusProp,\n      onBlurProp\n    )\n\n    const isFocused = _isFocused ?? isFocusedState\n\n    // For focus behavior and accessiblity, <label> needs to have a htmlFor={} provided to an id matching the input\n    const backupId = useId()\n    const id = idProp ?? backupId\n\n    const characterCount = value !== undefined ? `${value}`.length : 0\n    const hasValue = characterCount > 0\n\n    // Hide the label when requested or when the size is set to small\n    const shouldShowLabel = !hideLabel && size !== TextInputSize.SMALL\n    const labelText = required ? `${labelProp} *` : labelProp\n    const placeholderText =\n      required && hideLabel\n        ? `${placeholder} *`\n        : size === TextInputSize.SMALL\n        ? labelText\n        : placeholder\n    const helperTextSize: TextSize = size === TextInputSize.SMALL ? 'xs' : 's'\n\n    // Whenever a label isn't visible the placeholder should be visible in it's place (if provided)\n    const shouldShowPlaceholder =\n      (isFocused || !shouldShowLabel) && !hidePlaceholder\n    const shouldShowAdornments = isFocused || hasValue || !shouldShowLabel\n    // Show the maxlength text whenever we hit a certain threshold (default 70%) + the input is focused\n    const shouldShowMaxLengthText =\n      isFocused &&\n      maxLength &&\n      characterCount >= showMaxLengthThreshold * maxLength\n    // Turn the maxlength text to the warning color whenever we hit a certain threshold (default 90%)\n    let maxLengthTextColor: TextColors = 'default'\n    if (maxLength && characterCount > maxLength) {\n      maxLengthTextColor = 'danger'\n    } else if (\n      maxLength &&\n      characterCount >= maxLengthWarningThreshold * maxLength\n    ) {\n      maxLengthTextColor = 'warning'\n    }\n\n    // Styles for the root of the input\n    const inputRootStyle = {\n      [styles.default]: size === TextInputSize.DEFAULT,\n      [styles.small]: size === TextInputSize.SMALL,\n      [styles.warning]: warningProp,\n      [styles.error]: error,\n      [styles.focused]: isFocused || _isFocused,\n      [styles.disabled]: disabled,\n      [styles.required]: required,\n      [styles.hover]: _isHovered,\n      [styles.incorrectError]: _incorrectError,\n      [styles.disablePointerEvents]: _disablePointerEvents\n    }\n\n    // Styles for the input element itself\n    const inputElStyle = {\n      [styles.default]: size === TextInputSize.DEFAULT,\n      [styles.small]: size === TextInputSize.SMALL,\n      [styles.disabled]: disabled,\n      [styles.focused]: isFocused\n    }\n\n    const inputElement = (\n      <Flex alignItems='center' justifyContent='space-between'>\n        {startAdornmentText && shouldShowAdornments ? (\n          <Text variant='label' size='l' color='subdued'>\n            {startAdornmentText}\n          </Text>\n        ) : null}\n        <input\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          ref={ref}\n          className={cn(styles.input, inputClassName, inputElStyle)}\n          value={value}\n          maxLength={maxLength}\n          disabled={disabled}\n          placeholder={shouldShowPlaceholder ? placeholderText : undefined}\n          aria-label={ariaLabel ?? shouldShowLabel ? labelText : undefined}\n          aria-required={required}\n          id={id}\n          autoComplete='off'\n          {...other}\n        />\n        {endAdornmentText && shouldShowAdornments ? (\n          <Text variant='label' size='l' color='subdued'>\n            {endAdornmentText}\n          </Text>\n        ) : null}\n      </Flex>\n    )\n\n    const isLabelElevated = hasValue || isFocused || elevateLabel\n\n    return (\n      <Flex\n        className={cn(styles.root, className)}\n        direction='column'\n        gap='xs'\n        alignItems='flex-start'\n        w='100%'\n      >\n        <label\n          htmlFor={id}\n          className={cn(\n            styles.contentContainer,\n            inputRootClassName,\n            inputRootStyle\n          )}\n        >\n          {StartIcon ? (\n            <StartIcon\n              size={size === TextInputSize.SMALL ? 's' : 'm'}\n              color='subdued'\n              {...IconProps}\n            />\n          ) : null}\n          <Flex direction='column' gap='xs' justifyContent='center' w='100%'>\n            {shouldShowLabel ? (\n              <Flex\n                className={styles.labelRow}\n                direction='row'\n                alignItems='center'\n                justifyContent='space-between'\n                gap='s'\n              >\n                <Text\n                  variant='body'\n                  tag='span'\n                  size={isLabelElevated ? 's' : 'l'}\n                  color='subdued'\n                  css={(theme) => ({\n                    whiteSpace: 'nowrap',\n                    overflow: 'hidden',\n                    textOverflow: 'ellipsis',\n                    zIndex: 2,\n                    transition: `all ${theme.motion.expressive}`,\n                    transform: isLabelElevated\n                      ? 'translate(0, 0)'\n                      : 'translate(0px, 13px)'\n                  })}\n                >\n                  {labelText}\n                </Text>\n                {shouldShowMaxLengthText ? (\n                  <Text\n                    variant='body'\n                    size='xs'\n                    tag='span'\n                    color={maxLengthTextColor}\n                  >\n                    {characterCount}/{maxLength}\n                  </Text>\n                ) : null}\n              </Flex>\n            ) : null}\n            {inputElement}\n          </Flex>\n          {endAdornment}\n        </label>\n        {helperText ? (\n          <Text\n            variant='body'\n            size={helperTextSize}\n            color={error ? 'danger' : _incorrectError ? 'warning' : 'default'}\n          >\n            {helperText}\n          </Text>\n        ) : null}\n      </Flex>\n    )\n  }\n)\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/input/TextInput/types.d.ts

@@ -46,9 +46,12 @@ export type TextInputProps = Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'r
     error?: boolean;
     /**
      * Hides the label. If the label is hidden the placeholder will show by default instead.
-     * @default false
      */
     hideLabel?: boolean;
+    /**
+     * When `true` hides the placeholder. Used in `Select`.
+     */
+    hidePlaceholder?: boolean;
     /**
      * Label Text. Required due to accessibility. If hideLabel is true, the label is set via aria-label
      */
@@ -100,6 +103,10 @@ export type TextInputProps = Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'r
      * @default 0.9
      */
     maxLengthWarningThreshold?: number;
+    /**
+     * When `true` elevate the label. Useful for adding custom values. Reference `Select` component
+     */
+    elevateLabel?: boolean;
 } & InternalProps;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/input/TextInput/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/input/TextInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEhE,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAE1D,oBAAY,aAAa;IACvB,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED,KAAK,aAAa,GAAG;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,wBAAwB,CAAC,OAAO,CAAC,EAEjC,MAAM,GAAG,UAAU,CACpB,GAAG;IACF;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAA;IAC9B;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B;;;OAGG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAA;CACnC,GAAG,aAAa,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/input/TextInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEhE,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAE1D,oBAAY,aAAa;IACvB,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED,KAAK,aAAa,GAAG;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,wBAAwB,CAAC,OAAO,CAAC,EAEjC,MAAM,GAAG,UAAU,CACpB,GAAG;IACF;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAA;IAC9B;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B;;;OAGG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAA;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,GAAG,aAAa,CAAA"}

package/dist/components/input/TextInput/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../src/components/input/TextInput/types.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport type { IconComponent, IconProps } from '../../icon'\n\nexport enum TextInputSize {\n  SMALL = 'small',\n  DEFAULT = 'default'\n}\n\ntype InternalProps = {\n  /**\n   * @ignore\n   * This prop is for internal use only.\n   * Toggles the incorrect error state for the storybook docs\n   */\n  _incorrectError?: boolean\n  /**\n   * @ignore\n   * This prop is for internal use only.\n   * Toggles the hover state for the storybook docs\n   */\n  _isHovered?: boolean\n  /**\n   * @ignore\n   * This prop is for internal use only.\n   * Toggles the focus state for the storybook docs\n   */\n  _isFocused?: boolean\n  /**\n   * @ignore\n   * This prop is for internal use only.\n   * Disabled pointer events for storybook docs\n   */\n  _disablePointerEvents?: boolean\n}\n\nexport type TextInputProps = Omit<\n  ComponentPropsWithoutRef<'input'>,\n  // Omitting required purely for storybook docs\n  'size' | 'required'\n> & {\n  /**\n   * Input sizes. NOTE: small inputs will not show the label\n   * @default default\n   */\n  size?: TextInputSize\n  /**\n   * Toggles warning state (turns border warning color). NOTE: this is not used any where at the moment\n   */\n  warning?: boolean\n  /**\n   * Toggles error state\n   */\n  error?: boolean\n  /**\n   * Hides the label. If the label is hidden the placeholder will show by default instead.\n   * @default false\n   */\n  hideLabel?: boolean\n  /**\n   * Label Text. Required due to accessibility. If hideLabel is true, the label is set via aria-label\n   */\n  label: string\n  /**\n   * ClassName on the div wrapping the whole input container (doesn't include assistive text)\n   */\n  inputRootClassName?: string\n  /**\n   * Helper text (or JSX) that shows up below the input\n   */\n  helperText?: string | ReactNode\n  /**\n   * Floating text on the lefthand side of the input.\n   */\n  startAdornmentText?: string\n  /**\n   * Floating text on the righthand side of the input\n   */\n  endAdornmentText?: string\n  /**\n   * Floating icon on the lefthand side of the input. Note: will float to the left of the label & content\n   */\n  startIcon?: IconComponent\n  /**\n   * Floating icon on the righthand side of the input\n   */\n  endIcon?: IconComponent\n  /**\n   * Override props to supply the start or end Icon\n   */\n  IconProps?: Partial<IconProps>\n  /**\n   * @hidden\n   * Floating component on the righthand side of the input. Meant for internal use only.\n   */\n  endAdornment?: ReactNode\n  /**\n   * Required or not. Will add an * to the label if required\n   */\n  required?: boolean\n  /**\n   * 0-1 number representating a percentage threshold to show the max character text. Default is 0.7 (70%)\n   * @default 0.7\n   */\n  showMaxLengthThreshold?: number\n  /**\n   * 0-1 number representating a percentage threshold to turn the character limit text orange. Default is 0.9 (90%)\n   * @default 0.9\n   */\n  maxLengthWarningThreshold?: number\n} & InternalProps\n"],"names":[],"mappings":"IAIY,cAGX;AAHD,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf,IAAA,aAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACrB,CAAC,EAHW,aAAa,KAAb,aAAa,GAGxB,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../src/components/input/TextInput/types.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport type { IconComponent, IconProps } from '../../icon'\n\nexport enum TextInputSize {\n  SMALL = 'small',\n  DEFAULT = 'default'\n}\n\ntype InternalProps = {\n  /**\n   * @ignore\n   * This prop is for internal use only.\n   * Toggles the incorrect error state for the storybook docs\n   */\n  _incorrectError?: boolean\n  /**\n   * @ignore\n   * This prop is for internal use only.\n   * Toggles the hover state for the storybook docs\n   */\n  _isHovered?: boolean\n  /**\n   * @ignore\n   * This prop is for internal use only.\n   * Toggles the focus state for the storybook docs\n   */\n  _isFocused?: boolean\n  /**\n   * @ignore\n   * This prop is for internal use only.\n   * Disabled pointer events for storybook docs\n   */\n  _disablePointerEvents?: boolean\n}\n\nexport type TextInputProps = Omit<\n  ComponentPropsWithoutRef<'input'>,\n  // Omitting required purely for storybook docs\n  'size' | 'required'\n> & {\n  /**\n   * Input sizes. NOTE: small inputs will not show the label\n   * @default default\n   */\n  size?: TextInputSize\n  /**\n   * Toggles warning state (turns border warning color). NOTE: this is not used any where at the moment\n   */\n  warning?: boolean\n  /**\n   * Toggles error state\n   */\n  error?: boolean\n  /**\n   * Hides the label. If the label is hidden the placeholder will show by default instead.\n   */\n  hideLabel?: boolean\n  /**\n   * When `true` hides the placeholder. Used in `Select`.\n   */\n  hidePlaceholder?: boolean\n  /**\n   * Label Text. Required due to accessibility. If hideLabel is true, the label is set via aria-label\n   */\n  label: string\n  /**\n   * ClassName on the div wrapping the whole input container (doesn't include assistive text)\n   */\n  inputRootClassName?: string\n  /**\n   * Helper text (or JSX) that shows up below the input\n   */\n  helperText?: string | ReactNode\n  /**\n   * Floating text on the lefthand side of the input.\n   */\n  startAdornmentText?: string\n  /**\n   * Floating text on the righthand side of the input\n   */\n  endAdornmentText?: string\n  /**\n   * Floating icon on the lefthand side of the input. Note: will float to the left of the label & content\n   */\n  startIcon?: IconComponent\n  /**\n   * Floating icon on the righthand side of the input\n   */\n  endIcon?: IconComponent\n  /**\n   * Override props to supply the start or end Icon\n   */\n  IconProps?: Partial<IconProps>\n  /**\n   * @hidden\n   * Floating component on the righthand side of the input. Meant for internal use only.\n   */\n  endAdornment?: ReactNode\n  /**\n   * Required or not. Will add an * to the label if required\n   */\n  required?: boolean\n  /**\n   * 0-1 number representating a percentage threshold to show the max character text. Default is 0.7 (70%)\n   * @default 0.7\n   */\n  showMaxLengthThreshold?: number\n  /**\n   * 0-1 number representating a percentage threshold to turn the character limit text orange. Default is 0.9 (90%)\n   * @default 0.9\n   */\n  maxLengthWarningThreshold?: number\n  /**\n   * When `true` elevate the label. Useful for adding custom values. Reference `Select` component\n   */\n  elevateLabel?: boolean\n} & InternalProps\n"],"names":[],"mappings":"IAIY,cAGX;AAHD,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf,IAAA,aAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACrB,CAAC,EAHW,aAAa,KAAb,aAAa,GAGxB,EAAA,CAAA,CAAA;;;;"}

package/dist/components/internal/Menu.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode, Ref } from 'react';
+import { CSSObject } from '@emotion/react';
+import { FlexProps } from "../layout/Flex";
+import { PaperProps } from "../layout/Paper";
+import { PopupProps } from "../popup/types";
+import { WithCSS } from "../../foundations";
+export type MenuProps = Omit<PopupProps, 'children'> & {
+    children: ReactNode;
+    PaperProps?: WithCSS<Partial<PaperProps>>;
+};
+export type MenuContentProps = {
+    children: ReactNode;
+    maxHeight?: CSSObject['maxHeight'];
+    width?: CSSObject['width'];
+    MenuListProps?: WithCSS<Partial<FlexProps>>;
+    scrollRef: Ref<HTMLDivElement>;
+    'aria-label'?: string;
+    'aria-activedescendent'?: string;
+};
+export declare const Menu: (props: MenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const MenuContent: (props: MenuContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Menu.d.ts.map

package/dist/components/internal/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/internal/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,OAAO,EAAQ,SAAS,EAAE,uBAA8B;AACxD,OAAO,EAAS,UAAU,EAAE,wBAA+B;AAE3D,OAAO,EAAE,UAAU,EAAE,uBAA8B;AACnD,OAAO,EAAE,OAAO,EAAE,0BAAmB;AAIrC,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG;IACrD,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAA;CAC1C,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAA;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAA;IAC3C,SAAS,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uBAAuB,CAAC,EAAE,MAAM,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,IAAI,UAAW,SAAS,qDAUpC,CAAA;AAED,eAAO,MAAM,WAAW,UAAW,gBAAgB,qDA4BlD,CAAA"}

package/dist/components/internal/Menu.js

@@ -0,0 +1,17 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Flex } from '../layout/Flex/Flex.js';
+import { Paper } from '../layout/Paper/Paper.js';
+import { Popup } from '../popup/Popup.js';
+
+var Menu = function (props) {
+    var children = props.children, PaperProps = props.PaperProps, other = __rest(props, ["children", "PaperProps"]);
+    return (jsx(Popup, __assign({}, other, { children: jsx(Paper, __assign({ mt: 's', border: 'strong', shadow: 'far' }, PaperProps, { children: children })) })));
+};
+var MenuContent = function (props) {
+    var children = props.children, maxHeight = props.maxHeight, width = props.width, MenuListProps = props.MenuListProps, scrollRef = props.scrollRef, ariaLabel = props["aria-label"], ariaActiveDescendant = props["aria-activedescendent"];
+    return (jsx(Flex, __assign({ direction: 'column', p: 's', gap: 's', alignItems: 'flex-start', role: 'listbox', css: { maxHeight: maxHeight, width: width, overflowY: 'auto' }, ref: scrollRef, onClick: function (e) { return e.stopPropagation(); }, "aria-label": ariaLabel, "aria-activedescendant": ariaActiveDescendant }, MenuListProps, { children: children })));
+};
+
+export { Menu, MenuContent };
+//# sourceMappingURL=Menu.js.map

package/dist/components/internal/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sources":["../../../src/components/internal/Menu.tsx"],"sourcesContent":["import { ReactNode, Ref } from 'react'\n\nimport { CSSObject } from '@emotion/react'\n\nimport { Flex, FlexProps } from 'components/layout/Flex'\nimport { Paper, PaperProps } from 'components/layout/Paper'\nimport { Popup } from 'components/popup/Popup'\nimport { PopupProps } from 'components/popup/types'\nimport { WithCSS } from 'foundations'\n\n// TODO menu label\n\nexport type MenuProps = Omit<PopupProps, 'children'> & {\n  children: ReactNode\n  PaperProps?: WithCSS<Partial<PaperProps>>\n}\n\nexport type MenuContentProps = {\n  children: ReactNode\n  maxHeight?: CSSObject['maxHeight']\n  width?: CSSObject['width']\n  MenuListProps?: WithCSS<Partial<FlexProps>>\n  scrollRef: Ref<HTMLDivElement>\n  'aria-label'?: string\n  'aria-activedescendent'?: string\n}\n\nexport const Menu = (props: MenuProps) => {\n  const { children, PaperProps, ...other } = props\n\n  return (\n    <Popup {...other}>\n      <Paper mt='s' border='strong' shadow='far' {...PaperProps}>\n        {children}\n      </Paper>\n    </Popup>\n  )\n}\n\nexport const MenuContent = (props: MenuContentProps) => {\n  const {\n    children,\n    maxHeight,\n    width,\n    MenuListProps,\n    scrollRef,\n    'aria-label': ariaLabel,\n    'aria-activedescendent': ariaActiveDescendant\n  } = props\n\n  return (\n    <Flex\n      direction='column'\n      p='s'\n      gap='s'\n      alignItems='flex-start'\n      role='listbox'\n      css={{ maxHeight, width, overflowY: 'auto' }}\n      ref={scrollRef}\n      onClick={(e) => e.stopPropagation()}\n      aria-label={ariaLabel}\n      aria-activedescendant={ariaActiveDescendant}\n      {...MenuListProps}\n    >\n      {children}\n    </Flex>\n  )\n}\n"],"names":["_jsx"],"mappings":";;;;;;AA2BO,IAAM,IAAI,GAAG,UAAC,KAAgB,EAAA;AAC3B,IAAA,IAAA,QAAQ,GAA2B,KAAK,CAAhC,QAAA,EAAE,UAAU,GAAe,KAAK,CAApB,UAAA,EAAK,KAAK,GAAK,MAAA,CAAA,KAAK,EAA1C,CAAA,UAAA,EAAA,YAAA,CAAkC,CAAF,CAAU;IAEhD,QACEA,GAAC,CAAA,KAAK,EAAK,QAAA,CAAA,EAAA,EAAA,KAAK,EACd,EAAA,QAAA,EAAAA,GAAA,CAAC,KAAK,EAAA,QAAA,CAAA,EAAC,EAAE,EAAC,GAAG,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAA,EAAK,UAAU,EAAA,EAAA,QAAA,EACtD,QAAQ,EAAA,CAAA,CACH,EACF,CAAA,CAAA,EACT;AACH,EAAC;AAEM,IAAM,WAAW,GAAG,UAAC,KAAuB,EAAA;AAE/C,IAAA,IAAA,QAAQ,GAON,KAAK,CAAA,QAPC,EACR,SAAS,GAMP,KAAK,CAAA,SANE,EACT,KAAK,GAKH,KAAK,CAAA,KALF,EACL,aAAa,GAIX,KAAK,CAAA,aAJM,EACb,SAAS,GAGP,KAAK,UAHE,EACK,SAAS,GAErB,KAAK,cAFgB,EACE,oBAAoB,GAC3C,KAAK,yBADsC,CACtC;AAET,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EACH,SAAS,EAAC,QAAQ,EAClB,CAAC,EAAC,GAAG,EACL,GAAG,EAAC,GAAG,EACP,UAAU,EAAC,YAAY,EACvB,IAAI,EAAC,SAAS,EACd,GAAG,EAAE,EAAE,SAAS,EAAA,SAAA,EAAE,KAAK,EAAA,KAAA,EAAE,SAAS,EAAE,MAAM,EAAE,EAC5C,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,eAAe,EAAE,CAAA,EAAA,EAAA,YAAA,EACvB,SAAS,EAAA,uBAAA,EACE,oBAAoB,EAAA,EACvC,aAAa,EAAA,EAAA,QAAA,EAEhB,QAAQ,EAAA,CAAA,CACJ,EACR;AACH;;;;"}

package/dist/components/internal/MenuItem.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { ButtonProps } from "..";
+import { IconComponent } from "../icon";
+export type MenuItemProps<Value extends string> = Omit<ButtonProps, 'variant' | 'onChange'> & {
+    variant?: 'option' | 'button';
+    label?: string;
+    icon?: IconComponent;
+    leadingElement?: JSX.Element;
+    helperText?: string;
+    isActive?: boolean;
+} & ({
+    variant: 'option';
+    onChange: (option: Value) => void;
+    value: Value;
+} | {
+    variant: 'button';
+});
+export declare const MenuItem: <Value extends string>(props: MenuItemProps<Value> & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+//# sourceMappingURL=MenuItem.d.ts.map

package/dist/components/internal/MenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/internal/MenuItem.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,WAAkB;AAExC,OAAO,EAAE,aAAa,EAAE,gBAAuB;AAI/C,MAAM,MAAM,aAAa,CAAC,KAAK,SAAS,MAAM,IAAI,IAAI,CACpD,WAAW,EACX,SAAS,GAAG,UAAU,CACvB,GAAG;IACF,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,CACE;IACE,OAAO,EAAE,QAAQ,CAAA;IACjB,QAAQ,EAAE,CAAC,MAAM,EAAE,KAAK,KAAK,IAAI,CAAA;IACjC,KAAK,EAAE,KAAK,CAAA;CACb,GACD;IAAE,OAAO,EAAE,QAAQ,CAAA;CAAE,CACxB,CAAA;AAEH,eAAO,MAAM,QAAQ,yMAkGnB,CAAA"}

package/dist/components/internal/MenuItem.js

@@ -0,0 +1,57 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef, useCallback } from 'react';
+import { BaseButton } from '../button/BaseButton/BaseButton.js';
+import { Text } from '../text/Text.js';
+import '../../foundations/color/semantic.js';
+import '../../foundations/color/color.js';
+import { useTheme } from '@emotion/react';
+import '../../foundations/theme/theme.js';
+
+var MenuItem = forwardRef(function (props, ref) {
+    var label = props.label, isActive = props.isActive, onClick = props.onClick, icon = props.icon, leadingElement = props.leadingElement, variant = props.variant, helperText = props.helperText, other = __rest(props, ["label", "isActive", "onClick", "icon", "leadingElement", "variant", "helperText"]);
+    var _a = useTheme(), color = _a.color, cornerRadius = _a.cornerRadius, spacing = _a.spacing, typography = _a.typography;
+    // Popup Styles
+    var optionIconCss = {
+        width: spacing.unit4,
+        height: spacing.unit4
+    };
+    var activeOptionCss = {
+        transform: 'none',
+        backgroundColor: color.secondary.s300,
+        color: color.static.white
+    };
+    var optionCss = {
+        height: variant === 'option' ? 36 : 40,
+        background: 'transparent',
+        border: 'none',
+        color: color.text.default,
+        fontWeight: typography.weight.medium,
+        gap: spacing.s,
+        paddingLeft: spacing.m,
+        paddingRight: spacing.m,
+        paddingTop: spacing.s,
+        paddingBottom: spacing.s,
+        width: '100%',
+        borderRadius: cornerRadius.s,
+        justifyContent: 'flex-start',
+        '&:hover': activeOptionCss,
+        '&:active': {
+            transform: 'none'
+        }
+    };
+    var handleClick = useCallback(function (e) {
+        e.stopPropagation();
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        if (variant === 'option') {
+            props.onChange(props.value);
+        }
+    }, [onClick, props, variant]);
+    return (jsxs(BaseButton, __assign({ ref: ref, iconLeft: icon, styles: {
+            button: __assign(__assign({}, optionCss), (isActive ? activeOptionCss : {})),
+            icon: optionIconCss
+        }, onClick: handleClick, role: variant === 'option' ? 'option' : undefined }, other, { onChange: undefined }, { children: [leadingElement !== null && leadingElement !== void 0 ? leadingElement : null, jsx(Text, __assign({ variant: 'body', size: variant === 'option' ? 'l' : 'm', strength: variant === 'button' ? 'strong' : 'default' }, { children: variant === 'option' ? label !== null && label !== void 0 ? label : props.value : label })), helperText ? (jsx(Text, __assign({ variant: 'body', size: variant === 'option' ? 'l' : 'm', strength: variant === 'button' ? 'strong' : 'default', color: isActive ? 'staticWhite' : 'subdued' }, { children: helperText }))) : null] })));
+});
+
+export { MenuItem };
+//# sourceMappingURL=MenuItem.js.map

package/dist/components/internal/MenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","sources":["../../../src/components/internal/MenuItem.tsx"],"sourcesContent":["import { forwardRef, MouseEventHandler, Ref, useCallback } from 'react'\n\nimport { CSSObject } from '@emotion/react'\n\nimport { ButtonProps } from 'components'\nimport { BaseButton } from 'components/button/BaseButton/BaseButton'\nimport { IconComponent } from 'components/icon'\nimport { Text } from 'components/text/Text'\nimport { useTheme } from 'foundations'\n\nexport type MenuItemProps<Value extends string> = Omit<\n  ButtonProps,\n  'variant' | 'onChange'\n> & {\n  variant?: 'option' | 'button'\n  label?: string\n  icon?: IconComponent\n  leadingElement?: JSX.Element\n  helperText?: string\n  isActive?: boolean\n} & (\n    | {\n        variant: 'option'\n        onChange: (option: Value) => void\n        value: Value\n      }\n    | { variant: 'button' }\n  )\n\nexport const MenuItem = forwardRef(function <Value extends string>(\n  props: MenuItemProps<Value>,\n  ref: Ref<HTMLButtonElement>\n) {\n  const {\n    label,\n    isActive,\n    onClick,\n    icon,\n    leadingElement,\n    variant,\n    helperText,\n    ...other\n  } = props\n\n  const { color, cornerRadius, spacing, typography } = useTheme()\n\n  // Popup Styles\n  const optionIconCss: CSSObject = {\n    width: spacing.unit4,\n    height: spacing.unit4\n  }\n\n  const activeOptionCss: CSSObject = {\n    transform: 'none',\n    backgroundColor: color.secondary.s300,\n    color: color.static.white\n  }\n\n  const optionCss: CSSObject = {\n    height: variant === 'option' ? 36 : 40,\n    background: 'transparent',\n    border: 'none',\n    color: color.text.default,\n    fontWeight: typography.weight.medium,\n    gap: spacing.s,\n    paddingLeft: spacing.m,\n    paddingRight: spacing.m,\n    paddingTop: spacing.s,\n    paddingBottom: spacing.s,\n    width: '100%',\n    borderRadius: cornerRadius.s,\n    justifyContent: 'flex-start',\n\n    '&:hover': activeOptionCss,\n    '&:active': {\n      transform: 'none'\n    }\n  }\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (e) => {\n      e.stopPropagation()\n      onClick?.(e)\n\n      if (variant === 'option') {\n        props.onChange(props.value)\n      }\n    },\n    [onClick, props, variant]\n  )\n\n  return (\n    <BaseButton\n      ref={ref}\n      iconLeft={icon}\n      styles={{\n        button: {\n          ...optionCss,\n          ...(isActive ? activeOptionCss : {})\n        },\n        icon: optionIconCss\n      }}\n      onClick={handleClick}\n      role={variant === 'option' ? 'option' : undefined}\n      {...other}\n      onChange={undefined}\n    >\n      {leadingElement ?? null}\n      <Text\n        variant='body'\n        size={variant === 'option' ? 'l' : 'm'}\n        strength={variant === 'button' ? 'strong' : 'default'}\n      >\n        {variant === 'option' ? label ?? props.value : label}\n      </Text>\n      {helperText ? (\n        <Text\n          variant='body'\n          size={variant === 'option' ? 'l' : 'm'}\n          strength={variant === 'button' ? 'strong' : 'default'}\n          color={isActive ? 'staticWhite' : 'subdued'}\n        >\n          {helperText}\n        </Text>\n      ) : null}\n    </BaseButton>\n  )\n})\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/internal/OptionKeyHandler.d.ts

@@ -0,0 +1,30 @@
+import { RefObject, ReactNode } from 'react';
+import { IconComponent } from "../icon";
+type OptionType<Value extends string> = {
+    value: Value;
+    /**
+     * The label to display. If not provided, uses the value.
+     */
+    label?: string;
+    helperText?: string;
+    icon?: IconComponent;
+    /**
+     * A leading element to display before the option label. Useful for icons/emojis
+     */
+    leadingElement?: JSX.Element;
+    /**
+     * A leading element to display before the filter button label
+     */
+    labelLeadingElement?: JSX.Element;
+};
+type OptionKeyHandlerProps<Value extends string> = {
+    children: (activeValue: Value | null) => ReactNode;
+    disabled?: boolean;
+    onChange: (value: Value) => void;
+    optionRefs: RefObject<HTMLButtonElement[]>;
+    options: OptionType<Value>[];
+    scrollRef: RefObject<HTMLDivElement>;
+};
+export declare const OptionKeyHandler: <Value extends string>(props: OptionKeyHandlerProps<Value>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=OptionKeyHandler.d.ts.map

package/dist/components/internal/OptionKeyHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionKeyHandler.d.ts","sourceRoot":"","sources":["../../../src/components/internal/OptionKeyHandler.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,SAAS,EAAa,MAAM,OAAO,CAAA;AAEjE,OAAO,EAAE,aAAa,EAAE,gBAAuB;AAE/C,KAAK,UAAU,CAAC,KAAK,SAAS,MAAM,IAAI;IACtC,KAAK,EAAE,KAAK,CAAA;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAClC,CAAA;AAED,KAAK,qBAAqB,CAAC,KAAK,SAAS,MAAM,IAAI;IACjD,QAAQ,EAAE,CAAC,WAAW,EAAE,KAAK,GAAG,IAAI,KAAK,SAAS,CAAA;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,UAAU,EAAE,SAAS,CAAC,iBAAiB,EAAE,CAAC,CAAA;IAC1C,OAAO,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,CAAA;IAC5B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAA;CACrC,CAAA;AAED,eAAO,MAAM,gBAAgB,iHAmF5B,CAAA"}

package/dist/components/{button/OptionsFilterButton/SelectPopupKeyHandler.js → internal/OptionKeyHandler.js}

@@ -1,14 +1,9 @@
 import { jsx, Fragment } from '@emotion/react/jsx-runtime';
 import { useState, useEffect } from 'react';
 
-/**
- * Handles key events for the popup inside the Select component
- *
- * Calls the `children` function with the currently active value
- */
-var SelectPopupKeyHandler = function (props) {
+var OptionKeyHandler = function (props) {
     var _a;
-    var disabled = props.disabled, options = props.options, onOptionSelect = props.onOptionSelect, optionRefs = props.optionRefs, scrollRef = props.scrollRef, children = props.children;
+    var disabled = props.disabled, options = props.options, onChange = props.onChange, optionRefs = props.optionRefs, scrollRef = props.scrollRef, children = props.children;
     var _b = useState(null), activeIndex = _b[0], setActiveIndex = _b[1];
     var activeValue = activeIndex !== null ? (_a = options[activeIndex]) === null || _a === void 0 ? void 0 : _a.value : null;
     useEffect(function () {
@@ -65,7 +60,7 @@ var SelectPopupKeyHandler = function (props) {
                     event.stopPropagation();
                     event.preventDefault();
                     if (activeIndex !== null && options[activeIndex]) {
-                        onOptionSelect(options[activeIndex]);
+                        onChange(options[activeIndex].value);
                     }
                     break;
             }
@@ -74,9 +69,9 @@ var SelectPopupKeyHandler = function (props) {
         return function () {
             window.removeEventListener('keydown', handleKeyDown);
         };
-    }, [disabled, options, activeIndex, scrollRef, optionRefs]);
+    }, [disabled, options, activeIndex, scrollRef, optionRefs, onChange]);
     return jsx(Fragment, { children: children(activeValue) });
 };
 
-export { SelectPopupKeyHandler };
-//# sourceMappingURL=SelectPopupKeyHandler.js.map
+export { OptionKeyHandler };
+//# sourceMappingURL=OptionKeyHandler.js.map

package/dist/components/internal/OptionKeyHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionKeyHandler.js","sources":["../../../src/components/internal/OptionKeyHandler.tsx"],"sourcesContent":["import { RefObject, useState, ReactNode, useEffect } from 'react'\n\nimport { IconComponent } from 'components/icon'\n\ntype OptionType<Value extends string> = {\n  value: Value\n  /**\n   * The label to display. If not provided, uses the value.\n   */\n  label?: string\n  helperText?: string\n  icon?: IconComponent\n  /**\n   * A leading element to display before the option label. Useful for icons/emojis\n   */\n  leadingElement?: JSX.Element\n  /**\n   * A leading element to display before the filter button label\n   */\n  labelLeadingElement?: JSX.Element\n}\n\ntype OptionKeyHandlerProps<Value extends string> = {\n  children: (activeValue: Value | null) => ReactNode\n  disabled?: boolean\n  onChange: (value: Value) => void\n  optionRefs: RefObject<HTMLButtonElement[]>\n  options: OptionType<Value>[]\n  scrollRef: RefObject<HTMLDivElement>\n}\n\nexport const OptionKeyHandler = <Value extends string>(\n  props: OptionKeyHandlerProps<Value>\n) => {\n  const { disabled, options, onChange, optionRefs, scrollRef, children } = props\n  const [activeIndex, setActiveIndex] = useState<number | null>(null)\n  const activeValue = activeIndex !== null ? options[activeIndex]?.value : null\n\n  useEffect(() => {\n    const adjustScrollPosition = (newIndex: number | null) => {\n      if (newIndex !== null) {\n        if (optionRefs.current) {\n          optionRefs.current[newIndex].scrollIntoView({\n            behavior: 'smooth',\n            block: 'start'\n          })\n        }\n      } else {\n        scrollRef.current?.scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (disabled) {\n        return\n      }\n\n      switch (event.key) {\n        case 'ArrowUp':\n          event.stopPropagation()\n          event.preventDefault()\n          setActiveIndex((prevIndex) => {\n            const getNewIndex = () => {\n              if (prevIndex === null) {\n                return options.length - 1\n              }\n\n              return prevIndex > 0 ? prevIndex - 1 : null\n            }\n\n            const newIndex = getNewIndex()\n            adjustScrollPosition(newIndex)\n\n            return newIndex\n          })\n          break\n        case 'ArrowDown':\n          event.stopPropagation()\n          event.preventDefault()\n          setActiveIndex((prevIndex) => {\n            const getNewIndex = () => {\n              if (prevIndex === null) {\n                return 0\n              }\n\n              return prevIndex < options.length - 1 ? prevIndex + 1 : null\n            }\n\n            const newIndex = getNewIndex()\n            adjustScrollPosition(newIndex)\n\n            return newIndex\n          })\n          break\n        case 'Enter':\n          event.stopPropagation()\n          event.preventDefault()\n          if (activeIndex !== null && options[activeIndex]) {\n            onChange(options[activeIndex].value)\n          }\n          break\n        default:\n          break\n      }\n    }\n\n    window.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      window.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [disabled, options, activeIndex, scrollRef, optionRefs, onChange])\n\n  return <>{children(activeValue)}</>\n}\n"],"names":["_jsx"],"mappings":";;;AA+BO,IAAM,gBAAgB,GAAG,UAC9B,KAAmC,EAAA;;AAE3B,IAAA,IAAA,QAAQ,GAAyD,KAAK,CAAA,QAA9D,EAAE,OAAO,GAAgD,KAAK,CAArD,OAAA,EAAE,QAAQ,GAAsC,KAAK,CAAA,QAA3C,EAAE,UAAU,GAA0B,KAAK,CAA/B,UAAA,EAAE,SAAS,GAAe,KAAK,CAAA,SAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAU;IACxE,IAAA,EAAA,GAAgC,QAAQ,CAAgB,IAAI,CAAC,EAA5D,WAAW,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,cAAc,GAAA,EAAA,CAAA,CAAA,CAAiC,CAAA;AACnE,IAAA,IAAM,WAAW,GAAG,WAAW,KAAK,IAAI,GAAG,CAAA,EAAA,GAAA,OAAO,CAAC,WAAW,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAK,GAAG,IAAI,CAAA;AAE7E,IAAA,SAAS,CAAC,YAAA;QACR,IAAM,oBAAoB,GAAG,UAAC,QAAuB,EAAA;;YACnD,IAAI,QAAQ,KAAK,IAAI,EAAE;gBACrB,IAAI,UAAU,CAAC,OAAO,EAAE;AACtB,oBAAA,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;AAC1C,wBAAA,QAAQ,EAAE,QAAQ;AAClB,wBAAA,KAAK,EAAE,OAAO;AACf,qBAAA,CAAC,CAAA;AACH,iBAAA;AACF,aAAA;AAAM,iBAAA;AACL,gBAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAA;AAC5D,aAAA;AACH,SAAC,CAAA;QAED,IAAM,aAAa,GAAG,UAAC,KAAoB,EAAA;AACzC,YAAA,IAAI,QAAQ,EAAE;gBACZ,OAAM;AACP,aAAA;YAED,QAAQ,KAAK,CAAC,GAAG;AACf,gBAAA,KAAK,SAAS;oBACZ,KAAK,CAAC,eAAe,EAAE,CAAA;oBACvB,KAAK,CAAC,cAAc,EAAE,CAAA;oBACtB,cAAc,CAAC,UAAC,SAAS,EAAA;AACvB,wBAAA,IAAM,WAAW,GAAG,YAAA;4BAClB,IAAI,SAAS,KAAK,IAAI,EAAE;AACtB,gCAAA,OAAO,OAAO,CAAC,MAAM,GAAG,CAAC,CAAA;AAC1B,6BAAA;AAED,4BAAA,OAAO,SAAS,GAAG,CAAC,GAAG,SAAS,GAAG,CAAC,GAAG,IAAI,CAAA;AAC7C,yBAAC,CAAA;AAED,wBAAA,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;wBAC9B,oBAAoB,CAAC,QAAQ,CAAC,CAAA;AAE9B,wBAAA,OAAO,QAAQ,CAAA;AACjB,qBAAC,CAAC,CAAA;oBACF,MAAK;AACP,gBAAA,KAAK,WAAW;oBACd,KAAK,CAAC,eAAe,EAAE,CAAA;oBACvB,KAAK,CAAC,cAAc,EAAE,CAAA;oBACtB,cAAc,CAAC,UAAC,SAAS,EAAA;AACvB,wBAAA,IAAM,WAAW,GAAG,YAAA;4BAClB,IAAI,SAAS,KAAK,IAAI,EAAE;AACtB,gCAAA,OAAO,CAAC,CAAA;AACT,6BAAA;AAED,4BAAA,OAAO,SAAS,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,GAAG,SAAS,GAAG,CAAC,GAAG,IAAI,CAAA;AAC9D,yBAAC,CAAA;AAED,wBAAA,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;wBAC9B,oBAAoB,CAAC,QAAQ,CAAC,CAAA;AAE9B,wBAAA,OAAO,QAAQ,CAAA;AACjB,qBAAC,CAAC,CAAA;oBACF,MAAK;AACP,gBAAA,KAAK,OAAO;oBACV,KAAK,CAAC,eAAe,EAAE,CAAA;oBACvB,KAAK,CAAC,cAAc,EAAE,CAAA;oBACtB,IAAI,WAAW,KAAK,IAAI,IAAI,OAAO,CAAC,WAAW,CAAC,EAAE;wBAChD,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,CAAA;AACrC,qBAAA;oBACD,MAAK;AAGR,aAAA;AACH,SAAC,CAAA;AAED,QAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;QAEjD,OAAO,YAAA;AACL,YAAA,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;AACtD,SAAC,CAAA;AACH,KAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAA;AAErE,IAAA,OAAOA,0BAAG,QAAQ,CAAC,WAAW,CAAC,GAAI,CAAA;AACrC;;;;"}

package/dist/components/layout/Box/Box.js

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 /** Base layout component used as a building block for creating pages and other components. */
 var Box = styled.div(function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     var h = _a.h, w = _a.w, p = _a.p, ph = _a.ph, pv = _a.pv, pt = _a.pt, pl = _a.pl, pr = _a.pr, pb = _a.pb, m = _a.m, mh = _a.mh, mv = _a.mv, mt = _a.mt, ml = _a.ml, mr = _a.mr, mb = _a.mb, backgroundColor = _a.backgroundColor, border = _a.border, borderTop = _a.borderTop, borderRight = _a.borderRight, borderBottom = _a.borderBottom, borderLeft = _a.borderLeft, borderRadius = _a.borderRadius, borderTopRightRadius = _a.borderTopRightRadius, borderBottomRightRadius = _a.borderBottomRightRadius, borderBottomLeftRadius = _a.borderBottomLeftRadius, borderTopLeftRadius = _a.borderTopLeftRadius, shadow = _a.shadow, flex = _a.flex, alignSelf = _a.alignSelf, theme = _a.theme;
     var shadows = theme.shadows, spacing = theme.spacing, color = theme.color, cornerRadius = theme.cornerRadius;
     var padT = (_b = pt !== null && pt !== void 0 ? pt : pv) !== null && _b !== void 0 ? _b : p;
@@ -24,9 +24,9 @@ var Box = styled.div(function (_a) {
         paddingRight: (_p = (padR && spacing[padR])) !== null && _p !== void 0 ? _p : padR,
         paddingBottom: (_q = (padB && spacing[padB])) !== null && _q !== void 0 ? _q : padB,
         marginTop: (_r = (marginT && spacing[marginT])) !== null && _r !== void 0 ? _r : marginT,
-        marginLeft: marginL && spacing[marginL],
-        marginRight: marginR && spacing[marginR],
-        marginBottom: marginB && spacing[marginB],
+        marginLeft: (_s = (marginL && spacing[marginL])) !== null && _s !== void 0 ? _s : marginL,
+        marginRight: (_t = (marginR && spacing[marginR])) !== null && _t !== void 0 ? _t : marginR,
+        marginBottom: (_u = (marginB && spacing[marginB])) !== null && _u !== void 0 ? _u : marginB,
         backgroundColor: backgroundColor && theme.color.background[backgroundColor],
         border: border && "1px solid ".concat(color.border[border]),
         borderTop: borderTop && "1px solid ".concat(color.border[borderTop]),

package/dist/components/layout/Box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sources":["../../../../src/components/layout/Box/Box.tsx"],"sourcesContent":["import styled from '@emotion/styled'\n\nimport type { SpacingOptions } from '../../../foundations/spacing'\n\nimport type { BoxProps } from './types'\n\n/** Base layout component used as a building block for creating pages and other components. */\nexport const Box = styled.div<BoxProps>(\n  ({\n    h,\n    w,\n    p,\n    ph,\n    pv,\n    pt,\n    pl,\n    pr,\n    pb,\n    m,\n    mh,\n    mv,\n    mt,\n    ml,\n    mr,\n    mb,\n    backgroundColor,\n    border,\n    borderTop,\n    borderRight,\n    borderBottom,\n    borderLeft,\n    borderRadius,\n    borderTopRightRadius,\n    borderBottomRightRadius,\n    borderBottomLeftRadius,\n    borderTopLeftRadius,\n    shadow,\n    flex,\n    alignSelf,\n    theme\n  }) => {\n    const { shadows, spacing, color, cornerRadius } = theme\n    const padT = pt ?? pv ?? p\n    const padB = pb ?? pv ?? p\n    const padL = pl ?? ph ?? p\n    const padR = pr ?? ph ?? p\n\n    const marginT = mt ?? mv ?? m\n    const marginB = mb ?? mv ?? m\n    const marginL = ml ?? mh ?? m\n    const marginR = mr ?? mh ?? m\n\n    return {\n      position: 'relative',\n      boxSizing: 'border-box',\n      height: spacing[h as SpacingOptions] ?? h,\n      width: spacing[w as SpacingOptions] ?? w,\n      boxShadow: shadow && shadows[shadow],\n      paddingTop: (padT && spacing[padT as SpacingOptions]) ?? padT,\n      paddingLeft: (padL && spacing[padL as SpacingOptions]) ?? padL,\n      paddingRight: (padR && spacing[padR as SpacingOptions]) ?? padR,\n      paddingBottom: (padB && spacing[padB as SpacingOptions]) ?? padB,\n      marginTop: (marginT && spacing[marginT as SpacingOptions]) ?? marginT,\n      marginLeft: marginL && spacing[marginL],\n      marginRight: marginR && spacing[marginR],\n      marginBottom: marginB && spacing[marginB],\n      backgroundColor:\n        backgroundColor && theme.color.background[backgroundColor],\n      border: border && `1px solid ${color.border[border]}`,\n      borderTop: borderTop && `1px solid ${color.border[borderTop]}`,\n      borderRight: borderRight && `1px solid ${color.border[borderRight]}`,\n      borderBottom: borderBottom && `1px solid ${color.border[borderBottom]}`,\n      borderLeft: borderLeft && `1px solid ${color.border[borderLeft]}`,\n      borderRadius: borderRadius && cornerRadius[borderRadius],\n      borderTopRightRadius:\n        borderTopRightRadius && cornerRadius[borderTopRightRadius],\n      borderBottomRightRadius:\n        borderBottomRightRadius && cornerRadius[borderBottomRightRadius],\n      borderBottomLeftRadius:\n        borderBottomLeftRadius && cornerRadius[borderBottomLeftRadius],\n      borderTopLeftRadius:\n        borderTopLeftRadius && cornerRadius[borderTopLeftRadius],\n      flex,\n      alignSelf\n    }\n  }\n)\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Box.js","sources":["../../../../src/components/layout/Box/Box.tsx"],"sourcesContent":["import styled from '@emotion/styled'\n\nimport type { SpacingOptions } from '../../../foundations/spacing'\n\nimport type { BoxProps } from './types'\n\n/** Base layout component used as a building block for creating pages and other components. */\nexport const Box = styled.div<BoxProps>(\n  ({\n    h,\n    w,\n    p,\n    ph,\n    pv,\n    pt,\n    pl,\n    pr,\n    pb,\n    m,\n    mh,\n    mv,\n    mt,\n    ml,\n    mr,\n    mb,\n    backgroundColor,\n    border,\n    borderTop,\n    borderRight,\n    borderBottom,\n    borderLeft,\n    borderRadius,\n    borderTopRightRadius,\n    borderBottomRightRadius,\n    borderBottomLeftRadius,\n    borderTopLeftRadius,\n    shadow,\n    flex,\n    alignSelf,\n    theme\n  }) => {\n    const { shadows, spacing, color, cornerRadius } = theme\n    const padT = pt ?? pv ?? p\n    const padB = pb ?? pv ?? p\n    const padL = pl ?? ph ?? p\n    const padR = pr ?? ph ?? p\n\n    const marginT = mt ?? mv ?? m\n    const marginB = mb ?? mv ?? m\n    const marginL = ml ?? mh ?? m\n    const marginR = mr ?? mh ?? m\n\n    return {\n      position: 'relative',\n      boxSizing: 'border-box',\n      height: spacing[h as SpacingOptions] ?? h,\n      width: spacing[w as SpacingOptions] ?? w,\n      boxShadow: shadow && shadows[shadow],\n      paddingTop: (padT && spacing[padT as SpacingOptions]) ?? padT,\n      paddingLeft: (padL && spacing[padL as SpacingOptions]) ?? padL,\n      paddingRight: (padR && spacing[padR as SpacingOptions]) ?? padR,\n      paddingBottom: (padB && spacing[padB as SpacingOptions]) ?? padB,\n      marginTop: (marginT && spacing[marginT as SpacingOptions]) ?? marginT,\n      marginLeft: (marginL && spacing[marginL as SpacingOptions]) ?? marginL,\n      marginRight: (marginR && spacing[marginR as SpacingOptions]) ?? marginR,\n      marginBottom: (marginB && spacing[marginB as SpacingOptions]) ?? marginB,\n      backgroundColor:\n        backgroundColor && theme.color.background[backgroundColor],\n      border: border && `1px solid ${color.border[border]}`,\n      borderTop: borderTop && `1px solid ${color.border[borderTop]}`,\n      borderRight: borderRight && `1px solid ${color.border[borderRight]}`,\n      borderBottom: borderBottom && `1px solid ${color.border[borderBottom]}`,\n      borderLeft: borderLeft && `1px solid ${color.border[borderLeft]}`,\n      borderRadius: borderRadius && cornerRadius[borderRadius],\n      borderTopRightRadius:\n        borderTopRightRadius && cornerRadius[borderTopRightRadius],\n      borderBottomRightRadius:\n        borderBottomRightRadius && cornerRadius[borderBottomRightRadius],\n      borderBottomLeftRadius:\n        borderBottomLeftRadius && cornerRadius[borderBottomLeftRadius],\n      borderTopLeftRadius:\n        borderTopLeftRadius && cornerRadius[borderTopLeftRadius],\n      flex,\n      alignSelf\n    }\n  }\n)\n"],"names":[],"mappings":"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"}

package/dist/components/layout/Box/types.d.ts

@@ -23,19 +23,19 @@ export type BaseBoxProps = {
     /** Padding Bottom */
     pb?: SpacingOptions | CSSProperties['paddingBottom'];
     /** Margin */
-    m?: SpacingOptions;
+    m?: SpacingOptions | CSSProperties['margin'];
     /** Margin Horizontal */
-    mh?: SpacingOptions;
+    mh?: SpacingOptions | CSSProperties['marginInline'];
     /** Margin Vertical */
-    mv?: SpacingOptions;
+    mv?: SpacingOptions | CSSProperties['marginBlock'];
     /** Margin Top */
     mt?: SpacingOptions | CSSProperties['marginTop'];
     /** Margin Left */
-    ml?: SpacingOptions;
+    ml?: SpacingOptions | CSSProperties['marginLeft'];
     /** Margin Right */
-    mr?: SpacingOptions;
+    mr?: SpacingOptions | CSSProperties['marginRight'];
     /** Margin Bottom */
-    mb?: SpacingOptions;
+    mb?: SpacingOptions | CSSProperties['marginBottom'];
     /** Background Color */
     backgroundColor?: BackgroundColors;
     /** Border */

package/dist/components/layout/Box/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Box/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAChF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAA;AAC7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAGlE,MAAM,MAAM,YAAY,GAAG;IACzB,aAAa;IACb,CAAC,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAA;IAC5C,YAAY;IACZ,CAAC,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,OAAO,CAAC,CAAA;IAE3C,cAAc;IACd,CAAC,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,SAAS,CAAC,CAAA;IAC7C,yBAAyB;IACzB,EAAE,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,eAAe,CAAC,CAAA;IACpD,uBAAuB;IACvB,EAAE,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,cAAc,CAAC,CAAA;IACnD,kBAAkB;IAClB,EAAE,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,YAAY,CAAC,CAAA;IACjD,mBAAmB;IACnB,EAAE,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,aAAa,CAAC,CAAA;IAClD,oBAAoB;IACpB,EAAE,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,cAAc,CAAC,CAAA;IACnD,qBAAqB;IACrB,EAAE,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,eAAe,CAAC,CAAA;IAEpD,aAAa;IACb,CAAC,CAAC,EAAE,cAAc,CAAA;IAClB,wBAAwB;IACxB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,sBAAsB;IACtB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,iBAAiB;IACjB,EAAE,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,WAAW,CAAC,CAAA;IAChD,kBAAkB;IAClB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,mBAAmB;IACnB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,oBAAoB;IACpB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,uBAAuB;IACvB,eAAe,CAAC,EAAE,gBAAgB,CAAA;IAClC,aAAa;IACb,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,iBAAiB;IACjB,SAAS,CAAC,EAAE,YAAY,CAAA;IACxB,mBAAmB;IACnB,WAAW,CAAC,EAAE,YAAY,CAAA;IAC1B,oBAAoB;IACpB,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,kBAAkB;IAClB,UAAU,CAAC,EAAE,YAAY,CAAA;IACzB,oBAAoB;IACpB,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAClC,8BAA8B;IAC9B,oBAAoB,CAAC,EAAE,mBAAmB,CAAA;IAC1C,iCAAiC;IACjC,uBAAuB,CAAC,EAAE,mBAAmB,CAAA;IAC7C,gCAAgC;IAChC,sBAAsB,CAAC,EAAE,mBAAmB,CAAA;IAC5C,6BAA6B;IAC7B,mBAAmB,CAAC,EAAE,mBAAmB,CAAA;IAEzC,uBAAuB;IACvB,MAAM,CAAC,EAAE,aAAa,CAAA;IAEtB,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAC5B,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAA;CACvC,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Box/types.ts"],"names":[],"mappings":"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"}

package/dist/components/layout/Flex/Flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Flex/Flex.tsx"],"names":[],"mappings":";AASA,qFAAqF;AACrF,eAAO,MAAM,IAAI;;;;;4CA0Bf,CAAA"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Flex/Flex.tsx"],"names":[],"mappings":";AASA,qFAAqF;AACrF,eAAO,MAAM,IAAI;;;;;4CA4Bf,CAAA"}

package/dist/components/layout/Flex/Flex.js

@@ -7,13 +7,13 @@ var invalidProps = ['alignItems', 'direction', 'wrap'];
 var Flex = styled(Box, {
     shouldForwardProp: function (prop) { return isPropValid(prop) && !invalidProps.includes(prop); }
 })(function (props) {
-    var theme = props.theme, direction = props.direction, wrap = props.wrap, alignItems = props.alignItems, justifyContent = props.justifyContent, gap = props.gap, rowGap = props.rowGap, columnGap = props.columnGap, inline = props.inline;
+    var theme = props.theme, direction = props.direction, wrap = props.wrap, alignItems = props.alignItems, justifyContent = props.justifyContent, gap = props.gap, rowGap = props.rowGap, columnGap = props.columnGap, inline = props.inline, row = props.row, column = props.column;
     var spacing = theme.spacing;
     return {
         display: inline ? 'inline-flex' : 'flex',
         alignItems: alignItems,
         justifyContent: justifyContent,
-        flexDirection: direction,
+        flexDirection: direction !== null && direction !== void 0 ? direction : (row ? 'row' : column ? 'column' : undefined),
         flexWrap: wrap,
         gap: gap && spacing[gap],
         rowGap: rowGap && spacing[rowGap],

package/dist/components/layout/Flex/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sources":["../../../../src/components/layout/Flex/Flex.tsx"],"sourcesContent":["import isPropValid from '@emotion/is-prop-valid'\nimport styled from '@emotion/styled'\n\nimport { Box } from '../Box'\n\nimport type { FlexProps } from './types'\n\nconst invalidProps = ['alignItems', 'direction', 'wrap']\n\n/** Layout component used to group child elements in one-deminsional arrangements. */\nexport const Flex = styled(Box, {\n  shouldForwardProp: (prop) => isPropValid(prop) && !invalidProps.includes(prop)\n})<FlexProps>((props) => {\n  const {\n    theme,\n    direction,\n    wrap,\n    alignItems,\n    justifyContent,\n    gap,\n    rowGap,\n    columnGap,\n    inline\n  } = props\n  const { spacing } = theme\n\n  return {\n    display: inline ? 'inline-flex' : 'flex',\n    alignItems,\n    justifyContent,\n    flexDirection: direction,\n    flexWrap: wrap,\n    gap: gap && spacing[gap],\n    rowGap: rowGap && spacing[rowGap],\n    columnGap: columnGap && spacing[columnGap]\n  }\n})\n"],"names":[],"mappings":";;;;AAOA,IAAM,YAAY,GAAG,CAAC,YAAY,EAAE,WAAW,EAAE,MAAM,CAAC,CAAA;AAExD;AACa,IAAA,IAAI,GAAG,MAAM,CAAC,GAAG,EAAE;AAC9B,IAAA,iBAAiB,EAAE,UAAC,IAAI,IAAK,OAAA,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAA;CAC/E,CAAC,CAAY,UAAC,KAAK,EAAA;IAEhB,IAAA,KAAK,GASH,KAAK,CAAA,KATF,EACL,SAAS,GAQP,KAAK,CARE,SAAA,EACT,IAAI,GAOF,KAAK,KAPH,EACJ,UAAU,GAMR,KAAK,CAAA,UANG,EACV,cAAc,GAKZ,KAAK,CALO,cAAA,EACd,GAAG,GAID,KAAK,IAJJ,EACH,MAAM,GAGJ,KAAK,CAAA,MAHD,EACN,SAAS,GAEP,KAAK,CAFE,SAAA,EACT,MAAM,GACJ,KAAK,OADD,CACC;AACD,IAAA,IAAA,OAAO,GAAK,KAAK,CAAA,OAAV,CAAU;IAEzB,OAAO;QACL,OAAO,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM;AACxC,QAAA,UAAU,EAAA,UAAA;AACV,QAAA,cAAc,EAAA,cAAA;AACd,QAAA,aAAa,EAAE,SAAS;AACxB,QAAA,QAAQ,EAAE,IAAI;AACd,QAAA,GAAG,EAAE,GAAG,IAAI,OAAO,CAAC,GAAG,CAAC;AACxB,QAAA,MAAM,EAAE,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC;AACjC,QAAA,SAAS,EAAE,SAAS,IAAI,OAAO,CAAC,SAAS,CAAC;KAC3C,CAAA;AACH,CAAC;;;;"}
+{"version":3,"file":"Flex.js","sources":["../../../../src/components/layout/Flex/Flex.tsx"],"sourcesContent":["import isPropValid from '@emotion/is-prop-valid'\nimport styled from '@emotion/styled'\n\nimport { Box } from '../Box'\n\nimport type { FlexProps } from './types'\n\nconst invalidProps = ['alignItems', 'direction', 'wrap']\n\n/** Layout component used to group child elements in one-deminsional arrangements. */\nexport const Flex = styled(Box, {\n  shouldForwardProp: (prop) => isPropValid(prop) && !invalidProps.includes(prop)\n})<FlexProps>((props) => {\n  const {\n    theme,\n    direction,\n    wrap,\n    alignItems,\n    justifyContent,\n    gap,\n    rowGap,\n    columnGap,\n    inline,\n    row,\n    column\n  } = props\n  const { spacing } = theme\n\n  return {\n    display: inline ? 'inline-flex' : 'flex',\n    alignItems,\n    justifyContent,\n    flexDirection: direction ?? (row ? 'row' : column ? 'column' : undefined),\n    flexWrap: wrap,\n    gap: gap && spacing[gap],\n    rowGap: rowGap && spacing[rowGap],\n    columnGap: columnGap && spacing[columnGap]\n  }\n})\n"],"names":[],"mappings":";;;;AAOA,IAAM,YAAY,GAAG,CAAC,YAAY,EAAE,WAAW,EAAE,MAAM,CAAC,CAAA;AAExD;AACa,IAAA,IAAI,GAAG,MAAM,CAAC,GAAG,EAAE;AAC9B,IAAA,iBAAiB,EAAE,UAAC,IAAI,IAAK,OAAA,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAA;CAC/E,CAAC,CAAY,UAAC,KAAK,EAAA;IAEhB,IAAA,KAAK,GAWH,KAAK,CAXF,KAAA,EACL,SAAS,GAUP,KAAK,CAVE,SAAA,EACT,IAAI,GASF,KAAK,CATH,IAAA,EACJ,UAAU,GAQR,KAAK,CAAA,UARG,EACV,cAAc,GAOZ,KAAK,CAPO,cAAA,EACd,GAAG,GAMD,KAAK,CANJ,GAAA,EACH,MAAM,GAKJ,KAAK,CAAA,MALD,EACN,SAAS,GAIP,KAAK,CAAA,SAJE,EACT,MAAM,GAGJ,KAAK,CAAA,MAHD,EACN,GAAG,GAED,KAAK,CAFJ,GAAA,EACH,MAAM,GACJ,KAAK,CAAA,MADD,CACC;AACD,IAAA,IAAA,OAAO,GAAK,KAAK,CAAA,OAAV,CAAU;IAEzB,OAAO;QACL,OAAO,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM;AACxC,QAAA,UAAU,EAAA,UAAA;AACV,QAAA,cAAc,EAAA,cAAA;QACd,aAAa,EAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAT,SAAS,IAAK,GAAG,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AACzE,QAAA,QAAQ,EAAE,IAAI;AACd,QAAA,GAAG,EAAE,GAAG,IAAI,OAAO,CAAC,GAAG,CAAC;AACxB,QAAA,MAAM,EAAE,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC;AACjC,QAAA,SAAS,EAAE,SAAS,IAAI,OAAO,CAAC,SAAS,CAAC;KAC3C,CAAA;AACH,CAAC;;;;"}

package/dist/components/layout/Flex/types.d.ts

@@ -10,6 +10,8 @@ export type BaseFlexProps = {
     justifyContent?: CSSProperties['justifyContent'];
     wrap?: CSSProperties['flexWrap'];
     inline?: boolean;
+    row?: boolean;
+    column?: boolean;
 };
 export type FlexProps = BaseFlexProps & BoxProps;
 //# sourceMappingURL=types.d.ts.map

package/dist/components/layout/Flex/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Flex/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAClE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEtC,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAA;IACxC,SAAS,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAA;IAC1C,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,cAAc,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAA;IAChD,IAAI,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;IAChC,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,QAAQ,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Flex/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAClE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEtC,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAA;IACxC,SAAS,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAA;IAC1C,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,cAAc,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAA;IAChD,IAAI,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;IAChC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,QAAQ,CAAA"}

package/dist/components/modal/Modal.js

@@ -180,7 +180,7 @@ var Modal = forwardRef(function Modal(_a, ref) {
         }
     });
     var modalContentClickedRef = useRef(false);
-    var outsideClickRef = useClickOutside(onClose, 
+    var outsideClickRef = useClickOutside(onClose, isOpen, 
     // Check to see if the click outside is not another modal wrapper.
     // If it is, that means we have a nested modal situation and shouldn't
     // dismiss "this" modal. We let the useClickOutside in "that" modal to
@@ -204,7 +204,7 @@ var Modal = forwardRef(function Modal(_a, ref) {
             return isModalWrapper && !isThisModalWrapper;
         }
         return false;
-    }, isOpen);
+    });
     var handleEscape = useCallback(function () {
         if (isOpen)
             onClose();
@@ -251,7 +251,7 @@ var Modal = forwardRef(function Modal(_a, ref) {
     return (jsx(Fragment, { children: modalRoot && (process.env.NODE_ENV === 'test' ? isOpenProp : isOpen)
             ? ReactDOM.createPortal(jsx(Fragment, { children: transition.map(function (_a) {
                     var item = _a.item, props = _a.props, key = _a.key;
-                    return item && (jsx(animated.div, __assign({ className: wrapperClassNames, style: __assign(__assign({}, wrapperStyle), { opacity: props.opacity, height: height, minHeight: height }), ref: ref }, { children: jsx(animated.div, __assign({ ref: dismissOnClickOutside ? outsideClickRef : null, className: bodyClassNames, style: __assign(__assign(__assign({}, props), bodyOffset), bodyStyle), role: 'dialog', "aria-labelledby": titleId, "aria-describedby": subtitleId, onClick: handleModalContentClicked }, { children: jsxs(Fragment, { children: [showTitleHeader && (jsxs("div", __assign({ className: headerContainerClassNames }, { children: [showDismissButton && (jsx("div", __assign({ className: styles.dismissButton, onClick: onClose }, { children: jsx(IconClose, { color: 'subdued', size: 's' }) }))), jsx("div", __assign({ id: titleId, className: cn(styles.header, titleClassName) }, { children: title })), jsx("div", __assign({ id: subtitleId, className: cn(styles.subtitle, subtitleClassName) }, { children: subtitle }))] }))), jsx(ModalContext.Provider, __assign({ value: modalContextValue }, { children: children }))] }) })) }), key));
+                    return item && (jsx(animated.div, __assign({ className: wrapperClassNames, style: __assign(__assign({}, wrapperStyle), { opacity: props.opacity, height: height, minHeight: height }), ref: ref }, { children: jsx(animated.div, __assign({ ref: dismissOnClickOutside ? outsideClickRef : null, className: bodyClassNames, style: __assign(__assign(__assign({}, props), bodyOffset), bodyStyle), role: 'dialog', "aria-labelledby": titleId, "aria-describedby": subtitleId, onMouseDown: handleModalContentClicked }, { children: jsxs(Fragment, { children: [showTitleHeader && (jsxs("div", __assign({ className: headerContainerClassNames }, { children: [showDismissButton && (jsx("div", __assign({ className: styles.dismissButton, onClick: onClose }, { children: jsx(IconClose, { color: 'subdued', size: 's' }) }))), jsx("div", __assign({ id: titleId, className: cn(styles.header, titleClassName) }, { children: title })), jsx("div", __assign({ id: subtitleId, className: cn(styles.subtitle, subtitleClassName) }, { children: subtitle }))] }))), jsx(ModalContext.Provider, __assign({ value: modalContextValue }, { children: children }))] }) })) }), key));
                 }) }), modalRoot)
             : null }));
 });