@atom-learning/components 6.0.0-beta.5 → 6.0.0-beta.6

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 '~/stitches'\n\nconst StyledProgressBar = styled(Progress.Root, {\n  borderRadius: '$round',\n  background: '$grey200',\n  position: 'relative',\n  overflow: 'hidden',\n  width: '100%',\n  variants: {\n    size: {\n      sm: { height: '4px' },\n      md: { height: '$0' }\n    },\n    theme: {\n      primary: { color: '$primary800' },\n      info: { color: '$info' },\n      success: { color: '$success' },\n      warning: { color: '$warning' },\n      danger: { color: '$danger' },\n      neutral: { color: '$grey800', bg: '$grey400' }\n    }\n  }\n})\n\nconst StyledIndicator = styled(Progress.Indicator, {\n  backgroundColor: 'currentcolor',\n  borderRadius: '$round',\n  boxSizing: 'border-box',\n  height: '100%',\n  position: 'absolute',\n  transition: 'all 300ms ease-out'\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      style={{\n        width: '100%',\n        transform: `translateX(-${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":"8GAKA,MAAMA,EAAoBC,EAAOC,EAAS,KAAM,CAC9C,aAAc,SACd,WAAY,WACZ,SAAU,WACV,SAAU,SACV,MAAO,OACP,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,OAAQ,KAAM,EACpB,GAAI,CAAE,OAAQ,IAAK,CACrB,EACA,MAAO,CACL,QAAS,CAAE,MAAO,aAAc,EAChC,KAAM,CAAE,MAAO,OAAQ,EACvB,QAAS,CAAE,MAAO,UAAW,EAC7B,QAAS,CAAE,MAAO,UAAW,EAC7B,OAAQ,CAAE,MAAO,SAAU,EAC3B,QAAS,CAAE,MAAO,WAAY,GAAI,UAAW,CAC/C,CACF,CACF,CAAC,EAEKC,EAAkBF,EAAOC,EAAS,UAAW,CACjD,gBAAiB,eACjB,aAAc,SACd,UAAW,aACX,OAAQ,OACR,SAAU,WACV,WAAY,oBACd,CAAC,EAUYE,EAAc,CAAC,CAC1B,MAAAC,EACA,IAAAC,EAAM,IACN,KAAAC,EAAO,KACP,MAAAC,EAAQ,aACLC,CACL,IACEC,EAAA,cAACV,EAAA,CACC,MAAOK,EACP,IAAKC,EACL,MAAOE,EACP,KAAMD,EACL,GAAGE,GAEJC,EAAA,cAACP,EAAA,CACC,MAAO,CACL,MAAO,OACP,UAAW,eAAe,KAAQE,GAAS,GAAKC,EAAO,OACzD,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(Progress.Root, {\n  base: [\n    'rounded-round',\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\nconst StyledIndicator = styled(Progress.Indicator, {\n  base: [\n    'bg-current',\n    'rounded-round',\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,EAAOC,EAAS,KAAM,CAC9C,KAAM,CACJ,gBACA,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,CAAC,EAEKC,EAAkBF,EAAOC,EAAS,UAAW,CACjD,KAAM,CACJ,aACA,gBACA,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,CAEJC,EAAAA,EAAA,cAACP,EAAA,CACC,UAAU,kCACV,MAAO,CACL,aAAc,IAAI,YAAQE,GAAS,GAAKC,EAAO,IAAG,GACpD,CAAA,CAAA,CACF,CACF,EAGFF,EAAY,YAAc"}

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

@@ -1,2 +1,2 @@
-import*as o from"@radix-ui/react-radio-group";import*as e from"react";import{styled as t}from"../../stitches.js";const s=t(o.Item,{alignItems:"center",appearance:"none",backgroundColor:"transparent",border:"1px solid $grey800",borderRadius:"$round",color:"white",cursor:"pointer",display:"flex",justifyContent:"center",p:0,size:"$1",variants:{size:{md:{size:"$1"},lg:{size:"$2",mt:"-$1"}}},transition:"all 50ms ease-out","&:focus":{outline:"2px solid $primary800",outlineOffset:"1px"},'&[data-state="checked"]':{backgroundColor:"$primary800",borderColor:"$primary800"},"&[disabled]":{backgroundColor:"$grey200",borderColor:"$grey800",color:"$grey800",cursor:"not-allowed"}}),n=t(o.Indicator,{size:"6px",borderRadius:"$round",backgroundColor:"currentcolor",position:"absolute",variants:{size:{md:{size:"6px"},lg:{size:"12px"}}}}),a=({size:r,...i})=>e.createElement(s,{...i,size:r},e.createElement(n,{size:r}));a.displayName="RadioButton";export{a as RadioButton};
+import*as t from"@radix-ui/react-radio-group";import*as r from"react";import{styled as o}from"../../styled.js";const i=o(t.Item,{base:["items-center","appearance-none","bg-transparent","border","border-grey-800","rounded-round","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"],variants:{size:{md:["size-4"],lg:["-mt-1","size-6"]}}}),d=o(t.Indicator,{base:["size-1.5","rounded-round","bg-current","absolute"],variants:{size:{md:["size-1.5"],lg:["size-3"]}}}),s=({size:e,...a})=>r.createElement(i,{...a,size:e},r.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 '~/stitches'\nimport { Override } from '~/utilities/types'\n\nconst StyledRadioButton = styled(RadioGroup.Item, {\n  alignItems: 'center',\n  appearance: 'none',\n  backgroundColor: 'transparent',\n  border: '1px solid $grey800',\n  borderRadius: '$round',\n  color: 'white',\n  cursor: 'pointer',\n  display: 'flex',\n  justifyContent: 'center',\n  p: 0,\n  size: '$1',\n  variants: {\n    size: {\n      md: {\n        size: '$1'\n      },\n      lg: {\n        size: '$2',\n        mt: '-$1'\n      }\n    }\n  },\n  transition: 'all 50ms ease-out',\n  '&:focus': {\n    outline: '2px solid $primary800',\n    outlineOffset: '1px'\n  },\n  '&[data-state=\"checked\"]': {\n    backgroundColor: '$primary800',\n    borderColor: '$primary800'\n  },\n  '&[disabled]': {\n    backgroundColor: '$grey200',\n    borderColor: '$grey800',\n    color: '$grey800',\n    cursor: 'not-allowed'\n  }\n})\n\nconst StyledIndicator = styled(RadioGroup.Indicator, {\n  size: '6px',\n  borderRadius: '$round',\n  backgroundColor: 'currentcolor',\n  position: 'absolute',\n  variants: {\n    size: {\n      md: {\n        size: '6px'\n      },\n      lg: {\n        size: '12px'\n      }\n    }\n  }\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":"iHAMA,MAAMA,EAAoBC,EAAOC,EAAW,KAAM,CAChD,WAAY,SACZ,WAAY,OACZ,gBAAiB,cACjB,OAAQ,qBACR,aAAc,SACd,MAAO,QACP,OAAQ,UACR,QAAS,OACT,eAAgB,SAChB,EAAG,EACH,KAAM,KACN,SAAU,CACR,KAAM,CACJ,GAAI,CACF,KAAM,IACR,EACA,GAAI,CACF,KAAM,KACN,GAAI,KACN,CACF,CACF,EACA,WAAY,oBACZ,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,0BAA2B,CACzB,gBAAiB,cACjB,YAAa,aACf,EACA,cAAe,CACb,gBAAiB,WACjB,YAAa,WACb,MAAO,WACP,OAAQ,aACV,CACF,CAAC,EAEKC,EAAkBF,EAAOC,EAAW,UAAW,CACnD,KAAM,MACN,aAAc,SACd,gBAAiB,eACjB,SAAU,WACV,SAAU,CACR,KAAM,CACJ,GAAI,CACF,KAAM,KACR,EACA,GAAI,CACF,KAAM,MACR,CACF,CACF,CACF,CAAC,EAWYE,EAAc,CAAC,CAAE,KAAAC,KAASC,CAAM,IAEzCC,EAAA,cAACP,EAAA,CAAmB,GAAGM,EAAO,KAAMD,GAClCE,EAAA,cAACJ,EAAA,CAAgB,KAAME,CAAAA,CAAM,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(RadioGroup.Item, {\n  base: [\n    'items-center',\n    'appearance-none',\n    'bg-transparent',\n    'border',\n    'border-grey-800',\n    'rounded-round',\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  ],\n  variants: {\n    size: {\n      md: ['size-4'],\n      lg: ['-mt-1', 'size-6']\n    }\n  }\n})\n\nconst StyledIndicator = styled(RadioGroup.Indicator, {\n  base: ['size-1.5', 'rounded-round', 'bg-current', 'absolute'],\n  variants: {\n    size: {\n      md: ['size-1.5'],\n      lg: ['size-3']\n    }\n  }\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,EAAOC,EAAW,KAAM,CAChD,KAAM,CACJ,eACA,kBACA,iBACA,SACA,kBACA,gBACA,aACA,iBACA,OACA,iBACA,MACA,SACA,iBACA,cACA,WACA,kBACA,yBACA,4BACA,sBACA,sCACA,0CACA,uBACA,2BACA,8BACA,wBACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,QAAS,QAAQ,CACxB,CACF,CACF,CAAC,EAEKC,EAAkBF,EAAOC,EAAW,UAAW,CACnD,KAAM,CAAC,WAAY,gBAAiB,aAAc,UAAU,EAC5D,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,UAAU,EACf,GAAI,CAAC,QAAQ,CACf,CACF,CACF,CAAC,EAWYE,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/RadioButtonGroup.js

@@ -1,2 +1,2 @@
-import*as r from"@radix-ui/react-radio-group";import{styled as t}from"../../stitches.js";const o=t(r.Root,{display:"flex",flexWrap:"wrap",variants:{direction:{row:{flexDirection:"row","& > *:not(:last-child)":{mr:"$5"}},column:{flexDirection:"column"}}}});o.displayName="RadioButtonGroup";export{o as RadioButtonGroup};
+import*as t from"@radix-ui/react-radio-group";import{styled as r}from"../../styled.js";const o=r(t.Root,{base:["flex","flex-wrap"],variants:{direction:{row:["*:not-last:mr-8","flex-row"],column:["flex-col"]}}});o.displayName="RadioButtonGroup";export{o as RadioButtonGroup};
 //# sourceMappingURL=RadioButtonGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonGroup.js","sources":["../../../src/components/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\n\nimport { styled } from '~/stitches'\n\nexport const RadioButtonGroup = styled(RadioGroup.Root, {\n  display: 'flex',\n  flexWrap: 'wrap',\n  variants: {\n    direction: {\n      row: {\n        flexDirection: 'row',\n        '& > *:not(:last-child)': { mr: '$5' }\n      },\n      column: { flexDirection: 'column' }\n    }\n  }\n})\n\nRadioButtonGroup.displayName = 'RadioButtonGroup'\n"],"names":["RadioButtonGroup","styled","RadioGroup"],"mappings":"+FAIaA,EAAmBC,EAAOC,EAAW,KAAM,CACtD,QAAS,OACT,SAAU,OACV,SAAU,CACR,UAAW,CACT,IAAK,CACH,cAAe,MACf,yBAA0B,CAAE,GAAI,IAAK,CACvC,EACA,OAAQ,CAAE,cAAe,QAAS,CACpC,CACF,CACF,CAAC,EAEDF,EAAiB,YAAc"}
+{"version":3,"file":"RadioButtonGroup.js","sources":["../../../src/components/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\n\nimport { styled } from '~/styled'\n\nexport const RadioButtonGroup = styled(RadioGroup.Root, {\n  base: ['flex', 'flex-wrap'],\n  variants: {\n    direction: {\n      row: ['*:not-last:mr-8', 'flex-row'],\n      column: ['flex-col']\n    }\n  }\n})\n\nRadioButtonGroup.displayName = 'RadioButtonGroup'\n"],"names":["RadioButtonGroup","styled","RadioGroup"],"mappings":"uFAIO,MAAMA,EAAmBC,EAAOC,EAAW,KAAM,CACtD,KAAM,CAAC,OAAQ,WAAW,EAC1B,SAAU,CACR,UAAW,CACT,IAAK,CAAC,kBAAmB,UAAU,EACnC,OAAQ,CAAC,UAAU,CACrB,CACF,CACF,CAAC,EAEDF,EAAiB,YAAc"}

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

@@ -1,2 +1,2 @@
-import*as e from"react";import{useFormContext as v,useController as F}from"react-hook-form";import{Description as R}from"../field-wrapper/FieldDescription.js";import"../form/Form.js";import{useFieldError as V}from"../form/useFieldError.js";import"../form/useFormCustomContext.js";import{InlineMessage as h}from"../inline-message/InlineMessage.js";import{Label as B}from"../label/Label.js";import"../radio-button/RadioButton.js";import{RadioButtonGroup as x}from"../radio-button/RadioButtonGroup.js";import{styled as y}from"../../stitches.js";import{RadioField as q}from"./RadioField.js";const I=y("fieldset",{all:"unset"}),u=({children:c,css:d,direction:p="column",defaultValue:r,value:o,description:l,label:f,name:n,validation:t,onValueChange:a,...E})=>{const{control:b}=v(),{field:{ref:g,onChange:i,value:C,name:D}}=F({name:n,control:b,rules:t,defaultValue:r}),{error:m}=V(n);return e.useEffect(()=>{typeof o<"u"&&i(o)},[o]),e.createElement(I,{css:d},e.createElement(B,{as:"legend",css:{p:0,mb:"$3"},required:Boolean(t==null?void 0:t.required)},f),l&&e.createElement(R,{css:{mb:"$3"}},l),e.createElement(x,{ref:g,direction:p,defaultValue:r,onValueChange:s=>{i(s),a==null||a(s)},value:C,...E},c),m&&e.createElement(h,{css:{mt:"$2"}},m))},j=Object.assign(u,{Item:q});u.displayName="RadioButtonField";export{j 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"../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:["[all:unset]"]}),u=({children:d,className:c,direction:p="column",defaultValue:r,value:t,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:r}),{error:i}=h(l);return e.useEffect(()=>{typeof t<"u"&&n(t)},[t]),e.createElement(q,{className:c},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:r,onValueChange:s=>{n(s),m==null||m(s)},value:g,...b},d),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 '~/stitches'\n\nimport { RadioField } from './RadioField'\n\nconst Fieldset = styled('fieldset', {\n  all: 'unset'\n})\n\ntype RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> &\n  FieldElementWrapperProps\n\nconst RadioButtonFieldComponent = ({\n  children,\n  css,\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 css={css}>\n      <Label\n        as=\"legend\"\n        css={{ p: 0, mb: '$3' }}\n        required={Boolean(validation?.required)}\n      >\n        {label}\n      </Label>\n      {description && (\n        <FieldDescription css={{ 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 css={{ 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","css","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":"2kBAaA,MAAMA,EAAWC,EAAO,WAAY,CAClC,IAAK,OACP,CAAC,EAKKC,EAA4B,CAAC,CACjC,SAAAC,EACA,IAAAC,EACA,UAAAC,EAAY,SACZ,aAAAC,EACA,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,cAAAC,KACGC,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,IAAKI,CAAAA,EACbmB,EAAA,cAACC,EAAA,CACC,GAAG,SACH,IAAK,CAAE,EAAG,EAAG,GAAI,IAAK,EACtB,SAAU,QAAQb,GAAA,KAAAA,OAAAA,EAAY,QAAQ,CAErCF,EAAAA,CACH,EACCD,GACCe,EAAA,cAACE,EAAA,CAAiB,IAAK,CAAE,GAAI,IAAK,CAAA,EAAIjB,CAAY,EAGpDe,EAAA,cAACG,EAAA,CACC,IAAKV,EACL,UAAWX,EACX,aAAcC,EACd,cAAgBqB,GAAa,CAC3BV,EAASU,CAAQ,EACjBf,GAAA,MAAAA,EAAgBe,EAClB,EACA,MAAOT,EACN,GAAGL,CAEHV,EAAAA,CACH,EAECkB,GAASE,EAAA,cAACK,EAAA,CAAc,IAAK,CAAE,GAAI,IAAK,CAAIP,EAAAA,CAAM,CACrD,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 { 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: ['[all:unset]']\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,aAAa,CACtB,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.js

@@ -1,2 +1,2 @@
-import*as e from"react";import"../field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as t}from"../field-wrapper/InlineFieldWrapper.js";import{RadioButton as m}from"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";const o=({css:a,label:i,value:l,...r})=>e.createElement(t,{css:a,label:i},e.createElement(m,{value:l,...r}));o.displayName="RadioField";export{o as RadioField};
+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};
 //# 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'\nimport { CSS } from '~/stitches'\n\ntype RadioFieldProps = {\n  css?: CSS\n  defaultChecked?: boolean\n  error?: string\n  label: string\n  validation?: ValidationOptions\n} & React.ComponentProps<typeof RadioButton>\n\nexport const RadioField = ({\n  css,\n  label,\n  value,\n  ...remainingProps\n}: RadioFieldProps) => (\n  <InlineFieldWrapper css={css} label={label}>\n    <RadioButton value={value} {...remainingProps} />\n  </InlineFieldWrapper>\n)\n\nRadioField.displayName = 'RadioField'\n"],"names":["RadioField","css","label","value","remainingProps","React","InlineFieldWrapper","RadioButton"],"mappings":"sPAeO,MAAMA,EAAa,CAAC,CACzB,IAAAC,EACA,MAAAC,EACA,MAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAmB,IAAKL,EAAK,MAAOC,CACnCG,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'\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"}

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

@@ -1,2 +1,2 @@
-import*as l from"@radix-ui/react-radio-group";import*as e from"react";import{styled as t}from"../../stitches.js";import{Box as d}from"../box/Box.js";const o=t(l.Item,{alignItems:"center",bg:"white",border:"1px solid $grey600",borderRadius:"$0",cursor:"pointer",display:"flex",textAlign:"left",'&[data-state="checked"]':{outline:"2px solid $primary800",outlineOffset:"-2px"},variants:{align:{left:{flexDirection:"row"},right:{flexDirection:"row-reverse"}},size:{md:{px:"$4",py:"$3"},lg:{px:"$5",py:"$4"}},isFullWidth:{true:{width:"100%"},false:{width:"max-content"}}}}),c=t("div",{alignItems:"center",appearance:"none",backgroundColor:"transparent",border:"1px solid $grey900",borderRadius:"$round",display:"flex",flexShrink:0,justifyContent:"center",p:0,size:"$1",transition:"all 50ms ease-out",'[data-state="checked"] &':{backgroundColor:"$primary800",borderColor:"$primary800"},variants:{containerIsFullWidth:{true:{},false:{}},align:{left:{mr:"$4"},right:{}}},compoundVariants:[{containerIsFullWidth:!0,align:"right",css:{ml:"auto"}},{containerIsFullWidth:!1,align:"right",css:{ml:"$4"}}]}),p=t(l.Indicator,{backgroundColor:"white",borderRadius:"$round",position:"absolute",size:"6px"}),u=({children:a,isFullWidth:r=!1,size:n="md",align:i="left",...s})=>e.createElement(o,{...s,align:i,isFullWidth:r,size:n},e.createElement(c,{align:i,containerIsFullWidth:r},e.createElement(p,null)),e.createElement(d,null,a));export{u as RadioCard,o as StyledRadioCard};
+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-round","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-round","absolute","size-1.5"]}),u=({children:l,isFullWidth:r=!1,size:n="md",align:a="left",...s})=>e.createElement(d,{...s,align:a,isFullWidth:r,size:n},e.createElement(o,{align:a,containerIsFullWidth:r},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 '~/stitches'\n\nimport { Box } from '../box/Box'\n\nexport const StyledRadioCard = styled(RadioGroup.Item, {\n  alignItems: 'center',\n  bg: 'white',\n  border: '1px solid $grey600',\n  borderRadius: '$0',\n  cursor: 'pointer',\n  display: 'flex',\n  textAlign: 'left',\n  '&[data-state=\"checked\"]': {\n    outline: '2px solid $primary800',\n    outlineOffset: '-2px'\n  },\n  variants: {\n    align: {\n      left: { flexDirection: 'row' },\n      right: { flexDirection: 'row-reverse' }\n    },\n    size: {\n      md: { px: '$4', py: '$3' },\n      lg: { px: '$5', py: '$4' }\n    },\n    isFullWidth: {\n      true: { width: '100%' },\n      false: { width: 'max-content' }\n    }\n  }\n})\n\nconst RadioButton = styled('div', {\n  alignItems: 'center',\n  appearance: 'none',\n  backgroundColor: 'transparent',\n  border: '1px solid $grey900',\n  borderRadius: '$round',\n  display: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  p: 0,\n  size: '$1',\n  transition: 'all 50ms ease-out',\n  '[data-state=\"checked\"] &': {\n    backgroundColor: '$primary800',\n    borderColor: '$primary800'\n  },\n  variants: {\n    containerIsFullWidth: {\n      true: {},\n      false: {}\n    },\n    align: {\n      left: { mr: '$4' },\n      right: {}\n    }\n  },\n\n  compoundVariants: [\n    {\n      containerIsFullWidth: true,\n      align: 'right',\n      css: { ml: 'auto' }\n    },\n    {\n      containerIsFullWidth: false,\n      align: 'right',\n      css: { ml: '$4' }\n    }\n  ]\n})\n\nconst Indicator = styled(RadioGroup.Indicator, {\n  backgroundColor: 'white',\n  borderRadius: '$round',\n  position: 'absolute',\n  size: '6px'\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    <Box>{children}</Box>\n  </StyledRadioCard>\n)\n"],"names":["StyledRadioCard","styled","RadioGroup","RadioButton","Indicator","RadioCard","children","isFullWidth","size","align","rest","React","Box"],"mappings":"qJAOa,MAAAA,EAAkBC,EAAOC,EAAW,KAAM,CACrD,WAAY,SACZ,GAAI,QACJ,OAAQ,qBACR,aAAc,KACd,OAAQ,UACR,QAAS,OACT,UAAW,OACX,0BAA2B,CACzB,QAAS,wBACT,cAAe,MACjB,EACA,SAAU,CACR,MAAO,CACL,KAAM,CAAE,cAAe,KAAM,EAC7B,MAAO,CAAE,cAAe,aAAc,CACxC,EACA,KAAM,CACJ,GAAI,CAAE,GAAI,KAAM,GAAI,IAAK,EACzB,GAAI,CAAE,GAAI,KAAM,GAAI,IAAK,CAC3B,EACA,YAAa,CACX,KAAM,CAAE,MAAO,MAAO,EACtB,MAAO,CAAE,MAAO,aAAc,CAChC,CACF,CACF,CAAC,EAEKC,EAAcF,EAAO,MAAO,CAChC,WAAY,SACZ,WAAY,OACZ,gBAAiB,cACjB,OAAQ,qBACR,aAAc,SACd,QAAS,OACT,WAAY,EACZ,eAAgB,SAChB,EAAG,EACH,KAAM,KACN,WAAY,oBACZ,2BAA4B,CAC1B,gBAAiB,cACjB,YAAa,aACf,EACA,SAAU,CACR,qBAAsB,CACpB,KAAM,CAAA,EACN,MAAO,EACT,EACA,MAAO,CACL,KAAM,CAAE,GAAI,IAAK,EACjB,MAAO,CACT,CAAA,CACF,EAEA,iBAAkB,CAChB,CACE,qBAAsB,GACtB,MAAO,QACP,IAAK,CAAE,GAAI,MAAO,CACpB,EACA,CACE,qBAAsB,GACtB,MAAO,QACP,IAAK,CAAE,GAAI,IAAK,CAClB,CACF,CACF,CAAC,EAEKG,EAAYH,EAAOC,EAAW,UAAW,CAC7C,gBAAiB,QACjB,aAAc,SACd,SAAU,WACV,KAAM,KACR,CAAC,EAIYG,EAAY,CAAC,CACxB,SAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EAAO,KACP,MAAAC,EAAQ,UACLC,CACL,IACEC,EAAA,cAACX,GACE,GAAGU,EACJ,MAAOD,EACP,YAAaF,EACb,KAAMC,CAAAA,EAENG,EAAA,cAACR,EAAA,CAAY,MAAOM,EAAO,qBAAsBF,CAC/CI,EAAAA,EAAA,cAACP,EAAA,IAAU,CACb,EACAO,EAAA,cAACC,EAAA,KAAKN,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    'bg-transparent',\n    'border',\n    'border-grey-900',\n    'rounded-round',\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-round', '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,gBACA,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,gBAAiB,WAAY,UAAU,CAC5D,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.js

@@ -1,2 +1,2 @@
-import*as p from"@radix-ui/react-radio-group";import*as e from"react";import{Flex as d}from"../flex/Flex.js";import{RadioCard as c}from"./RadioCard.js";const f=({css:r,children:t,size:l,isFullWidth:a,align:o,gap:s="3",justify:m,...n})=>e.createElement(p.Root,{...n},e.createElement(d,{direction:"row",justify:m,gap:s,wrap:"wrap",css:r},e.Children.map(t,i=>e.isValidElement(i)&&(i==null?void 0:i.type)===c?e.cloneElement(i,{size:l,isFullWidth:a,align:o}):i)));export{f as RadioCardGroup};
+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};
 //# 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 type { VariantProps } from '@atom-learning/stitches-react'\nimport * 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, StyledRadioCard } from './RadioCard'\n\ntype RadioCardGroupProps = Override<\n  Pick<React.ComponentProps<typeof Flex>, 'justify' | 'gap' | 'css'> &\n    VariantProps<typeof StyledRadioCard>,\n  React.ComponentProps<typeof RadioGroup.Root>\n>\n\nexport const RadioCardGroup = ({\n  css,\n  children,\n  size,\n  isFullWidth,\n  align,\n  gap = '3',\n  justify,\n  ...rest\n}: RadioCardGroupProps) => (\n  <RadioGroup.Root {...rest}>\n    <Flex direction=\"row\" justify={justify} gap={gap} wrap=\"wrap\" css={css}>\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","css","children","size","isFullWidth","align","gap","justify","rest","React","RadioGroup","Flex","child","RadioCard"],"mappings":"8JAeaA,EAAiB,CAAC,CAC7B,IAAAC,EACA,SAAAC,EACA,KAAAC,EACA,YAAAC,EACA,MAAAC,EACA,IAAAC,EAAM,IACN,QAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAW,KAAX,CAAiB,GAAGF,CAAAA,EACnBC,EAAA,cAACE,EAAA,CAAK,UAAU,MAAM,QAASJ,EAAS,IAAKD,EAAK,KAAK,OAAO,IAAKL,GAChEQ,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 * 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"}

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

@@ -1,2 +1,2 @@
-import*as p 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 v}from"../form/useFieldError.js";import{useFormCustomContext as x}from"../form/useFormCustomContext.js";import{SearchInput as C}from"../search-input/SearchInput.js";const m=({css:l,hideLabel:n,label:d,name:e,validation:r,prompt:s,description:c,appearance:u,...f})=>{const{register:o}=h(),a=x(),{error:t}=v(e),F=r?o(r):o,i=(a==null?void 0:a.appearance)||u;return p.createElement(b,{css:l,description:c,error:t,fieldId:e,hideLabel:n,label:d,prompt:s,required:Boolean(r==null?void 0:r.required),appearance:i},p.createElement(C,{id:e,name:e,ref:F,appearance:i,...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"../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};
 //# 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  css,\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      css={css}\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","css","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,IAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,KACGC,CACL,IAAwB,CACtB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9BC,EAAUC,EACV,EAAA,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,IAAKlB,EACL,YAAaM,EACb,MAAOO,EACP,QAASV,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAAA,OAAAA,EAAY,QAAQ,EACtC,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'\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"}

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

@@ -1,2 +1,2 @@
-import{Search as $,Close as k}from"@atom-learning/icons";import*as t from"react";import{ActionIcon as L}from"../action-icon/ActionIcon.js";import{Icon as E}from"../icon/Icon.js";import{InputText as x,InputBackground as T}from"../input/Input.js";import{styled as f}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as M}from"../../utilities/style/get-icon-size.js";import{useCallbackRef as N}from"../../utilities/hooks/useCallbackRef.js";var O=(e=>(e.SEARCH="SEARCH",e.CLEAR="CLEAR",e))(O||{});const V=f(E,{color:"$grey700",position:"absolute",pointerEvents:"none",variants:{size:{sm:{right:"$2",size:"$1"},md:{right:10,size:20},lg:{right:10,size:20}}}}),Y=f(x,{"&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button":{display:"none"}}),d=t.forwardRef(({size:e="md",appearance:h="standard",css:C,value:o,defaultValue:l="",onValueChange:a,clearText:b="Clear",onChange:c,...v},g)=>{const[u,A]=N(),[R,p]=t.useState(l),[z,m]=t.useState(l?"CLEAR":"SEARCH");t.useEffect(()=>{typeof o>"u"||(p(o),m(o?"CLEAR":"SEARCH"))},[o]);const S=t.useMemo(()=>M(e),[e]);t.useImperativeHandle(g,()=>u.current);const w=()=>{var n,r;const s=u.current;if(!s)return;const i=(n=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:n.set;(r=i==null?void 0:i.call)==null||r.call(i,s,"");const H=new Event("input",{bubbles:!0});s.dispatchEvent(H),s.focus(),a==null||a("")},I=n=>{c==null||c(n);const r=n.target.value;p(r),a==null||a(r),m(r?"CLEAR":"SEARCH")},y=()=>z==="SEARCH"?t.createElement(V,{is:$,size:e,css:{size:e=="sm"?"$1":20,top:"50%",transform:"translateY(-50%)"}}):t.createElement(L,{label:b,theme:"neutral",size:S,css:{position:"absolute",top:"50%",transform:"translateY(-50%)",right:"$1"},onClick:w},t.createElement(E,{is:k}));return t.createElement(T,{css:{position:"relative",width:"auto",...C},size:e,appearance:h},t.createElement(Y,{ref:A,size:e,type:"search",...v,value:R,onChange:I,css:{pr:e==="sm"?"$5":"$6"}}),y())});d.displayName="SearchInput";export{d 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"../../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};
 //# 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 * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Icon } from '~/components/icon'\nimport { Input, InputBackground, InputText } from '~/components/input'\nimport { CSS, styled } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  css?: CSS\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  color: '$grey700',\n  position: 'absolute',\n  pointerEvents: 'none',\n  variants: {\n    size: {\n      sm: {\n        right: '$2',\n        size: '$1'\n      },\n      md: {\n        right: 10,\n        size: 20\n      },\n      lg: {\n        right: 10,\n        size: 20\n      }\n    }\n  }\n})\n\nconst StyledSearchInputText = styled(InputText, {\n  '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button':\n    {\n      display: 'none'\n    }\n})\n\nexport const SearchInput: React.ForwardRefExoticComponent<SearchInputProps> =\n  React.forwardRef(\n    (\n      {\n        size = 'md',\n        appearance = 'standard',\n        css,\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(\n        ref,\n        () => inputElRef.current as HTMLInputElement\n      )\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              css={{\n                size: size == 'sm' ? '$1' : 20,\n                top: '50%',\n                transform: 'translateY(-50%)'\n              }}\n            />\n          )\n\n        return (\n          <ActionIcon\n            label={clearText}\n            theme=\"neutral\"\n            size={iconSize}\n            css={{\n              position: 'absolute',\n              top: '50%',\n              transform: 'translateY(-50%)',\n              right: '$1'\n            }}\n            onClick={handleClear}\n          >\n            <Icon is={Close} />\n          </ActionIcon>\n        )\n      }\n\n      return (\n        <InputBackground\n          css={{ position: 'relative', width: 'auto', ...css }}\n          size={size}\n          appearance={appearance}\n        >\n          <StyledSearchInputText\n            ref={setInputElRef}\n            size={size}\n            type=\"search\"\n            {...remainingProps}\n            value={innerValue}\n            onChange={handleOnChange}\n            css={{ pr: size === 'sm' ? '$5' : '$6' }}\n          />\n          {getIcon()}\n        </InputBackground>\n      )\n    }\n  )\n\nSearchInput.displayName = 'SearchInput'\n"],"names":["INPUT_ICON","StyledIcon","styled","Icon","StyledSearchInputText","InputText","SearchInput","React","size","appearance","css","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","ActionIcon","Close","InputBackground"],"mappings":"2mBAoBA,IAAKA,GACHA,IAAAA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFLA,IAAAA,GAAA,CAAA,GAKL,MAAMC,EAAaC,EAAOC,EAAM,CAC9B,MAAO,WACP,SAAU,WACV,cAAe,OACf,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,KAAM,IACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,CACF,CACF,CACF,CAAC,EAEKC,EAAwBF,EAAOG,EAAW,CAC9C,kGACE,CACE,QAAS,MACX,CACJ,CAAC,EAEYC,EACXC,EAAM,WACJ,CACE,CACE,KAAAC,EAAO,KACP,WAAAC,EAAa,WACb,IAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,cAAAC,EACA,UAAAC,EAAY,QACZ,SAAAC,KACGC,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,oBACJU,EACA,IAAMC,EAAW,OACnB,EAEA,MAAMS,EAAc,IAAM,CAxFhC,IAAAC,EAAAC,EAyFQ,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,EACxC,EAAA,MAAME,EAAM,IAAI,MAAM,QAAS,CAC7B,QAAS,EACX,CAAC,EACDF,EAAQ,cAAcE,CAAG,EACzBF,EAAQ,QACRjB,GAAA,MAAAA,EAAgB,EAClB,CAAA,EAEMoB,EAAkBC,GAA+C,CACrEnB,GAAA,MAAAA,EAAWmB,GAEX,MAAMC,EAAWD,EAAM,OAAO,MAC9BZ,EAAca,CAAQ,EACtBtB,GAAA,MAAAA,EAAgBsB,GAChBX,EAAcW,EAAW,QAAmB,QAAiB,CAC/D,EAEMC,EAAU,IACVb,IAAe,SAEfhB,EAAA,cAACN,EAAA,CACC,GAAIoC,EACJ,KAAM7B,EACN,IAAK,CACH,KAAMA,GAAQ,KAAO,KAAO,GAC5B,IAAK,MACL,UAAW,kBACb,EACF,EAIFD,EAAA,cAAC+B,EAAA,CACC,MAAOxB,EACP,MAAM,UACN,KAAMW,EACN,IAAK,CACH,SAAU,WACV,IAAK,MACL,UAAW,mBACX,MAAO,IACT,EACA,QAASE,GAETpB,EAAA,cAACJ,EAAA,CAAK,GAAIoC,EAAO,CACnB,EAIJ,OACEhC,EAAA,cAACiC,EAAA,CACC,IAAK,CAAE,SAAU,WAAY,MAAO,OAAQ,GAAG9B,CAAI,EACnD,KAAMF,EACN,WAAYC,CAAAA,EAEZF,EAAA,cAACH,EAAA,CACC,IAAKe,EACL,KAAMX,EACN,KAAK,SACJ,GAAGQ,EACJ,MAAOK,EACP,SAAUY,EACV,IAAK,CAAE,GAAIzB,IAAS,KAAO,KAAO,IAAK,CAAA,CACzC,EACC4B,EACH,CAAA,CAEJ,CACF,EAEF9B,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'\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"}

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

@@ -1,2 +1,2 @@
-import{TooltipProvider as c}from"@radix-ui/react-tooltip";import o from"react";import{styled as m}from"../../stitches.js";import{Dismissible as a}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 f}from"./SectionMessageDescription.js";import{SectionMessageDismiss as h}from"./SectionMessageDismiss.js";import{SectionMessageIcon as $}from"./SectionMessageIcon.js";import{SectionMessageContent as u,SectionMessageActions as d}from"./SectionMessageLayout.js";import{SectionMessageTitle as D}from"./SectionMessageTitle.js";const b=m(a,{position:"relative",borderRadius:"$1",display:"flex",minHeight:"$5",p:"$4",border:"1px solid white",variants:{theme:{success:{bg:"$successLight",color:"$successDark"},warning:{bg:"$warningLight",color:"$warningText"},error:{bg:"$dangerLight",color:"$dangerDark"},neutral:{bg:"$grey100",color:"$grey1000"},info:{bg:"$infoLight",color:"$infoDark"}},hasIcon:{true:{pl:"$6"}},hasDismiss:{true:{pr:"$7"}}}}),M=({children:t,...s})=>{const{theme:i,hasIcon:r,hasDismiss:n}=p();return o.createElement(b,{...s,theme:i,hasIcon:r,hasDismiss:n},o.createElement(g,{gap:3,justify:"space-between",css:{flexGrow:1}},t))},e=({theme:t="info",...s})=>o.createElement(c,null,o.createElement(l,{theme:t},o.createElement(M,{...s})));e.Title=D,e.Description=f,e.Icon=$,e.Dismiss=h,e.Content=u,e.Actions=d;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{Flex as g}from"../flex/Flex.js";import{SectionMessageProvider as l,useSectionMessageContext as p}from"./SectionMessageContext.js";import{SectionMessageDescription as f}from"./SectionMessageDescription.js";import{SectionMessageDismiss as h}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","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=f,e.Icon=d,e.Dismiss=h,e.Content=u,e.Actions=x;export{e as SectionMessage};
 //# sourceMappingURL=SectionMessage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SectionMessage.js","sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Dismissible } from '../dismissible'\nimport { Flex } from '../flex'\nimport {\n  SectionMessageProvider,\n  useSectionMessageContext\n} from './SectionMessageContext'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n  SectionMessageActions,\n  SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n  position: 'relative',\n  borderRadius: '$1',\n  display: 'flex',\n  minHeight: '$5',\n  p: '$4',\n  border: '1px solid white',\n  variants: {\n    theme: {\n      success: {\n        bg: '$successLight',\n        color: '$successDark'\n      },\n      warning: {\n        bg: '$warningLight',\n        color: '$warningText'\n      },\n      error: {\n        bg: '$dangerLight',\n        color: '$dangerDark'\n      },\n      neutral: {\n        bg: '$grey100',\n        color: '$grey1000'\n      },\n      info: {\n        bg: '$infoLight',\n        color: '$infoDark'\n      }\n    },\n    hasIcon: {\n      true: {\n        pl: '$6'\n      }\n    },\n    hasDismiss: {\n      true: {\n        pr: '$7'\n      }\n    }\n  }\n})\n\nconst SectionMessageRoot = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledSectionMessage>): JSX.Element => {\n  const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n  return (\n    <StyledSectionMessage\n      {...rest}\n      theme={theme}\n      hasIcon={hasIcon}\n      hasDismiss={hasDismiss}\n    >\n      <Flex gap={3} justify=\"space-between\" css={{ flexGrow: 1 }}>\n        {children}\n      </Flex>\n    </StyledSectionMessage>\n  )\n}\n\nexport type SectionMessageTheme =\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral'\n  | 'info'\n\nexport interface SectionMessageProps\n  extends React.ComponentProps<typeof SectionMessageRoot> {\n  theme?: SectionMessageTheme\n}\n\nexport const SectionMessage = ({\n  theme = 'info',\n  ...rest\n}: SectionMessageProps): JSX.Element => {\n  return (\n    <TooltipProvider>\n      <SectionMessageProvider theme={theme}>\n        <SectionMessageRoot {...rest} />\n      </SectionMessageProvider>\n    </TooltipProvider>\n  )\n}\n\nSectionMessage.Title = SectionMessageTitle\nSectionMessage.Description = SectionMessageDescription\nSectionMessage.Icon = SectionMessageIcon\nSectionMessage.Dismiss = SectionMessageDismiss\nSectionMessage.Content = SectionMessageContent\nSectionMessage.Actions = SectionMessageActions\n"],"names":["StyledSectionMessage","styled","Dismissible","SectionMessageRoot","children","rest","theme","hasIcon","hasDismiss","useSectionMessageContext","React","Flex","SectionMessage","TooltipProvider","SectionMessageProvider","SectionMessageTitle","SectionMessageDescription","SectionMessageIcon","SectionMessageDismiss","SectionMessageContent","SectionMessageActions"],"mappings":"gqBAoBA,MAAMA,EAAuBC,EAAOC,EAAa,CAC/C,SAAU,WACV,aAAc,KACd,QAAS,OACT,UAAW,KACX,EAAG,KACH,OAAQ,kBACR,SAAU,CACR,MAAO,CACL,QAAS,CACP,GAAI,gBACJ,MAAO,cACT,EACA,QAAS,CACP,GAAI,gBACJ,MAAO,cACT,EACA,MAAO,CACL,GAAI,eACJ,MAAO,aACT,EACA,QAAS,CACP,GAAI,WACJ,MAAO,WACT,EACA,KAAM,CACJ,GAAI,aACJ,MAAO,WACT,CACF,EACA,QAAS,CACP,KAAM,CACJ,GAAI,IACN,CACF,EACA,WAAY,CACV,KAAM,CACJ,GAAI,IACN,CACF,CACF,CACF,CAAC,EAEKC,EAAqB,CAAC,CAC1B,SAAAC,KACGC,CACL,IAAsE,CACpE,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,WAAAC,CAAW,EAAIC,EAAyB,EAEhE,OACEC,EAAA,cAACV,EAAA,CACE,GAAGK,EACJ,MAAOC,EACP,QAASC,EACT,WAAYC,CAEZE,EAAAA,EAAA,cAACC,EAAA,CAAK,IAAK,EAAG,QAAQ,gBAAgB,IAAK,CAAE,SAAU,CAAE,CACtDP,EAAAA,CACH,CACF,CAEJ,EAcaQ,EAAiB,CAAC,CAC7B,MAAAN,EAAQ,UACLD,CACL,IAEIK,EAAA,cAACG,EAAA,KACCH,EAAA,cAACI,EAAA,CAAuB,MAAOR,GAC7BI,EAAA,cAACP,EAAA,CAAoB,GAAGE,CAAAA,CAAM,CAChC,CACF,EAIJO,EAAe,MAAQG,EACvBH,EAAe,YAAcI,EAC7BJ,EAAe,KAAOK,EACtBL,EAAe,QAAUM,EACzBN,EAAe,QAAUO,EACzBP,EAAe,QAAUQ"}
+{"version":3,"file":"SectionMessage.js","sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Dismissible } from '../dismissible'\nimport { Flex } from '../flex'\nimport {\n  SectionMessageProvider,\n  useSectionMessageContext\n} from './SectionMessageContext'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n  SectionMessageActions,\n  SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n  base: [\n    'relative',\n    'rounded-md',\n    'flex',\n    'min-h-12',\n    'p-4',\n    'border',\n    'border-white'\n  ],\n  variants: {\n    theme: {\n      success: ['bg-success-light', 'text-success-dark'],\n      warning: ['bg-warning-light', 'text-warning-text'],\n      error: ['bg-danger-light', 'text-danger-dark'],\n      neutral: ['bg-grey-100', 'text-grey-1000'],\n      info: ['bg-info-light', 'text-info-dark']\n    },\n    hasIcon: {\n      true: ['pl-10']\n    },\n    hasDismiss: {\n      true: ['pr-12']\n    }\n  }\n})\n\nconst SectionMessageRoot = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledSectionMessage>): JSX.Element => {\n  const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n  return (\n    <StyledSectionMessage\n      {...rest}\n      theme={theme}\n      hasIcon={hasIcon}\n      hasDismiss={hasDismiss}\n    >\n      <Flex gap={3} justify=\"space-between\" className=\"grow\">\n        {children}\n      </Flex>\n    </StyledSectionMessage>\n  )\n}\n\nexport type SectionMessageTheme =\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral'\n  | 'info'\n\nexport interface SectionMessageProps\n  extends React.ComponentProps<typeof SectionMessageRoot> {\n  theme?: SectionMessageTheme\n}\n\nexport const SectionMessage = ({\n  theme = 'info',\n  ...rest\n}: SectionMessageProps): JSX.Element => {\n  return (\n    <TooltipProvider>\n      <SectionMessageProvider theme={theme}>\n        <SectionMessageRoot {...rest} />\n      </SectionMessageProvider>\n    </TooltipProvider>\n  )\n}\n\nSectionMessage.Title = SectionMessageTitle\nSectionMessage.Description = SectionMessageDescription\nSectionMessage.Icon = SectionMessageIcon\nSectionMessage.Dismiss = SectionMessageDismiss\nSectionMessage.Content = SectionMessageContent\nSectionMessage.Actions = SectionMessageActions\n"],"names":["StyledSectionMessage","styled","Dismissible","SectionMessageRoot","children","rest","theme","hasIcon","hasDismiss","useSectionMessageContext","React","Flex","SectionMessage","TooltipProvider","SectionMessageProvider","SectionMessageTitle","SectionMessageDescription","SectionMessageIcon","SectionMessageDismiss","SectionMessageContent","SectionMessageActions"],"mappings":"8pBAoBA,MAAMA,EAAuBC,EAAOC,EAAa,CAC/C,KAAM,CACJ,WACA,aACA,OACA,WACA,MACA,SACA,cACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CAAC,mBAAoB,mBAAmB,EACjD,QAAS,CAAC,mBAAoB,mBAAmB,EACjD,MAAO,CAAC,kBAAmB,kBAAkB,EAC7C,QAAS,CAAC,cAAe,gBAAgB,EACzC,KAAM,CAAC,gBAAiB,gBAAgB,CAC1C,EACA,QAAS,CACP,KAAM,CAAC,OAAO,CAChB,EACA,WAAY,CACV,KAAM,CAAC,OAAO,CAChB,CACF,CACF,CAAC,EAEKC,EAAqB,CAAC,CAC1B,SAAAC,EACA,GAAGC,CACL,IAAsE,CACpE,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,WAAAC,CAAW,EAAIC,EAAyB,EAEhE,OACEC,EAAA,cAACV,EAAA,CACE,GAAGK,EACJ,MAAOC,EACP,QAASC,EACT,WAAYC,CAAAA,EAEZE,EAAA,cAACC,EAAA,CAAK,IAAK,EAAG,QAAQ,gBAAgB,UAAU,MAAA,EAC7CP,CACH,CACF,CAEJ,EAcaQ,EAAiB,CAAC,CAC7B,MAAAN,EAAQ,OACR,GAAGD,CACL,IAEIK,EAAA,cAACG,EAAA,KACCH,EAAA,cAACI,EAAA,CAAuB,MAAOR,CAC7BI,EAAAA,EAAA,cAACP,EAAA,CAAoB,GAAGE,CAAM,CAAA,CAChC,CACF,EAIJO,EAAe,MAAQG,EACvBH,EAAe,YAAcI,EAC7BJ,EAAe,KAAOK,EACtBL,EAAe,QAAUM,EACzBN,EAAe,QAAUO,EACzBP,EAAe,QAAUQ"}

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

@@ -1,2 +1,2 @@
-import s from"react";import{Text as t}from"../text/Text.js";const r=({css:e,...o})=>s.createElement(t,{css:{color:"$grey900",...e},size:"sm",...o});export{r as SectionMessageDescription};
+import m from"clsx";import o from"react";import{Text as r}from"../text/Text.js";const s=({className:e,...t})=>o.createElement(r,{size:"sm",...t,className:m("text-grey-900",e)});export{s as SectionMessageDescription};
 //# sourceMappingURL=SectionMessageDescription.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageDescription.js","sources":["../../../src/components/section-message/SectionMessageDescription.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '../text'\n\nexport const SectionMessageDescription = ({\n  css,\n  ...rest\n}: React.ComponentProps<typeof Text>): JSX.Element => (\n  <Text\n    css={{\n      color: '$grey900',\n      ...css\n    }}\n    size=\"sm\"\n    {...rest}\n  />\n)\n"],"names":["SectionMessageDescription","css","rest","React","Text"],"mappings":"4DAIa,MAAAA,EAA4B,CAAC,CACxC,IAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CACC,IAAK,CACH,MAAO,WACP,GAAGH,CACL,EACA,KAAK,KACJ,GAAGC,CACN,CAAA"}
+{"version":3,"file":"SectionMessageDescription.js","sources":["../../../src/components/section-message/SectionMessageDescription.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Text } from '../text'\n\nexport const SectionMessageDescription = ({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Text>): JSX.Element => (\n  <Text size=\"sm\" {...rest} className={clsx('text-grey-900', className)} />\n)\n"],"names":["SectionMessageDescription","className","rest","React","Text","clsx"],"mappings":"gFAKO,MAAMA,EAA4B,CAAC,CACxC,UAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAM,GAAGF,EAAM,UAAWG,EAAK,gBAAiBJ,CAAS,CAAG,CAAA"}

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

@@ -1,2 +1,2 @@
-import{Close as m}from"@atom-learning/icons";import s,{useEffect as r}from"react";import{ActionIcon as a}from"../action-icon/ActionIcon.js";import{Dismissible as n}from"../dismissible/index.js";import{Icon as c}from"../icon/Icon.js";import{useSectionMessageContext as l}from"./SectionMessageContext.js";const p=({label:t="Dismiss",css:o,...i})=>{const{setHasDismiss:e}=l();return r(()=>(e(!0),()=>e(!1)),[e]),s.createElement(n.Trigger,{asChild:!0},s.createElement(a,{label:t,css:{m:"auto",position:"absolute",top:"$2",right:"$2",...o},size:"sm",appearance:"simple",theme:"neutral",...i},s.createElement(c,{is:m})))};export{p as SectionMessageDismiss};
+import{Close as i}from"@atom-learning/icons";import r from"clsx";import s,{useEffect as a}from"react";import{ActionIcon as l}from"../action-icon/ActionIcon.js";import{Dismissible as c}from"../dismissible/index.js";import{Icon as n}from"../icon/Icon.js";import{useSectionMessageContext as p}from"./SectionMessageContext.js";const f=({label:t="Dismiss",className:m,...o})=>{const{setHasDismiss:e}=p();return a(()=>(e(!0),()=>e(!1)),[e]),s.createElement(c.Trigger,{asChild:!0},s.createElement(l,{label:t,size:"sm",appearance:"simple",theme:"neutral",...o,className:r("m-auto","absolute","top-2","right-2",m)},s.createElement(n,{is:i})))};export{f as SectionMessageDismiss};
 //# sourceMappingURL=SectionMessageDismiss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageDismiss.js","sources":["../../../src/components/section-message/SectionMessageDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport React, { useEffect } from 'react'\n\nimport { ActionIcon } from '../action-icon'\nimport { Dismissible } from '../dismissible'\nimport { Icon } from '../icon'\nimport { useSectionMessageContext } from './SectionMessageContext'\n\nexport const SectionMessageDismiss = ({\n  label = 'Dismiss',\n  css,\n  ...rest\n}: React.ComponentProps<typeof ActionIcon>): JSX.Element => {\n  const { setHasDismiss } = useSectionMessageContext()\n\n  useEffect(() => {\n    setHasDismiss(true)\n    return () => setHasDismiss(false)\n  }, [setHasDismiss])\n\n  return (\n    <Dismissible.Trigger asChild>\n      <ActionIcon\n        label={label}\n        css={{\n          m: 'auto',\n          position: 'absolute',\n          top: '$2',\n          right: '$2',\n          ...css\n        }}\n        size=\"sm\"\n        appearance=\"simple\"\n        theme=\"neutral\"\n        {...rest}\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    </Dismissible.Trigger>\n  )\n}\n"],"names":["SectionMessageDismiss","label","css","rest","setHasDismiss","useSectionMessageContext","useEffect","React","Dismissible","ActionIcon","Icon","Close"],"mappings":"+SAQa,MAAAA,EAAwB,CAAC,CACpC,MAAAC,EAAQ,UACR,IAAAC,KACGC,CACL,IAA4D,CAC1D,KAAM,CAAE,cAAAC,CAAc,EAAIC,EAAAA,EAE1B,OAAAC,EAAU,KACRF,EAAc,EAAI,EACX,IAAMA,EAAc,EAAK,GAC/B,CAACA,CAAa,CAAC,EAGhBG,EAAA,cAACC,EAAY,QAAZ,CAAoB,QAAO,EAC1BD,EAAAA,EAAA,cAACE,EAAA,CACC,MAAOR,EACP,IAAK,CACH,EAAG,OACH,SAAU,WACV,IAAK,KACL,MAAO,KACP,GAAGC,CACL,EACA,KAAK,KACL,WAAW,SACX,MAAM,UACL,GAAGC,CAAAA,EAEJI,EAAA,cAACG,EAAA,CAAK,GAAIC,CAAAA,CAAO,CACnB,CACF,CAEJ"}
+{"version":3,"file":"SectionMessageDismiss.js","sources":["../../../src/components/section-message/SectionMessageDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport React, { useEffect } from 'react'\n\nimport { ActionIcon } from '../action-icon'\nimport { Dismissible } from '../dismissible'\nimport { Icon } from '../icon'\nimport { useSectionMessageContext } from './SectionMessageContext'\n\nexport const SectionMessageDismiss = ({\n  label = 'Dismiss',\n  className,\n  ...rest\n}: React.ComponentProps<typeof ActionIcon>): JSX.Element => {\n  const { setHasDismiss } = useSectionMessageContext()\n\n  useEffect(() => {\n    setHasDismiss(true)\n    return () => setHasDismiss(false)\n  }, [setHasDismiss])\n\n  return (\n    <Dismissible.Trigger asChild>\n      <ActionIcon\n        label={label}\n        size=\"sm\"\n        appearance=\"simple\"\n        theme=\"neutral\"\n        {...rest}\n        className={clsx('m-auto', 'absolute', 'top-2', 'right-2', className)}\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    </Dismissible.Trigger>\n  )\n}\n"],"names":["SectionMessageDismiss","label","className","rest","setHasDismiss","useSectionMessageContext","useEffect","React","Dismissible","ActionIcon","clsx","Icon","Close"],"mappings":"mUASa,MAAAA,EAAwB,CAAC,CACpC,MAAAC,EAAQ,UACR,UAAAC,EACA,GAAGC,CACL,IAA4D,CAC1D,KAAM,CAAE,cAAAC,CAAc,EAAIC,EAAyB,EAEnD,OAAAC,EAAU,KACRF,EAAc,EAAI,EACX,IAAMA,EAAc,EAAK,GAC/B,CAACA,CAAa,CAAC,EAGhBG,EAAA,cAACC,EAAY,QAAZ,CAAoB,QAAO,IAC1BD,EAAA,cAACE,EAAA,CACC,MAAOR,EACP,KAAK,KACL,WAAW,SACX,MAAM,UACL,GAAGE,EACJ,UAAWO,EAAK,SAAU,WAAY,QAAS,UAAWR,CAAS,CAAA,EAEnEK,EAAA,cAACI,EAAA,CAAK,GAAIC,CAAAA,CAAO,CACnB,CACF,CAEJ"}

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

@@ -1,2 +1,2 @@
-import{OkCircle as c,Danger as i,Error as m,Info as e}from"@atom-learning/icons";import a,{useEffect as f}from"react";import{Icon as l}from"../icon/Icon.js";import{useSectionMessageContext as u}from"./SectionMessageContext.js";const p={success:c,warning:i,error:m,neutral:e,info:e},g=({css:r,is:t,...s})=>{const{theme:n,setHasIcon:o}=u();return f(()=>(o(!0),()=>o(!1)),[o]),a.createElement(l,{css:{m:"auto",position:"absolute",left:"$4",top:"$4",color:"currentColor",...r},is:t||p[n],size:"sm",...s})};export{g as SectionMessageIcon};
+import{OkCircle as c,Danger as m,Error as a,Info as t}from"@atom-learning/icons";import i from"clsx";import f,{useEffect as u}from"react";import{Icon as l}from"../icon/Icon.js";import{useSectionMessageContext as p}from"./SectionMessageContext.js";const I={success:c,warning:m,error:a,neutral:t,info:t},g=({className:o,is:r,...s})=>{const{theme:n,setHasIcon:e}=p();return u(()=>(e(!0),()=>e(!1)),[e]),f.createElement(l,{is:r||I[n],size:"sm",...s,className:i("m-auto","absolute","left-4","top-4","text-current",o)})};export{g as SectionMessageIcon};
 //# sourceMappingURL=SectionMessageIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageIcon.js","sources":["../../../src/components/section-message/SectionMessageIcon.tsx"],"sourcesContent":["import { Danger, Error, Info, OkCircle } from '@atom-learning/icons'\nimport React, { useEffect } from 'react'\n\nimport { Icon } from '../icon'\nimport { useSectionMessageContext } from './SectionMessageContext'\n\nconst themeIcons = {\n  success: OkCircle,\n  warning: Danger,\n  error: Error,\n  neutral: Info,\n  info: Info\n}\n\ntype SectionMessageIconProps = Partial<React.ComponentProps<typeof Icon>>\n\nexport const SectionMessageIcon = ({\n  css,\n  is,\n  ...rest\n}: SectionMessageIconProps): JSX.Element => {\n  const { theme, setHasIcon } = useSectionMessageContext()\n\n  useEffect(() => {\n    setHasIcon(true)\n    return () => setHasIcon(false)\n  }, [setHasIcon])\n\n  return (\n    <Icon\n      css={{\n        m: 'auto',\n        position: 'absolute',\n        left: '$4',\n        top: '$4',\n        color: 'currentColor',\n        ...css\n      }}\n      is={is || themeIcons[theme]}\n      size=\"sm\"\n      {...rest}\n    />\n  )\n}\n"],"names":["themeIcons","OkCircle","Danger","Error","Info","SectionMessageIcon","css","is","rest","theme","setHasIcon","useSectionMessageContext","useEffect","React","Icon"],"mappings":"mOAMA,MAAMA,EAAa,CACjB,QAASC,EACT,QAASC,EACT,MAAOC,EACP,QAASC,EACT,KAAMA,CACR,EAIaC,EAAqB,CAAC,CACjC,IAAAC,EACA,GAAAC,KACGC,CACL,IAA4C,CAC1C,KAAM,CAAE,MAAAC,EAAO,WAAAC,CAAW,EAAIC,IAE9B,OAAAC,EAAU,KACRF,EAAW,EAAI,EACR,IAAMA,EAAW,EAAK,GAC5B,CAACA,CAAU,CAAC,EAGbG,EAAA,cAACC,EAAA,CACC,IAAK,CACH,EAAG,OACH,SAAU,WACV,KAAM,KACN,IAAK,KACL,MAAO,eACP,GAAGR,CACL,EACA,GAAIC,GAAMP,EAAWS,GACrB,KAAK,KACJ,GAAGD,CAAAA,CACN,CAEJ"}
+{"version":3,"file":"SectionMessageIcon.js","sources":["../../../src/components/section-message/SectionMessageIcon.tsx"],"sourcesContent":["import { Danger, Error, Info, OkCircle } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport React, { useEffect } from 'react'\n\nimport { Icon } from '../icon'\nimport { useSectionMessageContext } from './SectionMessageContext'\n\nconst themeIcons = {\n  success: OkCircle,\n  warning: Danger,\n  error: Error,\n  neutral: Info,\n  info: Info\n}\n\ntype SectionMessageIconProps = Partial<React.ComponentProps<typeof Icon>>\n\nexport const SectionMessageIcon = ({\n  className,\n  is,\n  ...rest\n}: SectionMessageIconProps): JSX.Element => {\n  const { theme, setHasIcon } = useSectionMessageContext()\n\n  useEffect(() => {\n    setHasIcon(true)\n    return () => setHasIcon(false)\n  }, [setHasIcon])\n\n  return (\n    <Icon\n      is={is || themeIcons[theme]}\n      size=\"sm\"\n      {...rest}\n      className={clsx(\n        'm-auto',\n        'absolute',\n        'left-4',\n        'top-4',\n        'text-current',\n        className\n      )}\n    />\n  )\n}\n"],"names":["themeIcons","OkCircle","Danger","Error","Info","SectionMessageIcon","className","is","rest","theme","setHasIcon","useSectionMessageContext","useEffect","React","Icon","clsx"],"mappings":"uPAOA,MAAMA,EAAa,CACjB,QAASC,EACT,QAASC,EACT,MAAOC,EACP,QAASC,EACT,KAAMA,CACR,EAIaC,EAAqB,CAAC,CACjC,UAAAC,EACA,GAAAC,EACA,GAAGC,CACL,IAA4C,CAC1C,KAAM,CAAE,MAAAC,EAAO,WAAAC,CAAW,EAAIC,EAAyB,EAEvD,OAAAC,EAAU,KACRF,EAAW,EAAI,EACR,IAAMA,EAAW,EAAK,GAC5B,CAACA,CAAU,CAAC,EAGbG,EAAA,cAACC,EAAA,CACC,GAAIP,GAAMP,EAAWS,CAAK,EAC1B,KAAK,KACJ,GAAGD,EACJ,UAAWO,EACT,SACA,WACA,SACA,QACA,eACAT,CACF,CAAA,CACF,CAEJ"}

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

@@ -1,2 +1,2 @@
-import o from"react";import{Box as s}from"../box/Box.js";import{Flex as r}from"../flex/Flex.js";const a=({css:e,...t})=>o.createElement(s,{css:{maxWidth:"100%",flexShrink:0,paddingTop:"$0",["& > *:not(:last-child)"]:{mb:"$2"},...e},...t}),n=({css:e,...t})=>o.createElement(s,{css:{maxWidth:"100%",flexShrink:0,...e}},o.createElement(r,{wrap:"wrap",gap:3,...t}));export{n as SectionMessageActions,a as SectionMessageContent};
+import s from"clsx";import t from"react";import{Flex as m}from"../flex/Flex.js";const l=({className:e,...a})=>t.createElement("div",{...a,className:s("max-w-full","shrink-0","pt-0.5","*:not-last:mb-2",e)}),r=({className:e,...a})=>t.createElement("div",{className:s("max-w-full","shrink-0",e)},t.createElement(m,{wrap:"wrap",gap:3,...a}));export{r as SectionMessageActions,l as SectionMessageContent};
 //# sourceMappingURL=SectionMessageLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageLayout.js","sources":["../../../src/components/section-message/SectionMessageLayout.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Box } from '../box'\nimport { Flex } from '../flex'\n\nexport const SectionMessageContent = ({\n  css,\n  ...rest\n}: React.ComponentProps<typeof Box>): JSX.Element => (\n  <Box\n    css={{\n      maxWidth: '100%',\n      flexShrink: 0,\n      paddingTop: '$0',\n      ['& > *:not(:last-child)']: { mb: '$2' },\n      ...css\n    }}\n    {...rest}\n  />\n)\n\nexport const SectionMessageActions = ({\n  css,\n  ...rest\n}: React.ComponentProps<typeof Flex>): JSX.Element => (\n  <Box css={{ maxWidth: '100%', flexShrink: 0, ...css }}>\n    <Flex wrap=\"wrap\" gap={3} {...rest} />\n  </Box>\n)\n"],"names":["SectionMessageContent","css","rest","React","Box","SectionMessageActions","Flex"],"mappings":"gGAKa,MAAAA,EAAwB,CAAC,CACpC,IAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CACC,IAAK,CACH,SAAU,OACV,WAAY,EACZ,WAAY,KACZ,CAAC,0BAA2B,CAAE,GAAI,IAAK,EACvC,GAAGH,CACL,EACC,GAAGC,CACN,CAAA,EAGWG,EAAwB,CAAC,CACpC,IAAAJ,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAI,IAAK,CAAE,SAAU,OAAQ,WAAY,EAAG,GAAGH,CAAI,GAClDE,EAAA,cAACG,EAAA,CAAK,KAAK,OAAO,IAAK,EAAI,GAAGJ,EAAM,CACtC"}
+{"version":3,"file":"SectionMessageLayout.js","sources":["../../../src/components/section-message/SectionMessageLayout.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Flex } from '../flex'\n\nexport const SectionMessageContent = ({\n  className,\n  ...rest\n}: React.HTMLAttributes<HTMLDivElement> & {\n  className?: string\n}): JSX.Element => (\n  <div\n    {...rest}\n    className={clsx(\n      'max-w-full',\n      'shrink-0',\n      'pt-0.5',\n      '*:not-last:mb-2',\n      className\n    )}\n  />\n)\n\nexport const SectionMessageActions = ({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Flex> & { className?: string }): JSX.Element => (\n  <div className={clsx('max-w-full', 'shrink-0', className)}>\n    <Flex wrap=\"wrap\" gap={3} {...rest} />\n  </div>\n)\n"],"names":["SectionMessageContent","className","rest","React","clsx","SectionMessageActions","Flex"],"mappings":"gFAKa,MAAAA,EAAwB,CAAC,CACpC,UAAAC,EACA,GAAGC,CACL,IAGEC,EAAA,cAAC,MAAA,CACE,GAAGD,EACJ,UAAWE,EACT,aACA,WACA,SACA,kBACAH,CACF,CAAA,CACF,EAGWI,EAAwB,CAAC,CACpC,UAAAJ,EACA,GAAGC,CACL,IACEC,EAAA,cAAC,MAAA,CAAI,UAAWC,EAAK,aAAc,WAAYH,CAAS,CAAA,EACtDE,EAAA,cAACG,EAAA,CAAK,KAAK,OAAO,IAAK,EAAI,GAAGJ,CAAAA,CAAM,CACtC"}

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

@@ -1,2 +1,2 @@
-import*as e from"react";import{Badge as r}from"../badge/Badge.js";import{SegmentedControlContext as s}from"./SegmentedControlContext.js";const m={sm:"xs",md:"xs",lg:"sm"},c=({css:o,...t})=>{const{size:n}=e.useContext(s);return e.createElement(r,{...t,css:{border:"none",...o,fontWeight:"normal"},size:m[n]})};export{c as SegmentedControlBadge};
+import r from"clsx";import*as e from"react";import{Badge as n}from"../badge/Badge.js";import{SegmentedControlContext as s}from"./SegmentedControlContext.js";const a={sm:"xs",md:"xs",lg:"sm"},l=({className:o,...t})=>{const{size:m}=e.useContext(s);return e.createElement(n,{...t,size:a[m],className:r("border-none",o,"font-normal")})};export{l as SegmentedControlBadge};
 //# sourceMappingURL=SegmentedControlBadge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlBadge.js","sources":["../../../src/components/segmented-control/SegmentedControlBadge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Badge } from '../badge'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst badgeSizeMap = {\n  sm: 'xs',\n  md: 'xs',\n  lg: 'sm'\n}\n\nexport const SegmentedControlBadge = ({\n  css,\n  ...props\n}: Omit<React.ComponentProps<typeof Badge>, 'size'>): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return (\n    <Badge\n      {...props}\n      css={{ border: 'none', ...css, fontWeight: 'normal' }}\n      size={badgeSizeMap[size as string]}\n    />\n  )\n}\n"],"names":["badgeSizeMap","SegmentedControlBadge","css","props","size","React","SegmentedControlContext","Badge"],"mappings":"yIAKA,MAAMA,EAAe,CACnB,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAwB,CAAC,CACpC,IAAAC,KACGC,CACL,IAAqE,CACnE,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAuB,EAEzD,OACED,EAAA,cAACE,EAAA,CACE,GAAGJ,EACJ,IAAK,CAAE,OAAQ,OAAQ,GAAGD,EAAK,WAAY,QAAS,EACpD,KAAMF,EAAaI,EAAAA,CACrB,CAEJ"}
+{"version":3,"file":"SegmentedControlBadge.js","sources":["../../../src/components/segmented-control/SegmentedControlBadge.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Badge } from '../badge'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst badgeSizeMap = {\n  sm: 'xs',\n  md: 'xs',\n  lg: 'sm'\n}\n\nexport const SegmentedControlBadge = ({\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof Badge>, 'size'>): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return (\n    <Badge\n      {...props}\n      size={badgeSizeMap[size as string]}\n      className={clsx('border-none', className, 'font-normal')}\n    />\n  )\n}\n"],"names":["badgeSizeMap","SegmentedControlBadge","className","props","size","React","SegmentedControlContext","Badge","clsx"],"mappings":"6JAMA,MAAMA,EAAe,CACnB,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAwB,CAAC,CACpC,UAAAC,EACA,GAAGC,CACL,IAAqE,CACnE,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAuB,EAEzD,OACED,EAAA,cAACE,EAAA,CACE,GAAGJ,EACJ,KAAMH,EAAaI,CAAc,EACjC,UAAWI,EAAK,cAAeN,EAAW,aAAa,CAAA,CACzD,CAEJ"}

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

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as n}from"../../stitches.js";import{Text as r}from"../text/Text.js";import{SegmentedControlContext as m}from"./SegmentedControlContext.js";const i=n(r,{fontFamily:"$body",color:"$textSubtle",fontWeight:400,variants:{size:{sm:{fontSize:"$xs"},md:{fontSize:"$sm"},lg:{fontSize:"$md"}}}}),s=e=>{const{size:o}=t.useContext(m);return t.createElement(i,{...e,size:o})};export{s as SegmentedControlDescription};
+import*as t from"react";import{styled as r}from"../../styled.js";import{Text as m}from"../text/Text.js";import{SegmentedControlContext as n}from"./SegmentedControlContext.js";const s=r(m,{base:["font-body","text-text-subtle","font-normal"],variants:{size:{sm:["text-xs"],md:["text-sm"],lg:["text-md"]}}}),i=e=>{const{size:o}=t.useContext(n);return t.createElement(s,{...e,size:o})};export{i as SegmentedControlDescription};
 //# sourceMappingURL=SegmentedControlDescription.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlDescription.js","sources":["../../../src/components/segmented-control/SegmentedControlDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Text } from '../text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledText = styled(Text, {\n  fontFamily: '$body',\n  color: '$textSubtle',\n  fontWeight: 400,\n  variants: {\n    size: {\n      sm: {\n        fontSize: '$xs'\n      },\n      md: {\n        fontSize: '$sm'\n      },\n      lg: {\n        fontSize: '$md'\n      }\n    }\n  }\n})\n\nexport const SegmentedControlDescription = (\n  props: Omit<React.ComponentProps<typeof StyledText>, 'size'>\n): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <StyledText {...props} size={size} />\n}\n"],"names":["StyledText","styled","Text","SegmentedControlDescription","props","size","React","SegmentedControlContext"],"mappings":"iLAMA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,WAAY,QACZ,MAAO,cACP,WAAY,IACZ,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,KACZ,EACA,GAAI,CACF,SAAU,KACZ,EACA,GAAI,CACF,SAAU,KACZ,CACF,CACF,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAuB,EAEzD,OAAOD,EAAA,cAACN,EAAA,CAAY,GAAGI,EAAO,KAAMC,EAAM,CAC5C"}
+{"version":3,"file":"SegmentedControlDescription.js","sources":["../../../src/components/segmented-control/SegmentedControlDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledText = styled(Text, {\n  base: ['font-body', 'text-text-subtle', 'font-normal'],\n  variants: {\n    size: {\n      sm: ['text-xs'],\n      md: ['text-sm'],\n      lg: ['text-md']\n    }\n  }\n})\n\nexport const SegmentedControlDescription = (\n  props: Omit<React.ComponentProps<typeof StyledText>, 'size'>\n): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <StyledText {...props} size={size} />\n}\n"],"names":["StyledText","styled","Text","SegmentedControlDescription","props","size","React","SegmentedControlContext"],"mappings":"+KAOA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,KAAM,CAAC,YAAa,mBAAoB,aAAa,EACrD,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,CAChB,CACF,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAuB,EAEzD,OAAOD,EAAA,cAACN,EAAA,CAAY,GAAGI,EAAO,KAAMC,EAAM,CAC5C"}

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

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as r}from"../../stitches.js";import{Text as n}from"../text/Text.js";import{SegmentedControlContext as m}from"./SegmentedControlContext.js";const i=r(n,{fontFamily:"$body",color:"$textRegular",variants:{size:{sm:{fontSize:"$sm"},md:{fontSize:"$md"},lg:{fontSize:"$lg"}}}}),s=e=>{const{size:o}=t.useContext(m);return t.createElement(i,{...e,size:o})};export{s as SegmentedControlHeading};
+import*as t from"react";import{styled as r}from"../../styled.js";import{Text as m}from"../text/Text.js";import{SegmentedControlContext as n}from"./SegmentedControlContext.js";const s=r(m,{base:["font-body","text-text-regular"],variants:{size:{sm:["text-sm"],md:["text-md"],lg:["text-lg"]}}}),i=e=>{const{size:o}=t.useContext(n);return t.createElement(s,{...e,size:o})};export{i as SegmentedControlHeading};
 //# sourceMappingURL=SegmentedControlHeading.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlHeading.js","sources":["../../../src/components/segmented-control/SegmentedControlHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Text } from '../text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledHeading = styled(Text, {\n  fontFamily: '$body',\n  color: '$textRegular',\n  variants: {\n    size: {\n      sm: {\n        fontSize: '$sm'\n      },\n      md: {\n        fontSize: '$md'\n      },\n      lg: {\n        fontSize: '$lg'\n      }\n    }\n  }\n})\n\nexport const SegmentedControlHeading = (\n  props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <StyledHeading {...props} size={size} />\n}\n"],"names":["StyledHeading","styled","Text","SegmentedControlHeading","props","size","React","SegmentedControlContext"],"mappings":"iLAMA,MAAMA,EAAgBC,EAAOC,EAAM,CACjC,WAAY,QACZ,MAAO,eACP,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,KACZ,EACA,GAAI,CACF,SAAU,KACZ,EACA,GAAI,CACF,SAAU,KACZ,CACF,CACF,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAuB,EAEzD,OAAOD,EAAA,cAACN,EAAA,CAAe,GAAGI,EAAO,KAAMC,EAAM,CAC/C"}
+{"version":3,"file":"SegmentedControlHeading.js","sources":["../../../src/components/segmented-control/SegmentedControlHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledHeading = styled(Text, {\n  base: ['font-body', 'text-text-regular'],\n  variants: {\n    size: {\n      sm: ['text-sm'],\n      md: ['text-md'],\n      lg: ['text-lg']\n    }\n  }\n})\n\nexport const SegmentedControlHeading = (\n  props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <StyledHeading {...props} size={size} />\n}\n"],"names":["StyledHeading","styled","Text","SegmentedControlHeading","props","size","React","SegmentedControlContext"],"mappings":"+KAOA,MAAMA,EAAgBC,EAAOC,EAAM,CACjC,KAAM,CAAC,YAAa,mBAAmB,EACvC,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,CAChB,CACF,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAuB,EAEzD,OAAOD,EAAA,cAACN,EAAA,CAAe,GAAGI,EAAO,KAAMC,EAAM,CAC/C"}

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlIcon.js","sources":["../../../src/components/segmented-control/SegmentedControlIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '../icon'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst sizeMap = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md'\n}\n\nexport const SegmentedControlIcon = (\n  props: Omit<React.ComponentProps<typeof Icon>, 'size'>\n): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <Icon {...props} size={sizeMap[size as string]} />\n}\n"],"names":["sizeMap","SegmentedControlIcon","props","size","React","SegmentedControlContext","Icon"],"mappings":"sIAKA,MAAMA,EAAU,CACd,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EACXC,GACgB,CAChB,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAuB,EAEzD,OAAOD,EAAA,cAACE,EAAA,CAAM,GAAGJ,EAAO,KAAMF,EAAQG,GAAiB,CACzD"}
+{"version":3,"file":"SegmentedControlIcon.js","sources":["../../../src/components/segmented-control/SegmentedControlIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '../icon'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst sizeMap = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md'\n}\n\nexport const SegmentedControlIcon = (\n  props: Omit<React.ComponentProps<typeof Icon>, 'size'>\n): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <Icon {...props} size={sizeMap[size as string]} />\n}\n"],"names":["sizeMap","SegmentedControlIcon","props","size","React","SegmentedControlContext","Icon"],"mappings":"sIAKA,MAAMA,EAAU,CACd,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EACXC,GACgB,CAChB,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAuB,EAEzD,OAAOD,EAAA,cAACE,EAAA,CAAM,GAAGJ,EAAO,KAAMF,EAAQG,CAAc,EAAG,CACzD"}

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

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as s}from"../../stitches.js";import{Tabs as d}from"../tabs/Tabs.js";import{SegmentedControlContext as l}from"./SegmentedControlContext.js";const m=s(d.Trigger,{position:"relative",bg:"transparent",borderRadius:"$2",p:0,zIndex:2,minWidth:"140px",border:"2px solid transparent",variants:{theme:{primary:{"&[data-state=inactive]:hover":{bg:"$primary300"},"&:focus-visible":{borderColor:"$primary800"}},marsh:{"&[data-state=inactive]:hover":{bg:"$marsh300"},"&:focus-visible":{borderColor:"$marsh800"}}},size:{sm:{flex:"unset",p:"$4 $24",gap:"$3"},md:{flex:1,p:"$24 $4",gap:"$4"},lg:{flex:1,p:"$24 $4",gap:"$4"}}},"& > div":{display:"none"},"& > span":{display:"flex",flexDirection:"column",alignItems:"center"},"&[data-state=active]":{boxShadow:"none",border:"2px solid transparent",fontWeight:600,color:"$textBold","&:focus-visible":{boxShadow:"none",borderColor:"$primary800"}},"&[data-state=inactive]":{fontWeight:400,color:"$grey900"},"&[disabled]":{opacity:.3}}),t=e.forwardRef(({children:r,...o},a)=>{const{size:i,theme:n}=e.useContext(l);return e.createElement(m,{...o,theme:n,size:i,ref:a},r)});t.displayName="SegmentedControlItem";export{t as SegmentedControlItem};
+import*as e from"react";import{styled as n}from"../../styled.js";import{Tabs as d}from"../tabs/Tabs.js";import{SegmentedControlContext as m}from"./SegmentedControlContext.js";const p=n(d.Trigger,{base:["relative","bg-transparent","rounded-lg","p-0","z-2","min-w-35","border-2","border-transparent","[&>div]:hidden","[&>span]:flex","[&>span]:flex-col","[&>span]:items-center","data-[state=active]:border-2","data-[state=active]:border-transparent","data-[state=active]:focus-visible:border-primary-800","data-[state=active]:focus-visible:shadow-none","data-[state=active]:font-semibold","data-[state=active]:shadow-none","data-[state=active]:text-(--text-bold)","data-[state=inactive]:font-normal","data-[state=inactive]:text-grey-900","disabled:opacity-30"],variants:{theme:{primary:["data-[state=inactive]:hover:bg-primary-300","focus-visible:border-primary-800"],marsh:["data-[state=inactive]:hover:bg-marsh-300","focus-visible:border-marsh-800"]},size:{sm:["flex-[unset]","gap-3","px-6","py-4"],md:["flex-1","gap-4","px-4","py-6"],lg:["flex-1","gap-4","px-4","py-6"]}}}),t=e.forwardRef(({children:a,...r},s)=>{const{size:o,theme:i}=e.useContext(m);return e.createElement(p,{...r,theme:i,size:o,ref:s},a)});t.displayName="SegmentedControlItem";export{t as SegmentedControlItem};
 //# sourceMappingURL=SegmentedControlItem.js.map