@atom-learning/components 8.0.3 → 8.1.1

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

@@ -1,6 +1,6 @@
 import { cn } from "../../styled.js";
 import { Badge } from "../badge/Badge.js";
-import { SegmentedControlContext } from "./SegmentedControlContext.js";
+import { SegmentedControlContext } from "./SegmentedControl.context.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/segmented-control/SegmentedControlBadge.tsx
@@ -9,10 +9,10 @@ var badgeSizeMap = {
 	md: "xs",
 	lg: "sm"
 };
-var SegmentedControlBadge = ({ className, ...props }) => {
+var SegmentedControlBadge = ({ className, ...rest }) => {
 	const { size } = React$1.useContext(SegmentedControlContext);
 	return /* @__PURE__ */ jsx(Badge, {
-		...props,
+		...rest,
 		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'>): 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"}
+{"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.useContext(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,WAAW,uBAAuB;CAEzD,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,MAAM,aAAa;EACnB,WAAW,GAAG,eAAe,eAAe,SAAS;CACtD,CAAA;AAEL"}

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

@@ -1,4 +1,5 @@
 import { Tabs } from "../tabs/Tabs.js";
+import "react";
 //#region src/components/segmented-control/SegmentedControlContent.tsx
 var SegmentedControlContent = Tabs.Content;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlContent.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlContent.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Tabs } from '../tabs/Tabs'\n\nexport const SegmentedControlContent = Tabs.Content\n"],"mappings":";;AAIA,IAAa,0BAA0B,KAAK"}
+{"version":3,"file":"SegmentedControlContent.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlContent.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Tabs } from '../tabs/Tabs'\n\nexport const SegmentedControlContent = Tabs.Content\n"],"mappings":";;;AAIA,IAAa,0BAA0B,KAAK"}

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

@@ -1,17 +1,17 @@
 import * as React from 'react';
-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;
-    family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
+declare const StyledText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "family" | "noCapsize" | "size" | "weight"> & {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
 } & {
     as?: React.ElementType;
 }, "as"> & {
-    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+    as?: 'blockquote' | 'caption' | 'dd' | 'dt' | 'figcaption' | 'li' | 'p' | 'span' | 'legend' | React.ComponentType | React.ElementType;
 }, "ref"> & React.RefAttributes<HTMLParagraphElement>, "size"> & {
-    size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
+    size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
 } & {
     as?: React.ElementType;
 }>;
-export declare const SegmentedControlDescription: (props: Omit<React.ComponentProps<typeof StyledText>, "size">) => React.JSX.Element;
+export declare const SegmentedControlDescription: (props: Omit<React.ComponentProps<typeof StyledText>, 'size'>) => React.JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
 import { styled } from "../../styled.js";
 import { Text } from "../text/Text.js";
-import { SegmentedControlContext } from "./SegmentedControlContext.js";
+import { SegmentedControlContext } from "./SegmentedControl.context.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/segmented-control/SegmentedControlDescription.tsx

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): 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"}
+{"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  { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlDescription = (\n  props: Omit<React.ComponentProps<typeof StyledText>, 'size'>\n) => {\n  const { size } = React.useContext(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,2BAA2B,KAAK,CACpC;AAEA,IAAa,+BACX,UACG;CACH,MAAM,EAAE,SAAS,QAAM,WAAW,uBAAuB;CAEzD,OAAO,oBAAC,YAAD;EAAY,GAAI;EAAa;CAAO,CAAA;AAC7C"}

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

@@ -1,17 +1,17 @@
 import * as React from 'react';
-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;
-    family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
+declare const StyledHeading: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "family" | "noCapsize" | "size" | "weight"> & {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
 } & {
     as?: React.ElementType;
 }, "as"> & {
-    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+    as?: 'blockquote' | 'caption' | 'dd' | 'dt' | 'figcaption' | 'li' | 'p' | 'span' | 'legend' | React.ComponentType | React.ElementType;
 }, "ref"> & React.RefAttributes<HTMLParagraphElement>, "size"> & {
-    size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
+    size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
 } & {
     as?: React.ElementType;
 }>;
-export declare const SegmentedControlHeading: (props: Omit<React.ComponentProps<typeof StyledHeading>, "size">) => React.JSX.Element;
+export declare const SegmentedControlHeading: (props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>) => React.JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
 import { styled } from "../../styled.js";
 import { Text } from "../text/Text.js";
-import { SegmentedControlContext } from "./SegmentedControlContext.js";
+import { SegmentedControlContext } from "./SegmentedControl.context.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/segmented-control/SegmentedControlHeading.tsx

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): 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"}
+{"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  { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlHeading = (\n  props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n) => {\n  const { size } = React.useContext(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,2BAA2B,KAAK,CACpC;AAEA,IAAa,2BACX,UACG;CACH,MAAM,EAAE,SAAS,QAAM,WAAW,uBAAuB;CAEzD,OAAO,oBAAC,eAAD;EAAe,GAAI;EAAa;CAAO,CAAA;AAChD"}

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">) => React.JSX.Element;
+export declare const SegmentedControlIcon: (props: Omit<React.ComponentProps<typeof Icon>, 'size'>) => React.JSX.Element;

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

@@ -1,5 +1,5 @@
 import { Icon } from "../icon/Icon.js";
-import { SegmentedControlContext } from "./SegmentedControlContext.js";
+import { SegmentedControlContext } from "./SegmentedControl.context.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/segmented-control/SegmentedControlIcon.tsx

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): 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"}
+{"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 './SegmentedControl.context'\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) => {\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;AACN;AAEA,IAAa,wBACX,UACG;CACH,MAAM,EAAE,SAAS,QAAM,WAAW,uBAAuB;CAEzD,OAAO,oBAAC,MAAD;EAAM,GAAI;EAAO,MAAM,QAAQ;CAAkB,CAAA;AAC1D"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export declare const SegmentedControlItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "size" | "theme"> & {
-    theme?: ("primary" | "marsh" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "marsh">>) | undefined;
-    size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
+    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;
 } & {
     as?: React.ElementType;
 }, "size">, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,5 +1,5 @@
 import { styled } from "../../styled.js";
-import { SegmentedControlContext } from "./SegmentedControlContext.js";
+import { SegmentedControlContext } from "./SegmentedControl.context.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { Trigger } from "@radix-ui/react-tabs";
@@ -63,10 +63,10 @@ var StyledItem = styled(Trigger, {
 		theme: "primary"
 	}
 }, { enabledResponsiveVariants: true });
-var SegmentedControlItem = React$1.forwardRef(({ children, ...props }, ref) => {
+var SegmentedControlItem = React$1.forwardRef(({ children, ...rest }, ref) => {
 	const { size, theme } = React$1.useContext(SegmentedControlContext);
 	return /* @__PURE__ */ jsx(StyledItem, {
-		...props,
+		...rest,
 		theme,
 		size,
 		ref,

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,oBAAC,YAAD;EAAY,GAAI;EAAc;EAAa;EAAW;EACnD;EACU,CAAA;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'\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  { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlItem = React.forwardRef<\n  HTMLButtonElement,\n  Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...rest }, ref) => {\n  const { size, theme } = React.useContext(SegmentedControlContext)\n\n  return (\n    <StyledItem {...rest} theme={theme} size={size} ref={ref}>\n      {children}\n    </StyledItem>\n  )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\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,2BAA2B,KAAK,CACpC;AAEA,IAAa,uBAAuB,QAAM,YAGvC,EAAE,UAAU,GAAG,QAAQ,QAAQ;CAChC,MAAM,EAAE,MAAM,UAAU,QAAM,WAAW,uBAAuB;CAEhE,OACE,oBAAC,YAAD;EAAY,GAAI;EAAa;EAAa;EAAW;EAClD;CACS,CAAA;AAEhB,CAAC;AAED,qBAAqB,cAAc"}

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

@@ -1,6 +1,6 @@
 import { styled } from "../../styled.js";
 import { Tabs } from "../tabs/Tabs.js";
-import { SegmentedControlContext } from "./SegmentedControlContext.js";
+import { SegmentedControlContext } from "./SegmentedControl.context.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/segmented-control/SegmentedControlItemList.tsx

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): 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"}
+{"version":3,"file":"SegmentedControlItemList.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import * 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.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":";;;;;;AAOA,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,WAC3C,uBACF;CAEA,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;CAElB,QAAM,gBAAgB;EACpB,MAAM,iBAAiB,IAAI,eAAe,uBAAuB;EACjE,MAAM,cAAc,QAAQ;EAC5B,YAAY,SAAS,QAAQ;GAC3B,IAAI,KAAK,eAAe,QAAQ,GAAG;EACrC,CAAC;EAED,aAAa;GACX,YAAY,SAAS,QAAQ;IAC3B,IAAI,KAAK,eAAe,UAAU,GAAG;GACvC,CAAC;GACD,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,eAAe,uBAAuB,CAAC;CAE3C,QAAM,gBAAgB;EACpB,OAAO,iBAAiB,UAAU,uBAAuB;EACzD,aAAa;GACX,OAAO,oBAAoB,UAAU,uBAAuB;EAC9D;CACF,GAAG,CAAC,uBAAuB,CAAC;CAE5B,QAAM,gBAAgB;EACpB,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;IACA,MAAM,OAA2B;KAC/B,QAAQ,QAAQ,SAAS;IAC3B;GACF,CAAC;EACH,CAAC,CACgB;;AAEvB"}

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

@@ -3,12 +3,12 @@ import type { SegmentedControlTheme } from './SegmentedControl.types';
 declare const StyledSegmentedControlRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement>, never> & {
     as?: React.ElementType;
 }, "size"> & {
-    size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
+    size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
 } & {
     as?: React.ElementType;
 }>;
 export interface SegmentedControlRootProps extends React.ComponentProps<typeof StyledSegmentedControlRoot> {
     theme?: SegmentedControlTheme;
 }
-export declare const SegmentedControlRoot: ({ size, theme, defaultValue, children, ...props }: React.PropsWithChildren<SegmentedControlRootProps>) => React.JSX.Element;
+export declare const SegmentedControlRoot: ({ size, theme, defaultValue, children, value, onValueChange, ...rest }: React.PropsWithChildren<SegmentedControlRootProps>) => React.JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
 import { styled } from "../../styled.js";
 import { Tabs } from "../tabs/Tabs.js";
-import { SegmentedControlContext } from "./SegmentedControlContext.js";
+import { SegmentedControlContext } from "./SegmentedControl.context.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/segmented-control/SegmentedControlRoot.tsx
@@ -12,15 +12,15 @@ var StyledSegmentedControlRoot = styled(Tabs, {
 		lg: []
 	} }
 }, { enabledResponsiveVariants: true });
-var SegmentedControlRoot = ({ size, theme = "primary", defaultValue, children, ...props }) => {
-	const isControlled = props.value !== void 0;
+var SegmentedControlRoot = ({ size, theme = "primary", defaultValue, children, value, onValueChange, ...rest }) => {
+	const isControlled = value !== void 0;
 	const [internalValue, setInternalValue] = React$1.useState(defaultValue);
-	const currentValue = isControlled ? props.value : internalValue;
-	const handleValueChange = isControlled ? props.onValueChange : setInternalValue;
+	const currentValue = isControlled ? value : internalValue;
+	const handleValueChange = isControlled ? onValueChange : setInternalValue;
 	React$1.useEffect(() => {
 		if (!isControlled && defaultValue) setInternalValue(defaultValue);
 	}, [defaultValue, isControlled]);
-	const value = React$1.useMemo(() => ({
+	const contextValue = React$1.useMemo(() => ({
 		size,
 		theme,
 		defaultValue,
@@ -34,12 +34,12 @@ var SegmentedControlRoot = ({ size, theme = "primary", defaultValue, children, .
 		currentValue
 	]);
 	return /* @__PURE__ */ jsx(SegmentedControlContext.Provider, {
-		value,
+		value: contextValue,
 		children: /* @__PURE__ */ jsx(StyledSegmentedControlRoot, {
 			size,
 			value: currentValue,
 			onValueChange: handleValueChange,
-			...props,
+			...rest,
 			children
 		})
 	});

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,oBAAC,wBAAwB,UAAzB;EAAyC;YACvC,oBAAC,4BAAD;GACQ;GACN,OAAO;GACP,eAAe;GACf,GAAI;GAEH;GAC0B,CAAA;EACI,CAAA"}
+{"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  { 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  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  const handleValueChange = isControlled ? onValueChange : setInternalValue\n\n  React.useEffect(() => {\n    if (!isControlled && defaultValue) {\n      setInternalValue(defaultValue)\n    }\n  }, [defaultValue, isControlled])\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.Provider value={contextValue}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...rest}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext.Provider>\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,2BAA2B,KAAK,CACpC;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;CAC5C,MAAM,oBAAoB,eAAe,gBAAgB;CAEzD,QAAM,gBAAgB;EACpB,IAAI,CAAC,gBAAgB,cACnB,iBAAiB,YAAY;CAEjC,GAAG,CAAC,cAAc,YAAY,CAAC;CAE/B,MAAM,eAAe,QAAM,eAClB;EACL;EACA;EACA;EACA,eAAe;EACf,OAAO;CACT,IACA;EAAC;EAAM;EAAO;EAAc;EAAmB;CAAY,CAC7D;CAEA,OACE,oBAAC,wBAAwB,UAAzB;EAAkC,OAAO;YACvC,oBAAC,4BAAD;GACQ;GACN,OAAO;GACP,eAAe;GACf,GAAI;GAEH;EACyB,CAAA;CACI,CAAA;AAEtC"}

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Override } from '../../utilities/types';
-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;
-    appearance?: ("standard" | "modern" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "standard" | "modern">>) | undefined;
+import type { Override } from '../../utilities/types';
+declare const StyledSelect: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "appearance" | "size" | "state" | "theme"> & {
+    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;
+    appearance?: ("modern" | "standard" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "modern" | "standard">>) | undefined;
 } & {
     as?: React.ElementType;
 }>;

package/dist/components/select/Select.js

@@ -95,14 +95,16 @@ var StyledSelect = styled("select", {
 		}
 	]
 }, { enabledResponsiveVariants: true });
-var Select = React$1.forwardRef(({ placeholder, children, size = "md", appearance = "standard", ...remainingProps }, ref) => {
+var Select = React$1.forwardRef(({ placeholder, children, size = "md", appearance = "standard", value, defaultValue, ...rest }, ref) => {
 	const props = {
 		size,
 		appearance,
 		ref,
-		...remainingProps
+		value,
+		defaultValue,
+		...rest
 	};
-	if ([remainingProps.value, remainingProps.defaultValue].every((value) => value === void 0)) props.defaultValue = "";
+	if ([value, defaultValue].every((v) => v === void 0)) props.defaultValue = "";
 	return /* @__PURE__ */ jsxs(StyledSelect, {
 		...props,
 		children: [placeholder && /* @__PURE__ */ jsx("option", {

package/dist/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled(\n  'select',\n  {\n    base: [\n      'bg-(image:--bg-chevron)',\n      'appearance-none',\n      '[background-repeat:no-repeat,repeat-x]',\n      'rounded-md',\n      'text-grey-1000',\n      'block',\n      'font-body',\n      'font-normal',\n      'leading-[1.4]',\n      'w-full',\n      'hover:cursor-pointer',\n      '-ms-expand:hidden',\n      'disabled:opacity-30',\n      'disabled:cursor-not-allowed',\n      '*[[disabled]]:opacity-30',\n      '*[[disabled]]:cursor-not-allowed'\n    ],\n    variants: {\n      size: {\n        sm: [\n          'bg-position-[right_--spacing(2)_top_50%,0_0]',\n          'bg-size-[18px_auto,100%]',\n          'text-sm',\n          'h-8',\n          'pl-2',\n          'pr-8'\n        ],\n        md: [\n          'bg-position-[right_--spacing(3)_top_50%,0_0]',\n          'bg-size-[20px_auto,100%]',\n          'text-md',\n          'h-10',\n          'pl-3',\n          'pr-10'\n        ],\n        lg: [\n          'bg-position-[right_--spacing(3)_top_50%,0_0]',\n          'bg-size-[20px_auto,100%]',\n          'text-md',\n          'h-12',\n          'pl-3',\n          'pr-10'\n        ]\n      },\n      state: {\n        error: []\n      },\n      theme: {\n        white: [],\n        grey: []\n      },\n      appearance: {\n        standard: [\n          'bg-white',\n          'border',\n          'border-grey-700',\n          'focus:border-primary-800',\n          'focus:outline-none'\n        ],\n        modern: [\n          'bg-grey-100',\n          'border-none',\n          'focus:outline-2',\n          'focus:outline-blue-800',\n          'focus:outline-offset-1',\n          'focus:outline-solid',\n          'focus:z-1'\n        ]\n      }\n    },\n    compoundVariants: [\n      {\n        state: 'error',\n        appearance: 'standard',\n        class: ['border-danger']\n      },\n      {\n        state: 'error',\n        appearance: 'modern',\n        class: ['bg-danger-light', 'focus:outline-danger']\n      },\n      {\n        appearance: 'modern',\n        theme: 'white',\n        class: ['bg-white']\n      },\n      {\n        appearance: 'modern',\n        theme: 'grey',\n        class: ['bg-grey-100']\n      }\n    ]\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    as?: never\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n  (\n    {\n      placeholder,\n      children,\n      size = 'md',\n      appearance = 'standard',\n      ...remainingProps\n    },\n    ref\n  ) => {\n    // Type assertion needed due to responsive variant size prop compatibility\n    const props: React.ComponentProps<typeof StyledSelect> = {\n      size,\n      appearance,\n      ref,\n      ...remainingProps\n    }\n\n    if (\n      [remainingProps.value, remainingProps.defaultValue].every(\n        (value) => value === undefined\n      )\n    ) {\n      props.defaultValue = ''\n    }\n\n    return (\n      <StyledSelect {...props}>\n        {placeholder && (\n          <option disabled hidden value=\"\">\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n    )\n  }\n)\n\nSelect.displayName = 'Select'\n"],"mappings":";;;;AAKA,IAAM,eAAe,OACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACD,OAAO;GACL,OAAO,EAAE;GACT,MAAM,EAAE;GACT;EACD,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACF;CACD,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,gBAAgB;GACzB;EACD;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,uBAAuB;GACnD;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,WAAW;GACpB;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,cAAc;GACvB;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAgBD,IAAa,SAAS,QAAM,YAExB,EACE,aACA,UACA,OAAO,MACP,aAAa,YACb,GAAG,kBAEL,QACG;CAEH,MAAM,QAAmD;EACvD;EACA;EACA;EACA,GAAG;EACJ;AAED,KACE,CAAC,eAAe,OAAO,eAAe,aAAa,CAAC,OACjD,UAAU,UAAU,KAAA,EACtB,CAED,OAAM,eAAe;AAGvB,QACE,qBAAC,cAAD;EAAc,GAAI;YAAlB,CACG,eACC,oBAAC,UAAD;GAAQ,UAAA;GAAS,QAAA;GAAO,OAAM;aAC3B;GACM,CAAA,EAEV,SACY;;EAGpB;AAED,OAAO,cAAc"}
+{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\n\nconst StyledSelect = styled(\n  'select',\n  {\n    base: [\n      'bg-(image:--bg-chevron)',\n      'appearance-none',\n      '[background-repeat:no-repeat,repeat-x]',\n      'rounded-md',\n      'text-grey-1000',\n      'block',\n      'font-body',\n      'font-normal',\n      'leading-[1.4]',\n      'w-full',\n      'hover:cursor-pointer',\n      '-ms-expand:hidden',\n      'disabled:opacity-30',\n      'disabled:cursor-not-allowed',\n      '*[[disabled]]:opacity-30',\n      '*[[disabled]]:cursor-not-allowed'\n    ],\n    variants: {\n      size: {\n        sm: [\n          'bg-position-[right_--spacing(2)_top_50%,0_0]',\n          'bg-size-[18px_auto,100%]',\n          'text-sm',\n          'h-8',\n          'pl-2',\n          'pr-8'\n        ],\n        md: [\n          'bg-position-[right_--spacing(3)_top_50%,0_0]',\n          'bg-size-[20px_auto,100%]',\n          'text-md',\n          'h-10',\n          'pl-3',\n          'pr-10'\n        ],\n        lg: [\n          'bg-position-[right_--spacing(3)_top_50%,0_0]',\n          'bg-size-[20px_auto,100%]',\n          'text-md',\n          'h-12',\n          'pl-3',\n          'pr-10'\n        ]\n      },\n      state: {\n        error: []\n      },\n      theme: {\n        white: [],\n        grey: []\n      },\n      appearance: {\n        standard: [\n          'bg-white',\n          'border',\n          'border-grey-700',\n          'focus:border-primary-800',\n          'focus:outline-none'\n        ],\n        modern: [\n          'bg-grey-100',\n          'border-none',\n          'focus:outline-2',\n          'focus:outline-blue-800',\n          'focus:outline-offset-1',\n          'focus:outline-solid',\n          'focus:z-1'\n        ]\n      }\n    },\n    compoundVariants: [\n      {\n        state: 'error',\n        appearance: 'standard',\n        class: ['border-danger']\n      },\n      {\n        state: 'error',\n        appearance: 'modern',\n        class: ['bg-danger-light', 'focus:outline-danger']\n      },\n      {\n        appearance: 'modern',\n        theme: 'white',\n        class: ['bg-white']\n      },\n      {\n        appearance: 'modern',\n        theme: 'grey',\n        class: ['bg-grey-100']\n      }\n    ]\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    as?: never\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n  (\n    {\n      placeholder,\n      children,\n      size = 'md',\n      appearance = 'standard',\n      value,\n      defaultValue,\n      ...rest\n    },\n    ref\n  ) => {\n    // Type assertion needed due to responsive variant size prop compatibility\n    const props: React.ComponentProps<typeof StyledSelect> = {\n      size,\n      appearance,\n      ref,\n      value,\n      defaultValue,\n      ...rest\n    }\n\n    if ([value, defaultValue].every((v) => v === undefined)) {\n      props.defaultValue = ''\n    }\n\n    return (\n      <StyledSelect {...props}>\n        {placeholder && (\n          <option disabled hidden value=\"\">\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n    )\n  }\n)\n\nSelect.displayName = 'Select'\n"],"mappings":";;;;AAKA,IAAM,eAAe,OACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,OAAO,EACL,OAAO,CAAC,EACV;EACA,OAAO;GACL,OAAO,CAAC;GACR,MAAM,CAAC;EACT;EACA,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;CACF;CACA,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,eAAe;EACzB;EACA;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,sBAAsB;EACnD;EACA;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,UAAU;EACpB;EACA;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,aAAa;EACvB;CACF;AACF,GACA,EAAE,2BAA2B,KAAK,CACpC;AAgBA,IAAa,SAAS,QAAM,YAExB,EACE,aACA,UACA,OAAO,MACP,aAAa,YACb,OACA,cACA,GAAG,QAEL,QACG;CAEH,MAAM,QAAmD;EACvD;EACA;EACA;EACA;EACA;EACA,GAAG;CACL;CAEA,IAAI,CAAC,OAAO,YAAY,CAAC,CAAC,OAAO,MAAM,MAAM,KAAA,CAAS,GACpD,MAAM,eAAe;CAGvB,OACE,qBAAC,cAAD;EAAc,GAAI;YAAlB,CACG,eACC,oBAAC,UAAD;GAAQ,UAAA;GAAS,QAAA;GAAO,OAAM;aAC3B;EACK,CAAA,GAET,QACW;;AAElB,CACF;AAEA,OAAO,cAAc"}

package/dist/components/select-field/SelectField.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWrapper';
-import { SelectProps } from '../../components/select/Select';
+import { type FieldElementWrapperProps } from '../field-wrapper/FieldWrapper';
+import { type SelectProps } from '../select/Select';
 type SelectFieldProps = SelectProps & FieldElementWrapperProps;
-export declare const SelectField: {
-    ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, theme, ...remainingProps }: SelectFieldProps): React.JSX.Element;
-    displayName: string;
-};
+export declare function SelectField({ className, hideLabel, children, name, label, validation, prompt, description, appearance, theme, ...rest }: SelectFieldProps): React.JSX.Element;
+export declare namespace SelectField {
+    var displayName: string;
+}
 export {};

package/dist/components/select-field/SelectField.js

@@ -6,7 +6,7 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
 //#region src/components/select-field/SelectField.tsx
-var SelectField = ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, theme, ...remainingProps }) => {
+var SelectField = ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, theme, ...rest }) => {
 	const { register } = useFormContext();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
@@ -28,7 +28,7 @@ var SelectField = ({ className, hideLabel, children, name, label, validation, pr
 			id: name,
 			appearance: formAppearance,
 			theme: formTheme,
-			...remainingProps,
+			...rest,
 			ref,
 			...error && { state: "error" },
 			children

package/dist/components/select-field/SelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","names":[],"sources":["../../../src/components/select-field/SelectField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { Select, SelectProps } from '~/components/select/Select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n  className,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  appearance,\n  theme,\n  ...remainingProps\n}: SelectFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Select\n        name={name}\n        id={name}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...remainingProps}\n        ref={ref}\n        {...(error && { state: 'error' })}\n      >\n        {children}\n      </Select>\n    </FieldWrapper>\n  )\n}\n\nSelectField.displayName = 'SelectField'\n"],"mappings":";;;;;;;;AAaA,IAAa,eAAe,EAC1B,WACA,WACA,UACA,MACA,OACA,YACA,QACA,aACA,YACA,OACA,GAAG,qBACmB;CACtB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;YAEZ,oBAAC,QAAD;GACQ;GACN,IAAI;GACJ,YAAY;GACZ,OAAO;GACP,GAAI;GACC;GACL,GAAK,SAAS,EAAE,OAAO,SAAS;GAE/B;GACM,CAAA;EACI,CAAA;;AAInB,YAAY,cAAc"}
+{"version":3,"file":"SelectField.js","names":[],"sources":["../../../src/components/select-field/SelectField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\nimport { Select, type SelectProps } from '../select/Select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n  className,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  appearance,\n  theme,\n  ...rest\n}: SelectFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Select\n        name={name}\n        id={name}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...rest}\n        ref={ref}\n        {...(error && { state: 'error' })}\n      >\n        {children}\n      </Select>\n    </FieldWrapper>\n  )\n}\n\nSelectField.displayName = 'SelectField'\n"],"mappings":";;;;;;;;AAaA,IAAa,eAAe,EAC1B,WACA,WACA,UACA,MACA,OACA,YACA,QACA,aACA,YACA,OACA,GAAG,WACmB;CACtB,MAAM,EAAE,aAAa,eAAe;CACpC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CACpC,MAAM,MAAM,aAAa,SAAS,UAAU,IAAI;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;CAEpC,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;YAEZ,oBAAC,QAAD;GACQ;GACN,IAAI;GACJ,YAAY;GACZ,OAAO;GACP,GAAI;GACC;GACL,GAAK,SAAS,EAAE,OAAO,QAAQ;GAE9B;EACK,CAAA;CACI,CAAA;AAElB;AAEA,YAAY,cAAc"}

package/dist/components/select-menu/{SelectMenuContext.js → SelectMenu.context.js}

@@ -1,5 +1,5 @@
 import * as React$1 from "react";
-//#region src/components/select-menu/SelectMenuContext.tsx
+//#region src/components/select-menu/SelectMenu.context.tsx
 var SelectMenuContext = React$1.createContext({
 	size: "md",
 	theme: "grey"
@@ -8,4 +8,4 @@ var useSelectMenuContext = () => React$1.useContext(SelectMenuContext);
 //#endregion
 export { SelectMenuContext, useSelectMenuContext };
 
-//# sourceMappingURL=SelectMenuContext.js.map
+//# sourceMappingURL=SelectMenu.context.js.map

package/dist/components/select-menu/SelectMenu.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenu.context.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.context.tsx"],"sourcesContent":["import * as React from 'react'\n\ntype SelectMenuContextValue = {\n  size: 'sm' | 'md' | 'lg'\n  theme: 'white' | 'grey'\n  state?: 'error'\n}\n\nexport const SelectMenuContext = React.createContext<SelectMenuContextValue>({\n  size: 'md',\n  theme: 'grey'\n})\n\nexport const useSelectMenuContext = () => React.useContext(SelectMenuContext)\n"],"mappings":";;AAQA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,MAAM;CACN,OAAO;AACT,CAAC;AAED,IAAa,6BAA6B,QAAM,WAAW,iBAAiB"}

package/dist/components/select-menu/SelectMenu.d.ts

@@ -5,7 +5,7 @@ type SelectMenuProps = React.ComponentProps<typeof RadixSelect.Root> & {
     theme?: 'white' | 'grey';
     state?: 'error';
 };
-export declare const SelectMenu: (({ size, theme, state, children, ...props }: SelectMenuProps) => React.JSX.Element) & {
+export declare const SelectMenu: (({ size, theme, state, children, ...rest }: SelectMenuProps) => React.JSX.Element) & {
     Trigger: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectTriggerProps & React.RefAttributes<HTMLButtonElement> & {
         placeholder?: string;
     }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -13,7 +13,7 @@ export declare const SelectMenu: (({ size, theme, state, children, ...props }: S
     Item: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Group: React.ForwardRefExoticComponent<RadixSelect.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
     Label: {
-        ({ className, ...props }: RadixSelect.SelectLabelProps & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+        ({ className, ...rest }: RadixSelect.SelectLabelProps & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
         displayName: string;
     };
     Separator: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, never> & {

package/dist/components/select-menu/SelectMenu.js

@@ -1,5 +1,5 @@
+import { SelectMenuContext } from "./SelectMenu.context.js";
 import { SelectMenuContent } from "./SelectMenuContent.js";
-import { SelectMenuContext } from "./SelectMenuContext.js";
 import { SelectMenuItem } from "./SelectMenuItem.js";
 import { SelectMenuLabel } from "./SelectMenuLabel.js";
 import { SelectMenuSeparator } from "./SelectMenuSeparator.js";
@@ -8,14 +8,14 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import * as RadixSelect from "@radix-ui/react-select";
 //#region src/components/select-menu/SelectMenu.tsx
-var SelectMenuRoot = ({ size = "md", theme = "grey", state, children, ...props }) => /* @__PURE__ */ jsx(SelectMenuContext.Provider, {
+var SelectMenuRoot = ({ size = "md", theme = "grey", state, children, ...rest }) => /* @__PURE__ */ jsx(SelectMenuContext.Provider, {
 	value: {
 		size,
 		theme,
 		state
 	},
 	children: /* @__PURE__ */ jsx(RadixSelect.Root, {
-		...props,
+		...rest,
 		children
 	})
 });

package/dist/components/select-menu/SelectMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenu.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.tsx"],"sourcesContent":["import * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { SelectMenuContent } from './SelectMenuContent'\nimport { SelectMenuContext } from './SelectMenuContext'\nimport { SelectMenuItem } from './SelectMenuItem'\nimport { SelectMenuLabel } from './SelectMenuLabel'\nimport { SelectMenuSeparator } from './SelectMenuSeparator'\nimport { SelectMenuTrigger } from './SelectMenuTrigger'\n\ntype SelectMenuProps = React.ComponentProps<typeof RadixSelect.Root> & {\n  size?: 'sm' | 'md' | 'lg'\n  theme?: 'white' | 'grey'\n  state?: 'error'\n}\n\nconst SelectMenuRoot = ({\n  size = 'md',\n  theme = 'grey',\n  state,\n  children,\n  ...props\n}: SelectMenuProps) => (\n  <SelectMenuContext.Provider value={{ size, theme, state }}>\n    <RadixSelect.Root {...props}>{children}</RadixSelect.Root>\n  </SelectMenuContext.Provider>\n)\n\nexport const SelectMenu = Object.assign(SelectMenuRoot, {\n  Trigger: SelectMenuTrigger,\n  Content: SelectMenuContent,\n  Item: SelectMenuItem,\n  Group: RadixSelect.Group,\n  Label: SelectMenuLabel,\n  Separator: SelectMenuSeparator\n})\n"],"mappings":";;;;;;;;;;AAgBA,IAAM,kBAAkB,EACtB,OAAO,MACP,QAAQ,QACR,OACA,UACA,GAAG,YAEH,oBAAC,kBAAkB,UAAnB;CAA4B,OAAO;EAAE;EAAM;EAAO;EAAO;WACvD,oBAAC,YAAY,MAAb;EAAkB,GAAI;EAAQ;EAA4B,CAAA;CAC/B,CAAA;AAG/B,IAAa,aAAa,OAAO,OAAO,gBAAgB;CACtD,SAAS;CACT,SAAS;CACT,MAAM;CACN,OAAO,YAAY;CACnB,OAAO;CACP,WAAW;CACZ,CAAC"}
+{"version":3,"file":"SelectMenu.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.tsx"],"sourcesContent":["import * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { SelectMenuContext } from './SelectMenu.context'\nimport { SelectMenuContent } from './SelectMenuContent'\nimport { SelectMenuItem } from './SelectMenuItem'\nimport { SelectMenuLabel } from './SelectMenuLabel'\nimport { SelectMenuSeparator } from './SelectMenuSeparator'\nimport { SelectMenuTrigger } from './SelectMenuTrigger'\n\ntype SelectMenuProps = React.ComponentProps<typeof RadixSelect.Root> & {\n  size?: 'sm' | 'md' | 'lg'\n  theme?: 'white' | 'grey'\n  state?: 'error'\n}\n\nconst SelectMenuRoot = ({\n  size = 'md',\n  theme = 'grey',\n  state,\n  children,\n  ...rest\n}: SelectMenuProps) => (\n  <SelectMenuContext.Provider value={{ size, theme, state }}>\n    <RadixSelect.Root {...rest}>{children}</RadixSelect.Root>\n  </SelectMenuContext.Provider>\n)\n\nexport const SelectMenu = Object.assign(SelectMenuRoot, {\n  Trigger: SelectMenuTrigger,\n  Content: SelectMenuContent,\n  Item: SelectMenuItem,\n  Group: RadixSelect.Group,\n  Label: SelectMenuLabel,\n  Separator: SelectMenuSeparator\n})\n"],"mappings":";;;;;;;;;;AAgBA,IAAM,kBAAkB,EACtB,OAAO,MACP,QAAQ,QACR,OACA,UACA,GAAG,WAEH,oBAAC,kBAAkB,UAAnB;CAA4B,OAAO;EAAE;EAAM;EAAO;CAAM;WACtD,oBAAC,YAAY,MAAb;EAAkB,GAAI;EAAO;CAA2B,CAAA;AAC9B,CAAA;AAG9B,IAAa,aAAa,OAAO,OAAO,gBAAgB;CACtD,SAAS;CACT,SAAS;CACT,MAAM;CACN,OAAO,YAAY;CACnB,OAAO;CACP,WAAW;AACb,CAAC"}

package/dist/components/select-menu/SelectMenuContent.js

@@ -48,11 +48,11 @@ var ScrollDownButton = styled(RadixSelect.ScrollDownButton, { base: [
 	"h-6",
 	"cursor-default"
 ] });
-var SelectMenuContent = React$1.forwardRef(({ children, position = "popper", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(RadixSelect.Portal, { children: /* @__PURE__ */ jsxs(Content, {
+var SelectMenuContent = React$1.forwardRef(({ children, position = "popper", sideOffset = 4, ...rest }, ref) => /* @__PURE__ */ jsx(RadixSelect.Portal, { children: /* @__PURE__ */ jsxs(Content, {
 	ref,
 	position,
 	sideOffset,
-	...props,
+	...rest,
 	children: [
 		/* @__PURE__ */ jsx(ScrollUpButton, { children: /* @__PURE__ */ jsx(Icon, {
 			is: ChevronUp,