@atom-learning/components 6.2.2 → 6.4.0

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

@@ -1,16 +1,8 @@
 import * as React from 'react';
-import { TcolorScheme } from '../../experiments/color-scheme';
+import { TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
 import { Dismissible } from '../dismissible';
-declare const StyledBannerContainer: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "direction" | "align" | "wrap" | "justify" | "gap"> & {
-    direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
-    wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
-    justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
-    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;
+declare const StyledBannerContainer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
 }, "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/BannerContainer.js

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

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

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

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

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { TBannerContainerProps } from './BannerContainer';
+type Breakpoint = '@initial' | '@sm' | '@md' | '@lg' | '@xl';
+type ResponsiveSize = 'sm' | 'md' | Partial<Record<Breakpoint, 'sm' | 'md'>>;
 export type TBannerProviderProps = {
-    size?: TBannerContainerProps['size'];
+    size?: ResponsiveSize;
     emphasis?: TBannerContainerProps['emphasis'];
 };
 type TBannerContextValue = TBannerProviderProps & {

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

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

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

@@ -23,7 +23,7 @@ export declare const BannerRegular: {
         displayName: string;
     };
     Actions: {
-        ({ children, ...props }: React.ComponentProps<typeof import("../..").Flex>): React.JSX.Element;
+        ({ children, className, ...props }: React.PropsWithChildren<React.ComponentProps<"div">>): React.JSX.Element;
         displayName: string;
     };
     Image: {
@@ -36,7 +36,13 @@ export declare const BannerRegular: {
     };
     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;
+            appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
+            content?: string | undefined | undefined;
+            size?: ("sm" | "md" | "lg" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs">>) | undefined;
+            translate?: "yes" | "no" | undefined | undefined;
+            color?: string | undefined | undefined;
+            prefix?: string | undefined | undefined;
+            theme?: ("primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger">>) | undefined;
             form?: string | undefined | undefined;
             label: string;
             slot?: string | undefined | undefined;
@@ -44,7 +50,6 @@ export declare const BannerRegular: {
             title?: string | undefined | 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;
@@ -268,7 +273,7 @@ export declare const BannerRegular: {
             suppressHydrationWarning?: boolean | undefined | undefined;
             accessKey?: string | undefined | undefined;
             autoFocus?: boolean | undefined | undefined;
-            contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+            contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
             contextMenu?: string | undefined | undefined;
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
@@ -276,13 +281,10 @@ export declare const BannerRegular: {
             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;
@@ -302,18 +304,16 @@ export declare const BannerRegular: {
             unselectable?: "on" | "off" | undefined | undefined;
             inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
             is?: string | undefined | undefined;
-            as?: React.ElementType | undefined;
             disabled?: boolean | undefined | undefined;
+            value?: string | number | readonly string[] | undefined;
+            as?: React.ElementType | undefined;
             formAction?: string | undefined | undefined;
             formEncType?: string | undefined | undefined;
             formMethod?: string | undefined | undefined;
             formNoValidate?: boolean | undefined | undefined;
             formTarget?: string | undefined | undefined;
-            value?: string | number | readonly string[] | 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;
+            tooltipSide?: "bottom" | "left" | "right" | "top" | 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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"BannerRegularActions.js","sources":["../../../../src/components/banner/banner-regular/BannerRegularActions.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Flex } from '../../flex'\nimport { useBannerContext } from '../BannerContext'\nimport { BannerRegularButton } from './BannerRegularButton'\n\nconst MAX_ALLOWED_CHILDREN = 2\n\nconst toGap = {\n  sm: 2,\n  md: 4\n}\n\nconst toDirection = {\n  sm: 'column',\n  md: 'row'\n}\n\nexport const BannerRegularActions = ({\n  children,\n  ...props\n}: React.ComponentProps<typeof Flex>) => {\n  const { size } = useBannerContext()\n\n  const gap = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => toGap[s]),\n    [size]\n  )\n\n  const direction = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => toDirection[s]),\n    [size]\n  )\n\n  invariant(\n    React.Children.count(children) <= MAX_ALLOWED_CHILDREN,\n    `A maximum of ${MAX_ALLOWED_CHILDREN} ${BannerRegularButton.displayName} component(s) are permitted as children of ${BannerRegularActions.displayName}`\n  )\n\n  return (\n    <Flex gap={gap} direction={direction} {...props}>\n      {React.Children.map(children, (child, index) => {\n        // if child is undefined or null, React.isValidElement returns false and hence error is thrown.\n        // This line will prevent that from happening\n        if (child == null) return child\n\n        if (!React.isValidElement(child)) {\n          throw new Error(\n            `Child passed to ${BannerRegularActions.displayName} is not a valid element`\n          )\n        }\n\n        invariant(\n          child.type === BannerRegularButton,\n          `Children of type ${child?.type} aren't permitted. Only an ${BannerRegularButton.displayName} component is allowed in ${BannerRegularActions.displayName}`\n        )\n\n        const propsToInject: Partial<\n          React.ComponentProps<typeof BannerRegularButton>\n        > = {\n          // Override button appearance - make the second button outlined\n          appearance: index > 0 ? 'outline' : undefined\n        }\n\n        return React.cloneElement(\n          child as React.ReactElement<\n            React.ComponentProps<typeof BannerRegularButton>\n          >,\n          propsToInject\n        )\n      })}\n    </Flex>\n  )\n}\n\nBannerRegularActions.displayName = 'BannerRegularActions'\n"],"names":["MAX_ALLOWED_CHILDREN","toGap","toDirection","BannerRegularActions","children","props","size","useBannerContext","gap","React","overrideStyledVariantValue","s","direction","invariant","BannerRegularButton","Flex","child","index","propsToInject"],"mappings":"6UASA,MAAMA,EAAuB,EAEvBC,EAAQ,CACZ,GAAI,EACJ,GAAI,CACN,EAEMC,EAAc,CAClB,GAAI,SACJ,GAAI,KACN,EAEaC,EAAuB,CAAC,CACnC,SAAAC,EACA,GAAGC,CACL,IAAyC,CACvC,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAAA,EAEXC,EAAMC,EAAM,QAChB,IAAMC,EAA2BJ,EAAOK,GAAMV,EAAMU,CAAC,CAAC,EACtD,CAACL,CAAI,CACP,EAEMM,EAAYH,EAAM,QACtB,IAAMC,EAA2BJ,EAAOK,GAAMT,EAAYS,CAAC,CAAC,EAC5D,CAACL,CAAI,CACP,EAEA,OAAAO,EACEJ,EAAM,SAAS,MAAML,CAAQ,GAAKJ,EAClC,gBAAgBA,CAAoB,IAAIc,EAAoB,WAAW,8CAA8CX,EAAqB,WAAW,EACvJ,EAGEM,EAAA,cAACM,EAAA,CAAK,IAAKP,EAAK,UAAWI,EAAY,GAAGP,GACvCI,EAAM,SAAS,IAAIL,EAAU,CAACY,EAAOC,IAAU,CAG9C,GAAID,GAAS,KAAM,OAAOA,EAE1B,GAAI,CAACP,EAAM,eAAeO,CAAK,EAC7B,MAAM,IAAI,MACR,mBAAmBb,EAAqB,WAAW,yBACrD,EAGFU,EACEG,EAAM,OAASF,EACf,oBAAoBE,GAAA,KAAA,OAAAA,EAAO,IAAI,8BAA8BF,EAAoB,WAAW,4BAA4BX,EAAqB,WAAW,EAC1J,EAEA,MAAMe,EAEF,CAEF,WAAYD,EAAQ,EAAI,UAAY,MACtC,EAEA,OAAOR,EAAM,aACXO,EAGAE,CACF,CACF,CAAC,CACH,CAEJ,EAEAf,EAAqB,YAAc"}
+{"version":3,"file":"BannerRegularActions.js","sources":["../../../../src/components/banner/banner-regular/BannerRegularActions.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport invariant from 'invariant'\nimport * as React from 'react'\n\nimport { useBannerContext } from '../BannerContext'\nimport { BannerRegularButton } from './BannerRegularButton'\n\nconst MAX_ALLOWED_CHILDREN = 2\n\nconst toGap = {\n  sm: 'gap-2',\n  md: 'gap-4'\n}\n\nconst toDirection = {\n  sm: 'flex-col',\n  md: 'flex-row'\n}\n\nexport const BannerRegularActions = ({\n  children,\n  className,\n  ...props\n}: React.PropsWithChildren<React.ComponentProps<'div'>>) => {\n  const { size } = useBannerContext()\n\n  const gap = React.useMemo(() => {\n    if (typeof size === 'string') {\n      return toGap[size]\n    }\n    return 'gap-2 md:gap-4'\n  }, [size])\n\n  const direction = React.useMemo(() => {\n    if (typeof size === 'string') {\n      return toDirection[size]\n    }\n    return 'flex-col md:flex-row'\n  }, [size])\n\n  invariant(\n    React.Children.count(children) <= MAX_ALLOWED_CHILDREN,\n    `A maximum of ${MAX_ALLOWED_CHILDREN} ${BannerRegularButton.displayName} component(s) are permitted as children of ${BannerRegularActions.displayName}`\n  )\n\n  return (\n    <div className={clsx('flex', gap, direction, className)} {...props}>\n      {React.Children.map(children, (child, index) => {\n        // if child is undefined or null, React.isValidElement returns false and hence error is thrown.\n        // This line will prevent that from happening\n        if (child == null) return child\n\n        if (!React.isValidElement(child)) {\n          throw new Error(\n            `Child passed to ${BannerRegularActions.displayName} is not a valid element`\n          )\n        }\n\n        invariant(\n          child.type === BannerRegularButton,\n          `Children of type ${child?.type} aren't permitted. Only an ${BannerRegularButton.displayName} component is allowed in ${BannerRegularActions.displayName}`\n        )\n\n        const propsToInject: Partial<\n          React.ComponentProps<typeof BannerRegularButton>\n        > = {\n          // Override button appearance - make the second button outlined\n          appearance: index > 0 ? 'outline' : undefined\n        }\n\n        return React.cloneElement(\n          child as React.ReactElement<\n            React.ComponentProps<typeof BannerRegularButton>\n          >,\n          propsToInject\n        )\n      })}\n    </div>\n  )\n}\n\nBannerRegularActions.displayName = 'BannerRegularActions'\n"],"names":["MAX_ALLOWED_CHILDREN","toGap","toDirection","BannerRegularActions","children","className","props","size","useBannerContext","gap","React","direction","invariant","BannerRegularButton","clsx","child","index","propsToInject"],"mappings":"2LAOA,MAAMA,EAAuB,EAEvBC,EAAQ,CACZ,GAAI,QACJ,GAAI,OACN,EAEMC,EAAc,CAClB,GAAI,WACJ,GAAI,UACN,EAEaC,EAAuB,CAAC,CACnC,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA4D,CAC1D,KAAM,CAAE,KAAAC,CAAK,EAAIC,IAEXC,EAAMC,EAAM,QAAQ,IACpB,OAAOH,GAAS,SACXN,EAAMM,CAAI,EAEZ,iBACN,CAACA,CAAI,CAAC,EAEHI,EAAYD,EAAM,QAAQ,IAC1B,OAAOH,GAAS,SACXL,EAAYK,CAAI,EAElB,uBACN,CAACA,CAAI,CAAC,EAET,OAAAK,EACEF,EAAM,SAAS,MAAMN,CAAQ,GAAKJ,EAClC,gBAAgBA,CAAoB,IAAIa,EAAoB,WAAW,8CAA8CV,EAAqB,WAAW,EACvJ,EAGEO,EAAA,cAAC,MAAI,CAAA,UAAWI,EAAK,OAAQL,EAAKE,EAAWN,CAAS,EAAI,GAAGC,CAAAA,EAC1DI,EAAM,SAAS,IAAIN,EAAU,CAACW,EAAOC,IAAU,CAG9C,GAAID,GAAS,KAAM,OAAOA,EAE1B,GAAI,CAACL,EAAM,eAAeK,CAAK,EAC7B,MAAM,IAAI,MACR,mBAAmBZ,EAAqB,WAAW,yBACrD,EAGFS,EACEG,EAAM,OAASF,EACf,oBAAoBE,GAAA,KAAA,OAAAA,EAAO,IAAI,8BAA8BF,EAAoB,WAAW,4BAA4BV,EAAqB,WAAW,EAC1J,EAEA,MAAMc,EAEF,CAEF,WAAYD,EAAQ,EAAI,UAAY,MACtC,EAEA,OAAON,EAAM,aACXK,EAGAE,CACF,CACF,CAAC,CACH,CAEJ,EAEAd,EAAqB,YAAc"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"BannerRegularButton.js","sources":["../../../../src/components/banner/banner-regular/BannerRegularButton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Button } from '../../button'\nimport { useBannerContext } from '../BannerContext'\n\nexport const BannerRegularButton = (\n  props: React.ComponentProps<typeof Button>\n) => {\n  const { emphasis, size } = useBannerContext()\n\n  const fullWidth = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => s === 'sm'),\n    [size]\n  )\n\n  return (\n    <Button\n      size={size}\n      fullWidth={fullWidth}\n      theme={emphasis === 'bold' ? 'neutral' : 'primary'}\n      {...props}\n    />\n  )\n}\n\nBannerRegularButton.displayName = 'BannerRegularButton'\n"],"names":["BannerRegularButton","props","emphasis","size","useBannerContext","fullWidth","React","overrideStyledVariantValue","s","Button"],"mappings":"2PAOa,MAAAA,EACXC,GACG,CACH,KAAM,CAAE,SAAAC,EAAU,KAAAC,CAAK,EAAIC,EAAAA,EAErBC,EAAYC,EAAM,QACtB,IAAMC,EAA2BJ,EAAOK,GAAMA,IAAM,IAAI,EACxD,CAACL,CAAI,CACP,EAEA,OACEG,EAAA,cAACG,EAAA,CACC,KAAMN,EACN,UAAWE,EACX,MAAOH,IAAa,OAAS,UAAY,UACxC,GAAGD,CACN,CAAA,CAEJ,EAEAD,EAAoB,YAAc"}
+{"version":3,"file":"BannerRegularButton.js","sources":["../../../../src/components/banner/banner-regular/BannerRegularButton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Button } from '../../button/Button'\nimport { useBannerContext } from '../BannerContext'\n\nexport const BannerRegularButton = (\n  props: React.ComponentProps<typeof Button>\n) => {\n  const { emphasis, size } = useBannerContext()\n\n  const fullWidth = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => s === 'sm'),\n    [size]\n  )\n\n  return (\n    <Button\n      size={size}\n      fullWidth={fullWidth}\n      theme={emphasis === 'bold' ? 'neutral' : 'primary'}\n      {...props}\n    />\n  )\n}\n\nBannerRegularButton.displayName = 'BannerRegularButton'\n"],"names":["BannerRegularButton","props","emphasis","size","useBannerContext","fullWidth","React","overrideStyledVariantValue","s","Button"],"mappings":"2PAOa,MAAAA,EACXC,GACG,CACH,KAAM,CAAE,SAAAC,EAAU,KAAAC,CAAK,EAAIC,EAAAA,EAErBC,EAAYC,EAAM,QACtB,IAAMC,EAA2BJ,EAAOK,GAAMA,IAAM,IAAI,EACxD,CAACL,CAAI,CACP,EAEA,OACEG,EAAA,cAACG,EAAA,CACC,KAAMN,EACN,UAAWE,EACX,MAAOH,IAAa,OAAS,UAAY,UACxC,GAAGD,CACN,CAAA,CAEJ,EAEAD,EAAoB,YAAc"}

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

@@ -1,17 +1,17 @@
 import * as React from 'react';
 declare const StyledDismiss: React.ForwardRefExoticComponent<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" | "size" | "theme" | "isRounded"> & {
+    theme?: ("primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger">>) | undefined;
     appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
     size?: ("sm" | "md" | "lg" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs">>) | undefined;
     isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "children" | "label" | keyof import("../../../types").NavigatorActions | "hasTooltip" | "tooltipSide"> & {
+}, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../../../types/navigatorActions.types").NavigatorActions> & {
     children: React.ReactNode;
     label: string;
-} & Omit<import("../../../utilities/optional-tooltip-wrapper").TOptionalTooltipWrapperProps, "label"> & import("../../../types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, never> & {
+} & Omit<import("../../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper").TOptionalTooltipWrapperProps, "label"> & import("../../../types/navigatorActions.types").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/BannerRegularDismiss.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerRegularDismiss.js","sources":["../../../../src/components/banner/banner-regular/BannerRegularDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { ActionIcon } from '../../action-icon'\nimport { Icon } from '../../icon'\nimport { Banner } from '../Banner'\nimport { useBannerContext } from '../BannerContext'\n\nconst toActionIconSize = {\n  sm: 'md',\n  md: 'sm'\n}\n\nconst StyledDismiss = styled(ActionIcon, {\n  base: ['z-1', 'absolute', 'top-3', 'right-3']\n})\n\ntype BannerRegularDismissProps = Omit<\n  React.ComponentProps<typeof StyledDismiss>,\n  'children' | 'onClick' | 'href'\n>\n\nexport const BannerRegularDismiss = ({\n  label = 'dismiss',\n  ...rest\n}: BannerRegularDismissProps) => {\n  const { size, setHasDismiss } = useBannerContext()\n\n  React.useEffect(() => {\n    setHasDismiss(true)\n    return () => {\n      setHasDismiss(false)\n    }\n  }, [setHasDismiss])\n\n  const actionIconSize = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => toActionIconSize[s]),\n    [size]\n  )\n\n  return (\n    <Banner.Dismiss asChild>\n      <StyledDismiss\n        label={label}\n        size={actionIconSize}\n        hasTooltip={false}\n        isRounded\n        theme=\"neutral\"\n        appearance=\"solid\"\n        {...rest}\n      >\n        <Icon is={Close} />\n      </StyledDismiss>\n    </Banner.Dismiss>\n  )\n}\n\nBannerRegularDismiss.displayName = 'BannerRegularDismiss'\n"],"names":["toActionIconSize","StyledDismiss","styled","ActionIcon","BannerRegularDismiss","label","rest","size","setHasDismiss","useBannerContext","React","actionIconSize","overrideStyledVariantValue","s","Banner","Icon","Close"],"mappings":"ibAWA,MAAMA,EAAmB,CACvB,GAAI,KACJ,GAAI,IACN,EAEMC,EAAgBC,EAAOC,EAAY,CACvC,KAAM,CAAC,MAAO,WAAY,QAAS,SAAS,CAC9C,CAAC,EAOYC,EAAuB,CAAC,CACnC,MAAAC,EAAQ,UACR,GAAGC,CACL,IAAiC,CAC/B,KAAM,CAAE,KAAAC,EAAM,cAAAC,CAAc,EAAIC,EAEhCC,EAAAA,EAAM,UAAU,KACdF,EAAc,EAAI,EACX,IAAM,CACXA,EAAc,EAAK,CACrB,GACC,CAACA,CAAa,CAAC,EAElB,MAAMG,EAAiBD,EAAM,QAC3B,IAAME,EAA2BL,EAAOM,GAAMb,EAAiBa,CAAC,CAAC,EACjE,CAACN,CAAI,CACP,EAEA,OACEG,EAAA,cAACI,EAAO,QAAP,CAAe,QAAO,EACrBJ,EAAAA,EAAA,cAACT,EAAA,CACC,MAAOI,EACP,KAAMM,EACN,WAAY,GACZ,UAAS,GACT,MAAM,UACN,WAAW,QACV,GAAGL,CAEJI,EAAAA,EAAA,cAACK,EAAA,CAAK,GAAIC,CAAAA,CAAO,CACnB,CACF,CAEJ,EAEAZ,EAAqB,YAAc"}
+{"version":3,"file":"BannerRegularDismiss.js","sources":["../../../../src/components/banner/banner-regular/BannerRegularDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { ActionIcon } from '../../action-icon/ActionIcon'\nimport { Icon } from '../../icon/Icon'\nimport { Banner } from '../Banner'\nimport { useBannerContext } from '../BannerContext'\n\nconst toActionIconSize = {\n  sm: 'md',\n  md: 'sm'\n}\n\nconst StyledDismiss = styled(ActionIcon, {\n  base: ['z-1', 'absolute', 'top-3', 'right-3']\n})\n\ntype BannerRegularDismissProps = Omit<\n  React.ComponentProps<typeof StyledDismiss>,\n  'children' | 'onClick' | 'href'\n>\n\nexport const BannerRegularDismiss = ({\n  label = 'dismiss',\n  ...rest\n}: BannerRegularDismissProps) => {\n  const { size, setHasDismiss } = useBannerContext()\n\n  React.useEffect(() => {\n    setHasDismiss(true)\n    return () => {\n      setHasDismiss(false)\n    }\n  }, [setHasDismiss])\n\n  const actionIconSize = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => toActionIconSize[s]),\n    [size]\n  )\n\n  return (\n    <Banner.Dismiss asChild>\n      <StyledDismiss\n        label={label}\n        size={actionIconSize}\n        hasTooltip={false}\n        isRounded\n        theme=\"neutral\"\n        appearance=\"solid\"\n        {...rest}\n      >\n        <Icon is={Close} />\n      </StyledDismiss>\n    </Banner.Dismiss>\n  )\n}\n\nBannerRegularDismiss.displayName = 'BannerRegularDismiss'\n"],"names":["toActionIconSize","StyledDismiss","styled","ActionIcon","BannerRegularDismiss","label","rest","size","setHasDismiss","useBannerContext","React","actionIconSize","overrideStyledVariantValue","s","Banner","Icon","Close"],"mappings":"ibAWA,MAAMA,EAAmB,CACvB,GAAI,KACJ,GAAI,IACN,EAEMC,EAAgBC,EAAOC,EAAY,CACvC,KAAM,CAAC,MAAO,WAAY,QAAS,SAAS,CAC9C,CAAC,EAOYC,EAAuB,CAAC,CACnC,MAAAC,EAAQ,UACR,GAAGC,CACL,IAAiC,CAC/B,KAAM,CAAE,KAAAC,EAAM,cAAAC,CAAc,EAAIC,EAEhCC,EAAAA,EAAM,UAAU,KACdF,EAAc,EAAI,EACX,IAAM,CACXA,EAAc,EAAK,CACrB,GACC,CAACA,CAAa,CAAC,EAElB,MAAMG,EAAiBD,EAAM,QAC3B,IAAME,EAA2BL,EAAOM,GAAMb,EAAiBa,CAAC,CAAC,EACjE,CAACN,CAAI,CACP,EAEA,OACEG,EAAA,cAACI,EAAO,QAAP,CAAe,QAAO,EACrBJ,EAAAA,EAAA,cAACT,EAAA,CACC,MAAOI,EACP,KAAMM,EACN,WAAY,GACZ,UAAS,GACT,MAAM,UACN,WAAW,QACV,GAAGL,CAEJI,EAAAA,EAAA,cAACK,EAAA,CAAK,GAAIC,CAAAA,CAAO,CACnB,CACF,CAEJ,EAEAZ,EAAqB,YAAc"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"BannerRegularHeading.js","sources":["../../../../src/components/banner/banner-regular/BannerRegularHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Heading } from '../../heading'\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledHeading = styled(\n  Heading,\n  {\n    base: ['mb-4', 'text-(--banner-heading-color)'],\n    variants: {\n      containerSize: {\n        sm: [],\n        md: []\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 BannerRegularHeading = (\n  props: React.ComponentProps<typeof Heading>\n) => {\n  const { size, hasDismiss } = useBannerContext()\n\n  return (\n    <StyledHeading\n      size=\"md\"\n      containerSize={size}\n      hasDismiss={hasDismiss}\n      {...props}\n    />\n  )\n}\n\nBannerRegularHeading.displayName = 'BannerRegularHeading'\n"],"names":["StyledHeading","styled","Heading","BannerRegularHeading","props","size","hasDismiss","useBannerContext","React"],"mappings":"8KAOA,MAAMA,EAAgBC,EACpBC,EACA,CACE,KAAM,CAAC,OAAQ,+BAA+B,EAC9C,SAAU,CACR,cAAe,CACb,GAAI,CAAA,EACJ,GAAI,CAAA,CACN,EACA,WAAY,CACV,KAAM,CACR,CAAA,CACF,EACA,iBAAkB,CAChB,CACE,cAAe,KACf,WAAY,GACZ,MAAO,CAAC,OAAO,CACjB,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAEaC,EACXC,GACG,CACH,KAAM,CAAE,KAAAC,EAAM,WAAAC,CAAW,EAAIC,EAAiB,EAE9C,OACEC,EAAA,cAACR,EAAA,CACC,KAAK,KACL,cAAeK,EACf,WAAYC,EACX,GAAGF,EACN,CAEJ,EAEAD,EAAqB,YAAc"}
+{"version":3,"file":"BannerRegularHeading.js","sources":["../../../../src/components/banner/banner-regular/BannerRegularHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Heading } from '../../heading/Heading'\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledHeading = styled(\n  Heading,\n  {\n    base: ['mb-4', 'text-(--banner-heading-color)'],\n    variants: {\n      containerSize: {\n        sm: [],\n        md: []\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 BannerRegularHeading = (\n  props: React.ComponentProps<typeof Heading>\n) => {\n  const { size, hasDismiss } = useBannerContext()\n\n  return (\n    <StyledHeading\n      size=\"md\"\n      containerSize={size}\n      hasDismiss={hasDismiss}\n      {...props}\n    />\n  )\n}\n\nBannerRegularHeading.displayName = 'BannerRegularHeading'\n"],"names":["StyledHeading","styled","Heading","BannerRegularHeading","props","size","hasDismiss","useBannerContext","React"],"mappings":"8KAOA,MAAMA,EAAgBC,EACpBC,EACA,CACE,KAAM,CAAC,OAAQ,+BAA+B,EAC9C,SAAU,CACR,cAAe,CACb,GAAI,CAAA,EACJ,GAAI,CAAA,CACN,EACA,WAAY,CACV,KAAM,CACR,CAAA,CACF,EACA,iBAAkB,CAChB,CACE,cAAe,KACf,WAAY,GACZ,MAAO,CAAC,OAAO,CACjB,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAEaC,EACXC,GACG,CACH,KAAM,CAAE,KAAAC,EAAM,WAAAC,CAAW,EAAIC,EAAiB,EAE9C,OACEC,EAAA,cAACR,EAAA,CACC,KAAK,KACL,cAAeK,EACf,WAAYC,EACX,GAAGF,EACN,CAEJ,EAEAD,EAAqB,YAAc"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"BannerRegularImage.js","sources":["../../../../src/components/banner/banner-regular/BannerRegularImage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Image } from '../../image'\nimport { useBannerContext } from '../BannerContext'\n\nconst Container = styled(\n  'div',\n  {\n    base: ['relative', 'overflow-hidden', 'w-19/50'],\n    variants: {\n      size: {\n        sm: ['hidden'],\n        md: ['block']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nconst StyledImage = styled(Image, {\n  base: ['absolute', 'max-w-none', 'size-full', 'object-cover']\n})\n\nexport const BannerRegularImage = (\n  props: React.ComponentProps<typeof Image>\n) => {\n  const { size } = useBannerContext()\n\n  return (\n    <Container size={size}>\n      <StyledImage {...props} />\n    </Container>\n  )\n}\n\nBannerRegularImage.displayName = 'BannerRegularImage'\n"],"names":["Container","styled","StyledImage","Image","BannerRegularImage","props","size","useBannerContext","React"],"mappings":"wKAOA,MAAMA,EAAYC,EAChB,MACA,CACE,KAAM,CAAC,WAAY,kBAAmB,SAAS,EAC/C,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,OAAO,CACd,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAEMC,EAAcD,EAAOE,EAAO,CAChC,KAAM,CAAC,WAAY,aAAc,YAAa,cAAc,CAC9D,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAEjB,EAAA,OACEC,EAAA,cAACR,EAAA,CAAU,KAAMM,CAAAA,EACfE,EAAA,cAACN,EAAA,CAAa,GAAGG,CAAAA,CAAO,CAC1B,CAEJ,EAEAD,EAAmB,YAAc"}
+{"version":3,"file":"BannerRegularImage.js","sources":["../../../../src/components/banner/banner-regular/BannerRegularImage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Image } from '../../image/Image'\nimport { useBannerContext } from '../BannerContext'\n\nconst Container = styled(\n  'div',\n  {\n    base: ['relative', 'overflow-hidden', 'w-19/50'],\n    variants: {\n      size: {\n        sm: ['hidden'],\n        md: ['block']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nconst StyledImage = styled(Image, {\n  base: ['absolute', 'max-w-none', 'size-full', 'object-cover']\n})\n\nexport const BannerRegularImage = (\n  props: React.ComponentProps<typeof Image>\n) => {\n  const { size } = useBannerContext()\n\n  return (\n    <Container size={size}>\n      <StyledImage {...props} />\n    </Container>\n  )\n}\n\nBannerRegularImage.displayName = 'BannerRegularImage'\n"],"names":["Container","styled","StyledImage","Image","BannerRegularImage","props","size","useBannerContext","React"],"mappings":"wKAOA,MAAMA,EAAYC,EAChB,MACA,CACE,KAAM,CAAC,WAAY,kBAAmB,SAAS,EAC/C,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,OAAO,CACd,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAEMC,EAAcD,EAAOE,EAAO,CAChC,KAAM,CAAC,WAAY,aAAc,YAAa,cAAc,CAC9D,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAEjB,EAAA,OACEC,EAAA,cAACR,EAAA,CAAU,KAAMM,CAAAA,EACfE,EAAA,cAACN,EAAA,CAAa,GAAGG,CAAAA,CAAO,CAC1B,CAEJ,EAEAD,EAAmB,YAAc"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"BannerRegularText.js","sources":["../../../../src/components/banner/banner-regular/BannerRegularText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../../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.ComponentProps<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"],"names":["StyledText","styled","Text","BannerRegularText","props","size","hasDismiss","useBannerContext","React"],"mappings":"qKAOA,MAAMA,EAAaC,EACjBC,EACA,CACE,KAAM,CAAC,4BAA4B,EACnC,SAAU,CACR,cAAe,CACb,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,MAAM,CACb,EACA,WAAY,CACV,KAAM,CAAA,CACR,CACF,EACA,iBAAkB,CAChB,CACE,cAAe,KACf,WAAY,GACZ,MAAO,CAAC,OAAO,CACjB,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAEaC,EAAqBC,GAA6C,CAC7E,KAAM,CAAE,KAAAC,EAAM,WAAAC,CAAW,EAAIC,EAAiB,EAE9C,OACEC,EAAA,cAACR,EAAA,CACC,KAAMK,EACN,cAAeA,EACf,WAAYC,EACX,GAAGF,EACN,CAEJ,EAEAD,EAAkB,YAAc"}
+{"version":3,"file":"BannerRegularText.js","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.ComponentProps<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"],"names":["StyledText","styled","Text","BannerRegularText","props","size","hasDismiss","useBannerContext","React"],"mappings":"qKAOA,MAAMA,EAAaC,EACjBC,EACA,CACE,KAAM,CAAC,4BAA4B,EACnC,SAAU,CACR,cAAe,CACb,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,MAAM,CACb,EACA,WAAY,CACV,KAAM,CAAA,CACR,CACF,EACA,iBAAkB,CAChB,CACE,cAAe,KACf,WAAY,GACZ,MAAO,CAAC,OAAO,CACjB,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAEaC,EAAqBC,GAA6C,CAC7E,KAAM,CAAE,KAAAC,EAAM,WAAAC,CAAW,EAAIC,EAAiB,EAE9C,OACEC,EAAA,cAACR,EAAA,CACC,KAAMK,EACN,cAAeA,EACf,WAAYC,EACX,GAAGF,EACN,CAEJ,EAEAD,EAAkB,YAAc"}

package/dist/components/banner/banner-slim/BannerSlim.d.ts

@@ -5,22 +5,11 @@ export declare const BannerSlim: {
     ({ colorScheme, size, emphasis, onDismiss, ...rest }: React.ComponentProps<typeof Banner> & React.ComponentProps<typeof BannerContainer>): 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;
-        }, "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;
-        }, never> & {
-            as?: React.ElementType;
-        }>>): React.JSX.Element;
-        displayName: string;
-    };
+    Content: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }, never> & {
+        as?: React.ElementType;
+    }>;
     Text: {
         (props: React.ComponentProps<typeof import("../..").Text>): React.JSX.Element;
         displayName: string;
@@ -35,7 +24,13 @@ export declare const BannerSlim: {
     };
     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;
+            appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
+            content?: string | undefined | undefined;
+            size?: ("sm" | "md" | "lg" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs">>) | undefined;
+            translate?: "yes" | "no" | undefined | undefined;
+            color?: string | undefined | undefined;
+            prefix?: string | undefined | undefined;
+            theme?: ("primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger">>) | undefined;
             form?: string | undefined | undefined;
             label: string;
             slot?: string | undefined | undefined;
@@ -43,7 +38,6 @@ export declare const BannerSlim: {
             title?: string | undefined | 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;
@@ -267,7 +261,7 @@ export declare const BannerSlim: {
             suppressHydrationWarning?: boolean | undefined | undefined;
             accessKey?: string | undefined | undefined;
             autoFocus?: boolean | undefined | undefined;
-            contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+            contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
             contextMenu?: string | undefined | undefined;
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
@@ -275,13 +269,10 @@ export declare const BannerSlim: {
             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;
@@ -301,18 +292,16 @@ export declare const BannerSlim: {
             unselectable?: "on" | "off" | undefined | undefined;
             inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
             is?: string | undefined | undefined;
-            as?: React.ElementType | undefined;
             disabled?: boolean | undefined | undefined;
+            value?: string | number | readonly string[] | undefined;
+            as?: React.ElementType | undefined;
             formAction?: string | undefined | undefined;
             formEncType?: string | undefined | undefined;
             formMethod?: string | undefined | undefined;
             formNoValidate?: boolean | undefined | undefined;
             formTarget?: string | undefined | undefined;
-            value?: string | number | readonly string[] | 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;
+            tooltipSide?: "bottom" | "left" | "right" | "top" | undefined;
             isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
             emphasis?: ("bold" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold">>) | undefined;
             containerSize?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
@@ -320,7 +309,13 @@ export declare const BannerSlim: {
         displayName: string;
     };
     Actions: {
-        ({ children, ...props }: React.ComponentProps<typeof import("../..").Flex>): React.JSX.Element;
+        ({ children, ...props }: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        }, "size"> & {
+            size?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
+        } & {
+            as?: React.ElementType;
+        }>>): React.JSX.Element;
         displayName: string;
     };
 };

package/dist/components/banner/banner-slim/BannerSlimActions.d.ts

@@ -1,6 +1,13 @@
 import * as React from 'react';
-import { Flex } from '../../flex';
+declare const StyledBannerSlimActions: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "size"> & {
+    size?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
+} & {
+    as?: React.ElementType;
+}>;
 export declare const BannerSlimActions: {
-    ({ children, ...props }: React.ComponentProps<typeof Flex>): React.JSX.Element;
+    ({ children, ...props }: React.ComponentProps<typeof StyledBannerSlimActions>): React.JSX.Element;
     displayName: string;
 };
+export {};

package/dist/components/banner/banner-slim/BannerSlimActions.js

@@ -1,2 +1,2 @@
-import*as s from"react";import{styled as o}from"../../../styled.js";import{Flex as a}from"../../flex/Flex.js";import{useBannerContext as i}from"../BannerContext.js";const m=o(a,{base:[],variants:{size:{sm:["w-full"],md:["w-auto"]}}},{enabledResponsiveVariants:!0}),e=({children:t,...n})=>{const{size:r}=i();return s.createElement(m,{size:r,gap:4,...n},t)};e.displayName="BannerSlimActions";export{e as BannerSlimActions};
+import*as r from"react";import{styled as i}from"../../../styled.js";import{useBannerContext as a}from"../BannerContext.js";const o=i("div",{base:["flex","gap-4"],variants:{size:{sm:["w-full"],md:["w-auto"]}}},{enabledResponsiveVariants:!0}),e=({children:n,...t})=>{const{size:s}=a();return r.createElement(o,{size:s,...t},n)};e.displayName="BannerSlimActions";export{e as BannerSlimActions};
 //# sourceMappingURL=BannerSlimActions.js.map

package/dist/components/banner/banner-slim/BannerSlimActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerSlimActions.js","sources":["../../../../src/components/banner/banner-slim/BannerSlimActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Flex } from '../../flex'\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledBannerSlimActions = styled(\n  Flex,\n  {\n    base: [],\n    variants: {\n      size: {\n        sm: ['w-full'],\n        md: ['w-auto']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nexport const BannerSlimActions = ({\n  children,\n  ...props\n}: React.ComponentProps<typeof Flex>) => {\n  const { size } = useBannerContext()\n  return (\n    <StyledBannerSlimActions size={size} gap={4} {...props}>\n      {children}\n    </StyledBannerSlimActions>\n  )\n}\n\nBannerSlimActions.displayName = 'BannerSlimActions'\n"],"names":["StyledBannerSlimActions","styled","Flex","BannerSlimActions","children","props","size","useBannerContext","React"],"mappings":"qKAOA,MAAMA,EAA0BC,EAC9BC,EACA,CACE,KAAM,GACN,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,QAAQ,CACf,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAEaC,EAAoB,CAAC,CAChC,SAAAC,EACA,GAAGC,CACL,IAAyC,CACvC,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAAA,EACjB,OACEC,EAAA,cAACR,EAAA,CAAwB,KAAMM,EAAM,IAAK,EAAI,GAAGD,CAC9CD,EAAAA,CACH,CAEJ,EAEAD,EAAkB,YAAc"}
+{"version":3,"file":"BannerSlimActions.js","sources":["../../../../src/components/banner/banner-slim/BannerSlimActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledBannerSlimActions = styled(\n  'div',\n  {\n    base: ['flex', 'gap-4'],\n    variants: {\n      size: {\n        sm: ['w-full'],\n        md: ['w-auto']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nexport const BannerSlimActions = ({\n  children,\n  ...props\n}: React.ComponentProps<typeof StyledBannerSlimActions>) => {\n  const { size } = useBannerContext()\n  return (\n    <StyledBannerSlimActions size={size} {...props}>\n      {children}\n    </StyledBannerSlimActions>\n  )\n}\n\nBannerSlimActions.displayName = 'BannerSlimActions'\n"],"names":["StyledBannerSlimActions","styled","BannerSlimActions","children","props","size","useBannerContext","React"],"mappings":"2HAMA,MAAMA,EAA0BC,EAC9B,MACA,CACE,KAAM,CAAC,OAAQ,OAAO,EACtB,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,QAAQ,CACf,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAEaC,EAAoB,CAAC,CAChC,SAAAC,EACA,GAAGC,CACL,IAA4D,CAC1D,KAAM,CAAE,KAAAC,CAAK,EAAIC,IACjB,OACEC,EAAA,cAACP,EAAA,CAAwB,KAAMK,EAAO,GAAGD,CACtCD,EAAAA,CACH,CAEJ,EAEAD,EAAkB,YAAc"}

package/dist/components/banner/banner-slim/BannerSlimButton.d.ts

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

package/dist/components/banner/banner-slim/BannerSlimButton.js

@@ -1,2 +1,2 @@
-import s from"clsx";import*as t from"react";import{overrideStyledVariantValue as l}from"../../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";import{Button as u}from"../../button/Button.js";import{useBannerContext as p}from"../BannerContext.js";const m=({className:r,...o})=>{const{emphasis:a,size:e}=p(),n=t.useMemo(()=>l(e,i=>i==="sm"),[e]);return t.createElement(u,{size:"md",fullWidth:n,theme:a==="bold"?"neutral":"primary",...o,className:s("ml-auto",r)})};m.displayName="BannerSlimButton";export{m as BannerSlimButton};
+import s from"clsx";import*as t from"react";import{overrideStyledVariantValue as l}from"../../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";import{Button as p}from"../../button/Button.js";import{useBannerContext as u}from"../BannerContext.js";const m=({className:r,...o})=>{const{emphasis:a,size:e}=u(),n=t.useMemo(()=>l(e,i=>i==="sm"),[e]);return t.createElement(p,{size:"md",fullWidth:n,theme:a==="bold"?"neutral":"primary",...o,className:s("ml-auto",r)})};m.displayName="BannerSlimButton";export{m as BannerSlimButton};
 //# sourceMappingURL=BannerSlimButton.js.map

package/dist/components/banner/banner-slim/BannerSlimButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerSlimButton.js","sources":["../../../../src/components/banner/banner-slim/BannerSlimButton.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Button } from '../../button'\nimport { useBannerContext } from '../BannerContext'\n\nexport const BannerSlimButton = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof Button>) => {\n  const { emphasis, size } = useBannerContext()\n\n  const fullWidth = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => s === 'sm'),\n    [size]\n  )\n\n  return (\n    <Button\n      size=\"md\"\n      fullWidth={fullWidth}\n      theme={emphasis === 'bold' ? 'neutral' : 'primary'}\n      {...props}\n      className={clsx('ml-auto', className)}\n    />\n  )\n}\n\nBannerSlimButton.displayName = 'BannerSlimButton'\n"],"names":["BannerSlimButton","className","props","emphasis","size","useBannerContext","fullWidth","React","overrideStyledVariantValue","s","Button","clsx"],"mappings":"+QAQa,MAAAA,EAAmB,CAAC,CAC/B,UAAAC,EACA,GAAGC,CACL,IAA2C,CACzC,KAAM,CAAE,SAAAC,EAAU,KAAAC,CAAK,EAAIC,IAErBC,EAAYC,EAAM,QACtB,IAAMC,EAA2BJ,EAAOK,GAAMA,IAAM,IAAI,EACxD,CAACL,CAAI,CACP,EAEA,OACEG,EAAA,cAACG,EAAA,CACC,KAAK,KACL,UAAWJ,EACX,MAAOH,IAAa,OAAS,UAAY,UACxC,GAAGD,EACJ,UAAWS,EAAK,UAAWV,CAAS,CAAA,CACtC,CAEJ,EAEAD,EAAiB,YAAc"}
+{"version":3,"file":"BannerSlimButton.js","sources":["../../../../src/components/banner/banner-slim/BannerSlimButton.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Button } from '../../button/Button'\nimport { useBannerContext } from '../BannerContext'\n\nexport const BannerSlimButton = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof Button>) => {\n  const { emphasis, size } = useBannerContext()\n\n  const fullWidth = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => s === 'sm'),\n    [size]\n  )\n\n  return (\n    <Button\n      size=\"md\"\n      fullWidth={fullWidth}\n      theme={emphasis === 'bold' ? 'neutral' : 'primary'}\n      {...props}\n      className={clsx('ml-auto', className)}\n    />\n  )\n}\n\nBannerSlimButton.displayName = 'BannerSlimButton'\n"],"names":["BannerSlimButton","className","props","emphasis","size","useBannerContext","fullWidth","React","overrideStyledVariantValue","s","Button","clsx"],"mappings":"+QAQa,MAAAA,EAAmB,CAAC,CAC/B,UAAAC,EACA,GAAGC,CACL,IAA2C,CACzC,KAAM,CAAE,SAAAC,EAAU,KAAAC,CAAK,EAAIC,IAErBC,EAAYC,EAAM,QACtB,IAAMC,EAA2BJ,EAAOK,GAAMA,IAAM,IAAI,EACxD,CAACL,CAAI,CACP,EAEA,OACEG,EAAA,cAACG,EAAA,CACC,KAAK,KACL,UAAWJ,EACX,MAAOH,IAAa,OAAS,UAAY,UACxC,GAAGD,EACJ,UAAWS,EAAK,UAAWV,CAAS,CAAA,CACtC,CAEJ,EAEAD,EAAiB,YAAc"}

package/dist/components/banner/banner-slim/BannerSlimContainer.d.ts

@@ -1,14 +1,6 @@
 import * as React from 'react';
-declare const StyledBannerSlimContainer: React.ForwardRefExoticComponent<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;
+declare const StyledBannerSlimContainer: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
 }, "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;
@@ -23,7 +15,7 @@ declare const StyledBannerSlimContainer: React.ForwardRefExoticComponent<Omit<Om
 } & {
     as?: React.ElementType;
 }>;
-type TBannerSlimContainerProps = Omit<React.ComponentProps<typeof StyledBannerSlimContainer>, 'direction' | 'align' | 'wrap' | 'gap' | 'justify'>;
+type TBannerSlimContainerProps = React.ComponentProps<typeof StyledBannerSlimContainer>;
 export declare const BannerSlimContainer: {
     (props: TBannerSlimContainerProps): JSX.Element;
     displayName: string;

package/dist/components/banner/banner-slim/BannerSlimContainer.js

@@ -1,2 +1,2 @@
-import*as n from"react";import{styled as p}from"../../../styled.js";import{overrideStyledVariantValue as o}from"../../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";import{BannerContainer as d}from"../BannerContainer.js";import{useBannerContext as l}from"../BannerContext.js";const u={sm:"column",md:"row"},c={sm:"flex-start",md:"center"},f={sm:"wrap",md:"nowrap"},w=p(d,{base:["p-4"],variants:{sizeWorkaround:{sm:[],md:["px-6"]}}},{enabledResponsiveVariants:!0}),a=m=>{const{size:e}=l(),t=n.useMemo(()=>o(e,r=>u[r]),[e]),s=n.useMemo(()=>o(e,r=>c[r]),[e]),i=n.useMemo(()=>o(e,r=>f[r]),[e]);return n.createElement(w,{direction:t,align:s,sizeWorkaround:e,gap:4,wrap:i,...m})};a.displayName="BannerSlimContainer";export{a as BannerSlimContainer};
+import a from"clsx";import*as r from"react";import{styled as i}from"../../../styled.js";import{BannerContainer as p}from"../BannerContainer.js";import{useBannerContext as l}from"../BannerContext.js";const f={sm:"flex-col",md:"flex-row"},d={sm:"items-start",md:"items-center"},c={sm:"flex-wrap",md:"flex-nowrap"},x=i(p,{base:["p-4"],variants:{sizeWorkaround:{sm:[],md:["px-6"]}}},{enabledResponsiveVariants:!0}),o=t=>{const{size:e}=l(),s=r.useMemo(()=>typeof e=="string"?f[e]:"flex-col md:flex-row",[e]),m=r.useMemo(()=>typeof e=="string"?d[e]:"items-start md:items-center",[e]),n=r.useMemo(()=>typeof e=="string"?c[e]:"flex-wrap md:flex-nowrap",[e]);return r.createElement(x,{sizeWorkaround:e,className:a(s,m,"gap-4",n,t.className),...t})};o.displayName="BannerSlimContainer";export{o as BannerSlimContainer};
 //# sourceMappingURL=BannerSlimContainer.js.map