@audius/harmony 0.3.5 → 0.4.2

package/dist/components/hover-card/HoverCardHeader.d.ts

@@ -0,0 +1,6 @@
+import { HoverCardHeaderProps } from './types';
+/**
+ * A shared base component for hover card headers
+ */
+export declare const HoverCardHeader: ({ iconLeft, title, onClose, iconRight }: HoverCardHeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HoverCardHeader.d.ts.map

package/dist/components/hover-card/HoverCardHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCardHeader.d.ts","sourceRoot":"","sources":["../../../src/components/hover-card/HoverCardHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE9C;;GAEG;AACH,eAAO,MAAM,eAAe,4CAKzB,oBAAoB,qDA2CtB,CAAA"}

package/dist/components/hover-card/HoverCardHeader.js

@@ -0,0 +1,64 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import '../../foundations/color/semantic.js';
+import '../../foundations/color/color.js';
+import 'react';
+import '@emotion/react';
+import '../../foundations/theme/theme.js';
+import '../layout/Box/Box.js';
+import { Flex } from '../layout/Flex/Flex.js';
+import '../skeleton/Skeleton.js';
+import '../common/HiddenInput.js';
+import '../radio-group/RadioGroupContext.js';
+import { Text } from '../text/Text.js';
+import '../input/TextInput/TextInput.js';
+import '../input/TextInput/types.js';
+import '../input/PasswordInput/PasswordInput.js';
+import '../input/TokenAmountInput/TokenAmountInput.js';
+import '../layout/Paper/Paper.js';
+import '../button/Button/Button.js';
+import '../button/PlainButton/PlainButton.js';
+import '@emotion/css';
+import '../button/FollowButton/FollowButton.js';
+import { IconButton } from '../button/IconButton/IconButton.js';
+import '../button/UnstyledButton.js';
+import '../button/FilterButton/FilterButton.js';
+import '../button/FilterButton/FilterButtonOption.js';
+import '@react-spring/web';
+import 'classnames';
+import '../text-link/TextLink.js';
+import '../switch/Switch.js';
+import '@juggle/resize-observer';
+import 'react-merge-refs';
+import 'react-use-measure';
+import '../scrollbar/Scrollbar.js';
+import '../popup/Popup.js';
+import '../popup-menu/PopupMenu.js';
+import '../modal/Modal.js';
+import '../modal/ModalContext.js';
+import 'react-spring/renderprops.cjs';
+import '../modal/ModalHeader.js';
+import '../modal/ModalFooter.js';
+import '../modal/types.js';
+import 'lodash';
+import 'numeral';
+import '../../contexts/MediaContext.js';
+import 'color';
+import 'lottie-react';
+import '../pill/Pill.js';
+import '../select/Select/Select.js';
+import '../checkbox/Checkbox.js';
+import './HoverCard.js';
+import '../internal/MenuItem.js';
+import '../../hooks/useHotKeys.js';
+
+/**
+ * A shared base component for hover card headers
+ */
+var HoverCardHeader = function (_a) {
+    var iconLeft = _a.iconLeft, title = _a.title, onClose = _a.onClose, iconRight = _a.iconRight;
+    return (jsxs(Flex, __assign({ w: '100%', alignSelf: 'stretch', backgroundColor: 'surface1', borderBottom: 'default', p: 'xs', pl: 'xs', pr: 's', alignItems: 'center', justifyContent: 'space-between' }, { children: [jsxs(Flex, __assign({ alignSelf: 'stretch', alignItems: 'center', gap: 'xs' }, { children: [iconLeft ? (jsx(IconButton, { icon: iconLeft, color: 'subdued', size: 'l', "aria-label": '', onClick: onClose })) : null, jsx(Text, __assign({ variant: 'label', size: 's', color: 'default', textTransform: 'uppercase' }, { children: title }))] })), iconRight ? (jsx(IconButton, { icon: iconRight, color: 'subdued', size: 's', "aria-label": 'Close', onClick: onClose })) : null] })));
+};
+
+export { HoverCardHeader };
+//# sourceMappingURL=HoverCardHeader.js.map

package/dist/components/hover-card/HoverCardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCardHeader.js","sources":["../../../src/components/hover-card/HoverCardHeader.tsx"],"sourcesContent":["import { Flex, Text, IconButton } from '~harmony/index'\n\nimport { HoverCardHeaderProps } from './types'\n\n/**\n * A shared base component for hover card headers\n */\nexport const HoverCardHeader = ({\n  iconLeft,\n  title,\n  onClose,\n  iconRight\n}: HoverCardHeaderProps) => {\n  return (\n    <Flex\n      w='100%'\n      alignSelf='stretch'\n      backgroundColor='surface1'\n      borderBottom='default'\n      p='xs'\n      pl='xs'\n      pr='s'\n      alignItems='center'\n      justifyContent='space-between'\n    >\n      <Flex alignSelf='stretch' alignItems='center' gap='xs'>\n        {iconLeft ? (\n          <IconButton\n            icon={iconLeft}\n            color='subdued'\n            size='l'\n            aria-label={''}\n            onClick={onClose}\n          />\n        ) : null}\n        <Text\n          variant='label'\n          size='s'\n          color='default'\n          textTransform='uppercase'\n        >\n          {title}\n        </Text>\n      </Flex>\n      {iconRight ? (\n        <IconButton\n          icon={iconRight}\n          color='subdued'\n          size='s'\n          aria-label='Close'\n          onClick={onClose}\n        />\n      ) : null}\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;AAEG;AACI,IAAM,eAAe,GAAG,UAAC,EAKT,EAAA;QAJrB,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,SAAS,GAAA,EAAA,CAAA,SAAA,CAAA;AAET,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EACH,CAAC,EAAC,MAAM,EACR,SAAS,EAAC,SAAS,EACnB,eAAe,EAAC,UAAU,EAC1B,YAAY,EAAC,SAAS,EACtB,CAAC,EAAC,IAAI,EACN,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,GAAG,EACN,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,EAAA,EAAA,EAAA,QAAA,EAAA,CAE9BA,KAAC,IAAI,EAAA,QAAA,CAAA,EAAC,SAAS,EAAC,SAAS,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EACnD,EAAA,EAAA,QAAA,EAAA,CAAA,QAAQ,IACPC,GAAA,CAAC,UAAU,EAAA,EACT,IAAI,EAAE,QAAQ,EACd,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,GAAG,EAAA,YAAA,EACI,EAAE,EACd,OAAO,EAAE,OAAO,EAChB,CAAA,IACA,IAAI,EACRA,GAAC,CAAA,IAAI,EACH,QAAA,CAAA,EAAA,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,GAAG,EACR,KAAK,EAAC,SAAS,EACf,aAAa,EAAC,WAAW,gBAExB,KAAK,EAAA,CAAA,CACD,CACF,EAAA,CAAA,CAAA,EACN,SAAS,IACRA,GAAC,CAAA,UAAU,EACT,EAAA,IAAI,EAAE,SAAS,EACf,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,GAAG,EAAA,YAAA,EACG,OAAO,EAClB,OAAO,EAAE,OAAO,EAChB,CAAA,IACA,IAAI,CAAA,EAAA,CAAA,CACH,EACR;AACH;;;;"}

package/dist/components/hover-card/index.d.ts

@@ -0,0 +1,4 @@
+export { HoverCard } from './HoverCard';
+export { HoverCardHeader } from './HoverCardHeader';
+export type { HoverCardProps, HoverCardHeaderProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/hover-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/hover-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,YAAY,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/hover-card/types.d.ts

@@ -0,0 +1,66 @@
+import { ReactNode } from 'react';
+import { TriggerType } from '../../hooks/useHoverDelay';
+import { IconComponent } from '../icon';
+import { Origin } from '../popup/types';
+export type HoverCardProps = {
+    /**
+     * Content displayed as the hover trigger
+     */
+    children: ReactNode;
+    /**
+     * Content displayed inside the hover card
+     */
+    content: ReactNode;
+    /**
+     * Optional CSS class name
+     */
+    className?: string;
+    /**
+     * Callback fired when the hover card is closed
+     */
+    onClose?: () => void;
+    /**
+     * Callback fired when the hover card is clicked
+     */
+    onClick?: () => void;
+    /**
+     * Position of the anchor origin
+     * @default { horizontal: 'right', vertical: 'center' }
+     */
+    anchorOrigin?: Origin;
+    /**
+     * Position of the transform origin
+     * @default { horizontal: 'left', vertical: 'center' }
+     */
+    transformOrigin?: Origin;
+    /**
+     * Delay in seconds before the hover card appears after mouse enter
+     * @default 0.5
+     */
+    mouseEnterDelay?: number;
+    /**
+     * Whether to trigger the hover card on hover, click, or both
+     * @default 'hover'
+     */
+    triggeredBy?: TriggerType;
+};
+export type HoverCardHeaderProps = {
+    /**
+     * Optional icon to display on the left side of the header
+     */
+    iconLeft?: IconComponent;
+    /**
+     * Optional icon to display on the right side of the header
+     */
+    iconRight?: IconComponent;
+    /**
+     * The title to display in the header
+     */
+    title: string;
+    /**
+     * Optional callback when the close button is clicked.
+     * If not provided, the close button will be rendered as a non-interactive icon.
+     */
+    onClose?: () => void;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/hover-card/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/hover-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEvC,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;IAEnB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAA;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAA;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA"}

package/dist/components/icon-text/IconText.js

@@ -8,8 +8,8 @@ import '../layout/Paper/Paper.js';
 import { Text } from '../text/Text.js';
 
 var IconText = function (_a) {
-    var children = _a.children, _b = _a.color, color = _b === void 0 ? 'default' : _b, _c = _a.icons, icons = _c === void 0 ? [] : _c;
-    var separator = (jsx(Text, __assign({ variant: 'body', color: 'default', css: { fontSize: 8, lineHeight: 20 } }, { children: "\u2022" })));
+    var children = _a.children, _b = _a.color, color = _b === void 0 ? 'subdued' : _b, _c = _a.icons, icons = _c === void 0 ? [] : _c;
+    var separator = (jsx(Text, __assign({ variant: 'body', color: color, css: { fontSize: 8, lineHeight: 20 } }, { children: "\u2022" })));
     return (jsxs(Flex, __assign({ h: 'l', gap: 'xs', alignItems: 'center' }, { children: [icons.map(function (_a, index) {
                 var Icon = _a.icon, _b = _a.color, iconColor = _b === void 0 ? 'default' : _b;
                 return (jsxs(Fragment, { children: [index > 0 ? separator : null, jsx(Icon, { size: '2xs', color: iconColor })] }, "icon".concat(index)));

package/dist/components/icon-text/IconText.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconText.js","sources":["../../../src/components/icon-text/IconText.tsx"],"sourcesContent":["import { Fragment } from 'react'\n\nimport { Flex } from '~harmony/components/layout'\nimport { Text } from '~harmony/components/text'\n\nimport { IconTextProps } from './types'\n\nexport const IconText = ({\n  children,\n  color = 'default',\n  icons = []\n}: IconTextProps) => {\n  const separator = (\n    <Text variant='body' color='default' css={{ fontSize: 8, lineHeight: 20 }}>\n      •\n    </Text>\n  )\n\n  return (\n    <Flex h='l' gap='xs' alignItems='center'>\n      {icons.map(({ icon: Icon, color: iconColor = 'default' }, index) => (\n        <Fragment key={`icon${index}`}>\n          {index > 0 ? separator : null}\n          <Icon size='2xs' color={iconColor} />\n        </Fragment>\n      ))}\n      <Text size='s' color={color}>\n        {children}\n      </Text>\n    </Flex>\n  )\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;AAOO,IAAM,QAAQ,GAAG,UAAC,EAIT,EAAA;AAHd,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,EAAiB,GAAA,EAAA,CAAA,KAAA,EAAjB,KAAK,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,SAAS,GAAA,EAAA,EACjB,EAAU,GAAA,EAAA,CAAA,KAAA,EAAV,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAA,EAAA,CAAA;IAEV,IAAM,SAAS,IACbA,GAAC,CAAA,IAAI,EAAC,QAAA,CAAA,EAAA,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,EAElE,EAAA,EAAA,QAAA,EAAA,QAAA,EAAA,CAAA,CAAA,CACR,CAAA;IAED,QACEC,KAAC,IAAI,EAAA,QAAA,CAAA,EAAC,CAAC,EAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAA,EAAA,EAAA,QAAA,EAAA,CACrC,KAAK,CAAC,GAAG,CAAC,UAAC,EAA4C,EAAE,KAAK,EAAA;AAA3C,gBAAA,IAAA,IAAI,UAAA,EAAE,EAAA,GAAA,EAAA,CAAA,KAA4B,EAArB,SAAS,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,SAAS,GAAA,EAAA,CAAA;AAAc,gBAAA,QAClEA,IAAA,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAA,CACN,KAAK,GAAG,CAAC,GAAG,SAAS,GAAG,IAAI,EAC7BD,GAAC,CAAA,IAAI,EAAC,EAAA,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,SAAS,EAAA,CAAI,CAFxB,EAAA,EAAA,MAAA,CAAA,MAAA,CAAO,KAAK,CAAE,CAGlB,EACZ;AALmE,aAKnE,CAAC,EACFA,GAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EAAC,IAAI,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,EAAA,EAAA,EAAA,QAAA,EACxB,QAAQ,EACJ,CAAA,CAAA,CAAA,EAAA,CAAA,CACF,EACR;AACH;;;;"}
+{"version":3,"file":"IconText.js","sources":["../../../src/components/icon-text/IconText.tsx"],"sourcesContent":["import { Fragment } from 'react'\n\nimport { Flex } from '~harmony/components/layout'\nimport { Text } from '~harmony/components/text'\n\nimport { IconTextProps } from './types'\n\nexport const IconText = ({\n  children,\n  color = 'subdued',\n  icons = []\n}: IconTextProps) => {\n  const separator = (\n    <Text variant='body' color={color} css={{ fontSize: 8, lineHeight: 20 }}>\n      •\n    </Text>\n  )\n\n  return (\n    <Flex h='l' gap='xs' alignItems='center'>\n      {icons.map(({ icon: Icon, color: iconColor = 'default' }, index) => (\n        <Fragment key={`icon${index}`}>\n          {index > 0 ? separator : null}\n          <Icon size='2xs' color={iconColor} />\n        </Fragment>\n      ))}\n      <Text size='s' color={color}>\n        {children}\n      </Text>\n    </Flex>\n  )\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;AAOO,IAAM,QAAQ,GAAG,UAAC,EAIT,EAAA;AAHd,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,EAAiB,GAAA,EAAA,CAAA,KAAA,EAAjB,KAAK,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,SAAS,GAAA,EAAA,EACjB,EAAU,GAAA,EAAA,CAAA,KAAA,EAAV,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAA,EAAA,CAAA;IAEV,IAAM,SAAS,IACbA,GAAC,CAAA,IAAI,EAAC,QAAA,CAAA,EAAA,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,EAEhE,EAAA,EAAA,QAAA,EAAA,QAAA,EAAA,CAAA,CAAA,CACR,CAAA;IAED,QACEC,KAAC,IAAI,EAAA,QAAA,CAAA,EAAC,CAAC,EAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAA,EAAA,EAAA,QAAA,EAAA,CACrC,KAAK,CAAC,GAAG,CAAC,UAAC,EAA4C,EAAE,KAAK,EAAA;AAA3C,gBAAA,IAAA,IAAI,UAAA,EAAE,EAAA,GAAA,EAAA,CAAA,KAA4B,EAArB,SAAS,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,SAAS,GAAA,EAAA,CAAA;AAAc,gBAAA,QAClEA,IAAA,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAA,CACN,KAAK,GAAG,CAAC,GAAG,SAAS,GAAG,IAAI,EAC7BD,GAAC,CAAA,IAAI,EAAC,EAAA,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,SAAS,EAAA,CAAI,CAFxB,EAAA,EAAA,MAAA,CAAA,MAAA,CAAO,KAAK,CAAE,CAGlB,EACZ;AALmE,aAKnE,CAAC,EACFA,GAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EAAC,IAAI,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,EAAA,EAAA,EAAA,QAAA,EACxB,QAAQ,EACJ,CAAA,CAAA,CAAA,EAAA,CAAA,CACF,EACR;AACH;;;;"}

package/dist/components/icon.d.ts

@@ -5,6 +5,7 @@ import { IconSize } from '../foundations/spacing';
 type SVGBaseProps = SVGProps<SVGSVGElement>;
 export type IconProps = {
     color?: IconColors;
+    colorSecondary?: IconColors;
     size?: IconSize;
     sizeW?: IconSize;
     sizeH?: IconSize;
@@ -14,7 +15,7 @@ export type IconProps = {
     title?: string;
     onClick?: MouseEventHandler<SVGSVGElement>;
 };
-type SVGIconProps = SVGBaseProps & IconProps;
+export type SVGIconProps = SVGBaseProps & IconProps;
 export type IconComponent = ComponentType<SVGBaseProps | SVGIconProps>;
 export {};
 //# sourceMappingURL=icon.d.ts.map

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,iBAAiB,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvE,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;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;CAC3C,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,iBAAiB,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvE,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,cAAc,CAAC,EAAE,UAAU,CAAA;IAC3B,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;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;CAC3C,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,YAAY,GAAG,SAAS,CAAA;AAEnD,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,YAAY,GAAG,YAAY,CAAC,CAAA"}

package/dist/components/index.d.ts

@@ -32,6 +32,7 @@ export * from './select';
 export * from './icon-text';
 export * from './send-icon';
 export * from './checkbox';
+export * from './hover-card';
 export * from './internal/MenuItem';
 export * from './internal/Menu';
 export * from './internal/OptionKeyHandler';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAA;AAC5E,cAAc,QAAQ,CAAA;AACtB,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,qBAAqB,CAAA;AACnC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,6BAA6B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAA;AAC5E,cAAc,QAAQ,CAAA;AACtB,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,6BAA6B,CAAA"}

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

@@ -7,13 +7,51 @@ import '../../button/PlainButton/PlainButton.js';
 import { IconVisibilityPublic, IconVisibilityHidden } from '../../../icons/utilityIcons.js';
 import '@emotion/react';
 import '@emotion/css';
-import '../../button/FollowButton/FollowButton.js';
+import '../../layout/Box/Box.js';
+import '../../layout/Flex/Flex.js';
+import '../../skeleton/Skeleton.js';
+import '../../common/HiddenInput.js';
+import '../../radio-group/RadioGroupContext.js';
+import '../../text/Text.js';
+import { TextInput } from '../TextInput/TextInput.js';
+import '../TextInput/types.js';
+import '../TokenAmountInput/TokenAmountInput.js';
+import '../../layout/Paper/Paper.js';
+import '@react-spring/web';
+import 'classnames';
+import '../../text-link/TextLink.js';
 import { IconButton } from '../../button/IconButton/IconButton.js';
+import '../../switch/Switch.js';
+import '@juggle/resize-observer';
+import 'react-merge-refs';
+import 'react-use-measure';
+import '../../scrollbar/Scrollbar.js';
+import '../../popup/Popup.js';
+import '../../popup-menu/PopupMenu.js';
+import '../../modal/Modal.js';
+import '../../modal/ModalContext.js';
+import 'react-spring/renderprops.cjs';
+import '../../modal/ModalHeader.js';
+import '../../modal/ModalFooter.js';
+import '../../modal/types.js';
+import 'lodash';
+import 'numeral';
+import '../../../contexts/MediaContext.js';
+import 'color';
+import 'lottie-react';
+import '../../pill/Pill.js';
+import '../../select/Select/Select.js';
+import '../../checkbox/Checkbox.js';
+import '../../hover-card/HoverCard.js';
+import '../../../foundations/color/semantic.js';
+import '../../../foundations/color/color.js';
+import '../../../foundations/theme/theme.js';
+import '../../../hooks/useHotKeys.js';
+import '../../internal/MenuItem.js';
+import '../../button/FollowButton/FollowButton.js';
 import '../../button/UnstyledButton.js';
 import '../../button/FilterButton/FilterButton.js';
 import '../../button/FilterButton/FilterButtonOption.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 '~harmony/components/button'\nimport { IconVisibilityHidden, IconVisibilityPublic } from '~harmony/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 '~harmony/components/button'\nimport { IconVisibilityHidden, IconVisibilityPublic } from '~harmony/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/TextInput/TextInput.d.ts

@@ -9,6 +9,7 @@ export declare const TextInput: (props: Omit<Omit<import("react").DetailedHTMLPr
     error?: boolean | undefined;
     hideLabel?: boolean | undefined;
     hidePlaceholder?: boolean | undefined;
+    onClear?: (() => void) | undefined;
     label: string;
     inputRootClassName?: string | undefined;
     helperText?: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAA;AAWpD,OAAO,EAAE,aAAa,EAAuB,MAAM,SAAS,CAAA;AAE5D;;GAEG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;qJAoOrB,CAAA"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAA;AAYpD,OAAO,EAAE,aAAa,EAAuB,MAAM,SAAS,CAAA;AAE5D;;GAEG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;qJAwOrB,CAAA"}

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

@@ -3,23 +3,66 @@ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import { forwardRef, useId } from 'react';
 import cn from 'classnames';
 import { Text } from '../../text/Text.js';
-import '../../layout/Box/Box.js';
+import { IconCloseAlt } from '../../../icons/utilityIcons.js';
 import '@emotion/react';
+import '@emotion/css';
+import '../../layout/Box/Box.js';
 import { Flex } from '../../layout/Flex/Flex.js';
-import '../../layout/Paper/Paper.js';
+import '../../skeleton/Skeleton.js';
+import '../../common/HiddenInput.js';
+import '../../radio-group/RadioGroupContext.js';
+import { TextInputSize } from './types.js';
 import { useFocusState } from '../useFocusState.js';
+import '../PasswordInput/PasswordInput.js';
+import '../TokenAmountInput/TokenAmountInput.js';
+import '../../layout/Paper/Paper.js';
+import '../../button/Button/Button.js';
+import '../../button/PlainButton/PlainButton.js';
+import '../../button/FollowButton/FollowButton.js';
+import '../../button/IconButton/IconButton.js';
+import '../../button/UnstyledButton.js';
+import '../../button/FilterButton/FilterButton.js';
+import '../../button/FilterButton/FilterButtonOption.js';
+import '@react-spring/web';
+import '../../text-link/TextLink.js';
+import '../../switch/Switch.js';
+import '@juggle/resize-observer';
+import 'react-merge-refs';
+import 'react-use-measure';
+import '../../scrollbar/Scrollbar.js';
+import '../../popup/Popup.js';
+import '../../popup-menu/PopupMenu.js';
+import '../../modal/Modal.js';
+import '../../modal/ModalContext.js';
+import 'react-spring/renderprops.cjs';
+import '../../modal/ModalHeader.js';
+import '../../modal/ModalFooter.js';
+import '../../modal/types.js';
+import 'lodash';
+import 'numeral';
+import '../../../contexts/MediaContext.js';
+import 'color';
+import 'lottie-react';
+import '../../pill/Pill.js';
+import '../../select/Select/Select.js';
+import '../../checkbox/Checkbox.js';
+import '../../hover-card/HoverCard.js';
+import '../../../foundations/color/semantic.js';
+import '../../../foundations/color/color.js';
+import '../../../foundations/theme/theme.js';
+import '../../../hooks/useHotKeys.js';
+import '../../internal/MenuItem.js';
 import styles from './TextInput.module.css.js';
-import { TextInputSize } from './types.js';
 
 /**
  * An input is a field where users can enter and edit text and  enables the user to provide input in the form of plain text.
  */
 var TextInput = forwardRef(function (props, ref) {
     var _a, _b;
-    var ariaLabel = props["aria-label"], required = props.required, className = props.className, inputRootClassName = props.inputRootClassName, maxLength = props.maxLength, _c = props.showMaxLengthThreshold, showMaxLengthThreshold = _c === void 0 ? 0.7 : _c, _d = props.maxLengthWarningThreshold, maxLengthWarningThreshold = _d === void 0 ? 0.9 : _d, _e = props.size, size = _e === void 0 ? TextInputSize.DEFAULT : _e, hideLabel = props.hideLabel, hidePlaceholder = props.hidePlaceholder, labelProp = props.label, value = props.value, idProp = props.id, warningProp = props.warning, error = props.error, inputClassName = props.className, disabled = props.disabled, onFocusProp = props.onFocus, onBlurProp = props.onBlur, placeholder = props.placeholder, helperText = props.helperText, startAdornmentText = props.startAdornmentText, endAdornmentText = props.endAdornmentText, StartIcon = props.startIcon, EndIcon = props.endIcon, IconProps = props.IconProps, endAdornmentProp = props.endAdornment, elevateLabel = props.elevateLabel, _incorrectError = props._incorrectError, _isHovered = props._isHovered, _isFocused = props._isFocused, _disablePointerEvents = props._disablePointerEvents, other = __rest(props, ['aria-label', "required", "className", "inputRootClassName", "maxLength", "showMaxLengthThreshold", "maxLengthWarningThreshold", "size", "hideLabel", "hidePlaceholder", "label", "value", "id", "warning", "error", "className", "disabled", "onFocus", "onBlur", "placeholder", "helperText", "startAdornmentText", "endAdornmentText", "startIcon", "endIcon", "IconProps", "endAdornment", "elevateLabel", "_incorrectError", "_isHovered", "_isFocused", "_disablePointerEvents"]);
+    var ariaLabel = props["aria-label"], required = props.required, className = props.className, inputRootClassName = props.inputRootClassName, maxLength = props.maxLength, _c = props.showMaxLengthThreshold, showMaxLengthThreshold = _c === void 0 ? 0.7 : _c, _d = props.maxLengthWarningThreshold, maxLengthWarningThreshold = _d === void 0 ? 0.9 : _d, _e = props.size, size = _e === void 0 ? TextInputSize.DEFAULT : _e, hideLabel = props.hideLabel, hidePlaceholder = props.hidePlaceholder, labelProp = props.label, value = props.value, idProp = props.id, warningProp = props.warning, error = props.error, inputClassName = props.className, disabled = props.disabled, onFocusProp = props.onFocus, onBlurProp = props.onBlur, placeholder = props.placeholder, helperText = props.helperText, startAdornmentText = props.startAdornmentText, endAdornmentText = props.endAdornmentText, StartIcon = props.startIcon, EndIcon = props.endIcon, IconProps = props.IconProps, endAdornmentProp = props.endAdornment, elevateLabel = props.elevateLabel, onClear = props.onClear, _incorrectError = props._incorrectError, _isHovered = props._isHovered, _isFocused = props._isFocused, _disablePointerEvents = props._disablePointerEvents, other = __rest(props, ['aria-label', "required", "className", "inputRootClassName", "maxLength", "showMaxLengthThreshold", "maxLengthWarningThreshold", "size", "hideLabel", "hidePlaceholder", "label", "value", "id", "warning", "error", "className", "disabled", "onFocus", "onBlur", "placeholder", "helperText", "startAdornmentText", "endAdornmentText", "startIcon", "endIcon", "IconProps", "endAdornment", "elevateLabel", "onClear", "_incorrectError", "_isHovered", "_isFocused", "_disablePointerEvents"]);
     var endAdornment;
     if (EndIcon != null) {
-        endAdornment = jsx(EndIcon, __assign({ size: 'm', color: 'subdued' }, IconProps));
+        endAdornment = jsx(EndIcon, __assign({ size: 'l', color: 'subdued' }, IconProps));
     }
     else if (endAdornmentProp != null) {
         endAdornment = endAdornmentProp;
@@ -85,7 +128,7 @@ var TextInput = forwardRef(function (props, ref) {
         _b);
     var inputElement = (jsxs(Flex, __assign({ alignItems: 'center', justifyContent: 'space-between' }, { children: [startAdornmentText && shouldShowAdornments ? (jsx(Text, __assign({ variant: 'label', size: 'l', color: 'subdued' }, { children: startAdornmentText }))) : null, jsx("input", __assign({ onFocus: handleFocus, onBlur: handleBlur, ref: ref, className: cn(styles.input, inputClassName, inputElStyle), value: value, maxLength: maxLength, disabled: disabled, placeholder: shouldShowPlaceholder ? placeholderText : undefined, "aria-label": (ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : shouldShowLabel) ? labelText : undefined, "aria-required": required, id: id, autoComplete: 'off' }, other)), endAdornmentText && shouldShowAdornments ? (jsx(Text, __assign({ variant: 'label', size: 'l', color: 'subdued' }, { children: endAdornmentText }))) : null] })));
     var isLabelElevated = hasValue || isFocused || elevateLabel;
-    return (jsxs(Flex, __assign({ className: cn(styles.root, className), direction: 'column', gap: 'xs', alignItems: 'flex-start', w: '100%' }, { children: [jsxs("label", __assign({ htmlFor: id, className: cn(styles.contentContainer, inputRootClassName, inputRootStyle) }, { children: [StartIcon ? (jsx(StartIcon, __assign({ size: size === TextInputSize.SMALL ? 's' : 'm', color: 'subdued' }, IconProps))) : null, jsxs(Flex, __assign({ direction: 'column', gap: 'xs', justifyContent: 'center', w: '100%' }, { children: [shouldShowLabel ? (jsxs(Flex, __assign({ className: styles.labelRow, direction: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 's' }, { children: [jsx(Text, __assign({ variant: 'body', tag: 'span', size: isLabelElevated ? 's' : 'l', color: 'subdued', css: function (theme) { return ({
+    return (jsxs(Flex, __assign({ className: cn(styles.root, className), direction: 'column', gap: 'xs', alignItems: 'flex-start', w: '100%' }, { children: [jsxs("label", __assign({ htmlFor: id, className: cn(styles.contentContainer, inputRootClassName, inputRootStyle) }, { children: [StartIcon ? (jsx(StartIcon, __assign({ size: size === TextInputSize.SMALL ? 'l' : undefined, color: 'subdued' }, IconProps))) : null, jsxs(Flex, __assign({ direction: 'column', gap: 'xs', justifyContent: 'center', w: '100%' }, { children: [shouldShowLabel ? (jsxs(Flex, __assign({ className: styles.labelRow, direction: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 's' }, { children: [jsx(Text, __assign({ variant: 'body', tag: 'span', size: isLabelElevated ? 's' : 'l', color: 'subdued', css: function (theme) { return ({
                                             whiteSpace: 'nowrap',
                                             overflow: 'hidden',
                                             textOverflow: 'ellipsis',
@@ -94,7 +137,7 @@ var TextInput = forwardRef(function (props, ref) {
                                             transform: isLabelElevated
                                                 ? 'translate(0, 0)'
                                                 : 'translate(0px, 13px)'
-                                        }); } }, { children: labelText })), shouldShowMaxLengthText ? (jsxs(Text, __assign({ variant: 'body', size: 'xs', tag: 'span', color: maxLengthTextColor }, { children: [characterCount, "/", maxLength] }))) : null] }))) : null, inputElement] })), endAdornment] })), helperText ? (jsx(Text, __assign({ variant: 'body', size: helperTextSize, color: error ? 'danger' : _incorrectError ? 'warning' : 'default' }, { children: helperText }))) : null] })));
+                                        }); } }, { children: labelText })), shouldShowMaxLengthText ? (jsxs(Text, __assign({ variant: 'body', size: 'xs', tag: 'span', color: maxLengthTextColor }, { children: [characterCount, "/", maxLength] }))) : null] }))) : null, inputElement] })), onClear && value ? (jsx(IconCloseAlt, { onClick: onClear, color: 'subdued' })) : null, endAdornment] })), helperText ? (jsx(Text, __assign({ variant: 'body', size: helperTextSize, color: error ? 'danger' : _incorrectError ? 'warning' : 'default' }, { children: helperText }))) : null] })));
 });
 
 export { TextInput };

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sources":["../../../../src/components/input/TextInput/TextInput.tsx"],"sourcesContent":["import { ReactNode, forwardRef, useId } from 'react'\n\nimport cn from 'classnames'\n\nimport { Text, TextSize } from '~harmony/components/text'\nimport type { TextColors } from '~harmony/foundations/color/semantic'\n\nimport { Flex } from '../../layout'\nimport { useFocusState } from '../useFocusState'\n\nimport styles from './TextInput.module.css'\nimport { TextInputSize, type TextInputProps } from './types'\n\n/**\n * An input is a field where users can enter and edit text and  enables the user to provide input in the form of plain text.\n */\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n  (props, ref) => {\n    const {\n      'aria-label': ariaLabel,\n      required,\n      className,\n      inputRootClassName,\n      maxLength,\n      showMaxLengthThreshold = 0.7,\n      maxLengthWarningThreshold = 0.9,\n      size = TextInputSize.DEFAULT,\n      hideLabel,\n      hidePlaceholder,\n      label: labelProp,\n      value,\n      id: idProp,\n      warning: warningProp,\n      error,\n      className: inputClassName,\n      disabled,\n      onFocus: onFocusProp,\n      onBlur: onBlurProp,\n      placeholder,\n      helperText,\n      startAdornmentText,\n      endAdornmentText,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      IconProps,\n      endAdornment: endAdornmentProp,\n      elevateLabel,\n      _incorrectError,\n      _isHovered,\n      _isFocused,\n      _disablePointerEvents,\n      ...other\n    } = props\n\n    let endAdornment: null | ReactNode\n    if (EndIcon != null) {\n      endAdornment = <EndIcon size='m' color='subdued' {...IconProps} />\n    } else if (endAdornmentProp != null) {\n      endAdornment = endAdornmentProp\n    } else {\n      endAdornment = null\n    }\n\n    /**\n     * Since Firefox doesn't support the :has() pseudo selector,\n     * manually track the focused state and use classes for focus, required, and disabled\n     */\n    const [isFocusedState, handleFocus, handleBlur] = useFocusState(\n      onFocusProp,\n      onBlurProp\n    )\n\n    const isFocused = _isFocused ?? isFocusedState\n\n    // For focus behavior and accessiblity, <label> needs to have a htmlFor={} provided to an id matching the input\n    const backupId = useId()\n    const id = idProp ?? backupId\n\n    const characterCount = value !== undefined ? `${value}`.length : 0\n    const hasValue = characterCount > 0\n\n    // Hide the label when requested or when the size is set to small\n    const shouldShowLabel = !hideLabel && size !== TextInputSize.SMALL\n    const labelText = required ? `${labelProp} *` : labelProp\n    const placeholderText =\n      required && hideLabel\n        ? `${placeholder} *`\n        : size === TextInputSize.SMALL\n          ? labelText\n          : placeholder\n    const helperTextSize: TextSize = size === TextInputSize.SMALL ? 'xs' : 's'\n\n    // Whenever a label isn't visible the placeholder should be visible in it's place (if provided)\n    const shouldShowPlaceholder =\n      (isFocused || !shouldShowLabel) && !hidePlaceholder\n    const shouldShowAdornments = isFocused || hasValue || !shouldShowLabel\n    // Show the maxlength text whenever we hit a certain threshold (default 70%) + the input is focused\n    const shouldShowMaxLengthText =\n      isFocused &&\n      maxLength &&\n      characterCount >= showMaxLengthThreshold * maxLength\n    // Turn the maxlength text to the warning color whenever we hit a certain threshold (default 90%)\n    let maxLengthTextColor: TextColors = 'default'\n    if (maxLength && characterCount > maxLength) {\n      maxLengthTextColor = 'danger'\n    } else if (\n      maxLength &&\n      characterCount >= maxLengthWarningThreshold * maxLength\n    ) {\n      maxLengthTextColor = 'warning'\n    }\n\n    // Styles for the root of the input\n    const inputRootStyle = {\n      [styles.default]: size === TextInputSize.DEFAULT,\n      [styles.small]: size === TextInputSize.SMALL,\n      [styles.warning]: warningProp,\n      [styles.error]: error,\n      [styles.focused]: isFocused || _isFocused,\n      [styles.disabled]: disabled,\n      [styles.required]: required,\n      [styles.hover]: _isHovered,\n      [styles.incorrectError]: _incorrectError,\n      [styles.disablePointerEvents]: _disablePointerEvents\n    }\n\n    // Styles for the input element itself\n    const inputElStyle = {\n      [styles.default]: size === TextInputSize.DEFAULT,\n      [styles.small]: size === TextInputSize.SMALL,\n      [styles.disabled]: disabled,\n      [styles.focused]: isFocused\n    }\n\n    const inputElement = (\n      <Flex alignItems='center' justifyContent='space-between'>\n        {startAdornmentText && shouldShowAdornments ? (\n          <Text variant='label' size='l' color='subdued'>\n            {startAdornmentText}\n          </Text>\n        ) : null}\n        <input\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          ref={ref}\n          className={cn(styles.input, inputClassName, inputElStyle)}\n          value={value}\n          maxLength={maxLength}\n          disabled={disabled}\n          placeholder={shouldShowPlaceholder ? placeholderText : undefined}\n          aria-label={(ariaLabel ?? shouldShowLabel) ? labelText : undefined}\n          aria-required={required}\n          id={id}\n          autoComplete='off'\n          {...other}\n        />\n        {endAdornmentText && shouldShowAdornments ? (\n          <Text variant='label' size='l' color='subdued'>\n            {endAdornmentText}\n          </Text>\n        ) : null}\n      </Flex>\n    )\n\n    const isLabelElevated = hasValue || isFocused || elevateLabel\n\n    return (\n      <Flex\n        className={cn(styles.root, className)}\n        direction='column'\n        gap='xs'\n        alignItems='flex-start'\n        w='100%'\n      >\n        <label\n          htmlFor={id}\n          className={cn(\n            styles.contentContainer,\n            inputRootClassName,\n            inputRootStyle\n          )}\n        >\n          {StartIcon ? (\n            <StartIcon\n              size={size === TextInputSize.SMALL ? 's' : 'm'}\n              color='subdued'\n              {...IconProps}\n            />\n          ) : null}\n          <Flex direction='column' gap='xs' justifyContent='center' w='100%'>\n            {shouldShowLabel ? (\n              <Flex\n                className={styles.labelRow}\n                direction='row'\n                alignItems='center'\n                justifyContent='space-between'\n                gap='s'\n              >\n                <Text\n                  variant='body'\n                  tag='span'\n                  size={isLabelElevated ? 's' : 'l'}\n                  color='subdued'\n                  css={(theme) => ({\n                    whiteSpace: 'nowrap',\n                    overflow: 'hidden',\n                    textOverflow: 'ellipsis',\n                    zIndex: 2,\n                    transition: `all ${theme.motion.expressive}`,\n                    transform: isLabelElevated\n                      ? 'translate(0, 0)'\n                      : 'translate(0px, 13px)'\n                  })}\n                >\n                  {labelText}\n                </Text>\n                {shouldShowMaxLengthText ? (\n                  <Text\n                    variant='body'\n                    size='xs'\n                    tag='span'\n                    color={maxLengthTextColor}\n                  >\n                    {characterCount}/{maxLength}\n                  </Text>\n                ) : null}\n              </Flex>\n            ) : null}\n            {inputElement}\n          </Flex>\n          {endAdornment}\n        </label>\n        {helperText ? (\n          <Text\n            variant='body'\n            size={helperTextSize}\n            color={error ? 'danger' : _incorrectError ? 'warning' : 'default'}\n          >\n            {helperText}\n          </Text>\n        ) : null}\n      </Flex>\n    )\n  }\n)\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;AAaA;;AAEG;IACU,SAAS,GAAG,UAAU,CACjC,UAAC,KAAK,EAAE,GAAG,EAAA;;AAEP,IAAA,IAAc,SAAS,GAiCrB,KAAK,cAjCgB,EACvB,QAAQ,GAgCN,KAAK,CAAA,QAhCC,EACR,SAAS,GA+BP,KAAK,CA/BE,SAAA,EACT,kBAAkB,GA8BhB,KAAK,mBA9BW,EAClB,SAAS,GA6BP,KAAK,UA7BE,EACT,EAAA,GA4BE,KAAK,CA5BqB,sBAAA,EAA5B,sBAAsB,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,GAAG,KAAA,EAC5B,EAAA,GA2BE,KAAK,CA3BwB,yBAAA,EAA/B,yBAAyB,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,GAAG,KAAA,EAC/B,EAAA,GA0BE,KAAK,CAAA,IA1BqB,EAA5B,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,aAAa,CAAC,OAAO,KAAA,EAC5B,SAAS,GAyBP,KAAK,CAAA,SAzBE,EACT,eAAe,GAwBb,KAAK,CAxBQ,eAAA,EACR,SAAS,GAuBd,KAAK,CAvBS,KAAA,EAChB,KAAK,GAsBH,KAAK,MAtBF,EACD,MAAM,GAqBR,KAAK,CAAA,EArBG,EACD,WAAW,GAoBlB,KAAK,CApBa,OAAA,EACpB,KAAK,GAmBH,KAAK,MAnBF,EACM,cAAc,GAkBvB,KAAK,UAlBkB,EACzB,QAAQ,GAiBN,KAAK,CAAA,QAjBC,EACC,WAAW,GAgBlB,KAAK,CAhBa,OAAA,EACZ,UAAU,GAehB,KAAK,OAfW,EAClB,WAAW,GAcT,KAAK,CAAA,WAdI,EACX,UAAU,GAaR,KAAK,CAAA,UAbG,EACV,kBAAkB,GAYhB,KAAK,CAZW,kBAAA,EAClB,gBAAgB,GAWd,KAAK,iBAXS,EACL,SAAS,GAUlB,KAAK,CAAA,SAVa,EACX,OAAO,GASd,KAAK,CAAA,OATS,EAChB,SAAS,GAQP,KAAK,CARE,SAAA,EACK,gBAAgB,GAO5B,KAAK,aAPuB,EAC9B,YAAY,GAMV,KAAK,CAAA,YANK,EACZ,eAAe,GAKb,KAAK,CALQ,eAAA,EACf,UAAU,GAIR,KAAK,CAJG,UAAA,EACV,UAAU,GAGR,KAAK,WAHG,EACV,qBAAqB,GAEnB,KAAK,CAAA,qBAFc,EAClB,KAAK,GAAA,MAAA,CACN,KAAK,EAlCH,CAAA,YAAA,EAAA,UAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,OAAA,EAAA,IAAA,EAAA,SAAA,EAAA,OAAA,EAAA,WAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,aAAA,EAAA,YAAA,EAAA,oBAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,SAAA,EAAA,WAAA,EAAA,cAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,uBAAA,CAkCL,CADS,CACD;AAET,IAAA,IAAI,YAA8B,CAAA;IAClC,IAAI,OAAO,IAAI,IAAI,EAAE;AACnB,QAAA,YAAY,GAAGA,GAAA,CAAC,OAAO,EAAA,QAAA,CAAA,EAAC,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAK,EAAA,SAAS,EAAI,CAAA;AACnE,KAAA;SAAM,IAAI,gBAAgB,IAAI,IAAI,EAAE;QACnC,YAAY,GAAG,gBAAgB,CAAA;AAChC,KAAA;AAAM,SAAA;QACL,YAAY,GAAG,IAAI,CAAA;AACpB,KAAA;AAED;;;AAGG;AACG,IAAA,IAAA,KAA4C,aAAa,CAC7D,WAAW,EACX,UAAU,CACX,EAHM,cAAc,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,WAAW,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,UAAU,QAG7C,CAAA;IAED,IAAM,SAAS,GAAG,UAAU,KAAA,IAAA,IAAV,UAAU,KAAV,KAAA,CAAA,GAAA,UAAU,GAAI,cAAc,CAAA;;AAG9C,IAAA,IAAM,QAAQ,GAAG,KAAK,EAAE,CAAA;IACxB,IAAM,EAAE,GAAG,MAAM,KAAA,IAAA,IAAN,MAAM,KAAN,KAAA,CAAA,GAAA,MAAM,GAAI,QAAQ,CAAA;AAE7B,IAAA,IAAM,cAAc,GAAG,KAAK,KAAK,SAAS,GAAG,EAAG,CAAA,MAAA,CAAA,KAAK,CAAE,CAAC,MAAM,GAAG,CAAC,CAAA;AAClE,IAAA,IAAM,QAAQ,GAAG,cAAc,GAAG,CAAC,CAAA;;IAGnC,IAAM,eAAe,GAAG,CAAC,SAAS,IAAI,IAAI,KAAK,aAAa,CAAC,KAAK,CAAA;AAClE,IAAA,IAAM,SAAS,GAAG,QAAQ,GAAG,EAAG,CAAA,MAAA,CAAA,SAAS,EAAI,IAAA,CAAA,GAAG,SAAS,CAAA;AACzD,IAAA,IAAM,eAAe,GACnB,QAAQ,IAAI,SAAS;UACjB,EAAG,CAAA,MAAA,CAAA,WAAW,EAAI,IAAA,CAAA;AACpB,UAAE,IAAI,KAAK,aAAa,CAAC,KAAK;AAC5B,cAAE,SAAS;cACT,WAAW,CAAA;AACnB,IAAA,IAAM,cAAc,GAAa,IAAI,KAAK,aAAa,CAAC,KAAK,GAAG,IAAI,GAAG,GAAG,CAAA;;IAG1E,IAAM,qBAAqB,GACzB,CAAC,SAAS,IAAI,CAAC,eAAe,KAAK,CAAC,eAAe,CAAA;IACrD,IAAM,oBAAoB,GAAG,SAAS,IAAI,QAAQ,IAAI,CAAC,eAAe,CAAA;;IAEtE,IAAM,uBAAuB,GAC3B,SAAS;QACT,SAAS;AACT,QAAA,cAAc,IAAI,sBAAsB,GAAG,SAAS,CAAA;;IAEtD,IAAI,kBAAkB,GAAe,SAAS,CAAA;AAC9C,IAAA,IAAI,SAAS,IAAI,cAAc,GAAG,SAAS,EAAE;QAC3C,kBAAkB,GAAG,QAAQ,CAAA;AAC9B,KAAA;AAAM,SAAA,IACL,SAAS;AACT,QAAA,cAAc,IAAI,yBAAyB,GAAG,SAAS,EACvD;QACA,kBAAkB,GAAG,SAAS,CAAA;AAC/B,KAAA;;AAGD,IAAA,IAAM,cAAc,IAAA,EAAA,GAAA,EAAA;QAClB,EAAC,CAAA,MAAM,CAAC,OAAO,CAAA,GAAG,IAAI,KAAK,aAAa,CAAC,OAAO;QAChD,EAAC,CAAA,MAAM,CAAC,KAAK,CAAA,GAAG,IAAI,KAAK,aAAa,CAAC,KAAK;AAC5C,QAAA,EAAA,CAAC,MAAM,CAAC,OAAO,CAAA,GAAG,WAAW;AAC7B,QAAA,EAAA,CAAC,MAAM,CAAC,KAAK,CAAA,GAAG,KAAK;AACrB,QAAA,EAAA,CAAC,MAAM,CAAC,OAAO,CAAG,GAAA,SAAS,IAAI,UAAU;AACzC,QAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC3B,QAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC3B,QAAA,EAAA,CAAC,MAAM,CAAC,KAAK,CAAA,GAAG,UAAU;AAC1B,QAAA,EAAA,CAAC,MAAM,CAAC,cAAc,CAAA,GAAG,eAAe;AACxC,QAAA,EAAA,CAAC,MAAM,CAAC,oBAAoB,CAAA,GAAG,qBAAqB;WACrD,CAAA;;AAGD,IAAA,IAAM,YAAY,IAAA,EAAA,GAAA,EAAA;QAChB,EAAC,CAAA,MAAM,CAAC,OAAO,CAAA,GAAG,IAAI,KAAK,aAAa,CAAC,OAAO;QAChD,EAAC,CAAA,MAAM,CAAC,KAAK,CAAA,GAAG,IAAI,KAAK,aAAa,CAAC,KAAK;AAC5C,QAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC3B,QAAA,EAAA,CAAC,MAAM,CAAC,OAAO,CAAA,GAAG,SAAS;WAC5B,CAAA;AAED,IAAA,IAAM,YAAY,IAChBC,IAAC,CAAA,IAAI,aAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EACrD,EAAA,EAAA,QAAA,EAAA,CAAA,kBAAkB,IAAI,oBAAoB,IACzCD,GAAC,CAAA,IAAI,EAAC,QAAA,CAAA,EAAA,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,SAAS,gBAC3C,kBAAkB,EAAA,CAAA,CACd,IACL,IAAI,EACRA,GAAA,CAAA,OAAA,EAAA,QAAA,CAAA,EACE,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,EAAE,YAAY,CAAC,EACzD,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,qBAAqB,GAAG,eAAe,GAAG,SAAS,EACpD,YAAA,EAAA,CAAC,SAAS,KAAT,IAAA,IAAA,SAAS,KAAT,KAAA,CAAA,GAAA,SAAS,GAAI,eAAe,IAAI,SAAS,GAAG,SAAS,EACnD,eAAA,EAAA,QAAQ,EACvB,EAAE,EAAE,EAAE,EACN,YAAY,EAAC,KAAK,EACd,EAAA,KAAK,CACT,CAAA,EACD,gBAAgB,IAAI,oBAAoB,IACvCA,GAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAC3C,EAAA,EAAA,QAAA,EAAA,gBAAgB,EACZ,CAAA,CAAA,IACL,IAAI,CAAA,EAAA,CAAA,CACH,CACR,CAAA;AAED,IAAA,IAAM,eAAe,GAAG,QAAQ,IAAI,SAAS,IAAI,YAAY,CAAA;AAE7D,IAAA,QACEC,IAAC,CAAA,IAAI,EACH,QAAA,CAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,EACrC,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAC,IAAI,EACR,UAAU,EAAC,YAAY,EACvB,CAAC,EAAC,MAAM,EAAA,EAAA,EAAA,QAAA,EAAA,CAERA,yBACE,OAAO,EAAE,EAAE,EACX,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,gBAAgB,EACvB,kBAAkB,EAClB,cAAc,CACf,EAEA,EAAA,EAAA,QAAA,EAAA,CAAA,SAAS,IACRD,GAAA,CAAC,SAAS,EACR,QAAA,CAAA,EAAA,IAAI,EAAE,IAAI,KAAK,aAAa,CAAC,KAAK,GAAG,GAAG,GAAG,GAAG,EAC9C,KAAK,EAAC,SAAS,EAAA,EACX,SAAS,CACb,CAAA,IACA,IAAI,EACRC,KAAC,IAAI,EAAA,QAAA,CAAA,EAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,EAAC,QAAQ,EAAC,CAAC,EAAC,MAAM,EAAA,EAAA,EAAA,QAAA,EAAA,CAC/D,eAAe,IACdA,KAAC,IAAI,EAAA,QAAA,CAAA,EACH,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,SAAS,EAAC,KAAK,EACf,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,EAC9B,GAAG,EAAC,GAAG,iBAEPD,GAAC,CAAA,IAAI,EACH,QAAA,CAAA,EAAA,OAAO,EAAC,MAAM,EACd,GAAG,EAAC,MAAM,EACV,IAAI,EAAE,eAAe,GAAG,GAAG,GAAG,GAAG,EACjC,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,UAAC,KAAK,EAAA,EAAK,QAAC;AACf,4CAAA,UAAU,EAAE,QAAQ;AACpB,4CAAA,QAAQ,EAAE,QAAQ;AAClB,4CAAA,YAAY,EAAE,UAAU;AACxB,4CAAA,MAAM,EAAE,CAAC;AACT,4CAAA,UAAU,EAAE,MAAO,CAAA,MAAA,CAAA,KAAK,CAAC,MAAM,CAAC,UAAU,CAAE;AAC5C,4CAAA,SAAS,EAAE,eAAe;AACxB,kDAAE,iBAAiB;AACnB,kDAAE,sBAAsB;yCAC3B,EAAC,EAAA,EAED,EAAA,EAAA,QAAA,EAAA,SAAS,IACL,EACN,uBAAuB,IACtBC,IAAC,CAAA,IAAI,aACH,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,kBAAkB,iBAExB,cAAc,EAAA,GAAA,EAAG,SAAS,CACtB,EAAA,CAAA,CAAA,IACL,IAAI,CACH,EAAA,CAAA,CAAA,IACL,IAAI,EACP,YAAY,CAAA,EAAA,CAAA,CACR,EACN,YAAY,CAAA,EAAA,CAAA,CACP,EACP,UAAU,IACTD,IAAC,IAAI,EAAA,QAAA,CAAA,EACH,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,cAAc,EACpB,KAAK,EAAE,KAAK,GAAG,QAAQ,GAAG,eAAe,GAAG,SAAS,GAAG,SAAS,EAEhE,EAAA,EAAA,QAAA,EAAA,UAAU,IACN,IACL,IAAI,CACH,EAAA,CAAA,CAAA,EACR;AACH,CAAC;;;;"}
+{"version":3,"file":"TextInput.js","sources":["../../../../src/components/input/TextInput/TextInput.tsx"],"sourcesContent":["import { ReactNode, forwardRef, useId } from 'react'\n\nimport cn from 'classnames'\n\nimport { Text, TextSize } from '~harmony/components/text'\nimport type { TextColors } from '~harmony/foundations/color/semantic'\nimport { IconCloseAlt } from '~harmony/icons'\n\nimport { Flex } from '../../layout'\nimport { useFocusState } from '../useFocusState'\n\nimport styles from './TextInput.module.css'\nimport { TextInputSize, type TextInputProps } from './types'\n\n/**\n * An input is a field where users can enter and edit text and  enables the user to provide input in the form of plain text.\n */\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n  (props, ref) => {\n    const {\n      'aria-label': ariaLabel,\n      required,\n      className,\n      inputRootClassName,\n      maxLength,\n      showMaxLengthThreshold = 0.7,\n      maxLengthWarningThreshold = 0.9,\n      size = TextInputSize.DEFAULT,\n      hideLabel,\n      hidePlaceholder,\n      label: labelProp,\n      value,\n      id: idProp,\n      warning: warningProp,\n      error,\n      className: inputClassName,\n      disabled,\n      onFocus: onFocusProp,\n      onBlur: onBlurProp,\n      placeholder,\n      helperText,\n      startAdornmentText,\n      endAdornmentText,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      IconProps,\n      endAdornment: endAdornmentProp,\n      elevateLabel,\n      onClear,\n      _incorrectError,\n      _isHovered,\n      _isFocused,\n      _disablePointerEvents,\n      ...other\n    } = props\n\n    let endAdornment: null | ReactNode\n    if (EndIcon != null) {\n      endAdornment = <EndIcon size='l' color='subdued' {...IconProps} />\n    } else if (endAdornmentProp != null) {\n      endAdornment = endAdornmentProp\n    } else {\n      endAdornment = null\n    }\n\n    /**\n     * Since Firefox doesn't support the :has() pseudo selector,\n     * manually track the focused state and use classes for focus, required, and disabled\n     */\n    const [isFocusedState, handleFocus, handleBlur] = useFocusState(\n      onFocusProp,\n      onBlurProp\n    )\n\n    const isFocused = _isFocused ?? isFocusedState\n\n    // For focus behavior and accessiblity, <label> needs to have a htmlFor={} provided to an id matching the input\n    const backupId = useId()\n    const id = idProp ?? backupId\n\n    const characterCount = value !== undefined ? `${value}`.length : 0\n    const hasValue = characterCount > 0\n\n    // Hide the label when requested or when the size is set to small\n    const shouldShowLabel = !hideLabel && size !== TextInputSize.SMALL\n    const labelText = required ? `${labelProp} *` : labelProp\n    const placeholderText =\n      required && hideLabel\n        ? `${placeholder} *`\n        : size === TextInputSize.SMALL\n          ? labelText\n          : placeholder\n    const helperTextSize: TextSize = size === TextInputSize.SMALL ? 'xs' : 's'\n\n    // Whenever a label isn't visible the placeholder should be visible in it's place (if provided)\n    const shouldShowPlaceholder =\n      (isFocused || !shouldShowLabel) && !hidePlaceholder\n    const shouldShowAdornments = isFocused || hasValue || !shouldShowLabel\n    // Show the maxlength text whenever we hit a certain threshold (default 70%) + the input is focused\n    const shouldShowMaxLengthText =\n      isFocused &&\n      maxLength &&\n      characterCount >= showMaxLengthThreshold * maxLength\n    // Turn the maxlength text to the warning color whenever we hit a certain threshold (default 90%)\n    let maxLengthTextColor: TextColors = 'default'\n    if (maxLength && characterCount > maxLength) {\n      maxLengthTextColor = 'danger'\n    } else if (\n      maxLength &&\n      characterCount >= maxLengthWarningThreshold * maxLength\n    ) {\n      maxLengthTextColor = 'warning'\n    }\n\n    // Styles for the root of the input\n    const inputRootStyle = {\n      [styles.default]: size === TextInputSize.DEFAULT,\n      [styles.small]: size === TextInputSize.SMALL,\n      [styles.warning]: warningProp,\n      [styles.error]: error,\n      [styles.focused]: isFocused || _isFocused,\n      [styles.disabled]: disabled,\n      [styles.required]: required,\n      [styles.hover]: _isHovered,\n      [styles.incorrectError]: _incorrectError,\n      [styles.disablePointerEvents]: _disablePointerEvents\n    }\n\n    // Styles for the input element itself\n    const inputElStyle = {\n      [styles.default]: size === TextInputSize.DEFAULT,\n      [styles.small]: size === TextInputSize.SMALL,\n      [styles.disabled]: disabled,\n      [styles.focused]: isFocused\n    }\n\n    const inputElement = (\n      <Flex alignItems='center' justifyContent='space-between'>\n        {startAdornmentText && shouldShowAdornments ? (\n          <Text variant='label' size='l' color='subdued'>\n            {startAdornmentText}\n          </Text>\n        ) : null}\n        <input\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          ref={ref}\n          className={cn(styles.input, inputClassName, inputElStyle)}\n          value={value}\n          maxLength={maxLength}\n          disabled={disabled}\n          placeholder={shouldShowPlaceholder ? placeholderText : undefined}\n          aria-label={(ariaLabel ?? shouldShowLabel) ? labelText : undefined}\n          aria-required={required}\n          id={id}\n          autoComplete='off'\n          {...other}\n        />\n        {endAdornmentText && shouldShowAdornments ? (\n          <Text variant='label' size='l' color='subdued'>\n            {endAdornmentText}\n          </Text>\n        ) : null}\n      </Flex>\n    )\n\n    const isLabelElevated = hasValue || isFocused || elevateLabel\n\n    return (\n      <Flex\n        className={cn(styles.root, className)}\n        direction='column'\n        gap='xs'\n        alignItems='flex-start'\n        w='100%'\n      >\n        <label\n          htmlFor={id}\n          className={cn(\n            styles.contentContainer,\n            inputRootClassName,\n            inputRootStyle\n          )}\n        >\n          {StartIcon ? (\n            <StartIcon\n              size={size === TextInputSize.SMALL ? 'l' : undefined}\n              color='subdued'\n              {...IconProps}\n            />\n          ) : null}\n          <Flex direction='column' gap='xs' justifyContent='center' w='100%'>\n            {shouldShowLabel ? (\n              <Flex\n                className={styles.labelRow}\n                direction='row'\n                alignItems='center'\n                justifyContent='space-between'\n                gap='s'\n              >\n                <Text\n                  variant='body'\n                  tag='span'\n                  size={isLabelElevated ? 's' : 'l'}\n                  color='subdued'\n                  css={(theme) => ({\n                    whiteSpace: 'nowrap',\n                    overflow: 'hidden',\n                    textOverflow: 'ellipsis',\n                    zIndex: 2,\n                    transition: `all ${theme.motion.expressive}`,\n                    transform: isLabelElevated\n                      ? 'translate(0, 0)'\n                      : 'translate(0px, 13px)'\n                  })}\n                >\n                  {labelText}\n                </Text>\n                {shouldShowMaxLengthText ? (\n                  <Text\n                    variant='body'\n                    size='xs'\n                    tag='span'\n                    color={maxLengthTextColor}\n                  >\n                    {characterCount}/{maxLength}\n                  </Text>\n                ) : null}\n              </Flex>\n            ) : null}\n            {inputElement}\n          </Flex>\n          {onClear && value ? (\n            <IconCloseAlt onClick={onClear} color='subdued' />\n          ) : null}\n          {endAdornment}\n        </label>\n        {helperText ? (\n          <Text\n            variant='body'\n            size={helperTextSize}\n            color={error ? 'danger' : _incorrectError ? 'warning' : 'default'}\n          >\n            {helperText}\n          </Text>\n        ) : null}\n      </Flex>\n    )\n  }\n)\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

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

@@ -52,6 +52,10 @@ export type TextInputProps = Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'r
      * When `true` hides the placeholder. Used in `Select`.
      */
     hidePlaceholder?: boolean;
+    /**
+     * Handler for when input is cleared.
+     */
+    onClear?: () => void;
     /**
      * Label Text. Required due to accessibility. If hideLabel is true, the label is set via aria-label
      */

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

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

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

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

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

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

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

@@ -1,7 +1,6 @@
 import { __rest, __assign } from '../../../_virtual/_tslib.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { forwardRef, useCallback } from 'react';
-import BN from 'bn.js';
 import { useControlled } from '../../../hooks/useControlled.js';
 import { TextInput } from '../TextInput/TextInput.js';
 import '../TextInput/types.js';
@@ -24,16 +23,22 @@ var TokenAmountInput = forwardRef(function (props, ref) {
     var handleChange = useCallback(function (e) {
         var input = e.target.value.replace(/[^0-9.]+/g, '');
         // Regex to grab the whole and decimal parts of the number, stripping duplicate '.' characters
-        var match = input.match(/^(?<whole>\d*)(?<dot>.)?(?<decimal>\d*)/);
-        var _a = (match === null || match === void 0 ? void 0 : match.groups) || {}, whole = _a.whole, decimal = _a.decimal, dot = _a.dot;
+        var match = input.match(/^(\d*)(.)?(\d*)/);
+        var whole = (match === null || match === void 0 ? void 0 : match[1]) || '';
+        var decimal = (match === null || match === void 0 ? void 0 : match[3]) || '';
+        var dot = (match === null || match === void 0 ? void 0 : match[2]) || '';
         // Conditionally render the decimal part, and only for the number of decimals specified
         var stringAmount = dot && decimals && !isWhole
             ? "".concat(whole, ".").concat(decimal.substring(0, decimals))
             : whole;
-        // Also add the BN to the onChange event for convenience
-        var amount = new BN(whole);
-        amount = amount.mul(new BN(Math.pow(10, decimals)));
-        amount = amount.add(new BN(decimal.padEnd(decimals, '0')));
+        // Calculate the wei amount using BigInt arithmetic instead of BN
+        var wholeBigInt = BigInt(whole || '0');
+        var decimalPadded = decimal
+            .padEnd(decimals, '0')
+            .substring(0, decimals);
+        var decimalBigInt = BigInt(decimalPadded || '0');
+        var multiplier = BigInt(Math.pow(10, decimals));
+        var amount = wholeBigInt * multiplier + decimalBigInt;
         setValueState(formatNumberCommas(stringAmount));
         if (onChange) {
             onChange(stringAmount, amount);