@atom-learning/components 6.2.2 → 6.4.0

package/dist/components/pagination/PaginationPopover.js

@@ -1,2 +1,2 @@
-import{Ellypsis as s}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-group/CheckboxGroup.js";import"../checkbox-tree/CheckboxTree.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../drawer/Drawer.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as g}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../form/useFormCustomContext.js";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as f}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../navigation-menu-vertical/NavigationMenuVertical.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/SideBarContext.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../skeleton-loader/Skeleton.js";import"clsx";import"../tile/Tile.js";import"../table/Table.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../spacer/Spacer.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import"../toast/Toast.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../tree/Tree.js";import"../video/Video.js";import"../keyboard-shortcut/index.js";import"../segmented-control/SegmentedControlContext.js";import"../segmented-control/SegmentedControlContent.js";import"../segmented-control/SegmentedControlDescription.js";import"../segmented-control/SegmentedControlHeading.js";import"../segmented-control/SegmentedControlItem.js";import"../segmented-control/SegmentedControlItemList.js";import"../segmented-control/SegmentedControlRoot.js";import"../file-drop/FileDrop.js";import"../file-drop/FileDropContext.js";import{PaginationPage as u}from"./PaginationPage.js";import{usePagination as d}from"./usePagination.js";const E=({children:e})=>{const{pagesCount:a,labels:i}=d(),p=Array.from({length:a},(o,l)=>l+1),[n,m]=t.useState(!1);return t.createElement(r,{open:n,onOpenChange:m,defaultOpen:!1},t.createElement(r.Trigger,{asChild:!0},e||t.createElement(c,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(f,{is:s}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,className:"p-0"},t.createElement(g,{className:"flex flex-wrap justify-center gap-1 p-4"},p==null?void 0:p.map(o=>t.createElement(u,{key:o,pageNumber:o,onClick:()=>m(!1)})))))};export{E as PaginationPopover};
+import{Ellypsis as s}from"@atom-learning/icons";import e from"react";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as g}from"../icon/Icon.js";import{Popover as o}from"../popover/Popover.js";import{PaginationPage as f}from"./PaginationPage.js";import{usePagination as u}from"./usePagination.js";const d=({children:i})=>{const{pagesCount:l,labels:r}=u(),a=Array.from({length:l},(t,m)=>m+1),[p,n]=e.useState(!1);return e.createElement(o,{open:p,onOpenChange:n,defaultOpen:!1},e.createElement(o.Trigger,{asChild:!0},i||e.createElement(c,{hasTooltip:!1,size:"md",theme:"neutral",label:(r==null?void 0:r.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},e.createElement(g,{is:s}))),e.createElement(o.Content,{size:"md",showCloseButton:!1,className:"p-0"},e.createElement("div",{className:"flex flex-wrap justify-center gap-1 p-4"},a==null?void 0:a.map(t=>e.createElement(f,{key:t,pageNumber:t,onClick:()=>n(!1)})))))};export{d as PaginationPopover};
 //# sourceMappingURL=PaginationPopover.js.map

package/dist/components/pagination/PaginationPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon, Flex, Icon, Popover } from '..'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n  children\n}: React.PropsWithChildren<unknown>) => {\n  const { pagesCount, labels } = usePagination()\n  const paginationItems = Array.from(\n    { length: pagesCount },\n    (_, index) => index + 1\n  )\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n  return (\n    <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n      <Popover.Trigger asChild>\n        {children || (\n          <ActionIcon\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n            label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n            data-testid=\"pagination_popover_trigger\"\n          >\n            <Icon is={Ellypsis} />\n          </ActionIcon>\n        )}\n      </Popover.Trigger>\n      <Popover.Content size=\"md\" showCloseButton={false} className=\"p-0\">\n        <Flex className=\"flex flex-wrap justify-center gap-1 p-4\">\n          {paginationItems?.map((pageNumber) => {\n            return (\n              <PaginationPage\n                key={pageNumber}\n                pageNumber={pageNumber}\n                onClick={() => setIsOpen(false)}\n              />\n            )\n          })}\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],"names":["PaginationPopover","children","pagesCount","labels","usePagination","paginationItems","_","index","isOpen","setIsOpen","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationPage"],"mappings":"uqIAOO,MAAMA,EAAoB,CAAC,CAChC,SAAAC,CACF,IAAwC,CACtC,KAAM,CAAE,WAAAC,EAAY,OAAAC,CAAO,EAAIC,EAAc,EACvCC,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEM,CAACC,EAAQC,CAAS,EAAIC,EAAM,SAAkB,EAAK,EAEzD,OACEA,EAAA,cAACC,EAAA,CAAQ,KAAMH,EAAQ,aAAcC,EAAW,YAAa,EAAA,EAC3DC,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,IACrBV,GACCS,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOT,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAEZO,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,CAAAA,CAAU,CACtB,CAEJ,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,UAAU,KAAA,EAC3DD,EAAA,cAACK,EAAA,CAAK,UAAU,yCACbV,EAAAA,GAAA,YAAAA,EAAiB,IAAKW,GAEnBN,EAAA,cAACO,EAAA,CACC,IAAKD,EACL,WAAYA,EACZ,QAAS,IAAMP,EAAU,EAAK,CAAA,CAChC,CAGN,CAAA,CACF,CACF,CAEJ"}
+{"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Popover } from '../popover/Popover'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n  children\n}: React.PropsWithChildren<unknown>) => {\n  const { pagesCount, labels } = usePagination()\n  const paginationItems = Array.from(\n    { length: pagesCount },\n    (_, index) => index + 1\n  )\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n  return (\n    <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n      <Popover.Trigger asChild>\n        {children || (\n          <ActionIcon\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n            label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n            data-testid=\"pagination_popover_trigger\"\n          >\n            <Icon is={Ellypsis} />\n          </ActionIcon>\n        )}\n      </Popover.Trigger>\n      <Popover.Content size=\"md\" showCloseButton={false} className=\"p-0\">\n        <div className=\"flex flex-wrap justify-center gap-1 p-4\">\n          {paginationItems?.map((pageNumber) => {\n            return (\n              <PaginationPage\n                key={pageNumber}\n                pageNumber={pageNumber}\n                onClick={() => setIsOpen(false)}\n              />\n            )\n          })}\n        </div>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],"names":["PaginationPopover","children","pagesCount","labels","usePagination","paginationItems","_","index","isOpen","setIsOpen","React","Popover","ActionIcon","Icon","Ellypsis","pageNumber","PaginationPage"],"mappings":"8TASO,MAAMA,EAAoB,CAAC,CAChC,SAAAC,CACF,IAAwC,CACtC,KAAM,CAAE,WAAAC,EAAY,OAAAC,CAAO,EAAIC,IACzBC,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEM,CAACC,EAAQC,CAAS,EAAIC,EAAM,SAAkB,EAAK,EAEzD,OACEA,EAAA,cAACC,EAAA,CAAQ,KAAMH,EAAQ,aAAcC,EAAW,YAAa,EAAA,EAC3DC,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,EAAA,EACrBV,GACCS,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOT,GAAA,KAAA,OAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAAA,EAEZO,EAAA,cAACG,EAAA,CAAK,GAAIC,CAAU,CAAA,CACtB,CAEJ,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,UAAU,KAC3DD,EAAAA,EAAA,cAAC,MAAI,CAAA,UAAU,yCACZL,EAAAA,GAAA,YAAAA,EAAiB,IAAKU,GAEnBL,EAAA,cAACM,EAAA,CACC,IAAKD,EACL,WAAYA,EACZ,QAAS,IAAMN,EAAU,EAAK,CAAA,CAChC,CAGN,CAAA,CACF,CACF,CAEJ"}

package/dist/components/pagination/PaginationPreviousButton.d.ts

@@ -1,17 +1,17 @@
 import * as React from 'react';
 declare const StyledActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "theme" | "size" | "appearance" | "isRounded"> & {
-    theme?: ("warning" | "success" | "neutral" | "primary" | "white" | "primaryDark" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "warning" | "success" | "neutral" | "primary" | "white" | "primaryDark" | "danger">>) | undefined;
+}, "appearance" | "size" | "theme" | "isRounded"> & {
+    theme?: ("primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger">>) | undefined;
     appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
     size?: ("sm" | "md" | "lg" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs">>) | undefined;
     isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "children" | "label" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide"> & {
+}, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../../types/navigatorActions.types").NavigatorActions> & {
     children: React.ReactNode;
     label: string;
-} & Omit<import("../../utilities/optional-tooltip-wrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, never> & {
+} & Omit<import("../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types/navigatorActions.types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, never> & {
     as?: React.ElementType;
 }>;
 export declare const PaginationPreviousButton: (props: Partial<React.ComponentProps<typeof StyledActionIcon>>) => React.JSX.Element;

package/dist/components/pagination/PaginationPreviousButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationPreviousButton.js","sources":["../../../src/components/pagination/PaginationPreviousButton.tsx"],"sourcesContent":["import { ChevronLeft } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: ['mr-1', 'disabled:opacity-30']\n})\n\nexport const PaginationPreviousButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const { goToPreviousPage, labels, previousAvailablePage } = usePagination()\n\n  const isDisabled = !previousAvailablePage\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToPreviousPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.previousPageButtonLabel || 'Previous page'}\n    >\n      <Icon is={ChevronLeft} />\n    </StyledActionIcon>\n  )\n}\n"],"names":["StyledActionIcon","styled","ActionIcon","PaginationPreviousButton","props","goToPreviousPage","labels","previousAvailablePage","usePagination","React","Icon","ChevronLeft"],"mappings":"wQASA,MAAMA,EAAmBC,EAAOC,EAAY,CAC1C,KAAM,CAAC,OAAQ,qBAAqB,CACtC,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,iBAAAC,EAAkB,OAAAC,EAAQ,sBAAAC,CAAsB,EAAIC,IAI5D,OACEC,EAAA,cAACT,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,QAASK,EACT,SARe,CAACE,EASf,GAAGH,EACJ,OAAOE,GAAA,KAAAA,OAAAA,EAAQ,0BAA2B,eAAA,EAE1CG,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAAA,CAAa,CACzB,CAEJ"}
+{"version":3,"file":"PaginationPreviousButton.js","sources":["../../../src/components/pagination/PaginationPreviousButton.tsx"],"sourcesContent":["import { ChevronLeft } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: ['mr-1', 'disabled:opacity-30']\n})\n\nexport const PaginationPreviousButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const { goToPreviousPage, labels, previousAvailablePage } = usePagination()\n\n  const isDisabled = !previousAvailablePage\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToPreviousPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.previousPageButtonLabel || 'Previous page'}\n    >\n      <Icon is={ChevronLeft} />\n    </StyledActionIcon>\n  )\n}\n"],"names":["StyledActionIcon","styled","ActionIcon","PaginationPreviousButton","props","goToPreviousPage","labels","previousAvailablePage","usePagination","React","Icon","ChevronLeft"],"mappings":"wQASA,MAAMA,EAAmBC,EAAOC,EAAY,CAC1C,KAAM,CAAC,OAAQ,qBAAqB,CACtC,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,iBAAAC,EAAkB,OAAAC,EAAQ,sBAAAC,CAAsB,EAAIC,IAI5D,OACEC,EAAA,cAACT,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,QAASK,EACT,SARe,CAACE,EASf,GAAGH,EACJ,OAAOE,GAAA,KAAAA,OAAAA,EAAQ,0BAA2B,eAAA,EAE1CG,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAAA,CAAa,CACzB,CAEJ"}

package/dist/components/pagination/types.d.ts

@@ -1,4 +1,4 @@
-import { TcolorScheme } from '../../experiments/color-scheme';
+import { TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
 import { GO_TO_NEXT_PAGE, GO_TO_PREVIOUS_PAGE, VIEW_ALL_POPOVER } from './pagination.constants';
 export type PaginationItemsToRender = (number | typeof VIEW_ALL_POPOVER | typeof GO_TO_PREVIOUS_PAGE | typeof GO_TO_NEXT_PAGE)[];
 interface Labels {

package/dist/components/password-field/PasswordField.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { FieldElementWrapperProps } from '../../components/field-wrapper';
-import { PasswordInput } from '../../components/password-input';
+import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWrapper';
+import { PasswordInput } from '../../components/password-input/PasswordInput';
 type PasswordFieldProps = React.ComponentProps<typeof PasswordInput> & Omit<FieldElementWrapperProps, 'label'> & {
     label?: string;
 };

package/dist/components/password-field/PasswordField.js

@@ -1,2 +1,2 @@
-import v from"clsx";import*as p from"react";import{useFormContext as w}from"react-hook-form";import{FieldWrapper as b}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as C}from"../form/useFieldError.js";import{useFormCustomContext as P}from"../form/useFormCustomContext.js";import{PasswordInput as x}from"../password-input/PasswordInput.js";const m=({className:s,hideLabel:d,label:l="Password",name:e,prompt:n=void 0,description:c,validation:r,appearance:u,...f})=>{const{register:o}=w(),a=P(),{error:t}=C(e),F=r?o(r):o,i=(a==null?void 0:a.appearance)||u;return p.createElement(b,{description:c,error:t,fieldId:e,hideLabel:d,label:l,prompt:n,required:!!(r!=null&&r.required),appearance:i,className:v(s,"relative")},p.createElement(x,{autoComplete:"current-password",name:e,id:e,ref:F,appearance:i,...t!==void 0&&{state:"error"},...f}))};m.displayName="PasswordField";export{m as PasswordField};
+import v from"clsx";import*as i from"react";import{useFormContext as w}from"react-hook-form";import{FieldWrapper as b}from"../field-wrapper/FieldWrapper.js";import{useFieldError as C}from"../form/useFieldError.js";import{useFormCustomContext as P}from"../form/useFormCustomContext.js";import{PasswordInput as x}from"../password-input/PasswordInput.js";const m=({className:s,hideLabel:d,label:l="Password",name:e,prompt:n=void 0,description:c,validation:r,appearance:u,...f})=>{const{register:o}=w(),a=P(),{error:t}=C(e),F=r?o(r):o,p=(a==null?void 0:a.appearance)||u;return i.createElement(b,{description:c,error:t,fieldId:e,hideLabel:d,label:l,prompt:n,required:!!(r!=null&&r.required),appearance:p,className:v(s,"relative")},i.createElement(x,{autoComplete:"current-password",name:e,id:e,ref:F,appearance:p,...t!==void 0&&{state:"error"},...f}))};m.displayName="PasswordField";export{m as PasswordField};
 //# sourceMappingURL=PasswordField.js.map

package/dist/components/password-field/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","sources":["../../../src/components/password-field/PasswordField.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError, useFormCustomContext } from '~/components/form'\nimport { PasswordInput } from '~/components/password-input'\n\ntype PasswordFieldProps = React.ComponentProps<typeof PasswordInput> &\n  Omit<FieldElementWrapperProps, 'label'> & {\n    label?: string\n  }\n\nexport const PasswordField = ({\n  className,\n  hideLabel,\n  label = 'Password',\n  name,\n  prompt = undefined,\n  description,\n  validation,\n  appearance,\n  ...remainingProps\n}: PasswordFieldProps) => {\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\n  return (\n    <FieldWrapper\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      className={clsx(className, 'relative')}\n    >\n      <PasswordInput\n        autoComplete=\"current-password\"\n        name={name}\n        id={name}\n        ref={ref}\n        appearance={formAppearance}\n        {...(error !== undefined && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nPasswordField.displayName = 'PasswordField'\n"],"names":["PasswordField","className","hideLabel","label","name","prompt","description","validation","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","clsx","PasswordInput"],"mappings":"uaAgBa,MAAAA,EAAgB,CAAC,CAC5B,UAAAC,EACA,UAAAC,EACA,MAAAC,EAAQ,WACR,KAAAC,EACA,OAAAC,EAAS,OACT,YAAAC,EACA,WAAAC,EACA,WAAAC,EACA,GAAGC,CACL,IAA0B,CACxB,KAAM,CAAE,SAAAC,CAAS,EAAIC,IACfC,EAAUC,EACV,EAAA,CAAE,MAAAC,CAAM,EAAIC,EAAcX,CAAI,EAE9BY,EAAMT,EAAaG,EAASH,CAAU,EAAIG,EAC1CO,GAAiBL,GAAA,KAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,YAAab,EACb,MAAOQ,EACP,QAASV,EACT,UAAWF,EACX,MAAOC,EACP,OAAQE,EACR,SAAU,CAAA,EAAQE,GAAA,MAAAA,EAAY,UAC9B,WAAYU,EACZ,UAAWG,EAAKnB,EAAW,UAAU,CAAA,EAErCiB,EAAA,cAACG,EAAA,CACC,aAAa,mBACb,KAAMjB,EACN,GAAIA,EACJ,IAAKY,EACL,WAAYC,EACX,GAAIH,IAAU,QAAa,CAAE,MAAO,OAAQ,EAC5C,GAAGL,CACN,CAAA,CACF,CAEJ,EAEAT,EAAc,YAAc"}
+{"version":3,"file":"PasswordField.js","sources":["../../../src/components/password-field/PasswordField.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * 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 { PasswordInput } from '~/components/password-input/PasswordInput'\n\ntype PasswordFieldProps = React.ComponentProps<typeof PasswordInput> &\n  Omit<FieldElementWrapperProps, 'label'> & {\n    label?: string\n  }\n\nexport const PasswordField = ({\n  className,\n  hideLabel,\n  label = 'Password',\n  name,\n  prompt = undefined,\n  description,\n  validation,\n  appearance,\n  ...remainingProps\n}: PasswordFieldProps) => {\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\n  return (\n    <FieldWrapper\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      className={clsx(className, 'relative')}\n    >\n      <PasswordInput\n        autoComplete=\"current-password\"\n        name={name}\n        id={name}\n        ref={ref}\n        appearance={formAppearance}\n        {...(error !== undefined && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nPasswordField.displayName = 'PasswordField'\n"],"names":["PasswordField","className","hideLabel","label","name","prompt","description","validation","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","clsx","PasswordInput"],"mappings":"gWAiBO,MAAMA,EAAgB,CAAC,CAC5B,UAAAC,EACA,UAAAC,EACA,MAAAC,EAAQ,WACR,KAAAC,EACA,OAAAC,EAAS,OACT,YAAAC,EACA,WAAAC,EACA,WAAAC,EACA,GAAGC,CACL,IAA0B,CACxB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EACfC,EAAAA,EAAUC,EAAqB,EAC/B,CAAE,MAAAC,CAAM,EAAIC,EAAcX,CAAI,EAE9BY,EAAMT,EAAaG,EAASH,CAAU,EAAIG,EAC1CO,GAAiBL,GAAA,KAAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,YAAab,EACb,MAAOQ,EACP,QAASV,EACT,UAAWF,EACX,MAAOC,EACP,OAAQE,EACR,SAAU,CAAQE,EAAAA,GAAA,MAAAA,EAAY,UAC9B,WAAYU,EACZ,UAAWG,EAAKnB,EAAW,UAAU,GAErCiB,EAAA,cAACG,EAAA,CACC,aAAa,mBACb,KAAMjB,EACN,GAAIA,EACJ,IAAKY,EACL,WAAYC,EACX,GAAIH,IAAU,QAAa,CAAE,MAAO,OAAQ,EAC5C,GAAGL,CACN,CAAA,CACF,CAEJ,EAEAT,EAAc,YAAc"}

package/dist/components/password-input/PasswordInput.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { InputProps } from '../../components/input';
+import type { InputProps } from '../../components/input/Input';
 type PasswordInputProps = Omit<InputProps, 'type'> & {
     hidePasswordText?: string;
     showPasswordText?: string;

package/dist/components/password-input/PasswordInput.js

@@ -1,2 +1,2 @@
-import{Eye as u,EyeCrossed as w}from"@atom-learning/icons";import s from"clsx";import*as e from"react";import{useState as E}from"react";import{ActionIcon as I}from"../action-icon/ActionIcon.js";import{Icon as h}from"../icon/Icon.js";import{Input as N}from"../input/Input.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{getFieldIconSize as b}from"../../utilities/style/get-icon-size.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";const m=e.forwardRef(({className:a,hidePasswordText:i="Hide password",showPasswordText:p="Show password",size:o="md",...l},n)=>{const[t,c]=E(!1),d=()=>c(r=>!r),f=e.useMemo(()=>b(o),[o]);return e.createElement("div",{className:s("relative",a)},e.createElement(N,{...l,size:o,type:t?"text":"password",ref:n,className:"pr-6"}),e.createElement(I,{appearance:"simple",theme:"neutral",label:t?i:p,onClick:d,onMouseDown:r=>r.preventDefault(),size:f,className:s(o==="lg"?"bottom-1":"bottom-0","absolute","right-0")},e.createElement(h,{is:t?u:w})))});m.displayName="PasswordInput";export{m as PasswordInput};
+import{Eye as u,EyeCrossed as w}from"@atom-learning/icons";import s from"clsx";import*as e from"react";import{useState as E}from"react";import{ActionIcon as I}from"../action-icon/ActionIcon.js";import{Icon as h}from"../icon/Icon.js";import{Input as N}from"../input/Input.js";import{getFieldIconSize as b}from"../../utilities/style/get-icon-size.js";const a=e.forwardRef(({className:m,hidePasswordText:i="Hide password",showPasswordText:p="Show password",size:o="md",...l},n)=>{const[t,c]=E(!1),d=()=>c(r=>!r),f=e.useMemo(()=>b(o),[o]);return e.createElement("div",{className:s("relative",m)},e.createElement(N,{...l,size:o,type:t?"text":"password",ref:n,className:"pr-6"}),e.createElement(I,{appearance:"simple",theme:"neutral",label:t?i:p,onClick:d,onMouseDown:r=>r.preventDefault(),size:f,className:s(o==="lg"?"bottom-1":"bottom-0","absolute","right-0")},e.createElement(h,{is:t?u:w})))});a.displayName="PasswordInput";export{a as PasswordInput};
 //# sourceMappingURL=PasswordInput.js.map

package/dist/components/password-input/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Icon } from '~/components/icon'\nimport type { InputProps } from '~/components/input'\nimport { Input } from '~/components/input'\nimport { getFieldIconSize } from '~/utilities'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n  hidePasswordText?: string\n  showPasswordText?: string\n}\n\nexport const PasswordInput = React.forwardRef<\n  HTMLInputElement,\n  PasswordInputProps\n>(\n  (\n    {\n      className,\n      hidePasswordText = 'Hide password',\n      showPasswordText = 'Show password',\n      size = 'md',\n      ...restProps\n    },\n    ref\n  ) => {\n    const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n    const togglePasswordVisibility = () =>\n      setIsPasswordVisible((currentState) => !currentState)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    return (\n      <div className={clsx('relative', className)}>\n        <Input\n          {...restProps}\n          size={size}\n          type={isPasswordVisible ? 'text' : 'password'}\n          ref={ref}\n          className=\"pr-6\"\n        />\n        <ActionIcon\n          appearance=\"simple\"\n          theme=\"neutral\"\n          label={isPasswordVisible ? hidePasswordText : showPasswordText}\n          onClick={togglePasswordVisibility}\n          onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n          size={iconSize}\n          className={clsx(\n            size === 'lg' ? 'bottom-1' : 'bottom-0',\n            'absolute',\n            'right-0'\n          )}\n        >\n          <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n        </ActionIcon>\n      </div>\n    )\n  }\n)\n\nPasswordInput.displayName = 'PasswordInput'\n"],"names":["PasswordInput","React","className","hidePasswordText","showPasswordText","size","restProps","ref","isPasswordVisible","setIsPasswordVisible","useState","togglePasswordVisibility","currentState","iconSize","getFieldIconSize","clsx","Input","ActionIcon","e","Icon","Eye","EyeCrossed"],"mappings":"gdAgBa,MAAAA,EAAgBC,EAAM,WAIjC,CACE,CACE,UAAAC,EACA,iBAAAC,EAAmB,gBACnB,iBAAAC,EAAmB,gBACnB,KAAAC,EAAO,KACP,GAAGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAmBC,CAAoB,EAAIC,EAAkB,EAAK,EACnEC,EAA2B,IAC/BF,EAAsBG,GAAiB,CAACA,CAAY,EAEhDC,EAAWZ,EAAM,QAAQ,IAAMa,EAAiBT,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnE,OACEJ,EAAA,cAAC,MAAA,CAAI,UAAWc,EAAK,WAAYb,CAAS,CAAA,EACxCD,EAAA,cAACe,EAAA,CACE,GAAGV,EACJ,KAAMD,EACN,KAAMG,EAAoB,OAAS,WACnC,IAAKD,EACL,UAAU,MAAA,CACZ,EACAN,EAAA,cAACgB,EAAA,CACC,WAAW,SACX,MAAM,UACN,MAAOT,EAAoBL,EAAmBC,EAC9C,QAASO,EACT,YAAcO,GAAMA,EAAE,iBACtB,KAAML,EACN,UAAWE,EACTV,IAAS,KAAO,WAAa,WAC7B,WACA,SACF,CAEAJ,EAAAA,EAAA,cAACkB,EAAA,CAAK,GAAIX,EAAoBY,EAAMC,CAAAA,CAAY,CAClD,CACF,CAEJ,CACF,EAEArB,EAAc,YAAc"}
+{"version":3,"file":"PasswordInput.js","sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport type { InputProps } from '~/components/input/Input'\nimport { Input } from '~/components/input/Input'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n  hidePasswordText?: string\n  showPasswordText?: string\n}\n\nexport const PasswordInput = React.forwardRef<\n  HTMLInputElement,\n  PasswordInputProps\n>(\n  (\n    {\n      className,\n      hidePasswordText = 'Hide password',\n      showPasswordText = 'Show password',\n      size = 'md',\n      ...restProps\n    },\n    ref\n  ) => {\n    const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n    const togglePasswordVisibility = () =>\n      setIsPasswordVisible((currentState) => !currentState)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    return (\n      <div className={clsx('relative', className)}>\n        <Input\n          {...restProps}\n          size={size}\n          type={isPasswordVisible ? 'text' : 'password'}\n          ref={ref}\n          className=\"pr-6\"\n        />\n        <ActionIcon\n          appearance=\"simple\"\n          theme=\"neutral\"\n          label={isPasswordVisible ? hidePasswordText : showPasswordText}\n          onClick={togglePasswordVisibility}\n          onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n          size={iconSize}\n          className={clsx(\n            size === 'lg' ? 'bottom-1' : 'bottom-0',\n            'absolute',\n            'right-0'\n          )}\n        >\n          <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n        </ActionIcon>\n      </div>\n    )\n  }\n)\n\nPasswordInput.displayName = 'PasswordInput'\n"],"names":["PasswordInput","React","className","hidePasswordText","showPasswordText","size","restProps","ref","isPasswordVisible","setIsPasswordVisible","useState","togglePasswordVisibility","currentState","iconSize","getFieldIconSize","clsx","Input","ActionIcon","e","Icon","Eye","EyeCrossed"],"mappings":"6VAgBa,MAAAA,EAAgBC,EAAM,WAIjC,CACE,CACE,UAAAC,EACA,iBAAAC,EAAmB,gBACnB,iBAAAC,EAAmB,gBACnB,KAAAC,EAAO,KACP,GAAGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAmBC,CAAoB,EAAIC,EAAkB,EAAK,EACnEC,EAA2B,IAC/BF,EAAsBG,GAAiB,CAACA,CAAY,EAEhDC,EAAWZ,EAAM,QAAQ,IAAMa,EAAiBT,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnE,OACEJ,EAAA,cAAC,MAAA,CAAI,UAAWc,EAAK,WAAYb,CAAS,CAAA,EACxCD,EAAA,cAACe,EAAA,CACE,GAAGV,EACJ,KAAMD,EACN,KAAMG,EAAoB,OAAS,WACnC,IAAKD,EACL,UAAU,MAAA,CACZ,EACAN,EAAA,cAACgB,EAAA,CACC,WAAW,SACX,MAAM,UACN,MAAOT,EAAoBL,EAAmBC,EAC9C,QAASO,EACT,YAAcO,GAAMA,EAAE,iBACtB,KAAML,EACN,UAAWE,EACTV,IAAS,KAAO,WAAa,WAC7B,WACA,SACF,CAEAJ,EAAAA,EAAA,cAACkB,EAAA,CAAK,GAAIX,EAAoBY,EAAMC,CAAAA,CAAY,CAClD,CACF,CAEJ,CACF,EAEArB,EAAc,YAAc"}

package/dist/components/progress-bar/ProgressBar.d.ts

@@ -1,8 +1,8 @@
 import * as Progress from '@radix-ui/react-progress';
 import * as React from 'react';
-declare const StyledProgressBar: React.ForwardRefExoticComponent<Omit<Progress.ProgressProps & React.RefAttributes<HTMLDivElement>, "theme" | "size"> & {
+declare const StyledProgressBar: React.ForwardRefExoticComponent<Omit<Progress.ProgressProps & React.RefAttributes<HTMLDivElement>, "size" | "theme"> & {
     size?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
-    theme?: ("warning" | "success" | "info" | "neutral" | "primary" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "warning" | "success" | "info" | "neutral" | "primary" | "danger">>) | undefined;
+    theme?: ("primary" | "neutral" | "success" | "warning" | "danger" | "info" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "neutral" | "success" | "warning" | "danger" | "info">>) | undefined;
 } & {
     as?: React.ElementType;
 }>;

package/dist/components/progress-bar/ProgressBar.js

@@ -1,2 +1,2 @@
-import*as t from"@radix-ui/react-progress";import*as a from"react";import{styled as s}from"../../styled.js";const m=s(t.Root,{base:["rounded-full","bg-grey-200","relative","overflow-hidden","w-full"],variants:{size:{sm:["h-1"],md:["h-2"]},theme:{primary:["text-primary-800"],info:["text-info"],success:["text-success"],warning:["text-warning"],danger:["text-danger"],neutral:["bg-grey-400","text-grey-800"]}}},{enabledResponsiveVariants:!0}),d=s(t.Indicator,{base:["bg-current","rounded-full","box-border","h-full","absolute","transition-all","duration-300","ease-out"]}),o=({value:e,max:r=100,size:l="md",theme:n="primary",...i})=>a.createElement(m,{value:e,max:r,theme:n,size:l,...i},a.createElement(d,{className:"w-full translate-x-(--progress)",style:{"--progress":`-${100-(e||0)/r*100}%`}}));o.displayName="ProgressBar";export{o as ProgressBar};
+import*as t from"@radix-ui/react-progress";import*as a from"react";import{styled as s}from"../../styled.js";const m=s(t.Root,{base:["rounded-full","bg-grey-200","relative","overflow-hidden","w-full"],variants:{size:{sm:["h-1"],md:["h-2"]},theme:{primary:["text-primary-800"],info:["text-info"],success:["text-success"],warning:["text-warning"],danger:["text-danger"],neutral:["bg-grey-400","text-grey-800"]}}},{enabledResponsiveVariants:!0}),u=s(t.Indicator,{base:["bg-current","rounded-full","h-full","absolute","transition-all","duration-300","ease-out"]}),l=({value:e,max:r=100,size:o="md",theme:n="primary",...i})=>a.createElement(m,{value:e,max:r,theme:n,size:o,...i},a.createElement(u,{className:"w-full translate-x-(--progress)",style:{"--progress":`-${100-(e||0)/r*100}%`}}));l.displayName="ProgressBar";export{l as ProgressBar};
 //# sourceMappingURL=ProgressBar.js.map

package/dist/components/progress-bar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import * as Progress from '@radix-ui/react-progress'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledProgressBar = styled(\n  Progress.Root,\n  {\n    base: [\n      'rounded-full',\n      'bg-grey-200',\n      'relative',\n      'overflow-hidden',\n      'w-full'\n    ],\n    variants: {\n      size: {\n        sm: ['h-1'],\n        md: ['h-2']\n      },\n      theme: {\n        primary: ['text-primary-800'],\n        info: ['text-info'],\n        success: ['text-success'],\n        warning: ['text-warning'],\n        danger: ['text-danger'],\n        neutral: ['bg-grey-400', 'text-grey-800']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(Progress.Indicator, {\n  base: [\n    'bg-current',\n    'rounded-full',\n    'box-border',\n    'h-full',\n    'absolute',\n    'transition-all',\n    'duration-300',\n    'ease-out'\n  ]\n})\n\ntype ProgressBarProps = React.ComponentPropsWithoutRef<\n  typeof StyledProgressBar\n> &\n  (\n    | { id: string; 'aria-label'?: string }\n    | { 'aria-label': string; id?: string }\n  )\n\nexport const ProgressBar = ({\n  value,\n  max = 100,\n  size = 'md',\n  theme = 'primary',\n  ...remainingProps\n}: ProgressBarProps) => (\n  <StyledProgressBar\n    value={value}\n    max={max}\n    theme={theme}\n    size={size}\n    {...remainingProps}\n  >\n    <StyledIndicator\n      className=\"w-full translate-x-(--progress)\"\n      style={{\n        '--progress': `-${100 - ((value || 0) / max) * 100}%`\n      }}\n    />\n  </StyledProgressBar>\n)\n\nProgressBar.displayName = 'ProgressBar'\n"],"names":["StyledProgressBar","styled","Progress","StyledIndicator","ProgressBar","value","max","size","theme","remainingProps","React"],"mappings":"4GAKA,MAAMA,EAAoBC,EACxBC,EAAS,KACT,CACE,KAAM,CACJ,eACA,cACA,WACA,kBACA,QACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,KAAK,EACV,GAAI,CAAC,KAAK,CACZ,EACA,MAAO,CACL,QAAS,CAAC,kBAAkB,EAC5B,KAAM,CAAC,WAAW,EAClB,QAAS,CAAC,cAAc,EACxB,QAAS,CAAC,cAAc,EACxB,OAAQ,CAAC,aAAa,EACtB,QAAS,CAAC,cAAe,eAAe,CAC1C,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAEMC,EAAkBF,EAAOC,EAAS,UAAW,CACjD,KAAM,CACJ,aACA,eACA,aACA,SACA,WACA,iBACA,eACA,UACF,CACF,CAAC,EAUYE,EAAc,CAAC,CAC1B,MAAAC,EACA,IAAAC,EAAM,IACN,KAAAC,EAAO,KACP,MAAAC,EAAQ,UACR,GAAGC,CACL,IACEC,EAAA,cAACV,EAAA,CACC,MAAOK,EACP,IAAKC,EACL,MAAOE,EACP,KAAMD,EACL,GAAGE,CAAAA,EAEJC,EAAA,cAACP,EAAA,CACC,UAAU,kCACV,MAAO,CACL,aAAc,IAAI,KAAQE,GAAS,GAAKC,EAAO,GAAG,GACpD,CAAA,CACF,CACF,EAGFF,EAAY,YAAc"}
+{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import * as Progress from '@radix-ui/react-progress'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledProgressBar = styled(\n  Progress.Root,\n  {\n    base: [\n      'rounded-full',\n      'bg-grey-200',\n      'relative',\n      'overflow-hidden',\n      'w-full'\n    ],\n    variants: {\n      size: {\n        sm: ['h-1'],\n        md: ['h-2']\n      },\n      theme: {\n        primary: ['text-primary-800'],\n        info: ['text-info'],\n        success: ['text-success'],\n        warning: ['text-warning'],\n        danger: ['text-danger'],\n        neutral: ['bg-grey-400', 'text-grey-800']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(Progress.Indicator, {\n  base: [\n    'bg-current',\n    'rounded-full',\n    'h-full',\n    'absolute',\n    'transition-all',\n    'duration-300',\n    'ease-out'\n  ]\n})\n\ntype ProgressBarProps = React.ComponentPropsWithoutRef<\n  typeof StyledProgressBar\n> &\n  (\n    | { id: string; 'aria-label'?: string }\n    | { 'aria-label': string; id?: string }\n  )\n\nexport const ProgressBar = ({\n  value,\n  max = 100,\n  size = 'md',\n  theme = 'primary',\n  ...remainingProps\n}: ProgressBarProps) => (\n  <StyledProgressBar\n    value={value}\n    max={max}\n    theme={theme}\n    size={size}\n    {...remainingProps}\n  >\n    <StyledIndicator\n      className=\"w-full translate-x-(--progress)\"\n      style={{\n        '--progress': `-${100 - ((value || 0) / max) * 100}%`\n      }}\n    />\n  </StyledProgressBar>\n)\n\nProgressBar.displayName = 'ProgressBar'\n"],"names":["StyledProgressBar","styled","Progress","StyledIndicator","ProgressBar","value","max","size","theme","remainingProps","React"],"mappings":"4GAKA,MAAMA,EAAoBC,EACxBC,EAAS,KACT,CACE,KAAM,CACJ,eACA,cACA,WACA,kBACA,QACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,KAAK,EACV,GAAI,CAAC,KAAK,CACZ,EACA,MAAO,CACL,QAAS,CAAC,kBAAkB,EAC5B,KAAM,CAAC,WAAW,EAClB,QAAS,CAAC,cAAc,EACxB,QAAS,CAAC,cAAc,EACxB,OAAQ,CAAC,aAAa,EACtB,QAAS,CAAC,cAAe,eAAe,CAC1C,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAEMC,EAAkBF,EAAOC,EAAS,UAAW,CACjD,KAAM,CACJ,aACA,eACA,SACA,WACA,iBACA,eACA,UACF,CACF,CAAC,EAUYE,EAAc,CAAC,CAC1B,MAAAC,EACA,IAAAC,EAAM,IACN,KAAAC,EAAO,KACP,MAAAC,EAAQ,UACR,GAAGC,CACL,IACEC,EAAA,cAACV,EAAA,CACC,MAAOK,EACP,IAAKC,EACL,MAAOE,EACP,KAAMD,EACL,GAAGE,CAEJC,EAAAA,EAAA,cAACP,EAAA,CACC,UAAU,kCACV,MAAO,CACL,aAAc,IAAI,KAAQE,GAAS,GAAKC,EAAO,GAAG,GACpD,CAAA,CACF,CACF,EAGFF,EAAY,YAAc"}

package/dist/components/radio-button/RadioButton.js

@@ -1,2 +1,2 @@
-import*as t from"@radix-ui/react-radio-group";import*as a from"react";import{styled as r}from"../../styled.js";const o=r(t.Item,{base:["items-center","appearance-none","bg-transparent","border","border-grey-800","rounded-full","text-white","cursor-pointer","flex","justify-center","p-0","size-4","transition-all","duration-50","ease-out","focus:outline-2","focus:outline-offset-1","focus:outline-primary-800","focus:outline-solid","data-[state=checked]:bg-primary-800","data-[state=checked]:border-primary-800","disabled:bg-grey-200","disabled:border-grey-800","disabled:cursor-not-allowed","disabled:text-grey-800","disabled:data-[state=checked]:bg-grey-800","disabled:data-[state=checked]:border-grey-800"],variants:{size:{md:["size-4"],lg:["-mt-1","size-6"]}}},{enabledResponsiveVariants:!0}),d=r(t.Indicator,{base:["size-1.5","rounded-full","bg-current","absolute"],variants:{size:{md:["size-1.5"],lg:["size-3"]}}},{enabledResponsiveVariants:!0}),s=({size:e,...i})=>a.createElement(o,{...i,size:e},a.createElement(d,{size:e}));s.displayName="RadioButton";export{s as RadioButton};
+import*as t from"@radix-ui/react-radio-group";import*as a from"react";import{styled as r}from"../../styled.js";const o=r(t.Item,{base:["items-center","appearance-none","border","border-grey-800","rounded-full","text-white","cursor-pointer","flex","justify-center","size-4","transition-all","duration-50","ease-out","focus:outline-2","focus:outline-offset-1","focus:outline-primary-800","focus:outline-solid","data-[state=checked]:bg-primary-800","data-[state=checked]:border-primary-800","disabled:bg-grey-200","disabled:border-grey-800","disabled:cursor-not-allowed","disabled:text-grey-800","disabled:data-[state=checked]:bg-grey-800","disabled:data-[state=checked]:border-grey-800"],variants:{size:{md:["size-4"],lg:["-mt-1","size-6"]}}},{enabledResponsiveVariants:!0}),d=r(t.Indicator,{base:["size-1.5","rounded-full","bg-current","absolute"],variants:{size:{md:["size-1.5"],lg:["size-3"]}}},{enabledResponsiveVariants:!0}),s=({size:e,...i})=>a.createElement(o,{...i,size:e},a.createElement(d,{size:e}));s.displayName="RadioButton";export{s as RadioButton};
 //# sourceMappingURL=RadioButton.js.map

package/dist/components/radio-button/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledRadioButton = styled(\n  RadioGroup.Item,\n  {\n    base: [\n      'items-center',\n      'appearance-none',\n      'bg-transparent',\n      'border',\n      'border-grey-800',\n      'rounded-full',\n      'text-white',\n      'cursor-pointer',\n      'flex',\n      'justify-center',\n      'p-0',\n      'size-4',\n      'transition-all',\n      'duration-50',\n      'ease-out',\n      'focus:outline-2',\n      'focus:outline-offset-1',\n      'focus:outline-primary-800',\n      'focus:outline-solid',\n      'data-[state=checked]:bg-primary-800',\n      'data-[state=checked]:border-primary-800',\n      'disabled:bg-grey-200',\n      'disabled:border-grey-800',\n      'disabled:cursor-not-allowed',\n      'disabled:text-grey-800',\n      'disabled:data-[state=checked]:bg-grey-800',\n      'disabled:data-[state=checked]:border-grey-800'\n    ],\n    variants: {\n      size: {\n        md: ['size-4'],\n        lg: ['-mt-1', 'size-6']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(\n  RadioGroup.Indicator,\n  {\n    base: ['size-1.5', 'rounded-full', 'bg-current', 'absolute'],\n    variants: {\n      size: {\n        md: ['size-1.5'],\n        lg: ['size-3']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype RadioButtonProps = Override<\n  React.ComponentProps<typeof StyledRadioButton>,\n  {\n    as?: never\n  } & {\n    'aria-label'?: string\n  }\n>\n\nexport const RadioButton = ({ size, ...props }: RadioButtonProps) => {\n  return (\n    <StyledRadioButton {...props} size={size}>\n      <StyledIndicator size={size} />\n    </StyledRadioButton>\n  )\n}\n\nRadioButton.displayName = 'RadioButton'\n"],"names":["StyledRadioButton","styled","RadioGroup","StyledIndicator","RadioButton","size","props","React"],"mappings":"+GAMA,MAAMA,EAAoBC,EACxBC,EAAW,KACX,CACE,KAAM,CACJ,eACA,kBACA,iBACA,SACA,kBACA,eACA,aACA,iBACA,OACA,iBACA,MACA,SACA,iBACA,cACA,WACA,kBACA,yBACA,4BACA,sBACA,sCACA,0CACA,uBACA,2BACA,8BACA,yBACA,4CACA,+CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,QAAS,QAAQ,CACxB,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAEMC,EAAkBF,EACtBC,EAAW,UACX,CACE,KAAM,CAAC,WAAY,eAAgB,aAAc,UAAU,EAC3D,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,UAAU,EACf,GAAI,CAAC,QAAQ,CACf,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAWaE,EAAc,CAAC,CAAE,KAAAC,EAAM,GAAGC,CAAM,IAEzCC,EAAA,cAACP,EAAA,CAAmB,GAAGM,EAAO,KAAMD,CAClCE,EAAAA,EAAA,cAACJ,EAAA,CAAgB,KAAME,CAAM,CAAA,CAC/B,EAIJD,EAAY,YAAc"}
+{"version":3,"file":"RadioButton.js","sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledRadioButton = styled(\n  RadioGroup.Item,\n  {\n    base: [\n      'items-center',\n      'appearance-none',\n      'border',\n      'border-grey-800',\n      'rounded-full',\n      'text-white',\n      'cursor-pointer',\n      'flex',\n      'justify-center',\n      'size-4',\n      'transition-all',\n      'duration-50',\n      'ease-out',\n      'focus:outline-2',\n      'focus:outline-offset-1',\n      'focus:outline-primary-800',\n      'focus:outline-solid',\n      'data-[state=checked]:bg-primary-800',\n      'data-[state=checked]:border-primary-800',\n      'disabled:bg-grey-200',\n      'disabled:border-grey-800',\n      'disabled:cursor-not-allowed',\n      'disabled:text-grey-800',\n      'disabled:data-[state=checked]:bg-grey-800',\n      'disabled:data-[state=checked]:border-grey-800'\n    ],\n    variants: {\n      size: {\n        md: ['size-4'],\n        lg: ['-mt-1', 'size-6']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(\n  RadioGroup.Indicator,\n  {\n    base: ['size-1.5', 'rounded-full', 'bg-current', 'absolute'],\n    variants: {\n      size: {\n        md: ['size-1.5'],\n        lg: ['size-3']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype RadioButtonProps = Override<\n  React.ComponentProps<typeof StyledRadioButton>,\n  {\n    as?: never\n  } & {\n    'aria-label'?: string\n  }\n>\n\nexport const RadioButton = ({ size, ...props }: RadioButtonProps) => {\n  return (\n    <StyledRadioButton {...props} size={size}>\n      <StyledIndicator size={size} />\n    </StyledRadioButton>\n  )\n}\n\nRadioButton.displayName = 'RadioButton'\n"],"names":["StyledRadioButton","styled","RadioGroup","StyledIndicator","RadioButton","size","props","React"],"mappings":"+GAMA,MAAMA,EAAoBC,EACxBC,EAAW,KACX,CACE,KAAM,CACJ,eACA,kBACA,SACA,kBACA,eACA,aACA,iBACA,OACA,iBACA,SACA,iBACA,cACA,WACA,kBACA,yBACA,4BACA,sBACA,sCACA,0CACA,uBACA,2BACA,8BACA,yBACA,4CACA,+CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,QAAS,QAAQ,CACxB,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAEMC,EAAkBF,EACtBC,EAAW,UACX,CACE,KAAM,CAAC,WAAY,eAAgB,aAAc,UAAU,EAC3D,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,UAAU,EACf,GAAI,CAAC,QAAQ,CACf,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAWaE,EAAc,CAAC,CAAE,KAAAC,EAAM,GAAGC,CAAM,IAEzCC,EAAA,cAACP,EAAA,CAAmB,GAAGM,EAAO,KAAMD,CAClCE,EAAAA,EAAA,cAACJ,EAAA,CAAgB,KAAME,CAAM,CAAA,CAC/B,EAIJD,EAAY,YAAc"}

package/dist/components/radio-button-field/RadioButtonField.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { FieldElementWrapperProps } from '../../components/field-wrapper';
-import { RadioButtonGroup } from '../../components/radio-button';
+import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWrapper';
+import { RadioButtonGroup } from '../../components/radio-button/RadioButtonGroup';
 type RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> & FieldElementWrapperProps;
 export declare const RadioButtonField: {
     ({ children, className, direction, defaultValue, value, description, label, name, validation, onValueChange, ...remainingProps }: RadioButtonFieldProps): React.JSX.Element;
@@ -12,7 +12,7 @@ export declare const RadioButtonField: {
             defaultChecked?: boolean;
             error?: string;
             label: string;
-            validation?: import("../../components/form").ValidationOptions;
+            validation?: import("..").ValidationOptions;
         } & Omit<Omit<import("@radix-ui/react-radio-group").RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "size"> & {
             size?: ("md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "md" | "lg">>) | undefined;
         } & {

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

@@ -1,2 +1,2 @@
-import*as e from"react";import{useFormContext as C,useController as F}from"react-hook-form";import{Description as V}from"../field-wrapper/FieldDescription.js";import"../form/Form.js";import{useFieldError as h}from"../form/useFieldError.js";import"../form/useFormCustomContext.js";import{InlineMessage as v}from"../inline-message/InlineMessage.js";import{Label as B}from"../label/Label.js";import"../radio-button/RadioButton.js";import{RadioButtonGroup as R}from"../radio-button/RadioButtonGroup.js";import{styled as x}from"../../styled.js";import{RadioField as y}from"./RadioField.js";const q=x("fieldset",{base:["border-0","p-0","m-0","min-w-0"]}),u=({children:c,className:d,direction:p="column",defaultValue:t,value:r,description:a,label:f,name:l,validation:o,onValueChange:m,...b})=>{const{control:E}=C(),{field:{ref:N,onChange:n,value:g,name:j}}=F({name:l,control:E,rules:o,defaultValue:t}),{error:i}=h(l);return e.useEffect(()=>{typeof r<"u"&&n(r)},[r]),e.createElement(q,{className:d},e.createElement(B,{as:"legend",required:!!(o!=null&&o.required),className:"mb-3 p-0"},f),a&&e.createElement(V,{className:"mb-3"},a),e.createElement(R,{ref:N,direction:p,defaultValue:t,onValueChange:s=>{n(s),m==null||m(s)},value:g,...b},c),i&&e.createElement(v,{className:"mt-2"},i))},I=Object.assign(u,{Item:y});u.displayName="RadioButtonField";export{I as RadioButtonField};
+import*as e from"react";import{useFormContext as C,useController as F}from"react-hook-form";import{Description as V}from"../field-wrapper/FieldDescription.js";import{useFieldError as h}from"../form/useFieldError.js";import{InlineMessage as v}from"../inline-message/InlineMessage.js";import{Label as B}from"../label/Label.js";import{RadioButtonGroup as R}from"../radio-button/RadioButtonGroup.js";import{styled as x}from"../../styled.js";import{RadioField as y}from"./RadioField.js";const q=x("fieldset",{base:["min-w-0"]}),u=({children:c,className:d,direction:f="column",defaultValue:r,value:t,description:a,label:p,name:l,validation:o,onValueChange:n,...b})=>{const{control:E}=C(),{field:{ref:N,onChange:m,value:g,name:j}}=F({name:l,control:E,rules:o,defaultValue:r}),{error:i}=h(l);return e.useEffect(()=>{typeof t<"u"&&m(t)},[t]),e.createElement(q,{className:d},e.createElement(B,{as:"legend",required:!!(o!=null&&o.required),className:"mb-3 p-0"},p),a&&e.createElement(V,{className:"mb-3"},a),e.createElement(R,{ref:N,direction:f,defaultValue:r,onValueChange:s=>{m(s),n==null||n(s)},value:g,...b},c),i&&e.createElement(v,{className:"mt-2"},i))},I=Object.assign(u,{Item:y});u.displayName="RadioButtonField";export{I as RadioButtonField};
 //# sourceMappingURL=RadioButtonField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonField.js","sources":["../../../src/components/radio-button-field/RadioButtonField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldElementWrapperProps } from '~/components/field-wrapper'\nimport { Description as FieldDescription } from '~/components/field-wrapper/FieldDescription'\nimport { useFieldError } from '~/components/form'\nimport { InlineMessage } from '~/components/inline-message'\nimport { Label } from '~/components/label'\nimport { RadioButtonGroup } from '~/components/radio-button'\nimport { styled } from '~/styled'\n\nimport { RadioField } from './RadioField'\n\nconst Fieldset = styled('fieldset', {\n  base: ['border-0', 'p-0', 'm-0', 'min-w-0']\n})\n\ntype RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> &\n  FieldElementWrapperProps\n\nconst RadioButtonFieldComponent = ({\n  children,\n  className,\n  direction = 'column',\n  defaultValue,\n  value,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  ...remainingProps\n}: RadioButtonFieldProps) => {\n  const { control } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (typeof value !== 'undefined') onChange(value)\n  }, [value])\n\n  return (\n    <Fieldset className={className}>\n      <Label\n        as=\"legend\"\n        required={Boolean(validation?.required)}\n        className=\"mb-3 p-0\"\n      >\n        {label}\n      </Label>\n      {description && (\n        <FieldDescription className=\"mb-3\">{description}</FieldDescription>\n      )}\n\n      <RadioButtonGroup\n        ref={ref}\n        direction={direction}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        {...remainingProps}\n      >\n        {children}\n      </RadioButtonGroup>\n\n      {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    </Fieldset>\n  )\n}\n\nexport const RadioButtonField = Object.assign(RadioButtonFieldComponent, {\n  Item: RadioField\n})\n\nRadioButtonFieldComponent.displayName = 'RadioButtonField'\n"],"names":["Fieldset","styled","RadioButtonFieldComponent","children","className","direction","defaultValue","value","description","label","name","validation","onValueChange","remainingProps","control","useFormContext","ref","onChange","innerValue","innerName","useController","error","useFieldError","React","Label","FieldDescription","RadioButtonGroup","newValue","InlineMessage","RadioButtonField","RadioField"],"mappings":"ykBAaA,MAAMA,EAAWC,EAAO,WAAY,CAClC,KAAM,CAAC,WAAY,MAAO,MAAO,SAAS,CAC5C,CAAC,EAKKC,EAA4B,CAAC,CACjC,SAAAC,EACA,UAAAC,EACA,UAAAC,EAAY,SACZ,aAAAC,EACA,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IAA6B,CAC3B,KAAM,CAAE,QAAAC,CAAQ,EAAIC,EAAe,EAC7B,CACJ,MAAO,CAAE,IAAAC,EAAK,SAAAC,EAAU,MAAOC,EAAY,KAAMC,CAAU,CAC7D,EAAIC,EAAc,CAChB,KAAAV,EACA,QAAAI,EACA,MAAOH,EACP,aAAAL,CACF,CAAC,EACK,CAAE,MAAAe,CAAM,EAAIC,EAAcZ,CAAI,EAEpC,OAAAa,EAAM,UAAU,IAAM,CAEhB,OAAOhB,EAAU,KAAaU,EAASV,CAAK,CAClD,EAAG,CAACA,CAAK,CAAC,EAGRgB,EAAA,cAACvB,EAAA,CAAS,UAAWI,CAAAA,EACnBmB,EAAA,cAACC,EAAA,CACC,GAAG,SACH,SAAU,GAAQb,GAAA,MAAAA,EAAY,UAC9B,UAAU,UAAA,EAETF,CACH,EACCD,GACCe,EAAA,cAACE,EAAA,CAAiB,UAAU,MAAQjB,EAAAA,CAAY,EAGlDe,EAAA,cAACG,EAAA,CACC,IAAKV,EACL,UAAWX,EACX,aAAcC,EACd,cAAgBqB,GAAa,CAC3BV,EAASU,CAAQ,EACjBf,GAAA,MAAAA,EAAgBe,CAClB,CAAA,EACA,MAAOT,EACN,GAAGL,CAEHV,EAAAA,CACH,EAECkB,GAASE,EAAA,cAACK,EAAA,CAAc,UAAU,MAAQP,EAAAA,CAAM,CACnD,CAEJ,EAEaQ,EAAmB,OAAO,OAAO3B,EAA2B,CACvE,KAAM4B,CACR,CAAC,EAED5B,EAA0B,YAAc"}
+{"version":3,"file":"RadioButtonField.js","sources":["../../../src/components/radio-button-field/RadioButtonField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { Description as FieldDescription } from '~/components/field-wrapper/FieldDescription'\nimport { FieldElementWrapperProps } from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { RadioButtonGroup } from '~/components/radio-button/RadioButtonGroup'\nimport { styled } from '~/styled'\n\nimport { RadioField } from './RadioField'\n\nconst Fieldset = styled('fieldset', {\n  base: ['min-w-0']\n})\n\ntype RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> &\n  FieldElementWrapperProps\n\nconst RadioButtonFieldComponent = ({\n  children,\n  className,\n  direction = 'column',\n  defaultValue,\n  value,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  ...remainingProps\n}: RadioButtonFieldProps) => {\n  const { control } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (typeof value !== 'undefined') onChange(value)\n  }, [value])\n\n  return (\n    <Fieldset className={className}>\n      <Label\n        as=\"legend\"\n        required={Boolean(validation?.required)}\n        className=\"mb-3 p-0\"\n      >\n        {label}\n      </Label>\n      {description && (\n        <FieldDescription className=\"mb-3\">{description}</FieldDescription>\n      )}\n\n      <RadioButtonGroup\n        ref={ref}\n        direction={direction}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        {...remainingProps}\n      >\n        {children}\n      </RadioButtonGroup>\n\n      {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    </Fieldset>\n  )\n}\n\nexport const RadioButtonField = Object.assign(RadioButtonFieldComponent, {\n  Item: RadioField\n})\n\nRadioButtonFieldComponent.displayName = 'RadioButtonField'\n"],"names":["Fieldset","styled","RadioButtonFieldComponent","children","className","direction","defaultValue","value","description","label","name","validation","onValueChange","remainingProps","control","useFormContext","ref","onChange","innerValue","innerName","useController","error","useFieldError","React","Label","FieldDescription","RadioButtonGroup","newValue","InlineMessage","RadioButtonField","RadioField"],"mappings":"keAaA,MAAMA,EAAWC,EAAO,WAAY,CAClC,KAAM,CAAC,SAAS,CAClB,CAAC,EAKKC,EAA4B,CAAC,CACjC,SAAAC,EACA,UAAAC,EACA,UAAAC,EAAY,SACZ,aAAAC,EACA,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IAA6B,CAC3B,KAAM,CAAE,QAAAC,CAAQ,EAAIC,IACd,CACJ,MAAO,CAAE,IAAAC,EAAK,SAAAC,EAAU,MAAOC,EAAY,KAAMC,CAAU,CAC7D,EAAIC,EAAc,CAChB,KAAAV,EACA,QAAAI,EACA,MAAOH,EACP,aAAAL,CACF,CAAC,EACK,CAAE,MAAAe,CAAM,EAAIC,EAAcZ,CAAI,EAEpC,OAAAa,EAAM,UAAU,IAAM,CAEhB,OAAOhB,EAAU,KAAaU,EAASV,CAAK,CAClD,EAAG,CAACA,CAAK,CAAC,EAGRgB,EAAA,cAACvB,EAAA,CAAS,UAAWI,CACnBmB,EAAAA,EAAA,cAACC,EAAA,CACC,GAAG,SACH,SAAU,CAAA,EAAQb,GAAA,MAAAA,EAAY,UAC9B,UAAU,UAETF,EAAAA,CACH,EACCD,GACCe,EAAA,cAACE,EAAA,CAAiB,UAAU,QAAQjB,CAAY,EAGlDe,EAAA,cAACG,EAAA,CACC,IAAKV,EACL,UAAWX,EACX,aAAcC,EACd,cAAgBqB,GAAa,CAC3BV,EAASU,CAAQ,EACjBf,GAAA,MAAAA,EAAgBe,CAAAA,CAClB,EACA,MAAOT,EACN,GAAGL,GAEHV,CACH,EAECkB,GAASE,EAAA,cAACK,EAAA,CAAc,UAAU,MAAQP,EAAAA,CAAM,CACnD,CAEJ,EAEaQ,EAAmB,OAAO,OAAO3B,EAA2B,CACvE,KAAM4B,CACR,CAAC,EAED5B,EAA0B,YAAc"}

package/dist/components/radio-button-field/RadioField.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ValidationOptions } from '../../components/form';
-import { RadioButton } from '../../components/radio-button';
+import { ValidationOptions } from '../../components/form/validation';
+import { RadioButton } from '../../components/radio-button/RadioButton';
 type RadioFieldProps = {
     className?: string;
     defaultChecked?: boolean;

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

@@ -1,2 +1,2 @@
-import*as e from"react";import"../field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as r}from"../field-wrapper/InlineFieldWrapper.js";import{RadioButton as t}from"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";const a=({className:l,label:o,value:i,...m})=>e.createElement(r,{className:l,label:o},e.createElement(t,{value:i,...m}));a.displayName="RadioField";export{a as RadioField};
+import*as e from"react";import{InlineFieldWrapper as r}from"../field-wrapper/InlineFieldWrapper.js";import{RadioButton as t}from"../radio-button/RadioButton.js";const a=({className:l,label:o,value:i,...m})=>e.createElement(r,{className:l,label:o},e.createElement(t,{value:i,...m}));a.displayName="RadioField";export{a as RadioField};
 //# sourceMappingURL=RadioField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioField.js","sources":["../../../src/components/radio-button-field/RadioField.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { InlineFieldWrapper } from '~/components/field-wrapper'\nimport { ValidationOptions } from '~/components/form'\nimport { RadioButton } from '~/components/radio-button'\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"],"names":["RadioField","className","label","value","remainingProps","React","InlineFieldWrapper","RadioButton"],"mappings":"sPAca,MAAAA,EAAa,CAAC,CACzB,UAAAC,EACA,MAAAC,EACA,MAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAmB,UAAWL,EAAW,MAAOC,CAC/CG,EAAAA,EAAA,cAACE,EAAA,CAAY,MAAOJ,EAAQ,GAAGC,EAAgB,CACjD,EAGFJ,EAAW,YAAc"}
+{"version":3,"file":"RadioField.js","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"],"names":["RadioField","className","label","value","remainingProps","React","InlineFieldWrapper","RadioButton"],"mappings":"iKAca,MAAAA,EAAa,CAAC,CACzB,UAAAC,EACA,MAAAC,EACA,MAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAmB,UAAWL,EAAW,MAAOC,CAC/CG,EAAAA,EAAA,cAACE,EAAA,CAAY,MAAOJ,EAAQ,GAAGC,EAAgB,CACjD,EAGFJ,EAAW,YAAc"}

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

@@ -1,2 +1,2 @@
-import*as i from"@radix-ui/react-radio-group";import*as e from"react";import{styled as t}from"../../styled.js";const d=t(i.Item,{base:["items-center","bg-white","border","border-grey-600","rounded-sm","cursor-pointer","flex","text-left","data-[state=checked]:-outline-offset-2","data-[state=checked]:outline-2","data-[state=checked]:outline-primary-800","data-[state=checked]:outline-solid"],variants:{align:{left:["flex-row"],right:["flex-row-reverse"]},size:{md:["px-4","py-3"],lg:["px-8","py-4"]},isFullWidth:{true:["w-full"],false:["w-max"]}}}),o=t("div",{base:["items-center","appearance-none","bg-transparent","border","border-grey-900","rounded-full","flex","shrink-0","justify-center","p-0","size-4","transition-all","duration-50","ease-out","in-data-[state=checked]:bg-primary-800","in-data-[state=checked]:border-primary-800"],variants:{containerIsFullWidth:{true:[],false:[]},align:{left:["mr-4"],right:[]}},compoundVariants:[{containerIsFullWidth:!0,align:"right",class:["ml-auto"]},{containerIsFullWidth:!1,align:"right",class:["ml-4"]}]}),c=t(i.Indicator,{base:["bg-white","rounded-full","absolute","size-1.5"]}),u=({children:l,isFullWidth:a=!1,size:n="md",align:r="left",...s})=>e.createElement(d,{...s,align:r,isFullWidth:a,size:n},e.createElement(o,{align:r,containerIsFullWidth:a},e.createElement(c,null)),e.createElement("div",null,l));export{u as RadioCard};
+import*as i from"@radix-ui/react-radio-group";import*as e from"react";import{styled as t}from"../../styled.js";const d=t(i.Item,{base:["items-center","bg-white","border","border-grey-600","rounded-sm","cursor-pointer","flex","text-left","data-[state=checked]:-outline-offset-2","data-[state=checked]:outline-2","data-[state=checked]:outline-primary-800","data-[state=checked]:outline-solid"],variants:{align:{left:["flex-row"],right:["flex-row-reverse"]},size:{md:["px-4","py-3"],lg:["px-8","py-4"]},isFullWidth:{true:["w-full"],false:["w-max"]}}}),o=t("div",{base:["items-center","appearance-none","border","border-grey-900","rounded-full","flex","shrink-0","justify-center","size-4","transition-all","duration-50","ease-out","in-data-[state=checked]:bg-primary-800","in-data-[state=checked]:border-primary-800"],variants:{containerIsFullWidth:{true:[],false:[]},align:{left:["mr-4"],right:[]}},compoundVariants:[{containerIsFullWidth:!0,align:"right",class:["ml-auto"]},{containerIsFullWidth:!1,align:"right",class:["ml-4"]}]}),c=t(i.Indicator,{base:["bg-white","rounded-full","absolute","size-1.5"]}),u=({children:l,isFullWidth:a=!1,size:n="md",align:r="left",...s})=>e.createElement(d,{...s,align:r,isFullWidth:a,size:n},e.createElement(o,{align:r,containerIsFullWidth:a},e.createElement(c,null)),e.createElement("div",null,l));export{u as RadioCard};
 //# sourceMappingURL=RadioCard.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioCard.js","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"],"names":["StyledRadioCard","styled","RadioGroup","RadioButton","Indicator","RadioCard","children","isFullWidth","size","align","rest","React"],"mappings":"+GAKA,MAAMA,EAAkBC,EAAOC,EAAW,KAAM,CAC9C,KAAM,CACJ,eACA,WACA,SACA,kBACA,aACA,iBACA,OACA,YACA,yCACA,iCACA,2CACA,oCACF,EACA,SAAU,CACR,MAAO,CACL,KAAM,CAAC,UAAU,EACjB,MAAO,CAAC,kBAAkB,CAC5B,EACA,KAAM,CACJ,GAAI,CAAC,OAAQ,MAAM,EACnB,GAAI,CAAC,OAAQ,MAAM,CACrB,EACA,YAAa,CACX,KAAM,CAAC,QAAQ,EACf,MAAO,CAAC,OAAO,CACjB,CACF,CACF,CAAC,EAEKC,EAAcF,EAAO,MAAO,CAChC,KAAM,CACJ,eACA,kBACA,iBACA,SACA,kBACA,eACA,OACA,WACA,iBACA,MACA,SACA,iBACA,cACA,WACA,yCACA,4CACF,EACA,SAAU,CACR,qBAAsB,CACpB,KAAM,GACN,MAAO,CAAA,CACT,EACA,MAAO,CACL,KAAM,CAAC,MAAM,EACb,MAAO,CAAA,CACT,CACF,EACA,iBAAkB,CAChB,CACE,qBAAsB,GACtB,MAAO,QACP,MAAO,CAAC,SAAS,CACnB,EACA,CACE,qBAAsB,GACtB,MAAO,QACP,MAAO,CAAC,MAAM,CAChB,CACF,CACF,CAAC,EAEKG,EAAYH,EAAOC,EAAW,UAAW,CAC7C,KAAM,CAAC,WAAY,eAAgB,WAAY,UAAU,CAC3D,CAAC,EAIYG,EAAY,CAAC,CACxB,SAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EAAO,KACP,MAAAC,EAAQ,OACR,GAAGC,CACL,IACEC,EAAA,cAACX,EAAA,CACE,GAAGU,EACJ,MAAOD,EACP,YAAaF,EACb,KAAMC,CAAAA,EAENG,EAAA,cAACR,EAAA,CAAY,MAAOM,EAAO,qBAAsBF,GAC/CI,EAAA,cAACP,EAAA,IAAU,CACb,EACAO,EAAA,cAAC,MAAKL,KAAAA,CAAS,CACjB"}
+{"version":3,"file":"RadioCard.js","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    'border',\n    'border-grey-900',\n    'rounded-full',\n    'flex',\n    'shrink-0',\n    'justify-center',\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"],"names":["StyledRadioCard","styled","RadioGroup","RadioButton","Indicator","RadioCard","children","isFullWidth","size","align","rest","React"],"mappings":"+GAKA,MAAMA,EAAkBC,EAAOC,EAAW,KAAM,CAC9C,KAAM,CACJ,eACA,WACA,SACA,kBACA,aACA,iBACA,OACA,YACA,yCACA,iCACA,2CACA,oCACF,EACA,SAAU,CACR,MAAO,CACL,KAAM,CAAC,UAAU,EACjB,MAAO,CAAC,kBAAkB,CAC5B,EACA,KAAM,CACJ,GAAI,CAAC,OAAQ,MAAM,EACnB,GAAI,CAAC,OAAQ,MAAM,CACrB,EACA,YAAa,CACX,KAAM,CAAC,QAAQ,EACf,MAAO,CAAC,OAAO,CACjB,CACF,CACF,CAAC,EAEKC,EAAcF,EAAO,MAAO,CAChC,KAAM,CACJ,eACA,kBACA,SACA,kBACA,eACA,OACA,WACA,iBACA,SACA,iBACA,cACA,WACA,yCACA,4CACF,EACA,SAAU,CACR,qBAAsB,CACpB,KAAM,CAAA,EACN,MAAO,CACT,CAAA,EACA,MAAO,CACL,KAAM,CAAC,MAAM,EACb,MAAO,EACT,CACF,EACA,iBAAkB,CAChB,CACE,qBAAsB,GACtB,MAAO,QACP,MAAO,CAAC,SAAS,CACnB,EACA,CACE,qBAAsB,GACtB,MAAO,QACP,MAAO,CAAC,MAAM,CAChB,CACF,CACF,CAAC,EAEKG,EAAYH,EAAOC,EAAW,UAAW,CAC7C,KAAM,CAAC,WAAY,eAAgB,WAAY,UAAU,CAC3D,CAAC,EAIYG,EAAY,CAAC,CACxB,SAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EAAO,KACP,MAAAC,EAAQ,OACR,GAAGC,CACL,IACEC,EAAA,cAACX,EAAA,CACE,GAAGU,EACJ,MAAOD,EACP,YAAaF,EACb,KAAMC,CAAAA,EAENG,EAAA,cAACR,EAAA,CAAY,MAAOM,EAAO,qBAAsBF,GAC/CI,EAAA,cAACP,EAAA,IAAU,CACb,EACAO,EAAA,cAAC,MAAKL,KAAAA,CAAS,CACjB"}

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

@@ -1,8 +1,7 @@
 import * as RadioGroup from '@radix-ui/react-radio-group';
 import * as React from 'react';
-import type { Override } from '../../utilities';
-import { Flex } from '../flex';
+import type { Override } from '../../utilities/types';
 import { RadioCard } from './RadioCard';
-type RadioCardGroupProps = Override<Pick<React.ComponentProps<typeof Flex>, 'justify' | 'gap'> & React.ComponentProps<typeof RadioCard>, React.ComponentProps<typeof RadioGroup.Root>>;
-export declare const RadioCardGroup: ({ className, children, size, isFullWidth, align, gap, justify, ...rest }: RadioCardGroupProps) => React.JSX.Element;
+type RadioCardGroupProps = Override<React.ComponentProps<typeof RadioCard>, React.ComponentProps<typeof RadioGroup.Root>>;
+export declare const RadioCardGroup: ({ className, children, size, isFullWidth, align, ...rest }: RadioCardGroupProps) => React.JSX.Element;
 export {};

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

@@ -1,2 +1,2 @@
-import*as p from"@radix-ui/react-radio-group";import*as i from"react";import{Flex as d}from"../flex/Flex.js";import{RadioCard as c}from"./RadioCard.js";const f=({className:a,children:r,size:t,isFullWidth:l,align:m,gap:o="3",justify:s,...n})=>i.createElement(p.Root,{...n},i.createElement(d,{direction:"row",justify:s,gap:o,wrap:"wrap",className:a},i.Children.map(r,e=>i.isValidElement(e)&&(e==null?void 0:e.type)===c?i.cloneElement(e,{size:t,isFullWidth:l,align:m}):e)));export{f as RadioCardGroup};
+import*as s from"@radix-ui/react-radio-group";import d from"clsx";import*as l from"react";import{RadioCard as n}from"./RadioCard.js";const p=({className:i,children:a,size:r,isFullWidth:t,align:m,...o})=>l.createElement(s.Root,{...o},l.createElement("div",{className:d("flex","flex-row","flex-wrap","gap-3",i)},l.Children.map(a,e=>l.isValidElement(e)&&(e==null?void 0:e.type)===n?l.cloneElement(e,{size:r,isFullWidth:t,align:m}):e)));export{p as RadioCardGroup};
 //# sourceMappingURL=RadioCardGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioCardGroup.js","sources":["../../../src/components/radio-card/RadioCardGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport type { Override } from '~/utilities'\n\nimport { Flex } from '../flex'\nimport { RadioCard } from './RadioCard'\n\ntype RadioCardGroupProps = Override<\n  Pick<React.ComponentProps<typeof Flex>, 'justify' | 'gap'> &\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  gap = '3',\n  justify,\n  ...rest\n}: RadioCardGroupProps) => (\n  <RadioGroup.Root {...rest}>\n    <Flex\n      direction=\"row\"\n      justify={justify}\n      gap={gap}\n      wrap=\"wrap\"\n      className={className}\n    >\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    </Flex>\n  </RadioGroup.Root>\n)\n"],"names":["RadioCardGroup","className","children","size","isFullWidth","align","gap","justify","rest","React","RadioGroup","Flex","child","RadioCard"],"mappings":"wJAcO,MAAMA,EAAiB,CAAC,CAC7B,UAAAC,EACA,SAAAC,EACA,KAAAC,EACA,YAAAC,EACA,MAAAC,EACA,IAAAC,EAAM,IACN,QAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACC,EAAW,KAAX,CAAiB,GAAGF,CAAAA,EACnBC,EAAA,cAACE,EAAA,CACC,UAAU,MACV,QAASJ,EACT,IAAKD,EACL,KAAK,OACL,UAAWL,GAEVQ,EAAM,SAAS,IAAIP,EAAWU,GACzBH,EAAM,eAAeG,CAAK,IAAKA,GAAA,YAAAA,EAAO,QAASC,EAC1CJ,EAAM,aACXG,EACA,CAAE,KAAAT,EAAM,YAAAC,EAAa,MAAAC,CAAM,CAC7B,EAEKO,CACR,CACH,CACF"}
+{"version":3,"file":"RadioCardGroup.js","sources":["../../../src/components/radio-card/RadioCardGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\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={clsx('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"],"names":["RadioCardGroup","className","children","size","isFullWidth","align","rest","React","RadioGroup","clsx","child","RadioCard"],"mappings":"qIAaa,MAAAA,EAAiB,CAAC,CAC7B,UAAAC,EACA,SAAAC,EACA,KAAAC,EACA,YAAAC,EACA,MAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACC,EAAW,KAAX,CAAiB,GAAGF,CACnBC,EAAAA,EAAA,cAAC,MAAA,CAAI,UAAWE,EAAK,OAAQ,WAAY,YAAa,QAASR,CAAS,CAAA,EACrEM,EAAM,SAAS,IAAIL,EAAWQ,GACzBH,EAAM,eAAeG,CAAK,IAAKA,GAAA,KAAAA,OAAAA,EAAO,QAASC,EAC1CJ,EAAM,aACXG,EACA,CAAE,KAAAP,EAAM,YAAAC,EAAa,MAAAC,CAAM,CAC7B,EAEKK,CACR,CACH,CACF"}

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

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

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

@@ -1,2 +1,2 @@
-import*as i from"react";import{useFormContext as h}from"react-hook-form";import{FieldWrapper as b}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as x}from"../form/useFieldError.js";import{useFormCustomContext as C}from"../form/useFormCustomContext.js";import{SearchInput as E}from"../search-input/SearchInput.js";const m=({className:l,hideLabel:n,label:s,name:e,validation:r,prompt:d,description:c,appearance:u,...f})=>{const{register:a}=h(),o=C(),{error:t}=x(e),F=r?a(r):a,p=(o==null?void 0:o.appearance)||u;return i.createElement(b,{className:l,description:c,error:t,fieldId:e,hideLabel:n,label:s,prompt:d,required:!!(r!=null&&r.required),appearance:p},i.createElement(E,{id:e,name:e,ref:F,appearance:p,...t&&{state:"error"},...f}))};m.displayName="SearchField";export{m as SearchField};
+import*as i from"react";import{useFormContext as h}from"react-hook-form";import{FieldWrapper as b}from"../field-wrapper/FieldWrapper.js";import{useFieldError as x}from"../form/useFieldError.js";import{useFormCustomContext as C}from"../form/useFormCustomContext.js";import{SearchInput as E}from"../search-input/SearchInput.js";const m=({className:l,hideLabel:n,label:s,name:e,validation:r,prompt:d,description:c,appearance:u,...f})=>{const{register:a}=h(),o=C(),{error:t}=x(e),F=r?a(r):a,p=(o==null?void 0:o.appearance)||u;return i.createElement(b,{className:l,description:c,error:t,fieldId:e,hideLabel:n,label:s,prompt:d,required:!!(r!=null&&r.required),appearance:p},i.createElement(E,{id:e,name:e,ref:F,appearance:p,...t&&{state:"error"},...f}))};m.displayName="SearchField";export{m as SearchField};
 //# sourceMappingURL=SearchField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","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'\nimport { useFieldError, useFormCustomContext } from '~/components/form'\nimport { SearchInput, SearchInputProps } from '~/components/search-input'\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  ...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\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        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nSearchField.displayName = 'SearchField'\n"],"names":["SearchField","className","hideLabel","label","name","validation","prompt","description","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","SearchInput"],"mappings":"6YAYa,MAAAA,EAAc,CAAC,CAC1B,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,EACA,GAAGC,CACL,IAAwB,CACtB,KAAM,CAAE,SAAAC,CAAS,EAAIC,IACfC,EAAUC,EAAqB,EAC/B,CAAE,MAAAC,CAAM,EAAIC,EAAcX,CAAI,EAE9BY,EAAMX,EAAaK,EAASL,CAAU,EAAIK,EAC1CO,GAAiBL,GAAA,KAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,UAAWlB,EACX,YAAaM,EACb,MAAOO,EACP,QAASV,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,CAAA,EAAQD,GAAA,MAAAA,EAAY,UAC9B,WAAYY,CAAAA,EAEZC,EAAA,cAACE,EAAA,CACC,GAAIhB,EACJ,KAAMA,EACN,IAAKY,EACL,WAAYC,EACX,GAAIH,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGL,CAAAA,CACN,CACF,CAEJ,EAEAT,EAAY,YAAc"}
+{"version":3,"file":"SearchField.js","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  ...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\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        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nSearchField.displayName = 'SearchField'\n"],"names":["SearchField","className","hideLabel","label","name","validation","prompt","description","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","SearchInput"],"mappings":"sUAgBa,MAAAA,EAAc,CAAC,CAC1B,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,EACA,GAAGC,CACL,IAAwB,CACtB,KAAM,CAAE,SAAAC,CAAS,EAAIC,IACfC,EAAUC,EAAqB,EAC/B,CAAE,MAAAC,CAAM,EAAIC,EAAcX,CAAI,EAE9BY,EAAMX,EAAaK,EAASL,CAAU,EAAIK,EAC1CO,GAAiBL,GAAA,KAAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,UAAWlB,EACX,YAAaM,EACb,MAAOO,EACP,QAASV,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,CAAQD,EAAAA,GAAA,MAAAA,EAAY,UAC9B,WAAYY,CAEZC,EAAAA,EAAA,cAACE,EAAA,CACC,GAAIhB,EACJ,KAAMA,EACN,IAAKY,EACL,WAAYC,EACX,GAAIH,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGL,CACN,CAAA,CACF,CAEJ,EAEAT,EAAY,YAAc"}

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

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

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

@@ -1,2 +1,2 @@
-import{Search as k,Close as L}from"@atom-learning/icons";import i from"clsx";import*as t from"react";import{ActionIcon as N}from"../action-icon/ActionIcon.js";import{Icon as h}from"../icon/Icon.js";import{InputBackground as x,InputText as T}from"../input/Input.js";import{styled as M}from"../../styled.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{getFieldIconSize as O}from"../../utilities/style/get-icon-size.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{useCallbackRef as V}from"../../utilities/hooks/useCallbackRef.js";var j=(e=>(e.SEARCH="SEARCH",e.CLEAR="CLEAR",e))(j||{});const B=M(h,{base:["text-grey-700","absolute","pointer-events-none"],variants:{size:{sm:["right-2","size-4"],md:["right-2.5","size-5"],lg:["right-2.5","size-5"]}}}),E=t.forwardRef(({size:e="md",appearance:f="standard",className:C,value:n,defaultValue:c="",onValueChange:s,clearText:b="Clear",onChange:m,...g},v)=>{const[u,R]=V(),[A,p]=t.useState(c),[S,d]=t.useState(c?"CLEAR":"SEARCH");t.useEffect(()=>{typeof n>"u"||(p(n),d(n?"CLEAR":"SEARCH"))},[n]);const z=t.useMemo(()=>O(e),[e]);t.useImperativeHandle(v,()=>u.current);const y=()=>{var r,a;const o=u.current;if(!o)return;const l=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;(a=l==null?void 0:l.call)==null||a.call(l,o,"");const H=new Event("input",{bubbles:!0});o.dispatchEvent(H),o.focus(),s==null||s("")},I=r=>{m==null||m(r);const a=r.target.value;p(a),s==null||s(a),d(a?"CLEAR":"SEARCH")},w=()=>S==="SEARCH"?t.createElement(B,{is:k,size:e,className:i(e=="sm"?"size-4":"size-5","top-1/2","-translate-y-1/2")}):t.createElement(N,{label:b,theme:"neutral",size:z,onClick:y,className:"absolute top-1/2 right-1 -translate-y-1/2"},t.createElement(h,{is:L}));return t.createElement(x,{size:e,appearance:f,className:i("relative","w-auto",C)},t.createElement(T,{ref:R,size:e,type:"search",...g,value:A,onChange:I,className:i(e==="sm"?"pr-8":"pr-10","[-webkit-search-decoration:hidden]","[-webkit-search-cancel-button:hidden]","[-webkit-search-results-button:hidden]")}),w())});E.displayName="SearchInput";export{E as SearchInput};
+import{Search as k,Close as L}from"@atom-learning/icons";import i from"clsx";import*as t from"react";import{ActionIcon as N}from"../action-icon/ActionIcon.js";import{Icon as h}from"../icon/Icon.js";import{InputBackground as x,InputText as T}from"../input/Input.js";import{styled as M}from"../../styled.js";import{useCallbackRef as O}from"../../utilities/hooks/useCallbackRef.js";import{getFieldIconSize as V}from"../../utilities/style/get-icon-size.js";var j=(e=>(e.SEARCH="SEARCH",e.CLEAR="CLEAR",e))(j||{});const B=M(h,{base:["text-grey-700","absolute","pointer-events-none"],variants:{size:{sm:["right-2","size-4"],md:["right-2.5","size-5"],lg:["right-2.5","size-5"]}}}),E=t.forwardRef(({size:e="md",appearance:f="standard",className:C,value:r,defaultValue:c="",onValueChange:s,clearText:b="Clear",onChange:u,...g},v)=>{const[m,R]=O(),[A,p]=t.useState(c),[S,d]=t.useState(c?"CLEAR":"SEARCH");t.useEffect(()=>{typeof r>"u"||(p(r),d(r?"CLEAR":"SEARCH"))},[r]);const z=t.useMemo(()=>V(e),[e]);t.useImperativeHandle(v,()=>m.current);const y=()=>{var n,a;const o=m.current;if(!o)return;const l=(n=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:n.set;(a=l==null?void 0:l.call)==null||a.call(l,o,"");const H=new Event("input",{bubbles:!0});o.dispatchEvent(H),o.focus(),s==null||s("")},I=n=>{u==null||u(n);const a=n.target.value;p(a),s==null||s(a),d(a?"CLEAR":"SEARCH")},w=()=>S==="SEARCH"?t.createElement(B,{is:k,size:e,className:i(e=="sm"?"size-4":"size-5","top-1/2","-translate-y-1/2")}):t.createElement(N,{label:b,theme:"neutral",size:z,onClick:y,className:"absolute top-1/2 right-1 -translate-y-1/2"},t.createElement(h,{is:L}));return t.createElement(x,{size:e,appearance:f,className:i("relative","w-auto",C)},t.createElement(T,{ref:R,size:e,type:"search",...g,value:A,onChange:I,className:i(e==="sm"?"pr-8":"pr-10","[-webkit-search-decoration:hidden]","[-webkit-search-cancel-button:hidden]","[-webkit-search-results-button:hidden]")}),w())});E.displayName="SearchInput";export{E as SearchInput};
 //# sourceMappingURL=SearchInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","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'\nimport { Icon } from '~/components/icon'\nimport { Input, InputBackground, InputText } from '~/components/input'\nimport { styled } from '~/styled'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\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"],"names":["INPUT_ICON","M","StyledIcon","styled","Icon","SearchInput","React","size","appearance","className","value","defaultValue","onValueChange","clearText","onChange","remainingProps","ref","inputElRef","setInputElRef","useCallbackRef","innerValue","setInnerValue","activeIcon","setActiveIcon","iconSize","getFieldIconSize","handleClear","_a","_b","inputEl","nativeInputValueSetter","ev2","handleOnChange","event","newValue","getIcon","Search","clsx","ActionIcon","Close","InputBackground","InputText"],"mappings":"wjBAqBA,IAAKA,GAAAA,IACHA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFLA,IAAAC,GAAA,CAAA,CAAA,EAKL,MAAMC,EAAaC,EAAOC,EAAM,CAC9B,KAAM,CAAC,gBAAiB,WAAY,qBAAqB,EACzD,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,UAAW,QAAQ,EACxB,GAAI,CAAC,YAAa,QAAQ,EAC1B,GAAI,CAAC,YAAa,QAAQ,CAC5B,CACF,CACF,CAAC,EAEYC,EAAcC,EAAM,WAC/B,CACE,CACE,KAAAC,EAAO,KACP,WAAAC,EAAa,WACb,UAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,cAAAC,EACA,UAAAC,EAAY,QACZ,SAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAC9B,EAAA,CAACC,EAAYC,CAAa,EAAIf,EAAM,SAASK,CAAY,EACzD,CAACW,EAAYC,CAAa,EAAIjB,EAAM,SACxCK,EAAe,QAAmB,QACpC,EACAL,EAAM,UAAU,IAAM,CAChB,OAAOI,EAAU,MACrBW,EAAcX,CAAK,EACnBa,EAAcb,EAAQ,QAAmB,QAAiB,EAC5D,EAAG,CAACA,CAAK,CAAC,EAEV,MAAMc,EAAWlB,EAAM,QAAQ,IAAMmB,EAAiBlB,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnED,EAAM,oBAAoBU,EAAK,IAAMC,EAAW,OAA2B,EAE3E,MAAMS,EAAc,IAAM,CAnE9B,IAAAC,EAAAC,EAoEM,MAAMC,EAAUZ,EAAW,QAC3B,GAAI,CAACY,EAAS,OAGd,MAAMC,GAAyBH,EAAA,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,IAH+B,YAAAA,EAG5B,KACHC,EAAAE,GAAA,KAAA,OAAAA,EAAwB,OAAxB,MAAAF,EAAA,KAAAE,EAA+BD,EAAS,EAAA,EACxC,MAAME,EAAM,IAAI,MAAM,QAAS,CAC7B,QAAS,EACX,CAAC,EACDF,EAAQ,cAAcE,CAAG,EACzBF,EAAQ,MAAM,EACdjB,GAAA,MAAAA,EAAgB,EAClB,CAAA,EAEMoB,EAAkBC,GAA+C,CACrEnB,GAAA,MAAAA,EAAWmB,CAEX,EAAA,MAAMC,EAAWD,EAAM,OAAO,MAC9BZ,EAAca,CAAQ,EACtBtB,GAAA,MAAAA,EAAgBsB,CAChBX,EAAAA,EAAcW,EAAW,QAAmB,QAAiB,CAC/D,EAEMC,EAAU,IACVb,IAAe,SAEfhB,EAAA,cAACJ,EAAA,CACC,GAAIkC,EACJ,KAAM7B,EACN,UAAW8B,EACT9B,GAAQ,KAAO,SAAW,SAC1B,UACA,kBACF,EACF,EAIFD,EAAA,cAACgC,EAAA,CACC,MAAOzB,EACP,MAAM,UACN,KAAMW,EACN,QAASE,EACT,UAAU,2CAEVpB,EAAAA,EAAA,cAACF,EAAA,CAAK,GAAImC,CAAO,CAAA,CACnB,EAIJ,OACEjC,EAAA,cAACkC,EAAA,CACC,KAAMjC,EACN,WAAYC,EACZ,UAAW6B,EAAK,WAAY,SAAU5B,CAAS,CAE/CH,EAAAA,EAAA,cAACmC,EAAA,CACC,IAAKvB,EACL,KAAMX,EACN,KAAK,SACJ,GAAGQ,EACJ,MAAOK,EACP,SAAUY,EACV,UAAWK,EACT9B,IAAS,KAAO,OAAS,QACzB,qCACA,wCACA,wCACF,CAAA,CACF,EACC4B,EAAQ,CACX,CAEJ,CACF,EAEA9B,EAAY,YAAc"}
+{"version":3,"file":"SearchInput.js","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"],"names":["INPUT_ICON","M","StyledIcon","styled","Icon","SearchInput","React","size","appearance","className","value","defaultValue","onValueChange","clearText","onChange","remainingProps","ref","inputElRef","setInputElRef","useCallbackRef","innerValue","setInnerValue","activeIcon","setActiveIcon","iconSize","getFieldIconSize","handleClear","_a","_b","inputEl","nativeInputValueSetter","ev2","handleOnChange","event","newValue","getIcon","Search","clsx","ActionIcon","Close","InputBackground","InputText"],"mappings":"qcAqBA,IAAKA,GAAAA,IACHA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFLA,IAAAC,GAAA,CAAA,CAAA,EAKL,MAAMC,EAAaC,EAAOC,EAAM,CAC9B,KAAM,CAAC,gBAAiB,WAAY,qBAAqB,EACzD,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,UAAW,QAAQ,EACxB,GAAI,CAAC,YAAa,QAAQ,EAC1B,GAAI,CAAC,YAAa,QAAQ,CAC5B,CACF,CACF,CAAC,EAEYC,EAAcC,EAAM,WAC/B,CACE,CACE,KAAAC,EAAO,KACP,WAAAC,EAAa,WACb,UAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,cAAAC,EACA,UAAAC,EAAY,QACZ,SAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAC9B,EAAA,CAACC,EAAYC,CAAa,EAAIf,EAAM,SAASK,CAAY,EACzD,CAACW,EAAYC,CAAa,EAAIjB,EAAM,SACxCK,EAAe,QAAmB,QACpC,EACAL,EAAM,UAAU,IAAM,CAChB,OAAOI,EAAU,MACrBW,EAAcX,CAAK,EACnBa,EAAcb,EAAQ,QAAmB,QAAiB,EAC5D,EAAG,CAACA,CAAK,CAAC,EAEV,MAAMc,EAAWlB,EAAM,QAAQ,IAAMmB,EAAiBlB,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnED,EAAM,oBAAoBU,EAAK,IAAMC,EAAW,OAA2B,EAE3E,MAAMS,EAAc,IAAM,CAnE9B,IAAAC,EAAAC,EAoEM,MAAMC,EAAUZ,EAAW,QAC3B,GAAI,CAACY,EAAS,OAGd,MAAMC,GAAyBH,EAAA,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,IAH+B,YAAAA,EAG5B,KACHC,EAAAE,GAAA,KAAA,OAAAA,EAAwB,OAAxB,MAAAF,EAAA,KAAAE,EAA+BD,EAAS,EAAA,EACxC,MAAME,EAAM,IAAI,MAAM,QAAS,CAC7B,QAAS,EACX,CAAC,EACDF,EAAQ,cAAcE,CAAG,EACzBF,EAAQ,MAAM,EACdjB,GAAA,MAAAA,EAAgB,EAClB,CAAA,EAEMoB,EAAkBC,GAA+C,CACrEnB,GAAA,MAAAA,EAAWmB,CAEX,EAAA,MAAMC,EAAWD,EAAM,OAAO,MAC9BZ,EAAca,CAAQ,EACtBtB,GAAA,MAAAA,EAAgBsB,CAChBX,EAAAA,EAAcW,EAAW,QAAmB,QAAiB,CAC/D,EAEMC,EAAU,IACVb,IAAe,SAEfhB,EAAA,cAACJ,EAAA,CACC,GAAIkC,EACJ,KAAM7B,EACN,UAAW8B,EACT9B,GAAQ,KAAO,SAAW,SAC1B,UACA,kBACF,EACF,EAIFD,EAAA,cAACgC,EAAA,CACC,MAAOzB,EACP,MAAM,UACN,KAAMW,EACN,QAASE,EACT,UAAU,2CAEVpB,EAAAA,EAAA,cAACF,EAAA,CAAK,GAAImC,CAAO,CAAA,CACnB,EAIJ,OACEjC,EAAA,cAACkC,EAAA,CACC,KAAMjC,EACN,WAAYC,EACZ,UAAW6B,EAAK,WAAY,SAAU5B,CAAS,CAE/CH,EAAAA,EAAA,cAACmC,EAAA,CACC,IAAKvB,EACL,KAAMX,EACN,KAAK,SACJ,GAAGQ,EACJ,MAAOK,EACP,SAAUY,EACV,UAAWK,EACT9B,IAAS,KAAO,OAAS,QACzB,qCACA,wCACA,wCACF,CAAA,CACF,EACC4B,EAAQ,CACX,CAEJ,CACF,EAEA9B,EAAY,YAAc"}

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

@@ -1,9 +1,8 @@
 import React from 'react';
-import { Flex } from '../flex';
 declare const StyledSectionMessage: React.ForwardRefExoticComponent<Omit<import("../dismissible/DismissibleRoot").IDismissibleRootInternalProps & import("../dismissible/DismissibleRoot").IDismissibleRootProps & {
     children?: React.ReactNode | undefined;
 }, "theme" | "hasDismiss" | "hasIcon"> & {
-    theme?: "warning" | "error" | "success" | "info" | "neutral" | undefined;
+    theme?: "neutral" | "success" | "warning" | "info" | "error" | undefined;
     hasIcon?: boolean | undefined;
     hasDismiss?: boolean | undefined;
 } & {
@@ -31,11 +30,11 @@ export declare const SectionMessage: {
         as?: never;
     }, "ref"> & React.RefAttributes<SVGSVGElement>>) => JSX.Element;
     Dismiss: ({ label, className, ...rest }: React.ComponentProps<typeof import("..").ActionIcon>) => JSX.Element;
-    Content: ({ className, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
-        className?: string;
-    }) => JSX.Element;
-    Actions: ({ className, ...rest }: React.ComponentProps<typeof Flex> & {
-        className?: string;
-    }) => JSX.Element;
+    Content: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }, never> & {
+        as?: React.ElementType;
+    }>;
+    Actions: ({ className, ...rest }: React.ComponentProps<"div">) => React.JSX.Element;
 };
 export {};

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

@@ -1,2 +1,2 @@
-import{TooltipProvider as m}from"@radix-ui/react-tooltip";import t from"react";import{styled as a}from"../../styled.js";import{Dismissible as c}from"../dismissible/index.js";import{Flex as g}from"../flex/Flex.js";import{SectionMessageProvider as l,useSectionMessageContext as p}from"./SectionMessageContext.js";import{SectionMessageDescription as h}from"./SectionMessageDescription.js";import{SectionMessageDismiss as f}from"./SectionMessageDismiss.js";import{SectionMessageIcon as d}from"./SectionMessageIcon.js";import{SectionMessageContent as u,SectionMessageActions as x}from"./SectionMessageLayout.js";import{SectionMessageTitle as b}from"./SectionMessageTitle.js";const M=a(c,{base:["relative","rounded-md","flex","shrink-0","min-h-12","p-4","border","border-white"],variants:{theme:{success:["bg-success-light","text-success-dark"],warning:["bg-warning-light","text-warning-text"],error:["bg-danger-light","text-danger-dark"],neutral:["bg-grey-100","text-grey-1000"],info:["bg-info-light","text-info-dark"]},hasIcon:{true:["pl-10"]},hasDismiss:{true:["pr-12"]}}}),S=({children:s,...r})=>{const{theme:i,hasIcon:o,hasDismiss:n}=p();return t.createElement(M,{...r,theme:i,hasIcon:o,hasDismiss:n},t.createElement(g,{gap:3,justify:"space-between",className:"grow"},s))},e=({theme:s="info",...r})=>t.createElement(m,null,t.createElement(l,{theme:s},t.createElement(S,{...r})));e.Title=b,e.Description=h,e.Icon=d,e.Dismiss=f,e.Content=u,e.Actions=x;export{e as SectionMessage};
+import{TooltipProvider as m}from"@radix-ui/react-tooltip";import t from"react";import{styled as a}from"../../styled.js";import{Dismissible as c}from"../dismissible/index.js";import{SectionMessageProvider as g,useSectionMessageContext as l}from"./SectionMessageContext.js";import{SectionMessageDescription as h}from"./SectionMessageDescription.js";import{SectionMessageDismiss as f}from"./SectionMessageDismiss.js";import{SectionMessageIcon as p}from"./SectionMessageIcon.js";import{SectionMessageContent as d,SectionMessageActions as u}from"./SectionMessageLayout.js";import{SectionMessageTitle as b}from"./SectionMessageTitle.js";const x=a(c,{base:["relative","rounded-md","flex","shrink-0","min-h-12","p-4","border","border-white"],variants:{theme:{success:["bg-success-light","text-success-dark"],warning:["bg-warning-light","text-warning-text"],error:["bg-danger-light","text-danger-dark"],neutral:["bg-grey-100","text-grey-1000"],info:["bg-info-light","text-info-dark"]},hasIcon:{true:["pl-10"]},hasDismiss:{true:["pr-12"]}}}),M=({children:s,...i})=>{const{theme:r,hasIcon:o,hasDismiss:n}=l();return t.createElement(x,{...i,theme:r,hasIcon:o,hasDismiss:n},t.createElement("div",{className:"flex grow justify-between gap-3"},s))},e=({theme:s="info",...i})=>t.createElement(m,null,t.createElement(g,{theme:s},t.createElement(M,{...i})));e.Title=b,e.Description=h,e.Icon=p,e.Dismiss=f,e.Content=d,e.Actions=u;export{e as SectionMessage};
 //# sourceMappingURL=SectionMessage.js.map