@atom-learning/components 6.0.0-beta.0 → 6.0.0-beta.10

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

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

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 = React.ForwardRefExoticComponent<AccordionProps> & {\n  Item: typeof AccordionItem\n  Content: typeof AccordionContent\n  Trigger: typeof AccordionTrigger\n}\n\nexport const Accordion = React.forwardRef(\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,EAYYC,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 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"}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const StyledContent: React.ForwardRefExoticComponent<Omit<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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TcolorScheme } from '../../experiments/color-scheme';
+declare const StyledTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "arrowPosition"> & {
+    arrowPosition?: ("left" | "right" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "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;
+export {};

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

@@ -0,0 +1 @@
+export { Accordion } from './Accordion';

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

@@ -0,0 +1,6 @@
+export declare const ActionIconSizeMap: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+};

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { NavigatorActions } from '../../types';
+import { Override } from '../../utilities';
+import type { TOptionalTooltipWrapperProps } from '../../utilities/optional-tooltip-wrapper';
+declare const StyledButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "theme" | "size" | "appearance" | "isRounded"> & {
+    theme?: ("warning" | "success" | "neutral" | "primary" | "white" | "primaryDark" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "warning" | "success" | "neutral" | "primary" | "white" | "primaryDark" | "danger">>) | undefined;
+    appearance?: ("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>;
+export declare const ActionIcon: React.ForwardRefExoticComponent<Omit<ActionIconProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export {};

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?null: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","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};
 //# 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.ForwardRefExoticComponent<ActionIconProps> =\n  React.forwardRef(\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      const optionalLinkProps = href\n        ? ({\n            as: 'a',\n            href: disabled ? null : 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}\n            {...getExternalAnchorProps(href)}\n            {...remainingProps}\n            aria-label={label}\n            theme={theme}\n            appearance={appearance}\n            size={size}\n            ref={ref}\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,EACXC,EAAM,WACJ,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,EAYtEZ,EAAA,cAACe,EAAA,CACC,WAAYP,EACZ,MAAOH,EACP,YAAaI,GAEbT,EAAA,cAACH,EAAA,CACE,GAhBmBS,EACrB,CACC,GAAI,IACJ,KAAMC,EAAW,KAAOD,EACxB,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,EAEFL,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('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"}

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

@@ -0,0 +1 @@
+export { ActionIcon } from './ActionIcon';

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export declare const AlertDialog: React.FC<import("@radix-ui/react-alert-dialog").AlertDialogProps> & {
+    Description: React.ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+    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<Omit<import("@radix-ui/react-alert-dialog").AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "size"> & {
+        size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
+    } & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLDivElement>>>) => React.JSX.Element;
+    Trigger: React.ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+};

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+declare const StyledAlertDialogContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-alert-dialog").AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "size"> & {
+    size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "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/alert-dialog/alert-context/AlertContext.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { alert } from './types';
+type context = {
+    showAlert: (data: alert) => void;
+};
+export declare const AlertProvider: ({ children }: React.PropsWithChildren<unknown>) => React.JSX.Element;
+export declare const useAlert: () => context;
+export {};

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { AlertDialog } from '../AlertDialog';
+import type { alert } from './types';
+type AlertDialogContentProps = React.ComponentProps<typeof AlertDialog> & {
+    className?: string;
+    onClose: () => void;
+} & alert;
+export declare const Alert: ({ title, size, theme, description, onAction, cancelActionText, confirmActionText, onClose, confirmElement, cancelElement, ...remainingProps }: AlertDialogContentProps) => React.JSX.Element;
+export {};

package/dist/components/alert-dialog/alert-context/AlertDialogIcon.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export type AlertDialogTheme = 'info' | 'warning' | 'danger' | 'success';
+export declare const AlertDialogIcon: ({ theme }: {
+    theme: AlertDialogTheme;
+}) => React.JSX.Element;

package/dist/components/alert-dialog/alert-context/reducer.d.ts

@@ -0,0 +1,12 @@
+import { alert } from './types';
+type State = alert[];
+type Action = {
+    type: 'ADD';
+    payload: alert;
+} | {
+    type: 'REMOVE';
+    payload: string;
+};
+export declare const initialState: never[];
+export declare const reducer: (state: State, action: Action) => alert[];
+export {};

package/dist/components/alert-dialog/alert-context/types.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { uid } from 'uid';
+import { AlertDialogContent } from '../AlertDialogContent';
+import { AlertDialogTheme } from './AlertDialogIcon';
+type AlertCommonProps = {
+    id: ReturnType<typeof uid>;
+    title: string;
+    size?: React.ComponentProps<typeof AlertDialogContent>['size'];
+    theme?: AlertDialogTheme;
+    description?: string;
+};
+type AlertActions = {
+    onAction?: (result: boolean) => void;
+    confirmActionText: string;
+    cancelActionText?: string;
+    confirmElement?: never;
+    cancelElement?: never;
+} | {
+    onAction?: never;
+    confirmActionText?: never;
+    cancelActionText?: never;
+    confirmElement: React.ReactNode;
+    cancelElement?: React.ReactNode;
+};
+export type alert = AlertCommonProps & AlertActions;
+export {};

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

@@ -0,0 +1,2 @@
+export { AlertDialog } from './AlertDialog';
+export { AlertProvider, useAlert } from './alert-context/AlertContext';

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+declare const StyledDiv: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "size"> & {
+    size?: ("sm" | "md" | "lg" | "xs" | "xl" | "xxl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "xxl">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const StyledButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "size"> & {
+    size?: ("sm" | "md" | "lg" | "xs" | "xl" | "xxl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "xxl">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type TAvatarProps = React.ComponentProps<typeof StyledDiv | typeof StyledButton> & {
+    name?: string;
+} & ({
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    disabled?: boolean;
+} | {
+    onClick?: never;
+    disabled?: never;
+});
+export type TAvatarRootContext = {
+    name?: TAvatarProps['name'];
+    size: TAvatarProps['size'];
+};
+export declare const AvatarRootContext: React.Context<TAvatarRootContext>;
+export declare const AvatarRootProvider: ({ children, name, size }: TAvatarProps) => React.JSX.Element;
+export declare const AvatarRoot: {
+    ({ children, size, name, disabled, onClick }: TAvatarProps): React.JSX.Element;
+    displayName: string;
+};
+export declare const Avatar: {
+    ({ children, size, name, disabled, onClick }: TAvatarProps): React.JSX.Element;
+    displayName: string;
+} & {
+    Image: ({ src, alt }: {
+        src: string;
+        alt: string;
+    }) => React.JSX.Element;
+    Initial: () => React.JSX.Element;
+    Placeholder: () => React.JSX.Element;
+    Icon: ({ is }: {
+        is: typeof import("..").Icon;
+    }) => React.JSX.Element;
+};
+export {};

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

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

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export declare const AvatarImage: ({ src, alt }: {
+    src: string;
+    alt: string;
+}) => React.JSX.Element;

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

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const AvatarInitial: () => React.JSX.Element;

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

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const AvatarPlaceholder: () => React.JSX.Element;

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

@@ -0,0 +1 @@
+export { Avatar } from './Avatar';

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

@@ -0,0 +1,198 @@
+export declare const badgeSemanticNames: string[];
+export declare const colorSchemes: {
+    info: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--text-on-white': string;
+    };
+    neutral: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--text-on-white': string;
+    };
+    success: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--text-on-white': string;
+    };
+    danger: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--text-on-white': string;
+    };
+    warning: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--text-on-white': string;
+    };
+    primary: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-subtle-hover': string;
+        '--background-subtle-hover': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--background-bold-hover': string;
+        '--text-on-white': string;
+    };
+    grey: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-subtle-hover': string;
+        '--background-subtle-hover': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--background-bold-hover': string;
+        '--text-on-white': string;
+    };
+    blue: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-subtle-hover': string;
+        '--background-subtle-hover': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--background-bold-hover': string;
+        '--text-on-white': string;
+    };
+    pink: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-subtle-hover': string;
+        '--background-subtle-hover': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--background-bold-hover': string;
+        '--text-on-white': string;
+    };
+    purple: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-subtle-hover': string;
+        '--background-subtle-hover': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--background-bold-hover': string;
+        '--text-on-white': string;
+    };
+    cyan: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-subtle-hover': string;
+        '--background-subtle-hover': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--background-bold-hover': string;
+        '--text-on-white': string;
+    };
+    green: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-subtle-hover': string;
+        '--background-subtle-hover': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--background-bold-hover': string;
+        '--text-on-white': string;
+    };
+    magenta: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-subtle-hover': string;
+        '--background-subtle-hover': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--background-bold-hover': string;
+        '--text-on-white': string;
+    };
+    red: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-subtle-hover': string;
+        '--background-subtle-hover': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--background-bold-hover': string;
+        '--text-on-white': string;
+    };
+    teal: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-subtle-hover': string;
+        '--background-subtle-hover': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--background-bold-hover': string;
+        '--text-on-white': string;
+    };
+    orange: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-subtle-hover': string;
+        '--background-subtle-hover': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--background-bold-hover': string;
+        '--text-on-white': string;
+    };
+    yellow: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-subtle-hover': string;
+        '--background-subtle-hover': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--background-bold-hover': string;
+        '--text-on-white': string;
+    };
+    lime: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-subtle-hover': string;
+        '--background-subtle-hover': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--background-bold-hover': string;
+        '--text-on-white': string;
+    };
+    lapis: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-subtle-hover': string;
+        '--background-subtle-hover': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--background-bold-hover': string;
+        '--text-on-white': string;
+    };
+    maroon: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-subtle-hover': string;
+        '--background-subtle-hover': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--background-bold-hover': string;
+        '--text-on-white': string;
+    };
+    marsh: {
+        '--text-subtle': string;
+        '--background-subtle': string;
+        '--text-subtle-hover': string;
+        '--background-subtle-hover': string;
+        '--text-bold': string;
+        '--background-bold': string;
+        '--background-bold-hover': string;
+        '--text-on-white': string;
+    };
+};

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { TBadgeProps } from './Badge';
+type TBadgeProviderProps = {
+    size?: TBadgeProps['size'];
+    overflow?: TBadgeProps['overflow'];
+};
+type TBadgeContext = TBadgeProviderProps & {
+    isOverflowing?: boolean;
+    setIsOverflowing?: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export declare const BadgeContext: React.Context<TBadgeContext>;
+export declare const BadgeProvider: ({ size, overflow, children }: React.PropsWithChildren<TBadgeProviderProps>) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Icon } from '../../components/icon';
+import { colorSchemes as badgeColorSchemes } from './Badge.colorscheme.config';
+import { BadgeText } from './BadgeText';
+declare const StyledBadge: React.ForwardRefExoticComponent<Omit<Omit<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;
+    align?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline">>) | undefined;
+    gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "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'];
+};
+export declare const Badge: React.ForwardRefExoticComponent<Omit<TBadgeProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Icon: (props: React.ComponentProps<typeof Icon>) => React.JSX.Element;
+    Text: ({ children, ...rest }: Omit<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+        ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
+    }, "size" | "weight" | "family" | "noCapsize"> & {
+        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?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLParagraphElement>, "overflow"> & {
+        overflow?: ("wrap" | "ellipsis" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "ellipsis">>) | undefined;
+    } & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLParagraphElement>) => JSX.Element;
+};
+export {};