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

package/dist/components/section-message/SectionMessage.js

@@ -1,2 +1,2 @@
-import{TooltipProvider as c}from"@radix-ui/react-tooltip";import o from"react";import{styled as m}from"../../stitches.js";import{Dismissible as a}from"../dismissible/index.js";import{Flex as g}from"../flex/Flex.js";import{SectionMessageProvider as l,useSectionMessageContext as p}from"./SectionMessageContext.js";import{SectionMessageDescription as f}from"./SectionMessageDescription.js";import{SectionMessageDismiss as h}from"./SectionMessageDismiss.js";import{SectionMessageIcon as $}from"./SectionMessageIcon.js";import{SectionMessageContent as u,SectionMessageActions as d}from"./SectionMessageLayout.js";import{SectionMessageTitle as D}from"./SectionMessageTitle.js";const b=m(a,{position:"relative",borderRadius:"$0",display:"flex",minHeight:"$5",p:"$4",border:"1px solid white",variants:{theme:{success:{bg:"$successLight",color:"$successDark"},warning:{bg:"$warningLight",color:"$warningText"},error:{bg:"$dangerLight",color:"$dangerDark"},neutral:{bg:"$grey100",color:"$grey1000"},info:{bg:"$infoLight",color:"$infoDark"}},hasIcon:{true:{pl:"$6"}},hasDismiss:{true:{pr:"$7"}}}}),M=({children:t,...s})=>{const{theme:i,hasIcon:r,hasDismiss:n}=p();return o.createElement(b,{...s,theme:i,hasIcon:r,hasDismiss:n},o.createElement(g,{gap:3,justify:"space-between",css:{flexGrow:1}},t))},e=({theme:t="info",...s})=>o.createElement(c,null,o.createElement(l,{theme:t},o.createElement(M,{...s})));e.Title=D,e.Description=f,e.Icon=$,e.Dismiss=h,e.Content=u,e.Actions=d;export{e as SectionMessage};
+import{TooltipProvider as m}from"@radix-ui/react-tooltip";import t from"react";import{styled as a}from"../../styled.js";import{Dismissible as c}from"../dismissible/index.js";import{Flex as g}from"../flex/Flex.js";import{SectionMessageProvider as l,useSectionMessageContext as p}from"./SectionMessageContext.js";import{SectionMessageDescription as f}from"./SectionMessageDescription.js";import{SectionMessageDismiss as h}from"./SectionMessageDismiss.js";import{SectionMessageIcon as d}from"./SectionMessageIcon.js";import{SectionMessageContent as u,SectionMessageActions as x}from"./SectionMessageLayout.js";import{SectionMessageTitle as b}from"./SectionMessageTitle.js";const M=a(c,{base:["relative","rounded-md","flex","min-h-12","p-4","border","border-white"],variants:{theme:{success:["bg-success-light","text-success-dark"],warning:["bg-warning-light","text-warning-text"],error:["bg-danger-light","text-danger-dark"],neutral:["bg-grey-100","text-grey-1000"],info:["bg-info-light","text-info-dark"]},hasIcon:{true:["pl-10"]},hasDismiss:{true:["pr-12"]}}}),S=({children:s,...r})=>{const{theme:i,hasIcon:o,hasDismiss:n}=p();return t.createElement(M,{...r,theme:i,hasIcon:o,hasDismiss:n},t.createElement(g,{gap:3,justify:"space-between",className:"grow"},s))},e=({theme:s="info",...r})=>t.createElement(m,null,t.createElement(l,{theme:s},t.createElement(S,{...r})));e.Title=b,e.Description=f,e.Icon=d,e.Dismiss=h,e.Content=u,e.Actions=x;export{e as SectionMessage};
 //# sourceMappingURL=SectionMessage.js.map

package/dist/components/section-message/SectionMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessage.js","sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Dismissible } from '../dismissible'\nimport { Flex } from '../flex'\nimport {\n  SectionMessageProvider,\n  useSectionMessageContext\n} from './SectionMessageContext'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n  SectionMessageActions,\n  SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n  position: 'relative',\n  borderRadius: '$0',\n  display: 'flex',\n  minHeight: '$5',\n  p: '$4',\n  border: '1px solid white',\n  variants: {\n    theme: {\n      success: {\n        bg: '$successLight',\n        color: '$successDark'\n      },\n      warning: {\n        bg: '$warningLight',\n        color: '$warningText'\n      },\n      error: {\n        bg: '$dangerLight',\n        color: '$dangerDark'\n      },\n      neutral: {\n        bg: '$grey100',\n        color: '$grey1000'\n      },\n      info: {\n        bg: '$infoLight',\n        color: '$infoDark'\n      }\n    },\n    hasIcon: {\n      true: {\n        pl: '$6'\n      }\n    },\n    hasDismiss: {\n      true: {\n        pr: '$7'\n      }\n    }\n  }\n})\n\nconst SectionMessageRoot = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledSectionMessage>): JSX.Element => {\n  const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n  return (\n    <StyledSectionMessage\n      {...rest}\n      theme={theme}\n      hasIcon={hasIcon}\n      hasDismiss={hasDismiss}\n    >\n      <Flex gap={3} justify=\"space-between\" css={{ flexGrow: 1 }}>\n        {children}\n      </Flex>\n    </StyledSectionMessage>\n  )\n}\n\nexport type SectionMessageTheme =\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral'\n  | 'info'\n\nexport interface SectionMessageProps\n  extends React.ComponentProps<typeof SectionMessageRoot> {\n  theme?: SectionMessageTheme\n}\n\nexport const SectionMessage = ({\n  theme = 'info',\n  ...rest\n}: SectionMessageProps): JSX.Element => {\n  return (\n    <TooltipProvider>\n      <SectionMessageProvider theme={theme}>\n        <SectionMessageRoot {...rest} />\n      </SectionMessageProvider>\n    </TooltipProvider>\n  )\n}\n\nSectionMessage.Title = SectionMessageTitle\nSectionMessage.Description = SectionMessageDescription\nSectionMessage.Icon = SectionMessageIcon\nSectionMessage.Dismiss = SectionMessageDismiss\nSectionMessage.Content = SectionMessageContent\nSectionMessage.Actions = SectionMessageActions\n"],"names":["StyledSectionMessage","styled","Dismissible","SectionMessageRoot","children","rest","theme","hasIcon","hasDismiss","useSectionMessageContext","React","Flex","SectionMessage","TooltipProvider","SectionMessageProvider","SectionMessageTitle","SectionMessageDescription","SectionMessageIcon","SectionMessageDismiss","SectionMessageContent","SectionMessageActions"],"mappings":"gqBAoBA,MAAMA,EAAuBC,EAAOC,EAAa,CAC/C,SAAU,WACV,aAAc,KACd,QAAS,OACT,UAAW,KACX,EAAG,KACH,OAAQ,kBACR,SAAU,CACR,MAAO,CACL,QAAS,CACP,GAAI,gBACJ,MAAO,cACT,EACA,QAAS,CACP,GAAI,gBACJ,MAAO,cACT,EACA,MAAO,CACL,GAAI,eACJ,MAAO,aACT,EACA,QAAS,CACP,GAAI,WACJ,MAAO,WACT,EACA,KAAM,CACJ,GAAI,aACJ,MAAO,WACT,CACF,EACA,QAAS,CACP,KAAM,CACJ,GAAI,IACN,CACF,EACA,WAAY,CACV,KAAM,CACJ,GAAI,IACN,CACF,CACF,CACF,CAAC,EAEKC,EAAqB,CAAC,CAC1B,SAAAC,KACGC,CACL,IAAsE,CACpE,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,WAAAC,CAAW,EAAIC,EAAyB,EAEhE,OACEC,EAAA,cAACV,EAAA,CACE,GAAGK,EACJ,MAAOC,EACP,QAASC,EACT,WAAYC,CAEZE,EAAAA,EAAA,cAACC,EAAA,CAAK,IAAK,EAAG,QAAQ,gBAAgB,IAAK,CAAE,SAAU,CAAE,CACtDP,EAAAA,CACH,CACF,CAEJ,EAcaQ,EAAiB,CAAC,CAC7B,MAAAN,EAAQ,UACLD,CACL,IAEIK,EAAA,cAACG,EAAA,KACCH,EAAA,cAACI,EAAA,CAAuB,MAAOR,GAC7BI,EAAA,cAACP,EAAA,CAAoB,GAAGE,CAAAA,CAAM,CAChC,CACF,EAIJO,EAAe,MAAQG,EACvBH,EAAe,YAAcI,EAC7BJ,EAAe,KAAOK,EACtBL,EAAe,QAAUM,EACzBN,EAAe,QAAUO,EACzBP,EAAe,QAAUQ"}
+{"version":3,"file":"SectionMessage.js","sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Dismissible } from '../dismissible'\nimport { Flex } from '../flex'\nimport {\n  SectionMessageProvider,\n  useSectionMessageContext\n} from './SectionMessageContext'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n  SectionMessageActions,\n  SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n  base: [\n    'relative',\n    'rounded-md',\n    'flex',\n    'min-h-12',\n    'p-4',\n    'border',\n    'border-white'\n  ],\n  variants: {\n    theme: {\n      success: ['bg-success-light', 'text-success-dark'],\n      warning: ['bg-warning-light', 'text-warning-text'],\n      error: ['bg-danger-light', 'text-danger-dark'],\n      neutral: ['bg-grey-100', 'text-grey-1000'],\n      info: ['bg-info-light', 'text-info-dark']\n    },\n    hasIcon: {\n      true: ['pl-10']\n    },\n    hasDismiss: {\n      true: ['pr-12']\n    }\n  }\n})\n\nconst SectionMessageRoot = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledSectionMessage>) => {\n  const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n  return (\n    <StyledSectionMessage\n      {...rest}\n      theme={theme}\n      hasIcon={hasIcon}\n      hasDismiss={hasDismiss}\n    >\n      <Flex gap={3} justify=\"space-between\" className=\"grow\">\n        {children}\n      </Flex>\n    </StyledSectionMessage>\n  )\n}\n\nexport type SectionMessageTheme =\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral'\n  | 'info'\n\nexport type SectionMessageProps = React.ComponentProps<\n  typeof SectionMessageRoot\n> & {\n  theme?: SectionMessageTheme\n}\n\nexport const SectionMessage = ({\n  theme = 'info',\n  ...rest\n}: SectionMessageProps) => (\n  <TooltipProvider>\n    <SectionMessageProvider theme={theme}>\n      <SectionMessageRoot {...rest} />\n    </SectionMessageProvider>\n  </TooltipProvider>\n)\n\nSectionMessage.Title = SectionMessageTitle\nSectionMessage.Description = SectionMessageDescription\nSectionMessage.Icon = SectionMessageIcon\nSectionMessage.Dismiss = SectionMessageDismiss\nSectionMessage.Content = SectionMessageContent\nSectionMessage.Actions = SectionMessageActions\n"],"names":["StyledSectionMessage","styled","Dismissible","SectionMessageRoot","children","rest","theme","hasIcon","hasDismiss","useSectionMessageContext","React","Flex","SectionMessage","TooltipProvider","SectionMessageProvider","SectionMessageTitle","SectionMessageDescription","SectionMessageIcon","SectionMessageDismiss","SectionMessageContent","SectionMessageActions"],"mappings":"8pBAoBA,MAAMA,EAAuBC,EAAOC,EAAa,CAC/C,KAAM,CACJ,WACA,aACA,OACA,WACA,MACA,SACA,cACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CAAC,mBAAoB,mBAAmB,EACjD,QAAS,CAAC,mBAAoB,mBAAmB,EACjD,MAAO,CAAC,kBAAmB,kBAAkB,EAC7C,QAAS,CAAC,cAAe,gBAAgB,EACzC,KAAM,CAAC,gBAAiB,gBAAgB,CAC1C,EACA,QAAS,CACP,KAAM,CAAC,OAAO,CAChB,EACA,WAAY,CACV,KAAM,CAAC,OAAO,CAChB,CACF,CACF,CAAC,EAEKC,EAAqB,CAAC,CAC1B,SAAAC,EACA,GAAGC,CACL,IAAyD,CACvD,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,WAAAC,CAAW,EAAIC,EAAyB,EAEhE,OACEC,EAAA,cAACV,EAAA,CACE,GAAGK,EACJ,MAAOC,EACP,QAASC,EACT,WAAYC,CAAAA,EAEZE,EAAA,cAACC,EAAA,CAAK,IAAK,EAAG,QAAQ,gBAAgB,UAAU,MAAA,EAC7CP,CACH,CACF,CAEJ,EAeaQ,EAAiB,CAAC,CAC7B,MAAAN,EAAQ,OACR,GAAGD,CACL,IACEK,EAAA,cAACG,EAAA,KACCH,EAAA,cAACI,EAAA,CAAuB,MAAOR,CAC7BI,EAAAA,EAAA,cAACP,EAAA,CAAoB,GAAGE,CAAM,CAAA,CAChC,CACF,EAGFO,EAAe,MAAQG,EACvBH,EAAe,YAAcI,EAC7BJ,EAAe,KAAOK,EACtBL,EAAe,QAAUM,EACzBN,EAAe,QAAUO,EACzBP,EAAe,QAAUQ"}

package/dist/components/section-message/SectionMessageDescription.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { Text } from '../text';
-export declare const SectionMessageDescription: ({ css, ...rest }: React.ComponentProps<typeof Text>) => JSX.Element;
+export declare const SectionMessageDescription: ({ className, ...rest }: React.ComponentProps<typeof Text>) => JSX.Element;

package/dist/components/section-message/SectionMessageDescription.js

@@ -1,2 +1,2 @@
-import s from"react";import{Text as t}from"../text/Text.js";const r=({css:e,...o})=>s.createElement(t,{css:{color:"$grey900",...e},size:"sm",...o});export{r as SectionMessageDescription};
+import m from"clsx";import o from"react";import{Text as r}from"../text/Text.js";const s=({className:e,...t})=>o.createElement(r,{size:"sm",...t,className:m("text-grey-900",e)});export{s as SectionMessageDescription};
 //# sourceMappingURL=SectionMessageDescription.js.map

package/dist/components/section-message/SectionMessageDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageDescription.js","sources":["../../../src/components/section-message/SectionMessageDescription.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '../text'\n\nexport const SectionMessageDescription = ({\n  css,\n  ...rest\n}: React.ComponentProps<typeof Text>): JSX.Element => (\n  <Text\n    css={{\n      color: '$grey900',\n      ...css\n    }}\n    size=\"sm\"\n    {...rest}\n  />\n)\n"],"names":["SectionMessageDescription","css","rest","React","Text"],"mappings":"4DAIa,MAAAA,EAA4B,CAAC,CACxC,IAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CACC,IAAK,CACH,MAAO,WACP,GAAGH,CACL,EACA,KAAK,KACJ,GAAGC,CACN,CAAA"}
+{"version":3,"file":"SectionMessageDescription.js","sources":["../../../src/components/section-message/SectionMessageDescription.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Text } from '../text'\n\nexport const SectionMessageDescription = ({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Text>): JSX.Element => (\n  <Text size=\"sm\" {...rest} className={clsx('text-grey-900', className)} />\n)\n"],"names":["SectionMessageDescription","className","rest","React","Text","clsx"],"mappings":"gFAKO,MAAMA,EAA4B,CAAC,CACxC,UAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAM,GAAGF,EAAM,UAAWG,EAAK,gBAAiBJ,CAAS,CAAG,CAAA"}

package/dist/components/section-message/SectionMessageDismiss.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { ActionIcon } from '../action-icon';
-export declare const SectionMessageDismiss: ({ label, css, ...rest }: React.ComponentProps<typeof ActionIcon>) => JSX.Element;
+export declare const SectionMessageDismiss: ({ label, className, ...rest }: React.ComponentProps<typeof ActionIcon>) => JSX.Element;

package/dist/components/section-message/SectionMessageDismiss.js

@@ -1,2 +1,2 @@
-import{Close as m}from"@atom-learning/icons";import s,{useEffect as r}from"react";import{ActionIcon as a}from"../action-icon/ActionIcon.js";import{Dismissible as n}from"../dismissible/index.js";import{Icon as c}from"../icon/Icon.js";import{useSectionMessageContext as l}from"./SectionMessageContext.js";const p=({label:t="Dismiss",css:o,...i})=>{const{setHasDismiss:e}=l();return r(()=>(e(!0),()=>e(!1)),[e]),s.createElement(n.Trigger,{asChild:!0},s.createElement(a,{label:t,css:{m:"auto",position:"absolute",top:"$2",right:"$2",...o},size:"sm",appearance:"simple",theme:"neutral",...i},s.createElement(c,{is:m})))};export{p as SectionMessageDismiss};
+import{Close as i}from"@atom-learning/icons";import r from"clsx";import s,{useEffect as a}from"react";import{ActionIcon as l}from"../action-icon/ActionIcon.js";import{Dismissible as c}from"../dismissible/index.js";import{Icon as n}from"../icon/Icon.js";import{useSectionMessageContext as p}from"./SectionMessageContext.js";const f=({label:t="Dismiss",className:m,...o})=>{const{setHasDismiss:e}=p();return a(()=>(e(!0),()=>e(!1)),[e]),s.createElement(c.Trigger,{asChild:!0},s.createElement(l,{label:t,size:"sm",appearance:"simple",theme:"neutral",...o,className:r("m-auto","absolute","top-2","right-2",m)},s.createElement(n,{is:i})))};export{f as SectionMessageDismiss};
 //# sourceMappingURL=SectionMessageDismiss.js.map

package/dist/components/section-message/SectionMessageDismiss.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageDismiss.js","sources":["../../../src/components/section-message/SectionMessageDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport React, { useEffect } from 'react'\n\nimport { ActionIcon } from '../action-icon'\nimport { Dismissible } from '../dismissible'\nimport { Icon } from '../icon'\nimport { useSectionMessageContext } from './SectionMessageContext'\n\nexport const SectionMessageDismiss = ({\n  label = 'Dismiss',\n  css,\n  ...rest\n}: React.ComponentProps<typeof ActionIcon>): JSX.Element => {\n  const { setHasDismiss } = useSectionMessageContext()\n\n  useEffect(() => {\n    setHasDismiss(true)\n    return () => setHasDismiss(false)\n  }, [setHasDismiss])\n\n  return (\n    <Dismissible.Trigger asChild>\n      <ActionIcon\n        label={label}\n        css={{\n          m: 'auto',\n          position: 'absolute',\n          top: '$2',\n          right: '$2',\n          ...css\n        }}\n        size=\"sm\"\n        appearance=\"simple\"\n        theme=\"neutral\"\n        {...rest}\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    </Dismissible.Trigger>\n  )\n}\n"],"names":["SectionMessageDismiss","label","css","rest","setHasDismiss","useSectionMessageContext","useEffect","React","Dismissible","ActionIcon","Icon","Close"],"mappings":"+SAQa,MAAAA,EAAwB,CAAC,CACpC,MAAAC,EAAQ,UACR,IAAAC,KACGC,CACL,IAA4D,CAC1D,KAAM,CAAE,cAAAC,CAAc,EAAIC,EAAAA,EAE1B,OAAAC,EAAU,KACRF,EAAc,EAAI,EACX,IAAMA,EAAc,EAAK,GAC/B,CAACA,CAAa,CAAC,EAGhBG,EAAA,cAACC,EAAY,QAAZ,CAAoB,QAAO,EAC1BD,EAAAA,EAAA,cAACE,EAAA,CACC,MAAOR,EACP,IAAK,CACH,EAAG,OACH,SAAU,WACV,IAAK,KACL,MAAO,KACP,GAAGC,CACL,EACA,KAAK,KACL,WAAW,SACX,MAAM,UACL,GAAGC,CAAAA,EAEJI,EAAA,cAACG,EAAA,CAAK,GAAIC,CAAAA,CAAO,CACnB,CACF,CAEJ"}
+{"version":3,"file":"SectionMessageDismiss.js","sources":["../../../src/components/section-message/SectionMessageDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport React, { useEffect } from 'react'\n\nimport { ActionIcon } from '../action-icon'\nimport { Dismissible } from '../dismissible'\nimport { Icon } from '../icon'\nimport { useSectionMessageContext } from './SectionMessageContext'\n\nexport const SectionMessageDismiss = ({\n  label = 'Dismiss',\n  className,\n  ...rest\n}: React.ComponentProps<typeof ActionIcon>): JSX.Element => {\n  const { setHasDismiss } = useSectionMessageContext()\n\n  useEffect(() => {\n    setHasDismiss(true)\n    return () => setHasDismiss(false)\n  }, [setHasDismiss])\n\n  return (\n    <Dismissible.Trigger asChild>\n      <ActionIcon\n        label={label}\n        size=\"sm\"\n        appearance=\"simple\"\n        theme=\"neutral\"\n        {...rest}\n        className={clsx('m-auto', 'absolute', 'top-2', 'right-2', className)}\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    </Dismissible.Trigger>\n  )\n}\n"],"names":["SectionMessageDismiss","label","className","rest","setHasDismiss","useSectionMessageContext","useEffect","React","Dismissible","ActionIcon","clsx","Icon","Close"],"mappings":"mUASa,MAAAA,EAAwB,CAAC,CACpC,MAAAC,EAAQ,UACR,UAAAC,EACA,GAAGC,CACL,IAA4D,CAC1D,KAAM,CAAE,cAAAC,CAAc,EAAIC,EAAyB,EAEnD,OAAAC,EAAU,KACRF,EAAc,EAAI,EACX,IAAMA,EAAc,EAAK,GAC/B,CAACA,CAAa,CAAC,EAGhBG,EAAA,cAACC,EAAY,QAAZ,CAAoB,QAAO,IAC1BD,EAAA,cAACE,EAAA,CACC,MAAOR,EACP,KAAK,KACL,WAAW,SACX,MAAM,UACL,GAAGE,EACJ,UAAWO,EAAK,SAAU,WAAY,QAAS,UAAWR,CAAS,CAAA,EAEnEK,EAAA,cAACI,EAAA,CAAK,GAAIC,CAAAA,CAAO,CACnB,CACF,CAEJ"}

package/dist/components/section-message/SectionMessageIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { Icon } from '../icon';
 type SectionMessageIconProps = Partial<React.ComponentProps<typeof Icon>>;
-export declare const SectionMessageIcon: ({ css, is, ...rest }: SectionMessageIconProps) => JSX.Element;
+export declare const SectionMessageIcon: ({ className, is, ...rest }: SectionMessageIconProps) => JSX.Element;
 export {};

package/dist/components/section-message/SectionMessageIcon.js

@@ -1,2 +1,2 @@
-import{OkCircle as c,Danger as i,Error as m,Info as e}from"@atom-learning/icons";import a,{useEffect as f}from"react";import{Icon as l}from"../icon/Icon.js";import{useSectionMessageContext as u}from"./SectionMessageContext.js";const p={success:c,warning:i,error:m,neutral:e,info:e},g=({css:r,is:t,...s})=>{const{theme:n,setHasIcon:o}=u();return f(()=>(o(!0),()=>o(!1)),[o]),a.createElement(l,{css:{m:"auto",position:"absolute",left:"$4",top:"$4",color:"currentColor",...r},is:t||p[n],size:"sm",...s})};export{g as SectionMessageIcon};
+import{OkCircle as c,Danger as m,Error as a,Info as t}from"@atom-learning/icons";import i from"clsx";import f,{useEffect as u}from"react";import{Icon as l}from"../icon/Icon.js";import{useSectionMessageContext as p}from"./SectionMessageContext.js";const I={success:c,warning:m,error:a,neutral:t,info:t},g=({className:o,is:r,...s})=>{const{theme:n,setHasIcon:e}=p();return u(()=>(e(!0),()=>e(!1)),[e]),f.createElement(l,{is:r||I[n],size:"sm",...s,className:i("m-auto","absolute","left-4","top-4","text-current",o)})};export{g as SectionMessageIcon};
 //# sourceMappingURL=SectionMessageIcon.js.map

package/dist/components/section-message/SectionMessageIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageIcon.js","sources":["../../../src/components/section-message/SectionMessageIcon.tsx"],"sourcesContent":["import { Danger, Error, Info, OkCircle } from '@atom-learning/icons'\nimport React, { useEffect } from 'react'\n\nimport { Icon } from '../icon'\nimport { useSectionMessageContext } from './SectionMessageContext'\n\nconst themeIcons = {\n  success: OkCircle,\n  warning: Danger,\n  error: Error,\n  neutral: Info,\n  info: Info\n}\n\ntype SectionMessageIconProps = Partial<React.ComponentProps<typeof Icon>>\n\nexport const SectionMessageIcon = ({\n  css,\n  is,\n  ...rest\n}: SectionMessageIconProps): JSX.Element => {\n  const { theme, setHasIcon } = useSectionMessageContext()\n\n  useEffect(() => {\n    setHasIcon(true)\n    return () => setHasIcon(false)\n  }, [setHasIcon])\n\n  return (\n    <Icon\n      css={{\n        m: 'auto',\n        position: 'absolute',\n        left: '$4',\n        top: '$4',\n        color: 'currentColor',\n        ...css\n      }}\n      is={is || themeIcons[theme]}\n      size=\"sm\"\n      {...rest}\n    />\n  )\n}\n"],"names":["themeIcons","OkCircle","Danger","Error","Info","SectionMessageIcon","css","is","rest","theme","setHasIcon","useSectionMessageContext","useEffect","React","Icon"],"mappings":"mOAMA,MAAMA,EAAa,CACjB,QAASC,EACT,QAASC,EACT,MAAOC,EACP,QAASC,EACT,KAAMA,CACR,EAIaC,EAAqB,CAAC,CACjC,IAAAC,EACA,GAAAC,KACGC,CACL,IAA4C,CAC1C,KAAM,CAAE,MAAAC,EAAO,WAAAC,CAAW,EAAIC,IAE9B,OAAAC,EAAU,KACRF,EAAW,EAAI,EACR,IAAMA,EAAW,EAAK,GAC5B,CAACA,CAAU,CAAC,EAGbG,EAAA,cAACC,EAAA,CACC,IAAK,CACH,EAAG,OACH,SAAU,WACV,KAAM,KACN,IAAK,KACL,MAAO,eACP,GAAGR,CACL,EACA,GAAIC,GAAMP,EAAWS,GACrB,KAAK,KACJ,GAAGD,CAAAA,CACN,CAEJ"}
+{"version":3,"file":"SectionMessageIcon.js","sources":["../../../src/components/section-message/SectionMessageIcon.tsx"],"sourcesContent":["import { Danger, Error, Info, OkCircle } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport React, { useEffect } from 'react'\n\nimport { Icon } from '../icon'\nimport { useSectionMessageContext } from './SectionMessageContext'\n\nconst themeIcons = {\n  success: OkCircle,\n  warning: Danger,\n  error: Error,\n  neutral: Info,\n  info: Info\n}\n\ntype SectionMessageIconProps = Partial<React.ComponentProps<typeof Icon>>\n\nexport const SectionMessageIcon = ({\n  className,\n  is,\n  ...rest\n}: SectionMessageIconProps): JSX.Element => {\n  const { theme, setHasIcon } = useSectionMessageContext()\n\n  useEffect(() => {\n    setHasIcon(true)\n    return () => setHasIcon(false)\n  }, [setHasIcon])\n\n  return (\n    <Icon\n      is={is || themeIcons[theme]}\n      size=\"sm\"\n      {...rest}\n      className={clsx(\n        'm-auto',\n        'absolute',\n        'left-4',\n        'top-4',\n        'text-current',\n        className\n      )}\n    />\n  )\n}\n"],"names":["themeIcons","OkCircle","Danger","Error","Info","SectionMessageIcon","className","is","rest","theme","setHasIcon","useSectionMessageContext","useEffect","React","Icon","clsx"],"mappings":"uPAOA,MAAMA,EAAa,CACjB,QAASC,EACT,QAASC,EACT,MAAOC,EACP,QAASC,EACT,KAAMA,CACR,EAIaC,EAAqB,CAAC,CACjC,UAAAC,EACA,GAAAC,EACA,GAAGC,CACL,IAA4C,CAC1C,KAAM,CAAE,MAAAC,EAAO,WAAAC,CAAW,EAAIC,EAAyB,EAEvD,OAAAC,EAAU,KACRF,EAAW,EAAI,EACR,IAAMA,EAAW,EAAK,GAC5B,CAACA,CAAU,CAAC,EAGbG,EAAA,cAACC,EAAA,CACC,GAAIP,GAAMP,EAAWS,CAAK,EAC1B,KAAK,KACJ,GAAGD,EACJ,UAAWO,EACT,SACA,WACA,SACA,QACA,eACAT,CACF,CAAA,CACF,CAEJ"}

package/dist/components/section-message/SectionMessageLayout.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
-import { Box } from '../box';
 import { Flex } from '../flex';
-export declare const SectionMessageContent: ({ css, ...rest }: React.ComponentProps<typeof Box>) => JSX.Element;
-export declare const SectionMessageActions: ({ css, ...rest }: React.ComponentProps<typeof Flex>) => JSX.Element;
+export declare const SectionMessageContent: ({ className, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+}) => JSX.Element;
+export declare const SectionMessageActions: ({ className, ...rest }: React.ComponentProps<typeof Flex> & {
+    className?: string;
+}) => JSX.Element;

package/dist/components/section-message/SectionMessageLayout.js

@@ -1,2 +1,2 @@
-import o from"react";import{Box as s}from"../box/Box.js";import{Flex as r}from"../flex/Flex.js";const a=({css:e,...t})=>o.createElement(s,{css:{maxWidth:"100%",flexShrink:0,paddingTop:"$0",["& > *:not(:last-child)"]:{mb:"$2"},...e},...t}),n=({css:e,...t})=>o.createElement(s,{css:{maxWidth:"100%",flexShrink:0,...e}},o.createElement(r,{wrap:"wrap",gap:3,...t}));export{n as SectionMessageActions,a as SectionMessageContent};
+import s from"clsx";import t from"react";import{Flex as m}from"../flex/Flex.js";const l=({className:e,...a})=>t.createElement("div",{...a,className:s("max-w-full","shrink-0","pt-0.5","*:not-last:mb-2",e)}),r=({className:e,...a})=>t.createElement("div",{className:s("max-w-full","shrink-0",e)},t.createElement(m,{wrap:"wrap",gap:3,...a}));export{r as SectionMessageActions,l as SectionMessageContent};
 //# sourceMappingURL=SectionMessageLayout.js.map

package/dist/components/section-message/SectionMessageLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageLayout.js","sources":["../../../src/components/section-message/SectionMessageLayout.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Box } from '../box'\nimport { Flex } from '../flex'\n\nexport const SectionMessageContent = ({\n  css,\n  ...rest\n}: React.ComponentProps<typeof Box>): JSX.Element => (\n  <Box\n    css={{\n      maxWidth: '100%',\n      flexShrink: 0,\n      paddingTop: '$0',\n      ['& > *:not(:last-child)']: { mb: '$2' },\n      ...css\n    }}\n    {...rest}\n  />\n)\n\nexport const SectionMessageActions = ({\n  css,\n  ...rest\n}: React.ComponentProps<typeof Flex>): JSX.Element => (\n  <Box css={{ maxWidth: '100%', flexShrink: 0, ...css }}>\n    <Flex wrap=\"wrap\" gap={3} {...rest} />\n  </Box>\n)\n"],"names":["SectionMessageContent","css","rest","React","Box","SectionMessageActions","Flex"],"mappings":"gGAKa,MAAAA,EAAwB,CAAC,CACpC,IAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CACC,IAAK,CACH,SAAU,OACV,WAAY,EACZ,WAAY,KACZ,CAAC,0BAA2B,CAAE,GAAI,IAAK,EACvC,GAAGH,CACL,EACC,GAAGC,CACN,CAAA,EAGWG,EAAwB,CAAC,CACpC,IAAAJ,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAI,IAAK,CAAE,SAAU,OAAQ,WAAY,EAAG,GAAGH,CAAI,GAClDE,EAAA,cAACG,EAAA,CAAK,KAAK,OAAO,IAAK,EAAI,GAAGJ,EAAM,CACtC"}
+{"version":3,"file":"SectionMessageLayout.js","sources":["../../../src/components/section-message/SectionMessageLayout.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Flex } from '../flex'\n\nexport const SectionMessageContent = ({\n  className,\n  ...rest\n}: React.HTMLAttributes<HTMLDivElement> & {\n  className?: string\n}): JSX.Element => (\n  <div\n    {...rest}\n    className={clsx(\n      'max-w-full',\n      'shrink-0',\n      'pt-0.5',\n      '*:not-last:mb-2',\n      className\n    )}\n  />\n)\n\nexport const SectionMessageActions = ({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Flex> & { className?: string }): JSX.Element => (\n  <div className={clsx('max-w-full', 'shrink-0', className)}>\n    <Flex wrap=\"wrap\" gap={3} {...rest} />\n  </div>\n)\n"],"names":["SectionMessageContent","className","rest","React","clsx","SectionMessageActions","Flex"],"mappings":"gFAKa,MAAAA,EAAwB,CAAC,CACpC,UAAAC,EACA,GAAGC,CACL,IAGEC,EAAA,cAAC,MAAA,CACE,GAAGD,EACJ,UAAWE,EACT,aACA,WACA,SACA,kBACAH,CACF,CAAA,CACF,EAGWI,EAAwB,CAAC,CACpC,UAAAJ,EACA,GAAGC,CACL,IACEC,EAAA,cAAC,MAAA,CAAI,UAAWC,EAAK,aAAc,WAAYH,CAAS,CAAA,EACtDE,EAAA,cAACG,EAAA,CAAK,KAAK,OAAO,IAAK,EAAI,GAAGJ,CAAAA,CAAM,CACtC"}