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

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { styled, Theme } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\n\nimport {\n  colorSchemes as badgeColorSchemes,\n  badgeSemanticNames\n} from './Badge.colorscheme.config'\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\n\nconst StyledBadge = styled(Flex, {\n  base: [\n    'justify-center',\n    'items-center',\n    'rounded-sm',\n    'min-w-none',\n    'border',\n    'border-white',\n    'font-body',\n    '*:not-last:mr-1'\n  ],\n  variants: {\n    emphasis: {\n      white: ['text-(--text-on-white)', 'bg-white'],\n      subtle: ['text-(--text-subtle)', 'bg-(--background-subtle)'],\n      bold: ['text-(--text-bold)', 'bg-(--background-bold)']\n    },\n    size: {\n      xs: ['px-1'],\n      sm: ['px-1', 'py-0.5'],\n      md: ['px-2', 'py-1']\n    },\n\n    isClickable: {\n      true: ['cursor-pointer']\n    },\n    highlighted: {\n      true: []\n    }\n  },\n  compoundVariants: [\n    {\n      isClickable: true,\n      emphasis: 'white',\n      class: [\n        'hover:text-(--text-on-white)',\n        'hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n      ]\n    },\n    {\n      isClickable: true,\n      emphasis: 'subtle',\n      class: [\n        'hover:bg-(--background-subtle-hover)',\n        'hover:text-(--text-subtle-hover)'\n      ]\n    },\n    {\n      isClickable: true,\n      emphasis: 'bold',\n      class: ['hover:bg-(--background-bold-hover)', 'hover:text-(--text-bold)']\n    },\n    {\n      emphasis: 'white',\n      highlighted: true,\n      class: [\n        'text-(--text-on-white)',\n        'bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n      ]\n    },\n    {\n      emphasis: 'subtle',\n      highlighted: true,\n      class: ['text-(--text-subtle-hover)', '(--bg-background-subtle-hover)']\n    },\n    {\n      emphasis: 'bold',\n      highlighted: true,\n      class: ['text-(--text-bold)', 'bg-(--background-bold-hover)']\n    }\n  ]\n})\n\nexport type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {\n  theme?: keyof typeof badgeColorSchemes\n  overflow?: React.ComponentProps<typeof BadgeText>['overflow']\n}\n\ntype TBadgeInnerProps = Omit<TBadgeProps, 'size' | 'overflow'>\n\nconst BadgeInner: React.ForwardRefExoticComponent<TBadgeInnerProps> =\n  React.forwardRef(\n    ({ theme = 'info', emphasis = 'subtle', children, ...rest }, ref) => {\n      const { size, overflow, isOverflowing } = React.useContext(BadgeContext)\n      const [badgeElRef, setBadgeElRef] = useCallbackRefState()\n      React.useImperativeHandle(ref, () => badgeElRef as HTMLDivElement)\n\n      const label = badgeElRef?.textContent\n\n      const isInfoOnly = badgeSemanticNames.includes(theme)\n\n      const isClickable =\n        Object.keys(rest).includes('onClick') ||\n        Object.keys(rest).includes('href')\n\n      return (\n        <OptionalTooltipWrapper\n          hasTooltip={overflow === 'ellipsis' && isOverflowing}\n          label={label}\n        >\n          <Theme theme={badgeColorSchemes[theme]}>\n            <StyledBadge\n              role=\"status\"\n              emphasis={emphasis}\n              size={size}\n              {...rest}\n              ref={setBadgeElRef}\n              isClickable={isClickable && !isInfoOnly}\n            >\n              {React.Children.map(children, (child) => {\n                if (typeof child === 'string' || typeof child === 'number') {\n                  return <BadgeText>{child}</BadgeText>\n                }\n                if (React.isValidElement(child) && child.type === Icon) {\n                  return <BadgeIcon {...child.props} />\n                }\n                return child\n              })}\n            </StyledBadge>\n          </Theme>\n        </OptionalTooltipWrapper>\n      )\n    }\n  )\n\nconst BadgeComponent: React.ForwardRefExoticComponent<TBadgeProps> =\n  React.forwardRef(({ size = 'sm', overflow = 'wrap', ...rest }, ref) => {\n    return (\n      <BadgeProvider size={size} overflow={overflow}>\n        <BadgeInner {...rest} ref={ref} />\n      </BadgeProvider>\n    )\n  })\n\nexport const Badge = Object.assign(BadgeComponent, {\n  Icon: BadgeIcon,\n  Text: BadgeText\n})\n\nBadgeComponent.displayName = 'Badge'\n"],"names":["StyledBadge","styled","Flex","BadgeInner","React","theme","emphasis","children","rest","ref","size","overflow","isOverflowing","BadgeContext","badgeElRef","setBadgeElRef","useCallbackRefState","label","isInfoOnly","badgeSemanticNames","isClickable","OptionalTooltipWrapper","Theme","badgeColorSchemes","child","BadgeText","Icon","BadgeIcon","BadgeComponent","BadgeProvider","Badge"],"mappings":"okBAgBA,MAAMA,EAAcC,EAAOC,EAAM,CAC/B,KAAM,CACJ,iBACA,eACA,aACA,aACA,SACA,eACA,YACA,iBACF,EACA,SAAU,CACR,SAAU,CACR,MAAO,CAAC,yBAA0B,UAAU,EAC5C,OAAQ,CAAC,uBAAwB,0BAA0B,EAC3D,KAAM,CAAC,qBAAsB,wBAAwB,CACvD,EACA,KAAM,CACJ,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,OAAQ,QAAQ,EACrB,GAAI,CAAC,OAAQ,MAAM,CACrB,EAEA,YAAa,CACX,KAAM,CAAC,gBAAgB,CACzB,EACA,YAAa,CACX,KAAM,CAAA,CACR,CACF,EACA,iBAAkB,CAChB,CACE,YAAa,GACb,SAAU,QACV,MAAO,CACL,+BACA,iEACF,CACF,EACA,CACE,YAAa,GACb,SAAU,SACV,MAAO,CACL,uCACA,kCACF,CACF,EACA,CACE,YAAa,GACb,SAAU,OACV,MAAO,CAAC,qCAAsC,0BAA0B,CAC1E,EACA,CACE,SAAU,QACV,YAAa,GACb,MAAO,CACL,yBACA,2DACF,CACF,EACA,CACE,SAAU,SACV,YAAa,GACb,MAAO,CAAC,6BAA8B,gCAAgC,CACxE,EACA,CACE,SAAU,OACV,YAAa,GACb,MAAO,CAAC,qBAAsB,8BAA8B,CAC9D,CACF,CACF,CAAC,EASKC,EACJC,EAAM,WACJ,CAAC,CAAE,MAAAC,EAAQ,OAAQ,SAAAC,EAAW,SAAU,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAAQ,CACnE,KAAM,CAAE,KAAAC,EAAM,SAAAC,EAAU,cAAAC,CAAc,EAAIR,EAAM,WAAWS,CAAY,EACjE,CAACC,EAAYC,CAAa,EAAIC,EAAoB,EACxDZ,EAAM,oBAAoBK,EAAK,IAAMK,CAA4B,EAEjE,MAAMG,EAAQH,GAAA,YAAAA,EAAY,YAEpBI,EAAaC,EAAmB,SAASd,CAAK,EAE9Ce,EACJ,OAAO,KAAKZ,CAAI,EAAE,SAAS,SAAS,GACpC,OAAO,KAAKA,CAAI,EAAE,SAAS,MAAM,EAEnC,OACEJ,EAAA,cAACiB,EAAA,CACC,WAAYV,IAAa,YAAcC,EACvC,MAAOK,CAEPb,EAAAA,EAAA,cAACkB,EAAA,CAAM,MAAOC,EAAkBlB,CAAK,GACnCD,EAAA,cAACJ,EAAA,CACC,KAAK,SACL,SAAUM,EACV,KAAMI,EACL,GAAGF,EACJ,IAAKO,EACL,YAAaK,GAAe,CAACF,CAE5Bd,EAAAA,EAAM,SAAS,IAAIG,EAAWiB,GACzB,OAAOA,GAAU,UAAY,OAAOA,GAAU,SACzCpB,EAAA,cAACqB,EAAA,KAAWD,CAAM,EAEvBpB,EAAM,eAAeoB,CAAK,GAAKA,EAAM,OAASE,EACzCtB,EAAA,cAACuB,EAAA,CAAW,GAAGH,EAAM,KAAA,CAAO,EAE9BA,CACR,CACH,CACF,CACF,CAEJ,CACF,EAEII,EACJxB,EAAM,WAAW,CAAC,CAAE,KAAAM,EAAO,KAAM,SAAAC,EAAW,OAAQ,GAAGH,CAAK,EAAGC,IAE3DL,EAAA,cAACyB,EAAA,CAAc,KAAMnB,EAAM,SAAUC,GACnCP,EAAA,cAACD,EAAA,CAAY,GAAGK,EAAM,IAAKC,CAAAA,CAAK,CAClC,CAEH,EAEUqB,EAAQ,OAAO,OAAOF,EAAgB,CACjD,KAAMD,EACN,KAAMF,CACR,CAAC,EAEDG,EAAe,YAAc"}
+{"version":3,"file":"Badge.js","sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { styled, Theme } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\n\nimport {\n  colorSchemes as badgeColorSchemes,\n  badgeSemanticNames\n} from './Badge.colorscheme.config'\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\n\nconst StyledBadge = styled(Flex, {\n  base: [\n    'justify-center',\n    'items-center',\n    'rounded-sm',\n    'min-w-none',\n    'border',\n    'border-white',\n    'font-body',\n    '*:not-last:mr-1'\n  ],\n  variants: {\n    emphasis: {\n      white: ['text-(--text-on-white)', 'bg-white'],\n      subtle: ['text-(--text-subtle)', 'bg-(--background-subtle)'],\n      bold: ['text-(--text-bold)', 'bg-(--background-bold)']\n    },\n    size: {\n      xs: ['px-1'],\n      sm: ['px-1', 'py-0.5'],\n      md: ['px-2', 'py-1']\n    },\n\n    isClickable: {\n      true: ['cursor-pointer']\n    },\n    highlighted: {\n      true: []\n    }\n  },\n  compoundVariants: [\n    {\n      isClickable: true,\n      emphasis: 'white',\n      class: [\n        'hover:text-(--text-on-white)',\n        'hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n      ]\n    },\n    {\n      isClickable: true,\n      emphasis: 'subtle',\n      class: [\n        'hover:bg-(--background-subtle-hover)',\n        'hover:text-(--text-subtle-hover)'\n      ]\n    },\n    {\n      isClickable: true,\n      emphasis: 'bold',\n      class: ['hover:bg-(--background-bold-hover)', 'hover:text-(--text-bold)']\n    },\n    {\n      emphasis: 'white',\n      highlighted: true,\n      class: [\n        'text-(--text-on-white)',\n        'bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n      ]\n    },\n    {\n      emphasis: 'subtle',\n      highlighted: true,\n      class: ['text-(--text-subtle-hover)', '(--bg-background-subtle-hover)']\n    },\n    {\n      emphasis: 'bold',\n      highlighted: true,\n      class: ['text-(--text-bold)', 'bg-(--background-bold-hover)']\n    }\n  ]\n})\n\nexport type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {\n  theme?: keyof typeof badgeColorSchemes\n  overflow?: React.ComponentProps<typeof BadgeText>['overflow']\n}\n\ntype TBadgeInnerProps = Omit<TBadgeProps, 'size' | 'overflow'>\n\nconst BadgeInner = React.forwardRef<HTMLDivElement, TBadgeInnerProps>(\n  ({ theme = 'info', emphasis = 'subtle', children, ...rest }, ref) => {\n    const { size, overflow, isOverflowing } = React.useContext(BadgeContext)\n    const [badgeElRef, setBadgeElRef] = useCallbackRefState()\n    React.useImperativeHandle(ref, () => badgeElRef as HTMLDivElement)\n\n    const label = badgeElRef?.textContent\n\n    const isInfoOnly = badgeSemanticNames.includes(theme)\n\n    const isClickable =\n      Object.keys(rest).includes('onClick') ||\n      Object.keys(rest).includes('href')\n\n    return (\n      <OptionalTooltipWrapper\n        hasTooltip={overflow === 'ellipsis' && isOverflowing}\n        label={label}\n      >\n        <Theme theme={badgeColorSchemes[theme]}>\n          <StyledBadge\n            role=\"status\"\n            emphasis={emphasis}\n            size={size}\n            {...rest}\n            ref={setBadgeElRef}\n            isClickable={isClickable && !isInfoOnly}\n          >\n            {React.Children.map(children, (child) => {\n              if (typeof child === 'string' || typeof child === 'number') {\n                return <BadgeText>{child}</BadgeText>\n              }\n              if (React.isValidElement(child) && child.type === Icon) {\n                return <BadgeIcon {...child.props} />\n              }\n              return child\n            })}\n          </StyledBadge>\n        </Theme>\n      </OptionalTooltipWrapper>\n    )\n  }\n)\n\nconst BadgeComponent = React.forwardRef<HTMLDivElement, TBadgeProps>(\n  ({ size = 'sm', overflow = 'wrap', ...rest }, ref) => {\n    return (\n      <BadgeProvider size={size} overflow={overflow}>\n        <BadgeInner {...rest} ref={ref} />\n      </BadgeProvider>\n    )\n  }\n)\n\nexport const Badge = Object.assign(BadgeComponent, {\n  Icon: BadgeIcon,\n  Text: BadgeText\n})\n\nBadgeComponent.displayName = 'Badge'\n"],"names":["StyledBadge","styled","Flex","BadgeInner","React","theme","emphasis","children","rest","ref","size","overflow","isOverflowing","BadgeContext","badgeElRef","setBadgeElRef","useCallbackRefState","label","isInfoOnly","badgeSemanticNames","isClickable","OptionalTooltipWrapper","Theme","badgeColorSchemes","child","BadgeText","Icon","BadgeIcon","BadgeComponent","BadgeProvider","Badge"],"mappings":"okBAgBA,MAAMA,EAAcC,EAAOC,EAAM,CAC/B,KAAM,CACJ,iBACA,eACA,aACA,aACA,SACA,eACA,YACA,iBACF,EACA,SAAU,CACR,SAAU,CACR,MAAO,CAAC,yBAA0B,UAAU,EAC5C,OAAQ,CAAC,uBAAwB,0BAA0B,EAC3D,KAAM,CAAC,qBAAsB,wBAAwB,CACvD,EACA,KAAM,CACJ,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,OAAQ,QAAQ,EACrB,GAAI,CAAC,OAAQ,MAAM,CACrB,EAEA,YAAa,CACX,KAAM,CAAC,gBAAgB,CACzB,EACA,YAAa,CACX,KAAM,CAAA,CACR,CACF,EACA,iBAAkB,CAChB,CACE,YAAa,GACb,SAAU,QACV,MAAO,CACL,+BACA,iEACF,CACF,EACA,CACE,YAAa,GACb,SAAU,SACV,MAAO,CACL,uCACA,kCACF,CACF,EACA,CACE,YAAa,GACb,SAAU,OACV,MAAO,CAAC,qCAAsC,0BAA0B,CAC1E,EACA,CACE,SAAU,QACV,YAAa,GACb,MAAO,CACL,yBACA,2DACF,CACF,EACA,CACE,SAAU,SACV,YAAa,GACb,MAAO,CAAC,6BAA8B,gCAAgC,CACxE,EACA,CACE,SAAU,OACV,YAAa,GACb,MAAO,CAAC,qBAAsB,8BAA8B,CAC9D,CACF,CACF,CAAC,EASKC,EAAaC,EAAM,WACvB,CAAC,CAAE,MAAAC,EAAQ,OAAQ,SAAAC,EAAW,SAAU,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAAQ,CACnE,KAAM,CAAE,KAAAC,EAAM,SAAAC,EAAU,cAAAC,CAAc,EAAIR,EAAM,WAAWS,CAAY,EACjE,CAACC,EAAYC,CAAa,EAAIC,EAAoB,EACxDZ,EAAM,oBAAoBK,EAAK,IAAMK,CAA4B,EAEjE,MAAMG,EAAQH,GAAA,YAAAA,EAAY,YAEpBI,EAAaC,EAAmB,SAASd,CAAK,EAE9Ce,EACJ,OAAO,KAAKZ,CAAI,EAAE,SAAS,SAAS,GACpC,OAAO,KAAKA,CAAI,EAAE,SAAS,MAAM,EAEnC,OACEJ,EAAA,cAACiB,EAAA,CACC,WAAYV,IAAa,YAAcC,EACvC,MAAOK,CAEPb,EAAAA,EAAA,cAACkB,EAAA,CAAM,MAAOC,EAAkBlB,CAAK,GACnCD,EAAA,cAACJ,EAAA,CACC,KAAK,SACL,SAAUM,EACV,KAAMI,EACL,GAAGF,EACJ,IAAKO,EACL,YAAaK,GAAe,CAACF,CAE5Bd,EAAAA,EAAM,SAAS,IAAIG,EAAWiB,GACzB,OAAOA,GAAU,UAAY,OAAOA,GAAU,SACzCpB,EAAA,cAACqB,EAAA,KAAWD,CAAM,EAEvBpB,EAAM,eAAeoB,CAAK,GAAKA,EAAM,OAASE,EACzCtB,EAAA,cAACuB,EAAA,CAAW,GAAGH,EAAM,KAAA,CAAO,EAE9BA,CACR,CACH,CACF,CACF,CAEJ,CACF,EAEMI,EAAiBxB,EAAM,WAC3B,CAAC,CAAE,KAAAM,EAAO,KAAM,SAAAC,EAAW,OAAQ,GAAGH,CAAK,EAAGC,IAE1CL,EAAA,cAACyB,EAAA,CAAc,KAAMnB,EAAM,SAAUC,GACnCP,EAAA,cAACD,EAAA,CAAY,GAAGK,EAAM,IAAKC,CAAAA,CAAK,CAClC,CAGN,EAEaqB,EAAQ,OAAO,OAAOF,EAAgB,CACjD,KAAMD,EACN,KAAMF,CACR,CAAC,EAEDG,EAAe,YAAc"}

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

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

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+declare const StyledBadgeText: React.ForwardRefExoticComponent<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>>;
+type TBadgeTextProps = React.ComponentProps<typeof StyledBadgeText>;
+export declare const BadgeText: ({ children, ...rest }: TBadgeTextProps) => JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,6 @@
+export declare const Banner: {
+    ({ emphasis, size, children }: React.PropsWithChildren<import("./BannerContext").TBannerProviderProps>): import("react").JSX.Element;
+    displayName: string;
+} & {
+    Dismiss: ({ asChild, ...rest }: React.PropsWithChildren<import("../dismissible/DismissibleTrigger").IDismissibleTriggerProps>) => import("react").JSX.Element;
+};

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { TcolorScheme } from '../../experiments/color-scheme';
+import { Dismissible } from '../dismissible';
+declare const StyledBannerContainer: 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"> & {
+    emphasis?: ("bold" | "subtle" | "minimal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "subtle" | "minimal">>) | undefined;
+    size?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type TBannerContainerProps = React.ComponentProps<typeof StyledBannerContainer> & {
+    colorScheme?: TcolorScheme;
+} & React.ComponentProps<typeof Dismissible>;
+export declare const BannerContainer: ({ colorScheme, onDismiss, dismissed, ...props }: TBannerContainerProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { TBannerContainerProps } from './BannerContainer';
+export type TBannerProviderProps = Pick<TBannerContainerProps, 'size' | 'emphasis'>;
+type TBannerContextValue = TBannerProviderProps & {
+    hasDismiss: boolean;
+    setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export declare const BannerContext: React.Context<TBannerContextValue>;
+export declare const useBannerContext: () => TBannerContextValue;
+export declare const BannerProvider: {
+    ({ emphasis, size, children }: React.PropsWithChildren<TBannerProviderProps>): React.JSX.Element;
+    displayName: string;
+};
+export {};

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

@@ -0,0 +1,321 @@
+import * as React from 'react';
+import { BannerRegularContainer } from './BannerRegularContainer';
+export declare const BannerRegular: {
+    ({ colorScheme, size, emphasis, onDismiss, ...rest }: React.ComponentProps<typeof BannerRegularContainer>): React.JSX.Element;
+    displayName: string;
+} & {
+    Content: {
+        (props: React.ComponentProps<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" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
+        } & {
+            as?: React.ElementType;
+        }, "ref"> & React.RefAttributes<HTMLDivElement>>>): React.JSX.Element;
+        displayName: string;
+    };
+    Heading: {
+        (props: React.ComponentProps<typeof import("../..").Heading>): React.JSX.Element;
+        displayName: string;
+    };
+    Text: {
+        (props: React.ComponentProps<typeof import("../..").Text>): React.JSX.Element;
+        displayName: string;
+    };
+    Actions: {
+        ({ children, ...props }: React.ComponentProps<typeof import("../..").Flex>): React.JSX.Element;
+        displayName: string;
+    };
+    Image: {
+        (props: React.ComponentProps<typeof import("../..").Image>): React.JSX.Element;
+        displayName: string;
+    };
+    Button: {
+        (props: React.ComponentProps<typeof import("../..").Button>): React.JSX.Element;
+        displayName: string;
+    };
+    Dismiss: {
+        ({ label, ...rest }: {
+            theme?: ("warning" | "success" | "neutral" | "primary" | "white" | "primaryDark" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "warning" | "success" | "neutral" | "primary" | "white" | "primaryDark" | "danger">>) | undefined;
+            form?: string | undefined | undefined;
+            label: string;
+            slot?: string | undefined | undefined;
+            style?: React.CSSProperties | undefined;
+            title?: string | undefined | undefined;
+            value?: string | number | readonly string[] | undefined;
+            ref?: React.Ref<HTMLButtonElement> | undefined;
+            className?: string | undefined | undefined;
+            color?: string | undefined | undefined;
+            id?: string | undefined | undefined;
+            lang?: string | undefined | undefined;
+            name?: string | undefined | undefined;
+            type?: "submit" | "reset" | "button" | undefined | undefined;
+            role?: React.AriaRole | undefined;
+            tabIndex?: number | undefined | undefined;
+            "aria-activedescendant"?: string | undefined | undefined;
+            "aria-atomic"?: (boolean | "true" | "false") | undefined;
+            "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+            "aria-busy"?: (boolean | "true" | "false") | undefined;
+            "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+            "aria-colcount"?: number | undefined | undefined;
+            "aria-colindex"?: number | undefined | undefined;
+            "aria-colspan"?: number | undefined | undefined;
+            "aria-controls"?: string | undefined | undefined;
+            "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+            "aria-describedby"?: string | undefined | undefined;
+            "aria-details"?: string | undefined | undefined;
+            "aria-disabled"?: (boolean | "true" | "false") | undefined;
+            "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+            "aria-errormessage"?: string | undefined | undefined;
+            "aria-expanded"?: (boolean | "true" | "false") | undefined;
+            "aria-flowto"?: string | undefined | undefined;
+            "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+            "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+            "aria-hidden"?: (boolean | "true" | "false") | undefined;
+            "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+            "aria-keyshortcuts"?: string | undefined | undefined;
+            "aria-label"?: string | undefined | undefined;
+            "aria-labelledby"?: string | undefined | undefined;
+            "aria-level"?: number | undefined | undefined;
+            "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+            "aria-modal"?: (boolean | "true" | "false") | undefined;
+            "aria-multiline"?: (boolean | "true" | "false") | undefined;
+            "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+            "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+            "aria-owns"?: string | undefined | undefined;
+            "aria-placeholder"?: string | undefined | undefined;
+            "aria-posinset"?: number | undefined | undefined;
+            "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+            "aria-readonly"?: (boolean | "true" | "false") | undefined;
+            "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+            "aria-required"?: (boolean | "true" | "false") | undefined;
+            "aria-roledescription"?: string | undefined | undefined;
+            "aria-rowcount"?: number | undefined | undefined;
+            "aria-rowindex"?: number | undefined | undefined;
+            "aria-rowspan"?: number | undefined | undefined;
+            "aria-selected"?: (boolean | "true" | "false") | undefined;
+            "aria-setsize"?: number | undefined | undefined;
+            "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+            "aria-valuemax"?: number | undefined | undefined;
+            "aria-valuemin"?: number | undefined | undefined;
+            "aria-valuenow"?: number | undefined | undefined;
+            "aria-valuetext"?: string | undefined | undefined;
+            dangerouslySetInnerHTML?: {
+                __html: string | TrustedHTML;
+            } | undefined | undefined;
+            onCopy?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
+            onCopyCapture?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
+            onCut?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
+            onCutCapture?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
+            onPaste?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
+            onPasteCapture?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
+            onCompositionEnd?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
+            onCompositionEndCapture?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
+            onCompositionStart?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
+            onCompositionStartCapture?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
+            onCompositionUpdate?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
+            onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
+            onFocus?: React.FocusEventHandler<HTMLButtonElement> | undefined;
+            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;
+            onBeforeInput?: React.FormEventHandler<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;
+            onLoad?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onLoadCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onError?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onErrorCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
+            onKeyDownCapture?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
+            onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
+            onKeyPressCapture?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
+            onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
+            onKeyUpCapture?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
+            onAbort?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onAbortCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onCanPlay?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onCanPlayCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onCanPlayThrough?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onCanPlayThroughCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onDurationChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onDurationChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onEmptied?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onEmptiedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onEncrypted?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onEncryptedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onEnded?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onEndedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onLoadedData?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onLoadedDataCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onLoadedMetadata?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onLoadedMetadataCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onLoadStart?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onLoadStartCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onPause?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onPauseCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onPlay?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onPlayCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onPlaying?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onPlayingCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onProgress?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onProgressCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onRateChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onRateChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onSeeked?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onSeekedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onSeeking?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onSeekingCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onStalled?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onStalledCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onSuspend?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onSuspendCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onTimeUpdate?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onTimeUpdateCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onVolumeChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onVolumeChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onWaiting?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onWaitingCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onAuxClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+            onAuxClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+            onClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+            onContextMenu?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+            onContextMenuCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+            onDoubleClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+            onDoubleClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+            onDrag?: React.DragEventHandler<HTMLButtonElement> | undefined;
+            onDragCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+            onDragEnd?: React.DragEventHandler<HTMLButtonElement> | undefined;
+            onDragEndCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+            onDragEnter?: React.DragEventHandler<HTMLButtonElement> | undefined;
+            onDragEnterCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+            onDragExit?: React.DragEventHandler<HTMLButtonElement> | undefined;
+            onDragExitCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+            onDragLeave?: React.DragEventHandler<HTMLButtonElement> | undefined;
+            onDragLeaveCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+            onDragOver?: React.DragEventHandler<HTMLButtonElement> | undefined;
+            onDragOverCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+            onDragStart?: React.DragEventHandler<HTMLButtonElement> | undefined;
+            onDragStartCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+            onDrop?: React.DragEventHandler<HTMLButtonElement> | undefined;
+            onDropCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+            onMouseDown?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+            onMouseDownCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+            onMouseEnter?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+            onMouseLeave?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+            onMouseMove?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+            onMouseMoveCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+            onMouseOut?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+            onMouseOutCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+            onMouseOver?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+            onMouseOverCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+            onMouseUp?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+            onMouseUpCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+            onSelect?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onSelectCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+            onTouchCancel?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+            onTouchCancelCapture?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+            onTouchEnd?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+            onTouchEndCapture?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+            onTouchMove?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+            onTouchMoveCapture?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+            onTouchStart?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+            onTouchStartCapture?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+            onPointerDown?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onPointerDownCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onPointerMove?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onPointerMoveCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onPointerUp?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onPointerUpCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onPointerCancel?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onPointerCancelCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onPointerEnter?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onPointerEnterCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onPointerLeave?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onPointerLeaveCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onPointerOver?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onPointerOverCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onPointerOut?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onPointerOutCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onGotPointerCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onLostPointerCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+            onScroll?: React.UIEventHandler<HTMLButtonElement> | undefined;
+            onScrollCapture?: React.UIEventHandler<HTMLButtonElement> | undefined;
+            onWheel?: React.WheelEventHandler<HTMLButtonElement> | undefined;
+            onWheelCapture?: React.WheelEventHandler<HTMLButtonElement> | undefined;
+            onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+            onAnimationStartCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+            onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+            onAnimationEndCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+            onAnimationIteration?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+            onAnimationIterationCapture?: React.AnimationEventHandler<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;
+            suppressHydrationWarning?: boolean | undefined | undefined;
+            accessKey?: string | undefined | undefined;
+            autoFocus?: boolean | undefined | undefined;
+            contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+            contextMenu?: string | undefined | undefined;
+            dir?: string | undefined | undefined;
+            draggable?: (boolean | "true" | "false") | undefined;
+            hidden?: boolean | undefined | undefined;
+            nonce?: string | undefined | undefined;
+            placeholder?: string | undefined | undefined;
+            spellCheck?: (boolean | "true" | "false") | undefined;
+            translate?: "yes" | "no" | undefined | undefined;
+            radioGroup?: string | undefined | undefined;
+            about?: string | undefined | undefined;
+            content?: string | undefined | undefined;
+            datatype?: string | undefined | undefined;
+            inlist?: any;
+            prefix?: string | undefined | undefined;
+            property?: string | undefined | undefined;
+            rel?: string | undefined | undefined;
+            resource?: string | undefined | undefined;
+            rev?: string | undefined | undefined;
+            typeof?: string | undefined | undefined;
+            vocab?: string | undefined | undefined;
+            autoCapitalize?: 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;
+            as?: ((boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null) & React.ElementType) | undefined;
+            disabled?: boolean | undefined | undefined;
+            formAction?: string | undefined | undefined;
+            formEncType?: string | undefined | undefined;
+            formMethod?: string | undefined | undefined;
+            formNoValidate?: boolean | undefined | undefined;
+            formTarget?: string | undefined | undefined;
+            size?: ("sm" | "md" | "lg" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs">>) | undefined;
+            appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
+            hasTooltip?: boolean | undefined;
+            tooltipSide?: "left" | "right" | "top" | "bottom" | undefined;
+            isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+        }): React.JSX.Element;
+        displayName: string;
+    };
+};

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Flex } from '../../flex';
+export declare const BannerRegularActions: {
+    ({ children, ...props }: React.ComponentProps<typeof Flex>): React.JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Button } from '../../button';
+export declare const BannerRegularButton: {
+    (props: React.ComponentProps<typeof Button>): React.JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { BannerContainer } from '../BannerContainer';
+type TBannerRegularContainerProps = Omit<React.ComponentProps<typeof BannerContainer>, 'direction' | 'align' | 'wrap' | 'gap' | 'justify'>;
+export declare const BannerRegularContainer: (props: TBannerRegularContainerProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+declare const Container: 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" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const BannerRegularContent: {
+    (props: React.ComponentProps<typeof Container>): React.JSX.Element;
+    displayName: string;
+};
+export {};

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+declare const StyledDismiss: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<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>, "children" | "label" | "as" | keyof import("../../../types").NavigatorActions | "hasTooltip" | "tooltipSide"> & {
+    as?: string | React.ReactNode;
+    children: React.ReactNode;
+    label: string;
+} & Omit<import("../../../utilities/optional-tooltip-wrapper").TOptionalTooltipWrapperProps, "label"> & import("../../../types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, never> & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type BannerRegularDismissProps = Omit<React.ComponentProps<typeof StyledDismiss>, 'children' | 'onClick' | 'href'>;
+export declare const BannerRegularDismiss: {
+    ({ label, ...rest }: BannerRegularDismissProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Heading } from '../../heading';
+export declare const BannerRegularHeading: {
+    (props: React.ComponentProps<typeof Heading>): React.JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Image } from '../../image';
+export declare const BannerRegularImage: {
+    (props: React.ComponentProps<typeof Image>): React.JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Text } from '../../text';
+export declare const BannerRegularText: {
+    (props: React.ComponentProps<typeof Text>): React.JSX.Element;
+    displayName: string;
+};

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

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