@atom-learning/components 6.2.2 → 6.4.0

package/README.md

@@ -19,14 +19,14 @@ yarn add @atom-learning/components
 Import and use in your project:
 
 ```jsx
-import { Box, Heading, Text } from '@atom-learning/components'
+import { Heading, Text } from '@atom-learning/components'
 
 const Component = () => {
   return (
-    <Box as="article">
+    <article>
       <Heading className="mb-3">This is a heading</Heading>
       <Text>This is a paragraph of text</Text>
-    </Box>
+    </article>
   )
 }
 ```

package/dist/components/accordion/AccordionContent.js

@@ -1,2 +1,2 @@
-import{Content as n}from"@radix-ui/react-accordion";import e from"react";import{styled as r}from"../../styled.js";import{CSSWrapper as s}from"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";const d=r(n,{base:["border-none","w-full","bg-(--base-1)","overflow-hidden","data-[state=open]:rounded-b-sm","data-[state=open]:rounded-t-none","motion-safe:data-[state=open]:animate-accordion-open","motion-safe:data-[state=closed]:animate-accordion-close"]}),m=({children:o,className:t,...a})=>e.createElement(d,{...a},e.createElement(s,{className:t},o));export{m as AccordionContent};
+import{Content as n}from"@radix-ui/react-accordion";import e from"react";import{styled as r}from"../../styled.js";import{CSSWrapper as s}from"../../utilities/css-wrapper/CSSWrapper.js";const d=r(n,{base:["w-full","bg-(--base-1)","overflow-hidden","data-[state=open]:rounded-b-sm","data-[state=open]:rounded-t-none","motion-safe:data-[state=open]:animate-accordion-open","motion-safe:data-[state=closed]:animate-accordion-close"]}),m=({children:o,className:t,...a})=>e.createElement(d,{...a},e.createElement(s,{className:t},o));export{m as AccordionContent};
 //# sourceMappingURL=AccordionContent.js.map

package/dist/components/accordion/AccordionContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.js","sources":["../../../src/components/accordion/AccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { CSSWrapper } from '~/utilities'\n\nconst StyledContent = styled(Content, {\n  base: [\n    'border-none',\n    'w-full',\n    'bg-(--base-1)',\n    'overflow-hidden',\n    'data-[state=open]:rounded-b-sm',\n    'data-[state=open]:rounded-t-none',\n    'motion-safe:data-[state=open]:animate-accordion-open',\n    'motion-safe:data-[state=closed]:animate-accordion-close'\n  ]\n})\n\nexport const AccordionContent = ({\n  children,\n  className,\n  ...remainingProps\n}: React.ComponentProps<typeof StyledContent>) => (\n  <StyledContent {...remainingProps}>\n    <CSSWrapper className={className}>{children}</CSSWrapper>\n  </StyledContent>\n)\n"],"names":["StyledContent","styled","Content","AccordionContent","children","className","remainingProps","React","CSSWrapper"],"mappings":"0PAMA,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,KAAM,CACJ,cACA,SACA,gBACA,kBACA,iCACA,mCACA,uDACA,yDACF,CACF,CAAC,EAEYC,EAAmB,CAAC,CAC/B,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACP,EAAA,CAAe,GAAGM,CACjBC,EAAAA,EAAA,cAACC,EAAA,CAAW,UAAWH,CAAYD,EAAAA,CAAS,CAC9C"}
+{"version":3,"file":"AccordionContent.js","sources":["../../../src/components/accordion/AccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { CSSWrapper } from '~/utilities/css-wrapper/CSSWrapper'\n\nconst StyledContent = styled(Content, {\n  base: [\n    'w-full',\n    'bg-(--base-1)',\n    'overflow-hidden',\n    'data-[state=open]:rounded-b-sm',\n    'data-[state=open]:rounded-t-none',\n    'motion-safe:data-[state=open]:animate-accordion-open',\n    'motion-safe:data-[state=closed]:animate-accordion-close'\n  ]\n})\n\nexport const AccordionContent = ({\n  children,\n  className,\n  ...remainingProps\n}: React.ComponentProps<typeof StyledContent>) => (\n  <StyledContent {...remainingProps}>\n    <CSSWrapper className={className}>{children}</CSSWrapper>\n  </StyledContent>\n)\n"],"names":["StyledContent","styled","Content","AccordionContent","children","className","remainingProps","React","CSSWrapper"],"mappings":"yLAMA,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,KAAM,CACJ,SACA,gBACA,kBACA,iCACA,mCACA,uDACA,yDACF,CACF,CAAC,EAEYC,EAAmB,CAAC,CAC/B,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACP,EAAA,CAAe,GAAGM,CACjBC,EAAAA,EAAA,cAACC,EAAA,CAAW,UAAWH,CAAYD,EAAAA,CAAS,CAC9C"}

package/dist/components/accordion/AccordionTrigger.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TcolorScheme } from '../../experiments/color-scheme';
+import { TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
 declare const StyledTrigger: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "arrowPosition"> & {
     arrowPosition?: "left" | "right" | undefined;
 } & {

package/dist/components/accordion/AccordionTrigger.js

@@ -1,2 +1,2 @@
-import{ChevronDown as s}from"@atom-learning/icons";import{Trigger as d}from"@radix-ui/react-accordion";import e from"react";import{ColorScheme as l}from"../../experiments/color-scheme/ColorScheme.js";import{styled as r}from"../../styled.js";import{Icon as c}from"../icon/Icon.js";const b=r(c,{base:["transition-transform","duration-300","[[data-state=open]>&]:rotate-180","[[data-state=closed]>&]:rotate-0"]}),p=r(d,{base:["border-none","py-3","px-4","w-full","flex","justify-between","items-center","cursor-pointer","bg-(--interactive-2)","text-(--interactive-foreground)","disabled:cursor-not-allowed","disabled:opacity-30","not-disabled:active:bg-(--interactive-3)","not-disabled:focus-visible:bg-(--interactive-3)","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]","not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:z-1","not-disabled:hover:bg-(--interactive-3)","data-[state=open]:rounded-b-none","data-[state=open]:rounded-t-sm","data-[state=closed]:rounded-sm"],variants:{arrowPosition:{left:["flex-row-reverse","gap-2","justify-end"],right:[]}}}),m=({children:t,colorScheme:i={},asChild:o,arrowPosition:a="right",...n})=>e.createElement(l,{asChild:!0,accent:"grey1",interactive:"loContrast",...i},e.createElement(p,{asChild:o,arrowPosition:a,...n},o?t:e.createElement(e.Fragment,null,t,e.createElement(b,{is:s,"data-testid":"accordion-chevron"}))));export{m as AccordionTrigger};
+import{ChevronDown as s}from"@atom-learning/icons";import{Trigger as d}from"@radix-ui/react-accordion";import e from"react";import{ColorScheme as l}from"../../experiments/color-scheme/ColorScheme.js";import{styled as i}from"../../styled.js";import{Icon as c}from"../icon/Icon.js";const b=i(c,{base:["transition-transform","duration-300","[[data-state=open]>&]:rotate-180","[[data-state=closed]>&]:rotate-0"]}),p=i(d,{base:["py-3","px-4","w-full","flex","justify-between","items-center","cursor-pointer","bg-(--interactive-2)","text-(--interactive-foreground)","disabled:cursor-not-allowed","disabled:opacity-30","not-disabled:active:bg-(--interactive-3)","not-disabled:focus-visible:bg-(--interactive-3)","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]","not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:z-1","not-disabled:hover:bg-(--interactive-3)","data-[state=open]:rounded-b-none","data-[state=open]:rounded-t-sm","data-[state=closed]:rounded-sm"],variants:{arrowPosition:{left:["flex-row-reverse","gap-2","justify-end"],right:[]}}}),m=({children:t,colorScheme:r={},asChild:o,arrowPosition:a="right",...n})=>e.createElement(l,{asChild:!0,accent:"grey1",interactive:"loContrast",...r},e.createElement(p,{asChild:o,arrowPosition:a,...n},o?t:e.createElement(e.Fragment,null,t,e.createElement(b,{is:s,"data-testid":"accordion-chevron"}))));export{m as AccordionTrigger};
 //# sourceMappingURL=AccordionTrigger.js.map

package/dist/components/accordion/AccordionTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionTrigger.js","sources":["../../../src/components/accordion/AccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon'\n\nconst RotatingIcon = styled(Icon, {\n  base: [\n    'transition-transform',\n    'duration-300',\n    '[[data-state=open]>&]:rotate-180',\n    '[[data-state=closed]>&]:rotate-0'\n  ]\n})\n\nconst StyledTrigger = styled(Trigger, {\n  base: [\n    'border-none',\n    'py-3',\n    'px-4',\n    'w-full',\n    'flex',\n    'justify-between',\n    'items-center',\n    'cursor-pointer',\n    'bg-(--interactive-2)',\n    'text-(--interactive-foreground)',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:bg-(--interactive-3)',\n    'not-disabled:focus-visible:bg-(--interactive-3)',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:bg-(--interactive-3)',\n    'data-[state=open]:rounded-b-none',\n    'data-[state=open]:rounded-t-sm',\n    'data-[state=closed]:rounded-sm'\n  ],\n  variants: {\n    arrowPosition: {\n      left: ['flex-row-reverse', 'gap-2', 'justify-end'],\n      right: []\n    }\n  }\n})\n\nexport const AccordionTrigger = ({\n  children,\n  colorScheme = {},\n  asChild,\n  arrowPosition = 'right',\n  ...remainingProps\n}: React.ComponentProps<typeof StyledTrigger> & {\n  colorScheme?: TcolorScheme\n}) => (\n  <ColorScheme asChild accent=\"grey1\" interactive=\"loContrast\" {...colorScheme}>\n    <StyledTrigger\n      asChild={asChild}\n      arrowPosition={arrowPosition}\n      {...remainingProps}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {children}\n          <RotatingIcon is={ChevronDown} data-testid=\"accordion-chevron\" />\n        </>\n      )}\n    </StyledTrigger>\n  </ColorScheme>\n)\n"],"names":["RotatingIcon","styled","Icon","StyledTrigger","Trigger","AccordionTrigger","children","colorScheme","asChild","arrowPosition","remainingProps","React","ColorScheme","ChevronDown"],"mappings":"wRASA,MAAMA,EAAeC,EAAOC,EAAM,CAChC,KAAM,CACJ,uBACA,eACA,mCACA,kCACF,CACF,CAAC,EAEKC,EAAgBF,EAAOG,EAAS,CACpC,KAAM,CACJ,cACA,OACA,OACA,SACA,OACA,kBACA,eACA,iBACA,uBACA,kCACA,8BACA,sBACA,2CACA,kDACA,0CACA,sCACA,+EACA,4DACA,iCACA,0CACA,mCACA,iCACA,gCACF,EACA,SAAU,CACR,cAAe,CACb,KAAM,CAAC,mBAAoB,QAAS,aAAa,EACjD,MAAO,EACT,CACF,CACF,CAAC,EAEYC,EAAmB,CAAC,CAC/B,SAAAC,EACA,YAAAC,EAAc,CAAA,EACd,QAAAC,EACA,cAAAC,EAAgB,QAChB,GAAGC,CACL,IAGEC,EAAA,cAACC,EAAA,CAAY,QAAO,GAAC,OAAO,QAAQ,YAAY,aAAc,GAAGL,GAC/DI,EAAA,cAACR,EAAA,CACC,QAASK,EACT,cAAeC,EACd,GAAGC,CAEHF,EAAAA,EACCF,EAEAK,EAAA,cAAAA,EAAA,SACGL,KAAAA,EACDK,EAAA,cAACX,EAAA,CAAa,GAAIa,EAAa,cAAY,mBAAoB,CAAA,CACjE,CAEJ,CACF"}
+{"version":3,"file":"AccordionTrigger.js","sources":["../../../src/components/accordion/AccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport {\n  ColorScheme,\n  TcolorScheme\n} from '~/experiments/color-scheme/ColorScheme'\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\n\nconst RotatingIcon = styled(Icon, {\n  base: [\n    'transition-transform',\n    'duration-300',\n    '[[data-state=open]>&]:rotate-180',\n    '[[data-state=closed]>&]:rotate-0'\n  ]\n})\n\nconst StyledTrigger = styled(Trigger, {\n  base: [\n    'py-3',\n    'px-4',\n    'w-full',\n    'flex',\n    'justify-between',\n    'items-center',\n    'cursor-pointer',\n    'bg-(--interactive-2)',\n    'text-(--interactive-foreground)',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:bg-(--interactive-3)',\n    'not-disabled:focus-visible:bg-(--interactive-3)',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:bg-(--interactive-3)',\n    'data-[state=open]:rounded-b-none',\n    'data-[state=open]:rounded-t-sm',\n    'data-[state=closed]:rounded-sm'\n  ],\n  variants: {\n    arrowPosition: {\n      left: ['flex-row-reverse', 'gap-2', 'justify-end'],\n      right: []\n    }\n  }\n})\n\nexport const AccordionTrigger = ({\n  children,\n  colorScheme = {},\n  asChild,\n  arrowPosition = 'right',\n  ...remainingProps\n}: React.ComponentProps<typeof StyledTrigger> & {\n  colorScheme?: TcolorScheme\n}) => (\n  <ColorScheme asChild accent=\"grey1\" interactive=\"loContrast\" {...colorScheme}>\n    <StyledTrigger\n      asChild={asChild}\n      arrowPosition={arrowPosition}\n      {...remainingProps}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {children}\n          <RotatingIcon is={ChevronDown} data-testid=\"accordion-chevron\" />\n        </>\n      )}\n    </StyledTrigger>\n  </ColorScheme>\n)\n"],"names":["RotatingIcon","styled","Icon","StyledTrigger","Trigger","AccordionTrigger","children","colorScheme","asChild","arrowPosition","remainingProps","React","ColorScheme","ChevronDown"],"mappings":"wRAYA,MAAMA,EAAeC,EAAOC,EAAM,CAChC,KAAM,CACJ,uBACA,eACA,mCACA,kCACF,CACF,CAAC,EAEKC,EAAgBF,EAAOG,EAAS,CACpC,KAAM,CACJ,OACA,OACA,SACA,OACA,kBACA,eACA,iBACA,uBACA,kCACA,8BACA,sBACA,2CACA,kDACA,0CACA,sCACA,+EACA,4DACA,iCACA,0CACA,mCACA,iCACA,gCACF,EACA,SAAU,CACR,cAAe,CACb,KAAM,CAAC,mBAAoB,QAAS,aAAa,EACjD,MAAO,CAAA,CACT,CACF,CACF,CAAC,EAEYC,EAAmB,CAAC,CAC/B,SAAAC,EACA,YAAAC,EAAc,CACd,EAAA,QAAAC,EACA,cAAAC,EAAgB,QAChB,GAAGC,CACL,IAGEC,EAAA,cAACC,EAAA,CAAY,QAAO,GAAC,OAAO,QAAQ,YAAY,aAAc,GAAGL,GAC/DI,EAAA,cAACR,EAAA,CACC,QAASK,EACT,cAAeC,EACd,GAAGC,CAEHF,EAAAA,EACCF,EAEAK,EAAA,cAAAA,EAAA,SACGL,KAAAA,EACDK,EAAA,cAACX,EAAA,CAAa,GAAIa,EAAa,cAAY,mBAAoB,CAAA,CACjE,CAEJ,CACF"}

package/dist/components/action-icon/ActionIcon.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { NavigatorActions } from '../../types';
-import { Override } from '../../utilities';
-import type { TOptionalTooltipWrapperProps } from '../../utilities/optional-tooltip-wrapper';
+import { NavigatorActions } from '../../types/navigatorActions.types';
+import type { TOptionalTooltipWrapperProps } from '../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper';
+import { Override } from '../../utilities/types';
 declare const StyledButton: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "theme" | "size" | "appearance" | "isRounded"> & {
-    theme?: ("warning" | "success" | "neutral" | "primary" | "white" | "primaryDark" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "warning" | "success" | "neutral" | "primary" | "white" | "primaryDark" | "danger">>) | undefined;
+}, "appearance" | "size" | "theme" | "isRounded"> & {
+    theme?: ("primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger">>) | undefined;
     appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
     size?: ("sm" | "md" | "lg" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs">>) | undefined;
     isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;

package/dist/components/action-icon/ActionIcon.js

@@ -1,2 +1,2 @@
-import d from"invariant";import*as e from"react";import{styled as y}from"../../styled.js";import{getExternalAnchorProps as f}from"../../utilities/uri/index.js";import{Icon as i}from"../icon/Icon.js";import{ActionIconSizeMap as g}from"./ActionIcon.constants.js";import{OptionalTooltipWrapper as x}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";const w=y("button",{base:["items-center","appearance-none","bg-white","rounded-md","box-border","cursor-pointer","flex","shrink-0","justify-center","transition-all","duration-100","ease-out","disabled:cursor-not-allowed","disabled:opacity-30"],variants:{theme:{neutral:["[--solid-base:var(--color-white)]","[--solid-interact:var(--color-grey-100)]","[--solid-active:var(--color-grey-200)]","[--solid-text:var(--color-grey-1200)]","[--base:var(--color-grey-700)]","[--interact:var(--color-primary-900)]","[--active:var(--color-primary-1100)]"],primary:["[--base:var(--color-primary-800)]","[--interact:var(--color-primary-900)]","[--active:var(--color-primary-1000)]"],primaryDark:["[--base:var(--color-primary-1000)]","[--interact:var(--color-primary-1100)]","[--active:var(--color-primary-1200)]"],success:["[--base:var(--color-success)]","[--interact:var(--color-success-mid)]","[--active:var(--color-success-dark)]"],warning:["[--base:var(--color-warning)]","[--interact:var(--color-warning-mid)]","[--active:var(--color-warning-dark)]"],danger:["[--base:var(--color-danger)]","[--interact:var(--color-danger-mid)]","[--active:var(--color-danger-dark)]"],white:["[--base:var(--color-white)]","[--interact:var(--color-white)]","[--active:var(--color-white)]"]},appearance:{simple:["bg-transparent","text-(--base)","not-disabled:hover:text-(--interact)","not-disabled:focus:text-(--interact)","not-disabled:active:text-(--active)"],outline:["bg-[unset]","border","border-current","text-(--base)","not-disabled:hover:text-(--interact)","not-disabled:focus:text-(--interact)","not-disabled:active:text-(--active)"],solid:["bg-(--solid-base,var(--base))","text-(--solid-text,white)","not-disabled:hover:bg-(--solid-interact,var(--interact))","not-disabled:hover:text-(--solid-text,white)","not-disabled:focus:bg-(--solid-interact,var(--interact))","not-disabled:focus:text-(--solid-text,white)","not-disabled:active:bg-(--solid-active,var(--active))"]},size:{xs:["size-6"],sm:["size-8"],md:["size-10"],lg:["size-12"]},isRounded:{true:["rounded-full"]}}},{enabledResponsiveVariants:!0}),a=e.forwardRef(({children:l,theme:p="primary",appearance:v="simple",size:n="sm",label:s,href:t,disabled:o,hasTooltip:m=!0,tooltipSide:b,...h},u)=>{const c=`A single ${i.displayName} component is permitted as a child of ${a.displayName}`;return d(e.Children.count(l)===1,c),e.createElement(x,{hasTooltip:m,label:s,tooltipSide:b},e.createElement(w,{...t?{as:"a",href:o?void 0:t,onClick:void 0,"aria-disabled":!!o}:{type:"button"},...f(t),...h,"aria-label":s,theme:p,appearance:v,size:n,ref:u,disabled:o},e.Children.map(l,r=>{if(!e.isValidElement(r))throw new Error(c);return d(r.type===i,`Children of type ${r==null?void 0:r.type} aren't permitted. Only an ${i.displayName} component is allowed in ${a.displayName}`),e.cloneElement(r,{size:g[n]})})))});a.displayName="ActionIcon";export{a as ActionIcon};
+import d from"invariant";import*as e from"react";import{styled as y}from"../../styled.js";import{OptionalTooltipWrapper as f}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";import{getExternalAnchorProps as g}from"../../utilities/uri/index.js";import{Icon as o}from"../icon/Icon.js";import{ActionIconSizeMap as x}from"./ActionIcon.constants.js";const w=y("button",{base:["items-center","appearance-none","bg-white","rounded-md","cursor-pointer","flex","shrink-0","justify-center","transition-all","duration-100","ease-out","disabled:cursor-not-allowed","disabled:opacity-30"],variants:{theme:{neutral:["[--solid-base:var(--color-white)]","[--solid-interact:var(--color-grey-100)]","[--solid-active:var(--color-grey-200)]","[--solid-text:var(--color-grey-1200)]","[--base:var(--color-grey-700)]","[--interact:var(--color-primary-900)]","[--active:var(--color-primary-1100)]"],primary:["[--base:var(--color-primary-800)]","[--interact:var(--color-primary-900)]","[--active:var(--color-primary-1000)]"],primaryDark:["[--base:var(--color-primary-1000)]","[--interact:var(--color-primary-1100)]","[--active:var(--color-primary-1200)]"],success:["[--base:var(--color-success)]","[--interact:var(--color-success-mid)]","[--active:var(--color-success-dark)]"],warning:["[--base:var(--color-warning)]","[--interact:var(--color-warning-mid)]","[--active:var(--color-warning-dark)]"],danger:["[--base:var(--color-danger)]","[--interact:var(--color-danger-mid)]","[--active:var(--color-danger-dark)]"],white:["[--base:var(--color-white)]","[--interact:var(--color-white)]","[--active:var(--color-white)]"]},appearance:{simple:["bg-transparent","text-(--base)","not-disabled:hover:text-(--interact)","not-disabled:focus:text-(--interact)","not-disabled:active:text-(--active)"],outline:["bg-[unset]","border","border-current","text-(--base)","not-disabled:hover:text-(--interact)","not-disabled:focus:text-(--interact)","not-disabled:active:text-(--active)"],solid:["bg-(--solid-base,var(--base))","text-(--solid-text,white)","not-disabled:hover:bg-(--solid-interact,var(--interact))","not-disabled:hover:text-(--solid-text,white)","not-disabled:focus:bg-(--solid-interact,var(--interact))","not-disabled:focus:text-(--solid-text,white)","not-disabled:active:bg-(--solid-active,var(--active))"]},size:{xs:["size-6"],sm:["size-8"],md:["size-10"],lg:["size-12"]},isRounded:{true:["rounded-full"]}}},{enabledResponsiveVariants:!0}),a=e.forwardRef(({children:l,theme:p="primary",appearance:v="simple",size:n="sm",label:s,href:t,disabled:i,hasTooltip:m=!0,tooltipSide:b,...h},u)=>{const c=`A single ${o.displayName} component is permitted as a child of ${a.displayName}`;return d(e.Children.count(l)===1,c),e.createElement(f,{hasTooltip:m,label:s,tooltipSide:b},e.createElement(w,{...t?{as:"a",href:i?void 0:t,onClick:void 0,"aria-disabled":!!i}:{type:"button"},...g(t),...h,"aria-label":s,theme:p,appearance:v,size:n,ref:u,disabled:i},e.Children.map(l,r=>{if(!e.isValidElement(r))throw new Error(c);return d(r.type===o,`Children of type ${r==null?void 0:r.type} aren't permitted. Only an ${o.displayName} component is allowed in ${a.displayName}`),e.cloneElement(r,{size:x[n]})})))});a.displayName="ActionIcon";export{a as ActionIcon};
 //# sourceMappingURL=ActionIcon.js.map

package/dist/components/action-icon/ActionIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionIcon.js","sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst StyledButton = styled(\n  'button',\n  {\n    base: [\n      'items-center',\n      'appearance-none',\n      'bg-white',\n      'rounded-md',\n      'box-border',\n      'cursor-pointer',\n      'flex',\n      'shrink-0',\n      'justify-center',\n      'transition-all',\n      'duration-100',\n      'ease-out',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30'\n    ],\n    variants: {\n      theme: {\n        neutral: [\n          '[--solid-base:var(--color-white)]',\n          '[--solid-interact:var(--color-grey-100)]',\n          '[--solid-active:var(--color-grey-200)]',\n          '[--solid-text:var(--color-grey-1200)]',\n          '[--base:var(--color-grey-700)]',\n          '[--interact:var(--color-primary-900)]',\n          '[--active:var(--color-primary-1100)]'\n        ],\n        primary: [\n          '[--base:var(--color-primary-800)]',\n          '[--interact:var(--color-primary-900)]',\n          '[--active:var(--color-primary-1000)]'\n        ],\n        primaryDark: [\n          '[--base:var(--color-primary-1000)]',\n          '[--interact:var(--color-primary-1100)]',\n          '[--active:var(--color-primary-1200)]'\n        ],\n        success: [\n          '[--base:var(--color-success)]',\n          '[--interact:var(--color-success-mid)]',\n          '[--active:var(--color-success-dark)]'\n        ],\n        warning: [\n          '[--base:var(--color-warning)]',\n          '[--interact:var(--color-warning-mid)]',\n          '[--active:var(--color-warning-dark)]'\n        ],\n        danger: [\n          '[--base:var(--color-danger)]',\n          '[--interact:var(--color-danger-mid)]',\n          '[--active:var(--color-danger-dark)]'\n        ],\n        white: [\n          '[--base:var(--color-white)]',\n          '[--interact:var(--color-white)]',\n          '[--active:var(--color-white)]'\n        ]\n      },\n      appearance: {\n        simple: [\n          'bg-transparent',\n          'text-(--base)',\n          'not-disabled:hover:text-(--interact)',\n          'not-disabled:focus:text-(--interact)',\n          'not-disabled:active:text-(--active)'\n        ],\n        outline: [\n          'bg-[unset]',\n          'border',\n          'border-current',\n          'text-(--base)',\n          'not-disabled:hover:text-(--interact)',\n          'not-disabled:focus:text-(--interact)',\n          'not-disabled:active:text-(--active)'\n        ],\n        solid: [\n          'bg-(--solid-base,var(--base))',\n          'text-(--solid-text,white)',\n          'not-disabled:hover:bg-(--solid-interact,var(--interact))',\n          'not-disabled:hover:text-(--solid-text,white)',\n          'not-disabled:focus:bg-(--solid-interact,var(--interact))',\n          'not-disabled:focus:text-(--solid-text,white)',\n          'not-disabled:active:bg-(--solid-active,var(--active))'\n        ]\n      },\n      size: {\n        xs: ['size-6'],\n        sm: ['size-8'],\n        md: ['size-10'],\n        lg: ['size-12']\n      },\n      isRounded: {\n        true: ['rounded-full']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\ntype ActionIconProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  {\n    children: React.ReactNode\n    label: string\n  } & Omit<TOptionalTooltipWrapperProps, 'label'> &\n    NavigatorActions\n>\n\nexport const ActionIcon = React.forwardRef<HTMLButtonElement, ActionIconProps>(\n  (\n    {\n      children,\n      theme = 'primary',\n      appearance = 'simple',\n      size = 'sm',\n      label,\n      href,\n      disabled,\n      hasTooltip = true,\n      tooltipSide,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n    invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n    // Polymorphic props: can be either button or anchor element\n    // Type assertion needed due to TypeScript limitations with polymorphic components\n    const optionalLinkProps = href\n      ? ({\n          as: 'a',\n          href: disabled ? undefined : href,\n          onClick: undefined,\n          'aria-disabled': !!disabled\n        } as const)\n      : ({ type: 'button' } as const)\n\n    return (\n      <OptionalTooltipWrapper\n        hasTooltip={hasTooltip}\n        label={label}\n        tooltipSide={tooltipSide}\n      >\n        <StyledButton\n          {...(optionalLinkProps as any)}\n          {...getExternalAnchorProps(href)}\n          {...remainingProps}\n          aria-label={label}\n          theme={theme}\n          appearance={appearance}\n          size={size}\n          ref={ref as any}\n          disabled={disabled}\n        >\n          {React.Children.map(children, (child) => {\n            // TS needs this check for any following code to access child.type\n            // even with optional chaining\n            if (!React.isValidElement(child)) {\n              throw new Error(INVALID_CHILDREN_MESSAGE)\n            }\n\n            invariant(\n              child.type === Icon,\n              `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n            )\n\n            return React.cloneElement(\n              child as React.ReactElement<React.ComponentProps<typeof Icon>>,\n              {\n                size: ActionIconSizeMap[size as string]\n              }\n            )\n          })}\n        </StyledButton>\n      </OptionalTooltipWrapper>\n    )\n  }\n)\n\nActionIcon.displayName = 'ActionIcon'\n"],"names":["StyledButton","styled","ActionIcon","React","children","theme","appearance","size","label","href","disabled","hasTooltip","tooltipSide","remainingProps","ref","INVALID_CHILDREN_MESSAGE","Icon","invariant","OptionalTooltipWrapper","getExternalAnchorProps","child","ActionIconSizeMap"],"mappings":"iXAaA,MAAMA,EAAeC,EACnB,SACA,CACE,KAAM,CACJ,eACA,kBACA,WACA,aACA,aACA,iBACA,OACA,WACA,iBACA,iBACA,eACA,WACA,8BACA,qBACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CACP,oCACA,2CACA,yCACA,wCACA,iCACA,wCACA,sCACF,EACA,QAAS,CACP,oCACA,wCACA,sCACF,EACA,YAAa,CACX,qCACA,yCACA,sCACF,EACA,QAAS,CACP,gCACA,wCACA,sCACF,EACA,QAAS,CACP,gCACA,wCACA,sCACF,EACA,OAAQ,CACN,+BACA,uCACA,qCACF,EACA,MAAO,CACL,8BACA,kCACA,+BACF,CACF,EACA,WAAY,CACV,OAAQ,CACN,iBACA,gBACA,uCACA,uCACA,qCACF,EACA,QAAS,CACP,aACA,SACA,iBACA,gBACA,uCACA,uCACA,qCACF,EACA,MAAO,CACL,gCACA,4BACA,2DACA,+CACA,2DACA,+CACA,uDACF,CACF,EACA,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,CAChB,EACA,UAAW,CACT,KAAM,CAAC,cAAc,CACvB,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAWaC,EAAaC,EAAM,WAC9B,CACE,CACE,SAAAC,EACA,MAAAC,EAAQ,UACR,WAAAC,EAAa,SACb,KAAAC,EAAO,KACP,MAAAC,EACA,KAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,YAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAA2B,YAAYC,EAAK,WAAW,yCAAyCd,EAAW,WAAW,GAE5H,OAAAe,EAAUd,EAAM,SAAS,MAAMC,CAAQ,IAAM,EAAGW,CAAwB,EActEZ,EAAA,cAACe,EAAA,CACC,WAAYP,EACZ,MAAOH,EACP,YAAaI,CAAAA,EAEbT,EAAA,cAACH,EAAA,CACE,GAhBmBS,EACrB,CACC,GAAI,IACJ,KAAMC,EAAW,OAAYD,EAC7B,QAAS,OACT,gBAAiB,CAAC,CAACC,CACrB,EACC,CAAE,KAAM,QAAS,EAUf,GAAGS,EAAuBV,CAAI,EAC9B,GAAGI,EACJ,aAAYL,EACZ,MAAOH,EACP,WAAYC,EACZ,KAAMC,EACN,IAAKO,EACL,SAAUJ,CAAAA,EAETP,EAAM,SAAS,IAAIC,EAAWgB,GAAU,CAGvC,GAAI,CAACjB,EAAM,eAAeiB,CAAK,EAC7B,MAAM,IAAI,MAAML,CAAwB,EAG1C,OAAAE,EACEG,EAAM,OAASJ,EACf,oBAAoBI,GAAA,KAAA,OAAAA,EAAO,IAAI,8BAA8BJ,EAAK,WAAW,4BAA4Bd,EAAW,WAAW,EACjI,EAEOC,EAAM,aACXiB,EACA,CACE,KAAMC,EAAkBd,CAAc,CACxC,CACF,CACF,CAAC,CACH,CACF,CAEJ,CACF,EAEAL,EAAW,YAAc"}
+{"version":3,"file":"ActionIcon.js","sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { Override } from '~/utilities/types'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst StyledButton = styled(\n  'button',\n  {\n    base: [\n      'items-center',\n      'appearance-none',\n      'bg-white',\n      'rounded-md',\n      'cursor-pointer',\n      'flex',\n      'shrink-0',\n      'justify-center',\n      'transition-all',\n      'duration-100',\n      'ease-out',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30'\n    ],\n    variants: {\n      theme: {\n        neutral: [\n          '[--solid-base:var(--color-white)]',\n          '[--solid-interact:var(--color-grey-100)]',\n          '[--solid-active:var(--color-grey-200)]',\n          '[--solid-text:var(--color-grey-1200)]',\n          '[--base:var(--color-grey-700)]',\n          '[--interact:var(--color-primary-900)]',\n          '[--active:var(--color-primary-1100)]'\n        ],\n        primary: [\n          '[--base:var(--color-primary-800)]',\n          '[--interact:var(--color-primary-900)]',\n          '[--active:var(--color-primary-1000)]'\n        ],\n        primaryDark: [\n          '[--base:var(--color-primary-1000)]',\n          '[--interact:var(--color-primary-1100)]',\n          '[--active:var(--color-primary-1200)]'\n        ],\n        success: [\n          '[--base:var(--color-success)]',\n          '[--interact:var(--color-success-mid)]',\n          '[--active:var(--color-success-dark)]'\n        ],\n        warning: [\n          '[--base:var(--color-warning)]',\n          '[--interact:var(--color-warning-mid)]',\n          '[--active:var(--color-warning-dark)]'\n        ],\n        danger: [\n          '[--base:var(--color-danger)]',\n          '[--interact:var(--color-danger-mid)]',\n          '[--active:var(--color-danger-dark)]'\n        ],\n        white: [\n          '[--base:var(--color-white)]',\n          '[--interact:var(--color-white)]',\n          '[--active:var(--color-white)]'\n        ]\n      },\n      appearance: {\n        simple: [\n          'bg-transparent',\n          'text-(--base)',\n          'not-disabled:hover:text-(--interact)',\n          'not-disabled:focus:text-(--interact)',\n          'not-disabled:active:text-(--active)'\n        ],\n        outline: [\n          'bg-[unset]',\n          'border',\n          'border-current',\n          'text-(--base)',\n          'not-disabled:hover:text-(--interact)',\n          'not-disabled:focus:text-(--interact)',\n          'not-disabled:active:text-(--active)'\n        ],\n        solid: [\n          'bg-(--solid-base,var(--base))',\n          'text-(--solid-text,white)',\n          'not-disabled:hover:bg-(--solid-interact,var(--interact))',\n          'not-disabled:hover:text-(--solid-text,white)',\n          'not-disabled:focus:bg-(--solid-interact,var(--interact))',\n          'not-disabled:focus:text-(--solid-text,white)',\n          'not-disabled:active:bg-(--solid-active,var(--active))'\n        ]\n      },\n      size: {\n        xs: ['size-6'],\n        sm: ['size-8'],\n        md: ['size-10'],\n        lg: ['size-12']\n      },\n      isRounded: {\n        true: ['rounded-full']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\ntype ActionIconProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  {\n    children: React.ReactNode\n    label: string\n  } & Omit<TOptionalTooltipWrapperProps, 'label'> &\n    NavigatorActions\n>\n\nexport const ActionIcon = React.forwardRef<HTMLButtonElement, ActionIconProps>(\n  (\n    {\n      children,\n      theme = 'primary',\n      appearance = 'simple',\n      size = 'sm',\n      label,\n      href,\n      disabled,\n      hasTooltip = true,\n      tooltipSide,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n    invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n    // Polymorphic props: can be either button or anchor element\n    // Type assertion needed due to TypeScript limitations with polymorphic components\n    const optionalLinkProps = href\n      ? ({\n          as: 'a',\n          href: disabled ? undefined : href,\n          onClick: undefined,\n          'aria-disabled': !!disabled\n        } as const)\n      : ({ type: 'button' } as const)\n\n    return (\n      <OptionalTooltipWrapper\n        hasTooltip={hasTooltip}\n        label={label}\n        tooltipSide={tooltipSide}\n      >\n        <StyledButton\n          {...(optionalLinkProps as any)}\n          {...getExternalAnchorProps(href)}\n          {...remainingProps}\n          aria-label={label}\n          theme={theme}\n          appearance={appearance}\n          size={size}\n          ref={ref as any}\n          disabled={disabled}\n        >\n          {React.Children.map(children, (child) => {\n            // TS needs this check for any following code to access child.type\n            // even with optional chaining\n            if (!React.isValidElement(child)) {\n              throw new Error(INVALID_CHILDREN_MESSAGE)\n            }\n\n            invariant(\n              child.type === Icon,\n              `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n            )\n\n            return React.cloneElement(\n              child as React.ReactElement<React.ComponentProps<typeof Icon>>,\n              {\n                size: ActionIconSizeMap[size as string]\n              }\n            )\n          })}\n        </StyledButton>\n      </OptionalTooltipWrapper>\n    )\n  }\n)\n\nActionIcon.displayName = 'ActionIcon'\n"],"names":["StyledButton","styled","ActionIcon","React","children","theme","appearance","size","label","href","disabled","hasTooltip","tooltipSide","remainingProps","ref","INVALID_CHILDREN_MESSAGE","Icon","invariant","OptionalTooltipWrapper","getExternalAnchorProps","child","ActionIconSizeMap"],"mappings":"iXAaA,MAAMA,EAAeC,EACnB,SACA,CACE,KAAM,CACJ,eACA,kBACA,WACA,aACA,iBACA,OACA,WACA,iBACA,iBACA,eACA,WACA,8BACA,qBACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CACP,oCACA,2CACA,yCACA,wCACA,iCACA,wCACA,sCACF,EACA,QAAS,CACP,oCACA,wCACA,sCACF,EACA,YAAa,CACX,qCACA,yCACA,sCACF,EACA,QAAS,CACP,gCACA,wCACA,sCACF,EACA,QAAS,CACP,gCACA,wCACA,sCACF,EACA,OAAQ,CACN,+BACA,uCACA,qCACF,EACA,MAAO,CACL,8BACA,kCACA,+BACF,CACF,EACA,WAAY,CACV,OAAQ,CACN,iBACA,gBACA,uCACA,uCACA,qCACF,EACA,QAAS,CACP,aACA,SACA,iBACA,gBACA,uCACA,uCACA,qCACF,EACA,MAAO,CACL,gCACA,4BACA,2DACA,+CACA,2DACA,+CACA,uDACF,CACF,EACA,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,CAChB,EACA,UAAW,CACT,KAAM,CAAC,cAAc,CACvB,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAWaC,EAAaC,EAAM,WAC9B,CACE,CACE,SAAAC,EACA,MAAAC,EAAQ,UACR,WAAAC,EAAa,SACb,KAAAC,EAAO,KACP,MAAAC,EACA,KAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,YAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAA2B,YAAYC,EAAK,WAAW,yCAAyCd,EAAW,WAAW,GAE5H,OAAAe,EAAUd,EAAM,SAAS,MAAMC,CAAQ,IAAM,EAAGW,CAAwB,EActEZ,EAAA,cAACe,EAAA,CACC,WAAYP,EACZ,MAAOH,EACP,YAAaI,CAAAA,EAEbT,EAAA,cAACH,EAAA,CACE,GAhBmBS,EACrB,CACC,GAAI,IACJ,KAAMC,EAAW,OAAYD,EAC7B,QAAS,OACT,gBAAiB,CAAC,CAACC,CACrB,EACC,CAAE,KAAM,QAAS,EAUf,GAAGS,EAAuBV,CAAI,EAC9B,GAAGI,EACJ,aAAYL,EACZ,MAAOH,EACP,WAAYC,EACZ,KAAMC,EACN,IAAKO,EACL,SAAUJ,CAAAA,EAETP,EAAM,SAAS,IAAIC,EAAWgB,GAAU,CAGvC,GAAI,CAACjB,EAAM,eAAeiB,CAAK,EAC7B,MAAM,IAAI,MAAML,CAAwB,EAG1C,OAAAE,EACEG,EAAM,OAASJ,EACf,oBAAoBI,GAAA,KAAA,OAAAA,EAAO,IAAI,8BAA8BJ,EAAK,WAAW,4BAA4Bd,EAAW,WAAW,EACjI,EAEOC,EAAM,aACXiB,EACA,CACE,KAAMC,EAAkBd,CAAc,CACxC,CACF,CACF,CAAC,CACH,CACF,CAEJ,CACF,EAEAL,EAAW,YAAc"}

package/dist/components/alert-dialog/AlertDialogContent.js

@@ -1,2 +1,2 @@
-import{Overlay as n,Content as s,Portal as i}from"@radix-ui/react-alert-dialog";import*as e from"react";import{styled as t}from"../../styled.js";const l=t(n,{base:["bg-alpha-600","top-0","right-0","bottom-0","left-0","fixed","z-1147483646","motion-safe:data-[state=open]:animate-fade-in","motion-safe:data-[state=closed]:animate-fade-out"]}),m=t(s,{base:["transform-[translate(-50%,-50%)]","bg-white","rounded-md","shadow-xl","box-border","left-1/2","max-w-[90vw]","p-8","fixed","top-1/2","focus:outline-none","z-1147483646","motion-safe:data-[state=open]:animate-slide-in-center","motion-safe:data-[state=closed]:animate-slide-out-center"],variants:{size:{sm:["w-95"],md:["w-120"],lg:["w-150"]}}}),r=({size:a="sm",...o})=>e.createElement(i,null,e.createElement(l,null),e.createElement(m,{size:a,...o}));export{r as AlertDialogContent};
+import{Overlay as n,Content as s,Portal as i}from"@radix-ui/react-alert-dialog";import*as e from"react";import{styled as t}from"../../styled.js";const l=t(n,{base:["bg-alpha-600","top-0","right-0","bottom-0","left-0","fixed","z-1147483646","motion-safe:data-[state=open]:animate-fade-in","motion-safe:data-[state=closed]:animate-fade-out"]}),m=t(s,{base:["transform-[translate(-50%,-50%)]","bg-white","rounded-md","shadow-xl","left-1/2","max-w-[90vw]","p-8","fixed","top-1/2","focus:outline-none","z-1147483646","motion-safe:data-[state=open]:animate-slide-in-center","motion-safe:data-[state=closed]:animate-slide-out-center"],variants:{size:{sm:["w-95"],md:["w-120"],lg:["w-150"]}}}),r=({size:a="sm",...o})=>e.createElement(i,null,e.createElement(l,null),e.createElement(m,{size:a,...o}));export{r as AlertDialogContent};
 //# sourceMappingURL=AlertDialogContent.js.map

package/dist/components/alert-dialog/AlertDialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialogContent.js","sources":["../../../src/components/alert-dialog/AlertDialogContent.tsx"],"sourcesContent":["import { Content, Overlay, Portal } from '@radix-ui/react-alert-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledAlertDialogOverlay = styled(Overlay, {\n  base: [\n    'bg-alpha-600',\n    'top-0',\n    'right-0',\n    'bottom-0',\n    'left-0',\n    'fixed',\n    'z-1147483646',\n    'motion-safe:data-[state=open]:animate-fade-in',\n    'motion-safe:data-[state=closed]:animate-fade-out'\n  ]\n})\nconst StyledAlertDialogContent = styled(Content, {\n  base: [\n    // `transform: translate()` is required for `floating-ui` to\n    // correctly position elements within the Dialog component.\n    // we can't use the translate property directly\n    'transform-[translate(-50%,-50%)]',\n    'bg-white',\n    'rounded-md',\n    'shadow-xl',\n    'box-border',\n    'left-1/2',\n    'max-w-[90vw]',\n    'p-8',\n    'fixed',\n    'top-1/2',\n    'focus:outline-none',\n    'z-1147483646',\n    'motion-safe:data-[state=open]:animate-slide-in-center',\n    'motion-safe:data-[state=closed]:animate-slide-out-center'\n  ],\n  variants: {\n    size: {\n      sm: ['w-95'],\n      md: ['w-120'],\n      lg: ['w-150']\n    }\n  }\n})\n\nexport const AlertDialogContent = ({\n  size = 'sm',\n  ...remainingProps\n}: React.ComponentProps<typeof StyledAlertDialogContent>) => (\n  <Portal>\n    <StyledAlertDialogOverlay />\n    <StyledAlertDialogContent size={size} {...remainingProps} />\n  </Portal>\n)\n"],"names":["StyledAlertDialogOverlay","styled","Overlay","StyledAlertDialogContent","Content","AlertDialogContent","size","remainingProps","React","Portal"],"mappings":"iJAKA,MAAMA,EAA2BC,EAAOC,EAAS,CAC/C,KAAM,CACJ,eACA,QACA,UACA,WACA,SACA,QACA,eACA,gDACA,kDACF,CACF,CAAC,EACKC,EAA2BF,EAAOG,EAAS,CAC/C,KAAM,CAIJ,mCACA,WACA,aACA,YACA,aACA,WACA,eACA,MACA,QACA,UACA,qBACA,eACA,wDACA,0DACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,CACd,CACF,CACF,CAAC,EAEYC,EAAqB,CAAC,CACjC,KAAAC,EAAO,KACP,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACR,EAAA,IAAyB,EAC1BQ,EAAA,cAACL,EAAA,CAAyB,KAAMG,EAAO,GAAGC,CAAAA,CAAgB,CAC5D"}
+{"version":3,"file":"AlertDialogContent.js","sources":["../../../src/components/alert-dialog/AlertDialogContent.tsx"],"sourcesContent":["import { Content, Overlay, Portal } from '@radix-ui/react-alert-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledAlertDialogOverlay = styled(Overlay, {\n  base: [\n    'bg-alpha-600',\n    'top-0',\n    'right-0',\n    'bottom-0',\n    'left-0',\n    'fixed',\n    'z-1147483646',\n    'motion-safe:data-[state=open]:animate-fade-in',\n    'motion-safe:data-[state=closed]:animate-fade-out'\n  ]\n})\nconst StyledAlertDialogContent = styled(Content, {\n  base: [\n    // `transform: translate()` is required for `floating-ui` to\n    // correctly position elements within the Dialog component.\n    // we can't use the translate property directly\n    'transform-[translate(-50%,-50%)]',\n    'bg-white',\n    'rounded-md',\n    'shadow-xl',\n    'left-1/2',\n    'max-w-[90vw]',\n    'p-8',\n    'fixed',\n    'top-1/2',\n    'focus:outline-none',\n    'z-1147483646',\n    'motion-safe:data-[state=open]:animate-slide-in-center',\n    'motion-safe:data-[state=closed]:animate-slide-out-center'\n  ],\n  variants: {\n    size: {\n      sm: ['w-95'],\n      md: ['w-120'],\n      lg: ['w-150']\n    }\n  }\n})\n\nexport const AlertDialogContent = ({\n  size = 'sm',\n  ...remainingProps\n}: React.ComponentProps<typeof StyledAlertDialogContent>) => (\n  <Portal>\n    <StyledAlertDialogOverlay />\n    <StyledAlertDialogContent size={size} {...remainingProps} />\n  </Portal>\n)\n"],"names":["StyledAlertDialogOverlay","styled","Overlay","StyledAlertDialogContent","Content","AlertDialogContent","size","remainingProps","React","Portal"],"mappings":"iJAKA,MAAMA,EAA2BC,EAAOC,EAAS,CAC/C,KAAM,CACJ,eACA,QACA,UACA,WACA,SACA,QACA,eACA,gDACA,kDACF,CACF,CAAC,EACKC,EAA2BF,EAAOG,EAAS,CAC/C,KAAM,CAIJ,mCACA,WACA,aACA,YACA,WACA,eACA,MACA,QACA,UACA,qBACA,eACA,wDACA,0DACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,CACd,CACF,CACF,CAAC,EAEYC,EAAqB,CAAC,CACjC,KAAAC,EAAO,KACP,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACR,EAAA,IAAyB,EAC1BQ,EAAA,cAACL,EAAA,CAAyB,KAAMG,EAAO,GAAGC,CAAAA,CAAgB,CAC5D"}

package/dist/components/alert-dialog/alert-context/AlertDialog.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Button as m}from"../../button/Button.js";import{Flex as r}from"../../flex/Flex.js";import{Heading as d}from"../../heading/Heading.js";import{Text as A}from"../../text/Text.js";import{AlertDialog as t}from"../AlertDialog.js";import{AlertDialogIcon as C}from"./AlertDialogIcon.js";const g=({title:c,size:i,theme:n,description:a,onAction:o,cancelActionText:l,confirmActionText:s,onClose:p,confirmElement:f,cancelElement:E,...u})=>e.createElement(t,{defaultOpen:!0},e.createElement(t.Content,{size:i,onEscapeKeyDown:x=>x.preventDefault(),onCloseAutoFocus:p,...u,className:"flex max-h-[90vh] flex-col gap-8"},e.createElement(r,{className:"items-center gap-2"},n&&e.createElement(C,{theme:n}),e.createElement(d,{as:t.Title,size:"sm",className:"mr-4"},c)),a&&e.createElement(A,{as:t.Description,className:"flex overflow-y-auto"},a),e.createElement(r,{gap:"2",justify:"end",wrap:"wrap"},e.createElement(t.Cancel,{asChild:!0},E||l&&e.createElement(m,{size:"sm",appearance:"outline",onClick:()=>o==null?void 0:o(!1)},l)),e.createElement(t.Action,{asChild:!0},f||e.createElement(m,{size:"sm",onClick:()=>o==null?void 0:o(!0)},s)))));export{g as Alert};
+import*as e from"react";import{Button as m}from"../../button/Button.js";import{Heading as d}from"../../heading/Heading.js";import{Text as u}from"../../text/Text.js";import{AlertDialog as t}from"../AlertDialog.js";import{AlertDialogIcon as A}from"./AlertDialogIcon.js";const C=({title:c,size:i,theme:n,description:o,onAction:l,cancelActionText:a,confirmActionText:r,onClose:s,confirmElement:f,cancelElement:p,...E})=>e.createElement(t,{defaultOpen:!0},e.createElement(t.Content,{size:i,onEscapeKeyDown:x=>x.preventDefault(),onCloseAutoFocus:s,...E,className:"flex max-h-[90vh] flex-col gap-8"},e.createElement("div",{className:"flex items-center gap-2"},n&&e.createElement(A,{theme:n}),e.createElement(d,{as:t.Title,size:"sm",className:"mr-4"},c)),o&&e.createElement(u,{as:t.Description,className:"flex overflow-y-auto"},o),e.createElement("div",{className:"flex flex-wrap justify-end gap-2"},e.createElement(t.Cancel,{asChild:!0},p||a&&e.createElement(m,{size:"sm",appearance:"outline",onClick:()=>l==null?void 0:l(!1)},a)),e.createElement(t.Action,{asChild:!0},f||e.createElement(m,{size:"sm",onClick:()=>l==null?void 0:l(!0)},r)))));export{C as Alert};
 //# sourceMappingURL=AlertDialog.js.map

package/dist/components/alert-dialog/alert-context/AlertDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.js","sources":["../../../../src/components/alert-dialog/alert-context/AlertDialog.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../../button'\nimport { Flex } from '../../flex'\nimport { Heading } from '../../heading'\nimport { Text } from '../../text'\nimport { AlertDialog } from '../AlertDialog'\nimport { AlertDialogIcon } from './AlertDialogIcon'\nimport type { alert } from './types'\n\ntype AlertDialogContentProps = React.ComponentProps<typeof AlertDialog> & {\n  className?: string\n  onClose: () => void\n} & alert\n\nexport const Alert = ({\n  title,\n  size,\n  theme,\n  description,\n  onAction,\n  cancelActionText,\n  confirmActionText,\n  onClose,\n  confirmElement,\n  cancelElement,\n  ...remainingProps\n}: AlertDialogContentProps) => (\n  <AlertDialog defaultOpen>\n    <AlertDialog.Content\n      size={size}\n      onEscapeKeyDown={(e) => e.preventDefault()}\n      onCloseAutoFocus={onClose}\n      {...remainingProps}\n      className=\"flex max-h-[90vh] flex-col gap-8\"\n    >\n      <Flex className=\"items-center gap-2\">\n        {theme && <AlertDialogIcon theme={theme} />}\n        <Heading as={AlertDialog.Title} size=\"sm\" className=\"mr-4\">\n          {title}\n        </Heading>\n      </Flex>\n      {description && (\n        <Text as={AlertDialog.Description} className=\"flex overflow-y-auto\">\n          {description}\n        </Text>\n      )}\n      <Flex gap=\"2\" justify=\"end\" wrap=\"wrap\">\n        <AlertDialog.Cancel asChild>\n          {cancelElement ||\n            (cancelActionText && (\n              <Button\n                size=\"sm\"\n                appearance=\"outline\"\n                onClick={() => onAction?.(false)}\n              >\n                {cancelActionText}\n              </Button>\n            ))}\n        </AlertDialog.Cancel>\n        <AlertDialog.Action asChild>\n          {confirmElement || (\n            <Button size=\"sm\" onClick={() => onAction?.(true)}>\n              {confirmActionText}\n            </Button>\n          )}\n        </AlertDialog.Action>\n      </Flex>\n    </AlertDialog.Content>\n  </AlertDialog>\n)\n"],"names":["Alert","title","size","theme","description","onAction","cancelActionText","confirmActionText","onClose","confirmElement","cancelElement","remainingProps","React","AlertDialog","e","Flex","AlertDialogIcon","Heading","Text","Button"],"mappings":"sTAea,MAAAA,EAAQ,CAAC,CACpB,MAAAC,EACA,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,QAAAC,EACA,eAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAY,YAAW,EAAA,EACtBD,EAAA,cAACC,EAAY,QAAZ,CACC,KAAMX,EACN,gBAAkBY,GAAMA,EAAE,iBAC1B,iBAAkBN,EACjB,GAAGG,EACJ,UAAU,oCAEVC,EAAA,cAACG,EAAA,CAAK,UAAU,sBACbZ,GAASS,EAAA,cAACI,EAAA,CAAgB,MAAOb,CAAAA,CAAO,EACzCS,EAAA,cAACK,EAAA,CAAQ,GAAIJ,EAAY,MAAO,KAAK,KAAK,UAAU,QACjDZ,CACH,CACF,EACCG,GACCQ,EAAA,cAACM,EAAA,CAAK,GAAIL,EAAY,YAAa,UAAU,sBAAA,EAC1CT,CACH,EAEFQ,EAAA,cAACG,EAAA,CAAK,IAAI,IAAI,QAAQ,MAAM,KAAK,MAAA,EAC/BH,EAAA,cAACC,EAAY,OAAZ,CAAmB,QAAO,EACxBH,EAAAA,GACEJ,GACCM,EAAA,cAACO,EAAA,CACC,KAAK,KACL,WAAW,UACX,QAAS,IAAMd,GAAA,YAAAA,EAAW,EAAA,CAAA,EAEzBC,CACH,CAEN,EACAM,EAAA,cAACC,EAAY,OAAZ,CAAmB,QAAO,EACxBJ,EAAAA,GACCG,EAAA,cAACO,EAAA,CAAO,KAAK,KAAK,QAAS,IAAMd,GAAA,YAAAA,EAAW,EAAA,CAAA,EACzCE,CACH,CAEJ,CACF,CACF,CACF"}
+{"version":3,"file":"AlertDialog.js","sources":["../../../../src/components/alert-dialog/alert-context/AlertDialog.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../../button/Button'\nimport { Heading } from '../../heading/Heading'\nimport { Text } from '../../text/Text'\nimport { AlertDialog } from '../AlertDialog'\nimport { AlertDialogIcon } from './AlertDialogIcon'\nimport type { alert } from './types'\n\ntype AlertDialogContentProps = React.ComponentProps<typeof AlertDialog> & {\n  className?: string\n  onClose: () => void\n} & alert\n\nexport const Alert = ({\n  title,\n  size,\n  theme,\n  description,\n  onAction,\n  cancelActionText,\n  confirmActionText,\n  onClose,\n  confirmElement,\n  cancelElement,\n  ...remainingProps\n}: AlertDialogContentProps) => (\n  <AlertDialog defaultOpen>\n    <AlertDialog.Content\n      size={size}\n      onEscapeKeyDown={(e) => e.preventDefault()}\n      onCloseAutoFocus={onClose}\n      {...remainingProps}\n      className=\"flex max-h-[90vh] flex-col gap-8\"\n    >\n      <div className=\"flex items-center gap-2\">\n        {theme && <AlertDialogIcon theme={theme} />}\n        <Heading as={AlertDialog.Title} size=\"sm\" className=\"mr-4\">\n          {title}\n        </Heading>\n      </div>\n      {description && (\n        <Text as={AlertDialog.Description} className=\"flex overflow-y-auto\">\n          {description}\n        </Text>\n      )}\n      <div className=\"flex flex-wrap justify-end gap-2\">\n        <AlertDialog.Cancel asChild>\n          {cancelElement ||\n            (cancelActionText && (\n              <Button\n                size=\"sm\"\n                appearance=\"outline\"\n                onClick={() => onAction?.(false)}\n              >\n                {cancelActionText}\n              </Button>\n            ))}\n        </AlertDialog.Cancel>\n        <AlertDialog.Action asChild>\n          {confirmElement || (\n            <Button size=\"sm\" onClick={() => onAction?.(true)}>\n              {confirmActionText}\n            </Button>\n          )}\n        </AlertDialog.Action>\n      </div>\n    </AlertDialog.Content>\n  </AlertDialog>\n)\n"],"names":["Alert","title","size","theme","description","onAction","cancelActionText","confirmActionText","onClose","confirmElement","cancelElement","remainingProps","React","AlertDialog","e","AlertDialogIcon","Heading","Text","Button"],"mappings":"4QAca,MAAAA,EAAQ,CAAC,CACpB,MAAAC,EACA,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,QAAAC,EACA,eAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAY,YAAW,EAAA,EACtBD,EAAA,cAACC,EAAY,QAAZ,CACC,KAAMX,EACN,gBAAkBY,GAAMA,EAAE,iBAC1B,iBAAkBN,EACjB,GAAGG,EACJ,UAAU,kCAEVC,EAAAA,EAAA,cAAC,MAAI,CAAA,UAAU,2BACZT,GAASS,EAAA,cAACG,EAAA,CAAgB,MAAOZ,CAAAA,CAAO,EACzCS,EAAA,cAACI,EAAA,CAAQ,GAAIH,EAAY,MAAO,KAAK,KAAK,UAAU,MACjDZ,EAAAA,CACH,CACF,EACCG,GACCQ,EAAA,cAACK,EAAA,CAAK,GAAIJ,EAAY,YAAa,UAAU,wBAC1CT,CACH,EAEFQ,EAAA,cAAC,MAAA,CAAI,UAAU,kCAAA,EACbA,EAAA,cAACC,EAAY,OAAZ,CAAmB,QAAO,IACxBH,GACEJ,GACCM,EAAA,cAACM,EAAA,CACC,KAAK,KACL,WAAW,UACX,QAAS,IAAMb,GAAA,KAAA,OAAAA,EAAW,EAEzBC,CAAAA,EAAAA,CACH,CAEN,EACAM,EAAA,cAACC,EAAY,OAAZ,CAAmB,QAAO,IACxBJ,GACCG,EAAA,cAACM,EAAA,CAAO,KAAK,KAAK,QAAS,IAAMb,GAAA,YAAAA,EAAW,EAAA,CAAA,EACzCE,CACH,CAEJ,CACF,CACF,CACF"}

package/dist/components/alert-dialog/alert-context/AlertDialogIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialogIcon.js","sources":["../../../../src/components/alert-dialog/alert-context/AlertDialogIcon.tsx"],"sourcesContent":["import { Danger, Info, OkCircle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../../icon'\n\nexport type AlertDialogTheme = 'info' | 'warning' | 'danger' | 'success'\n\nconst StyledIcon = styled(Icon, {\n  base: ['self-start'],\n  variants: {\n    theme: {\n      info: ['text-info'],\n      warning: ['text-warning-mid'],\n      danger: ['rotate-180', 'text-danger'],\n      success: ['text-success']\n    }\n  }\n})\n\nconst iconMap: Record<\n  AlertDialogTheme,\n  React.FC<React.SVGProps<SVGSVGElement>>\n> = {\n  info: Info,\n  warning: Danger,\n  danger: Info,\n  success: OkCircle\n}\n\nexport const AlertDialogIcon = ({ theme }: { theme: AlertDialogTheme }) => (\n  <StyledIcon theme={theme} is={iconMap[theme]} />\n)\n"],"names":["StyledIcon","styled","Icon","iconMap","Info","Danger","OkCircle","AlertDialogIcon","theme","React"],"mappings":"oLASA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,KAAM,CAAC,YAAY,EACnB,SAAU,CACR,MAAO,CACL,KAAM,CAAC,WAAW,EAClB,QAAS,CAAC,kBAAkB,EAC5B,OAAQ,CAAC,aAAc,aAAa,EACpC,QAAS,CAAC,cAAc,CAC1B,CACF,CACF,CAAC,EAEKC,EAGF,CACF,KAAMC,EACN,QAASC,EACT,OAAQD,EACR,QAASE,CACX,EAEaC,EAAkB,CAAC,CAAE,MAAAC,CAAM,IACtCC,EAAA,cAACT,EAAA,CAAW,MAAOQ,EAAO,GAAIL,EAAQK,CAAK,CAAG,CAAA"}
+{"version":3,"file":"AlertDialogIcon.js","sources":["../../../../src/components/alert-dialog/alert-context/AlertDialogIcon.tsx"],"sourcesContent":["import { Danger, Info, OkCircle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../../icon/Icon'\n\nexport type AlertDialogTheme = 'info' | 'warning' | 'danger' | 'success'\n\nconst StyledIcon = styled(Icon, {\n  base: ['self-start'],\n  variants: {\n    theme: {\n      info: ['text-info'],\n      warning: ['text-warning-mid'],\n      danger: ['rotate-180', 'text-danger'],\n      success: ['text-success']\n    }\n  }\n})\n\nconst iconMap: Record<\n  AlertDialogTheme,\n  React.FC<React.SVGProps<SVGSVGElement>>\n> = {\n  info: Info,\n  warning: Danger,\n  danger: Info,\n  success: OkCircle\n}\n\nexport const AlertDialogIcon = ({ theme }: { theme: AlertDialogTheme }) => (\n  <StyledIcon theme={theme} is={iconMap[theme]} />\n)\n"],"names":["StyledIcon","styled","Icon","iconMap","Info","Danger","OkCircle","AlertDialogIcon","theme","React"],"mappings":"oLASA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,KAAM,CAAC,YAAY,EACnB,SAAU,CACR,MAAO,CACL,KAAM,CAAC,WAAW,EAClB,QAAS,CAAC,kBAAkB,EAC5B,OAAQ,CAAC,aAAc,aAAa,EACpC,QAAS,CAAC,cAAc,CAC1B,CACF,CACF,CAAC,EAEKC,EAGF,CACF,KAAMC,EACN,QAASC,EACT,OAAQD,EACR,QAASE,CACX,EAEaC,EAAkB,CAAC,CAAE,MAAAC,CAAM,IACtCC,EAAA,cAACT,EAAA,CAAW,MAAOQ,EAAO,GAAIL,EAAQK,CAAK,CAAG,CAAA"}

package/dist/components/avatar/Avatar.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import type { TAvatarRootContext } from './AvatarContext';
+import { AvatarRootContext } from './AvatarContext';
 declare const StyledDiv: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, "size"> & {
@@ -22,11 +24,8 @@ type TAvatarProps = React.ComponentProps<typeof StyledDiv | typeof StyledButton>
     onClick?: never;
     disabled?: never;
 });
-export type TAvatarRootContext = {
-    name?: TAvatarProps['name'];
-    size: TAvatarProps['size'];
-};
-export declare const AvatarRootContext: React.Context<TAvatarRootContext>;
+export { AvatarRootContext };
+export type { TAvatarRootContext };
 export declare const AvatarRootProvider: ({ children, name, size }: TAvatarProps) => React.JSX.Element;
 export declare const AvatarRoot: {
     ({ children, size, name, disabled, onClick }: TAvatarProps): React.JSX.Element;
@@ -46,4 +45,3 @@ export declare const Avatar: {
         is: typeof import("..").Icon;
     }) => React.JSX.Element;
 };
-export {};

package/dist/components/avatar/Avatar.js

@@ -1,2 +1,2 @@
-import*as i from"react";import{styled as l}from"../../styled.js";import{AvatarIcon as c}from"./AvatarIcon.js";import{AvatarImage as b}from"./AvatarImage.js";import{AvatarInitial as v}from"./AvatarInitial.js";import{AvatarPlaceholder as z}from"./AvatarPlaceholder.js";const d=["flex","justify-center","items-center","text-grey-800","rounded-full","border-2","border-grey-200","bg-white","overflow-hidden"],x=l("div",{base:d,variants:{size:{xs:["size-6"],sm:["size-8"],md:["size-10"],lg:["size-12"],xl:["size-16"],xxl:["size-24"]}}}),p=l("button",{base:[...d,"not-disabled:active:bg-grey-200","not-disabled:active:border-primary-800","not-disabled:hover:bg-grey-100","not-disabled:hover:border-grey-800","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]","not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:z-1","disabled:cursor-not-allowed","disabled:opacity-30"],variants:{size:{xs:["size-6"],sm:["size-8"],md:["size-10"],lg:["size-12"],xl:["size-16"],xxl:["size-24"]}}}),n=i.createContext({name:void 0,size:"lg"}),m=({children:r,name:e,size:a})=>{const o=i.useMemo(()=>({name:e,size:a}),[e,a]);return i.createElement(n.Provider,{value:o},r)},s=({children:r,size:e="lg",name:a,disabled:o=!1,onClick:t})=>i.createElement(m,{name:a,size:e},t?i.createElement(p,{size:e,disabled:o,onClick:o?void 0:t,className:o?"cursor-auto":"cursor-pointer"},r):i.createElement(x,{size:e},r)),u=Object.assign(s,{Image:b,Initial:v,Placeholder:z,Icon:c});s.displayName="Avatar";export{u as Avatar,s as AvatarRoot,n as AvatarRootContext,m as AvatarRootProvider};
+import*as o from"react";import{styled as l}from"../../styled.js";import{AvatarRootContext as m}from"./AvatarContext.js";import{AvatarRootContext as C}from"./AvatarContext.js";import{AvatarIcon as c}from"./AvatarIcon.js";import{AvatarImage as b}from"./AvatarImage.js";import{AvatarInitial as v}from"./AvatarInitial.js";import{AvatarPlaceholder as x}from"./AvatarPlaceholder.js";const d=["flex","justify-center","items-center","text-grey-800","rounded-full","border-2","border-grey-200","bg-white","overflow-hidden"],p=l("div",{base:d,variants:{size:{xs:["size-6"],sm:["size-8"],md:["size-10"],lg:["size-12"],xl:["size-16"],xxl:["size-24"]}}}),z=l("button",{base:[...d,"not-disabled:active:bg-grey-200","not-disabled:active:border-primary-800","not-disabled:hover:bg-grey-100","not-disabled:hover:border-grey-800","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]","not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:z-1","disabled:cursor-not-allowed","disabled:opacity-30"],variants:{size:{xs:["size-6"],sm:["size-8"],md:["size-10"],lg:["size-12"],xl:["size-16"],xxl:["size-24"]}}}),n=({children:r,name:e,size:t})=>{const i=o.useMemo(()=>({name:e,size:t}),[e,t]);return o.createElement(m.Provider,{value:i},r)},a=({children:r,size:e="lg",name:t,disabled:i=!1,onClick:s})=>o.createElement(n,{name:t,size:e},s?o.createElement(z,{size:e,disabled:i,onClick:i?void 0:s,className:i?"cursor-auto":"cursor-pointer"},r):o.createElement(p,{size:e},r)),f=Object.assign(a,{Image:b,Initial:v,Placeholder:x,Icon:c});a.displayName="Avatar";export{f as Avatar,a as AvatarRoot,C as AvatarRootContext,n as AvatarRootProvider};
 //# sourceMappingURL=Avatar.js.map

package/dist/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { AvatarIcon } from './AvatarIcon'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarInitial } from './AvatarInitial'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst avatarRootStyles = [\n  'flex',\n  'justify-center',\n  'items-center',\n  'text-grey-800',\n  'rounded-full',\n  'border-2',\n  'border-grey-200',\n  'bg-white',\n  'overflow-hidden'\n]\n\nconst StyledDiv = styled('div', {\n  base: avatarRootStyles,\n  variants: {\n    size: {\n      xs: ['size-6'],\n      sm: ['size-8'],\n      md: ['size-10'],\n      lg: ['size-12'],\n      xl: ['size-16'],\n      xxl: ['size-24']\n    }\n  }\n})\n\nconst StyledButton = styled('button', {\n  base: [\n    ...avatarRootStyles,\n    'not-disabled:active:bg-grey-200',\n    'not-disabled:active:border-primary-800',\n    'not-disabled:hover:bg-grey-100',\n    'not-disabled:hover:border-grey-800',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    size: {\n      xs: ['size-6'],\n      sm: ['size-8'],\n      md: ['size-10'],\n      lg: ['size-12'],\n      xl: ['size-16'],\n      xxl: ['size-24']\n    }\n  }\n})\n\ntype TAvatarProps = React.ComponentProps<\n  typeof StyledDiv | typeof StyledButton\n> & {\n  name?: string\n} & (\n    | {\n        onClick: React.MouseEventHandler<HTMLButtonElement>\n        disabled?: boolean\n      }\n    | { onClick?: never; disabled?: never }\n  )\n\nexport type TAvatarRootContext = {\n  name?: TAvatarProps['name']\n  size: TAvatarProps['size']\n}\n\nexport const AvatarRootContext = React.createContext<TAvatarRootContext>({\n  name: undefined,\n  size: 'lg'\n})\n\nexport const AvatarRootProvider = ({ children, name, size }: TAvatarProps) => {\n  const value = React.useMemo<TAvatarRootContext>(\n    () => ({ name, size }),\n    [name, size]\n  )\n\n  return (\n    <AvatarRootContext.Provider value={value}>\n      {children}\n    </AvatarRootContext.Provider>\n  )\n}\n\nexport const AvatarRoot = ({\n  children,\n  size = 'lg',\n  name,\n  disabled = false,\n  onClick\n}: TAvatarProps) => (\n  <AvatarRootProvider name={name} size={size}>\n    {onClick ? (\n      <StyledButton\n        size={size}\n        disabled={disabled}\n        onClick={disabled ? undefined : onClick}\n        className={disabled ? 'cursor-auto' : 'cursor-pointer'}\n      >\n        {children}\n      </StyledButton>\n    ) : (\n      <StyledDiv size={size}>{children}</StyledDiv>\n    )}\n  </AvatarRootProvider>\n)\n\nexport const Avatar = Object.assign(AvatarRoot, {\n  Image: AvatarImage,\n  Initial: AvatarInitial,\n  Placeholder: AvatarPlaceholder,\n  Icon: AvatarIcon\n})\n\nAvatarRoot.displayName = 'Avatar'\n"],"names":["avatarRootStyles","StyledDiv","styled","StyledButton","AvatarRootContext","React","AvatarRootProvider","children","name","size","value","AvatarRoot","disabled","onClick","Avatar","AvatarImage","AvatarInitial","AvatarPlaceholder","AvatarIcon"],"mappings":"2QASA,MAAMA,EAAmB,CACvB,OACA,iBACA,eACA,gBACA,eACA,WACA,kBACA,WACA,iBACF,EAEMC,EAAYC,EAAO,MAAO,CAC9B,KAAMF,EACN,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,EACd,IAAK,CAAC,SAAS,CACjB,CACF,CACF,CAAC,EAEKG,EAAeD,EAAO,SAAU,CACpC,KAAM,CACJ,GAAGF,EACH,kCACA,yCACA,iCACA,qCACA,0CACA,sCACA,+EACA,4DACA,iCACA,8BACA,qBACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,EACd,IAAK,CAAC,SAAS,CACjB,CACF,CACF,CAAC,EAmBYI,EAAoBC,EAAM,cAAkC,CACvE,KAAM,OACN,KAAM,IACR,CAAC,EAEYC,EAAqB,CAAC,CAAE,SAAAC,EAAU,KAAAC,EAAM,KAAAC,CAAK,IAAoB,CAC5E,MAAMC,EAAQL,EAAM,QAClB,KAAO,CAAE,KAAAG,EAAM,KAAAC,CAAK,GACpB,CAACD,EAAMC,CAAI,CACb,EAEA,OACEJ,EAAA,cAACD,EAAkB,SAAlB,CAA2B,MAAOM,CAAAA,EAChCH,CACH,CAEJ,EAEaI,EAAa,CAAC,CACzB,SAAAJ,EACA,KAAAE,EAAO,KACP,KAAAD,EACA,SAAAI,EAAW,GACX,QAAAC,CACF,IACER,EAAA,cAACC,EAAmB,CAAA,KAAME,EAAM,KAAMC,CACnCI,EAAAA,EACCR,EAAA,cAACF,EAAA,CACC,KAAMM,EACN,SAAUG,EACV,QAASA,EAAW,OAAYC,EAChC,UAAWD,EAAW,cAAgB,gBAErCL,EAAAA,CACH,EAEAF,EAAA,cAACJ,EAAA,CAAU,KAAMQ,CAAOF,EAAAA,CAAS,CAErC,EAGWO,EAAS,OAAO,OAAOH,EAAY,CAC9C,MAAOI,EACP,QAASC,EACT,YAAaC,EACb,KAAMC,CACR,CAAC,EAEDP,EAAW,YAAc"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport type { TAvatarRootContext } from './AvatarContext'\nimport { AvatarRootContext } from './AvatarContext'\nimport { AvatarIcon } from './AvatarIcon'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarInitial } from './AvatarInitial'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst avatarRootStyles = [\n  'flex',\n  'justify-center',\n  'items-center',\n  'text-grey-800',\n  'rounded-full',\n  'border-2',\n  'border-grey-200',\n  'bg-white',\n  'overflow-hidden'\n]\n\nconst StyledDiv = styled('div', {\n  base: avatarRootStyles,\n  variants: {\n    size: {\n      xs: ['size-6'],\n      sm: ['size-8'],\n      md: ['size-10'],\n      lg: ['size-12'],\n      xl: ['size-16'],\n      xxl: ['size-24']\n    }\n  }\n})\n\nconst StyledButton = styled('button', {\n  base: [\n    ...avatarRootStyles,\n    'not-disabled:active:bg-grey-200',\n    'not-disabled:active:border-primary-800',\n    'not-disabled:hover:bg-grey-100',\n    'not-disabled:hover:border-grey-800',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    size: {\n      xs: ['size-6'],\n      sm: ['size-8'],\n      md: ['size-10'],\n      lg: ['size-12'],\n      xl: ['size-16'],\n      xxl: ['size-24']\n    }\n  }\n})\n\ntype TAvatarProps = React.ComponentProps<\n  typeof StyledDiv | typeof StyledButton\n> & {\n  name?: string\n} & (\n    | {\n        onClick: React.MouseEventHandler<HTMLButtonElement>\n        disabled?: boolean\n      }\n    | { onClick?: never; disabled?: never }\n  )\n\nexport { AvatarRootContext }\nexport type { TAvatarRootContext }\n\nexport const AvatarRootProvider = ({ children, name, size }: TAvatarProps) => {\n  const value = React.useMemo<TAvatarRootContext>(\n    () => ({ name, size }),\n    [name, size]\n  )\n\n  return (\n    <AvatarRootContext.Provider value={value}>\n      {children}\n    </AvatarRootContext.Provider>\n  )\n}\n\nexport const AvatarRoot = ({\n  children,\n  size = 'lg',\n  name,\n  disabled = false,\n  onClick\n}: TAvatarProps) => (\n  <AvatarRootProvider name={name} size={size}>\n    {onClick ? (\n      <StyledButton\n        size={size}\n        disabled={disabled}\n        onClick={disabled ? undefined : onClick}\n        className={disabled ? 'cursor-auto' : 'cursor-pointer'}\n      >\n        {children}\n      </StyledButton>\n    ) : (\n      <StyledDiv size={size}>{children}</StyledDiv>\n    )}\n  </AvatarRootProvider>\n)\n\nexport const Avatar = Object.assign(AvatarRoot, {\n  Image: AvatarImage,\n  Initial: AvatarInitial,\n  Placeholder: AvatarPlaceholder,\n  Icon: AvatarIcon\n})\n\nAvatarRoot.displayName = 'Avatar'\n"],"names":["avatarRootStyles","StyledDiv","styled","StyledButton","AvatarRootProvider","children","name","size","value","React","AvatarRootContext","AvatarRoot","disabled","onClick","Avatar","AvatarImage","AvatarInitial","AvatarPlaceholder","AvatarIcon"],"mappings":"yXAWA,MAAMA,EAAmB,CACvB,OACA,iBACA,eACA,gBACA,eACA,WACA,kBACA,WACA,iBACF,EAEMC,EAAYC,EAAO,MAAO,CAC9B,KAAMF,EACN,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,EACd,IAAK,CAAC,SAAS,CACjB,CACF,CACF,CAAC,EAEKG,EAAeD,EAAO,SAAU,CACpC,KAAM,CACJ,GAAGF,EACH,kCACA,yCACA,iCACA,qCACA,0CACA,sCACA,+EACA,4DACA,iCACA,8BACA,qBACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,EACd,IAAK,CAAC,SAAS,CACjB,CACF,CACF,CAAC,EAiBYI,EAAqB,CAAC,CAAE,SAAAC,EAAU,KAAAC,EAAM,KAAAC,CAAK,IAAoB,CAC5E,MAAMC,EAAQC,EAAM,QAClB,KAAO,CAAE,KAAAH,EAAM,KAAAC,CAAK,GACpB,CAACD,EAAMC,CAAI,CACb,EAEA,OACEE,EAAA,cAACC,EAAkB,SAAlB,CAA2B,MAAOF,CAChCH,EAAAA,CACH,CAEJ,EAEaM,EAAa,CAAC,CACzB,SAAAN,EACA,KAAAE,EAAO,KACP,KAAAD,EACA,SAAAM,EAAW,GACX,QAAAC,CACF,IACEJ,EAAA,cAACL,EAAA,CAAmB,KAAME,EAAM,KAAMC,CAAAA,EACnCM,EACCJ,EAAA,cAACN,EAAA,CACC,KAAMI,EACN,SAAUK,EACV,QAASA,EAAW,OAAYC,EAChC,UAAWD,EAAW,cAAgB,gBAErCP,EAAAA,CACH,EAEAI,EAAA,cAACR,EAAA,CAAU,KAAMM,CAAOF,EAAAA,CAAS,CAErC,EAGWS,EAAS,OAAO,OAAOH,EAAY,CAC9C,MAAOI,EACP,QAASC,EACT,YAAaC,EACb,KAAMC,CACR,CAAC,EAEDP,EAAW,YAAc"}

package/dist/components/avatar/AvatarContext.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export type TAvatarRootContext = {
+    name?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+};
+export declare const AvatarRootContext: React.Context<TAvatarRootContext>;

package/dist/components/avatar/AvatarContext.js

@@ -0,0 +1,2 @@
+import*as t from"react";const o=t.createContext({name:void 0,size:"lg"});export{o as AvatarRootContext};
+//# sourceMappingURL=AvatarContext.js.map

package/dist/components/avatar/AvatarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarContext.js","sources":["../../../src/components/avatar/AvatarContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport type TAvatarRootContext = {\n  name?: string\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\n}\n\nexport const AvatarRootContext = React.createContext<TAvatarRootContext>({\n  name: undefined,\n  size: 'lg'\n})\n"],"names":["AvatarRootContext","React"],"mappings":"wBAOO,MAAMA,EAAoBC,EAAM,cAAkC,CACvE,KAAM,OACN,KAAM,IACR,CAAC"}

package/dist/components/avatar/AvatarIcon.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Icon } from '../icon';
+import { Icon } from '../icon/Icon';
 export declare const AvatarIcon: ({ is }: {
     is: typeof Icon;
 }) => React.JSX.Element;

package/dist/components/avatar/AvatarIcon.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{overrideStyledVariantValue as a}from"../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";import{Icon as i}from"../icon/Icon.js";import{AvatarRootContext as n}from"./Avatar.js";const l={xs:"sm",sm:"sm",md:"md",lg:"md",xl:"lg",xxl:"lg"},x=({is:e})=>{const r=t.useContext(n),{size:o}=r,m=t.useMemo(()=>a(o,s=>l[s]),[o]);return t.createElement(i,{size:m,is:e})};export{x as AvatarIcon};
+import*as t from"react";import{overrideStyledVariantValue as a}from"../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";import{Icon as i}from"../icon/Icon.js";import{AvatarRootContext as n}from"./AvatarContext.js";const l={xs:"sm",sm:"sm",md:"md",lg:"md",xl:"lg",xxl:"lg"},x=({is:e})=>{const r=t.useContext(n),{size:o}=r,m=t.useMemo(()=>a(o,s=>l[s]),[o]);return t.createElement(i,{size:m,is:e})};export{x as AvatarIcon};
 //# sourceMappingURL=AvatarIcon.js.map

package/dist/components/avatar/AvatarIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.js","sources":["../../../src/components/avatar/AvatarIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Icon } from '../icon'\nimport { AvatarRootContext } from './Avatar'\n\nconst toIconSize = {\n  xs: 'sm',\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg',\n  xxl: 'lg'\n}\n\nexport const AvatarIcon = ({ is }: { is: typeof Icon }) => {\n  const rootContext = React.useContext(AvatarRootContext)\n  const { size } = rootContext\n  const iconSize = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n\n  return <Icon size={iconSize} is={is} />\n}\n"],"names":["toIconSize","AvatarIcon","is","rootContext","React","AvatarRootContext","size","iconSize","overrideStyledVariantValue","s","Icon"],"mappings":"wOAOA,MAAMA,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,IAAK,IACP,EAEaC,EAAa,CAAC,CAAE,GAAAC,CAAG,IAA2B,CACzD,MAAMC,EAAcC,EAAM,WAAWC,CAAiB,EAChD,CAAE,KAAAC,CAAK,EAAIH,EACXI,EAAWH,EAAM,QACrB,IAAMI,EAA2BF,EAAOG,GAAMT,EAAWS,CAAC,CAAC,EAC3D,CAACH,CAAI,CACP,EAEA,OAAOF,EAAA,cAACM,EAAA,CAAK,KAAMH,EAAU,GAAIL,EAAI,CACvC"}
+{"version":3,"file":"AvatarIcon.js","sources":["../../../src/components/avatar/AvatarIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Icon } from '../icon/Icon'\nimport { AvatarRootContext } from './AvatarContext'\n\nconst toIconSize = {\n  xs: 'sm',\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg',\n  xxl: 'lg'\n}\n\nexport const AvatarIcon = ({ is }: { is: typeof Icon }) => {\n  const rootContext = React.useContext(AvatarRootContext)\n  const { size } = rootContext\n  const iconSize = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n\n  return <Icon size={iconSize} is={is} />\n}\n"],"names":["toIconSize","AvatarIcon","is","rootContext","React","AvatarRootContext","size","iconSize","overrideStyledVariantValue","s","Icon"],"mappings":"+OAOA,MAAMA,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,IAAK,IACP,EAEaC,EAAa,CAAC,CAAE,GAAAC,CAAG,IAA2B,CACzD,MAAMC,EAAcC,EAAM,WAAWC,CAAiB,EAChD,CAAE,KAAAC,CAAK,EAAIH,EACXI,EAAWH,EAAM,QACrB,IAAMI,EAA2BF,EAAOG,GAAMT,EAAWS,CAAC,CAAC,EAC3D,CAACH,CAAI,CACP,EAEA,OAAOF,EAAA,cAACM,EAAA,CAAK,KAAMH,EAAU,GAAIL,EAAI,CACvC"}

package/dist/components/avatar/AvatarImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarImage.js","sources":["../../../src/components/avatar/AvatarImage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Image } from '../image'\nimport { AvatarInitial } from './AvatarInitial'\n\nexport const AvatarImage = ({ src, alt }: { src: string; alt: string }) => {\n  if (!src) {\n    return <AvatarInitial />\n  }\n\n  return <Image className=\"size-full object-cover\" src={src} alt={alt} />\n}\n"],"names":["AvatarImage","src","alt","React","Image","AvatarInitial"],"mappings":"qHAKa,MAAAA,EAAc,CAAC,CAAE,IAAAC,EAAK,IAAAC,CAAI,IAChCD,EAIEE,EAAA,cAACC,EAAA,CAAM,UAAU,yBAAyB,IAAKH,EAAK,IAAKC,CAAK,CAAA,EAH5DC,EAAA,cAACE,EAAA,IAAc"}
+{"version":3,"file":"AvatarImage.js","sources":["../../../src/components/avatar/AvatarImage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Image } from '../image/Image'\nimport { AvatarInitial } from './AvatarInitial'\n\nexport const AvatarImage = ({ src, alt }: { src: string; alt: string }) => {\n  if (!src) {\n    return <AvatarInitial />\n  }\n\n  return <Image className=\"size-full object-cover\" src={src} alt={alt} />\n}\n"],"names":["AvatarImage","src","alt","React","Image","AvatarInitial"],"mappings":"qHAKa,MAAAA,EAAc,CAAC,CAAE,IAAAC,EAAK,IAAAC,CAAI,IAChCD,EAIEE,EAAA,cAACC,EAAA,CAAM,UAAU,yBAAyB,IAAKH,EAAK,IAAKC,CAAK,CAAA,EAH5DC,EAAA,cAACE,EAAA,IAAc"}

package/dist/components/avatar/AvatarInitial.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{overrideStyledVariantValue as s}from"../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";import{Text as l}from"../text/Text.js";import{AvatarRootContext as n}from"./Avatar.js";import{AvatarPlaceholder as i}from"./AvatarPlaceholder.js";const x={xs:"xs",sm:"sm",md:"sm",lg:"md",xl:"md",xxl:"lg"},p=()=>{const o=e.useContext(n),{name:t,size:r}=o,m=e.useMemo(()=>s(r,a=>x[a]),[r]);return t?e.createElement(l,{size:m,className:"text-grey-800"},t[0].toUpperCase()):e.createElement(i,null)};export{p as AvatarInitial};
+import*as e from"react";import{overrideStyledVariantValue as s}from"../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";import{Text as l}from"../text/Text.js";import{AvatarRootContext as n}from"./AvatarContext.js";import{AvatarPlaceholder as i}from"./AvatarPlaceholder.js";const x={xs:"xs",sm:"sm",md:"sm",lg:"md",xl:"md",xxl:"lg"},p=()=>{const o=e.useContext(n),{name:t,size:r}=o,m=e.useMemo(()=>s(r,a=>x[a]),[r]);return t?e.createElement(l,{size:m,className:"text-grey-800"},t[0].toUpperCase()):e.createElement(i,null)};export{p as AvatarInitial};
 //# sourceMappingURL=AvatarInitial.js.map

package/dist/components/avatar/AvatarInitial.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarInitial.js","sources":["../../../src/components/avatar/AvatarInitial.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Text } from '../text'\nimport { AvatarRootContext } from './Avatar'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst toTextSize = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n  xl: 'md',\n  xxl: 'lg'\n}\n\nexport const AvatarInitial = () => {\n  const rootContext = React.useContext(AvatarRootContext)\n  const { name, size } = rootContext\n  const textSize = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => toTextSize[s]),\n    [size]\n  )\n\n  if (!name) {\n    return <AvatarPlaceholder />\n  }\n\n  return (\n    <Text size={textSize} className=\"text-grey-800\">\n      {name[0].toUpperCase()}\n    </Text>\n  )\n}\n"],"names":["toTextSize","AvatarInitial","rootContext","React","AvatarRootContext","name","size","textSize","overrideStyledVariantValue","s","Text","AvatarPlaceholder"],"mappings":"mSAQA,MAAMA,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,IAAK,IACP,EAEaC,EAAgB,IAAM,CACjC,MAAMC,EAAcC,EAAM,WAAWC,CAAiB,EAChD,CAAE,KAAAC,EAAM,KAAAC,CAAK,EAAIJ,EACjBK,EAAWJ,EAAM,QACrB,IAAMK,EAA2BF,EAAOG,GAAMT,EAAWS,CAAC,CAAC,EAC3D,CAACH,CAAI,CACP,EAEA,OAAKD,EAKHF,EAAA,cAACO,EAAA,CAAK,KAAMH,EAAU,UAAU,eAAA,EAC7BF,EAAK,CAAC,EAAE,YACX,CAAA,EANOF,EAAA,cAACQ,EAAA,IAAkB,CAQ9B"}
+{"version":3,"file":"AvatarInitial.js","sources":["../../../src/components/avatar/AvatarInitial.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Text } from '../text/Text'\nimport { AvatarRootContext } from './AvatarContext'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst toTextSize = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n  xl: 'md',\n  xxl: 'lg'\n}\n\nexport const AvatarInitial = () => {\n  const rootContext = React.useContext(AvatarRootContext)\n  const { name, size } = rootContext\n  const textSize = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => toTextSize[s]),\n    [size]\n  )\n\n  if (!name) {\n    return <AvatarPlaceholder />\n  }\n\n  return (\n    <Text size={textSize} className=\"text-grey-800\">\n      {name[0].toUpperCase()}\n    </Text>\n  )\n}\n"],"names":["toTextSize","AvatarInitial","rootContext","React","AvatarRootContext","name","size","textSize","overrideStyledVariantValue","s","Text","AvatarPlaceholder"],"mappings":"0SAQA,MAAMA,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,IAAK,IACP,EAEaC,EAAgB,IAAM,CACjC,MAAMC,EAAcC,EAAM,WAAWC,CAAiB,EAChD,CAAE,KAAAC,EAAM,KAAAC,CAAK,EAAIJ,EACjBK,EAAWJ,EAAM,QACrB,IAAMK,EAA2BF,EAAOG,GAAMT,EAAWS,CAAC,CAAC,EAC3D,CAACH,CAAI,CACP,EAEA,OAAKD,EAKHF,EAAA,cAACO,EAAA,CAAK,KAAMH,EAAU,UAAU,eAAA,EAC7BF,EAAK,CAAC,EAAE,YACX,CAAA,EANOF,EAAA,cAACQ,EAAA,IAAkB,CAQ9B"}

package/dist/components/avatar/AvatarPlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarPlaceholder.js","sources":["../../../src/components/avatar/AvatarPlaceholder.tsx"],"sourcesContent":["import { User } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { Icon } from '../icon'\n\nexport const AvatarPlaceholder = () => {\n  return (\n    <div className=\"relative size-full\">\n      <Icon is={User} className=\"size-full\" />\n    </div>\n  )\n}\n"],"names":["AvatarPlaceholder","React","Icon","User"],"mappings":"2GAKO,MAAMA,EAAoB,IAE7BC,EAAA,cAAC,MAAA,CAAI,UAAU,oBAAA,EACbA,EAAA,cAACC,EAAA,CAAK,GAAIC,EAAM,UAAU,WAAA,CAAY,CACxC"}
+{"version":3,"file":"AvatarPlaceholder.js","sources":["../../../src/components/avatar/AvatarPlaceholder.tsx"],"sourcesContent":["import { User } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { Icon } from '../icon/Icon'\n\nexport const AvatarPlaceholder = () => {\n  return (\n    <div className=\"relative size-full\">\n      <Icon is={User} className=\"size-full\" />\n    </div>\n  )\n}\n"],"names":["AvatarPlaceholder","React","Icon","User"],"mappings":"2GAKO,MAAMA,EAAoB,IAE7BC,EAAA,cAAC,MAAA,CAAI,UAAU,oBAAA,EACbA,EAAA,cAACC,EAAA,CAAK,GAAIC,EAAM,UAAU,WAAA,CAAY,CACxC"}

package/dist/components/badge/Badge.d.ts

@@ -1,17 +1,9 @@
 import * as React from 'react';
-import { Icon } from '../../components/icon';
+import { Icon } from '../../components/icon/Icon';
 import { colorSchemes as badgeColorSchemes } from './Badge.colorscheme.config';
 import { BadgeText } from './BadgeText';
-declare const StyledBadge: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const StyledBadge: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "direction" | "align" | "wrap" | "justify" | "gap"> & {
-    direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "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" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
-    align?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline">>) | undefined;
-    gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
-} & {
-    as?: React.ElementType;
 }, "size" | "emphasis" | "isClickable" | "highlighted"> & {
     emphasis?: ("bold" | "white" | "subtle" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "white" | "subtle">>) | undefined;
     size?: ("sm" | "md" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "xs">>) | undefined;
@@ -32,7 +24,7 @@ export declare const Badge: React.ForwardRefExoticComponent<Omit<TBadgeProps, "r
         size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
         noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
         weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
-        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
+        family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
     } & {
         as?: React.ElementType;
     }, "as"> & {

package/dist/components/badge/Badge.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Flex as v}from"../flex/Flex.js";import{Icon as w}from"../icon/Icon.js";import{styled as k}from"../../styled.js";import{useCallbackRefState as y}from"../../utilities/hooks/useCallbackRef.js";import{colorSchemes as C,badgeSemanticNames as E}from"./Badge.colorscheme.config.js";import{BadgeContext as B,BadgeProvider as O}from"./Badge.context.js";import{BadgeIcon as n}from"./BadgeIcon.js";import{BadgeText as m}from"./BadgeText.js";import{OptionalTooltipWrapper as z}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";const j=k(v,{base:["justify-center","items-center","rounded-sm","min-w-0","border","border-white","font-body","*:not-last:mr-1"],variants:{emphasis:{white:["text-(--text-on-white)","bg-white"],subtle:["text-(--text-subtle)","bg-(--background-subtle)"],bold:["text-(--text-bold)","bg-(--background-bold)"]},size:{xs:["px-1","py-0"],sm:["px-1","py-0.5"],md:["px-2","py-1"]},isClickable:{true:["cursor-pointer"]},highlighted:{true:[]}},compoundVariants:[{isClickable:!0,emphasis:"white",class:["hover:text-(--text-on-white)","hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]"]},{isClickable:!0,emphasis:"subtle",class:["hover:bg-(--background-subtle-hover)","hover:text-(--text-subtle-hover)"]},{isClickable:!0,emphasis:"bold",class:["hover:bg-(--background-bold-hover)","hover:text-(--text-bold)"]},{emphasis:"white",highlighted:!0,class:["text-(--text-on-white)","bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]"]},{emphasis:"subtle",highlighted:!0,class:["text-(--text-subtle-hover)","(--bg-background-subtle-hover)"]},{emphasis:"bold",highlighted:!0,class:["text-(--text-bold)","bg-(--background-bold-hover)"]}]},{enabledResponsiveVariants:!0}),I=e.forwardRef(({theme:o="info",emphasis:s="subtle",children:r,style:i,...l},h)=>{const{size:c,overflow:d,isOverflowing:p}=e.useContext(B),[a,g]=y();e.useImperativeHandle(h,()=>a);const u=a==null?void 0:a.textContent,x=E.includes(o),f=Object.keys(l).includes("onClick")||Object.keys(l).includes("href");return e.createElement(z,{hasTooltip:d==="ellipsis"&&p,label:u},e.createElement(j,{role:"status",emphasis:s,size:c,style:{...C[o],...i},...l,ref:g,isClickable:f&&!x},e.Children.map(r,t=>typeof t=="string"||typeof t=="number"?e.createElement(m,null,t):e.isValidElement(t)&&t.type===w?e.createElement(n,{...t.props}):t)))}),b=e.forwardRef(({size:o="sm",overflow:s="wrap",...r},i)=>e.createElement(O,{size:o,overflow:s},e.createElement(I,{...r,ref:i}))),R=Object.assign(b,{Icon:n,Text:m});b.displayName="Badge";export{R as Badge};
+import*as e from"react";import{Icon as v}from"../icon/Icon.js";import{styled as w}from"../../styled.js";import{useCallbackRefState as k}from"../../utilities/hooks/useCallbackRef.js";import{OptionalTooltipWrapper as y}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";import{colorSchemes as C,badgeSemanticNames as E}from"./Badge.colorscheme.config.js";import{BadgeContext as B,BadgeProvider as O}from"./Badge.context.js";import{BadgeIcon as n}from"./BadgeIcon.js";import{BadgeText as b}from"./BadgeText.js";const z=w("div",{base:["flex","justify-center","items-center","rounded-sm","min-w-0","border","border-white","font-body","*:not-last:mr-1"],variants:{emphasis:{white:["text-(--text-on-white)","bg-white"],subtle:["text-(--text-subtle)","bg-(--background-subtle)"],bold:["text-(--text-bold)","bg-(--background-bold)"]},size:{xs:["px-1","py-0"],sm:["px-1","py-0.5"],md:["px-2","py-1"]},isClickable:{true:["cursor-pointer"]},highlighted:{true:[]}},compoundVariants:[{isClickable:!0,emphasis:"white",class:["hover:text-(--text-on-white)","hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]"]},{isClickable:!0,emphasis:"subtle",class:["hover:bg-(--background-subtle-hover)","hover:text-(--text-subtle-hover)"]},{isClickable:!0,emphasis:"bold",class:["hover:bg-(--background-bold-hover)","hover:text-(--text-bold)"]},{emphasis:"white",highlighted:!0,class:["text-(--text-on-white)","bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]"]},{emphasis:"subtle",highlighted:!0,class:["text-(--text-subtle-hover)","(--bg-background-subtle-hover)"]},{emphasis:"bold",highlighted:!0,class:["text-(--text-bold)","bg-(--background-bold-hover)"]}]},{enabledResponsiveVariants:!0}),I=e.forwardRef(({theme:o="info",emphasis:s="subtle",children:r,style:i,...l},h)=>{const{size:c,overflow:d,isOverflowing:p}=e.useContext(B),[a,g]=k();e.useImperativeHandle(h,()=>a);const u=a==null?void 0:a.textContent,x=E.includes(o),f=Object.keys(l).includes("onClick")||Object.keys(l).includes("href");return e.createElement(y,{hasTooltip:d==="ellipsis"&&p,label:u},e.createElement(z,{role:"status",emphasis:s,size:c,style:{...C[o],...i},...l,ref:g,isClickable:f&&!x},e.Children.map(r,t=>typeof t=="string"||typeof t=="number"?e.createElement(b,null,t):e.isValidElement(t)&&t.type===v?e.createElement(n,{...t.props}):t)))}),m=e.forwardRef(({size:o="sm",overflow:s="wrap",...r},i)=>e.createElement(O,{size:o,overflow:s},e.createElement(I,{...r,ref:i}))),j=Object.assign(m,{Icon:n,Text:b});m.displayName="Badge";export{j as Badge};
 //# sourceMappingURL=Badge.js.map

package/dist/components/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\n\nimport {\n  colorSchemes as badgeColorSchemes,\n  badgeSemanticNames\n} from './Badge.colorscheme.config'\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\n\nconst StyledBadge = styled(\n  Flex,\n  {\n    base: [\n      'justify-center',\n      'items-center',\n      'rounded-sm',\n      'min-w-0',\n      'border',\n      'border-white',\n      'font-body',\n      '*:not-last:mr-1'\n    ],\n    variants: {\n      emphasis: {\n        white: ['text-(--text-on-white)', 'bg-white'],\n        subtle: ['text-(--text-subtle)', 'bg-(--background-subtle)'],\n        bold: ['text-(--text-bold)', 'bg-(--background-bold)']\n      },\n      size: {\n        xs: ['px-1', 'py-0'],\n        sm: ['px-1', 'py-0.5'],\n        md: ['px-2', 'py-1']\n      },\n      isClickable: {\n        true: ['cursor-pointer']\n      },\n      highlighted: {\n        true: []\n      }\n    },\n    compoundVariants: [\n      {\n        isClickable: true,\n        emphasis: 'white',\n        class: [\n          'hover:text-(--text-on-white)',\n          'hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n        ]\n      },\n      {\n        isClickable: true,\n        emphasis: 'subtle',\n        class: [\n          'hover:bg-(--background-subtle-hover)',\n          'hover:text-(--text-subtle-hover)'\n        ]\n      },\n      {\n        isClickable: true,\n        emphasis: 'bold',\n        class: [\n          'hover:bg-(--background-bold-hover)',\n          'hover:text-(--text-bold)'\n        ]\n      },\n      {\n        emphasis: 'white',\n        highlighted: true,\n        class: [\n          'text-(--text-on-white)',\n          'bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n        ]\n      },\n      {\n        emphasis: 'subtle',\n        highlighted: true,\n        class: ['text-(--text-subtle-hover)', '(--bg-background-subtle-hover)']\n      },\n      {\n        emphasis: 'bold',\n        highlighted: true,\n        class: ['text-(--text-bold)', 'bg-(--background-bold-hover)']\n      }\n    ]\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {\n  theme?: keyof typeof badgeColorSchemes\n  overflow?: React.ComponentProps<typeof BadgeText>['overflow']\n}\n\ntype TBadgeInnerProps = Omit<TBadgeProps, 'size' | 'overflow'>\n\nconst BadgeInner = React.forwardRef<HTMLDivElement, TBadgeInnerProps>(\n  ({ theme = 'info', emphasis = 'subtle', children, style, ...rest }, ref) => {\n    const { size, overflow, isOverflowing } = React.useContext(BadgeContext)\n    const [badgeElRef, setBadgeElRef] = useCallbackRefState()\n    React.useImperativeHandle(ref, () => badgeElRef as HTMLDivElement)\n\n    const label = badgeElRef?.textContent\n\n    const isInfoOnly = badgeSemanticNames.includes(theme)\n\n    const isClickable =\n      Object.keys(rest).includes('onClick') ||\n      Object.keys(rest).includes('href')\n\n    return (\n      <OptionalTooltipWrapper\n        hasTooltip={overflow === 'ellipsis' && isOverflowing}\n        label={label}\n      >\n        <StyledBadge\n          role=\"status\"\n          emphasis={emphasis}\n          size={size}\n          style={{\n            ...badgeColorSchemes[theme],\n            ...style\n          }}\n          {...rest}\n          ref={setBadgeElRef}\n          isClickable={isClickable && !isInfoOnly}\n        >\n          {React.Children.map(children, (child) => {\n            if (typeof child === 'string' || typeof child === 'number') {\n              return <BadgeText>{child}</BadgeText>\n            }\n            if (React.isValidElement(child) && child.type === Icon) {\n              return <BadgeIcon {...child.props} />\n            }\n            return child\n          })}\n        </StyledBadge>\n      </OptionalTooltipWrapper>\n    )\n  }\n)\n\nconst BadgeComponent = React.forwardRef<HTMLDivElement, TBadgeProps>(\n  ({ size = 'sm', overflow = 'wrap', ...rest }, ref) => {\n    return (\n      <BadgeProvider size={size} overflow={overflow}>\n        <BadgeInner {...rest} ref={ref} />\n      </BadgeProvider>\n    )\n  }\n)\n\nexport const Badge = Object.assign(BadgeComponent, {\n  Icon: BadgeIcon,\n  Text: BadgeText\n})\n\nBadgeComponent.displayName = 'Badge'\n"],"names":["StyledBadge","styled","Flex","BadgeInner","React","theme","emphasis","children","style","rest","ref","size","overflow","isOverflowing","BadgeContext","badgeElRef","setBadgeElRef","useCallbackRefState","label","isInfoOnly","badgeSemanticNames","isClickable","OptionalTooltipWrapper","badgeColorSchemes","child","BadgeText","Icon","BadgeIcon","BadgeComponent","BadgeProvider","Badge"],"mappings":"yjBAgBA,MAAMA,EAAcC,EAClBC,EACA,CACE,KAAM,CACJ,iBACA,eACA,aACA,UACA,SACA,eACA,YACA,iBACF,EACA,SAAU,CACR,SAAU,CACR,MAAO,CAAC,yBAA0B,UAAU,EAC5C,OAAQ,CAAC,uBAAwB,0BAA0B,EAC3D,KAAM,CAAC,qBAAsB,wBAAwB,CACvD,EACA,KAAM,CACJ,GAAI,CAAC,OAAQ,MAAM,EACnB,GAAI,CAAC,OAAQ,QAAQ,EACrB,GAAI,CAAC,OAAQ,MAAM,CACrB,EACA,YAAa,CACX,KAAM,CAAC,gBAAgB,CACzB,EACA,YAAa,CACX,KAAM,CACR,CAAA,CACF,EACA,iBAAkB,CAChB,CACE,YAAa,GACb,SAAU,QACV,MAAO,CACL,+BACA,iEACF,CACF,EACA,CACE,YAAa,GACb,SAAU,SACV,MAAO,CACL,uCACA,kCACF,CACF,EACA,CACE,YAAa,GACb,SAAU,OACV,MAAO,CACL,qCACA,0BACF,CACF,EACA,CACE,SAAU,QACV,YAAa,GACb,MAAO,CACL,yBACA,2DACF,CACF,EACA,CACE,SAAU,SACV,YAAa,GACb,MAAO,CAAC,6BAA8B,gCAAgC,CACxE,EACA,CACE,SAAU,OACV,YAAa,GACb,MAAO,CAAC,qBAAsB,8BAA8B,CAC9D,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EASMC,EAAaC,EAAM,WACvB,CAAC,CAAE,MAAAC,EAAQ,OAAQ,SAAAC,EAAW,SAAU,SAAAC,EAAU,MAAAC,EAAO,GAAGC,CAAK,EAAGC,IAAQ,CAC1E,KAAM,CAAE,KAAAC,EAAM,SAAAC,EAAU,cAAAC,CAAc,EAAIT,EAAM,WAAWU,CAAY,EACjE,CAACC,EAAYC,CAAa,EAAIC,IACpCb,EAAM,oBAAoBM,EAAK,IAAMK,CAA4B,EAEjE,MAAMG,EAAQH,GAAA,KAAA,OAAAA,EAAY,YAEpBI,EAAaC,EAAmB,SAASf,CAAK,EAE9CgB,EACJ,OAAO,KAAKZ,CAAI,EAAE,SAAS,SAAS,GACpC,OAAO,KAAKA,CAAI,EAAE,SAAS,MAAM,EAEnC,OACEL,EAAA,cAACkB,EAAA,CACC,WAAYV,IAAa,YAAcC,EACvC,MAAOK,CAAAA,EAEPd,EAAA,cAACJ,EAAA,CACC,KAAK,SACL,SAAUM,EACV,KAAMK,EACN,MAAO,CACL,GAAGY,EAAkBlB,CAAK,EAC1B,GAAGG,CACL,EACC,GAAGC,EACJ,IAAKO,EACL,YAAaK,GAAe,CAACF,CAAAA,EAE5Bf,EAAM,SAAS,IAAIG,EAAWiB,GACzB,OAAOA,GAAU,UAAY,OAAOA,GAAU,SACzCpB,EAAA,cAACqB,EAAA,KAAWD,CAAM,EAEvBpB,EAAM,eAAeoB,CAAK,GAAKA,EAAM,OAASE,EACzCtB,EAAA,cAACuB,EAAA,CAAW,GAAGH,EAAM,MAAO,EAE9BA,CACR,CACH,CACF,CAEJ,CACF,EAEMI,EAAiBxB,EAAM,WAC3B,CAAC,CAAE,KAAAO,EAAO,KAAM,SAAAC,EAAW,OAAQ,GAAGH,CAAK,EAAGC,IAE1CN,EAAA,cAACyB,EAAA,CAAc,KAAMlB,EAAM,SAAUC,GACnCR,EAAA,cAACD,EAAA,CAAY,GAAGM,EAAM,IAAKC,CAAAA,CAAK,CAClC,CAGN,EAEaoB,EAAQ,OAAO,OAAOF,EAAgB,CACjD,KAAMD,EACN,KAAMF,CACR,CAAC,EAEDG,EAAe,YAAc"}
+{"version":3,"file":"Badge.js","sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\n\nimport {\n  badgeSemanticNames,\n  colorSchemes as badgeColorSchemes\n} from './Badge.colorscheme.config'\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\n\nconst StyledBadge = styled(\n  'div',\n  {\n    base: [\n      'flex',\n      'justify-center',\n      'items-center',\n      'rounded-sm',\n      'min-w-0',\n      'border',\n      'border-white',\n      'font-body',\n      '*:not-last:mr-1'\n    ],\n    variants: {\n      emphasis: {\n        white: ['text-(--text-on-white)', 'bg-white'],\n        subtle: ['text-(--text-subtle)', 'bg-(--background-subtle)'],\n        bold: ['text-(--text-bold)', 'bg-(--background-bold)']\n      },\n      size: {\n        xs: ['px-1', 'py-0'],\n        sm: ['px-1', 'py-0.5'],\n        md: ['px-2', 'py-1']\n      },\n      isClickable: {\n        true: ['cursor-pointer']\n      },\n      highlighted: {\n        true: []\n      }\n    },\n    compoundVariants: [\n      {\n        isClickable: true,\n        emphasis: 'white',\n        class: [\n          'hover:text-(--text-on-white)',\n          'hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n        ]\n      },\n      {\n        isClickable: true,\n        emphasis: 'subtle',\n        class: [\n          'hover:bg-(--background-subtle-hover)',\n          'hover:text-(--text-subtle-hover)'\n        ]\n      },\n      {\n        isClickable: true,\n        emphasis: 'bold',\n        class: [\n          'hover:bg-(--background-bold-hover)',\n          'hover:text-(--text-bold)'\n        ]\n      },\n      {\n        emphasis: 'white',\n        highlighted: true,\n        class: [\n          'text-(--text-on-white)',\n          'bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n        ]\n      },\n      {\n        emphasis: 'subtle',\n        highlighted: true,\n        class: ['text-(--text-subtle-hover)', '(--bg-background-subtle-hover)']\n      },\n      {\n        emphasis: 'bold',\n        highlighted: true,\n        class: ['text-(--text-bold)', 'bg-(--background-bold-hover)']\n      }\n    ]\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {\n  theme?: keyof typeof badgeColorSchemes\n  overflow?: React.ComponentProps<typeof BadgeText>['overflow']\n}\n\ntype TBadgeInnerProps = Omit<TBadgeProps, 'size' | 'overflow'>\n\nconst BadgeInner = React.forwardRef<HTMLDivElement, TBadgeInnerProps>(\n  ({ theme = 'info', emphasis = 'subtle', children, style, ...rest }, ref) => {\n    const { size, overflow, isOverflowing } = React.useContext(BadgeContext)\n    const [badgeElRef, setBadgeElRef] = useCallbackRefState()\n    React.useImperativeHandle(ref, () => badgeElRef as HTMLDivElement)\n\n    const label = badgeElRef?.textContent\n\n    const isInfoOnly = badgeSemanticNames.includes(theme)\n\n    const isClickable =\n      Object.keys(rest).includes('onClick') ||\n      Object.keys(rest).includes('href')\n\n    return (\n      <OptionalTooltipWrapper\n        hasTooltip={overflow === 'ellipsis' && isOverflowing}\n        label={label}\n      >\n        <StyledBadge\n          role=\"status\"\n          emphasis={emphasis}\n          size={size}\n          style={{\n            ...badgeColorSchemes[theme],\n            ...style\n          }}\n          {...rest}\n          ref={setBadgeElRef}\n          isClickable={isClickable && !isInfoOnly}\n        >\n          {React.Children.map(children, (child) => {\n            if (typeof child === 'string' || typeof child === 'number') {\n              return <BadgeText>{child}</BadgeText>\n            }\n            if (React.isValidElement(child) && child.type === Icon) {\n              return <BadgeIcon {...child.props} />\n            }\n            return child\n          })}\n        </StyledBadge>\n      </OptionalTooltipWrapper>\n    )\n  }\n)\n\nconst BadgeComponent = React.forwardRef<HTMLDivElement, TBadgeProps>(\n  ({ size = 'sm', overflow = 'wrap', ...rest }, ref) => {\n    return (\n      <BadgeProvider size={size} overflow={overflow}>\n        <BadgeInner {...rest} ref={ref} />\n      </BadgeProvider>\n    )\n  }\n)\n\nexport const Badge = Object.assign(BadgeComponent, {\n  Icon: BadgeIcon,\n  Text: BadgeText\n})\n\nBadgeComponent.displayName = 'Badge'\n"],"names":["StyledBadge","styled","BadgeInner","React","theme","emphasis","children","style","rest","ref","size","overflow","isOverflowing","BadgeContext","badgeElRef","setBadgeElRef","useCallbackRefState","label","isInfoOnly","badgeSemanticNames","isClickable","OptionalTooltipWrapper","badgeColorSchemes","child","BadgeText","Icon","BadgeIcon","BadgeComponent","BadgeProvider","Badge"],"mappings":"khBAeA,MAAMA,EAAcC,EAClB,MACA,CACE,KAAM,CACJ,OACA,iBACA,eACA,aACA,UACA,SACA,eACA,YACA,iBACF,EACA,SAAU,CACR,SAAU,CACR,MAAO,CAAC,yBAA0B,UAAU,EAC5C,OAAQ,CAAC,uBAAwB,0BAA0B,EAC3D,KAAM,CAAC,qBAAsB,wBAAwB,CACvD,EACA,KAAM,CACJ,GAAI,CAAC,OAAQ,MAAM,EACnB,GAAI,CAAC,OAAQ,QAAQ,EACrB,GAAI,CAAC,OAAQ,MAAM,CACrB,EACA,YAAa,CACX,KAAM,CAAC,gBAAgB,CACzB,EACA,YAAa,CACX,KAAM,EACR,CACF,EACA,iBAAkB,CAChB,CACE,YAAa,GACb,SAAU,QACV,MAAO,CACL,+BACA,iEACF,CACF,EACA,CACE,YAAa,GACb,SAAU,SACV,MAAO,CACL,uCACA,kCACF,CACF,EACA,CACE,YAAa,GACb,SAAU,OACV,MAAO,CACL,qCACA,0BACF,CACF,EACA,CACE,SAAU,QACV,YAAa,GACb,MAAO,CACL,yBACA,2DACF,CACF,EACA,CACE,SAAU,SACV,YAAa,GACb,MAAO,CAAC,6BAA8B,gCAAgC,CACxE,EACA,CACE,SAAU,OACV,YAAa,GACb,MAAO,CAAC,qBAAsB,8BAA8B,CAC9D,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EASMC,EAAaC,EAAM,WACvB,CAAC,CAAE,MAAAC,EAAQ,OAAQ,SAAAC,EAAW,SAAU,SAAAC,EAAU,MAAAC,EAAO,GAAGC,CAAK,EAAGC,IAAQ,CAC1E,KAAM,CAAE,KAAAC,EAAM,SAAAC,EAAU,cAAAC,CAAc,EAAIT,EAAM,WAAWU,CAAY,EACjE,CAACC,EAAYC,CAAa,EAAIC,IACpCb,EAAM,oBAAoBM,EAAK,IAAMK,CAA4B,EAEjE,MAAMG,EAAQH,GAAA,KAAAA,OAAAA,EAAY,YAEpBI,EAAaC,EAAmB,SAASf,CAAK,EAE9CgB,EACJ,OAAO,KAAKZ,CAAI,EAAE,SAAS,SAAS,GACpC,OAAO,KAAKA,CAAI,EAAE,SAAS,MAAM,EAEnC,OACEL,EAAA,cAACkB,EAAA,CACC,WAAYV,IAAa,YAAcC,EACvC,MAAOK,CAEPd,EAAAA,EAAA,cAACH,EAAA,CACC,KAAK,SACL,SAAUK,EACV,KAAMK,EACN,MAAO,CACL,GAAGY,EAAkBlB,CAAK,EAC1B,GAAGG,CACL,EACC,GAAGC,EACJ,IAAKO,EACL,YAAaK,GAAe,CAACF,CAAAA,EAE5Bf,EAAM,SAAS,IAAIG,EAAWiB,GACzB,OAAOA,GAAU,UAAY,OAAOA,GAAU,SACzCpB,EAAA,cAACqB,EAAA,KAAWD,CAAM,EAEvBpB,EAAM,eAAeoB,CAAK,GAAKA,EAAM,OAASE,EACzCtB,EAAA,cAACuB,EAAA,CAAW,GAAGH,EAAM,MAAO,EAE9BA,CACR,CACH,CACF,CAEJ,CACF,EAEMI,EAAiBxB,EAAM,WAC3B,CAAC,CAAE,KAAAO,EAAO,KAAM,SAAAC,EAAW,OAAQ,GAAGH,CAAK,EAAGC,IAE1CN,EAAA,cAACyB,EAAA,CAAc,KAAMlB,EAAM,SAAUC,GACnCR,EAAA,cAACD,EAAA,CAAY,GAAGM,EAAM,IAAKC,CAAAA,CAAK,CAClC,CAGN,EAEaoB,EAAQ,OAAO,OAAOF,EAAgB,CACjD,KAAMD,EACN,KAAMF,CACR,CAAC,EAEDG,EAAe,YAAc"}

package/dist/components/badge/BadgeIcon.d.ts

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

package/dist/components/badge/BadgeIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeIcon.js","sources":["../../../src/components/badge/BadgeIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon'\n\nexport const BadgeIcon = (props: React.ComponentProps<typeof Icon>) => (\n  <Icon size=\"sm\" {...props} />\n)\n"],"names":["BadgeIcon","props","React","Icon"],"mappings":"+DAIa,MAAAA,EAAaC,GACxBC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAM,GAAGF,CAAO,CAAA"}
+{"version":3,"file":"BadgeIcon.js","sources":["../../../src/components/badge/BadgeIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\n\nexport const BadgeIcon = (props: React.ComponentProps<typeof Icon>) => (\n  <Icon size=\"sm\" {...props} />\n)\n"],"names":["BadgeIcon","props","React","Icon"],"mappings":"+DAIa,MAAAA,EAAaC,GACxBC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAM,GAAGF,CAAO,CAAA"}

package/dist/components/badge/BadgeText.d.ts

@@ -5,7 +5,7 @@ declare const StyledBadgeText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Om
     size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
     noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
-    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
+    family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
 } & {
     as?: React.ElementType;
 }, "as"> & {

package/dist/components/badge/BadgeText.js.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeText.js","sources":["../../../src/components/badge/BadgeText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useResizeObserver } from '~/utilities/hooks/useResizeObserver'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { BadgeContext } from './Badge.context'\n\n/*\n * Instead of sticking a resize observer on every `BadgeText`\n * regardless of overflow type, split the resize logic into a component.\n * Basically call the hook conditionally, only for the version with\n * the `overflow === 'ellipsis'` which needs it.\n * This saves us from initialising a resize observer for any badge which doesn't need it.\n */\nconst ObserveBadgeTextOverflow: React.VFC<{ elRef: HTMLElement | null }> = ({\n  elRef\n}) => {\n  const { setIsOverflowing } = React.useContext(BadgeContext)\n\n  useResizeObserver({\n    delay: 0,\n    elements: [elRef],\n    onResize: () => {\n      if (!elRef?.scrollWidth || !elRef?.clientWidth) return\n      setIsOverflowing?.(elRef.scrollWidth > elRef.clientWidth)\n    }\n  })\n\n  return null\n}\n\nconst StyledBadgeText = styled(Text, {\n  base: ['py-0.5'],\n  variants: {\n    overflow: {\n      ellipsis: ['overflow-x-hidden', 'text-ellipsis', 'whitespace-nowrap'],\n      wrap: ['whitespace-normal']\n    }\n  }\n})\n\ntype TBadgeTextProps = React.ComponentProps<typeof StyledBadgeText>\n\nconst toTextSize = {\n  xs: 'sm',\n  sm: 'md',\n  md: 'md'\n}\n\nexport const BadgeText = ({\n  children,\n  ...rest\n}: TBadgeTextProps): JSX.Element => {\n  // We need the return type here. Otherwise typsecript breaks when this type is used in Badge. Do not remove unless you want to tackle that issue again.\n  const { size: badgeSize, overflow } = React.useContext(BadgeContext)\n\n  const size = React.useMemo(\n    () => overrideStyledVariantValue(badgeSize, (s) => toTextSize[s]),\n    [badgeSize]\n  )\n\n  const [elRef, setElRef] = useCallbackRefState()\n\n  return (\n    <>\n      {overflow === 'ellipsis' && <ObserveBadgeTextOverflow elRef={elRef} />}\n      <StyledBadgeText\n        noCapsize\n        size={size}\n        overflow={overflow}\n        ref={setElRef}\n        {...rest}\n      >\n        {children}\n      </StyledBadgeText>\n    </>\n  )\n}\n"],"names":["ObserveBadgeTextOverflow","elRef","setIsOverflowing","React","BadgeContext","useResizeObserver","StyledBadgeText","styled","Text","toTextSize","BadgeText","children","rest","badgeSize","overflow","size","overrideStyledVariantValue","s","setElRef","useCallbackRefState"],"mappings":"gbAiBA,MAAMA,EAAqE,CAAC,CAC1E,MAAAC,CACF,IAAM,CACJ,KAAM,CAAE,iBAAAC,CAAiB,EAAIC,EAAM,WAAWC,CAAY,EAE1D,OAAAC,EAAkB,CAChB,MAAO,EACP,SAAU,CAACJ,CAAK,EAChB,SAAU,IAAM,CACV,EAACA,GAAA,MAAAA,EAAO,cAAe,EAACA,GAAA,MAAAA,EAAO,cACnCC,GAAA,MAAAA,EAAmBD,EAAM,YAAcA,EAAM,YAC/C,CACF,CAAC,EAEM,IACT,EAEMK,EAAkBC,EAAOC,EAAM,CACnC,KAAM,CAAC,QAAQ,EACf,SAAU,CACR,SAAU,CACR,SAAU,CAAC,oBAAqB,gBAAiB,mBAAmB,EACpE,KAAM,CAAC,mBAAmB,CAC5B,CACF,CACF,CAAC,EAIKC,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAY,CAAC,CACxB,SAAAC,EACA,GAAGC,CACL,IAAoC,CAElC,KAAM,CAAE,KAAMC,EAAW,SAAAC,CAAS,EAAIX,EAAM,WAAWC,CAAY,EAE7DW,EAAOZ,EAAM,QACjB,IAAMa,EAA2BH,EAAYI,GAAMR,EAAWQ,CAAC,CAAC,EAChE,CAACJ,CAAS,CACZ,EAEM,CAACZ,EAAOiB,CAAQ,EAAIC,EAAAA,EAE1B,OACEhB,EAAA,cAAAA,EAAA,SAAA,KACGW,IAAa,YAAcX,EAAA,cAACH,EAAA,CAAyB,MAAOC,CAAO,CAAA,EACpEE,EAAA,cAACG,EAAA,CACC,UAAS,GACT,KAAMS,EACN,SAAUD,EACV,IAAKI,EACJ,GAAGN,CAEHD,EAAAA,CACH,CACF,CAEJ"}
+{"version":3,"file":"BadgeText.js","sources":["../../../src/components/badge/BadgeText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useResizeObserver } from '~/utilities/hooks/useResizeObserver'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { BadgeContext } from './Badge.context'\n\n/*\n * Instead of sticking a resize observer on every `BadgeText`\n * regardless of overflow type, split the resize logic into a component.\n * Basically call the hook conditionally, only for the version with\n * the `overflow === 'ellipsis'` which needs it.\n * This saves us from initialising a resize observer for any badge which doesn't need it.\n */\nconst ObserveBadgeTextOverflow: React.VFC<{ elRef: HTMLElement | null }> = ({\n  elRef\n}) => {\n  const { setIsOverflowing } = React.useContext(BadgeContext)\n\n  useResizeObserver({\n    delay: 0,\n    elements: [elRef],\n    onResize: () => {\n      if (!elRef?.scrollWidth || !elRef?.clientWidth) return\n      setIsOverflowing?.(elRef.scrollWidth > elRef.clientWidth)\n    }\n  })\n\n  return null\n}\n\nconst StyledBadgeText = styled(Text, {\n  base: ['py-0.5'],\n  variants: {\n    overflow: {\n      ellipsis: ['overflow-x-hidden', 'text-ellipsis', 'whitespace-nowrap'],\n      wrap: ['whitespace-normal']\n    }\n  }\n})\n\ntype TBadgeTextProps = React.ComponentProps<typeof StyledBadgeText>\n\nconst toTextSize = {\n  xs: 'sm',\n  sm: 'md',\n  md: 'md'\n}\n\nexport const BadgeText = ({\n  children,\n  ...rest\n}: TBadgeTextProps): JSX.Element => {\n  // We need the return type here. Otherwise typsecript breaks when this type is used in Badge. Do not remove unless you want to tackle that issue again.\n  const { size: badgeSize, overflow } = React.useContext(BadgeContext)\n\n  const size = React.useMemo(\n    () => overrideStyledVariantValue(badgeSize, (s) => toTextSize[s]),\n    [badgeSize]\n  )\n\n  const [elRef, setElRef] = useCallbackRefState()\n\n  return (\n    <>\n      {overflow === 'ellipsis' && <ObserveBadgeTextOverflow elRef={elRef} />}\n      <StyledBadgeText\n        noCapsize\n        size={size}\n        overflow={overflow}\n        ref={setElRef}\n        {...rest}\n      >\n        {children}\n      </StyledBadgeText>\n    </>\n  )\n}\n"],"names":["ObserveBadgeTextOverflow","elRef","setIsOverflowing","React","BadgeContext","useResizeObserver","StyledBadgeText","styled","Text","toTextSize","BadgeText","children","rest","badgeSize","overflow","size","overrideStyledVariantValue","s","setElRef","useCallbackRefState"],"mappings":"gbAiBA,MAAMA,EAAqE,CAAC,CAC1E,MAAAC,CACF,IAAM,CACJ,KAAM,CAAE,iBAAAC,CAAiB,EAAIC,EAAM,WAAWC,CAAY,EAE1D,OAAAC,EAAkB,CAChB,MAAO,EACP,SAAU,CAACJ,CAAK,EAChB,SAAU,IAAM,CACV,EAACA,GAAA,MAAAA,EAAO,cAAe,EAACA,GAAA,MAAAA,EAAO,cACnCC,GAAA,MAAAA,EAAmBD,EAAM,YAAcA,EAAM,YAC/C,CACF,CAAC,EAEM,IACT,EAEMK,EAAkBC,EAAOC,EAAM,CACnC,KAAM,CAAC,QAAQ,EACf,SAAU,CACR,SAAU,CACR,SAAU,CAAC,oBAAqB,gBAAiB,mBAAmB,EACpE,KAAM,CAAC,mBAAmB,CAC5B,CACF,CACF,CAAC,EAIKC,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAY,CAAC,CACxB,SAAAC,EACA,GAAGC,CACL,IAAoC,CAElC,KAAM,CAAE,KAAMC,EAAW,SAAAC,CAAS,EAAIX,EAAM,WAAWC,CAAY,EAE7DW,EAAOZ,EAAM,QACjB,IAAMa,EAA2BH,EAAYI,GAAMR,EAAWQ,CAAC,CAAC,EAChE,CAACJ,CAAS,CACZ,EAEM,CAACZ,EAAOiB,CAAQ,EAAIC,EAAAA,EAE1B,OACEhB,EAAA,cAAAA,EAAA,SAAA,KACGW,IAAa,YAAcX,EAAA,cAACH,EAAA,CAAyB,MAAOC,CAAO,CAAA,EACpEE,EAAA,cAACG,EAAA,CACC,UAAS,GACT,KAAMS,EACN,SAAUD,EACV,IAAKI,EACJ,GAAGN,CAEHD,EAAAA,CACH,CACF,CAEJ"}