@atom-learning/components 6.0.0-beta.8 → 6.0.0

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

@@ -1,13 +1,9 @@
+import { Root } from '@radix-ui/react-accordion';
 import React from 'react';
 import { AccordionContent } from './AccordionContent';
 import { AccordionItem } from './AccordionItem';
 import { AccordionTrigger } from './AccordionTrigger';
-declare const StyledRoot: React.ForwardRefExoticComponent<(Omit<import("@radix-ui/react-accordion").AccordionSingleProps & React.RefAttributes<HTMLDivElement> & {
-    as?: React.ElementType;
-}, "ref"> | Omit<import("@radix-ui/react-accordion").AccordionMultipleProps & React.RefAttributes<HTMLDivElement> & {
-    as?: React.ElementType;
-}, "ref">) & React.RefAttributes<HTMLDivElement>>;
-type AccordionProps = React.ComponentProps<typeof StyledRoot> & {
+type AccordionProps = React.ComponentProps<typeof Root> & {
     type: 'single' | 'multiple';
 };
 type AccordionType = ReturnType<typeof React.forwardRef<HTMLDivElement, AccordionProps>> & {

package/dist/components/accordion/Accordion.js

@@ -1,2 +1,2 @@
-import{Root as c}from"@radix-ui/react-accordion";import r from"react";import{styled as n}from"../../styled.js";import{AccordionContent as f}from"./AccordionContent.js";import{AccordionItem as d}from"./AccordionItem.js";import{AccordionTrigger as p}from"./AccordionTrigger.js";const l=n(c,{base:["w-full"]}),o=r.forwardRef(({type:e="single",children:t,...i},m)=>r.createElement(l,{ref:m,type:e,...i},t));o.Item=d,o.Content=f,o.Trigger=p,o.displayName="Accordion";export{o as Accordion};
+import{Root as n}from"@radix-ui/react-accordion";import f from"clsx";import r from"react";import{AccordionContent as p}from"./AccordionContent.js";import{AccordionItem as a}from"./AccordionItem.js";import{AccordionTrigger as d}from"./AccordionTrigger.js";const o=r.forwardRef(({type:e="single",className:t,children:m,...i},c)=>r.createElement(n,{ref:c,type:e,className:f("w-full",t),...i},m));o.Item=a,o.Content=p,o.Trigger=d,o.displayName="Accordion";export{o as Accordion};
 //# sourceMappingURL=Accordion.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { AccordionContent } from './AccordionContent'\nimport { AccordionItem } from './AccordionItem'\nimport { AccordionTrigger } from './AccordionTrigger'\n\nconst StyledRoot = styled(Root, {\n  base: ['w-full']\n})\n\ntype AccordionProps = React.ComponentProps<typeof StyledRoot> & {\n  type: 'single' | 'multiple'\n}\n\ntype AccordionType = ReturnType<\n  typeof React.forwardRef<HTMLDivElement, AccordionProps>\n> & {\n  Item: typeof AccordionItem\n  Content: typeof AccordionContent\n  Trigger: typeof AccordionTrigger\n}\n\nexport const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(\n  ({ type = 'single', children, ...remainingProps }, ref) => (\n    // eslint-disable-next-line\n    // @ts-ignore TODO: Radix has an TS error that throws a warning if you pass multiple in. Needs to be fixed by the owner\n    <StyledRoot ref={ref} type={type} {...remainingProps}>\n      {children}\n    </StyledRoot>\n  )\n) as AccordionType\n\nAccordion.Item = AccordionItem\nAccordion.Content = AccordionContent\nAccordion.Trigger = AccordionTrigger\n\nAccordion.displayName = 'Accordion'\n"],"names":["StyledRoot","styled","Root","Accordion","React","type","children","remainingProps","ref","AccordionItem","AccordionContent","AccordionTrigger"],"mappings":"oRASA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,KAAM,CAAC,QAAQ,CACjB,CAAC,EAcYC,EAAYC,EAAM,WAC7B,CAAC,CAAE,KAAAC,EAAO,SAAU,SAAAC,EAAU,GAAGC,CAAe,EAAGC,IAGjDJ,EAAA,cAACJ,EAAA,CAAW,IAAKQ,EAAK,KAAMH,EAAO,GAAGE,CAAAA,EACnCD,CACH,CAEJ,EAEAH,EAAU,KAAOM,EACjBN,EAAU,QAAUO,EACpBP,EAAU,QAAUQ,EAEpBR,EAAU,YAAc"}
+{"version":3,"file":"Accordion.js","sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-accordion'\nimport clsx from 'clsx'\nimport React from 'react'\n\nimport { AccordionContent } from './AccordionContent'\nimport { AccordionItem } from './AccordionItem'\nimport { AccordionTrigger } from './AccordionTrigger'\n\ntype AccordionProps = React.ComponentProps<typeof Root> & {\n  type: 'single' | 'multiple'\n}\n\ntype AccordionType = ReturnType<\n  typeof React.forwardRef<HTMLDivElement, AccordionProps>\n> & {\n  Item: typeof AccordionItem\n  Content: typeof AccordionContent\n  Trigger: typeof AccordionTrigger\n}\n\nexport const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(\n  ({ type = 'single', className, children, ...remainingProps }, ref) => (\n    // eslint-disable-next-line\n    // @ts-ignore TODO: Radix has an TS error that throws a warning if you pass multiple in. Needs to be fixed by the owner\n    <Root\n      ref={ref}\n      type={type}\n      className={clsx('w-full', className)}\n      {...remainingProps}\n    >\n      {children}\n    </Root>\n  )\n) as AccordionType\n\nAccordion.Item = AccordionItem\nAccordion.Content = AccordionContent\nAccordion.Trigger = AccordionTrigger\n\nAccordion.displayName = 'Accordion'\n"],"names":["Accordion","React","type","className","children","remainingProps","ref","Root","clsx","AccordionItem","AccordionContent","AccordionTrigger"],"mappings":"qQAoBaA,EAAYC,EAAM,WAC7B,CAAC,CAAE,KAAAC,EAAO,SAAU,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAe,EAAGC,IAG5DL,EAAA,cAACM,EAAA,CACC,IAAKD,EACL,KAAMJ,EACN,UAAWM,EAAK,SAAUL,CAAS,EAClC,GAAGE,CAEHD,EAAAA,CACH,CAEJ,EAEAJ,EAAU,KAAOS,EACjBT,EAAU,QAAUU,EACpBV,EAAU,QAAUW,EAEpBX,EAAU,YAAc"}

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

@@ -1,6 +1,6 @@
 import React from 'react';
-declare const StyledContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-accordion").AccordionContentProps & React.RefAttributes<HTMLDivElement> & {
+declare const StyledContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-accordion").AccordionContentProps & React.RefAttributes<HTMLDivElement>, never> & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}>;
 export declare const AccordionContent: ({ children, className, ...remainingProps }: React.ComponentProps<typeof StyledContent>) => React.JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
 import React from 'react';
-export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-accordion").AccordionItemProps & React.RefAttributes<HTMLDivElement> & {
+export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-accordion").AccordionItemProps & React.RefAttributes<HTMLDivElement>, never> & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}>;

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { TcolorScheme } from '../../experiments/color-scheme';
-declare const StyledTrigger: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement> & {
-    arrowPosition?: ("left" | "right" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "left" | "right">>) | undefined;
+declare const StyledTrigger: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "arrowPosition"> & {
+    arrowPosition?: "left" | "right" | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+}>;
 export declare const AccordionTrigger: ({ children, colorScheme, asChild, arrowPosition, ...remainingProps }: React.ComponentProps<typeof StyledTrigger> & {
     colorScheme?: TcolorScheme;
 }) => React.JSX.Element;

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

@@ -4,16 +4,15 @@ import { Override } from '../../utilities';
 import type { TOptionalTooltipWrapperProps } from '../../utilities/optional-tooltip-wrapper';
 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?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
     size?: ("sm" | "md" | "lg" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs">>) | undefined;
     isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+}>;
 type ActionIconProps = Override<React.ComponentProps<typeof StyledButton>, {
-    as?: string | React.ReactNode;
     children: React.ReactNode;
     label: string;
 } & Omit<TOptionalTooltipWrapperProps, 'label'> & NavigatorActions>;

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","border-[unset]","rounded-md","box-border","cursor-pointer","flex","shrink-0","justify-center","px-[unset]","py-[unset]","transition-all","duration-100","ease-out","disabled:cursor-not-allowed","disabled:opacity-30"],variants:{theme:{neutral:["[--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-(--base)","text-white","not-disabled:hover:bg-(--interact)","not-disabled:hover:text-white","not-disabled:focus:bg-(--interact)","not-disabled:focus:text-white","not-disabled:active:bg-(--active)"]},size:{xs:["size-6"],sm:["size-8"],md:["size-10"],lg:["size-12"]},isRounded:{true:["rounded-round"]}}}),a=e.forwardRef(({children:n,theme:p="primary",appearance:m="simple",size:c="sm",label:s,href:t,disabled:o,hasTooltip:b=!0,tooltipSide:v,...u},h)=>{const l="A single ".concat(i.displayName," component is permitted as a child of ").concat(a.displayName);return d(e.Children.count(n)===1,l),e.createElement(x,{hasTooltip:b,label:s,tooltipSide:v},e.createElement(w,{...t?{as:"a",href:o?void 0:t,onClick:void 0,"aria-disabled":!!o}:{type:"button"},...f(t),...u,"aria-label":s,theme:p,appearance:m,size:c,ref:h,disabled:o},e.Children.map(n,r=>{if(!e.isValidElement(r))throw new Error(l);return d(r.type===i,"Children of type ".concat(r==null?void 0:r.type," aren't permitted. Only an ").concat(i.displayName," component is allowed in ").concat(a.displayName)),e.cloneElement(r,{size:g[c]})})))});a.displayName="ActionIcon";export{a as ActionIcon};
+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};
 //# 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('button', {\n  base: [\n    'items-center',\n    'appearance-none',\n    'bg-white',\n    'border-[unset]',\n    'rounded-md',\n    'box-border',\n    'cursor-pointer',\n    'flex',\n    'shrink-0',\n    'justify-center',\n    'px-[unset]',\n    'py-[unset]',\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        '[--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-(--base)',\n        'text-white',\n        'not-disabled:hover:bg-(--interact)',\n        'not-disabled:hover:text-white',\n        'not-disabled:focus:bg-(--interact)',\n        'not-disabled:focus:text-white',\n        'not-disabled:active:bg-(--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-round']\n    }\n  }\n})\n\ntype ActionIconProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  {\n    as?: string | React.ReactNode\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,EAAO,SAAU,CACpC,KAAM,CACJ,eACA,kBACA,WACA,iBACA,aACA,aACA,iBACA,OACA,WACA,iBACA,aACA,aACA,iBACA,eACA,WACA,8BACA,qBACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CACP,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,WACA,SACA,iBACA,gBACA,uCACA,uCACA,qCACF,EACA,MAAO,CACL,cACA,aACA,qCACA,gCACA,qCACA,gCACA,mCACF,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,eAAe,CACxB,CACF,CACF,CAAC,EAYYC,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,YAAY,OAAAC,EAAK,YAAW,wCAAyC,EAAA,OAAAd,EAAW,aAEjH,OAAAe,EAAUd,EAAM,SAAS,MAAMC,CAAQ,IAAM,EAAGW,CAAwB,EActEZ,EAAA,cAACe,EAAA,CACC,WAAYP,EACZ,MAAOH,EACP,YAAaI,GAEbT,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,oBAAoB,OAAAI,GAAA,KAAAA,OAAAA,EAAO,KAAI,6BAA8B,EAAA,OAAAJ,EAAK,YAAW,6BAA4B,OAAWd,EAAA,WAAA,CACtH,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'\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"}

package/dist/components/alert-dialog/AlertDialog.d.ts

@@ -4,10 +4,10 @@ export declare const AlertDialog: React.FC<import("@radix-ui/react-alert-dialog"
     Title: React.ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
     Action: React.ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
     Cancel: React.ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
-    Content: ({ size, ...remainingProps }: React.ComponentProps<React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogContentProps & React.RefAttributes<HTMLDivElement> & {
-        size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
+    Content: ({ size, ...remainingProps }: React.ComponentProps<React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "size"> & {
+        size?: "sm" | "md" | "lg" | undefined;
     } & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLDivElement>>>) => React.JSX.Element;
+    }>>) => React.JSX.Element;
     Trigger: React.ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 };

package/dist/components/alert-dialog/AlertDialogContent.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-declare const StyledAlertDialogContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogContentProps & React.RefAttributes<HTMLDivElement> & {
-    size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
+declare const StyledAlertDialogContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "size"> & {
+    size?: "sm" | "md" | "lg" | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}>;
 export declare const AlertDialogContent: ({ size, ...remainingProps }: React.ComponentProps<typeof StyledAlertDialogContent>) => React.JSX.Element;
 export {};

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

@@ -1,18 +1,18 @@
 import * as React from 'react';
 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?: ("sm" | "md" | "lg" | "xs" | "xl" | "xxl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "xxl">>) | undefined;
+}, "size"> & {
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | "xxl" | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}>;
 declare const StyledButton: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-} & {
-    size?: ("sm" | "md" | "lg" | "xs" | "xl" | "xxl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "xxl">>) | undefined;
+}, "size"> & {
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | "xxl" | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+}>;
 type TAvatarProps = React.ComponentProps<typeof StyledDiv | typeof StyledButton> & {
     name?: string;
 } & ({

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-round","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:["[all:unset]",...d,"not-disabled:active:bg-grey-200","not-disabled:active:border-primary-800","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[$colors$primary800_0px_0px_0px_4px]","not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:z-1","not-disabled:hover:bg-grey-100","not-disabled:hover:border-grey-800","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:s})=>{const o=i.useMemo(()=>({name:e,size:s}),[e,s]);return i.createElement(n.Provider,{value:o},r)},a=({children:r,size:e="lg",name:s,disabled:o=!1,onClick:t})=>i.createElement(m,{name:s,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(a,{Image:b,Initial:v,Placeholder:z,Icon:c});a.displayName="Avatar";export{u as Avatar,a as AvatarRoot,n as AvatarRootContext,m as AvatarRootProvider};
+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};
 //# 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-round',\n  'border-2',\n\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    '[all:unset]',\n    ...avatarRootStyles,\n    'not-disabled:active:bg-grey-200',\n    'not-disabled:active:border-primary-800',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[$colors$primary800_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-grey-100',\n    'not-disabled:hover:border-grey-800',\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> & { name?: string } & (\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,gBACA,WAEA,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,cACA,GAAGF,EACH,kCACA,yCACA,0CACA,sCACA,yEACA,4DACA,iCACA,iCACA,qCACA,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,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 { 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"}

package/dist/components/avatar/AvatarImage.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as a}from"../../styled.js";import{Image as o}from"../image/Image.js";import{AvatarInitial as m}from"./AvatarInitial.js";const l=a(o,{base:["size-full","object-cover"]}),c=({src:t,alt:r})=>t?e.createElement(l,{src:t,alt:r}):e.createElement(m,null);export{c as AvatarImage};
+import*as t from"react";import{Image as r}from"../image/Image.js";import{AvatarInitial as m}from"./AvatarInitial.js";const l=({src:e,alt:a})=>e?t.createElement(r,{className:"size-full object-cover",src:e,alt:a}):t.createElement(m,null);export{l as AvatarImage};
 //# sourceMappingURL=AvatarImage.js.map

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 { styled } from '~/styled'\n\nimport { Image } from '../image'\nimport { AvatarInitial } from './AvatarInitial'\n\nconst StyledImage = styled(Image, {\n  base: ['size-full', 'object-cover']\n})\n\nexport const AvatarImage = ({ src, alt }: { src: string; alt: string }) => {\n  if (!src) {\n    return <AvatarInitial />\n  }\n\n  return <StyledImage src={src} alt={alt} />\n}\n"],"names":["StyledImage","styled","Image","AvatarImage","src","alt","React","AvatarInitial"],"mappings":"8JAOA,MAAMA,EAAcC,EAAOC,EAAO,CAChC,KAAM,CAAC,YAAa,cAAc,CACpC,CAAC,EAEYC,EAAc,CAAC,CAAE,IAAAC,EAAK,IAAAC,CAAI,IAChCD,EAIEE,EAAA,cAACN,EAAA,CAAY,IAAKI,EAAK,IAAKC,EAAK,EAH/BC,EAAA,cAACC,EAAA,IAAc"}
+{"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"}

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

@@ -4,7 +4,7 @@ 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"> & {
     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;
@@ -12,14 +12,14 @@ declare const StyledBadge: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.
     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;
-}, "ref"> & React.RefAttributes<HTMLDivElement> & {
+}, "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;
     isClickable?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     highlighted?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}>;
 export type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {
     theme?: keyof typeof badgeColorSchemes;
     overflow?: React.ComponentProps<typeof BadgeText>['overflow'];
@@ -28,19 +28,19 @@ export declare const Badge: React.ForwardRefExoticComponent<Omit<TBadgeProps, "r
     Icon: (props: React.ComponentProps<typeof Icon>) => React.JSX.Element;
     Text: ({ children, ...rest }: Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
         ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
-    } & {
+    }, "size" | "noCapsize" | "weight" | "family"> & {
+        size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
+        noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
         weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
         family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
-        size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
-        noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     } & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLParagraphElement>, "as"> & {
+    }, "as"> & {
         as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLParagraphElement> & {
-        overflow?: ("wrap" | "ellipsis" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "ellipsis">>) | undefined;
+    }, "ref"> & React.RefAttributes<HTMLParagraphElement>, "overflow"> & {
+        overflow?: "wrap" | "ellipsis" | undefined;
     } & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLParagraphElement>) => JSX.Element;
+    }) => JSX.Element;
 };
 export {};

package/dist/components/badge/Badge.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Flex as f}from"../flex/Flex.js";import{Icon as v}from"../icon/Icon.js";import{styled as w,Theme 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 a}from"./BadgeIcon.js";import{BadgeText as n}from"./BadgeText.js";import{OptionalTooltipWrapper as z}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";const T=w(f,{base:["justify-center","items-center","rounded-sm","min-w-none","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"],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)"]}]}),j=e.forwardRef(({theme:r="info",emphasis:s="subtle",children:i,...o},b)=>{const{size:h,overflow:c,isOverflowing:d}=e.useContext(B),[l,p]=y();e.useImperativeHandle(b,()=>l);const g=l==null?void 0:l.textContent,u=E.includes(r),x=Object.keys(o).includes("onClick")||Object.keys(o).includes("href");return e.createElement(z,{hasTooltip:c==="ellipsis"&&d,label:g},e.createElement(k,{theme:C[r]},e.createElement(T,{role:"status",emphasis:s,size:h,...o,ref:p,isClickable:x&&!u},e.Children.map(i,t=>typeof t=="string"||typeof t=="number"?e.createElement(n,null,t):e.isValidElement(t)&&t.type===v?e.createElement(a,{...t.props}):t))))}),m=e.forwardRef(({size:r="sm",overflow:s="wrap",...i},o)=>e.createElement(O,{size:r,overflow:s},e.createElement(j,{...i,ref:o}))),I=Object.assign(m,{Icon:a,Text:n});m.displayName="Badge";export{I as Badge};
+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};
 //# 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, Theme } 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(Flex, {\n  base: [\n    'justify-center',\n    'items-center',\n    'rounded-sm',\n    'min-w-none',\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'],\n      sm: ['px-1', 'py-0.5'],\n      md: ['px-2', 'py-1']\n    },\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: ['hover:bg-(--background-bold-hover)', 'hover:text-(--text-bold)']\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\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, ...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        <Theme theme={badgeColorSchemes[theme]}>\n          <StyledBadge\n            role=\"status\"\n            emphasis={emphasis}\n            size={size}\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        </Theme>\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","rest","ref","size","overflow","isOverflowing","BadgeContext","badgeElRef","setBadgeElRef","useCallbackRefState","label","isInfoOnly","badgeSemanticNames","isClickable","OptionalTooltipWrapper","Theme","badgeColorSchemes","child","BadgeText","Icon","BadgeIcon","BadgeComponent","BadgeProvider","Badge"],"mappings":"okBAgBA,MAAMA,EAAcC,EAAOC,EAAM,CAC/B,KAAM,CACJ,iBACA,eACA,aACA,aACA,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,MAAM,EACX,GAAI,CAAC,OAAQ,QAAQ,EACrB,GAAI,CAAC,OAAQ,MAAM,CACrB,EAEA,YAAa,CACX,KAAM,CAAC,gBAAgB,CACzB,EACA,YAAa,CACX,KAAM,CAAA,CACR,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,CAAC,qCAAsC,0BAA0B,CAC1E,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,CAAC,EASKC,EAAaC,EAAM,WACvB,CAAC,CAAE,MAAAC,EAAQ,OAAQ,SAAAC,EAAW,SAAU,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAAQ,CACnE,KAAM,CAAE,KAAAC,EAAM,SAAAC,EAAU,cAAAC,CAAc,EAAIR,EAAM,WAAWS,CAAY,EACjE,CAACC,EAAYC,CAAa,EAAIC,EAAoB,EACxDZ,EAAM,oBAAoBK,EAAK,IAAMK,CAA4B,EAEjE,MAAMG,EAAQH,GAAA,YAAAA,EAAY,YAEpBI,EAAaC,EAAmB,SAASd,CAAK,EAE9Ce,EACJ,OAAO,KAAKZ,CAAI,EAAE,SAAS,SAAS,GACpC,OAAO,KAAKA,CAAI,EAAE,SAAS,MAAM,EAEnC,OACEJ,EAAA,cAACiB,EAAA,CACC,WAAYV,IAAa,YAAcC,EACvC,MAAOK,CAEPb,EAAAA,EAAA,cAACkB,EAAA,CAAM,MAAOC,EAAkBlB,CAAK,GACnCD,EAAA,cAACJ,EAAA,CACC,KAAK,SACL,SAAUM,EACV,KAAMI,EACL,GAAGF,EACJ,IAAKO,EACL,YAAaK,GAAe,CAACF,CAE5Bd,EAAAA,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,KAAA,CAAO,EAE9BA,CACR,CACH,CACF,CACF,CAEJ,CACF,EAEMI,EAAiBxB,EAAM,WAC3B,CAAC,CAAE,KAAAM,EAAO,KAAM,SAAAC,EAAW,OAAQ,GAAGH,CAAK,EAAGC,IAE1CL,EAAA,cAACyB,EAAA,CAAc,KAAMnB,EAAM,SAAUC,GACnCP,EAAA,cAACD,EAAA,CAAY,GAAGK,EAAM,IAAKC,CAAAA,CAAK,CAClC,CAGN,EAEaqB,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 { 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"}

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

@@ -1,20 +1,20 @@
 import * as React from 'react';
 declare const StyledBadgeText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
     ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
-} & {
+}, "size" | "noCapsize" | "weight" | "family"> & {
+    size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
     family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
-    size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
-    noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLParagraphElement>, "as"> & {
+}, "as"> & {
     as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLParagraphElement> & {
-    overflow?: ("wrap" | "ellipsis" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "ellipsis">>) | undefined;
+}, "ref"> & React.RefAttributes<HTMLParagraphElement>, "overflow"> & {
+    overflow?: "wrap" | "ellipsis" | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+}>;
 type TBadgeTextProps = React.ComponentProps<typeof StyledBadgeText>;
 export declare const BadgeText: ({ children, ...rest }: TBadgeTextProps) => JSX.Element;
 export {};

package/dist/components/banner/BannerContainer.d.ts

@@ -3,7 +3,7 @@ import { TcolorScheme } from '../../experiments/color-scheme';
 import { Dismissible } from '../dismissible';
 declare const StyledBannerContainer: React.ForwardRefExoticComponent<Omit<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;
@@ -11,12 +11,12 @@ declare const StyledBannerContainer: React.ForwardRefExoticComponent<Omit<Omit<O
     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;
-}, "ref"> & React.RefAttributes<HTMLDivElement> & {
+}, "size" | "emphasis"> & {
     emphasis?: ("bold" | "subtle" | "minimal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "subtle" | "minimal">>) | undefined;
     size?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}>;
 export type TBannerContainerProps = React.ComponentProps<typeof StyledBannerContainer> & {
     colorScheme?: TcolorScheme;
 } & React.ComponentProps<typeof Dismissible>;

package/dist/components/banner/BannerContainer.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{ColorScheme as a}from"../../experiments/color-scheme/ColorScheme.js";import{styled as i}from"../../styled.js";import{Dismissible as l}from"../dismissible/index.js";import{Flex as m}from"../flex/Flex.js";import{useBannerContext as d}from"./BannerContext.js";const c=i(m,{base:["relative","w-full","rounded-xl","overflow-hidden","text-(--foreground)","[--banner-heading-color:var(--color-foreground)]","[--banner-text-color:var(--color-grey-900)]"],variants:{emphasis:{bold:["[--banner-heading-color:var(--color-foreground-7-plus)]","[--banner-text-color:var(--color-grey-100)]","bg-(--base-11)","text-(--foreground-7-plus)"],subtle:["bg-(--base-3)"],minimal:["bg-(--base-1)"]},size:{sm:[],md:[]}}}),b=({colorScheme:r={},onDismiss:o,dismissed:s,...n})=>{const{emphasis:t}=d();return e.createElement(a,{...r,asChild:!0},e.createElement(l,{asChild:!0,onDismiss:o,dismissed:s},e.createElement(c,{role:"banner",emphasis:t,...n})))};export{b as BannerContainer};
+import*as e from"react";import{ColorScheme as t}from"../../experiments/color-scheme/ColorScheme.js";import{styled as i}from"../../styled.js";import{Dismissible as l}from"../dismissible/index.js";import{Flex as m}from"../flex/Flex.js";import{useBannerContext as d}from"./BannerContext.js";const c=i(m,{base:["relative","w-full","rounded-lg","overflow-hidden","text-(--foreground)","[--banner-heading-color:var(--color-foreground)]","[--banner-text-color:var(--color-grey-900)]"],variants:{emphasis:{bold:["[--banner-heading-color:var(--color-foreground-7-plus)]","[--banner-text-color:var(--color-grey-100)]","bg-(--base-11)","text-(--foreground-7-plus)"],subtle:["bg-(--base-3)"],minimal:["bg-(--base-1)"]},size:{sm:[],md:[]}}},{enabledResponsiveVariants:!0}),b=({colorScheme:r={},onDismiss:o,dismissed:s,...n})=>{const{emphasis:a}=d();return e.createElement(t,{...r,asChild:!0},e.createElement(l,{asChild:!0,onDismiss:o,dismissed:s},e.createElement(c,{role:"banner",emphasis:a,...n})))};export{b as BannerContainer};
 //# sourceMappingURL=BannerContainer.js.map

package/dist/components/banner/BannerContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerContainer.js","sources":["../../../src/components/banner/BannerContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/styled'\n\nimport { Dismissible } from '../dismissible'\nimport { Flex } from '../flex'\nimport { useBannerContext } from './BannerContext'\n\nconst StyledBannerContainer = styled(Flex, {\n  base: [\n    'relative',\n    'w-full',\n    'rounded-xl',\n    'overflow-hidden',\n    'text-(--foreground)',\n    '[--banner-heading-color:var(--color-foreground)]',\n    '[--banner-text-color:var(--color-grey-900)]'\n  ],\n  variants: {\n    emphasis: {\n      bold: [\n        '[--banner-heading-color:var(--color-foreground-7-plus)]',\n        '[--banner-text-color:var(--color-grey-100)]',\n        'bg-(--base-11)',\n        'text-(--foreground-7-plus)'\n      ],\n      subtle: ['bg-(--base-3)'],\n      minimal: ['bg-(--base-1)']\n    },\n    size: {\n      sm: [],\n      md: []\n    }\n  }\n})\n\nexport type TBannerContainerProps = React.ComponentProps<\n  typeof StyledBannerContainer\n> & {\n  colorScheme?: TcolorScheme\n} & React.ComponentProps<typeof Dismissible>\n\nexport const BannerContainer = ({\n  colorScheme = {},\n  onDismiss,\n  dismissed,\n  ...props\n}: TBannerContainerProps): JSX.Element => {\n  const { emphasis } = useBannerContext()\n\n  return (\n    <ColorScheme {...colorScheme} asChild>\n      <Dismissible asChild onDismiss={onDismiss} dismissed={dismissed}>\n        <StyledBannerContainer role=\"banner\" emphasis={emphasis} {...props} />\n      </Dismissible>\n    </ColorScheme>\n  )\n}\n"],"names":["StyledBannerContainer","styled","Flex","BannerContainer","colorScheme","onDismiss","dismissed","props","emphasis","useBannerContext","React","ColorScheme","Dismissible"],"mappings":"gSASA,MAAMA,EAAwBC,EAAOC,EAAM,CACzC,KAAM,CACJ,WACA,SACA,aACA,kBACA,sBACA,mDACA,6CACF,EACA,SAAU,CACR,SAAU,CACR,KAAM,CACJ,0DACA,8CACA,iBACA,4BACF,EACA,OAAQ,CAAC,eAAe,EACxB,QAAS,CAAC,eAAe,CAC3B,EACA,KAAM,CACJ,GAAI,CAAA,EACJ,GAAI,CACN,CAAA,CACF,CACF,CAAC,EAQYC,EAAkB,CAAC,CAC9B,YAAAC,EAAc,CAAA,EACd,UAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA0C,CACxC,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAAA,EAErB,OACEC,EAAA,cAACC,EAAA,CAAa,GAAGP,EAAa,QAAO,EAAA,EACnCM,EAAA,cAACE,EAAA,CAAY,QAAO,GAAC,UAAWP,EAAW,UAAWC,CAAAA,EACpDI,EAAA,cAACV,EAAA,CAAsB,KAAK,SAAS,SAAUQ,EAAW,GAAGD,CAAAA,CAAO,CACtE,CACF,CAEJ"}
+{"version":3,"file":"BannerContainer.js","sources":["../../../src/components/banner/BannerContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/styled'\n\nimport { Dismissible } from '../dismissible'\nimport { Flex } from '../flex'\nimport { useBannerContext } from './BannerContext'\n\nconst StyledBannerContainer = styled(\n  Flex,\n  {\n    base: [\n      'relative',\n      'w-full',\n      'rounded-lg',\n      'overflow-hidden',\n      'text-(--foreground)',\n      '[--banner-heading-color:var(--color-foreground)]',\n      '[--banner-text-color:var(--color-grey-900)]'\n    ],\n    variants: {\n      emphasis: {\n        bold: [\n          '[--banner-heading-color:var(--color-foreground-7-plus)]',\n          '[--banner-text-color:var(--color-grey-100)]',\n          'bg-(--base-11)',\n          'text-(--foreground-7-plus)'\n        ],\n        subtle: ['bg-(--base-3)'],\n        minimal: ['bg-(--base-1)']\n      },\n      size: {\n        sm: [],\n        md: []\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nexport type TBannerContainerProps = React.ComponentProps<\n  typeof StyledBannerContainer\n> & {\n  colorScheme?: TcolorScheme\n} & React.ComponentProps<typeof Dismissible>\n\nexport const BannerContainer = ({\n  colorScheme = {},\n  onDismiss,\n  dismissed,\n  ...props\n}: TBannerContainerProps): JSX.Element => {\n  const { emphasis } = useBannerContext()\n\n  return (\n    <ColorScheme {...colorScheme} asChild>\n      <Dismissible asChild onDismiss={onDismiss} dismissed={dismissed}>\n        <StyledBannerContainer role=\"banner\" emphasis={emphasis} {...props} />\n      </Dismissible>\n    </ColorScheme>\n  )\n}\n"],"names":["StyledBannerContainer","styled","Flex","BannerContainer","colorScheme","onDismiss","dismissed","props","emphasis","useBannerContext","React","ColorScheme","Dismissible"],"mappings":"gSASA,MAAMA,EAAwBC,EAC5BC,EACA,CACE,KAAM,CACJ,WACA,SACA,aACA,kBACA,sBACA,mDACA,6CACF,EACA,SAAU,CACR,SAAU,CACR,KAAM,CACJ,0DACA,8CACA,iBACA,4BACF,EACA,OAAQ,CAAC,eAAe,EACxB,QAAS,CAAC,eAAe,CAC3B,EACA,KAAM,CACJ,GAAI,CACJ,EAAA,GAAI,EACN,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAQaC,EAAkB,CAAC,CAC9B,YAAAC,EAAc,GACd,UAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA0C,CACxC,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAiB,EAEtC,OACEC,EAAA,cAACC,EAAA,CAAa,GAAGP,EAAa,QAAO,EACnCM,EAAAA,EAAA,cAACE,EAAA,CAAY,QAAO,GAAC,UAAWP,EAAW,UAAWC,CACpDI,EAAAA,EAAA,cAACV,EAAA,CAAsB,KAAK,SAAS,SAAUQ,EAAW,GAAGD,CAAO,CAAA,CACtE,CACF,CAEJ"}

package/dist/components/banner/BannerContext.d.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { TBannerContainerProps } from './BannerContainer';
-export type TBannerProviderProps = Pick<TBannerContainerProps, 'size' | 'emphasis'>;
+export type TBannerProviderProps = {
+    size?: TBannerContainerProps['size'];
+    emphasis?: TBannerContainerProps['emphasis'];
+};
 type TBannerContextValue = TBannerProviderProps & {
     hasDismiss: boolean;
     setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>;

package/dist/components/banner/BannerContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerContext.js","sources":["../../../src/components/banner/BannerContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { TBannerContainerProps } from './BannerContainer'\n\nexport type TBannerProviderProps = Pick<\n  TBannerContainerProps,\n  'size' | 'emphasis'\n>\n\ntype TBannerContextValue = TBannerProviderProps & {\n  hasDismiss: boolean\n  setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nexport const BannerContext = React.createContext<TBannerContextValue>({\n  emphasis: 'minimal',\n  size: {\n    '@initial': 'sm',\n    '@md': 'md'\n  },\n  hasDismiss: false,\n  setHasDismiss: () => null\n})\n\nexport const useBannerContext = (): TBannerContextValue => {\n  const context = React.useContext(BannerContext)\n\n  if (context === undefined) {\n    throw new Error('useBannerContext must be used within a BannerProvider')\n  }\n\n  return context\n}\n\nexport const BannerProvider = ({\n  emphasis = 'minimal',\n  size = {\n    '@initial': 'sm',\n    '@md': 'md'\n  },\n  children\n}: React.PropsWithChildren<TBannerProviderProps>) => {\n  const [hasDismiss, setHasDismiss] = React.useState(false)\n  const value = React.useMemo<TBannerContextValue>(\n    () => ({ emphasis, size, hasDismiss, setHasDismiss }),\n    [emphasis, size, hasDismiss, setHasDismiss]\n  )\n  return (\n    <BannerContext.Provider value={value}>{children}</BannerContext.Provider>\n  )\n}\n\nBannerProvider.displayName = 'Banner'\n"],"names":["BannerContext","React","useBannerContext","context","BannerProvider","emphasis","size","children","hasDismiss","setHasDismiss","value"],"mappings":"wBAca,MAAAA,EAAgBC,EAAM,cAAmC,CACpE,SAAU,UACV,KAAM,CACJ,WAAY,KACZ,MAAO,IACT,EACA,WAAY,GACZ,cAAe,IAAM,IACvB,CAAC,EAEYC,EAAmB,IAA2B,CACzD,MAAMC,EAAUF,EAAM,WAAWD,CAAa,EAE9C,GAAIG,IAAY,OACd,MAAM,IAAI,MAAM,uDAAuD,EAGzE,OAAOA,CACT,EAEaC,EAAiB,CAAC,CAC7B,SAAAC,EAAW,UACX,KAAAC,EAAO,CACL,WAAY,KACZ,MAAO,IACT,EACA,SAAAC,CACF,IAAqD,CACnD,KAAM,CAACC,EAAYC,CAAa,EAAIR,EAAM,SAAS,EAAK,EAClDS,EAAQT,EAAM,QAClB,KAAO,CAAE,SAAAI,EAAU,KAAAC,EAAM,WAAAE,EAAY,cAAAC,CAAc,GACnD,CAACJ,EAAUC,EAAME,EAAYC,CAAa,CAC5C,EACA,OACER,EAAA,cAACD,EAAc,SAAd,CAAuB,MAAOU,GAAQH,CAAS,CAEpD,EAEAH,EAAe,YAAc"}
+{"version":3,"file":"BannerContext.js","sources":["../../../src/components/banner/BannerContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { TBannerContainerProps } from './BannerContainer'\n\n// Extract size and emphasis props, preserving responsive variant types\nexport type TBannerProviderProps = {\n  size?: TBannerContainerProps['size']\n  emphasis?: TBannerContainerProps['emphasis']\n}\n\ntype TBannerContextValue = TBannerProviderProps & {\n  hasDismiss: boolean\n  setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nexport const BannerContext = React.createContext<TBannerContextValue>({\n  emphasis: 'minimal',\n  size: {\n    '@initial': 'sm',\n    '@md': 'md'\n  } as unknown as TBannerProviderProps['size'],\n  hasDismiss: false,\n  setHasDismiss: () => null\n})\n\nexport const useBannerContext = (): TBannerContextValue => {\n  const context = React.useContext(BannerContext)\n\n  if (context === undefined) {\n    throw new Error('useBannerContext must be used within a BannerProvider')\n  }\n\n  return context\n}\n\nexport const BannerProvider = ({\n  emphasis = 'minimal',\n  size = {\n    '@initial': 'sm',\n    '@md': 'md'\n  } as unknown as TBannerProviderProps['size'],\n  children\n}: React.PropsWithChildren<TBannerProviderProps>) => {\n  const [hasDismiss, setHasDismiss] = React.useState(false)\n  const value = React.useMemo<TBannerContextValue>(\n    () => ({ emphasis, size, hasDismiss, setHasDismiss }),\n    [emphasis, size, hasDismiss, setHasDismiss]\n  )\n  return (\n    <BannerContext.Provider value={value}>{children}</BannerContext.Provider>\n  )\n}\n\nBannerProvider.displayName = 'Banner'\n"],"names":["BannerContext","React","useBannerContext","context","BannerProvider","emphasis","size","children","hasDismiss","setHasDismiss","value"],"mappings":"wBAea,MAAAA,EAAgBC,EAAM,cAAmC,CACpE,SAAU,UACV,KAAM,CACJ,WAAY,KACZ,MAAO,IACT,EACA,WAAY,GACZ,cAAe,IAAM,IACvB,CAAC,EAEYC,EAAmB,IAA2B,CACzD,MAAMC,EAAUF,EAAM,WAAWD,CAAa,EAE9C,GAAIG,IAAY,OACd,MAAM,IAAI,MAAM,uDAAuD,EAGzE,OAAOA,CACT,EAEaC,EAAiB,CAAC,CAC7B,SAAAC,EAAW,UACX,KAAAC,EAAO,CACL,WAAY,KACZ,MAAO,IACT,EACA,SAAAC,CACF,IAAqD,CACnD,KAAM,CAACC,EAAYC,CAAa,EAAIR,EAAM,SAAS,EAAK,EAClDS,EAAQT,EAAM,QAClB,KAAO,CAAE,SAAAI,EAAU,KAAAC,EAAM,WAAAE,EAAY,cAAAC,CAAc,GACnD,CAACJ,EAAUC,EAAME,EAAYC,CAAa,CAC5C,EACA,OACER,EAAA,cAACD,EAAc,SAAd,CAAuB,MAAOU,GAAQH,CAAS,CAEpD,EAEAH,EAAe,YAAc"}

package/dist/components/banner/banner-regular/BannerRegular.d.ts

@@ -7,11 +7,11 @@ export declare const BannerRegular: {
     Content: {
         (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
             ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-        } & {
+        }, "size"> & {
             size?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
         } & {
             as?: React.ElementType;
-        }, "ref"> & React.RefAttributes<HTMLDivElement>>>): React.JSX.Element;
+        }>>): React.JSX.Element;
         displayName: string;
     };
     Heading: {
@@ -302,7 +302,7 @@ export declare const BannerRegular: {
             unselectable?: "on" | "off" | undefined | undefined;
             inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
             is?: string | undefined | undefined;
-            as?: ((boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null) & React.ElementType) | undefined;
+            as?: React.ElementType | undefined;
             disabled?: boolean | undefined | undefined;
             formAction?: string | undefined | undefined;
             formEncType?: string | undefined | undefined;

package/dist/components/banner/banner-regular/BannerRegularActions.js

@@ -1,2 +1,2 @@
-import i from"invariant";import*as n from"react";import{overrideStyledVariantValue as m}from"../../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";import{Flex as y}from"../../flex/Flex.js";import{useBannerContext as f}from"../BannerContext.js";import{BannerRegularButton as a}from"./BannerRegularButton.js";const l=2,h={sm:2,md:4},N={sm:"column",md:"row"},o=({children:r,...c})=>{const{size:t}=f(),p=n.useMemo(()=>m(t,e=>h[e]),[t]),s=n.useMemo(()=>m(t,e=>N[e]),[t]);return i(n.Children.count(r)<=l,"A maximum of ".concat(l," ").concat(a.displayName," component(s) are permitted as children of ").concat(o.displayName)),n.createElement(y,{gap:p,direction:s,...c},n.Children.map(r,(e,d)=>{if(e==null)return e;if(!n.isValidElement(e))throw new Error("Child passed to ".concat(o.displayName," is not a valid element"));i(e.type===a,"Children of type ".concat(e==null?void 0:e.type," aren't permitted. Only an ").concat(a.displayName," component is allowed in ").concat(o.displayName));const u={appearance:d>0?"outline":void 0};return n.cloneElement(e,u)}))};o.displayName="BannerRegularActions";export{o as BannerRegularActions};
+import a from"invariant";import*as n from"react";import{overrideStyledVariantValue as m}from"../../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";import{Flex as y}from"../../flex/Flex.js";import{useBannerContext as f}from"../BannerContext.js";import{BannerRegularButton as t}from"./BannerRegularButton.js";const l=2,h={sm:2,md:4},N={sm:"column",md:"row"},r=({children:i,...p})=>{const{size:o}=f(),s=n.useMemo(()=>m(o,e=>h[e]),[o]),d=n.useMemo(()=>m(o,e=>N[e]),[o]);return a(n.Children.count(i)<=l,`A maximum of ${l} ${t.displayName} component(s) are permitted as children of ${r.displayName}`),n.createElement(y,{gap:s,direction:d,...p},n.Children.map(i,(e,c)=>{if(e==null)return e;if(!n.isValidElement(e))throw new Error(`Child passed to ${r.displayName} is not a valid element`);a(e.type===t,`Children of type ${e==null?void 0:e.type} aren't permitted. Only an ${t.displayName} component is allowed in ${r.displayName}`);const u={appearance:c>0?"outline":void 0};return n.cloneElement(e,u)}))};r.displayName="BannerRegularActions";export{r as BannerRegularActions};
 //# sourceMappingURL=BannerRegularActions.js.map