@atom-learning/components 8.0.0 → 8.0.2

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

@@ -1,7 +1,5 @@
 import React from 'react';
-declare const StyledContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-accordion").AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}, never> & {
+declare const StyledContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-accordion").AccordionContentProps & React.RefAttributes<HTMLDivElement>, never> & {
     as?: React.ElementType;
 }>;
 export declare const AccordionContent: ({ children, className, ...remainingProps }: React.ComponentProps<typeof StyledContent>) => React.JSX.Element;

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

@@ -1,6 +1,4 @@
 import React from 'react';
-export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-accordion").AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}, never> & {
+export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-accordion").AccordionItemProps & React.RefAttributes<HTMLDivElement>, never> & {
     as?: React.ElementType;
 }>;

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import { TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
-declare const StyledTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "arrowPosition"> & {
+declare const StyledTrigger: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "arrowPosition"> & {
     arrowPosition?: "left" | "right" | undefined;
 } & {
     as?: React.ElementType;

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

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

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

@@ -4,9 +4,7 @@ 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<Omit<import("@radix-ui/react-alert-dialog").AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-    }, "size"> & {
+    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;

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

@@ -1,7 +1,5 @@
 import * as React from 'react';
-declare const StyledAlertDialogContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-alert-dialog").AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "size"> & {
+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;

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

@@ -1,17 +1,13 @@
 import * as React from 'react';
 import type { TAvatarRootContext } from './AvatarContext';
 import { AvatarRootContext } from './AvatarContext';
-declare const StyledDiv: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "size" | "emphasis"> & {
+declare const StyledDiv: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size" | "emphasis"> & {
     size?: "sm" | "md" | "lg" | "xs" | "xl" | "xxl" | undefined;
     emphasis?: "bold" | "white" | "subtle" | undefined;
 } & {
     as?: React.ElementType;
 }>;
-declare const StyledButton: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "size" | "emphasis"> & {
+declare const StyledButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "size" | "emphasis"> & {
     size?: "sm" | "md" | "lg" | "xs" | "xl" | "xxl" | undefined;
     emphasis?: "bold" | "white" | "subtle" | undefined;
 } & {

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

@@ -2,9 +2,7 @@ import * as React from 'react';
 import { Icon } from '../../components/icon/Icon';
 import { colorSchemes as badgeColorSchemes } from './Badge.colorscheme.config';
 import { BadgeText } from './BadgeText';
-declare const StyledBadge: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "size" | "emphasis" | "isClickable" | "highlighted"> & {
+declare const StyledBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, 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;
@@ -18,9 +16,7 @@ export type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {
 };
 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<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-        ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
-    }, "size" | "noCapsize" | "weight" | "family"> & {
+    Text: ({ children, ...rest }: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "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;
@@ -29,9 +25,7 @@ export declare const Badge: React.ForwardRefExoticComponent<Omit<TBadgeProps, "r
         as?: React.ElementType;
     }, "as"> & {
         as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & {
-        ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
-    }, "overflow"> & {
+    }, "ref"> & React.RefAttributes<HTMLParagraphElement>, "overflow"> & {
         overflow?: "wrap" | "ellipsis" | undefined;
     } & {
         as?: React.ElementType;

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":[],"sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\n\nimport {\n  badgeSemanticNames,\n  colorSchemes as badgeColorSchemes\n} from './Badge.colorscheme.config'\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\n\nconst StyledBadge = styled(\n  'div',\n  {\n    base: [\n      'flex',\n      'justify-center',\n      'items-center',\n      'rounded-sm',\n      'min-w-0',\n      'border',\n      'border-white',\n      'font-body',\n      '*:not-last:mr-1'\n    ],\n    variants: {\n      emphasis: {\n        white: ['text-(--text-on-white)', 'bg-white'],\n        subtle: ['text-(--text-subtle)', 'bg-(--background-subtle)'],\n        bold: ['text-(--text-bold)', 'bg-(--background-bold)']\n      },\n      size: {\n        xs: ['px-1', 'py-0'],\n        sm: ['px-1', 'py-0.5'],\n        md: ['px-2', 'py-1']\n      },\n      isClickable: {\n        true: ['cursor-pointer']\n      },\n      highlighted: {\n        true: []\n      }\n    },\n    compoundVariants: [\n      {\n        isClickable: true,\n        emphasis: 'white',\n        class: [\n          'hover:text-(--text-on-white)',\n          'hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n        ]\n      },\n      {\n        isClickable: true,\n        emphasis: 'subtle',\n        class: [\n          'hover:bg-(--background-subtle-hover)',\n          'hover:text-(--text-subtle-hover)'\n        ]\n      },\n      {\n        isClickable: true,\n        emphasis: 'bold',\n        class: [\n          'hover:bg-(--background-bold-hover)',\n          'hover:text-(--text-bold)'\n        ]\n      },\n      {\n        emphasis: 'white',\n        highlighted: true,\n        class: [\n          'text-(--text-on-white)',\n          'bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n        ]\n      },\n      {\n        emphasis: 'subtle',\n        highlighted: true,\n        class: ['text-(--text-subtle-hover)', '(--bg-background-subtle-hover)']\n      },\n      {\n        emphasis: 'bold',\n        highlighted: true,\n        class: ['text-(--text-bold)', 'bg-(--background-bold-hover)']\n      }\n    ]\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {\n  theme?: keyof typeof badgeColorSchemes\n  overflow?: React.ComponentProps<typeof BadgeText>['overflow']\n}\n\ntype TBadgeInnerProps = Omit<TBadgeProps, 'size' | 'overflow'>\n\nconst BadgeInner = React.forwardRef<HTMLDivElement, TBadgeInnerProps>(\n  ({ theme = 'info', emphasis = 'subtle', children, style, ...rest }, ref) => {\n    const { size, overflow, isOverflowing } = React.useContext(BadgeContext)\n    const [badgeElRef, setBadgeElRef] = useCallbackRefState()\n    React.useImperativeHandle(ref, () => badgeElRef as HTMLDivElement)\n\n    const label = badgeElRef?.textContent\n\n    const isInfoOnly = badgeSemanticNames.includes(theme)\n\n    const isClickable =\n      Object.keys(rest).includes('onClick') ||\n      Object.keys(rest).includes('href')\n\n    return (\n      <OptionalTooltipWrapper\n        hasTooltip={overflow === 'ellipsis' && isOverflowing}\n        label={label}\n      >\n        <StyledBadge\n          role=\"status\"\n          emphasis={emphasis}\n          size={size}\n          style={{\n            ...badgeColorSchemes[theme],\n            ...style\n          }}\n          {...rest}\n          ref={setBadgeElRef}\n          isClickable={isClickable && !isInfoOnly}\n        >\n          {React.Children.map(children, (child) => {\n            if (typeof child === 'string' || typeof child === 'number') {\n              return <BadgeText>{child}</BadgeText>\n            }\n            if (\n              React.isValidElement<React.ComponentPropsWithoutRef<typeof Icon>>(child) &&\n              child.type === Icon\n            ) {\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"],"mappings":";;;;;;;;;;;AAeA,IAAM,cAAc,OAClB,OACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,UAAU;GACR,OAAO,CAAC,0BAA0B,WAAW;GAC7C,QAAQ,CAAC,wBAAwB,2BAA2B;GAC5D,MAAM,CAAC,sBAAsB,yBAAyB;GACvD;EACD,MAAM;GACJ,IAAI,CAAC,QAAQ,OAAO;GACpB,IAAI,CAAC,QAAQ,SAAS;GACtB,IAAI,CAAC,QAAQ,OAAO;GACrB;EACD,aAAa,EACX,MAAM,CAAC,iBAAiB,EACzB;EACD,aAAa,EACX,MAAM,EAAE,EACT;EACF;CACD,kBAAkB;EAChB;GACE,aAAa;GACb,UAAU;GACV,OAAO,CACL,gCACA,kEACD;GACF;EACD;GACE,aAAa;GACb,UAAU;GACV,OAAO,CACL,wCACA,mCACD;GACF;EACD;GACE,aAAa;GACb,UAAU;GACV,OAAO,CACL,sCACA,2BACD;GACF;EACD;GACE,UAAU;GACV,aAAa;GACb,OAAO,CACL,0BACA,4DACD;GACF;EACD;GACE,UAAU;GACV,aAAa;GACb,OAAO,CAAC,8BAA8B,iCAAiC;GACxE;EACD;GACE,UAAU;GACV,aAAa;GACb,OAAO,CAAC,sBAAsB,+BAA+B;GAC9D;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AASD,IAAM,aAAa,QAAM,YACtB,EAAE,QAAQ,QAAQ,WAAW,UAAU,UAAU,OAAO,GAAG,QAAQ,QAAQ;CAC1E,MAAM,EAAE,MAAM,UAAU,kBAAkB,QAAM,WAAW,aAAa;CACxE,MAAM,CAAC,YAAY,iBAAiB,qBAAqB;AACzD,SAAM,oBAAoB,WAAW,WAA6B;CAElE,MAAM,QAAQ,YAAY;CAE1B,MAAM,aAAa,mBAAmB,SAAS,MAAM;CAErD,MAAM,cACJ,OAAO,KAAK,KAAK,CAAC,SAAS,UAAU,IACrC,OAAO,KAAK,KAAK,CAAC,SAAS,OAAO;AAEpC,QACE,oBAAC,wBAAD;EACE,YAAY,aAAa,cAAc;EAChC;YAEP,oBAAC,aAAD;GACE,MAAK;GACK;GACJ;GACN,OAAO;IACL,GAAG,aAAkB;IACrB,GAAG;IACJ;GACD,GAAI;GACJ,KAAK;GACL,aAAa,eAAe,CAAC;aAE5B,QAAM,SAAS,IAAI,WAAW,UAAU;AACvC,QAAI,OAAO,UAAU,YAAY,OAAO,UAAU,SAChD,QAAO,oBAAC,WAAD,EAAA,UAAY,OAAkB,CAAA;AAEvC,QACE,QAAM,eAA4D,MAAM,IACxE,MAAM,SAAS,KAEf,QAAO,oBAAC,WAAD,EAAW,GAAI,MAAM,OAAS,CAAA;AAEvC,WAAO;KACP;GACU,CAAA;EACS,CAAA;EAG9B;AAED,IAAM,iBAAiB,QAAM,YAC1B,EAAE,OAAO,MAAM,WAAW,QAAQ,GAAG,QAAQ,QAAQ;AACpD,QACE,oBAAC,eAAD;EAAqB;EAAgB;YACnC,oBAAC,YAAD;GAAY,GAAI;GAAW;GAAO,CAAA;EACpB,CAAA;EAGrB;AAED,IAAa,QAAQ,OAAO,OAAO,gBAAgB;CACjD,MAAM;CACN,MAAM;CACP,CAAC;AAEF,eAAe,cAAc"}
+{"version":3,"file":"Badge.js","names":[],"sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\n\nimport {\n  badgeSemanticNames,\n  colorSchemes as badgeColorSchemes\n} from './Badge.colorscheme.config'\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\n\nconst StyledBadge = styled(\n  'div',\n  {\n    base: [\n      'flex',\n      'justify-center',\n      'items-center',\n      'rounded-sm',\n      'min-w-0',\n      'border',\n      'border-white',\n      'font-body',\n      '*:not-last:mr-1'\n    ],\n    variants: {\n      emphasis: {\n        white: ['text-(--text-on-white)', 'bg-white'],\n        subtle: ['text-(--text-subtle)', 'bg-(--background-subtle)'],\n        bold: ['text-(--text-bold)', 'bg-(--background-bold)']\n      },\n      size: {\n        xs: ['px-1', 'py-0'],\n        sm: ['px-1', 'py-0.5'],\n        md: ['px-2', 'py-1']\n      },\n      isClickable: {\n        true: ['cursor-pointer']\n      },\n      highlighted: {\n        true: []\n      }\n    },\n    compoundVariants: [\n      {\n        isClickable: true,\n        emphasis: 'white',\n        class: [\n          'hover:text-(--text-on-white)',\n          'hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n        ]\n      },\n      {\n        isClickable: true,\n        emphasis: 'subtle',\n        class: [\n          'hover:bg-(--background-subtle-hover)',\n          'hover:text-(--text-subtle-hover)'\n        ]\n      },\n      {\n        isClickable: true,\n        emphasis: 'bold',\n        class: [\n          'hover:bg-(--background-bold-hover)',\n          'hover:text-(--text-bold)'\n        ]\n      },\n      {\n        emphasis: 'white',\n        highlighted: true,\n        class: [\n          'text-(--text-on-white)',\n          'bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n        ]\n      },\n      {\n        emphasis: 'subtle',\n        highlighted: true,\n        class: ['text-(--text-subtle-hover)', '(--bg-background-subtle-hover)']\n      },\n      {\n        emphasis: 'bold',\n        highlighted: true,\n        class: ['text-(--text-bold)', 'bg-(--background-bold-hover)']\n      }\n    ]\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {\n  theme?: keyof typeof badgeColorSchemes\n  overflow?: React.ComponentProps<typeof BadgeText>['overflow']\n}\n\ntype TBadgeInnerProps = Omit<TBadgeProps, 'size' | 'overflow'>\n\nconst BadgeInner = React.forwardRef<HTMLDivElement, TBadgeInnerProps>(\n  ({ theme = 'info', emphasis = 'subtle', children, style, ...rest }, ref) => {\n    const { size, overflow, isOverflowing } = React.useContext(BadgeContext)\n    const [badgeElRef, setBadgeElRef] = useCallbackRefState()\n    React.useImperativeHandle(ref, () => badgeElRef as HTMLDivElement)\n\n    const label = badgeElRef?.textContent\n\n    const isInfoOnly = badgeSemanticNames.includes(theme)\n\n    const isClickable =\n      Object.keys(rest).includes('onClick') ||\n      Object.keys(rest).includes('href')\n\n    return (\n      <OptionalTooltipWrapper\n        hasTooltip={overflow === 'ellipsis' && isOverflowing}\n        label={label}\n      >\n        <StyledBadge\n          role=\"status\"\n          emphasis={emphasis}\n          size={size}\n          style={{\n            ...badgeColorSchemes[theme],\n            ...style\n          }}\n          {...rest}\n          ref={setBadgeElRef}\n          isClickable={isClickable && !isInfoOnly}\n        >\n          {React.Children.map(children, (child) => {\n            if (typeof child === 'string' || typeof child === 'number') {\n              return <BadgeText>{child}</BadgeText>\n            }\n            if (\n              React.isValidElement<React.ComponentPropsWithoutRef<typeof Icon>>(\n                child\n              ) &&\n              child.type === Icon\n            ) {\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"],"mappings":";;;;;;;;;;;AAeA,IAAM,cAAc,OAClB,OACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,UAAU;GACR,OAAO,CAAC,0BAA0B,WAAW;GAC7C,QAAQ,CAAC,wBAAwB,2BAA2B;GAC5D,MAAM,CAAC,sBAAsB,yBAAyB;GACvD;EACD,MAAM;GACJ,IAAI,CAAC,QAAQ,OAAO;GACpB,IAAI,CAAC,QAAQ,SAAS;GACtB,IAAI,CAAC,QAAQ,OAAO;GACrB;EACD,aAAa,EACX,MAAM,CAAC,iBAAiB,EACzB;EACD,aAAa,EACX,MAAM,EAAE,EACT;EACF;CACD,kBAAkB;EAChB;GACE,aAAa;GACb,UAAU;GACV,OAAO,CACL,gCACA,kEACD;GACF;EACD;GACE,aAAa;GACb,UAAU;GACV,OAAO,CACL,wCACA,mCACD;GACF;EACD;GACE,aAAa;GACb,UAAU;GACV,OAAO,CACL,sCACA,2BACD;GACF;EACD;GACE,UAAU;GACV,aAAa;GACb,OAAO,CACL,0BACA,4DACD;GACF;EACD;GACE,UAAU;GACV,aAAa;GACb,OAAO,CAAC,8BAA8B,iCAAiC;GACxE;EACD;GACE,UAAU;GACV,aAAa;GACb,OAAO,CAAC,sBAAsB,+BAA+B;GAC9D;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AASD,IAAM,aAAa,QAAM,YACtB,EAAE,QAAQ,QAAQ,WAAW,UAAU,UAAU,OAAO,GAAG,QAAQ,QAAQ;CAC1E,MAAM,EAAE,MAAM,UAAU,kBAAkB,QAAM,WAAW,aAAa;CACxE,MAAM,CAAC,YAAY,iBAAiB,qBAAqB;AACzD,SAAM,oBAAoB,WAAW,WAA6B;CAElE,MAAM,QAAQ,YAAY;CAE1B,MAAM,aAAa,mBAAmB,SAAS,MAAM;CAErD,MAAM,cACJ,OAAO,KAAK,KAAK,CAAC,SAAS,UAAU,IACrC,OAAO,KAAK,KAAK,CAAC,SAAS,OAAO;AAEpC,QACE,oBAAC,wBAAD;EACE,YAAY,aAAa,cAAc;EAChC;YAEP,oBAAC,aAAD;GACE,MAAK;GACK;GACJ;GACN,OAAO;IACL,GAAG,aAAkB;IACrB,GAAG;IACJ;GACD,GAAI;GACJ,KAAK;GACL,aAAa,eAAe,CAAC;aAE5B,QAAM,SAAS,IAAI,WAAW,UAAU;AACvC,QAAI,OAAO,UAAU,YAAY,OAAO,UAAU,SAChD,QAAO,oBAAC,WAAD,EAAA,UAAY,OAAkB,CAAA;AAEvC,QACE,QAAM,eACJ,MACD,IACD,MAAM,SAAS,KAEf,QAAO,oBAAC,WAAD,EAAW,GAAI,MAAM,OAAS,CAAA;AAEvC,WAAO;KACP;GACU,CAAA;EACS,CAAA;EAG9B;AAED,IAAM,iBAAiB,QAAM,YAC1B,EAAE,OAAO,MAAM,WAAW,QAAQ,GAAG,QAAQ,QAAQ;AACpD,QACE,oBAAC,eAAD;EAAqB;EAAgB;YACnC,oBAAC,YAAD;GAAY,GAAI;GAAW;GAAO,CAAA;EACpB,CAAA;EAGrB;AAED,IAAa,QAAQ,OAAO,OAAO,gBAAgB;CACjD,MAAM;CACN,MAAM;CACP,CAAC;AAEF,eAAe,cAAc"}

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

@@ -1,7 +1,5 @@
 import * as React from 'react';
-declare const StyledBadgeText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-    ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
-}, "size" | "noCapsize" | "weight" | "family"> & {
+declare const StyledBadgeText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "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;
@@ -10,9 +8,7 @@ declare const StyledBadgeText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Om
     as?: React.ElementType;
 }, "as"> & {
     as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & {
-    ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
-}, "overflow"> & {
+}, "ref"> & React.RefAttributes<HTMLParagraphElement>, "overflow"> & {
     overflow?: "wrap" | "ellipsis" | undefined;
 } & {
     as?: React.ElementType;

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

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
 import { Dismissible } from '../dismissible';
-declare const StyledBannerContainer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLElement> | null | undefined;
-}, "size" | "emphasis"> & {
+declare const StyledBannerContainer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "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;
 } & {

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

@@ -5,9 +5,7 @@ export declare const BannerRegular: {
     displayName: string;
 } & {
     Content: {
-        (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-            ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-        }, "size"> & {
+        (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size"> & {
             size?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
         } & {
             as?: React.ElementType;
@@ -48,15 +46,59 @@ export declare const BannerRegular: {
             slot?: string | undefined | undefined;
             style?: React.CSSProperties | undefined;
             title?: string | undefined | undefined;
-            ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
-            suppressHydrationWarning?: boolean | undefined | undefined;
+            ref?: React.Ref<HTMLButtonElement> | undefined;
+            as?: React.ElementType | undefined;
             className?: string | undefined | undefined;
+            key?: React.Key | null | undefined;
+            value?: string | number | readonly string[] | undefined;
+            name?: string | undefined | undefined;
+            defaultChecked?: boolean | undefined | undefined;
+            defaultValue?: string | number | readonly string[] | undefined;
+            suppressContentEditableWarning?: boolean | undefined | undefined;
+            suppressHydrationWarning?: boolean | undefined | undefined;
+            accessKey?: string | undefined | undefined;
+            autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+            autoFocus?: boolean | undefined | undefined;
+            contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+            contextMenu?: string | undefined | undefined;
+            dir?: string | undefined | undefined;
+            draggable?: (boolean | "true" | "false") | undefined;
+            enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+            hidden?: boolean | undefined | undefined;
             id?: string | undefined | undefined;
             lang?: string | undefined | undefined;
-            name?: string | undefined | undefined;
-            type?: "submit" | "reset" | "button" | undefined | undefined;
-            role?: React.AriaRole | undefined;
+            nonce?: string | undefined | undefined;
+            spellCheck?: (boolean | "true" | "false") | undefined;
             tabIndex?: number | undefined | undefined;
+            radioGroup?: string | undefined | undefined;
+            role?: React.AriaRole | undefined;
+            about?: string | undefined | undefined;
+            datatype?: string | undefined | undefined;
+            inlist?: any;
+            property?: string | undefined | undefined;
+            rel?: string | undefined | undefined;
+            resource?: string | undefined | undefined;
+            rev?: string | undefined | undefined;
+            typeof?: string | undefined | undefined;
+            vocab?: string | undefined | undefined;
+            autoCorrect?: string | undefined | undefined;
+            autoSave?: string | undefined | undefined;
+            itemProp?: string | undefined | undefined;
+            itemScope?: boolean | undefined | undefined;
+            itemType?: string | undefined | undefined;
+            itemID?: string | undefined | undefined;
+            itemRef?: string | undefined | undefined;
+            results?: number | undefined | undefined;
+            security?: string | undefined | undefined;
+            unselectable?: "on" | "off" | undefined | undefined;
+            popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+            popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+            popoverTarget?: string | undefined | undefined;
+            inert?: boolean | undefined | undefined;
+            inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+            is?: string | undefined | undefined;
+            exportparts?: string | undefined | undefined;
+            part?: string | undefined | undefined;
             "aria-activedescendant"?: string | undefined | undefined;
             "aria-atomic"?: (boolean | "true" | "false") | undefined;
             "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -129,18 +171,18 @@ export declare const BannerRegular: {
             onFocusCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
             onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
             onBlurCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
-            onChange?: React.FormEventHandler<HTMLButtonElement> | undefined;
-            onChangeCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+            onChange?: React.ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+            onChangeCapture?: React.ChangeEventHandler<HTMLButtonElement, Element> | undefined;
             onBeforeInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
-            onBeforeInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-            onInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
-            onInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-            onReset?: React.FormEventHandler<HTMLButtonElement> | undefined;
-            onResetCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-            onSubmit?: React.FormEventHandler<HTMLButtonElement> | undefined;
-            onSubmitCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-            onInvalid?: React.FormEventHandler<HTMLButtonElement> | undefined;
-            onInvalidCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+            onBeforeInputCapture?: React.InputEventHandler<HTMLButtonElement> | undefined;
+            onInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
+            onInputCapture?: React.InputEventHandler<HTMLButtonElement> | undefined;
+            onReset?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onResetCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onSubmit?: React.SubmitEventHandler<HTMLButtonElement> | undefined;
+            onSubmitCapture?: React.SubmitEventHandler<HTMLButtonElement> | undefined;
+            onInvalid?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onInvalidCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
             onLoad?: React.ReactEventHandler<HTMLButtonElement> | undefined;
             onLoadCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
             onError?: React.ReactEventHandler<HTMLButtonElement> | undefined;
@@ -260,6 +302,8 @@ export declare const BannerRegular: {
             onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
             onScroll?: React.UIEventHandler<HTMLButtonElement> | undefined;
             onScrollCapture?: React.UIEventHandler<HTMLButtonElement> | undefined;
+            onScrollEnd?: React.UIEventHandler<HTMLButtonElement> | undefined;
+            onScrollEndCapture?: React.UIEventHandler<HTMLButtonElement> | undefined;
             onWheel?: React.WheelEventHandler<HTMLButtonElement> | undefined;
             onWheelCapture?: React.WheelEventHandler<HTMLButtonElement> | undefined;
             onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
@@ -268,51 +312,19 @@ export declare const BannerRegular: {
             onAnimationEndCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
             onAnimationIteration?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
             onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+            onToggle?: React.ToggleEventHandler<HTMLButtonElement> | undefined;
+            onBeforeToggle?: React.ToggleEventHandler<HTMLButtonElement> | undefined;
+            onTransitionCancel?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+            onTransitionCancelCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
             onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
             onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
-            key?: React.Key | null | undefined;
-            defaultChecked?: boolean | undefined | undefined;
-            defaultValue?: string | number | readonly string[] | undefined;
-            suppressContentEditableWarning?: boolean | undefined | undefined;
-            accessKey?: string | undefined | undefined;
-            autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-            autoFocus?: boolean | undefined | undefined;
-            contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-            contextMenu?: string | undefined | undefined;
-            dir?: string | undefined | undefined;
-            draggable?: (boolean | "true" | "false") | undefined;
-            enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-            hidden?: boolean | undefined | undefined;
-            nonce?: string | undefined | undefined;
-            spellCheck?: (boolean | "true" | "false") | undefined;
-            radioGroup?: string | undefined | undefined;
-            about?: string | undefined | undefined;
-            datatype?: string | undefined | undefined;
-            inlist?: any;
-            property?: string | undefined | undefined;
-            rel?: string | undefined | undefined;
-            resource?: string | undefined | undefined;
-            rev?: string | undefined | undefined;
-            typeof?: string | undefined | undefined;
-            vocab?: string | undefined | undefined;
-            autoCorrect?: string | undefined | undefined;
-            autoSave?: string | undefined | undefined;
-            itemProp?: string | undefined | undefined;
-            itemScope?: boolean | undefined | undefined;
-            itemType?: string | undefined | undefined;
-            itemID?: string | undefined | undefined;
-            itemRef?: string | undefined | undefined;
-            results?: number | undefined | undefined;
-            security?: string | undefined | undefined;
-            unselectable?: "on" | "off" | undefined | undefined;
-            inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-            is?: string | undefined | undefined;
-            exportparts?: string | undefined | undefined;
-            part?: string | undefined | undefined;
+            onTransitionRun?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+            onTransitionRunCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+            onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+            onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
             disabled?: boolean | undefined | undefined;
-            value?: string | number | readonly string[] | undefined;
-            as?: React.ElementType | undefined;
-            formAction?: string | undefined;
+            type?: "submit" | "reset" | "button" | undefined | undefined;
+            formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
             formEncType?: string | undefined | undefined;
             formMethod?: string | undefined | undefined;
             formNoValidate?: boolean | undefined | undefined;

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

@@ -1,7 +1,5 @@
 import * as React from 'react';
-declare const Container: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "size"> & {
+declare const Container: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size"> & {
     size?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
 } & {
     as?: React.ElementType;

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

@@ -1,7 +1,5 @@
 import * as React from 'react';
-declare const StyledDismiss: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "appearance" | "size" | "theme" | "isRounded"> & {
+declare const StyledDismiss: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "size" | "theme" | "isRounded"> & {
     theme?: ("primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger">>) | undefined;
     appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
     size?: ("sm" | "md" | "lg" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs">>) | undefined;
@@ -11,9 +9,7 @@ declare const StyledDismiss: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit
 }, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../../..").NavigatorActions> & {
     children: React.ReactNode;
     label: string;
-} & Omit<import("../../..").TOptionalTooltipWrapperProps, "label"> & import("../../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, never> & {
+} & Omit<import("../../..").TOptionalTooltipWrapperProps, "label"> & import("../../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, never> & {
     as?: React.ElementType;
 }>;
 type BannerRegularDismissProps = Omit<React.ComponentProps<typeof StyledDismiss>, 'children' | 'onClick' | 'href'>;

package/dist/components/banner/banner-regular/BannerRegularText.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerRegularText.js","names":[],"sources":["../../../../src/components/banner/banner-regular/BannerRegularText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../../text/Text'\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledText = styled(\n  Text,\n  {\n    base: ['text-(--banner-text-color)'],\n    variants: {\n      containerSize: {\n        sm: ['mb-4'],\n        md: ['mb-6']\n      },\n      hasDismiss: {\n        true: []\n      }\n    },\n    compoundVariants: [\n      {\n        containerSize: 'sm',\n        hasDismiss: true,\n        class: ['mr-10']\n      }\n    ]\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nexport const BannerRegularText = (props: React.ComponentPropsWithoutRef<typeof Text>) => {\n  const { size, hasDismiss } = useBannerContext()\n\n  return (\n    <StyledText\n      size={size}\n      containerSize={size}\n      hasDismiss={hasDismiss}\n      {...props}\n    />\n  )\n}\n\nBannerRegularText.displayName = 'BannerRegularText'\n"],"mappings":";;;;;;AAOA,IAAM,aAAa,OACjB,MACA;CACE,MAAM,CAAC,6BAA6B;CACpC,UAAU;EACR,eAAe;GACb,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACb;EACD,YAAY,EACV,MAAM,EAAE,EACT;EACF;CACD,kBAAkB,CAChB;EACE,eAAe;EACf,YAAY;EACZ,OAAO,CAAC,QAAQ;EACjB,CACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAa,qBAAqB,UAAuD;CACvF,MAAM,EAAE,MAAM,eAAe,kBAAkB;AAE/C,QACE,oBAAC,YAAD;EACQ;EACN,eAAe;EACH;EACZ,GAAI;EACJ,CAAA;;AAIN,kBAAkB,cAAc"}
+{"version":3,"file":"BannerRegularText.js","names":[],"sources":["../../../../src/components/banner/banner-regular/BannerRegularText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../../text/Text'\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledText = styled(\n  Text,\n  {\n    base: ['text-(--banner-text-color)'],\n    variants: {\n      containerSize: {\n        sm: ['mb-4'],\n        md: ['mb-6']\n      },\n      hasDismiss: {\n        true: []\n      }\n    },\n    compoundVariants: [\n      {\n        containerSize: 'sm',\n        hasDismiss: true,\n        class: ['mr-10']\n      }\n    ]\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nexport const BannerRegularText = (\n  props: React.ComponentPropsWithoutRef<typeof Text>\n) => {\n  const { size, hasDismiss } = useBannerContext()\n\n  return (\n    <StyledText\n      size={size}\n      containerSize={size}\n      hasDismiss={hasDismiss}\n      {...props}\n    />\n  )\n}\n\nBannerRegularText.displayName = 'BannerRegularText'\n"],"mappings":";;;;;;AAOA,IAAM,aAAa,OACjB,MACA;CACE,MAAM,CAAC,6BAA6B;CACpC,UAAU;EACR,eAAe;GACb,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACb;EACD,YAAY,EACV,MAAM,EAAE,EACT;EACF;CACD,kBAAkB,CAChB;EACE,eAAe;EACf,YAAY;EACZ,OAAO,CAAC,QAAQ;EACjB,CACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAa,qBACX,UACG;CACH,MAAM,EAAE,MAAM,eAAe,kBAAkB;AAE/C,QACE,oBAAC,YAAD;EACQ;EACN,eAAe;EACH;EACZ,GAAI;EACJ,CAAA;;AAIN,kBAAkB,cAAc"}