@atom-learning/components 6.5.3 → 6.5.5

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

@@ -1,20 +1,22 @@
-import * as e from "react";
+import * as React$1 from "react";
 //#region src/components/badge/Badge.context.tsx
-var t = e.createContext({}), n = ({ size: n, overflow: r, children: i }) => {
-	let [a, o] = e.useState(!1), s = e.useMemo(() => ({
-		size: n,
-		overflow: r,
-		isOverflowing: a,
-		setIsOverflowing: o
+var BadgeContext = React$1.createContext({});
+var BadgeProvider = ({ size, overflow, children }) => {
+	const [isOverflowing, setIsOverflowing] = React$1.useState(false);
+	const value = React$1.useMemo(() => ({
+		size,
+		overflow,
+		isOverflowing,
+		setIsOverflowing
 	}), [
-		n,
-		r,
-		a,
-		o
+		size,
+		overflow,
+		isOverflowing,
+		setIsOverflowing
 	]);
-	return /* @__PURE__ */ e.createElement(t.Provider, { value: s }, i);
+	return /* @__PURE__ */ React$1.createElement(BadgeContext.Provider, { value }, children);
 };
 //#endregion
-export { t as BadgeContext, n as BadgeProvider };
+export { BadgeContext, BadgeProvider };
 
 //# sourceMappingURL=Badge.context.js.map

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,IAAe,EAAM,cAA6B,EAAE,CAAC,EAErD,KAAiB,EAC5B,SACA,aACA,kBACkD;CAClD,IAAM,CAAC,GAAe,KAAoB,EAAM,SAAS,GAAM,EAEzD,IAAQ,EAAM,eACX;EAAE;EAAM;EAAU;EAAe;EAAkB,GAC1D;EAAC;EAAM;EAAU;EAAe;EAAiB,CAClD;AACD,QAAO,kBAAA,cAAC,EAAa,UAAd,EAA8B,UAAyC,EAAjC,EAAiC"}
+{"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"}

package/dist/components/badge/Badge.js

@@ -1,14 +1,14 @@
-import { styled as e } from "../../styled.js";
-import { Icon as t } from "../icon/Icon.js";
-import { OptionalTooltipWrapper as n } from "../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";
-import { useCallbackRefState as r } from "../../utilities/hooks/useCallbackRef.js";
-import { badgeSemanticNames as i, colorSchemes as a } from "./Badge.colorscheme.config.js";
-import { BadgeContext as o, BadgeProvider as s } from "./Badge.context.js";
-import { BadgeIcon as c } from "./BadgeIcon.js";
-import { BadgeText as l } from "./BadgeText.js";
-import * as u from "react";
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { OptionalTooltipWrapper } from "../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";
+import { useCallbackRefState } from "../../utilities/hooks/useCallbackRef.js";
+import { badgeSemanticNames, colorSchemes } from "./Badge.colorscheme.config.js";
+import { BadgeContext, BadgeProvider } from "./Badge.context.js";
+import { BadgeIcon } from "./BadgeIcon.js";
+import { BadgeText } from "./BadgeText.js";
+import * as React$1 from "react";
 //#region src/components/badge/Badge.tsx
-var d = e("div", {
+var StyledBadge = styled("div", {
 	base: [
 		"flex",
 		"justify-center",
@@ -36,67 +36,79 @@ var d = e("div", {
 	},
 	compoundVariants: [
 		{
-			isClickable: !0,
+			isClickable: true,
 			emphasis: "white",
 			class: ["hover:text-(--text-on-white)", "hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]"]
 		},
 		{
-			isClickable: !0,
+			isClickable: true,
 			emphasis: "subtle",
 			class: ["hover:bg-(--background-subtle-hover)", "hover:text-(--text-subtle-hover)"]
 		},
 		{
-			isClickable: !0,
+			isClickable: true,
 			emphasis: "bold",
 			class: ["hover:bg-(--background-bold-hover)", "hover:text-(--text-bold)"]
 		},
 		{
 			emphasis: "white",
-			highlighted: !0,
+			highlighted: true,
 			class: ["text-(--text-on-white)", "bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]"]
 		},
 		{
 			emphasis: "subtle",
-			highlighted: !0,
+			highlighted: true,
 			class: ["text-(--text-subtle-hover)", "(--bg-background-subtle-hover)"]
 		},
 		{
 			emphasis: "bold",
-			highlighted: !0,
+			highlighted: true,
 			class: ["text-(--text-bold)", "bg-(--background-bold-hover)"]
 		}
 	]
-}, { enabledResponsiveVariants: !0 }), f = u.forwardRef(({ theme: e = "info", emphasis: s = "subtle", children: f, style: p, ...m }, h) => {
-	let { size: g, overflow: _, isOverflowing: v } = u.useContext(o), [y, b] = r();
-	u.useImperativeHandle(h, () => y);
-	let x = y?.textContent, S = i.includes(e), C = Object.keys(m).includes("onClick") || Object.keys(m).includes("href");
-	return /* @__PURE__ */ u.createElement(n, {
-		hasTooltip: _ === "ellipsis" && v,
-		label: x
-	}, /* @__PURE__ */ u.createElement(d, {
+}, { enabledResponsiveVariants: true });
+var BadgeInner = React$1.forwardRef(({ theme = "info", emphasis = "subtle", children, style, ...rest }, ref) => {
+	const { size, overflow, isOverflowing } = React$1.useContext(BadgeContext);
+	const [badgeElRef, setBadgeElRef] = useCallbackRefState();
+	React$1.useImperativeHandle(ref, () => badgeElRef);
+	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, {
+		hasTooltip: overflow === "ellipsis" && isOverflowing,
+		label
+	}, /* @__PURE__ */ React$1.createElement(StyledBadge, {
 		role: "status",
-		emphasis: s,
-		size: g,
+		emphasis,
+		size,
 		style: {
-			...a[e],
-			...p
+			...colorSchemes[theme],
+			...style
 		},
-		...m,
-		ref: b,
-		isClickable: C && !S
-	}, u.Children.map(f, (e) => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ u.createElement(l, null, e) : u.isValidElement(e) && e.type === t ? /* @__PURE__ */ u.createElement(c, e.props) : e)));
-}), p = u.forwardRef(({ size: e = "sm", overflow: t = "wrap", ...n }, r) => /* @__PURE__ */ u.createElement(s, {
-	size: e,
-	overflow: t
-}, /* @__PURE__ */ u.createElement(f, {
-	...n,
-	ref: r
-}))), m = Object.assign(p, {
-	Icon: c,
-	Text: l
+		...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;
+	})));
 });
-p.displayName = "Badge";
+var BadgeComponent = React$1.forwardRef(({ size = "sm", overflow = "wrap", ...rest }, ref) => {
+	return /* @__PURE__ */ React$1.createElement(BadgeProvider, {
+		size,
+		overflow
+	}, /* @__PURE__ */ React$1.createElement(BadgeInner, {
+		...rest,
+		ref
+	}));
+});
+var Badge = Object.assign(BadgeComponent, {
+	Icon: BadgeIcon,
+	Text: BadgeText
+});
+BadgeComponent.displayName = "Badge";
 //#endregion
-export { m as Badge };
+export { Badge };
 
 //# sourceMappingURL=Badge.js.map

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,IAAc,EAClB,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,IAAM,CACpC,EASK,IAAa,EAAM,YACtB,EAAE,WAAQ,QAAQ,cAAW,UAAU,aAAU,UAAO,GAAG,KAAQ,MAAQ;CAC1E,IAAM,EAAE,SAAM,aAAU,qBAAkB,EAAM,WAAW,EAAa,EAClE,CAAC,GAAY,KAAiB,GAAqB;AACzD,GAAM,oBAAoB,SAAW,EAA6B;CAElE,IAAM,IAAQ,GAAY,aAEpB,IAAa,EAAmB,SAAS,EAAM,EAE/C,IACJ,OAAO,KAAK,EAAK,CAAC,SAAS,UAAU,IACrC,OAAO,KAAK,EAAK,CAAC,SAAS,OAAO;AAEpC,QACE,kBAAA,cAAC,GAAD;EACE,YAAY,MAAa,cAAc;EAChC;EAwBgB,EAtBvB,kBAAA,cAAC,GAAD;EACE,MAAK;EACK;EACJ;EACN,OAAO;GACL,GAAG,EAAkB;GACrB,GAAG;GACJ;EACD,GAAI;EACJ,KAAK;EACL,aAAa,KAAe,CAAC;EAWjB,EATX,EAAM,SAAS,IAAI,IAAW,MACzB,OAAO,KAAU,YAAY,OAAO,KAAU,WACzC,kBAAA,cAAC,GAAA,MAAW,EAAkB,GAEnC,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,IACzC,kBAAA,cAAC,GAAc,EAAM,MAAS,GAEhC,EACP,CACU,CACS;EAG9B,EAEK,IAAiB,EAAM,YAC1B,EAAE,UAAO,MAAM,cAAW,QAAQ,GAAG,KAAQ,MAE1C,kBAAA,cAAC,GAAD;CAAqB;CAAgB;CAErB,EADd,kBAAA,cAAC,GAAD;CAAY,GAAI;CAAW;CAAO,CAAA,CACpB,CAGrB,EAEY,IAAQ,OAAO,OAAO,GAAgB;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 (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"}

package/dist/components/badge/BadgeIcon.js

@@ -1,11 +1,11 @@
-import { Icon as e } from "../icon/Icon.js";
-import * as t from "react";
+import { Icon } from "../icon/Icon.js";
+import * as React$1 from "react";
 //#region src/components/badge/BadgeIcon.tsx
-var n = (n) => /* @__PURE__ */ t.createElement(e, {
+var BadgeIcon = (props) => /* @__PURE__ */ React$1.createElement(Icon, {
 	size: "sm",
-	...n
+	...props
 });
 //#endregion
-export { n as BadgeIcon };
+export { BadgeIcon };
 
 //# sourceMappingURL=BadgeIcon.js.map

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,KAAa,MACxB,kBAAA,cAAC,GAAD;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,wBAAA,cAAC,MAAD;CAAM,MAAK;CAAK,GAAI;CAAS,CAAA"}

package/dist/components/badge/BadgeText.js

@@ -1,22 +1,25 @@
-import { styled as e } from "../../styled.js";
-import { Text as t } from "../text/Text.js";
-import { overrideStyledVariantValue as n } from "../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";
-import { useCallbackRefState as r } from "../../utilities/hooks/useCallbackRef.js";
-import { BadgeContext as i } from "./Badge.context.js";
-import { useResizeObserver as a } from "../../utilities/hooks/useResizeObserver.js";
-import * as o from "react";
+import { styled } from "../../styled.js";
+import { Text } from "../text/Text.js";
+import { overrideStyledVariantValue } from "../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";
+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";
 //#region src/components/badge/BadgeText.tsx
-var s = ({ elRef: e }) => {
-	let { setIsOverflowing: t } = o.useContext(i);
-	return a({
+var ObserveBadgeTextOverflow = ({ elRef }) => {
+	const { setIsOverflowing } = React$1.useContext(BadgeContext);
+	useResizeObserver({
 		delay: 0,
-		elements: [e],
+		elements: [elRef],
 		onResize: () => {
-			!e?.scrollWidth || !e?.clientWidth || t?.(e.scrollWidth > e.clientWidth);
+			if (!elRef?.scrollWidth || !elRef?.clientWidth) return;
+			setIsOverflowing?.(elRef.scrollWidth > elRef.clientWidth);
 		}
-	}), null;
-}, c = e(t, {
-	base: ["py-0.5"],
+	});
+	return null;
+};
+var StyledBadgeText = styled(Text, {
+	base: ["py-0.5", "capsize-none"],
 	variants: { overflow: {
 		ellipsis: [
 			"overflow-x-hidden",
@@ -25,21 +28,24 @@ var s = ({ elRef: e }) => {
 		],
 		wrap: ["whitespace-normal"]
 	} }
-}), l = {
+});
+var toTextSize = {
 	xs: "sm",
 	sm: "md",
 	md: "md"
-}, u = ({ children: e, ...t }) => {
-	let { size: a, overflow: u } = o.useContext(i), d = o.useMemo(() => n(a, (e) => l[e]), [a]), [f, p] = r();
-	return /* @__PURE__ */ o.createElement(o.Fragment, null, u === "ellipsis" && /* @__PURE__ */ o.createElement(s, { elRef: f }), /* @__PURE__ */ o.createElement(c, {
-		noCapsize: !0,
-		size: d,
-		overflow: u,
-		ref: p,
-		...t
-	}, e));
+};
+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, {
+		size,
+		overflow,
+		ref: setElRef,
+		...rest
+	}, children));
 };
 //#endregion
-export { u as BadgeText };
+export { BadgeText };
 
 //# sourceMappingURL=BadgeText.js.map

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'],\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\n        noCapsize\n        size={size}\n        overflow={overflow}\n        ref={setElRef}\n        {...rest}\n      >\n        {children}\n      </StyledBadgeText>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAiBA,IAAM,KAAsE,EAC1E,eACI;CACJ,IAAM,EAAE,wBAAqB,EAAM,WAAW,EAAa;AAW3D,QATA,EAAkB;EAChB,OAAO;EACP,UAAU,CAAC,EAAM;EACjB,gBAAgB;AACV,IAAC,GAAO,eAAe,CAAC,GAAO,eACnC,IAAmB,EAAM,cAAc,EAAM,YAAY;;EAE5D,CAAC,EAEK;GAGH,IAAkB,EAAO,GAAM;CACnC,MAAM,CAAC,SAAS;CAChB,UAAU,EACR,UAAU;EACR,UAAU;GAAC;GAAqB;GAAiB;GAAoB;EACrE,MAAM,CAAC,oBAAoB;EAC5B,EACF;CACF,CAAC,EAII,IAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,KAAa,EACxB,aACA,GAAG,QAC+B;CAElC,IAAM,EAAE,MAAM,GAAW,gBAAa,EAAM,WAAW,EAAa,EAE9D,IAAO,EAAM,cACX,EAA2B,IAAY,MAAM,EAAW,GAAG,EACjE,CAAC,EAAU,CACZ,EAEK,CAAC,GAAO,KAAY,GAAqB;AAE/C,QACE,kBAAA,cAAA,EAAA,UAAA,MACG,MAAa,cAAc,kBAAA,cAAC,GAAD,EAAiC,UAAS,CAAA,EACtE,kBAAA,cAAC,GAAD;EACE,WAAA;EACM;EACI;EACV,KAAK;EACL,GAAI;EAGY,EADf,EACe,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.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"}

package/dist/components/banner/Banner.js

@@ -1,8 +1,8 @@
-import { Dismissible as e } from "../dismissible/index.js";
-import { BannerProvider as t } from "./BannerContext.js";
+import { Dismissible } from "../dismissible/index.js";
+import { BannerProvider } from "./BannerContext.js";
 //#region src/components/banner/Banner.tsx
-var n = Object.assign(t, { Dismiss: e.Trigger });
+var Banner = Object.assign(BannerProvider, { Dismiss: Dismissible.Trigger });
 //#endregion
-export { n as Banner };
+export { Banner };
 
 //# sourceMappingURL=Banner.js.map

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,IAAS,OAAO,OAAO,GAAgB,EAClD,SAAS,EAAY,SACtB,CAAC"}
+{"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"}

package/dist/components/banner/BannerContainer.js

@@ -1,10 +1,10 @@
-import { styled as e } from "../../styled.js";
-import { ColorScheme as t } from "../../experiments/color-scheme/ColorScheme.js";
-import { Dismissible as n } from "../dismissible/index.js";
-import { useBannerContext as r } from "./BannerContext.js";
-import * as i from "react";
+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";
 //#region src/components/banner/BannerContainer.tsx
-var a = e("section", {
+var StyledBannerContainer = styled("section", {
 	base: [
 		"flex",
 		"relative",
@@ -31,22 +31,23 @@ var a = e("section", {
 			md: []
 		}
 	}
-}, { enabledResponsiveVariants: !0 }), o = ({ colorScheme: e = {}, onDismiss: o, dismissed: s, ...c }) => {
-	let { emphasis: l } = r();
-	return /* @__PURE__ */ i.createElement(t, {
-		...e,
-		asChild: !0
-	}, /* @__PURE__ */ i.createElement(n, {
-		asChild: !0,
-		onDismiss: o,
-		dismissed: s
-	}, /* @__PURE__ */ i.createElement(a, {
+}, { enabledResponsiveVariants: true });
+var BannerContainer = ({ colorScheme = {}, onDismiss, dismissed, ...props }) => {
+	const { emphasis } = useBannerContext();
+	return /* @__PURE__ */ React$1.createElement(ColorScheme, {
+		...colorScheme,
+		asChild: true
+	}, /* @__PURE__ */ React$1.createElement(Dismissible, {
+		asChild: true,
+		onDismiss,
+		dismissed
+	}, /* @__PURE__ */ React$1.createElement(StyledBannerContainer, {
 		role: "banner",
-		emphasis: l,
-		...c
+		emphasis,
+		...props
 	})));
 };
 //#endregion
-export { o as BannerContainer };
+export { BannerContainer };
 
 //# sourceMappingURL=BannerContainer.js.map

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,IAAwB,EAC5B,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,IAC5B,CACF,EAQY,KAAmB,EAC9B,iBAAc,EAAE,EAChB,cACA,cACA,GAAG,QACqC;CACxC,IAAM,EAAE,gBAAa,GAAkB;AAEvC,QACE,kBAAA,cAAC,GAAD;EAAa,GAAI;EAAa,SAAA;EAIhB,EAHZ,kBAAA,cAAC,GAAD;EAAa,SAAA;EAAmB;EAAsB;EAExC,EADZ,kBAAA,cAAC,GAAD;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): 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"}

package/dist/components/banner/BannerContext.js

@@ -1,36 +1,39 @@
-import * as e from "react";
+import * as React$1 from "react";
 //#region src/components/banner/BannerContext.tsx
-var t = e.createContext({
+var BannerContext = React$1.createContext({
 	emphasis: "minimal",
 	size: {
 		"@initial": "sm",
 		"@md": "md"
 	},
-	hasDismiss: !1,
+	hasDismiss: false,
 	setHasDismiss: () => null
-}), n = () => {
-	let n = e.useContext(t);
-	if (n === void 0) throw Error("useBannerContext must be used within a BannerProvider");
-	return n;
-}, r = ({ emphasis: n = "minimal", size: r = {
+});
+var useBannerContext = () => {
+	const context = React$1.useContext(BannerContext);
+	if (context === void 0) throw new Error("useBannerContext must be used within a BannerProvider");
+	return context;
+};
+var BannerProvider = ({ emphasis = "minimal", size = {
 	"@initial": "sm",
 	"@md": "md"
-}, children: i }) => {
-	let [a, o] = e.useState(!1), s = e.useMemo(() => ({
-		emphasis: n,
-		size: r,
-		hasDismiss: a,
-		setHasDismiss: o
+}, children }) => {
+	const [hasDismiss, setHasDismiss] = React$1.useState(false);
+	const value = React$1.useMemo(() => ({
+		emphasis,
+		size,
+		hasDismiss,
+		setHasDismiss
 	}), [
-		n,
-		r,
-		a,
-		o
+		emphasis,
+		size,
+		hasDismiss,
+		setHasDismiss
 	]);
-	return /* @__PURE__ */ e.createElement(t.Provider, { value: s }, i);
+	return /* @__PURE__ */ React$1.createElement(BannerContext.Provider, { value }, children);
 };
-r.displayName = "Banner";
+BannerProvider.displayName = "Banner";
 //#endregion
-export { r as BannerProvider, n as useBannerContext };
+export { BannerProvider, useBannerContext };
 
 //# sourceMappingURL=BannerContext.js.map

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,IAAgB,EAAM,cAAmC;CACpE,UAAU;CACV,MAAM;EACJ,YAAY;EACZ,OAAO;EACR;CACD,YAAY;CACZ,qBAAqB;CACtB,CAAC,EAEW,UAA8C;CACzD,IAAM,IAAU,EAAM,WAAW,EAAc;AAE/C,KAAI,MAAY,KAAA,EACd,OAAU,MAAM,wDAAwD;AAG1E,QAAO;GAGI,KAAkB,EAC7B,cAAW,WACX,UAAO;CACL,YAAY;CACZ,OAAO;CACR,EACD,kBACmD;CACnD,IAAM,CAAC,GAAY,KAAiB,EAAM,SAAS,GAAM,EACnD,IAAQ,EAAM,eACX;EAAE;EAAU;EAAM;EAAY;EAAe,GACpD;EAAC;EAAU;EAAM;EAAY;EAAc,CAC5C;AACD,QACE,kBAAA,cAAC,EAAc,UAAf,EAA+B,UAA0C,EAAlC,EAAkC;;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,wBAAA,cAAC,cAAc,UAAf,EAA+B,OAA0C,EAAlC,SAAkC;;AAI7E,eAAe,cAAc"}

package/dist/components/banner/banner-regular/BannerRegular.js

@@ -1,32 +1,33 @@
-import { Banner as e } from "../Banner.js";
-import { BannerRegularButton as t } from "./BannerRegularButton.js";
-import { BannerRegularActions as n } from "./BannerRegularActions.js";
-import { BannerRegularContainer as r } from "./BannerRegularContainer.js";
-import { BannerRegularContent as i } from "./BannerRegularContent.js";
-import { BannerRegularDismiss as a } from "./BannerRegularDismiss.js";
-import { BannerRegularHeading as o } from "./BannerRegularHeading.js";
-import { BannerRegularImage as s } from "./BannerRegularImage.js";
-import { BannerRegularText as c } from "./BannerRegularText.js";
-import * as l from "react";
+import { Banner } from "../Banner.js";
+import { BannerRegularButton } from "./BannerRegularButton.js";
+import { BannerRegularActions } from "./BannerRegularActions.js";
+import { BannerRegularContainer } from "./BannerRegularContainer.js";
+import { BannerRegularContent } from "./BannerRegularContent.js";
+import { BannerRegularDismiss } from "./BannerRegularDismiss.js";
+import { BannerRegularHeading } from "./BannerRegularHeading.js";
+import { BannerRegularImage } from "./BannerRegularImage.js";
+import { BannerRegularText } from "./BannerRegularText.js";
+import * as React$1 from "react";
 //#region src/components/banner/banner-regular/BannerRegular.tsx
-var u = ({ colorScheme: t, size: n, emphasis: i, onDismiss: a, ...o }) => /* @__PURE__ */ l.createElement(e, {
-	size: n,
-	emphasis: i
-}, /* @__PURE__ */ l.createElement(r, {
-	colorScheme: t,
-	onDismiss: a,
-	...o
-})), d = Object.assign(u, {
-	Content: i,
-	Heading: o,
-	Text: c,
-	Actions: n,
-	Image: s,
-	Button: t,
-	Dismiss: a
+var BannerRegularComponent = ({ colorScheme, size, emphasis, onDismiss, ...rest }) => /* @__PURE__ */ React$1.createElement(Banner, {
+	size,
+	emphasis
+}, /* @__PURE__ */ React$1.createElement(BannerRegularContainer, {
+	colorScheme,
+	onDismiss,
+	...rest
+}));
+var BannerRegular = Object.assign(BannerRegularComponent, {
+	Content: BannerRegularContent,
+	Heading: BannerRegularHeading,
+	Text: BannerRegularText,
+	Actions: BannerRegularActions,
+	Image: BannerRegularImage,
+	Button: BannerRegularButton,
+	Dismiss: BannerRegularDismiss
 });
-u.displayName = "BannerRegular";
+BannerRegularComponent.displayName = "BannerRegular";
 //#endregion
-export { d as BannerRegular };
+export { BannerRegular };
 
 //# sourceMappingURL=BannerRegular.js.map

package/dist/components/banner/banner-regular/BannerRegular.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerRegular.js","names":[],"sources":["../../../../src/components/banner/banner-regular/BannerRegular.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Banner } from '../Banner'\nimport { BannerRegularActions } from './BannerRegularActions'\nimport { BannerRegularButton } from './BannerRegularButton'\nimport { BannerRegularContainer } from './BannerRegularContainer'\nimport { BannerRegularContent } from './BannerRegularContent'\nimport { BannerRegularDismiss } from './BannerRegularDismiss'\nimport { BannerRegularHeading } from './BannerRegularHeading'\nimport { BannerRegularImage } from './BannerRegularImage'\nimport { BannerRegularText } from './BannerRegularText'\n\nconst BannerRegularComponent = ({\n  colorScheme,\n  size,\n  emphasis,\n  onDismiss,\n  ...rest\n}: React.ComponentProps<typeof BannerRegularContainer>) => (\n  <Banner size={size} emphasis={emphasis}>\n    <BannerRegularContainer\n      colorScheme={colorScheme}\n      onDismiss={onDismiss}\n      {...rest}\n    />\n  </Banner>\n)\n\nexport const BannerRegular = Object.assign(BannerRegularComponent, {\n  Content: BannerRegularContent,\n  Heading: BannerRegularHeading,\n  Text: BannerRegularText,\n  Actions: BannerRegularActions,\n  Image: BannerRegularImage,\n  Button: BannerRegularButton,\n  Dismiss: BannerRegularDismiss\n})\n\nBannerRegularComponent.displayName = 'BannerRegular'\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,KAA0B,EAC9B,gBACA,SACA,aACA,cACA,GAAG,QAEH,kBAAA,cAAC,GAAD;CAAc;CAAgB;CAMrB,EALP,kBAAA,cAAC,GAAD;CACe;CACF;CACX,GAAI;CACJ,CAAA,CACK,EAGE,IAAgB,OAAO,OAAO,GAAwB;CACjE,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,OAAO;CACP,QAAQ;CACR,SAAS;CACV,CAAC;AAEF,EAAuB,cAAc"}
+{"version":3,"file":"BannerRegular.js","names":[],"sources":["../../../../src/components/banner/banner-regular/BannerRegular.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Banner } from '../Banner'\nimport { BannerRegularActions } from './BannerRegularActions'\nimport { BannerRegularButton } from './BannerRegularButton'\nimport { BannerRegularContainer } from './BannerRegularContainer'\nimport { BannerRegularContent } from './BannerRegularContent'\nimport { BannerRegularDismiss } from './BannerRegularDismiss'\nimport { BannerRegularHeading } from './BannerRegularHeading'\nimport { BannerRegularImage } from './BannerRegularImage'\nimport { BannerRegularText } from './BannerRegularText'\n\nconst BannerRegularComponent = ({\n  colorScheme,\n  size,\n  emphasis,\n  onDismiss,\n  ...rest\n}: React.ComponentProps<typeof BannerRegularContainer>) => (\n  <Banner size={size} emphasis={emphasis}>\n    <BannerRegularContainer\n      colorScheme={colorScheme}\n      onDismiss={onDismiss}\n      {...rest}\n    />\n  </Banner>\n)\n\nexport const BannerRegular = Object.assign(BannerRegularComponent, {\n  Content: BannerRegularContent,\n  Heading: BannerRegularHeading,\n  Text: BannerRegularText,\n  Actions: BannerRegularActions,\n  Image: BannerRegularImage,\n  Button: BannerRegularButton,\n  Dismiss: BannerRegularDismiss\n})\n\nBannerRegularComponent.displayName = 'BannerRegular'\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,0BAA0B,EAC9B,aACA,MACA,UACA,WACA,GAAG,WAEH,wBAAA,cAAC,QAAD;CAAc;CAAgB;CAMrB,EALP,wBAAA,cAAC,wBAAD;CACe;CACF;CACX,GAAI;CACJ,CAAA,CACK;AAGX,IAAa,gBAAgB,OAAO,OAAO,wBAAwB;CACjE,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,OAAO;CACP,QAAQ;CACR,SAAS;CACV,CAAC;AAEF,uBAAuB,cAAc"}