@audius/harmony 0.0.25

package/dist/components/button/PlainButton/PlainButton.js

@@ -0,0 +1,55 @@
+import { __rest, __assign } from '../../../_virtual/_tslib.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useTheme } from '@emotion/react';
+import { BaseButton } from '../BaseButton/BaseButton.js';
+
+/**
+ * A plain Button component (no border/background). Includes a few variants and options to
+ * include and position icons.
+ */
+var PlainButton = forwardRef(function PlainButton(props, ref) {
+    var _a = props.variant, variant = _a === void 0 ? 'default' : _a, _b = props.size, size = _b === void 0 ? 'default' : _b, disabled = props.disabled, baseProps = __rest(props, ["variant", "size", "disabled"]);
+    var isDisabled = disabled || baseProps.isLoading;
+    var _c = useTheme(), color = _c.color, spacing = _c.spacing, typography = _c.typography;
+    // Size Styles
+    var defaultStyles = {
+        gap: spacing.xs,
+        height: spacing.unit4,
+        fontSize: typography.size.s,
+        lineHeight: typography.lineHeight.s
+    };
+    var defaultIconStyles = {
+        width: spacing.unit4,
+        height: spacing.unit4
+    };
+    var largeStyles = {
+        gap: spacing.s,
+        height: spacing.unit5,
+        fontSize: typography.size.l,
+        lineHeight: typography.lineHeight.m
+    };
+    var largeIconStyles = {
+        width: spacing.unit5,
+        height: spacing.unit5
+    };
+    var buttonCss = __assign(__assign(__assign({ '--text-color': variant === 'subdued' && !isDisabled
+            ? color.text.subdued
+            : variant === 'inverted'
+                ? color.static.white
+                : color.text.default, background: 'transparent', border: 'none', color: 'var(--text-color)', '& svg': {
+            fill: 'var(--text-color)'
+        }, fontWeight: typography.weight.bold }, (size === 'large' ? largeStyles : defaultStyles)), { '&:hover': __assign({ '--text-color': variant === 'inverted'
+                ? color.static.white
+                : color.secondary.secondary }, (variant === 'inverted' && { opacity: 0.8 })), '&:active': __assign({ '--text-color': variant === 'inverted' ? color.static.white : color.secondary.s500 }, (variant === 'inverted' && { opacity: 0.5 })) }), (isDisabled && {
+        opacity: 0.2
+    }));
+    var iconCss = size === 'large' ? largeIconStyles : defaultIconStyles;
+    return (jsx(BaseButton, __assign({ ref: ref, disabled: isDisabled, styles: {
+            button: buttonCss,
+            icon: iconCss
+        } }, baseProps)));
+});
+
+export { PlainButton };
+//# sourceMappingURL=PlainButton.js.map

package/dist/components/button/PlainButton/PlainButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlainButton.js","sources":["../../../../src/components/button/PlainButton/PlainButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\n\nimport { BaseButton } from '../BaseButton/BaseButton'\n\nimport { PlainButtonProps } from './types'\n\n/**\n * A plain Button component (no border/background). Includes a few variants and options to\n * include and position icons.\n */\nexport const PlainButton = forwardRef<HTMLButtonElement, PlainButtonProps>(\n  function PlainButton(props, ref) {\n    const {\n      variant = 'default',\n      size = 'default',\n      disabled,\n      ...baseProps\n    } = props\n    const isDisabled = disabled || baseProps.isLoading\n    const { color, spacing, typography } = useTheme()\n\n    // Size Styles\n    const defaultStyles: CSSObject = {\n      gap: spacing.xs,\n      height: spacing.unit4,\n      fontSize: typography.size.s,\n      lineHeight: typography.lineHeight.s\n    }\n    const defaultIconStyles: CSSObject = {\n      width: spacing.unit4,\n      height: spacing.unit4\n    }\n\n    const largeStyles: CSSObject = {\n      gap: spacing.s,\n      height: spacing.unit5,\n      fontSize: typography.size.l,\n      lineHeight: typography.lineHeight.m\n    }\n    const largeIconStyles: CSSObject = {\n      width: spacing.unit5,\n      height: spacing.unit5\n    }\n\n    const buttonCss: CSSObject = {\n      '--text-color':\n        variant === 'subdued' && !isDisabled\n          ? color.text.subdued\n          : variant === 'inverted'\n          ? color.static.white\n          : color.text.default,\n      background: 'transparent',\n      border: 'none',\n      color: 'var(--text-color)',\n      '& svg': {\n        fill: 'var(--text-color)'\n      },\n      fontWeight: typography.weight.bold,\n\n      ...(size === 'large' ? largeStyles : defaultStyles),\n\n      '&:hover': {\n        '--text-color':\n          variant === 'inverted'\n            ? color.static.white\n            : color.secondary.secondary,\n        ...(variant === 'inverted' && { opacity: 0.8 })\n      },\n\n      '&:active': {\n        '--text-color':\n          variant === 'inverted' ? color.static.white : color.secondary.s500,\n        ...(variant === 'inverted' && { opacity: 0.5 })\n      },\n\n      ...(isDisabled && {\n        opacity: 0.2\n      })\n    }\n\n    const iconCss = size === 'large' ? largeIconStyles : defaultIconStyles\n\n    return (\n      <BaseButton\n        ref={ref}\n        disabled={isDisabled}\n        styles={{\n          button: buttonCss,\n          icon: iconCss\n        }}\n        {...baseProps}\n      />\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":"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"}

package/dist/components/button/PlainButton/PlainButton.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"button":"PlainButton-module_button__BxmJD","buttonDefault":"PlainButton-module_buttonDefault__BMGbU","iconDefault":"PlainButton-module_iconDefault__p8GBq","textDefault":"PlainButton-module_textDefault__-J828","buttonLarge":"PlainButton-module_buttonLarge__BrREY","iconLarge":"PlainButton-module_iconLarge__QyqBP","textLarge":"PlainButton-module_textLarge__RXuFq","default":"PlainButton-module_default__2k2SA","subdued":"PlainButton-module_subdued__DzcEG","inverted":"PlainButton-module_inverted__Z-WQH","disabled":"PlainButton-module_disabled__VeMIS"};
+
+export { styles as default };
+//# sourceMappingURL=PlainButton.module.css.js.map

package/dist/components/button/PlainButton/PlainButton.module.css.js.map

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

package/dist/components/button/PlainButton/PlainButton.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlainButton } from './PlainButton';
+declare const meta: Meta<typeof PlainButton>;
+export default meta;
+type Story = StoryObj<typeof PlainButton>;
+export declare const Primary: Story;
+export declare const Default: Story;
+export declare const Subdued: Story;
+export declare const Inverted: {
+    render: () => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export declare const Sizes: Story;
+export declare const LeadingIcons: Story;
+export declare const TrailingIcons: Story;
+//# sourceMappingURL=PlainButton.stories.d.ts.map

package/dist/components/button/PlainButton/PlainButton.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlainButton.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/button/PlainButton/PlainButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAKtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAGlC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAGzC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAA;AAGD,eAAO,MAAM,OAAO,EAAE,KAErB,CAAA;AAGD,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAGD,eAAO,MAAM,QAAQ;;CAQpB,CAAA;AAGD,eAAO,MAAM,KAAK,EAAE,KASnB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAS3B,CAAA"}

package/dist/components/button/PlainButton/types.d.ts

@@ -0,0 +1,14 @@
+import { BaseButtonProps } from '../BaseButton/types';
+export type PlainButtonVariant = 'default' | 'subdued' | 'inverted';
+export type PlainButtonSize = 'default' | 'large';
+export type PlainButtonProps = {
+    /**
+     * The type of the button
+     */
+    variant?: PlainButtonVariant;
+    /**
+     * The button size
+     */
+    size?: PlainButtonSize;
+} & Omit<BaseButtonProps, 'styles'>;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/button/PlainButton/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/button/PlainButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAErD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAA;AAEnE,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,CAAA;AAEjD,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAE5B;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;CACvB,GAAG,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAA"}

package/dist/components/button/PlainButton.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { PlainButtonSize, PlainButtonType } from './types';
+/**
+ * A plain Button component (no border/background). Includes a few variants and options to
+ * include and position icons.
+ */
+export declare const PlainButton: (props: {
+    variant?: PlainButtonType | undefined;
+    size?: PlainButtonSize | undefined;
+} & Omit<import("./types").BaseButtonProps, "styles"> & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+//# sourceMappingURL=PlainButton.d.ts.map

package/dist/components/button/PlainButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlainButton.d.ts","sourceRoot":"","sources":["../../src/components/button/PlainButton.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAoB,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAyB5E;;;GAGG;AACH,eAAO,MAAM,WAAW;;;0MAgCvB,CAAA"}

package/dist/components/button/PlainButton.stories.d.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlainButtonProps, PlainButtonType } from './types';
+type StoryArgs = {
+    props: Partial<PlainButtonProps>;
+    dark?: boolean;
+};
+declare const meta: Meta<StoryArgs>;
+export default meta;
+type Story = StoryObj<StoryArgs>;
+export declare const Default: Story;
+export declare const Subdued: Story;
+export declare const Inverted: {
+    args: {
+        dark: boolean;
+        props: {
+            variant: PlainButtonType;
+        };
+    };
+};
+//# sourceMappingURL=PlainButton.stories.d.ts.map

package/dist/components/button/PlainButton.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlainButton.stories.d.ts","sourceRoot":"","sources":["../../src/components/button/PlainButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAKtD,OAAO,EAAE,gBAAgB,EAAmB,eAAe,EAAE,MAAM,SAAS,CAAA;AAQ5E,KAAK,SAAS,GAAG;IACf,KAAK,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAChC,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,SAAS,CAmCzB,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAA;AAGhC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAA;AAGhC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAA;AAGD,eAAO,MAAM,QAAQ;;;;;;;CAKpB,CAAA"}

package/dist/components/button/SocialButton/SocialButton.d.ts

@@ -0,0 +1,15 @@
+import type { ButtonProps } from '../Button/types';
+type SocialMedia = 'tiktok' | 'instagram' | 'twitter';
+export type SocialButtonProps = Omit<ButtonProps, 'aria-label'> & {
+    /**
+     * Which social media.
+     */
+    socialType: SocialMedia;
+    /**
+     * Aria label text. Required since these buttons just have icons
+     */
+    'aria-label': string;
+};
+export declare const SocialButton: (props: SocialButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SocialButton.d.ts.map

package/dist/components/button/SocialButton/SocialButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SocialButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/SocialButton/SocialButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAElD,KAAK,WAAW,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAA;AAGrD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG;IAChE;;OAEG;IACH,UAAU,EAAE,WAAW,CAAA;IACvB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AAmBD,eAAO,MAAM,YAAY,UAAW,iBAAiB,qDAuBpD,CAAA"}

package/dist/components/button/SocialButton/SocialButton.js

@@ -0,0 +1,35 @@
+import { __rest, __assign } from '../../../_virtual/_tslib.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import 'react';
+import '@emotion/react';
+import '@emotion/css';
+import { IconTikTok, IconInstagram, IconTwitter } from '../../../icons/logos.js';
+import { Button } from '../Button/Button.js';
+
+var socialLogos = {
+    tiktok: IconTikTok,
+    instagram: IconInstagram,
+    twitter: IconTwitter
+};
+var getSocialButtonProps = function (type) {
+    switch (type) {
+        case 'tiktok':
+            return { hexColor: '#fe2c55' };
+        case 'twitter':
+            return { hexColor: '#1ba1f1' };
+        default:
+            return {};
+    }
+};
+var SocialButton = function (props) {
+    var socialType = props.socialType, rest = __rest(props, ["socialType"]);
+    var socialButtonProps = getSocialButtonProps(socialType);
+    var instagramBackgroundCss = {
+        background: "radial-gradient(61.46% 59.09% at 36.25% 96.55%, #ffd600 0%, #ff6930 48.44%, #fe3b36 73.44%, rgba(254, 59, 54, 0) 100%),\n      radial-gradient(202.83% 136.37% at 84.5% 113.5%, #ff1b90 24.39%, #f80261 43.67%, #ed00c0 68.85%, #c500e9 77.68%, #7017ff 89.32%)"
+    };
+    var SocialLogo = socialLogos[socialType];
+    return (jsx(Button, __assign({}, socialButtonProps, rest, { css: __assign({ border: 'transparent' }, (socialType === 'instagram' && instagramBackgroundCss)) }, { children: jsx(SocialLogo, { color: 'staticWhite', size: 'l' }) })));
+};
+
+export { SocialButton };
+//# sourceMappingURL=SocialButton.js.map

package/dist/components/button/SocialButton/SocialButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SocialButton.js","sources":["../../../../src/components/button/SocialButton/SocialButton.tsx"],"sourcesContent":["import type { CSSObject } from '@emotion/react'\n\nimport { IconInstagram, IconTikTok, IconTwitter } from 'icons'\n\nimport { Button } from '../Button/Button'\nimport type { ButtonProps } from '../Button/types'\n\ntype SocialMedia = 'tiktok' | 'instagram' | 'twitter'\n\n// Omitting aria-label from original type purely for showing in Storybook\nexport type SocialButtonProps = Omit<ButtonProps, 'aria-label'> & {\n  /**\n   * Which social media.\n   */\n  socialType: SocialMedia\n  /**\n   * Aria label text. Required since these buttons just have icons\n   */\n  'aria-label': string\n}\n\nconst socialLogos = {\n  tiktok: IconTikTok,\n  instagram: IconInstagram,\n  twitter: IconTwitter\n}\n\nconst getSocialButtonProps = (type: SocialMedia): ButtonProps => {\n  switch (type) {\n    case 'tiktok':\n      return { hexColor: '#fe2c55' }\n    case 'twitter':\n      return { hexColor: '#1ba1f1' }\n    default:\n      return {}\n  }\n}\n\nexport const SocialButton = (props: SocialButtonProps) => {\n  const { socialType, ...rest } = props\n  const socialButtonProps = getSocialButtonProps(socialType)\n\n  const instagramBackgroundCss: CSSObject = {\n    background: `radial-gradient(61.46% 59.09% at 36.25% 96.55%, #ffd600 0%, #ff6930 48.44%, #fe3b36 73.44%, rgba(254, 59, 54, 0) 100%),\n      radial-gradient(202.83% 136.37% at 84.5% 113.5%, #ff1b90 24.39%, #f80261 43.67%, #ed00c0 68.85%, #c500e9 77.68%, #7017ff 89.32%)`\n  }\n\n  const SocialLogo = socialLogos[socialType]\n\n  return (\n    <Button\n      {...socialButtonProps}\n      {...rest}\n      css={{\n        border: 'transparent',\n        ...(socialType === 'instagram' && instagramBackgroundCss)\n      }}\n    >\n      <SocialLogo color='staticWhite' size='l' />\n    </Button>\n  )\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;AAqBA,IAAM,WAAW,GAAG;AAClB,IAAA,MAAM,EAAE,UAAU;AAClB,IAAA,SAAS,EAAE,aAAa;AACxB,IAAA,OAAO,EAAE,WAAW;CACrB,CAAA;AAED,IAAM,oBAAoB,GAAG,UAAC,IAAiB,EAAA;AAC7C,IAAA,QAAQ,IAAI;AACV,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAA;AAChC,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAA;AAChC,QAAA;AACE,YAAA,OAAO,EAAE,CAAA;AACZ,KAAA;AACH,CAAC,CAAA;AAEM,IAAM,YAAY,GAAG,UAAC,KAAwB,EAAA;IAC3C,IAAA,UAAU,GAAc,KAAK,CAAnB,UAAA,EAAK,IAAI,GAAA,MAAA,CAAK,KAAK,EAA/B,CAAuB,YAAA,CAAA,CAAF,CAAU;AACrC,IAAA,IAAM,iBAAiB,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAA;AAE1D,IAAA,IAAM,sBAAsB,GAAc;AACxC,QAAA,UAAU,EAAE,iQACuH;KACpI,CAAA;AAED,IAAA,IAAM,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC,CAAA;AAE1C,IAAA,QACEA,GAAA,CAAC,MAAM,EAAA,QAAA,CAAA,EAAA,EACD,iBAAiB,EACjB,IAAI,EACR,EAAA,GAAG,aACD,MAAM,EAAE,aAAa,EAAA,GACjB,UAAU,KAAK,WAAW,IAAI,sBAAsB,EAAC,EAAA,EAAA,EAAA,QAAA,EAG3DA,GAAC,CAAA,UAAU,IAAC,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,GAAG,EAAG,CAAA,EAAA,CAAA,CACpC,EACV;AACH;;;;"}

package/dist/components/button/SocialButton/SocialButton.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"root":"SocialButton-module_root__DIw7w","instagram":"SocialButton-module_instagram__IpLfK"};
+
+export { styles as default };
+//# sourceMappingURL=SocialButton.module.css.js.map

package/dist/components/button/SocialButton/SocialButton.module.css.js.map

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

package/dist/components/button/SocialButton/SocialButton.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta } from '@storybook/react';
+import { SocialButton } from './SocialButton';
+declare const meta: Meta<typeof SocialButton>;
+export default meta;
+export declare const SocialButtons: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SocialButton.stories.d.ts.map

package/dist/components/button/SocialButton/SocialButton.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SocialButton.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/button/SocialButton/SocialButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAI5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAQnC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,aAAa,wDAMzB,CAAA"}

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

@@ -0,0 +1,11 @@
+export { Button } from './Button/Button';
+export * from './Button/types';
+export { PlainButton } from './PlainButton/PlainButton';
+export * from './PlainButton/types';
+export { SocialButton } from './SocialButton/SocialButton';
+export { FollowButton } from './FollowButton/FollowButton';
+export * from './FollowButton/types';
+export { FilterButton } from './FilterButton/FilterButton';
+export * from './FilterButton/types';
+export { IconButton, IconButtonProps } from './IconButton/IconButton';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxC,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,cAAc,qBAAqB,CAAA;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,cAAc,sBAAsB,CAAA;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,cAAc,sBAAsB,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/components/button/types.d.ts

@@ -0,0 +1,194 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import type { CSSObject } from '@emotion/react';
+import type { Origin } from "../layout/Popup/types";
+import type { SpecialColors } from "../../foundations/color";
+import type { IconComponent } from '../icon';
+export declare enum ButtonType {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    TERTIARY = "tertiary",
+    DESTRUCTIVE = "destructive"
+}
+export declare enum ButtonSize {
+    SMALL = "small",
+    DEFAULT = "default",
+    LARGE = "large"
+}
+type BaseButtonStyles = {
+    button: CSSObject;
+    icon: CSSObject;
+};
+export type HTMLButtonProps = ComponentPropsWithoutRef<'button'>;
+/**
+ * These props should only be used for dev purposes, whether in debug mode,
+ * or to show various states in storybook.
+ * */
+type InternalProps = {
+    /**
+     * @ignore: This prop is for internal use only
+     */
+    _isHovered?: boolean;
+    /**
+     * @ignore: This prop is for internal use only
+     */
+    _isPressed?: boolean;
+};
+export type BaseButtonProps = {
+    /**
+     * Optional icon element to include on the left side of the button
+     */
+    iconLeft?: IconComponent;
+    /**
+     * Optional icon element to include on the right side of the button
+     */
+    iconRight?: IconComponent;
+    /**
+     * When true, do not override icon's fill colors
+     */
+    isStaticIcon?: boolean;
+    /**
+     * Show a spinning loading state instead of the left icon
+     */
+    isLoading?: boolean;
+    /**
+     * The max width at which text will still be shown
+     */
+    widthToHideText?: number;
+    /**
+     * Optional min width
+     * Min width can be useful if the button is switching states and you want
+     * to keep a certain width while text length changes
+     */
+    minWidth?: number;
+    /**
+     * If provided, allow button to take up full width of container
+     */
+    fullWidth?: boolean;
+    /**
+     * Internal styling used by derived button components
+     */
+    styles: BaseButtonStyles;
+    /**
+     * Change the default rendered element for the one passed as a child,
+     *  merging their props and behavior.
+     */
+    asChild?: boolean;
+} & HTMLButtonProps & InternalProps;
+export type ButtonProps = {
+    /**
+     * Override the color of the button, only valid for the `PRIMARY` variant
+     */
+    color?: SpecialColors;
+    /**
+     * Override the color of the button using any hex color, only valid for the `PRIMARY` variant
+     */
+    hexColor?: `#${string}`;
+    /**
+     * The type of the button
+     */
+    variant?: ButtonType;
+    /**
+     * The button size
+     */
+    size?: ButtonSize;
+} & Omit<BaseButtonProps, 'styles'>;
+export declare enum PlainButtonType {
+    DEFAULT = "default",
+    SUBDUED = "subdued",
+    INVERTED = "inverted"
+}
+export declare enum PlainButtonSize {
+    DEFAULT = "default",
+    LARGE = "large"
+}
+export type PlainButtonProps = {
+    /**
+     * The type of the button
+     */
+    variant?: PlainButtonType;
+    /**
+     * The button size
+     */
+    size?: PlainButtonSize;
+} & Omit<BaseButtonProps, 'styles'>;
+export declare enum FilterButtonSize {
+    DEFAULT = "default",
+    SMALL = "small"
+}
+export declare enum FilterButtonType {
+    /**
+     * The container is filled with solid color after selection
+     */
+    FILL_CONTAINER = "fillContainer",
+    /**
+     * The label is used as the selected value
+     */
+    REPLACE_LABEL = "replaceLabel"
+}
+export type FilterButtonOption = {
+    label: string;
+    icon?: IconComponent;
+};
+export type FilterButtonProps = {
+    /**
+     * Selection options
+     * e.g. { label: 'Option A', icon: IconRadar }
+     */
+    options: FilterButtonOption[];
+    /**
+     * The text that appears on the button component.
+     * If no label is provided, a different Icon can be specified
+     * to contextually inform users.
+     */
+    label?: string;
+    /**
+     * If no label is provided, specify an optional aria-label
+     */
+    'aria-label'?: string;
+    /**
+     * An initial section (from the provided options)
+     */
+    initialSelectionIndex?: number;
+    /**
+     * The button size
+     * @default FilterButtonSize.DEFAULT
+     */
+    size?: FilterButtonSize;
+    /**
+     * The type of filter button
+     * @default FilterButtonType.FILL_CONTAINER
+     */
+    variant?: FilterButtonType;
+    /**
+     * Optional icon element to include on the left side of the button
+     */
+    iconLeft?: IconComponent;
+    /**
+     * Optional icon element to include on the right side of the button
+     */
+    iconRight?: IconComponent;
+    /**
+     * What to do when an option is selected
+     */
+    onSelect?: (option: FilterButtonOption) => void;
+    /**
+     * Popup anchor origin
+     * @default { horizontal: 'center', vertical: 'bottom' }
+     */
+    popupAnchorOrigin?: Origin;
+    /**
+     * Popup transform origin
+     * @default { horizontal: 'center', vertical: 'top' }
+     */
+    popupTransformOrigin?: Origin;
+    /**
+     * Popup portal location passed to the inner popup
+     */
+    popupPortalLocation?: HTMLElement;
+    /**
+     * zIndex applied to the inner Popup component
+     */
+    popupZIndex?: number;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/button/types.d.ts.map

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

package/dist/components/button/types.js

@@ -0,0 +1,43 @@
+var ButtonType;
+(function (ButtonType) {
+    ButtonType["PRIMARY"] = "primary";
+    ButtonType["SECONDARY"] = "secondary";
+    ButtonType["TERTIARY"] = "tertiary";
+    ButtonType["DESTRUCTIVE"] = "destructive";
+})(ButtonType || (ButtonType = {}));
+var ButtonSize;
+(function (ButtonSize) {
+    ButtonSize["SMALL"] = "small";
+    ButtonSize["DEFAULT"] = "default";
+    ButtonSize["LARGE"] = "large";
+})(ButtonSize || (ButtonSize = {}));
+var PlainButtonType;
+(function (PlainButtonType) {
+    PlainButtonType["DEFAULT"] = "default";
+    PlainButtonType["SUBDUED"] = "subdued";
+    PlainButtonType["INVERTED"] = "inverted";
+})(PlainButtonType || (PlainButtonType = {}));
+var PlainButtonSize;
+(function (PlainButtonSize) {
+    PlainButtonSize["DEFAULT"] = "default";
+    PlainButtonSize["LARGE"] = "large";
+})(PlainButtonSize || (PlainButtonSize = {}));
+var FilterButtonSize;
+(function (FilterButtonSize) {
+    FilterButtonSize["DEFAULT"] = "default";
+    FilterButtonSize["SMALL"] = "small";
+})(FilterButtonSize || (FilterButtonSize = {}));
+var FilterButtonType;
+(function (FilterButtonType) {
+    /**
+     * The container is filled with solid color after selection
+     */
+    FilterButtonType["FILL_CONTAINER"] = "fillContainer";
+    /**
+     * The label is used as the selected value
+     */
+    FilterButtonType["REPLACE_LABEL"] = "replaceLabel";
+})(FilterButtonType || (FilterButtonType = {}));
+
+export { ButtonSize, ButtonType, FilterButtonSize, FilterButtonType, PlainButtonSize, PlainButtonType };
+//# sourceMappingURL=types.js.map

package/dist/components/button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/button/types.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react'\n\nimport type { CSSObject } from '@emotion/react'\n\nimport type { Origin } from 'components/layout/Popup/types'\nimport type { SpecialColors } from 'foundations/color'\n\nimport type { IconComponent } from '../icon'\n\nexport enum ButtonType {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  TERTIARY = 'tertiary',\n  DESTRUCTIVE = 'destructive'\n}\n\nexport enum ButtonSize {\n  SMALL = 'small',\n  DEFAULT = 'default',\n  LARGE = 'large'\n}\n\ntype BaseButtonStyles = {\n  button: CSSObject\n  icon: CSSObject\n}\n\nexport type HTMLButtonProps = ComponentPropsWithoutRef<'button'>\n\n/**\n * These props should only be used for dev purposes, whether in debug mode,\n * or to show various states in storybook.\n * */\ntype InternalProps = {\n  /**\n   * @ignore: This prop is for internal use only\n   */\n  _isHovered?: boolean\n  /**\n   * @ignore: This prop is for internal use only\n   */\n  _isPressed?: boolean\n}\n\nexport type BaseButtonProps = {\n  /**\n   * Optional icon element to include on the left side of the button\n   */\n  iconLeft?: IconComponent\n\n  /**\n   * Optional icon element to include on the right side of the button\n   */\n  iconRight?: IconComponent\n\n  /**\n   * When true, do not override icon's fill colors\n   */\n  isStaticIcon?: boolean\n  /**\n   * Show a spinning loading state instead of the left icon\n   */\n  isLoading?: boolean\n\n  /**\n   * The max width at which text will still be shown\n   */\n  widthToHideText?: number\n\n  /**\n   * Optional min width\n   * Min width can be useful if the button is switching states and you want\n   * to keep a certain width while text length changes\n   */\n  minWidth?: number\n\n  /**\n   * If provided, allow button to take up full width of container\n   */\n  fullWidth?: boolean\n\n  /**\n   * Internal styling used by derived button components\n   */\n  styles: BaseButtonStyles\n\n  /**\n   * Change the default rendered element for the one passed as a child,\n   *  merging their props and behavior.\n   */\n  asChild?: boolean\n} & HTMLButtonProps &\n  InternalProps\n\nexport type ButtonProps = {\n  /**\n   * Override the color of the button, only valid for the `PRIMARY` variant\n   */\n  color?: SpecialColors\n\n  /**\n   * Override the color of the button using any hex color, only valid for the `PRIMARY` variant\n   */\n  hexColor?: `#${string}`\n\n  /**\n   * The type of the button\n   */\n  variant?: ButtonType\n\n  /**\n   * The button size\n   */\n  size?: ButtonSize\n} & Omit<BaseButtonProps, 'styles'>\n\nexport enum PlainButtonType {\n  DEFAULT = 'default',\n  SUBDUED = 'subdued',\n  INVERTED = 'inverted'\n}\n\nexport enum PlainButtonSize {\n  DEFAULT = 'default',\n  LARGE = 'large'\n}\n\nexport type PlainButtonProps = {\n  /**\n   * The type of the button\n   */\n  variant?: PlainButtonType\n\n  /**\n   * The button size\n   */\n  size?: PlainButtonSize\n} & Omit<BaseButtonProps, 'styles'>\n\nexport enum FilterButtonSize {\n  DEFAULT = 'default',\n  SMALL = 'small'\n}\n\nexport enum FilterButtonType {\n  /**\n   * The container is filled with solid color after selection\n   */\n  FILL_CONTAINER = 'fillContainer',\n\n  /**\n   * The label is used as the selected value\n   */\n  REPLACE_LABEL = 'replaceLabel'\n}\n\nexport type FilterButtonOption = {\n  label: string\n  icon?: IconComponent\n}\n\nexport type FilterButtonProps = {\n  /**\n   * Selection options\n   * e.g. { label: 'Option A', icon: IconRadar }\n   */\n  options: FilterButtonOption[]\n\n  /**\n   * The text that appears on the button component.\n   * If no label is provided, a different Icon can be specified\n   * to contextually inform users.\n   */\n  label?: string\n\n  /**\n   * If no label is provided, specify an optional aria-label\n   */\n  'aria-label'?: string\n\n  /**\n   * An initial section (from the provided options)\n   */\n  initialSelectionIndex?: number\n\n  /**\n   * The button size\n   * @default FilterButtonSize.DEFAULT\n   */\n  size?: FilterButtonSize\n\n  /**\n   * The type of filter button\n   * @default FilterButtonType.FILL_CONTAINER\n   */\n  variant?: FilterButtonType\n\n  /**\n   * Optional icon element to include on the left side of the button\n   */\n  iconLeft?: IconComponent\n\n  /**\n   * Optional icon element to include on the right side of the button\n   */\n  iconRight?: IconComponent\n\n  /**\n   * What to do when an option is selected\n   */\n  onSelect?: (option: FilterButtonOption) => void\n\n  /**\n   * Popup anchor origin\n   * @default { horizontal: 'center', vertical: 'bottom' }\n   */\n  popupAnchorOrigin?: Origin\n\n  /**\n   * Popup transform origin\n   * @default { horizontal: 'center', vertical: 'top' }\n   */\n  popupTransformOrigin?: Origin\n\n  /**\n   * Popup portal location passed to the inner popup\n   */\n  popupPortalLocation?: HTMLElement\n\n  /**\n   * zIndex applied to the inner Popup component\n   */\n  popupZIndex?: number\n}\n"],"names":[],"mappings":"IASY,WAKX;AALD,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnB,IAAA,UAAA,CAAA,WAAA,CAAA,GAAA,WAAuB,CAAA;AACvB,IAAA,UAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrB,IAAA,UAAA,CAAA,aAAA,CAAA,GAAA,aAA2B,CAAA;AAC7B,CAAC,EALW,UAAU,KAAV,UAAU,GAKrB,EAAA,CAAA,CAAA,CAAA;IAEW,WAIX;AAJD,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf,IAAA,UAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnB,IAAA,UAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EAJW,UAAU,KAAV,UAAU,GAIrB,EAAA,CAAA,CAAA,CAAA;IAgGW,gBAIX;AAJD,CAAA,UAAY,eAAe,EAAA;AACzB,IAAA,eAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnB,IAAA,eAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnB,IAAA,eAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACvB,CAAC,EAJW,eAAe,KAAf,eAAe,GAI1B,EAAA,CAAA,CAAA,CAAA;IAEW,gBAGX;AAHD,CAAA,UAAY,eAAe,EAAA;AACzB,IAAA,eAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnB,IAAA,eAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EAHW,eAAe,KAAf,eAAe,GAG1B,EAAA,CAAA,CAAA,CAAA;IAcW,iBAGX;AAHD,CAAA,UAAY,gBAAgB,EAAA;AAC1B,IAAA,gBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnB,IAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,GAG3B,EAAA,CAAA,CAAA,CAAA;IAEW,iBAUX;AAVD,CAAA,UAAY,gBAAgB,EAAA;AAC1B;;AAEG;AACH,IAAA,gBAAA,CAAA,gBAAA,CAAA,GAAA,eAAgC,CAAA;AAEhC;;AAEG;AACH,IAAA,gBAAA,CAAA,eAAA,CAAA,GAAA,cAA8B,CAAA;AAChC,CAAC,EAVW,gBAAgB,KAAhB,gBAAgB,GAU3B,EAAA,CAAA,CAAA;;;;"}

package/dist/components/common/HiddenInput.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const HiddenInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+//# sourceMappingURL=HiddenInput.d.ts.map

package/dist/components/common/HiddenInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HiddenInput.d.ts","sourceRoot":"","sources":["../../../src/components/common/HiddenInput.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,WAAW;;;kHAWtB,CAAA"}

package/dist/components/common/HiddenInput.js

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+var HiddenInput = styled.input({
+    cursor: 'inherit',
+    position: 'absolute',
+    opacity: 0,
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+    margin: 0,
+    padding: 0,
+    zIndex: 1
+});
+
+export { HiddenInput };
+//# sourceMappingURL=HiddenInput.js.map

package/dist/components/common/HiddenInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HiddenInput.js","sources":["../../../src/components/common/HiddenInput.tsx"],"sourcesContent":["import styled from '@emotion/styled'\n\nexport const HiddenInput = styled.input({\n  cursor: 'inherit',\n  position: 'absolute',\n  opacity: 0,\n  width: '100%',\n  height: '100%',\n  top: 0,\n  left: 0,\n  margin: 0,\n  padding: 0,\n  zIndex: 1\n})\n"],"names":[],"mappings":";;AAEa,IAAA,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;AACtC,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,OAAO,EAAE,CAAC;AACV,IAAA,KAAK,EAAE,MAAM;AACb,IAAA,MAAM,EAAE,MAAM;AACd,IAAA,GAAG,EAAE,CAAC;AACN,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,MAAM,EAAE,CAAC;AACT,IAAA,OAAO,EAAE,CAAC;AACV,IAAA,MAAM,EAAE,CAAC;AACV,CAAA;;;;"}

package/dist/components/completion-check/CompletionCheck.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties } from 'react';
+import type { CompletionCheckProps } from './types';
+export declare const CompletionDefault: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CompletionEmpty: () => import("@emotion/react/jsx-runtime").JSX.Element;
+type CompletionChangeIconProps = {
+    iconStyles: CSSProperties;
+};
+export declare const CompletionError: (props: CompletionChangeIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CompletionSuccess: (props: CompletionChangeIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CompletionCheck: (props: CompletionCheckProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CompletionCheck.d.ts.map

package/dist/components/completion-check/CompletionCheck.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompletionCheck.d.ts","sourceRoot":"","sources":["../../../src/components/completion-check/CompletionCheck.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAU1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAEnD,eAAO,MAAM,iBAAiB,wDAE7B,CAAA;AACD,eAAO,MAAM,eAAe,wDAE3B,CAAA;AAED,KAAK,yBAAyB,GAAG;IAC/B,UAAU,EAAE,aAAa,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,eAAe,UAAW,yBAAyB,qDAQ/D,CAAA;AACD,eAAO,MAAM,iBAAiB,UAAW,yBAAyB,qDAQjE,CAAA;AAQD,eAAO,MAAM,eAAe,UAAW,oBAAoB,qDAgC1D,CAAA"}

package/dist/components/completion-check/CompletionCheck.js

@@ -0,0 +1,50 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useTransition, animated } from '@react-spring/web';
+import cn from 'classnames';
+import { IconValidationX, IconValidationCheck } from '../../icons/utilityIcons.js';
+import 'react';
+import '@emotion/react';
+import '@emotion/css';
+import '../layout/Box/Box.js';
+import { Flex } from '../layout/Flex/Flex.js';
+import '../layout/Paper/Paper.js';
+import '../layout/Popup/Popup.js';
+import styles from './CompletionCheck.module.css.js';
+
+var CompletionDefault = function () { return (jsx("div", { className: cn(styles.defaultCompletionIcon) })); };
+var CompletionEmpty = function () { return (jsx("div", { className: cn(styles.completionIcon, styles.emptyCompletionIcon) })); };
+var CompletionError = function (props) { return (jsxs(animated.div, __assign({ style: props.iconStyles, className: cn(styles.completionIcon, styles.xIcon) }, { children: [' ', jsx(IconValidationX, { size: 's' }), ' '] }))); };
+var CompletionSuccess = function (props) { return (jsxs(animated.div, __assign({ style: props.iconStyles, className: cn(styles.completionIcon, styles.checkIcon) }, { children: [' ', jsx(IconValidationCheck, { size: 's' })] }))); };
+var completionComponents = {
+    complete: CompletionSuccess,
+    error: CompletionError,
+    incomplete: CompletionEmpty
+};
+var CompletionCheck = function (props) {
+    var transitions = useTransition(props.value, {
+        from: { x: 0 },
+        enter: { x: 1 },
+        leave: { x: 0 }
+    });
+    return (jsxs(Flex, __assign({ alignItems: 'center', className: styles.container }, { children: [jsx(CompletionDefault, {}), transitions(function (style, value) {
+                if (completionComponents[value]) {
+                    var CompletionIcon = completionComponents[value];
+                    return (jsx(CompletionIcon, { iconStyles: {
+                            opacity: style.x.to({
+                                output: [0.3, 1]
+                            }),
+                            transform: style.x
+                                .to({
+                                range: [0, 0.75, 1],
+                                output: [0, 1.2, 1]
+                            })
+                                .to(function (x) { return "scale3d(".concat(x, ", ").concat(x, ", ").concat(x, ")"); })
+                        } }));
+                }
+                return null;
+            })] })));
+};
+
+export { CompletionCheck, CompletionDefault, CompletionEmpty, CompletionError, CompletionSuccess };
+//# sourceMappingURL=CompletionCheck.js.map