@atom-learning/components 7.0.0 → 8.0.1

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

@@ -1,8 +1,9 @@
 import { cn } from "../../styled.js";
 import { Text } from "../text/Text.js";
-import React from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/section-message/SectionMessageDescription.tsx
-var SectionMessageDescription = ({ className, ...rest }) => /* @__PURE__ */ React.createElement(Text, {
+var SectionMessageDescription = ({ className, ...rest }) => /* @__PURE__ */ jsx(Text, {
 	size: "sm",
 	...rest,
 	className: cn("text-grey-900", className)

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 React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Text } from '../text/Text'\n\nexport const SectionMessageDescription = ({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Text>): JSX.Element => (\n  <Text size=\"sm\" {...rest} className={cn('text-grey-900', className)} />\n)\n"],"mappings":";;;;AAMA,IAAa,6BAA6B,EACxC,WACA,GAAG,WAEH,sBAAA,cAAC,MAAD;CAAM,MAAK;CAAK,GAAI;CAAM,WAAW,GAAG,iBAAiB,UAAU;CAAI,CAAA"}
+{"version":3,"file":"SectionMessageDescription.js","names":[],"sources":["../../../src/components/section-message/SectionMessageDescription.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Text } from '../text/Text'\n\nexport const SectionMessageDescription = ({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Text>): React.JSX.Element => (\n  <Text size=\"sm\" {...rest} className={cn('text-grey-900', className)} />\n)\n"],"mappings":";;;;;AAMA,IAAa,6BAA6B,EACxC,WACA,GAAG,WAEH,oBAAC,MAAD;CAAM,MAAK;CAAK,GAAI;CAAM,WAAW,GAAG,iBAAiB,UAAU;CAAI,CAAA"}

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>) => JSX.Element;
+export declare const SectionMessageDismiss: ({ label, className, ...rest }: React.ComponentProps<typeof ActionIcon>) => React.JSX.Element;

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

@@ -3,7 +3,8 @@ import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { Dismissible } from "../dismissible/index.js";
 import { useSectionMessageContext } from "./SectionMessageContext.js";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
+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 }) => {
@@ -12,14 +13,18 @@ var SectionMessageDismiss = ({ label = "Dismiss", className, ...rest }) => {
 		setHasDismiss(true);
 		return () => setHasDismiss(false);
 	}, [setHasDismiss]);
-	return /* @__PURE__ */ React.createElement(Dismissible.Trigger, { asChild: true }, /* @__PURE__ */ React.createElement(ActionIcon, {
-		label,
-		size: "sm",
-		appearance: "simple",
-		theme: "neutral",
-		...rest,
-		className: cn("m-auto", "absolute", "top-2", "right-2", className)
-	}, /* @__PURE__ */ React.createElement(Icon, { is: Close })));
+	return /* @__PURE__ */ jsx(Dismissible.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(ActionIcon, {
+			label,
+			size: "sm",
+			appearance: "simple",
+			theme: "neutral",
+			...rest,
+			className: cn("m-auto", "absolute", "top-2", "right-2", className),
+			children: /* @__PURE__ */ jsx(Icon, { is: Close })
+		})
+	});
 };
 //#endregion
 export { SectionMessageDismiss };

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'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Dismissible } from '../dismissible'\nimport { Icon } from '../icon/Icon'\nimport { useSectionMessageContext } from './SectionMessageContext'\n\nexport const SectionMessageDismiss = ({\n  label = 'Dismiss',\n  className,\n  ...rest\n}: React.ComponentProps<typeof ActionIcon>): JSX.Element => {\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":";;;;;;;;AAUA,IAAa,yBAAyB,EACpC,QAAQ,WACR,WACA,GAAG,WACuD;CAC1D,MAAM,EAAE,kBAAkB,0BAA0B;AAEpD,iBAAgB;AACd,gBAAc,KAAK;AACnB,eAAa,cAAc,MAAM;IAChC,CAAC,cAAc,CAAC;AAEnB,QACE,sBAAA,cAAC,YAAY,SAAb,EAAqB,SAAA,MAWC,EAVpB,sBAAA,cAAC,YAAD;EACS;EACP,MAAK;EACL,YAAW;EACX,OAAM;EACN,GAAI;EACJ,WAAW,GAAG,UAAU,YAAY,SAAS,WAAW,UAAU;EAGvD,EADX,sBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR,CACO"}
+{"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'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Dismissible } from '../dismissible'\nimport { Icon } from '../icon/Icon'\nimport { useSectionMessageContext } from './SectionMessageContext'\n\nexport const SectionMessageDismiss = ({\n  label = 'Dismiss',\n  className,\n  ...rest\n}: React.ComponentProps<typeof ActionIcon>): React.JSX.Element => {\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":";;;;;;;;;AAUA,IAAa,yBAAyB,EACpC,QAAQ,WACR,WACA,GAAG,WAC6D;CAChE,MAAM,EAAE,kBAAkB,0BAA0B;AAEpD,iBAAgB;AACd,gBAAc,KAAK;AACnB,eAAa,cAAc,MAAM;IAChC,CAAC,cAAc,CAAC;AAEnB,QACE,oBAAC,YAAY,SAAb;EAAqB,SAAA;YACnB,oBAAC,YAAD;GACS;GACP,MAAK;GACL,YAAW;GACX,OAAM;GACN,GAAI;GACJ,WAAW,GAAG,UAAU,YAAY,SAAS,WAAW,UAAU;aAElE,oBAAC,MAAD,EAAM,IAAI,OAAS,CAAA;GACR,CAAA;EACO,CAAA"}

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { Icon } from '../icon/Icon';
 type SectionMessageIconProps = Partial<React.ComponentProps<typeof Icon>>;
-export declare const SectionMessageIcon: ({ className, is, ...rest }: SectionMessageIconProps) => JSX.Element;
+export declare const SectionMessageIcon: ({ className, is, ...rest }: SectionMessageIconProps) => React.JSX.Element;
 export {};

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

@@ -1,7 +1,8 @@
 import { cn } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { useSectionMessageContext } from "./SectionMessageContext.js";
-import React, { useEffect } from "react";
+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 = {
@@ -17,7 +18,7 @@ var SectionMessageIcon = ({ className, is, ...rest }) => {
 		setHasIcon(true);
 		return () => setHasIcon(false);
 	}, [setHasIcon]);
-	return /* @__PURE__ */ React.createElement(Icon, {
+	return /* @__PURE__ */ jsx(Icon, {
 		is: is || themeIcons[theme],
 		size: "sm",
 		...rest,

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'\n\nimport { Icon } from '../icon/Icon'\nimport { useSectionMessageContext } from './SectionMessageContext'\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): JSX.Element => {\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":";;;;;;AAQA,IAAM,aAAa;CACjB,SAAS;CACT,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;CACP;AAID,IAAa,sBAAsB,EACjC,WACA,IACA,GAAG,WACuC;CAC1C,MAAM,EAAE,OAAO,eAAe,0BAA0B;AAExD,iBAAgB;AACd,aAAW,KAAK;AAChB,eAAa,WAAW,MAAM;IAC7B,CAAC,WAAW,CAAC;AAEhB,QACE,sBAAA,cAAC,MAAD;EACE,IAAI,MAAM,WAAW;EACrB,MAAK;EACL,GAAI;EACJ,WAAW,GACT,UACA,YACA,UACA,SACA,gBACA,UACD;EACD,CAAA"}
+{"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'\n\nimport { Icon } from '../icon/Icon'\nimport { useSectionMessageContext } from './SectionMessageContext'\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): React.JSX.Element => {\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":";;;;;;;AAQA,IAAM,aAAa;CACjB,SAAS;CACT,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;CACP;AAID,IAAa,sBAAsB,EACjC,WACA,IACA,GAAG,WAC6C;CAChD,MAAM,EAAE,OAAO,eAAe,0BAA0B;AAExD,iBAAgB;AACd,aAAW,KAAK;AAChB,eAAa,WAAW,MAAM;IAC7B,CAAC,WAAW,CAAC;AAEhB,QACE,oBAAC,MAAD;EACE,IAAI,MAAM,WAAW;EACrB,MAAK;EACL,GAAI;EACJ,WAAW,GACT,UACA,YACA,UACA,SACA,gBACA,UACD;EACD,CAAA"}

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

@@ -1,7 +1,5 @@
 import React from 'react';
-export declare const SectionMessageContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, never> & {
+export declare const SectionMessageContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
     as?: React.ElementType;
 }>;
 export declare const SectionMessageActions: ({ className, ...rest }: React.ComponentProps<"div">) => React.JSX.Element;

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

@@ -1,5 +1,6 @@
 import { cn, styled } from "../../styled.js";
-import React from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/section-message/SectionMessageLayout.tsx
 var SectionMessageContent = styled("div", { base: [
 	"max-w-full",
@@ -7,10 +8,13 @@ var SectionMessageContent = styled("div", { base: [
 	"pt-0.5",
 	"*:not-last:mb-2"
 ] });
-var SectionMessageActions = ({ className, ...rest }) => /* @__PURE__ */ React.createElement("div", { className: cn("max-w-full", "shrink-0", className) }, /* @__PURE__ */ React.createElement("div", {
-	className: "flex flex-wrap gap-3",
-	...rest
-}));
+var SectionMessageActions = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: cn("max-w-full", "shrink-0", className),
+	children: /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap gap-3",
+		...rest
+	})
+});
 //#endregion
 export { SectionMessageActions, SectionMessageContent };
 

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

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageLayout.js","names":[],"sources":["../../../src/components/section-message/SectionMessageLayout.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nexport const SectionMessageContent = styled('div', {\n  base: ['max-w-full', 'shrink-0', 'pt-0.5', '*:not-last:mb-2']\n})\n\nexport const SectionMessageActions = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div className={cn('max-w-full', 'shrink-0', className)}>\n    <div className=\"flex flex-wrap gap-3\" {...rest} />\n  </div>\n)\n"],"mappings":";;;AAKA,IAAa,wBAAwB,OAAO,OAAO,EACjD,MAAM;CAAC;CAAc;CAAY;CAAU;CAAkB,EAC9D,CAAC;AAEF,IAAa,yBAAyB,EACpC,WACA,GAAG,WAEH,sBAAA,cAAC,OAAD,EAAK,WAAW,GAAG,cAAc,YAAY,UAAU,EAEjD,EADJ,sBAAA,cAAC,OAAD;CAAK,WAAU;CAAuB,GAAI;CAAQ,CAAA,CAC9C"}
+{"version":3,"file":"SectionMessageLayout.js","names":[],"sources":["../../../src/components/section-message/SectionMessageLayout.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nexport const SectionMessageContent = styled('div', {\n  base: ['max-w-full', 'shrink-0', 'pt-0.5', '*:not-last:mb-2']\n})\n\nexport const SectionMessageActions = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div className={cn('max-w-full', 'shrink-0', className)}>\n    <div className=\"flex flex-wrap gap-3\" {...rest} />\n  </div>\n)\n"],"mappings":";;;;AAKA,IAAa,wBAAwB,OAAO,OAAO,EACjD,MAAM;CAAC;CAAc;CAAY;CAAU;CAAkB,EAC9D,CAAC;AAEF,IAAa,yBAAyB,EACpC,WACA,GAAG,WAEH,oBAAC,OAAD;CAAK,WAAW,GAAG,cAAc,YAAY,UAAU;WACrD,oBAAC,OAAD;EAAK,WAAU;EAAuB,GAAI;EAAQ,CAAA;CAC9C,CAAA"}

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { Text } from '../text/Text';
-export declare const SectionMessageTitle: (props: React.ComponentProps<typeof Text>) => JSX.Element;
+export declare const SectionMessageTitle: (props: React.ComponentProps<typeof Text>) => React.JSX.Element;

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

@@ -1,7 +1,8 @@
 import { Text } from "../text/Text.js";
-import React from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/section-message/SectionMessageTitle.tsx
-var SectionMessageTitle = (props) => /* @__PURE__ */ React.createElement(Text, {
+var SectionMessageTitle = (props) => /* @__PURE__ */ jsx(Text, {
 	size: "md",
 	weight: "bold",
 	...props

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

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageTitle.js","names":[],"sources":["../../../src/components/section-message/SectionMessageTitle.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport const SectionMessageTitle = (\n  props: React.ComponentProps<typeof Text>\n): JSX.Element => <Text size=\"md\" weight=\"bold\" {...props} />\n"],"mappings":";;;AAIA,IAAa,uBACX,UACgB,sBAAA,cAAC,MAAD;CAAM,MAAK;CAAK,QAAO;CAAO,GAAI;CAAS,CAAA"}
+{"version":3,"file":"SectionMessageTitle.js","names":[],"sources":["../../../src/components/section-message/SectionMessageTitle.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport const SectionMessageTitle = (\n  props: React.ComponentProps<typeof Text>\n): React.JSX.Element => <Text size=\"md\" weight=\"bold\" {...props} />\n"],"mappings":";;;;AAIA,IAAa,uBACX,UACsB,oBAAC,MAAD;CAAM,MAAK;CAAK,QAAO;CAAO,GAAI;CAAS,CAAA"}

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

@@ -6,9 +6,7 @@ export declare const SegmentedControl: {
     } & {
         as?: import("react").ElementType;
     }, "size">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    Heading: (props: Omit<React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-        ref?: ((instance: HTMLParagraphElement | null) => void) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
-    }, "size" | "noCapsize" | "weight" | "family"> & {
+    Heading: (props: Omit<React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size" | "noCapsize" | "weight" | "family"> & {
         size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
         noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
         weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
@@ -21,10 +19,8 @@ export declare const SegmentedControl: {
         size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
     } & {
         as?: import("react").ElementType;
-    }>>, "size">) => JSX.Element;
-    Description: (props: Omit<React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-        ref?: ((instance: HTMLParagraphElement | null) => void) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
-    }, "size" | "noCapsize" | "weight" | "family"> & {
+    }>>, "size">) => React.JSX.Element;
+    Description: (props: Omit<React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size" | "noCapsize" | "weight" | "family"> & {
         size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
         noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
         weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
@@ -37,12 +33,12 @@ export declare const SegmentedControl: {
         size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
     } & {
         as?: import("react").ElementType;
-    }>>, "size">) => JSX.Element;
-    Icon: (props: Omit<React.ComponentProps<typeof import("..").Icon>, "size">) => JSX.Element;
+    }>>, "size">) => React.JSX.Element;
+    Icon: (props: Omit<React.ComponentProps<typeof import("..").Icon>, "size">) => React.JSX.Element;
     Content: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsContentProps & import("react").RefAttributes<HTMLDivElement>, never> & {
         as?: import("react").ElementType;
     }>;
-    Badge: ({ className, ...props }: Omit<React.ComponentProps<typeof import("..").Badge>, "size">) => JSX.Element;
+    Badge: ({ className, ...props }: Omit<React.ComponentProps<typeof import("..").Badge>, "size">) => React.JSX.Element;
     ItemList: (props: React.ComponentProps<{
         ({ children, colorScheme, ...rest }: React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>, never> & {
             as?: import("react").ElementType;
@@ -50,5 +46,5 @@ export declare const SegmentedControl: {
             colorScheme?: import("../..").TcolorScheme;
         }): import("react").JSX.Element;
         displayName: string;
-    }>) => JSX.Element;
+    }>) => 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, ...props }: Omit<React.ComponentProps<typeof Badge>, "size">) => JSX.Element;
+export declare const SegmentedControlBadge: ({ className, ...props }: Omit<React.ComponentProps<typeof Badge>, "size">) => React.JSX.Element;

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

@@ -2,6 +2,7 @@ import { cn } from "../../styled.js";
 import { Badge } from "../badge/Badge.js";
 import { SegmentedControlContext } from "./SegmentedControlContext.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/segmented-control/SegmentedControlBadge.tsx
 var badgeSizeMap = {
 	sm: "xs",
@@ -10,7 +11,7 @@ var badgeSizeMap = {
 };
 var SegmentedControlBadge = ({ className, ...props }) => {
 	const { size } = React$1.useContext(SegmentedControlContext);
-	return /* @__PURE__ */ React$1.createElement(Badge, {
+	return /* @__PURE__ */ jsx(Badge, {
 		...props,
 		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'\n\nimport { Badge } from '../badge/Badge'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst badgeSizeMap = {\n  sm: 'xs',\n  md: 'xs',\n  lg: 'sm'\n}\n\nexport const SegmentedControlBadge = ({\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof Badge>, 'size'>): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return (\n    <Badge\n      {...props}\n      size={badgeSizeMap[size as string]}\n      className={cn('border-none', 'font-normal', className)}\n    />\n  )\n}\n"],"mappings":";;;;;AAOA,IAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,yBAAyB,EACpC,WACA,GAAG,YACgE;CACnE,MAAM,EAAE,SAAS,QAAM,WAAW,wBAAwB;AAE1D,QACE,wBAAA,cAAC,OAAD;EACE,GAAI;EACJ,MAAM,aAAa;EACnB,WAAW,GAAG,eAAe,eAAe,UAAU;EACtD,CAAA"}
+{"version":3,"file":"SegmentedControlBadge.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlBadge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Badge } from '../badge/Badge'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst badgeSizeMap = {\n  sm: 'xs',\n  md: 'xs',\n  lg: 'sm'\n}\n\nexport const SegmentedControlBadge = ({\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof Badge>, 'size'>): React.JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return (\n    <Badge\n      {...props}\n      size={badgeSizeMap[size as string]}\n      className={cn('border-none', 'font-normal', className)}\n    />\n  )\n}\n"],"mappings":";;;;;;AAOA,IAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,yBAAyB,EACpC,WACA,GAAG,YACsE;CACzE,MAAM,EAAE,SAAS,QAAM,WAAW,wBAAwB;AAE1D,QACE,oBAAC,OAAD;EACE,GAAI;EACJ,MAAM,aAAa;EACnB,WAAW,GAAG,eAAe,eAAe,UAAU;EACtD,CAAA"}

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

@@ -1,7 +1,5 @@
 import * as React from 'react';
-declare const StyledText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-    ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
-}, "size" | "noCapsize" | "weight" | "family"> & {
+declare const StyledText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size" | "noCapsize" | "weight" | "family"> & {
     size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
     noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
@@ -15,5 +13,5 @@ declare const StyledText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Om
 } & {
     as?: React.ElementType;
 }>;
-export declare const SegmentedControlDescription: (props: Omit<React.ComponentProps<typeof StyledText>, "size">) => JSX.Element;
+export declare const SegmentedControlDescription: (props: Omit<React.ComponentProps<typeof StyledText>, "size">) => React.JSX.Element;
 export {};

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

@@ -2,6 +2,7 @@ import { styled } from "../../styled.js";
 import { Text } from "../text/Text.js";
 import { SegmentedControlContext } from "./SegmentedControlContext.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/segmented-control/SegmentedControlDescription.tsx
 var StyledText = styled(Text, {
 	base: [
@@ -17,7 +18,7 @@ var StyledText = styled(Text, {
 }, { enabledResponsiveVariants: true });
 var SegmentedControlDescription = (props) => {
 	const { size } = React$1.useContext(SegmentedControlContext);
-	return /* @__PURE__ */ React$1.createElement(StyledText, {
+	return /* @__PURE__ */ jsx(StyledText, {
 		...props,
 		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'\n\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\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  { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlDescription = (\n  props: Omit<React.ComponentProps<typeof StyledText>, 'size'>\n): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <StyledText {...props} size={size} />\n}\n"],"mappings":";;;;;AAOA,IAAM,aAAa,OACjB,MACA;CACE,MAAM;EAAC;EAAa;EAAoB;EAAc;CACtD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,iBAAiB;EACjC,IAAI,CAAC,WAAW,iBAAiB;EAClC,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,+BACX,UACgB;CAChB,MAAM,EAAE,SAAS,QAAM,WAAW,wBAAwB;AAE1D,QAAO,wBAAA,cAAC,YAAD;EAAY,GAAI;EAAa;EAAQ,CAAA"}
+{"version":3,"file":"SegmentedControlDescription.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\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  { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlDescription = (\n  props: Omit<React.ComponentProps<typeof StyledText>, 'size'>\n): React.JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <StyledText {...props} size={size} />\n}\n"],"mappings":";;;;;;AAOA,IAAM,aAAa,OACjB,MACA;CACE,MAAM;EAAC;EAAa;EAAoB;EAAc;CACtD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,iBAAiB;EACjC,IAAI,CAAC,WAAW,iBAAiB;EAClC,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,+BACX,UACsB;CACtB,MAAM,EAAE,SAAS,QAAM,WAAW,wBAAwB;AAE1D,QAAO,oBAAC,YAAD;EAAY,GAAI;EAAa;EAAQ,CAAA"}

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

@@ -1,7 +1,5 @@
 import * as React from 'react';
-declare const StyledHeading: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-    ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
-}, "size" | "noCapsize" | "weight" | "family"> & {
+declare const StyledHeading: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size" | "noCapsize" | "weight" | "family"> & {
     size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
     noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
@@ -15,5 +13,5 @@ declare const StyledHeading: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit
 } & {
     as?: React.ElementType;
 }>;
-export declare const SegmentedControlHeading: (props: Omit<React.ComponentProps<typeof StyledHeading>, "size">) => JSX.Element;
+export declare const SegmentedControlHeading: (props: Omit<React.ComponentProps<typeof StyledHeading>, "size">) => React.JSX.Element;
 export {};

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

@@ -2,6 +2,7 @@ import { styled } from "../../styled.js";
 import { Text } from "../text/Text.js";
 import { SegmentedControlContext } from "./SegmentedControlContext.js";
 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"],
@@ -13,7 +14,7 @@ var StyledHeading = styled(Text, {
 }, { enabledResponsiveVariants: true });
 var SegmentedControlHeading = (props) => {
 	const { size } = React$1.useContext(SegmentedControlContext);
-	return /* @__PURE__ */ React$1.createElement(StyledHeading, {
+	return /* @__PURE__ */ jsx(StyledHeading, {
 		...props,
 		size
 	});

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'\n\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\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  { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlHeading = (\n  props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <StyledHeading {...props} size={size} />\n}\n"],"mappings":";;;;;AAOA,IAAM,gBAAgB,OACpB,MACA;CACE,MAAM,CAAC,aAAa,oBAAoB;CACxC,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,iBAAiB;EACjC,IAAI,CAAC,WAAW,iBAAiB;EACjC,IAAI,CAAC,WAAW,iBAAiB;EAClC,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,2BACX,UACgB;CAChB,MAAM,EAAE,SAAS,QAAM,WAAW,wBAAwB;AAE1D,QAAO,wBAAA,cAAC,eAAD;EAAe,GAAI;EAAa;EAAQ,CAAA"}
+{"version":3,"file":"SegmentedControlHeading.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\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  { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlHeading = (\n  props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n): React.JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <StyledHeading {...props} size={size} />\n}\n"],"mappings":";;;;;;AAOA,IAAM,gBAAgB,OACpB,MACA;CACE,MAAM,CAAC,aAAa,oBAAoB;CACxC,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,iBAAiB;EACjC,IAAI,CAAC,WAAW,iBAAiB;EACjC,IAAI,CAAC,WAAW,iBAAiB;EAClC,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,2BACX,UACsB;CACtB,MAAM,EAAE,SAAS,QAAM,WAAW,wBAAwB;AAE1D,QAAO,oBAAC,eAAD;EAAe,GAAI;EAAa;EAAQ,CAAA"}

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

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { Icon } from '../icon/Icon';
-export declare const SegmentedControlIcon: (props: Omit<React.ComponentProps<typeof Icon>, "size">) => JSX.Element;
+export declare const SegmentedControlIcon: (props: Omit<React.ComponentProps<typeof Icon>, "size">) => React.JSX.Element;

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

@@ -1,6 +1,7 @@
 import { Icon } from "../icon/Icon.js";
 import { SegmentedControlContext } from "./SegmentedControlContext.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/segmented-control/SegmentedControlIcon.tsx
 var sizeMap = {
 	sm: "sm",
@@ -9,7 +10,7 @@ var sizeMap = {
 };
 var SegmentedControlIcon = (props) => {
 	const { size } = React$1.useContext(SegmentedControlContext);
-	return /* @__PURE__ */ React$1.createElement(Icon, {
+	return /* @__PURE__ */ jsx(Icon, {
 		...props,
 		size: sizeMap[size]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlIcon.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '../icon/Icon'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst sizeMap = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md'\n}\n\nexport const SegmentedControlIcon = (\n  props: Omit<React.ComponentProps<typeof Icon>, 'size'>\n): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <Icon {...props} size={sizeMap[size as string]} />\n}\n"],"mappings":";;;;AAKA,IAAM,UAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,wBACX,UACgB;CAChB,MAAM,EAAE,SAAS,QAAM,WAAW,wBAAwB;AAE1D,QAAO,wBAAA,cAAC,MAAD;EAAM,GAAI;EAAO,MAAM,QAAQ;EAAmB,CAAA"}
+{"version":3,"file":"SegmentedControlIcon.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '../icon/Icon'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst sizeMap = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md'\n}\n\nexport const SegmentedControlIcon = (\n  props: Omit<React.ComponentProps<typeof Icon>, 'size'>\n): React.JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <Icon {...props} size={sizeMap[size as string]} />\n}\n"],"mappings":";;;;;AAKA,IAAM,UAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,wBACX,UACsB;CACtB,MAAM,EAAE,SAAS,QAAM,WAAW,wBAAwB;AAE1D,QAAO,oBAAC,MAAD;EAAM,GAAI;EAAO,MAAM,QAAQ;EAAmB,CAAA"}

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

@@ -1,6 +1,7 @@
 import { styled } from "../../styled.js";
 import { SegmentedControlContext } from "./SegmentedControlContext.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 import { Trigger } from "@radix-ui/react-tabs";
 //#region src/components/segmented-control/SegmentedControlItem.tsx
 var StyledItem = styled(Trigger, {
@@ -64,12 +65,13 @@ var StyledItem = styled(Trigger, {
 }, { enabledResponsiveVariants: true });
 var SegmentedControlItem = React$1.forwardRef(({ children, ...props }, ref) => {
 	const { size, theme } = React$1.useContext(SegmentedControlContext);
-	return /* @__PURE__ */ React$1.createElement(StyledItem, {
+	return /* @__PURE__ */ jsx(StyledItem, {
 		...props,
 		theme,
 		size,
-		ref
-	}, children);
+		ref,
+		children
+	});
 });
 SegmentedControlItem.displayName = "SegmentedControlItem";
 //#endregion

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'\n\nimport { SegmentedControlContext } from './SegmentedControlContext'\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  { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlItem = React.forwardRef<\n  HTMLButtonElement,\n  Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n  const { size, theme } = React.useContext(SegmentedControlContext)\n\n  return (\n    <StyledItem {...props} theme={theme} size={size} ref={ref}>\n      {children}\n    </StyledItem>\n  )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"mappings":";;;;;AAOA,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;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS,CACP,8CACA,mCACD;GACD,OAAO,CACL,4CACA,iCACD;GACF;EACD,MAAM;GACJ,IAAI;IAAC;IAAgB;IAAS;IAAQ;IAAO;GAC7C,IAAI;IAAC;IAAU;IAAS;IAAQ;IAAO;GACvC,IAAI;IAAC;IAAU;IAAS;IAAQ;IAAO;GACxC;EACF;CACD,iBAAiB;EACf,MAAM;EACN,OAAO;EACR;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,uBAAuB,QAAM,YAGvC,EAAE,UAAU,GAAG,SAAS,QAAQ;CACjC,MAAM,EAAE,MAAM,UAAU,QAAM,WAAW,wBAAwB;AAEjE,QACE,wBAAA,cAAC,YAAD;EAAY,GAAI;EAAc;EAAa;EAAW;EAEzC,EADV,SACU;EAEf;AAEF,qBAAqB,cAAc"}
+{"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'\n\nimport { SegmentedControlContext } from './SegmentedControlContext'\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  { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlItem = React.forwardRef<\n  HTMLButtonElement,\n  Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n  const { size, theme } = React.useContext(SegmentedControlContext)\n\n  return (\n    <StyledItem {...props} theme={theme} size={size} ref={ref}>\n      {children}\n    </StyledItem>\n  )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"mappings":";;;;;;AAOA,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;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS,CACP,8CACA,mCACD;GACD,OAAO,CACL,4CACA,iCACD;GACF;EACD,MAAM;GACJ,IAAI;IAAC;IAAgB;IAAS;IAAQ;IAAO;GAC7C,IAAI;IAAC;IAAU;IAAS;IAAQ;IAAO;GACvC,IAAI;IAAC;IAAU;IAAS;IAAQ;IAAO;GACxC;EACF;CACD,iBAAiB;EACf,MAAM;EACN,OAAO;EACR;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,uBAAuB,QAAM,YAGvC,EAAE,UAAU,GAAG,SAAS,QAAQ;CACjC,MAAM,EAAE,MAAM,UAAU,QAAM,WAAW,wBAAwB;AAEjE,QACE,oBAAC,YAAD;EAAY,GAAI;EAAc;EAAa;EAAW;EACnD;EACU,CAAA;EAEf;AAEF,qBAAqB,cAAc"}

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

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { Tabs } from '../tabs/Tabs';
-export declare const SegmentedControlItemList: (props: React.ComponentProps<typeof Tabs.TriggerList>) => JSX.Element;
+export declare const SegmentedControlItemList: (props: React.ComponentProps<typeof Tabs.TriggerList>) => React.JSX.Element;

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

@@ -2,6 +2,7 @@ import { styled } from "../../styled.js";
 import { Tabs } from "../tabs/Tabs.js";
 import { SegmentedControlContext } from "./SegmentedControlContext.js";
 import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/segmented-control/SegmentedControlItemList.tsx
 var StyledTriggerList = styled(Tabs.TriggerList, {
 	base: [
@@ -74,23 +75,26 @@ var SegmentedControlItemList = (props) => {
 	React$1.useEffect(() => {
 		updateIndicatorPosition();
 	}, [selectedIndex, updateIndicatorPosition]);
-	return /* @__PURE__ */ React$1.createElement(StyledTriggerList, {
+	return /* @__PURE__ */ jsxs(StyledTriggerList, {
 		theme,
 		defaultValue,
-		...props
-	}, /* @__PURE__ */ React$1.createElement(SelectionIndicator, {
-		interacted: hasInteracted,
-		style: indicatorStyles
-	}), React$1.Children.map(props.children, (child, index) => {
-		if (!React$1.isValidElement(child)) throw new Error(`Child passed to SegmentedControlItemList is not a valid element`);
-		return React$1.cloneElement(child, {
-			onClick: (e) => {
-				setHasInteracted(true);
-				if (child.props.onClick) child.props.onClick(e);
-			},
-			ref: (el) => tabsRef.current[index] = el
-		});
-	}));
+		...props,
+		children: [/* @__PURE__ */ jsx(SelectionIndicator, {
+			interacted: hasInteracted,
+			style: indicatorStyles
+		}), React$1.Children.map(props.children, (child, index) => {
+			if (!React$1.isValidElement(child)) throw new Error(`Child passed to SegmentedControlItemList is not a valid element`);
+			return React$1.cloneElement(child, {
+				onClick: (e) => {
+					setHasInteracted(true);
+					if (child.props.onClick) child.props.onClick(e);
+				},
+				ref: (el) => {
+					tabsRef.current[index] = el;
+				}
+			});
+		})]
+	});
 };
 //#endregion
 export { SegmentedControlItemList };

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 * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\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): JSX.Element => {\n  const { theme, defaultValue, value } = React.useContext(\n    SegmentedControlContext\n  )\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n  const selectedIndex = React.Children.toArray(props.children).findIndex(\n    (child) => (child as React.ReactElement)?.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  React.useEffect(() => {\n    const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n    const currentTabs = tabsRef.current\n    currentTabs.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab)\n    })\n\n    return () => {\n      currentTabs.forEach((tab) => {\n        if (tab) resizeObserver.unobserve(tab)\n      })\n      resizeObserver.disconnect()\n    }\n  }, [selectedIndex, updateIndicatorPosition])\n\n  React.useEffect(() => {\n    window.addEventListener('resize', updateIndicatorPosition)\n    return () => {\n      window.removeEventListener('resize', updateIndicatorPosition)\n    }\n  }, [updateIndicatorPosition])\n\n  React.useEffect(() => {\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 (!React.isValidElement(child)) {\n          throw new Error(\n            `Child passed to SegmentedControlItemList is not a valid element`\n          )\n        }\n\n        return React.cloneElement(\n          child as React.ReactElement<\n            React.ComponentProps<typeof SegmentedControlItem>\n          >,\n          {\n            onClick: (e) => {\n              setHasInteracted(true)\n              if (child.props.onClick) child.props.onClick(e)\n            },\n            ref: (el) => (tabsRef.current[index] = el)\n          }\n        )\n      })}\n    </StyledTriggerList>\n  )\n}\n"],"mappings":";;;;;AAQA,IAAM,oBAAoB,OAAO,KAAK,aAAa;CACjD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,OAAO;EACL,SAAS,CAAC,iBAAiB;EAC3B,OAAO,CAAC,eAAe;EACxB,EACF;CACF,CAAC;AAEF,IAAM,qBAAqB,OAAO,OAAO;CACvC,MAAM;EAAC;EAAY;EAAY;EAAa;CAC5C,UAAU,EACR,YAAY;EACV,MAAM;GAAC;GAAgB;GAAW;GAAiB;EACnD,OAAO,CAAC,kBAAkB;EAC3B,EACF;CACF,CAAC;AAEF,IAAa,4BACX,UACgB;CAChB,MAAM,EAAE,OAAO,cAAc,UAAU,QAAM,WAC3C,wBACD;CAED,MAAM,UAAU,QAAM,OAA+B,EAAE,CAAC;CAExD,MAAM,gBAAgB,QAAM,SAAS,QAAQ,MAAM,SAAS,CAAC,WAC1D,UAAW,OAA8B,MAAM,UAAU,MAC3D;CAED,MAAM,CAAC,iBAAiB,sBAAsB,QAAM,SAAS;EAC3D,MAAM;EACN,QAAQ;EACR,OAAO;EACR,CAAC;CACF,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,MAAM;CAE/D,MAAM,0BAA0B,QAAM,kBAAkB;EACtD,MAAM,aAAa,QAAQ,QAAQ;AACnC,MAAI,CAAC,WAAY;EAEjB,MAAM,EAAE,OAAO,WAAW,WAAW,uBAAuB;AAC5D,qBAAmB;GACjB,MAAM,KAAK,MAAM,WAAW,WAAW;GACvC,QAAQ,KAAK,MAAM,OAAO;GAC1B,OAAO,KAAK,MAAM,MAAM;GACzB,CAAC;IACD,CAAC,cAAc,CAAC;AAEnB,SAAM,gBAAgB;EACpB,MAAM,iBAAiB,IAAI,eAAe,wBAAwB;EAClE,MAAM,cAAc,QAAQ;AAC5B,cAAY,SAAS,QAAQ;AAC3B,OAAI,IAAK,gBAAe,QAAQ,IAAI;IACpC;AAEF,eAAa;AACX,eAAY,SAAS,QAAQ;AAC3B,QAAI,IAAK,gBAAe,UAAU,IAAI;KACtC;AACF,kBAAe,YAAY;;IAE5B,CAAC,eAAe,wBAAwB,CAAC;AAE5C,SAAM,gBAAgB;AACpB,SAAO,iBAAiB,UAAU,wBAAwB;AAC1D,eAAa;AACX,UAAO,oBAAoB,UAAU,wBAAwB;;IAE9D,CAAC,wBAAwB,CAAC;AAE7B,SAAM,gBAAgB;AACpB,2BAAyB;IACxB,CAAC,eAAe,wBAAwB,CAAC;AAE5C,QACE,wBAAA,cAAC,mBAAD;EAA0B;EAAqB;EAAc,GAAI;EAsB7C,EArBlB,wBAAA,cAAC,oBAAD;EAAoB,YAAY;EAAe,OAAO;EAAmB,CAAA,EACxE,QAAM,SAAS,IAAI,MAAM,WAAW,OAAO,UAAU;AACpD,MAAI,CAAC,QAAM,eAAe,MAAM,CAC9B,OAAM,IAAI,MACR,kEACD;AAGH,SAAO,QAAM,aACX,OAGA;GACE,UAAU,MAAM;AACd,qBAAiB,KAAK;AACtB,QAAI,MAAM,MAAM,QAAS,OAAM,MAAM,QAAQ,EAAE;;GAEjD,MAAM,OAAQ,QAAQ,QAAQ,SAAS;GACxC,CACF;GACD,CACgB"}
+{"version":3,"file":"SegmentedControlItemList.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\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): React.JSX.Element => {\n  const { theme, defaultValue, value } = React.useContext(\n    SegmentedControlContext\n  )\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  React.useEffect(() => {\n    const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n    const currentTabs = tabsRef.current\n    currentTabs.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab)\n    })\n\n    return () => {\n      currentTabs.forEach((tab) => {\n        if (tab) resizeObserver.unobserve(tab)\n      })\n      resizeObserver.disconnect()\n    }\n  }, [selectedIndex, updateIndicatorPosition])\n\n  React.useEffect(() => {\n    window.addEventListener('resize', updateIndicatorPosition)\n    return () => {\n      window.removeEventListener('resize', updateIndicatorPosition)\n    }\n  }, [updateIndicatorPosition])\n\n  React.useEffect(() => {\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          ref: (el: HTMLElement | null) => {\n            tabsRef.current[index] = el\n          }\n        })\n      })}\n    </StyledTriggerList>\n  )\n}\n"],"mappings":";;;;;;AAQA,IAAM,oBAAoB,OAAO,KAAK,aAAa;CACjD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,OAAO;EACL,SAAS,CAAC,iBAAiB;EAC3B,OAAO,CAAC,eAAe;EACxB,EACF;CACF,CAAC;AAEF,IAAM,qBAAqB,OAAO,OAAO;CACvC,MAAM;EAAC;EAAY;EAAY;EAAa;CAC5C,UAAU,EACR,YAAY;EACV,MAAM;GAAC;GAAgB;GAAW;GAAiB;EACnD,OAAO,CAAC,kBAAkB;EAC3B,EACF;CACF,CAAC;AAEF,IAAa,4BACX,UACsB;CACtB,MAAM,EAAE,OAAO,cAAc,UAAU,QAAM,WAC3C,wBACD;CAED,MAAM,UAAU,QAAM,OAA+B,EAAE,CAAC;CAExD,MAAM,gBAAgB,QAAM,SAAS,QAAQ,MAAM,SAAS,CAAC,WAC1D,UAEG,OAGC,MAAM,UAAU,MACtB;CAED,MAAM,CAAC,iBAAiB,sBAAsB,QAAM,SAAS;EAC3D,MAAM;EACN,QAAQ;EACR,OAAO;EACR,CAAC;CACF,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,MAAM;CAE/D,MAAM,0BAA0B,QAAM,kBAAkB;EACtD,MAAM,aAAa,QAAQ,QAAQ;AACnC,MAAI,CAAC,WAAY;EAEjB,MAAM,EAAE,OAAO,WAAW,WAAW,uBAAuB;AAC5D,qBAAmB;GACjB,MAAM,KAAK,MAAM,WAAW,WAAW;GACvC,QAAQ,KAAK,MAAM,OAAO;GAC1B,OAAO,KAAK,MAAM,MAAM;GACzB,CAAC;IACD,CAAC,cAAc,CAAC;AAEnB,SAAM,gBAAgB;EACpB,MAAM,iBAAiB,IAAI,eAAe,wBAAwB;EAClE,MAAM,cAAc,QAAQ;AAC5B,cAAY,SAAS,QAAQ;AAC3B,OAAI,IAAK,gBAAe,QAAQ,IAAI;IACpC;AAEF,eAAa;AACX,eAAY,SAAS,QAAQ;AAC3B,QAAI,IAAK,gBAAe,UAAU,IAAI;KACtC;AACF,kBAAe,YAAY;;IAE5B,CAAC,eAAe,wBAAwB,CAAC;AAE5C,SAAM,gBAAgB;AACpB,SAAO,iBAAiB,UAAU,wBAAwB;AAC1D,eAAa;AACX,UAAO,oBAAoB,UAAU,wBAAwB;;IAE9D,CAAC,wBAAwB,CAAC;AAE7B,SAAM,gBAAgB;AACpB,2BAAyB;IACxB,CAAC,eAAe,wBAAwB,CAAC;AAE5C,QACE,qBAAC,mBAAD;EAA0B;EAAqB;EAAc,GAAI;YAAjE,CACE,oBAAC,oBAAD;GAAoB,YAAY;GAAe,OAAO;GAAmB,CAAA,EACxE,QAAM,SAAS,IAAI,MAAM,WAAW,OAAO,UAAU;AACpD,OACE,CAAC,QAAM,eAEL,MAAM,CAER,OAAM,IAAI,MACR,kEACD;AAGH,UAAO,QAAM,aAAa,OAAO;IAC/B,UAAU,MAAM;AACd,sBAAiB,KAAK;AACtB,SAAI,MAAM,MAAM,QAAS,OAAM,MAAM,QAAQ,EAAE;;IAEjD,MAAM,OAA2B;AAC/B,aAAQ,QAAQ,SAAS;;IAE5B,CAAC;IACF,CACgB"}

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

@@ -2,6 +2,7 @@ import { styled } from "../../styled.js";
 import { Tabs } from "../tabs/Tabs.js";
 import { SegmentedControlContext } from "./SegmentedControlContext.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/segmented-control/SegmentedControlRoot.tsx
 var StyledSegmentedControlRoot = styled(Tabs, {
 	base: ["[&>div]:border-none"],
@@ -32,12 +33,16 @@ var SegmentedControlRoot = ({ size, theme = "primary", defaultValue, children, .
 		handleValueChange,
 		currentValue
 	]);
-	return /* @__PURE__ */ React$1.createElement(SegmentedControlContext.Provider, { value }, /* @__PURE__ */ React$1.createElement(StyledSegmentedControlRoot, {
-		size,
-		value: currentValue,
-		onValueChange: handleValueChange,
-		...props
-	}, children));
+	return /* @__PURE__ */ jsx(SegmentedControlContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx(StyledSegmentedControlRoot, {
+			size,
+			value: currentValue,
+			onValueChange: handleValueChange,
+			...props,
+			children
+		})
+	});
 };
 //#endregion
 export { SegmentedControlRoot };

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'\n\nimport { Tabs } from '../tabs/Tabs'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\nimport { SegmentedControlContext } from './SegmentedControlContext'\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  { enabledResponsiveVariants: 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  ...props\n}: React.PropsWithChildren<SegmentedControlRootProps>): React.JSX.Element => {\n  const isControlled = props.value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? props.value : internalValue\n  const handleValueChange = isControlled\n    ? props.onValueChange\n    : setInternalValue\n\n  React.useEffect(() => {\n    if (!isControlled && defaultValue) {\n      setInternalValue(defaultValue)\n    }\n  }, [defaultValue, isControlled])\n\n  const value = 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.Provider value={value}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...props}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext.Provider>\n  )\n}\n"],"mappings":";;;;;AAQA,IAAM,6BAA6B,OACjC,MACA;CACE,MAAM,CAAC,sBAAsB;CAC7B,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,aAAa;EAClB,IAAI,EAAE;EACN,IAAI,EAAE;EACP,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAQD,IAAa,wBAAwB,EACnC,MACA,QAAQ,WACR,cACA,UACA,GAAG,YACwE;CAC3E,MAAM,eAAe,MAAM,UAAU,KAAA;CAErC,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,aAAa;CAEtE,MAAM,eAAe,eAAe,MAAM,QAAQ;CAClD,MAAM,oBAAoB,eACtB,MAAM,gBACN;AAEJ,SAAM,gBAAgB;AACpB,MAAI,CAAC,gBAAgB,aACnB,kBAAiB,aAAa;IAE/B,CAAC,cAAc,aAAa,CAAC;CAEhC,MAAM,QAAQ,QAAM,eACX;EACL;EACA;EACA;EACA,eAAe;EACf,OAAO;EACR,GACD;EAAC;EAAM;EAAO;EAAc;EAAmB;EAAa,CAC7D;AAED,QACE,wBAAA,cAAC,wBAAwB,UAAzB,EAAyC,OASN,EARjC,wBAAA,cAAC,4BAAD;EACQ;EACN,OAAO;EACP,eAAe;EACf,GAAI;EAGuB,EAD1B,SAC0B,CACI"}
+{"version":3,"file":"SegmentedControlRoot.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs/Tabs'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\nimport { SegmentedControlContext } from './SegmentedControlContext'\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  { enabledResponsiveVariants: 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  ...props\n}: React.PropsWithChildren<SegmentedControlRootProps>): React.JSX.Element => {\n  const isControlled = props.value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? props.value : internalValue\n  const handleValueChange = isControlled\n    ? props.onValueChange\n    : setInternalValue\n\n  React.useEffect(() => {\n    if (!isControlled && defaultValue) {\n      setInternalValue(defaultValue)\n    }\n  }, [defaultValue, isControlled])\n\n  const value = 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.Provider value={value}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...props}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext.Provider>\n  )\n}\n"],"mappings":";;;;;;AAQA,IAAM,6BAA6B,OACjC,MACA;CACE,MAAM,CAAC,sBAAsB;CAC7B,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,aAAa;EAClB,IAAI,EAAE;EACN,IAAI,EAAE;EACP,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAQD,IAAa,wBAAwB,EACnC,MACA,QAAQ,WACR,cACA,UACA,GAAG,YACwE;CAC3E,MAAM,eAAe,MAAM,UAAU,KAAA;CAErC,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,aAAa;CAEtE,MAAM,eAAe,eAAe,MAAM,QAAQ;CAClD,MAAM,oBAAoB,eACtB,MAAM,gBACN;AAEJ,SAAM,gBAAgB;AACpB,MAAI,CAAC,gBAAgB,aACnB,kBAAiB,aAAa;IAE/B,CAAC,cAAc,aAAa,CAAC;CAEhC,MAAM,QAAQ,QAAM,eACX;EACL;EACA;EACA;EACA,eAAe;EACf,OAAO;EACR,GACD;EAAC;EAAM;EAAO;EAAc;EAAmB;EAAa,CAC7D;AAED,QACE,oBAAC,wBAAwB,UAAzB;EAAyC;YACvC,oBAAC,4BAAD;GACQ;GACN,OAAO;GACP,eAAe;GACf,GAAI;GAEH;GAC0B,CAAA;EACI,CAAA"}

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { Override } from '../../utilities/types';
-declare const StyledSelect: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
-    ref?: ((instance: HTMLSelectElement | null) => void) | React.RefObject<HTMLSelectElement> | null | undefined;
-}, "appearance" | "size" | "theme" | "state"> & {
+declare const StyledSelect: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "appearance" | "size" | "theme" | "state"> & {
     size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
     state?: ("error" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "error">>) | undefined;
     theme?: ("grey" | "white" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "grey" | "white">>) | undefined;