@atom-learning/components 7.0.0 → 8.0.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,wBAAA,cAAC,kBAAkB,UAAnB,EAAmC,OAEN,EAD1B,SAC0B;;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,wBAAA,cAAC,oBAAD;EAA0B;EAAY;EAyBjB,EAxBlB,UACC,wBAAA,cAAC,cAAD;EACQ;EACN,OAAO,EACL,cAAc,iBACf;EACS;EACV,SAAS,WAAW,KAAA,IAAY;EAChC,WAAW,GAAG,WAAW,gBAAgB,iBAAiB;EAChD;EAGG,EADZ,SACY,GAEf,wBAAA,cAAC,WAAD;EACQ;EACN,OAAO,EACL,cAAc,iBACf;EACS;EAGA,EADT,SACS,CAEK;;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 } 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"}

package/dist/components/avatar/AvatarIcon.js

@@ -2,6 +2,7 @@ import { Icon } from "../icon/Icon.js";
 import { AvatarRootContext } from "./AvatarContext.js";
 import { overrideStyledVariantValue } from "../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/avatar/AvatarIcon.tsx
 var toIconSize = {
 	xs: "sm",
@@ -13,9 +14,8 @@ var toIconSize = {
 };
 var AvatarIcon = ({ is }) => {
 	const { size } = React$1.useContext(AvatarRootContext);
-	const iconSize = React$1.useMemo(() => overrideStyledVariantValue(size, (s) => toIconSize[s]), [size]);
-	return /* @__PURE__ */ React$1.createElement(Icon, {
-		size: iconSize,
+	return /* @__PURE__ */ jsx(Icon, {
+		size: React$1.useMemo(() => overrideStyledVariantValue(size, (s) => toIconSize[s]), [size]),
 		is
 	});
 };

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;CAEvD,MAAM,WAAW,QAAM,cACf,2BAA2B,OAAO,MAAM,WAAW,GAAG,EAC5D,CAAC,KAAK,CACP;AAED,QAAO,wBAAA,cAAC,MAAD;EAAM,MAAM;EAAc;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'\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"}

package/dist/components/avatar/AvatarImage.js

@@ -1,10 +1,11 @@
 import { Image } from "../image/Image.js";
 import { AvatarInitial } from "./AvatarInitial.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/avatar/AvatarImage.tsx
 var AvatarImage = ({ src, alt }) => {
-	if (!src) return /* @__PURE__ */ React$1.createElement(AvatarInitial, null);
-	return /* @__PURE__ */ React$1.createElement(Image, {
+	if (!src) return /* @__PURE__ */ jsx(AvatarInitial, {});
+	return /* @__PURE__ */ jsx(Image, {
 		className: "size-full object-cover",
 		src,
 		alt

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,wBAAA,cAAC,eAAA,KAAgB;AAG1B,QAAO,wBAAA,cAAC,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;AACzE,KAAI,CAAC,IACH,QAAO,oBAAC,eAAD,EAAiB,CAAA;AAG1B,QAAO,oBAAC,OAAD;EAAO,WAAU;EAA8B;EAAU;EAAO,CAAA"}

package/dist/components/avatar/AvatarInitial.js

@@ -3,6 +3,7 @@ import { AvatarRootContext } from "./AvatarContext.js";
 import { overrideStyledVariantValue } from "../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";
 import { AvatarPlaceholder } from "./AvatarPlaceholder.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/avatar/AvatarInitial.tsx
 var toTextSize = {
 	xs: "xs",
@@ -15,11 +16,12 @@ var toTextSize = {
 var AvatarInitial = () => {
 	const { name, size } = React$1.useContext(AvatarRootContext);
 	const textSize = React$1.useMemo(() => overrideStyledVariantValue(size, (s) => toTextSize[s]), [size]);
-	if (!name) return /* @__PURE__ */ React$1.createElement(AvatarPlaceholder, null);
-	return /* @__PURE__ */ React$1.createElement(Text, {
+	if (!name) return /* @__PURE__ */ jsx(AvatarPlaceholder, {});
+	return /* @__PURE__ */ jsx(Text, {
 		size: textSize,
-		className: "text-grey-800"
-	}, name[0].toUpperCase());
+		className: "text-grey-800",
+		children: name[0].toUpperCase()
+	});
 };
 //#endregion
 export { AvatarInitial };

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,wBAAA,cAAC,mBAAA,KAAoB;AAG9B,QACE,wBAAA,cAAC,MAAD;EAAM,MAAM;EAAU,WAAU;EAEzB,EADJ,KAAK,GAAG,aAAa,CACjB"}
+{"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"}

package/dist/components/avatar/AvatarPlaceholder.js

@@ -1,12 +1,16 @@
 import { Icon } from "../icon/Icon.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { User } from "@atom-learning/icons";
 //#region src/components/avatar/AvatarPlaceholder.tsx
 var AvatarPlaceholder = () => {
-	return /* @__PURE__ */ React$1.createElement("div", { className: "relative size-full" }, /* @__PURE__ */ React$1.createElement(Icon, {
-		is: User,
-		className: "size-full"
-	}));
+	return /* @__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,wBAAA,cAAC,OAAD,EAAK,WAAU,sBAET,EADJ,wBAAA,cAAC,MAAD;EAAM,IAAI;EAAM,WAAU;EAAc,CAAA,CACpC"}
+{"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"}

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

@@ -1,4 +1,5 @@
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/badge/Badge.context.tsx
 var BadgeContext = React$1.createContext({});
 var BadgeProvider = ({ size, overflow, children }) => {
@@ -14,7 +15,10 @@ var BadgeProvider = ({ size, overflow, children }) => {
 		isOverflowing,
 		setIsOverflowing
 	]);
-	return /* @__PURE__ */ React$1.createElement(BadgeContext.Provider, { value }, children);
+	return /* @__PURE__ */ jsx(BadgeContext.Provider, {
+		value,
+		children
+	});
 };
 //#endregion
 export { BadgeContext, BadgeProvider };

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,wBAAA,cAAC,aAAa,UAAd,EAA8B,OAAyC,EAAjC,SAAiC"}
+{"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"}

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

@@ -3,7 +3,7 @@ import { Icon } from '../../components/icon/Icon';
 import { colorSchemes as badgeColorSchemes } from './Badge.colorscheme.config';
 import { BadgeText } from './BadgeText';
 declare const StyledBadge: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
 }, "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;
@@ -18,8 +18,8 @@ export type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {
 };
 export declare const Badge: React.ForwardRefExoticComponent<Omit<TBadgeProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
     Icon: (props: React.ComponentProps<typeof Icon>) => React.JSX.Element;
-    Text: ({ children, ...rest }: Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-        ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
+    Text: ({ children, ...rest }: Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+        ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
     }, "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;
@@ -29,10 +29,12 @@ export declare const Badge: React.ForwardRefExoticComponent<Omit<TBadgeProps, "r
         as?: React.ElementType;
     }, "as"> & {
         as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLParagraphElement>, "overflow"> & {
+    }, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & {
+        ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
+    }, "overflow"> & {
         overflow?: "wrap" | "ellipsis" | undefined;
     } & {
         as?: React.ElementType;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
 };
 export {};

package/dist/components/badge/Badge.js

@@ -7,6 +7,7 @@ import { BadgeContext, BadgeProvider } from "./Badge.context.js";
 import { BadgeIcon } from "./BadgeIcon.js";
 import { BadgeText } from "./BadgeText.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/badge/Badge.tsx
 var StyledBadge = styled("div", {
 	base: [
@@ -74,34 +75,37 @@ var BadgeInner = React$1.forwardRef(({ theme = "info", emphasis = "subtle", chil
 	const label = badgeElRef?.textContent;
 	const isInfoOnly = badgeSemanticNames.includes(theme);
 	const isClickable = Object.keys(rest).includes("onClick") || Object.keys(rest).includes("href");
-	return /* @__PURE__ */ React$1.createElement(OptionalTooltipWrapper, {
+	return /* @__PURE__ */ jsx(OptionalTooltipWrapper, {
 		hasTooltip: overflow === "ellipsis" && isOverflowing,
-		label
-	}, /* @__PURE__ */ React$1.createElement(StyledBadge, {
-		role: "status",
-		emphasis,
-		size,
-		style: {
-			...colorSchemes[theme],
-			...style
-		},
-		...rest,
-		ref: setBadgeElRef,
-		isClickable: isClickable && !isInfoOnly
-	}, React$1.Children.map(children, (child) => {
-		if (typeof child === "string" || typeof child === "number") return /* @__PURE__ */ React$1.createElement(BadgeText, null, child);
-		if (React$1.isValidElement(child) && child.type === Icon) return /* @__PURE__ */ React$1.createElement(BadgeIcon, child.props);
-		return child;
-	})));
+		label,
+		children: /* @__PURE__ */ jsx(StyledBadge, {
+			role: "status",
+			emphasis,
+			size,
+			style: {
+				...colorSchemes[theme],
+				...style
+			},
+			...rest,
+			ref: setBadgeElRef,
+			isClickable: isClickable && !isInfoOnly,
+			children: React$1.Children.map(children, (child) => {
+				if (typeof child === "string" || typeof child === "number") return /* @__PURE__ */ jsx(BadgeText, { children: child });
+				if (React$1.isValidElement(child) && child.type === Icon) return /* @__PURE__ */ jsx(BadgeIcon, { ...child.props });
+				return child;
+			})
+		})
+	});
 });
 var BadgeComponent = React$1.forwardRef(({ size = "sm", overflow = "wrap", ...rest }, ref) => {
-	return /* @__PURE__ */ React$1.createElement(BadgeProvider, {
+	return /* @__PURE__ */ jsx(BadgeProvider, {
 		size,
-		overflow
-	}, /* @__PURE__ */ React$1.createElement(BadgeInner, {
-		...rest,
-		ref
-	}));
+		overflow,
+		children: /* @__PURE__ */ jsx(BadgeInner, {
+			...rest,
+			ref
+		})
+	});
 });
 var Badge = Object.assign(BadgeComponent, {
 	Icon: BadgeIcon,

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 (React.isValidElement(child) && child.type === Icon) {\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,wBAAA,cAAC,wBAAD;EACE,YAAY,aAAa,cAAc;EAChC;EAwBgB,EAtBvB,wBAAA,cAAC,aAAD;EACE,MAAK;EACK;EACJ;EACN,OAAO;GACL,GAAG,aAAkB;GACrB,GAAG;GACJ;EACD,GAAI;EACJ,KAAK;EACL,aAAa,eAAe,CAAC;EAWjB,EATX,QAAM,SAAS,IAAI,WAAW,UAAU;AACvC,MAAI,OAAO,UAAU,YAAY,OAAO,UAAU,SAChD,QAAO,wBAAA,cAAC,WAAA,MAAW,MAAkB;AAEvC,MAAI,QAAM,eAAe,MAAM,IAAI,MAAM,SAAS,KAChD,QAAO,wBAAA,cAAC,WAAc,MAAM,MAAS;AAEvC,SAAO;GACP,CACU,CACS;EAG9B;AAED,IAAM,iBAAiB,QAAM,YAC1B,EAAE,OAAO,MAAM,WAAW,QAAQ,GAAG,QAAQ,QAAQ;AACpD,QACE,wBAAA,cAAC,eAAD;EAAqB;EAAgB;EAErB,EADd,wBAAA,cAAC,YAAD;EAAY,GAAI;EAAW;EAAO,CAAA,CACpB;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 { 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>>(child) &&\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,eAA4D,MAAM,IACxE,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"}

package/dist/components/badge/BadgeIcon.js

@@ -1,7 +1,8 @@
 import { Icon } from "../icon/Icon.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/badge/BadgeIcon.tsx
-var BadgeIcon = (props) => /* @__PURE__ */ React$1.createElement(Icon, {
+var BadgeIcon = (props) => /* @__PURE__ */ jsx(Icon, {
 	size: "sm",
 	...props
 });

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,wBAAA,cAAC,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 '~/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"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-declare const StyledBadgeText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-    ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
+declare const StyledBadgeText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
 }, "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;
@@ -10,11 +10,13 @@ declare const StyledBadgeText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Om
     as?: React.ElementType;
 }, "as"> & {
     as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLParagraphElement>, "overflow"> & {
+}, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
+}, "overflow"> & {
     overflow?: "wrap" | "ellipsis" | undefined;
 } & {
     as?: React.ElementType;
 }>;
 type TBadgeTextProps = React.ComponentProps<typeof StyledBadgeText>;
-export declare const BadgeText: ({ children, ...rest }: TBadgeTextProps) => JSX.Element;
+export declare const BadgeText: ({ children, ...rest }: TBadgeTextProps) => React.JSX.Element;
 export {};

package/dist/components/badge/BadgeText.js

@@ -5,6 +5,7 @@ import { useCallbackRefState } from "../../utilities/hooks/useCallbackRef.js";
 import { BadgeContext } from "./Badge.context.js";
 import { useResizeObserver } from "../../utilities/hooks/useResizeObserver.js";
 import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/badge/BadgeText.tsx
 var ObserveBadgeTextOverflow = ({ elRef }) => {
 	const { setIsOverflowing } = React$1.useContext(BadgeContext);
@@ -38,12 +39,13 @@ var BadgeText = ({ children, ...rest }) => {
 	const { size: badgeSize, overflow } = React$1.useContext(BadgeContext);
 	const size = React$1.useMemo(() => overrideStyledVariantValue(badgeSize, (s) => toTextSize[s]), [badgeSize]);
 	const [elRef, setElRef] = useCallbackRefState();
-	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, overflow === "ellipsis" && /* @__PURE__ */ React$1.createElement(ObserveBadgeTextOverflow, { elRef }), /* @__PURE__ */ React$1.createElement(StyledBadgeText, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [overflow === "ellipsis" && /* @__PURE__ */ jsx(ObserveBadgeTextOverflow, { elRef }), /* @__PURE__ */ jsx(StyledBadgeText, {
 		size,
 		overflow,
 		ref: setElRef,
-		...rest
-	}, children));
+		...rest,
+		children
+	})] });
 };
 //#endregion
 export { BadgeText };

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.VFC<{ 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): 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,4BAAsE,EAC1E,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,WAC+B;CAElC,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,wBAAA,cAAA,QAAA,UAAA,MACG,aAAa,cAAc,wBAAA,cAAC,0BAAD,EAAiC,OAAS,CAAA,EACtE,wBAAA,cAAC,iBAAD;EAAuB;EAAgB;EAAU,KAAK;EAAU,GAAI;EAElD,EADf,SACe,CACjB"}
+{"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"}

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
 import { Dismissible } from '../dismissible';
 declare const StyledBannerContainer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
+    ref?: ((instance: HTMLElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLElement> | null | undefined;
 }, "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;
@@ -12,5 +12,5 @@ declare const StyledBannerContainer: React.ForwardRefExoticComponent<Omit<Omit<R
 export type TBannerContainerProps = React.ComponentProps<typeof StyledBannerContainer> & {
     colorScheme?: TcolorScheme;
 } & React.ComponentProps<typeof Dismissible>;
-export declare const BannerContainer: ({ colorScheme, onDismiss, dismissed, ...props }: TBannerContainerProps) => JSX.Element;
+export declare const BannerContainer: ({ colorScheme, onDismiss, dismissed, ...props }: TBannerContainerProps) => React.JSX.Element;
 export {};

package/dist/components/banner/BannerContainer.js

@@ -2,7 +2,8 @@ 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 * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/BannerContainer.tsx
 var StyledBannerContainer = styled("section", {
 	base: [
@@ -34,18 +35,20 @@ var StyledBannerContainer = styled("section", {
 }, { enabledResponsiveVariants: true });
 var BannerContainer = ({ colorScheme = {}, onDismiss, dismissed, ...props }) => {
 	const { emphasis } = useBannerContext();
-	return /* @__PURE__ */ React$1.createElement(ColorScheme, {
+	return /* @__PURE__ */ jsx(ColorScheme, {
 		...colorScheme,
-		asChild: true
-	}, /* @__PURE__ */ React$1.createElement(Dismissible, {
 		asChild: true,
-		onDismiss,
-		dismissed
-	}, /* @__PURE__ */ React$1.createElement(StyledBannerContainer, {
-		role: "banner",
-		emphasis,
-		...props
-	})));
+		children: /* @__PURE__ */ jsx(Dismissible, {
+			asChild: true,
+			onDismiss,
+			dismissed,
+			children: /* @__PURE__ */ jsx(StyledBannerContainer, {
+				role: "banner",
+				emphasis,
+				...props
+			})
+		})
+	});
 };
 //#endregion
 export { BannerContainer };

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): 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,YACqC;CACxC,MAAM,EAAE,aAAa,kBAAkB;AAEvC,QACE,wBAAA,cAAC,aAAD;EAAa,GAAI;EAAa,SAAA;EAIhB,EAHZ,wBAAA,cAAC,aAAD;EAAa,SAAA;EAAmB;EAAsB;EAExC,EADZ,wBAAA,cAAC,uBAAD;EAAuB,MAAK;EAAmB;EAAU,GAAI;EAAS,CAAA,CAC1D,CACF"}
+{"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"}

package/dist/components/banner/BannerContext.js

@@ -1,4 +1,5 @@
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/BannerContext.tsx
 var BannerContext = React$1.createContext({
 	emphasis: "minimal",
@@ -30,7 +31,10 @@ var BannerProvider = ({ emphasis = "minimal", size = {
 		hasDismiss,
 		setHasDismiss
 	]);
-	return /* @__PURE__ */ React$1.createElement(BannerContext.Provider, { value }, children);
+	return /* @__PURE__ */ jsx(BannerContext.Provider, {
+		value,
+		children
+	});
 };
 BannerProvider.displayName = "Banner";
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"BannerContext.js","names":[],"sources":["../../../src/components/banner/BannerContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { TBannerContainerProps } 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 TBannerProviderProps = {\n  size?: ResponsiveSize\n  emphasis?: TBannerContainerProps['emphasis']\n}\n\ntype TBannerContextValue = TBannerProviderProps & {\n  hasDismiss: boolean\n  setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nexport const BannerContext = React.createContext<TBannerContextValue>({\n  emphasis: 'minimal',\n  size: {\n    '@initial': 'sm',\n    '@md': 'md'\n  } as unknown as TBannerProviderProps['size'],\n  hasDismiss: false,\n  setHasDismiss: () => null\n})\n\nexport const useBannerContext = (): TBannerContextValue => {\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 TBannerProviderProps['size'],\n  children\n}: React.PropsWithChildren<TBannerProviderProps>) => {\n  const [hasDismiss, setHasDismiss] = React.useState(false)\n  const value = React.useMemo<TBannerContextValue>(\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,cAAmC;CACpE,UAAU;CACV,MAAM;EACJ,YAAY;EACZ,OAAO;EACR;CACD,YAAY;CACZ,qBAAqB;CACtB,CAAC;AAEF,IAAa,yBAA8C;CACzD,MAAM,UAAU,QAAM,WAAW,cAAc;AAE/C,KAAI,YAAY,KAAA,EACd,OAAM,IAAI,MAAM,wDAAwD;AAG1E,QAAO;;AAGT,IAAa,kBAAkB,EAC7B,WAAW,WACX,OAAO;CACL,YAAY;CACZ,OAAO;CACR,EACD,eACmD;CACnD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,MAAM;CACzD,MAAM,QAAQ,QAAM,eACX;EAAE;EAAU;EAAM;EAAY;EAAe,GACpD;EAAC;EAAU;EAAM;EAAY;EAAc,CAC5C;AACD,QACE,wBAAA,cAAC,cAAc,UAAf,EAA+B,OAA0C,EAAlC,SAAkC;;AAI7E,eAAe,cAAc"}
+{"version":3,"file":"BannerContext.js","names":[],"sources":["../../../src/components/banner/BannerContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { TBannerContainerProps } 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 TBannerProviderProps = {\n  size?: ResponsiveSize\n  emphasis?: TBannerContainerProps['emphasis']\n}\n\ntype TBannerContextValue = TBannerProviderProps & {\n  hasDismiss: boolean\n  setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nexport const BannerContext = React.createContext<TBannerContextValue>({\n  emphasis: 'minimal',\n  size: {\n    '@initial': 'sm',\n    '@md': 'md'\n  } as unknown as TBannerProviderProps['size'],\n  hasDismiss: false,\n  setHasDismiss: () => null\n})\n\nexport const useBannerContext = (): TBannerContextValue => {\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 TBannerProviderProps['size'],\n  children\n}: React.PropsWithChildren<TBannerProviderProps>) => {\n  const [hasDismiss, setHasDismiss] = React.useState(false)\n  const value = React.useMemo<TBannerContextValue>(\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,cAAmC;CACpE,UAAU;CACV,MAAM;EACJ,YAAY;EACZ,OAAO;EACR;CACD,YAAY;CACZ,qBAAqB;CACtB,CAAC;AAEF,IAAa,yBAA8C;CACzD,MAAM,UAAU,QAAM,WAAW,cAAc;AAE/C,KAAI,YAAY,KAAA,EACd,OAAM,IAAI,MAAM,wDAAwD;AAG1E,QAAO;;AAGT,IAAa,kBAAkB,EAC7B,WAAW,WACX,OAAO;CACL,YAAY;CACZ,OAAO;CACR,EACD,eACmD;CACnD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,MAAM;CACzD,MAAM,QAAQ,QAAM,eACX;EAAE;EAAU;EAAM;EAAY;EAAe,GACpD;EAAC;EAAU;EAAM;EAAY;EAAc,CAC5C;AACD,QACE,oBAAC,cAAc,UAAf;EAA+B;EAAQ;EAAkC,CAAA;;AAI7E,eAAe,cAAc"}