@audius/harmony 0.5.0 → 0.5.2

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

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { BaseButtonProps } from "../button/BaseButton/types";
+import { IconComponent } from "../icon";
+export type MenuItemProps<Value extends string> = Omit<BaseButtonProps, 'variant' | 'onChange'> & {
+    variant?: 'option' | 'button';
+    label?: ReactNode;
+    icon?: IconComponent;
+    leadingElement?: ReactNode;
+    helperText?: ReactNode;
+    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<unknown, 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":"AAAA,OAAO,EAGL,SAAS,EAGV,MAAM,OAAO,CAAA;AAKd,OAAO,EAAE,eAAe,EAAE,mCAAmD;AAC7E,OAAO,EAAE,aAAa,EAAE,gBAAgC;AAIxD,MAAM,MAAM,aAAa,CAAC,KAAK,SAAS,MAAM,IAAI,IAAI,CACpD,eAAe,EACf,SAAS,GAAG,UAAU,CACvB,GAAG;IACF,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,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,6MA8GnB,CAAA"}

package/dist/components/internal/MenuItem.js

@@ -0,0 +1,58 @@
+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, styles = props.styles, other = __rest(props, ["label", "isActive", "onClick", "icon", "leadingElement", "variant", "helperText", "styles"]);
+    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,
+        '& a, & span': { 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(__assign({}, optionCss), (isActive ? activeOptionCss : {})), styles === null || styles === void 0 ? void 0 : styles.button),
+            icon: __assign(__assign({}, optionIconCss), styles === null || styles === void 0 ? void 0 : styles.icon)
+        }, onClick: handleClick, role: variant === 'option' ? 'option' : undefined }, other, { onChange: undefined }, { children: [leadingElement !== null && leadingElement !== void 0 ? leadingElement : null, typeof label === 'string' ? (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 }))) : (label), typeof helperText === 'string' ? (jsx(Text, __assign({ variant: 'body', size: variant === 'option' ? 'l' : 'm', strength: variant === 'button' ? 'strong' : 'default', color: isActive ? 'white' : 'subdued' }, { children: helperText }))) : ((helperText !== null && helperText !== void 0 ? 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 {\n  forwardRef,\n  MouseEventHandler,\n  ReactNode,\n  Ref,\n  useCallback\n} from 'react'\n\nimport { CSSObject } from '@emotion/react'\n\nimport { BaseButton } from '~harmony/components/button/BaseButton/BaseButton'\nimport { BaseButtonProps } from '~harmony/components/button/BaseButton/types'\nimport { IconComponent } from '~harmony/components/icon'\nimport { Text } from '~harmony/components/text/Text'\nimport { useTheme } from '~harmony/foundations'\n\nexport type MenuItemProps<Value extends string> = Omit<\n  BaseButtonProps,\n  'variant' | 'onChange'\n> & {\n  variant?: 'option' | 'button'\n  label?: ReactNode\n  icon?: IconComponent\n  leadingElement?: ReactNode\n  helperText?: ReactNode\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    styles,\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    '& a, & span': { 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          ...styles?.button\n        },\n        icon: {\n          ...optionIconCss,\n          ...styles?.icon\n        }\n      }}\n      onClick={handleClick}\n      role={variant === 'option' ? 'option' : undefined}\n      {...other}\n      onChange={undefined}\n    >\n      {leadingElement ?? null}\n      {typeof label === 'string' ? (\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      ) : (\n        label\n      )}\n      {typeof helperText === 'string' ? (\n        <Text\n          variant='body'\n          size={variant === 'option' ? 'l' : 'm'}\n          strength={variant === 'button' ? 'strong' : 'default'}\n          color={isActive ? 'white' : 'subdued'}\n        >\n          {helperText}\n        </Text>\n      ) : (\n        (helperText ?? null)\n      )}\n    </BaseButton>\n  )\n})\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,31 @@
+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 | null>;
+    initialActiveIndex?: number;
+};
+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,gBAAgC;AAExD,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,GAAG,IAAI,CAAC,CAAA;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,gBAAgB,iHA6F5B,CAAA"}

package/dist/components/internal/OptionKeyHandler.js

@@ -0,0 +1,77 @@
+import { jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { useState, useEffect } from 'react';
+
+var OptionKeyHandler = function (props) {
+    var _a;
+    var disabled = props.disabled, options = props.options, onChange = props.onChange, optionRefs = props.optionRefs, scrollRef = props.scrollRef, children = props.children, _b = props.initialActiveIndex, initialActiveIndex = _b === void 0 ? null : _b;
+    var _c = useState(initialActiveIndex), activeIndex = _c[0], setActiveIndex = _c[1];
+    var activeValue = activeIndex !== null ? (_a = options[activeIndex]) === null || _a === void 0 ? void 0 : _a.value : null;
+    useEffect(function () {
+        var adjustScrollPosition = function (newIndex) {
+            var _a;
+            if (newIndex !== null) {
+                if (optionRefs.current) {
+                    optionRefs.current[newIndex].scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            }
+            else {
+                (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: 0, behavior: 'smooth' });
+            }
+        };
+        var handleKeyDown = function (event) {
+            if (disabled) {
+                return;
+            }
+            switch (event.key) {
+                case 'ArrowUp':
+                    event.stopPropagation();
+                    event.preventDefault();
+                    setActiveIndex(function (prevIndex) {
+                        var getNewIndex = function () {
+                            if (prevIndex === null) {
+                                return options.length - 1;
+                            }
+                            return prevIndex > 0 ? prevIndex - 1 : null;
+                        };
+                        var newIndex = getNewIndex();
+                        adjustScrollPosition(newIndex);
+                        return newIndex;
+                    });
+                    break;
+                case 'ArrowDown':
+                    event.stopPropagation();
+                    event.preventDefault();
+                    setActiveIndex(function (prevIndex) {
+                        var getNewIndex = function () {
+                            if (prevIndex === null) {
+                                return 0;
+                            }
+                            return prevIndex < options.length - 1 ? prevIndex + 1 : null;
+                        };
+                        var newIndex = getNewIndex();
+                        adjustScrollPosition(newIndex);
+                        return newIndex;
+                    });
+                    break;
+                case 'Enter':
+                    event.stopPropagation();
+                    event.preventDefault();
+                    if (activeIndex !== null && options[activeIndex]) {
+                        onChange(options[activeIndex].value);
+                    }
+                    break;
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return function () {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [disabled, options, activeIndex, scrollRef, optionRefs, onChange]);
+    return jsx(Fragment, { children: children(activeValue) });
+};
+
+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 '~harmony/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 | null>\n  initialActiveIndex?: number\n}\n\nexport const OptionKeyHandler = <Value extends string>(\n  props: OptionKeyHandlerProps<Value>\n) => {\n  const {\n    disabled,\n    options,\n    onChange,\n    optionRefs,\n    scrollRef,\n    children,\n    initialActiveIndex = null\n  } = props\n  const [activeIndex, setActiveIndex] = useState<number | null>(\n    initialActiveIndex\n  )\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":"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"}

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, keyof import("react").JSX.IntrinsicElements> | 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;;;2PAsFf,CAAA"}

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

@@ -0,0 +1,53 @@
+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, _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;
+    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: (_m = (padT && spacing[padT])) !== null && _m !== void 0 ? _m : padT,
+        paddingLeft: (_o = (padL && spacing[padL])) !== null && _o !== void 0 ? _o : padL,
+        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: (_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 &&
+            (backgroundColor === 'none' || backgroundColor === 'gradient'
+                ? undefined
+                : theme.color.background[backgroundColor]),
+        background: backgroundColor === 'gradient'
+            ? theme.color.background.gradient
+            : undefined,
+        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 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 &&\n        (backgroundColor === 'none' || backgroundColor === 'gradient'\n          ? undefined\n          : theme.color.background[backgroundColor]),\n      background:\n        backgroundColor === 'gradient'\n          ? theme.color.background.gradient\n          : undefined,\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/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"}

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

@@ -0,0 +1,67 @@
+import type { CSSProperties, ComponentPropsWithoutRef } from 'react';
+import type { BackgroundColors, BorderColors } from '../../../foundations/color';
+import type { CornerRadiusOptions } from '../../../foundations/corner-radius';
+import type { ShadowOptions } from '../../../foundations/shadows';
+import type { SpacingOptions } from '../../../foundations/spacing';
+export type BaseBoxProps = {
+    /** Height */
+    h?: SpacingOptions | CSSProperties['height'];
+    /** Width */
+    w?: SpacingOptions | CSSProperties['width'];
+    /** Padding */
+    p?: SpacingOptions | CSSProperties['padding'];
+    /** Padding Horizontal */
+    ph?: SpacingOptions | CSSProperties['paddingInline'];
+    /** Padding Vertical */
+    pv?: SpacingOptions | CSSProperties['paddingBlock'];
+    /** Padding Top */
+    pt?: SpacingOptions | CSSProperties['paddingTop'];
+    /** Padding Left */
+    pl?: SpacingOptions | CSSProperties['paddingLeft'];
+    /** Padding Right */
+    pr?: SpacingOptions | CSSProperties['paddingRight'];
+    /** Padding Bottom */
+    pb?: SpacingOptions | CSSProperties['paddingBottom'];
+    /** Margin */
+    m?: SpacingOptions | CSSProperties['margin'];
+    /** Margin Horizontal */
+    mh?: SpacingOptions | CSSProperties['marginInline'];
+    /** Margin Vertical */
+    mv?: SpacingOptions | CSSProperties['marginBlock'];
+    /** Margin Top */
+    mt?: SpacingOptions | CSSProperties['marginTop'];
+    /** Margin Left */
+    ml?: SpacingOptions | CSSProperties['marginLeft'];
+    /** Margin Right */
+    mr?: SpacingOptions | CSSProperties['marginRight'];
+    /** Margin Bottom */
+    mb?: SpacingOptions | CSSProperties['marginBottom'];
+    /** Background Color */
+    backgroundColor?: BackgroundColors | 'none';
+    /** Border */
+    border?: BorderColors;
+    /** Border Top */
+    borderTop?: BorderColors;
+    /** Border Right */
+    borderRight?: BorderColors;
+    /** Border Bottom */
+    borderBottom?: BorderColors;
+    /** Border Left */
+    borderLeft?: BorderColors;
+    /** Border Radius */
+    borderRadius?: CornerRadiusOptions;
+    /** Border Top Right Radius */
+    borderTopRightRadius?: CornerRadiusOptions;
+    /** Border Bottom Right Radius */
+    borderBottomRightRadius?: CornerRadiusOptions;
+    /** Border Bottom Left Radius */
+    borderBottomLeftRadius?: CornerRadiusOptions;
+    /** Border Top Left Radius */
+    borderTopLeftRadius?: CornerRadiusOptions;
+    /** Elevation Shadow */
+    shadow?: ShadowOptions;
+    flex?: CSSProperties['flex'];
+    alignSelf?: CSSProperties['alignSelf'];
+};
+export type BoxProps = BaseBoxProps & ComponentPropsWithoutRef<'div'>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Box/types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+import { DividerProps } from './types';
+/**
+ * A separator between two elements, usually consisting of a horizontal or vertical line.
+ */
+export declare const Divider: (props: DividerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Divider/Divider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC;;GAEG;AACH,eAAO,MAAM,OAAO,UAAW,YAAY,qDAgD1C,CAAA"}

package/dist/components/layout/Divider/Divider.js

@@ -0,0 +1,41 @@
+import { __assign } from '../../../_virtual/_tslib.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useTheme } from '@emotion/react';
+
+/**
+ * A separator between two elements, usually consisting of a horizontal or vertical line.
+ */
+var Divider = function (props) {
+    var _a = props.orientation, orientation = _a === void 0 ? 'horizontal' : _a, children = props.children, _b = props.color, color = _b === void 0 ? 'strong' : _b, className = props.className;
+    var theme = useTheme();
+    var border = "1px solid ".concat(theme.color.border[color]);
+    var css = __assign(__assign(__assign({ border: 'none', margin: 0 }, (children &&
+        orientation === 'horizontal' && {
+        display: 'flex',
+        gap: theme.spacing.s,
+        whiteSpace: 'nowrap',
+        textAlign: 'center',
+        border: 0,
+        '&::before, &::after': {
+            content: '""',
+            alignSelf: 'center',
+            width: '100%',
+            borderTop: border
+        }
+    })), (!children &&
+        orientation === 'vertical' && {
+        borderRight: border,
+        alignSelf: 'stretch',
+        height: 'auto'
+    })), (!children &&
+        orientation === 'horizontal' && {
+        borderBottom: border,
+        flex: 1
+    }));
+    var Root = children ? 'div' : 'hr';
+    var role = children ? 'separator' : undefined;
+    return (jsx(Root, __assign({ role: role, css: css, className: className }, { children: children })));
+};
+
+export { Divider };
+//# sourceMappingURL=Divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sources":["../../../../src/components/layout/Divider/Divider.tsx"],"sourcesContent":["import { CSSObject, useTheme } from '@emotion/react'\n\nimport { DividerProps } from './types'\n\n/**\n * A separator between two elements, usually consisting of a horizontal or vertical line.\n */\nexport const Divider = (props: DividerProps) => {\n  const {\n    orientation = 'horizontal',\n    children,\n    color = 'strong',\n    className\n  } = props\n  const theme = useTheme()\n  const border = `1px solid ${theme.color.border[color]}`\n\n  const css: CSSObject = {\n    border: 'none',\n    margin: 0,\n    ...(children &&\n      orientation === 'horizontal' && {\n        display: 'flex',\n        gap: theme.spacing.s,\n        whiteSpace: 'nowrap',\n        textAlign: 'center',\n        border: 0,\n        '&::before, &::after': {\n          content: '\"\"',\n          alignSelf: 'center',\n          width: '100%',\n          borderTop: border\n        }\n      }),\n    ...(!children &&\n      orientation === 'vertical' && {\n        borderRight: border,\n        alignSelf: 'stretch',\n        height: 'auto'\n      }),\n    ...(!children &&\n      orientation === 'horizontal' && {\n        borderBottom: border,\n        flex: 1\n      })\n  }\n\n  const Root = children ? 'div' : 'hr'\n  const role = children ? 'separator' : undefined\n\n  return (\n    <Root role={role} css={css} className={className}>\n      {children}\n    </Root>\n  )\n}\n"],"names":["_jsx"],"mappings":";;;;AAIA;;AAEG;AACI,IAAM,OAAO,GAAG,UAAC,KAAmB,EAAA;IAEvC,IAAA,EAAA,GAIE,KAAK,CAAA,WAJmB,EAA1B,WAAW,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,YAAY,GAAA,EAAA,EAC1B,QAAQ,GAGN,KAAK,CAAA,QAHC,EACR,EAAA,GAEE,KAAK,CAAA,KAFS,EAAhB,KAAK,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,QAAQ,GAAA,EAAA,EAChB,SAAS,GACP,KAAK,CAAA,SADE,CACF;AACT,IAAA,IAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;AACxB,IAAA,IAAM,MAAM,GAAG,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAE,CAAA;IAEvD,IAAM,GAAG,GACP,QAAA,CAAA,QAAA,CAAA,QAAA,CAAA,EAAA,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,CAAC,EACN,GAAC,QAAQ;QACV,WAAW,KAAK,YAAY,IAAI;AAC9B,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;AACpB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,SAAS,EAAE,QAAQ;AACnB,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,qBAAqB,EAAE;AACrB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,SAAS,EAAE,QAAQ;AACnB,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,SAAS,EAAE,MAAM;AAClB,SAAA;KACF,EAAC,GACA,CAAC,QAAQ;QACX,WAAW,KAAK,UAAU,IAAI;AAC5B,QAAA,WAAW,EAAE,MAAM;AACnB,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,MAAM,EAAE,MAAM;KACf,EAAC,GACA,CAAC,QAAQ;QACX,WAAW,KAAK,YAAY,IAAI;AAC9B,QAAA,YAAY,EAAE,MAAM;AACpB,QAAA,IAAI,EAAE,CAAC;AACR,KAAA,EACJ,CAAA;IAED,IAAM,IAAI,GAAG,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAA;IACpC,IAAM,IAAI,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAA;AAE/C,IAAA,QACEA,GAAC,CAAA,IAAI,aAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,gBAC7C,QAAQ,EAAA,CAAA,CACJ,EACR;AACH;;;;"}

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

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Divider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import { BorderColors } from '../../../foundations/color';
+export type DividerProps = {
+    orientation?: 'horizontal' | 'vertical';
+    children?: ReactNode;
+    className?: string;
+    color?: BorderColors;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Divider/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAEzD,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,YAAY,CAAA;CACrB,CAAA"}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/** Layout component used to group child elements in one-deminsional arrangements. */
+export declare const Flex: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("../Box").BaseBoxProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & import("./types").BaseFlexProps, {}, {}>;
+//# sourceMappingURL=Flex.d.ts.map

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

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

@@ -0,0 +1,25 @@
+import isPropValid from '@emotion/is-prop-valid';
+import styled from '@emotion/styled';
+import { Box } from '../Box/Box.js';
+
+var invalidProps = ['alignItems', 'direction', 'wrap'];
+/** Layout component used to group child elements in one-deminsional arrangements. */
+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, row = props.row, column = props.column;
+    var spacing = theme.spacing;
+    return {
+        display: inline ? 'inline-flex' : 'flex',
+        alignItems: alignItems,
+        justifyContent: justifyContent,
+        flexDirection: direction !== null && direction !== void 0 ? direction : (row ? 'row' : column ? 'column' : undefined),
+        flexWrap: wrap,
+        gap: gap && spacing[gap],
+        rowGap: rowGap && spacing[rowGap],
+        columnGap: columnGap && spacing[columnGap]
+    };
+});
+
+export { Flex };
+//# sourceMappingURL=Flex.js.map

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

@@ -0,0 +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    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/index.d.ts

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

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

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

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

@@ -0,0 +1,17 @@
+import type { CSSProperties } from 'react';
+import type { SpacingOptions } from '../../../foundations/spacing';
+import type { BoxProps } from '../Box';
+export type BaseFlexProps = {
+    alignItems?: CSSProperties['alignItems'];
+    direction?: CSSProperties['flexDirection'];
+    gap?: SpacingOptions;
+    rowGap?: SpacingOptions;
+    columnGap?: SpacingOptions;
+    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

@@ -0,0 +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;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/layout/Paper/Paper.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 Paper: (props: import("./types").BasePaperProps & import("../Flex").BaseFlexProps & import("..").BaseBoxProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+//# sourceMappingURL=Paper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Paper.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Paper/Paper.tsx"],"names":[],"mappings":";AAQA;;;KAGK;AACL,eAAO,MAAM,KAAK,+WA0ChB,CAAA"}