@atom-learning/components 6.6.0-beta.1 → 6.6.0-beta.2

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 clsx from 'clsx'\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 { 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      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={clsx(\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        className={clsx('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={clsx(\n            size === 'sm' ? 'pr-8' : 'pr-10',\n            '[-webkit-search-decoration:hidden]',\n            '[-webkit-search-cancel-button:hidden]',\n            '[-webkit-search-results-button:hidden]'\n          )}\n        />\n        {getIcon()}\n      </InputBackground>\n    )\n  }\n)\n\nSearchInput.displayName = 'SearchInput'\n"],"mappings":";;;;;;;;;;AAqBA,IAAK,IAAL,yBAAA,GAAA;QACE,EAAA,SAAA,UACA,EAAA,QAAA;EAFG,KAAA,EAAA,CAGJ,EAEK,IAAa,EAAO,GAAM;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,EAEW,IAAc,EAAM,YAE7B,EACE,UAAO,MACP,gBAAa,YACb,cACA,UACA,kBAAe,IACf,kBACA,eAAY,SACZ,aACA,GAAG,KAEL,MACG;CACH,IAAM,CAAC,GAAY,KAAiB,GAAgB,EAC9C,CAAC,GAAY,KAAiB,EAAM,SAAS,EAAa,EAC1D,CAAC,GAAY,KAAiB,EAAM,SACxC,IAAe,EAAW,QAAQ,EAAW,OAC9C;AACD,GAAM,gBAAgB;AAChB,EAAO,MAAU,WACrB,EAAc,EAAM,EACpB,EAAc,IAAQ,EAAW,QAAQ,EAAW,OAAO;IAC1D,CAAC,EAAM,CAAC;CAEX,IAAM,IAAW,EAAM,cAAc,EAAiB,EAAK,EAAE,CAAC,EAAK,CAAC;AAEpE,GAAM,oBAAoB,SAAW,EAAW,QAA4B;CAE5E,IAAM,UAAoB;EACxB,IAAM,IAAU,EAAW;AAC3B,MAAI,CAAC,EAAS;AAOd,GAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,QACD,EAAE,MACqB,OAAO,GAAS,GAAG;EAC3C,IAAM,IAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,IACV,CAAC;AAGF,EAFA,EAAQ,cAAc,EAAI,EAC1B,EAAQ,OAAO,EACf,IAAgB,GAAG;IAGf,KAAkB,MAA+C;AACrE,MAAW,EAAM;EAEjB,IAAM,IAAW,EAAM,OAAO;AAG9B,EAFA,EAAc,EAAS,EACvB,IAAgB,EAAS,EACzB,EAAc,IAAW,EAAW,QAAQ,EAAW,OAAO;IAG1D,UACA,MAAe,EAAW,SAE1B,kBAAA,cAAC,GAAD;EACE,IAAI;EACE;EACN,WAAW,EACT,KAAQ,OAAO,WAAW,UAC1B,WACA,mBACD;EACD,CAAA,GAIJ,kBAAA,cAAC,GAAD;EACE,OAAO;EACP,OAAM;EACN,MAAM;EACN,SAAS;EACT,WAAU;EAGC,EADX,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAS,CAAA,CACR;AAIjB,QACE,kBAAA,cAAC,GAAD;EACQ;EACM;EACZ,WAAW,EAAK,YAAY,UAAU,EAAU;EAiBhC,EAfhB,kBAAA,cAAC,GAAD;EACE,KAAK;EACC;EACN,MAAK;EACL,GAAI;EACJ,OAAO;EACP,UAAU;EACV,WAAW,EACT,MAAS,OAAO,SAAS,SACzB,sCACA,yCACA,yCACD;EACD,CAAA,EACD,GAAS,CACM;EAGvB;AAED,EAAY,cAAc"}
+{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport clsx from 'clsx'\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 { 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      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={clsx(\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        className={clsx('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={clsx(\n            size === 'sm' ? 'pr-8' : 'pr-10',\n            '[-webkit-search-decoration:hidden]',\n            '[-webkit-search-cancel-button:hidden]',\n            '[-webkit-search-results-button:hidden]'\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,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,KACT,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;EACZ,WAAW,KAAK,YAAY,UAAU,UAAU;EAiBhC,EAfhB,wBAAA,cAAC,WAAD;EACE,KAAK;EACC;EACN,MAAK;EACL,GAAI;EACJ,OAAO;EACP,UAAU;EACV,WAAW,KACT,SAAS,OAAO,SAAS,SACzB,sCACA,yCACA,yCACD;EACD,CAAA,EACD,SAAS,CACM;EAGvB;AAED,YAAY,cAAc"}

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

@@ -1,15 +1,15 @@
-import { styled as e } from "../../styled.js";
-import { Dismissible as t } from "../dismissible/index.js";
-import { SectionMessageProvider as n, useSectionMessageContext as r } from "./SectionMessageContext.js";
-import { SectionMessageDescription as i } from "./SectionMessageDescription.js";
-import { SectionMessageDismiss as a } from "./SectionMessageDismiss.js";
-import { SectionMessageIcon as o } from "./SectionMessageIcon.js";
-import { SectionMessageActions as s, SectionMessageContent as c } from "./SectionMessageLayout.js";
-import { SectionMessageTitle as l } from "./SectionMessageTitle.js";
-import u from "react";
-import { TooltipProvider as d } from "@radix-ui/react-tooltip";
+import { styled } from "../../styled.js";
+import { Dismissible } from "../dismissible/index.js";
+import { SectionMessageProvider, useSectionMessageContext } from "./SectionMessageContext.js";
+import { SectionMessageDescription } from "./SectionMessageDescription.js";
+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 { TooltipProvider } from "@radix-ui/react-tooltip";
 //#region src/components/section-message/SectionMessage.tsx
-var f = e(t, {
+var StyledSectionMessage = styled(Dismissible, {
 	base: [
 		"relative",
 		"rounded-md",
@@ -31,17 +31,24 @@ var f = e(t, {
 		hasIcon: { true: ["pl-10"] },
 		hasDismiss: { true: ["pr-12"] }
 	}
-}), p = ({ children: e, ...t }) => {
-	let { theme: n, hasIcon: i, hasDismiss: a } = r();
-	return /* @__PURE__ */ u.createElement(f, {
-		...t,
-		theme: n,
-		hasIcon: i,
-		hasDismiss: a
-	}, /* @__PURE__ */ u.createElement("div", { className: "flex grow justify-between gap-3" }, e));
-}, m = ({ theme: e = "info", ...t }) => /* @__PURE__ */ u.createElement(d, null, /* @__PURE__ */ u.createElement(n, { theme: e }, /* @__PURE__ */ u.createElement(p, t)));
-m.Title = l, m.Description = i, m.Icon = o, m.Dismiss = a, m.Content = c, m.Actions = s;
+});
+var SectionMessageRoot = ({ children, ...rest }) => {
+	const { theme, hasIcon, hasDismiss } = useSectionMessageContext();
+	return /* @__PURE__ */ React.createElement(StyledSectionMessage, {
+		...rest,
+		theme,
+		hasIcon,
+		hasDismiss
+	}, /* @__PURE__ */ React.createElement("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)));
+SectionMessage.Title = SectionMessageTitle;
+SectionMessage.Description = SectionMessageDescription;
+SectionMessage.Icon = SectionMessageIcon;
+SectionMessage.Dismiss = SectionMessageDismiss;
+SectionMessage.Content = SectionMessageContent;
+SectionMessage.Actions = SectionMessageActions;
 //#endregion
-export { m as SectionMessage };
+export { SectionMessage };
 
 //# sourceMappingURL=SectionMessage.js.map

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,IAAuB,EAAO,GAAa;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,EAEI,KAAsB,EAC1B,aACA,GAAG,QAGC;CACJ,IAAM,EAAE,UAAO,YAAS,kBAAe,GAA0B;AAEjE,QACE,kBAAA,cAAC,GAAD;EACE,GAAI;EACG;EACE;EACG;EAGS,EADrB,kBAAA,cAAC,OAAD,EAAK,WAAU,mCAAkD,EAAf,EAAe,CAC5C;GAiBd,KAAkB,EAC7B,WAAQ,QACR,GAAG,QAEH,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,GAAD,EAA+B,UAEN,EADvB,kBAAA,cAAC,GAAuB,EAAQ,CACT,CACT;AAGpB,EAAe,QAAQ,GACvB,EAAe,cAAc,GAC7B,EAAe,OAAO,GACtB,EAAe,UAAU,GACzB,EAAe,UAAU,GACzB,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,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"}

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

@@ -1,26 +1,30 @@
-import e from "react";
+import React from "react";
 //#region src/components/section-message/SectionMessageContext.tsx
-var t = e.createContext(null), n = ({ theme: n = "info", children: r }) => {
-	let [i, a] = e.useState(!1), [o, s] = e.useState(!1), c = e.useMemo(() => ({
-		theme: n,
-		hasIcon: i,
-		setHasIcon: a,
-		hasDismiss: o,
-		setHasDismiss: s
+var SectionMessageContext = React.createContext(null);
+var SectionMessageProvider = ({ theme = "info", children }) => {
+	const [hasIcon, setHasIcon] = React.useState(false);
+	const [hasDismiss, setHasDismiss] = React.useState(false);
+	const value = React.useMemo(() => ({
+		theme,
+		hasIcon,
+		setHasIcon,
+		hasDismiss,
+		setHasDismiss
 	}), [
-		n,
-		i,
-		a,
-		o,
-		s
+		theme,
+		hasIcon,
+		setHasIcon,
+		hasDismiss,
+		setHasDismiss
 	]);
-	return /* @__PURE__ */ e.createElement(t.Provider, { value: c }, r);
-}, r = () => {
-	let n = e.useContext(t);
-	if (!n) throw Error("useSectionMessageContext must be used within a SectionMessageProvider");
-	return n;
+	return /* @__PURE__ */ React.createElement(SectionMessageContext.Provider, { value }, children);
+};
+var useSectionMessageContext = () => {
+	const context = React.useContext(SectionMessageContext);
+	if (!context) throw new Error("useSectionMessageContext must be used within a SectionMessageProvider");
+	return context;
 };
 //#endregion
-export { n as SectionMessageProvider, r as useSectionMessageContext };
+export { SectionMessageProvider, useSectionMessageContext };
 
 //# sourceMappingURL=SectionMessageContext.js.map

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,IACX,EAAM,cAAiD,KAAK,EAEjD,KAA0B,EACrC,WAAQ,QACR,kBAC8C;CAC9C,IAAM,CAAC,GAAS,KAAc,EAAM,SAAS,GAAM,EAC7C,CAAC,GAAY,KAAiB,EAAM,SAAS,GAAM,EAEnD,IAAQ,EAAM,eACX;EAAE;EAAO;EAAS;EAAY;EAAY;EAAe,GAChE;EAAC;EAAO;EAAS;EAAY;EAAY;EAAc,CACxD;AAED,QACE,kBAAA,cAAC,EAAsB,UAAvB,EAAuC,UAEN,EAD9B,EAC8B;GAIxB,UAA6D;CACxE,IAAM,IAAU,EAAM,WAAW,EAAsB;AAEvD,KAAI,CAAC,EACH,OAAU,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): 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"}

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

@@ -1,13 +1,13 @@
-import { Text as e } from "../text/Text.js";
-import t from "clsx";
-import n from "react";
+import { Text } from "../text/Text.js";
+import clsx from "clsx";
+import React from "react";
 //#region src/components/section-message/SectionMessageDescription.tsx
-var r = ({ className: r, ...i }) => /* @__PURE__ */ n.createElement(e, {
+var SectionMessageDescription = ({ className, ...rest }) => /* @__PURE__ */ React.createElement(Text, {
 	size: "sm",
-	...i,
-	className: t("text-grey-900", r)
+	...rest,
+	className: clsx("text-grey-900", className)
 });
 //#endregion
-export { r as SectionMessageDescription };
+export { SectionMessageDescription };
 
 //# sourceMappingURL=SectionMessageDescription.js.map

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 clsx from 'clsx'\nimport React from 'react'\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={clsx('text-grey-900', className)} />\n)\n"],"mappings":";;;;AAKA,IAAa,KAA6B,EACxC,cACA,GAAG,QAEH,kBAAA,cAAC,GAAD;CAAM,MAAK;CAAK,GAAI;CAAM,WAAW,EAAK,iBAAiB,EAAU;CAAI,CAAA"}
+{"version":3,"file":"SectionMessageDescription.js","names":[],"sources":["../../../src/components/section-message/SectionMessageDescription.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\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={clsx('text-grey-900', className)} />\n)\n"],"mappings":";;;;AAKA,IAAa,6BAA6B,EACxC,WACA,GAAG,WAEH,sBAAA,cAAC,MAAD;CAAM,MAAK;CAAK,GAAI;CAAM,WAAW,KAAK,iBAAiB,UAAU;CAAI,CAAA"}

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

@@ -1,23 +1,27 @@
-import { Icon as e } from "../icon/Icon.js";
-import { ActionIcon as t } from "../action-icon/ActionIcon.js";
-import { Dismissible as n } from "../dismissible/index.js";
-import { useSectionMessageContext as r } from "./SectionMessageContext.js";
-import i from "clsx";
-import a, { useEffect as o } from "react";
-import { Close as s } from "@atom-learning/icons";
+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 clsx from "clsx";
+import React, { useEffect } from "react";
+import { Close } from "@atom-learning/icons";
 //#region src/components/section-message/SectionMessageDismiss.tsx
-var c = ({ label: c = "Dismiss", className: l, ...u }) => {
-	let { setHasDismiss: d } = r();
-	return o(() => (d(!0), () => d(!1)), [d]), /* @__PURE__ */ a.createElement(n.Trigger, { asChild: !0 }, /* @__PURE__ */ a.createElement(t, {
-		label: c,
+var SectionMessageDismiss = ({ label = "Dismiss", className, ...rest }) => {
+	const { setHasDismiss } = useSectionMessageContext();
+	useEffect(() => {
+		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",
-		...u,
-		className: i("m-auto", "absolute", "top-2", "right-2", l)
-	}, /* @__PURE__ */ a.createElement(e, { is: s })));
+		...rest,
+		className: clsx("m-auto", "absolute", "top-2", "right-2", className)
+	}, /* @__PURE__ */ React.createElement(Icon, { is: Close })));
 };
 //#endregion
-export { c as SectionMessageDismiss };
+export { SectionMessageDismiss };
 
 //# sourceMappingURL=SectionMessageDismiss.js.map

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 clsx from 'clsx'\nimport React, { useEffect } from 'react'\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={clsx('m-auto', 'absolute', 'top-2', 'right-2', className)}\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    </Dismissible.Trigger>\n  )\n}\n"],"mappings":";;;;;;;;AASA,IAAa,KAAyB,EACpC,WAAQ,WACR,cACA,GAAG,QACuD;CAC1D,IAAM,EAAE,qBAAkB,GAA0B;AAOpD,QALA,SACE,EAAc,GAAK,QACN,EAAc,GAAM,GAChC,CAAC,EAAc,CAAC,EAGjB,kBAAA,cAAC,EAAY,SAAb,EAAqB,SAAA,IAWC,EAVpB,kBAAA,cAAC,GAAD;EACS;EACP,MAAK;EACL,YAAW;EACX,OAAM;EACN,GAAI;EACJ,WAAW,EAAK,UAAU,YAAY,SAAS,WAAW,EAAU;EAGzD,EADX,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAS,CAAA,CACR,CACO"}
+{"version":3,"file":"SectionMessageDismiss.js","names":[],"sources":["../../../src/components/section-message/SectionMessageDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport React, { useEffect } from 'react'\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={clsx('m-auto', 'absolute', 'top-2', 'right-2', className)}\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    </Dismissible.Trigger>\n  )\n}\n"],"mappings":";;;;;;;;AASA,IAAa,yBAAyB,EACpC,QAAQ,WACR,WACA,GAAG,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,KAAK,UAAU,YAAY,SAAS,WAAW,UAAU;EAGzD,EADX,sBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR,CACO"}

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

@@ -1,25 +1,30 @@
-import { Icon as e } from "../icon/Icon.js";
-import { useSectionMessageContext as t } from "./SectionMessageContext.js";
-import n from "clsx";
-import r, { useEffect as i } from "react";
-import { Danger as a, Error as o, Info as s, OkCircle as c } from "@atom-learning/icons";
+import { Icon } from "../icon/Icon.js";
+import { useSectionMessageContext } from "./SectionMessageContext.js";
+import clsx from "clsx";
+import React, { useEffect } from "react";
+import { Danger, Error, Info, OkCircle } from "@atom-learning/icons";
 //#region src/components/section-message/SectionMessageIcon.tsx
-var l = {
-	success: c,
-	warning: a,
-	error: o,
-	neutral: s,
-	info: s
-}, u = ({ className: a, is: o, ...s }) => {
-	let { theme: c, setHasIcon: u } = t();
-	return i(() => (u(!0), () => u(!1)), [u]), /* @__PURE__ */ r.createElement(e, {
-		is: o || l[c],
+var themeIcons = {
+	success: OkCircle,
+	warning: Danger,
+	error: Error,
+	neutral: Info,
+	info: Info
+};
+var SectionMessageIcon = ({ className, is, ...rest }) => {
+	const { theme, setHasIcon } = useSectionMessageContext();
+	useEffect(() => {
+		setHasIcon(true);
+		return () => setHasIcon(false);
+	}, [setHasIcon]);
+	return /* @__PURE__ */ React.createElement(Icon, {
+		is: is || themeIcons[theme],
 		size: "sm",
-		...s,
-		className: n("m-auto", "absolute", "left-4", "top-4", "text-current", a)
+		...rest,
+		className: clsx("m-auto", "absolute", "left-4", "top-4", "text-current", className)
 	});
 };
 //#endregion
-export { u as SectionMessageIcon };
+export { SectionMessageIcon };
 
 //# sourceMappingURL=SectionMessageIcon.js.map

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 clsx from 'clsx'\nimport React, { useEffect } from 'react'\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={clsx(\n        'm-auto',\n        'absolute',\n        'left-4',\n        'top-4',\n        'text-current',\n        className\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;AAOA,IAAM,IAAa;CACjB,SAAS;CACT,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;CACP,EAIY,KAAsB,EACjC,cACA,OACA,GAAG,QACuC;CAC1C,IAAM,EAAE,UAAO,kBAAe,GAA0B;AAOxD,QALA,SACE,EAAW,GAAK,QACH,EAAW,GAAM,GAC7B,CAAC,EAAW,CAAC,EAGd,kBAAA,cAAC,GAAD;EACE,IAAI,KAAM,EAAW;EACrB,MAAK;EACL,GAAI;EACJ,WAAW,EACT,UACA,YACA,UACA,SACA,gBACA,EACD;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 clsx from 'clsx'\nimport React, { useEffect } from 'react'\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={clsx(\n        'm-auto',\n        'absolute',\n        'left-4',\n        'top-4',\n        'text-current',\n        className\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;AAOA,IAAM,aAAa;CACjB,SAAS;CACT,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;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,KACT,UACA,YACA,UACA,SACA,gBACA,UACD;EACD,CAAA"}

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

@@ -1,17 +1,18 @@
-import { styled as e } from "../../styled.js";
-import t from "clsx";
-import n from "react";
+import { styled } from "../../styled.js";
+import clsx from "clsx";
+import React from "react";
 //#region src/components/section-message/SectionMessageLayout.tsx
-var r = e("div", { base: [
+var SectionMessageContent = styled("div", { base: [
 	"max-w-full",
 	"shrink-0",
 	"pt-0.5",
 	"*:not-last:mb-2"
-] }), i = ({ className: e, ...r }) => /* @__PURE__ */ n.createElement("div", { className: t("max-w-full", "shrink-0", e) }, /* @__PURE__ */ n.createElement("div", {
+] });
+var SectionMessageActions = ({ className, ...rest }) => /* @__PURE__ */ React.createElement("div", { className: clsx("max-w-full", "shrink-0", className) }, /* @__PURE__ */ React.createElement("div", {
 	className: "flex flex-wrap gap-3",
-	...r
+	...rest
 }));
 //#endregion
-export { i as SectionMessageActions, r as SectionMessageContent };
+export { SectionMessageActions, SectionMessageContent };
 
 //# sourceMappingURL=SectionMessageLayout.js.map

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 clsx from 'clsx'\nimport React from 'react'\n\nimport { styled } 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={clsx('max-w-full', 'shrink-0', className)}>\n    <div className=\"flex flex-wrap gap-3\" {...rest} />\n  </div>\n)\n"],"mappings":";;;;AAKA,IAAa,IAAwB,EAAO,OAAO,EACjD,MAAM;CAAC;CAAc;CAAY;CAAU;CAAkB,EAC9D,CAAC,EAEW,KAAyB,EACpC,cACA,GAAG,QAEH,kBAAA,cAAC,OAAD,EAAK,WAAW,EAAK,cAAc,YAAY,EAAU,EAEnD,EADJ,kBAAA,cAAC,OAAD;CAAK,WAAU;CAAuB,GAAI;CAAQ,CAAA,CAC9C"}
+{"version":3,"file":"SectionMessageLayout.js","names":[],"sources":["../../../src/components/section-message/SectionMessageLayout.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { styled } 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={clsx('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,KAAK,cAAc,YAAY,UAAU,EAEnD,EADJ,sBAAA,cAAC,OAAD;CAAK,WAAU;CAAuB,GAAI;CAAQ,CAAA,CAC9C"}

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

@@ -1,12 +1,12 @@
-import { Text as e } from "../text/Text.js";
-import t from "react";
+import { Text } from "../text/Text.js";
+import React from "react";
 //#region src/components/section-message/SectionMessageTitle.tsx
-var n = (n) => /* @__PURE__ */ t.createElement(e, {
+var SectionMessageTitle = (props) => /* @__PURE__ */ React.createElement(Text, {
 	size: "md",
 	weight: "bold",
-	...n
+	...props
 });
 //#endregion
-export { n as SectionMessageTitle };
+export { SectionMessageTitle };
 
 //# sourceMappingURL=SectionMessageTitle.js.map

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,KACX,MACgB,kBAAA,cAAC,GAAD;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): 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"}

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

@@ -1,23 +1,23 @@
-import { SegmentedControlBadge as e } from "./SegmentedControlBadge.js";
-import { SegmentedControlContent as t } from "./SegmentedControlContent.js";
-import { SegmentedControlDescription as n } from "./SegmentedControlDescription.js";
-import { SegmentedControlHeading as r } from "./SegmentedControlHeading.js";
-import { SegmentedControlIcon as i } from "./SegmentedControlIcon.js";
-import { SegmentedControlItem as a } from "./SegmentedControlItem.js";
-import { SegmentedControlItemList as o } from "./SegmentedControlItemList.js";
-import { SegmentedControlRoot as s } from "./SegmentedControlRoot.js";
+import { SegmentedControlBadge } from "./SegmentedControlBadge.js";
+import { SegmentedControlContent } from "./SegmentedControlContent.js";
+import { SegmentedControlDescription } from "./SegmentedControlDescription.js";
+import { SegmentedControlHeading } from "./SegmentedControlHeading.js";
+import { SegmentedControlIcon } from "./SegmentedControlIcon.js";
+import { SegmentedControlItem } from "./SegmentedControlItem.js";
+import { SegmentedControlItemList } from "./SegmentedControlItemList.js";
+import { SegmentedControlRoot } from "./SegmentedControlRoot.js";
 //#region src/components/segmented-control/SegmentedControl.tsx
-var c = {
-	Root: s,
-	Item: a,
-	Heading: r,
-	Description: n,
-	Icon: i,
-	Content: t,
-	Badge: e,
-	ItemList: o
+var SegmentedControl = {
+	Root: SegmentedControlRoot,
+	Item: SegmentedControlItem,
+	Heading: SegmentedControlHeading,
+	Description: SegmentedControlDescription,
+	Icon: SegmentedControlIcon,
+	Content: SegmentedControlContent,
+	Badge: SegmentedControlBadge,
+	ItemList: SegmentedControlItemList
 };
 //#endregion
-export { c as SegmentedControl };
+export { SegmentedControl };
 
 //# sourceMappingURL=SegmentedControl.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import { SegmentedControlBadge } from './SegmentedControlBadge'\nimport { SegmentedControlContent } from './SegmentedControlContent'\nimport { SegmentedControlDescription } from './SegmentedControlDescription'\nimport { SegmentedControlHeading } from './SegmentedControlHeading'\nimport { SegmentedControlIcon } from './SegmentedControlIcon'\nimport { SegmentedControlItem } from './SegmentedControlItem'\nimport { SegmentedControlItemList } from './SegmentedControlItemList'\nimport { SegmentedControlRoot } from './SegmentedControlRoot'\n\nexport const SegmentedControl = {\n  Root: SegmentedControlRoot,\n  Item: SegmentedControlItem,\n  Heading: SegmentedControlHeading,\n  Description: SegmentedControlDescription,\n  Icon: SegmentedControlIcon,\n  Content: SegmentedControlContent,\n  Badge: SegmentedControlBadge,\n  ItemList: SegmentedControlItemList\n}\n"],"mappings":";;;;;;;;;AASA,IAAa,IAAmB;CAC9B,MAAM;CACN,MAAM;CACN,SAAS;CACT,aAAa;CACb,MAAM;CACN,SAAS;CACT,OAAO;CACP,UAAU;CACX"}
+{"version":3,"file":"SegmentedControl.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import { SegmentedControlBadge } from './SegmentedControlBadge'\nimport { SegmentedControlContent } from './SegmentedControlContent'\nimport { SegmentedControlDescription } from './SegmentedControlDescription'\nimport { SegmentedControlHeading } from './SegmentedControlHeading'\nimport { SegmentedControlIcon } from './SegmentedControlIcon'\nimport { SegmentedControlItem } from './SegmentedControlItem'\nimport { SegmentedControlItemList } from './SegmentedControlItemList'\nimport { SegmentedControlRoot } from './SegmentedControlRoot'\n\nexport const SegmentedControl = {\n  Root: SegmentedControlRoot,\n  Item: SegmentedControlItem,\n  Heading: SegmentedControlHeading,\n  Description: SegmentedControlDescription,\n  Icon: SegmentedControlIcon,\n  Content: SegmentedControlContent,\n  Badge: SegmentedControlBadge,\n  ItemList: SegmentedControlItemList\n}\n"],"mappings":";;;;;;;;;AASA,IAAa,mBAAmB;CAC9B,MAAM;CACN,MAAM;CACN,SAAS;CACT,aAAa;CACb,MAAM;CACN,SAAS;CACT,OAAO;CACP,UAAU;CACX"}

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

@@ -1,21 +1,22 @@
-import { Badge as e } from "../badge/Badge.js";
-import { SegmentedControlContext as t } from "./SegmentedControlContext.js";
-import n from "clsx";
-import * as r from "react";
+import { Badge } from "../badge/Badge.js";
+import { SegmentedControlContext } from "./SegmentedControlContext.js";
+import clsx from "clsx";
+import * as React$1 from "react";
 //#region src/components/segmented-control/SegmentedControlBadge.tsx
-var i = {
+var badgeSizeMap = {
 	sm: "xs",
 	md: "xs",
 	lg: "sm"
-}, a = ({ className: a, ...o }) => {
-	let { size: s } = r.useContext(t);
-	return /* @__PURE__ */ r.createElement(e, {
-		...o,
-		size: i[s],
-		className: n("border-none", a, "font-normal")
+};
+var SegmentedControlBadge = ({ className, ...props }) => {
+	const { size } = React$1.useContext(SegmentedControlContext);
+	return /* @__PURE__ */ React$1.createElement(Badge, {
+		...props,
+		size: badgeSizeMap[size],
+		className: clsx("border-none", className, "font-normal")
 	});
 };
 //#endregion
-export { a as SegmentedControlBadge };
+export { SegmentedControlBadge };
 
 //# sourceMappingURL=SegmentedControlBadge.js.map

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 clsx from 'clsx'\nimport * as React from 'react'\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={clsx('border-none', className, 'font-normal')}\n    />\n  )\n}\n"],"mappings":";;;;;AAMA,IAAM,IAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,KAAyB,EACpC,cACA,GAAG,QACgE;CACnE,IAAM,EAAE,YAAS,EAAM,WAAW,EAAwB;AAE1D,QACE,kBAAA,cAAC,GAAD;EACE,GAAI;EACJ,MAAM,EAAa;EACnB,WAAW,EAAK,eAAe,GAAW,cAAc;EACxD,CAAA"}
+{"version":3,"file":"SegmentedControlBadge.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlBadge.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\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={clsx('border-none', className, 'font-normal')}\n    />\n  )\n}\n"],"mappings":";;;;;AAMA,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,KAAK,eAAe,WAAW,cAAc;EACxD,CAAA"}

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

@@ -1,7 +1,7 @@
-import { Tabs as e } from "../tabs/Tabs.js";
+import { Tabs } from "../tabs/Tabs.js";
 //#region src/components/segmented-control/SegmentedControlContent.tsx
-var t = e.Content;
+var SegmentedControlContent = Tabs.Content;
 //#endregion
-export { t as SegmentedControlContent };
+export { SegmentedControlContent };
 
 //# sourceMappingURL=SegmentedControlContent.js.map

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,IAA0B,EAAK"}
+{"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/SegmentedControlContext.js

@@ -1,6 +1,6 @@
-import * as e from "react";
+import * as React$1 from "react";
 //#region src/components/segmented-control/SegmentedControlContext.tsx
-var t = e.createContext({
+var SegmentedControlContext = React$1.createContext({
 	size: "md",
 	theme: "primary",
 	defaultValue: "",
@@ -8,6 +8,6 @@ var t = e.createContext({
 	onValueChange: () => null
 });
 //#endregion
-export { t as SegmentedControlContext };
+export { SegmentedControlContext };
 
 //# sourceMappingURL=SegmentedControlContext.js.map

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

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

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

@@ -1,9 +1,9 @@
-import { styled as e } from "../../styled.js";
-import { Text as t } from "../text/Text.js";
-import { SegmentedControlContext as n } from "./SegmentedControlContext.js";
-import * as r from "react";
+import { styled } from "../../styled.js";
+import { Text } from "../text/Text.js";
+import { SegmentedControlContext } from "./SegmentedControlContext.js";
+import * as React$1 from "react";
 //#region src/components/segmented-control/SegmentedControlDescription.tsx
-var i = e(t, {
+var StyledText = styled(Text, {
 	base: [
 		"font-body",
 		"text-text-subtle",
@@ -14,14 +14,15 @@ var i = e(t, {
 		md: ["text-sm", "leading-[1.53]"],
 		lg: ["text-md", "leading-normal"]
 	} }
-}, { enabledResponsiveVariants: !0 }), a = (e) => {
-	let { size: t } = r.useContext(n);
-	return /* @__PURE__ */ r.createElement(i, {
-		...e,
-		size: t
+}, { enabledResponsiveVariants: true });
+var SegmentedControlDescription = (props) => {
+	const { size } = React$1.useContext(SegmentedControlContext);
+	return /* @__PURE__ */ React$1.createElement(StyledText, {
+		...props,
+		size
 	});
 };
 //#endregion
-export { a as SegmentedControlDescription };
+export { SegmentedControlDescription };
 
 //# sourceMappingURL=SegmentedControlDescription.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlDescription.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledText = styled(\n  Text,\n  {\n    base: ['font-body', 'text-text-subtle', 'font-normal'],\n    variants: {\n      size: {\n        sm: ['text-xs', 'leading-[1.6]'],\n        md: ['text-sm', 'leading-[1.53]'],\n        lg: ['text-md', 'leading-normal']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlDescription = (\n  props: Omit<React.ComponentProps<typeof StyledText>, 'size'>\n): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <StyledText {...props} size={size} />\n}\n"],"mappings":";;;;;AAOA,IAAM,IAAa,EACjB,GACA;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,IAAM,CACpC,EAEY,KACX,MACgB;CAChB,IAAM,EAAE,YAAS,EAAM,WAAW,EAAwB;AAE1D,QAAO,kBAAA,cAAC,GAAD;EAAY,GAAI;EAAa;EAAQ,CAAA"}
+{"version":3,"file":"SegmentedControlDescription.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledText = styled(\n  Text,\n  {\n    base: ['font-body', 'text-text-subtle', 'font-normal'],\n    variants: {\n      size: {\n        sm: ['text-xs', 'leading-[1.6]'],\n        md: ['text-sm', 'leading-[1.53]'],\n        lg: ['text-md', 'leading-normal']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlDescription = (\n  props: Omit<React.ComponentProps<typeof StyledText>, 'size'>\n): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <StyledText {...props} size={size} />\n}\n"],"mappings":";;;;;AAOA,IAAM,aAAa,OACjB,MACA;CACE,MAAM;EAAC;EAAa;EAAoB;EAAc;CACtD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,iBAAiB;EACjC,IAAI,CAAC,WAAW,iBAAiB;EAClC,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,+BACX,UACgB;CAChB,MAAM,EAAE,SAAS,QAAM,WAAW,wBAAwB;AAE1D,QAAO,wBAAA,cAAC,YAAD;EAAY,GAAI;EAAa;EAAQ,CAAA"}