@atom-learning/components 8.0.3 → 8.1.0

package/dist/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport type { TAvatarRootContext } from './AvatarContext'\nimport { AvatarRootContext } from './AvatarContext'\nimport { AvatarIcon } from './AvatarIcon'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarInitial } from './AvatarInitial'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst avatarRootStyles = [\n  'flex',\n  'justify-center',\n  'items-center',\n  'text-grey-800',\n  'rounded-full',\n  'border-2',\n  'border-grey-200',\n  'bg-(--bg-color)',\n  'overflow-hidden'\n]\n\nconst StyledDiv = styled('div', {\n  base: avatarRootStyles,\n  variants: {\n    size: {\n      xs: ['size-6'],\n      sm: ['size-8'],\n      md: ['size-10'],\n      lg: ['size-12'],\n      xl: ['size-16'],\n      xxl: ['size-24']\n    },\n    emphasis: {\n      bold: ['border-0', '[&>p]:text-white'],\n      subtle: ['border-0'],\n      white: []\n    }\n  }\n})\n\nconst StyledButton = styled('button', {\n  base: [\n    ...avatarRootStyles,\n    'not-disabled:active:bg-grey-200',\n    'not-disabled:active:border-primary-800',\n    'not-disabled:hover:bg-grey-100',\n    'not-disabled:hover:border-grey-800',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    size: {\n      xs: ['size-6'],\n      sm: ['size-8'],\n      md: ['size-10'],\n      lg: ['size-12'],\n      xl: ['size-16'],\n      xxl: ['size-24']\n    },\n    emphasis: {\n      bold: ['border-0', '[&>p]:text-white'],\n      subtle: ['border-0'],\n      white: []\n    }\n  }\n})\n\ntype TAvatarProps = React.ComponentProps<\n  typeof StyledDiv | typeof StyledButton\n> & {\n  name?: string\n} & (\n    | {\n        onClick: React.MouseEventHandler<HTMLButtonElement>\n        disabled?: boolean\n      }\n    | { onClick?: never; disabled?: never }\n  )\n\nexport { AvatarRootContext }\nexport type { TAvatarRootContext }\n\nexport const AvatarRootProvider = ({ children, name, size }: TAvatarProps) => {\n  const value = React.useMemo<TAvatarRootContext>(\n    () => ({ name, size }),\n    [name, size]\n  )\n\n  return (\n    <AvatarRootContext.Provider value={value}>\n      {children}\n    </AvatarRootContext.Provider>\n  )\n}\n\nconst DS_COLORS = [\n  'maroon',\n  'red',\n  'magenta',\n  'pink',\n  'purple',\n  'lapis',\n  'blue',\n  'cyan',\n  'teal',\n  'green',\n  'lime',\n  'yellow',\n  'orange'\n] as const\n\nconst getBackgroundColor = ({\n  emphasis,\n  name\n}: Pick<TAvatarProps, 'emphasis' | 'name'>) => {\n  if (emphasis === 'white' || !name) return 'white'\n  const index = name.toLocaleUpperCase().charCodeAt(0) % DS_COLORS.length\n  return `var(--color-${DS_COLORS[index]}-${emphasis === 'bold' ? 700 : 300})`\n}\n\nexport const AvatarRoot = ({\n  children,\n  size = 'lg',\n  name,\n  emphasis = 'white',\n  disabled = false,\n  onClick\n}: TAvatarProps) => {\n  const backgroundColor = getBackgroundColor({ emphasis, name })\n  return (\n    <AvatarRootProvider name={name} size={size}>\n      {onClick ? (\n        <StyledButton\n          size={size}\n          style={{\n            '--bg-color': backgroundColor\n          }}\n          disabled={disabled}\n          onClick={disabled ? undefined : onClick}\n          className={cn(disabled ? 'cursor-auto' : 'cursor-pointer')}\n          emphasis={emphasis}\n        >\n          {children}\n        </StyledButton>\n      ) : (\n        <StyledDiv\n          size={size}\n          style={{\n            '--bg-color': backgroundColor\n          }}\n          emphasis={emphasis}\n        >\n          {children}\n        </StyledDiv>\n      )}\n    </AvatarRootProvider>\n  )\n}\n\nexport const Avatar = Object.assign(AvatarRoot, {\n  Image: AvatarImage,\n  Initial: AvatarInitial,\n  Placeholder: AvatarPlaceholder,\n  Icon: AvatarIcon\n})\n\nAvatarRoot.displayName = 'Avatar'\n"],"mappings":";;;;;;;;;AAYA,IAAM,mBAAmB;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAM,YAAY,OAAO,OAAO;CAC9B,MAAM;CACN,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,UAAU;GACf,IAAI,CAAC,UAAU;GACf,IAAI,CAAC,UAAU;GACf,KAAK,CAAC,UAAU;GACjB;EACD,UAAU;GACR,MAAM,CAAC,YAAY,mBAAmB;GACtC,QAAQ,CAAC,WAAW;GACpB,OAAO,EAAE;GACV;EACF;CACF,CAAC;AAEF,IAAM,eAAe,OAAO,UAAU;CACpC,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,UAAU;GACf,IAAI,CAAC,UAAU;GACf,IAAI,CAAC,UAAU;GACf,KAAK,CAAC,UAAU;GACjB;EACD,UAAU;GACR,MAAM,CAAC,YAAY,mBAAmB;GACtC,QAAQ,CAAC,WAAW;GACpB,OAAO,EAAE;GACV;EACF;CACF,CAAC;AAiBF,IAAa,sBAAsB,EAAE,UAAU,MAAM,WAAyB;CAC5E,MAAM,QAAQ,QAAM,eACX;EAAE;EAAM;EAAM,GACrB,CAAC,MAAM,KAAK,CACb;AAED,QACE,oBAAC,kBAAkB,UAAnB;EAAmC;EAChC;EAC0B,CAAA;;AAIjC,IAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAM,sBAAsB,EAC1B,UACA,WAC6C;AAC7C,KAAI,aAAa,WAAW,CAAC,KAAM,QAAO;AAE1C,QAAO,eAAe,UADR,KAAK,mBAAmB,CAAC,WAAW,EAAE,GAAG,UAAU,QAC1B,GAAG,aAAa,SAAS,MAAM,IAAI;;AAG5E,IAAa,cAAc,EACzB,UACA,OAAO,MACP,MACA,WAAW,SACX,WAAW,OACX,cACkB;CAClB,MAAM,kBAAkB,mBAAmB;EAAE;EAAU;EAAM,CAAC;AAC9D,QACE,oBAAC,oBAAD;EAA0B;EAAY;YACnC,UACC,oBAAC,cAAD;GACQ;GACN,OAAO,EACL,cAAc,iBACf;GACS;GACV,SAAS,WAAW,KAAA,IAAY;GAChC,WAAW,GAAG,WAAW,gBAAgB,iBAAiB;GAChD;GAET;GACY,CAAA,GAEf,oBAAC,WAAD;GACQ;GACN,OAAO,EACL,cAAc,iBACf;GACS;GAET;GACS,CAAA;EAEK,CAAA;;AAIzB,IAAa,SAAS,OAAO,OAAO,YAAY;CAC9C,OAAO;CACP,SAAS;CACT,aAAa;CACb,MAAM;CACP,CAAC;AAEF,WAAW,cAAc"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport type { AvatarRootContextValue } from './Avatar.context'\nimport { AvatarRootContext } from './Avatar.context'\nimport { AvatarIcon } from './AvatarIcon'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarInitial } from './AvatarInitial'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst avatarRootStyles = [\n  'flex',\n  'justify-center',\n  'items-center',\n  'text-grey-800',\n  'rounded-full',\n  'border-2',\n  'border-grey-200',\n  'bg-(--bg-color)',\n  'overflow-hidden'\n]\n\nconst StyledDiv = styled('div', {\n  base: avatarRootStyles,\n  variants: {\n    size: {\n      xs: ['size-6'],\n      sm: ['size-8'],\n      md: ['size-10'],\n      lg: ['size-12'],\n      xl: ['size-16'],\n      xxl: ['size-24']\n    },\n    emphasis: {\n      bold: ['border-0', '[&>p]:text-white'],\n      subtle: ['border-0'],\n      white: []\n    }\n  }\n})\n\nconst StyledButton = styled('button', {\n  base: [\n    ...avatarRootStyles,\n    'not-disabled:active:bg-grey-200',\n    'not-disabled:active:border-primary-800',\n    'not-disabled:hover:bg-grey-100',\n    'not-disabled:hover:border-grey-800',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    size: {\n      xs: ['size-6'],\n      sm: ['size-8'],\n      md: ['size-10'],\n      lg: ['size-12'],\n      xl: ['size-16'],\n      xxl: ['size-24']\n    },\n    emphasis: {\n      bold: ['border-0', '[&>p]:text-white'],\n      subtle: ['border-0'],\n      white: []\n    }\n  }\n})\n\ntype AvatarProps = React.ComponentProps<\n  typeof StyledDiv | typeof StyledButton\n> & {\n  name?: string\n} & (\n    | {\n        onClick: React.MouseEventHandler<HTMLButtonElement>\n        disabled?: boolean\n      }\n    | { onClick?: never; disabled?: never }\n  )\n\nexport { AvatarRootContext }\nexport type { AvatarRootContextValue }\n\nexport const AvatarRootProvider = ({ children, name, size }: AvatarProps) => {\n  const value = React.useMemo<AvatarRootContextValue>(\n    () => ({ name, size }),\n    [name, size]\n  )\n\n  return (\n    <AvatarRootContext.Provider value={value}>\n      {children}\n    </AvatarRootContext.Provider>\n  )\n}\n\nconst DS_COLORS = [\n  'maroon',\n  'red',\n  'magenta',\n  'pink',\n  'purple',\n  'lapis',\n  'blue',\n  'cyan',\n  'teal',\n  'green',\n  'lime',\n  'yellow',\n  'orange'\n] as const\n\nconst getBackgroundColor = ({\n  emphasis,\n  name\n}: Pick<AvatarProps, 'emphasis' | 'name'>) => {\n  if (emphasis === 'white' || !name) return 'white'\n  const index = name.toLocaleUpperCase().charCodeAt(0) % DS_COLORS.length\n  return `var(--color-${DS_COLORS[index]}-${emphasis === 'bold' ? 700 : 300})`\n}\n\nexport const AvatarRoot = ({\n  children,\n  size = 'lg',\n  name,\n  emphasis = 'white',\n  disabled = false,\n  onClick\n}: AvatarProps) => {\n  const backgroundColor = getBackgroundColor({ emphasis, name })\n  return (\n    <AvatarRootProvider name={name} size={size}>\n      {onClick ? (\n        <StyledButton\n          size={size}\n          style={{\n            '--bg-color': backgroundColor\n          }}\n          disabled={disabled}\n          onClick={disabled ? undefined : onClick}\n          className={cn(disabled ? 'cursor-auto' : 'cursor-pointer')}\n          emphasis={emphasis}\n        >\n          {children}\n        </StyledButton>\n      ) : (\n        <StyledDiv\n          size={size}\n          style={{\n            '--bg-color': backgroundColor\n          }}\n          emphasis={emphasis}\n        >\n          {children}\n        </StyledDiv>\n      )}\n    </AvatarRootProvider>\n  )\n}\n\nexport const Avatar = Object.assign(AvatarRoot, {\n  Image: AvatarImage,\n  Initial: AvatarInitial,\n  Placeholder: AvatarPlaceholder,\n  Icon: AvatarIcon\n})\n\nAvatarRoot.displayName = 'Avatar'\n"],"mappings":";;;;;;;;;AAUA,IAAM,mBAAmB;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAM,YAAY,OAAO,OAAO;CAC9B,MAAM;CACN,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,KAAK,CAAC,SAAS;EACjB;EACA,UAAU;GACR,MAAM,CAAC,YAAY,kBAAkB;GACrC,QAAQ,CAAC,UAAU;GACnB,OAAO,CAAC;EACV;CACF;AACF,CAAC;AAED,IAAM,eAAe,OAAO,UAAU;CACpC,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,KAAK,CAAC,SAAS;EACjB;EACA,UAAU;GACR,MAAM,CAAC,YAAY,kBAAkB;GACrC,QAAQ,CAAC,UAAU;GACnB,OAAO,CAAC;EACV;CACF;AACF,CAAC;AAiBD,IAAa,sBAAsB,EAAE,UAAU,MAAM,WAAwB;CAC3E,MAAM,QAAQ,QAAM,eACX;EAAE;EAAM;CAAK,IACpB,CAAC,MAAM,IAAI,CACb;CAEA,OACE,oBAAC,kBAAkB,UAAnB;EAAmC;EAChC;CACyB,CAAA;AAEhC;AAEA,IAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAM,sBAAsB,EAC1B,UACA,WAC4C;CAC5C,IAAI,aAAa,WAAW,CAAC,MAAM,OAAO;CAE1C,OAAO,eAAe,UADR,KAAK,kBAAkB,CAAC,CAAC,WAAW,CAAC,IAAI,UAAU,QAC1B,GAAG,aAAa,SAAS,MAAM,IAAI;AAC5E;AAEA,IAAa,cAAc,EACzB,UACA,OAAO,MACP,MACA,WAAW,SACX,WAAW,OACX,cACiB;CACjB,MAAM,kBAAkB,mBAAmB;EAAE;EAAU;CAAK,CAAC;CAC7D,OACE,oBAAC,oBAAD;EAA0B;EAAY;YACnC,UACC,oBAAC,cAAD;GACQ;GACN,OAAO,EACL,cAAc,gBAChB;GACU;GACV,SAAS,WAAW,KAAA,IAAY;GAChC,WAAW,GAAG,WAAW,gBAAgB,gBAAgB;GAC/C;GAET;EACW,CAAA,IAEd,oBAAC,WAAD;GACQ;GACN,OAAO,EACL,cAAc,gBAChB;GACU;GAET;EACQ,CAAA;CAEK,CAAA;AAExB;AAEA,IAAa,SAAS,OAAO,OAAO,YAAY;CAC9C,OAAO;CACP,SAAS;CACT,aAAa;CACb,MAAM;AACR,CAAC;AAED,WAAW,cAAc"}

package/dist/components/avatar/AvatarIcon.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Icon } from '../icon/Icon';
-export declare const AvatarIcon: ({ is }: {
-    is: typeof Icon;
-}) => React.JSX.Element;
+type AvatarIcon = {
+    is: React.FC<React.SVGProps<SVGSVGElement>>;
+};
+export declare const AvatarIcon: ({ is }: AvatarIcon) => React.JSX.Element;
+export {};

package/dist/components/avatar/AvatarIcon.js

@@ -1,5 +1,5 @@
 import { Icon } from "../icon/Icon.js";
-import { AvatarRootContext } from "./AvatarContext.js";
+import { AvatarRootContext } from "./Avatar.context.js";
 import { overrideStyledVariantValue } from "../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/avatar/AvatarIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.js","names":[],"sources":["../../../src/components/avatar/AvatarIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Icon } from '../icon/Icon'\nimport { AvatarRootContext } from './AvatarContext'\n\nconst toIconSize = {\n  xs: 'sm',\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg',\n  xxl: 'lg'\n}\n\nexport const AvatarIcon = ({ is }: { is: typeof Icon }) => {\n  const rootContext = React.useContext(AvatarRootContext)\n  const { size } = rootContext\n  const iconSize = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n\n  return <Icon size={iconSize} is={is} />\n}\n"],"mappings":";;;;;;AAOA,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;CACN;AAED,IAAa,cAAc,EAAE,SAA8B;CAEzD,MAAM,EAAE,SADY,QAAM,WAAW,kBAAkB;AAOvD,QAAO,oBAAC,MAAD;EAAM,MALI,QAAM,cACf,2BAA2B,OAAO,MAAM,WAAW,GAAG,EAC5D,CAAC,KAAK,CACP;EAEgC;EAAM,CAAA"}
+{"version":3,"file":"AvatarIcon.js","names":[],"sources":["../../../src/components/avatar/AvatarIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Icon } from '../icon/Icon'\nimport { AvatarRootContext } from './Avatar.context'\n\nconst toIconSize = {\n  xs: 'sm',\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg',\n  xxl: 'lg'\n}\n\ntype AvatarIcon = {\n  is: React.FC<React.SVGProps<SVGSVGElement>>\n}\n\nexport const AvatarIcon = ({ is }: AvatarIcon) => {\n  const rootContext = React.useContext(AvatarRootContext)\n  const { size } = rootContext\n  const iconSize = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n\n  return <Icon size={iconSize} is={is} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;AACP;AAMA,IAAa,cAAc,EAAE,SAAqB;CAEhD,MAAM,EAAE,SADY,QAAM,WAAW,iBACpB;CAMjB,OAAO,oBAAC,MAAD;EAAM,MALI,QAAM,cACf,2BAA2B,OAAO,MAAM,WAAW,EAAE,GAC3D,CAAC,IAAI,CAGY;EAAc;CAAK,CAAA;AACxC"}

package/dist/components/avatar/AvatarImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarImage.js","names":[],"sources":["../../../src/components/avatar/AvatarImage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Image } from '../image/Image'\nimport { AvatarInitial } from './AvatarInitial'\n\nexport const AvatarImage = ({ src, alt }: { src: string; alt: string }) => {\n  if (!src) {\n    return <AvatarInitial />\n  }\n\n  return <Image className=\"size-full object-cover\" src={src} alt={alt} />\n}\n"],"mappings":";;;;;AAKA,IAAa,eAAe,EAAE,KAAK,UAAwC;AACzE,KAAI,CAAC,IACH,QAAO,oBAAC,eAAD,EAAiB,CAAA;AAG1B,QAAO,oBAAC,OAAD;EAAO,WAAU;EAA8B;EAAU;EAAO,CAAA"}
+{"version":3,"file":"AvatarImage.js","names":[],"sources":["../../../src/components/avatar/AvatarImage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Image } from '../image/Image'\nimport { AvatarInitial } from './AvatarInitial'\n\nexport const AvatarImage = ({ src, alt }: { src: string; alt: string }) => {\n  if (!src) {\n    return <AvatarInitial />\n  }\n\n  return <Image className=\"size-full object-cover\" src={src} alt={alt} />\n}\n"],"mappings":";;;;;AAKA,IAAa,eAAe,EAAE,KAAK,UAAwC;CACzE,IAAI,CAAC,KACH,OAAO,oBAAC,eAAD,CAAgB,CAAA;CAGzB,OAAO,oBAAC,OAAD;EAAO,WAAU;EAA8B;EAAU;CAAM,CAAA;AACxE"}

package/dist/components/avatar/AvatarInitial.js

@@ -1,5 +1,5 @@
 import { Text } from "../text/Text.js";
-import { AvatarRootContext } from "./AvatarContext.js";
+import { AvatarRootContext } from "./Avatar.context.js";
 import { overrideStyledVariantValue } from "../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";
 import { AvatarPlaceholder } from "./AvatarPlaceholder.js";
 import * as React$1 from "react";

package/dist/components/avatar/AvatarInitial.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarInitial.js","names":[],"sources":["../../../src/components/avatar/AvatarInitial.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Text } from '../text/Text'\nimport { AvatarRootContext } from './AvatarContext'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst toTextSize = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n  xl: 'md',\n  xxl: 'lg'\n}\n\nexport const AvatarInitial = () => {\n  const rootContext = React.useContext(AvatarRootContext)\n  const { name, size } = rootContext\n  const textSize = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => toTextSize[s]),\n    [size]\n  )\n\n  if (!name) {\n    return <AvatarPlaceholder />\n  }\n\n  return (\n    <Text size={textSize} className=\"text-grey-800\">\n      {name[0].toUpperCase()}\n    </Text>\n  )\n}\n"],"mappings":";;;;;;;AAQA,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;CACN;AAED,IAAa,sBAAsB;CAEjC,MAAM,EAAE,MAAM,SADM,QAAM,WAAW,kBAAkB;CAEvD,MAAM,WAAW,QAAM,cACf,2BAA2B,OAAO,MAAM,WAAW,GAAG,EAC5D,CAAC,KAAK,CACP;AAED,KAAI,CAAC,KACH,QAAO,oBAAC,mBAAD,EAAqB,CAAA;AAG9B,QACE,oBAAC,MAAD;EAAM,MAAM;EAAU,WAAU;YAC7B,KAAK,GAAG,aAAa;EACjB,CAAA"}
+{"version":3,"file":"AvatarInitial.js","names":[],"sources":["../../../src/components/avatar/AvatarInitial.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Text } from '../text/Text'\nimport { AvatarRootContext } from './Avatar.context'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst toTextSize = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n  xl: 'md',\n  xxl: 'lg'\n}\n\nexport const AvatarInitial = () => {\n  const rootContext = React.useContext(AvatarRootContext)\n  const { name, size } = rootContext\n  const textSize = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => toTextSize[s]),\n    [size]\n  )\n\n  if (!name) {\n    return <AvatarPlaceholder />\n  }\n\n  return (\n    <Text size={textSize} className=\"text-grey-800\">\n      {name[0].toUpperCase()}\n    </Text>\n  )\n}\n"],"mappings":";;;;;;;AAOA,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;AACP;AAEA,IAAa,sBAAsB;CAEjC,MAAM,EAAE,MAAM,SADM,QAAM,WAAW,iBACd;CACvB,MAAM,WAAW,QAAM,cACf,2BAA2B,OAAO,MAAM,WAAW,EAAE,GAC3D,CAAC,IAAI,CACP;CAEA,IAAI,CAAC,MACH,OAAO,oBAAC,mBAAD,CAAoB,CAAA;CAG7B,OACE,oBAAC,MAAD;EAAM,MAAM;EAAU,WAAU;YAC7B,KAAK,EAAE,CAAC,YAAY;CACjB,CAAA;AAEV"}

package/dist/components/avatar/AvatarPlaceholder.js

@@ -3,15 +3,13 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { User } from "@atom-learning/icons";
 //#region src/components/avatar/AvatarPlaceholder.tsx
-var AvatarPlaceholder = () => {
-	return /* @__PURE__ */ jsx("div", {
-		className: "relative size-full",
-		children: /* @__PURE__ */ jsx(Icon, {
-			is: User,
-			className: "size-full"
-		})
-	});
-};
+var AvatarPlaceholder = () => /* @__PURE__ */ jsx("div", {
+	className: "relative size-full",
+	children: /* @__PURE__ */ jsx(Icon, {
+		is: User,
+		className: "size-full"
+	})
+});
 //#endregion
 export { AvatarPlaceholder };
 

package/dist/components/avatar/AvatarPlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarPlaceholder.js","names":[],"sources":["../../../src/components/avatar/AvatarPlaceholder.tsx"],"sourcesContent":["import { User } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { Icon } from '../icon/Icon'\n\nexport const AvatarPlaceholder = () => {\n  return (\n    <div className=\"relative size-full\">\n      <Icon is={User} className=\"size-full\" />\n    </div>\n  )\n}\n"],"mappings":";;;;;AAKA,IAAa,0BAA0B;AACrC,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,MAAD;GAAM,IAAI;GAAM,WAAU;GAAc,CAAA;EACpC,CAAA"}
+{"version":3,"file":"AvatarPlaceholder.js","names":[],"sources":["../../../src/components/avatar/AvatarPlaceholder.tsx"],"sourcesContent":["import { User } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { Icon } from '../icon/Icon'\n\nexport const AvatarPlaceholder = () => (\n  <div className=\"relative size-full\">\n    <Icon is={User} className=\"size-full\" />\n  </div>\n)\n"],"mappings":";;;;;AAKA,IAAa,0BACX,oBAAC,OAAD;CAAK,WAAU;WACb,oBAAC,MAAD;EAAM,IAAI;EAAM,WAAU;CAAa,CAAA;AACpC,CAAA"}

package/dist/components/badge/Badge.colorscheme.config.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.colorscheme.config.js","names":[],"sources":["../../../src/components/badge/Badge.colorscheme.config.ts"],"sourcesContent":["/*\n\t•\tFactory for non-semantic color schemes\n*/\nconst createScheme = (c: string, overrides: Record<string, string> = {}) => ({\n  '--text-subtle': `var(--color-${c}-1000)`,\n  '--background-subtle': `var(--color-${c}-200)`,\n  '--text-subtle-hover': `var(--color-${c}-1100)`,\n  '--background-subtle-hover': `var(--color-${c}-300)`,\n  '--text-bold': 'white',\n  '--background-bold': `var(--color-${c}-800)`,\n  '--background-bold-hover': `var(--color-${c}-900)`,\n  '--text-on-white': `var(--color-${c}-800)`,\n  ...overrides\n})\n\n/*\n\t•\tSemantic themes\n*/\nconst info = {\n  '--text-subtle': 'var(--color-info-mid)',\n  '--background-subtle': 'var(--color-info-light)',\n  '--text-bold': 'white',\n  '--background-bold': 'var(--color-info)',\n  '--text-on-white': 'var(--color-info)'\n}\nconst neutral = {\n  '--text-subtle': 'var(--color-grey-900)',\n  '--background-subtle': 'var(--color-grey-100)',\n  '--text-bold': 'white',\n  '--background-bold': 'var(--color-grey-800)',\n  '--text-on-white': 'var(--color-grey-800)'\n}\nconst success = {\n  '--text-subtle': 'var(--color-success-mid)',\n  '--background-subtle': 'var(--color-success-light)',\n  '--text-bold': 'white',\n  '--background-bold': 'var(--color-success)',\n  '--text-on-white': 'var(--color-success)'\n}\nconst danger = {\n  '--text-subtle': 'var(--color-danger-mid)',\n  '--background-subtle': 'var(--color-danger-light)',\n  '--text-bold': 'white',\n  '--background-bold': 'var(--color-danger)',\n  '--text-on-white': 'var(--color-danger)'\n}\nconst warning = {\n  '--text-subtle': 'var(--color-warning-text)',\n  '--background-subtle': 'var(--color-warning-light)',\n  '--text-bold': 'var(--color-grey-1000)',\n  '--background-bold': 'var(--color-warning)',\n  '--text-on-white': 'var(--color-warning)'\n}\n\n/*\n\t•\tNon-semantic themes\n*/\nexport const badgeSemanticNames = [\n  'info',\n  'neutral',\n  'success',\n  'danger',\n  'warning'\n]\nexport const colorSchemes = {\n  info,\n  neutral,\n  success,\n  danger,\n  warning,\n  primary: createScheme('primary'),\n  grey: createScheme('grey'),\n  blue: createScheme('blue'),\n  pink: createScheme('pink'),\n  purple: createScheme('purple', {\n    '--text-on-white': 'var(--color-purple-700)'\n  }),\n  cyan: createScheme('cyan'),\n  green: createScheme('green'),\n  magenta: createScheme('magenta'),\n  red: createScheme('red', {\n    '--background-subtle-hover': 'var(--color-red-400)'\n  }),\n  teal: createScheme('teal'),\n  orange: createScheme('orange', {\n    '--text-bold': 'var(--color-grey-1200)',\n    '--background-bold': 'var(--color-orange-600)',\n    '--background-bold-hover': 'var(--color-orange-700)',\n    '--text-on-white': 'var(--color-orange-1000)'\n  }),\n  yellow: createScheme('yellow', {\n    '--text-bold': 'var(--color-grey-1200)',\n    '--background-bold': 'var(--color-yellow-500)',\n    '--background-bold-hover': 'var(--color-yellow-600)',\n    '--text-on-white': 'var(--color-yellow-900)'\n  }),\n  lime: createScheme('lime', {\n    '--text-bold': 'var(--color-grey-1200)',\n    '--background-bold': 'var(--color-lime-600)',\n    '--background-bold-hover': 'var(--color-lime-700)',\n    '--text-on-white': 'var(--color-lime-900)'\n  }),\n  lapis: createScheme('lapis', {\n    '--background-bold': 'var(--color-lapis-700)',\n    '--text-on-white': 'var(--color-lapis-700)'\n  }),\n  maroon: createScheme('maroon', {\n    '--text-on-white': 'var(--color-maroon-700)'\n  }),\n  marsh: createScheme('marsh', { '--text-on-white': 'var(--color-marsh-700)' })\n}\n"],"mappings":";AAGA,IAAM,gBAAgB,GAAW,YAAoC,EAAE,MAAM;CAC3E,iBAAiB,eAAe,EAAE;CAClC,uBAAuB,eAAe,EAAE;CACxC,uBAAuB,eAAe,EAAE;CACxC,6BAA6B,eAAe,EAAE;CAC9C,eAAe;CACf,qBAAqB,eAAe,EAAE;CACtC,2BAA2B,eAAe,EAAE;CAC5C,mBAAmB,eAAe,EAAE;CACpC,GAAG;CACJ;AAKD,IAAM,OAAO;CACX,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;CACpB;AACD,IAAM,UAAU;CACd,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;CACpB;AACD,IAAM,UAAU;CACd,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;CACpB;AACD,IAAM,SAAS;CACb,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;CACpB;AACD,IAAM,UAAU;CACd,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;CACpB;AAKD,IAAa,qBAAqB;CAChC;CACA;CACA;CACA;CACA;CACD;AACD,IAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA,SAAS,aAAa,UAAU;CAChC,MAAM,aAAa,OAAO;CAC1B,MAAM,aAAa,OAAO;CAC1B,MAAM,aAAa,OAAO;CAC1B,QAAQ,aAAa,UAAU,EAC7B,mBAAmB,2BACpB,CAAC;CACF,MAAM,aAAa,OAAO;CAC1B,OAAO,aAAa,QAAQ;CAC5B,SAAS,aAAa,UAAU;CAChC,KAAK,aAAa,OAAO,EACvB,6BAA6B,wBAC9B,CAAC;CACF,MAAM,aAAa,OAAO;CAC1B,QAAQ,aAAa,UAAU;EAC7B,eAAe;EACf,qBAAqB;EACrB,2BAA2B;EAC3B,mBAAmB;EACpB,CAAC;CACF,QAAQ,aAAa,UAAU;EAC7B,eAAe;EACf,qBAAqB;EACrB,2BAA2B;EAC3B,mBAAmB;EACpB,CAAC;CACF,MAAM,aAAa,QAAQ;EACzB,eAAe;EACf,qBAAqB;EACrB,2BAA2B;EAC3B,mBAAmB;EACpB,CAAC;CACF,OAAO,aAAa,SAAS;EAC3B,qBAAqB;EACrB,mBAAmB;EACpB,CAAC;CACF,QAAQ,aAAa,UAAU,EAC7B,mBAAmB,2BACpB,CAAC;CACF,OAAO,aAAa,SAAS,EAAE,mBAAmB,0BAA0B,CAAC;CAC9E"}
+{"version":3,"file":"Badge.colorscheme.config.js","names":[],"sources":["../../../src/components/badge/Badge.colorscheme.config.ts"],"sourcesContent":["/*\n\t•\tFactory for non-semantic color schemes\n*/\nconst createScheme = (c: string, overrides: Record<string, string> = {}) => ({\n  '--text-subtle': `var(--color-${c}-1000)`,\n  '--background-subtle': `var(--color-${c}-200)`,\n  '--text-subtle-hover': `var(--color-${c}-1100)`,\n  '--background-subtle-hover': `var(--color-${c}-300)`,\n  '--text-bold': 'white',\n  '--background-bold': `var(--color-${c}-800)`,\n  '--background-bold-hover': `var(--color-${c}-900)`,\n  '--text-on-white': `var(--color-${c}-800)`,\n  ...overrides\n})\n\n/*\n\t•\tSemantic themes\n*/\nconst info = {\n  '--text-subtle': 'var(--color-info-mid)',\n  '--background-subtle': 'var(--color-info-light)',\n  '--text-bold': 'white',\n  '--background-bold': 'var(--color-info)',\n  '--text-on-white': 'var(--color-info)'\n}\nconst neutral = {\n  '--text-subtle': 'var(--color-grey-900)',\n  '--background-subtle': 'var(--color-grey-100)',\n  '--text-bold': 'white',\n  '--background-bold': 'var(--color-grey-800)',\n  '--text-on-white': 'var(--color-grey-800)'\n}\nconst success = {\n  '--text-subtle': 'var(--color-success-mid)',\n  '--background-subtle': 'var(--color-success-light)',\n  '--text-bold': 'white',\n  '--background-bold': 'var(--color-success)',\n  '--text-on-white': 'var(--color-success)'\n}\nconst danger = {\n  '--text-subtle': 'var(--color-danger-mid)',\n  '--background-subtle': 'var(--color-danger-light)',\n  '--text-bold': 'white',\n  '--background-bold': 'var(--color-danger)',\n  '--text-on-white': 'var(--color-danger)'\n}\nconst warning = {\n  '--text-subtle': 'var(--color-warning-text)',\n  '--background-subtle': 'var(--color-warning-light)',\n  '--text-bold': 'var(--color-grey-1000)',\n  '--background-bold': 'var(--color-warning)',\n  '--text-on-white': 'var(--color-warning)'\n}\n\n/*\n\t•\tNon-semantic themes\n*/\nexport const badgeSemanticNames = [\n  'info',\n  'neutral',\n  'success',\n  'danger',\n  'warning'\n]\nexport const colorSchemes = {\n  info,\n  neutral,\n  success,\n  danger,\n  warning,\n  primary: createScheme('primary'),\n  grey: createScheme('grey'),\n  blue: createScheme('blue'),\n  pink: createScheme('pink'),\n  purple: createScheme('purple', {\n    '--text-on-white': 'var(--color-purple-700)'\n  }),\n  cyan: createScheme('cyan'),\n  green: createScheme('green'),\n  magenta: createScheme('magenta'),\n  red: createScheme('red', {\n    '--background-subtle-hover': 'var(--color-red-400)'\n  }),\n  teal: createScheme('teal'),\n  orange: createScheme('orange', {\n    '--text-bold': 'var(--color-grey-1200)',\n    '--background-bold': 'var(--color-orange-600)',\n    '--background-bold-hover': 'var(--color-orange-700)',\n    '--text-on-white': 'var(--color-orange-1000)'\n  }),\n  yellow: createScheme('yellow', {\n    '--text-bold': 'var(--color-grey-1200)',\n    '--background-bold': 'var(--color-yellow-500)',\n    '--background-bold-hover': 'var(--color-yellow-600)',\n    '--text-on-white': 'var(--color-yellow-900)'\n  }),\n  lime: createScheme('lime', {\n    '--text-bold': 'var(--color-grey-1200)',\n    '--background-bold': 'var(--color-lime-600)',\n    '--background-bold-hover': 'var(--color-lime-700)',\n    '--text-on-white': 'var(--color-lime-900)'\n  }),\n  lapis: createScheme('lapis', {\n    '--background-bold': 'var(--color-lapis-700)',\n    '--text-on-white': 'var(--color-lapis-700)'\n  }),\n  maroon: createScheme('maroon', {\n    '--text-on-white': 'var(--color-maroon-700)'\n  }),\n  marsh: createScheme('marsh', { '--text-on-white': 'var(--color-marsh-700)' })\n}\n"],"mappings":";AAGA,IAAM,gBAAgB,GAAW,YAAoC,CAAC,OAAO;CAC3E,iBAAiB,eAAe,EAAE;CAClC,uBAAuB,eAAe,EAAE;CACxC,uBAAuB,eAAe,EAAE;CACxC,6BAA6B,eAAe,EAAE;CAC9C,eAAe;CACf,qBAAqB,eAAe,EAAE;CACtC,2BAA2B,eAAe,EAAE;CAC5C,mBAAmB,eAAe,EAAE;CACpC,GAAG;AACL;AAKA,IAAM,OAAO;CACX,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;AACrB;AACA,IAAM,UAAU;CACd,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;AACrB;AACA,IAAM,UAAU;CACd,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;AACrB;AACA,IAAM,SAAS;CACb,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;AACrB;AACA,IAAM,UAAU;CACd,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;AACrB;AAKA,IAAa,qBAAqB;CAChC;CACA;CACA;CACA;CACA;AACF;AACA,IAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA,SAAS,aAAa,SAAS;CAC/B,MAAM,aAAa,MAAM;CACzB,MAAM,aAAa,MAAM;CACzB,MAAM,aAAa,MAAM;CACzB,QAAQ,aAAa,UAAU,EAC7B,mBAAmB,0BACrB,CAAC;CACD,MAAM,aAAa,MAAM;CACzB,OAAO,aAAa,OAAO;CAC3B,SAAS,aAAa,SAAS;CAC/B,KAAK,aAAa,OAAO,EACvB,6BAA6B,uBAC/B,CAAC;CACD,MAAM,aAAa,MAAM;CACzB,QAAQ,aAAa,UAAU;EAC7B,eAAe;EACf,qBAAqB;EACrB,2BAA2B;EAC3B,mBAAmB;CACrB,CAAC;CACD,QAAQ,aAAa,UAAU;EAC7B,eAAe;EACf,qBAAqB;EACrB,2BAA2B;EAC3B,mBAAmB;CACrB,CAAC;CACD,MAAM,aAAa,QAAQ;EACzB,eAAe;EACf,qBAAqB;EACrB,2BAA2B;EAC3B,mBAAmB;CACrB,CAAC;CACD,OAAO,aAAa,SAAS;EAC3B,qBAAqB;EACrB,mBAAmB;CACrB,CAAC;CACD,QAAQ,aAAa,UAAU,EAC7B,mBAAmB,0BACrB,CAAC;CACD,OAAO,aAAa,SAAS,EAAE,mBAAmB,yBAAyB,CAAC;AAC9E"}

package/dist/components/badge/Badge.context.d.ts

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import type { TBadgeProps } from './Badge';
-type TBadgeProviderProps = {
-    size?: TBadgeProps['size'];
-    overflow?: TBadgeProps['overflow'];
+import type { BadgeProps } from './Badge';
+import type { BadgeOverflow } from './Badge.types';
+type BadgeProviderProps = {
+    size?: BadgeProps['size'];
+    overflow?: BadgeOverflow;
 };
-type TBadgeContext = TBadgeProviderProps & {
+type BadgeContext = BadgeProviderProps & {
     isOverflowing?: boolean;
     setIsOverflowing?: React.Dispatch<React.SetStateAction<boolean>>;
 };
-export declare const BadgeContext: React.Context<TBadgeContext>;
-export declare const BadgeProvider: ({ size, overflow, children }: React.PropsWithChildren<TBadgeProviderProps>) => React.JSX.Element;
+export declare const BadgeContext: React.Context<BadgeContext>;
+export declare const BadgeProvider: ({ size, overflow, children }: React.PropsWithChildren<BadgeProviderProps>) => React.JSX.Element;
 export {};

package/dist/components/badge/Badge.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.context.js","names":[],"sources":["../../../src/components/badge/Badge.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { TBadgeProps } from './Badge'\n\ntype TBadgeProviderProps = {\n  size?: TBadgeProps['size']\n  overflow?: TBadgeProps['overflow']\n}\n\ntype TBadgeContext = TBadgeProviderProps & {\n  isOverflowing?: boolean\n  setIsOverflowing?: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nexport const BadgeContext = React.createContext<TBadgeContext>({})\n\nexport const BadgeProvider = ({\n  size,\n  overflow,\n  children\n}: React.PropsWithChildren<TBadgeProviderProps>) => {\n  const [isOverflowing, setIsOverflowing] = React.useState(false)\n\n  const value = React.useMemo<TBadgeContext>(\n    () => ({ size, overflow, isOverflowing, setIsOverflowing }),\n    [size, overflow, isOverflowing, setIsOverflowing]\n  )\n  return <BadgeContext.Provider value={value}>{children}</BadgeContext.Provider>\n}\n"],"mappings":";;;AAcA,IAAa,eAAe,QAAM,cAA6B,EAAE,CAAC;AAElE,IAAa,iBAAiB,EAC5B,MACA,UACA,eACkD;CAClD,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,MAAM;CAE/D,MAAM,QAAQ,QAAM,eACX;EAAE;EAAM;EAAU;EAAe;EAAkB,GAC1D;EAAC;EAAM;EAAU;EAAe;EAAiB,CAClD;AACD,QAAO,oBAAC,aAAa,UAAd;EAA8B;EAAQ;EAAiC,CAAA"}
+{"version":3,"file":"Badge.context.js","names":[],"sources":["../../../src/components/badge/Badge.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { BadgeProps } from './Badge'\nimport type { BadgeOverflow } from './Badge.types'\n\ntype BadgeProviderProps = {\n  size?: BadgeProps['size']\n  overflow?: BadgeOverflow\n}\n\ntype BadgeContext = BadgeProviderProps & {\n  isOverflowing?: boolean\n  setIsOverflowing?: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nexport const BadgeContext = React.createContext<BadgeContext>({})\n\nexport const BadgeProvider = ({\n  size,\n  overflow,\n  children\n}: React.PropsWithChildren<BadgeProviderProps>) => {\n  const [isOverflowing, setIsOverflowing] = React.useState(false)\n\n  const value = React.useMemo<BadgeContext>(\n    () => ({ size, overflow, isOverflowing, setIsOverflowing }),\n    [size, overflow, isOverflowing, setIsOverflowing]\n  )\n  return <BadgeContext.Provider value={value}>{children}</BadgeContext.Provider>\n}\n"],"mappings":";;;AAeA,IAAa,eAAe,QAAM,cAA4B,CAAC,CAAC;AAEhE,IAAa,iBAAiB,EAC5B,MACA,UACA,eACiD;CACjD,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,KAAK;CAE9D,MAAM,QAAQ,QAAM,eACX;EAAE;EAAM;EAAU;EAAe;CAAiB,IACzD;EAAC;EAAM;EAAU;EAAe;CAAgB,CAClD;CACA,OAAO,oBAAC,aAAa,UAAd;EAA8B;EAAQ;CAAgC,CAAA;AAC/E"}

package/dist/components/badge/Badge.d.ts

@@ -1,32 +1,32 @@
 import * as React from 'react';
-import { Icon } from '../../components/icon/Icon';
+import { Icon } from '../icon/Icon';
 import { colorSchemes as badgeColorSchemes } from './Badge.colorscheme.config';
-import { BadgeText } from './BadgeText';
-declare const StyledBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size" | "emphasis" | "isClickable" | "highlighted"> & {
-    emphasis?: ("bold" | "white" | "subtle" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "white" | "subtle">>) | undefined;
-    size?: ("sm" | "md" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "xs">>) | undefined;
-    isClickable?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-    highlighted?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+import type { BadgeOverflow } from './Badge.types';
+declare const StyledBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "emphasis" | "highlighted" | "isClickable" | "size"> & {
+    emphasis?: ("bold" | "subtle" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "subtle" | "white">>) | undefined;
+    size?: ("md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "md" | "sm" | "xs">>) | undefined;
+    isClickable?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    highlighted?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
 }>;
-export type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {
+export type BadgeProps = React.ComponentProps<typeof StyledBadge> & {
     theme?: keyof typeof badgeColorSchemes;
-    overflow?: React.ComponentProps<typeof BadgeText>['overflow'];
+    overflow?: BadgeOverflow;
 };
-export declare const Badge: React.ForwardRefExoticComponent<Omit<TBadgeProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+export declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
     Icon: (props: React.ComponentProps<typeof Icon>) => React.JSX.Element;
-    Text: ({ children, ...rest }: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size" | "noCapsize" | "weight" | "family"> & {
-        size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
-        noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
-        family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
+    Text: ({ children, ...rest }: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "family" | "noCapsize" | "size" | "weight"> & {
+        size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+        noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
     } & {
         as?: React.ElementType;
     }, "as"> & {
-        as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+        as?: 'blockquote' | 'caption' | 'dd' | 'dt' | 'figcaption' | 'li' | 'p' | 'span' | 'legend' | React.ComponentType | React.ElementType;
     }, "ref"> & React.RefAttributes<HTMLParagraphElement>, "overflow"> & {
-        overflow?: "wrap" | "ellipsis" | undefined;
+        overflow?: "ellipsis" | "wrap" | undefined;
     } & {
         as?: React.ElementType;
     }) => React.JSX.Element;

package/dist/components/badge/Badge.js

@@ -97,16 +97,14 @@ var BadgeInner = React$1.forwardRef(({ theme = "info", emphasis = "subtle", chil
 		})
 	});
 });
-var BadgeComponent = React$1.forwardRef(({ size = "sm", overflow = "wrap", ...rest }, ref) => {
-	return /* @__PURE__ */ jsx(BadgeProvider, {
-		size,
-		overflow,
-		children: /* @__PURE__ */ jsx(BadgeInner, {
-			...rest,
-			ref
-		})
-	});
-});
+var BadgeComponent = React$1.forwardRef(({ size = "sm", overflow = "wrap", ...rest }, ref) => /* @__PURE__ */ jsx(BadgeProvider, {
+	size,
+	overflow,
+	children: /* @__PURE__ */ jsx(BadgeInner, {
+		...rest,
+		ref
+	})
+}));
 var Badge = Object.assign(BadgeComponent, {
 	Icon: BadgeIcon,
 	Text: BadgeText

package/dist/components/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":[],"sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\n\nimport {\n  badgeSemanticNames,\n  colorSchemes as badgeColorSchemes\n} from './Badge.colorscheme.config'\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\n\nconst StyledBadge = styled(\n  'div',\n  {\n    base: [\n      'flex',\n      'justify-center',\n      'items-center',\n      'rounded-sm',\n      'min-w-0',\n      'border',\n      'border-white',\n      'font-body',\n      '*:not-last:mr-1'\n    ],\n    variants: {\n      emphasis: {\n        white: ['text-(--text-on-white)', 'bg-white'],\n        subtle: ['text-(--text-subtle)', 'bg-(--background-subtle)'],\n        bold: ['text-(--text-bold)', 'bg-(--background-bold)']\n      },\n      size: {\n        xs: ['px-1', 'py-0'],\n        sm: ['px-1', 'py-0.5'],\n        md: ['px-2', 'py-1']\n      },\n      isClickable: {\n        true: ['cursor-pointer']\n      },\n      highlighted: {\n        true: []\n      }\n    },\n    compoundVariants: [\n      {\n        isClickable: true,\n        emphasis: 'white',\n        class: [\n          'hover:text-(--text-on-white)',\n          'hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n        ]\n      },\n      {\n        isClickable: true,\n        emphasis: 'subtle',\n        class: [\n          'hover:bg-(--background-subtle-hover)',\n          'hover:text-(--text-subtle-hover)'\n        ]\n      },\n      {\n        isClickable: true,\n        emphasis: 'bold',\n        class: [\n          'hover:bg-(--background-bold-hover)',\n          'hover:text-(--text-bold)'\n        ]\n      },\n      {\n        emphasis: 'white',\n        highlighted: true,\n        class: [\n          'text-(--text-on-white)',\n          'bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n        ]\n      },\n      {\n        emphasis: 'subtle',\n        highlighted: true,\n        class: ['text-(--text-subtle-hover)', '(--bg-background-subtle-hover)']\n      },\n      {\n        emphasis: 'bold',\n        highlighted: true,\n        class: ['text-(--text-bold)', 'bg-(--background-bold-hover)']\n      }\n    ]\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {\n  theme?: keyof typeof badgeColorSchemes\n  overflow?: React.ComponentProps<typeof BadgeText>['overflow']\n}\n\ntype TBadgeInnerProps = Omit<TBadgeProps, 'size' | 'overflow'>\n\nconst BadgeInner = React.forwardRef<HTMLDivElement, TBadgeInnerProps>(\n  ({ theme = 'info', emphasis = 'subtle', children, style, ...rest }, ref) => {\n    const { size, overflow, isOverflowing } = React.useContext(BadgeContext)\n    const [badgeElRef, setBadgeElRef] = useCallbackRefState()\n    React.useImperativeHandle(ref, () => badgeElRef as HTMLDivElement)\n\n    const label = badgeElRef?.textContent\n\n    const isInfoOnly = badgeSemanticNames.includes(theme)\n\n    const isClickable =\n      Object.keys(rest).includes('onClick') ||\n      Object.keys(rest).includes('href')\n\n    return (\n      <OptionalTooltipWrapper\n        hasTooltip={overflow === 'ellipsis' && isOverflowing}\n        label={label}\n      >\n        <StyledBadge\n          role=\"status\"\n          emphasis={emphasis}\n          size={size}\n          style={{\n            ...badgeColorSchemes[theme],\n            ...style\n          }}\n          {...rest}\n          ref={setBadgeElRef}\n          isClickable={isClickable && !isInfoOnly}\n        >\n          {React.Children.map(children, (child) => {\n            if (typeof child === 'string' || typeof child === 'number') {\n              return <BadgeText>{child}</BadgeText>\n            }\n            if (\n              React.isValidElement<React.ComponentPropsWithoutRef<typeof Icon>>(\n                child\n              ) &&\n              child.type === Icon\n            ) {\n              return <BadgeIcon {...child.props} />\n            }\n            return child\n          })}\n        </StyledBadge>\n      </OptionalTooltipWrapper>\n    )\n  }\n)\n\nconst BadgeComponent = React.forwardRef<HTMLDivElement, TBadgeProps>(\n  ({ size = 'sm', overflow = 'wrap', ...rest }, ref) => {\n    return (\n      <BadgeProvider size={size} overflow={overflow}>\n        <BadgeInner {...rest} ref={ref} />\n      </BadgeProvider>\n    )\n  }\n)\n\nexport const Badge = Object.assign(BadgeComponent, {\n  Icon: BadgeIcon,\n  Text: BadgeText\n})\n\nBadgeComponent.displayName = 'Badge'\n"],"mappings":";;;;;;;;;;;AAeA,IAAM,cAAc,OAClB,OACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,UAAU;GACR,OAAO,CAAC,0BAA0B,WAAW;GAC7C,QAAQ,CAAC,wBAAwB,2BAA2B;GAC5D,MAAM,CAAC,sBAAsB,yBAAyB;GACvD;EACD,MAAM;GACJ,IAAI,CAAC,QAAQ,OAAO;GACpB,IAAI,CAAC,QAAQ,SAAS;GACtB,IAAI,CAAC,QAAQ,OAAO;GACrB;EACD,aAAa,EACX,MAAM,CAAC,iBAAiB,EACzB;EACD,aAAa,EACX,MAAM,EAAE,EACT;EACF;CACD,kBAAkB;EAChB;GACE,aAAa;GACb,UAAU;GACV,OAAO,CACL,gCACA,kEACD;GACF;EACD;GACE,aAAa;GACb,UAAU;GACV,OAAO,CACL,wCACA,mCACD;GACF;EACD;GACE,aAAa;GACb,UAAU;GACV,OAAO,CACL,sCACA,2BACD;GACF;EACD;GACE,UAAU;GACV,aAAa;GACb,OAAO,CACL,0BACA,4DACD;GACF;EACD;GACE,UAAU;GACV,aAAa;GACb,OAAO,CAAC,8BAA8B,iCAAiC;GACxE;EACD;GACE,UAAU;GACV,aAAa;GACb,OAAO,CAAC,sBAAsB,+BAA+B;GAC9D;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AASD,IAAM,aAAa,QAAM,YACtB,EAAE,QAAQ,QAAQ,WAAW,UAAU,UAAU,OAAO,GAAG,QAAQ,QAAQ;CAC1E,MAAM,EAAE,MAAM,UAAU,kBAAkB,QAAM,WAAW,aAAa;CACxE,MAAM,CAAC,YAAY,iBAAiB,qBAAqB;AACzD,SAAM,oBAAoB,WAAW,WAA6B;CAElE,MAAM,QAAQ,YAAY;CAE1B,MAAM,aAAa,mBAAmB,SAAS,MAAM;CAErD,MAAM,cACJ,OAAO,KAAK,KAAK,CAAC,SAAS,UAAU,IACrC,OAAO,KAAK,KAAK,CAAC,SAAS,OAAO;AAEpC,QACE,oBAAC,wBAAD;EACE,YAAY,aAAa,cAAc;EAChC;YAEP,oBAAC,aAAD;GACE,MAAK;GACK;GACJ;GACN,OAAO;IACL,GAAG,aAAkB;IACrB,GAAG;IACJ;GACD,GAAI;GACJ,KAAK;GACL,aAAa,eAAe,CAAC;aAE5B,QAAM,SAAS,IAAI,WAAW,UAAU;AACvC,QAAI,OAAO,UAAU,YAAY,OAAO,UAAU,SAChD,QAAO,oBAAC,WAAD,EAAA,UAAY,OAAkB,CAAA;AAEvC,QACE,QAAM,eACJ,MACD,IACD,MAAM,SAAS,KAEf,QAAO,oBAAC,WAAD,EAAW,GAAI,MAAM,OAAS,CAAA;AAEvC,WAAO;KACP;GACU,CAAA;EACS,CAAA;EAG9B;AAED,IAAM,iBAAiB,QAAM,YAC1B,EAAE,OAAO,MAAM,WAAW,QAAQ,GAAG,QAAQ,QAAQ;AACpD,QACE,oBAAC,eAAD;EAAqB;EAAgB;YACnC,oBAAC,YAAD;GAAY,GAAI;GAAW;GAAO,CAAA;EACpB,CAAA;EAGrB;AAED,IAAa,QAAQ,OAAO,OAAO,gBAAgB;CACjD,MAAM;CACN,MAAM;CACP,CAAC;AAEF,eAAe,cAAc"}
+{"version":3,"file":"Badge.js","names":[],"sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { useCallbackRefState } from '../../utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { Icon } from '../icon/Icon'\nimport {\n  badgeSemanticNames,\n  colorSchemes as badgeColorSchemes\n} from './Badge.colorscheme.config'\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport type { BadgeOverflow } from './Badge.types'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\n\nconst StyledBadge = styled(\n  'div',\n  {\n    base: [\n      'flex',\n      'justify-center',\n      'items-center',\n      'rounded-sm',\n      'min-w-0',\n      'border',\n      'border-white',\n      'font-body',\n      '*:not-last:mr-1'\n    ],\n    variants: {\n      emphasis: {\n        white: ['text-(--text-on-white)', 'bg-white'],\n        subtle: ['text-(--text-subtle)', 'bg-(--background-subtle)'],\n        bold: ['text-(--text-bold)', 'bg-(--background-bold)']\n      },\n      size: {\n        xs: ['px-1', 'py-0'],\n        sm: ['px-1', 'py-0.5'],\n        md: ['px-2', 'py-1']\n      },\n      isClickable: {\n        true: ['cursor-pointer']\n      },\n      highlighted: {\n        true: []\n      }\n    },\n    compoundVariants: [\n      {\n        isClickable: true,\n        emphasis: 'white',\n        class: [\n          'hover:text-(--text-on-white)',\n          'hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n        ]\n      },\n      {\n        isClickable: true,\n        emphasis: 'subtle',\n        class: [\n          'hover:bg-(--background-subtle-hover)',\n          'hover:text-(--text-subtle-hover)'\n        ]\n      },\n      {\n        isClickable: true,\n        emphasis: 'bold',\n        class: [\n          'hover:bg-(--background-bold-hover)',\n          'hover:text-(--text-bold)'\n        ]\n      },\n      {\n        emphasis: 'white',\n        highlighted: true,\n        class: [\n          'text-(--text-on-white)',\n          'bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n        ]\n      },\n      {\n        emphasis: 'subtle',\n        highlighted: true,\n        class: ['text-(--text-subtle-hover)', '(--bg-background-subtle-hover)']\n      },\n      {\n        emphasis: 'bold',\n        highlighted: true,\n        class: ['text-(--text-bold)', 'bg-(--background-bold-hover)']\n      }\n    ]\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport type BadgeProps = React.ComponentProps<typeof StyledBadge> & {\n  theme?: keyof typeof badgeColorSchemes\n  overflow?: BadgeOverflow\n}\n\ntype BadgeInnerProps = Omit<BadgeProps, 'size' | 'overflow'>\n\nconst BadgeInner = React.forwardRef<HTMLDivElement, BadgeInnerProps>(\n  ({ theme = 'info', emphasis = 'subtle', children, style, ...rest }, ref) => {\n    const { size, overflow, isOverflowing } = React.useContext(BadgeContext)\n    const [badgeElRef, setBadgeElRef] = useCallbackRefState()\n    React.useImperativeHandle(ref, () => badgeElRef as HTMLDivElement)\n\n    const label = badgeElRef?.textContent\n\n    const isInfoOnly = badgeSemanticNames.includes(theme)\n\n    const isClickable =\n      Object.keys(rest).includes('onClick') ||\n      Object.keys(rest).includes('href')\n\n    return (\n      <OptionalTooltipWrapper\n        hasTooltip={overflow === 'ellipsis' && isOverflowing}\n        label={label}\n      >\n        <StyledBadge\n          role=\"status\"\n          emphasis={emphasis}\n          size={size}\n          style={{\n            ...badgeColorSchemes[theme],\n            ...style\n          }}\n          {...rest}\n          ref={setBadgeElRef}\n          isClickable={isClickable && !isInfoOnly}\n        >\n          {React.Children.map(children, (child) => {\n            if (typeof child === 'string' || typeof child === 'number') {\n              return <BadgeText>{child}</BadgeText>\n            }\n            if (\n              React.isValidElement<React.ComponentPropsWithoutRef<typeof Icon>>(\n                child\n              ) &&\n              child.type === Icon\n            ) {\n              return <BadgeIcon {...child.props} />\n            }\n            return child\n          })}\n        </StyledBadge>\n      </OptionalTooltipWrapper>\n    )\n  }\n)\n\nconst BadgeComponent = React.forwardRef<HTMLDivElement, BadgeProps>(\n  ({ size = 'sm', overflow = 'wrap', ...rest }, ref) => (\n    <BadgeProvider size={size} overflow={overflow}>\n      <BadgeInner {...rest} ref={ref} />\n    </BadgeProvider>\n  )\n)\n\nexport const Badge = Object.assign(BadgeComponent, {\n  Icon: BadgeIcon,\n  Text: BadgeText\n})\n\nBadgeComponent.displayName = 'Badge'\n"],"mappings":";;;;;;;;;;;AAeA,IAAM,cAAc,OAClB,OACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,UAAU;GACR,OAAO,CAAC,0BAA0B,UAAU;GAC5C,QAAQ,CAAC,wBAAwB,0BAA0B;GAC3D,MAAM,CAAC,sBAAsB,wBAAwB;EACvD;EACA,MAAM;GACJ,IAAI,CAAC,QAAQ,MAAM;GACnB,IAAI,CAAC,QAAQ,QAAQ;GACrB,IAAI,CAAC,QAAQ,MAAM;EACrB;EACA,aAAa,EACX,MAAM,CAAC,gBAAgB,EACzB;EACA,aAAa,EACX,MAAM,CAAC,EACT;CACF;CACA,kBAAkB;EAChB;GACE,aAAa;GACb,UAAU;GACV,OAAO,CACL,gCACA,iEACF;EACF;EACA;GACE,aAAa;GACb,UAAU;GACV,OAAO,CACL,wCACA,kCACF;EACF;EACA;GACE,aAAa;GACb,UAAU;GACV,OAAO,CACL,sCACA,0BACF;EACF;EACA;GACE,UAAU;GACV,aAAa;GACb,OAAO,CACL,0BACA,2DACF;EACF;EACA;GACE,UAAU;GACV,aAAa;GACb,OAAO,CAAC,8BAA8B,gCAAgC;EACxE;EACA;GACE,UAAU;GACV,aAAa;GACb,OAAO,CAAC,sBAAsB,8BAA8B;EAC9D;CACF;AACF,GACA,EAAE,2BAA2B,KAAK,CACpC;AASA,IAAM,aAAa,QAAM,YACtB,EAAE,QAAQ,QAAQ,WAAW,UAAU,UAAU,OAAO,GAAG,QAAQ,QAAQ;CAC1E,MAAM,EAAE,MAAM,UAAU,kBAAkB,QAAM,WAAW,YAAY;CACvE,MAAM,CAAC,YAAY,iBAAiB,oBAAoB;CACxD,QAAM,oBAAoB,WAAW,UAA4B;CAEjE,MAAM,QAAQ,YAAY;CAE1B,MAAM,aAAa,mBAAmB,SAAS,KAAK;CAEpD,MAAM,cACJ,OAAO,KAAK,IAAI,CAAC,CAAC,SAAS,SAAS,KACpC,OAAO,KAAK,IAAI,CAAC,CAAC,SAAS,MAAM;CAEnC,OACE,oBAAC,wBAAD;EACE,YAAY,aAAa,cAAc;EAChC;YAEP,oBAAC,aAAD;GACE,MAAK;GACK;GACJ;GACN,OAAO;IACL,GAAG,aAAkB;IACrB,GAAG;GACL;GACA,GAAI;GACJ,KAAK;GACL,aAAa,eAAe,CAAC;aAE5B,QAAM,SAAS,IAAI,WAAW,UAAU;IACvC,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAChD,OAAO,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA;IAEtC,IACE,QAAM,eACJ,KACF,KACA,MAAM,SAAS,MAEf,OAAO,oBAAC,WAAD,EAAW,GAAI,MAAM,MAAQ,CAAA;IAEtC,OAAO;GACT,CAAC;EACU,CAAA;CACS,CAAA;AAE5B,CACF;AAEA,IAAM,iBAAiB,QAAM,YAC1B,EAAE,OAAO,MAAM,WAAW,QAAQ,GAAG,QAAQ,QAC5C,oBAAC,eAAD;CAAqB;CAAgB;WACnC,oBAAC,YAAD;EAAY,GAAI;EAAW;CAAM,CAAA;AACpB,CAAA,CAEnB;AAEA,IAAa,QAAQ,OAAO,OAAO,gBAAgB;CACjD,MAAM;CACN,MAAM;AACR,CAAC;AAED,eAAe,cAAc"}

package/dist/components/badge/Badge.types.d.ts

@@ -0,0 +1 @@
+export type BadgeOverflow = 'ellipsis' | 'wrap';

package/dist/components/badge/BadgeIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import { Icon } from '../../components/icon/Icon';
+import { Icon } from '../icon/Icon';
 export declare const BadgeIcon: (props: React.ComponentProps<typeof Icon>) => React.JSX.Element;

package/dist/components/badge/BadgeIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeIcon.js","names":[],"sources":["../../../src/components/badge/BadgeIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\n\nexport const BadgeIcon = (props: React.ComponentProps<typeof Icon>) => (\n  <Icon size=\"sm\" {...props} />\n)\n"],"mappings":";;;;AAIA,IAAa,aAAa,UACxB,oBAAC,MAAD;CAAM,MAAK;CAAK,GAAI;CAAS,CAAA"}
+{"version":3,"file":"BadgeIcon.js","names":[],"sources":["../../../src/components/badge/BadgeIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '../icon/Icon'\n\nexport const BadgeIcon = (props: React.ComponentProps<typeof Icon>) => (\n  <Icon size=\"sm\" {...props} />\n)\n"],"mappings":";;;;AAIA,IAAa,aAAa,UACxB,oBAAC,MAAD;CAAM,MAAK;CAAK,GAAI;AAAQ,CAAA"}

package/dist/components/badge/BadgeText.d.ts

@@ -1,18 +1,18 @@
 import * as React from 'react';
-declare const StyledBadgeText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size" | "noCapsize" | "weight" | "family"> & {
-    size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
-    noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
-    family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
+declare const StyledBadgeText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "family" | "noCapsize" | "size" | "weight"> & {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
 } & {
     as?: React.ElementType;
 }, "as"> & {
-    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+    as?: 'blockquote' | 'caption' | 'dd' | 'dt' | 'figcaption' | 'li' | 'p' | 'span' | 'legend' | React.ComponentType | React.ElementType;
 }, "ref"> & React.RefAttributes<HTMLParagraphElement>, "overflow"> & {
-    overflow?: "wrap" | "ellipsis" | undefined;
+    overflow?: "ellipsis" | "wrap" | undefined;
 } & {
     as?: React.ElementType;
 }>;
-type TBadgeTextProps = React.ComponentProps<typeof StyledBadgeText>;
-export declare const BadgeText: ({ children, ...rest }: TBadgeTextProps) => React.JSX.Element;
+type BadgeTextProps = React.ComponentProps<typeof StyledBadgeText>;
+export declare const BadgeText: ({ children, ...rest }: BadgeTextProps) => React.JSX.Element;
 export {};

package/dist/components/badge/BadgeText.js.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeText.js","names":[],"sources":["../../../src/components/badge/BadgeText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useResizeObserver } from '~/utilities/hooks/useResizeObserver'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { BadgeContext } from './Badge.context'\n\n/*\n * Instead of sticking a resize observer on every `BadgeText`\n * regardless of overflow type, split the resize logic into a component.\n * Basically call the hook conditionally, only for the version with\n * the `overflow === 'ellipsis'` which needs it.\n * This saves us from initialising a resize observer for any badge which doesn't need it.\n */\nconst ObserveBadgeTextOverflow: React.FC<{ elRef: HTMLElement | null }> = ({\n  elRef\n}) => {\n  const { setIsOverflowing } = React.useContext(BadgeContext)\n\n  useResizeObserver({\n    delay: 0,\n    elements: [elRef],\n    onResize: () => {\n      if (!elRef?.scrollWidth || !elRef?.clientWidth) return\n      setIsOverflowing?.(elRef.scrollWidth > elRef.clientWidth)\n    }\n  })\n\n  return null\n}\n\nconst StyledBadgeText = styled(Text, {\n  base: ['py-0.5', 'capsize-none'],\n  variants: {\n    overflow: {\n      ellipsis: ['overflow-x-hidden', 'text-ellipsis', 'whitespace-nowrap'],\n      wrap: ['whitespace-normal']\n    }\n  }\n})\n\ntype TBadgeTextProps = React.ComponentProps<typeof StyledBadgeText>\n\nconst toTextSize = {\n  xs: 'sm',\n  sm: 'md',\n  md: 'md'\n}\n\nexport const BadgeText = ({\n  children,\n  ...rest\n}: TBadgeTextProps): React.JSX.Element => {\n  // We need the return type here. Otherwise typsecript breaks when this type is used in Badge. Do not remove unless you want to tackle that issue again.\n  const { size: badgeSize, overflow } = React.useContext(BadgeContext)\n\n  const size = React.useMemo(\n    () => overrideStyledVariantValue(badgeSize, (s) => toTextSize[s]),\n    [badgeSize]\n  )\n\n  const [elRef, setElRef] = useCallbackRefState()\n\n  return (\n    <>\n      {overflow === 'ellipsis' && <ObserveBadgeTextOverflow elRef={elRef} />}\n      <StyledBadgeText size={size} overflow={overflow} ref={setElRef} {...rest}>\n        {children}\n      </StyledBadgeText>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;AAiBA,IAAM,4BAAqE,EACzE,YACI;CACJ,MAAM,EAAE,qBAAqB,QAAM,WAAW,aAAa;AAE3D,mBAAkB;EAChB,OAAO;EACP,UAAU,CAAC,MAAM;EACjB,gBAAgB;AACd,OAAI,CAAC,OAAO,eAAe,CAAC,OAAO,YAAa;AAChD,sBAAmB,MAAM,cAAc,MAAM,YAAY;;EAE5D,CAAC;AAEF,QAAO;;AAGT,IAAM,kBAAkB,OAAO,MAAM;CACnC,MAAM,CAAC,UAAU,eAAe;CAChC,UAAU,EACR,UAAU;EACR,UAAU;GAAC;GAAqB;GAAiB;GAAoB;EACrE,MAAM,CAAC,oBAAoB;EAC5B,EACF;CACF,CAAC;AAIF,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,aAAa,EACxB,UACA,GAAG,WACqC;CAExC,MAAM,EAAE,MAAM,WAAW,aAAa,QAAM,WAAW,aAAa;CAEpE,MAAM,OAAO,QAAM,cACX,2BAA2B,YAAY,MAAM,WAAW,GAAG,EACjE,CAAC,UAAU,CACZ;CAED,MAAM,CAAC,OAAO,YAAY,qBAAqB;AAE/C,QACE,qBAAA,UAAA,EAAA,UAAA,CACG,aAAa,cAAc,oBAAC,0BAAD,EAAiC,OAAS,CAAA,EACtE,oBAAC,iBAAD;EAAuB;EAAgB;EAAU,KAAK;EAAU,GAAI;EACjE;EACe,CAAA,CACjB,EAAA,CAAA"}
+{"version":3,"file":"BadgeText.js","names":[],"sources":["../../../src/components/badge/BadgeText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { useCallbackRefState } from '../../utilities/hooks/useCallbackRef'\nimport { useResizeObserver } from '../../utilities/hooks/useResizeObserver'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Text } from '../text/Text'\nimport { BadgeContext } from './Badge.context'\n\n/*\n * Instead of sticking a resize observer on every `BadgeText`\n * regardless of overflow type, split the resize logic into a component.\n * Basically call the hook conditionally, only for the version with\n * the `overflow === 'ellipsis'` which needs it.\n * This saves us from initialising a resize observer for any badge which doesn't need it.\n */\nconst ObserveBadgeTextOverflow: React.FC<{ elRef: HTMLElement | null }> = ({\n  elRef\n}) => {\n  const { setIsOverflowing } = React.useContext(BadgeContext)\n\n  useResizeObserver({\n    delay: 0,\n    elements: [elRef],\n    onResize: () => {\n      if (!elRef?.scrollWidth || !elRef?.clientWidth) return\n      setIsOverflowing?.(elRef.scrollWidth > elRef.clientWidth)\n    }\n  })\n\n  return null\n}\n\nconst StyledBadgeText = styled(Text, {\n  base: ['py-0.5', 'capsize-none'],\n  variants: {\n    overflow: {\n      ellipsis: ['overflow-x-hidden', 'text-ellipsis', 'whitespace-nowrap'],\n      wrap: ['whitespace-normal']\n    }\n  }\n})\n\ntype BadgeTextProps = React.ComponentProps<typeof StyledBadgeText>\n\nconst toTextSize = {\n  xs: 'sm',\n  sm: 'md',\n  md: 'md'\n}\n\nexport const BadgeText = ({ children, ...rest }: BadgeTextProps) => {\n  // We need the return type here. Otherwise typsecript breaks when this type is used in Badge. Do not remove unless you want to tackle that issue again.\n  const { size: badgeSize, overflow } = React.useContext(BadgeContext)\n\n  const size = React.useMemo(\n    () => overrideStyledVariantValue(badgeSize, (s) => toTextSize[s]),\n    [badgeSize]\n  )\n\n  const [elRef, setElRef] = useCallbackRefState()\n\n  return (\n    <>\n      {overflow === 'ellipsis' && <ObserveBadgeTextOverflow elRef={elRef} />}\n      <StyledBadgeText size={size} overflow={overflow} ref={setElRef} {...rest}>\n        {children}\n      </StyledBadgeText>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;AAgBA,IAAM,4BAAqE,EACzE,YACI;CACJ,MAAM,EAAE,qBAAqB,QAAM,WAAW,YAAY;CAE1D,kBAAkB;EAChB,OAAO;EACP,UAAU,CAAC,KAAK;EAChB,gBAAgB;GACd,IAAI,CAAC,OAAO,eAAe,CAAC,OAAO,aAAa;GAChD,mBAAmB,MAAM,cAAc,MAAM,WAAW;EAC1D;CACF,CAAC;CAED,OAAO;AACT;AAEA,IAAM,kBAAkB,OAAO,MAAM;CACnC,MAAM,CAAC,UAAU,cAAc;CAC/B,UAAU,EACR,UAAU;EACR,UAAU;GAAC;GAAqB;GAAiB;EAAmB;EACpE,MAAM,CAAC,mBAAmB;CAC5B,EACF;AACF,CAAC;AAID,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,aAAa,EAAE,UAAU,GAAG,WAA2B;CAElE,MAAM,EAAE,MAAM,WAAW,aAAa,QAAM,WAAW,YAAY;CAEnE,MAAM,OAAO,QAAM,cACX,2BAA2B,YAAY,MAAM,WAAW,EAAE,GAChE,CAAC,SAAS,CACZ;CAEA,MAAM,CAAC,OAAO,YAAY,oBAAoB;CAE9C,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,aAAa,cAAc,oBAAC,0BAAD,EAAiC,MAAQ,CAAA,GACrE,oBAAC,iBAAD;EAAuB;EAAgB;EAAU,KAAK;EAAU,GAAI;EACjE;CACc,CAAA,CACjB,EAAA,CAAA;AAEN"}

package/dist/components/banner/Banner.context.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { BannerContainerProps } from './BannerContainer';
+type Breakpoint = '@initial' | '@sm' | '@md' | '@lg' | '@xl';
+type ResponsiveSize = 'sm' | 'md' | Partial<Record<Breakpoint, 'sm' | 'md'>>;
+export type BannerProviderProps = {
+    size?: ResponsiveSize;
+    emphasis?: BannerContainerProps['emphasis'];
+};
+type BannerContextValue = BannerProviderProps & {
+    hasDismiss: boolean;
+    setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export declare const BannerContext: React.Context<BannerContextValue>;
+export declare const useBannerContext: () => BannerContextValue;
+export declare function BannerProvider({ emphasis, size, children }: React.PropsWithChildren<BannerProviderProps>): React.JSX.Element;
+export declare namespace BannerProvider {
+    var displayName: string;
+}
+export {};

package/dist/components/banner/{BannerContext.js → Banner.context.js}

@@ -1,6 +1,6 @@
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/banner/BannerContext.tsx
+//#region src/components/banner/Banner.context.tsx
 var BannerContext = React$1.createContext({
 	emphasis: "minimal",
 	size: {
@@ -38,6 +38,6 @@ var BannerProvider = ({ emphasis = "minimal", size = {
 };
 BannerProvider.displayName = "Banner";
 //#endregion
-export { BannerProvider, useBannerContext };
+export { BannerContext, BannerProvider, useBannerContext };
 
-//# sourceMappingURL=BannerContext.js.map
+//# sourceMappingURL=Banner.context.js.map

package/dist/components/banner/Banner.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.context.js","names":[],"sources":["../../../src/components/banner/Banner.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { BannerContainerProps } from './BannerContainer'\n\ntype Breakpoint = '@initial' | '@sm' | '@md' | '@lg' | '@xl'\ntype ResponsiveSize = 'sm' | 'md' | Partial<Record<Breakpoint, 'sm' | 'md'>>\n\n// Extract size and emphasis props, preserving responsive variant types\nexport type BannerProviderProps = {\n  size?: ResponsiveSize\n  emphasis?: BannerContainerProps['emphasis']\n}\n\ntype BannerContextValue = BannerProviderProps & {\n  hasDismiss: boolean\n  setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nexport const BannerContext = React.createContext<BannerContextValue>({\n  emphasis: 'minimal',\n  size: {\n    '@initial': 'sm',\n    '@md': 'md'\n  } as unknown as BannerProviderProps['size'],\n  hasDismiss: false,\n  setHasDismiss: () => null\n})\n\nexport const useBannerContext = (): BannerContextValue => {\n  const context = React.useContext(BannerContext)\n\n  if (context === undefined) {\n    throw new Error('useBannerContext must be used within a BannerProvider')\n  }\n\n  return context\n}\n\nexport const BannerProvider = ({\n  emphasis = 'minimal',\n  size = {\n    '@initial': 'sm',\n    '@md': 'md'\n  } as unknown as BannerProviderProps['size'],\n  children\n}: React.PropsWithChildren<BannerProviderProps>) => {\n  const [hasDismiss, setHasDismiss] = React.useState(false)\n  const value = React.useMemo<BannerContextValue>(\n    () => ({ emphasis, size, hasDismiss, setHasDismiss }),\n    [emphasis, size, hasDismiss, setHasDismiss]\n  )\n  return (\n    <BannerContext.Provider value={value}>{children}</BannerContext.Provider>\n  )\n}\n\nBannerProvider.displayName = 'Banner'\n"],"mappings":";;;AAkBA,IAAa,gBAAgB,QAAM,cAAkC;CACnE,UAAU;CACV,MAAM;EACJ,YAAY;EACZ,OAAO;CACT;CACA,YAAY;CACZ,qBAAqB;AACvB,CAAC;AAED,IAAa,yBAA6C;CACxD,MAAM,UAAU,QAAM,WAAW,aAAa;CAE9C,IAAI,YAAY,KAAA,GACd,MAAM,IAAI,MAAM,uDAAuD;CAGzE,OAAO;AACT;AAEA,IAAa,kBAAkB,EAC7B,WAAW,WACX,OAAO;CACL,YAAY;CACZ,OAAO;AACT,GACA,eACkD;CAClD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,KAAK;CACxD,MAAM,QAAQ,QAAM,eACX;EAAE;EAAU;EAAM;EAAY;CAAc,IACnD;EAAC;EAAU;EAAM;EAAY;CAAa,CAC5C;CACA,OACE,oBAAC,cAAc,UAAf;EAA+B;EAAQ;CAAiC,CAAA;AAE5E;AAEA,eAAe,cAAc"}

package/dist/components/banner/Banner.d.ts

@@ -1,6 +1,6 @@
 export declare const Banner: {
-    ({ emphasis, size, children }: React.PropsWithChildren<import("./BannerContext").TBannerProviderProps>): import("react").JSX.Element;
+    ({ emphasis, size, children }: React.PropsWithChildren<import("./Banner.context").BannerProviderProps>): import("react").JSX.Element;
     displayName: string;
 } & {
-    Dismiss: ({ asChild, ...rest }: React.PropsWithChildren<import("../dismissible/DismissibleTrigger").IDismissibleTriggerProps>) => import("react").JSX.Element;
+    Dismiss: ({ asChild, ...rest }: React.PropsWithChildren<import("../dismissible/DismissibleTrigger").DismissibleTriggerProps>) => import("react").JSX.Element;
 };

package/dist/components/banner/Banner.js

@@ -1,5 +1,5 @@
 import { Dismissible } from "../dismissible/index.js";
-import { BannerProvider } from "./BannerContext.js";
+import { BannerProvider } from "./Banner.context.js";
 //#region src/components/banner/Banner.tsx
 var Banner = Object.assign(BannerProvider, { Dismiss: Dismissible.Trigger });
 //#endregion

package/dist/components/banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","names":[],"sources":["../../../src/components/banner/Banner.tsx"],"sourcesContent":["import { Dismissible } from '../dismissible'\nimport { BannerProvider } from './BannerContext'\n\nexport const Banner = Object.assign(BannerProvider, {\n  Dismiss: Dismissible.Trigger\n})\n"],"mappings":";;;AAGA,IAAa,SAAS,OAAO,OAAO,gBAAgB,EAClD,SAAS,YAAY,SACtB,CAAC"}
+{"version":3,"file":"Banner.js","names":[],"sources":["../../../src/components/banner/Banner.tsx"],"sourcesContent":["import { Dismissible } from '../dismissible'\nimport { BannerProvider } from './Banner.context'\n\nexport const Banner = Object.assign(BannerProvider, {\n  Dismiss: Dismissible.Trigger\n})\n"],"mappings":";;;AAGA,IAAa,SAAS,OAAO,OAAO,gBAAgB,EAClD,SAAS,YAAY,QACvB,CAAC"}

package/dist/components/banner/BannerContainer.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
+import { type TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
 import { Dismissible } from '../dismissible';
-declare const StyledBannerContainer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "size" | "emphasis"> & {
-    emphasis?: ("bold" | "subtle" | "minimal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "subtle" | "minimal">>) | undefined;
-    size?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
+declare const StyledBannerContainer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "emphasis" | "size"> & {
+    emphasis?: ("bold" | "minimal" | "subtle" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "minimal" | "subtle">>) | undefined;
+    size?: ("md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "md" | "sm">>) | undefined;
 } & {
     as?: React.ElementType;
 }>;
-export type TBannerContainerProps = React.ComponentProps<typeof StyledBannerContainer> & {
+export type BannerContainerProps = React.ComponentProps<typeof StyledBannerContainer> & {
     colorScheme?: TcolorScheme;
 } & React.ComponentProps<typeof Dismissible>;
-export declare const BannerContainer: ({ colorScheme, onDismiss, dismissed, ...props }: TBannerContainerProps) => React.JSX.Element;
+export declare const BannerContainer: ({ colorScheme, onDismiss, dismissed, ...rest }: BannerContainerProps) => React.JSX.Element;
 export {};

package/dist/components/banner/BannerContainer.js

@@ -1,7 +1,7 @@
 import { styled } from "../../styled.js";
 import { ColorScheme } from "../../experiments/color-scheme/ColorScheme.js";
 import { Dismissible } from "../dismissible/index.js";
-import { useBannerContext } from "./BannerContext.js";
+import { useBannerContext } from "./Banner.context.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/BannerContainer.tsx
@@ -33,7 +33,7 @@ var StyledBannerContainer = styled("section", {
 		}
 	}
 }, { enabledResponsiveVariants: true });
-var BannerContainer = ({ colorScheme = {}, onDismiss, dismissed, ...props }) => {
+var BannerContainer = ({ colorScheme = {}, onDismiss, dismissed, ...rest }) => {
 	const { emphasis } = useBannerContext();
 	return /* @__PURE__ */ jsx(ColorScheme, {
 		...colorScheme,
@@ -45,7 +45,7 @@ var BannerContainer = ({ colorScheme = {}, onDismiss, dismissed, ...props }) =>
 			children: /* @__PURE__ */ jsx(StyledBannerContainer, {
 				role: "banner",
 				emphasis,
-				...props
+				...rest
 			})
 		})
 	});

package/dist/components/banner/BannerContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerContainer.js","names":[],"sources":["../../../src/components/banner/BannerContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  ColorScheme,\n  TcolorScheme\n} from '~/experiments/color-scheme/ColorScheme'\nimport { styled } from '~/styled'\n\nimport { Dismissible } from '../dismissible'\nimport { useBannerContext } from './BannerContext'\n\nconst StyledBannerContainer = styled(\n  'section',\n  {\n    base: [\n      'flex',\n      'relative',\n      'w-full',\n      'rounded-lg',\n      'overflow-hidden',\n      'text-(--foreground)',\n      '[--banner-heading-color:var(--color-foreground)]',\n      '[--banner-text-color:var(--color-grey-900)]'\n    ],\n    variants: {\n      emphasis: {\n        bold: [\n          '[--banner-heading-color:var(--color-foreground-7-plus)]',\n          '[--banner-text-color:var(--color-grey-100)]',\n          'bg-(--base-11)',\n          'text-(--foreground-7-plus)'\n        ],\n        subtle: ['bg-(--base-3)'],\n        minimal: ['bg-(--base-1)']\n      },\n      size: {\n        sm: [],\n        md: []\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nexport type TBannerContainerProps = React.ComponentProps<\n  typeof StyledBannerContainer\n> & {\n  colorScheme?: TcolorScheme\n} & React.ComponentProps<typeof Dismissible>\n\nexport const BannerContainer = ({\n  colorScheme = {},\n  onDismiss,\n  dismissed,\n  ...props\n}: TBannerContainerProps): React.JSX.Element => {\n  const { emphasis } = useBannerContext()\n\n  return (\n    <ColorScheme {...colorScheme} asChild>\n      <Dismissible asChild onDismiss={onDismiss} dismissed={dismissed}>\n        <StyledBannerContainer role=\"banner\" emphasis={emphasis} {...props} />\n      </Dismissible>\n    </ColorScheme>\n  )\n}\n"],"mappings":";;;;;;;AAWA,IAAM,wBAAwB,OAC5B,WACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,UAAU;GACR,MAAM;IACJ;IACA;IACA;IACA;IACD;GACD,QAAQ,CAAC,gBAAgB;GACzB,SAAS,CAAC,gBAAgB;GAC3B;EACD,MAAM;GACJ,IAAI,EAAE;GACN,IAAI,EAAE;GACP;EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAQD,IAAa,mBAAmB,EAC9B,cAAc,EAAE,EAChB,WACA,WACA,GAAG,YAC2C;CAC9C,MAAM,EAAE,aAAa,kBAAkB;AAEvC,QACE,oBAAC,aAAD;EAAa,GAAI;EAAa,SAAA;YAC5B,oBAAC,aAAD;GAAa,SAAA;GAAmB;GAAsB;aACpD,oBAAC,uBAAD;IAAuB,MAAK;IAAmB;IAAU,GAAI;IAAS,CAAA;GAC1D,CAAA;EACF,CAAA"}
+{"version":3,"file":"BannerContainer.js","names":[],"sources":["../../../src/components/banner/BannerContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  ColorScheme,\n  type TcolorScheme\n} from '../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../styled'\nimport { Dismissible } from '../dismissible'\nimport { useBannerContext } from './Banner.context'\n\nconst StyledBannerContainer = styled(\n  'section',\n  {\n    base: [\n      'flex',\n      'relative',\n      'w-full',\n      'rounded-lg',\n      'overflow-hidden',\n      'text-(--foreground)',\n      '[--banner-heading-color:var(--color-foreground)]',\n      '[--banner-text-color:var(--color-grey-900)]'\n    ],\n    variants: {\n      emphasis: {\n        bold: [\n          '[--banner-heading-color:var(--color-foreground-7-plus)]',\n          '[--banner-text-color:var(--color-grey-100)]',\n          'bg-(--base-11)',\n          'text-(--foreground-7-plus)'\n        ],\n        subtle: ['bg-(--base-3)'],\n        minimal: ['bg-(--base-1)']\n      },\n      size: {\n        sm: [],\n        md: []\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nexport type BannerContainerProps = React.ComponentProps<\n  typeof StyledBannerContainer\n> & {\n  colorScheme?: TcolorScheme\n} & React.ComponentProps<typeof Dismissible>\n\nexport const BannerContainer = ({\n  colorScheme = {},\n  onDismiss,\n  dismissed,\n  ...rest\n}: BannerContainerProps) => {\n  const { emphasis } = useBannerContext()\n\n  return (\n    <ColorScheme {...colorScheme} asChild>\n      <Dismissible asChild onDismiss={onDismiss} dismissed={dismissed}>\n        <StyledBannerContainer role=\"banner\" emphasis={emphasis} {...rest} />\n      </Dismissible>\n    </ColorScheme>\n  )\n}\n"],"mappings":";;;;;;;AAUA,IAAM,wBAAwB,OAC5B,WACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,UAAU;GACR,MAAM;IACJ;IACA;IACA;IACA;GACF;GACA,QAAQ,CAAC,eAAe;GACxB,SAAS,CAAC,eAAe;EAC3B;EACA,MAAM;GACJ,IAAI,CAAC;GACL,IAAI,CAAC;EACP;CACF;AACF,GACA,EACE,2BAA2B,KAC7B,CACF;AAQA,IAAa,mBAAmB,EAC9B,cAAc,CAAC,GACf,WACA,WACA,GAAG,WACuB;CAC1B,MAAM,EAAE,aAAa,iBAAiB;CAEtC,OACE,oBAAC,aAAD;EAAa,GAAI;EAAa,SAAA;YAC5B,oBAAC,aAAD;GAAa,SAAA;GAAmB;GAAsB;aACpD,oBAAC,uBAAD;IAAuB,MAAK;IAAmB;IAAU,GAAI;GAAO,CAAA;EACzD,CAAA;CACF,CAAA;AAEjB"}