@audius/harmony 0.0.25 → 0.0.29

package/README.md

@@ -1,6 +1,6 @@
 <p align="center">
-  <img height="288px" src="./src/storybook/assets/harmonyLogoDark.png#gh-dark-mode-only">
-  <img height="288px" src="./src/storybook/assets/harmonyLogo.png#gh-light-mode-only">
+  <img height="288px" src="https://github.com/AudiusProject/audius-protocol/blob/main/packages/harmony/src/storybook/assets/harmonyLogoDark.png#gh-dark-mode-only">
+  <img height="288px" src="https://github.com/AudiusProject/audius-protocol/blob/main/packages/harmony/src/storybook/assets/harmonyLogo.png?raw=true#gh-light-mode-only">
 
   <p align="center">
     Harmony is design system focused on collaboration, reusability, and scalability.
@@ -22,13 +22,7 @@ Full documentation can be found here: [Harmony Docs](https://harmony.audius.co)
 
 ## Installation
 
-Install `@audius/harmony` required peer dependencies:
-
-```bash
-npm install --save @emotion/react @emotion/styled @radix-ui/react-slot @react-spring/web classnames lodash react-lottie react-merge-refs react-perfect-scrollbar react-use react-use-measure
-```
-
-Then install `@audius/harmony`
+Install `@audius/harmony`:
 
 ```bash
 npm install --save @audius/harmony
@@ -48,18 +42,15 @@ Setup the ThemeProvider exported by Harmony
 import { ThemeProvider as HarmonyThemeProvider } from '@audius/harmony'
 
 const App = () => {
-
-  return (
-    <HarmonyThemeProvider theme='day'>
-        ...
-    </HarmonyThemeProvider>
-  )
+  return <HarmonyThemeProvider theme='day'>...</HarmonyThemeProvider>
 }
 ```
 
 In order use emotion yourself, follow their documentation for [setting up the css-prop](https://emotion.sh/docs/css-prop)
 
-If using typescript add an emotion.d.ts file and include the following for access to harmony's theme type
+If using typescript you will need to:
+
+1. Add an emotion.d.ts file and include the following for access to harmony's theme type
 
 ```ts
 import '@emotion/react'
@@ -68,18 +59,28 @@ import type { HarmonyTheme } from '@audius/harmony'
 declare module '@emotion/react' {
   export interface Theme extends HarmonyTheme {}
 }
+```
+
+2. Update your tsconfig to specify the jsxImportLocation:
 
+```ts
+{
+  "compilerOptions": {
+    "jsxImportSource": "@emotion/react",
+    ...
+  }
+}
 ```
 
 ## Usage
 
 ```tsx
-import { Button, ButtonType, Flex } from '@audius/harmony'
+import { Button, Flex } from '@audius/harmony'
 
 const App = () => {
   return (
     <Flex gap='m'>
-      <Button variant={ButtonType.SECONDARY}>Click This!</Button>
+      <Button variant='secondary'>Click This!</Button>
       <Button>Click That!</Button>
     </Flex>
   )
@@ -97,4 +98,3 @@ npm run storybook
 ## Contribution
 
 A Contribution Guide is [available here](https://www.notion.so/audiusproject/Submitting-for-Design-Updates-52a8bc3bb68747818a96d2721bace27f).
-

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

@@ -5,8 +5,8 @@ import { CSSObject } from '@emotion/react';
  * `Button` or `PlainButton`.
  */
 export declare const BaseButton: (props: {
-    iconLeft?: import("../..").IconComponent | undefined;
-    iconRight?: import("../..").IconComponent | undefined;
+    iconLeft?: import("../..").IconComponent | null | undefined;
+    iconRight?: import("../..").IconComponent | null | undefined;
     isStaticIcon?: boolean | undefined;
     isLoading?: boolean | undefined;
     widthToHideText?: number | undefined;

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

@@ -26,11 +26,11 @@ export type BaseButtonProps = {
     /**
      * Optional icon element to include on the left side of the button
      */
-    iconLeft?: IconComponent;
+    iconLeft?: IconComponent | null;
     /**
      * Optional icon element to include on the right side of the button
      */
-    iconRight?: IconComponent;
+    iconRight?: IconComponent | null;
     /**
      * When true, do not override icon's fill colors
      */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/button/BaseButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,CAAA;AAEhF,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;AAEtD,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,SAAS,CAAA;IACjB,IAAI,EAAE,SAAS,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAA;AAEhE;;;KAGK;AACL,KAAK,aAAa,GAAG;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAA;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,CAAA;IAEzB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAA;IAEzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,eAAe,GACjB,aAAa,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/button/BaseButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,CAAA;AAEhF,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;AAEtD,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,SAAS,CAAA;IACjB,IAAI,EAAE,SAAS,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAA;AAEhE;;;KAGK;AACL,KAAK,aAAa,GAAG;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAE/B;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAEhC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAA;IAEzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,eAAe,GACjB,aAAa,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/Button/Button.tsx"],"names":[],"mappings":";AAaA;;;;;GAKG;AACH,eAAO,MAAM,MAAM;;;;;sNAoOlB,CAAA"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/Button/Button.tsx"],"names":[],"mappings":";AAaA;;;;;GAKG;AACH,eAAO,MAAM,MAAM;;;;;sNA+PlB,CAAA"}

package/dist/components/button/Button/Button.js

@@ -88,6 +88,16 @@ var Button = forwardRef(function Button(props, ref) {
     var tertiaryStyles = __assign(__assign(__assign({ backgroundColor: type === 'dark' ? 'rgba(50, 51, 77, 0.6)' : 'rgb(255, 255, 255, 0.85)', color: themeColors.text.default, backdropFilter: 'blur(6px)', boxShadow: "0 0 0 1px inset ".concat(themeColors.border.default, ", ").concat(shadows.near), '&:hover': tertiaryHoverStyles, '&:active': tertiaryActiveStyles }, (_isHovered && tertiaryHoverStyles)), (_isPressed && tertiaryActiveStyles)), (isDisabled && {
         opacity: 0.45
     }));
+    var commonHoverStyles = {
+        backgroundColor: themeColors.neutral.n25
+    };
+    var commonActiveStyles = {
+        backgroundColor: themeColors.neutral.n100
+    };
+    var commonStyles = __assign(__assign(__assign({ backgroundColor: themeColors.special.white, color: themeColors.text.default, boxShadow: "0 0 0 1px inset ".concat(themeColors.border.strong), '&:hover': commonHoverStyles, '&:active': commonActiveStyles }, (_isHovered && commonHoverStyles)), (_isPressed && commonActiveStyles)), (isDisabled && {
+        backgroundColor: themeColors.neutral.n150,
+        boxShadow: 'none'
+    }));
     var destructiveHoverStyles = {
         backgroundColor: themeColors.special.red,
         color: themeColors.static.white
@@ -117,7 +127,9 @@ var Button = forwardRef(function Button(props, ref) {
             ? tertiaryStyles
             : variant === 'destructive'
                 ? destructiveStyles
-                : primaryStyles)), { '::before': {
+                : variant === 'common'
+                    ? commonStyles
+                    : primaryStyles)), { '::before': {
             zIndex: -1,
             content: '""',
             position: 'absolute',
@@ -126,7 +138,8 @@ var Button = forwardRef(function Button(props, ref) {
             right: 0,
             bottom: 0,
             backgroundColor: 'rgba(0, 0, 0, 0)'
-        } }), (variant !== 'tertiary' && __assign(__assign({ ':hover': hoverStyles, ':active': activeStyles }, (_isHovered && hoverStyles)), (_isPressed && activeStyles))));
+        } }), (variant !== 'tertiary' &&
+        variant !== 'common' && __assign(__assign({ ':hover': hoverStyles, ':active': activeStyles }, (_isHovered && hoverStyles)), (_isPressed && activeStyles))));
     var iconCss = size === 'small'
         ? smallIconStyles
         : size === 'large'

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button/Button.tsx"],"sourcesContent":["import { CSSProperties, forwardRef } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\n\nimport { toCSSVariableName } from '../../../utils/styles'\nimport { BaseButton } from '../BaseButton/BaseButton'\n\nimport { ButtonProps } from './types'\n\ntype CSSCustomProperties = CSSProperties & {\n  [index: `--${string}`]: any\n}\n\n/**\n * Buttons allow users to trigger an action or event with a single click.\n * For example, you can use a button for allowing the functionality of\n * submitting a form, opening a dialog, canceling an action, or performing\n * a delete operation.\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(props, ref) {\n    const {\n      color,\n      hexColor,\n      variant = 'primary',\n      size = 'default',\n      disabled,\n      ...baseProps\n    } = props\n    const { _isHovered, _isPressed, isLoading } = baseProps\n    const isDisabled = disabled || isLoading\n    const {\n      type,\n      color: themeColors,\n      cornerRadius,\n      shadows,\n      spacing,\n      typography\n    } = useTheme()\n\n    // Size Styles\n    const smallStyles: CSSObject = {\n      gap: spacing.xs,\n      height: spacing.unit8,\n      paddingInline: spacing.m,\n      fontSize: typography.size.s,\n      fontWeight: typography.weight.bold,\n      lineHeight: typography.lineHeight.s,\n      textTransform: 'capitalize'\n    }\n    const smallIconStyles: CSSObject = {\n      zIndex: 1,\n      width: spacing.unit4,\n      height: spacing.unit4\n    }\n\n    const defaultStyles: CSSObject = {\n      gap: spacing.s,\n      height: spacing.unit12,\n      paddingInline: spacing.xl,\n      fontSize: typography.size.l,\n      fontWeight: typography.weight.bold,\n      lineHeight: typography.lineHeight.l,\n      textTransform: 'capitalize'\n    }\n    const defaultIconStyles: CSSObject = {\n      zIndex: 1,\n      width: spacing.unit5,\n      height: spacing.unit5\n    }\n\n    const largeStyles: CSSObject = {\n      gap: spacing.s,\n      height: spacing.unit16,\n      paddingInline: spacing.xl,\n      fontSize: typography.size.xl,\n      fontWeight: typography.weight.bold,\n      lineHeight: typography.lineHeight.m,\n      letterSpacing: '0.25px',\n      textTransform: 'uppercase'\n    }\n    const largeIconStyles: CSSObject = {\n      zIndex: 1,\n      width: spacing.unit6,\n      height: spacing.unit6\n    }\n\n    // Variant Styles\n    const primaryStyles: CSSObject = {\n      '&:hover': { color: themeColors.static.white },\n\n      ...((_isHovered || _isPressed) && { color: themeColors.static.white }),\n      ...(isDisabled && {\n        backgroundColor: themeColors.neutral.n150,\n        boxShadow: 'none'\n      })\n    }\n\n    const secondaryHoverStyles: CSSObject = {\n      backgroundColor: themeColors.primary.primary,\n      color: themeColors.static.white\n    }\n    const secondaryStyles: CSSObject = {\n      backgroundColor: 'transparent',\n      color: themeColors.text.default,\n      boxShadow: `0 0 0 1px inset ${themeColors.border.strong}`,\n\n      '&:hover': secondaryHoverStyles,\n      '&:active': secondaryHoverStyles,\n\n      ...((_isHovered || _isPressed) && secondaryHoverStyles),\n      ...(isDisabled && {\n        backgroundColor: themeColors.neutral.n150,\n        color: themeColors.static.white,\n        boxShadow: 'none'\n      })\n    }\n\n    const tertiaryHoverStyles: CSSObject = {\n      backgroundColor: themeColors.background.white,\n      boxShadow: `0 0 0 1px inset ${themeColors.border.strong}, ${shadows.mid}`,\n      color: themeColors.text.default\n    }\n    const tertiaryActiveStyles: CSSObject = {\n      backgroundColor: themeColors.background.surface2,\n      backdropFilter: 'none',\n      color: themeColors.text.default,\n      boxShadow: `0 0 0 1px inset ${themeColors.border.strong}`\n    }\n    const tertiaryStyles: CSSObject = {\n      backgroundColor:\n        type === 'dark' ? 'rgba(50, 51, 77, 0.6)' : 'rgb(255, 255, 255, 0.85)',\n      color: themeColors.text.default,\n      backdropFilter: 'blur(6px)',\n      boxShadow: `0 0 0 1px inset ${themeColors.border.default}, ${shadows.near}`,\n\n      '&:hover': tertiaryHoverStyles,\n      '&:active': tertiaryActiveStyles,\n\n      ...(_isHovered && tertiaryHoverStyles),\n      ...(_isPressed && tertiaryActiveStyles),\n      ...(isDisabled && {\n        opacity: 0.45\n      })\n    }\n\n    const destructiveHoverStyles: CSSObject = {\n      backgroundColor: themeColors.special.red,\n      color: themeColors.static.white\n    }\n    const destructiveStyles: CSSObject = {\n      backgroundColor: 'transparent',\n      color: themeColors.special.red,\n      boxShadow: `0 0 0 1px inset ${themeColors.special.red}`,\n\n      '&:hover': destructiveHoverStyles,\n      '&:active': destructiveHoverStyles,\n\n      ...((_isHovered || _isPressed) && destructiveHoverStyles),\n      ...(isDisabled && {\n        opacity: 0.45\n      })\n    }\n\n    const hoverStyles: CSSObject = {\n      boxShadow: shadows.mid,\n      '&::before': {\n        backgroundColor: 'rgba(255, 255, 255, 0.2)'\n      }\n    }\n    const activeStyles: CSSObject = {\n      boxShadow: 'none',\n      '&::before': {\n        backgroundColor: 'rgba(0, 0, 0, 0.2)'\n      }\n    }\n\n    const buttonCss: CSSObject = {\n      backgroundColor: themeColors.primary.primary,\n      color: themeColors.static.white,\n      boxSizing: 'border-box',\n      border: 'none',\n      borderRadius: cornerRadius.s,\n      boxShadow: shadows.near,\n\n      ...(size === 'small'\n        ? smallStyles\n        : size === 'large'\n        ? largeStyles\n        : defaultStyles),\n\n      ...(variant === 'secondary'\n        ? secondaryStyles\n        : variant === 'tertiary'\n        ? tertiaryStyles\n        : variant === 'destructive'\n        ? destructiveStyles\n        : primaryStyles),\n\n      '::before': {\n        zIndex: -1,\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        backgroundColor: 'rgba(0, 0, 0, 0)'\n      },\n\n      ...(variant !== 'tertiary' && {\n        ':hover': hoverStyles,\n        ':active': activeStyles,\n        ...(_isHovered && hoverStyles),\n        ...(_isPressed && activeStyles)\n      })\n    }\n\n    const iconCss =\n      size === 'small'\n        ? smallIconStyles\n        : size === 'large'\n        ? largeIconStyles\n        : defaultIconStyles\n\n    const style: CSSCustomProperties =\n      variant === 'primary' && !isDisabled\n        ? {\n            backgroundColor:\n              hexColor ||\n              (color ? `var(${toCSSVariableName(color)})` : undefined)\n          }\n        : {}\n\n    return (\n      <BaseButton\n        ref={ref}\n        disabled={isDisabled}\n        styles={{\n          button: buttonCss,\n          icon: iconCss\n        }}\n        style={style}\n        {...baseProps}\n      />\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button/Button.tsx"],"sourcesContent":["import { CSSProperties, forwardRef } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\n\nimport { toCSSVariableName } from '../../../utils/styles'\nimport { BaseButton } from '../BaseButton/BaseButton'\n\nimport { ButtonProps } from './types'\n\ntype CSSCustomProperties = CSSProperties & {\n  [index: `--${string}`]: any\n}\n\n/**\n * Buttons allow users to trigger an action or event with a single click.\n * For example, you can use a button for allowing the functionality of\n * submitting a form, opening a dialog, canceling an action, or performing\n * a delete operation.\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(props, ref) {\n    const {\n      color,\n      hexColor,\n      variant = 'primary',\n      size = 'default',\n      disabled,\n      ...baseProps\n    } = props\n    const { _isHovered, _isPressed, isLoading } = baseProps\n    const isDisabled = disabled || isLoading\n    const {\n      type,\n      color: themeColors,\n      cornerRadius,\n      shadows,\n      spacing,\n      typography\n    } = useTheme()\n\n    // Size Styles\n    const smallStyles: CSSObject = {\n      gap: spacing.xs,\n      height: spacing.unit8,\n      paddingInline: spacing.m,\n      fontSize: typography.size.s,\n      fontWeight: typography.weight.bold,\n      lineHeight: typography.lineHeight.s,\n      textTransform: 'capitalize'\n    }\n    const smallIconStyles: CSSObject = {\n      zIndex: 1,\n      width: spacing.unit4,\n      height: spacing.unit4\n    }\n\n    const defaultStyles: CSSObject = {\n      gap: spacing.s,\n      height: spacing.unit12,\n      paddingInline: spacing.xl,\n      fontSize: typography.size.l,\n      fontWeight: typography.weight.bold,\n      lineHeight: typography.lineHeight.l,\n      textTransform: 'capitalize'\n    }\n    const defaultIconStyles: CSSObject = {\n      zIndex: 1,\n      width: spacing.unit5,\n      height: spacing.unit5\n    }\n\n    const largeStyles: CSSObject = {\n      gap: spacing.s,\n      height: spacing.unit16,\n      paddingInline: spacing.xl,\n      fontSize: typography.size.xl,\n      fontWeight: typography.weight.bold,\n      lineHeight: typography.lineHeight.m,\n      letterSpacing: '0.25px',\n      textTransform: 'uppercase'\n    }\n    const largeIconStyles: CSSObject = {\n      zIndex: 1,\n      width: spacing.unit6,\n      height: spacing.unit6\n    }\n\n    // Variant Styles\n    const primaryStyles: CSSObject = {\n      '&:hover': { color: themeColors.static.white },\n\n      ...((_isHovered || _isPressed) && { color: themeColors.static.white }),\n      ...(isDisabled && {\n        backgroundColor: themeColors.neutral.n150,\n        boxShadow: 'none'\n      })\n    }\n\n    const secondaryHoverStyles: CSSObject = {\n      backgroundColor: themeColors.primary.primary,\n      color: themeColors.static.white\n    }\n    const secondaryStyles: CSSObject = {\n      backgroundColor: 'transparent',\n      color: themeColors.text.default,\n      boxShadow: `0 0 0 1px inset ${themeColors.border.strong}`,\n\n      '&:hover': secondaryHoverStyles,\n      '&:active': secondaryHoverStyles,\n\n      ...((_isHovered || _isPressed) && secondaryHoverStyles),\n      ...(isDisabled && {\n        backgroundColor: themeColors.neutral.n150,\n        color: themeColors.static.white,\n        boxShadow: 'none'\n      })\n    }\n\n    const tertiaryHoverStyles: CSSObject = {\n      backgroundColor: themeColors.background.white,\n      boxShadow: `0 0 0 1px inset ${themeColors.border.strong}, ${shadows.mid}`,\n      color: themeColors.text.default\n    }\n    const tertiaryActiveStyles: CSSObject = {\n      backgroundColor: themeColors.background.surface2,\n      backdropFilter: 'none',\n      color: themeColors.text.default,\n      boxShadow: `0 0 0 1px inset ${themeColors.border.strong}`\n    }\n    const tertiaryStyles: CSSObject = {\n      backgroundColor:\n        type === 'dark' ? 'rgba(50, 51, 77, 0.6)' : 'rgb(255, 255, 255, 0.85)',\n      color: themeColors.text.default,\n      backdropFilter: 'blur(6px)',\n      boxShadow: `0 0 0 1px inset ${themeColors.border.default}, ${shadows.near}`,\n\n      '&:hover': tertiaryHoverStyles,\n      '&:active': tertiaryActiveStyles,\n\n      ...(_isHovered && tertiaryHoverStyles),\n      ...(_isPressed && tertiaryActiveStyles),\n      ...(isDisabled && {\n        opacity: 0.45\n      })\n    }\n\n    const commonHoverStyles: CSSObject = {\n      backgroundColor: themeColors.neutral.n25\n    }\n\n    const commonActiveStyles: CSSObject = {\n      backgroundColor: themeColors.neutral.n100\n    }\n\n    const commonStyles: CSSObject = {\n      backgroundColor: themeColors.special.white,\n      color: themeColors.text.default,\n      boxShadow: `0 0 0 1px inset ${themeColors.border.strong}`,\n\n      '&:hover': commonHoverStyles,\n      '&:active': commonActiveStyles,\n\n      ...(_isHovered && commonHoverStyles),\n      ...(_isPressed && commonActiveStyles),\n      ...(isDisabled && {\n        backgroundColor: themeColors.neutral.n150,\n        boxShadow: 'none'\n      })\n    }\n\n    const destructiveHoverStyles: CSSObject = {\n      backgroundColor: themeColors.special.red,\n      color: themeColors.static.white\n    }\n    const destructiveStyles: CSSObject = {\n      backgroundColor: 'transparent',\n      color: themeColors.special.red,\n      boxShadow: `0 0 0 1px inset ${themeColors.special.red}`,\n\n      '&:hover': destructiveHoverStyles,\n      '&:active': destructiveHoverStyles,\n\n      ...((_isHovered || _isPressed) && destructiveHoverStyles),\n      ...(isDisabled && {\n        opacity: 0.45\n      })\n    }\n\n    const hoverStyles: CSSObject = {\n      boxShadow: shadows.mid,\n      '&::before': {\n        backgroundColor: 'rgba(255, 255, 255, 0.2)'\n      }\n    }\n    const activeStyles: CSSObject = {\n      boxShadow: 'none',\n      '&::before': {\n        backgroundColor: 'rgba(0, 0, 0, 0.2)'\n      }\n    }\n\n    const buttonCss: CSSObject = {\n      backgroundColor: themeColors.primary.primary,\n      color: themeColors.static.white,\n      boxSizing: 'border-box',\n      border: 'none',\n      borderRadius: cornerRadius.s,\n      boxShadow: shadows.near,\n\n      ...(size === 'small'\n        ? smallStyles\n        : size === 'large'\n        ? largeStyles\n        : defaultStyles),\n\n      ...(variant === 'secondary'\n        ? secondaryStyles\n        : variant === 'tertiary'\n        ? tertiaryStyles\n        : variant === 'destructive'\n        ? destructiveStyles\n        : variant === 'common'\n        ? commonStyles\n        : primaryStyles),\n\n      '::before': {\n        zIndex: -1,\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        backgroundColor: 'rgba(0, 0, 0, 0)'\n      },\n\n      ...(variant !== 'tertiary' &&\n        variant !== 'common' && {\n          ':hover': hoverStyles,\n          ':active': activeStyles,\n          ...(_isHovered && hoverStyles),\n          ...(_isPressed && activeStyles)\n        })\n    }\n\n    const iconCss =\n      size === 'small'\n        ? smallIconStyles\n        : size === 'large'\n        ? largeIconStyles\n        : defaultIconStyles\n\n    const style: CSSCustomProperties =\n      variant === 'primary' && !isDisabled\n        ? {\n            backgroundColor:\n              hexColor ||\n              (color ? `var(${toCSSVariableName(color)})` : undefined)\n          }\n        : {}\n\n    return (\n      <BaseButton\n        ref={ref}\n        disabled={isDisabled}\n        styles={{\n          button: buttonCss,\n          icon: iconCss\n        }}\n        style={style}\n        {...baseProps}\n      />\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":";;;;;;;AAaA;;;;;AAKG;AACU,IAAA,MAAM,GAAG,UAAU,CAC9B,SAAS,MAAM,CAAC,KAAK,EAAE,GAAG,EAAA;AAEtB,IAAA,IAAA,KAAK,GAMH,KAAK,CANF,KAAA,EACL,QAAQ,GAKN,KAAK,CALC,QAAA,EACR,KAIE,KAAK,CAAA,OAJY,EAAnB,OAAO,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,SAAS,GAAA,EAAA,EACnB,EAGE,GAAA,KAAK,KAHS,EAAhB,IAAI,mBAAG,SAAS,GAAA,EAAA,EAChB,QAAQ,GAEN,KAAK,CAAA,QAFC,EACL,SAAS,GAAA,MAAA,CACV,KAAK,EAPH,CAAA,OAAA,EAAA,UAAA,EAAA,SAAA,EAAA,MAAA,EAAA,UAAA,CAOL,CADa,CACL;AACD,IAAA,IAAA,UAAU,GAA4B,SAAS,CAAA,UAArC,EAAE,UAAU,GAAgB,SAAS,CAAA,UAAzB,EAAE,SAAS,GAAK,SAAS,UAAd,CAAc;AACvD,IAAA,IAAM,UAAU,GAAG,QAAQ,IAAI,SAAS,CAAA;IAClC,IAAA,EAAA,GAOF,QAAQ,EAAE,EANZ,IAAI,GAAA,EAAA,CAAA,IAAA,EACG,WAAW,GAAA,EAAA,CAAA,KAAA,EAClB,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,UAAU,GAAA,EAAA,CAAA,UACE,CAAA;;AAGd,IAAA,IAAM,WAAW,GAAc;QAC7B,GAAG,EAAE,OAAO,CAAC,EAAE;QACf,MAAM,EAAE,OAAO,CAAC,KAAK;QACrB,aAAa,EAAE,OAAO,CAAC,CAAC;AACxB,QAAA,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;AAC3B,QAAA,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI;AAClC,QAAA,UAAU,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;AACnC,QAAA,aAAa,EAAE,YAAY;KAC5B,CAAA;AACD,IAAA,IAAM,eAAe,GAAc;AACjC,QAAA,MAAM,EAAE,CAAC;QACT,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,MAAM,EAAE,OAAO,CAAC,KAAK;KACtB,CAAA;AAED,IAAA,IAAM,aAAa,GAAc;QAC/B,GAAG,EAAE,OAAO,CAAC,CAAC;QACd,MAAM,EAAE,OAAO,CAAC,MAAM;QACtB,aAAa,EAAE,OAAO,CAAC,EAAE;AACzB,QAAA,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;AAC3B,QAAA,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI;AAClC,QAAA,UAAU,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;AACnC,QAAA,aAAa,EAAE,YAAY;KAC5B,CAAA;AACD,IAAA,IAAM,iBAAiB,GAAc;AACnC,QAAA,MAAM,EAAE,CAAC;QACT,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,MAAM,EAAE,OAAO,CAAC,KAAK;KACtB,CAAA;AAED,IAAA,IAAM,WAAW,GAAc;QAC7B,GAAG,EAAE,OAAO,CAAC,CAAC;QACd,MAAM,EAAE,OAAO,CAAC,MAAM;QACtB,aAAa,EAAE,OAAO,CAAC,EAAE;AACzB,QAAA,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE;AAC5B,QAAA,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI;AAClC,QAAA,UAAU,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;AACnC,QAAA,aAAa,EAAE,QAAQ;AACvB,QAAA,aAAa,EAAE,WAAW;KAC3B,CAAA;AACD,IAAA,IAAM,eAAe,GAAc;AACjC,QAAA,MAAM,EAAE,CAAC;QACT,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,MAAM,EAAE,OAAO,CAAC,KAAK;KACtB,CAAA;;AAGD,IAAA,IAAM,aAAa,GAAA,QAAA,CAAA,QAAA,CAAA,EACjB,SAAS,EAAE,EAAE,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,EAAA,GAE1C,CAAC,UAAU,IAAI,UAAU,KAAK,EAAE,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,EAClE,GAAC,UAAU,IAAI;AAChB,QAAA,eAAe,EAAE,WAAW,CAAC,OAAO,CAAC,IAAI;AACzC,QAAA,SAAS,EAAE,MAAM;AAClB,KAAA,EACF,CAAA;AAED,IAAA,IAAM,oBAAoB,GAAc;AACtC,QAAA,eAAe,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO;AAC5C,QAAA,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK;KAChC,CAAA;IACD,IAAM,eAAe,uBACnB,eAAe,EAAE,aAAa,EAC9B,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,EAC/B,SAAS,EAAE,0BAAmB,WAAW,CAAC,MAAM,CAAC,MAAM,CAAE,EAEzD,SAAS,EAAE,oBAAoB,EAC/B,UAAU,EAAE,oBAAoB,KAE5B,CAAC,UAAU,IAAI,UAAU,KAAK,oBAAoB,EACnD,GAAC,UAAU,IAAI;AAChB,QAAA,eAAe,EAAE,WAAW,CAAC,OAAO,CAAC,IAAI;AACzC,QAAA,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK;AAC/B,QAAA,SAAS,EAAE,MAAM;AAClB,KAAA,EACF,CAAA;AAED,IAAA,IAAM,mBAAmB,GAAc;AACrC,QAAA,eAAe,EAAE,WAAW,CAAC,UAAU,CAAC,KAAK;QAC7C,SAAS,EAAE,kBAAmB,CAAA,MAAA,CAAA,WAAW,CAAC,MAAM,CAAC,MAAM,EAAK,IAAA,CAAA,CAAA,MAAA,CAAA,OAAO,CAAC,GAAG,CAAE;AACzE,QAAA,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO;KAChC,CAAA;AACD,IAAA,IAAM,oBAAoB,GAAc;AACtC,QAAA,eAAe,EAAE,WAAW,CAAC,UAAU,CAAC,QAAQ;AAChD,QAAA,cAAc,EAAE,MAAM;AACtB,QAAA,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO;AAC/B,QAAA,SAAS,EAAE,kBAAmB,CAAA,MAAA,CAAA,WAAW,CAAC,MAAM,CAAC,MAAM,CAAE;KAC1D,CAAA;AACD,IAAA,IAAM,cAAc,GAAA,QAAA,CAAA,QAAA,CAAA,QAAA,CAAA,EAClB,eAAe,EACb,IAAI,KAAK,MAAM,GAAG,uBAAuB,GAAG,0BAA0B,EACxE,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,EAC/B,cAAc,EAAE,WAAW,EAC3B,SAAS,EAAE,kBAAmB,CAAA,MAAA,CAAA,WAAW,CAAC,MAAM,CAAC,OAAO,EAAK,IAAA,CAAA,CAAA,MAAA,CAAA,OAAO,CAAC,IAAI,CAAE,EAE3E,SAAS,EAAE,mBAAmB,EAC9B,UAAU,EAAE,oBAAoB,EAE7B,GAAC,UAAU,IAAI,mBAAmB,EAClC,GAAC,UAAU,IAAI,oBAAoB,EACnC,GAAC,UAAU,IAAI;AAChB,QAAA,OAAO,EAAE,IAAI;AACd,KAAA,EACF,CAAA;AAED,IAAA,IAAM,iBAAiB,GAAc;AACnC,QAAA,eAAe,EAAE,WAAW,CAAC,OAAO,CAAC,GAAG;KACzC,CAAA;AAED,IAAA,IAAM,kBAAkB,GAAc;AACpC,QAAA,eAAe,EAAE,WAAW,CAAC,OAAO,CAAC,IAAI;KAC1C,CAAA;IAED,IAAM,YAAY,gCAChB,eAAe,EAAE,WAAW,CAAC,OAAO,CAAC,KAAK,EAC1C,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,EAC/B,SAAS,EAAE,kBAAA,CAAA,MAAA,CAAmB,WAAW,CAAC,MAAM,CAAC,MAAM,CAAE,EAEzD,SAAS,EAAE,iBAAiB,EAC5B,UAAU,EAAE,kBAAkB,EAAA,GAE1B,UAAU,IAAI,iBAAiB,EAChC,GAAC,UAAU,IAAI,kBAAkB,EAAC,GACjC,UAAU,IAAI;AAChB,QAAA,eAAe,EAAE,WAAW,CAAC,OAAO,CAAC,IAAI;AACzC,QAAA,SAAS,EAAE,MAAM;AAClB,KAAA,EACF,CAAA;AAED,IAAA,IAAM,sBAAsB,GAAc;AACxC,QAAA,eAAe,EAAE,WAAW,CAAC,OAAO,CAAC,GAAG;AACxC,QAAA,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK;KAChC,CAAA;IACD,IAAM,iBAAiB,uBACrB,eAAe,EAAE,aAAa,EAC9B,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,GAAG,EAC9B,SAAS,EAAE,0BAAmB,WAAW,CAAC,OAAO,CAAC,GAAG,CAAE,EAEvD,SAAS,EAAE,sBAAsB,EACjC,UAAU,EAAE,sBAAsB,KAE9B,CAAC,UAAU,IAAI,UAAU,KAAK,sBAAsB,EACrD,GAAC,UAAU,IAAI;AAChB,QAAA,OAAO,EAAE,IAAI;AACd,KAAA,EACF,CAAA;AAED,IAAA,IAAM,WAAW,GAAc;QAC7B,SAAS,EAAE,OAAO,CAAC,GAAG;AACtB,QAAA,WAAW,EAAE;AACX,YAAA,eAAe,EAAE,0BAA0B;AAC5C,SAAA;KACF,CAAA;AACD,IAAA,IAAM,YAAY,GAAc;AAC9B,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,WAAW,EAAE;AACX,YAAA,eAAe,EAAE,oBAAoB;AACtC,SAAA;KACF,CAAA;AAED,IAAA,IAAM,SAAS,GACb,QAAA,CAAA,QAAA,CAAA,QAAA,CAAA,QAAA,CAAA,EAAA,eAAe,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,EAC5C,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK,EAC/B,SAAS,EAAE,YAAY,EACvB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,CAAC,CAAC,EAC5B,SAAS,EAAE,OAAO,CAAC,IAAI,KAEnB,IAAI,KAAK,OAAO;AAClB,UAAE,WAAW;UACX,IAAI,KAAK,OAAO;AAClB,cAAE,WAAW;AACb,cAAE,aAAa,KAEb,OAAO,KAAK,WAAW;AACzB,UAAE,eAAe;UACf,OAAO,KAAK,UAAU;AACxB,cAAE,cAAc;cACd,OAAO,KAAK,aAAa;AAC3B,kBAAE,iBAAiB;kBACjB,OAAO,KAAK,QAAQ;AACtB,sBAAE,YAAY;AACd,sBAAE,aAAa,EAAC,EAAA,EAElB,UAAU,EAAE;YACV,MAAM,EAAE,CAAC,CAAC;AACV,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,KAAK,EAAE,CAAC;AACR,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,eAAe,EAAE,kBAAkB;SACpC,EAEE,CAAA,GAAC,OAAO,KAAK,UAAU;QACxB,OAAO,KAAK,QAAQ,IAAA,QAAA,CAAA,QAAA,CAAA,EAClB,QAAQ,EAAE,WAAW,EACrB,SAAS,EAAE,YAAY,EACpB,GAAC,UAAU,IAAI,WAAW,EAAC,GAC1B,UAAU,IAAI,YAAY,EAC/B,EACJ,CAAA;AAED,IAAA,IAAM,OAAO,GACX,IAAI,KAAK,OAAO;AACd,UAAE,eAAe;UACf,IAAI,KAAK,OAAO;AAClB,cAAE,eAAe;cACf,iBAAiB,CAAA;AAEvB,IAAA,IAAM,KAAK,GACT,OAAO,KAAK,SAAS,IAAI,CAAC,UAAU;AAClC,UAAE;AACE,YAAA,eAAe,EACb,QAAQ;AACR,iBAAC,KAAK,GAAG,cAAO,iBAAiB,CAAC,KAAK,CAAC,EAAG,GAAA,CAAA,GAAG,SAAS,CAAC;AAC3D,SAAA;UACD,EAAE,CAAA;AAER,IAAA,QACEA,GAAA,CAAC,UAAU,EAAA,QAAA,CAAA,EACT,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,UAAU,EACpB,MAAM,EAAE;AACN,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,IAAI,EAAE,OAAO;AACd,SAAA,EACD,KAAK,EAAE,KAAK,IACR,SAAS,CAAA,CACb,EACH;AACH,CAAC;;;;"}

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

@@ -2,7 +2,7 @@ import { ComponentPropsWithoutRef } from 'react';
 import type { SpecialColors } from "../../../foundations/color";
 import { BaseButtonProps } from '../BaseButton/types';
 export type HTMLButtonProps = ComponentPropsWithoutRef<'button'>;
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'destructive';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'common';
 export type ButtonSize = 'small' | 'default' | 'large';
 export type ButtonProps = {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/button/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAEhD,OAAO,KAAK,EAAE,aAAa,EAAE,mCAAyB;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAErD,MAAM,MAAM,eAAe,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAA;AAEhE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,CAAA;AAEhF,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;AAEtD,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAA;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,MAAM,EAAE,CAAA;IAEvB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;IAEvB;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,GAAG,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/button/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAEhD,OAAO,KAAK,EAAE,aAAa,EAAE,mCAAyB;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAErD,MAAM,MAAM,eAAe,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAA;AAEhE,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,UAAU,GACV,aAAa,GACb,QAAQ,CAAA;AAEZ,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;AAEtD,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAA;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,MAAM,EAAE,CAAA;IAEvB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;IAEvB;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,GAAG,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAA"}

package/dist/components/hint/Hint.d.ts

@@ -1,7 +1,9 @@
+import { ReactNode } from 'react';
 import type { IconComponent } from "../icon";
 import { PaperProps } from "../layout/Paper";
 type HintProps = {
     icon: IconComponent;
+    actions?: ReactNode;
 } & PaperProps;
 export declare const Hint: (props: HintProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/hint/Hint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Hint.d.ts","sourceRoot":"","sources":["../../../src/components/hint/Hint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAuB;AACpD,OAAO,EAAS,UAAU,EAAE,wBAA+B;AAG3D,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,aAAa,CAAA;CACpB,GAAG,UAAU,CAAA;AAKd,eAAO,MAAM,IAAI,UAAW,SAAS,qDAoBpC,CAAA"}
+{"version":3,"file":"Hint.d.ts","sourceRoot":"","sources":["../../../src/components/hint/Hint.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAuB;AAEpD,OAAO,EAAS,UAAU,EAAE,wBAA+B;AAG3D,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,aAAa,CAAA;IACnB,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,GAAG,UAAU,CAAA;AAKd,eAAO,MAAM,IAAI,UAAW,SAAS,qDA2BpC,CAAA"}

package/dist/components/hint/Hint.js

@@ -1,14 +1,18 @@
 import { __rest, __assign } from '../../_virtual/_tslib.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import '../layout/Box/Box.js';
+import '@emotion/react';
+import { Flex } from '../layout/Flex/Flex.js';
 import { Paper } from '../layout/Paper/Paper.js';
+import '../layout/Popup/Popup.js';
 import { Text } from '../text/Text/Text.js';
 
 /*
  * A way of informing the user of important details in line in a prominent way.
  */
 var Hint = function (props) {
-    var Icon = props.icon, children = props.children, other = __rest(props, ["icon", "children"]);
-    return (jsxs(Paper, __assign({ role: 'alert', ph: 'l', pv: 'm', backgroundColor: 'surface2', alignItems: 'center', gap: 'l', shadow: 'flat', border: 'strong' }, other, { children: [jsx(Icon, { size: 'l', color: 'default' }), jsx(Text, __assign({ variant: 'body', color: 'default' }, { children: children }))] })));
+    var Icon = props.icon, children = props.children, actions = props.actions, other = __rest(props, ["icon", "children", "actions"]);
+    return (jsxs(Paper, __assign({ role: 'alert', backgroundColor: 'surface2', ph: 'l', pv: 'm', direction: 'column', gap: 'm', shadow: 'flat', border: 'strong' }, other, { children: [jsxs(Flex, __assign({ gap: 'l', alignItems: 'center' }, { children: [jsx(Icon, { size: 'l', color: 'default' }), jsx(Text, __assign({ variant: 'body', color: 'default' }, { children: children }))] })), actions ? (jsx(Flex, __assign({ pl: 'unit10', gap: 'l' }, { children: actions }))) : null] })));
 };
 
 export { Hint };

package/dist/components/hint/Hint.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hint.js","sources":["../../../src/components/hint/Hint.tsx"],"sourcesContent":["import type { IconComponent } from 'components/icon'\nimport { Paper, PaperProps } from 'components/layout/Paper'\nimport { Text } from 'components/text'\n\ntype HintProps = {\n  icon: IconComponent\n} & PaperProps\n\n/*\n * A way of informing the user of important details in line in a prominent way.\n */\nexport const Hint = (props: HintProps) => {\n  const { icon: Icon, children, ...other } = props\n  return (\n    <Paper\n      role='alert'\n      ph='l'\n      pv='m'\n      backgroundColor='surface2'\n      alignItems='center'\n      gap='l'\n      shadow='flat'\n      border='strong'\n      {...other}\n    >\n      <Icon size='l' color='default' />\n      <Text variant='body' color='default'>\n        {children}\n      </Text>\n    </Paper>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAQA;;AAEG;AACI,IAAM,IAAI,GAAG,UAAC,KAAgB,EAAA;AAC3B,IAAA,IAAM,IAAI,GAAyB,KAAK,CAA9B,IAAA,EAAE,QAAQ,GAAe,KAAK,CAApB,QAAA,EAAK,KAAK,GAAK,MAAA,CAAA,KAAK,EAA1C,CAAA,MAAA,EAAA,UAAA,CAAkC,CAAF,CAAU;AAChD,IAAA,QACEA,IAAA,CAAC,KAAK,EAAA,QAAA,CAAA,EACJ,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,eAAe,EAAC,UAAU,EAC1B,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAC,GAAG,EACP,MAAM,EAAC,MAAM,EACb,MAAM,EAAC,QAAQ,EAAA,EACX,KAAK,EAAA,EAAA,QAAA,EAAA,CAETC,GAAC,CAAA,IAAI,EAAC,EAAA,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,EACjCA,GAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EACjC,EAAA,EAAA,QAAA,EAAA,QAAQ,EACJ,CAAA,CAAA,CAAA,EAAA,CAAA,CACD,EACT;AACH;;;;"}
+{"version":3,"file":"Hint.js","sources":["../../../src/components/hint/Hint.tsx"],"sourcesContent":["import { ReactNode } from 'react'\n\nimport type { IconComponent } from 'components/icon'\nimport { Flex } from 'components/layout'\nimport { Paper, PaperProps } from 'components/layout/Paper'\nimport { Text } from 'components/text'\n\ntype HintProps = {\n  icon: IconComponent\n  actions?: ReactNode\n} & PaperProps\n\n/*\n * A way of informing the user of important details in line in a prominent way.\n */\nexport const Hint = (props: HintProps) => {\n  const { icon: Icon, children, actions, ...other } = props\n  return (\n    <Paper\n      role='alert'\n      backgroundColor='surface2'\n      ph='l'\n      pv='m'\n      direction='column'\n      gap='m'\n      shadow='flat'\n      border='strong'\n      {...other}\n    >\n      <Flex gap='l' alignItems='center'>\n        <Icon size='l' color='default' />\n        <Text variant='body' color='default'>\n          {children}\n        </Text>\n      </Flex>\n      {actions ? (\n        <Flex pl='unit10' gap='l'>\n          {actions}\n        </Flex>\n      ) : null}\n    </Paper>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAYA;;AAEG;AACI,IAAM,IAAI,GAAG,UAAC,KAAgB,EAAA;IAC3B,IAAM,IAAI,GAAkC,KAAK,CAAA,IAAvC,EAAE,QAAQ,GAAwB,KAAK,CAA7B,QAAA,EAAE,OAAO,GAAe,KAAK,QAApB,EAAK,KAAK,UAAK,KAAK,EAAnD,CAA2C,MAAA,EAAA,UAAA,EAAA,SAAA,CAAA,CAAF,CAAU;IACzD,QACEA,KAAC,KAAK,EAAA,QAAA,CAAA,EACJ,IAAI,EAAC,OAAO,EACZ,eAAe,EAAC,UAAU,EAC1B,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAC,GAAG,EACP,MAAM,EAAC,MAAM,EACb,MAAM,EAAC,QAAQ,EACX,EAAA,KAAK,eAETA,IAAC,CAAA,IAAI,aAAC,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAC/B,EAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAG,CAAA,EACjCA,GAAC,CAAA,IAAI,aAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAA,EAAA,EAAA,QAAA,EACjC,QAAQ,EAAA,CAAA,CACJ,CACF,EAAA,CAAA,CAAA,EACN,OAAO,IACNA,GAAA,CAAC,IAAI,EAAC,QAAA,CAAA,EAAA,EAAE,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG,EAAA,EAAA,EAAA,QAAA,EACtB,OAAO,EAAA,CAAA,CACH,IACL,IAAI,CACF,EAAA,CAAA,CAAA,EACT;AACH;;;;"}

package/dist/components/icon.d.ts

@@ -1,8 +1,7 @@
 import type { ComponentType, SVGProps } from 'react';
 import type { IconColors } from '../foundations/color/semantic';
 import type { ShadowOptions } from '../foundations/shadows';
-import { iconSizes } from '../foundations/spacing';
-type IconSize = keyof typeof iconSizes;
+import { IconSize } from '../foundations/spacing';
 type SVGBaseProps = SVGProps<SVGSVGElement>;
 export type IconProps = {
     color?: IconColors;

package/dist/components/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/components/icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAElD,KAAK,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAA;AAEtC,KAAK,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;AAE3C,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,aAAa,CAAA;CACvB,CAAA;AAED,KAAK,YAAY,GAAG,YAAY,GAAG,SAAS,CAAA;AAE5C,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,YAAY,GAAG,YAAY,CAAC,CAAA"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/components/icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEjD,KAAK,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;AAE3C,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,aAAa,CAAA;CACvB,CAAA;AAED,KAAK,YAAY,GAAG,YAAY,GAAG,SAAS,CAAA;AAE5C,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,YAAY,GAAG,YAAY,CAAC,CAAA"}

package/dist/components/input/PasswordInput/PasswordInput.js

@@ -11,6 +11,7 @@ import '../../button/FollowButton/FollowButton.js';
 import '../../button/FilterButton/FilterButton.js';
 import { IconButton } from '../../button/IconButton/IconButton.js';
 import { TextInput } from '../TextInput/TextInput.js';
+import '../TextInput/types.js';
 
 var messages = {
     hidePasswordInput: 'Hide password input',

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","sources":["../../../../src/components/input/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport { useToggle } from 'react-use'\n\nimport { IconButton } from 'components/button'\nimport { IconVisibilityHidden, IconVisibilityPublic } from 'icons'\n\nimport { TextInput } from '../TextInput'\n\nimport type { PasswordInputProps } from './types'\n\nconst messages = {\n  hidePasswordInput: 'Hide password input',\n  showPasswordInput: 'Show password input'\n}\n\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n  (props, ref) => {\n    const { hideVisibilityToggle, ...restProps } = props\n    const [isPasswordVisible, toggleIsPasswordVisible] = useToggle(false)\n    const VisibilityIcon = isPasswordVisible\n      ? IconVisibilityPublic\n      : IconVisibilityHidden\n\n    return (\n      <TextInput\n        ref={ref}\n        type={isPasswordVisible ? 'text' : 'password'}\n        endAdornment={\n          hideVisibilityToggle ? null : (\n            <IconButton\n              icon={VisibilityIcon}\n              color='subdued'\n              onClick={toggleIsPasswordVisible}\n              aria-label={\n                isPasswordVisible\n                  ? messages.hidePasswordInput\n                  : messages.showPasswordInput\n              }\n              ripple\n            />\n          )\n        }\n        {...restProps}\n      />\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;AAWA,IAAM,QAAQ,GAAG;AACf,IAAA,iBAAiB,EAAE,qBAAqB;AACxC,IAAA,iBAAiB,EAAE,qBAAqB;CACzC,CAAA;IAEY,aAAa,GAAG,UAAU,CACrC,UAAC,KAAK,EAAE,GAAG,EAAA;IACD,IAAA,oBAAoB,GAAmB,KAAK,CAAxB,oBAAA,EAAK,SAAS,GAAA,MAAA,CAAK,KAAK,EAA9C,CAAsC,sBAAA,CAAA,CAAF,CAAU;IAC9C,IAAA,EAAA,GAA+C,SAAS,CAAC,KAAK,CAAC,EAA9D,iBAAiB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,uBAAuB,GAAA,EAAA,CAAA,CAAA,CAAoB,CAAA;IACrE,IAAM,cAAc,GAAG,iBAAiB;AACtC,UAAE,oBAAoB;UACpB,oBAAoB,CAAA;IAExB,QACEA,IAAC,SAAS,EAAA,QAAA,CAAA,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,iBAAiB,GAAG,MAAM,GAAG,UAAU,EAC7C,YAAY,EACV,oBAAoB,GAAG,IAAI,IACzBA,GAAA,CAAC,UAAU,EACT,EAAA,IAAI,EAAE,cAAc,EACpB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,uBAAuB,EAAA,YAAA,EAE9B,iBAAiB;kBACb,QAAQ,CAAC,iBAAiB;AAC5B,kBAAE,QAAQ,CAAC,iBAAiB,EAEhC,MAAM,EACN,IAAA,EAAA,CAAA,CACH,EAEC,EAAA,SAAS,CACb,CAAA,EACH;AACH,CAAC;;;;"}
+{"version":3,"file":"PasswordInput.js","sources":["../../../../src/components/input/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport { useToggle } from 'react-use'\n\nimport { IconButton } from 'components/button'\nimport { IconVisibilityHidden, IconVisibilityPublic } from 'icons'\n\nimport { TextInput } from '../TextInput'\n\nimport type { PasswordInputProps } from './types'\n\nconst messages = {\n  hidePasswordInput: 'Hide password input',\n  showPasswordInput: 'Show password input'\n}\n\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n  (props, ref) => {\n    const { hideVisibilityToggle, ...restProps } = props\n    const [isPasswordVisible, toggleIsPasswordVisible] = useToggle(false)\n    const VisibilityIcon = isPasswordVisible\n      ? IconVisibilityPublic\n      : IconVisibilityHidden\n\n    return (\n      <TextInput\n        ref={ref}\n        type={isPasswordVisible ? 'text' : 'password'}\n        endAdornment={\n          hideVisibilityToggle ? null : (\n            <IconButton\n              icon={VisibilityIcon}\n              color='subdued'\n              onClick={toggleIsPasswordVisible}\n              aria-label={\n                isPasswordVisible\n                  ? messages.hidePasswordInput\n                  : messages.showPasswordInput\n              }\n              ripple\n            />\n          )\n        }\n        {...restProps}\n      />\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;AAWA,IAAM,QAAQ,GAAG;AACf,IAAA,iBAAiB,EAAE,qBAAqB;AACxC,IAAA,iBAAiB,EAAE,qBAAqB;CACzC,CAAA;IAEY,aAAa,GAAG,UAAU,CACrC,UAAC,KAAK,EAAE,GAAG,EAAA;IACD,IAAA,oBAAoB,GAAmB,KAAK,CAAxB,oBAAA,EAAK,SAAS,GAAA,MAAA,CAAK,KAAK,EAA9C,CAAsC,sBAAA,CAAA,CAAF,CAAU;IAC9C,IAAA,EAAA,GAA+C,SAAS,CAAC,KAAK,CAAC,EAA9D,iBAAiB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,uBAAuB,GAAA,EAAA,CAAA,CAAA,CAAoB,CAAA;IACrE,IAAM,cAAc,GAAG,iBAAiB;AACtC,UAAE,oBAAoB;UACpB,oBAAoB,CAAA;IAExB,QACEA,IAAC,SAAS,EAAA,QAAA,CAAA,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,iBAAiB,GAAG,MAAM,GAAG,UAAU,EAC7C,YAAY,EACV,oBAAoB,GAAG,IAAI,IACzBA,GAAA,CAAC,UAAU,EACT,EAAA,IAAI,EAAE,cAAc,EACpB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,uBAAuB,EAAA,YAAA,EAE9B,iBAAiB;kBACb,QAAQ,CAAC,iBAAiB;AAC5B,kBAAE,QAAQ,CAAC,iBAAiB,EAEhC,MAAM,EACN,IAAA,EAAA,CAAA,CACH,EAEC,EAAA,SAAS,CACb,CAAA,EACH;AACH,CAAC;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"SelectablePill.d.ts","sourceRoot":"","sources":["../../../../src/components/input/SelectablePill/SelectablePill.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAkBlD,eAAO,MAAM,cAAc,UAAW,mBAAmB,qDAqIxD,CAAA"}
+{"version":3,"file":"SelectablePill.d.ts","sourceRoot":"","sources":["../../../../src/components/input/SelectablePill/SelectablePill.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AASlD,eAAO,MAAM,cAAc,UAAW,mBAAmB,qDAuIxD,CAAA"}

package/dist/components/input/SelectablePill/SelectablePill.js

@@ -7,12 +7,15 @@ import { Text } from '../../text/Text/Text.js';
 
 var RadioInput = function (props) {
     var _a = useRadioGroup(props), name = _a.name, checked = _a.checked, onChange = _a.onChange;
-    var isSelected = props.isSelected;
-    return (jsx(HiddenInput, __assign({}, props, { name: name, checked: checked !== null && checked !== void 0 ? checked : isSelected, onChange: onChange })));
+    return (jsx(HiddenInput, __assign({}, props, { name: name, checked: checked, onChange: onChange })));
 };
 var SelectablePill = function (props) {
-    var isSelected = props.isSelected, _a = props.size, size = _a === void 0 ? 'small' : _a, _isHovered = props._isHovered, Icon = props.icon, className = props.className, other = __rest(props, ["isSelected", "size", "_isHovered", "icon", "className"]);
+    var _a;
+    var isSelectedProp = props.isSelected, _b = props.size, size = _b === void 0 ? 'small' : _b, _isHovered = props._isHovered, Icon = props.icon, className = props.className, other = __rest(props, ["isSelected", "size", "_isHovered", "icon", "className"]);
     var disabled = other.disabled, type = other.type;
+    var isSelected = type === 'checkbox' || type === 'radio'
+        ? (_a = other.checked) !== null && _a !== void 0 ? _a : isSelectedProp
+        : isSelectedProp;
     var theme = useTheme();
     var spacing = theme.spacing;
     var hoverCss = __assign({ backgroundColor: theme.color.secondary.s200, color: theme.color.static.white, border: "1px solid ".concat(theme.color.secondary.secondary) }, (size === 'large' && {
@@ -51,11 +54,10 @@ var SelectablePill = function (props) {
     var pillContent = (jsxs(Fragment, { children: [Icon ? jsx(Icon, { css: iconCss }) : null, 'label' in other ? (jsx(Text, __assign({ variant: size === 'oversized' ? 'heading' : 'body', tag: 'span', css: size === 'oversized' && { textTransform: 'uppercase' } }, { children: other.label }))) : null] }));
     switch (type) {
         case 'checkbox': {
-            var checked = other.checked, rest = __rest(other, ["checked"]);
-            return (jsxs("label", __assign({}, rootProps, { children: [pillContent, jsx(HiddenInput, __assign({}, rest, { checked: checked !== null && checked !== void 0 ? checked : isSelected }))] })));
+            return (jsxs("label", __assign({}, rootProps, { children: [pillContent, jsx(HiddenInput, __assign({}, other, { checked: isSelected }))] })));
         }
         case 'radio': {
-            return (jsxs("label", __assign({}, rootProps, { children: [pillContent, jsx(RadioInput, __assign({}, other, { isSelected: isSelected }))] })));
+            return (jsxs("label", __assign({}, rootProps, { children: [pillContent, jsx(RadioInput, __assign({}, other, { checked: isSelected }))] })));
         }
         case 'button':
         case 'reset':

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

@@ -1 +1 @@
-{"version":3,"file":"SelectablePill.js","sources":["../../../../src/components/input/SelectablePill/SelectablePill.tsx"],"sourcesContent":["import { ComponentProps } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\n\nimport { HiddenInput } from 'components/common/HiddenInput'\nimport { useRadioGroup } from 'components/radio-group/useRadioGroup'\nimport { Text } from 'components/text'\n\nimport type { SelectablePillProps } from './types'\n\nconst RadioInput = (\n  props: ComponentProps<'input'> & { isSelected?: boolean }\n) => {\n  const { name, checked, onChange } = useRadioGroup(props)\n  const { isSelected } = props\n\n  return (\n    <HiddenInput\n      {...props}\n      name={name}\n      checked={checked ?? isSelected}\n      onChange={onChange}\n    />\n  )\n}\n\nexport const SelectablePill = (props: SelectablePillProps) => {\n  const {\n    isSelected,\n    size = 'small',\n    _isHovered,\n    icon: Icon,\n    className,\n    ...other\n  } = props\n\n  const { disabled, type } = other\n\n  const theme = useTheme()\n  const { spacing } = theme\n\n  const hoverCss: CSSObject = {\n    backgroundColor: theme.color.secondary.s200,\n    color: theme.color.static.white,\n    border: `1px solid ${theme.color.secondary.secondary}`,\n    ...(size === 'large' && {\n      backgroundColor: theme.color.secondary.s100,\n      border: `1px solid ${theme.color.secondary.s200}`,\n      boxShadow: 'none'\n    })\n  }\n\n  const activeCss: CSSObject = {\n    backgroundColor: theme.color.secondary.s400,\n    color: theme.color.static.white,\n    border: `1px solid ${theme.color.secondary.s400}`,\n\n    ...(size === 'large' && {\n      boxShadow: 'none'\n    })\n  }\n\n  const rootCss: CSSObject = {\n    display: 'inline-flex',\n    position: 'relative',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: theme.spacing.xs,\n    color: theme.color.text.default,\n    backgroundColor: theme.color.background.white,\n    cursor: 'pointer',\n    userSelect: 'none',\n    transition: 'all 0.12s ease-out',\n    textWrap: 'nowrap',\n    border: `1px solid ${theme.color.border.strong}`,\n    borderRadius: theme.cornerRadius['2xl'],\n    ...(size === 'small' && {\n      height: theme.spacing.xl,\n      paddingInline: theme.spacing.m\n    }),\n    ...(size === 'large' && {\n      height: theme.spacing['2xl'],\n      paddingInline: theme.spacing.l,\n      boxShadow: theme.shadows.near\n    }),\n    ...(size === 'oversized' && {\n      height: spacing.unit12,\n      padding: spacing.m,\n      borderWidth: 2\n    }),\n    ...(disabled && { opacity: 0.45 }),\n    ...(_isHovered && hoverCss),\n    ...(isSelected && activeCss),\n    ...((disabled || _isHovered) && {\n      pointerEvents: 'none'\n    }),\n    ':hover': hoverCss,\n    ':active': activeCss\n  }\n\n  const iconCss = {\n    width: spacing.l,\n    height: spacing.l,\n\n    '& path': {\n      fill: 'currentColor'\n    }\n  }\n\n  const rootProps = {\n    css: rootCss,\n    className\n  }\n\n  const pillContent = (\n    <>\n      {Icon ? <Icon css={iconCss} /> : null}\n      {'label' in other ? (\n        <Text\n          variant={size === 'oversized' ? 'heading' : 'body'}\n          tag='span'\n          css={size === 'oversized' && { textTransform: 'uppercase' }}\n        >\n          {other.label}\n        </Text>\n      ) : null}\n    </>\n  )\n\n  switch (type) {\n    case 'checkbox': {\n      const { checked, ...rest } = other\n\n      return (\n        <label {...rootProps}>\n          {pillContent}\n          <HiddenInput {...rest} checked={checked ?? isSelected} />\n        </label>\n      )\n    }\n    case 'radio': {\n      return (\n        <label {...rootProps}>\n          {pillContent}\n          <RadioInput {...other} isSelected={isSelected} />\n        </label>\n      )\n    }\n    case 'button':\n    case 'reset':\n    case 'submit':\n    default: {\n      return (\n        <button {...rootProps} {...other}>\n          {pillContent}\n        </button>\n      )\n    }\n  }\n}\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"SelectablePill.js","sources":["../../../../src/components/input/SelectablePill/SelectablePill.tsx"],"sourcesContent":["import { ComponentProps } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\n\nimport { HiddenInput } from 'components/common/HiddenInput'\nimport { useRadioGroup } from 'components/radio-group/useRadioGroup'\nimport { Text } from 'components/text'\n\nimport type { SelectablePillProps } from './types'\n\nconst RadioInput = (props: ComponentProps<'input'>) => {\n  const { name, checked, onChange } = useRadioGroup(props)\n  return (\n    <HiddenInput {...props} name={name} checked={checked} onChange={onChange} />\n  )\n}\n\nexport const SelectablePill = (props: SelectablePillProps) => {\n  const {\n    isSelected: isSelectedProp,\n    size = 'small',\n    _isHovered,\n    icon: Icon,\n    className,\n    ...other\n  } = props\n\n  const { disabled, type } = other\n  const isSelected =\n    type === 'checkbox' || type === 'radio'\n      ? other.checked ?? isSelectedProp\n      : isSelectedProp\n\n  const theme = useTheme()\n  const { spacing } = theme\n\n  const hoverCss: CSSObject = {\n    backgroundColor: theme.color.secondary.s200,\n    color: theme.color.static.white,\n    border: `1px solid ${theme.color.secondary.secondary}`,\n    ...(size === 'large' && {\n      backgroundColor: theme.color.secondary.s100,\n      border: `1px solid ${theme.color.secondary.s200}`,\n      boxShadow: 'none'\n    })\n  }\n\n  const activeCss: CSSObject = {\n    backgroundColor: theme.color.secondary.s400,\n    color: theme.color.static.white,\n    border: `1px solid ${theme.color.secondary.s400}`,\n\n    ...(size === 'large' && {\n      boxShadow: 'none'\n    })\n  }\n\n  const rootCss: CSSObject = {\n    display: 'inline-flex',\n    position: 'relative',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: theme.spacing.xs,\n    color: theme.color.text.default,\n    backgroundColor: theme.color.background.white,\n    cursor: 'pointer',\n    userSelect: 'none',\n    transition: 'all 0.12s ease-out',\n    textWrap: 'nowrap',\n    border: `1px solid ${theme.color.border.strong}`,\n    borderRadius: theme.cornerRadius['2xl'],\n    ...(size === 'small' && {\n      height: theme.spacing.xl,\n      paddingInline: theme.spacing.m\n    }),\n    ...(size === 'large' && {\n      height: theme.spacing['2xl'],\n      paddingInline: theme.spacing.l,\n      boxShadow: theme.shadows.near\n    }),\n    ...(size === 'oversized' && {\n      height: spacing.unit12,\n      padding: spacing.m,\n      borderWidth: 2\n    }),\n    ...(disabled && { opacity: 0.45 }),\n    ...(_isHovered && hoverCss),\n    ...(isSelected && activeCss),\n    ...((disabled || _isHovered) && {\n      pointerEvents: 'none'\n    }),\n    ':hover': hoverCss,\n    ':active': activeCss\n  }\n\n  const iconCss = {\n    width: spacing.l,\n    height: spacing.l,\n\n    '& path': {\n      fill: 'currentColor'\n    }\n  }\n\n  const rootProps = {\n    css: rootCss,\n    className\n  }\n\n  const pillContent = (\n    <>\n      {Icon ? <Icon css={iconCss} /> : null}\n      {'label' in other ? (\n        <Text\n          variant={size === 'oversized' ? 'heading' : 'body'}\n          tag='span'\n          css={size === 'oversized' && { textTransform: 'uppercase' }}\n        >\n          {other.label}\n        </Text>\n      ) : null}\n    </>\n  )\n\n  switch (type) {\n    case 'checkbox': {\n      return (\n        <label {...rootProps}>\n          {pillContent}\n          <HiddenInput {...other} checked={isSelected} />\n        </label>\n      )\n    }\n    case 'radio': {\n      return (\n        <label {...rootProps}>\n          {pillContent}\n          <RadioInput {...other} checked={isSelected} />\n        </label>\n      )\n    }\n    case 'button':\n    case 'reset':\n    case 'submit':\n    default: {\n      return (\n        <button {...rootProps} {...other}>\n          {pillContent}\n        </button>\n      )\n    }\n  }\n}\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

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

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

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

@@ -1 +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"}
+{"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,aAAa,EAAE,MAAM,SAAS,CAAA"}

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

@@ -50,7 +50,7 @@ export type TextInputProps = Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'r
      */
     hideLabel?: boolean;
     /**
-     * Label Text. Required to provide due to accessibility. If the hideLabel is true, the label used via aria-label
+     * Label Text. Required due to accessibility. If hideLabel is true, the label is set via aria-label
      */
     label: string;
     /**

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

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

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

@@ -4,6 +4,7 @@ import { forwardRef, useCallback } from 'react';
 import BN from 'bn.js';
 import { useControlled } from '../../../hooks/useControlled.js';
 import { TextInput } from '../TextInput/TextInput.js';
+import '../TextInput/types.js';
 
 /**
  * Format a number to have commas

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

@@ -1 +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":";;;;;;;AAUA;;AAEG;AACH,IAAM,kBAAkB,GAAG,UAAC,GAAoB,EAAA;IAC9C,IAAM,KAAK,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IACvC,QACE,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,uBAAuB,EAAE,GAAG,CAAC;SAC7C,KAAK,CAAC,CAAC,CAAC,KAAK,SAAS,GAAG,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,EAC/C;AACH,CAAC,CAAA;IAEY,gBAAgB,GAAG,UAAU,CACxC,UAAC,KAA4B,EAAE,GAA0B,EAAA;AAErD,IAAA,IAAA,UAAU,GAMR,KAAK,CANG,UAAA,EACV,KAKE,KAAK,CAAA,QALK,EAAZ,QAAQ,mBAAG,CAAC,GAAA,EAAA,EACZ,EAIE,GAAA,KAAK,QAJQ,EAAf,OAAO,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,KAAA,EACR,SAAS,GAGd,KAAK,CAAA,KAHS,EAChB,QAAQ,GAEN,KAAK,CAAA,QAFC,EACL,KAAK,GAAA,MAAA,CACN,KAAK,EAPH,CAAA,YAAA,EAAA,UAAA,EAAA,SAAA,EAAA,OAAA,EAAA,UAAA,CAOL,CADS,CACD;IAEH,IAAA,EAAA,GAAyB,aAAa,CAAC;AAC3C,QAAA,cAAc,EAAE,SAAS,GAAG,kBAAkB,CAAC,SAAS,CAAC,GAAG,SAAS;AACrE,QAAA,YAAY,EAAE,EAAE;AAChB,QAAA,aAAa,EAAE,kBAAkB;AAClC,KAAA,CAAC,EAJK,KAAK,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,QAIzB,CAAA;AAEF,IAAA,IAAM,YAAY,GAAyC,WAAW,CACpE,UAAC,CAAC,EAAA;AACA,QAAA,IAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAA;;QAErD,IAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,yCAAyC,CAAC,CAAA;QAC9D,IAAA,EAAA,GAA0B,CAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,MAAM,KAAI,EAAE,EAA3C,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,GAAG,SAAwB,CAAA;;AAGnD,QAAA,IAAM,YAAY,GAChB,GAAG,IAAI,QAAQ,IAAI,CAAC,OAAO;AACzB,cAAE,EAAA,CAAA,MAAA,CAAG,KAAK,EAAA,GAAA,CAAA,CAAA,MAAA,CAAI,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAE;cAC5C,KAAK,CAAA;;AAGX,QAAA,IAAI,MAAM,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC,CAAA;AAC1B,QAAA,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,IAAA,CAAA,GAAA,CAAA,EAAE,EAAI,QAAQ,CAAA,CAAC,CAAC,CAAA;AAC3C,QAAA,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;AAC1D,QAAA,aAAa,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAA;AAC/C,QAAA,IAAI,QAAQ,EAAE;AACZ,YAAA,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC,CAAA;AAC/B,SAAA;KACF,EACD,CAAC,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,CAC7C,CAAA;IACD,QACEA,IAAC,SAAS,EAAA,QAAA,CAAA,EACR,GAAG,EAAE,GAAG,EACJ,EAAA,KAAK,EACT,EAAA,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,gBAAgB,EAAE,UAAU,EAC5B,CAAA,CAAA,EACH;AACH,CAAC;;;;"}
+{"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/text/Text/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/components/text/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAA;AAU7D,eAAO,MAAM,IAAI,4WA8DhB,CAAA"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/components/text/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAA;AAU7D,eAAO,MAAM,IAAI,4WAoEhB,CAAA"}

package/dist/components/text/Text/Text.js

@@ -8,10 +8,10 @@ import { variantTagMap, variantStylesMap } from './constants.js';
 
 var Text = forwardRef(function (props, ref) {
     var _a, _b;
-    var children = props.children, variant = props.variant, _c = props.strength, strength = _c === void 0 ? 'default' : _c, _d = props.size, size = _d === void 0 ? 'm' : _d, color = props.color, shadow = props.shadow, tag = props.tag, asChild = props.asChild, textAlign = props.textAlign, other = __rest(props, ["children", "variant", "strength", "size", "color", "shadow", "tag", "asChild", "textAlign"]);
+    var children = props.children, variant = props.variant, _c = props.strength, strength = _c === void 0 ? 'default' : _c, _d = props.size, size = _d === void 0 ? 'm' : _d, color = props.color, shadow = props.shadow, tag = props.tag, asChild = props.asChild, textAlign = props.textAlign, ellipses = props.ellipses, other = __rest(props, ["children", "variant", "strength", "size", "color", "shadow", "tag", "asChild", "textAlign", "ellipses"]);
     var theme = useTheme();
     var variantConfig = variant && variantStylesMap[variant];
-    var styles = __assign(__assign(__assign({ fontFamily: "'Avenir Next LT Pro', 'Helvetica Neue', Helvetica,\n    Arial, sans-serif", position: 'relative', boxSizing: 'border-box' }, (color &&
+    var css = __assign(__assign(__assign(__assign(__assign(__assign({ fontFamily: "'Avenir Next LT Pro', 'Helvetica Neue', Helvetica,\n    Arial, sans-serif", position: 'relative', boxSizing: 'border-box' }, (color &&
         color === 'heading' && {
         // inline is necessary to prevent text clipping
         display: 'inline',
@@ -19,19 +19,23 @@ var Text = forwardRef(function (props, ref) {
         WebkitTextFillColor: 'transparent',
         backgroundClip: 'text',
         backgroundImage: theme.color.text.heading
-    })), (color && color !== 'heading' && { color: theme.color.text[color] })), (variantConfig && __assign(__assign(__assign({ 
+    })), (color && color !== 'heading' && { color: theme.color.text[color] })), (variantConfig && __assign({ 
         // @ts-ignore
         fontSize: typography.size[variantConfig.fontSize[size]], 
         // @ts-ignore
         lineHeight: typography.lineHeight[variantConfig.lineHeight[size]], 
         // @ts-ignore
-        fontWeight: typography.weight[variantConfig.fontWeight[strength]] }, ('css' in variantConfig && variantConfig.css)), (shadow && {
+        fontWeight: typography.weight[variantConfig.fontWeight[strength]] }, ('css' in variantConfig && variantConfig.css)))), (shadow && {
         textShadow: typography.shadow[shadow]
-    })), { textAlign: textAlign })));
+    })), { textAlign: textAlign }), (ellipses && {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+    }));
     // @ts-ignore
     var variantTag = variant && ((_a = variantTagMap[variant]) === null || _a === void 0 ? void 0 : _a[size]);
-    var Tag = asChild ? Slot : (_b = tag !== null && tag !== void 0 ? tag : variantTag) !== null && _b !== void 0 ? _b : 'p';
-    return (jsx(Tag, __assign({ ref: ref, css: styles }, other, { children: children })));
+    var Tag = asChild ? Slot : (_b = tag !== null && tag !== void 0 ? tag : variantTag) !== null && _b !== void 0 ? _b : 'span';
+    return (jsx(Tag, __assign({ ref: ref, css: css }, other, { children: children })));
 });
 
 export { Text };

package/dist/components/text/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../../../src/components/text/Text/Text.tsx"],"sourcesContent":["import { ElementType, ForwardedRef, forwardRef } from 'react'\n\nimport { useTheme } from '@emotion/react'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { typography } from '../../../foundations/typography'\n\nimport { variantStylesMap, variantTagMap } from './constants'\nimport type { TextProps } from './types'\n\nexport const Text = forwardRef(\n  <TextComponentType extends ElementType = 'p'>(\n    props: TextProps<TextComponentType>,\n    ref: ForwardedRef<TextComponentType>\n  ) => {\n    const {\n      children,\n      variant,\n      strength = 'default',\n      size = 'm',\n      color,\n      shadow,\n      tag,\n      asChild,\n      textAlign,\n      ...other\n    } = props\n\n    const theme = useTheme()\n\n    const variantConfig = variant && variantStylesMap[variant]\n    const styles = {\n      fontFamily: `'Avenir Next LT Pro', 'Helvetica Neue', Helvetica,\n    Arial, sans-serif`,\n      position: 'relative',\n      boxSizing: 'border-box',\n      ...(color &&\n        color === 'heading' && {\n          // inline is necessary to prevent text clipping\n          display: 'inline',\n          color: theme.color.secondary.secondary,\n          WebkitTextFillColor: 'transparent',\n          backgroundClip: 'text',\n          backgroundImage: theme.color.text.heading\n        }),\n      ...(color && color !== 'heading' && { color: theme.color.text[color] }),\n      ...(variantConfig && {\n        // @ts-ignore\n        fontSize: typography.size[variantConfig.fontSize[size]],\n        // @ts-ignore\n        lineHeight: typography.lineHeight[variantConfig.lineHeight[size]],\n        // @ts-ignore\n        fontWeight: typography.weight[variantConfig.fontWeight[strength]],\n        ...('css' in variantConfig && variantConfig.css),\n        ...(shadow && {\n          textShadow: typography.shadow[shadow]\n        }),\n        textAlign\n      })\n    }\n\n    // @ts-ignore\n    const variantTag = variant && variantTagMap[variant]?.[size]\n\n    const Tag: ElementType = asChild ? Slot : tag ?? variantTag ?? 'p'\n\n    return (\n      <Tag ref={ref} css={styles} {...other}>\n        {children}\n      </Tag>\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"Text.js","sources":["../../../../src/components/text/Text/Text.tsx"],"sourcesContent":["import { ElementType, ForwardedRef, forwardRef } from 'react'\n\nimport { useTheme } from '@emotion/react'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { typography } from '../../../foundations/typography'\n\nimport { variantStylesMap, variantTagMap } from './constants'\nimport type { TextProps } from './types'\n\nexport const Text = forwardRef(\n  <TextComponentType extends ElementType = 'p'>(\n    props: TextProps<TextComponentType>,\n    ref: ForwardedRef<TextComponentType>\n  ) => {\n    const {\n      children,\n      variant,\n      strength = 'default',\n      size = 'm',\n      color,\n      shadow,\n      tag,\n      asChild,\n      textAlign,\n      ellipses,\n      ...other\n    } = props\n\n    const theme = useTheme()\n\n    const variantConfig = variant && variantStylesMap[variant]\n    const css = {\n      fontFamily: `'Avenir Next LT Pro', 'Helvetica Neue', Helvetica,\n    Arial, sans-serif`,\n      position: 'relative',\n      boxSizing: 'border-box',\n      ...(color &&\n        color === 'heading' && {\n          // inline is necessary to prevent text clipping\n          display: 'inline',\n          color: theme.color.secondary.secondary,\n          WebkitTextFillColor: 'transparent',\n          backgroundClip: 'text',\n          backgroundImage: theme.color.text.heading\n        }),\n      ...(color && color !== 'heading' && { color: theme.color.text[color] }),\n      ...(variantConfig && {\n        // @ts-ignore\n        fontSize: typography.size[variantConfig.fontSize[size]],\n        // @ts-ignore\n        lineHeight: typography.lineHeight[variantConfig.lineHeight[size]],\n        // @ts-ignore\n        fontWeight: typography.weight[variantConfig.fontWeight[strength]],\n        ...('css' in variantConfig && variantConfig.css)\n      }),\n      ...(shadow && {\n        textShadow: typography.shadow[shadow]\n      }),\n      textAlign,\n      ...(ellipses && {\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n        whiteSpace: 'nowrap'\n      })\n    }\n\n    // @ts-ignore\n    const variantTag = variant && variantTagMap[variant]?.[size]\n\n    const Tag: ElementType = asChild ? Slot : tag ?? variantTag ?? 'span'\n\n    return (\n      <Tag ref={ref} css={css} {...other}>\n        {children}\n      </Tag>\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":"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"}