@atom-learning/components 8.0.3 → 8.1.1

package/dist/components/radio-button-field/RadioField.js

@@ -3,12 +3,12 @@ import { InlineFieldWrapper } from "../field-wrapper/InlineFieldWrapper.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/radio-button-field/RadioField.tsx
-var RadioField = ({ className, label, value, ...remainingProps }) => /* @__PURE__ */ jsx(InlineFieldWrapper, {
+var RadioField = ({ className, label, value, ...rest }) => /* @__PURE__ */ jsx(InlineFieldWrapper, {
 	className,
 	label,
 	children: /* @__PURE__ */ jsx(RadioButton, {
 		value,
-		...remainingProps
+		...rest
 	})
 });
 RadioField.displayName = "RadioField";

package/dist/components/radio-button-field/RadioField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioField.js","names":[],"sources":["../../../src/components/radio-button-field/RadioField.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { InlineFieldWrapper } from '~/components/field-wrapper/InlineFieldWrapper'\nimport { ValidationOptions } from '~/components/form/validation'\nimport { RadioButton } from '~/components/radio-button/RadioButton'\n\ntype RadioFieldProps = {\n  className?: string\n  defaultChecked?: boolean\n  error?: string\n  label: string\n  validation?: ValidationOptions\n} & React.ComponentProps<typeof RadioButton>\n\nexport const RadioField = ({\n  className,\n  label,\n  value,\n  ...remainingProps\n}: RadioFieldProps) => (\n  <InlineFieldWrapper className={className} label={label}>\n    <RadioButton value={value} {...remainingProps} />\n  </InlineFieldWrapper>\n)\n\nRadioField.displayName = 'RadioField'\n"],"mappings":";;;;;AAcA,IAAa,cAAc,EACzB,WACA,OACA,OACA,GAAG,qBAEH,oBAAC,oBAAD;CAA+B;CAAkB;WAC/C,oBAAC,aAAD;EAAoB;EAAO,GAAI;EAAkB,CAAA;CAC9B,CAAA;AAGvB,WAAW,cAAc"}
+{"version":3,"file":"RadioField.js","names":[],"sources":["../../../src/components/radio-button-field/RadioField.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { InlineFieldWrapper } from '../field-wrapper/InlineFieldWrapper'\nimport type { ValidationOptions } from '../form/validation'\nimport { RadioButton } from '../radio-button/RadioButton'\n\ntype RadioFieldProps = {\n  className?: string\n  defaultChecked?: boolean\n  error?: string\n  label: string\n  validation?: ValidationOptions\n} & React.ComponentProps<typeof RadioButton>\n\nexport const RadioField = ({\n  className,\n  label,\n  value,\n  ...rest\n}: RadioFieldProps) => (\n  <InlineFieldWrapper className={className} label={label}>\n    <RadioButton value={value} {...rest} />\n  </InlineFieldWrapper>\n)\n\nRadioField.displayName = 'RadioField'\n"],"mappings":";;;;;AAcA,IAAa,cAAc,EACzB,WACA,OACA,OACA,GAAG,WAEH,oBAAC,oBAAD;CAA+B;CAAkB;WAC/C,oBAAC,aAAD;EAAoB;EAAO,GAAI;CAAO,CAAA;AACpB,CAAA;AAGtB,WAAW,cAAc"}

package/dist/components/radio-card/RadioCard.d.ts

@@ -1,8 +1,8 @@
 import * as RadioGroup from '@radix-ui/react-radio-group';
 import * as React from 'react';
-declare const StyledRadioCard: React.ForwardRefExoticComponent<Omit<RadioGroup.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "size" | "align" | "isFullWidth"> & {
+declare const StyledRadioCard: React.ForwardRefExoticComponent<Omit<RadioGroup.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "align" | "isFullWidth" | "size"> & {
     align?: "left" | "right" | undefined;
-    size?: "md" | "lg" | undefined;
+    size?: "lg" | "md" | undefined;
     isFullWidth?: boolean | undefined;
 } & {
     as?: React.ElementType;

package/dist/components/radio-card/RadioCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCard.js","names":[],"sources":["../../../src/components/radio-card/RadioCard.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledRadioCard = styled(RadioGroup.Item, {\n  base: [\n    'items-center',\n    'bg-white',\n    'border',\n    'border-grey-600',\n    'rounded-sm',\n    'cursor-pointer',\n    'flex',\n    'text-left',\n    'data-[state=checked]:-outline-offset-2',\n    'data-[state=checked]:outline-2',\n    'data-[state=checked]:outline-primary-800',\n    'data-[state=checked]:outline-solid'\n  ],\n  variants: {\n    align: {\n      left: ['flex-row'],\n      right: ['flex-row-reverse']\n    },\n    size: {\n      md: ['px-4', 'py-3'],\n      lg: ['px-8', 'py-4']\n    },\n    isFullWidth: {\n      true: ['w-full'],\n      false: ['w-max']\n    }\n  }\n})\n\nconst RadioButton = styled('div', {\n  base: [\n    'items-center',\n    'appearance-none',\n    'bg-transparent',\n    'border',\n    'border-grey-900',\n    'rounded-full',\n    'flex',\n    'shrink-0',\n    'justify-center',\n    'p-0',\n    'size-4',\n    'transition-all',\n    'duration-50',\n    'ease-out',\n    'in-data-[state=checked]:bg-primary-800',\n    'in-data-[state=checked]:border-primary-800'\n  ],\n  variants: {\n    containerIsFullWidth: {\n      true: [],\n      false: []\n    },\n    align: {\n      left: ['mr-4'],\n      right: []\n    }\n  },\n  compoundVariants: [\n    {\n      containerIsFullWidth: true,\n      align: 'right',\n      class: ['ml-auto']\n    },\n    {\n      containerIsFullWidth: false,\n      align: 'right',\n      class: ['ml-4']\n    }\n  ]\n})\n\nconst Indicator = styled(RadioGroup.Indicator, {\n  base: ['bg-white', 'rounded-full', 'absolute', 'size-1.5']\n})\n\ntype RadioCardProps = React.ComponentProps<typeof StyledRadioCard>\n\nexport const RadioCard = ({\n  children,\n  isFullWidth = false,\n  size = 'md',\n  align = 'left',\n  ...rest\n}: RadioCardProps) => (\n  <StyledRadioCard\n    {...rest}\n    align={align}\n    isFullWidth={isFullWidth}\n    size={size}\n  >\n    <RadioButton align={align} containerIsFullWidth={isFullWidth}>\n      <Indicator />\n    </RadioButton>\n    <div>{children}</div>\n  </StyledRadioCard>\n)\n"],"mappings":";;;;;AAKA,IAAM,kBAAkB,OAAO,WAAW,MAAM;CAC9C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,MAAM,CAAC,WAAW;GAClB,OAAO,CAAC,mBAAmB;GAC5B;EACD,MAAM;GACJ,IAAI,CAAC,QAAQ,OAAO;GACpB,IAAI,CAAC,QAAQ,OAAO;GACrB;EACD,aAAa;GACX,MAAM,CAAC,SAAS;GAChB,OAAO,CAAC,QAAQ;GACjB;EACF;CACF,CAAC;AAEF,IAAM,cAAc,OAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,sBAAsB;GACpB,MAAM,EAAE;GACR,OAAO,EAAE;GACV;EACD,OAAO;GACL,MAAM,CAAC,OAAO;GACd,OAAO,EAAE;GACV;EACF;CACD,kBAAkB,CAChB;EACE,sBAAsB;EACtB,OAAO;EACP,OAAO,CAAC,UAAU;EACnB,EACD;EACE,sBAAsB;EACtB,OAAO;EACP,OAAO,CAAC,OAAO;EAChB,CACF;CACF,CAAC;AAEF,IAAM,YAAY,OAAO,WAAW,WAAW,EAC7C,MAAM;CAAC;CAAY;CAAgB;CAAY;CAAW,EAC3D,CAAC;AAIF,IAAa,aAAa,EACxB,UACA,cAAc,OACd,OAAO,MACP,QAAQ,QACR,GAAG,WAEH,qBAAC,iBAAD;CACE,GAAI;CACG;CACM;CACP;WAJR,CAME,oBAAC,aAAD;EAAoB;EAAO,sBAAsB;YAC/C,oBAAC,WAAD,EAAa,CAAA;EACD,CAAA,EACd,oBAAC,OAAD,EAAM,UAAe,CAAA,CACL"}
+{"version":3,"file":"RadioCard.js","names":[],"sources":["../../../src/components/radio-card/RadioCard.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledRadioCard = styled(RadioGroup.Item, {\n  base: [\n    'items-center',\n    'bg-white',\n    'border',\n    'border-grey-600',\n    'rounded-sm',\n    'cursor-pointer',\n    'flex',\n    'text-left',\n    'data-[state=checked]:-outline-offset-2',\n    'data-[state=checked]:outline-2',\n    'data-[state=checked]:outline-primary-800',\n    'data-[state=checked]:outline-solid'\n  ],\n  variants: {\n    align: {\n      left: ['flex-row'],\n      right: ['flex-row-reverse']\n    },\n    size: {\n      md: ['px-4', 'py-3'],\n      lg: ['px-8', 'py-4']\n    },\n    isFullWidth: {\n      true: ['w-full'],\n      false: ['w-max']\n    }\n  }\n})\n\nconst RadioButton = styled('div', {\n  base: [\n    'items-center',\n    'appearance-none',\n    'bg-transparent',\n    'border',\n    'border-grey-900',\n    'rounded-full',\n    'flex',\n    'shrink-0',\n    'justify-center',\n    'p-0',\n    'size-4',\n    'transition-all',\n    'duration-50',\n    'ease-out',\n    'in-data-[state=checked]:bg-primary-800',\n    'in-data-[state=checked]:border-primary-800'\n  ],\n  variants: {\n    containerIsFullWidth: {\n      true: [],\n      false: []\n    },\n    align: {\n      left: ['mr-4'],\n      right: []\n    }\n  },\n  compoundVariants: [\n    {\n      containerIsFullWidth: true,\n      align: 'right',\n      class: ['ml-auto']\n    },\n    {\n      containerIsFullWidth: false,\n      align: 'right',\n      class: ['ml-4']\n    }\n  ]\n})\n\nconst Indicator = styled(RadioGroup.Indicator, {\n  base: ['bg-white', 'rounded-full', 'absolute', 'size-1.5']\n})\n\ntype RadioCardProps = React.ComponentProps<typeof StyledRadioCard>\n\nexport const RadioCard = ({\n  children,\n  isFullWidth = false,\n  size = 'md',\n  align = 'left',\n  ...rest\n}: RadioCardProps) => (\n  <StyledRadioCard\n    {...rest}\n    align={align}\n    isFullWidth={isFullWidth}\n    size={size}\n  >\n    <RadioButton align={align} containerIsFullWidth={isFullWidth}>\n      <Indicator />\n    </RadioButton>\n    <div>{children}</div>\n  </StyledRadioCard>\n)\n"],"mappings":";;;;;AAKA,IAAM,kBAAkB,OAAO,WAAW,MAAM;CAC9C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,MAAM,CAAC,UAAU;GACjB,OAAO,CAAC,kBAAkB;EAC5B;EACA,MAAM;GACJ,IAAI,CAAC,QAAQ,MAAM;GACnB,IAAI,CAAC,QAAQ,MAAM;EACrB;EACA,aAAa;GACX,MAAM,CAAC,QAAQ;GACf,OAAO,CAAC,OAAO;EACjB;CACF;AACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,sBAAsB;GACpB,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,OAAO;GACL,MAAM,CAAC,MAAM;GACb,OAAO,CAAC;EACV;CACF;CACA,kBAAkB,CAChB;EACE,sBAAsB;EACtB,OAAO;EACP,OAAO,CAAC,SAAS;CACnB,GACA;EACE,sBAAsB;EACtB,OAAO;EACP,OAAO,CAAC,MAAM;CAChB,CACF;AACF,CAAC;AAED,IAAM,YAAY,OAAO,WAAW,WAAW,EAC7C,MAAM;CAAC;CAAY;CAAgB;CAAY;AAAU,EAC3D,CAAC;AAID,IAAa,aAAa,EACxB,UACA,cAAc,OACd,OAAO,MACP,QAAQ,QACR,GAAG,WAEH,qBAAC,iBAAD;CACE,GAAI;CACG;CACM;CACP;WAJR,CAME,oBAAC,aAAD;EAAoB;EAAO,sBAAsB;YAC/C,oBAAC,WAAD,CAAY,CAAA;CACD,CAAA,GACb,oBAAC,OAAD,EAAM,SAAc,CAAA,CACL"}

package/dist/components/radio-card/RadioCardGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCardGroup.js","names":[],"sources":["../../../src/components/radio-card/RadioCardGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\nimport type { Override } from '~/utilities/types'\n\nimport { RadioCard } from './RadioCard'\n\ntype RadioCardGroupProps = Override<\n  React.ComponentProps<typeof RadioCard>,\n  React.ComponentProps<typeof RadioGroup.Root>\n>\n\nexport const RadioCardGroup = ({\n  className,\n  children,\n  size,\n  isFullWidth,\n  align,\n  ...rest\n}: RadioCardGroupProps) => (\n  <RadioGroup.Root {...rest}>\n    <div className={cn('flex', 'flex-row', 'flex-wrap', 'gap-3', className)}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child?.type === RadioCard) {\n          return React.cloneElement(\n            child as React.ReactElement<React.ComponentProps<typeof RadioCard>>,\n            { size, isFullWidth, align }\n          )\n        }\n        return child\n      })}\n    </div>\n  </RadioGroup.Root>\n)\n"],"mappings":";;;;;;AAaA,IAAa,kBAAkB,EAC7B,WACA,UACA,MACA,aACA,OACA,GAAG,WAEH,oBAAC,WAAW,MAAZ;CAAiB,GAAI;WACnB,oBAAC,OAAD;EAAK,WAAW,GAAG,QAAQ,YAAY,aAAa,SAAS,UAAU;YACpE,QAAM,SAAS,IAAI,WAAW,UAAU;AACvC,OAAI,QAAM,eAAe,MAAM,IAAI,OAAO,SAAS,UACjD,QAAO,QAAM,aACX,OACA;IAAE;IAAM;IAAa;IAAO,CAC7B;AAEH,UAAO;IACP;EACE,CAAA;CACU,CAAA"}
+{"version":3,"file":"RadioCardGroup.js","names":[],"sources":["../../../src/components/radio-card/RadioCardGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { cn } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { RadioCard } from './RadioCard'\n\ntype RadioCardGroupProps = Override<\n  React.ComponentProps<typeof RadioCard>,\n  React.ComponentProps<typeof RadioGroup.Root>\n>\n\nexport const RadioCardGroup = ({\n  className,\n  children,\n  size,\n  isFullWidth,\n  align,\n  ...rest\n}: RadioCardGroupProps) => (\n  <RadioGroup.Root {...rest}>\n    <div className={cn('flex', 'flex-row', 'flex-wrap', 'gap-3', className)}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child?.type === RadioCard) {\n          return React.cloneElement(\n            child as React.ReactElement<React.ComponentProps<typeof RadioCard>>,\n            { size, isFullWidth, align }\n          )\n        }\n        return child\n      })}\n    </div>\n  </RadioGroup.Root>\n)\n"],"mappings":";;;;;;AAYA,IAAa,kBAAkB,EAC7B,WACA,UACA,MACA,aACA,OACA,GAAG,WAEH,oBAAC,WAAW,MAAZ;CAAiB,GAAI;WACnB,oBAAC,OAAD;EAAK,WAAW,GAAG,QAAQ,YAAY,aAAa,SAAS,SAAS;YACnE,QAAM,SAAS,IAAI,WAAW,UAAU;GACvC,IAAI,QAAM,eAAe,KAAK,KAAK,OAAO,SAAS,WACjD,OAAO,QAAM,aACX,OACA;IAAE;IAAM;IAAa;GAAM,CAC7B;GAEF,OAAO;EACT,CAAC;CACE,CAAA;AACU,CAAA"}

package/dist/components/search-field/SearchField.d.ts

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

package/dist/components/search-field/SearchField.js

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

package/dist/components/search-field/SearchField.js.map

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

package/dist/components/search-input/SearchInput.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Input } from '../../components/input/Input';
+import { Input } from '../input/Input';
 export type SearchInputProps = React.ComponentProps<typeof Input> & {
     size?: 'sm' | 'md' | 'lg';
     className?: string;

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

@@ -2,17 +2,12 @@ import { cn, styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { useCallbackRef } from "../../utilities/hooks/useCallbackRef.js";
-import { InputBackground, InputText } from "../input/Input.js";
 import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
+import { InputBackground, InputText } from "../input/Input.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) {
-	INPUT_ICON["SEARCH"] = "SEARCH";
-	INPUT_ICON["CLEAR"] = "CLEAR";
-	return INPUT_ICON;
-}(INPUT_ICON || {});
 var StyledIcon = styled(Icon, {
 	base: [
 		"text-grey-700",
@@ -25,14 +20,14 @@ var StyledIcon = styled(Icon, {
 		lg: ["right-2.5", "size-5"]
 	} }
 });
-var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", theme, className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...remainingProps }, ref) => {
+var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", theme, className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...rest }, ref) => {
 	const [inputElRef, setInputElRef] = useCallbackRef();
 	const [innerValue, setInnerValue] = React$1.useState(defaultValue);
-	const [activeIcon, setActiveIcon] = React$1.useState(defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
+	const [activeIcon, setActiveIcon] = React$1.useState(defaultValue ? "CLEAR" : "SEARCH");
 	React$1.useEffect(() => {
 		if (typeof value === "undefined") return;
 		setInnerValue(value);
-		setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
+		setActiveIcon(value ? "CLEAR" : "SEARCH");
 	}, [value]);
 	const iconSize = React$1.useMemo(() => getFieldIconSize(size), [size]);
 	React$1.useImperativeHandle(ref, () => inputElRef.current);
@@ -50,10 +45,10 @@ var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", th
 		const newValue = event.target.value;
 		setInnerValue(newValue);
 		onValueChange?.(newValue);
-		setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
+		setActiveIcon(newValue ? "CLEAR" : "SEARCH");
 	};
 	const getIcon = () => {
-		if (activeIcon === INPUT_ICON.SEARCH) return /* @__PURE__ */ jsx(StyledIcon, {
+		if (activeIcon === "SEARCH") return /* @__PURE__ */ jsx(StyledIcon, {
 			is: Search,
 			size,
 			className: cn(size == "sm" ? "size-4" : "size-5", "top-1/2", "-translate-y-1/2")
@@ -76,7 +71,7 @@ var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", th
 			ref: setInputElRef,
 			size,
 			type: "search",
-			...remainingProps,
+			...rest,
 			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")

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,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"}
+{"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 { styled, cn } from '../../styled'\nimport { useCallbackRef } from '../../utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Input, InputBackground, InputText } from '../input/Input'\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      ...rest\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          {...rest}\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":";;;;;;;;;;AAyBA,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;CAAqB;CACzD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,aAAa,QAAQ;EAC1B,IAAI,CAAC,aAAa,QAAQ;CAC5B,EACF;AACF,CAAC;AAED,IAAa,cAAc,QAAM,YAE7B,EACE,OAAO,MACP,aAAa,YACb,OACA,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,QAEL,QACG;CACH,MAAM,CAAC,YAAY,iBAAiB,eAAe;CACnD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,YAAY;CAC/D,MAAM,CAAC,YAAY,iBAAiB,QAAM,SACxC,eAAA,UAAA,QACF;CACA,QAAM,gBAAgB;EACpB,IAAI,OAAO,UAAU,aAAa;EAClC,cAAc,KAAK;EACnB,cAAc,QAAA,UAAA,QAA4C;CAC5D,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,WAAW,QAAM,cAAc,iBAAiB,IAAI,GAAG,CAAC,IAAI,CAAC;CAEnE,QAAM,oBAAoB,WAAW,WAAW,OAA2B;CAE3E,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAOd,CAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,OACF,CAAC,EAAE,IAAA,EACqB,OAAO,SAAS,EAAE;EAC1C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,KACX,CAAC;EACD,QAAQ,cAAc,GAAG;EACzB,QAAQ,MAAM;EACd,gBAAgB,EAAE;CACpB;CAEA,MAAM,kBAAkB,UAA+C;EACrE,WAAW,KAAK;EAEhB,MAAM,WAAW,MAAM,OAAO;EAC9B,cAAc,QAAQ;EACtB,gBAAgB,QAAQ;EACxB,cAAc,WAAA,UAAA,QAA+C;CAC/D;CAEA,MAAM,gBAAgB;EACpB,IAAI,eAAA,UACF,OACE,oBAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,GACT,QAAQ,OAAO,WAAW,UAC1B,WACA,kBACF;EACD,CAAA;EAGL,OACE,oBAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACR,CAAA;CAEhB;CAEA,OACE,qBAAC,iBAAD;EACQ;EACM;EACL;EACP,WAAW,GAAG,YAAY,UAAU,SAAS;YAJ/C,CAME,oBAAC,WAAD;GACE,KAAK;GACC;GACN,MAAK;GACL,GAAI;GACJ,OAAO;GACP,UAAU;GACV,WAAW,GACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,oDACF;EACD,CAAA,GACA,QAAQ,CACM;;AAErB,CACF;AAEA,YAAY,cAAc"}

package/dist/components/section-message/{SectionMessageContext.d.ts → SectionMessage.context.d.ts}

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import type { SectionMessageTheme } from './SectionMessage';
 export type SectionMessageContextValue = {
     theme: SectionMessageTheme;

package/dist/components/section-message/{SectionMessageContext.js → SectionMessage.context.js}

@@ -1,11 +1,11 @@
-import React from "react";
+import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/section-message/SectionMessageContext.tsx
-var SectionMessageContext = React.createContext(null);
+//#region src/components/section-message/SectionMessage.context.tsx
+var SectionMessageContext = React$1.createContext(null);
 var SectionMessageProvider = ({ theme = "info", children }) => {
-	const [hasIcon, setHasIcon] = React.useState(false);
-	const [hasDismiss, setHasDismiss] = React.useState(false);
-	const value = React.useMemo(() => ({
+	const [hasIcon, setHasIcon] = React$1.useState(false);
+	const [hasDismiss, setHasDismiss] = React$1.useState(false);
+	const value = React$1.useMemo(() => ({
 		theme,
 		hasIcon,
 		setHasIcon,
@@ -24,11 +24,11 @@ var SectionMessageProvider = ({ theme = "info", children }) => {
 	});
 };
 var useSectionMessageContext = () => {
-	const context = React.useContext(SectionMessageContext);
+	const context = React$1.useContext(SectionMessageContext);
 	if (!context) throw new Error("useSectionMessageContext must be used within a SectionMessageProvider");
 	return context;
 };
 //#endregion
-export { SectionMessageProvider, useSectionMessageContext };
+export { SectionMessageContext, SectionMessageProvider, useSectionMessageContext };
 
-//# sourceMappingURL=SectionMessageContext.js.map
+//# sourceMappingURL=SectionMessage.context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionMessage.context.js","names":[],"sources":["../../../src/components/section-message/SectionMessage.context.tsx"],"sourcesContent":["import * as 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) => {\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,QAAM,cAAiD,IAAI;AAE7D,IAAa,0BAA0B,EACrC,QAAQ,QACR,eACiC;CACjC,MAAM,CAAC,SAAS,cAAc,QAAM,SAAS,KAAK;CAClD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,KAAK;CAExD,MAAM,QAAQ,QAAM,eACX;EAAE;EAAO;EAAS;EAAY;EAAY;CAAc,IAC/D;EAAC;EAAO;EAAS;EAAY;EAAY;CAAa,CACxD;CAEA,OACE,oBAAC,sBAAsB,UAAvB;EAAuC;EACpC;CAC6B,CAAA;AAEpC;AAEA,IAAa,iCAA6D;CACxE,MAAM,UAAU,QAAM,WAAW,qBAAqB;CAEtD,IAAI,CAAC,SACH,MAAM,IAAI,MACR,uEACF;CAGF,OAAO;AACT"}

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

@@ -1,8 +1,13 @@
-import React from 'react';
-declare const StyledSectionMessage: React.ForwardRefExoticComponent<Omit<import("../dismissible/DismissibleRoot").IDismissibleRootInternalProps & import("../dismissible/DismissibleRoot").IDismissibleRootProps & {
+import * as React from 'react';
+import { SectionMessageDescription } from './SectionMessageDescription';
+import { SectionMessageDismiss } from './SectionMessageDismiss';
+import { SectionMessageIcon } from './SectionMessageIcon';
+import { SectionMessageActions, SectionMessageContent } from './SectionMessageLayout';
+import { SectionMessageTitle } from './SectionMessageTitle';
+declare const StyledSectionMessage: React.ForwardRefExoticComponent<Omit<import("../dismissible/DismissibleRoot").DismissibleRootInternalProps & import("../dismissible/DismissibleRoot").DismissibleRootProps & {
     children?: React.ReactNode | undefined;
-}, "theme" | "hasDismiss" | "hasIcon"> & {
-    theme?: "neutral" | "success" | "warning" | "info" | "error" | undefined;
+}, "hasDismiss" | "hasIcon" | "theme"> & {
+    theme?: "error" | "info" | "neutral" | "success" | "warning" | undefined;
     hasIcon?: boolean | undefined;
     hasDismiss?: boolean | undefined;
 } & {
@@ -15,22 +20,13 @@ export type SectionMessageTheme = 'success' | 'warning' | 'error' | 'neutral' |
 export type SectionMessageProps = React.ComponentProps<typeof SectionMessageRoot> & {
     theme?: SectionMessageTheme;
 };
-export declare const SectionMessage: {
-    ({ theme, ...rest }: SectionMessageProps): React.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<React.SVGProps<SVGSVGElement>, "size"> & {
-        size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
-    } & {
-        as?: React.ElementType;
-    }, "as" | "is"> & {
-        is: React.FC<React.SVGProps<SVGSVGElement>>;
-        as?: never;
-    }, "ref"> & React.RefAttributes<SVGSVGElement>>) => React.JSX.Element;
-    Dismiss: ({ label, className, ...rest }: React.ComponentProps<typeof import("..").ActionIcon>) => React.JSX.Element;
-    Content: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
-        as?: React.ElementType;
-    }>;
-    Actions: ({ className, ...rest }: React.ComponentProps<"div">) => React.JSX.Element;
-};
+export declare function SectionMessage({ theme, ...rest }: SectionMessageProps): React.JSX.Element;
+export declare namespace SectionMessage {
+    export { SectionMessageTitle as Title };
+    export { SectionMessageDescription as Description };
+    export { SectionMessageIcon as Icon };
+    export { SectionMessageDismiss as Dismiss };
+    export { SectionMessageContent as Content };
+    export { SectionMessageActions as Actions };
+}
 export {};

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

@@ -1,6 +1,6 @@
 import { styled } from "../../styled.js";
 import { Dismissible } from "../dismissible/index.js";
-import { SectionMessageProvider, useSectionMessageContext } from "./SectionMessageContext.js";
+import { SectionMessageProvider, useSectionMessageContext } from "./SectionMessage.context.js";
 import { SectionMessageDescription } from "./SectionMessageDescription.js";
 import { SectionMessageDismiss } from "./SectionMessageDismiss.js";
 import { SectionMessageIcon } from "./SectionMessageIcon.js";

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,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"}
+{"version":3,"file":"SectionMessage.js","names":[],"sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Dismissible } from '../dismissible'\nimport {\n  SectionMessageProvider,\n  useSectionMessageContext\n} from './SectionMessage.context'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n  SectionMessageActions,\n  SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n  base: [\n    'relative',\n    'rounded-md',\n    'flex',\n    'shrink-0',\n    'min-h-12',\n    'p-4',\n    'border',\n    'border-white'\n  ],\n  variants: {\n    theme: {\n      success: ['bg-success-light', 'text-success-dark'],\n      warning: ['bg-warning-light', 'text-warning-text'],\n      error: ['bg-danger-light', 'text-danger-dark'],\n      neutral: ['bg-grey-100', 'text-grey-1000'],\n      info: ['bg-info-light', 'text-info-dark']\n    },\n    hasIcon: {\n      true: ['pl-10']\n    },\n    hasDismiss: {\n      true: ['pr-12']\n    }\n  }\n})\n\nconst SectionMessageRoot = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledSectionMessage> & {\n  className?: string\n}) => {\n  const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n  return (\n    <StyledSectionMessage\n      {...rest}\n      theme={theme}\n      hasIcon={hasIcon}\n      hasDismiss={hasDismiss}\n    >\n      <div className=\"flex grow justify-between gap-3\">{children}</div>\n    </StyledSectionMessage>\n  )\n}\n\nexport type SectionMessageTheme =\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral'\n  | 'info'\n\nexport type SectionMessageProps = React.ComponentProps<\n  typeof SectionMessageRoot\n> & {\n  theme?: SectionMessageTheme\n}\n\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":";;;;;;;;;;;;AAkBA,IAAM,uBAAuB,OAAO,aAAa;CAC/C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,SAAS,CAAC,oBAAoB,mBAAmB;GACjD,SAAS,CAAC,oBAAoB,mBAAmB;GACjD,OAAO,CAAC,mBAAmB,kBAAkB;GAC7C,SAAS,CAAC,eAAe,gBAAgB;GACzC,MAAM,CAAC,iBAAiB,gBAAgB;EAC1C;EACA,SAAS,EACP,MAAM,CAAC,OAAO,EAChB;EACA,YAAY,EACV,MAAM,CAAC,OAAO,EAChB;CACF;AACF,CAAC;AAED,IAAM,sBAAsB,EAC1B,UACA,GAAG,WAGC;CACJ,MAAM,EAAE,OAAO,SAAS,eAAe,yBAAyB;CAEhE,OACE,oBAAC,sBAAD;EACE,GAAI;EACG;EACE;EACG;YAEZ,oBAAC,OAAD;GAAK,WAAU;GAAmC;EAAc,CAAA;CAC5C,CAAA;AAE1B;AAeA,IAAa,kBAAkB,EAC7B,QAAQ,QACR,GAAG,WAEH,oBAAC,iBAAD,EAAA,UACE,oBAAC,wBAAD;CAA+B;WAC7B,oBAAC,oBAAD,EAAoB,GAAI,KAAO,CAAA;AACT,CAAA,EACT,CAAA;AAGnB,eAAe,QAAQ;AACvB,eAAe,cAAc;AAC7B,eAAe,OAAO;AACtB,eAAe,UAAU;AACzB,eAAe,UAAU;AACzB,eAAe,UAAU"}

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

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

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

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

@@ -2,7 +2,7 @@ import { cn } from "../../styled.js";
 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 { useSectionMessageContext } from "./SectionMessage.context.js";
 import { useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Close } from "@atom-learning/icons";

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

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

@@ -1,6 +1,6 @@
 import { cn } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
-import { useSectionMessageContext } from "./SectionMessageContext.js";
+import { useSectionMessageContext } from "./SectionMessage.context.js";
 import { useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Danger, Error, Info, OkCircle } from "@atom-learning/icons";

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

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

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

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,oBAAC,OAAD;CAAK,WAAW,GAAG,cAAc,YAAY,UAAU;WACrD,oBAAC,OAAD;EAAK,WAAU;EAAuB,GAAI;EAAQ,CAAA;CAC9C,CAAA"}
+{"version":3,"file":"SectionMessageLayout.js","names":[],"sources":["../../../src/components/section-message/SectionMessageLayout.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, 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":";;;;AAIA,IAAa,wBAAwB,OAAO,OAAO,EACjD,MAAM;CAAC;CAAc;CAAY;CAAU;AAAiB,EAC9D,CAAC;AAED,IAAa,yBAAyB,EACpC,WACA,GAAG,WAEH,oBAAC,OAAD;CAAK,WAAW,GAAG,cAAc,YAAY,SAAS;WACpD,oBAAC,OAAD;EAAK,WAAU;EAAuB,GAAI;CAAO,CAAA;AAC9C,CAAA"}

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

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

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): 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"}
+{"version":3,"file":"SectionMessageTitle.js","names":[],"sources":["../../../src/components/section-message/SectionMessageTitle.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport const SectionMessageTitle = (\n  props: React.ComponentProps<typeof Text>\n) => <Text size=\"md\" weight=\"bold\" {...props} />\n"],"mappings":";;;;AAIA,IAAa,uBACX,UACG,oBAAC,MAAD;CAAM,MAAK;CAAK,QAAO;CAAO,GAAI;AAAQ,CAAA"}

package/dist/components/segmented-control/{SegmentedControlContext.js → SegmentedControl.context.js}

@@ -1,5 +1,5 @@
 import * as React$1 from "react";
-//#region src/components/segmented-control/SegmentedControlContext.tsx
+//#region src/components/segmented-control/SegmentedControl.context.tsx
 var SegmentedControlContext = React$1.createContext({
 	size: "md",
 	theme: "primary",
@@ -10,4 +10,4 @@ var SegmentedControlContext = React$1.createContext({
 //#endregion
 export { SegmentedControlContext };
 
-//# sourceMappingURL=SegmentedControlContext.js.map
+//# sourceMappingURL=SegmentedControl.context.js.map

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

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

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

@@ -1,44 +1,44 @@
 export declare const SegmentedControl: {
-    Root: ({ size, theme, defaultValue, children, ...props }: React.PropsWithChildren<import("./SegmentedControlRoot").SegmentedControlRootProps>) => React.JSX.Element;
+    Root: ({ size, theme, defaultValue, children, value, onValueChange, ...rest }: React.PropsWithChildren<import("./SegmentedControlRoot").SegmentedControlRootProps>) => import("react").JSX.Element;
     Item: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "size" | "theme"> & {
-        theme?: ("primary" | "marsh" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "marsh">>) | undefined;
-        size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
+        theme?: ("marsh" | "primary" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "marsh" | "primary">>) | undefined;
+        size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
     } & {
         as?: import("react").ElementType;
     }, "size">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    Heading: (props: Omit<React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size" | "noCapsize" | "weight" | "family"> & {
-        size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
-        noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
-        family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
+    Heading: (props: Omit<React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "family" | "noCapsize" | "size" | "weight"> & {
+        size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+        noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
     } & {
         as?: import("react").ElementType;
     }, "as"> & {
-        as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+        as?: 'blockquote' | 'caption' | 'dd' | 'dt' | 'figcaption' | 'li' | 'p' | 'span' | 'legend' | React.ComponentType | React.ElementType;
     }, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, "size"> & {
-        size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
+        size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
     } & {
         as?: import("react").ElementType;
-    }>>, "size">) => React.JSX.Element;
-    Description: (props: Omit<React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size" | "noCapsize" | "weight" | "family"> & {
-        size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
-        noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
-        family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
+    }>>, 'size'>) => import("react").JSX.Element;
+    Description: (props: Omit<React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "family" | "noCapsize" | "size" | "weight"> & {
+        size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+        noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
     } & {
         as?: import("react").ElementType;
     }, "as"> & {
-        as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+        as?: 'blockquote' | 'caption' | 'dd' | 'dt' | 'figcaption' | 'li' | 'p' | 'span' | 'legend' | React.ComponentType | React.ElementType;
     }, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, "size"> & {
-        size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
+        size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
     } & {
         as?: import("react").ElementType;
-    }>>, "size">) => React.JSX.Element;
-    Icon: (props: Omit<React.ComponentProps<typeof import("..").Icon>, "size">) => React.JSX.Element;
+    }>>, 'size'>) => import("react").JSX.Element;
+    Icon: (props: Omit<React.ComponentProps<typeof import("..").Icon>, 'size'>) => import("react").JSX.Element;
     Content: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsContentProps & import("react").RefAttributes<HTMLDivElement>, never> & {
         as?: import("react").ElementType;
     }>;
-    Badge: ({ className, ...props }: Omit<React.ComponentProps<typeof import("..").Badge>, "size">) => React.JSX.Element;
+    Badge: ({ className, ...rest }: Omit<React.ComponentProps<typeof import("..").Badge>, 'size'>) => import("react").JSX.Element;
     ItemList: (props: React.ComponentProps<{
         ({ children, colorScheme, ...rest }: React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>, never> & {
             as?: import("react").ElementType;
@@ -46,5 +46,5 @@ export declare const SegmentedControl: {
             colorScheme?: import("../..").TcolorScheme;
         }): import("react").JSX.Element;
         displayName: string;
-    }>) => React.JSX.Element;
+    }>) => import("react").JSX.Element;
 };

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,mBAAmB;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;AACZ"}

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">) => React.JSX.Element;
+export declare const SegmentedControlBadge: ({ className, ...rest }: Omit<React.ComponentProps<typeof Badge>, 'size'>) => React.JSX.Element;