@atom-learning/components 6.3.1 → 6.4.0

package/dist/components/inline-message/InlineMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineMessage.js","sources":["../../../src/components/inline-message/InlineMessage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex/Flex'\nimport { Icon } from '~/components/icon/Icon'\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\n\nimport { INLINE_MESSAGE_ICONS } from './InlineMessage.config'\nimport { InlineMessageTheme } from './InlineMessage.types'\n\nconst InlineMessageContainer = styled(Flex, {\n  base: [],\n  variants: {\n    theme: {\n      success: ['text-success'],\n      warning: ['[&_svg]:text-warning-dark', 'text-warning-text'],\n      info: ['text-info'],\n      neutral: ['text-grey-800'],\n      error: ['text-danger']\n    }\n  }\n})\n\ntype TInlineMessageProps = React.ComponentProps<\n  typeof InlineMessageContainer\n> & {\n  showIcon?: boolean\n  size?: 'xs' | 'sm' | 'md'\n}\n\nexport const InlineMessage = ({\n  className,\n  showIcon = true,\n  theme = 'error',\n  size = 'sm',\n  children,\n  ...rest\n}: TInlineMessageProps) => (\n  <InlineMessageContainer theme={theme} className={className} {...rest}>\n    {showIcon && (\n      <Icon\n        size=\"sm\"\n        is={INLINE_MESSAGE_ICONS[theme as InlineMessageTheme]}\n        className=\"mr-2\"\n      />\n    )}\n    <Text as=\"span\" size={size} className=\"translate-y-0.5\">\n      {children}\n    </Text>\n  </InlineMessageContainer>\n)\n"],"names":["InlineMessageContainer","styled","Flex","InlineMessage","className","showIcon","theme","size","children","rest","React","Icon","INLINE_MESSAGE_ICONS","Text"],"mappings":"uPAUA,MAAMA,EAAyBC,EAAOC,EAAM,CAC1C,KAAM,GACN,SAAU,CACR,MAAO,CACL,QAAS,CAAC,cAAc,EACxB,QAAS,CAAC,4BAA6B,mBAAmB,EAC1D,KAAM,CAAC,WAAW,EAClB,QAAS,CAAC,eAAe,EACzB,MAAO,CAAC,aAAa,CACvB,CACF,CACF,CAAC,EASYC,EAAgB,CAAC,CAC5B,UAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,KAAAC,EAAO,KACP,SAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACV,EAAA,CAAuB,MAAOM,EAAO,UAAWF,EAAY,GAAGK,CAAAA,EAC7DJ,GACCK,EAAA,cAACC,EAAA,CACC,KAAK,KACL,GAAIC,EAAqBN,CAA2B,EACpD,UAAU,OACZ,EAEFI,EAAA,cAACG,EAAA,CAAK,GAAG,OAAO,KAAMN,EAAM,UAAU,iBACnCC,EAAAA,CACH,CACF"}
+{"version":3,"file":"InlineMessage.js","sources":["../../../src/components/inline-message/InlineMessage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\n\nimport { INLINE_MESSAGE_ICONS } from './InlineMessage.config'\nimport { InlineMessageTheme } from './InlineMessage.types'\n\nconst InlineMessageContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    theme: {\n      success: ['text-success'],\n      warning: ['[&_svg]:text-warning-dark', 'text-warning-text'],\n      info: ['text-info'],\n      neutral: ['text-grey-800'],\n      error: ['text-danger']\n    }\n  }\n})\n\ntype TInlineMessageProps = React.ComponentProps<\n  typeof InlineMessageContainer\n> & {\n  showIcon?: boolean\n  size?: 'xs' | 'sm' | 'md'\n}\n\nexport const InlineMessage = ({\n  className,\n  showIcon = true,\n  theme = 'error',\n  size = 'sm',\n  children,\n  ...rest\n}: TInlineMessageProps) => (\n  <InlineMessageContainer theme={theme} className={className} {...rest}>\n    {showIcon && (\n      <Icon\n        size=\"sm\"\n        is={INLINE_MESSAGE_ICONS[theme as InlineMessageTheme]}\n        className=\"mr-2\"\n      />\n    )}\n    <Text as=\"span\" size={size} className=\"translate-y-0.5\">\n      {children}\n    </Text>\n  </InlineMessageContainer>\n)\n"],"names":["InlineMessageContainer","styled","InlineMessage","className","showIcon","theme","size","children","rest","React","Icon","INLINE_MESSAGE_ICONS","Text"],"mappings":"gNASA,MAAMA,EAAyBC,EAAO,MAAO,CAC3C,KAAM,CAAC,MAAM,EACb,SAAU,CACR,MAAO,CACL,QAAS,CAAC,cAAc,EACxB,QAAS,CAAC,4BAA6B,mBAAmB,EAC1D,KAAM,CAAC,WAAW,EAClB,QAAS,CAAC,eAAe,EACzB,MAAO,CAAC,aAAa,CACvB,CACF,CACF,CAAC,EASYC,EAAgB,CAAC,CAC5B,UAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,KAAAC,EAAO,KACP,SAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACT,EAAA,CAAuB,MAAOK,EAAO,UAAWF,EAAY,GAAGK,CAC7DJ,EAAAA,GACCK,EAAA,cAACC,EAAA,CACC,KAAK,KACL,GAAIC,EAAqBN,CAA2B,EACpD,UAAU,OACZ,EAEFI,EAAA,cAACG,EAAA,CAAK,GAAG,OAAO,KAAMN,EAAM,UAAU,iBACnCC,EAAAA,CACH,CACF"}

package/dist/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Flex } from '../flex/Flex'\nimport { Text } from '../text/Text'\n\nexport const InputBackground = styled('div', {\n  base: [\n    'flex',\n    'text-grey-1000',\n    'transition-[background,border-color]',\n    'duration-100',\n    'ease-out',\n    'w-full'\n  ],\n  variants: {\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-800',\n        'focus-within:border-blue-800',\n        'rounded-md'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1',\n        'rounded-md'\n      ]\n    },\n    size: {\n      sm: ['h-8'],\n      md: ['h-10'],\n      lg: ['h-12'],\n      xl: ['h-16']\n    },\n    disabled: {\n      true: ['cursor-not-allowed', 'opacity-30']\n    },\n    state: {\n      error: []\n    }\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    }\n  ]\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled(Text, {\n  base: [\n    'appearance-none',\n    'bg-none',\n    'shadow-none',\n    'focus:outline-none',\n    'px-3',\n    'size-full',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700'\n  ]\n})\n\nexport type InputTextProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'size'\n> &\n  Omit<React.ComponentProps<typeof StyledInputText>, 'type' | 'as'> & {\n    // override default 'type' property to prevent Input from being used to render\n    // checkboxes, radios etc — we have dedicated components for them\n    type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n    as?: never\n    disabled?: boolean\n  }\n\nconst toTextSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg'\n}\n\nexport const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(\n  ({ type = 'text', size, ...rest }, ref) => {\n    const textSize = React.useMemo(\n      () => overrideStyledVariantValue(size, (s) => toTextSize[s]),\n      [size]\n    )\n\n    return (\n      <StyledInputText\n        ref={ref}\n        as=\"input\"\n        type={type === 'number' ? 'text' : type}\n        inputMode={type === 'number' ? 'numeric' : undefined}\n        pattern={type === 'number' ? '[0-9]*' : undefined}\n        size={textSize}\n        {...(rest as any)}\n      />\n    )\n  }\n)\n\nInputText.displayName = 'InputText'\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n  React.ComponentProps<typeof InputText>,\n  'size' | 'state' | 'appearance'\n> & {\n  size?: InputBackgroundProps['size']\n  state?: InputBackgroundProps['state']\n  appearance?: InputBackgroundProps['appearance']\n  disabled?: boolean\n  name?: string\n  readOnly?: boolean\n  value?: string | number\n  onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      size = 'md',\n      appearance = 'standard',\n      state,\n      disabled,\n      style,\n      ...rest\n    },\n    ref\n  ) => {\n    return (\n      <InputBackground\n        size={size}\n        appearance={appearance}\n        disabled={disabled}\n        state={state}\n        className={className}\n        style={style}\n      >\n        <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n      </InputBackground>\n    )\n  }\n)\n\nInput.displayName = 'Input'\n"],"names":["InputBackground","styled","StyledInputText","Text","toTextSize","InputText","React","type","size","rest","ref","textSize","overrideStyledVariantValue","s","Input","className","appearance","state","disabled","style"],"mappings":"iOAQa,MAAAA,EAAkBC,EAAO,MAAO,CAC3C,KAAM,CACJ,OACA,iBACA,uCACA,eACA,WACA,QACF,EACA,SAAU,CACR,WAAY,CACV,SAAU,CACR,WACA,SACA,kBACA,+BACA,YACF,EACA,OAAQ,CACN,cACA,cACA,yBACA,gCACA,gCACA,6BACA,mBACA,YACF,CACF,EACA,KAAM,CACJ,GAAI,CAAC,KAAK,EACV,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,MAAM,CACb,EACA,SAAU,CACR,KAAM,CAAC,qBAAsB,YAAY,CAC3C,EACA,MAAO,CACL,MAAO,CACT,CAAA,CACF,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,MAAO,CAAC,eAAe,CACzB,EACA,CACE,MAAO,QACP,WAAY,SACZ,MAAO,CAAC,kBAAmB,6BAA6B,CAC1D,CACF,CACF,CAAC,EAEDD,EAAgB,YAAc,kBAE9B,MAAME,EAAkBD,EAAOE,EAAM,CACnC,KAAM,CACJ,kBACA,UACA,cACA,qBACA,OACA,YACA,0BACA,2BACF,CACF,CAAC,EAcKC,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAYC,EAAM,WAC7B,CAAC,CAAE,KAAAC,EAAO,OAAQ,KAAAC,EAAM,GAAGC,CAAK,EAAGC,IAAQ,CACzC,MAAMC,EAAWL,EAAM,QACrB,IAAMM,EAA2BJ,EAAOK,GAAMT,EAAWS,CAAC,CAAC,EAC3D,CAACL,CAAI,CACP,EAEA,OACEF,EAAA,cAACJ,EAAA,CACC,IAAKQ,EACL,GAAG,QACH,KAAMH,IAAS,SAAW,OAASA,EACnC,UAAWA,IAAS,SAAW,UAAY,OAC3C,QAASA,IAAS,SAAW,SAAW,OACxC,KAAMI,EACL,GAAIF,CACP,CAAA,CAEJ,CACF,EAEAJ,EAAU,YAAc,YAiBjB,MAAMS,EAAQR,EAAM,WACzB,CACE,CACE,UAAAS,EACA,KAAAP,EAAO,KACP,WAAAQ,EAAa,WACb,MAAAC,EACA,SAAAC,EACA,MAAAC,EACA,GAAGV,CACL,EACAC,IAGEJ,EAAA,cAACN,EACC,CAAA,KAAMQ,EACN,WAAYQ,EACZ,SAAUE,EACV,MAAOD,EACP,UAAWF,EACX,MAAOI,CAAAA,EAEPb,EAAA,cAACD,EAAU,CAAA,KAAMG,EAAM,IAAKE,EAAK,SAAUQ,EAAW,GAAGT,CAAM,CAAA,CACjE,CAGN,EAEAK,EAAM,YAAc"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Text } from '../text/Text'\n\nexport const InputBackground = styled('div', {\n  base: [\n    'flex',\n    'text-grey-1000',\n    'transition-[background,border-color]',\n    'duration-100',\n    'ease-out',\n    'w-full'\n  ],\n  variants: {\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-800',\n        'focus-within:border-blue-800',\n        'rounded-md'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1',\n        'rounded-md'\n      ]\n    },\n    size: {\n      sm: ['h-8'],\n      md: ['h-10'],\n      lg: ['h-12'],\n      xl: ['h-16']\n    },\n    disabled: {\n      true: ['cursor-not-allowed', 'opacity-30']\n    },\n    state: {\n      error: []\n    }\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    }\n  ]\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled(Text, {\n  base: [\n    'appearance-none',\n    'bg-none',\n    'shadow-none',\n    'focus:outline-none',\n    'px-3',\n    'size-full',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700'\n  ]\n})\n\nexport type InputTextProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'size'\n> &\n  Omit<React.ComponentProps<typeof StyledInputText>, 'type' | 'as'> & {\n    // override default 'type' property to prevent Input from being used to render\n    // checkboxes, radios etc — we have dedicated components for them\n    type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n    as?: never\n    disabled?: boolean\n  }\n\nconst toTextSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg'\n}\n\nexport const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(\n  ({ type = 'text', size, ...rest }, ref) => {\n    const textSize = React.useMemo(\n      () => overrideStyledVariantValue(size, (s) => toTextSize[s]),\n      [size]\n    )\n\n    return (\n      <StyledInputText\n        ref={ref}\n        as=\"input\"\n        type={type === 'number' ? 'text' : type}\n        inputMode={type === 'number' ? 'numeric' : undefined}\n        pattern={type === 'number' ? '[0-9]*' : undefined}\n        size={textSize}\n        {...(rest as any)}\n      />\n    )\n  }\n)\n\nInputText.displayName = 'InputText'\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n  React.ComponentProps<typeof InputText>,\n  'size' | 'state' | 'appearance'\n> & {\n  size?: InputBackgroundProps['size']\n  state?: InputBackgroundProps['state']\n  appearance?: InputBackgroundProps['appearance']\n  disabled?: boolean\n  name?: string\n  readOnly?: boolean\n  value?: string | number\n  onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      size = 'md',\n      appearance = 'standard',\n      state,\n      disabled,\n      style,\n      ...rest\n    },\n    ref\n  ) => {\n    return (\n      <InputBackground\n        size={size}\n        appearance={appearance}\n        disabled={disabled}\n        state={state}\n        className={className}\n        style={style}\n      >\n        <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n      </InputBackground>\n    )\n  }\n)\n\nInput.displayName = 'Input'\n"],"names":["InputBackground","styled","StyledInputText","Text","toTextSize","InputText","React","type","size","rest","ref","textSize","overrideStyledVariantValue","s","Input","className","appearance","state","disabled","style"],"mappings":"iOAOa,MAAAA,EAAkBC,EAAO,MAAO,CAC3C,KAAM,CACJ,OACA,iBACA,uCACA,eACA,WACA,QACF,EACA,SAAU,CACR,WAAY,CACV,SAAU,CACR,WACA,SACA,kBACA,+BACA,YACF,EACA,OAAQ,CACN,cACA,cACA,yBACA,gCACA,gCACA,6BACA,mBACA,YACF,CACF,EACA,KAAM,CACJ,GAAI,CAAC,KAAK,EACV,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,MAAM,CACb,EACA,SAAU,CACR,KAAM,CAAC,qBAAsB,YAAY,CAC3C,EACA,MAAO,CACL,MAAO,CACT,CAAA,CACF,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,MAAO,CAAC,eAAe,CACzB,EACA,CACE,MAAO,QACP,WAAY,SACZ,MAAO,CAAC,kBAAmB,6BAA6B,CAC1D,CACF,CACF,CAAC,EAEDD,EAAgB,YAAc,kBAE9B,MAAME,EAAkBD,EAAOE,EAAM,CACnC,KAAM,CACJ,kBACA,UACA,cACA,qBACA,OACA,YACA,0BACA,2BACF,CACF,CAAC,EAcKC,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAYC,EAAM,WAC7B,CAAC,CAAE,KAAAC,EAAO,OAAQ,KAAAC,EAAM,GAAGC,CAAK,EAAGC,IAAQ,CACzC,MAAMC,EAAWL,EAAM,QACrB,IAAMM,EAA2BJ,EAAOK,GAAMT,EAAWS,CAAC,CAAC,EAC3D,CAACL,CAAI,CACP,EAEA,OACEF,EAAA,cAACJ,EAAA,CACC,IAAKQ,EACL,GAAG,QACH,KAAMH,IAAS,SAAW,OAASA,EACnC,UAAWA,IAAS,SAAW,UAAY,OAC3C,QAASA,IAAS,SAAW,SAAW,OACxC,KAAMI,EACL,GAAIF,CACP,CAAA,CAEJ,CACF,EAEAJ,EAAU,YAAc,YAiBjB,MAAMS,EAAQR,EAAM,WACzB,CACE,CACE,UAAAS,EACA,KAAAP,EAAO,KACP,WAAAQ,EAAa,WACb,MAAAC,EACA,SAAAC,EACA,MAAAC,EACA,GAAGV,CACL,EACAC,IAGEJ,EAAA,cAACN,EACC,CAAA,KAAMQ,EACN,WAAYQ,EACZ,SAAUE,EACV,MAAOD,EACP,UAAWF,EACX,MAAOI,CAAAA,EAEPb,EAAA,cAACD,EAAU,CAAA,KAAMG,EAAM,IAAKE,EAAK,SAAUQ,EAAW,GAAGT,CAAM,CAAA,CACjE,CAGN,EAEAK,EAAM,YAAc"}

package/dist/components/loader/Loader.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Flex } from '../../components/flex/Flex';
-type LoaderProps = React.ComponentProps<typeof Flex> & {
+type LoaderProps = React.ComponentProps<'div'> & {
     message?: string;
     size?: 'sm' | 'md' | 'lg';
 };

package/dist/components/loader/Loader.js

@@ -1,2 +1,2 @@
-import*as s from"@radix-ui/react-visually-hidden";import n from"clsx";import*as e from"react";import{Flex as o}from"../flex/Flex.js";import{styled as l}from"../../styled.js";const a=l("div",{base:["animate-pulse","bg-current","rounded-full","animation-duration-900","nth-3:animation-delay-300","nth-4:animation-delay-600"],variants:{size:{sm:["size-1","mx-0.5"],md:["size-1.5","mx-0.5"],lg:["size-2","mx-[3px]"]}}}),c=({className:m,message:i="Loading",size:t="md",...r})=>e.createElement(o,{role:"alert",...r,className:n("justify-center",m)},e.createElement(s.Root,null,i),e.createElement(a,{size:t}),e.createElement(a,{size:t}),e.createElement(a,{size:t}));export{c as Loader};
+import*as n from"@radix-ui/react-visually-hidden";import r from"clsx";import*as e from"react";import{styled as o}from"../../styled.js";const a=o("div",{base:["animate-pulse","bg-current","rounded-full","animation-duration-900","nth-3:animation-delay-300","nth-4:animation-delay-600"],variants:{size:{sm:["size-1","mx-0.5"],md:["size-1.5","mx-0.5"],lg:["size-2","mx-[3px]"]}}}),l=({className:m,message:s="Loading",size:t="md",...i})=>e.createElement("div",{className:r("flex","justify-center",m),role:"alert",...i},e.createElement(n.Root,null,s),e.createElement(a,{size:t}),e.createElement(a,{size:t}),e.createElement(a,{size:t}));export{l as Loader};
 //# sourceMappingURL=Loader.js.map

package/dist/components/loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../../src/components/loader/Loader.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Flex } from '~/components/flex/Flex'\nimport { styled } from '~/styled'\n\nconst Dot = styled('div', {\n  base: [\n    'animate-pulse',\n    'bg-current',\n    'rounded-full',\n    'animation-duration-900',\n    'nth-3:animation-delay-300',\n    'nth-4:animation-delay-600'\n  ],\n  variants: {\n    size: {\n      sm: ['size-1', 'mx-0.5'],\n      md: ['size-1.5', 'mx-0.5'],\n      lg: ['size-2', 'mx-[3px]']\n    }\n  }\n})\n\ntype LoaderProps = React.ComponentProps<typeof Flex> & {\n  message?: string\n  size?: 'sm' | 'md' | 'lg'\n}\n\nexport const Loader = ({\n  className,\n  message = 'Loading',\n  size = 'md',\n  ...props\n}: LoaderProps) => (\n  <Flex role=\"alert\" {...props} className={clsx('justify-center', className)}>\n    <VisuallyHidden.Root>{message}</VisuallyHidden.Root>\n    <Dot size={size} />\n    <Dot size={size} />\n    <Dot size={size} />\n  </Flex>\n)\n"],"names":["Dot","styled","Loader","className","message","size","props","React","Flex","clsx","VisuallyHidden"],"mappings":"8KAOA,MAAMA,EAAMC,EAAO,MAAO,CACxB,KAAM,CACJ,gBACA,aACA,eACA,yBACA,4BACA,2BACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,SAAU,QAAQ,EACvB,GAAI,CAAC,WAAY,QAAQ,EACzB,GAAI,CAAC,SAAU,UAAU,CAC3B,CACF,CACF,CAAC,EAOYC,EAAS,CAAC,CACrB,UAAAC,EACA,QAAAC,EAAU,UACV,KAAAC,EAAO,KACP,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAK,KAAK,QAAS,GAAGF,EAAO,UAAWG,EAAK,iBAAkBN,CAAS,CACvEI,EAAAA,EAAA,cAACG,EAAe,KAAf,KAAqBN,CAAQ,EAC9BG,EAAA,cAACP,EAAA,CAAI,KAAMK,CAAAA,CAAM,EACjBE,EAAA,cAACP,EAAA,CAAI,KAAMK,CAAAA,CAAM,EACjBE,EAAA,cAACP,EAAA,CAAI,KAAMK,CAAAA,CAAM,CACnB"}
+{"version":3,"file":"Loader.js","sources":["../../../src/components/loader/Loader.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst Dot = styled('div', {\n  base: [\n    'animate-pulse',\n    'bg-current',\n    'rounded-full',\n    'animation-duration-900',\n    'nth-3:animation-delay-300',\n    'nth-4:animation-delay-600'\n  ],\n  variants: {\n    size: {\n      sm: ['size-1', 'mx-0.5'],\n      md: ['size-1.5', 'mx-0.5'],\n      lg: ['size-2', 'mx-[3px]']\n    }\n  }\n})\n\ntype LoaderProps = React.ComponentProps<'div'> & {\n  message?: string\n  size?: 'sm' | 'md' | 'lg'\n}\n\nexport const Loader = ({\n  className,\n  message = 'Loading',\n  size = 'md',\n  ...props\n}: LoaderProps) => (\n  <div\n    className={clsx('flex', 'justify-center', className)}\n    role=\"alert\"\n    {...props}\n  >\n    <VisuallyHidden.Root>{message}</VisuallyHidden.Root>\n    <Dot size={size} />\n    <Dot size={size} />\n    <Dot size={size} />\n  </div>\n)\n"],"names":["Dot","styled","Loader","className","message","size","props","React","clsx","VisuallyHidden"],"mappings":"uIAMA,MAAMA,EAAMC,EAAO,MAAO,CACxB,KAAM,CACJ,gBACA,aACA,eACA,yBACA,4BACA,2BACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,SAAU,QAAQ,EACvB,GAAI,CAAC,WAAY,QAAQ,EACzB,GAAI,CAAC,SAAU,UAAU,CAC3B,CACF,CACF,CAAC,EAOYC,EAAS,CAAC,CACrB,UAAAC,EACA,QAAAC,EAAU,UACV,KAAAC,EAAO,KACP,GAAGC,CACL,IACEC,EAAA,cAAC,MACC,CAAA,UAAWC,EAAK,OAAQ,iBAAkBL,CAAS,EACnD,KAAK,QACJ,GAAGG,CAAAA,EAEJC,EAAA,cAACE,EAAe,KAAf,KAAqBL,CAAQ,EAC9BG,EAAA,cAACP,EAAA,CAAI,KAAMK,CAAAA,CAAM,EACjBE,EAAA,cAACP,EAAA,CAAI,KAAMK,CAAAA,CAAM,EACjBE,EAAA,cAACP,EAAA,CAAI,KAAMK,CAAAA,CAAM,CACnB"}

package/dist/components/markdown-content/MarkdownContent.d.ts

@@ -1,15 +1,7 @@
 import * as React from 'react';
 type HandleNode = (node: any) => JSX.Element | null;
-declare const StyledMarkdownContent: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const StyledMarkdownContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "gap" | "wrap" | "direction" | "align" | "justify"> & {
-    direction?: ("row" | "inherit" | "initial" | "row-reverse" | "column" | "column-reverse" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "inherit" | "initial" | "row-reverse" | "column" | "column-reverse" | "revert" | "revert-layer" | "unset">>) | undefined;
-    wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
-    justify?: ("end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
-    align?: ("end" | "start" | "inherit" | "baseline" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "baseline" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "first baseline" | "last baseline">>) | undefined;
-    gap?: (0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24>>) | undefined;
-} & {
-    as?: React.ElementType;
 }, never> & {
     as?: React.ElementType;
 }>;

package/dist/components/markdown-content/MarkdownContent.js

@@ -1,2 +1,2 @@
-import d from"mdast-util-directive";import c from"mdast-util-from-markdown";import l from"micromark-extension-directive";import*as p from"react";import{styled as f}from"../../styled.js";import{Flex as w}from"../flex/Flex.js";import{MarkdownCode as k}from"./components/MarkdownCode.js";import{MarkdownEmphasis as h}from"./components/MarkdownEmphasis.js";import{MarkdownHeading as M}from"./components/MarkdownHeading.js";import{MarkdownImage as x}from"./components/MarkdownImage.js";import{MarkdownInlineCode as u}from"./components/MarkdownInlineCode.js";import{MarkdownLink as g}from"./components/MarkdownLink.js";import{MarkdownList as $}from"./components/MarkdownList.js";import{MarkdownListItem as y}from"./components/MarkdownListItem.js";import{MarkdownParagraph as C}from"./components/MarkdownParagraph.js";import{MarkdownStrong as E}from"./components/MarkdownStrong.js";import{MarkdownText as I}from"./components/MarkdownText.js";import{MarkdownThematicBreak as N}from"./components/MarkdownThematicBreak.js";const L=f(w,{base:["[&>h1]:max-w-[65ch]","[&>h2]:max-w-[65ch]","[&>h3]:max-w-[65ch]","[&>h4]:max-w-[65ch]","[&>p]:max-w-[75ch]","[&>ul]:max-w-[75ch]"]}),B={code:k,emphasis:h,heading:M,inlineCode:u,image:x,link:g,list:$,listItem:y,paragraph:C,strong:E,text:I,thematicBreak:N},H=o=>{var r;if((r=o.position)!=null&&r.start){const{line:t,column:m,offset:e}=o.position.start;return`${o.type}${t}${m}${e}`}return`${o.type}${+new Date}`},s=({content:o,customComponents:r={},className:t})=>{const m=c(o,{extensions:[l()],mdastExtensions:[d.fromMarkdown]}),e={...B,...r},a=n=>{const i=e[n.type];return i?p.createElement(i,{key:H(n),node:n,handleNode:a}):null};return p.createElement(L,{direction:"column",gap:5,className:t},m.children.map(a))};s.displayName="MarkdownContent";export{s as MarkdownContent};
+import d from"mdast-util-directive";import l from"mdast-util-from-markdown";import c from"micromark-extension-directive";import*as s from"react";import{styled as f}from"../../styled.js";import{MarkdownCode as w}from"./components/MarkdownCode.js";import{MarkdownEmphasis as k}from"./components/MarkdownEmphasis.js";import{MarkdownHeading as h}from"./components/MarkdownHeading.js";import{MarkdownImage as M}from"./components/MarkdownImage.js";import{MarkdownInlineCode as x}from"./components/MarkdownInlineCode.js";import{MarkdownLink as g}from"./components/MarkdownLink.js";import{MarkdownList as u}from"./components/MarkdownList.js";import{MarkdownListItem as $}from"./components/MarkdownListItem.js";import{MarkdownParagraph as y}from"./components/MarkdownParagraph.js";import{MarkdownStrong as C}from"./components/MarkdownStrong.js";import{MarkdownText as E}from"./components/MarkdownText.js";import{MarkdownThematicBreak as I}from"./components/MarkdownThematicBreak.js";const N=f("div",{base:["flex","flex-col","gap-8","[&>h1]:max-w-[65ch]","[&>h2]:max-w-[65ch]","[&>h3]:max-w-[65ch]","[&>h4]:max-w-[65ch]","[&>p]:max-w-[75ch]","[&>ul]:max-w-[75ch]"]}),L={code:w,emphasis:k,heading:h,inlineCode:x,image:M,link:g,list:u,listItem:$,paragraph:y,strong:C,text:E,thematicBreak:I},v=o=>{var r;if((r=o.position)!=null&&r.start){const{line:t,column:e,offset:m}=o.position.start;return`${o.type}${t}${e}${m}`}return`${o.type}${+new Date}`},p=({content:o,customComponents:r={},className:t})=>{const e=l(o,{extensions:[c()],mdastExtensions:[d.fromMarkdown]}),m={...L,...r},a=n=>{const i=m[n.type];return i?s.createElement(i,{key:v(n),node:n,handleNode:a}):null};return s.createElement(N,{className:t},e.children.map(a))};p.displayName="MarkdownContent";export{p as MarkdownContent};
 //# sourceMappingURL=MarkdownContent.js.map

package/dist/components/markdown-content/MarkdownContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownContent.js","sources":["../../../src/components/markdown-content/MarkdownContent.tsx"],"sourcesContent":["import directive from 'mdast-util-directive'\nimport fromMarkdown from 'mdast-util-from-markdown'\nimport syntax from 'micromark-extension-directive'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Flex } from '../flex/Flex'\nimport { MarkdownCode } from './components/MarkdownCode'\nimport { MarkdownEmphasis } from './components/MarkdownEmphasis'\nimport { MarkdownHeading } from './components/MarkdownHeading'\nimport { MarkdownImage } from './components/MarkdownImage'\nimport { MarkdownInlineCode } from './components/MarkdownInlineCode'\nimport { MarkdownLink } from './components/MarkdownLink'\nimport { MarkdownList } from './components/MarkdownList'\nimport { MarkdownListItem } from './components/MarkdownListItem'\nimport { MarkdownParagraph } from './components/MarkdownParagraph'\nimport { MarkdownStrong } from './components/MarkdownStrong'\nimport { MarkdownText } from './components/MarkdownText'\nimport { MarkdownThematicBreak } from './components/MarkdownThematicBreak'\n\ntype HandleNode = (node) => JSX.Element | null\n\nconst StyledMarkdownContent = styled(Flex, {\n  base: [\n    '[&>h1]:max-w-[65ch]',\n    '[&>h2]:max-w-[65ch]',\n    '[&>h3]:max-w-[65ch]',\n    '[&>h4]:max-w-[65ch]',\n    '[&>p]:max-w-[75ch]',\n    '[&>ul]:max-w-[75ch]'\n  ]\n})\n\ntype MarkdownContentProps = React.ComponentProps<\n  typeof StyledMarkdownContent\n> & {\n  content: string\n  customComponents?: {\n    [key: string]: (props: { node: any; handleNode: HandleNode }) => JSX.Element\n  }\n}\n\nconst defaultComponentsMap = {\n  code: MarkdownCode,\n  emphasis: MarkdownEmphasis,\n  heading: MarkdownHeading,\n  inlineCode: MarkdownInlineCode,\n  image: MarkdownImage,\n  link: MarkdownLink,\n  list: MarkdownList,\n  listItem: MarkdownListItem,\n  paragraph: MarkdownParagraph,\n  strong: MarkdownStrong,\n  text: MarkdownText,\n  thematicBreak: MarkdownThematicBreak\n}\n\nconst generateNodeKey = (node) => {\n  if (node.position?.start) {\n    const { line, column, offset } = node.position.start\n    return `${node.type}${line}${column}${offset}`\n  }\n\n  return `${node.type}${+new Date()}`\n}\n\nexport const MarkdownContent = ({\n  content,\n  customComponents = {},\n  className\n}: MarkdownContentProps) => {\n  const AST = fromMarkdown(content, {\n    extensions: [syntax()],\n    mdastExtensions: [directive.fromMarkdown]\n  })\n\n  const componentsMap = {\n    ...defaultComponentsMap,\n    ...customComponents\n  }\n\n  const handleNode: HandleNode = (node) => {\n    const MarkdownComponent = componentsMap[node.type]\n\n    return MarkdownComponent ? (\n      <MarkdownComponent\n        key={generateNodeKey(node)}\n        node={node}\n        handleNode={handleNode}\n      />\n    ) : null\n  }\n\n  return (\n    <StyledMarkdownContent direction=\"column\" gap={5} className={className}>\n      {AST.children.map(handleNode)}\n    </StyledMarkdownContent>\n  )\n}\n\nMarkdownContent.displayName = 'MarkdownContent'\n"],"names":["StyledMarkdownContent","styled","Flex","defaultComponentsMap","MarkdownCode","MarkdownEmphasis","MarkdownHeading","MarkdownInlineCode","MarkdownImage","MarkdownLink","MarkdownList","MarkdownListItem","MarkdownParagraph","MarkdownStrong","MarkdownText","MarkdownThematicBreak","generateNodeKey","node","_a","line","column","offset","MarkdownContent","content","customComponents","className","AST","fromMarkdown","syntax","directive","componentsMap","handleNode","MarkdownComponent","React"],"mappings":"q/BAuBA,MAAMA,EAAwBC,EAAOC,EAAM,CACzC,KAAM,CACJ,sBACA,sBACA,sBACA,sBACA,qBACA,qBACF,CACF,CAAC,EAWKC,EAAuB,CAC3B,KAAMC,EACN,SAAUC,EACV,QAASC,EACT,WAAYC,EACZ,MAAOC,EACP,KAAMC,EACN,KAAMC,EACN,SAAUC,EACV,UAAWC,EACX,OAAQC,EACR,KAAMC,EACN,cAAeC,CACjB,EAEMC,EAAmBC,GAAS,CA1DlC,IAAAC,EA2DE,IAAIA,EAAAD,EAAK,WAAL,MAAAC,EAAe,MAAO,CACxB,KAAM,CAAE,KAAAC,EAAM,OAAAC,EAAQ,OAAAC,CAAO,EAAIJ,EAAK,SAAS,MAC/C,MAAO,GAAGA,EAAK,IAAI,GAAGE,CAAI,GAAGC,CAAM,GAAGC,CAAM,EAC9C,CAEA,MAAO,GAAGJ,EAAK,IAAI,GAAG,CAAC,IAAI,IAAM,EACnC,EAEaK,EAAkB,CAAC,CAC9B,QAAAC,EACA,iBAAAC,EAAmB,CAAC,EACpB,UAAAC,CACF,IAA4B,CAC1B,MAAMC,EAAMC,EAAaJ,EAAS,CAChC,WAAY,CAACK,GAAQ,EACrB,gBAAiB,CAACC,EAAU,YAAY,CAC1C,CAAC,EAEKC,EAAgB,CACpB,GAAG3B,EACH,GAAGqB,CACL,EAEMO,EAA0Bd,GAAS,CACvC,MAAMe,EAAoBF,EAAcb,EAAK,IAAI,EAEjD,OAAOe,EACLC,EAAA,cAACD,EAAA,CACC,IAAKhB,EAAgBC,CAAI,EACzB,KAAMA,EACN,WAAYc,CAAAA,CACd,EACE,IACN,EAEA,OACEE,EAAA,cAACjC,EAAA,CAAsB,UAAU,SAAS,IAAK,EAAG,UAAWyB,CAAAA,EAC1DC,EAAI,SAAS,IAAIK,CAAU,CAC9B,CAEJ,EAEAT,EAAgB,YAAc"}
+{"version":3,"file":"MarkdownContent.js","sources":["../../../src/components/markdown-content/MarkdownContent.tsx"],"sourcesContent":["import directive from 'mdast-util-directive'\nimport fromMarkdown from 'mdast-util-from-markdown'\nimport syntax from 'micromark-extension-directive'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { MarkdownCode } from './components/MarkdownCode'\nimport { MarkdownEmphasis } from './components/MarkdownEmphasis'\nimport { MarkdownHeading } from './components/MarkdownHeading'\nimport { MarkdownImage } from './components/MarkdownImage'\nimport { MarkdownInlineCode } from './components/MarkdownInlineCode'\nimport { MarkdownLink } from './components/MarkdownLink'\nimport { MarkdownList } from './components/MarkdownList'\nimport { MarkdownListItem } from './components/MarkdownListItem'\nimport { MarkdownParagraph } from './components/MarkdownParagraph'\nimport { MarkdownStrong } from './components/MarkdownStrong'\nimport { MarkdownText } from './components/MarkdownText'\nimport { MarkdownThematicBreak } from './components/MarkdownThematicBreak'\n\ntype HandleNode = (node) => JSX.Element | null\n\nconst StyledMarkdownContent = styled('div', {\n  base: [\n    'flex',\n    'flex-col',\n    'gap-8',\n    '[&>h1]:max-w-[65ch]',\n    '[&>h2]:max-w-[65ch]',\n    '[&>h3]:max-w-[65ch]',\n    '[&>h4]:max-w-[65ch]',\n    '[&>p]:max-w-[75ch]',\n    '[&>ul]:max-w-[75ch]'\n  ]\n})\n\ntype MarkdownContentProps = React.ComponentProps<\n  typeof StyledMarkdownContent\n> & {\n  content: string\n  customComponents?: {\n    [key: string]: (props: { node: any; handleNode: HandleNode }) => JSX.Element\n  }\n}\n\nconst defaultComponentsMap = {\n  code: MarkdownCode,\n  emphasis: MarkdownEmphasis,\n  heading: MarkdownHeading,\n  inlineCode: MarkdownInlineCode,\n  image: MarkdownImage,\n  link: MarkdownLink,\n  list: MarkdownList,\n  listItem: MarkdownListItem,\n  paragraph: MarkdownParagraph,\n  strong: MarkdownStrong,\n  text: MarkdownText,\n  thematicBreak: MarkdownThematicBreak\n}\n\nconst generateNodeKey = (node) => {\n  if (node.position?.start) {\n    const { line, column, offset } = node.position.start\n    return `${node.type}${line}${column}${offset}`\n  }\n\n  return `${node.type}${+new Date()}`\n}\n\nexport const MarkdownContent = ({\n  content,\n  customComponents = {},\n  className\n}: MarkdownContentProps) => {\n  const AST = fromMarkdown(content, {\n    extensions: [syntax()],\n    mdastExtensions: [directive.fromMarkdown]\n  })\n\n  const componentsMap = {\n    ...defaultComponentsMap,\n    ...customComponents\n  }\n\n  const handleNode: HandleNode = (node) => {\n    const MarkdownComponent = componentsMap[node.type]\n\n    return MarkdownComponent ? (\n      <MarkdownComponent\n        key={generateNodeKey(node)}\n        node={node}\n        handleNode={handleNode}\n      />\n    ) : null\n  }\n\n  return (\n    <StyledMarkdownContent className={className}>\n      {AST.children.map(handleNode)}\n    </StyledMarkdownContent>\n  )\n}\n\nMarkdownContent.displayName = 'MarkdownContent'\n"],"names":["StyledMarkdownContent","styled","defaultComponentsMap","MarkdownCode","MarkdownEmphasis","MarkdownHeading","MarkdownInlineCode","MarkdownImage","MarkdownLink","MarkdownList","MarkdownListItem","MarkdownParagraph","MarkdownStrong","MarkdownText","MarkdownThematicBreak","generateNodeKey","node","_a","line","column","offset","MarkdownContent","content","customComponents","className","AST","fromMarkdown","syntax","directive","componentsMap","handleNode","MarkdownComponent","React"],"mappings":"88BAsBA,MAAMA,EAAwBC,EAAO,MAAO,CAC1C,KAAM,CACJ,OACA,WACA,QACA,sBACA,sBACA,sBACA,sBACA,qBACA,qBACF,CACF,CAAC,EAWKC,EAAuB,CAC3B,KAAMC,EACN,SAAUC,EACV,QAASC,EACT,WAAYC,EACZ,MAAOC,EACP,KAAMC,EACN,KAAMC,EACN,SAAUC,EACV,UAAWC,EACX,OAAQC,EACR,KAAMC,EACN,cAAeC,CACjB,EAEMC,EAAmBC,GAAS,CA5DlC,IAAAC,EA6DE,IAAIA,EAAAD,EAAK,WAAL,MAAAC,EAAe,MAAO,CACxB,KAAM,CAAE,KAAAC,EAAM,OAAAC,EAAQ,OAAAC,CAAO,EAAIJ,EAAK,SAAS,MAC/C,MAAO,GAAGA,EAAK,IAAI,GAAGE,CAAI,GAAGC,CAAM,GAAGC,CAAM,EAC9C,CAEA,MAAO,GAAGJ,EAAK,IAAI,GAAG,CAAC,IAAI,IAAM,EACnC,EAEaK,EAAkB,CAAC,CAC9B,QAAAC,EACA,iBAAAC,EAAmB,CACnB,EAAA,UAAAC,CACF,IAA4B,CAC1B,MAAMC,EAAMC,EAAaJ,EAAS,CAChC,WAAY,CAACK,EAAQ,CAAA,EACrB,gBAAiB,CAACC,EAAU,YAAY,CAC1C,CAAC,EAEKC,EAAgB,CACpB,GAAG3B,EACH,GAAGqB,CACL,EAEMO,EAA0Bd,GAAS,CACvC,MAAMe,EAAoBF,EAAcb,EAAK,IAAI,EAEjD,OAAOe,EACLC,EAAA,cAACD,EAAA,CACC,IAAKhB,EAAgBC,CAAI,EACzB,KAAMA,EACN,WAAYc,CACd,CAAA,EACE,IACN,EAEA,OACEE,EAAA,cAAChC,EAAA,CAAsB,UAAWwB,CAAAA,EAC/BC,EAAI,SAAS,IAAIK,CAAU,CAC9B,CAEJ,EAEAT,EAAgB,YAAc"}

package/dist/components/navigation-menu-vertical/NavigationMenuVertical.d.ts

@@ -549,17 +549,7 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         is?: string | undefined | undefined;
         asChild?: boolean | undefined;
     }) => JSX.Element;
-    ItemContent: ({ children, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-    }, "gap" | "wrap" | "direction" | "align" | "justify"> & {
-        direction?: ("row" | "inherit" | "initial" | "row-reverse" | "column" | "column-reverse" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "inherit" | "initial" | "row-reverse" | "column" | "column-reverse" | "revert" | "revert-layer" | "unset">>) | undefined;
-        wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
-        justify?: ("end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
-        align?: ("end" | "start" | "inherit" | "baseline" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "baseline" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "first baseline" | "last baseline">>) | undefined;
-        gap?: (0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24>>) | undefined;
-    } & {
-        as?: React.ElementType;
-    }) => JSX.Element;
+    ItemContent: ({ children, className, ...rest }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
     Icon: (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
         ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
     }, "size"> & {

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Flex } from '../../components/flex/Flex';
-type TNavigationMenuVerticalItemContentProps = React.ComponentProps<typeof Flex>;
-export declare const NavigationMenuVerticalItemContent: ({ children, ...rest }: TNavigationMenuVerticalItemContentProps) => JSX.Element;
+type TNavigationMenuVerticalItemContentProps = React.ComponentProps<'div'>;
+export declare const NavigationMenuVerticalItemContent: ({ children, className, ...rest }: TNavigationMenuVerticalItemContentProps) => JSX.Element;
 export {};

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.js

@@ -1,2 +1,2 @@
-import*as r from"react";import{Flex as o}from"../flex/Flex.js";import{Icon as i}from"../icon/Icon.js";import{NavigationMenuVerticalIcon as a}from"./NavigationMenuVerticalIcon.js";import{NavigationMenuVerticalText as m}from"./NavigationMenuVerticalText.js";const l=({children:t,...n})=>r.createElement(o,{gap:2,align:"center",...n},r.Children.map(t,e=>typeof e=="string"||typeof e=="number"?r.createElement(m,null,e):r.isValidElement(e)&&e.type===i?r.createElement(a,{...e.props}):e));export{l as NavigationMenuVerticalItemContent};
+import o from"clsx";import*as t from"react";import{Icon as a}from"../icon/Icon.js";import{NavigationMenuVerticalIcon as m}from"./NavigationMenuVerticalIcon.js";import{NavigationMenuVerticalText as l}from"./NavigationMenuVerticalText.js";const p=({children:r,className:i,...n})=>t.createElement("div",{className:o("flex","gap-2","items-center",i),...n},t.Children.map(r,e=>typeof e=="string"||typeof e=="number"?t.createElement(l,null,e):t.isValidElement(e)&&e.type===a?t.createElement(m,{...e.props}):e));export{p as NavigationMenuVerticalItemContent};
 //# sourceMappingURL=NavigationMenuVerticalItemContent.js.map

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalItemContent.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex/Flex'\nimport { Icon } from '~/components/icon/Icon'\n\nimport { NavigationMenuVerticalIcon } from './NavigationMenuVerticalIcon'\nimport { NavigationMenuVerticalText } from './NavigationMenuVerticalText'\n\ntype TNavigationMenuVerticalItemContentProps = React.ComponentProps<typeof Flex>\n\nexport const NavigationMenuVerticalItemContent = ({\n  children,\n  ...rest\n}: TNavigationMenuVerticalItemContentProps): JSX.Element => {\n  return (\n    <Flex gap={2} align=\"center\" {...rest}>\n      {\n        React.Children.map(children, (child) => {\n          if (typeof child === 'string' || typeof child === 'number') {\n            return (\n              <NavigationMenuVerticalText>{child}</NavigationMenuVerticalText>\n            )\n          }\n          if (React.isValidElement(child) && child.type === Icon) {\n            return <NavigationMenuVerticalIcon {...child.props} />\n          }\n          return child\n        }) as React.ReactElement[]\n      }\n    </Flex>\n  )\n}\n"],"names":["NavigationMenuVerticalItemContent","children","rest","React","Flex","child","NavigationMenuVerticalText","Icon","NavigationMenuVerticalIcon"],"mappings":"gQAUa,MAAAA,EAAoC,CAAC,CAChD,SAAAC,EACA,GAAGC,CACL,IAEIC,EAAA,cAACC,EAAA,CAAK,IAAK,EAAG,MAAM,SAAU,GAAGF,CAAAA,EAE7BC,EAAM,SAAS,IAAIF,EAAWI,GACxB,OAAOA,GAAU,UAAY,OAAOA,GAAU,SAE9CF,EAAA,cAACG,EAAA,KAA4BD,CAAM,EAGnCF,EAAM,eAAeE,CAAK,GAAKA,EAAM,OAASE,EACzCJ,EAAA,cAACK,EAAA,CAA4B,GAAGH,EAAM,KAAO,CAAA,EAE/CA,CACR,CAEL"}
+{"version":3,"file":"NavigationMenuVerticalItemContent.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\n\nimport { NavigationMenuVerticalIcon } from './NavigationMenuVerticalIcon'\nimport { NavigationMenuVerticalText } from './NavigationMenuVerticalText'\n\ntype TNavigationMenuVerticalItemContentProps = React.ComponentProps<'div'>\n\nexport const NavigationMenuVerticalItemContent = ({\n  children,\n  className,\n  ...rest\n}: TNavigationMenuVerticalItemContentProps): JSX.Element => (\n  <div className={clsx('flex', 'gap-2', 'items-center', className)} {...rest}>\n    {\n      React.Children.map(children, (child) => {\n        if (typeof child === 'string' || typeof child === 'number') {\n          return (\n            <NavigationMenuVerticalText>{child}</NavigationMenuVerticalText>\n          )\n        }\n        if (React.isValidElement(child) && child.type === Icon) {\n          return <NavigationMenuVerticalIcon {...child.props} />\n        }\n        return child\n      }) as React.ReactElement[]\n    }\n  </div>\n)\n"],"names":["NavigationMenuVerticalItemContent","children","className","rest","React","clsx","child","NavigationMenuVerticalText","Icon","NavigationMenuVerticalIcon"],"mappings":"6OAUa,MAAAA,EAAoC,CAAC,CAChD,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAAC,MAAA,CAAI,UAAWC,EAAK,OAAQ,QAAS,eAAgBH,CAAS,EAAI,GAAGC,CAAAA,EAElEC,EAAM,SAAS,IAAIH,EAAWK,GACxB,OAAOA,GAAU,UAAY,OAAOA,GAAU,SAE9CF,EAAA,cAACG,EAAA,KAA4BD,CAAM,EAGnCF,EAAM,eAAeE,CAAK,GAAKA,EAAM,OAASE,EACzCJ,EAAA,cAACK,EAAA,CAA4B,GAAGH,EAAM,KAAO,CAAA,EAE/CA,CACR,CAEL"}

package/dist/components/number-input/NumberInput.js

@@ -1,2 +1,2 @@
-import{Minus as G,Plus as O}from"@atom-learning/icons";import y from"clsx";import*as a from"react";import{styled as P}from"../../styled.js";import{getFieldIconSize as U}from"../../utilities/style/get-icon-size.js";import{Flex as j}from"../flex/Flex.js";import{Input as q}from"../input/Input.js";import{NumberInputStepper as _}from"./NumberInputStepper.js";const J=P(j,{base:[],variants:{appearance:{standard:[],modern:["gap-px"]},emphasis:{bold:["gap-0"]}}}),T=a.forwardRef(({value:p,defaultValue:z=0,onValueChange:w,min:r=0,max:o=Number.MAX_SAFE_INTEGER,step:c=1,disabled:d=!1,readonly:u=!1,size:N="md",stepperButtonLabels:M,disabledTooltipContent:D,className:F,appearance:m="standard",emphasis:l,...R},S)=>{const[n,E]=a.useState(p||z);a.useEffect(()=>{typeof p<"u"&&E(p)},[p]);const s=a.useRef(null);a.useImperativeHandle(S,()=>s.current);const g=a.useMemo(()=>U(N),[N]),k={increment:"increment",decrement:"decrement",...M},x={decrement:`Cannot enter values below ${r}`,increment:`Cannot enter values above ${o}`,...D},b=n>=o,f=n<=r,v=a.useCallback(e=>Math.min(Math.max(e,r),o),[o,r]),t=a.useCallback(e=>{w==null||w(e),E(e)},[w]),V=a.useCallback(e=>{const i=Number(e.target.value.replace(/\D/g,""));t(i)},[t]),h=a.useCallback(()=>{var e;if(b||u)return;(e=s==null?void 0:s.current)==null||e.focus();const i=Number(n)+c;t(v(i))},[v,b,u,c,t,n]),C=a.useCallback(()=>{var e;if(f||u)return;(e=s==null?void 0:s.current)==null||e.focus();const i=Number(n)-c;t(v(i))},[v,f,u,r,c,t,n]),B=a.useCallback(e=>{if(e.nativeEvent.isComposing)return;const i=e.key,I={ArrowUp:h,ArrowRight:h,ArrowDown:C,ArrowLeft:C,Home:()=>t(r),End:()=>t(o)}[i];I&&(e.preventDefault(),I(e))},[h,C,t,r,o]),A=n<r||n>o,{state:H,"aria-invalid":K,...L}=R,X={type:"number",value:n,...L,onChange:V,onKeyDown:B,size:N,appearance:m,state:H||(A?"error":void 0),"aria-invalid":K||A||void 0,className:y("rounded-none","w-16","[&_>_input]:text-center","disabled:opacity-30","disabled:pointer-events-none",l==="bold"&&["rounded-1","[&_>_input[aria-invalid=true]]:text-danger","focus-within:[&_>_input]:text-grey-1000"],l==="bold"&&m==="standard"&&["border-none","[&:has([aria-invalid=true])]:border-2","[&:has([aria-invalid=true])]:border-danger","focus-within:border-2","focus-within:border-blue-800"]),ref:s,readOnly:u,disabled:d,"aria-valuemin":r,"aria-valuemax":o,"aria-valuenow":n,role:"spinbutton"};return a.createElement(J,{appearance:m,emphasis:l,className:F},a.createElement(_,{onClick:C,icon:G,className:y(l!=="bold"&&"border-r-none rounded-r-none"),size:g,fieldAppearance:m,emphasis:l,disabled:f||d,showTooltip:f&&!d,disabledTooltipContent:x.decrement,label:k.decrement}),a.createElement(q,{...X}),a.createElement(_,{onClick:h,icon:O,className:y(l!=="bold"&&"border-l-none rounded-l-none"),size:g,fieldAppearance:m,emphasis:l,disabled:b||d,showTooltip:b&&!d,disabledTooltipContent:x.increment,label:k.increment}))});T.displayName="NumberInput";export{T as NumberInput};
+import{Minus as q,Plus as G}from"@atom-learning/icons";import y from"clsx";import*as a from"react";import{styled as O}from"../../styled.js";import{getFieldIconSize as P}from"../../utilities/style/get-icon-size.js";import{Input as U}from"../input/Input.js";import{NumberInputStepper as _}from"./NumberInputStepper.js";const j=O("div",{base:["flex"],variants:{appearance:{standard:[],modern:["gap-px"]},emphasis:{bold:["gap-0"]}}}),T=a.forwardRef(({value:p,defaultValue:z=0,onValueChange:w,min:r=0,max:o=Number.MAX_SAFE_INTEGER,step:c=1,disabled:d=!1,readonly:u=!1,size:N="md",stepperButtonLabels:M,disabledTooltipContent:D,className:R,appearance:m="standard",emphasis:l,...S},F)=>{const[n,E]=a.useState(p||z);a.useEffect(()=>{typeof p<"u"&&E(p)},[p]);const s=a.useRef(null);a.useImperativeHandle(F,()=>s.current);const g=a.useMemo(()=>P(N),[N]),k={increment:"increment",decrement:"decrement",...M},x={decrement:`Cannot enter values below ${r}`,increment:`Cannot enter values above ${o}`,...D},b=n>=o,f=n<=r,v=a.useCallback(e=>Math.min(Math.max(e,r),o),[o,r]),t=a.useCallback(e=>{w==null||w(e),E(e)},[w]),V=a.useCallback(e=>{const i=Number(e.target.value.replace(/\D/g,""));t(i)},[t]),h=a.useCallback(()=>{var e;if(b||u)return;(e=s==null?void 0:s.current)==null||e.focus();const i=Number(n)+c;t(v(i))},[v,b,u,c,t,n]),C=a.useCallback(()=>{var e;if(f||u)return;(e=s==null?void 0:s.current)==null||e.focus();const i=Number(n)-c;t(v(i))},[v,f,u,r,c,t,n]),B=a.useCallback(e=>{if(e.nativeEvent.isComposing)return;const i=e.key,I={ArrowUp:h,ArrowRight:h,ArrowDown:C,ArrowLeft:C,Home:()=>t(r),End:()=>t(o)}[i];I&&(e.preventDefault(),I(e))},[h,C,t,r,o]),A=n<r||n>o,{state:H,"aria-invalid":K,...L}=S,X={type:"number",value:n,...L,onChange:V,onKeyDown:B,size:N,appearance:m,state:H||(A?"error":void 0),"aria-invalid":K||A||void 0,className:y("rounded-none","w-16","[&_>_input]:text-center","disabled:opacity-30","disabled:pointer-events-none",l==="bold"&&["rounded-1","[&_>_input[aria-invalid=true]]:text-danger","focus-within:[&_>_input]:text-grey-1000"],l==="bold"&&m==="standard"&&["border-none","[&:has([aria-invalid=true])]:border-2","[&:has([aria-invalid=true])]:border-danger","focus-within:border-2","focus-within:border-blue-800"]),ref:s,readOnly:u,disabled:d,"aria-valuemin":r,"aria-valuemax":o,"aria-valuenow":n,role:"spinbutton"};return a.createElement(j,{appearance:m,emphasis:l,className:R},a.createElement(_,{onClick:C,icon:q,className:y(l!=="bold"&&"border-r-none rounded-r-none"),size:g,fieldAppearance:m,emphasis:l,disabled:f||d,showTooltip:f&&!d,disabledTooltipContent:x.decrement,label:k.decrement}),a.createElement(U,{...X}),a.createElement(_,{onClick:h,icon:G,className:y(l!=="bold"&&"border-l-none rounded-l-none"),size:g,fieldAppearance:m,emphasis:l,disabled:b||d,showTooltip:b&&!d,disabledTooltipContent:x.increment,label:k.increment}))});T.displayName="NumberInput";export{T as NumberInput};
 //# sourceMappingURL=NumberInput.js.map

package/dist/components/number-input/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nimport { Flex } from '../flex/Flex'\nimport { Input } from '../input/Input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  appearance?: 'standard' | 'modern'\n  emphasis?: 'bold'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  className?: string\n}\n\nconst NumberInputContainer = styled(Flex, {\n  base: [],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    },\n    emphasis: {\n      bold: ['gap-0']\n    }\n  }\n})\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      value,\n      defaultValue = 0,\n      onValueChange,\n      min = 0,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      disabled: isDisabled = false,\n      readonly: isReadOnly = false,\n      size = 'md',\n      stepperButtonLabels: stepperButtonLabelsProp,\n      disabledTooltipContent: disabledTooltipContentProp,\n      className,\n      appearance = 'standard',\n      emphasis,\n      ...rest\n    },\n    ref\n  ): JSX.Element => {\n    const [internalValue, setInternalValue] = React.useState<number>(\n      value || defaultValue\n    )\n    React.useEffect(() => {\n      // Update the internal value to match what is passed in.\n      if (typeof value !== 'undefined') setInternalValue(value)\n    }, [value])\n\n    const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    const stepperButtonLabels = {\n      increment: 'increment',\n      decrement: 'decrement',\n      ...stepperButtonLabelsProp\n    }\n\n    const disabledTooltipContent = {\n      decrement: `Cannot enter values below ${min}`,\n      increment: `Cannot enter values above ${max}`,\n      ...disabledTooltipContentProp\n    }\n\n    const isAtMax = internalValue >= max\n    const isAtMin = internalValue <= min\n\n    const clamp = React.useCallback(\n      (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n      [max, min]\n    )\n\n    const updateValue = React.useCallback(\n      (newValue: number) => {\n        onValueChange?.(newValue)\n        setInternalValue(newValue)\n      },\n      [onValueChange]\n    )\n\n    const onInputChange = React.useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n        updateValue(parsedValue)\n      },\n      [updateValue]\n    )\n\n    const increment = React.useCallback(() => {\n      if (isAtMax || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) + step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n    const decrement = React.useCallback(() => {\n      if (isAtMin || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) - step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n    const onKeyDown = React.useCallback(\n      (event: React.KeyboardEvent) => {\n        if (event.nativeEvent.isComposing) return\n\n        /**\n         * Keyboard Accessibility\n         *\n         * We want to increase or decrease the input's value\n         * based on if the user the arrow keys.\n         *\n         * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n         */\n        const eventKey = event.key\n\n        const keyMap: Record<string, React.KeyboardEventHandler> = {\n          ArrowUp: increment,\n          ArrowRight: increment,\n          ArrowDown: decrement,\n          ArrowLeft: decrement,\n          Home: () => updateValue(min),\n          End: () => updateValue(max)\n        }\n\n        const action = keyMap[eventKey]\n\n        if (action) {\n          event.preventDefault()\n          action(event)\n        }\n      },\n      [increment, decrement, updateValue, min, max]\n    )\n\n    const hasError = internalValue < min || internalValue > max\n    const {\n      state: externalState,\n      'aria-invalid': externalAriaInvalid,\n      ...restProps\n    } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n    const inputProps: React.ComponentProps<typeof Input> = {\n      type: 'number',\n      value: internalValue,\n      ...restProps,\n      onChange: onInputChange,\n      onKeyDown,\n      size,\n      appearance,\n      state: externalState || (hasError ? 'error' : undefined),\n      'aria-invalid': externalAriaInvalid || hasError || undefined,\n      className: clsx(\n        'rounded-none',\n        'w-16',\n        '[&_>_input]:text-center',\n        'disabled:opacity-30',\n        'disabled:pointer-events-none',\n        emphasis === 'bold' && [\n          'rounded-1',\n          '[&_>_input[aria-invalid=true]]:text-danger',\n          'focus-within:[&_>_input]:text-grey-1000'\n        ],\n        emphasis === 'bold' &&\n          appearance === 'standard' && [\n            'border-none',\n            '[&:has([aria-invalid=true])]:border-2',\n            '[&:has([aria-invalid=true])]:border-danger',\n            'focus-within:border-2',\n            'focus-within:border-blue-800'\n          ]\n      ),\n      ref: inputRef,\n      readOnly: isReadOnly,\n      disabled: isDisabled,\n      'aria-valuemin': min,\n      'aria-valuemax': max,\n      'aria-valuenow': internalValue,\n      role: 'spinbutton'\n    }\n\n    return (\n      <NumberInputContainer\n        appearance={appearance}\n        emphasis={emphasis}\n        className={className}\n      >\n        <NumberInputStepper\n          onClick={decrement}\n          icon={Minus}\n          className={clsx(\n            emphasis !== 'bold' && 'border-r-none rounded-r-none'\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\n          emphasis={emphasis}\n          disabled={isAtMin || isDisabled}\n          showTooltip={isAtMin && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.decrement}\n          label={stepperButtonLabels.decrement}\n        />\n        <Input {...inputProps} />\n        <NumberInputStepper\n          onClick={increment}\n          icon={Plus}\n          className={clsx(\n            emphasis !== 'bold' && 'border-l-none rounded-l-none'\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\n          emphasis={emphasis}\n          disabled={isAtMax || isDisabled}\n          showTooltip={isAtMax && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.increment}\n          label={stepperButtonLabels.increment}\n        />\n      </NumberInputContainer>\n    )\n  }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInputContainer","styled","Flex","NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","className","appearance","emphasis","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","hasError","externalState","externalAriaInvalid","restProps","inputProps","clsx","NumberInputStepper","Minus","Input","Plus"],"mappings":"oWA6BA,MAAMA,EAAuBC,EAAOC,EAAM,CACxC,KAAM,CAAA,EACN,SAAU,CACR,WAAY,CACV,SAAU,GACV,OAAQ,CAAC,QAAQ,CACnB,EACA,SAAU,CACR,KAAM,CAAC,OAAO,CAChB,CACF,CACF,CAAC,EAEYC,EAAcC,EAAM,WAC/B,CACE,CACE,MAAAC,EACA,aAAAC,EAAe,EACf,cAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,OAAO,iBACb,KAAAC,EAAO,EACP,SAAUC,EAAa,GACvB,SAAUC,EAAa,GACvB,KAAAC,EAAO,KACP,oBAAqBC,EACrB,uBAAwBC,EACxB,UAAAC,EACA,WAAAC,EAAa,WACb,SAAAC,EACA,GAAGC,CACL,EACAC,IACgB,CAChB,KAAM,CAACC,EAAeC,CAAgB,EAAIlB,EAAM,SAC9CC,GAASC,CACX,EACAF,EAAM,UAAU,IAAM,CAEhB,OAAOC,EAAU,KAAaiB,EAAiBjB,CAAK,CAC1D,EAAG,CAACA,CAAK,CAAC,EAEV,MAAMkB,EAAWnB,EAAM,OAAgC,IAAI,EAE3DA,EAAM,oBAAoBgB,EAAK,IAAMG,EAAS,OAA2B,EAEzE,MAAMC,EAAWpB,EAAM,QAAQ,IAAMqB,EAAiBZ,CAAI,EAAG,CAACA,CAAI,CAAC,EAE7Da,EAAsB,CAC1B,UAAW,YACX,UAAW,YACX,GAAGZ,CACL,EAEMa,EAAyB,CAC7B,UAAW,6BAA6BnB,CAAG,GAC3C,UAAW,6BAA6BC,CAAG,GAC3C,GAAGM,CACL,EAEMa,EAAUP,GAAiBZ,EAC3BoB,EAAUR,GAAiBb,EAE3BsB,EAAQ1B,EAAM,YACjBiB,GAA0B,KAAK,IAAI,KAAK,IAAIA,EAAeb,CAAG,EAAGC,CAAG,EACrE,CAACA,EAAKD,CAAG,CACX,EAEMuB,EAAc3B,EAAM,YACvB4B,GAAqB,CACpBzB,GAAA,MAAAA,EAAgByB,CAChBV,EAAAA,EAAiBU,CAAQ,CAC3B,EACA,CAACzB,CAAa,CAChB,EAEM0B,EAAgB7B,EAAM,YACzB8B,GAA+C,CAC9C,MAAMC,EAAc,OAAOD,EAAM,OAAO,MAAM,QAAQ,MAAO,EAAE,CAAC,EAChEH,EAAYI,CAAW,CACzB,EACA,CAACJ,CAAW,CACd,EAEMK,EAAYhC,EAAM,YAAY,IAAM,CAjH9C,IAAAiC,EAkHM,GAAIT,GAAWhB,EAAY,QAC3ByB,EAAAd,GAAA,KAAAA,OAAAA,EAAU,UAAV,MAAAc,EAAmB,MACnB,EAAA,MAAML,EAAW,OAAOX,CAAa,EAAIX,EACzCqB,EAAYD,EAAME,CAAQ,CAAC,CAC7B,EAAG,CAACF,EAAOF,EAAShB,EAAYF,EAAMqB,EAAaV,CAAa,CAAC,EAE3DiB,EAAYlC,EAAM,YAAY,IAAM,CAxH9C,IAAAiC,EAyHM,GAAIR,GAAWjB,EAAY,QAC3ByB,EAAAd,GAAA,KAAA,OAAAA,EAAU,UAAV,MAAAc,EAAmB,MACnB,EAAA,MAAML,EAAW,OAAOX,CAAa,EAAIX,EACzCqB,EAAYD,EAAME,CAAQ,CAAC,CAC7B,EAAG,CAACF,EAAOD,EAASjB,EAAYJ,EAAKE,EAAMqB,EAAaV,CAAa,CAAC,EAEhEkB,EAAYnC,EAAM,YACrB8B,GAA+B,CAC9B,GAAIA,EAAM,YAAY,YAAa,OAUnC,MAAMM,EAAWN,EAAM,IAWjBO,EATqD,CACzD,QAASL,EACT,WAAYA,EACZ,UAAWE,EACX,UAAWA,EACX,KAAM,IAAMP,EAAYvB,CAAG,EAC3B,IAAK,IAAMuB,EAAYtB,CAAG,CAC5B,EAEsB+B,CAAQ,EAE1BC,IACFP,EAAM,eAAA,EACNO,EAAOP,CAAK,EAEhB,EACA,CAACE,EAAWE,EAAWP,EAAavB,EAAKC,CAAG,CAC9C,EAEMiC,EAAWrB,EAAgBb,GAAOa,EAAgBZ,EAClD,CACJ,MAAOkC,EACP,eAAgBC,EAChB,GAAGC,CACL,EAAI1B,EAEE2B,EAAiD,CACrD,KAAM,SACN,MAAOzB,EACP,GAAGwB,EACH,SAAUZ,EACV,UAAAM,EACA,KAAA1B,EACA,WAAAI,EACA,MAAO0B,IAAkBD,EAAW,QAAU,QAC9C,eAAgBE,GAAuBF,GAAY,OACnD,UAAWK,EACT,eACA,OACA,0BACA,sBACA,+BACA7B,IAAa,QAAU,CACrB,YACA,6CACA,yCACF,EACAA,IAAa,QACXD,IAAe,YAAc,CAC3B,cACA,wCACA,6CACA,wBACA,8BACF,CACJ,EACA,IAAKM,EACL,SAAUX,EACV,SAAUD,EACV,gBAAiBH,EACjB,gBAAiBC,EACjB,gBAAiBY,EACjB,KAAM,YACR,EAEA,OACEjB,EAAA,cAACJ,EAAA,CACC,WAAYiB,EACZ,SAAUC,EACV,UAAWF,GAEXZ,EAAA,cAAC4C,EAAA,CACC,QAASV,EACT,KAAMW,EACN,UAAWF,EACT7B,IAAa,QAAU,8BACzB,EACA,KAAMM,EACN,gBAAiBP,EACjB,SAAUC,EACV,SAAUW,GAAWlB,EACrB,YAAakB,GAAW,CAAClB,EACzB,uBAAwBgB,EAAuB,UAC/C,MAAOD,EAAoB,SAC7B,CAAA,EACAtB,EAAA,cAAC8C,EAAA,CAAO,GAAGJ,CAAY,CAAA,EACvB1C,EAAA,cAAC4C,EAAA,CACC,QAASZ,EACT,KAAMe,EACN,UAAWJ,EACT7B,IAAa,QAAU,8BACzB,EACA,KAAMM,EACN,gBAAiBP,EACjB,SAAUC,EACV,SAAUU,GAAWjB,EACrB,YAAaiB,GAAW,CAACjB,EACzB,uBAAwBgB,EAAuB,UAC/C,MAAOD,EAAoB,SAAA,CAC7B,CACF,CAEJ,CACF,EAEAvB,EAAY,YAAc"}
+{"version":3,"file":"NumberInput.js","sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nimport { Input } from '../input/Input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  appearance?: 'standard' | 'modern'\n  emphasis?: 'bold'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  className?: string\n}\n\nconst NumberInputContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    },\n    emphasis: {\n      bold: ['gap-0']\n    }\n  }\n})\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      value,\n      defaultValue = 0,\n      onValueChange,\n      min = 0,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      disabled: isDisabled = false,\n      readonly: isReadOnly = false,\n      size = 'md',\n      stepperButtonLabels: stepperButtonLabelsProp,\n      disabledTooltipContent: disabledTooltipContentProp,\n      className,\n      appearance = 'standard',\n      emphasis,\n      ...rest\n    },\n    ref\n  ): JSX.Element => {\n    const [internalValue, setInternalValue] = React.useState<number>(\n      value || defaultValue\n    )\n    React.useEffect(() => {\n      // Update the internal value to match what is passed in.\n      if (typeof value !== 'undefined') setInternalValue(value)\n    }, [value])\n\n    const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    const stepperButtonLabels = {\n      increment: 'increment',\n      decrement: 'decrement',\n      ...stepperButtonLabelsProp\n    }\n\n    const disabledTooltipContent = {\n      decrement: `Cannot enter values below ${min}`,\n      increment: `Cannot enter values above ${max}`,\n      ...disabledTooltipContentProp\n    }\n\n    const isAtMax = internalValue >= max\n    const isAtMin = internalValue <= min\n\n    const clamp = React.useCallback(\n      (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n      [max, min]\n    )\n\n    const updateValue = React.useCallback(\n      (newValue: number) => {\n        onValueChange?.(newValue)\n        setInternalValue(newValue)\n      },\n      [onValueChange]\n    )\n\n    const onInputChange = React.useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n        updateValue(parsedValue)\n      },\n      [updateValue]\n    )\n\n    const increment = React.useCallback(() => {\n      if (isAtMax || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) + step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n    const decrement = React.useCallback(() => {\n      if (isAtMin || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) - step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n    const onKeyDown = React.useCallback(\n      (event: React.KeyboardEvent) => {\n        if (event.nativeEvent.isComposing) return\n\n        /**\n         * Keyboard Accessibility\n         *\n         * We want to increase or decrease the input's value\n         * based on if the user the arrow keys.\n         *\n         * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n         */\n        const eventKey = event.key\n\n        const keyMap: Record<string, React.KeyboardEventHandler> = {\n          ArrowUp: increment,\n          ArrowRight: increment,\n          ArrowDown: decrement,\n          ArrowLeft: decrement,\n          Home: () => updateValue(min),\n          End: () => updateValue(max)\n        }\n\n        const action = keyMap[eventKey]\n\n        if (action) {\n          event.preventDefault()\n          action(event)\n        }\n      },\n      [increment, decrement, updateValue, min, max]\n    )\n\n    const hasError = internalValue < min || internalValue > max\n    const {\n      state: externalState,\n      'aria-invalid': externalAriaInvalid,\n      ...restProps\n    } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n    const inputProps: React.ComponentProps<typeof Input> = {\n      type: 'number',\n      value: internalValue,\n      ...restProps,\n      onChange: onInputChange,\n      onKeyDown,\n      size,\n      appearance,\n      state: externalState || (hasError ? 'error' : undefined),\n      'aria-invalid': externalAriaInvalid || hasError || undefined,\n      className: clsx(\n        'rounded-none',\n        'w-16',\n        '[&_>_input]:text-center',\n        'disabled:opacity-30',\n        'disabled:pointer-events-none',\n        emphasis === 'bold' && [\n          'rounded-1',\n          '[&_>_input[aria-invalid=true]]:text-danger',\n          'focus-within:[&_>_input]:text-grey-1000'\n        ],\n        emphasis === 'bold' &&\n          appearance === 'standard' && [\n            'border-none',\n            '[&:has([aria-invalid=true])]:border-2',\n            '[&:has([aria-invalid=true])]:border-danger',\n            'focus-within:border-2',\n            'focus-within:border-blue-800'\n          ]\n      ),\n      ref: inputRef,\n      readOnly: isReadOnly,\n      disabled: isDisabled,\n      'aria-valuemin': min,\n      'aria-valuemax': max,\n      'aria-valuenow': internalValue,\n      role: 'spinbutton'\n    }\n\n    return (\n      <NumberInputContainer\n        appearance={appearance}\n        emphasis={emphasis}\n        className={className}\n      >\n        <NumberInputStepper\n          onClick={decrement}\n          icon={Minus}\n          className={clsx(\n            emphasis !== 'bold' && 'border-r-none rounded-r-none'\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\n          emphasis={emphasis}\n          disabled={isAtMin || isDisabled}\n          showTooltip={isAtMin && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.decrement}\n          label={stepperButtonLabels.decrement}\n        />\n        <Input {...inputProps} />\n        <NumberInputStepper\n          onClick={increment}\n          icon={Plus}\n          className={clsx(\n            emphasis !== 'bold' && 'border-l-none rounded-l-none'\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\n          emphasis={emphasis}\n          disabled={isAtMax || isDisabled}\n          showTooltip={isAtMax && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.increment}\n          label={stepperButtonLabels.increment}\n        />\n      </NumberInputContainer>\n    )\n  }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInputContainer","styled","NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","className","appearance","emphasis","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","hasError","externalState","externalAriaInvalid","restProps","inputProps","clsx","NumberInputStepper","Minus","Input","Plus"],"mappings":"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"}

package/dist/components/pagination/Pagination.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{ColorScheme as P}from"../../experiments/color-scheme/ColorScheme.js";import{Flex as p}from"../flex/Flex.js";import{PaginationProvider as b}from"./pagination-context/PaginationContext.js";import{VisibleElementsAmount as u}from"./pagination.constants.js";import{PaginationItems as C}from"./PaginationItems.js";import{PaginationPopover as E}from"./PaginationPopover.js";const t=({colorScheme:a,onSelectedPageChange:n,selectedPage:i,visibleElementsCount:l=u.LESS,pagesCount:o,indicatedPages:r=[],disabledPages:m=[],onItemHover:s=()=>null,labels:g={},children:c,...d})=>o?e.createElement(b,{onSelectedPageChange:n,selectedPage:i,visibleElementsCount:l,pagesCount:o,indicatedPages:r,disabledPages:m,onItemHover:s,labels:g},e.createElement(P,{base:"grey1",accent:"primary1",...a,asChild:!0},e.createElement(p,{gap:1,...d},c||e.createElement(C,null)))):null,f=Object.assign(t,{Popover:E});t.displayName="Pagination";export{f as Pagination};
+import p from"clsx";import*as e from"react";import{ColorScheme as P}from"../../experiments/color-scheme/ColorScheme.js";import{PaginationProvider as b}from"./pagination-context/PaginationContext.js";import{VisibleElementsAmount as f}from"./pagination.constants.js";import{PaginationItems as u}from"./PaginationItems.js";import{PaginationPopover as v}from"./PaginationPopover.js";const t=({colorScheme:n,onSelectedPageChange:i,selectedPage:l,visibleElementsCount:m=f.LESS,pagesCount:a,indicatedPages:s=[],disabledPages:r=[],onItemHover:c=()=>null,labels:g={},children:d,...o})=>a?e.createElement(b,{onSelectedPageChange:i,selectedPage:l,visibleElementsCount:m,pagesCount:a,indicatedPages:s,disabledPages:r,onItemHover:c,labels:g},e.createElement(P,{base:"grey1",accent:"primary1",...n,asChild:!0},e.createElement("div",{className:p("flex","gap-1",o.className),...o},d||e.createElement(u,null)))):null,C=Object.assign(t,{Popover:v});t.displayName="Pagination";export{C as Pagination};
 //# sourceMappingURL=Pagination.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme/ColorScheme'\nimport { Flex } from '../flex/Flex'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationItems } from './PaginationItems'\nimport { PaginationPopover } from './PaginationPopover'\nimport type { PaginationProps, PaginationProviderProps } from './types'\n\nconst PaginationComponent = ({\n  colorScheme,\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = [],\n  disabledPages = [],\n  onItemHover = () => null,\n  labels = {},\n  children,\n  ...rest\n}: PaginationProps) => {\n  if (!pagesCount) return null\n\n  const paginationProviderProps: PaginationProviderProps = {\n    onSelectedPageChange,\n    selectedPage,\n    visibleElementsCount,\n    pagesCount,\n    indicatedPages,\n    disabledPages,\n    onItemHover,\n    labels\n  }\n\n  return (\n    <PaginationProvider {...paginationProviderProps}>\n      <ColorScheme base=\"grey1\" accent=\"primary1\" {...colorScheme} asChild>\n        <Flex gap={1} {...rest}>\n          {children || <PaginationItems />}\n        </Flex>\n      </ColorScheme>\n    </PaginationProvider>\n  )\n}\n\nexport const Pagination = Object.assign(PaginationComponent, {\n  Popover: PaginationPopover\n})\n\nPaginationComponent.displayName = 'Pagination'\n"],"names":["PaginationComponent","colorScheme","onSelectedPageChange","selectedPage","visibleElementsCount","VisibleElementsAmount","pagesCount","indicatedPages","disabledPages","onItemHover","labels","children","rest","React","PaginationProvider","ColorScheme","Flex","PaginationItems","Pagination","PaginationPopover"],"mappings":"8YAUA,MAAMA,EAAsB,CAAC,CAC3B,YAAAC,EACA,qBAAAC,EACA,aAAAC,EACA,qBAAAC,EAAuBC,EAAsB,KAC7C,WAAAC,EACA,eAAAC,EAAiB,GACjB,cAAAC,EAAgB,GAChB,YAAAC,EAAc,IAAM,KACpB,OAAAC,EAAS,CAAA,EACT,SAAAC,EACA,GAAGC,CACL,IACON,EAcHO,EAAA,cAACC,EAAA,CAXD,qBAAAZ,EACA,aAAAC,EACA,qBAAAC,EACA,WAAAE,EACA,eAAAC,EACA,cAAAC,EACA,YAAAC,EACA,OAAAC,CAKEG,EAAAA,EAAA,cAACE,EAAA,CAAY,KAAK,QAAQ,OAAO,WAAY,GAAGd,EAAa,QAAO,EAAA,EAClEY,EAAA,cAACG,EAAA,CAAK,IAAK,EAAI,GAAGJ,CAAAA,EACfD,GAAYE,EAAA,cAACI,EAAA,IAAgB,CAChC,CACF,CACF,EApBsB,KAwBbC,EAAa,OAAO,OAAOlB,EAAqB,CAC3D,QAASmB,CACX,CAAC,EAEDnB,EAAoB,YAAc"}
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme/ColorScheme'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationItems } from './PaginationItems'\nimport { PaginationPopover } from './PaginationPopover'\nimport type { PaginationProps, PaginationProviderProps } from './types'\n\nconst PaginationComponent = ({\n  colorScheme,\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = [],\n  disabledPages = [],\n  onItemHover = () => null,\n  labels = {},\n  children,\n  ...rest\n}: PaginationProps) => {\n  if (!pagesCount) return null\n\n  const paginationProviderProps: PaginationProviderProps = {\n    onSelectedPageChange,\n    selectedPage,\n    visibleElementsCount,\n    pagesCount,\n    indicatedPages,\n    disabledPages,\n    onItemHover,\n    labels\n  }\n\n  return (\n    <PaginationProvider {...paginationProviderProps}>\n      <ColorScheme base=\"grey1\" accent=\"primary1\" {...colorScheme} asChild>\n        <div className={clsx('flex', 'gap-1', rest.className)} {...rest}>\n          {children || <PaginationItems />}\n        </div>\n      </ColorScheme>\n    </PaginationProvider>\n  )\n}\n\nexport const Pagination = Object.assign(PaginationComponent, {\n  Popover: PaginationPopover\n})\n\nPaginationComponent.displayName = 'Pagination'\n"],"names":["PaginationComponent","colorScheme","onSelectedPageChange","selectedPage","visibleElementsCount","VisibleElementsAmount","pagesCount","indicatedPages","disabledPages","onItemHover","labels","children","rest","React","PaginationProvider","ColorScheme","clsx","PaginationItems","Pagination","PaginationPopover"],"mappings":"2XAUA,MAAMA,EAAsB,CAAC,CAC3B,YAAAC,EACA,qBAAAC,EACA,aAAAC,EACA,qBAAAC,EAAuBC,EAAsB,KAC7C,WAAAC,EACA,eAAAC,EAAiB,CAAC,EAClB,cAAAC,EAAgB,CAChB,EAAA,YAAAC,EAAc,IAAM,KACpB,OAAAC,EAAS,CAAA,EACT,SAAAC,EACA,GAAGC,CACL,IACON,EAcHO,EAAA,cAACC,EAAA,CAXD,qBAAAZ,EACA,aAAAC,EACA,qBAAAC,EACA,WAAAE,EACA,eAAAC,EACA,cAAAC,EACA,YAAAC,EACA,OAAAC,CACF,EAIIG,EAAA,cAACE,EAAA,CAAY,KAAK,QAAQ,OAAO,WAAY,GAAGd,EAAa,QAAO,EAClEY,EAAAA,EAAA,cAAC,MAAA,CAAI,UAAWG,EAAK,OAAQ,QAASJ,EAAK,SAAS,EAAI,GAAGA,CACxDD,EAAAA,GAAYE,EAAA,cAACI,EAAA,IAAgB,CAChC,CACF,CACF,EApBsB,KAwBbC,EAAa,OAAO,OAAOlB,EAAqB,CAC3D,QAASmB,CACX,CAAC,EAEDnB,EAAoB,YAAc"}

package/dist/components/pagination/PaginationPopover.js

@@ -1,2 +1,2 @@
-import{Ellypsis as s}from"@atom-learning/icons";import e from"react";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Flex as g}from"../flex/Flex.js";import{Icon as f}from"../icon/Icon.js";import{Popover as o}from"../popover/Popover.js";import{PaginationPage as u}from"./PaginationPage.js";import{usePagination as d}from"./usePagination.js";const E=({children:i})=>{const{pagesCount:p,labels:r}=d(),a=Array.from({length:p},(t,m)=>m+1),[l,n]=e.useState(!1);return e.createElement(o,{open:l,onOpenChange:n,defaultOpen:!1},e.createElement(o.Trigger,{asChild:!0},i||e.createElement(c,{hasTooltip:!1,size:"md",theme:"neutral",label:(r==null?void 0:r.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},e.createElement(f,{is:s}))),e.createElement(o.Content,{size:"md",showCloseButton:!1,className:"p-0"},e.createElement(g,{className:"flex flex-wrap justify-center gap-1 p-4"},a==null?void 0:a.map(t=>e.createElement(u,{key:t,pageNumber:t,onClick:()=>n(!1)})))))};export{E as PaginationPopover};
+import{Ellypsis as s}from"@atom-learning/icons";import e from"react";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as g}from"../icon/Icon.js";import{Popover as o}from"../popover/Popover.js";import{PaginationPage as f}from"./PaginationPage.js";import{usePagination as u}from"./usePagination.js";const d=({children:i})=>{const{pagesCount:l,labels:r}=u(),a=Array.from({length:l},(t,m)=>m+1),[p,n]=e.useState(!1);return e.createElement(o,{open:p,onOpenChange:n,defaultOpen:!1},e.createElement(o.Trigger,{asChild:!0},i||e.createElement(c,{hasTooltip:!1,size:"md",theme:"neutral",label:(r==null?void 0:r.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},e.createElement(g,{is:s}))),e.createElement(o.Content,{size:"md",showCloseButton:!1,className:"p-0"},e.createElement("div",{className:"flex flex-wrap justify-center gap-1 p-4"},a==null?void 0:a.map(t=>e.createElement(f,{key:t,pageNumber:t,onClick:()=>n(!1)})))))};export{d as PaginationPopover};
 //# sourceMappingURL=PaginationPopover.js.map

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

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

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

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

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

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

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

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

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

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

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

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

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 '~/styled'\n\nimport { Dismissible } from '../dismissible'\nimport { Flex } from '../flex/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    'shrink-0',\n    'min-h-12',\n    'p-4',\n    'border',\n    'border-white'\n  ],\n  variants: {\n    theme: {\n      success: ['bg-success-light', 'text-success-dark'],\n      warning: ['bg-warning-light', 'text-warning-text'],\n      error: ['bg-danger-light', 'text-danger-dark'],\n      neutral: ['bg-grey-100', 'text-grey-1000'],\n      info: ['bg-info-light', 'text-info-dark']\n    },\n    hasIcon: {\n      true: ['pl-10']\n    },\n    hasDismiss: {\n      true: ['pr-12']\n    }\n  }\n})\n\nconst SectionMessageRoot = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledSectionMessage> & {\n  className?: string\n}) => {\n  const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n  return (\n    <StyledSectionMessage\n      {...rest}\n      theme={theme}\n      hasIcon={hasIcon}\n      hasDismiss={hasDismiss}\n    >\n      <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 type SectionMessageProps = React.ComponentProps<\n  typeof SectionMessageRoot\n> & {\n  theme?: SectionMessageTheme\n}\n\nexport const SectionMessage = ({\n  theme = 'info',\n  ...rest\n}: SectionMessageProps) => (\n  <TooltipProvider>\n    <SectionMessageProvider theme={theme}>\n      <SectionMessageRoot {...rest} />\n    </SectionMessageProvider>\n  </TooltipProvider>\n)\n\nSectionMessage.Title = SectionMessageTitle\nSectionMessage.Description = SectionMessageDescription\nSectionMessage.Icon = SectionMessageIcon\nSectionMessage.Dismiss = SectionMessageDismiss\nSectionMessage.Content = SectionMessageContent\nSectionMessage.Actions = SectionMessageActions\n"],"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,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,IAEM,CACJ,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,WAAAC,CAAW,EAAIC,IAEvC,OACEC,EAAA,cAACV,EAAA,CACE,GAAGK,EACJ,MAAOC,EACP,QAASC,EACT,WAAYC,GAEZE,EAAA,cAACC,EAAA,CAAK,IAAK,EAAG,QAAQ,gBAAgB,UAAU,QAC7CP,CACH,CACF,CAEJ,EAeaQ,EAAiB,CAAC,CAC7B,MAAAN,EAAQ,OACR,GAAGD,CACL,IACEK,EAAA,cAACG,EAAA,KACCH,EAAA,cAACI,EAAA,CAAuB,MAAOR,CAC7BI,EAAAA,EAAA,cAACP,EAAA,CAAoB,GAAGE,CAAM,CAAA,CAChC,CACF,EAGFO,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 {\n  SectionMessageProvider,\n  useSectionMessageContext\n} from './SectionMessageContext'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n  SectionMessageActions,\n  SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n  base: [\n    'relative',\n    'rounded-md',\n    'flex',\n    'shrink-0',\n    'min-h-12',\n    'p-4',\n    'border',\n    'border-white'\n  ],\n  variants: {\n    theme: {\n      success: ['bg-success-light', 'text-success-dark'],\n      warning: ['bg-warning-light', 'text-warning-text'],\n      error: ['bg-danger-light', 'text-danger-dark'],\n      neutral: ['bg-grey-100', 'text-grey-1000'],\n      info: ['bg-info-light', 'text-info-dark']\n    },\n    hasIcon: {\n      true: ['pl-10']\n    },\n    hasDismiss: {\n      true: ['pr-12']\n    }\n  }\n})\n\nconst SectionMessageRoot = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledSectionMessage> & {\n  className?: string\n}) => {\n  const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n  return (\n    <StyledSectionMessage\n      {...rest}\n      theme={theme}\n      hasIcon={hasIcon}\n      hasDismiss={hasDismiss}\n    >\n      <div className=\"flex grow justify-between gap-3\">{children}</div>\n    </StyledSectionMessage>\n  )\n}\n\nexport type SectionMessageTheme =\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral'\n  | 'info'\n\nexport type SectionMessageProps = React.ComponentProps<\n  typeof SectionMessageRoot\n> & {\n  theme?: SectionMessageTheme\n}\n\nexport const SectionMessage = ({\n  theme = 'info',\n  ...rest\n}: SectionMessageProps) => (\n  <TooltipProvider>\n    <SectionMessageProvider theme={theme}>\n      <SectionMessageRoot {...rest} />\n    </SectionMessageProvider>\n  </TooltipProvider>\n)\n\nSectionMessage.Title = SectionMessageTitle\nSectionMessage.Description = SectionMessageDescription\nSectionMessage.Icon = SectionMessageIcon\nSectionMessage.Dismiss = SectionMessageDismiss\nSectionMessage.Content = SectionMessageContent\nSectionMessage.Actions = SectionMessageActions\n"],"names":["StyledSectionMessage","styled","Dismissible","SectionMessageRoot","children","rest","theme","hasIcon","hasDismiss","useSectionMessageContext","React","SectionMessage","TooltipProvider","SectionMessageProvider","SectionMessageTitle","SectionMessageDescription","SectionMessageIcon","SectionMessageDismiss","SectionMessageContent","SectionMessageActions"],"mappings":"unBAmBA,MAAMA,EAAuBC,EAAOC,EAAa,CAC/C,KAAM,CACJ,WACA,aACA,OACA,WACA,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,IAEM,CACJ,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,WAAAC,CAAW,EAAIC,IAEvC,OACEC,EAAA,cAACV,EAAA,CACE,GAAGK,EACJ,MAAOC,EACP,QAASC,EACT,WAAYC,CAAAA,EAEZE,EAAA,cAAC,MAAA,CAAI,UAAU,iCAAA,EAAmCN,CAAS,CAC7D,CAEJ,EAeaO,EAAiB,CAAC,CAC7B,MAAAL,EAAQ,OACR,GAAGD,CACL,IACEK,EAAA,cAACE,EAAA,KACCF,EAAA,cAACG,EAAA,CAAuB,MAAOP,GAC7BI,EAAA,cAACP,EAAA,CAAoB,GAAGE,EAAM,CAChC,CACF,EAGFM,EAAe,MAAQG,EACvBH,EAAe,YAAcI,EAC7BJ,EAAe,KAAOK,EACtBL,EAAe,QAAUM,EACzBN,EAAe,QAAUO,EACzBP,EAAe,QAAUQ"}

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

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Flex } from '../flex/Flex';
-export declare const SectionMessageContent: ({ className, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
-    className?: string;
-}) => JSX.Element;
-export declare const SectionMessageActions: ({ className, ...rest }: React.ComponentProps<typeof Flex> & {
-    className?: string;
-}) => JSX.Element;
+export declare const SectionMessageContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, never> & {
+    as?: React.ElementType;
+}>;
+export declare const SectionMessageActions: ({ className, ...rest }: React.ComponentProps<"div">) => React.JSX.Element;

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

@@ -1,2 +1,2 @@
-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};
+import s from"clsx";import e from"react";import{styled as l}from"../../styled.js";const m=l("div",{base:["max-w-full","shrink-0","pt-0.5","*:not-last:mb-2"]}),o=({className:t,...a})=>e.createElement("div",{className:s("max-w-full","shrink-0",t)},e.createElement("div",{className:"flex flex-wrap gap-3",...a}));export{o as SectionMessageActions,m 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 clsx from 'clsx'\nimport React from 'react'\n\nimport { Flex } from '../flex/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"}
+{"version":3,"file":"SectionMessageLayout.js","sources":["../../../src/components/section-message/SectionMessageLayout.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const SectionMessageContent = styled('div', {\n  base: ['max-w-full', 'shrink-0', 'pt-0.5', '*:not-last:mb-2']\n})\n\nexport const SectionMessageActions = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div className={clsx('max-w-full', 'shrink-0', className)}>\n    <div className=\"flex flex-wrap gap-3\" {...rest} />\n  </div>\n)\n"],"names":["SectionMessageContent","styled","SectionMessageActions","className","rest","React","clsx"],"mappings":"kFAKO,MAAMA,EAAwBC,EAAO,MAAO,CACjD,KAAM,CAAC,aAAc,WAAY,SAAU,iBAAiB,CAC9D,CAAC,EAEYC,EAAwB,CAAC,CACpC,UAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAAC,MAAA,CAAI,UAAWC,EAAK,aAAc,WAAYH,CAAS,GACtDE,EAAA,cAAC,OAAI,UAAU,uBAAwB,GAAGD,CAAAA,CAAM,CAClD"}

package/dist/components/side-bar/SideBar.d.ts

@@ -13,9 +13,9 @@ type SideBarProps = React.ComponentProps<typeof Root> & {
 } & React.ComponentProps<typeof Theme>;
 export declare const SideBar: {
     ({ theme, className, children, type, offset, style, ...rest }: SideBarProps): React.JSX.Element;
-    Brand: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    Brand: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
         ref?: ((instance: HTMLAnchorElement | null) => void) | React.RefObject<HTMLAnchorElement> | null | undefined;
-    }, never> & {
+    } & {
         as?: React.ElementType;
     }>;
     BrandLogo: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {