@atom-learning/components 6.17.0 → 8.0.0

package/dist/components/search-input/SearchInput.js

@@ -5,6 +5,7 @@ import { useCallbackRef } from "../../utilities/hooks/useCallbackRef.js";
 import { InputBackground, InputText } from "../input/Input.js";
 import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
 import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Close, Search } from "@atom-learning/icons";
 //#region src/components/search-input/SearchInput.tsx
 var INPUT_ICON = /* @__PURE__ */ function(INPUT_ICON) {
@@ -52,33 +53,35 @@ var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", th
 		setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
 	};
 	const getIcon = () => {
-		if (activeIcon === INPUT_ICON.SEARCH) return /* @__PURE__ */ React$1.createElement(StyledIcon, {
+		if (activeIcon === INPUT_ICON.SEARCH) return /* @__PURE__ */ jsx(StyledIcon, {
 			is: Search,
 			size,
 			className: cn(size == "sm" ? "size-4" : "size-5", "top-1/2", "-translate-y-1/2")
 		});
-		return /* @__PURE__ */ React$1.createElement(ActionIcon, {
+		return /* @__PURE__ */ jsx(ActionIcon, {
 			label: clearText,
 			theme: "neutral",
 			size: iconSize,
 			onClick: handleClear,
-			className: "absolute top-1/2 right-1 -translate-y-1/2"
-		}, /* @__PURE__ */ React$1.createElement(Icon, { is: Close }));
+			className: "absolute top-1/2 right-1 -translate-y-1/2",
+			children: /* @__PURE__ */ jsx(Icon, { is: Close })
+		});
 	};
-	return /* @__PURE__ */ React$1.createElement(InputBackground, {
+	return /* @__PURE__ */ jsxs(InputBackground, {
 		size,
 		appearance,
 		theme,
-		className: cn("relative", "w-auto", className)
-	}, /* @__PURE__ */ React$1.createElement(InputText, {
-		ref: setInputElRef,
-		size,
-		type: "search",
-		...remainingProps,
-		value: innerValue,
-		onChange: handleOnChange,
-		className: cn(size === "sm" ? "pr-8" : "pr-10", "[&::-webkit-search-decoration]:appearance-none", "[&::-webkit-search-cancel-button]:appearance-none", "[&::-webkit-search-results-button]:appearance-none")
-	}), getIcon());
+		className: cn("relative", "w-auto", className),
+		children: [/* @__PURE__ */ jsx(InputText, {
+			ref: setInputElRef,
+			size,
+			type: "search",
+			...remainingProps,
+			value: innerValue,
+			onChange: handleOnChange,
+			className: cn(size === "sm" ? "pr-8" : "pr-10", "[&::-webkit-search-decoration]:appearance-none", "[&::-webkit-search-cancel-button]:appearance-none", "[&::-webkit-search-results-button]:appearance-none")
+		}), getIcon()]
+	});
 });
 SearchInput.displayName = "SearchInput";
 //#endregion

package/dist/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport { Input, InputBackground, InputText } from '~/components/input/Input'\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  base: ['text-grey-700', 'absolute', 'pointer-events-none'],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-2.5', 'size-5'],\n      lg: ['right-2.5', 'size-5']\n    }\n  }\n})\n\nexport const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(\n  (\n    {\n      size = 'md',\n      appearance = 'standard',\n      theme,\n      className,\n      value,\n      defaultValue = '',\n      onValueChange,\n      clearText = 'Clear',\n      onChange,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const [inputElRef, setInputElRef] = useCallbackRef()\n    const [innerValue, setInnerValue] = React.useState(defaultValue)\n    const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n      defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n    )\n    React.useEffect(() => {\n      if (typeof value === 'undefined') return\n      setInnerValue(value)\n      setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n    }, [value])\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    React.useImperativeHandle(ref, () => inputElRef.current as HTMLInputElement)\n\n    const handleClear = () => {\n      const inputEl = inputElRef.current\n      if (!inputEl) return\n\n      // https://stackoverflow.com/a/46012210\n      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n        window.HTMLInputElement.prototype,\n        'value'\n      )?.set\n      nativeInputValueSetter?.call?.(inputEl, '')\n      const ev2 = new Event('input', {\n        bubbles: true\n      })\n      inputEl.dispatchEvent(ev2)\n      inputEl.focus()\n      onValueChange?.('')\n    }\n\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(event)\n\n      const newValue = event.target.value\n      setInnerValue(newValue)\n      onValueChange?.(newValue)\n      setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n    }\n\n    const getIcon = () => {\n      if (activeIcon === INPUT_ICON.SEARCH)\n        return (\n          <StyledIcon\n            is={Search}\n            size={size}\n            className={cn(\n              size == 'sm' ? 'size-4' : 'size-5',\n              'top-1/2',\n              '-translate-y-1/2'\n            )}\n          />\n        )\n\n      return (\n        <ActionIcon\n          label={clearText}\n          theme=\"neutral\"\n          size={iconSize}\n          onClick={handleClear}\n          className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n        >\n          <Icon is={Close} />\n        </ActionIcon>\n      )\n    }\n\n    return (\n      <InputBackground\n        size={size}\n        appearance={appearance}\n        theme={theme}\n        className={cn('relative', 'w-auto', className)}\n      >\n        <InputText\n          ref={setInputElRef}\n          size={size}\n          type=\"search\"\n          {...remainingProps}\n          value={innerValue}\n          onChange={handleOnChange}\n          className={cn(\n            size === 'sm' ? 'pr-8' : 'pr-10',\n            '[&::-webkit-search-decoration]:appearance-none',\n            '[&::-webkit-search-cancel-button]:appearance-none',\n            '[&::-webkit-search-results-button]:appearance-none'\n          )}\n        />\n        {getIcon()}\n      </InputBackground>\n    )\n  }\n)\n\nSearchInput.displayName = 'SearchInput'\n"],"mappings":";;;;;;;;;AAqBA,IAAK,aAAL,yBAAA,YAAA;AACE,YAAA,YAAA;AACA,YAAA,WAAA;;EAFG,cAAA,EAAA,CAGJ;AAED,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;EAAsB;CAC1D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,aAAa,SAAS;EAC3B,IAAI,CAAC,aAAa,SAAS;EAC5B,EACF;CACF,CAAC;AAEF,IAAa,cAAc,QAAM,YAE7B,EACE,OAAO,MACP,aAAa,YACb,OACA,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,kBAEL,QACG;CACH,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;CACpD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,aAAa;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SACxC,eAAe,WAAW,QAAQ,WAAW,OAC9C;AACD,SAAM,gBAAgB;AACpB,MAAI,OAAO,UAAU,YAAa;AAClC,gBAAc,MAAM;AACpB,gBAAc,QAAQ,WAAW,QAAQ,WAAW,OAAO;IAC1D,CAAC,MAAM,CAAC;CAEX,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,SAAM,oBAAoB,WAAW,WAAW,QAA4B;CAE5E,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;AAOd,GAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,QACD,EAAE,MACqB,OAAO,SAAS,GAAG;EAC3C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,MACV,CAAC;AACF,UAAQ,cAAc,IAAI;AAC1B,UAAQ,OAAO;AACf,kBAAgB,GAAG;;CAGrB,MAAM,kBAAkB,UAA+C;AACrE,aAAW,MAAM;EAEjB,MAAM,WAAW,MAAM,OAAO;AAC9B,gBAAc,SAAS;AACvB,kBAAgB,SAAS;AACzB,gBAAc,WAAW,WAAW,QAAQ,WAAW,OAAO;;CAGhE,MAAM,gBAAgB;AACpB,MAAI,eAAe,WAAW,OAC5B,QACE,wBAAA,cAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,GACT,QAAQ,OAAO,WAAW,UAC1B,WACA,mBACD;GACD,CAAA;AAGN,SACE,wBAAA,cAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;GAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR;;AAIjB,QACE,wBAAA,cAAC,iBAAD;EACQ;EACM;EACL;EACP,WAAW,GAAG,YAAY,UAAU,UAAU;EAiB9B,EAfhB,wBAAA,cAAC,WAAD;EACE,KAAK;EACC;EACN,MAAK;EACL,GAAI;EACJ,OAAO;EACP,UAAU;EACV,WAAW,GACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,qDACD;EACD,CAAA,EACD,SAAS,CACM;EAGvB;AAED,YAAY,cAAc"}
+{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport { Input, InputBackground, InputText } from '~/components/input/Input'\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  base: ['text-grey-700', 'absolute', 'pointer-events-none'],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-2.5', 'size-5'],\n      lg: ['right-2.5', 'size-5']\n    }\n  }\n})\n\nexport const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(\n  (\n    {\n      size = 'md',\n      appearance = 'standard',\n      theme,\n      className,\n      value,\n      defaultValue = '',\n      onValueChange,\n      clearText = 'Clear',\n      onChange,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const [inputElRef, setInputElRef] = useCallbackRef()\n    const [innerValue, setInnerValue] = React.useState(defaultValue)\n    const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n      defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n    )\n    React.useEffect(() => {\n      if (typeof value === 'undefined') return\n      setInnerValue(value)\n      setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n    }, [value])\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    React.useImperativeHandle(ref, () => inputElRef.current as HTMLInputElement)\n\n    const handleClear = () => {\n      const inputEl = inputElRef.current\n      if (!inputEl) return\n\n      // https://stackoverflow.com/a/46012210\n      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n        window.HTMLInputElement.prototype,\n        'value'\n      )?.set\n      nativeInputValueSetter?.call?.(inputEl, '')\n      const ev2 = new Event('input', {\n        bubbles: true\n      })\n      inputEl.dispatchEvent(ev2)\n      inputEl.focus()\n      onValueChange?.('')\n    }\n\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(event)\n\n      const newValue = event.target.value\n      setInnerValue(newValue)\n      onValueChange?.(newValue)\n      setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n    }\n\n    const getIcon = () => {\n      if (activeIcon === INPUT_ICON.SEARCH)\n        return (\n          <StyledIcon\n            is={Search}\n            size={size}\n            className={cn(\n              size == 'sm' ? 'size-4' : 'size-5',\n              'top-1/2',\n              '-translate-y-1/2'\n            )}\n          />\n        )\n\n      return (\n        <ActionIcon\n          label={clearText}\n          theme=\"neutral\"\n          size={iconSize}\n          onClick={handleClear}\n          className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n        >\n          <Icon is={Close} />\n        </ActionIcon>\n      )\n    }\n\n    return (\n      <InputBackground\n        size={size}\n        appearance={appearance}\n        theme={theme}\n        className={cn('relative', 'w-auto', className)}\n      >\n        <InputText\n          ref={setInputElRef}\n          size={size}\n          type=\"search\"\n          {...remainingProps}\n          value={innerValue}\n          onChange={handleOnChange}\n          className={cn(\n            size === 'sm' ? 'pr-8' : 'pr-10',\n            '[&::-webkit-search-decoration]:appearance-none',\n            '[&::-webkit-search-cancel-button]:appearance-none',\n            '[&::-webkit-search-results-button]:appearance-none'\n          )}\n        />\n        {getIcon()}\n      </InputBackground>\n    )\n  }\n)\n\nSearchInput.displayName = 'SearchInput'\n"],"mappings":";;;;;;;;;;AAqBA,IAAK,aAAL,yBAAA,YAAA;AACE,YAAA,YAAA;AACA,YAAA,WAAA;;EAFG,cAAA,EAAA,CAGJ;AAED,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;EAAsB;CAC1D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,aAAa,SAAS;EAC3B,IAAI,CAAC,aAAa,SAAS;EAC5B,EACF;CACF,CAAC;AAEF,IAAa,cAAc,QAAM,YAE7B,EACE,OAAO,MACP,aAAa,YACb,OACA,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,kBAEL,QACG;CACH,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;CACpD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,aAAa;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SACxC,eAAe,WAAW,QAAQ,WAAW,OAC9C;AACD,SAAM,gBAAgB;AACpB,MAAI,OAAO,UAAU,YAAa;AAClC,gBAAc,MAAM;AACpB,gBAAc,QAAQ,WAAW,QAAQ,WAAW,OAAO;IAC1D,CAAC,MAAM,CAAC;CAEX,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,SAAM,oBAAoB,WAAW,WAAW,QAA4B;CAE5E,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;AAOd,GAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,QACD,EAAE,MACqB,OAAO,SAAS,GAAG;EAC3C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,MACV,CAAC;AACF,UAAQ,cAAc,IAAI;AAC1B,UAAQ,OAAO;AACf,kBAAgB,GAAG;;CAGrB,MAAM,kBAAkB,UAA+C;AACrE,aAAW,MAAM;EAEjB,MAAM,WAAW,MAAM,OAAO;AAC9B,gBAAc,SAAS;AACvB,kBAAgB,SAAS;AACzB,gBAAc,WAAW,WAAW,QAAQ,WAAW,OAAO;;CAGhE,MAAM,gBAAgB;AACpB,MAAI,eAAe,WAAW,OAC5B,QACE,oBAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,GACT,QAAQ,OAAO,WAAW,UAC1B,WACA,mBACD;GACD,CAAA;AAGN,SACE,oBAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,OAAS,CAAA;GACR,CAAA;;AAIjB,QACE,qBAAC,iBAAD;EACQ;EACM;EACL;EACP,WAAW,GAAG,YAAY,UAAU,UAAU;YAJhD,CAME,oBAAC,WAAD;GACE,KAAK;GACC;GACN,MAAK;GACL,GAAI;GACJ,OAAO;GACP,UAAU;GACV,WAAW,GACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,qDACD;GACD,CAAA,EACD,SAAS,CACM;;EAGvB;AAED,YAAY,cAAc"}

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

@@ -17,10 +17,10 @@ export type SectionMessageProps = React.ComponentProps<typeof SectionMessageRoot
 };
 export declare const SectionMessage: {
     ({ theme, ...rest }: SectionMessageProps): React.JSX.Element;
-    Title: (props: React.ComponentProps<typeof import("..").Text>) => JSX.Element;
-    Description: ({ className, ...rest }: React.ComponentProps<typeof import("..").Text>) => JSX.Element;
+    Title: (props: React.ComponentProps<typeof import("..").Text>) => React.JSX.Element;
+    Description: ({ className, ...rest }: React.ComponentProps<typeof import("..").Text>) => React.JSX.Element;
     Icon: ({ className, is, ...rest }: Partial<Omit<Omit<Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
-        ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
+        ref?: ((instance: SVGSVGElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<SVGSVGElement> | null | undefined;
     }, "size"> & {
         size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
     } & {
@@ -28,10 +28,10 @@ export declare const SectionMessage: {
     }, "is" | "as"> & {
         is: React.FC<React.SVGProps<SVGSVGElement>>;
         as?: never;
-    }, "ref"> & React.RefAttributes<SVGSVGElement>>) => JSX.Element;
-    Dismiss: ({ label, className, ...rest }: React.ComponentProps<typeof import("..").ActionIcon>) => JSX.Element;
+    }, "ref"> & React.RefAttributes<SVGSVGElement>>) => React.JSX.Element;
+    Dismiss: ({ label, className, ...rest }: React.ComponentProps<typeof import("..").ActionIcon>) => React.JSX.Element;
     Content: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
     }, never> & {
         as?: React.ElementType;
     }>;

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

@@ -6,7 +6,8 @@ import { SectionMessageDismiss } from "./SectionMessageDismiss.js";
 import { SectionMessageIcon } from "./SectionMessageIcon.js";
 import { SectionMessageActions, SectionMessageContent } from "./SectionMessageLayout.js";
 import { SectionMessageTitle } from "./SectionMessageTitle.js";
-import React from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 //#region src/components/section-message/SectionMessage.tsx
 var StyledSectionMessage = styled(Dismissible, {
@@ -34,14 +35,21 @@ var StyledSectionMessage = styled(Dismissible, {
 });
 var SectionMessageRoot = ({ children, ...rest }) => {
 	const { theme, hasIcon, hasDismiss } = useSectionMessageContext();
-	return /* @__PURE__ */ React.createElement(StyledSectionMessage, {
+	return /* @__PURE__ */ jsx(StyledSectionMessage, {
 		...rest,
 		theme,
 		hasIcon,
-		hasDismiss
-	}, /* @__PURE__ */ React.createElement("div", { className: "flex grow justify-between gap-3" }, children));
+		hasDismiss,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex grow justify-between gap-3",
+			children
+		})
+	});
 };
-var SectionMessage = ({ theme = "info", ...rest }) => /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(SectionMessageProvider, { theme }, /* @__PURE__ */ React.createElement(SectionMessageRoot, rest)));
+var SectionMessage = ({ theme = "info", ...rest }) => /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(SectionMessageProvider, {
+	theme,
+	children: /* @__PURE__ */ jsx(SectionMessageRoot, { ...rest })
+}) });
 SectionMessage.Title = SectionMessageTitle;
 SectionMessage.Description = SectionMessageDescription;
 SectionMessage.Icon = SectionMessageIcon;

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

@@ -1 +1 @@
-{"version":3,"file":"SectionMessage.js","names":[],"sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Dismissible } from '../dismissible'\nimport {\n  SectionMessageProvider,\n  useSectionMessageContext\n} from './SectionMessageContext'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n  SectionMessageActions,\n  SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n  base: [\n    'relative',\n    'rounded-md',\n    'flex',\n    'shrink-0',\n    'min-h-12',\n    'p-4',\n    'border',\n    'border-white'\n  ],\n  variants: {\n    theme: {\n      success: ['bg-success-light', 'text-success-dark'],\n      warning: ['bg-warning-light', 'text-warning-text'],\n      error: ['bg-danger-light', 'text-danger-dark'],\n      neutral: ['bg-grey-100', 'text-grey-1000'],\n      info: ['bg-info-light', 'text-info-dark']\n    },\n    hasIcon: {\n      true: ['pl-10']\n    },\n    hasDismiss: {\n      true: ['pr-12']\n    }\n  }\n})\n\nconst SectionMessageRoot = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledSectionMessage> & {\n  className?: string\n}) => {\n  const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n  return (\n    <StyledSectionMessage\n      {...rest}\n      theme={theme}\n      hasIcon={hasIcon}\n      hasDismiss={hasDismiss}\n    >\n      <div className=\"flex grow justify-between gap-3\">{children}</div>\n    </StyledSectionMessage>\n  )\n}\n\nexport type SectionMessageTheme =\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral'\n  | 'info'\n\nexport type SectionMessageProps = React.ComponentProps<\n  typeof SectionMessageRoot\n> & {\n  theme?: SectionMessageTheme\n}\n\nexport const SectionMessage = ({\n  theme = 'info',\n  ...rest\n}: SectionMessageProps) => (\n  <TooltipProvider>\n    <SectionMessageProvider theme={theme}>\n      <SectionMessageRoot {...rest} />\n    </SectionMessageProvider>\n  </TooltipProvider>\n)\n\nSectionMessage.Title = SectionMessageTitle\nSectionMessage.Description = SectionMessageDescription\nSectionMessage.Icon = SectionMessageIcon\nSectionMessage.Dismiss = SectionMessageDismiss\nSectionMessage.Content = SectionMessageContent\nSectionMessage.Actions = SectionMessageActions\n"],"mappings":";;;;;;;;;;;AAmBA,IAAM,uBAAuB,OAAO,aAAa;CAC/C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS,CAAC,oBAAoB,oBAAoB;GAClD,SAAS,CAAC,oBAAoB,oBAAoB;GAClD,OAAO,CAAC,mBAAmB,mBAAmB;GAC9C,SAAS,CAAC,eAAe,iBAAiB;GAC1C,MAAM,CAAC,iBAAiB,iBAAiB;GAC1C;EACD,SAAS,EACP,MAAM,CAAC,QAAQ,EAChB;EACD,YAAY,EACV,MAAM,CAAC,QAAQ,EAChB;EACF;CACF,CAAC;AAEF,IAAM,sBAAsB,EAC1B,UACA,GAAG,WAGC;CACJ,MAAM,EAAE,OAAO,SAAS,eAAe,0BAA0B;AAEjE,QACE,sBAAA,cAAC,sBAAD;EACE,GAAI;EACG;EACE;EACG;EAGS,EADrB,sBAAA,cAAC,OAAD,EAAK,WAAU,mCAAkD,EAAf,SAAe,CAC5C;;AAiB3B,IAAa,kBAAkB,EAC7B,QAAQ,QACR,GAAG,WAEH,sBAAA,cAAC,iBAAA,MACC,sBAAA,cAAC,wBAAD,EAA+B,OAEN,EADvB,sBAAA,cAAC,oBAAuB,KAAQ,CACT,CACT;AAGpB,eAAe,QAAQ;AACvB,eAAe,cAAc;AAC7B,eAAe,OAAO;AACtB,eAAe,UAAU;AACzB,eAAe,UAAU;AACzB,eAAe,UAAU"}
+{"version":3,"file":"SectionMessage.js","names":[],"sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Dismissible } from '../dismissible'\nimport {\n  SectionMessageProvider,\n  useSectionMessageContext\n} from './SectionMessageContext'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n  SectionMessageActions,\n  SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n  base: [\n    'relative',\n    'rounded-md',\n    'flex',\n    'shrink-0',\n    'min-h-12',\n    'p-4',\n    'border',\n    'border-white'\n  ],\n  variants: {\n    theme: {\n      success: ['bg-success-light', 'text-success-dark'],\n      warning: ['bg-warning-light', 'text-warning-text'],\n      error: ['bg-danger-light', 'text-danger-dark'],\n      neutral: ['bg-grey-100', 'text-grey-1000'],\n      info: ['bg-info-light', 'text-info-dark']\n    },\n    hasIcon: {\n      true: ['pl-10']\n    },\n    hasDismiss: {\n      true: ['pr-12']\n    }\n  }\n})\n\nconst SectionMessageRoot = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledSectionMessage> & {\n  className?: string\n}) => {\n  const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n  return (\n    <StyledSectionMessage\n      {...rest}\n      theme={theme}\n      hasIcon={hasIcon}\n      hasDismiss={hasDismiss}\n    >\n      <div className=\"flex grow justify-between gap-3\">{children}</div>\n    </StyledSectionMessage>\n  )\n}\n\nexport type SectionMessageTheme =\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral'\n  | 'info'\n\nexport type SectionMessageProps = React.ComponentProps<\n  typeof SectionMessageRoot\n> & {\n  theme?: SectionMessageTheme\n}\n\nexport const SectionMessage = ({\n  theme = 'info',\n  ...rest\n}: SectionMessageProps) => (\n  <TooltipProvider>\n    <SectionMessageProvider theme={theme}>\n      <SectionMessageRoot {...rest} />\n    </SectionMessageProvider>\n  </TooltipProvider>\n)\n\nSectionMessage.Title = SectionMessageTitle\nSectionMessage.Description = SectionMessageDescription\nSectionMessage.Icon = SectionMessageIcon\nSectionMessage.Dismiss = SectionMessageDismiss\nSectionMessage.Content = SectionMessageContent\nSectionMessage.Actions = SectionMessageActions\n"],"mappings":";;;;;;;;;;;;AAmBA,IAAM,uBAAuB,OAAO,aAAa;CAC/C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS,CAAC,oBAAoB,oBAAoB;GAClD,SAAS,CAAC,oBAAoB,oBAAoB;GAClD,OAAO,CAAC,mBAAmB,mBAAmB;GAC9C,SAAS,CAAC,eAAe,iBAAiB;GAC1C,MAAM,CAAC,iBAAiB,iBAAiB;GAC1C;EACD,SAAS,EACP,MAAM,CAAC,QAAQ,EAChB;EACD,YAAY,EACV,MAAM,CAAC,QAAQ,EAChB;EACF;CACF,CAAC;AAEF,IAAM,sBAAsB,EAC1B,UACA,GAAG,WAGC;CACJ,MAAM,EAAE,OAAO,SAAS,eAAe,0BAA0B;AAEjE,QACE,oBAAC,sBAAD;EACE,GAAI;EACG;EACE;EACG;YAEZ,oBAAC,OAAD;GAAK,WAAU;GAAmC;GAAe,CAAA;EAC5C,CAAA;;AAiB3B,IAAa,kBAAkB,EAC7B,QAAQ,QACR,GAAG,WAEH,oBAAC,iBAAD,EAAA,UACE,oBAAC,wBAAD;CAA+B;WAC7B,oBAAC,oBAAD,EAAoB,GAAI,MAAQ,CAAA;CACT,CAAA,EACT,CAAA;AAGpB,eAAe,QAAQ;AACvB,eAAe,cAAc;AAC7B,eAAe,OAAO;AACtB,eAAe,UAAU;AACzB,eAAe,UAAU;AACzB,eAAe,UAAU"}

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

@@ -12,5 +12,5 @@ export type SectionMessageProviderProps = {
     children: React.ReactNode;
 };
 export declare const SectionMessageContext: React.Context<SectionMessageContextValue | null>;
-export declare const SectionMessageProvider: ({ theme, children }: SectionMessageProviderProps) => JSX.Element;
+export declare const SectionMessageProvider: ({ theme, children }: SectionMessageProviderProps) => React.JSX.Element;
 export declare const useSectionMessageContext: () => SectionMessageContextValue;

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/section-message/SectionMessageContext.tsx
 var SectionMessageContext = React.createContext(null);
 var SectionMessageProvider = ({ theme = "info", children }) => {
@@ -17,7 +18,10 @@ var SectionMessageProvider = ({ theme = "info", children }) => {
 		hasDismiss,
 		setHasDismiss
 	]);
-	return /* @__PURE__ */ React.createElement(SectionMessageContext.Provider, { value }, children);
+	return /* @__PURE__ */ jsx(SectionMessageContext.Provider, {
+		value,
+		children
+	});
 };
 var useSectionMessageContext = () => {
 	const context = React.useContext(SectionMessageContext);

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

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageContext.js","names":[],"sources":["../../../src/components/section-message/SectionMessageContext.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { SectionMessageTheme } from './SectionMessage'\n\nexport type SectionMessageContextValue = {\n  theme: SectionMessageTheme\n  hasIcon: boolean\n  setHasIcon: React.Dispatch<React.SetStateAction<boolean>>\n  hasDismiss: boolean\n  setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>\n}\nexport type SectionMessageProviderProps = {\n  theme: SectionMessageTheme\n  children: React.ReactNode\n}\n\nexport const SectionMessageContext =\n  React.createContext<SectionMessageContextValue | null>(null)\n\nexport const SectionMessageProvider = ({\n  theme = 'info',\n  children\n}: SectionMessageProviderProps): JSX.Element => {\n  const [hasIcon, setHasIcon] = React.useState(false)\n  const [hasDismiss, setHasDismiss] = React.useState(false)\n\n  const value = React.useMemo<SectionMessageContextValue>(\n    () => ({ theme, hasIcon, setHasIcon, hasDismiss, setHasDismiss }),\n    [theme, hasIcon, setHasIcon, hasDismiss, setHasDismiss]\n  )\n\n  return (\n    <SectionMessageContext.Provider value={value}>\n      {children}\n    </SectionMessageContext.Provider>\n  )\n}\n\nexport const useSectionMessageContext = (): SectionMessageContextValue => {\n  const context = React.useContext(SectionMessageContext)\n\n  if (!context) {\n    throw new Error(\n      'useSectionMessageContext must be used within a SectionMessageProvider'\n    )\n  }\n\n  return context\n}\n"],"mappings":";;AAgBA,IAAa,wBACX,MAAM,cAAiD,KAAK;AAE9D,IAAa,0BAA0B,EACrC,QAAQ,QACR,eAC8C;CAC9C,MAAM,CAAC,SAAS,cAAc,MAAM,SAAS,MAAM;CACnD,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS,MAAM;CAEzD,MAAM,QAAQ,MAAM,eACX;EAAE;EAAO;EAAS;EAAY;EAAY;EAAe,GAChE;EAAC;EAAO;EAAS;EAAY;EAAY;EAAc,CACxD;AAED,QACE,sBAAA,cAAC,sBAAsB,UAAvB,EAAuC,OAEN,EAD9B,SAC8B;;AAIrC,IAAa,iCAA6D;CACxE,MAAM,UAAU,MAAM,WAAW,sBAAsB;AAEvD,KAAI,CAAC,QACH,OAAM,IAAI,MACR,wEACD;AAGH,QAAO"}
+{"version":3,"file":"SectionMessageContext.js","names":[],"sources":["../../../src/components/section-message/SectionMessageContext.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { SectionMessageTheme } from './SectionMessage'\n\nexport type SectionMessageContextValue = {\n  theme: SectionMessageTheme\n  hasIcon: boolean\n  setHasIcon: React.Dispatch<React.SetStateAction<boolean>>\n  hasDismiss: boolean\n  setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>\n}\nexport type SectionMessageProviderProps = {\n  theme: SectionMessageTheme\n  children: React.ReactNode\n}\n\nexport const SectionMessageContext =\n  React.createContext<SectionMessageContextValue | null>(null)\n\nexport const SectionMessageProvider = ({\n  theme = 'info',\n  children\n}: SectionMessageProviderProps): React.JSX.Element => {\n  const [hasIcon, setHasIcon] = React.useState(false)\n  const [hasDismiss, setHasDismiss] = React.useState(false)\n\n  const value = React.useMemo<SectionMessageContextValue>(\n    () => ({ theme, hasIcon, setHasIcon, hasDismiss, setHasDismiss }),\n    [theme, hasIcon, setHasIcon, hasDismiss, setHasDismiss]\n  )\n\n  return (\n    <SectionMessageContext.Provider value={value}>\n      {children}\n    </SectionMessageContext.Provider>\n  )\n}\n\nexport const useSectionMessageContext = (): SectionMessageContextValue => {\n  const context = React.useContext(SectionMessageContext)\n\n  if (!context) {\n    throw new Error(\n      'useSectionMessageContext must be used within a SectionMessageProvider'\n    )\n  }\n\n  return context\n}\n"],"mappings":";;;AAgBA,IAAa,wBACX,MAAM,cAAiD,KAAK;AAE9D,IAAa,0BAA0B,EACrC,QAAQ,QACR,eACoD;CACpD,MAAM,CAAC,SAAS,cAAc,MAAM,SAAS,MAAM;CACnD,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS,MAAM;CAEzD,MAAM,QAAQ,MAAM,eACX;EAAE;EAAO;EAAS;EAAY;EAAY;EAAe,GAChE;EAAC;EAAO;EAAS;EAAY;EAAY;EAAc,CACxD;AAED,QACE,oBAAC,sBAAsB,UAAvB;EAAuC;EACpC;EAC8B,CAAA;;AAIrC,IAAa,iCAA6D;CACxE,MAAM,UAAU,MAAM,WAAW,sBAAsB;AAEvD,KAAI,CAAC,QACH,OAAM,IAAI,MACR,wEACD;AAGH,QAAO"}

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

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

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,6 +1,6 @@
 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;
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
 }, never> & {
     as?: React.ElementType;
 }>;

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

@@ -1,13 +1,15 @@
 export declare const SegmentedControl: {
     Root: ({ size, theme, defaultValue, children, ...props }: React.PropsWithChildren<import("./SegmentedControlRoot").SegmentedControlRootProps>) => React.JSX.Element;
-    Item: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "size" | "theme"> & {
+    Item: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+    }, "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;
     } & {
         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;
+    Heading: (props: Omit<React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+        ref?: ((instance: HTMLParagraphElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
     }, "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;
@@ -17,13 +19,15 @@ export declare const SegmentedControl: {
         as?: import("react").ElementType;
     }, "as"> & {
         as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-    }, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, "size"> & {
+    }, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & {
+        ref?: ((instance: HTMLParagraphElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
+    }, "size"> & {
         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">) => React.JSX.Element;
+    Description: (props: Omit<React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+        ref?: ((instance: HTMLParagraphElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
     }, "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;
@@ -33,22 +37,28 @@ export declare const SegmentedControl: {
         as?: import("react").ElementType;
     }, "as"> & {
         as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-    }, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, "size"> & {
+    }, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & {
+        ref?: ((instance: HTMLParagraphElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
+    }, "size"> & {
         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;
-    Content: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsContentProps & import("react").RefAttributes<HTMLDivElement>, never> & {
+    }>>, "size">) => React.JSX.Element;
+    Icon: (props: Omit<React.ComponentProps<typeof import("..").Icon>, "size">) => React.JSX.Element;
+    Content: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }, 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> & {
+        ({ children, colorScheme, ...rest }: React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+            ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+        }, never> & {
             as?: import("react").ElementType;
         }>> & {
             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/SegmentedControlContent.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
-export declare const SegmentedControlContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsContentProps & React.RefAttributes<HTMLDivElement>, never> & {
+export declare const SegmentedControlContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+}, never> & {
     as?: React.ElementType;
 }>;

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

@@ -1,6 +1,6 @@
 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;
+declare const StyledText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
 }, "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;
@@ -10,10 +10,12 @@ declare const StyledText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Om
     as?: React.ElementType;
 }, "as"> & {
     as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLParagraphElement>, "size"> & {
+}, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
+}, "size"> & {
     size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
 } & {
     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
 	});