@audius/harmony 0.0.29 → 0.0.34

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

@@ -1 +1 @@
-{"version":3,"file":"CompletionCheck.js","sources":["../../../src/components/completion-check/CompletionCheck.tsx"],"sourcesContent":["import type { CSSProperties } from 'react'\n\nimport { useTransition, animated } from '@react-spring/web'\nimport cn from 'classnames'\n\nimport { IconValidationCheck, IconValidationX } from 'icons'\n\nimport { Flex } from '../layout'\n\nimport styles from './CompletionCheck.module.css'\nimport type { CompletionCheckProps } from './types'\n\nexport const CompletionDefault = () => (\n  <div className={cn(styles.defaultCompletionIcon)} />\n)\nexport const CompletionEmpty = () => (\n  <div className={cn(styles.completionIcon, styles.emptyCompletionIcon)} />\n)\n\ntype CompletionChangeIconProps = {\n  iconStyles: CSSProperties\n}\n\nexport const CompletionError = (props: CompletionChangeIconProps) => (\n  <animated.div\n    style={props.iconStyles}\n    className={cn(styles.completionIcon, styles.xIcon)}\n  >\n    {' '}\n    <IconValidationX size='s' />{' '}\n  </animated.div>\n)\nexport const CompletionSuccess = (props: CompletionChangeIconProps) => (\n  <animated.div\n    style={props.iconStyles}\n    className={cn(styles.completionIcon, styles.checkIcon)}\n  >\n    {' '}\n    <IconValidationCheck size='s' />\n  </animated.div>\n)\n\nconst completionComponents = {\n  complete: CompletionSuccess,\n  error: CompletionError,\n  incomplete: CompletionEmpty\n}\n\nexport const CompletionCheck = (props: CompletionCheckProps) => {\n  const transitions = useTransition(props.value, {\n    from: { x: 0 },\n    enter: { x: 1 },\n    leave: { x: 0 }\n  })\n  return (\n    <Flex alignItems='center' className={styles.container}>\n      <CompletionDefault />\n      {transitions((style, value) => {\n        if (completionComponents[value]) {\n          const CompletionIcon = completionComponents[value]\n          return (\n            <CompletionIcon\n              iconStyles={{\n                opacity: style.x.to({\n                  output: [0.3, 1]\n                }) as any,\n                transform: style.x\n                  .to({\n                    range: [0, 0.75, 1],\n                    output: [0, 1.2, 1]\n                  })\n                  .to((x) => `scale3d(${x}, ${x}, ${x})`) as any\n              }}\n            />\n          )\n        }\n        return null\n      })}\n    </Flex>\n  )\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"CompletionCheck.js","sources":["../../../src/components/completion-check/CompletionCheck.tsx"],"sourcesContent":["import type { CSSProperties } from 'react'\n\nimport { useTransition, animated } from '@react-spring/web'\nimport cn from 'classnames'\n\nimport { IconValidationCheck, IconValidationX } from 'icons'\n\nimport { Flex } from '../layout'\n\nimport styles from './CompletionCheck.module.css'\nimport type { CompletionCheckProps } from './types'\n\nexport const CompletionDefault = () => (\n  <div className={cn(styles.defaultCompletionIcon)} />\n)\nexport const CompletionEmpty = () => (\n  <div className={cn(styles.completionIcon, styles.emptyCompletionIcon)} />\n)\n\ntype CompletionChangeIconProps = {\n  iconStyles: CSSProperties\n}\n\nexport const CompletionError = (props: CompletionChangeIconProps) => (\n  <animated.div\n    style={props.iconStyles}\n    className={cn(styles.completionIcon, styles.xIcon)}\n  >\n    {' '}\n    <IconValidationX size='s' />{' '}\n  </animated.div>\n)\nexport const CompletionSuccess = (props: CompletionChangeIconProps) => (\n  <animated.div\n    style={props.iconStyles}\n    className={cn(styles.completionIcon, styles.checkIcon)}\n  >\n    {' '}\n    <IconValidationCheck size='s' />\n  </animated.div>\n)\n\nconst completionComponents = {\n  complete: CompletionSuccess,\n  error: CompletionError,\n  incomplete: CompletionEmpty\n}\n\nexport const CompletionCheck = (props: CompletionCheckProps) => {\n  const transitions = useTransition(props.value, {\n    from: { x: 0 },\n    enter: { x: 1 },\n    leave: { x: 0 }\n  })\n  return (\n    <Flex alignItems='center' className={styles.container}>\n      <CompletionDefault />\n      {transitions((style, value) => {\n        if (completionComponents[value]) {\n          const CompletionIcon = completionComponents[value]\n          return (\n            <CompletionIcon\n              iconStyles={{\n                opacity: style.x.to({\n                  output: [0.3, 1]\n                }) as any,\n                transform: style.x\n                  .to({\n                    range: [0, 0.75, 1],\n                    output: [0, 1.2, 1]\n                  })\n                  .to((x) => `scale3d(${x}, ${x}, ${x})`) as any\n              }}\n            />\n          )\n        }\n        return null\n      })}\n    </Flex>\n  )\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

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

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

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,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"}
+{"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;AAI3D,KAAK,SAAS,GAAG;IACf,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,GAAG,UAAU,CAAA;AAKd,eAAO,MAAM,IAAI,UAAW,SAAS,qDA2BpC,CAAA"}

package/dist/components/hint/Hint.js

@@ -4,14 +4,16 @@ 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';
+import { Text } from '../text/Text.js';
+import { IconQuestionCircle } from '../../icons/utilityIcons.js';
+import 'react';
+import '@emotion/css';
 
 /*
  * 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, actions = props.actions, other = __rest(props, ["icon", "children", "actions"]);
+    var _a = props.icon, Icon = _a === void 0 ? IconQuestionCircle : _a, 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] })));
 };
 

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

@@ -1 +1 @@
-{"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;;;;"}
+{"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'\nimport { IconQuestionCircle } from 'icons'\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 = IconQuestionCircle, 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":";;;;;;;;;;;AAaA;;AAEG;AACI,IAAM,IAAI,GAAG,UAAC,KAAgB,EAAA;IAC3B,IAAA,EAAA,GAAiE,KAAK,CAAA,IAAvC,EAAzB,IAAI,mBAAG,kBAAkB,GAAA,EAAA,EAAE,QAAQ,GAAwB,KAAK,SAA7B,EAAE,OAAO,GAAe,KAAK,CAApB,OAAA,EAAK,KAAK,GAAA,MAAA,CAAK,KAAK,EAAxE,CAAgE,MAAA,EAAA,UAAA,EAAA,SAAA,CAAA,CAAF,CAAU;IAC9E,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

@@ -11,6 +11,7 @@ export type IconProps = {
     height?: number;
     width?: number;
     shadow?: ShadowOptions;
+    title?: string;
 };
 type SVGIconProps = SVGBaseProps & IconProps;
 export type IconComponent = ComponentType<SVGBaseProps | SVGIconProps>;

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,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"}
+{"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;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,KAAK,YAAY,GAAG,YAAY,GAAG,SAAS,CAAA;AAE5C,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,YAAY,GAAG,YAAY,CAAC,CAAA"}

package/dist/components/index.d.ts

@@ -13,6 +13,13 @@ export * from './segmented-control';
 export * from './scrollbar';
 export * from './radio';
 export * from './radio-group';
+export * from './popup';
 export * from './popup-menu';
 export * from './modal';
+export * from './progress-bar';
+export * from './scrubber';
+export * from './skeleton';
+export * from './artwork';
+export { default as LoadingSpinner } from './loading-spinner/LoadingSpinner';
+export * from './pill';
 //# sourceMappingURL=index.d.ts.map

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,cAAc,CAAA;AAC5B,cAAc,SAAS,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,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAA;AAC5E,cAAc,QAAQ,CAAA"}

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

@@ -10,6 +10,7 @@ import '@emotion/css';
 import '../../button/FollowButton/FollowButton.js';
 import '../../button/FilterButton/FilterButton.js';
 import { IconButton } from '../../button/IconButton/IconButton.js';
+import '../../button/UnstyledButton.js';
 import { TextInput } from '../TextInput/TextInput.js';
 import '../TextInput/types.js';
 

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.js

@@ -3,7 +3,7 @@ import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
 import { useTheme } from '@emotion/react';
 import { HiddenInput } from '../../common/HiddenInput.js';
 import { useRadioGroup } from '../../radio-group/useRadioGroup.js';
-import { Text } from '../../text/Text/Text.js';
+import { Text } from '../../text/Text.js';
 
 var RadioInput = function (props) {
     var _a = useRadioGroup(props), name = _a.name, checked = _a.checked, onChange = _a.onChange;

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;;;;;;;;;;;;;;;;;;;;;;qJAyNrB,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;AAWpD,OAAO,EAAE,aAAa,EAAuB,MAAM,SAAS,CAAA;AAE5D;;GAEG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;qJA4NrB,CAAA"}

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

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

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

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 /** Base layout component used as a building block for creating pages and other components. */
 var Box = styled.div(function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     var h = _a.h, w = _a.w, p = _a.p, ph = _a.ph, pv = _a.pv, pt = _a.pt, pl = _a.pl, pr = _a.pr, pb = _a.pb, m = _a.m, mh = _a.mh, mv = _a.mv, mt = _a.mt, ml = _a.ml, mr = _a.mr, mb = _a.mb, backgroundColor = _a.backgroundColor, border = _a.border, borderTop = _a.borderTop, borderRight = _a.borderRight, borderBottom = _a.borderBottom, borderLeft = _a.borderLeft, borderRadius = _a.borderRadius, borderTopRightRadius = _a.borderTopRightRadius, borderBottomRightRadius = _a.borderBottomRightRadius, borderBottomLeftRadius = _a.borderBottomLeftRadius, borderTopLeftRadius = _a.borderTopLeftRadius, shadow = _a.shadow, flex = _a.flex, alignSelf = _a.alignSelf, theme = _a.theme;
     var shadows = theme.shadows, spacing = theme.spacing, color = theme.color, cornerRadius = theme.cornerRadius;
     var padT = (_b = pt !== null && pt !== void 0 ? pt : pv) !== null && _b !== void 0 ? _b : p;
@@ -19,11 +19,11 @@ var Box = styled.div(function (_a) {
         height: (_k = spacing[h]) !== null && _k !== void 0 ? _k : h,
         width: (_l = spacing[w]) !== null && _l !== void 0 ? _l : w,
         boxShadow: shadow && shadows[shadow],
-        paddingTop: padT && spacing[padT],
-        paddingLeft: padL && spacing[padL],
-        paddingRight: padR && spacing[padR],
-        paddingBottom: padB && spacing[padB],
-        marginTop: marginT && spacing[marginT],
+        paddingTop: (_m = (padT && spacing[padT])) !== null && _m !== void 0 ? _m : padT,
+        paddingLeft: (_o = (padL && spacing[padL])) !== null && _o !== void 0 ? _o : padL,
+        paddingRight: (_p = (padR && spacing[padR])) !== null && _p !== void 0 ? _p : padR,
+        paddingBottom: (_q = (padB && spacing[padB])) !== null && _q !== void 0 ? _q : padB,
+        marginTop: (_r = (marginT && spacing[marginT])) !== null && _r !== void 0 ? _r : marginT,
         marginLeft: marginL && spacing[marginL],
         marginRight: marginR && spacing[marginR],
         marginBottom: marginB && spacing[marginB],

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

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sources":["../../../../src/components/layout/Box/Box.tsx"],"sourcesContent":["import styled from '@emotion/styled'\n\nimport type { SpacingOptions } from '../../../foundations/spacing'\n\nimport type { BoxProps } from './types'\n\n/** Base layout component used as a building block for creating pages and other components. */\nexport const Box = styled.div<BoxProps>(\n  ({\n    h,\n    w,\n    p,\n    ph,\n    pv,\n    pt,\n    pl,\n    pr,\n    pb,\n    m,\n    mh,\n    mv,\n    mt,\n    ml,\n    mr,\n    mb,\n    backgroundColor,\n    border,\n    borderTop,\n    borderRight,\n    borderBottom,\n    borderLeft,\n    borderRadius,\n    borderTopRightRadius,\n    borderBottomRightRadius,\n    borderBottomLeftRadius,\n    borderTopLeftRadius,\n    shadow,\n    flex,\n    alignSelf,\n    theme\n  }) => {\n    const { shadows, spacing, color, cornerRadius } = theme\n    const padT = pt ?? pv ?? p\n    const padB = pb ?? pv ?? p\n    const padL = pl ?? ph ?? p\n    const padR = pr ?? ph ?? p\n\n    const marginT = mt ?? mv ?? m\n    const marginB = mb ?? mv ?? m\n    const marginL = ml ?? mh ?? m\n    const marginR = mr ?? mh ?? m\n\n    return {\n      position: 'relative',\n      boxSizing: 'border-box',\n      height: spacing[h as SpacingOptions] ?? h,\n      width: spacing[w as SpacingOptions] ?? w,\n      boxShadow: shadow && shadows[shadow],\n      paddingTop: padT && spacing[padT],\n      paddingLeft: padL && spacing[padL],\n      paddingRight: padR && spacing[padR],\n      paddingBottom: padB && spacing[padB],\n      marginTop: marginT && spacing[marginT],\n      marginLeft: marginL && spacing[marginL],\n      marginRight: marginR && spacing[marginR],\n      marginBottom: marginB && spacing[marginB],\n      backgroundColor:\n        backgroundColor && theme.color.background[backgroundColor],\n      border: border && `1px solid ${color.border[border]}`,\n      borderTop: borderTop && `1px solid ${color.border[borderTop]}`,\n      borderRight: borderRight && `1px solid ${color.border[borderRight]}`,\n      borderBottom: borderBottom && `1px solid ${color.border[borderBottom]}`,\n      borderLeft: borderLeft && `1px solid ${color.border[borderLeft]}`,\n      borderRadius: borderRadius && cornerRadius[borderRadius],\n      borderTopRightRadius:\n        borderTopRightRadius && cornerRadius[borderTopRightRadius],\n      borderBottomRightRadius:\n        borderBottomRightRadius && cornerRadius[borderBottomRightRadius],\n      borderBottomLeftRadius:\n        borderBottomLeftRadius && cornerRadius[borderBottomLeftRadius],\n      borderTopLeftRadius:\n        borderTopLeftRadius && cornerRadius[borderTopLeftRadius],\n      flex,\n      alignSelf\n    }\n  }\n)\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Box.js","sources":["../../../../src/components/layout/Box/Box.tsx"],"sourcesContent":["import styled from '@emotion/styled'\n\nimport type { SpacingOptions } from '../../../foundations/spacing'\n\nimport type { BoxProps } from './types'\n\n/** Base layout component used as a building block for creating pages and other components. */\nexport const Box = styled.div<BoxProps>(\n  ({\n    h,\n    w,\n    p,\n    ph,\n    pv,\n    pt,\n    pl,\n    pr,\n    pb,\n    m,\n    mh,\n    mv,\n    mt,\n    ml,\n    mr,\n    mb,\n    backgroundColor,\n    border,\n    borderTop,\n    borderRight,\n    borderBottom,\n    borderLeft,\n    borderRadius,\n    borderTopRightRadius,\n    borderBottomRightRadius,\n    borderBottomLeftRadius,\n    borderTopLeftRadius,\n    shadow,\n    flex,\n    alignSelf,\n    theme\n  }) => {\n    const { shadows, spacing, color, cornerRadius } = theme\n    const padT = pt ?? pv ?? p\n    const padB = pb ?? pv ?? p\n    const padL = pl ?? ph ?? p\n    const padR = pr ?? ph ?? p\n\n    const marginT = mt ?? mv ?? m\n    const marginB = mb ?? mv ?? m\n    const marginL = ml ?? mh ?? m\n    const marginR = mr ?? mh ?? m\n\n    return {\n      position: 'relative',\n      boxSizing: 'border-box',\n      height: spacing[h as SpacingOptions] ?? h,\n      width: spacing[w as SpacingOptions] ?? w,\n      boxShadow: shadow && shadows[shadow],\n      paddingTop: (padT && spacing[padT as SpacingOptions]) ?? padT,\n      paddingLeft: (padL && spacing[padL as SpacingOptions]) ?? padL,\n      paddingRight: (padR && spacing[padR as SpacingOptions]) ?? padR,\n      paddingBottom: (padB && spacing[padB as SpacingOptions]) ?? padB,\n      marginTop: (marginT && spacing[marginT as SpacingOptions]) ?? marginT,\n      marginLeft: marginL && spacing[marginL],\n      marginRight: marginR && spacing[marginR],\n      marginBottom: marginB && spacing[marginB],\n      backgroundColor:\n        backgroundColor && theme.color.background[backgroundColor],\n      border: border && `1px solid ${color.border[border]}`,\n      borderTop: borderTop && `1px solid ${color.border[borderTop]}`,\n      borderRight: borderRight && `1px solid ${color.border[borderRight]}`,\n      borderBottom: borderBottom && `1px solid ${color.border[borderBottom]}`,\n      borderLeft: borderLeft && `1px solid ${color.border[borderLeft]}`,\n      borderRadius: borderRadius && cornerRadius[borderRadius],\n      borderTopRightRadius:\n        borderTopRightRadius && cornerRadius[borderTopRightRadius],\n      borderBottomRightRadius:\n        borderBottomRightRadius && cornerRadius[borderBottomRightRadius],\n      borderBottomLeftRadius:\n        borderBottomLeftRadius && cornerRadius[borderBottomLeftRadius],\n      borderTopLeftRadius:\n        borderTopLeftRadius && cornerRadius[borderTopLeftRadius],\n      flex,\n      alignSelf\n    }\n  }\n)\n"],"names":[],"mappings":"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"}

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

@@ -9,19 +9,19 @@ export type BaseBoxProps = {
     /** Width */
     w?: SpacingOptions | CSSProperties['width'];
     /** Padding */
-    p?: SpacingOptions;
+    p?: SpacingOptions | CSSProperties['padding'];
     /** Padding Horizontal */
-    ph?: SpacingOptions;
+    ph?: SpacingOptions | CSSProperties['paddingInline'];
     /** Padding Vertical */
-    pv?: SpacingOptions;
+    pv?: SpacingOptions | CSSProperties['paddingBlock'];
     /** Padding Top */
-    pt?: SpacingOptions;
+    pt?: SpacingOptions | CSSProperties['paddingTop'];
     /** Padding Left */
-    pl?: SpacingOptions;
+    pl?: SpacingOptions | CSSProperties['paddingLeft'];
     /** Padding Right */
-    pr?: SpacingOptions;
+    pr?: SpacingOptions | CSSProperties['paddingRight'];
     /** Padding Bottom */
-    pb?: SpacingOptions;
+    pb?: SpacingOptions | CSSProperties['paddingBottom'];
     /** Margin */
     m?: SpacingOptions;
     /** Margin Horizontal */
@@ -29,7 +29,7 @@ export type BaseBoxProps = {
     /** Margin Vertical */
     mv?: SpacingOptions;
     /** Margin Top */
-    mt?: SpacingOptions;
+    mt?: SpacingOptions | CSSProperties['marginTop'];
     /** Margin Left */
     ml?: SpacingOptions;
     /** Margin Right */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Box/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAChF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAA;AAC7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAGlE,MAAM,MAAM,YAAY,GAAG;IACzB,aAAa;IACb,CAAC,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAA;IAC5C,YAAY;IACZ,CAAC,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,OAAO,CAAC,CAAA;IAE3C,cAAc;IACd,CAAC,CAAC,EAAE,cAAc,CAAA;IAClB,yBAAyB;IACzB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,uBAAuB;IACvB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,kBAAkB;IAClB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,mBAAmB;IACnB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,oBAAoB;IACpB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,qBAAqB;IACrB,EAAE,CAAC,EAAE,cAAc,CAAA;IAEnB,aAAa;IACb,CAAC,CAAC,EAAE,cAAc,CAAA;IAClB,wBAAwB;IACxB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,sBAAsB;IACtB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,iBAAiB;IACjB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,kBAAkB;IAClB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,mBAAmB;IACnB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,oBAAoB;IACpB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,uBAAuB;IACvB,eAAe,CAAC,EAAE,gBAAgB,CAAA;IAClC,aAAa;IACb,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,iBAAiB;IACjB,SAAS,CAAC,EAAE,YAAY,CAAA;IACxB,mBAAmB;IACnB,WAAW,CAAC,EAAE,YAAY,CAAA;IAC1B,oBAAoB;IACpB,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,kBAAkB;IAClB,UAAU,CAAC,EAAE,YAAY,CAAA;IACzB,oBAAoB;IACpB,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAClC,8BAA8B;IAC9B,oBAAoB,CAAC,EAAE,mBAAmB,CAAA;IAC1C,iCAAiC;IACjC,uBAAuB,CAAC,EAAE,mBAAmB,CAAA;IAC7C,gCAAgC;IAChC,sBAAsB,CAAC,EAAE,mBAAmB,CAAA;IAC5C,6BAA6B;IAC7B,mBAAmB,CAAC,EAAE,mBAAmB,CAAA;IAEzC,uBAAuB;IACvB,MAAM,CAAC,EAAE,aAAa,CAAA;IAEtB,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAC5B,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAA;CACvC,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Box/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAChF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAA;AAC7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAGlE,MAAM,MAAM,YAAY,GAAG;IACzB,aAAa;IACb,CAAC,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAA;IAC5C,YAAY;IACZ,CAAC,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,OAAO,CAAC,CAAA;IAE3C,cAAc;IACd,CAAC,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,SAAS,CAAC,CAAA;IAC7C,yBAAyB;IACzB,EAAE,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,eAAe,CAAC,CAAA;IACpD,uBAAuB;IACvB,EAAE,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,cAAc,CAAC,CAAA;IACnD,kBAAkB;IAClB,EAAE,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,YAAY,CAAC,CAAA;IACjD,mBAAmB;IACnB,EAAE,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,aAAa,CAAC,CAAA;IAClD,oBAAoB;IACpB,EAAE,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,cAAc,CAAC,CAAA;IACnD,qBAAqB;IACrB,EAAE,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,eAAe,CAAC,CAAA;IAEpD,aAAa;IACb,CAAC,CAAC,EAAE,cAAc,CAAA;IAClB,wBAAwB;IACxB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,sBAAsB;IACtB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,iBAAiB;IACjB,EAAE,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,WAAW,CAAC,CAAA;IAChD,kBAAkB;IAClB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,mBAAmB;IACnB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,oBAAoB;IACpB,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,uBAAuB;IACvB,eAAe,CAAC,EAAE,gBAAgB,CAAA;IAClC,aAAa;IACb,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,iBAAiB;IACjB,SAAS,CAAC,EAAE,YAAY,CAAA;IACxB,mBAAmB;IACnB,WAAW,CAAC,EAAE,YAAY,CAAA;IAC1B,oBAAoB;IACpB,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,kBAAkB;IAClB,UAAU,CAAC,EAAE,YAAY,CAAA;IACzB,oBAAoB;IACpB,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAClC,8BAA8B;IAC9B,oBAAoB,CAAC,EAAE,mBAAmB,CAAA;IAC1C,iCAAiC;IACjC,uBAAuB,CAAC,EAAE,mBAAmB,CAAA;IAC7C,gCAAgC;IAChC,sBAAsB,CAAC,EAAE,mBAAmB,CAAA;IAC5C,6BAA6B;IAC7B,mBAAmB,CAAC,EAAE,mBAAmB,CAAA;IAEzC,uBAAuB;IACvB,MAAM,CAAC,EAAE,aAAa,CAAA;IAEtB,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAC5B,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAA;CACvC,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAA"}

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

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

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

@@ -6,13 +6,13 @@ import { useTheme } from '@emotion/react';
  * A separator between two elements, usually consisting of a horizontal or vertical line.
  */
 var Divider = function (props) {
-    var _a = props.orientation, orientation = _a === void 0 ? 'horizontal' : _a, children = props.children, className = props.className;
-    var _b = useTheme(), color = _b.color, spacing = _b.spacing;
-    var border = "1px solid ".concat(color.border.strong);
+    var _a = props.orientation, orientation = _a === void 0 ? 'horizontal' : _a, children = props.children, _b = props.color, color = _b === void 0 ? 'strong' : _b, className = props.className;
+    var theme = useTheme();
+    var border = "1px solid ".concat(theme.color.border[color]);
     var css = __assign(__assign(__assign({ border: 'none', margin: 0 }, (children &&
         orientation === 'horizontal' && {
         display: 'flex',
-        gap: spacing.s,
+        gap: theme.spacing.s,
         whiteSpace: 'nowrap',
         textAlign: 'center',
         border: 0,

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

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

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

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

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

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

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

@@ -3,10 +3,5 @@
  * Base layout component used as a building block for creating pages
  * and other components.
  * */
-export declare const Paper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("..").BaseBoxProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & import("../Flex").BaseFlexProps & import("./types").BasePaperProps, {}, {}>;
+export declare const Paper: (props: import("./types").BasePaperProps & import("../Flex").BaseFlexProps & import("..").BaseBoxProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 //# sourceMappingURL=Paper.d.ts.map

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

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

package/dist/components/layout/Paper/Paper.js

@@ -1,19 +1,34 @@
-import styled from '@emotion/styled';
+import { __rest, __assign } from '../../../_virtual/_tslib.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useTheme } from '@emotion/react';
 import { Flex } from '../Flex/Flex.js';
 
 /**
  * Base layout component used as a building block for creating pages
  * and other components.
  * */
-var Paper = styled(Flex)(function (props) {
-    var theme = props.theme, _a = props.backgroundColor, backgroundColor = _a === void 0 ? 'white' : _a, border = props.border, _b = props.borderRadius, borderRadius = _b === void 0 ? 'm' : _b, _c = props.shadow, shadow = _c === void 0 ? 'mid' : _c;
-    return {
-        boxShadow: theme.shadows[shadow],
-        border: border && "1px solid ".concat(theme.color.border[border]),
-        borderRadius: theme.cornerRadius[borderRadius],
-        backgroundColor: theme.color.background[backgroundColor],
-        overflow: 'hidden'
+var Paper = forwardRef(function (props, ref) {
+    var _a = props.backgroundColor, backgroundColor = _a === void 0 ? 'white' : _a, _b = props.borderRadius, borderRadius = _b === void 0 ? 'm' : _b, _c = props.shadow, shadow = _c === void 0 ? 'mid' : _c, other = __rest(props, ["backgroundColor", "borderRadius", "shadow"]);
+    var onClick = other.onClick;
+    var _d = useTheme(), shadows = _d.shadows, motion = _d.motion;
+    var css = {
+        overflow: 'hidden',
+        transition: motion.hover,
+        cursor: onClick ? 'pointer' : undefined
     };
+    var interactiveCss = {
+        '&:hover': {
+            transform: 'scale(1.01)',
+            boxShadow: shadows.far
+        },
+        '&:active': {
+            transform: 'scale(0.995)',
+            boxShadow: shadows.near,
+            transition: motion.press
+        }
+    };
+    return (jsx(Flex, __assign({ css: [css, onClick && interactiveCss], backgroundColor: backgroundColor, borderRadius: borderRadius, shadow: shadow, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, ref: ref }, other)));
 });
 
 export { Paper };

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

@@ -1 +1 @@
-{"version":3,"file":"Paper.js","sources":["../../../../src/components/layout/Paper/Paper.tsx"],"sourcesContent":["import styled from '@emotion/styled'\n\nimport { Flex } from '../Flex'\n\nimport type { PaperProps } from './types'\n\n/**\n * Base layout component used as a building block for creating pages\n * and other components.\n * */\nexport const Paper = styled(Flex)<PaperProps>((props) => {\n  const {\n    theme,\n    backgroundColor = 'white',\n    border,\n    borderRadius = 'm',\n    shadow = 'mid'\n  } = props\n\n  return {\n    boxShadow: theme.shadows[shadow],\n    border: border && `1px solid ${theme.color.border[border]}`,\n    borderRadius: theme.cornerRadius[borderRadius],\n    backgroundColor: theme.color.background[backgroundColor],\n    overflow: 'hidden'\n  }\n})\n"],"names":[],"mappings":";;;AAMA;;;AAGK;AACQ,IAAA,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAa,UAAC,KAAK,EAAA;AAEhD,IAAA,IAAA,KAAK,GAKH,KAAK,CALF,KAAA,EACL,KAIE,KAAK,CAAA,eAJkB,EAAzB,eAAe,mBAAG,OAAO,GAAA,EAAA,EACzB,MAAM,GAGJ,KAAK,CAAA,MAHD,EACN,EAAA,GAEE,KAAK,CAFW,YAAA,EAAlB,YAAY,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,GAAG,GAAA,EAAA,EAClB,EACE,GAAA,KAAK,OADO,EAAd,MAAM,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,KAAA,CACP;IAET,OAAO;AACL,QAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC;AAChC,QAAA,MAAM,EAAE,MAAM,IAAI,YAAA,CAAA,MAAA,CAAa,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAE;AAC3D,QAAA,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC;QAC9C,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC;AACxD,QAAA,QAAQ,EAAE,QAAQ;KACnB,CAAA;AACH,CAAC;;;;"}
+{"version":3,"file":"Paper.js","sources":["../../../../src/components/layout/Paper/Paper.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport { useTheme } from '@emotion/react'\n\nimport { Flex } from '../Flex'\n\nimport type { PaperProps } from './types'\n\n/**\n * Base layout component used as a building block for creating pages\n * and other components.\n * */\nexport const Paper = forwardRef<HTMLDivElement, PaperProps>((props, ref) => {\n  const {\n    backgroundColor = 'white',\n    borderRadius = 'm',\n    shadow = 'mid',\n    ...other\n  } = props\n\n  const { onClick } = other\n\n  const { shadows, motion } = useTheme()\n\n  const css = {\n    overflow: 'hidden',\n    transition: motion.hover,\n    cursor: onClick ? 'pointer' : undefined\n  }\n\n  const interactiveCss = {\n    '&:hover': {\n      transform: 'scale(1.01)',\n      boxShadow: shadows.far\n    },\n    '&:active': {\n      transform: 'scale(0.995)',\n      boxShadow: shadows.near,\n      transition: motion.press\n    }\n  }\n\n  return (\n    <Flex\n      css={[css, onClick && interactiveCss]}\n      backgroundColor={backgroundColor}\n      borderRadius={borderRadius}\n      shadow={shadow}\n      role={onClick ? 'button' : undefined}\n      tabIndex={onClick ? 0 : undefined}\n      ref={ref}\n      {...other}\n    />\n  )\n})\n"],"names":["_jsx"],"mappings":";;;;;;AAQA;;;AAGK;IACQ,KAAK,GAAG,UAAU,CAA6B,UAAC,KAAK,EAAE,GAAG,EAAA;AAEnE,IAAA,IAAA,EAIE,GAAA,KAAK,CAJkB,eAAA,EAAzB,eAAe,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,OAAO,GAAA,EAAA,EACzB,EAGE,GAAA,KAAK,CAHW,YAAA,EAAlB,YAAY,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,GAAG,GAAA,EAAA,EAClB,EAEE,GAAA,KAAK,CAFO,MAAA,EAAd,MAAM,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,GAAA,EAAA,EACX,KAAK,GACN,MAAA,CAAA,KAAK,EALH,CAAA,iBAAA,EAAA,cAAA,EAAA,QAAA,CAKL,CADS,CACD;AAED,IAAA,IAAA,OAAO,GAAK,KAAK,CAAA,OAAV,CAAU;IAEnB,IAAA,EAAA,GAAsB,QAAQ,EAAE,EAA9B,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAe,CAAA;AAEtC,IAAA,IAAM,GAAG,GAAG;AACV,QAAA,QAAQ,EAAE,QAAQ;QAClB,UAAU,EAAE,MAAM,CAAC,KAAK;QACxB,MAAM,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS;KACxC,CAAA;AAED,IAAA,IAAM,cAAc,GAAG;AACrB,QAAA,SAAS,EAAE;AACT,YAAA,SAAS,EAAE,aAAa;YACxB,SAAS,EAAE,OAAO,CAAC,GAAG;AACvB,SAAA;AACD,QAAA,UAAU,EAAE;AACV,YAAA,SAAS,EAAE,cAAc;YACzB,SAAS,EAAE,OAAO,CAAC,IAAI;YACvB,UAAU,EAAE,MAAM,CAAC,KAAK;AACzB,SAAA;KACF,CAAA;IAED,QACEA,GAAC,CAAA,IAAI,EACH,QAAA,CAAA,EAAA,GAAG,EAAE,CAAC,GAAG,EAAE,OAAO,IAAI,cAAc,CAAC,EACrC,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,EACpC,QAAQ,EAAE,OAAO,GAAG,CAAC,GAAG,SAAS,EACjC,GAAG,EAAE,GAAG,EACJ,EAAA,KAAK,CACT,CAAA,EACH;AACH,CAAC;;;;"}

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

@@ -4,4 +4,5 @@ declare const meta: Meta<typeof Paper>;
 export default meta;
 type Story = StoryObj<typeof Paper>;
 export declare const Default: Story;
+export declare const Interactive: Story;
 //# sourceMappingURL=Paper.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Paper.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Paper/Paper.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAQ5B,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAA;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA"}
+{"version":3,"file":"Paper.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Paper/Paper.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAQ5B,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAA;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAA"}

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

@@ -1,3 +1,4 @@
+import { ElementType } from 'react';
 import type { BorderColors } from '../../../foundations/color/semantic';
 import type { CornerRadiusOptions } from '../../../foundations/corner-radius';
 import type { ShadowOptions } from '../../../foundations/shadows';
@@ -21,6 +22,7 @@ export type BasePaperProps = {
      * @default mid
      */
     shadow?: Exclude<ShadowOptions, 'drop'>;
+    as?: ElementType;
 };
 export type PaperProps = BasePaperProps & FlexProps;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Paper/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAA;AACvE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAA;AAC7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAA;IAErB;;;OAGG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAElC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;CACxC,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,SAAS,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Paper/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAEnC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAA;AACvE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAA;AAC7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAA;IAErB;;;OAGG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAElC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;IACvC,EAAE,CAAC,EAAE,WAAW,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,SAAS,CAAA"}

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

@@ -2,5 +2,4 @@ export * from './Box';
 export * from './Divider';
 export * from './Flex';
 export * from './Paper';
-export * from './Popup';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAA;AACrB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAA;AACrB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA"}

package/dist/components/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":";AA0BA,OAAO,EAAE,UAAU,EAAU,MAAM,SAAS,CAAA;AAqE5C,eAAO,MAAM,KAAK,sKA4RhB,CAAA"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":";AA4BA,OAAO,EAAE,UAAU,EAAU,MAAM,SAAS,CAAA;AAoF5C,eAAO,MAAM,KAAK,sKAgShB,CAAA"}