npm - @atom-learning/components - Versions diffs - 5.12.0 → 5.13.0-beta.0 - Mend

@atom-learning/components 5.12.0 → 5.13.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (363) hide show

package/dist/components/accordion/Accordion.d.ts CHANGED Viewed

@@ -26,6 +26,8 @@ declare const StyledRoot: import("@atom-learning/stitches-react/types/styled-com
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

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

@@ -23,6 +23,8 @@ declare const StyledContent: import("@atom-learning/stitches-react/types/styled-
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/accordion/AccordionContent.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Content as i}from"@radix-ui/react-accordion";import t from"react";import{keyframes as o,styled as n}from"../../stitches.js";import{CSSWrapper as m}from"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const d=o({from:{height:0},to:{height:"var(--radix-accordion-content-height)"}}),s=o({from:{height:"var(--radix-accordion-content-height)"},to:{height:0}}),c=n(i,{border:0,width:"100%",bg:"$base1",overflow:"hidden",'&[data-state="open"]':{borderRadius:"0 0 $0 $0"},"@allowMotion":{'&[data-state="open"]':{animation:`${d} 300ms ease-out`},'&[data-state="closed"]':{animation:`${s} 300ms ease-out`}}}),h=({children:e,css:r,...a})=>t.createElement(c,{...a},t.createElement(m,{css:r},e));export{h as AccordionContent};
+import{Content as i}from"@radix-ui/react-accordion";import t from"react";import{keyframes as o,styled as n}from"../../stitches.js";import{CSSWrapper as m}from"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";const d=o({from:{height:0},to:{height:"var(--radix-accordion-content-height)"}}),s=o({from:{height:"var(--radix-accordion-content-height)"},to:{height:0}}),c=n(i,{border:0,width:"100%",bg:"$base1",overflow:"hidden",'&[data-state="open"]':{borderRadius:"0 0 $0 $0"},"@allowMotion":{'&[data-state="open"]':{animation:`${d} 300ms ease-out`},'&[data-state="closed"]':{animation:`${s} 300ms ease-out`}}}),h=({children:e,css:r,...a})=>t.createElement(c,{...a},t.createElement(m,{css:r},e));export{h as AccordionContent};
 //# sourceMappingURL=AccordionContent.js.map

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

@@ -23,6 +23,8 @@ export declare const AccordionItem: import("@atom-learning/stitches-react/types/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

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

@@ -26,6 +26,8 @@ declare const StyledTrigger: import("@atom-learning/stitches-react/types/styled-
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/accordion/AccordionTrigger.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{ChevronDown as s}from"@atom-learning/icons";import{Trigger as c}from"@radix-ui/react-accordion";import e from"react";import{ColorScheme as l}from"../../experiments/color-scheme/ColorScheme.js";import{styled as o}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as d}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{Icon as m}from"../icon/Icon.js";const f=o(m,{transition:"transform 300ms",'[data-state="open"] > &':{transform:"rotate(180deg)"},'[data-state="closed"] > &':{transform:"rotate(0deg)"}}),p=o(c,{border:0,py:"$3",px:"$4",width:"100%",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer",bg:"$interactive2",color:"$interactiveForeground","&[disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([disabled])":{"&:active, &:hover, &:focus-visible":{bg:"$interactive3"},"&:focus-visible":{...d()}},'&[data-state="open"]':{borderRadius:"$0 $0 0 0"},'&[data-state="closed"]':{borderRadius:"$0"},variants:{arrowPosition:{left:{flexDirection:"row-reverse",gap:"$2",justifyContent:"flex-end"},right:{}}}}),g=({children:t,colorScheme:i={},asChild:r,arrowPosition:a="right",...n})=>e.createElement(l,{asChild:!0,accent:"grey1",interactive:"loContrast",...i},e.createElement(p,{asChild:r,arrowPosition:a,...n},r?t:e.createElement(e.Fragment,null,t,e.createElement(f,{is:s,"data-testid":"accordion-chevron"}))));export{g as AccordionTrigger};
+import{ChevronDown as s}from"@atom-learning/icons";import{Trigger as c}from"@radix-ui/react-accordion";import e from"react";import{ColorScheme as d}from"../../experiments/color-scheme/ColorScheme.js";import{styled as r}from"../../stitches.js";import{Icon as l}from"../icon/Icon.js";const m=r(l,{transition:"transform 300ms",'[data-state="open"] > &':{transform:"rotate(180deg)"},'[data-state="closed"] > &':{transform:"rotate(0deg)"}}),p=r(c,{border:0,py:"$3",px:"$4",width:"100%",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer",bg:"$interactive2",color:"$interactiveForeground","&[disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([disabled])":{"&:active, &:hover, &:focus-visible":{bg:"$interactive3"},"&:focus-visible":{outline:"none",position:"relative",zIndex:1,boxShadow:"white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px"}},'&[data-state="open"]':{borderRadius:"$0 $0 0 0"},'&[data-state="closed"]':{borderRadius:"$0"},variants:{arrowPosition:{left:{flexDirection:"row-reverse",gap:"$2",justifyContent:"flex-end"},right:{}}}}),f=({children:t,colorScheme:i={},asChild:o,arrowPosition:a="right",...n})=>e.createElement(d,{asChild:!0,accent:"grey1",interactive:"loContrast",...i},e.createElement(p,{asChild:o,arrowPosition:a,...n},o?t:e.createElement(e.Fragment,null,t,e.createElement(m,{is:s,"data-testid":"accordion-chevron"}))));export{f as AccordionTrigger};
 //# sourceMappingURL=AccordionTrigger.js.map

package/dist/components/accordion/AccordionTrigger.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AccordionTrigger.js","sources":["../../../src/components/accordion/AccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\~~nimport { focusVisibleStyleBlock } from '~/utilities'\~~n\nimport { Icon } from '../icon'\n\nconst RotatingIcon = styled(Icon, {\n transition: 'transform 300ms',\n '[data-state=\"open\"] > &': {\n transform: 'rotate(180deg)'\n },\n '[data-state=\"closed\"] > &': {\n transform: 'rotate(0deg)'\n }\n})\n\nconst StyledTrigger = styled(Trigger, {\n border: 0,\n py: '$3',\n px: '$4',\n width: '100%',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n cursor: 'pointer',\n bg: '$interactive2',\n color: '$interactiveForeground',\n '&[disabled]': {\n opacity: 0.3,\n cursor: 'not-allowed'\n },\n '&:not([disabled])': {\n '&:active, &:hover, &:focus-visible': {\n bg: '$interactive3'\n },\n '&:focus-visible': {\n ~~...focusVisibleStyleBlock()\~~n }\n },\n '&[data-state=\"open\"]': {\n borderRadius: '$0 $0 0 0'\n },\n '&[data-state=\"closed\"]': {\n borderRadius: '$0'\n },\n variants: {\n arrowPosition: {\n left: {\n flexDirection: 'row-reverse',\n gap: '$2',\n justifyContent: 'flex-end'\n },\n right: {}\n }\n }\n})\n\nexport const AccordionTrigger = ({\n children,\n colorScheme = {},\n asChild,\n arrowPosition = 'right',\n ...remainingProps\n}: React.ComponentProps<typeof StyledTrigger> & {\n colorScheme?: TcolorScheme\n}) => (\n <ColorScheme asChild accent=\"grey1\" interactive=\"loContrast\" {...colorScheme}>\n <StyledTrigger\n asChild={asChild}\n arrowPosition={arrowPosition}\n {...remainingProps}\n >\n {asChild ? (\n children\n ) : (\n <>\n {children}\n <RotatingIcon is={ChevronDown} data-testid=\"accordion-chevron\" />\n </>\n )}\n </StyledTrigger>\n </ColorScheme>\n)\n"],"names":["RotatingIcon","styled","Icon","StyledTrigger","Trigger","~~focusVisibleStyleBlock","~~AccordionTrigger","children","colorScheme","asChild","arrowPosition","remainingProps","React","ColorScheme","ChevronDown"],"mappings":"~~8iBAUA~~,MAAMA,EAAeC,EAAOC,EAAM,CAChC,WAAY,kBACZ,0BAA2B,CACzB,UAAW,gBACb,EACA,4BAA6B,CAC3B,UAAW,cACb,CACF,CAAC,EAEKC,EAAgBF,EAAOG,EAAS,CACpC,OAAQ,EACR,GAAI,KACJ,GAAI,KACJ,MAAO,OACP,QAAS,OACT,eAAgB,gBAChB,WAAY,SACZ,OAAQ,UACR,GAAI,gBACJ,MAAO,yBACP,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,oBAAqB,CACnB,qCAAsC,CACpC,GAAI,eACN,EACA,kBAAmB,CACjB,~~GAAGC~~,~~EACL~~,~~CAAA~~,CACF,EACA,uBAAwB,CACtB,aAAc,WAChB,EACA,yBAA0B,CACxB,aAAc,IAChB,EACA,SAAU,CACR,cAAe,CACb,KAAM,CACJ,cAAe,cACf,IAAK,KACL,eAAgB,UAClB,EACA,MAAO,CAAA,~~CACT,~~CACF,CACF,CAAC,EAEYC,EAAmB,CAAC,CAC/B,SAAAC,EACA,YAAAC,EAAc,~~CAAA~~,~~EACd,~~QAAAC,EACA,cAAAC,EAAgB,WACbC,CACL,IAGEC,EAAA,cAACC,EAAA,CAAY,QAAO,GAAC,OAAO,QAAQ,YAAY,aAAc,GAAGL,CAAAA,EAC/DI,EAAA,~~cAACT~~,EAAA,CACC,~~QAASM~~,EACT,cAAeC,EACd,GAAGC,CAEHF,EAAAA,EACCF,EAEAK,EAAA,cAAAA,EAAA,SACGL,KAAAA,EACDK,EAAA,~~cAACZ~~,EAAA,CAAa,~~GAAIc~~,EAAa,cAAY,mBAAoB,CAAA,CACjE,CAEJ,CACF"}
1	+ {"version":3,"file":"AccordionTrigger.js","sources":["../../../src/components/accordion/AccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\n\nimport { Icon } from '../icon'\n\nconst RotatingIcon = styled(Icon, {\n transition: 'transform 300ms',\n '[data-state=\"open\"] > &': {\n transform: 'rotate(180deg)'\n },\n '[data-state=\"closed\"] > &': {\n transform: 'rotate(0deg)'\n }\n})\n\nconst StyledTrigger = styled(Trigger, {\n border: 0,\n py: '$3',\n px: '$4',\n width: '100%',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n cursor: 'pointer',\n bg: '$interactive2',\n color: '$interactiveForeground',\n '&[disabled]': {\n opacity: 0.3,\n cursor: 'not-allowed'\n },\n '&:not([disabled])': {\n '&:active, &:hover, &:focus-visible': {\n bg: '$interactive3'\n },\n '&:focus-visible': {\n outline: 'none',\n position: 'relative',\n zIndex: 1,\n boxShadow: `white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`\n }\n },\n '&[data-state=\"open\"]': {\n borderRadius: '$0 $0 0 0'\n },\n '&[data-state=\"closed\"]': {\n borderRadius: '$0'\n },\n variants: {\n arrowPosition: {\n left: {\n flexDirection: 'row-reverse',\n gap: '$2',\n justifyContent: 'flex-end'\n },\n right: {}\n }\n }\n})\n\nexport const AccordionTrigger = ({\n children,\n colorScheme = {},\n asChild,\n arrowPosition = 'right',\n ...remainingProps\n}: React.ComponentProps<typeof StyledTrigger> & {\n colorScheme?: TcolorScheme\n}) => (\n <ColorScheme asChild accent=\"grey1\" interactive=\"loContrast\" {...colorScheme}>\n <StyledTrigger\n asChild={asChild}\n arrowPosition={arrowPosition}\n {...remainingProps}\n >\n {asChild ? (\n children\n ) : (\n <>\n {children}\n <RotatingIcon is={ChevronDown} data-testid=\"accordion-chevron\" />\n </>\n )}\n </StyledTrigger>\n </ColorScheme>\n)\n"],"names":["RotatingIcon","styled","Icon","StyledTrigger","Trigger","AccordionTrigger","children","colorScheme","asChild","arrowPosition","remainingProps","React","ColorScheme","ChevronDown"],"mappings":"0RASA,MAAMA,EAAeC,EAAOC,EAAM,CAChC,WAAY,kBACZ,0BAA2B,CACzB,UAAW,gBACb,EACA,4BAA6B,CAC3B,UAAW,cACb,CACF,CAAC,EAEKC,EAAgBF,EAAOG,EAAS,CACpC,OAAQ,EACR,GAAI,KACJ,GAAI,KACJ,MAAO,OACP,QAAS,OACT,eAAgB,gBAChB,WAAY,SACZ,OAAQ,UACR,GAAI,gBACJ,MAAO,yBACP,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,oBAAqB,CACnB,qCAAsC,CACpC,GAAI,eACN,EACA,kBAAmB,CACjB,QAAS,OACT,SAAU,WACV,OAAQ,EACR,UAAW,2DACb,CACF,EACA,uBAAwB,CACtB,aAAc,WAChB,EACA,yBAA0B,CACxB,aAAc,IAChB,EACA,SAAU,CACR,cAAe,CACb,KAAM,CACJ,cAAe,cACf,IAAK,KACL,eAAgB,UAClB,EACA,MAAO,CACT,CAAA,CACF,CACF,CAAC,EAEYC,EAAmB,CAAC,CAC/B,SAAAC,EACA,YAAAC,EAAc,GACd,QAAAC,EACA,cAAAC,EAAgB,WACbC,CACL,IAGEC,EAAA,cAACC,EAAA,CAAY,QAAO,GAAC,OAAO,QAAQ,YAAY,aAAc,GAAGL,CAAAA,EAC/DI,EAAA,cAACR,EAAA,CACC,QAASK,EACT,cAAeC,EACd,GAAGC,CAEHF,EAAAA,EACCF,EAEAK,EAAA,cAAAA,EAAA,SACGL,KAAAA,EACDK,EAAA,cAACX,EAAA,CAAa,GAAIa,EAAa,cAAY,mBAAoB,CAAA,CACjE,CAEJ,CACF"}

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

@@ -4,7 +4,7 @@ import { NavigatorActions } from '../../types';
 import { Override } from '../../utilities';
 import type { TOptionalTooltipWrapperProps } from '../../utilities/optional-tooltip-wrapper';
 declare const StyledButton: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"button", {
-    theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
+    theme?: "white" | "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
     appearance?: "outline" | "solid" | "simple" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     isRounded?: boolean | "true" | undefined;
@@ -32,6 +32,8 @@ declare const StyledButton: import("@atom-learning/stitches-react/types/styled-c
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/action-icon/ActionIcon.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import f from"invariant";import*as s from"react";import{styled as w}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as k}from"../../utilities/style/disabledStyle.js";import{getExternalAnchorProps as D}from"../../utilities/uri/index.js";import{Icon as m}from"../icon/Icon.js";import{ActionIconSizeMap as v}from"./ActionIcon.constants.js";import{OptionalTooltipWrapper as z}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";const o=(r,i,a,e)=>({theme:r,appearance:"simple",css:{bg:"transparent",color:i,"&:not(:disabled):hover, &:not(:disabled):focus":{color:a},"&:not(:disabled):active":{color:e}}}),p=(r,i,a,e)=>({theme:r,appearance:"solid",css:{bg:i,color:"white","&:not(:disabled):hover, &:not(:disabled):focus":{bg:a,color:"white"},"&:not(:disabled):active":{bg:e}}}),t=(r,i,a,e)=>({theme:r,appearance:"outline",css:{bg:"unset",border:"1px solid",borderColor:"currentColor",color:i,"&:not(:disabled):hover, &:not(:disabled):focus":{color:a},"&:not(:disabled):active":{color:e}}}),M=w("button",{alignItems:"center",appearance:"none",bg:"white",border:"unset",borderRadius:"$1",boxSizing:"border-box",cursor:"pointer",display:"flex",flexShrink:0,justifyContent:"center",p:"unset",transition:"all 100ms ease-out","&[disabled]":k,variants:{theme:{neutral:{},primary:{},success:{},warning:{},danger:{},white:{}},appearance:{simple:{},outline:{},solid:{}},size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[o("neutral","$grey700","$primary900","$primary1000"),o("primary","$primary800","$primary900","$primary1000"),o("primaryDark","$primary1000","$primary1100","$primary1200"),o("success","$success","$successMid","$successDark"),o("warning","$warning","$warningMid","$warningDark"),o("danger","$danger","$dangerMid","$dangerDark"),o("white","#fff","#fff","#fff"),p("primary","$primary800","$primary900","$primary1000"),p("primaryDark","$primary1000","$primary1100","$primary1200"),p("success","$success","$successMid","$successDark"),p("warning","$warning","$warningMid","$warningDark"),p("danger","$danger","$dangerMid","$dangerDark"),t("primary","$primary800","$primary900","$primary1000"),t("primaryDark","$primary1000","$primary1100","$primary1200"),t("success","$success","$successMid","$successDark"),t("warning","$warning","$warningMid","$warningDark"),t("danger","$danger","$dangerMid","$dangerDark"),t("white","#fff","#fff","#fff")]}),d=s.forwardRef(({children:r,theme:i="primary",appearance:a="simple",size:e="sm",label:$,href:l,disabled:c,hasTooltip:u=!0,tooltipSide:g,...b},h)=>{const y=`A single ${m.displayName} component is permitted as a child of ${d.displayName}`;return f(s.Children.count(r)===1,y),s.createElement(z,{hasTooltip:u,label:$,tooltipSide:g},s.createElement(M,{...l?{as:"a",href:c?null:l,onClick:void 0,"aria-disabled":!!c}:{type:"button"},...D(l),...b,"aria-label":$,theme:i,appearance:a,size:e,ref:h,disabled:c},s.Children.map(r,n=>{if(!s.isValidElement(n))throw new Error(y);return f(n.type===m,`Children of type ${n==null?void 0:n.type} aren't permitted. Only an ${m.displayName} component is allowed in ${d.displayName}`),s.cloneElement(n,{size:v[e],css:{...n.props.css?n.props.css:{}}})})))});d.displayName="ActionIcon";export{d as ActionIcon};
+import u from"invariant";import*as s from"react";import{styled as w}from"../../stitches.js";import{getExternalAnchorProps as k}from"../../utilities/uri/index.js";import{Icon as m}from"../icon/Icon.js";import{ActionIconSizeMap as D}from"./ActionIcon.constants.js";import{OptionalTooltipWrapper as v}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";const o=(r,a,i,e)=>({theme:r,appearance:"simple",css:{bg:"transparent",color:a,"&:not(:disabled):hover, &:not(:disabled):focus":{color:i},"&:not(:disabled):active":{color:e}}}),p=(r,a,i,e)=>({theme:r,appearance:"solid",css:{bg:a,color:"white","&:not(:disabled):hover, &:not(:disabled):focus":{bg:i,color:"white"},"&:not(:disabled):active":{bg:e}}}),t=(r,a,i,e)=>({theme:r,appearance:"outline",css:{bg:"unset",border:"1px solid",borderColor:"currentColor",color:a,"&:not(:disabled):hover, &:not(:disabled):focus":{color:i},"&:not(:disabled):active":{color:e}}}),z=w("button",{alignItems:"center",appearance:"none",bg:"white",border:"unset",borderRadius:"$1",boxSizing:"border-box",cursor:"pointer",display:"flex",flexShrink:0,justifyContent:"center",p:"unset",transition:"all 100ms ease-out","&[disabled]":{opacity:.3,cursor:"not-allowed"},variants:{theme:{neutral:{},primary:{},success:{},warning:{},danger:{},white:{}},appearance:{simple:{},outline:{},solid:{}},size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[o("neutral","$grey700","$primary900","$primary1000"),o("primary","$primary800","$primary900","$primary1000"),o("primaryDark","$primary1000","$primary1100","$primary1200"),o("success","$success","$successMid","$successDark"),o("warning","$warning","$warningMid","$warningDark"),o("danger","$danger","$dangerMid","$dangerDark"),o("white","#fff","#fff","#fff"),p("primary","$primary800","$primary900","$primary1000"),p("primaryDark","$primary1000","$primary1100","$primary1200"),p("success","$success","$successMid","$successDark"),p("warning","$warning","$warningMid","$warningDark"),p("danger","$danger","$dangerMid","$dangerDark"),t("primary","$primary800","$primary900","$primary1000"),t("primaryDark","$primary1000","$primary1100","$primary1200"),t("success","$success","$successMid","$successDark"),t("warning","$warning","$warningMid","$warningDark"),t("danger","$danger","$dangerMid","$dangerDark"),t("white","#fff","#fff","#fff")]}),d=s.forwardRef(({children:r,theme:a="primary",appearance:i="simple",size:e="sm",label:$,href:l,disabled:c,hasTooltip:f=!0,tooltipSide:g,...b},h)=>{const y=`A single ${m.displayName} component is permitted as a child of ${d.displayName}`;return u(s.Children.count(r)===1,y),s.createElement(v,{hasTooltip:f,label:$,tooltipSide:g},s.createElement(z,{...l?{as:"a",href:c?null:l,onClick:void 0,"aria-disabled":!!c}:{type:"button"},...k(l),...b,"aria-label":$,theme:a,appearance:i,size:e,ref:h,disabled:c},s.Children.map(r,n=>{if(!s.isValidElement(n))throw new Error(y);return u(n.type===m,`Children of type ${n==null?void 0:n.type} aren't permitted. Only an ${m.displayName} component is allowed in ${d.displayName}`),s.cloneElement(n,{size:D[e],css:{...n.props.css?n.props.css:{}}})})))});d.displayName="ActionIcon";export{d as ActionIcon};
 //# sourceMappingURL=ActionIcon.js.map

package/dist/components/action-icon/ActionIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionIcon.js","sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import type { VariantProps } from '@atom-learning/stitches-react'\nimport invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { ~~disabledStyle,~~ Override } from '~/utilities'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst getSimpleVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'simple',\n css: {\n bg: 'transparent',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n '&:not(:disabled):active': { color: active }\n }\n})\n\nconst getSolidVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'solid',\n css: {\n bg: base,\n color: 'white',\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n bg: interact,\n color: 'white'\n },\n '&:not(:disabled):active': { bg: active }\n }\n})\n\nconst getOutlineVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'outline',\n css: {\n bg: 'unset',\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n '&:not(:disabled):active': { color: active }\n }\n})\n\nconst StyledButton = styled('button', {\n alignItems: 'center',\n appearance: 'none',\n bg: 'white',\n border: 'unset',\n borderRadius: '$1',\n boxSizing: 'border-box',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'center',\n p: 'unset',\n transition: 'all 100ms ease-out',\n '&[disabled]': ~~disabledStyle~~,\n variants: {\n theme: {\n neutral: {},\n primary: {},\n success: {},\n warning: {},\n danger: {},\n white: {}\n },\n appearance: {\n simple: {},\n outline: {},\n solid: {}\n },\n size: {\n xs: { size: '$2' },\n sm: { size: '$3' },\n md: { size: '$4' },\n lg: { size: '$5' }\n },\n isRounded: {\n true: {\n borderRadius: '$round'\n }\n }\n },\n\n // prettier-ignore\n compoundVariants: [\n getSimpleVariant('neutral', '$grey700', '$primary900', '$primary1000'),\n getSimpleVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getSimpleVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n getSimpleVariant('success', '$success', '$successMid', '$successDark'),\n getSimpleVariant('warning', '$warning', '$warningMid', '$warningDark'),\n getSimpleVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n getSimpleVariant('white', '#fff', '#fff', '#fff'),\n\n getSolidVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getSolidVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n getSolidVariant('success', '$success', '$successMid', '$successDark'),\n getSolidVariant('warning', '$warning', '$warningMid', '$warningDark'),\n getSolidVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n\n getOutlineVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getOutlineVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n getOutlineVariant('success', '$success', '$successMid', '$successDark'),\n getOutlineVariant('warning', '$warning', '$warningMid', '$warningDark'),\n getOutlineVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n getOutlineVariant('white', '#fff', '#fff', '#fff')\n ]\n})\n\ntype ActionIconProps = Override<\n React.ComponentProps<typeof StyledButton>,\n VariantProps<typeof StyledButton> & {\n as?: string \| React.ReactNode\n children: React.ReactNode\n label: string\n } & Omit<TOptionalTooltipWrapperProps, 'label'> &\n NavigatorActions\n>\n\nexport const ActionIcon: React.ForwardRefExoticComponent<ActionIconProps> =\n React.forwardRef(\n (\n {\n children,\n theme = 'primary',\n appearance = 'simple',\n size = 'sm',\n label,\n href,\n disabled,\n hasTooltip = true,\n tooltipSide,\n ...remainingProps\n },\n ref\n ) => {\n const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n const optionalLinkProps = href\n ? ({\n as: 'a',\n href: disabled ? null : href,\n onClick: undefined,\n 'aria-disabled': !!disabled\n } as const)\n : ({ type: 'button' } as const)\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={hasTooltip}\n label={label}\n tooltipSide={tooltipSide}\n >\n <StyledButton\n {...optionalLinkProps}\n {...getExternalAnchorProps(href)}\n {...remainingProps}\n aria-label={label}\n theme={theme}\n appearance={appearance}\n size={size}\n ref={ref}\n disabled={disabled}\n >\n {React.Children.map(children, (child) => {\n // TS needs this check for any following code to access child.type\n // even with optional chaining\n if (!React.isValidElement(child)) {\n throw new Error(INVALID_CHILDREN_MESSAGE)\n }\n\n invariant(\n child.type === Icon,\n `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n )\n\n return React.cloneElement(\n child as React.ReactElement<React.ComponentProps<typeof Icon>>,\n {\n size: ActionIconSizeMap[size as string],\n css: { ...(child.props.css ? child.props.css : {}) }\n }\n )\n })}\n </StyledButton>\n </OptionalTooltipWrapper>\n )\n }\n )\n\nActionIcon.displayName = 'ActionIcon'\n"],"names":["getSimpleVariant","theme","base","interact","active","getSolidVariant","getOutlineVariant","StyledButton","styled","~~disabledStyle","~~ActionIcon","React","children","appearance","size","label","href","disabled","hasTooltip","tooltipSide","remainingProps","ref","INVALID_CHILDREN_MESSAGE","Icon","invariant","OptionalTooltipWrapper","getExternalAnchorProps","child","ActionIconSizeMap"],"mappings":"~~knBAcA~~,MAAMA,EAAmB,CACvBC,EACAC,EACAC,EACAC,KACI,CACJ,MAAAH,EACA,WAAY,SACZ,IAAK,CACH,GAAI,cACJ,MAAOC,EACP,iDAAkD,CAAE,MAAOC,CAAS,EACpE,0BAA2B,CAAE,MAAOC,CAAO,CAC7C,CACF,GAEMC,EAAkB,CACtBJ,EACAC,EACAC,EACAC,KACI,CACJ,MAAAH,EACA,WAAY,QACZ,IAAK,CACH,GAAIC,EACJ,MAAO,QACP,iDAAkD,CAChD,GAAIC,EACJ,MAAO,OACT,EACA,0BAA2B,CAAE,GAAIC,CAAO,CAC1C,CACF,GAEME,EAAoB,CACxBL,EACAC,EACAC,EACAC,KACI,CACJ,MAAAH,EACA,WAAY,UACZ,IAAK,CACH,GAAI,QACJ,OAAQ,YACR,YAAa,eACb,MAAOC,EACP,iDAAkD,CAAE,MAAOC,CAAS,EACpE,0BAA2B,CAAE,MAAOC,CAAO,CAC7C,CACF,GAEMG,EAAeC,EAAO,SAAU,CACpC,WAAY,SACZ,WAAY,OACZ,GAAI,QACJ,OAAQ,QACR,aAAc,KACd,UAAW,aACX,OAAQ,UACR,QAAS,OACT,WAAY,EACZ,eAAgB,SAChB,EAAG,QACH,WAAY,qBACZ,~~cAAeC~~,~~EACf~~,SAAU,CACR,MAAO,CACL,QAAS,~~GACT~~,QAAS,~~CACT~~,~~EAAA~~,QAAS,~~CAAA~~,~~EACT,~~QAAS,~~CAAA~~,~~EACT~~,OAAQ,~~GACR~~,MAAO,CACT,~~CAAA,~~EACA,WAAY,CACV,OAAQ,~~CAAA~~,~~EACR~~,QAAS,GACT,MAAO,CAAA,CACT,EACA,KAAM,CACJ,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,CACnB,EACA,UAAW,CACT,KAAM,CACJ,aAAc,QAChB,CACF,CACF,EAGA,iBAAkB,~~CAChBT~~,EAAiB,UAAW,WAAY,cAAe,cAAc,EACrEA,EAAiB,UAAW,cAAe,cAAe,cAAc,EACxEA,EAAiB,cAAe,eAAgB,eAAgB,cAAc,EAC9EA,EAAiB,UAAW,WAAY,cAAe,cAAc,EACrEA,EAAiB,UAAW,WAAY,cAAe,cAAc,EACrEA,EAAiB,SAAU,UAAW,aAAc,aAAa,EACjEA,EAAiB,QAAS,OAAQ,OAAQ,MAAM,EAEhDK,EAAgB,UAAW,cAAe,cAAe,cAAc,EACvEA,EAAgB,cAAe,eAAgB,eAAgB,cAAc,EAC7EA,EAAgB,UAAW,WAAY,cAAe,cAAc,EACpEA,EAAgB,UAAW,WAAY,cAAe,cAAc,EACpEA,EAAgB,SAAU,UAAW,aAAc,aAAa,EAEhEC,EAAkB,UAAW,cAAe,cAAe,cAAc,EACzEA,EAAkB,cAAe,eAAgB,eAAgB,cAAc,EAC/EA,EAAkB,UAAW,WAAY,cAAe,cAAc,EACtEA,EAAkB,UAAW,WAAY,cAAe,cAAc,EACtEA,EAAkB,SAAU,UAAW,aAAc,aAAa,EAClEA,EAAkB,QAAS,OAAQ,OAAQ,MAAM,CACnD,CACF,CAAC,~~EAYYI~~,EACXC,EAAM,WACJ,CACE,CACE,SAAAC,EACA,~~MAAAX~~,EAAQ,UACR,~~WAAAY~~,EAAa,SACb,KAAAC,EAAO,KACP,MAAAC,EACA,KAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,YAAAC,KACGC,CACL,EACAC,IACG,CACH,MAAMC,EAA2B,YAAYC,EAAK,oDAAoDb,EAAW,cAEjH,OAAAc,EAAUb,EAAM,SAAS,MAAMC,CAAQ,IAAM,EAAGU,CAAwB,EAYtEX,EAAA,cAACc,EAAA,CACC,WAAYP,EACZ,MAAOH,EACP,YAAaI,CAAAA,EAEbR,EAAA,~~cAACJ~~,EAAA,CACE,~~GAhBmBS~~,EACrB,CACC,GAAI,IACJ,KAAMC,EAAW,KAAOD,EACxB,QAAS,OACT,gBAAiB,CAAC,CAACC,CACrB,EACC,CAAE,KAAM,QAAS,EAUf,GAAGS,EAAuBV,CAAI,EAC9B,GAAGI,EACJ,aAAYL,EACZ,~~MAAOd~~,EACP,~~WAAYY~~,EACZ,KAAMC,EACN,IAAKO,EACL,SAAUJ,GAETN,EAAM,SAAS,IAAIC,EAAWe,GAAU,CAGvC,GAAI,CAAChB,EAAM,eAAegB,CAAK,EAC7B,MAAM,IAAI,MAAML,CAAwB,EAG1C,OAAAE,EACEG,EAAM,OAASJ,EACf,oBAAoBI,GAAA,KAAAA,OAAAA,EAAO,kCAAkCJ,EAAK,uCAAuCb,EAAW,aACtH,EAEOC,EAAM,aACXgB,EACA,CACE,KAAMC,EAAkBd,GACxB,IAAK,CAAE,GAAIa,EAAM,MAAM,IAAMA,EAAM,MAAM,IAAM,CAAA,~~CAAI,~~CACrD,CACF,CACF,CAAC,CACH,CACF,CAEJ,CACF,EAEFjB,EAAW,YAAc"}
1	+ {"version":3,"file":"ActionIcon.js","sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import type { VariantProps } from '@atom-learning/stitches-react'\nimport invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst getSimpleVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'simple',\n css: {\n bg: 'transparent',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n '&:not(:disabled):active': { color: active }\n }\n})\n\nconst getSolidVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'solid',\n css: {\n bg: base,\n color: 'white',\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n bg: interact,\n color: 'white'\n },\n '&:not(:disabled):active': { bg: active }\n }\n})\n\nconst getOutlineVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'outline',\n css: {\n bg: 'unset',\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n '&:not(:disabled):active': { color: active }\n }\n})\n\nconst StyledButton = styled('button', {\n alignItems: 'center',\n appearance: 'none',\n bg: 'white',\n border: 'unset',\n borderRadius: '$1',\n boxSizing: 'border-box',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'center',\n p: 'unset',\n transition: 'all 100ms ease-out',\n '&[disabled]': {\n opacity: 0.3,\n cursor: 'not-allowed'\n },\n variants: {\n theme: {\n neutral: {},\n primary: {},\n success: {},\n warning: {},\n danger: {},\n white: {}\n },\n appearance: {\n simple: {},\n outline: {},\n solid: {}\n },\n size: {\n xs: { size: '$2' },\n sm: { size: '$3' },\n md: { size: '$4' },\n lg: { size: '$5' }\n },\n isRounded: {\n true: {\n borderRadius: '$round'\n }\n }\n },\n\n // prettier-ignore\n compoundVariants: [\n getSimpleVariant('neutral', '$grey700', '$primary900', '$primary1000'),\n getSimpleVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getSimpleVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n getSimpleVariant('success', '$success', '$successMid', '$successDark'),\n getSimpleVariant('warning', '$warning', '$warningMid', '$warningDark'),\n getSimpleVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n getSimpleVariant('white', '#fff', '#fff', '#fff'),\n\n getSolidVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getSolidVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n getSolidVariant('success', '$success', '$successMid', '$successDark'),\n getSolidVariant('warning', '$warning', '$warningMid', '$warningDark'),\n getSolidVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n\n getOutlineVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getOutlineVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n getOutlineVariant('success', '$success', '$successMid', '$successDark'),\n getOutlineVariant('warning', '$warning', '$warningMid', '$warningDark'),\n getOutlineVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n getOutlineVariant('white', '#fff', '#fff', '#fff')\n ]\n})\n\ntype ActionIconProps = Override<\n React.ComponentProps<typeof StyledButton>,\n VariantProps<typeof StyledButton> & {\n as?: string \| React.ReactNode\n children: React.ReactNode\n label: string\n } & Omit<TOptionalTooltipWrapperProps, 'label'> &\n NavigatorActions\n>\n\nexport const ActionIcon: React.ForwardRefExoticComponent<ActionIconProps> =\n React.forwardRef(\n (\n {\n children,\n theme = 'primary',\n appearance = 'simple',\n size = 'sm',\n label,\n href,\n disabled,\n hasTooltip = true,\n tooltipSide,\n ...remainingProps\n },\n ref\n ) => {\n const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n const optionalLinkProps = href\n ? ({\n as: 'a',\n href: disabled ? null : href,\n onClick: undefined,\n 'aria-disabled': !!disabled\n } as const)\n : ({ type: 'button' } as const)\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={hasTooltip}\n label={label}\n tooltipSide={tooltipSide}\n >\n <StyledButton\n {...optionalLinkProps}\n {...getExternalAnchorProps(href)}\n {...remainingProps}\n aria-label={label}\n theme={theme}\n appearance={appearance}\n size={size}\n ref={ref}\n disabled={disabled}\n >\n {React.Children.map(children, (child) => {\n // TS needs this check for any following code to access child.type\n // even with optional chaining\n if (!React.isValidElement(child)) {\n throw new Error(INVALID_CHILDREN_MESSAGE)\n }\n\n invariant(\n child.type === Icon,\n `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n )\n\n return React.cloneElement(\n child as React.ReactElement<React.ComponentProps<typeof Icon>>,\n {\n size: ActionIconSizeMap[size as string],\n css: { ...(child.props.css ? child.props.css : {}) }\n }\n )\n })}\n </StyledButton>\n </OptionalTooltipWrapper>\n )\n }\n )\n\nActionIcon.displayName = 'ActionIcon'\n"],"names":["getSimpleVariant","theme","base","interact","active","getSolidVariant","getOutlineVariant","StyledButton","styled","ActionIcon","React","children","appearance","size","label","href","disabled","hasTooltip","tooltipSide","remainingProps","ref","INVALID_CHILDREN_MESSAGE","Icon","invariant","OptionalTooltipWrapper","getExternalAnchorProps","child","ActionIconSizeMap"],"mappings":"mXAcA,MAAMA,EAAmB,CACvBC,EACAC,EACAC,EACAC,KACI,CACJ,MAAAH,EACA,WAAY,SACZ,IAAK,CACH,GAAI,cACJ,MAAOC,EACP,iDAAkD,CAAE,MAAOC,CAAS,EACpE,0BAA2B,CAAE,MAAOC,CAAO,CAC7C,CACF,GAEMC,EAAkB,CACtBJ,EACAC,EACAC,EACAC,KACI,CACJ,MAAAH,EACA,WAAY,QACZ,IAAK,CACH,GAAIC,EACJ,MAAO,QACP,iDAAkD,CAChD,GAAIC,EACJ,MAAO,OACT,EACA,0BAA2B,CAAE,GAAIC,CAAO,CAC1C,CACF,GAEME,EAAoB,CACxBL,EACAC,EACAC,EACAC,KACI,CACJ,MAAAH,EACA,WAAY,UACZ,IAAK,CACH,GAAI,QACJ,OAAQ,YACR,YAAa,eACb,MAAOC,EACP,iDAAkD,CAAE,MAAOC,CAAS,EACpE,0BAA2B,CAAE,MAAOC,CAAO,CAC7C,CACF,GAEMG,EAAeC,EAAO,SAAU,CACpC,WAAY,SACZ,WAAY,OACZ,GAAI,QACJ,OAAQ,QACR,aAAc,KACd,UAAW,aACX,OAAQ,UACR,QAAS,OACT,WAAY,EACZ,eAAgB,SAChB,EAAG,QACH,WAAY,qBACZ,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,SAAU,CACR,MAAO,CACL,QAAS,CAAA,EACT,QAAS,CAAC,EACV,QAAS,GACT,QAAS,CAAC,EACV,OAAQ,CAAA,EACR,MAAO,CAAA,CACT,EACA,WAAY,CACV,OAAQ,CAAC,EACT,QAAS,GACT,MAAO,CAAA,CACT,EACA,KAAM,CACJ,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,CACnB,EACA,UAAW,CACT,KAAM,CACJ,aAAc,QAChB,CACF,CACF,EAGA,iBAAkB,CAChBR,EAAiB,UAAW,WAAY,cAAe,cAAc,EACrEA,EAAiB,UAAW,cAAe,cAAe,cAAc,EACxEA,EAAiB,cAAe,eAAgB,eAAgB,cAAc,EAC9EA,EAAiB,UAAW,WAAY,cAAe,cAAc,EACrEA,EAAiB,UAAW,WAAY,cAAe,cAAc,EACrEA,EAAiB,SAAU,UAAW,aAAc,aAAa,EACjEA,EAAiB,QAAS,OAAQ,OAAQ,MAAM,EAEhDK,EAAgB,UAAW,cAAe,cAAe,cAAc,EACvEA,EAAgB,cAAe,eAAgB,eAAgB,cAAc,EAC7EA,EAAgB,UAAW,WAAY,cAAe,cAAc,EACpEA,EAAgB,UAAW,WAAY,cAAe,cAAc,EACpEA,EAAgB,SAAU,UAAW,aAAc,aAAa,EAEhEC,EAAkB,UAAW,cAAe,cAAe,cAAc,EACzEA,EAAkB,cAAe,eAAgB,eAAgB,cAAc,EAC/EA,EAAkB,UAAW,WAAY,cAAe,cAAc,EACtEA,EAAkB,UAAW,WAAY,cAAe,cAAc,EACtEA,EAAkB,SAAU,UAAW,aAAc,aAAa,EAClEA,EAAkB,QAAS,OAAQ,OAAQ,MAAM,CACnD,CACF,CAAC,EAYYG,EACXC,EAAM,WACJ,CACE,CACE,SAAAC,EACA,MAAAV,EAAQ,UACR,WAAAW,EAAa,SACb,KAAAC,EAAO,KACP,MAAAC,EACA,KAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,YAAAC,KACGC,CACL,EACAC,IACG,CACH,MAAMC,EAA2B,YAAYC,EAAK,oDAAoDb,EAAW,cAEjH,OAAAc,EAAUb,EAAM,SAAS,MAAMC,CAAQ,IAAM,EAAGU,CAAwB,EAYtEX,EAAA,cAACc,EAAA,CACC,WAAYP,EACZ,MAAOH,EACP,YAAaI,CAAAA,EAEbR,EAAA,cAACH,EAAA,CACE,GAhBmBQ,EACrB,CACC,GAAI,IACJ,KAAMC,EAAW,KAAOD,EACxB,QAAS,OACT,gBAAiB,CAAC,CAACC,CACrB,EACC,CAAE,KAAM,QAAS,EAUf,GAAGS,EAAuBV,CAAI,EAC9B,GAAGI,EACJ,aAAYL,EACZ,MAAOb,EACP,WAAYW,EACZ,KAAMC,EACN,IAAKO,EACL,SAAUJ,GAETN,EAAM,SAAS,IAAIC,EAAWe,GAAU,CAGvC,GAAI,CAAChB,EAAM,eAAegB,CAAK,EAC7B,MAAM,IAAI,MAAML,CAAwB,EAG1C,OAAAE,EACEG,EAAM,OAASJ,EACf,oBAAoBI,GAAA,KAAAA,OAAAA,EAAO,kCAAkCJ,EAAK,uCAAuCb,EAAW,aACtH,EAEOC,EAAM,aACXgB,EACA,CACE,KAAMC,EAAkBd,GACxB,IAAK,CAAE,GAAIa,EAAM,MAAM,IAAMA,EAAM,MAAM,IAAM,CAAI,CAAA,CACrD,CACF,CACF,CAAC,CACH,CACF,CAEJ,CACF,EAEFjB,EAAW,YAAc"}

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

@@ -23,6 +23,8 @@ export declare const AlertDialog: import("@atom-learning/stitches-react/types/st
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -398,6 +400,8 @@ export declare const AlertDialog: import("@atom-learning/stitches-react/types/st
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;

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

@@ -25,6 +25,8 @@ declare const StyledAlertDialogContent: import("@atom-learning/stitches-react/ty
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/alert-dialog/AlertDialogContent.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Overlay as s,Content as l,Portal as d}from"@radix-ui/react-alert-dialog";import*as t from"react";import{DIALOG_Z_INDEX as e}from"../../constants/zIndices.js";import{keyframes as a,styled as r}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{fadeIn as p,fadeOut as f}from"../../utilities/style/keyframe-animations.js";const o="translate3d(-50%, -50%, 0)",i="translate3d(-50%, 50vh, 0)",c=a({"0%":{transform:i},"100%":{transform:o}}),b=a({"0%":{transform:o},"100%":{transform:i}}),x=r(s,{backgroundColor:"$alpha600",top:0,right:0,bottom:0,left:0,position:"fixed",zIndex:e,"@allowMotion":{'&[data-state="open"]':{animation:`${p} 250ms ease-out`},'&[data-state="closed"]':{animation:`${f} 550ms ease-out`}}}),u=r(l,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",p:"$5",position:"fixed",top:"50%",transform:o,"&:focus":{outline:"none"},zIndex:e,"@allowMotion":{'&[data-state="open"]':{animation:`${c} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${b} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{sm:{width:"380px"},md:{width:"480px"},lg:{width:"600px"}}}}),h=({size:n="sm",...m})=>t.createElement(d,null,t.createElement(x,null),t.createElement(u,{size:n,...m}));export{h as AlertDialogContent};
+import{Overlay as s,Content as m,Portal as l}from"@radix-ui/react-alert-dialog";import*as t from"react";import{keyframes as e,styled as a}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import{fadeIn as d,fadeOut as p}from"../../utilities/style/keyframe-animations.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";const o="translate3d(-50%, -50%, 0)",i="translate3d(-50%, 50vh, 0)",f=e({"0%":{transform:i},"100%":{transform:o}}),c=e({"0%":{transform:o},"100%":{transform:i}}),b=a(s,{backgroundColor:"$alpha600",top:0,right:0,bottom:0,left:0,position:"fixed",zIndex:1147483646,"@allowMotion":{'&[data-state="open"]':{animation:`${d} 250ms ease-out`},'&[data-state="closed"]':{animation:`${p} 550ms ease-out`}}}),x=a(m,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",p:"$5",position:"fixed",top:"50%",transform:o,"&:focus":{outline:"none"},zIndex:1147483646,"@allowMotion":{'&[data-state="open"]':{animation:`${f} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${c} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{sm:{width:"380px"},md:{width:"480px"},lg:{width:"600px"}}}}),u=({size:n="sm",...r})=>t.createElement(l,null,t.createElement(b,null),t.createElement(x,{size:n,...r}));export{u as AlertDialogContent};
 //# sourceMappingURL=AlertDialogContent.js.map

package/dist/components/alert-dialog/AlertDialogContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AlertDialogContent.js","sources":["../../../src/components/alert-dialog/AlertDialogContent.tsx"],"sourcesContent":["import { Content, Overlay, Portal } from '@radix-ui/react-alert-dialog'\nimport * as React from 'react'\n\nimport { ~~DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport {~~ keyframes, styled } from '~/stitches'\nimport { fadeIn, fadeOut } from '~/utilities'\n\nconst contentOnScreen = 'translate3d(-50%, -50%, 0)'\nconst contentOffScreen = 'translate3d(-50%, 50vh, 0)'\n\nconst slideIn = keyframes({\n '0%': { transform: contentOffScreen },\n '100%': { transform: contentOnScreen }\n})\nconst slideOut = keyframes({\n '0%': { transform: contentOnScreen },\n '100%': { transform: contentOffScreen }\n})\n\nconst StyledAlertDialogOverlay = styled(Overlay, {\n backgroundColor: '$alpha600',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n position: 'fixed',\n zIndex: ~~DIALOG_Z_INDEX~~,\n '@allowMotion': {\n '&[data-state=\"open\"]': {\n animation: `${fadeIn} 250ms ease-out`\n },\n '&[data-state=\"closed\"]': {\n animation: `${fadeOut} 550ms ease-out`\n }\n }\n})\n\nconst StyledAlertDialogContent = styled(Content, {\n bg: 'white',\n borderRadius: '$1',\n boxShadow: '$3',\n boxSizing: 'border-box',\n left: '50%',\n maxWidth: '90vw',\n p: '$5',\n position: 'fixed',\n top: '50%',\n transform: contentOnScreen,\n '&:focus': {\n outline: 'none'\n },\n zIndex: ~~DIALOG_Z_INDEX~~,\n '@allowMotion': {\n '&[data-state=\"open\"]': {\n animation: `${slideIn} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n },\n '&[data-state=\"closed\"]': {\n animation: `${slideOut} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n }\n },\n variants: {\n size: {\n sm: { width: '380px' },\n md: { width: '480px' },\n lg: { width: '600px' }\n }\n }\n})\n\nexport const AlertDialogContent = ({\n size = 'sm',\n ...remainingProps\n}: React.ComponentProps<typeof StyledAlertDialogContent>) => (\n <Portal>\n <StyledAlertDialogOverlay />\n <StyledAlertDialogContent size={size} {...remainingProps} />\n </Portal>\n)\n"],"names":["contentOnScreen","contentOffScreen","slideIn","keyframes","slideOut","StyledAlertDialogOverlay","styled","Overlay","~~DIALOG_Z_INDEX","~~fadeIn","fadeOut","StyledAlertDialogContent","Content","AlertDialogContent","size","remainingProps","React","Portal"],"mappings":"~~qbAOA~~,MAAMA,EAAkB,6BAClBC,EAAmB,6BAEnBC,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAWF,CAAiB,EACpC,OAAQ,CAAE,UAAWD,CAAgB,CACvC,CAAC,EACKI,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAWH,CAAgB,EACnC,OAAQ,CAAE,UAAWC,CAAiB,CACxC,CAAC,EAEKI,EAA2BC,EAAOC,EAAS,CAC/C,gBAAiB,YACjB,IAAK,EACL,MAAO,EACP,OAAQ,EACR,KAAM,EACN,SAAU,QACV,~~OAAQC~~,~~EACR~~,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF,CAAC,EAEKC,~~EAA2BL~~,~~EAAOM~~,EAAS,CAC/C,GAAI,QACJ,aAAc,KACd,UAAW,KACX,UAAW,aACX,KAAM,MACN,SAAU,OACV,EAAG,KACH,SAAU,QACV,IAAK,MACL,~~UAAWZ~~,EACX,UAAW,CACT,QAAS,MACX,EACA,~~OAAQQ~~,~~EACR~~,eAAgB,CACd,uBAAwB,CACtB,UAAW,~~GAAGN~~,wCAChB,EACA,yBAA0B,CACxB,UAAW,GAAGE,wCAChB,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,CACvB,CACF,CACF,CAAC,~~EAEYS~~,EAAqB,CAAC,CACjC,KAAAC,EAAO,QACJC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,~~cAACX~~,EAAA,IAAyB,~~EAC1BW~~,EAAA,cAACL,EAAA,CAAyB,KAAMG,EAAO,GAAGC,~~CAAAA~~,~~CAAgB,~~CAC5D"}
1	+ {"version":3,"file":"AlertDialogContent.js","sources":["../../../src/components/alert-dialog/AlertDialogContent.tsx"],"sourcesContent":["import { Content, Overlay, Portal } from '@radix-ui/react-alert-dialog'\nimport * as React from 'react'\n\nimport { keyframes, styled } from '~/stitches'\nimport { fadeIn, fadeOut } from '~/utilities'\n\nconst contentOnScreen = 'translate3d(-50%, -50%, 0)'\nconst contentOffScreen = 'translate3d(-50%, 50vh, 0)'\n\nconst slideIn = keyframes({\n '0%': { transform: contentOffScreen },\n '100%': { transform: contentOnScreen }\n})\nconst slideOut = keyframes({\n '0%': { transform: contentOnScreen },\n '100%': { transform: contentOffScreen }\n})\n\nconst StyledAlertDialogOverlay = styled(Overlay, {\n backgroundColor: '$alpha600',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n position: 'fixed',\n zIndex: 1147483646,\n '@allowMotion': {\n '&[data-state=\"open\"]': {\n animation: `${fadeIn} 250ms ease-out`\n },\n '&[data-state=\"closed\"]': {\n animation: `${fadeOut} 550ms ease-out`\n }\n }\n})\n\nconst StyledAlertDialogContent = styled(Content, {\n bg: 'white',\n borderRadius: '$1',\n boxShadow: '$3',\n boxSizing: 'border-box',\n left: '50%',\n maxWidth: '90vw',\n p: '$5',\n position: 'fixed',\n top: '50%',\n transform: contentOnScreen,\n '&:focus': {\n outline: 'none'\n },\n zIndex: 1147483646,\n '@allowMotion': {\n '&[data-state=\"open\"]': {\n animation: `${slideIn} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n },\n '&[data-state=\"closed\"]': {\n animation: `${slideOut} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n }\n },\n variants: {\n size: {\n sm: { width: '380px' },\n md: { width: '480px' },\n lg: { width: '600px' }\n }\n }\n})\n\nexport const AlertDialogContent = ({\n size = 'sm',\n ...remainingProps\n}: React.ComponentProps<typeof StyledAlertDialogContent>) => (\n <Portal>\n <StyledAlertDialogOverlay />\n <StyledAlertDialogContent size={size} {...remainingProps} />\n </Portal>\n)\n"],"names":["contentOnScreen","contentOffScreen","slideIn","keyframes","slideOut","StyledAlertDialogOverlay","styled","Overlay","fadeIn","fadeOut","StyledAlertDialogContent","Content","AlertDialogContent","size","remainingProps","React","Portal"],"mappings":"wXAMA,MAAMA,EAAkB,6BAClBC,EAAmB,6BAEnBC,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAWF,CAAiB,EACpC,OAAQ,CAAE,UAAWD,CAAgB,CACvC,CAAC,EACKI,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAWH,CAAgB,EACnC,OAAQ,CAAE,UAAWC,CAAiB,CACxC,CAAC,EAEKI,EAA2BC,EAAOC,EAAS,CAC/C,gBAAiB,YACjB,IAAK,EACL,MAAO,EACP,OAAQ,EACR,KAAM,EACN,SAAU,QACV,OAAQ,WACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF,CAAC,EAEKC,EAA2BJ,EAAOK,EAAS,CAC/C,GAAI,QACJ,aAAc,KACd,UAAW,KACX,UAAW,aACX,KAAM,MACN,SAAU,OACV,EAAG,KACH,SAAU,QACV,IAAK,MACL,UAAWX,EACX,UAAW,CACT,QAAS,MACX,EACA,OAAQ,WACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGE,wCAChB,EACA,yBAA0B,CACxB,UAAW,GAAGE,wCAChB,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,CACvB,CACF,CACF,CAAC,EAEYQ,EAAqB,CAAC,CACjC,KAAAC,EAAO,QACJC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACV,EAAA,IAAyB,EAC1BU,EAAA,cAACL,EAAA,CAAyB,KAAMG,EAAO,GAAGC,EAAgB,CAC5D"}

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

@@ -25,6 +25,8 @@ declare const StyledDiv: import("@atom-learning/stitches-react/types/styled-comp
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -396,6 +398,8 @@ declare const StyledButton: import("@atom-learning/stitches-react/types/styled-c
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/avatar/Avatar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as r from"react";import{styled as s}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{AvatarIcon as v}from"./AvatarIcon.js";import{AvatarImage as p}from"./AvatarImage.js";import{AvatarInitial as u}from"./AvatarInitial.js";import{AvatarPlaceholder as b}from"./AvatarPlaceholder.js";const n={display:"flex",justifyContent:"center",alignItems:"center",color:"$grey800",borderRadius:"$round",border:"2px solid $grey200",backgroundColor:"$white",overflow:"hidden",variants:{size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"},xl:{size:"$6"},xxl:{size:"$7"}}}},g=s("div",n),z=s("button",{all:"unset",...n,"&:not([disabled])":{"&:hover":{borderColor:"$grey800",backgroundColor:"$grey100"},"&:active":{borderColor:"$primary800",backgroundColor:"$grey200"},"&:focus-visible":c()},"&[disabled]":{opacity:"30%",cursor:"not-allowed"}}),m=r.createContext({name:void 0,size:"lg"}),d=({children:t,name:e,size:i})=>{const o=r.useMemo(()=>({name:e,size:i}),[e,i]);return r.createElement(m.Provider,{value:o},t)},a=({children:t,size:e="lg",name:i,disabled:o=!1,onClick:l})=>r.createElement(d,{name:i,size:e},l?r.createElement(z,{size:e,disabled:o,onClick:o?void 0:l,css:{cursor:o?"auto":"pointer"}},t):r.createElement(g,{size:e},t)),$=Object.assign(a,{Image:p,Initial:u,Placeholder:b,Icon:v});a.displayName="Avatar";export{$ as Avatar,a as AvatarRoot,m as AvatarRootContext,d as AvatarRootProvider};
+import*as o from"react";import{styled as s}from"../../stitches.js";import{AvatarIcon as m}from"./AvatarIcon.js";import{AvatarImage as p}from"./AvatarImage.js";import{AvatarInitial as v}from"./AvatarInitial.js";import{AvatarPlaceholder as x}from"./AvatarPlaceholder.js";const n={display:"flex",justifyContent:"center",alignItems:"center",color:"$grey800",borderRadius:"$round",border:"2px solid $grey200",backgroundColor:"$white",overflow:"hidden",variants:{size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"},xl:{size:"$6"},xxl:{size:"$7"}}}},u=s("div",n),b=s("button",{all:"unset",...n,"&:not([disabled])":{"&:hover":{borderColor:"$grey800",backgroundColor:"$grey100"},"&:active":{borderColor:"$primary800",backgroundColor:"$grey200"},"&:focus-visible":{outline:"none",position:"relative",zIndex:1,boxShadow:"white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px"}},"&[disabled]":{opacity:"30%",cursor:"not-allowed"}}),d=o.createContext({name:void 0,size:"lg"}),c=({children:t,name:e,size:a})=>{const r=o.useMemo(()=>({name:e,size:a}),[e,a]);return o.createElement(d.Provider,{value:r},t)},i=({children:t,size:e="lg",name:a,disabled:r=!1,onClick:l})=>o.createElement(c,{name:a,size:e},l?o.createElement(b,{size:e,disabled:r,onClick:r?void 0:l,css:{cursor:r?"auto":"pointer"}},t):o.createElement(u,{size:e},t)),g=Object.assign(i,{Image:p,Initial:v,Placeholder:x,Icon:m});i.displayName="Avatar";export{g as Avatar,i as AvatarRoot,d as AvatarRootContext,c as AvatarRootProvider};
 //# sourceMappingURL=Avatar.js.map

package/dist/components/avatar/Avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\~~nimport { focusVisibleStyleBlock } from '~/utilities'\~~n\nimport { AvatarIcon } from './AvatarIcon'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarInitial } from './AvatarInitial'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst avatarRootStyles = {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n color: '$grey800',\n borderRadius: '$round',\n border: '2px solid $grey200',\n backgroundColor: '$white',\n overflow: 'hidden',\n variants: {\n size: {\n xs: { size: '$2' },\n sm: { size: '$3' },\n md: { size: '$4' },\n lg: { size: '$5' },\n xl: { size: '$6' },\n xxl: { size: '$7' }\n }\n }\n}\n\nconst StyledDiv = styled('div', avatarRootStyles)\nconst StyledButton = styled('button', {\n all: 'unset',\n ...avatarRootStyles,\n '&:not([disabled])': {\n '&:hover': {\n borderColor: '$grey800',\n backgroundColor: '$grey100'\n },\n '&:active': {\n borderColor: '$primary800',\n backgroundColor: '$grey200'\n },\n '&:focus-visible': ~~focusVisibleStyleBlock()~~\n },\n '&[disabled]': {\n opacity: '30%',\n cursor: 'not-allowed'\n }\n})\n\ntype TAvatarProps = React.ComponentProps<\n typeof StyledDiv \| typeof StyledButton\n> & { name?: string } & (\n \| {\n onClick: React.MouseEventHandler<HTMLButtonElement>\n disabled?: boolean\n }\n \| { onClick?: never; disabled?: never }\n )\n\nexport type TAvatarRootContext = {\n name?: TAvatarProps['name']\n size: TAvatarProps['size']\n}\n\nexport const AvatarRootContext = React.createContext<TAvatarRootContext>({\n name: undefined,\n size: 'lg'\n})\n\nexport const AvatarRootProvider = ({ children, name, size }: TAvatarProps) => {\n const value = React.useMemo<TAvatarRootContext>(\n () => ({ name, size }),\n [name, size]\n )\n\n return (\n <AvatarRootContext.Provider value={value}>\n {children}\n </AvatarRootContext.Provider>\n )\n}\n\nexport const AvatarRoot = ({\n children,\n size = 'lg',\n name,\n disabled = false,\n onClick\n}: TAvatarProps) => (\n <AvatarRootProvider name={name} size={size}>\n {onClick ? (\n <StyledButton\n size={size}\n disabled={disabled}\n onClick={disabled ? undefined : onClick}\n css={{ cursor: disabled ? 'auto' : 'pointer' }}\n >\n {children}\n </StyledButton>\n ) : (\n <StyledDiv size={size}>{children}</StyledDiv>\n )}\n </AvatarRootProvider>\n)\n\nexport const Avatar = Object.assign(AvatarRoot, {\n Image: AvatarImage,\n Initial: AvatarInitial,\n Placeholder: AvatarPlaceholder,\n Icon: AvatarIcon\n})\n\nAvatarRoot.displayName = 'Avatar'\n"],"names":["avatarRootStyles","StyledDiv","styled","StyledButton","~~focusVisibleStyleBlock","~~AvatarRootContext","React","AvatarRootProvider","children","name","size","value","AvatarRoot","disabled","onClick","Avatar","AvatarImage","AvatarInitial","AvatarPlaceholder","AvatarIcon"],"mappings":"~~iiBAUA~~,MAAMA,EAAmB,CACvB,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,MAAO,WACP,aAAc,SACd,OAAQ,qBACR,gBAAiB,SACjB,SAAU,SACV,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,IAAK,CAAE,KAAM,IAAK,CACpB,CACF,CACF,EAEMC,EAAYC,EAAO,MAAOF,CAAgB,EAC1CG,EAAeD,EAAO,SAAU,CACpC,IAAK,QACL,GAAGF,EACH,oBAAqB,CACnB,UAAW,CACT,YAAa,WACb,gBAAiB,UACnB,EACA,WAAY,CACV,YAAa,cACb,gBAAiB,UACnB,EACA,~~kBAAmBI~~,~~EACrB~~,~~CAAA~~,EACA,cAAe,CACb,QAAS,MACT,OAAQ,aACV,CACF,CAAC,~~EAiBYC~~,EAAoBC,EAAM,cAAkC,CACvE,KAAM,OACN,KAAM,IACR,CAAC,EAEYC,EAAqB,CAAC,CAAE,SAAAC,EAAU,KAAAC,EAAM,KAAAC,CAAK,IAAoB,CAC5E,MAAMC,EAAQL,EAAM,QAClB,KAAO,CAAE,KAAAG,EAAM,KAAAC,CAAK,GACpB,CAACD,EAAMC,CAAI,CACb,EAEA,OACEJ,EAAA,cAACD,EAAkB,SAAlB,CAA2B,MAAOM,~~CAChCH~~,~~EAAAA~~,CACH,CAEJ,EAEaI,EAAa,CAAC,CACzB,SAAAJ,EACA,KAAAE,EAAO,KACP,KAAAD,EACA,SAAAI,EAAW,GACX,QAAAC,CACF,IACER,EAAA,cAACC,~~EAAA~~,~~CAAmB~~,KAAME,EAAM,KAAMC,~~CAAAA~~,~~EACnCI~~,EACCR,EAAA,~~cAACH~~,EAAA,CACC,~~KAAMO~~,EACN,SAAUG,EACV,QAASA,EAAW,OAAYC,EAChC,IAAK,CAAE,OAAQD,EAAW,OAAS,SAAU,CAE5CL,EAAAA,CACH,EAEAF,EAAA,~~cAACL~~,EAAA,CAAU,~~KAAMS~~,CAAOF,EAAAA,CAAS,CAErC,EAGWO,EAAS,OAAO,OAAOH,EAAY,CAC9C,MAAOI,EACP,QAASC,EACT,YAAaC,EACb,KAAMC,CACR,CAAC,EAEDP,EAAW,YAAc"}
1	+ {"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { AvatarIcon } from './AvatarIcon'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarInitial } from './AvatarInitial'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst avatarRootStyles = {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n color: '$grey800',\n borderRadius: '$round',\n border: '2px solid $grey200',\n backgroundColor: '$white',\n overflow: 'hidden',\n variants: {\n size: {\n xs: { size: '$2' },\n sm: { size: '$3' },\n md: { size: '$4' },\n lg: { size: '$5' },\n xl: { size: '$6' },\n xxl: { size: '$7' }\n }\n }\n}\n\nconst StyledDiv = styled('div', avatarRootStyles)\nconst StyledButton = styled('button', {\n all: 'unset',\n ...avatarRootStyles,\n '&:not([disabled])': {\n '&:hover': {\n borderColor: '$grey800',\n backgroundColor: '$grey100'\n },\n '&:active': {\n borderColor: '$primary800',\n backgroundColor: '$grey200'\n },\n '&:focus-visible': {\n outline: 'none',\n position: 'relative',\n zIndex: 1,\n boxShadow: `white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`\n }\n },\n '&[disabled]': {\n opacity: '30%',\n cursor: 'not-allowed'\n }\n})\n\ntype TAvatarProps = React.ComponentProps<\n typeof StyledDiv \| typeof StyledButton\n> & { name?: string } & (\n \| {\n onClick: React.MouseEventHandler<HTMLButtonElement>\n disabled?: boolean\n }\n \| { onClick?: never; disabled?: never }\n )\n\nexport type TAvatarRootContext = {\n name?: TAvatarProps['name']\n size: TAvatarProps['size']\n}\n\nexport const AvatarRootContext = React.createContext<TAvatarRootContext>({\n name: undefined,\n size: 'lg'\n})\n\nexport const AvatarRootProvider = ({ children, name, size }: TAvatarProps) => {\n const value = React.useMemo<TAvatarRootContext>(\n () => ({ name, size }),\n [name, size]\n )\n\n return (\n <AvatarRootContext.Provider value={value}>\n {children}\n </AvatarRootContext.Provider>\n )\n}\n\nexport const AvatarRoot = ({\n children,\n size = 'lg',\n name,\n disabled = false,\n onClick\n}: TAvatarProps) => (\n <AvatarRootProvider name={name} size={size}>\n {onClick ? (\n <StyledButton\n size={size}\n disabled={disabled}\n onClick={disabled ? undefined : onClick}\n css={{ cursor: disabled ? 'auto' : 'pointer' }}\n >\n {children}\n </StyledButton>\n ) : (\n <StyledDiv size={size}>{children}</StyledDiv>\n )}\n </AvatarRootProvider>\n)\n\nexport const Avatar = Object.assign(AvatarRoot, {\n Image: AvatarImage,\n Initial: AvatarInitial,\n Placeholder: AvatarPlaceholder,\n Icon: AvatarIcon\n})\n\nAvatarRoot.displayName = 'Avatar'\n"],"names":["avatarRootStyles","StyledDiv","styled","StyledButton","AvatarRootContext","React","AvatarRootProvider","children","name","size","value","AvatarRoot","disabled","onClick","Avatar","AvatarImage","AvatarInitial","AvatarPlaceholder","AvatarIcon"],"mappings":"6QASA,MAAMA,EAAmB,CACvB,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,MAAO,WACP,aAAc,SACd,OAAQ,qBACR,gBAAiB,SACjB,SAAU,SACV,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,IAAK,CAAE,KAAM,IAAK,CACpB,CACF,CACF,EAEMC,EAAYC,EAAO,MAAOF,CAAgB,EAC1CG,EAAeD,EAAO,SAAU,CACpC,IAAK,QACL,GAAGF,EACH,oBAAqB,CACnB,UAAW,CACT,YAAa,WACb,gBAAiB,UACnB,EACA,WAAY,CACV,YAAa,cACb,gBAAiB,UACnB,EACA,kBAAmB,CACjB,QAAS,OACT,SAAU,WACV,OAAQ,EACR,UAAW,2DACb,CACF,EACA,cAAe,CACb,QAAS,MACT,OAAQ,aACV,CACF,CAAC,EAiBYI,EAAoBC,EAAM,cAAkC,CACvE,KAAM,OACN,KAAM,IACR,CAAC,EAEYC,EAAqB,CAAC,CAAE,SAAAC,EAAU,KAAAC,EAAM,KAAAC,CAAK,IAAoB,CAC5E,MAAMC,EAAQL,EAAM,QAClB,KAAO,CAAE,KAAAG,EAAM,KAAAC,CAAK,GACpB,CAACD,EAAMC,CAAI,CACb,EAEA,OACEJ,EAAA,cAACD,EAAkB,SAAlB,CAA2B,MAAOM,CAAAA,EAChCH,CACH,CAEJ,EAEaI,EAAa,CAAC,CACzB,SAAAJ,EACA,KAAAE,EAAO,KACP,KAAAD,EACA,SAAAI,EAAW,GACX,QAAAC,CACF,IACER,EAAA,cAACC,EAAmB,CAAA,KAAME,EAAM,KAAMC,CACnCI,EAAAA,EACCR,EAAA,cAACF,EAAA,CACC,KAAMM,EACN,SAAUG,EACV,QAASA,EAAW,OAAYC,EAChC,IAAK,CAAE,OAAQD,EAAW,OAAS,SAAU,CAE5CL,EAAAA,CACH,EAEAF,EAAA,cAACJ,EAAA,CAAU,KAAMQ,CAAOF,EAAAA,CAAS,CAErC,EAGWO,EAAS,OAAO,OAAOH,EAAY,CAC9C,MAAOI,EACP,QAASC,EACT,YAAaC,EACb,KAAMC,CACR,CAAC,EAEDP,EAAW,YAAc"}

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

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { BadgeText } from './BadgeText';
 import { colorSchemes as badgeColorSchemes } from './stitches.badge.colorscheme.config';
 declare const StyledBadge: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"div", {
-    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
-    wrap?: "inherit" | "initial" | "revert" | "unset" | "wrap" | "nowrap" | "wrap-reverse" | "revert-layer" | undefined;
-    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
-    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
+    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "row-reverse" | "column" | "column-reverse" | "revert-layer" | undefined;
+    wrap?: "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "wrap" | "nowrap" | "wrap-reverse" | undefined;
+    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
+    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | undefined;
     gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
 }, {
     sm: string;
@@ -31,6 +31,8 @@ declare const StyledBadge: import("@atom-learning/stitches-react/types/styled-co
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -376,7 +378,7 @@ declare const StyledBadge: import("@atom-learning/stitches-react/types/styled-co
         marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
 }>>, {
-    emphasis?: "bold" | "white" | "subtle" | undefined;
+    emphasis?: "white" | "bold" | "subtle" | undefined;
     size?: "xs" | "sm" | "md" | undefined;
     isClickable?: boolean | "true" | undefined;
     highlighted?: boolean | "true" | undefined;
@@ -404,6 +406,8 @@ declare const StyledBadge: import("@atom-learning/stitches-react/types/styled-co
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -783,6 +787,8 @@ export declare const Badge: React.ForwardRefExoticComponent<TBadgeProps> & {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1155,6 +1161,8 @@ export declare const Badge: React.ForwardRefExoticComponent<TBadgeProps> & {
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1532,6 +1540,8 @@ export declare const Badge: React.ForwardRefExoticComponent<TBadgeProps> & {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1906,6 +1916,8 @@ export declare const Badge: React.ForwardRefExoticComponent<TBadgeProps> & {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;

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

@@ -28,6 +28,8 @@ declare const StyledBadgeIcon: import("@atom-learning/stitches-react/types/style
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -400,6 +402,8 @@ declare const StyledBadgeIcon: import("@atom-learning/stitches-react/types/style
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

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

@@ -31,6 +31,8 @@ declare const StyledBadgeText: import("@atom-learning/stitches-react/types/style
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -404,6 +406,8 @@ declare const StyledBadgeText: import("@atom-learning/stitches-react/types/style
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/badge/BadgeText.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as t from"react";import{Text as p}from"../text/Text.js";import{styled as f}from"../../stitches.js";import{useCallbackRefState as c}from"../../utilities/hooks/useCallbackRef.js";import{useResizeObserver as d}from"../../utilities/hooks/useResizeObserver.js";import{overrideStitchesVariantValue as u}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{BadgeContext as s}from"./Badge.context.js";const w=({elRef:e})=>{const{setIsOverflowing:r}=t.useContext(s);return d({delay:0,elements:[e],onResize:()=>{!(e!=null&&e.scrollWidth)||!(e!=null&&e.clientWidth)||r==null||r(e.scrollWidth>e.clientWidth)}}),null},h=f(p,{py:"$0",variants:{overflow:{ellipsis:{whiteSpace:"nowrap",overflowX:"hidden",textOverflow:"ellipsis"},wrap:{whiteSpace:"wrap"}}}}),v={xs:"sm",sm:"md",md:"md"},x=({children:e,...r})=>{const{size:l,overflow:o}=t.useContext(s),i=t.useMemo(()=>u(l,a=>v[a]),[l]),[n,m]=c();return t.createElement(t.Fragment,null,o==="ellipsis"&&t.createElement(w,{elRef:n}),t.createElement(h,{noCapsize:!0,size:i,overflow:o,ref:m,...r},e))};export{x as BadgeText};
+import*as t from"react";import{Text as f}from"../text/Text.js";import{styled as p}from"../../stitches.js";import{useCallbackRefState as c}from"../../utilities/hooks/useCallbackRef.js";import{useResizeObserver as d}from"../../utilities/hooks/useResizeObserver.js";import{overrideStitchesVariantValue as u}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{BadgeContext as s}from"./Badge.context.js";const v=({elRef:e})=>{const{setIsOverflowing:r}=t.useContext(s);return d({delay:0,elements:[e],onResize:()=>{!(e!=null&&e.scrollWidth)||!(e!=null&&e.clientWidth)||r==null||r(e.scrollWidth>e.clientWidth)}}),null},w=p(f,{py:"$0",variants:{overflow:{ellipsis:{whiteSpace:"nowrap",overflowX:"hidden",textOverflow:"ellipsis"},wrap:{whiteSpace:"normal"}}}}),h={xs:"sm",sm:"md",md:"md"},x=({children:e,...r})=>{const{size:l,overflow:o}=t.useContext(s),i=t.useMemo(()=>u(l,a=>h[a]),[l]),[n,m]=c();return t.createElement(t.Fragment,null,o==="ellipsis"&&t.createElement(v,{elRef:n}),t.createElement(w,{noCapsize:!0,size:i,overflow:o,ref:m,...r},e))};export{x as BadgeText};
 //# sourceMappingURL=BadgeText.js.map

package/dist/components/badge/BadgeText.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BadgeText.js","sources":["../../../src/components/badge/BadgeText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text'\nimport { styled } from '~/stitches'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useResizeObserver } from '~/utilities/hooks/useResizeObserver'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { BadgeContext } from './Badge.context'\n\n/\n Instead of sticking a resize observer on every `BadgeText`\n * regardless of overflow type, split the resize logic into a component.\n * Basically call the hook conditionally, only for the version with\n * the `overflow === 'ellipsis'` which needs it.\n * This saves us from initialising a resize observer for any badge which doesn't need it.\n */\nconst ObserveBadgeTextOverflow: React.VFC<{ elRef: HTMLElement \| null }> = ({\n elRef\n}) => {\n const { setIsOverflowing } = React.useContext(BadgeContext)\n\n useResizeObserver({\n delay: 0,\n elements: [elRef],\n onResize: () => {\n if (!elRef?.scrollWidth \|\| !elRef?.clientWidth) return\n setIsOverflowing?.(elRef.scrollWidth > elRef.clientWidth)\n }\n })\n\n return null\n}\n\nconst StyledBadgeText = styled(Text, {\n py: '$0',\n variants: {\n overflow: {\n ellipsis: {\n whiteSpace: 'nowrap',\n overflowX: 'hidden',\n textOverflow: 'ellipsis'\n },\n wrap: {\n whiteSpace: '~~wrap~~'\n }\n }\n }\n})\n\ntype TBadgeTextProps = React.ComponentProps<typeof StyledBadgeText>\n\nconst toTextSize = {\n xs: 'sm',\n sm: 'md',\n md: 'md'\n}\n\nexport const BadgeText = ({\n children,\n ...rest\n}: TBadgeTextProps): JSX.Element => {\n // We need the return type here. Otherwise typsecript breaks when this type is used in Badge. Do not remove unless you want to tackle that issue again.\n const { size: badgeSize, overflow } = React.useContext(BadgeContext)\n\n const size = React.useMemo(\n () => overrideStitchesVariantValue(badgeSize, (s) => toTextSize[s]),\n [badgeSize]\n )\n\n const [elRef, setElRef] = useCallbackRefState()\n\n return (\n <>\n {overflow === 'ellipsis' && <ObserveBadgeTextOverflow elRef={elRef} />}\n <StyledBadgeText\n noCapsize\n size={size}\n overflow={overflow}\n ref={setElRef}\n {...rest}\n >\n {children}\n </StyledBadgeText>\n </>\n )\n}\n"],"names":["ObserveBadgeTextOverflow","elRef","setIsOverflowing","React","BadgeContext","useResizeObserver","StyledBadgeText","styled","Text","toTextSize","BadgeText","children","rest","badgeSize","overflow","size","overrideStitchesVariantValue","s","setElRef","useCallbackRefState"],"mappings":"wbAiBA,MAAMA,EAAqE,CAAC,CAC1E,MAAAC,CACF,IAAM,CACJ,KAAM,CAAE,iBAAAC,CAAiB,EAAIC,EAAM,WAAWC,CAAY,EAE1D,OAAAC,EAAkB,CAChB,MAAO,EACP,SAAU,CAACJ,CAAK,EAChB,SAAU,IAAM,CACV,EAACA,GAAA,MAAAA,EAAO,cAAe,EAACA,GAAA,MAAAA,EAAO,cACnCC,GAAA,MAAAA,EAAmBD,EAAM,YAAcA,EAAM,YAC/C,CACF,CAAC,EAEM,IACT,EAEMK,EAAkBC,EAAOC,EAAM,CACnC,GAAI,KACJ,SAAU,CACR,SAAU,CACR,SAAU,CACR,WAAY,SACZ,UAAW,SACX,aAAc,UAChB,EACA,KAAM,CACJ,WAAY,~~MACd~~,CACF,CACF,CACF,CAAC,EAIKC,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAY,CAAC,CACxB,SAAAC,KACGC,CACL,IAAoC,CAElC,KAAM,CAAE,KAAMC,EAAW,SAAAC,CAAS,EAAIX,EAAM,WAAWC,CAAY,EAE7DW,EAAOZ,EAAM,QACjB,IAAMa,EAA6BH,EAAYI,GAAMR,EAAWQ,EAAE,EAClE,CAACJ,CAAS,CACZ,EAEM,CAACZ,EAAOiB,CAAQ,EAAIC,IAE1B,OACEhB,EAAA,cAAAA,EAAA,SAAA,KACGW,IAAa,YAAcX,EAAA,cAACH,EAAA,CAAyB,MAAOC,CAAO,CAAA,EACpEE,EAAA,cAACG,EAAA,CACC,UAAS,GACT,KAAMS,EACN,SAAUD,EACV,IAAKI,EACJ,GAAGN,CAEHD,EAAAA,CACH,CACF,CAEJ"}
1	+ {"version":3,"file":"BadgeText.js","sources":["../../../src/components/badge/BadgeText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text'\nimport { styled } from '~/stitches'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useResizeObserver } from '~/utilities/hooks/useResizeObserver'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { BadgeContext } from './Badge.context'\n\n/\n Instead of sticking a resize observer on every `BadgeText`\n * regardless of overflow type, split the resize logic into a component.\n * Basically call the hook conditionally, only for the version with\n * the `overflow === 'ellipsis'` which needs it.\n * This saves us from initialising a resize observer for any badge which doesn't need it.\n */\nconst ObserveBadgeTextOverflow: React.VFC<{ elRef: HTMLElement \| null }> = ({\n elRef\n}) => {\n const { setIsOverflowing } = React.useContext(BadgeContext)\n\n useResizeObserver({\n delay: 0,\n elements: [elRef],\n onResize: () => {\n if (!elRef?.scrollWidth \|\| !elRef?.clientWidth) return\n setIsOverflowing?.(elRef.scrollWidth > elRef.clientWidth)\n }\n })\n\n return null\n}\n\nconst StyledBadgeText = styled(Text, {\n py: '$0',\n variants: {\n overflow: {\n ellipsis: {\n whiteSpace: 'nowrap',\n overflowX: 'hidden',\n textOverflow: 'ellipsis'\n },\n wrap: {\n whiteSpace: 'normal'\n }\n }\n }\n})\n\ntype TBadgeTextProps = React.ComponentProps<typeof StyledBadgeText>\n\nconst toTextSize = {\n xs: 'sm',\n sm: 'md',\n md: 'md'\n}\n\nexport const BadgeText = ({\n children,\n ...rest\n}: TBadgeTextProps): JSX.Element => {\n // We need the return type here. Otherwise typsecript breaks when this type is used in Badge. Do not remove unless you want to tackle that issue again.\n const { size: badgeSize, overflow } = React.useContext(BadgeContext)\n\n const size = React.useMemo(\n () => overrideStitchesVariantValue(badgeSize, (s) => toTextSize[s]),\n [badgeSize]\n )\n\n const [elRef, setElRef] = useCallbackRefState()\n\n return (\n <>\n {overflow === 'ellipsis' && <ObserveBadgeTextOverflow elRef={elRef} />}\n <StyledBadgeText\n noCapsize\n size={size}\n overflow={overflow}\n ref={setElRef}\n {...rest}\n >\n {children}\n </StyledBadgeText>\n </>\n )\n}\n"],"names":["ObserveBadgeTextOverflow","elRef","setIsOverflowing","React","BadgeContext","useResizeObserver","StyledBadgeText","styled","Text","toTextSize","BadgeText","children","rest","badgeSize","overflow","size","overrideStitchesVariantValue","s","setElRef","useCallbackRefState"],"mappings":"wbAiBA,MAAMA,EAAqE,CAAC,CAC1E,MAAAC,CACF,IAAM,CACJ,KAAM,CAAE,iBAAAC,CAAiB,EAAIC,EAAM,WAAWC,CAAY,EAE1D,OAAAC,EAAkB,CAChB,MAAO,EACP,SAAU,CAACJ,CAAK,EAChB,SAAU,IAAM,CACV,EAACA,GAAA,MAAAA,EAAO,cAAe,EAACA,GAAA,MAAAA,EAAO,cACnCC,GAAA,MAAAA,EAAmBD,EAAM,YAAcA,EAAM,YAC/C,CACF,CAAC,EAEM,IACT,EAEMK,EAAkBC,EAAOC,EAAM,CACnC,GAAI,KACJ,SAAU,CACR,SAAU,CACR,SAAU,CACR,WAAY,SACZ,UAAW,SACX,aAAc,UAChB,EACA,KAAM,CACJ,WAAY,QACd,CACF,CACF,CACF,CAAC,EAIKC,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAY,CAAC,CACxB,SAAAC,KACGC,CACL,IAAoC,CAElC,KAAM,CAAE,KAAMC,EAAW,SAAAC,CAAS,EAAIX,EAAM,WAAWC,CAAY,EAE7DW,EAAOZ,EAAM,QACjB,IAAMa,EAA6BH,EAAYI,GAAMR,EAAWQ,EAAE,EAClE,CAACJ,CAAS,CACZ,EAEM,CAACZ,EAAOiB,CAAQ,EAAIC,IAE1B,OACEhB,EAAA,cAAAA,EAAA,SAAA,KACGW,IAAa,YAAcX,EAAA,cAACH,EAAA,CAAyB,MAAOC,CAAO,CAAA,EACpEE,EAAA,cAACG,EAAA,CACC,UAAS,GACT,KAAMS,EACN,SAAUD,EACV,IAAKI,EACJ,GAAGN,CAEHD,EAAAA,CACH,CACF,CAEJ"}

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

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

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

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { TcolorScheme } from '../../experiments/color-scheme';
 import { Dismissible } from '../dismissible';
 declare const StyledBannerContainer: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"div", {
-    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
-    wrap?: "inherit" | "initial" | "revert" | "unset" | "wrap" | "nowrap" | "wrap-reverse" | "revert-layer" | undefined;
-    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
-    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
+    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "row-reverse" | "column" | "column-reverse" | "revert-layer" | undefined;
+    wrap?: "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "wrap" | "nowrap" | "wrap-reverse" | undefined;
+    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
+    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | undefined;
     gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
 }, {
     sm: string;
@@ -31,6 +31,8 @@ declare const StyledBannerContainer: import("@atom-learning/stitches-react/types
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -402,6 +404,8 @@ declare const StyledBannerContainer: import("@atom-learning/stitches-react/types
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;