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

package/dist/components/section-message/SectionMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessage.js","names":[],"sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Dismissible } from '../dismissible'\nimport {\n  SectionMessageProvider,\n  useSectionMessageContext\n} from './SectionMessage.context'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n  SectionMessageActions,\n  SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n  base: [\n    'relative',\n    'rounded-md',\n    'flex',\n    'shrink-0',\n    'min-h-12',\n    'p-4',\n    'border',\n    'border-white'\n  ],\n  variants: {\n    theme: {\n      success: ['bg-success-light', 'text-success-dark'],\n      warning: ['bg-warning-light', 'text-warning-text'],\n      error: ['bg-danger-light', 'text-danger-dark'],\n      neutral: ['bg-grey-100', 'text-grey-1000'],\n      info: ['bg-info-light', 'text-info-dark']\n    },\n    hasIcon: {\n      true: ['pl-10']\n    },\n    hasDismiss: {\n      true: ['pr-12']\n    }\n  }\n})\n\nconst SectionMessageRoot = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledSectionMessage> & {\n  className?: string\n}) => {\n  const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n  return (\n    <StyledSectionMessage\n      {...rest}\n      theme={theme}\n      hasIcon={hasIcon}\n      hasDismiss={hasDismiss}\n    >\n      <div className=\"flex grow justify-between gap-3\">{children}</div>\n    </StyledSectionMessage>\n  )\n}\n\nexport type SectionMessageTheme =\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral'\n  | 'info'\n\nexport type SectionMessageProps = React.ComponentProps<\n  typeof SectionMessageRoot\n> & {\n  theme?: SectionMessageTheme\n}\n\nconst SectionMessageComponent = ({\n  theme = 'info',\n  ...rest\n}: SectionMessageProps) => (\n  <TooltipProvider>\n    <SectionMessageProvider theme={theme}>\n      <SectionMessageRoot {...rest} />\n    </SectionMessageProvider>\n  </TooltipProvider>\n)\n\nexport const SectionMessage = /* @__PURE__ */ Object.assign(\n  SectionMessageComponent,\n  {\n    Title: SectionMessageTitle,\n    Description: SectionMessageDescription,\n    Icon: SectionMessageIcon,\n    Dismiss: SectionMessageDismiss,\n    Content: SectionMessageContent,\n    Actions: SectionMessageActions\n  }\n)\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAM,uBAAuB,OAAO,aAAa;CAC/C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,SAAS,CAAC,oBAAoB,mBAAmB;GACjD,SAAS,CAAC,oBAAoB,mBAAmB;GACjD,OAAO,CAAC,mBAAmB,kBAAkB;GAC7C,SAAS,CAAC,eAAe,gBAAgB;GACzC,MAAM,CAAC,iBAAiB,gBAAgB;EAC1C;EACA,SAAS,EACP,MAAM,CAAC,OAAO,EAChB;EACA,YAAY,EACV,MAAM,CAAC,OAAO,EAChB;CACF;AACF,CAAC;AAED,IAAM,sBAAsB,EAC1B,UACA,GAAG,WAGC;CACJ,MAAM,EAAE,OAAO,SAAS,eAAe,yBAAyB;CAEhE,OACE,oBAAC,sBAAD;EACE,GAAI;EACG;EACE;EACG;YAEZ,oBAAC,OAAD;GAAK,WAAU;GAAmC;EAAc,CAAA;CAC5C,CAAA;AAE1B;AAeA,IAAM,2BAA2B,EAC/B,QAAQ,QACR,GAAG,WAEH,oBAAC,iBAAD,EAAA,UACE,oBAAC,wBAAD;CAA+B;WAC7B,oBAAC,oBAAD,EAAoB,GAAI,KAAO,CAAA;AACT,CAAA,EACT,CAAA;AAGnB,IAAa,iBAAiC,uBAAO,OACnD,yBACA;CACE,OAAO;CACP,aAAa;CACb,MAAM;CACN,SAAS;CACT,SAAS;CACT,SAAS;AACX,CACF"}
+{"version":3,"file":"SectionMessage.js","names":[],"sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport type { TColorAccent } from '../../experiments/theme/Theme'\nimport { styled } from '../../styled'\nimport { Dismissible } from '../dismissible'\nimport {\n  SectionMessageProvider,\n  useSectionMessageContext\n} from './SectionMessage.context'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n  SectionMessageActions,\n  SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n  base: [\n    'relative',\n    'rounded-md',\n    'flex',\n    'shrink-0',\n    'min-h-12',\n    'p-4',\n    'border',\n    'text-on-accent-subtle'\n  ],\n  variants: {\n    // muted: a step deeper than subtle, so the tint reads on a surface.\n    // surface: a message on a plain white surface, only the border and icon\n    // tinted. bold: an emphasis fill for the few messages that must interrupt.\n    fill: {\n      subtle: ['border-(--background-color-surface)', 'bg-accent-subtle'],\n      muted: ['border-(--background-color-surface)', 'bg-accent-muted'],\n      surface: ['border-accent', 'bg-surface'],\n      bold: [\n        'border-(--background-color-surface)',\n        'bg-accent-emphasis',\n        'text-on-accent-emphasis'\n      ]\n    },\n    // Warning's on-subtle text is too pale on its tints; bold has its own text\n    paleText: {\n      true: ['text-accent']\n    },\n    hasIcon: {\n      true: ['pl-10']\n    },\n    hasDismiss: {\n      true: ['pr-12']\n    }\n  }\n})\n\nconst SectionMessageRoot = ({\n  children,\n  accent,\n  ...rest\n}: Omit<\n  React.ComponentProps<typeof StyledSectionMessage>,\n  'fill' | 'paleText'\n> & {\n  accent?: SectionMessageAccent\n  className?: string\n}) => {\n  const { tone, fill, hasIcon, hasDismiss } = useSectionMessageContext()\n\n  return (\n    <StyledSectionMessage\n      {...rest}\n      fill={fill}\n      paleText={tone === 'warning' && fill !== 'bold'}\n      // Neutral is set explicitly: unset would inherit the surrounding accent\n      data-color-accent={accent ?? (tone === 'neutral' ? 'grey' : tone)}\n      hasIcon={hasIcon}\n      hasDismiss={hasDismiss}\n    >\n      <div className=\"flex grow justify-between gap-3\">{children}</div>\n    </StyledSectionMessage>\n  )\n}\n\n// Intent, not hue: each tone resolves to a fixed status scale\nexport type SectionMessageTone =\n  | 'neutral'\n  | Extract<TColorAccent, 'success' | 'warning' | 'info' | 'danger'>\n\n// Decorative hue or the brand, for messages that aren't a status\nexport type SectionMessageAccent = Exclude<\n  TColorAccent,\n  'success' | 'warning' | 'info' | 'danger'\n>\n\nexport type SectionMessageFill = 'subtle' | 'muted' | 'surface' | 'bold'\n\n// Unset tone and accent is neutral (grey)\nexport type SectionMessageColorProps =\n  | { tone?: SectionMessageTone; accent?: never }\n  | { accent?: SectionMessageAccent; tone?: never }\n\nexport type SectionMessageProps = Omit<\n  React.ComponentProps<typeof SectionMessageRoot>,\n  'accent'\n> &\n  SectionMessageColorProps & {\n    fill?: SectionMessageFill\n  }\n\nconst SectionMessageComponent = ({\n  tone,\n  accent,\n  fill = 'subtle',\n  ...rest\n}: SectionMessageProps) => (\n  <TooltipProvider>\n    <SectionMessageProvider\n      tone={accent ? undefined : (tone ?? 'neutral')}\n      fill={fill}\n    >\n      <SectionMessageRoot accent={accent} {...rest} />\n    </SectionMessageProvider>\n  </TooltipProvider>\n)\n\nexport const SectionMessage = /* @__PURE__ */ Object.assign(\n  SectionMessageComponent,\n  {\n    Title: SectionMessageTitle,\n    Description: SectionMessageDescription,\n    Icon: SectionMessageIcon,\n    Dismiss: SectionMessageDismiss,\n    Content: SectionMessageContent,\n    Actions: SectionMessageActions\n  }\n)\n"],"mappings":";;;;;;;;;;;;AAmBA,IAAM,uBAAuB,OAAO,aAAa;CAC/C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EAIR,MAAM;GACJ,QAAQ,CAAC,uCAAuC,kBAAkB;GAClE,OAAO,CAAC,uCAAuC,iBAAiB;GAChE,SAAS,CAAC,iBAAiB,YAAY;GACvC,MAAM;IACJ;IACA;IACA;GACF;EACF;EAEA,UAAU,EACR,MAAM,CAAC,aAAa,EACtB;EACA,SAAS,EACP,MAAM,CAAC,OAAO,EAChB;EACA,YAAY,EACV,MAAM,CAAC,OAAO,EAChB;CACF;AACF,CAAC;AAED,IAAM,sBAAsB,EAC1B,UACA,QACA,GAAG,WAOC;CACJ,MAAM,EAAE,MAAM,MAAM,SAAS,eAAe,yBAAyB;CAErE,OACE,oBAAC,sBAAD;EACE,GAAI;EACE;EACN,UAAU,SAAS,aAAa,SAAS;EAEzC,qBAAmB,WAAW,SAAS,YAAY,SAAS;EACnD;EACG;YAEZ,oBAAC,OAAD;GAAK,WAAU;GAAmC;EAAc,CAAA;CAC5C,CAAA;AAE1B;AA4BA,IAAM,2BAA2B,EAC/B,MACA,QACA,OAAO,UACP,GAAG,WAEH,oBAAC,iBAAD,EAAA,UACE,oBAAC,wBAAD;CACE,MAAM,SAAS,KAAA,IAAa,QAAQ;CAC9B;WAEN,oBAAC,oBAAD;EAA4B;EAAQ,GAAI;CAAO,CAAA;AACzB,CAAA,EACT,CAAA;AAGnB,IAAa,iBAAiC,uBAAO,OACnD,yBACA;CACE,OAAO;CACP,aAAa;CACb,MAAM;CACN,SAAS;CACT,SAAS;CACT,SAAS;AACX,CACF"}

package/dist/components/section-message/SectionMessageDescription.js

@@ -1,13 +1,17 @@
 import { cn } from "../../utilities/tw-merge/index.js";
 import { Text } from "../text/Text.js";
+import { useSectionMessageContext } from "./SectionMessage.context.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/section-message/SectionMessageDescription.tsx
-var SectionMessageDescription = ({ className, ...rest }) => /* @__PURE__ */ jsx(Text, {
-	size: "sm",
-	...rest,
-	className: cn("text-grey-900", className)
-});
+var SectionMessageDescription = ({ className, ...rest }) => {
+	const { fill } = useSectionMessageContext();
+	return /* @__PURE__ */ jsx(Text, {
+		size: "sm",
+		...rest,
+		className: cn(fill !== "bold" && "text-default", className)
+	});
+};
 //#endregion
 export { SectionMessageDescription };
 

package/dist/components/section-message/SectionMessageDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageDescription.js","names":[],"sources":["../../../src/components/section-message/SectionMessageDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Text } from '../text/Text'\n\nexport const SectionMessageDescription = ({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Text>) => (\n  <Text size=\"sm\" {...rest} className={cn('text-grey-900', className)} />\n)\n"],"mappings":";;;;;AAKA,IAAa,6BAA6B,EACxC,WACA,GAAG,WAEH,oBAAC,MAAD;CAAM,MAAK;CAAK,GAAI;CAAM,WAAW,GAAG,iBAAiB,SAAS;AAAI,CAAA"}
+{"version":3,"file":"SectionMessageDescription.js","names":[],"sources":["../../../src/components/section-message/SectionMessageDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Text } from '../text/Text'\nimport { useSectionMessageContext } from './SectionMessage.context'\n\nexport const SectionMessageDescription = ({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Text>) => {\n  const { fill } = useSectionMessageContext()\n\n  // On a bold fill the description takes the fill's text colour, not grey\n  return (\n    <Text\n      size=\"sm\"\n      {...rest}\n      className={cn(fill !== 'bold' && 'text-default', className)}\n    />\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAa,6BAA6B,EACxC,WACA,GAAG,WACoC;CACvC,MAAM,EAAE,SAAS,yBAAyB;CAG1C,OACE,oBAAC,MAAD;EACE,MAAK;EACL,GAAI;EACJ,WAAW,GAAG,SAAS,UAAU,gBAAgB,SAAS;CAC3D,CAAA;AAEL"}

package/dist/components/section-message/SectionMessageDismiss.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { ActionIcon } from '../action-icon/ActionIcon';
-export declare const SectionMessageDismiss: ({ label, className, ...rest }: React.ComponentProps<typeof ActionIcon>) => React.JSX.Element;
+export declare const SectionMessageDismiss: ({ label, className, ...rest }: Omit<React.ComponentProps<typeof ActionIcon>, 'label' | 'children'> & Partial<Pick<React.ComponentProps<typeof ActionIcon>, 'label' | 'children'>>) => React.JSX.Element;

package/dist/components/section-message/SectionMessageDismiss.js

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 import { Close } from "@atom-learning/icons";
 //#region src/components/section-message/SectionMessageDismiss.tsx
 var SectionMessageDismiss = ({ label = "Dismiss", className, ...rest }) => {
-	const { setHasDismiss } = useSectionMessageContext();
+	const { fill, setHasDismiss } = useSectionMessageContext();
 	useEffect(() => {
 		setHasDismiss(true);
 		return () => setHasDismiss(false);
@@ -19,7 +19,7 @@ var SectionMessageDismiss = ({ label = "Dismiss", className, ...rest }) => {
 			label,
 			size: "sm",
 			appearance: "simple",
-			theme: "neutral",
+			...fill === "bold" ? { inverse: true } : { tone: "neutral" },
 			...rest,
 			className: cn("m-auto", "absolute", "top-2", "right-2", className),
 			children: /* @__PURE__ */ jsx(Icon, { is: Close })

package/dist/components/section-message/SectionMessageDismiss.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageDismiss.js","names":[],"sources":["../../../src/components/section-message/SectionMessageDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport React, { useEffect } from 'react'\n\nimport { cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Dismissible } from '../dismissible'\nimport { Icon } from '../icon/Icon'\nimport { useSectionMessageContext } from './SectionMessage.context'\n\nexport const SectionMessageDismiss = ({\n  label = 'Dismiss',\n  className,\n  ...rest\n}: React.ComponentProps<typeof ActionIcon>) => {\n  const { setHasDismiss } = useSectionMessageContext()\n\n  useEffect(() => {\n    setHasDismiss(true)\n    return () => setHasDismiss(false)\n  }, [setHasDismiss])\n\n  return (\n    <Dismissible.Trigger asChild>\n      <ActionIcon\n        label={label}\n        size=\"sm\"\n        appearance=\"simple\"\n        theme=\"neutral\"\n        {...rest}\n        className={cn('m-auto', 'absolute', 'top-2', 'right-2', className)}\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    </Dismissible.Trigger>\n  )\n}\n"],"mappings":";;;;;;;;;AASA,IAAa,yBAAyB,EACpC,QAAQ,WACR,WACA,GAAG,WAC0C;CAC7C,MAAM,EAAE,kBAAkB,yBAAyB;CAEnD,gBAAgB;EACd,cAAc,IAAI;EAClB,aAAa,cAAc,KAAK;CAClC,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,oBAAC,YAAY,SAAb;EAAqB,SAAA;YACnB,oBAAC,YAAD;GACS;GACP,MAAK;GACL,YAAW;GACX,OAAM;GACN,GAAI;GACJ,WAAW,GAAG,UAAU,YAAY,SAAS,WAAW,SAAS;aAEjE,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACR,CAAA;CACO,CAAA;AAEzB"}
+{"version":3,"file":"SectionMessageDismiss.js","names":[],"sources":["../../../src/components/section-message/SectionMessageDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport React, { useEffect } from 'react'\n\nimport { cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Dismissible } from '../dismissible'\nimport { Icon } from '../icon/Icon'\nimport { useSectionMessageContext } from './SectionMessage.context'\n\nexport const SectionMessageDismiss = ({\n  label = 'Dismiss',\n  className,\n  ...rest\n}: Omit<React.ComponentProps<typeof ActionIcon>, 'label' | 'children'> &\n  // The label has a default and the close icon is built in\n  Partial<\n    Pick<React.ComponentProps<typeof ActionIcon>, 'label' | 'children'>\n  >) => {\n  const { fill, setHasDismiss } = useSectionMessageContext()\n\n  useEffect(() => {\n    setHasDismiss(true)\n    return () => setHasDismiss(false)\n  }, [setHasDismiss])\n\n  return (\n    <Dismissible.Trigger asChild>\n      <ActionIcon\n        label={label}\n        size=\"sm\"\n        appearance=\"simple\"\n        {...(fill === 'bold' ? { inverse: true } : { tone: 'neutral' })}\n        {...rest}\n        className={cn('m-auto', 'absolute', 'top-2', 'right-2', className)}\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    </Dismissible.Trigger>\n  )\n}\n"],"mappings":";;;;;;;;;AASA,IAAa,yBAAyB,EACpC,QAAQ,WACR,WACA,GAAG,WAKG;CACN,MAAM,EAAE,MAAM,kBAAkB,yBAAyB;CAEzD,gBAAgB;EACd,cAAc,IAAI;EAClB,aAAa,cAAc,KAAK;CAClC,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,oBAAC,YAAY,SAAb;EAAqB,SAAA;YACnB,oBAAC,YAAD;GACS;GACP,MAAK;GACL,YAAW;GACX,GAAK,SAAS,SAAS,EAAE,SAAS,KAAK,IAAI,EAAE,MAAM,UAAU;GAC7D,GAAI;GACJ,WAAW,GAAG,UAAU,YAAY,SAAS,WAAW,SAAS;aAEjE,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACR,CAAA;CACO,CAAA;AAEzB"}

package/dist/components/section-message/SectionMessageIcon.js

@@ -5,21 +5,21 @@ import { useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Danger, Error, Info, OkCircle } from "@atom-learning/icons";
 //#region src/components/section-message/SectionMessageIcon.tsx
-var themeIcons = {
+var toneIcons = {
 	success: OkCircle,
 	warning: Danger,
-	error: Error,
+	danger: Error,
 	neutral: Info,
 	info: Info
 };
 var SectionMessageIcon = ({ className, is, ...rest }) => {
-	const { theme, setHasIcon } = useSectionMessageContext();
+	const { tone, setHasIcon } = useSectionMessageContext();
 	useEffect(() => {
 		setHasIcon(true);
 		return () => setHasIcon(false);
 	}, [setHasIcon]);
 	return /* @__PURE__ */ jsx(Icon, {
-		is: is || themeIcons[theme],
+		is: is || toneIcons[tone ?? "neutral"],
 		size: "sm",
 		...rest,
 		className: cn("m-auto", "absolute", "left-4", "top-4", "text-current", className)

package/dist/components/section-message/SectionMessageIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageIcon.js","names":[],"sources":["../../../src/components/section-message/SectionMessageIcon.tsx"],"sourcesContent":["import { Danger, Error, Info, OkCircle } from '@atom-learning/icons'\nimport React, { useEffect } from 'react'\n\nimport { cn } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useSectionMessageContext } from './SectionMessage.context'\n\nconst themeIcons = {\n  success: OkCircle,\n  warning: Danger,\n  error: Error,\n  neutral: Info,\n  info: Info\n}\n\ntype SectionMessageIconProps = Partial<React.ComponentProps<typeof Icon>>\n\nexport const SectionMessageIcon = ({\n  className,\n  is,\n  ...rest\n}: SectionMessageIconProps) => {\n  const { theme, setHasIcon } = useSectionMessageContext()\n\n  useEffect(() => {\n    setHasIcon(true)\n    return () => setHasIcon(false)\n  }, [setHasIcon])\n\n  return (\n    <Icon\n      is={is || themeIcons[theme]}\n      size=\"sm\"\n      {...rest}\n      className={cn(\n        'm-auto',\n        'absolute',\n        'left-4',\n        'top-4',\n        'text-current',\n        className\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAOA,IAAM,aAAa;CACjB,SAAS;CACT,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;AACR;AAIA,IAAa,sBAAsB,EACjC,WACA,IACA,GAAG,WAC0B;CAC7B,MAAM,EAAE,OAAO,eAAe,yBAAyB;CAEvD,gBAAgB;EACd,WAAW,IAAI;EACf,aAAa,WAAW,KAAK;CAC/B,GAAG,CAAC,UAAU,CAAC;CAEf,OACE,oBAAC,MAAD;EACE,IAAI,MAAM,WAAW;EACrB,MAAK;EACL,GAAI;EACJ,WAAW,GACT,UACA,YACA,UACA,SACA,gBACA,SACF;CACD,CAAA;AAEL"}
+{"version":3,"file":"SectionMessageIcon.js","names":[],"sources":["../../../src/components/section-message/SectionMessageIcon.tsx"],"sourcesContent":["import { Danger, Error, Info, OkCircle } from '@atom-learning/icons'\nimport React, { useEffect } from 'react'\n\nimport { cn } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useSectionMessageContext } from './SectionMessage.context'\n\nconst toneIcons = {\n  success: OkCircle,\n  warning: Danger,\n  danger: Error,\n  neutral: Info,\n  info: Info\n}\n\ntype SectionMessageIconProps = Partial<React.ComponentProps<typeof Icon>>\n\nexport const SectionMessageIcon = ({\n  className,\n  is,\n  ...rest\n}: SectionMessageIconProps) => {\n  const { tone, setHasIcon } = useSectionMessageContext()\n\n  useEffect(() => {\n    setHasIcon(true)\n    return () => setHasIcon(false)\n  }, [setHasIcon])\n\n  return (\n    <Icon\n      is={is || toneIcons[tone ?? 'neutral']}\n      size=\"sm\"\n      {...rest}\n      className={cn(\n        'm-auto',\n        'absolute',\n        'left-4',\n        'top-4',\n        'text-current',\n        className\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAOA,IAAM,YAAY;CAChB,SAAS;CACT,SAAS;CACT,QAAQ;CACR,SAAS;CACT,MAAM;AACR;AAIA,IAAa,sBAAsB,EACjC,WACA,IACA,GAAG,WAC0B;CAC7B,MAAM,EAAE,MAAM,eAAe,yBAAyB;CAEtD,gBAAgB;EACd,WAAW,IAAI;EACf,aAAa,WAAW,KAAK;CAC/B,GAAG,CAAC,UAAU,CAAC;CAEf,OACE,oBAAC,MAAD;EACE,IAAI,MAAM,UAAU,QAAQ;EAC5B,MAAK;EACL,GAAI;EACJ,WAAW,GACT,UACA,YACA,UACA,SACA,gBACA,SACF;CACD,CAAA;AAEL"}

package/dist/components/segmented-control/SegmentedControl.context.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { Tabs } from '../tabs/Tabs';
-import type { SegmentedControlTheme } from './SegmentedControl.types';
 import type { SegmentedControlRootProps } from './SegmentedControlRoot';
 export interface SegmentedControlContextValue extends Pick<React.ComponentProps<typeof Tabs>, 'defaultValue' | 'value' | 'onValueChange'> {
     size: SegmentedControlRootProps['size'];
-    theme: SegmentedControlTheme;
 }
 export declare const SegmentedControlContext: React.Context<SegmentedControlContextValue>;

package/dist/components/segmented-control/SegmentedControl.context.js

@@ -2,7 +2,6 @@ import * as React$1 from "react";
 //#region src/components/segmented-control/SegmentedControl.context.tsx
 var SegmentedControlContext = React$1.createContext({
 	size: "md",
-	theme: "primary",
 	defaultValue: "",
 	value: "",
 	onValueChange: () => null

package/dist/components/segmented-control/SegmentedControl.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.context.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControl.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Tabs } from '../tabs/Tabs'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\nimport type { SegmentedControlRootProps } from './SegmentedControlRoot'\n\nexport interface SegmentedControlContextValue extends Pick<\n  React.ComponentProps<typeof Tabs>,\n  'defaultValue' | 'value' | 'onValueChange'\n> {\n  size: SegmentedControlRootProps['size']\n  theme: SegmentedControlTheme\n}\n\nexport const SegmentedControlContext =\n  React.createContext<SegmentedControlContextValue>({\n    size: 'md',\n    theme: 'primary',\n    defaultValue: '',\n    value: '',\n    onValueChange: () => null\n  })\n"],"mappings":";;AAcA,IAAa,0BACX,QAAM,cAA4C;CAChD,MAAM;CACN,OAAO;CACP,cAAc;CACd,OAAO;CACP,qBAAqB;AACvB,CAAC"}
+{"version":3,"file":"SegmentedControl.context.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControl.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Tabs } from '../tabs/Tabs'\nimport type { SegmentedControlRootProps } from './SegmentedControlRoot'\n\nexport interface SegmentedControlContextValue extends Pick<\n  React.ComponentProps<typeof Tabs>,\n  'defaultValue' | 'value' | 'onValueChange'\n> {\n  size: SegmentedControlRootProps['size']\n}\n\nexport const SegmentedControlContext =\n  React.createContext<SegmentedControlContextValue>({\n    size: 'md',\n    defaultValue: '',\n    value: '',\n    onValueChange: () => null\n  })\n"],"mappings":";;AAYA,IAAa,0BACX,QAAM,cAA4C;CAChD,MAAM;CACN,cAAc;CACd,OAAO;CACP,qBAAqB;AACvB,CAAC"}

package/dist/components/segmented-control/SegmentedControl.d.ts

@@ -1,7 +1,6 @@
 export declare const SegmentedControl: {
-    Root: ({ size, theme, defaultValue, children, value, onValueChange, ...rest }: React.PropsWithChildren<import("./SegmentedControlRoot").SegmentedControlRootProps>) => import("react").JSX.Element;
+    Root: ({ size, defaultValue, children, value, onValueChange, ...rest }: React.PropsWithChildren<import("./SegmentedControlRoot").SegmentedControlRootProps>) => import("react").JSX.Element;
     Item: ({ ref, children, ...rest }: Omit<React.ComponentProps<import("../..").PolymorphicComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, {
-        theme?: ("marsh" | "primary" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "marsh" | "primary">>) | undefined;
         size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
     }>>, 'size'>) => import("react").JSX.Element;
     Heading: (props: Omit<React.ComponentProps<import("../..").PolymorphicComponent<import("../..").PolymorphicComponent<"p", {
@@ -32,11 +31,9 @@ export declare const SegmentedControl: {
     }>>, 'size'>) => import("react").JSX.Element;
     Icon: (props: Omit<React.ComponentProps<typeof import("..").Icon>, 'size'>) => import("react").JSX.Element;
     Content: import("../..").PolymorphicComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsContentProps & import("react").RefAttributes<HTMLDivElement>>, unknown>;
-    Badge: ({ className, ...rest }: Omit<React.ComponentProps<typeof import("..").Badge>, 'size'>) => import("react").JSX.Element;
+    Badge: ({ className, tone, accent, ...rest }: Omit<React.ComponentProps<typeof import("..").Badge>, 'size' | 'tone' | 'accent'> & import("../badge/Badge").BadgeColorProps) => import("react").JSX.Element;
     ItemList: (props: React.ComponentProps<{
-        ({ children, colorScheme, ...rest }: React.ComponentProps<import("../..").PolymorphicComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>>, unknown>> & {
-            colorScheme?: import("../..").TcolorScheme;
-        }): import("react").JSX.Element;
+        ({ children, ...rest }: React.ComponentProps<import("../..").PolymorphicComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>>, unknown>>): import("react").JSX.Element;
         displayName: string;
     }>) => import("react").JSX.Element;
 };

package/dist/components/segmented-control/SegmentedControlBadge.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import { Badge } from '../badge/Badge';
-export declare const SegmentedControlBadge: ({ className, ...rest }: Omit<React.ComponentProps<typeof Badge>, 'size'>) => React.JSX.Element;
+import { Badge, type BadgeColorProps } from '../badge/Badge';
+export declare const SegmentedControlBadge: ({ className, tone, accent, ...rest }: Omit<React.ComponentProps<typeof Badge>, 'size' | 'tone' | 'accent'> & BadgeColorProps) => React.JSX.Element;

package/dist/components/segmented-control/SegmentedControlBadge.js

@@ -9,10 +9,11 @@ var badgeSizeMap = {
 	md: "xs",
 	lg: "sm"
 };
-var SegmentedControlBadge = ({ className, ...rest }) => {
+var SegmentedControlBadge = ({ className, tone, accent, ...rest }) => {
 	const { size } = React$1.use(SegmentedControlContext);
 	return /* @__PURE__ */ jsx(Badge, {
 		...rest,
+		...accent ? { accent } : { tone: tone ?? "info" },
 		size: badgeSizeMap[size],
 		className: cn("border-none", "font-normal", className)
 	});

package/dist/components/segmented-control/SegmentedControlBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlBadge.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlBadge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Badge } from '../badge/Badge'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst badgeSizeMap = {\n  sm: 'xs',\n  md: 'xs',\n  lg: 'sm'\n}\n\nexport const SegmentedControlBadge = ({\n  className,\n  ...rest\n}: Omit<React.ComponentProps<typeof Badge>, 'size'>) => {\n  const { size } = React.use(SegmentedControlContext)\n\n  return (\n    <Badge\n      {...rest}\n      size={badgeSizeMap[size as string]}\n      className={cn('border-none', 'font-normal', className)}\n    />\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,yBAAyB,EACpC,WACA,GAAG,WACmD;CACtD,MAAM,EAAE,SAAS,QAAM,IAAI,uBAAuB;CAElD,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,MAAM,aAAa;EACnB,WAAW,GAAG,eAAe,eAAe,SAAS;CACtD,CAAA;AAEL"}
+{"version":3,"file":"SegmentedControlBadge.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlBadge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Badge, type BadgeColorProps } from '../badge/Badge'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst badgeSizeMap = {\n  sm: 'xs',\n  md: 'xs',\n  lg: 'sm'\n}\n\nexport const SegmentedControlBadge = ({\n  className,\n  tone,\n  accent,\n  ...rest\n}: Omit<React.ComponentProps<typeof Badge>, 'size' | 'tone' | 'accent'> &\n  BadgeColorProps) => {\n  const { size } = React.use(SegmentedControlContext)\n\n  return (\n    <Badge\n      {...rest}\n      // Unset is info, not Badge's neutral\n      {...(accent ? { accent } : { tone: tone ?? 'info' })}\n      size={badgeSizeMap[size as string]}\n      className={cn('border-none', 'font-normal', className)}\n    />\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,yBAAyB,EACpC,WACA,MACA,QACA,GAAG,WAEiB;CACpB,MAAM,EAAE,SAAS,QAAM,IAAI,uBAAuB;CAElD,OACE,oBAAC,OAAD;EACE,GAAI;EAEJ,GAAK,SAAS,EAAE,OAAO,IAAI,EAAE,MAAM,QAAQ,OAAO;EAClD,MAAM,aAAa;EACnB,WAAW,GAAG,eAAe,eAAe,SAAS;CACtD,CAAA;AAEL"}

package/dist/components/segmented-control/SegmentedControlDescription.js

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 var StyledText = styled(Text, {
 	base: [
 		"font-body",
-		"text-text-subtle",
+		"text-subtle",
 		"font-normal"
 	],
 	variants: { size: {

package/dist/components/segmented-control/SegmentedControlDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlDescription.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst StyledText = styled(\n  Text,\n  {\n    base: ['font-body', 'text-text-subtle', 'font-normal'],\n    variants: {\n      size: {\n        sm: ['text-xs', 'leading-[1.6]'],\n        md: ['text-sm', 'leading-[1.53]'],\n        lg: ['text-md', 'leading-normal']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport const SegmentedControlDescription = (\n  props: Omit<React.ComponentProps<typeof StyledText>, 'size'>\n) => {\n  const { size } = React.use(SegmentedControlContext)\n\n  return <StyledText {...props} size={size} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,aAAa,OACjB,MACA;CACE,MAAM;EAAC;EAAa;EAAoB;CAAa;CACrD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,eAAe;EAC/B,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;CAClC,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAa,+BACX,UACG;CACH,MAAM,EAAE,SAAS,QAAM,IAAI,uBAAuB;CAElD,OAAO,oBAAC,YAAD;EAAY,GAAI;EAAa;CAAO,CAAA;AAC7C"}
+{"version":3,"file":"SegmentedControlDescription.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst StyledText = styled(\n  Text,\n  {\n    base: ['font-body', 'text-subtle', 'font-normal'],\n    variants: {\n      size: {\n        sm: ['text-xs', 'leading-[1.6]'],\n        md: ['text-sm', 'leading-[1.53]'],\n        lg: ['text-md', 'leading-normal']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport const SegmentedControlDescription = (\n  props: Omit<React.ComponentProps<typeof StyledText>, 'size'>\n) => {\n  const { size } = React.use(SegmentedControlContext)\n\n  return <StyledText {...props} size={size} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,aAAa,OACjB,MACA;CACE,MAAM;EAAC;EAAa;EAAe;CAAa;CAChD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,eAAe;EAC/B,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;CAClC,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAa,+BACX,UACG;CACH,MAAM,EAAE,SAAS,QAAM,IAAI,uBAAuB;CAElD,OAAO,oBAAC,YAAD;EAAY,GAAI;EAAa;CAAO,CAAA;AAC7C"}

package/dist/components/segmented-control/SegmentedControlHeading.js

@@ -5,7 +5,7 @@ import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/segmented-control/SegmentedControlHeading.tsx
 var StyledHeading = styled(Text, {
-	base: ["font-body", "text-text-regular"],
+	base: ["font-body", "text-default"],
 	variants: { size: {
 		sm: ["text-sm", "leading-[1.53]"],
 		md: ["text-md", "leading-normal"],

package/dist/components/segmented-control/SegmentedControlHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlHeading.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst StyledHeading = styled(\n  Text,\n  {\n    base: ['font-body', 'text-text-regular'],\n    variants: {\n      size: {\n        sm: ['text-sm', 'leading-[1.53]'],\n        md: ['text-md', 'leading-normal'],\n        lg: ['text-lg', 'leading-[1.52]']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport const SegmentedControlHeading = (\n  props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n) => {\n  const { size } = React.use(SegmentedControlContext)\n\n  return <StyledHeading {...props} size={size} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,OACpB,MACA;CACE,MAAM,CAAC,aAAa,mBAAmB;CACvC,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;CAClC,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAa,2BACX,UACG;CACH,MAAM,EAAE,SAAS,QAAM,IAAI,uBAAuB;CAElD,OAAO,oBAAC,eAAD;EAAe,GAAI;EAAa;CAAO,CAAA;AAChD"}
+{"version":3,"file":"SegmentedControlHeading.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst StyledHeading = styled(\n  Text,\n  {\n    base: ['font-body', 'text-default'],\n    variants: {\n      size: {\n        sm: ['text-sm', 'leading-[1.53]'],\n        md: ['text-md', 'leading-normal'],\n        lg: ['text-lg', 'leading-[1.52]']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport const SegmentedControlHeading = (\n  props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n) => {\n  const { size } = React.use(SegmentedControlContext)\n\n  return <StyledHeading {...props} size={size} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,OACpB,MACA;CACE,MAAM,CAAC,aAAa,cAAc;CAClC,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;CAClC,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAa,2BACX,UACG;CACH,MAAM,EAAE,SAAS,QAAM,IAAI,uBAAuB;CAElD,OAAO,oBAAC,eAAD;EAAe,GAAI;EAAa;CAAO,CAAA;AAChD"}

package/dist/components/segmented-control/SegmentedControlItem.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 declare const StyledItem: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>, {
-    theme?: ("marsh" | "primary" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "marsh" | "primary">>) | undefined;
     size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
 }>;
 export declare const SegmentedControlItem: ({ ref, children, ...rest }: Omit<React.ComponentProps<typeof StyledItem>, 'size'>) => React.JSX.Element;

package/dist/components/segmented-control/SegmentedControlItem.js

@@ -21,53 +21,45 @@ var StyledItem = styled(Trigger, {
 		"justify-center",
 		"data-[state=active]:border-2",
 		"data-[state=active]:border-transparent",
-		"data-[state=active]:focus-visible:border-primary-800",
-		"data-[state=active]:focus-visible:shadow-none",
 		"data-[state=active]:font-semibold",
 		"data-[state=active]:shadow-none",
 		"data-[state=active]:text-(--text-bold)",
 		"data-[state=inactive]:font-normal",
-		"data-[state=inactive]:text-grey-900",
+		"data-[state=inactive]:text-default",
 		"disabled:cursor-not-allowed",
 		"disabled:opacity-30",
-		"focus-visible:outline-none"
+		"focus-visible:outline-2",
+		"focus-visible:-outline-offset-2",
+		"focus-visible:outline-solid",
+		"focus-visible:outline-focus",
+		"data-[state=inactive]:hover:bg-accent-subtle-active"
 	],
-	variants: {
-		theme: {
-			primary: ["data-[state=inactive]:hover:bg-primary-300", "focus-visible:border-primary-800"],
-			marsh: ["data-[state=inactive]:hover:bg-marsh-300", "focus-visible:border-marsh-800"]
-		},
-		size: {
-			sm: [
-				"flex-[unset]",
-				"gap-3",
-				"px-6",
-				"py-4"
-			],
-			md: [
-				"flex-1",
-				"gap-4",
-				"px-4",
-				"py-6"
-			],
-			lg: [
-				"flex-1",
-				"gap-4",
-				"px-4",
-				"py-6"
-			]
-		}
-	},
-	defaultVariants: {
-		size: "md",
-		theme: "primary"
-	}
+	variants: { size: {
+		sm: [
+			"flex-[unset]",
+			"gap-3",
+			"px-6",
+			"py-4"
+		],
+		md: [
+			"flex-1",
+			"gap-4",
+			"px-4",
+			"py-6"
+		],
+		lg: [
+			"flex-1",
+			"gap-4",
+			"px-4",
+			"py-6"
+		]
+	} },
+	defaultVariants: { size: "md" }
 }, { enableResponsiveVariants: true });
 var SegmentedControlItem = ({ ref, children, ...rest }) => {
-	const { size, theme } = React$1.use(SegmentedControlContext);
+	const { size } = React$1.use(SegmentedControlContext);
 	return /* @__PURE__ */ jsx(StyledItem, {
 		...rest,
-		theme,
 		size,
 		ref,
 		children

package/dist/components/segmented-control/SegmentedControlItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItem.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst StyledItem = styled(\n  Trigger,\n  {\n    base: [\n      'relative',\n      'bg-transparent',\n      'rounded-md',\n      'z-2',\n      'min-w-35',\n      'border-2',\n      'border-transparent',\n      'cursor-pointer',\n      'select-none',\n      'flex',\n      'flex-col',\n      'items-center',\n      'justify-center',\n      'data-[state=active]:border-2',\n      'data-[state=active]:border-transparent',\n      'data-[state=active]:focus-visible:border-primary-800',\n      'data-[state=active]:focus-visible:shadow-none',\n      'data-[state=active]:font-semibold',\n      'data-[state=active]:shadow-none',\n      'data-[state=active]:text-(--text-bold)',\n      'data-[state=inactive]:font-normal',\n      'data-[state=inactive]:text-grey-900',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'focus-visible:outline-none'\n    ],\n    variants: {\n      theme: {\n        primary: [\n          'data-[state=inactive]:hover:bg-primary-300',\n          'focus-visible:border-primary-800'\n        ],\n        marsh: [\n          'data-[state=inactive]:hover:bg-marsh-300',\n          'focus-visible:border-marsh-800'\n        ]\n      },\n      size: {\n        sm: ['flex-[unset]', 'gap-3', 'px-6', 'py-4'],\n        md: ['flex-1', 'gap-4', 'px-4', 'py-6'],\n        lg: ['flex-1', 'gap-4', 'px-4', 'py-6']\n      }\n    },\n    defaultVariants: {\n      size: 'md',\n      theme: 'primary'\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport const SegmentedControlItem = ({\n  ref,\n  children,\n  ...rest\n}: Omit<React.ComponentProps<typeof StyledItem>, 'size'>) => {\n  const { size, theme } = React.use(SegmentedControlContext)\n\n  return (\n    <StyledItem {...rest} theme={theme} size={size} ref={ref}>\n      {children}\n    </StyledItem>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,aAAa,OACjB,SACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,SAAS,CACP,8CACA,kCACF;GACA,OAAO,CACL,4CACA,gCACF;EACF;EACA,MAAM;GACJ,IAAI;IAAC;IAAgB;IAAS;IAAQ;GAAM;GAC5C,IAAI;IAAC;IAAU;IAAS;IAAQ;GAAM;GACtC,IAAI;IAAC;IAAU;IAAS;IAAQ;GAAM;EACxC;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAa,wBAAwB,EACnC,KACA,UACA,GAAG,WACwD;CAC3D,MAAM,EAAE,MAAM,UAAU,QAAM,IAAI,uBAAuB;CAEzD,OACE,oBAAC,YAAD;EAAY,GAAI;EAAa;EAAa;EAAW;EAClD;CACS,CAAA;AAEhB"}
+{"version":3,"file":"SegmentedControlItem.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst StyledItem = styled(\n  Trigger,\n  {\n    base: [\n      'relative',\n      'bg-transparent',\n      'rounded-md',\n      'z-2',\n      'min-w-35',\n      'border-2',\n      'border-transparent',\n      'cursor-pointer',\n      'select-none',\n      'flex',\n      'flex-col',\n      'items-center',\n      'justify-center',\n      'data-[state=active]:border-2',\n      'data-[state=active]:border-transparent',\n      'data-[state=active]:font-semibold',\n      'data-[state=active]:shadow-none',\n      'data-[state=active]:text-(--text-bold)',\n      'data-[state=inactive]:font-normal',\n      'data-[state=inactive]:text-default',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'focus-visible:outline-2',\n      // Inset: the Tabs scroller (overflow-x-auto) clips an outer ring\n      'focus-visible:-outline-offset-2',\n      'focus-visible:outline-solid',\n      'focus-visible:outline-focus',\n      'data-[state=inactive]:hover:bg-accent-subtle-active'\n    ],\n    variants: {\n      size: {\n        sm: ['flex-[unset]', 'gap-3', 'px-6', 'py-4'],\n        md: ['flex-1', 'gap-4', 'px-4', 'py-6'],\n        lg: ['flex-1', 'gap-4', 'px-4', 'py-6']\n      }\n    },\n    defaultVariants: {\n      size: 'md'\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport const SegmentedControlItem = ({\n  ref,\n  children,\n  ...rest\n}: Omit<React.ComponentProps<typeof StyledItem>, 'size'>) => {\n  const { size } = React.use(SegmentedControlContext)\n\n  return (\n    <StyledItem {...rest} size={size} ref={ref}>\n      {children}\n    </StyledItem>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,aAAa,OACjB,SACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GAAC;GAAgB;GAAS;GAAQ;EAAM;EAC5C,IAAI;GAAC;GAAU;GAAS;GAAQ;EAAM;EACtC,IAAI;GAAC;GAAU;GAAS;GAAQ;EAAM;CACxC,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAa,wBAAwB,EACnC,KACA,UACA,GAAG,WACwD;CAC3D,MAAM,EAAE,SAAS,QAAM,IAAI,uBAAuB;CAElD,OACE,oBAAC,YAAD;EAAY,GAAI;EAAY;EAAW;EACpC;CACS,CAAA;AAEhB"}

package/dist/components/segmented-control/SegmentedControlItemList.js

@@ -5,24 +5,19 @@ import * as React$1 from "react";
 import { composeRefs } from "@radix-ui/react-compose-refs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/segmented-control/SegmentedControlItemList.tsx
-var StyledTriggerList = styled(Tabs.TriggerList, {
-	base: [
-		"relative",
-		"p-1",
-		"rounded-lg",
-		"overflow-hidden",
-		"[&>div[role=tablist]]:relative",
-		"[&>button]:z-2"
-	],
-	variants: { theme: {
-		primary: ["bg-primary-200"],
-		marsh: ["bg-marsh-200"]
-	} }
-});
+var StyledTriggerList = styled(Tabs.TriggerList, { base: [
+	"relative",
+	"p-1",
+	"rounded-lg",
+	"overflow-hidden",
+	"[&>div[role=tablist]]:relative",
+	"[&>button]:z-2",
+	"bg-accent-subtle-hover"
+] });
 var SelectionIndicator = styled("div", {
 	base: [
 		"absolute",
-		"bg-white",
+		"bg-surface",
 		"rounded-md"
 	],
 	variants: { interacted: {
@@ -35,7 +30,7 @@ var SelectionIndicator = styled("div", {
 	} }
 });
 var SegmentedControlItemList = (props) => {
-	const { theme, defaultValue, value } = React$1.use(SegmentedControlContext);
+	const { defaultValue, value } = React$1.use(SegmentedControlContext);
 	const tabsRef = React$1.useRef([]);
 	const selectedIndex = React$1.Children.toArray(props.children).findIndex((child) => child?.props.value === value);
 	const [indicatorStyles, setIndicatorStyles] = React$1.useState({
@@ -79,7 +74,6 @@ var SegmentedControlItemList = (props) => {
 		updateIndicatorPosition();
 	}, [selectedIndex, updateIndicatorPosition]);
 	return /* @__PURE__ */ jsxs(StyledTriggerList, {
-		theme,
 		defaultValue,
 		...props,
 		children: [/* @__PURE__ */ jsx(SelectionIndicator, {

package/dist/components/segmented-control/SegmentedControlItemList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItemList.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import { composeRefs } from '@radix-ui/react-compose-refs'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControl.context'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  base: [\n    'relative',\n    'p-1',\n    'rounded-lg',\n    'overflow-hidden',\n    '[&>div[role=tablist]]:relative',\n    '[&>button]:z-2'\n  ],\n  variants: {\n    theme: {\n      primary: ['bg-primary-200'],\n      marsh: ['bg-marsh-200']\n    }\n  }\n})\n\nconst SelectionIndicator = styled('div', {\n  base: ['absolute', 'bg-white', 'rounded-md'],\n  variants: {\n    interacted: {\n      true: ['duration-300', 'ease-in', 'transition-all'],\n      false: ['transition-none']\n    }\n  }\n})\n\nexport const SegmentedControlItemList = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n) => {\n  const { theme, defaultValue, value } = React.use(SegmentedControlContext)\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n  const selectedIndex = React.Children.toArray(props.children).findIndex(\n    (child) =>\n      (\n        child as React.ReactElement<\n          React.ComponentProps<typeof SegmentedControlItem>\n        >\n      )?.props.value === value\n  )\n\n  const [indicatorStyles, setIndicatorStyles] = React.useState({\n    left: 0,\n    height: 0,\n    width: 0\n  })\n  const [hasInteracted, setHasInteracted] = React.useState(false)\n\n  const updateIndicatorPosition = React.useCallback(() => {\n    const currentTab = tabsRef.current[selectedIndex]\n    if (!currentTab) return\n\n    const { width, height } = currentTab.getBoundingClientRect()\n    setIndicatorStyles({\n      left: Math.round(currentTab.offsetLeft),\n      height: Math.round(height),\n      width: Math.round(width)\n    })\n  }, [selectedIndex])\n\n  // Latest-ref so the ResizeObserver and window listener subscribe once per\n  // tab-count change instead of being torn down on every selection change\n  // (updateIndicatorPosition's identity tracks selectedIndex).\n  const updateIndicatorPositionRef = React.useRef(updateIndicatorPosition)\n  React.useLayoutEffect(() => {\n    updateIndicatorPositionRef.current = updateIndicatorPosition\n  })\n\n  const tabCount = React.Children.count(props.children)\n\n  React.useEffect(() => {\n    const resizeObserver = new ResizeObserver(() =>\n      updateIndicatorPositionRef.current()\n    )\n    const currentTabs = tabsRef.current\n    currentTabs.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab)\n    })\n\n    return () => {\n      resizeObserver.disconnect()\n    }\n  }, [tabCount])\n\n  React.useEffect(() => {\n    const handleResize = () => updateIndicatorPositionRef.current()\n    window.addEventListener('resize', handleResize)\n    return () => {\n      window.removeEventListener('resize', handleResize)\n    }\n  }, [])\n\n  // Layout effect: the indicator must be measured and placed before paint,\n  // or it appears at its old position for a frame and visibly jumps.\n  React.useLayoutEffect(() => {\n    updateIndicatorPosition()\n  }, [selectedIndex, updateIndicatorPosition])\n\n  return (\n    <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n      <SelectionIndicator interacted={hasInteracted} style={indicatorStyles} />\n      {React.Children.map(props.children, (child, index) => {\n        if (\n          !React.isValidElement<\n            React.ComponentProps<typeof SegmentedControlItem>\n          >(child)\n        ) {\n          throw new Error(\n            `Child passed to SegmentedControlItemList is not a valid element`\n          )\n        }\n\n        return React.cloneElement(child, {\n          onClick: (e) => {\n            setHasInteracted(true)\n            if (child.props.onClick) child.props.onClick(e)\n          },\n          // Composed so a consumer-supplied ref on the item survives the\n          // clone; the cleanup empties the slot when the item detaches.\n          ref: composeRefs(\n            (child.props as { ref?: React.Ref<HTMLElement> }).ref,\n            (el: HTMLElement | null) => {\n              tabsRef.current[index] = el\n              return () => {\n                tabsRef.current[index] = null\n              }\n            }\n          )\n        })\n      })}\n    </StyledTriggerList>\n  )\n}\n"],"mappings":";;;;;;;AAQA,IAAM,oBAAoB,OAAO,KAAK,aAAa;CACjD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,OAAO;EACL,SAAS,CAAC,gBAAgB;EAC1B,OAAO,CAAC,cAAc;CACxB,EACF;AACF,CAAC;AAED,IAAM,qBAAqB,OAAO,OAAO;CACvC,MAAM;EAAC;EAAY;EAAY;CAAY;CAC3C,UAAU,EACR,YAAY;EACV,MAAM;GAAC;GAAgB;GAAW;EAAgB;EAClD,OAAO,CAAC,iBAAiB;CAC3B,EACF;AACF,CAAC;AAED,IAAa,4BACX,UACG;CACH,MAAM,EAAE,OAAO,cAAc,UAAU,QAAM,IAAI,uBAAuB;CAExE,MAAM,UAAU,QAAM,OAA+B,CAAC,CAAC;CAEvD,MAAM,gBAAgB,QAAM,SAAS,QAAQ,MAAM,QAAQ,CAAC,CAAC,WAC1D,UAEG,OAGC,MAAM,UAAU,KACvB;CAEA,MAAM,CAAC,iBAAiB,sBAAsB,QAAM,SAAS;EAC3D,MAAM;EACN,QAAQ;EACR,OAAO;CACT,CAAC;CACD,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,KAAK;CAE9D,MAAM,0BAA0B,QAAM,kBAAkB;EACtD,MAAM,aAAa,QAAQ,QAAQ;EACnC,IAAI,CAAC,YAAY;EAEjB,MAAM,EAAE,OAAO,WAAW,WAAW,sBAAsB;EAC3D,mBAAmB;GACjB,MAAM,KAAK,MAAM,WAAW,UAAU;GACtC,QAAQ,KAAK,MAAM,MAAM;GACzB,OAAO,KAAK,MAAM,KAAK;EACzB,CAAC;CACH,GAAG,CAAC,aAAa,CAAC;CAKlB,MAAM,6BAA6B,QAAM,OAAO,uBAAuB;CACvE,QAAM,sBAAsB;EAC1B,2BAA2B,UAAU;CACvC,CAAC;CAED,MAAM,WAAW,QAAM,SAAS,MAAM,MAAM,QAAQ;CAEpD,QAAM,gBAAgB;EACpB,MAAM,iBAAiB,IAAI,qBACzB,2BAA2B,QAAQ,CACrC;EAEA,QAD4B,QAChB,SAAS,QAAQ;GAC3B,IAAI,KAAK,eAAe,QAAQ,GAAG;EACrC,CAAC;EAED,aAAa;GACX,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,QAAM,gBAAgB;EACpB,MAAM,qBAAqB,2BAA2B,QAAQ;EAC9D,OAAO,iBAAiB,UAAU,YAAY;EAC9C,aAAa;GACX,OAAO,oBAAoB,UAAU,YAAY;EACnD;CACF,GAAG,CAAC,CAAC;CAIL,QAAM,sBAAsB;EAC1B,wBAAwB;CAC1B,GAAG,CAAC,eAAe,uBAAuB,CAAC;CAE3C,OACE,qBAAC,mBAAD;EAA0B;EAAqB;EAAc,GAAI;YAAjE,CACE,oBAAC,oBAAD;GAAoB,YAAY;GAAe,OAAO;EAAkB,CAAA,GACvE,QAAM,SAAS,IAAI,MAAM,WAAW,OAAO,UAAU;GACpD,IACE,CAAC,QAAM,eAEL,KAAK,GAEP,MAAM,IAAI,MACR,iEACF;GAGF,OAAO,QAAM,aAAa,OAAO;IAC/B,UAAU,MAAM;KACd,iBAAiB,IAAI;KACrB,IAAI,MAAM,MAAM,SAAS,MAAM,MAAM,QAAQ,CAAC;IAChD;IAGA,KAAK,YACF,MAAM,MAA2C,MACjD,OAA2B;KAC1B,QAAQ,QAAQ,SAAS;KACzB,aAAa;MACX,QAAQ,QAAQ,SAAS;KAC3B;IACF,CACF;GACF,CAAC;EACH,CAAC,CACgB;;AAEvB"}
+{"version":3,"file":"SegmentedControlItemList.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import { composeRefs } from '@radix-ui/react-compose-refs'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControl.context'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  base: [\n    'relative',\n    'p-1',\n    'rounded-lg',\n    'overflow-hidden',\n    '[&>div[role=tablist]]:relative',\n    '[&>button]:z-2',\n    'bg-accent-subtle-hover'\n  ]\n})\n\nconst SelectionIndicator = styled('div', {\n  base: ['absolute', 'bg-surface', 'rounded-md'],\n  variants: {\n    interacted: {\n      true: ['duration-300', 'ease-in', 'transition-all'],\n      false: ['transition-none']\n    }\n  }\n})\n\nexport const SegmentedControlItemList = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n) => {\n  const { defaultValue, value } = React.use(SegmentedControlContext)\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n  const selectedIndex = React.Children.toArray(props.children).findIndex(\n    (child) =>\n      (\n        child as React.ReactElement<\n          React.ComponentProps<typeof SegmentedControlItem>\n        >\n      )?.props.value === value\n  )\n\n  const [indicatorStyles, setIndicatorStyles] = React.useState({\n    left: 0,\n    height: 0,\n    width: 0\n  })\n  const [hasInteracted, setHasInteracted] = React.useState(false)\n\n  const updateIndicatorPosition = React.useCallback(() => {\n    const currentTab = tabsRef.current[selectedIndex]\n    if (!currentTab) return\n\n    const { width, height } = currentTab.getBoundingClientRect()\n    setIndicatorStyles({\n      left: Math.round(currentTab.offsetLeft),\n      height: Math.round(height),\n      width: Math.round(width)\n    })\n  }, [selectedIndex])\n\n  // Latest-ref so the ResizeObserver and window listener subscribe once per\n  // tab-count change instead of being torn down on every selection change\n  // (updateIndicatorPosition's identity tracks selectedIndex).\n  const updateIndicatorPositionRef = React.useRef(updateIndicatorPosition)\n  React.useLayoutEffect(() => {\n    updateIndicatorPositionRef.current = updateIndicatorPosition\n  })\n\n  const tabCount = React.Children.count(props.children)\n\n  React.useEffect(() => {\n    const resizeObserver = new ResizeObserver(() =>\n      updateIndicatorPositionRef.current()\n    )\n    const currentTabs = tabsRef.current\n    currentTabs.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab)\n    })\n\n    return () => {\n      resizeObserver.disconnect()\n    }\n  }, [tabCount])\n\n  React.useEffect(() => {\n    const handleResize = () => updateIndicatorPositionRef.current()\n    window.addEventListener('resize', handleResize)\n    return () => {\n      window.removeEventListener('resize', handleResize)\n    }\n  }, [])\n\n  // Layout effect: the indicator must be measured and placed before paint,\n  // or it appears at its old position for a frame and visibly jumps.\n  React.useLayoutEffect(() => {\n    updateIndicatorPosition()\n  }, [selectedIndex, updateIndicatorPosition])\n\n  return (\n    <StyledTriggerList defaultValue={defaultValue} {...props}>\n      <SelectionIndicator interacted={hasInteracted} style={indicatorStyles} />\n      {React.Children.map(props.children, (child, index) => {\n        if (\n          !React.isValidElement<\n            React.ComponentProps<typeof SegmentedControlItem>\n          >(child)\n        ) {\n          throw new Error(\n            `Child passed to SegmentedControlItemList is not a valid element`\n          )\n        }\n\n        return React.cloneElement(child, {\n          onClick: (e) => {\n            setHasInteracted(true)\n            if (child.props.onClick) child.props.onClick(e)\n          },\n          // Composed so a consumer-supplied ref on the item survives the\n          // clone; the cleanup empties the slot when the item detaches.\n          ref: composeRefs(\n            (child.props as { ref?: React.Ref<HTMLElement> }).ref,\n            (el: HTMLElement | null) => {\n              tabsRef.current[index] = el\n              return () => {\n                tabsRef.current[index] = null\n              }\n            }\n          )\n        })\n      })}\n    </StyledTriggerList>\n  )\n}\n"],"mappings":";;;;;;;AAQA,IAAM,oBAAoB,OAAO,KAAK,aAAa,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,qBAAqB,OAAO,OAAO;CACvC,MAAM;EAAC;EAAY;EAAc;CAAY;CAC7C,UAAU,EACR,YAAY;EACV,MAAM;GAAC;GAAgB;GAAW;EAAgB;EAClD,OAAO,CAAC,iBAAiB;CAC3B,EACF;AACF,CAAC;AAED,IAAa,4BACX,UACG;CACH,MAAM,EAAE,cAAc,UAAU,QAAM,IAAI,uBAAuB;CAEjE,MAAM,UAAU,QAAM,OAA+B,CAAC,CAAC;CAEvD,MAAM,gBAAgB,QAAM,SAAS,QAAQ,MAAM,QAAQ,CAAC,CAAC,WAC1D,UAEG,OAGC,MAAM,UAAU,KACvB;CAEA,MAAM,CAAC,iBAAiB,sBAAsB,QAAM,SAAS;EAC3D,MAAM;EACN,QAAQ;EACR,OAAO;CACT,CAAC;CACD,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,KAAK;CAE9D,MAAM,0BAA0B,QAAM,kBAAkB;EACtD,MAAM,aAAa,QAAQ,QAAQ;EACnC,IAAI,CAAC,YAAY;EAEjB,MAAM,EAAE,OAAO,WAAW,WAAW,sBAAsB;EAC3D,mBAAmB;GACjB,MAAM,KAAK,MAAM,WAAW,UAAU;GACtC,QAAQ,KAAK,MAAM,MAAM;GACzB,OAAO,KAAK,MAAM,KAAK;EACzB,CAAC;CACH,GAAG,CAAC,aAAa,CAAC;CAKlB,MAAM,6BAA6B,QAAM,OAAO,uBAAuB;CACvE,QAAM,sBAAsB;EAC1B,2BAA2B,UAAU;CACvC,CAAC;CAED,MAAM,WAAW,QAAM,SAAS,MAAM,MAAM,QAAQ;CAEpD,QAAM,gBAAgB;EACpB,MAAM,iBAAiB,IAAI,qBACzB,2BAA2B,QAAQ,CACrC;EAEA,QAD4B,QAChB,SAAS,QAAQ;GAC3B,IAAI,KAAK,eAAe,QAAQ,GAAG;EACrC,CAAC;EAED,aAAa;GACX,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,QAAM,gBAAgB;EACpB,MAAM,qBAAqB,2BAA2B,QAAQ;EAC9D,OAAO,iBAAiB,UAAU,YAAY;EAC9C,aAAa;GACX,OAAO,oBAAoB,UAAU,YAAY;EACnD;CACF,GAAG,CAAC,CAAC;CAIL,QAAM,sBAAsB;EAC1B,wBAAwB;CAC1B,GAAG,CAAC,eAAe,uBAAuB,CAAC;CAE3C,OACE,qBAAC,mBAAD;EAAiC;EAAc,GAAI;YAAnD,CACE,oBAAC,oBAAD;GAAoB,YAAY;GAAe,OAAO;EAAkB,CAAA,GACvE,QAAM,SAAS,IAAI,MAAM,WAAW,OAAO,UAAU;GACpD,IACE,CAAC,QAAM,eAEL,KAAK,GAEP,MAAM,IAAI,MACR,iEACF;GAGF,OAAO,QAAM,aAAa,OAAO;IAC/B,UAAU,MAAM;KACd,iBAAiB,IAAI;KACrB,IAAI,MAAM,MAAM,SAAS,MAAM,MAAM,QAAQ,CAAC;IAChD;IAGA,KAAK,YACF,MAAM,MAA2C,MACjD,OAA2B;KAC1B,QAAQ,QAAQ,SAAS;KACzB,aAAa;MACX,QAAQ,QAAQ,SAAS;KAC3B;IACF,CACF;GACF,CAAC;EACH,CAAC,CACgB;;AAEvB"}

package/dist/components/segmented-control/SegmentedControlRoot.d.ts

@@ -1,10 +1,7 @@
 import * as React from 'react';
-import type { SegmentedControlTheme } from './SegmentedControl.types';
 declare const StyledSegmentedControlRoot: import("../..").PolymorphicComponent<import("../..").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement>>, unknown> & {
     TriggerList: {
-        ({ children, colorScheme, ...rest }: React.ComponentProps<import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>>, unknown>> & {
-            colorScheme?: import("../..").TcolorScheme;
-        }): React.JSX.Element;
+        ({ children, ...rest }: React.ComponentProps<import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>>, unknown>>): React.JSX.Element;
         displayName: string;
     };
     Trigger: ({ ref, children, ...rest }: React.ComponentProps<import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>, unknown>> & {
@@ -15,8 +12,6 @@ declare const StyledSegmentedControlRoot: import("../..").PolymorphicComponent<i
 }, {
     size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
 }>;
-export interface SegmentedControlRootProps extends React.ComponentProps<typeof StyledSegmentedControlRoot> {
-    theme?: SegmentedControlTheme;
-}
-export declare const SegmentedControlRoot: ({ size, theme, defaultValue, children, value, onValueChange, ...rest }: React.PropsWithChildren<SegmentedControlRootProps>) => React.JSX.Element;
+export type SegmentedControlRootProps = React.ComponentProps<typeof StyledSegmentedControlRoot>;
+export declare const SegmentedControlRoot: ({ size, defaultValue, children, value, onValueChange, ...rest }: React.PropsWithChildren<SegmentedControlRootProps>) => React.JSX.Element;
 export {};

package/dist/components/segmented-control/SegmentedControlRoot.js

@@ -12,7 +12,7 @@ var StyledSegmentedControlRoot = styled(Tabs, {
 		lg: []
 	} }
 }, { enableResponsiveVariants: true });
-var SegmentedControlRoot = ({ size, theme = "primary", defaultValue, children, value, onValueChange, ...rest }) => {
+var SegmentedControlRoot = ({ size, defaultValue, children, value, onValueChange, ...rest }) => {
 	const isControlled = value !== void 0;
 	const [internalValue, setInternalValue] = React$1.useState(defaultValue);
 	const currentValue = isControlled ? value : internalValue;
@@ -23,13 +23,11 @@ var SegmentedControlRoot = ({ size, theme = "primary", defaultValue, children, v
 	return /* @__PURE__ */ jsx(SegmentedControlContext, {
 		value: React$1.useMemo(() => ({
 			size,
-			theme,
 			defaultValue,
 			onValueChange: handleValueChange,
 			value: currentValue
 		}), [
 			size,
-			theme,
 			defaultValue,
 			handleValueChange,
 			currentValue

package/dist/components/segmented-control/SegmentedControlRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlRoot.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControl.context'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\n\nconst StyledSegmentedControlRoot = styled(\n  Tabs,\n  {\n    base: ['[&>div]:border-none'],\n    variants: {\n      size: {\n        sm: ['w-[unset]!'],\n        md: [],\n        lg: []\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport interface SegmentedControlRootProps extends React.ComponentProps<\n  typeof StyledSegmentedControlRoot\n> {\n  theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n  size,\n  theme = 'primary',\n  defaultValue,\n  children,\n  value,\n  onValueChange,\n  ...rest\n}: React.PropsWithChildren<SegmentedControlRootProps>) => {\n  const isControlled = value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? value : internalValue\n  // Fire the consumer's `onValueChange` in BOTH modes; only own internal state\n  // when uncontrolled. (Previously `isControlled ? onValueChange :\n  // setInternalValue`, which silently dropped the consumer callback in\n  // uncontrolled mode once `onValueChange` stopped leaking through `...rest`.)\n  const handleValueChange = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) setInternalValue(newValue)\n      onValueChange?.(newValue)\n    },\n    [isControlled, onValueChange]\n  )\n\n  const contextValue = React.useMemo(\n    () => ({\n      size,\n      theme,\n      defaultValue,\n      onValueChange: handleValueChange,\n      value: currentValue\n    }),\n    [size, theme, defaultValue, handleValueChange, currentValue]\n  )\n\n  return (\n    <SegmentedControlContext value={contextValue}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...rest}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext>\n  )\n}\n"],"mappings":";;;;;;AAOA,IAAM,6BAA6B,OACjC,MACA;CACE,MAAM,CAAC,qBAAqB;CAC5B,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,YAAY;EACjB,IAAI,CAAC;EACL,IAAI,CAAC;CACP,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAQA,IAAa,wBAAwB,EACnC,MACA,QAAQ,WACR,cACA,UACA,OACA,eACA,GAAG,WACqD;CACxD,MAAM,eAAe,UAAU,KAAA;CAE/B,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,YAAY;CAErE,MAAM,eAAe,eAAe,QAAQ;CAK5C,MAAM,oBAAoB,QAAM,aAC7B,aAAqB;EACpB,IAAI,CAAC,cAAc,iBAAiB,QAAQ;EAC5C,gBAAgB,QAAQ;CAC1B,GACA,CAAC,cAAc,aAAa,CAC9B;CAaA,OACE,oBAAC,yBAAD;EAAyB,OAZN,QAAM,eAClB;GACL;GACA;GACA;GACA,eAAe;GACf,OAAO;EACT,IACA;GAAC;GAAM;GAAO;GAAc;GAAmB;EAAY,CAI3B;YAC9B,oBAAC,4BAAD;GACQ;GACN,OAAO;GACP,eAAe;GACf,GAAI;GAEH;EACyB,CAAA;CACL,CAAA;AAE7B"}
+{"version":3,"file":"SegmentedControlRoot.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst StyledSegmentedControlRoot = styled(\n  Tabs,\n  {\n    base: ['[&>div]:border-none'],\n    variants: {\n      size: {\n        sm: ['w-[unset]!'],\n        md: [],\n        lg: []\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport type SegmentedControlRootProps = React.ComponentProps<\n  typeof StyledSegmentedControlRoot\n>\n\nexport const SegmentedControlRoot = ({\n  size,\n  defaultValue,\n  children,\n  value,\n  onValueChange,\n  ...rest\n}: React.PropsWithChildren<SegmentedControlRootProps>) => {\n  const isControlled = value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? value : internalValue\n  // Fire the consumer's `onValueChange` in BOTH modes; only own internal state\n  // when uncontrolled. (Previously `isControlled ? onValueChange :\n  // setInternalValue`, which silently dropped the consumer callback in\n  // uncontrolled mode once `onValueChange` stopped leaking through `...rest`.)\n  const handleValueChange = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) setInternalValue(newValue)\n      onValueChange?.(newValue)\n    },\n    [isControlled, onValueChange]\n  )\n\n  const contextValue = React.useMemo(\n    () => ({\n      size,\n      defaultValue,\n      onValueChange: handleValueChange,\n      value: currentValue\n    }),\n    [size, defaultValue, handleValueChange, currentValue]\n  )\n\n  return (\n    <SegmentedControlContext value={contextValue}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...rest}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,6BAA6B,OACjC,MACA;CACE,MAAM,CAAC,qBAAqB;CAC5B,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,YAAY;EACjB,IAAI,CAAC;EACL,IAAI,CAAC;CACP,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAMA,IAAa,wBAAwB,EACnC,MACA,cACA,UACA,OACA,eACA,GAAG,WACqD;CACxD,MAAM,eAAe,UAAU,KAAA;CAE/B,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,YAAY;CAErE,MAAM,eAAe,eAAe,QAAQ;CAK5C,MAAM,oBAAoB,QAAM,aAC7B,aAAqB;EACpB,IAAI,CAAC,cAAc,iBAAiB,QAAQ;EAC5C,gBAAgB,QAAQ;CAC1B,GACA,CAAC,cAAc,aAAa,CAC9B;CAYA,OACE,oBAAC,yBAAD;EAAyB,OAXN,QAAM,eAClB;GACL;GACA;GACA,eAAe;GACf,OAAO;EACT,IACA;GAAC;GAAM;GAAc;GAAmB;EAAY,CAIpB;YAC9B,oBAAC,4BAAD;GACQ;GACN,OAAO;GACP,eAAe;GACf,GAAI;GAEH;EACyB,CAAA;CACL,CAAA;AAE7B"}

package/dist/components/select/Select.d.ts

@@ -3,7 +3,7 @@ import type { Override } from '../../utilities/types';
 declare const StyledSelect: import("../..").StyledComponent<"select", {
     size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
     state?: ("error" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "error">>) | undefined;
-    theme?: ("grey" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "grey" | "white">>) | undefined;
+    fill?: ("subtle" | "surface" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "subtle" | "surface">>) | undefined;
     appearance?: ("modern" | "standard" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "modern" | "standard">>) | undefined;
 }>;
 export type SelectProps = Override<React.ComponentProps<typeof StyledSelect>, {