@audius/harmony 0.0.25

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

@@ -0,0 +1,98 @@
+import { __rest, __assign } from '../../../_virtual/_tslib.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { forwardRef, useId } from 'react';
+import cn from 'classnames';
+import { Text } from '../../text/Text/Text.js';
+import '../../layout/Box/Box.js';
+import '@emotion/react';
+import { Flex } from '../../layout/Flex/Flex.js';
+import '../../layout/Paper/Paper.js';
+import '../../layout/Popup/Popup.js';
+import { useFocusState } from '../useFocusState.js';
+import styles from './TextInput.module.css.js';
+import { TextInputSize } from './types.js';
+
+/**
+ * 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.
+ */
+var TextInput = forwardRef(function (props, ref) {
+    var _a, _b;
+    var ariaLabel = props["aria-label"], required = props.required, className = props.className, inputRootClassName = props.inputRootClassName, maxLength = props.maxLength, _c = props.showMaxLengthThreshold, showMaxLengthThreshold = _c === void 0 ? 0.7 : _c, _d = props.maxLengthWarningThreshold, maxLengthWarningThreshold = _d === void 0 ? 0.9 : _d, _e = props.size, size = _e === void 0 ? TextInputSize.DEFAULT : _e, hideLabel = props.hideLabel, labelProp = props.label, value = props.value, idProp = props.id, warningProp = props.warning, error = props.error, inputClassName = props.className, disabled = props.disabled, onFocusProp = props.onFocus, onBlurProp = props.onBlur, placeholder = props.placeholder, helperText = props.helperText, startAdornmentText = props.startAdornmentText, endAdornmentText = props.endAdornmentText, StartIcon = props.startIcon, EndIcon = props.endIcon, IconProps = props.IconProps, endAdornmentProp = props.endAdornment, _incorrectError = props._incorrectError, _isHovered = props._isHovered, _isFocused = props._isFocused, _disablePointerEvents = props._disablePointerEvents, other = __rest(props, ['aria-label', "required", "className", "inputRootClassName", "maxLength", "showMaxLengthThreshold", "maxLengthWarningThreshold", "size", "hideLabel", "label", "value", "id", "warning", "error", "className", "disabled", "onFocus", "onBlur", "placeholder", "helperText", "startAdornmentText", "endAdornmentText", "startIcon", "endIcon", "IconProps", "endAdornment", "_incorrectError", "_isHovered", "_isFocused", "_disablePointerEvents"]);
+    var endAdornment;
+    if (EndIcon != null) {
+        endAdornment = jsx(EndIcon, __assign({ size: 'm', color: 'subdued' }, IconProps));
+    }
+    else if (endAdornmentProp != null) {
+        endAdornment = endAdornmentProp;
+    }
+    else {
+        endAdornment = null;
+    }
+    /**
+     * Since Firefox doesn't support the :has() pseudo selector,
+     * manually track the focused state and use classes for focus, required, and disabled
+     */
+    var _f = useFocusState(onFocusProp, onBlurProp), isFocusedState = _f[0], handleFocus = _f[1], handleBlur = _f[2];
+    var isFocused = _isFocused !== null && _isFocused !== void 0 ? _isFocused : isFocusedState;
+    // For focus behavior and accessiblity, <label> needs to have a htmlFor={} provided to an id matching the input
+    var backupId = useId();
+    var id = idProp !== null && idProp !== void 0 ? idProp : backupId;
+    var characterCount = value !== undefined ? "".concat(value).length : 0;
+    var hasValue = characterCount > 0;
+    // Hide the label when requested or when the size is set to small
+    var shouldShowLabel = !hideLabel && size !== TextInputSize.SMALL;
+    var labelText = required ? "".concat(labelProp, " *") : labelProp;
+    var placeholderText = required && hideLabel ? "".concat(placeholder, " *") : placeholder;
+    var helperTextSize = size === TextInputSize.SMALL ? 'xs' : 's';
+    // Whenever a label isn't visible the placeholder should be visible in it's place (if provided)
+    var shouldShowPlaceholder = isFocused || !shouldShowLabel;
+    var shouldShowAdornments = isFocused || hasValue || !shouldShowLabel;
+    // Show the maxlength text whenever we hit a certain threshold (default 70%) + the input is focused
+    var shouldShowMaxLengthText = isFocused &&
+        maxLength &&
+        characterCount >= showMaxLengthThreshold * maxLength;
+    // Turn the maxlength text to the warning color whenever we hit a certain threshold (default 90%)
+    var maxLengthTextColor = 'default';
+    if (maxLength && characterCount > maxLength) {
+        maxLengthTextColor = 'danger';
+    }
+    else if (maxLength &&
+        characterCount >= maxLengthWarningThreshold * maxLength) {
+        maxLengthTextColor = 'warning';
+    }
+    // Styles for the root of the input
+    var inputRootStyle = (_a = {},
+        _a[styles.default] = size === TextInputSize.DEFAULT,
+        _a[styles.small] = size === TextInputSize.SMALL,
+        _a[styles.warning] = warningProp,
+        _a[styles.error] = error,
+        _a[styles.focused] = isFocused || _isFocused,
+        _a[styles.disabled] = disabled,
+        _a[styles.required] = required,
+        _a[styles.hover] = _isHovered,
+        _a[styles.incorrectError] = _incorrectError,
+        _a[styles.disablePointerEvents] = _disablePointerEvents,
+        _a);
+    // Styles for the input element itself
+    var inputElStyle = (_b = {},
+        _b[styles.default] = size === TextInputSize.DEFAULT,
+        _b[styles.small] = size === TextInputSize.SMALL,
+        _b[styles.disabled] = disabled,
+        _b[styles.focused] = isFocused,
+        _b);
+    var inputRender = (jsxs(Flex, __assign({ alignItems: 'center', justifyContent: 'space-between' }, { children: [startAdornmentText && shouldShowAdornments ? (jsx(Text, __assign({ variant: 'label', size: 'l', color: 'subdued' }, { children: startAdornmentText }))) : null, jsx("input", __assign({ onFocus: handleFocus, onBlur: handleBlur, ref: ref, className: cn(styles.input, inputClassName, inputElStyle), value: value, maxLength: maxLength, disabled: disabled, placeholder: shouldShowPlaceholder ? placeholderText : undefined, "aria-label": (ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : shouldShowLabel) ? labelText : undefined, "aria-required": required, id: id }, other)), endAdornmentText && shouldShowAdornments ? (jsx(Text, __assign({ variant: 'label', size: 'l', color: 'subdued' }, { children: endAdornmentText }))) : null] })));
+    var isLabelElevated = hasValue || isFocused;
+    return (jsxs(Flex, __assign({ className: cn(styles.root, className), direction: 'column', gap: 'xs', alignItems: 'flex-start', w: '100%' }, { children: [jsxs("label", __assign({ htmlFor: id, className: cn(styles.contentContainer, inputRootClassName, inputRootStyle) }, { children: [StartIcon ? (jsx(StartIcon, __assign({ size: 'm', color: 'subdued' }, IconProps))) : null, jsxs(Flex, __assign({ direction: 'column', gap: 'xs', justifyContent: 'center', w: '100%' }, { children: [shouldShowLabel ? (jsxs(Flex, __assign({ className: styles.labelRow, direction: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 's' }, { children: [jsx(Text, __assign({ variant: 'body', tag: 'span', size: isLabelElevated ? 's' : 'l', color: 'subdued', css: function (theme) { return ({
+                                            whiteSpace: 'nowrap',
+                                            overflow: 'hidden',
+                                            textOverflow: 'ellipsis',
+                                            zIndex: 2,
+                                            transition: "all ".concat(theme.motion.expressive),
+                                            transform: isLabelElevated
+                                                ? 'translate(0, 0)'
+                                                : 'translate(0px, 13px)'
+                                        }); } }, { children: labelText })), shouldShowMaxLengthText ? (jsxs(Text, __assign({ variant: 'body', size: 'xs', tag: 'span', color: maxLengthTextColor }, { children: [characterCount, "/", maxLength] }))) : null] }))) : null, inputRender] })), endAdornment] })), helperText ? (jsx(Text, __assign({ variant: 'body', size: helperTextSize, strength: 'default', color: error ? 'danger' : _incorrectError ? 'warning' : 'default' }, { children: helperText }))) : null] })));
+});
+
+export { TextInput };
+//# sourceMappingURL=TextInput.js.map

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

@@ -0,0 +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 size='m' color='subdued' {...IconProps} />\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            strength='default'\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/TextInput.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"root":"TextInput-module_root__YKSHY","contentContainer":"TextInput-module_contentContainer__bNAhX","hover":"TextInput-module_hover__grSfp","disabled":"TextInput-module_disabled__m5CAR","small":"TextInput-module_small__mqDO6","default":"TextInput-module_default__W50h-","focused":"TextInput-module_focused__BdLuT","warning":"TextInput-module_warning__tv-Vs","error":"TextInput-module_error__Iud3-","incorrectError":"TextInput-module_incorrectError__siog6","disablePointerEvents":"TextInput-module_disablePointerEvents__4CcVt","input":"TextInput-module_input__3FI9K"};
+
+export { styles as default };
+//# sourceMappingURL=TextInput.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextInput } from './TextInput';
+declare const meta: Meta<typeof TextInput>;
+export default meta;
+type Story = StoryObj<typeof TextInput>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const DefaultStates: Story;
+export declare const SmallStates: Story;
+export declare const Icons: Story;
+export declare const AssistiveText: Story;
+export declare const Validation: Story;
+export declare const SpecialInputs: Story;
+//# sourceMappingURL=TextInput.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/input/TextInput/TextInput.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAMtD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAGvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAUhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAA;AAEvC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAYnB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAkC3B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KA8EzB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAuBnB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAY3B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KA0BxB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KA0B3B,CAAA"}

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

@@ -0,0 +1,3 @@
+export * from './TextInput';
+export { TextInputProps } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/input/TextInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA"}

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

@@ -0,0 +1,105 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { IconComponent, IconProps } from '../../icon';
+export declare enum TextInputSize {
+    SMALL = "small",
+    DEFAULT = "default"
+}
+type InternalProps = {
+    /**
+     * @ignore
+     * This prop is for internal use only.
+     * Toggles the incorrect error state for the storybook docs
+     */
+    _incorrectError?: boolean;
+    /**
+     * @ignore
+     * This prop is for internal use only.
+     * Toggles the hover state for the storybook docs
+     */
+    _isHovered?: boolean;
+    /**
+     * @ignore
+     * This prop is for internal use only.
+     * Toggles the focus state for the storybook docs
+     */
+    _isFocused?: boolean;
+    /**
+     * @ignore
+     * This prop is for internal use only.
+     * Disabled pointer events for storybook docs
+     */
+    _disablePointerEvents?: boolean;
+};
+export type TextInputProps = Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'required'> & {
+    /**
+     * Input sizes. NOTE: small inputs will not show the label
+     * @default default
+     */
+    size?: TextInputSize;
+    /**
+     * Toggles warning state (turns border warning color). NOTE: this is not used any where at the moment
+     */
+    warning?: boolean;
+    /**
+     * Toggles error state
+     */
+    error?: boolean;
+    /**
+     * Hides the label. If the label is hidden the placeholder will show by default instead.
+     * @default false
+     */
+    hideLabel?: boolean;
+    /**
+     * Label Text. Required to provide due to accessibility. If the hideLabel is true, the label used via aria-label
+     */
+    label: string;
+    /**
+     * ClassName on the div wrapping the whole input container (doesn't include assistive text)
+     */
+    inputRootClassName?: string;
+    /**
+     * Helper text (or JSX) that shows up below the input
+     */
+    helperText?: string | ReactNode;
+    /**
+     * Floating text on the lefthand side of the input.
+     */
+    startAdornmentText?: string;
+    /**
+     * Floating text on the righthand side of the input
+     */
+    endAdornmentText?: string;
+    /**
+     * Floating icon on the lefthand side of the input. Note: will float to the left of the label & content
+     */
+    startIcon?: IconComponent;
+    /**
+     * Floating icon on the righthand side of the input
+     */
+    endIcon?: IconComponent;
+    /**
+     * Override props to supply the start or end Icon
+     */
+    IconProps?: Partial<IconProps>;
+    /**
+     * @hidden
+     * Floating component on the righthand side of the input. Meant for internal use only.
+     */
+    endAdornment?: ReactNode;
+    /**
+     * Required or not. Will add an * to the label if required
+     */
+    required?: boolean;
+    /**
+     * 0-1 number representating a percentage threshold to show the max character text. Default is 0.7 (70%)
+     * @default 0.7
+     */
+    showMaxLengthThreshold?: number;
+    /**
+     * 0-1 number representating a percentage threshold to turn the character limit text orange. Default is 0.9 (90%)
+     * @default 0.9
+     */
+    maxLengthWarningThreshold?: number;
+} & InternalProps;
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,8 @@
+var TextInputSize;
+(function (TextInputSize) {
+    TextInputSize["SMALL"] = "small";
+    TextInputSize["DEFAULT"] = "default";
+})(TextInputSize || (TextInputSize = {}));
+
+export { TextInputSize };
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +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 to provide due to accessibility. If the hideLabel is true, the label used 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;;;;"}

package/dist/components/input/TokenAmountInput/TokenAmountInput.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const TokenAmountInput: (props: Omit<import("../TextInput").TextInputProps, "value" | "onChange"> & {
+    tokenLabel?: string | undefined;
+    decimals?: number | undefined;
+    isWhole?: boolean | undefined;
+    value?: string | undefined;
+    onChange?: import("./types").TokenAmountInputChangeHandler | undefined;
+} & import("react").RefAttributes<HTMLInputElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+//# sourceMappingURL=TokenAmountInput.d.ts.map

package/dist/components/input/TokenAmountInput/TokenAmountInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenAmountInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/TokenAmountInput/TokenAmountInput.tsx"],"names":[],"mappings":";AAqBA,eAAO,MAAM,gBAAgB;;;;;;qJAmD5B,CAAA"}

package/dist/components/input/TokenAmountInput/TokenAmountInput.js

@@ -0,0 +1,45 @@
+import { __rest, __assign } from '../../../_virtual/_tslib.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef, useCallback } from 'react';
+import BN from 'bn.js';
+import { useControlled } from '../../../hooks/useControlled.js';
+import { TextInput } from '../TextInput/TextInput.js';
+
+/**
+ * Format a number to have commas
+ */
+var formatNumberCommas = function (num) {
+    var parts = num.toString().split('.');
+    return (parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
+        (parts[1] !== undefined ? '.' + parts[1] : ''));
+};
+var TokenAmountInput = forwardRef(function (props, ref) {
+    var tokenLabel = props.tokenLabel, _a = props.decimals, decimals = _a === void 0 ? 0 : _a, _b = props.isWhole, isWhole = _b === void 0 ? false : _b, valueProp = props.value, onChange = props.onChange, other = __rest(props, ["tokenLabel", "decimals", "isWhole", "value", "onChange"]);
+    var _c = useControlled({
+        controlledProp: valueProp ? formatNumberCommas(valueProp) : valueProp,
+        defaultValue: '',
+        componentName: 'TokenAmountInput'
+    }), value = _c[0], setValueState = _c[1];
+    var handleChange = useCallback(function (e) {
+        var input = e.target.value.replace(/[^0-9.]+/g, '');
+        // Regex to grab the whole and decimal parts of the number, stripping duplicate '.' characters
+        var match = input.match(/^(?<whole>\d*)(?<dot>.)?(?<decimal>\d*)/);
+        var _a = (match === null || match === void 0 ? void 0 : match.groups) || {}, whole = _a.whole, decimal = _a.decimal, dot = _a.dot;
+        // Conditionally render the decimal part, and only for the number of decimals specified
+        var stringAmount = dot && decimals && !isWhole
+            ? "".concat(whole, ".").concat(decimal.substring(0, decimals))
+            : whole;
+        // Also add the BN to the onChange event for convenience
+        var amount = new BN(whole);
+        amount = amount.mul(new BN(Math.pow(10, decimals)));
+        amount = amount.add(new BN(decimal.padEnd(decimals, '0')));
+        setValueState(formatNumberCommas(stringAmount));
+        if (onChange) {
+            onChange(stringAmount, amount);
+        }
+    }, [decimals, isWhole, setValueState, onChange]);
+    return (jsx(TextInput, __assign({ ref: ref }, other, { value: value, onChange: handleChange, endAdornmentText: tokenLabel })));
+});
+
+export { TokenAmountInput };
+//# sourceMappingURL=TokenAmountInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TokenAmountInput.js","sources":["../../../../src/components/input/TokenAmountInput/TokenAmountInput.tsx"],"sourcesContent":["import { ChangeEventHandler, Ref, forwardRef, useCallback } from 'react'\n\nimport BN from 'bn.js'\n\nimport { useControlled } from 'hooks/useControlled'\n\nimport { TextInput } from '../TextInput'\n\nimport { TokenAmountInputProps } from './types'\n\n/**\n * Format a number to have commas\n */\nconst formatNumberCommas = (num: number | string) => {\n  const parts = num.toString().split('.')\n  return (\n    parts[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',') +\n    (parts[1] !== undefined ? '.' + parts[1] : '')\n  )\n}\n\nexport const TokenAmountInput = forwardRef(\n  (props: TokenAmountInputProps, ref: Ref<HTMLInputElement>) => {\n    const {\n      tokenLabel,\n      decimals = 0,\n      isWhole = false,\n      value: valueProp,\n      onChange,\n      ...other\n    } = props\n\n    const [value, setValueState] = useControlled({\n      controlledProp: valueProp ? formatNumberCommas(valueProp) : valueProp,\n      defaultValue: '',\n      componentName: 'TokenAmountInput'\n    })\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n      (e) => {\n        const input = e.target.value.replace(/[^0-9.]+/g, '')\n        // Regex to grab the whole and decimal parts of the number, stripping duplicate '.' characters\n        const match = input.match(/^(?<whole>\\d*)(?<dot>.)?(?<decimal>\\d*)/)\n        const { whole, decimal, dot } = match?.groups || {}\n\n        // Conditionally render the decimal part, and only for the number of decimals specified\n        const stringAmount =\n          dot && decimals && !isWhole\n            ? `${whole}.${decimal.substring(0, decimals)}`\n            : whole\n\n        // Also add the BN to the onChange event for convenience\n        let amount = new BN(whole)\n        amount = amount.mul(new BN(10 ** decimals))\n        amount = amount.add(new BN(decimal.padEnd(decimals, '0')))\n        setValueState(formatNumberCommas(stringAmount))\n        if (onChange) {\n          onChange(stringAmount, amount)\n        }\n      },\n      [decimals, isWhole, setValueState, onChange]\n    )\n    return (\n      <TextInput\n        ref={ref}\n        {...other}\n        value={value}\n        onChange={handleChange}\n        endAdornmentText={tokenLabel}\n      />\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":"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"}

package/dist/components/input/TokenAmountInput/TokenAmountInput.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TokenAmountInput } from './TokenAmountInput';
+declare const meta: Meta<typeof TokenAmountInput>;
+export default meta;
+type Story = StoryObj<typeof TokenAmountInput>;
+export declare const Primary: Story;
+//# sourceMappingURL=TokenAmountInput.stories.d.ts.map

package/dist/components/input/TokenAmountInput/TokenAmountInput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenAmountInput.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/input/TokenAmountInput/TokenAmountInput.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAGrD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAUvC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAiB9C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAA"}

package/dist/components/input/TokenAmountInput/index.d.ts

@@ -0,0 +1,3 @@
+export { TokenAmountInput } from './TokenAmountInput';
+export { TokenAmountInputProps, TokenAmountInputChangeHandler } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/input/TokenAmountInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/input/TokenAmountInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,qBAAqB,EAAE,6BAA6B,EAAE,MAAM,SAAS,CAAA"}

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

@@ -0,0 +1,11 @@
+import type BN from 'bn.js';
+import { TextInputProps } from '../TextInput';
+export type TokenAmountInputChangeHandler = (value: string, valueBN: BN) => void;
+export type TokenAmountInputProps = Omit<TextInputProps, 'onChange' | 'value'> & {
+    tokenLabel?: string;
+    decimals?: number;
+    isWhole?: boolean;
+    value?: string;
+    onChange?: TokenAmountInputChangeHandler;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/input/TokenAmountInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,OAAO,CAAA;AAE3B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE7C,MAAM,MAAM,6BAA6B,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,KAAK,IAAI,CAAA;AAEhF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,cAAc,EACd,UAAU,GAAG,OAAO,CACrB,GAAG;IACF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,6BAA6B,CAAA;CACzC,CAAA"}

package/dist/components/input/index.d.ts

@@ -0,0 +1,6 @@
+export * from './SelectablePill';
+export * from './TextInput';
+export * from './useFocusState';
+export * from './PasswordInput';
+export * from './TokenAmountInput';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA"}

package/dist/components/input/useFocusState.d.ts

@@ -0,0 +1,18 @@
+import { FocusEventHandler } from 'react';
+/**
+ * Used to track focus state of an element
+ *
+ * Why: Firefox doesn't support the :has() pseudo-selector, so we can't do .root:has(input:focus)
+ * for focus styles. Instead, we have to manually track the focus state and add a class.
+ *
+ * To use:
+ * - Pass in other handlers wanted for focus and blur as appropriate
+ * - Assign handleFocus to the onFocus of the element
+ * - Assign handleBlur to the onBlur of the element
+ *
+ * @param onFocus The existing onFocus handler, if any, to wrap
+ * @param onBlur The existing onBlur handler, if any, to wrap
+ * @returns [isFocused, handleFocus, handleBlur]
+ */
+export declare const useFocusState: <T extends HTMLElement>(onFocus?: FocusEventHandler<T> | undefined, onBlur?: FocusEventHandler<T> | undefined) => readonly [boolean, FocusEventHandler<T>, FocusEventHandler<T>];
+//# sourceMappingURL=useFocusState.d.ts.map

package/dist/components/input/useFocusState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusState.d.ts","sourceRoot":"","sources":["../../../src/components/input/useFocusState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAEhE;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,kLAqBzB,CAAA"}

package/dist/components/input/useFocusState.js

@@ -0,0 +1,32 @@
+import { useState, useCallback } from 'react';
+
+/**
+ * Used to track focus state of an element
+ *
+ * Why: Firefox doesn't support the :has() pseudo-selector, so we can't do .root:has(input:focus)
+ * for focus styles. Instead, we have to manually track the focus state and add a class.
+ *
+ * To use:
+ * - Pass in other handlers wanted for focus and blur as appropriate
+ * - Assign handleFocus to the onFocus of the element
+ * - Assign handleBlur to the onBlur of the element
+ *
+ * @param onFocus The existing onFocus handler, if any, to wrap
+ * @param onBlur The existing onBlur handler, if any, to wrap
+ * @returns [isFocused, handleFocus, handleBlur]
+ */
+var useFocusState = function (onFocus, onBlur) {
+    var _a = useState(false), isFocused = _a[0], setIsFocused = _a[1];
+    var handleFocus = useCallback(function (e) {
+        setIsFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    }, [onFocus, setIsFocused]);
+    var handleBlur = useCallback(function (e) {
+        setIsFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    }, [onBlur, setIsFocused]);
+    return [isFocused, handleFocus, handleBlur];
+};
+
+export { useFocusState };
+//# sourceMappingURL=useFocusState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusState.js","sources":["../../../src/components/input/useFocusState.ts"],"sourcesContent":["import { useState, useCallback, FocusEventHandler } from 'react'\n\n/**\n * Used to track focus state of an element\n *\n * Why: Firefox doesn't support the :has() pseudo-selector, so we can't do .root:has(input:focus)\n * for focus styles. Instead, we have to manually track the focus state and add a class.\n *\n * To use:\n * - Pass in other handlers wanted for focus and blur as appropriate\n * - Assign handleFocus to the onFocus of the element\n * - Assign handleBlur to the onBlur of the element\n *\n * @param onFocus The existing onFocus handler, if any, to wrap\n * @param onBlur The existing onBlur handler, if any, to wrap\n * @returns [isFocused, handleFocus, handleBlur]\n */\nexport const useFocusState = <T extends HTMLElement>(\n  onFocus?: FocusEventHandler<T>,\n  onBlur?: FocusEventHandler<T>\n) => {\n  const [isFocused, setIsFocused] = useState(false)\n  const handleFocus = useCallback<FocusEventHandler<T>>(\n    (e) => {\n      setIsFocused(true)\n      onFocus?.(e)\n    },\n    [onFocus, setIsFocused]\n  )\n  const handleBlur = useCallback<FocusEventHandler<T>>(\n    (e) => {\n      setIsFocused(false)\n      onBlur?.(e)\n    },\n    [onBlur, setIsFocused]\n  )\n\n  return [isFocused, handleFocus, handleBlur] as const\n}\n"],"names":[],"mappings":";;AAEA;;;;;;;;;;;;;;AAcG;AACU,IAAA,aAAa,GAAG,UAC3B,OAA8B,EAC9B,MAA6B,EAAA;IAEvB,IAAA,EAAA,GAA4B,QAAQ,CAAC,KAAK,CAAC,EAA1C,SAAS,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,YAAY,GAAA,EAAA,CAAA,CAAA,CAAmB,CAAA;AACjD,IAAA,IAAM,WAAW,GAAG,WAAW,CAC7B,UAAC,CAAC,EAAA;QACA,YAAY,CAAC,IAAI,CAAC,CAAA;AAClB,QAAA,OAAO,aAAP,OAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAP,OAAO,CAAG,CAAC,CAAC,CAAA;AACd,KAAC,EACD,CAAC,OAAO,EAAE,YAAY,CAAC,CACxB,CAAA;AACD,IAAA,IAAM,UAAU,GAAG,WAAW,CAC5B,UAAC,CAAC,EAAA;QACA,YAAY,CAAC,KAAK,CAAC,CAAA;AACnB,QAAA,MAAM,aAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAG,CAAC,CAAC,CAAA;AACb,KAAC,EACD,CAAC,MAAM,EAAE,YAAY,CAAC,CACvB,CAAA;AAED,IAAA,OAAO,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAU,CAAA;AACtD;;;;"}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/** Base layout component used as a building block for creating pages and other components. */
+export declare const Box: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("./types").BaseBoxProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=Box.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Box/Box.tsx"],"names":[],"mappings":";AAMA,8FAA8F;AAC9F,eAAO,MAAM,GAAG;;;2PA+Ef,CAAA"}

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

@@ -0,0 +1,47 @@
+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;
+    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;
+    var padB = (_c = pb !== null && pb !== void 0 ? pb : pv) !== null && _c !== void 0 ? _c : p;
+    var padL = (_d = pl !== null && pl !== void 0 ? pl : ph) !== null && _d !== void 0 ? _d : p;
+    var padR = (_e = pr !== null && pr !== void 0 ? pr : ph) !== null && _e !== void 0 ? _e : p;
+    var marginT = (_f = mt !== null && mt !== void 0 ? mt : mv) !== null && _f !== void 0 ? _f : m;
+    var marginB = (_g = mb !== null && mb !== void 0 ? mb : mv) !== null && _g !== void 0 ? _g : m;
+    var marginL = (_h = ml !== null && ml !== void 0 ? ml : mh) !== null && _h !== void 0 ? _h : m;
+    var marginR = (_j = mr !== null && mr !== void 0 ? mr : mh) !== null && _j !== void 0 ? _j : m;
+    return {
+        position: 'relative',
+        boxSizing: 'border-box',
+        height: (_k = spacing[h]) !== null && _k !== void 0 ? _k : h,
+        width: (_l = spacing[w]) !== null && _l !== void 0 ? _l : w,
+        boxShadow: shadow && shadows[shadow],
+        paddingTop: padT && spacing[padT],
+        paddingLeft: padL && spacing[padL],
+        paddingRight: padR && spacing[padR],
+        paddingBottom: padB && spacing[padB],
+        marginTop: marginT && spacing[marginT],
+        marginLeft: marginL && spacing[marginL],
+        marginRight: marginR && spacing[marginR],
+        marginBottom: marginB && spacing[marginB],
+        backgroundColor: backgroundColor && theme.color.background[backgroundColor],
+        border: border && "1px solid ".concat(color.border[border]),
+        borderTop: borderTop && "1px solid ".concat(color.border[borderTop]),
+        borderRight: borderRight && "1px solid ".concat(color.border[borderRight]),
+        borderBottom: borderBottom && "1px solid ".concat(color.border[borderBottom]),
+        borderLeft: borderLeft && "1px solid ".concat(color.border[borderLeft]),
+        borderRadius: borderRadius && cornerRadius[borderRadius],
+        borderTopRightRadius: borderTopRightRadius && cornerRadius[borderTopRightRadius],
+        borderBottomRightRadius: borderBottomRightRadius && cornerRadius[borderBottomRightRadius],
+        borderBottomLeftRadius: borderBottomLeftRadius && cornerRadius[borderBottomLeftRadius],
+        borderTopLeftRadius: borderTopLeftRadius && cornerRadius[borderTopLeftRadius],
+        flex: flex,
+        alignSelf: alignSelf
+    };
+});
+
+export { Box };
+//# sourceMappingURL=Box.js.map

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

@@ -0,0 +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],\n      paddingLeft: padL && spacing[padL],\n      paddingRight: padR && spacing[padR],\n      paddingBottom: padB && spacing[padB],\n      marginTop: marginT && spacing[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":";;AAMA;IACa,GAAG,GAAG,MAAM,CAAC,GAAG,CAC3B,UAAC,EAgCA,EAAA;;AA/BC,IAAA,IAAA,CAAC,OAAA,EACD,CAAC,OAAA,EACD,CAAC,OAAA,EACD,EAAE,QAAA,EACF,EAAE,QAAA,EACF,EAAE,QAAA,EACF,EAAE,QAAA,EACF,EAAE,QAAA,EACF,EAAE,QAAA,EACF,CAAC,OAAA,EACD,EAAE,QAAA,EACF,EAAE,QAAA,EACF,EAAE,QAAA,EACF,EAAE,QAAA,EACF,EAAE,QAAA,EACF,EAAE,GAAA,EAAA,CAAA,EAAA,EACF,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,oBAAoB,GAAA,EAAA,CAAA,oBAAA,EACpB,uBAAuB,GAAA,EAAA,CAAA,uBAAA,EACvB,sBAAsB,GAAA,EAAA,CAAA,sBAAA,EACtB,mBAAmB,GAAA,EAAA,CAAA,mBAAA,EACnB,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,KAAK,GAAA,EAAA,CAAA,KAAA,CAAA;AAEG,IAAA,IAAA,OAAO,GAAmC,KAAK,QAAxC,EAAE,OAAO,GAA0B,KAAK,CAAA,OAA/B,EAAE,KAAK,GAAmB,KAAK,CAAxB,KAAA,EAAE,YAAY,GAAK,KAAK,aAAV,CAAU;AACvD,IAAA,IAAM,IAAI,GAAG,CAAA,EAAA,GAAA,EAAE,KAAF,IAAA,IAAA,EAAE,KAAF,KAAA,CAAA,GAAA,EAAE,GAAI,EAAE,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAC,CAAA;AAC1B,IAAA,IAAM,IAAI,GAAG,CAAA,EAAA,GAAA,EAAE,KAAF,IAAA,IAAA,EAAE,KAAF,KAAA,CAAA,GAAA,EAAE,GAAI,EAAE,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAC,CAAA;AAC1B,IAAA,IAAM,IAAI,GAAG,CAAA,EAAA,GAAA,EAAE,KAAF,IAAA,IAAA,EAAE,KAAF,KAAA,CAAA,GAAA,EAAE,GAAI,EAAE,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAC,CAAA;AAC1B,IAAA,IAAM,IAAI,GAAG,CAAA,EAAA,GAAA,EAAE,KAAF,IAAA,IAAA,EAAE,KAAF,KAAA,CAAA,GAAA,EAAE,GAAI,EAAE,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAC,CAAA;AAE1B,IAAA,IAAM,OAAO,GAAG,CAAA,EAAA,GAAA,EAAE,KAAF,IAAA,IAAA,EAAE,KAAF,KAAA,CAAA,GAAA,EAAE,GAAI,EAAE,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAC,CAAA;AAC7B,IAAA,IAAM,OAAO,GAAG,CAAA,EAAA,GAAA,EAAE,KAAF,IAAA,IAAA,EAAE,KAAF,KAAA,CAAA,GAAA,EAAE,GAAI,EAAE,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAC,CAAA;AAC7B,IAAA,IAAM,OAAO,GAAG,CAAA,EAAA,GAAA,EAAE,KAAF,IAAA,IAAA,EAAE,KAAF,KAAA,CAAA,GAAA,EAAE,GAAI,EAAE,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAC,CAAA;AAC7B,IAAA,IAAM,OAAO,GAAG,CAAA,EAAA,GAAA,EAAE,KAAF,IAAA,IAAA,EAAE,KAAF,KAAA,CAAA,GAAA,EAAE,GAAI,EAAE,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAC,CAAA;IAE7B,OAAO;AACL,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,SAAS,EAAE,YAAY;AACvB,QAAA,MAAM,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAmB,CAAC,mCAAI,CAAC;AACzC,QAAA,KAAK,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAmB,CAAC,mCAAI,CAAC;AACxC,QAAA,SAAS,EAAE,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC;AACpC,QAAA,UAAU,EAAE,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;AACjC,QAAA,WAAW,EAAE,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;AAClC,QAAA,YAAY,EAAE,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;AACnC,QAAA,aAAa,EAAE,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;AACpC,QAAA,SAAS,EAAE,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC;AACtC,QAAA,UAAU,EAAE,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC;AACvC,QAAA,WAAW,EAAE,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC;AACxC,QAAA,YAAY,EAAE,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC;QACzC,eAAe,EACb,eAAe,IAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC;QAC5D,MAAM,EAAE,MAAM,IAAI,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAE;QACrD,SAAS,EAAE,SAAS,IAAI,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAE;QAC9D,WAAW,EAAE,WAAW,IAAI,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAE;QACpE,YAAY,EAAE,YAAY,IAAI,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAE;QACvE,UAAU,EAAE,UAAU,IAAI,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAE;AACjE,QAAA,YAAY,EAAE,YAAY,IAAI,YAAY,CAAC,YAAY,CAAC;AACxD,QAAA,oBAAoB,EAClB,oBAAoB,IAAI,YAAY,CAAC,oBAAoB,CAAC;AAC5D,QAAA,uBAAuB,EACrB,uBAAuB,IAAI,YAAY,CAAC,uBAAuB,CAAC;AAClE,QAAA,sBAAsB,EACpB,sBAAsB,IAAI,YAAY,CAAC,sBAAsB,CAAC;AAChE,QAAA,mBAAmB,EACjB,mBAAmB,IAAI,YAAY,CAAC,mBAAmB,CAAC;AAC1D,QAAA,IAAI,EAAA,IAAA;AACJ,QAAA,SAAS,EAAA,SAAA;KACV,CAAA;AACH,CAAC;;;;"}

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Box } from './Box';
+declare const meta: Meta<typeof Box>;
+export default meta;
+type Story = StoryObj<typeof Box>;
+export declare const Default: Story;
+export declare const BoxWithBorder: Story;
+//# sourceMappingURL=Box.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Box/Box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAMtD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAW3B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAsD1B,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAA;AAEjC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAA;AAEhC,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAA"}

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

@@ -0,0 +1,3 @@
+export { Box } from './Box';
+export type { BaseBoxProps, BoxProps } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA"}