@atom-learning/components 9.0.0-beta.5 → 10.0.0

package/dist/components/alert-dialog/AlertDialog.context.js

@@ -5,15 +5,18 @@ import * as React$1 from "react";
 import { createElement } from "react";
 import { jsxs } from "react/jsx-runtime";
 //#region src/components/alert-dialog/AlertDialog.context.tsx
-var AlertContext = React$1.createContext({ showAlert: () => null });
+var AlertContext = React$1.createContext(void 0);
 var AlertProvider = ({ children }) => {
 	const [alerts, dispatch] = React$1.useReducer(reducer, initialState);
 	const isMountedRef = useIsMountedRef();
-	return /* @__PURE__ */ jsxs(AlertContext.Provider, {
-		value: { showAlert: (content) => dispatch({
-			payload: content,
+	return /* @__PURE__ */ jsxs(AlertContext, {
+		value: React$1.useMemo(() => ({ showAlert: (content) => dispatch({
+			payload: {
+				...content,
+				id: crypto.randomUUID()
+			},
 			type: "ADD"
-		}) },
+		}) }), []),
 		children: [Boolean(alerts.length) && /* @__PURE__ */ createElement(Alert, {
 			...alerts[0],
 			key: alerts[0].id,
@@ -27,7 +30,7 @@ var AlertProvider = ({ children }) => {
 	});
 };
 var useAlert = () => {
-	const context = React$1.useContext(AlertContext);
+	const context = React$1.use(AlertContext);
 	if (context === void 0) throw new Error("useAlert must be used within a AlertProvider");
 	return context;
 };

package/dist/components/alert-dialog/AlertDialog.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.context.js","names":[],"sources":["../../../src/components/alert-dialog/AlertDialog.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { useIsMountedRef } from '../../utilities/hooks/useIsMountedRef'\nimport { Alert } from './alert-context/AlertDialog'\nimport { initialState, reducer } from './alert-context/reducer'\nimport type { alert } from './alert-context/types'\n\ntype context = {\n  showAlert: (data: alert) => void\n}\n\nconst AlertContext = React.createContext<context>({\n  showAlert: () => null\n})\n\nexport const AlertProvider = ({\n  children\n}: React.PropsWithChildren<unknown>) => {\n  const [alerts, dispatch] = React.useReducer(reducer, initialState)\n  const isMountedRef = useIsMountedRef()\n\n  return (\n    <AlertContext.Provider\n      value={{\n        showAlert: (content: alert) =>\n          dispatch({\n            payload: content,\n            type: 'ADD'\n          })\n      }}\n    >\n      {Boolean(alerts.length) && (\n        <Alert\n          {...alerts[0]}\n          key={alerts[0].id}\n          onClose={() => {\n            if (isMountedRef.current)\n              dispatch({\n                payload: alerts[0].id,\n                type: 'REMOVE'\n              })\n          }}\n        />\n      )}\n      {children}\n    </AlertContext.Provider>\n  )\n}\n\nexport const useAlert = (): context => {\n  const context = React.useContext(AlertContext)\n\n  if (context === undefined) {\n    throw new Error('useAlert must be used within a AlertProvider')\n  }\n\n  return context\n}\n"],"mappings":";;;;;;;AAWA,IAAM,eAAe,QAAM,cAAuB,EAChD,iBAAiB,KACnB,CAAC;AAED,IAAa,iBAAiB,EAC5B,eACsC;CACtC,MAAM,CAAC,QAAQ,YAAY,QAAM,WAAW,SAAS,YAAY;CACjE,MAAM,eAAe,gBAAgB;CAErC,OACE,qBAAC,aAAa,UAAd;EACE,OAAO,EACL,YAAY,YACV,SAAS;GACP,SAAS;GACT,MAAM;EACR,CAAC,EACL;YAPF,CASG,QAAQ,OAAO,MAAM,KACpB,8BAAC,OAAD;GACE,GAAI,OAAO;GACX,KAAK,OAAO,EAAE,CAAC;GACf,eAAe;IACb,IAAI,aAAa,SACf,SAAS;KACP,SAAS,OAAO,EAAE,CAAC;KACnB,MAAM;IACR,CAAC;GACL;EACD,CAAA,GAEF,QACoB;;AAE3B;AAEA,IAAa,iBAA0B;CACrC,MAAM,UAAU,QAAM,WAAW,YAAY;CAE7C,IAAI,YAAY,KAAA,GACd,MAAM,IAAI,MAAM,8CAA8C;CAGhE,OAAO;AACT"}
+{"version":3,"file":"AlertDialog.context.js","names":[],"sources":["../../../src/components/alert-dialog/AlertDialog.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { useIsMountedRef } from '../../utilities/hooks/useIsMountedRef'\nimport { Alert } from './alert-context/AlertDialog'\nimport { initialState, reducer } from './alert-context/reducer'\nimport type { alert } from './alert-context/types'\n\ntype context = {\n  showAlert: (data: alert) => void\n}\n\n// undefined default so useAlert's missing-provider guard can fire — a default\n// object would make showAlert outside a provider a silent no-op.\nconst AlertContext = React.createContext<context | undefined>(undefined)\n\nexport const AlertProvider = ({\n  children\n}: React.PropsWithChildren<unknown>) => {\n  const [alerts, dispatch] = React.useReducer(reducer, initialState)\n  const isMountedRef = useIsMountedRef()\n\n  // dispatch is stable, so the provider value never needs to change identity.\n  const value = React.useMemo<context>(\n    () => ({\n      showAlert: (content: alert) =>\n        dispatch({\n          // The id is minted here, not in the reducer — reducers must stay\n          // pure (StrictMode double-invokes them). crypto.randomUUID requires\n          // a secure context, which consumers of this library always have.\n          payload: { ...content, id: crypto.randomUUID() },\n          type: 'ADD'\n        })\n    }),\n    []\n  )\n\n  return (\n    <AlertContext value={value}>\n      {Boolean(alerts.length) && (\n        <Alert\n          {...alerts[0]}\n          key={alerts[0].id}\n          onClose={() => {\n            if (isMountedRef.current)\n              dispatch({\n                payload: alerts[0].id,\n                type: 'REMOVE'\n              })\n          }}\n        />\n      )}\n      {children}\n    </AlertContext>\n  )\n}\n\nexport const useAlert = (): context => {\n  const context = React.use(AlertContext)\n\n  if (context === undefined) {\n    throw new Error('useAlert must be used within a AlertProvider')\n  }\n\n  return context\n}\n"],"mappings":";;;;;;;AAaA,IAAM,eAAe,QAAM,cAAmC,KAAA,CAAS;AAEvE,IAAa,iBAAiB,EAC5B,eACsC;CACtC,MAAM,CAAC,QAAQ,YAAY,QAAM,WAAW,SAAS,YAAY;CACjE,MAAM,eAAe,gBAAgB;CAiBrC,OACE,qBAAC,cAAD;EAAqB,OAfT,QAAM,eACX,EACL,YAAY,YACV,SAAS;GAIP,SAAS;IAAE,GAAG;IAAS,IAAI,OAAO,WAAW;GAAE;GAC/C,MAAM;EACR,CAAC,EACL,IACA,CAAC,CAIoB;YAArB,CACG,QAAQ,OAAO,MAAM,KACpB,8BAAC,OAAD;GACE,GAAI,OAAO;GACX,KAAK,OAAO,EAAE,CAAC;GACf,eAAe;IACb,IAAI,aAAa,SACf,SAAS;KACP,SAAS,OAAO,EAAE,CAAC;KACnB,MAAM;IACR,CAAC;GACL;EACD,CAAA,GAEF,QACW;;AAElB;AAEA,IAAa,iBAA0B;CACrC,MAAM,UAAU,QAAM,IAAI,YAAY;CAEtC,IAAI,YAAY,KAAA,GACd,MAAM,IAAI,MAAM,8CAA8C;CAGhE,OAAO;AACT"}

package/dist/components/alert-dialog/alert-context/reducer.js

@@ -1,12 +1,8 @@
-import { uid } from "uid";
 //#region src/components/alert-dialog/alert-context/reducer.ts
 var initialState = [];
 var reducer = (state, action) => {
 	switch (action.type) {
-		case "ADD": return [...state, {
-			...action.payload,
-			id: uid()
-		}];
+		case "ADD": return [...state, action.payload];
 		case "REMOVE": return state.filter(({ id }) => id !== action.payload);
 		default: return state;
 	}

package/dist/components/alert-dialog/alert-context/reducer.js.map

@@ -1 +1 @@
-{"version":3,"file":"reducer.js","names":[],"sources":["../../../../src/components/alert-dialog/alert-context/reducer.ts"],"sourcesContent":["import { uid } from 'uid'\n\nimport type { alert } from './types'\n\ntype State = alert[]\ntype Action =\n  | { type: 'ADD'; payload: alert }\n  | { type: 'REMOVE'; payload: string }\n\nexport const initialState = []\n\nexport const reducer = (state: State, action: Action): alert[] => {\n  switch (action.type) {\n    case 'ADD':\n      return [...state, { ...action.payload, id: uid() }]\n    case 'REMOVE':\n      return state.filter(({ id }) => id !== action.payload)\n    default:\n      return state\n  }\n}\n"],"mappings":";;AASA,IAAa,eAAe,CAAC;AAE7B,IAAa,WAAW,OAAc,WAA4B;CAChE,QAAQ,OAAO,MAAf;EACE,KAAK,OACH,OAAO,CAAC,GAAG,OAAO;GAAE,GAAG,OAAO;GAAS,IAAI,IAAI;EAAE,CAAC;EACpD,KAAK,UACH,OAAO,MAAM,QAAQ,EAAE,SAAS,OAAO,OAAO,OAAO;EACvD,SACE,OAAO;CACX;AACF"}
+{"version":3,"file":"reducer.js","names":[],"sources":["../../../../src/components/alert-dialog/alert-context/reducer.ts"],"sourcesContent":["import type { alert } from './types'\n\ntype State = alert[]\ntype Action =\n  | { type: 'ADD'; payload: alert }\n  | { type: 'REMOVE'; payload: string }\n\nexport const initialState = []\n\n// Reducers must be pure — ids are minted by the caller (showAlert) before\n// dispatch; minted here they would diverge under StrictMode's double-invoke.\nexport const reducer = (state: State, action: Action): alert[] => {\n  switch (action.type) {\n    case 'ADD':\n      return [...state, action.payload]\n    case 'REMOVE':\n      return state.filter(({ id }) => id !== action.payload)\n    default:\n      return state\n  }\n}\n"],"mappings":";AAOA,IAAa,eAAe,CAAC;AAI7B,IAAa,WAAW,OAAc,WAA4B;CAChE,QAAQ,OAAO,MAAf;EACE,KAAK,OACH,OAAO,CAAC,GAAG,OAAO,OAAO,OAAO;EAClC,KAAK,UACH,OAAO,MAAM,QAAQ,EAAE,SAAS,OAAO,OAAO,OAAO;EACvD,SACE,OAAO;CACX;AACF"}

package/dist/components/alert-dialog/alert-context/types.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { uid } from 'uid';
 import { AlertDialogContent } from '../AlertDialogContent';
 import type { AlertDialogTheme } from './AlertDialogIcon';
 type AlertCommonProps = {
-    id: ReturnType<typeof uid>;
+    id: string;
     title: string;
     size?: React.ComponentProps<typeof AlertDialogContent>['size'];
     theme?: AlertDialogTheme;

package/dist/components/avatar/Avatar.js

@@ -68,12 +68,11 @@ var StyledButton = /* @__PURE__ */ styled("button", {
 	}
 });
 var AvatarRootProvider = ({ children, name, size }) => {
-	const value = React$1.useMemo(() => ({
-		name,
-		size
-	}), [name, size]);
-	return /* @__PURE__ */ jsx(AvatarRootContext.Provider, {
-		value,
+	return /* @__PURE__ */ jsx(AvatarRootContext, {
+		value: React$1.useMemo(() => ({
+			name,
+			size
+		}), [name, size]),
 		children
 	});
 };

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

package/dist/components/avatar/AvatarIcon.js

@@ -13,9 +13,9 @@ var toIconSize = {
 	xxl: "lg"
 };
 var AvatarIcon = ({ is }) => {
-	const { size } = React$1.useContext(AvatarRootContext);
+	const { size } = React$1.use(AvatarRootContext);
 	return /* @__PURE__ */ jsx(Icon, {
-		size: React$1.useMemo(() => overrideStyledVariantValue(size, (s) => toIconSize[s]), [size]),
+		size: overrideStyledVariantValue(size, (s) => toIconSize[s]),
 		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'\nimport { Icon } from '../icon/Icon'\nimport { AvatarRootContext } from './Avatar.context'\n\nconst toIconSize = {\n  xs: 'sm',\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg',\n  xxl: 'lg'\n}\n\ntype AvatarIcon = {\n  is: React.FC<React.SVGProps<SVGSVGElement>>\n}\n\nexport const AvatarIcon = ({ is }: AvatarIcon) => {\n  const rootContext = React.useContext(AvatarRootContext)\n  const { size } = rootContext\n  const iconSize = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n\n  return <Icon size={iconSize} is={is} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;AACP;AAMA,IAAa,cAAc,EAAE,SAAqB;CAEhD,MAAM,EAAE,SADY,QAAM,WAAW,iBACpB;CAMjB,OAAO,oBAAC,MAAD;EAAM,MALI,QAAM,cACf,2BAA2B,OAAO,MAAM,WAAW,EAAE,GAC3D,CAAC,IAAI,CAGY;EAAc;CAAK,CAAA;AACxC"}
+{"version":3,"file":"AvatarIcon.js","names":[],"sources":["../../../src/components/avatar/AvatarIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Icon } from '../icon/Icon'\nimport { AvatarRootContext } from './Avatar.context'\n\nconst toIconSize = {\n  xs: 'sm',\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg',\n  xxl: 'lg'\n}\n\ntype AvatarIcon = {\n  is: React.FC<React.SVGProps<SVGSVGElement>>\n}\n\nexport const AvatarIcon = ({ is }: AvatarIcon) => {\n  const rootContext = React.use(AvatarRootContext)\n  const { size } = rootContext\n  const iconSize = overrideStyledVariantValue(size, (s) => toIconSize[s])\n\n  return <Icon size={iconSize} is={is} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;AACP;AAMA,IAAa,cAAc,EAAE,SAAqB;CAEhD,MAAM,EAAE,SADY,QAAM,IAAI,iBACb;CAGjB,OAAO,oBAAC,MAAD;EAAM,MAFI,2BAA2B,OAAO,MAAM,WAAW,EAEjD;EAAc;CAAK,CAAA;AACxC"}

package/dist/components/avatar/AvatarInitial.js

@@ -14,8 +14,8 @@ var toTextSize = {
 	xxl: "lg"
 };
 var AvatarInitial = () => {
-	const { name, size } = React$1.useContext(AvatarRootContext);
-	const textSize = React$1.useMemo(() => overrideStyledVariantValue(size, (s) => toTextSize[s]), [size]);
+	const { name, size } = React$1.use(AvatarRootContext);
+	const textSize = overrideStyledVariantValue(size, (s) => toTextSize[s]);
 	if (!name) return /* @__PURE__ */ jsx(AvatarPlaceholder, {});
 	return /* @__PURE__ */ jsx(Text, {
 		size: textSize,

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

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

@@ -4,19 +4,18 @@ import { jsx } from "react/jsx-runtime";
 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
-	}), [
-		size,
-		overflow,
-		isOverflowing,
-		setIsOverflowing
-	]);
-	return /* @__PURE__ */ jsx(BadgeContext.Provider, {
-		value,
+	return /* @__PURE__ */ jsx(BadgeContext, {
+		value: React$1.useMemo(() => ({
+			size,
+			overflow,
+			isOverflowing,
+			setIsOverflowing
+		}), [
+			size,
+			overflow,
+			isOverflowing,
+			setIsOverflowing
+		]),
 		children
 	});
 };

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 { BadgeProps } from './Badge'\nimport type { BadgeOverflow } from './Badge.types'\n\ntype BadgeProviderProps = {\n  size?: BadgeProps['size']\n  overflow?: BadgeOverflow\n}\n\ntype BadgeContext = BadgeProviderProps & {\n  isOverflowing?: boolean\n  setIsOverflowing?: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nexport const BadgeContext = React.createContext<BadgeContext>({})\n\nexport const BadgeProvider = ({\n  size,\n  overflow,\n  children\n}: React.PropsWithChildren<BadgeProviderProps>) => {\n  const [isOverflowing, setIsOverflowing] = React.useState(false)\n\n  const value = React.useMemo<BadgeContext>(\n    () => ({ size, overflow, isOverflowing, setIsOverflowing }),\n    [size, overflow, isOverflowing, setIsOverflowing]\n  )\n  return <BadgeContext.Provider value={value}>{children}</BadgeContext.Provider>\n}\n"],"mappings":";;;AAeA,IAAa,eAAe,QAAM,cAA4B,CAAC,CAAC;AAEhE,IAAa,iBAAiB,EAC5B,MACA,UACA,eACiD;CACjD,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,KAAK;CAE9D,MAAM,QAAQ,QAAM,eACX;EAAE;EAAM;EAAU;EAAe;CAAiB,IACzD;EAAC;EAAM;EAAU;EAAe;CAAgB,CAClD;CACA,OAAO,oBAAC,aAAa,UAAd;EAA8B;EAAQ;CAAgC,CAAA;AAC/E"}
+{"version":3,"file":"Badge.context.js","names":[],"sources":["../../../src/components/badge/Badge.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { BadgeProps } from './Badge'\nimport type { BadgeOverflow } from './Badge.types'\n\ntype BadgeProviderProps = {\n  size?: BadgeProps['size']\n  overflow?: BadgeOverflow\n}\n\ntype BadgeContext = BadgeProviderProps & {\n  isOverflowing?: boolean\n  setIsOverflowing?: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nexport const BadgeContext = React.createContext<BadgeContext>({})\n\nexport const BadgeProvider = ({\n  size,\n  overflow,\n  children\n}: React.PropsWithChildren<BadgeProviderProps>) => {\n  const [isOverflowing, setIsOverflowing] = React.useState(false)\n\n  const value = React.useMemo<BadgeContext>(\n    () => ({ size, overflow, isOverflowing, setIsOverflowing }),\n    [size, overflow, isOverflowing, setIsOverflowing]\n  )\n  return <BadgeContext value={value}>{children}</BadgeContext>\n}\n"],"mappings":";;;AAeA,IAAa,eAAe,QAAM,cAA4B,CAAC,CAAC;AAEhE,IAAa,iBAAiB,EAC5B,MACA,UACA,eACiD;CACjD,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,KAAK;CAM9D,OAAO,oBAAC,cAAD;EAAqB,OAJd,QAAM,eACX;GAAE;GAAM;GAAU;GAAe;EAAiB,IACzD;GAAC;GAAM;GAAU;GAAe;EAAgB,CAEtB;EAAQ;CAAuB,CAAA;AAC7D"}

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 { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/badge/Badge.tsx
 var StyledBadge = styled("div", {
@@ -69,9 +70,9 @@ var StyledBadge = styled("div", {
 	]
 }, { enableResponsiveVariants: true });
 var BadgeInner = ({ ref, theme = "info", emphasis = "subtle", children, style, ...rest }) => {
-	const { size, overflow, isOverflowing } = React$1.useContext(BadgeContext);
+	const { size, overflow, isOverflowing } = React$1.use(BadgeContext);
 	const [badgeElRef, setBadgeElRef] = useCallbackRefState();
-	React$1.useImperativeHandle(ref, () => badgeElRef);
+	const composedBadgeRef = useComposedRefs(ref, setBadgeElRef);
 	const label = badgeElRef?.textContent;
 	const isInfoOnly = badgeSemanticNames.includes(theme);
 	const isClickable = Object.keys(rest).includes("onClick") || Object.keys(rest).includes("href");
@@ -87,7 +88,7 @@ var BadgeInner = ({ ref, theme = "info", emphasis = "subtle", children, style, .
 				...style
 			},
 			...rest,
-			ref: setBadgeElRef,
+			ref: composedBadgeRef,
 			isClickable: isClickable && !isInfoOnly,
 			children: React$1.Children.map(children, (child) => {
 				if (typeof child === "string" || typeof child === "number") return /* @__PURE__ */ jsx(BadgeText, { children: child });

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 { styled } from '../../styled'\nimport { useCallbackRefState } from '../../utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { Icon } from '../icon/Icon'\nimport {\n  badgeSemanticNames,\n  colorSchemes as badgeColorSchemes\n} from './Badge.colorscheme.config'\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport type { BadgeOverflow } from './Badge.types'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\n\nconst StyledBadge = styled(\n  'div',\n  {\n    base: [\n      'flex',\n      'justify-center',\n      'items-center',\n      'rounded-sm',\n      'min-w-0',\n      'border',\n      'border-white',\n      'font-body',\n      '*:not-last:mr-1'\n    ],\n    variants: {\n      emphasis: {\n        white: ['text-(--text-on-white)', 'bg-white'],\n        subtle: ['text-(--text-subtle)', 'bg-(--background-subtle)'],\n        bold: ['text-(--text-bold)', 'bg-(--background-bold)']\n      },\n      size: {\n        xs: ['px-1', 'py-0'],\n        sm: ['px-1', 'py-0.5'],\n        md: ['px-2', 'py-1']\n      },\n      isClickable: {\n        true: ['cursor-pointer']\n      },\n      highlighted: {\n        true: []\n      }\n    },\n    compoundVariants: [\n      {\n        isClickable: true,\n        emphasis: 'white',\n        class: [\n          'hover:text-(--text-on-white)',\n          'hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n        ]\n      },\n      {\n        isClickable: true,\n        emphasis: 'subtle',\n        class: [\n          'hover:bg-(--background-subtle-hover)',\n          'hover:text-(--text-subtle-hover)'\n        ]\n      },\n      {\n        isClickable: true,\n        emphasis: 'bold',\n        class: [\n          'hover:bg-(--background-bold-hover)',\n          'hover:text-(--text-bold)'\n        ]\n      },\n      {\n        emphasis: 'white',\n        highlighted: true,\n        class: [\n          'text-(--text-on-white)',\n          'bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n        ]\n      },\n      {\n        emphasis: 'subtle',\n        highlighted: true,\n        class: ['text-(--text-subtle-hover)', '(--bg-background-subtle-hover)']\n      },\n      {\n        emphasis: 'bold',\n        highlighted: true,\n        class: ['text-(--text-bold)', 'bg-(--background-bold-hover)']\n      }\n    ]\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport type BadgeProps = React.ComponentProps<typeof StyledBadge> & {\n  theme?: keyof typeof badgeColorSchemes\n  overflow?: BadgeOverflow\n}\n\ntype BadgeInnerProps = Omit<BadgeProps, 'size' | 'overflow'>\n\nconst BadgeInner = ({\n  ref,\n  theme = 'info',\n  emphasis = 'subtle',\n  children,\n  style,\n  ...rest\n}: BadgeInnerProps) => {\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') || 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            const iconProps = child.props as React.ComponentProps<typeof Icon>\n            return <BadgeIcon {...iconProps} />\n          }\n          return child\n        })}\n      </StyledBadge>\n    </OptionalTooltipWrapper>\n  )\n}\n\nconst BadgeComponent = ({\n  ref,\n  size = 'sm',\n  overflow = 'wrap',\n  ...rest\n}: BadgeProps) => (\n  <BadgeProvider size={size} overflow={overflow}>\n    <BadgeInner {...rest} ref={ref} />\n  </BadgeProvider>\n)\n\nexport const Badge = /* @__PURE__ */ Object.assign(BadgeComponent, {\n  Icon: BadgeIcon,\n  Text: BadgeText\n})\n"],"mappings":";;;;;;;;;;;AAeA,IAAM,cAAc,OAClB,OACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,UAAU;GACR,OAAO,CAAC,0BAA0B,UAAU;GAC5C,QAAQ,CAAC,wBAAwB,0BAA0B;GAC3D,MAAM,CAAC,sBAAsB,wBAAwB;EACvD;EACA,MAAM;GACJ,IAAI,CAAC,QAAQ,MAAM;GACnB,IAAI,CAAC,QAAQ,QAAQ;GACrB,IAAI,CAAC,QAAQ,MAAM;EACrB;EACA,aAAa,EACX,MAAM,CAAC,gBAAgB,EACzB;EACA,aAAa,EACX,MAAM,CAAC,EACT;CACF;CACA,kBAAkB;EAChB;GACE,aAAa;GACb,UAAU;GACV,OAAO,CACL,gCACA,iEACF;EACF;EACA;GACE,aAAa;GACb,UAAU;GACV,OAAO,CACL,wCACA,kCACF;EACF;EACA;GACE,aAAa;GACb,UAAU;GACV,OAAO,CACL,sCACA,0BACF;EACF;EACA;GACE,UAAU;GACV,aAAa;GACb,OAAO,CACL,0BACA,2DACF;EACF;EACA;GACE,UAAU;GACV,aAAa;GACb,OAAO,CAAC,8BAA8B,gCAAgC;EACxE;EACA;GACE,UAAU;GACV,aAAa;GACb,OAAO,CAAC,sBAAsB,8BAA8B;EAC9D;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AASA,IAAM,cAAc,EAClB,KACA,QAAQ,QACR,WAAW,UACX,UACA,OACA,GAAG,WACkB;CACrB,MAAM,EAAE,MAAM,UAAU,kBAAkB,QAAM,WAAW,YAAY;CACvE,MAAM,CAAC,YAAY,iBAAiB,oBAAoB;CACxD,QAAM,oBAAoB,WAAW,UAA4B;CAEjE,MAAM,QAAQ,YAAY;CAE1B,MAAM,aAAa,mBAAmB,SAAS,KAAK;CAEpD,MAAM,cACJ,OAAO,KAAK,IAAI,CAAC,CAAC,SAAS,SAAS,KAAK,OAAO,KAAK,IAAI,CAAC,CAAC,SAAS,MAAM;CAE5E,OACE,oBAAC,wBAAD;EACE,YAAY,aAAa,cAAc;EAChC;YAEP,oBAAC,aAAD;GACE,MAAK;GACK;GACJ;GACN,OAAO;IACL,GAAG,aAAkB;IACrB,GAAG;GACL;GACA,GAAI;GACJ,KAAK;GACL,aAAa,eAAe,CAAC;aAE5B,QAAM,SAAS,IAAI,WAAW,UAAU;IACvC,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAChD,OAAO,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA;IAEtC,IAAI,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,MAAM;KACtD,MAAM,YAAY,MAAM;KACxB,OAAO,oBAAC,WAAD,EAAW,GAAI,UAAY,CAAA;IACpC;IACA,OAAO;GACT,CAAC;EACU,CAAA;CACS,CAAA;AAE5B;AAEA,IAAM,kBAAkB,EACtB,KACA,OAAO,MACP,WAAW,QACX,GAAG,WAEH,oBAAC,eAAD;CAAqB;CAAgB;WACnC,oBAAC,YAAD;EAAY,GAAI;EAAW;CAAM,CAAA;AACpB,CAAA;AAGjB,IAAa,QAAwB,uBAAO,OAAO,gBAAgB;CACjE,MAAM;CACN,MAAM;AACR,CAAC"}
+{"version":3,"file":"Badge.js","names":[],"sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import { useComposedRefs } from '@radix-ui/react-compose-refs'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { useCallbackRefState } from '../../utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { Icon } from '../icon/Icon'\nimport {\n  badgeSemanticNames,\n  colorSchemes as badgeColorSchemes\n} from './Badge.colorscheme.config'\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport type { BadgeOverflow } from './Badge.types'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\n\nconst StyledBadge = styled(\n  'div',\n  {\n    base: [\n      'flex',\n      'justify-center',\n      'items-center',\n      'rounded-sm',\n      'min-w-0',\n      'border',\n      'border-white',\n      'font-body',\n      '*:not-last:mr-1'\n    ],\n    variants: {\n      emphasis: {\n        white: ['text-(--text-on-white)', 'bg-white'],\n        subtle: ['text-(--text-subtle)', 'bg-(--background-subtle)'],\n        bold: ['text-(--text-bold)', 'bg-(--background-bold)']\n      },\n      size: {\n        xs: ['px-1', 'py-0'],\n        sm: ['px-1', 'py-0.5'],\n        md: ['px-2', 'py-1']\n      },\n      isClickable: {\n        true: ['cursor-pointer']\n      },\n      highlighted: {\n        true: []\n      }\n    },\n    compoundVariants: [\n      {\n        isClickable: true,\n        emphasis: 'white',\n        class: [\n          'hover:text-(--text-on-white)',\n          'hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n        ]\n      },\n      {\n        isClickable: true,\n        emphasis: 'subtle',\n        class: [\n          'hover:bg-(--background-subtle-hover)',\n          'hover:text-(--text-subtle-hover)'\n        ]\n      },\n      {\n        isClickable: true,\n        emphasis: 'bold',\n        class: [\n          'hover:bg-(--background-bold-hover)',\n          'hover:text-(--text-bold)'\n        ]\n      },\n      {\n        emphasis: 'white',\n        highlighted: true,\n        class: [\n          'text-(--text-on-white)',\n          'bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n        ]\n      },\n      {\n        emphasis: 'subtle',\n        highlighted: true,\n        class: ['text-(--text-subtle-hover)', '(--bg-background-subtle-hover)']\n      },\n      {\n        emphasis: 'bold',\n        highlighted: true,\n        class: ['text-(--text-bold)', 'bg-(--background-bold-hover)']\n      }\n    ]\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport type BadgeProps = React.ComponentProps<typeof StyledBadge> & {\n  theme?: keyof typeof badgeColorSchemes\n  overflow?: BadgeOverflow\n}\n\ntype BadgeInnerProps = Omit<BadgeProps, 'size' | 'overflow'>\n\nconst BadgeInner = ({\n  ref,\n  theme = 'info',\n  emphasis = 'subtle',\n  children,\n  style,\n  ...rest\n}: BadgeInnerProps) => {\n  const { size, overflow, isOverflowing } = React.use(BadgeContext)\n  const [badgeElRef, setBadgeElRef] = useCallbackRefState()\n  const composedBadgeRef = useComposedRefs(\n    ref as React.Ref<HTMLElement>,\n    setBadgeElRef\n  )\n\n  const label = badgeElRef?.textContent\n\n  const isInfoOnly = badgeSemanticNames.includes(theme)\n\n  const isClickable =\n    Object.keys(rest).includes('onClick') || 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={composedBadgeRef}\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            const iconProps = child.props as React.ComponentProps<typeof Icon>\n            return <BadgeIcon {...iconProps} />\n          }\n          return child\n        })}\n      </StyledBadge>\n    </OptionalTooltipWrapper>\n  )\n}\n\nconst BadgeComponent = ({\n  ref,\n  size = 'sm',\n  overflow = 'wrap',\n  ...rest\n}: BadgeProps) => (\n  <BadgeProvider size={size} overflow={overflow}>\n    <BadgeInner {...rest} ref={ref} />\n  </BadgeProvider>\n)\n\nexport const Badge = /* @__PURE__ */ Object.assign(BadgeComponent, {\n  Icon: BadgeIcon,\n  Text: BadgeText\n})\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAM,cAAc,OAClB,OACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,UAAU;GACR,OAAO,CAAC,0BAA0B,UAAU;GAC5C,QAAQ,CAAC,wBAAwB,0BAA0B;GAC3D,MAAM,CAAC,sBAAsB,wBAAwB;EACvD;EACA,MAAM;GACJ,IAAI,CAAC,QAAQ,MAAM;GACnB,IAAI,CAAC,QAAQ,QAAQ;GACrB,IAAI,CAAC,QAAQ,MAAM;EACrB;EACA,aAAa,EACX,MAAM,CAAC,gBAAgB,EACzB;EACA,aAAa,EACX,MAAM,CAAC,EACT;CACF;CACA,kBAAkB;EAChB;GACE,aAAa;GACb,UAAU;GACV,OAAO,CACL,gCACA,iEACF;EACF;EACA;GACE,aAAa;GACb,UAAU;GACV,OAAO,CACL,wCACA,kCACF;EACF;EACA;GACE,aAAa;GACb,UAAU;GACV,OAAO,CACL,sCACA,0BACF;EACF;EACA;GACE,UAAU;GACV,aAAa;GACb,OAAO,CACL,0BACA,2DACF;EACF;EACA;GACE,UAAU;GACV,aAAa;GACb,OAAO,CAAC,8BAA8B,gCAAgC;EACxE;EACA;GACE,UAAU;GACV,aAAa;GACb,OAAO,CAAC,sBAAsB,8BAA8B;EAC9D;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AASA,IAAM,cAAc,EAClB,KACA,QAAQ,QACR,WAAW,UACX,UACA,OACA,GAAG,WACkB;CACrB,MAAM,EAAE,MAAM,UAAU,kBAAkB,QAAM,IAAI,YAAY;CAChE,MAAM,CAAC,YAAY,iBAAiB,oBAAoB;CACxD,MAAM,mBAAmB,gBACvB,KACA,aACF;CAEA,MAAM,QAAQ,YAAY;CAE1B,MAAM,aAAa,mBAAmB,SAAS,KAAK;CAEpD,MAAM,cACJ,OAAO,KAAK,IAAI,CAAC,CAAC,SAAS,SAAS,KAAK,OAAO,KAAK,IAAI,CAAC,CAAC,SAAS,MAAM;CAE5E,OACE,oBAAC,wBAAD;EACE,YAAY,aAAa,cAAc;EAChC;YAEP,oBAAC,aAAD;GACE,MAAK;GACK;GACJ;GACN,OAAO;IACL,GAAG,aAAkB;IACrB,GAAG;GACL;GACA,GAAI;GACJ,KAAK;GACL,aAAa,eAAe,CAAC;aAE5B,QAAM,SAAS,IAAI,WAAW,UAAU;IACvC,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAChD,OAAO,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA;IAEtC,IAAI,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,MAAM;KACtD,MAAM,YAAY,MAAM;KACxB,OAAO,oBAAC,WAAD,EAAW,GAAI,UAAY,CAAA;IACpC;IACA,OAAO;GACT,CAAC;EACU,CAAA;CACS,CAAA;AAE5B;AAEA,IAAM,kBAAkB,EACtB,KACA,OAAO,MACP,WAAW,QACX,GAAG,WAEH,oBAAC,eAAD;CAAqB;CAAgB;WACnC,oBAAC,YAAD;EAAY,GAAI;EAAW;CAAM,CAAA;AACpB,CAAA;AAGjB,IAAa,QAAwB,uBAAO,OAAO,gBAAgB;CACjE,MAAM;CACN,MAAM;AACR,CAAC"}

package/dist/components/badge/BadgeText.js

@@ -8,7 +8,7 @@ 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);
+	const { setIsOverflowing } = React$1.use(BadgeContext);
 	useResizeObserver({
 		delay: 0,
 		elements: [elRef],
@@ -36,8 +36,8 @@ var toTextSize = {
 	md: "md"
 };
 var BadgeText = ({ children, ...rest }) => {
-	const { size: badgeSize, overflow } = React$1.useContext(BadgeContext);
-	const size = React$1.useMemo(() => overrideStyledVariantValue(badgeSize, (s) => toTextSize[s]), [badgeSize]);
+	const { size: badgeSize, overflow } = React$1.use(BadgeContext);
+	const size = overrideStyledVariantValue(badgeSize, (s) => toTextSize[s]);
 	const [elRef, setElRef] = useCallbackRefState();
 	return /* @__PURE__ */ jsxs(Fragment, { children: [overflow === "ellipsis" && /* @__PURE__ */ jsx(ObserveBadgeTextOverflow, { elRef }), /* @__PURE__ */ jsx(StyledBadgeText, {
 		size,

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

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

@@ -11,7 +11,7 @@ var BannerContext = React$1.createContext({
 	setHasDismiss: () => null
 });
 var useBannerContext = () => {
-	const context = React$1.useContext(BannerContext);
+	const context = React$1.use(BannerContext);
 	if (context === void 0) throw new Error("useBannerContext must be used within a BannerProvider");
 	return context;
 };
@@ -20,19 +20,18 @@ var BannerProvider = ({ emphasis = "minimal", size = {
 	"@md": "md"
 }, children }) => {
 	const [hasDismiss, setHasDismiss] = React$1.useState(false);
-	const value = React$1.useMemo(() => ({
-		emphasis,
-		size,
-		hasDismiss,
-		setHasDismiss
-	}), [
-		emphasis,
-		size,
-		hasDismiss,
-		setHasDismiss
-	]);
-	return /* @__PURE__ */ jsx(BannerContext.Provider, {
-		value,
+	return /* @__PURE__ */ jsx(BannerContext, {
+		value: React$1.useMemo(() => ({
+			emphasis,
+			size,
+			hasDismiss,
+			setHasDismiss
+		}), [
+			emphasis,
+			size,
+			hasDismiss,
+			setHasDismiss
+		]),
 		children
 	});
 };

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

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

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

@@ -16,14 +16,8 @@ var toDirection = {
 };
 var BannerRegularActions = ({ children, className, ...rest }) => {
 	const { size } = useBannerContext();
-	const gap = React$1.useMemo(() => {
-		if (typeof size === "string") return toGap[size];
-		return "gap-2 md:gap-4";
-	}, [size]);
-	const direction = React$1.useMemo(() => {
-		if (typeof size === "string") return toDirection[size];
-		return "flex-col md:flex-row";
-	}, [size]);
+	const gap = typeof size === "string" ? toGap[size] : "gap-2 md:gap-4";
+	const direction = typeof size === "string" ? toDirection[size] : "flex-col md:flex-row";
 	invariant(React$1.Children.count(children) <= MAX_ALLOWED_CHILDREN, `A maximum of ${MAX_ALLOWED_CHILDREN} ${BannerRegularButton.displayName} component(s) are permitted as children of ${BannerRegularActions.displayName}`);
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("flex", gap, direction, className),

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

@@ -1 +1 @@
-{"version":3,"file":"BannerRegularActions.js","names":[],"sources":["../../../../src/components/banner/banner-regular/BannerRegularActions.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { cn } from '../../../styled'\nimport { useBannerContext } from '../Banner.context'\nimport { BannerRegularButton } from './BannerRegularButton'\n\nconst MAX_ALLOWED_CHILDREN = 2\n\nconst toGap = {\n  sm: 'gap-2',\n  md: 'gap-4'\n}\n\nconst toDirection = {\n  sm: 'flex-col',\n  md: 'flex-row'\n}\n\nexport const BannerRegularActions = ({\n  children,\n  className,\n  ...rest\n}: React.PropsWithChildren<React.ComponentProps<'div'>>) => {\n  const { size } = useBannerContext()\n\n  const gap = React.useMemo(() => {\n    if (typeof size === 'string') {\n      return toGap[size]\n    }\n    return 'gap-2 md:gap-4'\n  }, [size])\n\n  const direction = React.useMemo(() => {\n    if (typeof size === 'string') {\n      return toDirection[size]\n    }\n    return 'flex-col md:flex-row'\n  }, [size])\n\n  invariant(\n    React.Children.count(children) <= MAX_ALLOWED_CHILDREN,\n    `A maximum of ${MAX_ALLOWED_CHILDREN} ${BannerRegularButton.displayName} component(s) are permitted as children of ${BannerRegularActions.displayName}`\n  )\n\n  return (\n    <div className={cn('flex', gap, direction, className)} {...rest}>\n      {React.Children.map(children, (child, index) => {\n        // if child is undefined or null, React.isValidElement returns false and hence error is thrown.\n        // This line will prevent that from happening\n        if (child == null) return child\n\n        if (!React.isValidElement(child)) {\n          throw new Error(\n            `Child passed to ${BannerRegularActions.displayName} is not a valid element`\n          )\n        }\n\n        invariant(\n          child.type === BannerRegularButton,\n          `Children of type ${child?.type} aren't permitted. Only an ${BannerRegularButton.displayName} component is allowed in ${BannerRegularActions.displayName}`\n        )\n\n        const propsToInject: Partial<\n          React.ComponentProps<typeof BannerRegularButton>\n        > = {\n          // Override button appearance - make the second button outlined\n          appearance: index > 0 ? 'outline' : undefined\n        }\n\n        return React.cloneElement(\n          child as React.ReactElement<\n            React.ComponentProps<typeof BannerRegularButton>\n          >,\n          propsToInject\n        )\n      })}\n    </div>\n  )\n}\n\nBannerRegularActions.displayName = 'BannerRegularActions'\n"],"mappings":";;;;;;;AAOA,IAAM,uBAAuB;AAE7B,IAAM,QAAQ;CACZ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,cAAc;CAClB,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,wBAAwB,EACnC,UACA,WACA,GAAG,WACuD;CAC1D,MAAM,EAAE,SAAS,iBAAiB;CAElC,MAAM,MAAM,QAAM,cAAc;EAC9B,IAAI,OAAO,SAAS,UAClB,OAAO,MAAM;EAEf,OAAO;CACT,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,YAAY,QAAM,cAAc;EACpC,IAAI,OAAO,SAAS,UAClB,OAAO,YAAY;EAErB,OAAO;CACT,GAAG,CAAC,IAAI,CAAC;CAET,UACE,QAAM,SAAS,MAAM,QAAQ,KAAK,sBAClC,gBAAgB,qBAAqB,GAAG,oBAAoB,YAAY,6CAA6C,qBAAqB,aAC5I;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,QAAQ,KAAK,WAAW,SAAS;EAAG,GAAI;YACxD,QAAM,SAAS,IAAI,WAAW,OAAO,UAAU;GAG9C,IAAI,SAAS,MAAM,OAAO;GAE1B,IAAI,CAAC,QAAM,eAAe,KAAK,GAC7B,MAAM,IAAI,MACR,mBAAmB,qBAAqB,YAAY,wBACtD;GAGF,UACE,MAAM,SAAS,qBACf,oBAAoB,OAAO,KAAK,6BAA6B,oBAAoB,YAAY,2BAA2B,qBAAqB,aAC/I;GAEA,MAAM,gBAEF,EAEF,YAAY,QAAQ,IAAI,YAAY,KAAA,EACtC;GAEA,OAAO,QAAM,aACX,OAGA,aACF;EACF,CAAC;CACE,CAAA;AAET;AAEA,qBAAqB,cAAc"}
+{"version":3,"file":"BannerRegularActions.js","names":[],"sources":["../../../../src/components/banner/banner-regular/BannerRegularActions.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { cn } from '../../../styled'\nimport { useBannerContext } from '../Banner.context'\nimport { BannerRegularButton } from './BannerRegularButton'\n\nconst MAX_ALLOWED_CHILDREN = 2\n\nconst toGap = {\n  sm: 'gap-2',\n  md: 'gap-4'\n}\n\nconst toDirection = {\n  sm: 'flex-col',\n  md: 'flex-row'\n}\n\nexport const BannerRegularActions = ({\n  children,\n  className,\n  ...rest\n}: React.PropsWithChildren<React.ComponentProps<'div'>>) => {\n  const { size } = useBannerContext()\n\n  const gap = typeof size === 'string' ? toGap[size] : 'gap-2 md:gap-4'\n\n  const direction =\n    typeof size === 'string' ? toDirection[size] : 'flex-col md:flex-row'\n\n  invariant(\n    React.Children.count(children) <= MAX_ALLOWED_CHILDREN,\n    `A maximum of ${MAX_ALLOWED_CHILDREN} ${BannerRegularButton.displayName} component(s) are permitted as children of ${BannerRegularActions.displayName}`\n  )\n\n  return (\n    <div className={cn('flex', gap, direction, className)} {...rest}>\n      {React.Children.map(children, (child, index) => {\n        // if child is undefined or null, React.isValidElement returns false and hence error is thrown.\n        // This line will prevent that from happening\n        if (child == null) return child\n\n        if (!React.isValidElement(child)) {\n          throw new Error(\n            `Child passed to ${BannerRegularActions.displayName} is not a valid element`\n          )\n        }\n\n        invariant(\n          child.type === BannerRegularButton,\n          `Children of type ${child?.type} aren't permitted. Only an ${BannerRegularButton.displayName} component is allowed in ${BannerRegularActions.displayName}`\n        )\n\n        const propsToInject: Partial<\n          React.ComponentProps<typeof BannerRegularButton>\n        > = {\n          // Override button appearance - make the second button outlined\n          appearance: index > 0 ? 'outline' : undefined\n        }\n\n        return React.cloneElement(\n          child as React.ReactElement<\n            React.ComponentProps<typeof BannerRegularButton>\n          >,\n          propsToInject\n        )\n      })}\n    </div>\n  )\n}\n\nBannerRegularActions.displayName = 'BannerRegularActions'\n"],"mappings":";;;;;;;AAOA,IAAM,uBAAuB;AAE7B,IAAM,QAAQ;CACZ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,cAAc;CAClB,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,wBAAwB,EACnC,UACA,WACA,GAAG,WACuD;CAC1D,MAAM,EAAE,SAAS,iBAAiB;CAElC,MAAM,MAAM,OAAO,SAAS,WAAW,MAAM,QAAQ;CAErD,MAAM,YACJ,OAAO,SAAS,WAAW,YAAY,QAAQ;CAEjD,UACE,QAAM,SAAS,MAAM,QAAQ,KAAK,sBAClC,gBAAgB,qBAAqB,GAAG,oBAAoB,YAAY,6CAA6C,qBAAqB,aAC5I;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,QAAQ,KAAK,WAAW,SAAS;EAAG,GAAI;YACxD,QAAM,SAAS,IAAI,WAAW,OAAO,UAAU;GAG9C,IAAI,SAAS,MAAM,OAAO;GAE1B,IAAI,CAAC,QAAM,eAAe,KAAK,GAC7B,MAAM,IAAI,MACR,mBAAmB,qBAAqB,YAAY,wBACtD;GAGF,UACE,MAAM,SAAS,qBACf,oBAAoB,OAAO,KAAK,6BAA6B,oBAAoB,YAAY,2BAA2B,qBAAqB,aAC/I;GAEA,MAAM,gBAEF,EAEF,YAAY,QAAQ,IAAI,YAAY,KAAA,EACtC;GAEA,OAAO,QAAM,aACX,OAGA,aACF;EACF,CAAC;CACE,CAAA;AAET;AAEA,qBAAqB,cAAc"}

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

@@ -1,14 +1,14 @@
 import { Button } from "../../button/Button.js";
 import { overrideStyledVariantValue } from "../../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";
 import { useBannerContext } from "../Banner.context.js";
-import * as React$1 from "react";
+import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/banner-regular/BannerRegularButton.tsx
 var BannerRegularButton = (props) => {
 	const { emphasis, size } = useBannerContext();
 	return /* @__PURE__ */ jsx(Button, {
 		size,
-		fullWidth: React$1.useMemo(() => overrideStyledVariantValue(size, (s) => s === "sm"), [size]),
+		fullWidth: overrideStyledVariantValue(size, (s) => s === "sm"),
 		theme: emphasis === "bold" ? "neutral" : "primary",
 		...props
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"BannerRegularButton.js","names":[],"sources":["../../../../src/components/banner/banner-regular/BannerRegularButton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { overrideStyledVariantValue } from '../../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport type { Override } from '../../../utilities/types'\nimport { Button } from '../../button/Button'\nimport { useBannerContext } from '../Banner.context'\n\nexport const BannerRegularButton = (\n  props: Override<\n    React.ComponentProps<typeof Button>,\n    { as?: React.ElementType }\n  >\n) => {\n  const { emphasis, size } = useBannerContext()\n\n  const fullWidth = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => s === 'sm'),\n    [size]\n  )\n\n  return (\n    <Button\n      size={size}\n      fullWidth={fullWidth}\n      theme={emphasis === 'bold' ? 'neutral' : 'primary'}\n      {...props}\n    />\n  )\n}\n\nBannerRegularButton.displayName = 'BannerRegularButton'\n"],"mappings":";;;;;;AAOA,IAAa,uBACX,UAIG;CACH,MAAM,EAAE,UAAU,SAAS,iBAAiB;CAO5C,OACE,oBAAC,QAAD;EACQ;EACK,WARG,QAAM,cAChB,2BAA2B,OAAO,MAAM,MAAM,IAAI,GACxD,CAAC,IAAI,CAMQ;EACX,OAAO,aAAa,SAAS,YAAY;EACzC,GAAI;CACL,CAAA;AAEL;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"BannerRegularButton.js","names":[],"sources":["../../../../src/components/banner/banner-regular/BannerRegularButton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { overrideStyledVariantValue } from '../../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport type { Override } from '../../../utilities/types'\nimport { Button } from '../../button/Button'\nimport { useBannerContext } from '../Banner.context'\n\nexport const BannerRegularButton = (\n  props: Override<\n    React.ComponentProps<typeof Button>,\n    { as?: React.ElementType }\n  >\n) => {\n  const { emphasis, size } = useBannerContext()\n\n  const fullWidth = overrideStyledVariantValue(size, (s) => s === 'sm')\n\n  return (\n    <Button\n      size={size}\n      fullWidth={fullWidth}\n      theme={emphasis === 'bold' ? 'neutral' : 'primary'}\n      {...props}\n    />\n  )\n}\n\nBannerRegularButton.displayName = 'BannerRegularButton'\n"],"mappings":";;;;;;AAOA,IAAa,uBACX,UAIG;CACH,MAAM,EAAE,UAAU,SAAS,iBAAiB;CAI5C,OACE,oBAAC,QAAD;EACQ;EACK,WALG,2BAA2B,OAAO,MAAM,MAAM,IAKjD;EACX,OAAO,aAAa,SAAS,YAAY;EACzC,GAAI;CACL,CAAA;AAEL;AAEA,oBAAoB,cAAc"}

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

@@ -26,7 +26,7 @@ var BannerRegularDismiss = ({ label = "dismiss", ...rest }) => {
 			setHasDismiss(false);
 		};
 	}, [setHasDismiss]);
-	const actionIconSize = React$1.useMemo(() => overrideStyledVariantValue(size, (s) => toActionIconSize[s]), [size]);
+	const actionIconSize = overrideStyledVariantValue(size, (s) => toActionIconSize[s]);
 	return /* @__PURE__ */ jsx(Banner.Dismiss, {
 		asChild: true,
 		children: /* @__PURE__ */ jsx(StyledDismiss, {

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

@@ -1 +1 @@
-{"version":3,"file":"BannerRegularDismiss.js","names":[],"sources":["../../../../src/components/banner/banner-regular/BannerRegularDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../../styled'\nimport { overrideStyledVariantValue } from '../../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { ActionIcon } from '../../action-icon/ActionIcon'\nimport { Icon } from '../../icon/Icon'\nimport { Banner } from '../Banner'\nimport { useBannerContext } from '../Banner.context'\n\nconst toActionIconSize = {\n  sm: 'md',\n  md: 'sm'\n}\n\nconst StyledDismiss = styled(ActionIcon, {\n  base: ['z-1', 'absolute', 'top-3', 'right-3']\n})\n\ntype BannerRegularDismissProps = Omit<\n  React.ComponentProps<typeof StyledDismiss>,\n  'children' | 'onClick' | 'href'\n>\n\nexport const BannerRegularDismiss = ({\n  label = 'dismiss',\n  ...rest\n}: BannerRegularDismissProps) => {\n  const { size, setHasDismiss } = useBannerContext()\n\n  React.useEffect(() => {\n    setHasDismiss(true)\n    return () => {\n      setHasDismiss(false)\n    }\n  }, [setHasDismiss])\n\n  const actionIconSize = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => toActionIconSize[s]),\n    [size]\n  )\n\n  return (\n    <Banner.Dismiss asChild>\n      <StyledDismiss\n        label={label}\n        size={actionIconSize}\n        hasTooltip={false}\n        isRounded\n        theme=\"neutral\"\n        appearance=\"solid\"\n        {...rest}\n      >\n        <Icon is={Close} />\n      </StyledDismiss>\n    </Banner.Dismiss>\n  )\n}\n\nBannerRegularDismiss.displayName = 'BannerRegularDismiss'\n"],"mappings":";;;;;;;;;;AAUA,IAAM,mBAAmB;CACvB,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,gBAAgB,OAAO,YAAY,EACvC,MAAM;CAAC;CAAO;CAAY;CAAS;AAAS,EAC9C,CAAC;AAOD,IAAa,wBAAwB,EACnC,QAAQ,WACR,GAAG,WAC4B;CAC/B,MAAM,EAAE,MAAM,kBAAkB,iBAAiB;CAEjD,QAAM,gBAAgB;EACpB,cAAc,IAAI;EAClB,aAAa;GACX,cAAc,KAAK;EACrB;CACF,GAAG,CAAC,aAAa,CAAC;CAElB,MAAM,iBAAiB,QAAM,cACrB,2BAA2B,OAAO,MAAM,iBAAiB,EAAE,GACjE,CAAC,IAAI,CACP;CAEA,OACE,oBAAC,OAAO,SAAR;EAAgB,SAAA;YACd,oBAAC,eAAD;GACS;GACP,MAAM;GACN,YAAY;GACZ,WAAA;GACA,OAAM;GACN,YAAW;GACX,GAAI;aAEJ,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACL,CAAA;CACD,CAAA;AAEpB;AAEA,qBAAqB,cAAc"}
+{"version":3,"file":"BannerRegularDismiss.js","names":[],"sources":["../../../../src/components/banner/banner-regular/BannerRegularDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../../styled'\nimport { overrideStyledVariantValue } from '../../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { ActionIcon } from '../../action-icon/ActionIcon'\nimport { Icon } from '../../icon/Icon'\nimport { Banner } from '../Banner'\nimport { useBannerContext } from '../Banner.context'\n\nconst toActionIconSize = {\n  sm: 'md',\n  md: 'sm'\n}\n\nconst StyledDismiss = styled(ActionIcon, {\n  base: ['z-1', 'absolute', 'top-3', 'right-3']\n})\n\ntype BannerRegularDismissProps = Omit<\n  React.ComponentProps<typeof StyledDismiss>,\n  'children' | 'onClick' | 'href'\n>\n\nexport const BannerRegularDismiss = ({\n  label = 'dismiss',\n  ...rest\n}: BannerRegularDismissProps) => {\n  const { size, setHasDismiss } = useBannerContext()\n\n  React.useEffect(() => {\n    setHasDismiss(true)\n    return () => {\n      setHasDismiss(false)\n    }\n  }, [setHasDismiss])\n\n  const actionIconSize = overrideStyledVariantValue(\n    size,\n    (s) => toActionIconSize[s]\n  )\n\n  return (\n    <Banner.Dismiss asChild>\n      <StyledDismiss\n        label={label}\n        size={actionIconSize}\n        hasTooltip={false}\n        isRounded\n        theme=\"neutral\"\n        appearance=\"solid\"\n        {...rest}\n      >\n        <Icon is={Close} />\n      </StyledDismiss>\n    </Banner.Dismiss>\n  )\n}\n\nBannerRegularDismiss.displayName = 'BannerRegularDismiss'\n"],"mappings":";;;;;;;;;;AAUA,IAAM,mBAAmB;CACvB,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,gBAAgB,OAAO,YAAY,EACvC,MAAM;CAAC;CAAO;CAAY;CAAS;AAAS,EAC9C,CAAC;AAOD,IAAa,wBAAwB,EACnC,QAAQ,WACR,GAAG,WAC4B;CAC/B,MAAM,EAAE,MAAM,kBAAkB,iBAAiB;CAEjD,QAAM,gBAAgB;EACpB,cAAc,IAAI;EAClB,aAAa;GACX,cAAc,KAAK;EACrB;CACF,GAAG,CAAC,aAAa,CAAC;CAElB,MAAM,iBAAiB,2BACrB,OACC,MAAM,iBAAiB,EAC1B;CAEA,OACE,oBAAC,OAAO,SAAR;EAAgB,SAAA;YACd,oBAAC,eAAD;GACS;GACP,MAAM;GACN,YAAY;GACZ,WAAA;GACA,OAAM;GACN,YAAW;GACX,GAAI;aAEJ,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACL,CAAA;CACD,CAAA;AAEpB;AAEA,qBAAqB,cAAc"}

package/dist/components/banner/banner-slim/BannerSlimButton.js

@@ -2,14 +2,14 @@ import { cn } from "../../../styled.js";
 import { Button } from "../../button/Button.js";
 import { overrideStyledVariantValue } from "../../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";
 import { useBannerContext } from "../Banner.context.js";
-import * as React$1 from "react";
+import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/banner-slim/BannerSlimButton.tsx
 var BannerSlimButton = (({ className, ...rest }) => {
 	const { emphasis, size } = useBannerContext();
 	return /* @__PURE__ */ jsx(Button, {
 		size: "md",
-		fullWidth: React$1.useMemo(() => overrideStyledVariantValue(size, (s) => s === "sm"), [size]),
+		fullWidth: overrideStyledVariantValue(size, (s) => s === "sm"),
 		theme: emphasis === "bold" ? "neutral" : "primary",
 		...rest,
 		className: cn("ml-auto", className)

package/dist/components/banner/banner-slim/BannerSlimButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerSlimButton.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimButton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { type PolymorphicComponent, cn } from '../../../styled'\nimport { overrideStyledVariantValue } from '../../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Button } from '../../button/Button'\nimport { useBannerContext } from '../Banner.context'\n\n// Re-expose Button's own props so BannerSlim.Button stays polymorphic (keeps\n// `as`, e.g. `<BannerSlim.Button as=\"a\" href>`). Typing with\n// React.ComponentProps<typeof Button> alone would collapse to the default\n// element and drop `as` (as?: never).\ntype ButtonOwnProps =\n  typeof Button extends PolymorphicComponent<infer _Element, infer OwnProps>\n    ? OwnProps\n    : never\n\nexport const BannerSlimButton = (({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Button>) => {\n  const { emphasis, size } = useBannerContext()\n\n  const fullWidth = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => s === 'sm'),\n    [size]\n  )\n\n  return (\n    <Button\n      size=\"md\"\n      fullWidth={fullWidth}\n      theme={emphasis === 'bold' ? 'neutral' : 'primary'}\n      {...rest}\n      className={cn('ml-auto', className)}\n    />\n  )\n}) as PolymorphicComponent<'button', ButtonOwnProps>\n\nBannerSlimButton.displayName = 'BannerSlimButton'\n"],"mappings":";;;;;;;AAgBA,IAAa,qBAAqB,EAChC,WACA,GAAG,WACsC;CACzC,MAAM,EAAE,UAAU,SAAS,iBAAiB;CAO5C,OACE,oBAAC,QAAD;EACE,MAAK;EACM,WARG,QAAM,cAChB,2BAA2B,OAAO,MAAM,MAAM,IAAI,GACxD,CAAC,IAAI,CAMQ;EACX,OAAO,aAAa,SAAS,YAAY;EACzC,GAAI;EACJ,WAAW,GAAG,WAAW,SAAS;CACnC,CAAA;AAEL;AAEA,iBAAiB,cAAc"}
+{"version":3,"file":"BannerSlimButton.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimButton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { type PolymorphicComponent, cn } from '../../../styled'\nimport { overrideStyledVariantValue } from '../../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Button } from '../../button/Button'\nimport { useBannerContext } from '../Banner.context'\n\n// Re-expose Button's own props so BannerSlim.Button stays polymorphic (keeps\n// `as`, e.g. `<BannerSlim.Button as=\"a\" href>`). Typing with\n// React.ComponentProps<typeof Button> alone would collapse to the default\n// element and drop `as` (as?: never).\ntype ButtonOwnProps =\n  typeof Button extends PolymorphicComponent<infer _Element, infer OwnProps>\n    ? OwnProps\n    : never\n\nexport const BannerSlimButton = (({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Button>) => {\n  const { emphasis, size } = useBannerContext()\n\n  const fullWidth = overrideStyledVariantValue(size, (s) => s === 'sm')\n\n  return (\n    <Button\n      size=\"md\"\n      fullWidth={fullWidth}\n      theme={emphasis === 'bold' ? 'neutral' : 'primary'}\n      {...rest}\n      className={cn('ml-auto', className)}\n    />\n  )\n}) as PolymorphicComponent<'button', ButtonOwnProps>\n\nBannerSlimButton.displayName = 'BannerSlimButton'\n"],"mappings":";;;;;;;AAgBA,IAAa,qBAAqB,EAChC,WACA,GAAG,WACsC;CACzC,MAAM,EAAE,UAAU,SAAS,iBAAiB;CAI5C,OACE,oBAAC,QAAD;EACE,MAAK;EACM,WALG,2BAA2B,OAAO,MAAM,MAAM,IAKjD;EACX,OAAO,aAAa,SAAS,YAAY;EACzC,GAAI;EACJ,WAAW,GAAG,WAAW,SAAS;CACnC,CAAA;AAEL;AAEA,iBAAiB,cAAc"}

package/dist/components/banner/banner-slim/BannerSlimContainer.js

@@ -1,7 +1,7 @@
 import { cn, styled } from "../../../styled.js";
 import { useBannerContext } from "../Banner.context.js";
 import { BannerContainer } from "../BannerContainer.js";
-import * as React$1 from "react";
+import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/banner-slim/BannerSlimContainer.tsx
 var toDirection = {
@@ -25,18 +25,9 @@ var StyledBannerSlimContainer = styled(BannerContainer, {
 }, { enableResponsiveVariants: true });
 var BannerSlimContainer = ({ className, ...rest }) => {
 	const { size } = useBannerContext();
-	const direction = React$1.useMemo(() => {
-		if (typeof size === "string") return toDirection[size];
-		return "flex-col md:flex-row";
-	}, [size]);
-	const align = React$1.useMemo(() => {
-		if (typeof size === "string") return toAlign[size];
-		return "items-start md:items-center";
-	}, [size]);
-	const wrap = React$1.useMemo(() => {
-		if (typeof size === "string") return toWrap[size];
-		return "flex-wrap md:flex-nowrap";
-	}, [size]);
+	const direction = typeof size === "string" ? toDirection[size] : "flex-col md:flex-row";
+	const align = typeof size === "string" ? toAlign[size] : "items-start md:items-center";
+	const wrap = typeof size === "string" ? toWrap[size] : "flex-wrap md:flex-nowrap";
 	return /* @__PURE__ */ jsx(StyledBannerSlimContainer, {
 		...rest,
 		sizeWorkaround: size,

package/dist/components/banner/banner-slim/BannerSlimContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerSlimContainer.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../../styled'\nimport { useBannerContext } from '../Banner.context'\nimport { BannerContainer } from '../BannerContainer'\n\nconst toDirection = {\n  sm: 'flex-col',\n  md: 'flex-row'\n}\n\nconst toAlign = {\n  sm: 'items-start',\n  md: 'items-center'\n}\n\nconst toWrap = {\n  sm: 'flex-wrap',\n  md: 'flex-nowrap'\n}\n\nconst StyledBannerSlimContainer = styled(\n  BannerContainer,\n  {\n    base: ['p-4'],\n    variants: {\n      sizeWorkaround: {\n        sm: [],\n        md: ['px-6']\n      }\n    }\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\ntype BannerSlimContainerProps = React.ComponentProps<\n  typeof StyledBannerSlimContainer\n>\n\nexport const BannerSlimContainer = ({\n  className,\n  ...rest\n}: BannerSlimContainerProps) => {\n  const { size } = useBannerContext()\n\n  const direction = React.useMemo(() => {\n    if (typeof size === 'string') {\n      return toDirection[size]\n    }\n    return 'flex-col md:flex-row'\n  }, [size])\n\n  const align = React.useMemo(() => {\n    if (typeof size === 'string') {\n      return toAlign[size]\n    }\n    return 'items-start md:items-center'\n  }, [size])\n\n  const wrap = React.useMemo(() => {\n    if (typeof size === 'string') {\n      return toWrap[size]\n    }\n    return 'flex-wrap md:flex-nowrap'\n  }, [size])\n\n  return (\n    <StyledBannerSlimContainer\n      {...rest}\n      sizeWorkaround={size}\n      className={cn(direction, align, 'gap-4', wrap, className)}\n    />\n  )\n}\n\nBannerSlimContainer.displayName = 'BannerSlimContainer'\n"],"mappings":";;;;;;AAMA,IAAM,cAAc;CAClB,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,UAAU;CACd,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,SAAS;CACb,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,4BAA4B,OAChC,iBACA;CACE,MAAM,CAAC,KAAK;CACZ,UAAU,EACR,gBAAgB;EACd,IAAI,CAAC;EACL,IAAI,CAAC,MAAM;CACb,EACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAMA,IAAa,uBAAuB,EAClC,WACA,GAAG,WAC2B;CAC9B,MAAM,EAAE,SAAS,iBAAiB;CAElC,MAAM,YAAY,QAAM,cAAc;EACpC,IAAI,OAAO,SAAS,UAClB,OAAO,YAAY;EAErB,OAAO;CACT,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,QAAQ,QAAM,cAAc;EAChC,IAAI,OAAO,SAAS,UAClB,OAAO,QAAQ;EAEjB,OAAO;CACT,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,OAAO,QAAM,cAAc;EAC/B,IAAI,OAAO,SAAS,UAClB,OAAO,OAAO;EAEhB,OAAO;CACT,GAAG,CAAC,IAAI,CAAC;CAET,OACE,oBAAC,2BAAD;EACE,GAAI;EACJ,gBAAgB;EAChB,WAAW,GAAG,WAAW,OAAO,SAAS,MAAM,SAAS;CACzD,CAAA;AAEL;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"BannerSlimContainer.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../../styled'\nimport { useBannerContext } from '../Banner.context'\nimport { BannerContainer } from '../BannerContainer'\n\nconst toDirection = {\n  sm: 'flex-col',\n  md: 'flex-row'\n}\n\nconst toAlign = {\n  sm: 'items-start',\n  md: 'items-center'\n}\n\nconst toWrap = {\n  sm: 'flex-wrap',\n  md: 'flex-nowrap'\n}\n\nconst StyledBannerSlimContainer = styled(\n  BannerContainer,\n  {\n    base: ['p-4'],\n    variants: {\n      sizeWorkaround: {\n        sm: [],\n        md: ['px-6']\n      }\n    }\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\ntype BannerSlimContainerProps = React.ComponentProps<\n  typeof StyledBannerSlimContainer\n>\n\nexport const BannerSlimContainer = ({\n  className,\n  ...rest\n}: BannerSlimContainerProps) => {\n  const { size } = useBannerContext()\n\n  const direction =\n    typeof size === 'string' ? toDirection[size] : 'flex-col md:flex-row'\n\n  const align =\n    typeof size === 'string' ? toAlign[size] : 'items-start md:items-center'\n\n  const wrap =\n    typeof size === 'string' ? toWrap[size] : 'flex-wrap md:flex-nowrap'\n\n  return (\n    <StyledBannerSlimContainer\n      {...rest}\n      sizeWorkaround={size}\n      className={cn(direction, align, 'gap-4', wrap, className)}\n    />\n  )\n}\n\nBannerSlimContainer.displayName = 'BannerSlimContainer'\n"],"mappings":";;;;;;AAMA,IAAM,cAAc;CAClB,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,UAAU;CACd,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,SAAS;CACb,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,4BAA4B,OAChC,iBACA;CACE,MAAM,CAAC,KAAK;CACZ,UAAU,EACR,gBAAgB;EACd,IAAI,CAAC;EACL,IAAI,CAAC,MAAM;CACb,EACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAMA,IAAa,uBAAuB,EAClC,WACA,GAAG,WAC2B;CAC9B,MAAM,EAAE,SAAS,iBAAiB;CAElC,MAAM,YACJ,OAAO,SAAS,WAAW,YAAY,QAAQ;CAEjD,MAAM,QACJ,OAAO,SAAS,WAAW,QAAQ,QAAQ;CAE7C,MAAM,OACJ,OAAO,SAAS,WAAW,OAAO,QAAQ;CAE5C,OACE,oBAAC,2BAAD;EACE,GAAI;EACJ,gBAAgB;EAChB,WAAW,GAAG,WAAW,OAAO,SAAS,MAAM,SAAS;CACzD,CAAA;AAEL;AAEA,oBAAoB,cAAc"}

package/dist/components/button/Button.js

@@ -117,7 +117,11 @@ var StyledButton = styled("button", {
 				"[&_svg]:size-[22px]"
 			]
 		},
-		isLoading: { true: ["cursor-not-allowed opacity-60 pointer-events-none"] },
+		isLoading: { true: [
+			"cursor-not-allowed",
+			"opacity-60",
+			"pointer-events-none"
+		] },
 		fullWidth: {
 			true: ["w-full"],
 			false: ["w-max"]