@atom-learning/components 2.50.1 → 2.51.0

package/CHANGELOG.md

@@ -1,9 +1,13 @@
-## [2.50.1](https://github.com/Atom-Learning/components/compare/v2.50.0...v2.50.1) (2023-04-28)
+# [2.51.0](https://github.com/Atom-Learning/components/compare/v2.50.2...v2.51.0) (2023-04-28)
 
 
-### Bug Fixes
+### Features
 
-* lintstagedrc fix prettier bad path by removing it ([ca51477](https://github.com/Atom-Learning/components/commit/ca51477af9508378a7315fc8bdd099723bb3ff14))
+* created SectionMessage component ([0f958e8](https://github.com/Atom-Learning/components/commit/0f958e84ec42a892cfe516293141d41b82de853b))
+* PR comments ([c027ef0](https://github.com/Atom-Learning/components/commit/c027ef075e69d705f30120c79440381dd908df93))
+* simplify SectionMessage API by utilising pos absolute ([f69a461](https://github.com/Atom-Learning/components/commit/f69a4612ee7d2b4ebec8db0be9dfd76a7c37d62d))
+* small UI tweaks ([1d86a27](https://github.com/Atom-Learning/components/commit/1d86a27108d0a746cc4867ec0aa78e41434d7232))
+* use context to add paddings left/right depending on whether icon and dismiss present ([85fd65c](https://github.com/Atom-Learning/components/commit/85fd65c6c81f6eecadca1133ce52cea253506a40))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/banner/Banner.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{ColorScheme as l}from"../../experiments/color-scheme/ColorScheme.js";import{Dismissible as s}from"../dismissible/index.js";import{BannerContainer as p}from"./BannerContainer.js";import{BannerContext as c}from"./BannerContext.js";const r=({children:m,size:a={"@initial":"sm","@md":"md"},colorScheme:n,emphasis:i="lowContrast",value:o="dismiss-banner-regular",onDismiss:t})=>e.createElement(l,{...n,asChild:!0},e.createElement(s,{asChild:!0,value:o,onDismiss:t},e.createElement(p,{role:"banner",emphasis:i},e.createElement(c.Provider,{value:{emphasis:i,size:a}},m))));r.Dismiss=s.Trigger,r.displayName="Banner";export{r as Banner};
+import*as e from"react";import{ColorScheme as l}from"../../experiments/color-scheme/ColorScheme.js";import{Dismissible as s}from"../dismissible/index.js";import{BannerContainer as p}from"./BannerContainer.js";import{BannerProvider as c}from"./BannerContext.js";const r=({children:m,size:a={"@initial":"sm","@md":"md"},colorScheme:n,emphasis:i="lowContrast",value:o="dismiss-banner-regular",onDismiss:t})=>e.createElement(l,{...n,asChild:!0},e.createElement(s,{asChild:!0,value:o,onDismiss:t},e.createElement(p,{role:"banner",emphasis:i},e.createElement(c,{emphasis:i,size:a},m))));r.Dismiss=s.Trigger,r.displayName="Banner";export{r as Banner};
 //# sourceMappingURL=Banner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../src/components/banner/Banner.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\n\nimport { Dismissible } from '../dismissible'\nimport { BannerContainer, TBannerContainerProps } from './BannerContainer'\nimport { BannerContext } from './BannerContext'\n\ntype TDismissibleProps = React.ComponentProps<typeof Dismissible>\n\ninterface IBannerProps extends TBannerContainerProps {\n  colorScheme: TcolorScheme\n  value?: TDismissibleProps['value']\n  onDismiss?: TDismissibleProps['onDismiss']\n}\n\nexport const Banner: React.FC<IBannerProps> & {\n  Dismiss: typeof Dismissible.Trigger\n} = ({\n  children,\n  size = {\n    '@initial': 'sm',\n    '@md': 'md'\n  },\n  colorScheme,\n  emphasis = 'lowContrast',\n  value = 'dismiss-banner-regular',\n  onDismiss\n}) => {\n  return (\n    <ColorScheme {...colorScheme} asChild>\n      <Dismissible asChild value={value} onDismiss={onDismiss}>\n        <BannerContainer role=\"banner\" emphasis={emphasis}>\n          <BannerContext.Provider value={{ emphasis, size }}>\n            {children}\n          </BannerContext.Provider>\n        </BannerContainer>\n      </Dismissible>\n    </ColorScheme>\n  )\n}\n\nBanner.Dismiss = Dismissible.Trigger\nBanner.displayName = 'Banner'\n"],"names":["Banner","children","size","colorScheme","emphasis","value","onDismiss","React","ColorScheme","Dismissible","BannerContainer","BannerContext"],"mappings":"0QAgBaA,EAET,CAAC,CACH,SAAAC,EACA,KAAAC,EAAO,CACL,WAAY,KACZ,MAAO,IACT,EACA,YAAAC,EACA,SAAAC,EAAW,cACX,MAAAC,EAAQ,yBACR,UAAAC,CACF,IAEIC,EAAA,cAACC,EAAA,CAAa,GAAGL,EAAa,QAAO,EAAA,EACnCI,EAAA,cAACE,EAAA,CAAY,QAAO,GAAC,MAAOJ,EAAO,UAAWC,GAC5CC,EAAA,cAACG,EAAA,CAAgB,KAAK,SAAS,SAAUN,CAAAA,EACvCG,EAAA,cAACI,EAAc,SAAd,CAAuB,MAAO,CAAE,SAAAP,EAAU,KAAAF,CAAK,CAAA,EAC7CD,CACH,CACF,CACF,CACF,EAIJD,EAAO,QAAUS,EAAY,QAC7BT,EAAO,YAAc"}
+{"version":3,"file":"Banner.js","sources":["../../../src/components/banner/Banner.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\n\nimport { Dismissible } from '../dismissible'\nimport { BannerContainer, TBannerContainerProps } from './BannerContainer'\nimport { BannerProvider } from './BannerContext'\n\ntype TDismissibleProps = React.ComponentProps<typeof Dismissible>\n\ninterface IBannerProps extends TBannerContainerProps {\n  colorScheme: TcolorScheme\n  value?: TDismissibleProps['value']\n  onDismiss?: TDismissibleProps['onDismiss']\n}\n\nexport const Banner: React.FC<IBannerProps> & {\n  Dismiss: typeof Dismissible.Trigger\n} = ({\n  children,\n  size = {\n    '@initial': 'sm',\n    '@md': 'md'\n  },\n  colorScheme,\n  emphasis = 'lowContrast',\n  value = 'dismiss-banner-regular',\n  onDismiss\n}) => {\n  return (\n    <ColorScheme {...colorScheme} asChild>\n      <Dismissible asChild value={value} onDismiss={onDismiss}>\n        <BannerContainer role=\"banner\" emphasis={emphasis}>\n          <BannerProvider emphasis={emphasis} size={size}>\n            {children}\n          </BannerProvider>\n        </BannerContainer>\n      </Dismissible>\n    </ColorScheme>\n  )\n}\n\nBanner.Dismiss = Dismissible.Trigger\nBanner.displayName = 'Banner'\n"],"names":["Banner","children","size","colorScheme","emphasis","value","onDismiss","React","ColorScheme","Dismissible","BannerContainer","BannerProvider"],"mappings":"qQAgBa,MAAAA,EAET,CAAC,CACH,SAAAC,EACA,KAAAC,EAAO,CACL,WAAY,KACZ,MAAO,IACT,EACA,YAAAC,EACA,SAAAC,EAAW,cACX,MAAAC,EAAQ,yBACR,UAAAC,CACF,IAEIC,EAAA,cAACC,EAAA,CAAa,GAAGL,EAAa,QAAO,EAAA,EACnCI,EAAA,cAACE,EAAA,CAAY,QAAO,GAAC,MAAOJ,EAAO,UAAWC,GAC5CC,EAAA,cAACG,EAAA,CAAgB,KAAK,SAAS,SAAUN,GACvCG,EAAA,cAACI,EAAA,CAAe,SAAUP,EAAU,KAAMF,CAAAA,EACvCD,CACH,CACF,CACF,CACF,EAIJD,EAAO,QAAUS,EAAY,QAC7BT,EAAO,YAAc"}

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

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { TBannerContainerProps } from './BannerContainer';
-declare type TBannerContextValue = Pick<TBannerContainerProps, 'size' | 'emphasis'>;
-export declare const BannerContext: React.Context<TBannerContextValue | undefined>;
-export declare const useBannerContext: () => Partial<TBannerContextValue>;
+export declare type TBannerProviderProps = Pick<TBannerContainerProps, 'size' | 'emphasis'>;
+declare 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: React.FC<TBannerProviderProps>;
 export {};

package/dist/components/banner/BannerContext.js

@@ -1,2 +1,2 @@
-import*as t from"react";const n=t.createContext(void 0),o=()=>{const e=t.useContext(n);if(e===void 0)throw new Error("useBannerContext must be used within a BannerContextProvider");return e};export{n as BannerContext,o as useBannerContext};
+import*as s from"react";const t=s.createContext({hasDismiss:!1,setHasDismiss:()=>null}),m=()=>{const e=s.useContext(t);if(e===void 0)throw new Error("useBannerContext must be used within a BannerProvider");return e},u=({emphasis:e,size:r,children:a})=>{const[n,i]=s.useState(!1),o=s.useMemo(()=>({emphasis:e,size:r,hasDismiss:n,setHasDismiss:i}),[e,r,n,i]);return s.createElement(t.Provider,{value:o},a)};export{t as BannerContext,u as BannerProvider,m as useBannerContext};
 //# sourceMappingURL=BannerContext.js.map

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\ntype TBannerContextValue = Pick<TBannerContainerProps, 'size' | 'emphasis'>\n\nexport const BannerContext = React.createContext<\n  TBannerContextValue | undefined\n>(undefined)\n\nexport const useBannerContext = (): Partial<TBannerContextValue> => {\n  const context = React.useContext(BannerContext)\n\n  if (context === undefined) {\n    throw new Error(\n      'useBannerContext must be used within a BannerContextProvider'\n    )\n  }\n\n  return context\n}\n"],"names":["BannerContext","React","useBannerContext","context"],"mappings":"wBAMO,MAAMA,EAAgBC,EAAM,cAEjC,MAAS,EAEEC,EAAmB,IAAoC,CAClE,MAAMC,EAAUF,EAAM,WAAWD,CAAa,EAE9C,GAAIG,IAAY,OACd,MAAM,IAAI,MACR,8DACF,EAGF,OAAOA,CACT"}
+{"version":3,"file":"BannerContext.js","sources":["../../../src/components/banner/BannerContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { TBannerContainerProps } from './BannerContainer'\n\nexport type TBannerProviderProps = Pick<\n  TBannerContainerProps,\n  'size' | 'emphasis'\n>\n\ntype TBannerContextValue = TBannerProviderProps & {\n  hasDismiss: boolean\n  setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nexport const BannerContext = React.createContext<TBannerContextValue>({\n  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: React.FC<TBannerProviderProps> = ({\n  emphasis,\n  size,\n  children\n}) => {\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"],"names":["BannerContext","React","useBannerContext","context","BannerProvider","emphasis","size","children","hasDismiss","setHasDismiss","value"],"mappings":"wBAcO,MAAMA,EAAgBC,EAAM,cAAmC,CACpE,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,EAAiD,CAAC,CAC7D,SAAAC,EACA,KAAAC,EACA,SAAAC,CACF,IAAM,CACJ,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,CAAAA,EAAQH,CAAS,CAEpD"}

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

@@ -1,2 +1,2 @@
-import{Close as a}from"@atom-learning/icons";import*as e from"react";import{styled as n}from"../../../stitches.js";import{overrideStitchesVariantValue as l}from"../../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{ActionIcon as p}from"../../action-icon/ActionIcon.js";import{Icon as c}from"../../icon/Icon.js";import{Banner as d}from"../Banner.js";import{useBannerContext as u}from"../BannerContext.js";const f={sm:"md",md:"sm"},h=n(p,{position:"absolute",top:"$3",right:"$3"}),t=({label:r="dismiss",...s})=>{const{size:o}=u(),i=e.useMemo(()=>l(o,m=>f[m]),[o]);return e.createElement(d.Dismiss,{asChild:!0},e.createElement(h,{label:r,size:i,hasTooltip:!1,isRounded:!0,theme:"neutral",appearance:"solid",...s},e.createElement(c,{is:a})))};t.displayName="BannerRegularDismiss";export{t as BannerRegularDismiss};
+import{Close as n}from"@atom-learning/icons";import*as e from"react";import{styled as l}from"../../../stitches.js";import{overrideStitchesVariantValue as p}from"../../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{ActionIcon as c}from"../../action-icon/ActionIcon.js";import{Icon as u}from"../../icon/Icon.js";import{Banner as d}from"../Banner.js";import{useBannerContext as f}from"../BannerContext.js";const h={sm:"md",md:"sm"},D=l(c,{position:"absolute",top:"$3",right:"$3"}),t=({label:r="dismiss",...i})=>{const{size:o,setHasDismiss:s}=f();e.useEffect(()=>(s(!0),()=>{s(!1)}),[s]);const m=e.useMemo(()=>p(o,a=>h[a]),[o]);return e.createElement(d.Dismiss,{asChild:!0},e.createElement(D,{label:r,size:m,hasTooltip:!1,isRounded:!0,theme:"neutral",appearance:"solid",...i},e.createElement(u,{is:n})))};t.displayName="BannerRegularDismiss";export{t as BannerRegularDismiss};
 //# sourceMappingURL=BannerRegularDismiss.js.map

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 '~/stitches'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\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  position: 'absolute',\n  top: '$3',\n  right: '$3'\n})\n\nexport const BannerRegularDismiss: React.FC<\n  React.ComponentProps<typeof ActionIcon>\n> = ({ label = 'dismiss', ...rest }) => {\n  const { size } = useBannerContext()\n\n  const actionIconSize = React.useMemo(\n    () => overrideStitchesVariantValue(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","useBannerContext","actionIconSize","React","overrideStitchesVariantValue","s","Banner","Icon","Close"],"mappings":"ybAWA,MAAMA,EAAmB,CACvB,GAAI,KACJ,GAAI,IACN,EAEMC,EAAgBC,EAAOC,EAAY,CACvC,SAAU,WACV,IAAK,KACL,MAAO,IACT,CAAC,EAEYC,EAET,CAAC,CAAE,MAAAC,EAAQ,aAAcC,CAAK,IAAM,CACtC,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAEXC,EAAAA,EAAiBC,EAAM,QAC3B,IAAMC,EAA6BJ,EAAOK,GAAMZ,EAAiBY,EAAE,EACnE,CAACL,CAAI,CACP,EAEA,OACEG,EAAA,cAACG,EAAO,QAAP,CAAe,QAAO,EAAA,EACrBH,EAAA,cAACT,EAAA,CACC,MAAOI,EACP,KAAMI,EACN,WAAY,GACZ,UAAS,GACT,MAAM,UACN,WAAW,QACV,GAAGH,CAEJI,EAAAA,EAAA,cAACI,EAAA,CAAK,GAAIC,CAAO,CAAA,CACnB,CACF,CAEJ,EAEAX,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 '~/stitches'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\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  position: 'absolute',\n  top: '$3',\n  right: '$3'\n})\n\nexport const BannerRegularDismiss: React.FC<\n  React.ComponentProps<typeof ActionIcon>\n> = ({ label = 'dismiss', ...rest }) => {\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    () => overrideStitchesVariantValue(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","overrideStitchesVariantValue","s","Banner","Icon","Close"],"mappings":"ybAWA,MAAMA,EAAmB,CACvB,GAAI,KACJ,GAAI,IACN,EAEMC,EAAgBC,EAAOC,EAAY,CACvC,SAAU,WACV,IAAK,KACL,MAAO,IACT,CAAC,EAEYC,EAET,CAAC,CAAE,MAAAC,EAAQ,aAAcC,CAAK,IAAM,CACtC,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,EAA6BL,EAAOM,GAAMb,EAAiBa,EAAE,EACnE,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.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as a}from"../../../stitches.js";import{Heading as i}from"../../heading/Heading.js";import{useBannerContext as m}from"../BannerContext.js";const o=a(i,{mb:"$4",variants:{containerSize:{sm:{mr:"$6"},md:{mr:0}}}}),e=r=>{const{size:n}=m();return t.createElement(o,{size:"sm",containerSize:n,...r})};e.displayName="BannerRegularHeading";export{e as BannerRegularHeading};
+import*as r from"react";import{styled as a}from"../../../stitches.js";import{Heading as m}from"../../heading/Heading.js";import{useBannerContext as t}from"../BannerContext.js";const o=a(m,{mb:"$4",variants:{containerSize:{sm:{},md:{}},hasDismiss:{true:{}}},compoundVariants:[{containerSize:"sm",hasDismiss:!0,css:{mr:"$6"}}]}),s=e=>{const{size:i,hasDismiss:n}=t();return r.createElement(o,{size:"sm",containerSize:i,hasDismiss:n,...e})};s.displayName="BannerRegularHeading";export{s as BannerRegularHeading};
 //# sourceMappingURL=BannerRegularHeading.js.map

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 '~/stitches'\n\nimport { Heading } from '../../heading'\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledHeading = styled(Heading, {\n  mb: '$4',\n  variants: {\n    containerSize: {\n      sm: {\n        mr: '$6'\n      },\n      md: {\n        mr: 0\n      }\n    }\n  }\n})\n\nexport const BannerRegularHeading: React.FC<\n  React.ComponentProps<typeof Heading>\n> = (props) => {\n  const { size } = useBannerContext()\n\n  return <StyledHeading size=\"sm\" containerSize={size} {...props} />\n}\n\nBannerRegularHeading.displayName = 'BannerRegularHeading'\n"],"names":["StyledHeading","styled","Heading","BannerRegularHeading","props","size","useBannerContext","React"],"mappings":"gLAOA,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,GAAI,KACJ,SAAU,CACR,cAAe,CACb,GAAI,CACF,GAAI,IACN,EACA,GAAI,CACF,GAAI,CACN,CACF,CACF,CACF,CAAC,EAEYC,EAERC,GAAU,CACb,KAAM,CAAE,KAAAC,CAAK,EAAIC,IAEjB,OAAOC,EAAA,cAACP,EAAA,CAAc,KAAK,KAAK,cAAeK,EAAO,GAAGD,CAAAA,CAAO,CAClE,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 '~/stitches'\n\nimport { Heading } from '../../heading'\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledHeading = styled(Heading, {\n  mb: '$4',\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      css: {\n        mr: '$6'\n      }\n    }\n  ]\n})\n\nexport const BannerRegularHeading: React.FC<\n  React.ComponentProps<typeof Heading>\n> = (props) => {\n  const { size, hasDismiss } = useBannerContext()\n\n  return (\n    <StyledHeading\n      size=\"sm\"\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":"gLAOA,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,GAAI,KACJ,SAAU,CACR,cAAe,CACb,GAAI,GACJ,GAAI,CAAA,CACN,EACA,WAAY,CACV,KAAM,CACR,CAAA,CACF,EACA,iBAAkB,CAChB,CACE,cAAe,KACf,WAAY,GACZ,IAAK,CACH,GAAI,IACN,CACF,CACF,CACF,CAAC,EAEYC,EAERC,GAAU,CACb,KAAM,CAAE,KAAAC,EAAM,WAAAC,CAAW,EAAIC,EAE7B,EAAA,OACEC,EAAA,cAACR,EAAA,CACC,KAAK,KACL,cAAeK,EACf,WAAYC,EACX,GAAGF,EACN,CAEJ,EAEAD,EAAqB,YAAc"}

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

@@ -1,2 +1,2 @@
-import*as m from"react";import{styled as n}from"../../../stitches.js";import{Text as s}from"../../text/Text.js";import{useBannerContext as a}from"../BannerContext.js";const i=n(s,{color:"$grey900",variants:{containerSize:{sm:{mb:"$4",mr:"$6"},md:{mb:"$24",mr:0}},emphasis:{highContrast:{color:"$grey100"},midContrast:{},lowContrast:{}}}}),r=t=>{const{emphasis:o,size:e}=a();return m.createElement(i,{size:e,containerSize:e,emphasis:o,...t})};r.displayName="BannerRegularText";export{r as BannerRegularText};
+import*as a from"react";import{styled as o}from"../../../stitches.js";import{Text as m}from"../../text/Text.js";import{useBannerContext as n}from"../BannerContext.js";const c=o(m,{color:"$grey900",variants:{containerSize:{sm:{mb:"$4"},md:{mb:"$24"}},emphasis:{highContrast:{color:"$grey100"},midContrast:{},lowContrast:{}},hasDismiss:{true:{}}},compoundVariants:[{containerSize:"sm",hasDismiss:!0,css:{mr:"$6"}}]}),e=r=>{const{emphasis:t,size:s,hasDismiss:i}=n();return a.createElement(c,{size:s,containerSize:s,emphasis:t,hasDismiss:i,...r})};e.displayName="BannerRegularText";export{e as BannerRegularText};
 //# sourceMappingURL=BannerRegularText.js.map

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 '~/stitches'\n\nimport { Text } from '../../text'\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledText = styled(Text, {\n  color: '$grey900',\n  variants: {\n    containerSize: {\n      sm: {\n        mb: '$4',\n        mr: '$6'\n      },\n      md: {\n        mb: '$24',\n        mr: 0\n      }\n    },\n    emphasis: {\n      highContrast: {\n        color: '$grey100'\n      },\n      midContrast: {},\n      lowContrast: {}\n    }\n  }\n})\n\nexport const BannerRegularText: React.FC<React.ComponentProps<typeof Text>> = (\n  props\n) => {\n  const { emphasis, size } = useBannerContext()\n\n  return (\n    <StyledText\n      size={size}\n      containerSize={size}\n      emphasis={emphasis}\n      {...props}\n    />\n  )\n}\n\nBannerRegularText.displayName = 'BannerRegularText'\n"],"names":["StyledText","styled","Text","BannerRegularText","props","emphasis","size","useBannerContext","React"],"mappings":"uKAOA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,MAAO,WACP,SAAU,CACR,cAAe,CACb,GAAI,CACF,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,GAAI,MACJ,GAAI,CACN,CACF,EACA,SAAU,CACR,aAAc,CACZ,MAAO,UACT,EACA,YAAa,CACb,EAAA,YAAa,CAAA,CACf,CACF,CACF,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,SAAAC,EAAU,KAAAC,CAAK,EAAIC,EAAiB,EAE5C,OACEC,EAAA,cAACR,EAAA,CACC,KAAMM,EACN,cAAeA,EACf,SAAUD,EACT,GAAGD,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 '~/stitches'\n\nimport { Text } from '../../text'\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledText = styled(Text, {\n  color: '$grey900',\n  variants: {\n    containerSize: {\n      sm: {\n        mb: '$4'\n      },\n      md: {\n        mb: '$24'\n      }\n    },\n    emphasis: {\n      highContrast: {\n        color: '$grey100'\n      },\n      midContrast: {},\n      lowContrast: {}\n    },\n    hasDismiss: {\n      true: {}\n    }\n  },\n  compoundVariants: [\n    {\n      containerSize: 'sm',\n      hasDismiss: true,\n      css: {\n        mr: '$6'\n      }\n    }\n  ]\n})\n\nexport const BannerRegularText: React.FC<React.ComponentProps<typeof Text>> = (\n  props\n) => {\n  const { emphasis, size, hasDismiss } = useBannerContext()\n\n  return (\n    <StyledText\n      size={size}\n      containerSize={size}\n      emphasis={emphasis}\n      hasDismiss={hasDismiss}\n      {...props}\n    />\n  )\n}\n\nBannerRegularText.displayName = 'BannerRegularText'\n"],"names":["StyledText","styled","Text","BannerRegularText","props","emphasis","size","hasDismiss","useBannerContext","React"],"mappings":"uKAOA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,MAAO,WACP,SAAU,CACR,cAAe,CACb,GAAI,CACF,GAAI,IACN,EACA,GAAI,CACF,GAAI,KACN,CACF,EACA,SAAU,CACR,aAAc,CACZ,MAAO,UACT,EACA,YAAa,CAAA,EACb,YAAa,CACf,CAAA,EACA,WAAY,CACV,KAAM,EACR,CACF,EACA,iBAAkB,CAChB,CACE,cAAe,KACf,WAAY,GACZ,IAAK,CACH,GAAI,IACN,CACF,CACF,CACF,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,SAAAC,EAAU,KAAAC,EAAM,WAAAC,CAAW,EAAIC,EAAAA,EAEvC,OACEC,EAAA,cAACT,EAAA,CACC,KAAMM,EACN,cAAeA,EACf,SAAUD,EACV,WAAYE,EACX,GAAGH,CACN,CAAA,CAEJ,EAEAD,EAAkB,YAAc"}

package/dist/components/index.d.ts

@@ -51,6 +51,7 @@ export { RadioButtonField } from './radio-button-field';
 export { RadioCard, RadioCardGroup } from './radio-card';
 export { SearchField } from './search-field';
 export { SearchInput } from './search-input';
+export { SectionMessage } from './section-message';
 export { Select } from './select';
 export { SelectField } from './select-field';
 export { Sidedrawer } from './sidedrawer';