@atom-learning/components 11.6.0 → 12.0.0-beta.1

package/dist/components/badge/Badge.js

@@ -1,8 +1,8 @@
+import { cn } from "../../utilities/tw-merge/index.js";
 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";
@@ -15,18 +15,18 @@ var StyledBadge = styled("div", {
 		"flex",
 		"justify-center",
 		"items-center",
-		"rounded-sm",
+		"rounded-md",
 		"min-w-0",
 		"border",
-		"border-white",
+		"border-(--background-color-surface)",
 		"font-body",
 		"*:not-last:mr-1"
 	],
 	variants: {
 		emphasis: {
-			white: ["text-(--text-on-white)", "bg-white"],
-			subtle: ["text-(--text-subtle)", "bg-(--background-subtle)"],
-			bold: ["text-(--text-bold)", "bg-(--background-bold)"]
+			minimal: ["text-accent", "bg-surface"],
+			subtle: ["text-on-accent-subtle", "bg-accent-subtle"],
+			bold: ["text-on-accent", "bg-accent-solid"]
 		},
 		size: {
 			xs: ["px-1", "py-0"],
@@ -34,59 +34,94 @@ var StyledBadge = styled("div", {
 			md: ["px-2", "py-1"]
 		},
 		isClickable: { true: ["cursor-pointer"] },
-		highlighted: { true: [] }
+		highlighted: { true: [] },
+		decorative: { true: [] }
 	},
 	compoundVariants: [
 		{
+			emphasis: "minimal",
 			isClickable: true,
-			emphasis: "white",
-			class: ["hover:text-(--text-on-white)", "hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]"]
+			class: ["hover:bg-accent-subtle"]
+		},
+		{
+			emphasis: "minimal",
+			highlighted: true,
+			class: ["bg-accent-subtle"]
 		},
 		{
-			isClickable: true,
 			emphasis: "subtle",
-			class: ["hover:bg-(--background-subtle-hover)", "hover:text-(--text-subtle-hover)"]
+			highlighted: true,
+			class: ["bg-accent-subtle-hover"]
 		},
 		{
-			isClickable: true,
-			emphasis: "bold",
-			class: ["hover:bg-(--background-bold-hover)", "hover:text-(--text-bold)"]
+			emphasis: "subtle",
+			decorative: true,
+			class: ["bg-accent-muted"]
 		},
 		{
-			emphasis: "white",
-			highlighted: true,
-			class: ["text-(--text-on-white)", "bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]"]
+			emphasis: "subtle",
+			decorative: true,
+			isClickable: true,
+			class: ["hover:bg-accent-muted-hover"]
 		},
 		{
 			emphasis: "subtle",
+			decorative: true,
 			highlighted: true,
-			class: ["text-(--text-subtle-hover)", "(--bg-background-subtle-hover)"]
+			class: ["bg-accent-muted-hover"]
+		},
+		{
+			emphasis: "bold",
+			isClickable: true,
+			class: ["hover:bg-accent-solid-hover"]
 		},
 		{
 			emphasis: "bold",
 			highlighted: true,
-			class: ["text-(--text-bold)", "bg-(--background-bold-hover)"]
+			class: ["bg-accent-solid-hover"]
 		}
 	]
 }, { enableResponsiveVariants: true });
-var BadgeInner = ({ ref, theme = "info", emphasis = "subtle", children, style, ...rest }) => {
+var roleOverrides = {
+	orange: [
+		"[--background-color-accent-solid:var(--color-accent-7)]",
+		"[--background-color-accent-solid-hover:var(--color-accent-8)]",
+		"[--text-color-on-accent:var(--color-base-12)]",
+		"[--text-color-accent:var(--color-accent-11)]"
+	],
+	lime: [
+		"[--background-color-accent-solid:var(--color-accent-7)]",
+		"[--background-color-accent-solid-hover:var(--color-accent-8)]",
+		"[--text-color-on-accent:var(--color-base-12)]",
+		"[--text-color-accent:var(--color-accent-10)]"
+	],
+	yellow: [
+		"[--background-color-accent-solid:var(--color-accent-6)]",
+		"[--background-color-accent-solid-hover:var(--color-accent-7)]",
+		"[--text-color-on-accent:var(--color-base-12)]",
+		"[--text-color-accent:var(--color-accent-10)]"
+	],
+	warning: ["[--text-color-accent:var(--text-color-warning)]", "[--text-color-on-accent-subtle:var(--text-color-warning)]"]
+};
+var BadgeInner = ({ ref, tone = "neutral", accent, emphasis = "subtle", children, className, ...rest }) => {
 	const { size, overflow, isOverflowing } = React$1.use(BadgeContext);
 	const [badgeElRef, setBadgeElRef] = useCallbackRefState();
 	const composedBadgeRef = useComposedRefs(ref, setBadgeElRef);
 	const label = badgeElRef?.textContent;
-	const isInfoOnly = badgeSemanticNames.includes(theme);
+	const inherits = accent === "inherit";
+	const scheme = inherits ? void 0 : accent ?? (tone === "neutral" ? "grey" : tone);
+	const isInfoOnly = !accent || inherits;
 	const isClickable = Object.keys(rest).includes("onClick") || Object.keys(rest).includes("href");
 	return /* @__PURE__ */ jsx(OptionalTooltipWrapper, {
 		hasTooltip: overflow === "ellipsis" && isOverflowing,
 		label,
 		children: /* @__PURE__ */ jsx(StyledBadge, {
 			role: "status",
+			"data-color-accent": scheme,
 			emphasis,
 			size,
-			style: {
-				...colorSchemes[theme],
-				...style
-			},
+			decorative: !!accent && !inherits,
+			className: cn(scheme && roleOverrides[scheme], className),
 			...rest,
 			ref: composedBadgeRef,
 			isClickable: isClickable && !isInfoOnly,

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

@@ -1 +1 @@
-{"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"}
+{"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 type { TColorAccent } from '../../experiments/theme/Theme'\nimport { cn, styled } from '../../styled'\nimport { useCallbackRefState } from '../../utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { Icon } from '../icon/Icon'\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-md',\n      'min-w-0',\n      'border',\n      'border-(--background-color-surface)',\n      'font-body',\n      '*:not-last:mr-1'\n    ],\n    variants: {\n      emphasis: {\n        minimal: ['text-accent', 'bg-surface'],\n        subtle: ['text-on-accent-subtle', 'bg-accent-subtle'],\n        bold: ['text-on-accent', 'bg-accent-solid']\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      // Hue badges, set from `accent`\n      decorative: {\n        true: []\n      }\n    },\n    compoundVariants: [\n      {\n        emphasis: 'minimal',\n        isClickable: true,\n        class: ['hover:bg-accent-subtle']\n      },\n      {\n        emphasis: 'minimal',\n        highlighted: true,\n        class: ['bg-accent-subtle']\n      },\n      {\n        emphasis: 'subtle',\n        highlighted: true,\n        class: ['bg-accent-subtle-hover']\n      },\n      // Hue fills sit a step deeper than status fills so pale hues still read\n      // as a shape on a surface. Only hue badges are clickable.\n      {\n        emphasis: 'subtle',\n        decorative: true,\n        class: ['bg-accent-muted']\n      },\n      {\n        emphasis: 'subtle',\n        decorative: true,\n        isClickable: true,\n        class: ['hover:bg-accent-muted-hover']\n      },\n      {\n        emphasis: 'subtle',\n        decorative: true,\n        highlighted: true,\n        class: ['bg-accent-muted-hover']\n      },\n      {\n        emphasis: 'bold',\n        isClickable: true,\n        class: ['hover:bg-accent-solid-hover']\n      },\n      {\n        emphasis: 'bold',\n        highlighted: true,\n        class: ['bg-accent-solid-hover']\n      }\n    ]\n  },\n  { enableResponsiveVariants: true }\n)\n\n// Intent, not hue: each tone resolves to a fixed status scale\ntype BadgeStatusTone = Extract<\n  TColorAccent,\n  'success' | 'warning' | 'danger' | 'info'\n>\ntype BadgeTone = 'neutral' | BadgeStatusTone\n\n// Decorative hues, for identification rather than meaning\ntype BadgeAccent = Exclude<TColorAccent, BadgeStatusTone>\n\n// Scales whose roles don't suit a badge, re-pointed on the badge itself.\n// Orange, lime and yellow: bold fills a step or two lighter with base text,\n// and minimal text a step or two deeper, because their accent text is too\n// pale for small type on a surface. Bold fills stay dark in dark mode, where\n// base text is light. Warning: its accent and on-subtle text are too pale for\n// small type, so both use the warning text colour.\nconst roleOverrides: Partial<Record<BadgeAccent | BadgeStatusTone, string[]>> =\n  {\n    orange: [\n      '[--background-color-accent-solid:var(--color-accent-7)]',\n      '[--background-color-accent-solid-hover:var(--color-accent-8)]',\n      '[--text-color-on-accent:var(--color-base-12)]',\n      '[--text-color-accent:var(--color-accent-11)]'\n    ],\n    lime: [\n      '[--background-color-accent-solid:var(--color-accent-7)]',\n      '[--background-color-accent-solid-hover:var(--color-accent-8)]',\n      '[--text-color-on-accent:var(--color-base-12)]',\n      '[--text-color-accent:var(--color-accent-10)]'\n    ],\n    yellow: [\n      '[--background-color-accent-solid:var(--color-accent-6)]',\n      '[--background-color-accent-solid-hover:var(--color-accent-7)]',\n      '[--text-color-on-accent:var(--color-base-12)]',\n      '[--text-color-accent:var(--color-accent-10)]'\n    ],\n    warning: [\n      '[--text-color-accent:var(--text-color-warning)]',\n      '[--text-color-on-accent-subtle:var(--text-color-warning)]'\n    ]\n  }\n\n// Unset tone and accent is neutral (grey). `accent=\"inherit\"` follows the\n// surrounding accent instead: the brand, or the palette's or <Theme>'s accent.\nexport type BadgeColorProps =\n  | { tone?: BadgeTone; accent?: never }\n  | { accent?: BadgeAccent | 'inherit'; tone?: never }\n\nexport type BadgeProps = Omit<\n  React.ComponentProps<typeof StyledBadge>,\n  'decorative'\n> &\n  BadgeColorProps & {\n    overflow?: BadgeOverflow\n  }\n\ntype BadgeInnerProps = Omit<BadgeProps, 'size' | 'overflow'>\n\nconst BadgeInner = ({\n  ref,\n  tone = 'neutral',\n  accent,\n  emphasis = 'subtle',\n  children,\n  className,\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 inherits = accent === 'inherit'\n  const scheme = inherits\n    ? undefined\n    : (accent ?? (tone === 'neutral' ? 'grey' : tone))\n\n  // Status and neutral badges only report state, so they never look clickable\n  const isInfoOnly = !accent || inherits\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        data-color-accent={scheme}\n        emphasis={emphasis}\n        size={size}\n        decorative={!!accent && !inherits}\n        className={cn(scheme && roleOverrides[scheme], className)}\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":";;;;;;;;;;;;AAaA,IAAM,cAAc,OAClB,OACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,UAAU;GACR,SAAS,CAAC,eAAe,YAAY;GACrC,QAAQ,CAAC,yBAAyB,kBAAkB;GACpD,MAAM,CAAC,kBAAkB,iBAAiB;EAC5C;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;EAEA,YAAY,EACV,MAAM,CAAC,EACT;CACF;CACA,kBAAkB;EAChB;GACE,UAAU;GACV,aAAa;GACb,OAAO,CAAC,wBAAwB;EAClC;EACA;GACE,UAAU;GACV,aAAa;GACb,OAAO,CAAC,kBAAkB;EAC5B;EACA;GACE,UAAU;GACV,aAAa;GACb,OAAO,CAAC,wBAAwB;EAClC;EAGA;GACE,UAAU;GACV,YAAY;GACZ,OAAO,CAAC,iBAAiB;EAC3B;EACA;GACE,UAAU;GACV,YAAY;GACZ,aAAa;GACb,OAAO,CAAC,6BAA6B;EACvC;EACA;GACE,UAAU;GACV,YAAY;GACZ,aAAa;GACb,OAAO,CAAC,uBAAuB;EACjC;EACA;GACE,UAAU;GACV,aAAa;GACb,OAAO,CAAC,6BAA6B;EACvC;EACA;GACE,UAAU;GACV,aAAa;GACb,OAAO,CAAC,uBAAuB;EACjC;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAkBA,IAAM,gBACJ;CACE,QAAQ;EACN;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ;EACA;EACA;EACA;CACF;CACA,QAAQ;EACN;EACA;EACA;EACA;CACF;CACA,SAAS,CACP,mDACA,2DACF;AACF;AAkBF,IAAM,cAAc,EAClB,KACA,OAAO,WACP,QACA,WAAW,UACX,UACA,WACA,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,WAAW,WAAW;CAC5B,MAAM,SAAS,WACX,KAAA,IACC,WAAW,SAAS,YAAY,SAAS;CAG9C,MAAM,aAAa,CAAC,UAAU;CAE9B,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;GACL,qBAAmB;GACT;GACJ;GACN,YAAY,CAAC,CAAC,UAAU,CAAC;GACzB,WAAW,GAAG,UAAU,cAAc,SAAS,SAAS;GACxD,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/banner/BannerContainer.d.ts

@@ -1,12 +1,14 @@
 import * as React from 'react';
-import { type TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
+import type { TColorAccent } from '../../experiments/theme/Theme';
 import { Dismissible } from '../dismissible';
 declare const StyledBannerContainer: import("../..").PolymorphicComponent<"section", {
     emphasis?: ("bold" | "minimal" | "subtle" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "minimal" | "subtle">>) | undefined;
     size?: ("md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "md" | "sm">>) | undefined;
 }>;
+type BannerAccent = Extract<TColorAccent, 'brand' | 'grey' | 'blue' | 'pink' | 'purple' | 'cyan' | 'green' | 'magenta' | 'red' | 'teal' | 'orange' | 'yellow' | 'lime'>;
 export type BannerContainerProps = React.ComponentProps<typeof StyledBannerContainer> & {
-    colorScheme?: TcolorScheme;
+    /** Unset inherits the accent from the nearest <Theme> or palette. */
+    accent?: BannerAccent;
 } & React.ComponentProps<typeof Dismissible>;
-export declare const BannerContainer: ({ colorScheme, onDismiss, dismissed, ...rest }: BannerContainerProps) => React.JSX.Element;
+export declare const BannerContainer: ({ accent, onDismiss, dismissed, ...rest }: BannerContainerProps) => React.JSX.Element;
 export {};

package/dist/components/banner/BannerContainer.js

@@ -1,5 +1,4 @@
 import { styled } from "../../styled.js";
-import { ColorScheme } from "../../experiments/color-scheme/ColorScheme.js";
 import { Dismissible } from "../dismissible/index.js";
 import { useBannerContext } from "./Banner.context.js";
 import "react";
@@ -12,20 +11,13 @@ var StyledBannerContainer = styled("section", {
 		"w-full",
 		"rounded-lg",
 		"overflow-hidden",
-		"text-(--foreground)",
-		"[--banner-heading-color:var(--color-foreground)]",
-		"[--banner-text-color:var(--color-grey-900)]"
+		"text-default"
 	],
 	variants: {
 		emphasis: {
-			bold: [
-				"[--banner-heading-color:var(--color-foreground-7-plus)]",
-				"[--banner-text-color:var(--color-grey-100)]",
-				"bg-(--base-11)",
-				"text-(--foreground-7-plus)"
-			],
-			subtle: ["bg-(--base-3)"],
-			minimal: ["bg-(--base-1)"]
+			bold: ["bg-accent-emphasis", "text-on-accent-emphasis"],
+			subtle: ["bg-accent-subtle"],
+			minimal: ["bg-surface"]
 		},
 		size: {
 			sm: [],
@@ -33,20 +25,17 @@ var StyledBannerContainer = styled("section", {
 		}
 	}
 }, { enableResponsiveVariants: true });
-var BannerContainer = ({ colorScheme = {}, onDismiss, dismissed, ...rest }) => {
+var BannerContainer = ({ accent, onDismiss, dismissed, ...rest }) => {
 	const { emphasis } = useBannerContext();
-	return /* @__PURE__ */ jsx(ColorScheme, {
-		...colorScheme,
+	return /* @__PURE__ */ jsx(Dismissible, {
 		asChild: true,
-		children: /* @__PURE__ */ jsx(Dismissible, {
-			asChild: true,
-			onDismiss,
-			dismissed,
-			children: /* @__PURE__ */ jsx(StyledBannerContainer, {
-				role: "banner",
-				emphasis,
-				...rest
-			})
+		onDismiss,
+		dismissed,
+		children: /* @__PURE__ */ jsx(StyledBannerContainer, {
+			role: "banner",
+			"data-color-accent": accent,
+			emphasis,
+			...rest
 		})
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"BannerContainer.js","names":[],"sources":["../../../src/components/banner/BannerContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  ColorScheme,\n  type TcolorScheme\n} from '../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../styled'\nimport { Dismissible } from '../dismissible'\nimport { useBannerContext } from './Banner.context'\n\nconst StyledBannerContainer = styled(\n  'section',\n  {\n    base: [\n      'flex',\n      'relative',\n      'w-full',\n      'rounded-lg',\n      'overflow-hidden',\n      'text-(--foreground)',\n      '[--banner-heading-color:var(--color-foreground)]',\n      '[--banner-text-color:var(--color-grey-900)]'\n    ],\n    variants: {\n      emphasis: {\n        bold: [\n          '[--banner-heading-color:var(--color-foreground-7-plus)]',\n          '[--banner-text-color:var(--color-grey-100)]',\n          'bg-(--base-11)',\n          'text-(--foreground-7-plus)'\n        ],\n        subtle: ['bg-(--base-3)'],\n        minimal: ['bg-(--base-1)']\n      },\n      size: {\n        sm: [],\n        md: []\n      }\n    }\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\nexport type BannerContainerProps = React.ComponentProps<\n  typeof StyledBannerContainer\n> & {\n  colorScheme?: TcolorScheme\n} & React.ComponentProps<typeof Dismissible>\n\nexport const BannerContainer = ({\n  colorScheme = {},\n  onDismiss,\n  dismissed,\n  ...rest\n}: BannerContainerProps) => {\n  const { emphasis } = useBannerContext()\n\n  return (\n    <ColorScheme {...colorScheme} asChild>\n      <Dismissible asChild onDismiss={onDismiss} dismissed={dismissed}>\n        {/* Explicit role keeps the banner landmark regardless of where the\n            banner is nested, which a native <header> would only expose at the\n            top level. */}\n        {/* eslint-disable-next-line jsx-a11y/prefer-tag-over-role */}\n        <StyledBannerContainer role=\"banner\" emphasis={emphasis} {...rest} />\n      </Dismissible>\n    </ColorScheme>\n  )\n}\n"],"mappings":";;;;;;;AAUA,IAAM,wBAAwB,OAC5B,WACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,UAAU;GACR,MAAM;IACJ;IACA;IACA;IACA;GACF;GACA,QAAQ,CAAC,eAAe;GACxB,SAAS,CAAC,eAAe;EAC3B;EACA,MAAM;GACJ,IAAI,CAAC;GACL,IAAI,CAAC;EACP;CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAQA,IAAa,mBAAmB,EAC9B,cAAc,CAAC,GACf,WACA,WACA,GAAG,WACuB;CAC1B,MAAM,EAAE,aAAa,iBAAiB;CAEtC,OACE,oBAAC,aAAD;EAAa,GAAI;EAAa,SAAA;YAC5B,oBAAC,aAAD;GAAa,SAAA;GAAmB;GAAsB;aAKpD,oBAAC,uBAAD;IAAuB,MAAK;IAAmB;IAAU,GAAI;GAAO,CAAA;EACzD,CAAA;CACF,CAAA;AAEjB"}
+{"version":3,"file":"BannerContainer.js","names":[],"sources":["../../../src/components/banner/BannerContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { TColorAccent } from '../../experiments/theme/Theme'\nimport { styled } from '../../styled'\nimport { Dismissible } from '../dismissible'\nimport { useBannerContext } from './Banner.context'\n\nconst StyledBannerContainer = styled(\n  'section',\n  {\n    base: [\n      'flex',\n      'relative',\n      'w-full',\n      'rounded-lg',\n      'overflow-hidden',\n      'text-default'\n    ],\n    variants: {\n      emphasis: {\n        bold: ['bg-accent-emphasis', 'text-on-accent-emphasis'],\n        subtle: ['bg-accent-subtle'],\n        minimal: ['bg-surface']\n      },\n      size: {\n        sm: [],\n        md: []\n      }\n    }\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\n// Decorative hues only: a banner's colour identifies, it doesn't signal intent\n// The hues Banner offered through ColorScheme\ntype BannerAccent = Extract<\n  TColorAccent,\n  | 'brand'\n  | 'grey'\n  | 'blue'\n  | 'pink'\n  | 'purple'\n  | 'cyan'\n  | 'green'\n  | 'magenta'\n  | 'red'\n  | 'teal'\n  | 'orange'\n  | 'yellow'\n  | 'lime'\n>\n\nexport type BannerContainerProps = React.ComponentProps<\n  typeof StyledBannerContainer\n> & {\n  /** Unset inherits the accent from the nearest <Theme> or palette. */\n  accent?: BannerAccent\n} & React.ComponentProps<typeof Dismissible>\n\nexport const BannerContainer = ({\n  accent,\n  onDismiss,\n  dismissed,\n  ...rest\n}: BannerContainerProps) => {\n  const { emphasis } = useBannerContext()\n\n  return (\n    <Dismissible asChild onDismiss={onDismiss} dismissed={dismissed}>\n      {/* Explicit role keeps the banner landmark regardless of where the\n          banner is nested, which a native <header> would only expose at the\n          top level. */}\n      {/* eslint-disable-next-line jsx-a11y/prefer-tag-over-role */}\n      <StyledBannerContainer\n        role=\"banner\"\n        data-color-accent={accent}\n        emphasis={emphasis}\n        {...rest}\n      />\n    </Dismissible>\n  )\n}\n"],"mappings":";;;;;;AAOA,IAAM,wBAAwB,OAC5B,WACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,UAAU;GACR,MAAM,CAAC,sBAAsB,yBAAyB;GACtD,QAAQ,CAAC,kBAAkB;GAC3B,SAAS,CAAC,YAAY;EACxB;EACA,MAAM;GACJ,IAAI,CAAC;GACL,IAAI,CAAC;EACP;CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AA4BA,IAAa,mBAAmB,EAC9B,QACA,WACA,WACA,GAAG,WACuB;CAC1B,MAAM,EAAE,aAAa,iBAAiB;CAEtC,OACE,oBAAC,aAAD;EAAa,SAAA;EAAmB;EAAsB;YAKpD,oBAAC,uBAAD;GACE,MAAK;GACL,qBAAmB;GACT;GACV,GAAI;EACL,CAAA;CACU,CAAA;AAEjB"}

package/dist/components/banner/banner-regular/BannerRegular.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BannerRegularContainer } from './BannerRegularContainer';
 export declare const BannerRegular: {
-    ({ colorScheme, size, emphasis, onDismiss, ...rest }: React.ComponentProps<typeof BannerRegularContainer>): React.JSX.Element;
+    ({ size, emphasis, onDismiss, ...rest }: React.ComponentProps<typeof BannerRegularContainer>): React.JSX.Element;
     displayName: string;
 } & {
     Content: {
@@ -331,10 +331,11 @@ export declare const BannerRegular: {
             } & {
                 as?: never;
             } & Omit<import("@radix-ui/react-tooltip").TooltipContentProps & React.RefAttributes<HTMLDivElement>, "as" | "size"> & import("@radix-ui/react-tooltip").TooltipContentProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element>['side'];
-            theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
             appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
             size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
             isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+            tone?: "danger" | "neutral" | "success" | "warning";
+            inverse?: boolean;
             label: string;
             reloadDocument?: boolean;
         }): React.JSX.Element;

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

@@ -10,11 +10,10 @@ import { BannerRegularText } from "./BannerRegularText.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/banner-regular/BannerRegular.tsx
-var BannerRegularComponent = ({ colorScheme, size, emphasis, onDismiss, ...rest }) => /* @__PURE__ */ jsx(Banner, {
+var BannerRegularComponent = ({ size, emphasis, onDismiss, ...rest }) => /* @__PURE__ */ jsx(Banner, {
 	size,
 	emphasis,
 	children: /* @__PURE__ */ jsx(BannerRegularContainer, {
-		colorScheme,
 		onDismiss,
 		...rest
 	})

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 = /* @__PURE__ */ Object.assign(\n  BannerRegularComponent,\n  {\n    Content: BannerRegularContent,\n    Heading: BannerRegularHeading,\n    Text: BannerRegularText,\n    Actions: BannerRegularActions,\n    Image: BannerRegularImage,\n    Button: BannerRegularButton,\n    Dismiss: BannerRegularDismiss\n  }\n)\n\nBannerRegularComponent.displayName = 'BannerRegular'\n"],"mappings":";;;;;;;;;;;;AAYA,IAAM,0BAA0B,EAC9B,aACA,MACA,UACA,WACA,GAAG,WAEH,oBAAC,QAAD;CAAc;CAAgB;WAC5B,oBAAC,wBAAD;EACe;EACF;EACX,GAAI;CACL,CAAA;AACK,CAAA;AAGV,IAAa,gBAAgC,uBAAO,OAClD,wBACA;CACE,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,OAAO;CACP,QAAQ;CACR,SAAS;AACX,CACF;AAEA,uBAAuB,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  size,\n  emphasis,\n  onDismiss,\n  ...rest\n}: React.ComponentProps<typeof BannerRegularContainer>) => (\n  <Banner size={size} emphasis={emphasis}>\n    <BannerRegularContainer onDismiss={onDismiss} {...rest} />\n  </Banner>\n)\n\nexport const BannerRegular = /* @__PURE__ */ Object.assign(\n  BannerRegularComponent,\n  {\n    Content: BannerRegularContent,\n    Heading: BannerRegularHeading,\n    Text: BannerRegularText,\n    Actions: BannerRegularActions,\n    Image: BannerRegularImage,\n    Button: BannerRegularButton,\n    Dismiss: BannerRegularDismiss\n  }\n)\n\nBannerRegularComponent.displayName = 'BannerRegular'\n"],"mappings":";;;;;;;;;;;;AAYA,IAAM,0BAA0B,EAC9B,MACA,UACA,WACA,GAAG,WAEH,oBAAC,QAAD;CAAc;CAAgB;WAC5B,oBAAC,wBAAD;EAAmC;EAAW,GAAI;CAAO,CAAA;AACnD,CAAA;AAGV,IAAa,gBAAgC,uBAAO,OAClD,wBACA;CACE,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,OAAO;CACP,QAAQ;CACR,SAAS;AACX,CACF;AAEA,uBAAuB,cAAc"}

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

@@ -9,7 +9,7 @@ var BannerRegularButton = (props) => {
 	return /* @__PURE__ */ jsx(Button, {
 		size,
 		fullWidth: overrideStyledVariantValue(size, (s) => s === "sm"),
-		theme: emphasis === "bold" ? "neutral" : "primary",
+		inverse: emphasis === "bold",
 		...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 = 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"}
+{"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      inverse={emphasis === 'bold'}\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,SAAS,aAAa;EACtB,GAAI;CACL,CAAA;AAEL;AAEA,oBAAoB,cAAc"}

package/dist/components/banner/banner-regular/BannerRegularDismiss.d.ts

@@ -1,12 +1,14 @@
 import * as React from 'react';
-declare const StyledDismiss: import("../../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<{
-    theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
+declare const StyledDismiss: import("../../..").PolymorphicComponent<({ ref, children, tone, inverse, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<Omit<{
+    colorRole?: ("accent" | "inverse" | "neutral" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "accent" | "inverse" | "neutral">>) | undefined;
     appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
     size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
     isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
     as?: never;
-} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "href" | "label" | "reloadDocument" | "tooltipSide"> & {
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "colorRole" | "isRounded" | "size">, "colorRole">, "as" | "children" | "hasTooltip" | "href" | "inverse" | "label" | "reloadDocument" | "tone" | "tooltipSide"> & {
+    tone?: "danger" | "neutral" | "success" | "warning";
+    inverse?: boolean;
     as?: React.ElementType;
     children: React.ReactNode;
     href?: string;

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

@@ -34,7 +34,7 @@ var BannerRegularDismiss = ({ label = "dismiss", ...rest }) => {
 			size: actionIconSize,
 			hasTooltip: false,
 			isRounded: true,
-			theme: "neutral",
+			tone: "neutral",
 			appearance: "solid",
 			...rest,
 			children: /* @__PURE__ */ jsx(Icon, { is: Close })

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 = 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"}
+{"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        tone=\"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,MAAK;GACL,YAAW;GACX,GAAI;aAEJ,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACL,CAAA;CACD,CAAA;AAEpB;AAEA,qBAAqB,cAAc"}

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

@@ -5,8 +5,13 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/banner-regular/BannerRegularHeading.tsx
 var StyledHeading = styled(Heading, {
-	base: ["mb-4", "text-(--banner-heading-color)"],
+	base: ["mb-4"],
 	variants: {
+		emphasis: {
+			bold: ["text-on-accent-emphasis"],
+			subtle: ["text-default"],
+			minimal: ["text-default"]
+		},
 		containerSize: {
 			sm: [],
 			md: []
@@ -20,9 +25,10 @@ var StyledHeading = styled(Heading, {
 	}]
 }, { enableResponsiveVariants: true });
 var BannerRegularHeading = (props) => {
-	const { size, hasDismiss } = useBannerContext();
+	const { size, emphasis, hasDismiss } = useBannerContext();
 	return /* @__PURE__ */ jsx(StyledHeading, {
 		size: "md",
+		emphasis,
 		containerSize: size,
 		hasDismiss,
 		...props

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

@@ -1 +1 @@
-{"version":3,"file":"BannerRegularHeading.js","names":[],"sources":["../../../../src/components/banner/banner-regular/BannerRegularHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../../styled'\nimport { Heading } from '../../heading/Heading'\nimport { useBannerContext } from '../Banner.context'\n\nconst StyledHeading = styled(\n  Heading,\n  {\n    base: ['mb-4', 'text-(--banner-heading-color)'],\n    variants: {\n      containerSize: {\n        sm: [],\n        md: []\n      },\n      hasDismiss: {\n        true: []\n      }\n    },\n    compoundVariants: [\n      {\n        containerSize: 'sm',\n        hasDismiss: true,\n        class: ['mr-10']\n      }\n    ]\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\nexport const BannerRegularHeading = (\n  props: React.ComponentPropsWithoutRef<typeof Heading>\n) => {\n  const { size, hasDismiss } = useBannerContext()\n\n  return (\n    <StyledHeading\n      size=\"md\"\n      containerSize={size}\n      hasDismiss={hasDismiss}\n      {...props}\n    />\n  )\n}\n\nBannerRegularHeading.displayName = 'BannerRegularHeading'\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,OACpB,SACA;CACE,MAAM,CAAC,QAAQ,+BAA+B;CAC9C,UAAU;EACR,eAAe;GACb,IAAI,CAAC;GACL,IAAI,CAAC;EACP;EACA,YAAY,EACV,MAAM,CAAC,EACT;CACF;CACA,kBAAkB,CAChB;EACE,eAAe;EACf,YAAY;EACZ,OAAO,CAAC,OAAO;CACjB,CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAEA,IAAa,wBACX,UACG;CACH,MAAM,EAAE,MAAM,eAAe,iBAAiB;CAE9C,OACE,oBAAC,eAAD;EACE,MAAK;EACL,eAAe;EACH;EACZ,GAAI;CACL,CAAA;AAEL;AAEA,qBAAqB,cAAc"}
+{"version":3,"file":"BannerRegularHeading.js","names":[],"sources":["../../../../src/components/banner/banner-regular/BannerRegularHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../../styled'\nimport { Heading } from '../../heading/Heading'\nimport { useBannerContext } from '../Banner.context'\n\nconst StyledHeading = styled(\n  Heading,\n  {\n    base: ['mb-4'],\n    variants: {\n      emphasis: {\n        bold: ['text-on-accent-emphasis'],\n        subtle: ['text-default'],\n        minimal: ['text-default']\n      },\n      containerSize: {\n        sm: [],\n        md: []\n      },\n      hasDismiss: {\n        true: []\n      }\n    },\n    compoundVariants: [\n      {\n        containerSize: 'sm',\n        hasDismiss: true,\n        class: ['mr-10']\n      }\n    ]\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\nexport const BannerRegularHeading = (\n  props: React.ComponentPropsWithoutRef<typeof Heading>\n) => {\n  const { size, emphasis, hasDismiss } = useBannerContext()\n\n  return (\n    <StyledHeading\n      size=\"md\"\n      emphasis={emphasis}\n      containerSize={size}\n      hasDismiss={hasDismiss}\n      {...props}\n    />\n  )\n}\n\nBannerRegularHeading.displayName = 'BannerRegularHeading'\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,OACpB,SACA;CACE,MAAM,CAAC,MAAM;CACb,UAAU;EACR,UAAU;GACR,MAAM,CAAC,yBAAyB;GAChC,QAAQ,CAAC,cAAc;GACvB,SAAS,CAAC,cAAc;EAC1B;EACA,eAAe;GACb,IAAI,CAAC;GACL,IAAI,CAAC;EACP;EACA,YAAY,EACV,MAAM,CAAC,EACT;CACF;CACA,kBAAkB,CAChB;EACE,eAAe;EACf,YAAY;EACZ,OAAO,CAAC,OAAO;CACjB,CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAEA,IAAa,wBACX,UACG;CACH,MAAM,EAAE,MAAM,UAAU,eAAe,iBAAiB;CAExD,OACE,oBAAC,eAAD;EACE,MAAK;EACK;EACV,eAAe;EACH;EACZ,GAAI;CACL,CAAA;AAEL;AAEA,qBAAqB,cAAc"}

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

@@ -5,8 +5,13 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/banner-regular/BannerRegularText.tsx
 var StyledText = styled(Text, {
-	base: ["text-(--banner-text-color)"],
+	base: [],
 	variants: {
+		emphasis: {
+			bold: ["text-on-accent-emphasis"],
+			subtle: ["text-subtle"],
+			minimal: ["text-subtle"]
+		},
 		containerSize: {
 			sm: ["mb-4"],
 			md: ["mb-6"]
@@ -20,9 +25,10 @@ var StyledText = styled(Text, {
 	}]
 }, { enableResponsiveVariants: true });
 var BannerRegularText = (props) => {
-	const { size, hasDismiss } = useBannerContext();
+	const { size, emphasis, hasDismiss } = useBannerContext();
 	return /* @__PURE__ */ jsx(StyledText, {
 		size,
+		emphasis,
 		containerSize: size,
 		hasDismiss,
 		...props

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

@@ -1 +1 @@
-{"version":3,"file":"BannerRegularText.js","names":[],"sources":["../../../../src/components/banner/banner-regular/BannerRegularText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../../styled'\nimport { Text } from '../../text/Text'\nimport { useBannerContext } from '../Banner.context'\n\nconst StyledText = styled(\n  Text,\n  {\n    base: ['text-(--banner-text-color)'],\n    variants: {\n      containerSize: {\n        sm: ['mb-4'],\n        md: ['mb-6']\n      },\n      hasDismiss: {\n        true: []\n      }\n    },\n    compoundVariants: [\n      {\n        containerSize: 'sm',\n        hasDismiss: true,\n        class: ['mr-10']\n      }\n    ]\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\nexport const BannerRegularText = (\n  props: React.ComponentPropsWithoutRef<typeof Text>\n) => {\n  const { size, hasDismiss } = useBannerContext()\n\n  return (\n    <StyledText\n      size={size}\n      containerSize={size}\n      hasDismiss={hasDismiss}\n      {...props}\n    />\n  )\n}\n\nBannerRegularText.displayName = 'BannerRegularText'\n"],"mappings":";;;;;;AAMA,IAAM,aAAa,OACjB,MACA;CACE,MAAM,CAAC,4BAA4B;CACnC,UAAU;EACR,eAAe;GACb,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;EACb;EACA,YAAY,EACV,MAAM,CAAC,EACT;CACF;CACA,kBAAkB,CAChB;EACE,eAAe;EACf,YAAY;EACZ,OAAO,CAAC,OAAO;CACjB,CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAEA,IAAa,qBACX,UACG;CACH,MAAM,EAAE,MAAM,eAAe,iBAAiB;CAE9C,OACE,oBAAC,YAAD;EACQ;EACN,eAAe;EACH;EACZ,GAAI;CACL,CAAA;AAEL;AAEA,kBAAkB,cAAc"}
+{"version":3,"file":"BannerRegularText.js","names":[],"sources":["../../../../src/components/banner/banner-regular/BannerRegularText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../../styled'\nimport { Text } from '../../text/Text'\nimport { useBannerContext } from '../Banner.context'\n\nconst StyledText = styled(\n  Text,\n  {\n    base: [],\n    variants: {\n      emphasis: {\n        bold: ['text-on-accent-emphasis'],\n        subtle: ['text-subtle'],\n        minimal: ['text-subtle']\n      },\n      containerSize: {\n        sm: ['mb-4'],\n        md: ['mb-6']\n      },\n      hasDismiss: {\n        true: []\n      }\n    },\n    compoundVariants: [\n      {\n        containerSize: 'sm',\n        hasDismiss: true,\n        class: ['mr-10']\n      }\n    ]\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\nexport const BannerRegularText = (\n  props: React.ComponentPropsWithoutRef<typeof Text>\n) => {\n  const { size, emphasis, hasDismiss } = useBannerContext()\n\n  return (\n    <StyledText\n      size={size}\n      emphasis={emphasis}\n      containerSize={size}\n      hasDismiss={hasDismiss}\n      {...props}\n    />\n  )\n}\n\nBannerRegularText.displayName = 'BannerRegularText'\n"],"mappings":";;;;;;AAMA,IAAM,aAAa,OACjB,MACA;CACE,MAAM,CAAC;CACP,UAAU;EACR,UAAU;GACR,MAAM,CAAC,yBAAyB;GAChC,QAAQ,CAAC,aAAa;GACtB,SAAS,CAAC,aAAa;EACzB;EACA,eAAe;GACb,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;EACb;EACA,YAAY,EACV,MAAM,CAAC,EACT;CACF;CACA,kBAAkB,CAChB;EACE,eAAe;EACf,YAAY;EACZ,OAAO,CAAC,OAAO;CACjB,CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAEA,IAAa,qBACX,UACG;CACH,MAAM,EAAE,MAAM,UAAU,eAAe,iBAAiB;CAExD,OACE,oBAAC,YAAD;EACQ;EACI;EACV,eAAe;EACH;EACZ,GAAI;CACL,CAAA;AAEL;AAEA,kBAAkB,cAAc"}

package/dist/components/banner/banner-slim/BannerSlim.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Banner } from '../Banner';
 import { BannerContainer } from '../BannerContainer';
 export declare const BannerSlim: {
-    ({ colorScheme, size, emphasis, onDismiss, ...rest }: React.ComponentProps<typeof Banner> & React.ComponentProps<typeof BannerContainer>): React.JSX.Element;
+    ({ size, emphasis, onDismiss, ...rest }: React.ComponentProps<typeof Banner> & React.ComponentProps<typeof BannerContainer>): React.JSX.Element;
     displayName: string;
 } & {
     Content: import("../../..").PolymorphicComponent<"div", unknown>;
@@ -15,17 +15,19 @@ export declare const BannerSlim: {
         displayName: string;
     };
     Button: import("../../..").PolymorphicComponent<"button", Omit<{
-        theme?: ("danger" | "neutral" | "primary" | "secondary" | "success" | "warning" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "secondary" | "success" | "warning">>) | undefined;
         appearance?: ("outline" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "solid">>) | undefined;
+        inverse?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
         size?: ("lg" | "md" | "sm" | "xl" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xl">>) | undefined;
         isLoading?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
         fullWidth?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
     }, keyof {
+        tone?: "danger" | "success" | "warning";
         children: React.ReactNode;
         href?: string;
         isLoading?: boolean;
         reloadDocument?: boolean;
     }> & {
+        tone?: "danger" | "success" | "warning";
         children: React.ReactNode;
         href?: string;
         isLoading?: boolean;
@@ -330,13 +332,13 @@ export declare const BannerSlim: {
             } & {
                 as?: never;
             } & Omit<import("@radix-ui/react-tooltip").TooltipContentProps & React.RefAttributes<HTMLDivElement>, "as" | "size"> & import("@radix-ui/react-tooltip").TooltipContentProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element>['side'];
-            theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
             appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
             size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
             isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+            tone?: "danger" | "neutral" | "success" | "warning";
+            inverse?: boolean;
             label: string;
             reloadDocument?: boolean;
-            emphasis?: ("bold" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold">>) | undefined;
             containerSize?: ("md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "md" | "sm">>) | undefined;
         }): React.JSX.Element;
         displayName: string;

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

@@ -9,11 +9,10 @@ import { BannerSlimText } from "./BannerSlimText.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/banner-slim/BannerSlim.tsx
-var BannerSlimComponent = ({ colorScheme, size, emphasis, onDismiss, ...rest }) => /* @__PURE__ */ jsx(Banner, {
+var BannerSlimComponent = ({ size, emphasis, onDismiss, ...rest }) => /* @__PURE__ */ jsx(Banner, {
 	size,
 	emphasis,
 	children: /* @__PURE__ */ jsx(BannerSlimContainer, {
-		colorScheme,
 		onDismiss,
 		...rest
 	})

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

@@ -1 +1 @@
-{"version":3,"file":"BannerSlim.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlim.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Banner } from '../Banner'\nimport { BannerContainer } from '../BannerContainer'\nimport { BannerSlimActions } from './BannerSlimActions'\nimport { BannerSlimButton } from './BannerSlimButton'\nimport { BannerSlimContainer } from './BannerSlimContainer'\nimport { BannerSlimContent } from './BannerSlimContent'\nimport { BannerSlimDismiss } from './BannerSlimDismiss'\nimport { BannerSlimImage } from './BannerSlimImage'\nimport { BannerSlimText } from './BannerSlimText'\n\nconst BannerSlimComponent = ({\n  colorScheme,\n  size,\n  emphasis,\n  onDismiss,\n  ...rest\n}: React.ComponentProps<typeof Banner> &\n  React.ComponentProps<typeof BannerContainer>) => (\n  <Banner size={size} emphasis={emphasis}>\n    <BannerSlimContainer\n      colorScheme={colorScheme}\n      onDismiss={onDismiss}\n      {...rest}\n    />\n  </Banner>\n)\n\nexport const BannerSlim = /* @__PURE__ */ Object.assign(BannerSlimComponent, {\n  Content: BannerSlimContent,\n  Text: BannerSlimText,\n  Image: BannerSlimImage,\n  Button: BannerSlimButton,\n  Dismiss: BannerSlimDismiss,\n  Actions: BannerSlimActions\n})\n\nBannerSlimComponent.displayName = 'BannerSlim'\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,uBAAuB,EAC3B,aACA,MACA,UACA,WACA,GAAG,WAGH,oBAAC,QAAD;CAAc;CAAgB;WAC5B,oBAAC,qBAAD;EACe;EACF;EACX,GAAI;CACL,CAAA;AACK,CAAA;AAGV,IAAa,aAA6B,uBAAO,OAAO,qBAAqB;CAC3E,SAAS;CACT,MAAM;CACN,OAAO;CACP,QAAQ;CACR,SAAS;CACT,SAAS;AACX,CAAC;AAED,oBAAoB,cAAc"}
+{"version":3,"file":"BannerSlim.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlim.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Banner } from '../Banner'\nimport { BannerContainer } from '../BannerContainer'\nimport { BannerSlimActions } from './BannerSlimActions'\nimport { BannerSlimButton } from './BannerSlimButton'\nimport { BannerSlimContainer } from './BannerSlimContainer'\nimport { BannerSlimContent } from './BannerSlimContent'\nimport { BannerSlimDismiss } from './BannerSlimDismiss'\nimport { BannerSlimImage } from './BannerSlimImage'\nimport { BannerSlimText } from './BannerSlimText'\n\nconst BannerSlimComponent = ({\n  size,\n  emphasis,\n  onDismiss,\n  ...rest\n}: React.ComponentProps<typeof Banner> &\n  React.ComponentProps<typeof BannerContainer>) => (\n  <Banner size={size} emphasis={emphasis}>\n    <BannerSlimContainer onDismiss={onDismiss} {...rest} />\n  </Banner>\n)\n\nexport const BannerSlim = /* @__PURE__ */ Object.assign(BannerSlimComponent, {\n  Content: BannerSlimContent,\n  Text: BannerSlimText,\n  Image: BannerSlimImage,\n  Button: BannerSlimButton,\n  Dismiss: BannerSlimDismiss,\n  Actions: BannerSlimActions\n})\n\nBannerSlimComponent.displayName = 'BannerSlim'\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,uBAAuB,EAC3B,MACA,UACA,WACA,GAAG,WAGH,oBAAC,QAAD;CAAc;CAAgB;WAC5B,oBAAC,qBAAD;EAAgC;EAAW,GAAI;CAAO,CAAA;AAChD,CAAA;AAGV,IAAa,aAA6B,uBAAO,OAAO,qBAAqB;CAC3E,SAAS;CACT,MAAM;CACN,OAAO;CACP,QAAQ;CACR,SAAS;CACT,SAAS;AACX,CAAC;AAED,oBAAoB,cAAc"}

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

@@ -10,7 +10,7 @@ var BannerSlimButton = (({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx(Button, {
 		size: "md",
 		fullWidth: overrideStyledVariantValue(size, (s) => s === "sm"),
-		theme: emphasis === "bold" ? "neutral" : "primary",
+		inverse: emphasis === "bold",
 		...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 = 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"}
+{"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      inverse={emphasis === 'bold'}\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,SAAS,aAAa;EACtB,GAAI;EACJ,WAAW,GAAG,WAAW,SAAS;CACnC,CAAA;AAEL;AAEA,iBAAiB,cAAc"}

package/dist/components/banner/banner-slim/BannerSlimContainer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare const StyledBannerSlimContainer: import("../../..").PolymorphicComponent<({ colorScheme, onDismiss, dismissed, ...rest }: import("../BannerContainer").BannerContainerProps) => React.JSX.Element, {
+declare const StyledBannerSlimContainer: import("../../..").PolymorphicComponent<({ accent, onDismiss, dismissed, ...rest }: import("../BannerContainer").BannerContainerProps) => React.JSX.Element, {
     sizeWorkaround?: ("md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "md" | "sm">>) | undefined;
 }>;
 type BannerSlimContainerProps = React.ComponentProps<typeof StyledBannerSlimContainer>;