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/navigation-menu-vertical/NavigationMenuVerticalList.d.ts CHANGED Viewed

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

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalText.d.ts CHANGED Viewed

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

package/dist/components/number-input/NumberInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Minus as F,Plus as H}from"@atom-learning/icons";import*as r from"react";import{styled as $}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{getFieldIconSize as V}from"../../utilities/style/get-icon-size.js";import{Flex as X}from"../flex/Flex.js";import{Input as _}from"../input/Input.js";import{NumberInputStepper as k}from"./NumberInputStepper.js";const G=$(X,{variants:{appearance:{standard:{},modern:{gap:"1px"}}}}),N=r.forwardRef(({value:u,defaultValue:T=0,onValueChange:w,min:n=0,max:o=Number.MAX_SAFE_INTEGER,step:m=1,disabled:s=!1,readonly:p=!1,size:x="md",stepperButtonLabels:A,disabledTooltipContent:I,css:M,appearance:d="standard",...z},L)=>{const[a,E]=r.useState(u||T);r.useEffect(()=>{typeof u<"u"&&E(u)},[u]);const l=r.useRef(null);r.useImperativeHandle(L,()=>l.current);const R=r.useMemo(()=>V(x),[x]),h={increment:"increment",decrement:"decrement",...A},y={decrement:`Cannot enter values below ${n}`,increment:`Cannot enter values above ${o}`,...I},c=a>=o,b=a<=n,f=r.useCallback(e=>Math.min(Math.max(e,n),o),[o,n]),t=r.useCallback(e=>{w==null||w(e),E(e)},[w]),B=r.useCallback(e=>{const i=Number(e.target.value.replace(/\D/g,""));t(i)},[t]),v=r.useCallback(()=>{var e;if(c||p)return;(e=l==null?void 0:l.current)==null||e.focus();const i=Number(a)+m;t(f(i))},[f,c,p,m,t,a]),C=r.useCallback(()=>{var e;if(b||p)return;(e=l==null?void 0:l.current)==null||e.focus();const i=Number(a)-m;t(f(i))},[f,b,p,n,m,t,a]),D=r.useCallback(e=>{if(e.nativeEvent.isComposing)return;const i=e.key,g={ArrowUp:v,ArrowRight:v,ArrowDown:C,ArrowLeft:C,Home:()=>t(n),End:()=>t(o)}[i];g&&(e.preventDefault(),g(e))},[v,C,t,n,o]),S={type:"number",value:a,...z,onChange:B,onKeyDown:D,size:x,appearance:d,css:{borderRadius:"0px",width:"$6","&:disabled":{opacity:.3,pointerEvents:"none"}},ref:l,readOnly:p,disabled:s,"aria-valuemin":n,"aria-valuemax":o,"aria-valuenow":a,role:"spinbutton"};return r.createElement(G,{appearance:d,css:M},r.createElement(k,{onClick:C,icon:F,css:{borderRight:"none",borderTopRightRadius:"0px",borderBottomRightRadius:"0px"},size:R,fieldAppearance:d,disabled:b||s,showTooltip:b&&!s,disabledTooltipContent:y.decrement,label:h.decrement}),r.createElement(_,{...S}),r.createElement(k,{onClick:v,icon:H,css:{borderLeft:"none",borderTopLeftRadius:"0px",borderBottomLeftRadius:"0px"},size:R,fieldAppearance:d,disabled:c||s,showTooltip:c&&!s,disabledTooltipContent:y.increment,label:h.increment}))});N.displayName="NumberInput";export{N as NumberInput};
+import{Minus as F,Plus as H}from"@atom-learning/icons";import*as r from"react";import{styled as $}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as V}from"../../utilities/style/get-icon-size.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{Flex as X}from"../flex/Flex.js";import{Input as _}from"../input/Input.js";import{NumberInputStepper as k}from"./NumberInputStepper.js";const G=$(X,{variants:{appearance:{standard:{},modern:{gap:"1px"}}}}),N=r.forwardRef(({value:u,defaultValue:T=0,onValueChange:w,min:n=0,max:o=Number.MAX_SAFE_INTEGER,step:m=1,disabled:s=!1,readonly:p=!1,size:x="md",stepperButtonLabels:A,disabledTooltipContent:I,css:M,appearance:d="standard",...z},L)=>{const[a,E]=r.useState(u||T);r.useEffect(()=>{typeof u<"u"&&E(u)},[u]);const l=r.useRef(null);r.useImperativeHandle(L,()=>l.current);const R=r.useMemo(()=>V(x),[x]),h={increment:"increment",decrement:"decrement",...A},y={decrement:`Cannot enter values below ${n}`,increment:`Cannot enter values above ${o}`,...I},c=a>=o,b=a<=n,f=r.useCallback(e=>Math.min(Math.max(e,n),o),[o,n]),t=r.useCallback(e=>{w==null||w(e),E(e)},[w]),B=r.useCallback(e=>{const i=Number(e.target.value.replace(/\D/g,""));t(i)},[t]),v=r.useCallback(()=>{var e;if(c||p)return;(e=l==null?void 0:l.current)==null||e.focus();const i=Number(a)+m;t(f(i))},[f,c,p,m,t,a]),C=r.useCallback(()=>{var e;if(b||p)return;(e=l==null?void 0:l.current)==null||e.focus();const i=Number(a)-m;t(f(i))},[f,b,p,n,m,t,a]),D=r.useCallback(e=>{if(e.nativeEvent.isComposing)return;const i=e.key,g={ArrowUp:v,ArrowRight:v,ArrowDown:C,ArrowLeft:C,Home:()=>t(n),End:()=>t(o)}[i];g&&(e.preventDefault(),g(e))},[v,C,t,n,o]),S={type:"number",value:a,...z,onChange:B,onKeyDown:D,size:x,appearance:d,css:{borderRadius:"0px",width:"$6","&:disabled":{opacity:.3,pointerEvents:"none"}},ref:l,readOnly:p,disabled:s,"aria-valuemin":n,"aria-valuemax":o,"aria-valuenow":a,role:"spinbutton"};return r.createElement(G,{appearance:d,css:M},r.createElement(k,{onClick:C,icon:F,css:{borderRight:"none",borderTopRightRadius:"0px",borderBottomRightRadius:"0px"},size:R,fieldAppearance:d,disabled:b||s,showTooltip:b&&!s,disabledTooltipContent:y.decrement,label:h.decrement}),r.createElement(_,{...S}),r.createElement(k,{onClick:v,icon:H,css:{borderLeft:"none",borderTopLeftRadius:"0px",borderBottomLeftRadius:"0px"},size:R,fieldAppearance:d,disabled:c||s,showTooltip:c&&!s,disabledTooltipContent:y.increment,label:h.increment}))});N.displayName="NumberInput";export{N as NumberInput};
 //# sourceMappingURL=NumberInput.js.map

package/dist/components/number-input/NumberInputStepper.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { ActionIcon } from '../action-icon';
 declare const StyledStepperButton: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    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 StyledStepperButton: import("@atom-learning/stitches-react/types/s
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -378,7 +380,7 @@ declare const StyledStepperButton: import("@atom-learning/stitches-react/types/s
         };
     }> | undefined;
 }, "appearance" | "size" | "theme" | "label" | "children" | "as" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    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;
@@ -420,6 +422,8 @@ declare const StyledStepperButton: import("@atom-learning/stitches-react/types/s
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/number-input/NumberInputStepper.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as o}from"../../stitches.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";import{Tooltip as r}from"../tooltip/Tooltip.js";const s=o("span",{zIndex:1}),g=o(c,{borderRadius:"$1",zIndex:1,height:"100% !important","&:hover":{bg:"$grey100",svg:{color:"$grey800"}},svg:{color:"$grey700"},"&:active":{bg:"$grey200",svg:{color:"$grey900"}},"&:disabled":{opacity:.3,pointerEvents:"none"},variants:{fieldAppearance:{standard:{backgroundColor:"white",borderColor:"$grey800 !important"},modern:{backgroundColor:"$grey100",borderColor:"$grey100 !important"}}}}),b=e.forwardRef((t,n)=>{const{icon:a,disabledTooltipContent:i,showTooltip:l,fieldAppearance:p="standard",...d}=t;return e.createElement(r,null,e.createElement(r.Trigger,{asChild:!0},e.createElement(s,{tabIndex:-1},e.createElement(g,{hasTooltip:!1,tabIndex:-1,appearance:"outline",fieldAppearance:p,ref:n,...d},e.createElement(m,{is:a})))),l&&e.createElement(r.Content,null,i))});export{b as NumberInputStepper};
+import*as e from"react";import{styled as o}from"../../stitches.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";import{Tooltip as r}from"../tooltip/Tooltip.js";const s=o("span",{zIndex:1}),g=o(c,{borderRadius:"$1",zIndex:1,height:"100% !important","&:hover":{bg:"$grey100","& svg":{color:"$grey800"}},"& svg":{color:"$grey700"},"&:active":{bg:"$grey200","& svg":{color:"$grey900"}},"&:disabled":{opacity:.3,pointerEvents:"none"},variants:{fieldAppearance:{standard:{backgroundColor:"white",borderColor:"$grey800 !important"},modern:{backgroundColor:"$grey100",borderColor:"$grey100 !important"}}}}),b=e.forwardRef((t,n)=>{const{icon:a,disabledTooltipContent:i,showTooltip:l,fieldAppearance:p="standard",...d}=t;return e.createElement(r,null,e.createElement(r.Trigger,{asChild:!0},e.createElement(s,{tabIndex:-1},e.createElement(g,{hasTooltip:!1,tabIndex:-1,appearance:"outline",fieldAppearance:p,ref:n,...d},e.createElement(m,{is:a})))),l&&e.createElement(r.Content,null,i))});export{b as NumberInputStepper};
 //# sourceMappingURL=NumberInputStepper.js.map

package/dist/components/number-input/NumberInputStepper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInputStepper.js","sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { Tooltip } from '../tooltip'\n\nconst StyledSpan = styled('span', { zIndex: 1 })\n\nconst StyledStepperButton = styled(ActionIcon, {\n borderRadius: '$1',\n zIndex: 1,\n height: '100% !important',\n '&:hover': {\n bg: '$grey100',\n svg: { color: '$grey800' }\n },\n svg: {\n color: '$grey700'\n },\n '&:active': {\n bg: '$grey200',\n svg: { color: '$grey900' }\n },\n '&:disabled': {\n opacity: 0.3,\n pointerEvents: 'none'\n },\n variants: {\n fieldAppearance: {\n standard: {\n backgroundColor: 'white',\n borderColor: '$grey800 !important'\n },\n modern: {\n backgroundColor: '$grey100',\n borderColor: '$grey100 !important'\n }\n }\n }\n})\n\ntype NumberInputStepperProps = Omit<\n React.ComponentProps<typeof ActionIcon>,\n 'children'\n> &\n Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n icon: React.FC<React.SVGProps<SVGSVGElement>>\n showTooltip?: boolean\n disabledTooltipContent?: string\n }\n\nexport const NumberInputStepper: React.ForwardRefExoticComponent<NumberInputStepperProps> =\n React.forwardRef((props, forwardedRef) => {\n const {\n icon,\n disabledTooltipContent,\n showTooltip,\n fieldAppearance = 'standard',\n ...rest\n } = props\n\n /*\n Focus has been removed from the button\n * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n */\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <StyledSpan tabIndex={-1}>\n <StyledStepperButton\n hasTooltip={false}\n tabIndex={-1}\n appearance=\"outline\"\n fieldAppearance={fieldAppearance}\n ref={forwardedRef}\n {...rest}\n >\n <Icon is={icon} />\n </StyledStepperButton>\n </StyledSpan>\n </Tooltip.Trigger>\n {showTooltip && (\n <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n )}\n </Tooltip>\n )\n })\n"],"names":["StyledSpan","styled","StyledStepperButton","ActionIcon","NumberInputStepper","React","props","forwardedRef","icon","disabledTooltipContent","showTooltip","fieldAppearance","rest","Tooltip","Icon"],"mappings":"oNAQA,MAAMA,EAAaC,EAAO,OAAQ,CAAE,OAAQ,CAAE,CAAC,EAEzCC,EAAsBD,EAAOE,EAAY,CAC7C,aAAc,KACd,OAAQ,EACR,OAAQ,kBACR,UAAW,CACT,GAAI,WACJ,~~IAAK~~,~~CAAE~~,MAAO,~~UAAW~~,~~CAC3B~~,EACA,~~IAAK~~,~~CACH~~,MAAO,UACT,EACA,WAAY,CACV,GAAI,WACJ,~~IAAK~~,~~CAAE~~,MAAO,~~UAAW~~,~~CAC3B~~,EACA,aAAc,CACZ,QAAS,GACT,cAAe,MACjB,EACA,SAAU,CACR,gBAAiB,CACf,SAAU,CACR,gBAAiB,QACjB,YAAa,qBACf,EACA,OAAQ,CACN,gBAAiB,WACjB,YAAa,qBACf,CACF,CACF,CACF,CAAC,EAYYC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAiB,CACxC,KAAM,CACJ,KAAAC,EACA,uBAAAC,EACA,YAAAC,EACA,gBAAAC,EAAkB,cACfC,CACL,EAAIN,EAOJ,OACED,EAAA,cAACQ,EAAA,KACCR,EAAA,cAACQ,EAAQ,QAAR,CAAgB,QAAO,EAAA,EACtBR,EAAA,cAACL,EAAA,CAAW,SAAU,EACpBK,EAAAA,EAAA,cAACH,EAAA,CACC,WAAY,GACZ,SAAU,GACV,WAAW,UACX,gBAAiBS,EACjB,IAAKJ,EACJ,GAAGK,CAEJP,EAAAA,EAAA,cAACS,EAAA,CAAK,GAAIN,CAAM,CAAA,CAClB,CACF,CACF,EACCE,GACCL,EAAA,cAACQ,EAAQ,QAAR,KAAiBJ,CAAuB,CAE7C,CAEJ,CAAC"}
1	+ {"version":3,"file":"NumberInputStepper.js","sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { Tooltip } from '../tooltip'\n\nconst StyledSpan = styled('span', { zIndex: 1 })\n\nconst StyledStepperButton = styled(ActionIcon, {\n borderRadius: '$1',\n zIndex: 1,\n height: '100% !important',\n '&:hover': {\n bg: '$grey100',\n '& svg': {\n color: '$grey800'\n }\n },\n '& svg': {\n color: '$grey700'\n },\n '&:active': {\n bg: '$grey200',\n '& svg': {\n color: '$grey900'\n }\n },\n '&:disabled': {\n opacity: 0.3,\n pointerEvents: 'none'\n },\n variants: {\n fieldAppearance: {\n standard: {\n backgroundColor: 'white',\n borderColor: '$grey800 !important'\n },\n modern: {\n backgroundColor: '$grey100',\n borderColor: '$grey100 !important'\n }\n }\n }\n})\n\ntype NumberInputStepperProps = Omit<\n React.ComponentProps<typeof ActionIcon>,\n 'children'\n> &\n Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n icon: React.FC<React.SVGProps<SVGSVGElement>>\n showTooltip?: boolean\n disabledTooltipContent?: string\n }\n\nexport const NumberInputStepper: React.ForwardRefExoticComponent<NumberInputStepperProps> =\n React.forwardRef((props, forwardedRef) => {\n const {\n icon,\n disabledTooltipContent,\n showTooltip,\n fieldAppearance = 'standard',\n ...rest\n } = props\n\n /*\n Focus has been removed from the button\n * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n */\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <StyledSpan tabIndex={-1}>\n <StyledStepperButton\n hasTooltip={false}\n tabIndex={-1}\n appearance=\"outline\"\n fieldAppearance={fieldAppearance}\n ref={forwardedRef}\n {...rest}\n >\n <Icon is={icon} />\n </StyledStepperButton>\n </StyledSpan>\n </Tooltip.Trigger>\n {showTooltip && (\n <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n )}\n </Tooltip>\n )\n })\n"],"names":["StyledSpan","styled","StyledStepperButton","ActionIcon","NumberInputStepper","React","props","forwardedRef","icon","disabledTooltipContent","showTooltip","fieldAppearance","rest","Tooltip","Icon"],"mappings":"oNAQA,MAAMA,EAAaC,EAAO,OAAQ,CAAE,OAAQ,CAAE,CAAC,EAEzCC,EAAsBD,EAAOE,EAAY,CAC7C,aAAc,KACd,OAAQ,EACR,OAAQ,kBACR,UAAW,CACT,GAAI,WACJ,QAAS,CACP,MAAO,UACT,CACF,EACA,QAAS,CACP,MAAO,UACT,EACA,WAAY,CACV,GAAI,WACJ,QAAS,CACP,MAAO,UACT,CACF,EACA,aAAc,CACZ,QAAS,GACT,cAAe,MACjB,EACA,SAAU,CACR,gBAAiB,CACf,SAAU,CACR,gBAAiB,QACjB,YAAa,qBACf,EACA,OAAQ,CACN,gBAAiB,WACjB,YAAa,qBACf,CACF,CACF,CACF,CAAC,EAYYC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAiB,CACxC,KAAM,CACJ,KAAAC,EACA,uBAAAC,EACA,YAAAC,EACA,gBAAAC,EAAkB,cACfC,CACL,EAAIN,EAOJ,OACED,EAAA,cAACQ,EAAA,KACCR,EAAA,cAACQ,EAAQ,QAAR,CAAgB,QAAO,EAAA,EACtBR,EAAA,cAACL,EAAA,CAAW,SAAU,EACpBK,EAAAA,EAAA,cAACH,EAAA,CACC,WAAY,GACZ,SAAU,GACV,WAAW,UACX,gBAAiBS,EACjB,IAAKJ,EACJ,GAAGK,CAEJP,EAAAA,EAAA,cAACS,EAAA,CAAK,GAAIN,CAAM,CAAA,CAClB,CACF,CACF,EACCE,GACCL,EAAA,cAACQ,EAAQ,QAAR,KAAiBJ,CAAuB,CAE7C,CAEJ,CAAC"}

package/dist/components/pagination/PaginationNextButton.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import * as React from 'react';
 declare const StyledActionIcon: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    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;
@@ -31,6 +31,8 @@ declare const StyledActionIcon: import("@atom-learning/stitches-react/types/styl
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -377,7 +379,7 @@ declare const StyledActionIcon: import("@atom-learning/stitches-react/types/styl
         };
     }> | undefined;
 }, "appearance" | "size" | "theme" | "label" | "children" | "as" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    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;
@@ -417,6 +419,8 @@ declare const StyledActionIcon: import("@atom-learning/stitches-react/types/styl
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/pagination/PaginationPage.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as m from"react";import{styled as u}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as h}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as $}from"../../utilities/style/disabledStyle.js";import{usePagination as f}from"./usePagination.js";const v=u("button",{alignItems:"center",border:"1px solid transparent",borderRadius:"$0",cursor:"pointer",fontFamily:"$body",justifyContent:"center",whiteSpace:"nowrap",width:"max-content",display:"flex",flexDirection:"column",p:"0",fontWeight:400,color:"$textSubtle",bg:"$base1",position:"relative","&:not(:disabled)":{"&:hover":{color:"$textRegular",bg:"$base2"},"&:active":{color:"$textBold",bg:"$base3"},"&:focus-visible":{...h()}},"&[disabled]":{...$,pointerEvents:"none"},variants:{size:{md:{width:"$4",height:"$4"}},selected:{true:{border:"1px solid $accent9",color:"$accent9",fontWeight:600,"&:not(:disabled)":{"&:hover":{borderColor:"$accent10",color:"$accent10"},"&:active":{borderColor:"$accent11",fontColor:"$accent11"}}}},indicated:{true:{fontWeight:600,color:"white",bg:"$accent9","&:not(:disabled)":{"&:hover":{color:"white",bg:"$accent10"},"&:active":{color:"white",bg:"$accent11"}}}}},compoundVariants:[{selected:!0,indicated:!0,css:{fontWeight:600,color:"white",bg:"$accent9",boxShadow:"$colors$accent9 0px 0px 0px 1px","&:not(:focus-visible)":{borderColor:"white !important"},"&:not(:disabled)":{"&:hover":{color:"white",bg:"$accent10"},"&:active":{color:"white",bg:"$accent11"}}}}]}),x=({pageNumber:e,css:c,onClick:i})=>{const{currentPage:n,goToPage:a,indicatedPages:l,disabledPages:s,onItemHover:r}=f(),d=l.includes(e),o=s.includes(e),t=n===e,b=()=>{t||o||r==null||r(e)},p=g=>{i==null||i(),a(g)};return m.createElement(v,{selected:t,size:"md",onClick:()=>p(e),css:c,indicated:d,disabled:o,"aria-current":t&&"page","aria-disabled":o,onMouseOver:b},e)};export{x as PaginationPage};
+import*as u from"react";import{styled as x}from"../../stitches.js";import{usePagination as h}from"./usePagination.js";const $=x("button",{alignItems:"center",border:"1px solid transparent",borderRadius:"$0",cursor:"pointer",fontFamily:"$body",justifyContent:"center",whiteSpace:"nowrap",width:"max-content",display:"flex",flexDirection:"column",p:"0",fontWeight:400,color:"$textSubtle",bg:"$base1",position:"relative","&:not(:disabled)":{"&:hover":{color:"$textRegular",bg:"$base2"},"&:active":{color:"$textBold",bg:"$base3"},"&:focus-visible":{outline:"none",position:"relative",zIndex:1,boxShadow:"white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px"}},"&[disabled]":{opacity:.3,cursor:"not-allowed",pointerEvents:"none"},variants:{size:{md:{width:"$4",height:"$4"}},selected:{true:{border:"1px solid $accent9",color:"$accent9",fontWeight:600,"&:not(:disabled)":{"&:hover":{borderColor:"$accent10",color:"$accent10"},"&:active":{borderColor:"$accent11",color:"$accent11"}}}},indicated:{true:{fontWeight:600,color:"white",bg:"$accent9","&:not(:disabled)":{"&:hover":{color:"white",bg:"$accent10"},"&:active":{color:"white",bg:"$accent11"}}}}},compoundVariants:[{selected:!0,indicated:!0,css:{fontWeight:600,color:"white",bg:"$accent9",boxShadow:"$colors$accent9 0px 0px 0px 1px","&:not(:focus-visible)":{borderColor:"white !important"},"&:not(:disabled)":{"&:hover":{color:"white",bg:"$accent10"},"&:active":{color:"white",bg:"$accent11"}}}}]}),m=({pageNumber:e,css:n,onClick:i})=>{const{currentPage:r,goToPage:a,indicatedPages:l,disabledPages:s,onItemHover:c}=h(),d=l.includes(e),o=s.includes(e),t=r===e,b=()=>{t||o||c==null||c(e)},p=g=>{i==null||i(),a(g)};return u.createElement($,{selected:t,size:"md",onClick:()=>p(e),css:n,indicated:d,disabled:o,"aria-current":t&&"page","aria-disabled":o,onMouseOver:b},e)};export{m as PaginationPage};
 //# sourceMappingURL=PaginationPage.js.map

package/dist/components/pagination/PaginationPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PaginationPage.js","sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ~~disabledStyle, focusVisibleStyleBlock } from '~/utilities'\n\nimport {~~ styled } from '../../stitches'\nimport type { PaginationPageProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst StyledButton = styled('button', {\n alignItems: 'center',\n border: '1px solid transparent',\n borderRadius: '$0',\n cursor: 'pointer',\n fontFamily: '$body',\n justifyContent: 'center',\n whiteSpace: 'nowrap',\n width: 'max-content',\n display: 'flex',\n flexDirection: 'column',\n p: '0',\n fontWeight: 400,\n color: '$textSubtle',\n bg: '$base1',\n position: 'relative',\n\n '&:not(:disabled)': {\n '&:hover': {\n color: '$textRegular',\n bg: '$base2'\n },\n '&:active': {\n color: '$textBold',\n bg: '$base3'\n },\n '&:focus-visible': {\n ~~...focusVisibleStyleBlock()\~~n }\n },\n '&[disabled]': {\n ~~...disabledStyle~~,\n pointerEvents: 'none'\n },\n variants: {\n size: {\n md: {\n width: '$4',\n height: '$4'\n }\n },\n selected: {\n true: {\n border: '1px solid $accent9',\n color: '$accent9',\n fontWeight: 600,\n '&:not(:disabled)': {\n '&:hover': {\n borderColor: '$accent10',\n color: '$accent10'\n },\n '&:active': {\n borderColor: '$accent11',\n ~~fontColor~~: '$accent11'\n }\n }\n }\n },\n indicated: {\n true: {\n fontWeight: 600,\n color: 'white',\n bg: '$accent9',\n '&:not(:disabled)': {\n '&:hover': {\n color: 'white',\n bg: '$accent10'\n },\n '&:active': {\n color: 'white',\n bg: '$accent11'\n }\n }\n }\n }\n },\n\n compoundVariants: [\n {\n selected: true,\n indicated: true,\n css: {\n fontWeight: 600,\n color: 'white',\n bg: '$accent9',\n boxShadow: '$colors$accent9 0px 0px 0px 1px',\n '&:not(:focus-visible)': {\n borderColor: 'white !important'\n },\n '&:not(:disabled)': {\n '&:hover': {\n color: 'white',\n bg: '$accent10'\n },\n '&:active': {\n color: 'white',\n bg: '$accent11'\n }\n }\n }\n }\n ]\n})\n\nexport const PaginationPage = ({\n pageNumber,\n css,\n onClick\n}: PaginationPageProps) => {\n const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n usePagination()\n\n const isIndicated = indicatedPages.includes(pageNumber)\n const isDisabled = disabledPages.includes(pageNumber)\n\n const isSelected = currentPage === pageNumber\n\n const handleOnHover = () => {\n if (isSelected \|\| isDisabled) return\n onItemHover?.(pageNumber)\n }\n\n const handleOnClick = (pageNumber) => {\n onClick?.()\n goToPage(pageNumber)\n }\n\n return (\n <StyledButton\n selected={isSelected}\n size=\"md\"\n onClick={() => handleOnClick(pageNumber)}\n css={css}\n indicated={isIndicated}\n disabled={isDisabled}\n aria-current={isSelected && 'page'}\n aria-disabled={isDisabled}\n onMouseOver={handleOnHover}\n >\n {pageNumber}\n </StyledButton>\n )\n}\n"],"names":["StyledButton","styled","~~focusVisibleStyleBlock","disabledStyle","~~PaginationPage","pageNumber","css","onClick","currentPage","goToPage","indicatedPages","disabledPages","onItemHover","usePagination","isIndicated","isDisabled","isSelected","handleOnHover","handleOnClick","React"],"mappings":"~~idAQA~~,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,SACZ,OAAQ,wBACR,aAAc,KACd,OAAQ,UACR,WAAY,QACZ,eAAgB,SAChB,WAAY,SACZ,MAAO,cACP,QAAS,OACT,cAAe,SACf,EAAG,IACH,WAAY,IACZ,MAAO,cACP,GAAI,SACJ,SAAU,WAEV,mBAAoB,CAClB,UAAW,CACT,MAAO,eACP,GAAI,QACN,EACA,WAAY,CACV,MAAO,YACP,GAAI,QACN,EACA,kBAAmB,CACjB,~~GAAGC~~,~~GACL~~,CACF,EACA,cAAe,CACb,~~GAAGC~~,~~EACH~~,cAAe,MACjB,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,OAAQ,IACV,CACF,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,qBACR,MAAO,WACP,WAAY,IACZ,mBAAoB,CAClB,UAAW,CACT,YAAa,YACb,MAAO,WACT,EACA,WAAY,CACV,YAAa,YACb,~~UAAW~~,~~WACb~~,CACF,CACF,CACF,EACA,UAAW,CACT,KAAM,CACJ,WAAY,IACZ,MAAO,QACP,GAAI,WACJ,mBAAoB,CAClB,UAAW,CACT,MAAO,QACP,GAAI,WACN,EACA,WAAY,CACV,MAAO,QACP,GAAI,WACN,CACF,CACF,CACF,CACF,EAEA,iBAAkB,CAChB,CACE,SAAU,GACV,UAAW,GACX,IAAK,CACH,WAAY,IACZ,MAAO,QACP,GAAI,WACJ,UAAW,kCACX,wBAAyB,CACvB,YAAa,kBACf,EACA,mBAAoB,CAClB,UAAW,CACT,MAAO,QACP,GAAI,WACN,EACA,WAAY,CACV,MAAO,QACP,GAAI,WACN,CACF,CACF,CACF,CACF,CACF,CAAC,EAEYC,EAAiB,CAAC,CAC7B,WAAAC,EACA,IAAAC,EACA,QAAAC,CACF,IAA2B,CACzB,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,eAAAC,EAAgB,cAAAC,EAAe,YAAAC,CAAY,EACxEC,~~EAAc~~,~~EAEVC~~,EAAcJ,EAAe,SAASL,CAAU,EAChDU,EAAaJ,EAAc,SAASN,CAAU,EAE9CW,EAAaR,IAAgBH,EAE7BY,EAAgB,IAAM,CACtBD,GAAcD,GAClBH,GAAA,MAAAA,EAAcP,~~CAAAA,~~CAChB,EAEMa,EAAiBb,GAAe,CACpCE,GAAA,MAAAA,EAAAA,~~EACAE,~~EAASJ,CAAU,CACrB,EAEA,OACEc,EAAA,~~cAACnB~~,EAAA,CACC,~~SAAUgB~~,EACV,KAAK,KACL,QAAS,IAAME,EAAcb,CAAU,EACvC,IAAKC,EACL,UAAWQ,EACX,SAAUC,EACV,eAAcC,GAAc,OAC5B,gBAAeD,EACf,YAAaE,CAAAA,EAEZZ,CACH,CAEJ"}
1	+ {"version":3,"file":"PaginationPage.js","sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport type { PaginationPageProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst StyledButton = styled('button', {\n alignItems: 'center',\n border: '1px solid transparent',\n borderRadius: '$0',\n cursor: 'pointer',\n fontFamily: '$body',\n justifyContent: 'center',\n whiteSpace: 'nowrap',\n width: 'max-content',\n display: 'flex',\n flexDirection: 'column',\n p: '0',\n fontWeight: 400,\n color: '$textSubtle',\n bg: '$base1',\n position: 'relative',\n\n '&:not(:disabled)': {\n '&:hover': {\n color: '$textRegular',\n bg: '$base2'\n },\n '&:active': {\n color: '$textBold',\n bg: '$base3'\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: 0.3,\n cursor: 'not-allowed',\n pointerEvents: 'none'\n },\n variants: {\n size: {\n md: {\n width: '$4',\n height: '$4'\n }\n },\n selected: {\n true: {\n border: '1px solid $accent9',\n color: '$accent9',\n fontWeight: 600,\n '&:not(:disabled)': {\n '&:hover': {\n borderColor: '$accent10',\n color: '$accent10'\n },\n '&:active': {\n borderColor: '$accent11',\n color: '$accent11'\n }\n }\n }\n },\n indicated: {\n true: {\n fontWeight: 600,\n color: 'white',\n bg: '$accent9',\n '&:not(:disabled)': {\n '&:hover': {\n color: 'white',\n bg: '$accent10'\n },\n '&:active': {\n color: 'white',\n bg: '$accent11'\n }\n }\n }\n }\n },\n\n compoundVariants: [\n {\n selected: true,\n indicated: true,\n css: {\n fontWeight: 600,\n color: 'white',\n bg: '$accent9',\n boxShadow: '$colors$accent9 0px 0px 0px 1px',\n '&:not(:focus-visible)': {\n borderColor: 'white !important'\n },\n '&:not(:disabled)': {\n '&:hover': {\n color: 'white',\n bg: '$accent10'\n },\n '&:active': {\n color: 'white',\n bg: '$accent11'\n }\n }\n }\n }\n ]\n})\n\nexport const PaginationPage = ({\n pageNumber,\n css,\n onClick\n}: PaginationPageProps) => {\n const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n usePagination()\n\n const isIndicated = indicatedPages.includes(pageNumber)\n const isDisabled = disabledPages.includes(pageNumber)\n\n const isSelected = currentPage === pageNumber\n\n const handleOnHover = () => {\n if (isSelected \|\| isDisabled) return\n onItemHover?.(pageNumber)\n }\n\n const handleOnClick = (pageNumber) => {\n onClick?.()\n goToPage(pageNumber)\n }\n\n return (\n <StyledButton\n selected={isSelected}\n size=\"md\"\n onClick={() => handleOnClick(pageNumber)}\n css={css}\n indicated={isIndicated}\n disabled={isDisabled}\n aria-current={isSelected && 'page'}\n aria-disabled={isDisabled}\n onMouseOver={handleOnHover}\n >\n {pageNumber}\n </StyledButton>\n )\n}\n"],"names":["StyledButton","styled","PaginationPage","pageNumber","css","onClick","currentPage","goToPage","indicatedPages","disabledPages","onItemHover","usePagination","isIndicated","isDisabled","isSelected","handleOnHover","handleOnClick","React"],"mappings":"sHAMA,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,SACZ,OAAQ,wBACR,aAAc,KACd,OAAQ,UACR,WAAY,QACZ,eAAgB,SAChB,WAAY,SACZ,MAAO,cACP,QAAS,OACT,cAAe,SACf,EAAG,IACH,WAAY,IACZ,MAAO,cACP,GAAI,SACJ,SAAU,WAEV,mBAAoB,CAClB,UAAW,CACT,MAAO,eACP,GAAI,QACN,EACA,WAAY,CACV,MAAO,YACP,GAAI,QACN,EACA,kBAAmB,CACjB,QAAS,OACT,SAAU,WACV,OAAQ,EACR,UAAW,2DACb,CACF,EACA,cAAe,CACb,QAAS,GACT,OAAQ,cACR,cAAe,MACjB,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,OAAQ,IACV,CACF,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,qBACR,MAAO,WACP,WAAY,IACZ,mBAAoB,CAClB,UAAW,CACT,YAAa,YACb,MAAO,WACT,EACA,WAAY,CACV,YAAa,YACb,MAAO,WACT,CACF,CACF,CACF,EACA,UAAW,CACT,KAAM,CACJ,WAAY,IACZ,MAAO,QACP,GAAI,WACJ,mBAAoB,CAClB,UAAW,CACT,MAAO,QACP,GAAI,WACN,EACA,WAAY,CACV,MAAO,QACP,GAAI,WACN,CACF,CACF,CACF,CACF,EAEA,iBAAkB,CAChB,CACE,SAAU,GACV,UAAW,GACX,IAAK,CACH,WAAY,IACZ,MAAO,QACP,GAAI,WACJ,UAAW,kCACX,wBAAyB,CACvB,YAAa,kBACf,EACA,mBAAoB,CAClB,UAAW,CACT,MAAO,QACP,GAAI,WACN,EACA,WAAY,CACV,MAAO,QACP,GAAI,WACN,CACF,CACF,CACF,CACF,CACF,CAAC,EAEYC,EAAiB,CAAC,CAC7B,WAAAC,EACA,IAAAC,EACA,QAAAC,CACF,IAA2B,CACzB,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,eAAAC,EAAgB,cAAAC,EAAe,YAAAC,CAAY,EACxEC,EAEIC,EAAAA,EAAcJ,EAAe,SAASL,CAAU,EAChDU,EAAaJ,EAAc,SAASN,CAAU,EAE9CW,EAAaR,IAAgBH,EAE7BY,EAAgB,IAAM,CACtBD,GAAcD,GAClBH,GAAA,MAAAA,EAAcP,CAChB,CAAA,EAEMa,EAAiBb,GAAe,CACpCE,GAAA,MAAAA,EACAE,EAAAA,EAASJ,CAAU,CACrB,EAEA,OACEc,EAAA,cAACjB,EAAA,CACC,SAAUc,EACV,KAAK,KACL,QAAS,IAAME,EAAcb,CAAU,EACvC,IAAKC,EACL,UAAWQ,EACX,SAAUC,EACV,eAAcC,GAAc,OAC5B,gBAAeD,EACf,YAAaE,CAAAA,EAEZZ,CACH,CAEJ"}

package/dist/components/pagination/PaginationPreviousButton.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import * as React from 'react';
 declare const StyledActionIcon: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    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;
@@ -31,6 +31,8 @@ declare const StyledActionIcon: import("@atom-learning/stitches-react/types/styl
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -377,7 +379,7 @@ declare const StyledActionIcon: import("@atom-learning/stitches-react/types/styl
         };
     }> | undefined;
 }, "appearance" | "size" | "theme" | "label" | "children" | "as" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    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;
@@ -417,6 +419,8 @@ declare const StyledActionIcon: import("@atom-learning/stitches-react/types/styl
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/password-field/PasswordField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordField.js","sources":["../../../src/components/password-field/PasswordField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError, useFormCustomContext } from '~/components/form'\nimport { PasswordInput } from '~/components/password-input'\~~nimport { CSS } from '~/stitches'\~~n\ntype PasswordFieldProps = React.ComponentProps<typeof PasswordInput> &\n Omit<FieldElementWrapperProps, 'label'> & {\n label?: string\n }\n\nexport const PasswordField = ({\n css = {},\n hideLabel,\n label = 'Password',\n name,\n prompt = undefined,\n description,\n validation,\n appearance,\n ...remainingProps\n}: PasswordFieldProps) => {\n const { register } = useFormContext()\n const context = useFormCustomContext()\n const { error } = useFieldError(name)\n\n const ref = validation ? register(validation) : register\n const formAppearance = context?.appearance \|\| appearance\n\n return (\n <FieldWrapper\n css={{ ...css, position: 'relative' } ~~as CSS~~}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={formAppearance}\n >\n <PasswordInput\n autoComplete=\"current-password\"\n name={name}\n id={name}\n ref={ref}\n appearance={formAppearance}\n {...(error !== undefined && { state: 'error' })}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nPasswordField.displayName = 'PasswordField'\n"],"names":["PasswordField","css","hideLabel","label","name","prompt","description","validation","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","PasswordInput"],"mappings":"~~mZAgBO~~,MAAMA,EAAgB,CAAC,CAC5B,IAAAC,EAAM,CAAA,EACN,UAAAC,EACA,MAAAC,EAAQ,WACR,KAAAC,EACA,OAAAC,EAAS,OACT,YAAAC,EACA,WAAAC,EACA,WAAAC,KACGC,CACL,IAA0B,CACxB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9BC,EAAUC,IACV,CAAE,MAAAC,CAAM,EAAIC,EAAcX,CAAI,EAE9BY,EAAMT,EAAaG,EAASH,CAAU,EAAIG,EAC1CO,GAAiBL,GAAA,KAAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,IAAK,CAAE,GAAGlB,EAAK,SAAU,UAAW,EACpC,YAAaK,EACb,MAAOQ,EACP,QAASV,EACT,UAAWF,EACX,MAAOC,EACP,OAAQE,EACR,SAAU,QAAQE,GAAA,KAAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYU,CAAAA,EAEZC,EAAA,cAACE,EAAA,CACC,aAAa,mBACb,KAAMhB,EACN,GAAIA,EACJ,IAAKY,EACL,WAAYC,EACX,GAAIH,IAAU,QAAa,CAAE,MAAO,OAAQ,EAC5C,GAAGL,CACN,CAAA,CACF,CAEJ,EAEAT,EAAc,YAAc"}
1	+ {"version":3,"file":"PasswordField.js","sources":["../../../src/components/password-field/PasswordField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError, useFormCustomContext } from '~/components/form'\nimport { PasswordInput } from '~/components/password-input'\n\ntype PasswordFieldProps = React.ComponentProps<typeof PasswordInput> &\n Omit<FieldElementWrapperProps, 'label'> & {\n label?: string\n }\n\nexport const PasswordField = ({\n css = {},\n hideLabel,\n label = 'Password',\n name,\n prompt = undefined,\n description,\n validation,\n appearance,\n ...remainingProps\n}: PasswordFieldProps) => {\n const { register } = useFormContext()\n const context = useFormCustomContext()\n const { error } = useFieldError(name)\n\n const ref = validation ? register(validation) : register\n const formAppearance = context?.appearance \|\| appearance\n\n return (\n <FieldWrapper\n css={{ ...css, position: 'relative' }}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={formAppearance}\n >\n <PasswordInput\n autoComplete=\"current-password\"\n name={name}\n id={name}\n ref={ref}\n appearance={formAppearance}\n {...(error !== undefined && { state: 'error' })}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nPasswordField.displayName = 'PasswordField'\n"],"names":["PasswordField","css","hideLabel","label","name","prompt","description","validation","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","PasswordInput"],"mappings":"mZAeO,MAAMA,EAAgB,CAAC,CAC5B,IAAAC,EAAM,CAAA,EACN,UAAAC,EACA,MAAAC,EAAQ,WACR,KAAAC,EACA,OAAAC,EAAS,OACT,YAAAC,EACA,WAAAC,EACA,WAAAC,KACGC,CACL,IAA0B,CACxB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9BC,EAAUC,IACV,CAAE,MAAAC,CAAM,EAAIC,EAAcX,CAAI,EAE9BY,EAAMT,EAAaG,EAASH,CAAU,EAAIG,EAC1CO,GAAiBL,GAAA,KAAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,IAAK,CAAE,GAAGlB,EAAK,SAAU,UAAW,EACpC,YAAaK,EACb,MAAOQ,EACP,QAASV,EACT,UAAWF,EACX,MAAOC,EACP,OAAQE,EACR,SAAU,QAAQE,GAAA,KAAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYU,CAAAA,EAEZC,EAAA,cAACE,EAAA,CACC,aAAa,mBACb,KAAMhB,EACN,GAAIA,EACJ,IAAKY,EACL,WAAYC,EACX,GAAIH,IAAU,QAAa,CAAE,MAAO,OAAQ,EAC5C,GAAGL,CACN,CAAA,CACF,CAEJ,EAEAT,EAAc,YAAc"}

package/dist/components/password-input/PasswordInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Eye as f,EyeCrossed as w}from"@atom-learning/icons";import*as e from"react";import{useState as u}from"react";import{ActionIcon as x}from"../action-icon/ActionIcon.js";import{Box as E}from"../box/Box.js";import{Icon as I}from"../icon/Icon.js";import{Input as h}from"../input/Input.js";import"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as z}from"../../utilities/style/get-icon-size.js";const s=e.forwardRef(({css:i,hidePasswordText:m="Hide password",showPasswordText:p="Show password",size:o="md",...a},n)=>{const[t,c]=u(!1),d=()=>c(r=>!r),l=e.useMemo(()=>z(o),[o]);return e.createElement(E,{css:{position:"relative",...i}},e.createElement(h,{...a,size:o,type:t?"text":"password",ref:n,css:{pr:"$sizes$2"}}),e.createElement(x,{appearance:"simple",theme:"neutral",css:{bottom:o==="lg"?"4px":0,position:"absolute",right:0},label:t?m:p,onClick:d,onMouseDown:r=>r.preventDefault(),size:l},e.createElement(I,{is:t?f:w})))});s.displayName="PasswordInput";export{s as PasswordInput};
+import{Eye as f,EyeCrossed as w}from"@atom-learning/icons";import*as e from"react";import{useState as u}from"react";import{ActionIcon as x}from"../action-icon/ActionIcon.js";import{Box as E}from"../box/Box.js";import{Icon as I}from"../icon/Icon.js";import{Input as h}from"../input/Input.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as z}from"../../utilities/style/get-icon-size.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";const s=e.forwardRef(({css:i,hidePasswordText:m="Hide password",showPasswordText:p="Show password",size:o="md",...a},n)=>{const[t,c]=u(!1),l=()=>c(r=>!r),d=e.useMemo(()=>z(o),[o]);return e.createElement(E,{css:{position:"relative",...i}},e.createElement(h,{...a,size:o,type:t?"text":"password",ref:n,css:{pr:"$sizes$2"}}),e.createElement(x,{appearance:"simple",theme:"neutral",css:{bottom:o==="lg"?"4px":0,position:"absolute",right:0},label:t?m:p,onClick:l,onMouseDown:r=>r.preventDefault(),size:d},e.createElement(I,{is:t?f:w})))});s.displayName="PasswordInput";export{s as PasswordInput};
 //# sourceMappingURL=PasswordInput.js.map

package/dist/components/password-input/PasswordInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordInput.js","sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Box } from '~/components/box'\nimport { Icon } from '~/components/icon'\nimport type { InputProps } from '~/components/input'\nimport { Input } from '~/components/input'\nimport ~~type~~ { ~~CSS } from '~/stitches'\nimport {~~ getFieldIconSize } from '~/utilities'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n hidePasswordText?: string\n showPasswordText?: string\n}\n\nexport const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps> =\n React.forwardRef(\n (\n {\n css,\n hidePasswordText = 'Hide password',\n showPasswordText = 'Show password',\n size = 'md',\n ...restProps\n },\n ref\n ) => {\n const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n const togglePasswordVisibility = () =>\n setIsPasswordVisible((currentState) => !currentState)\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n return (\n <Box css={{ position: 'relative', ...css } ~~as CSS~~}>\n <Input\n {...restProps}\n size={size}\n type={isPasswordVisible ? 'text' : 'password'}\n ref={ref}\n css={{ pr: '$sizes$2' }}\n />\n <ActionIcon\n appearance=\"simple\"\n theme=\"neutral\"\n css={{\n bottom: size === 'lg' ? '4px' : 0,\n position: 'absolute',\n right: 0\n }}\n label={isPasswordVisible ? hidePasswordText : showPasswordText}\n onClick={togglePasswordVisibility}\n onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n size={iconSize}\n >\n <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n </ActionIcon>\n </Box>\n )\n }\n )\n\nPasswordInput.displayName = 'PasswordInput'\n"],"names":["PasswordInput","React","css","hidePasswordText","showPasswordText","size","restProps","ref","isPasswordVisible","setIsPasswordVisible","useState","togglePasswordVisibility","currentState","iconSize","getFieldIconSize","Box","Input","ActionIcon","e","Icon","Eye","EyeCrossed"],"mappings":"~~+jBAiBO~~,MAAMA,EACXC,EAAM,WACJ,CACE,CACE,IAAAC,EACA,iBAAAC,EAAmB,gBACnB,iBAAAC,EAAmB,gBACnB,KAAAC,EAAO,QACJC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAmBC,CAAoB,EAAIC,EAAkB,EAAK,EACnEC,EAA2B,IAC/BF,EAAsBG,GAAiB,CAACA,CAAY,EAEhDC,EAAWZ,EAAM,QAAQ,IAAMa,EAAiBT,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnE,OACEJ,EAAA,cAACc,EAAA,CAAI,IAAK,CAAE,SAAU,WAAY,GAAGb,CAAI,CAAA,EACvCD,EAAA,cAACe,EAAA,CACE,GAAGV,EACJ,KAAMD,EACN,KAAMG,EAAoB,OAAS,WACnC,IAAKD,EACL,IAAK,CAAE,GAAI,UAAW,CACxB,CAAA,EACAN,EAAA,cAACgB,EAAA,CACC,WAAW,SACX,MAAM,UACN,IAAK,CACH,OAAQZ,IAAS,KAAO,MAAQ,EAChC,SAAU,WACV,MAAO,CACT,EACA,MAAOG,EAAoBL,EAAmBC,EAC9C,QAASO,EACT,YAAcO,GAAMA,EAAE,iBACtB,KAAML,CAAAA,EAENZ,EAAA,cAACkB,EAAA,CAAK,GAAIX,EAAoBY,EAAMC,EAAY,CAClD,CACF,CAEJ,CACF,EAEFrB,EAAc,YAAc"}
1	+ {"version":3,"file":"PasswordInput.js","sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Box } from '~/components/box'\nimport { Icon } from '~/components/icon'\nimport type { InputProps } from '~/components/input'\nimport { Input } from '~/components/input'\nimport { getFieldIconSize } from '~/utilities'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n hidePasswordText?: string\n showPasswordText?: string\n}\n\nexport const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps> =\n React.forwardRef(\n (\n {\n css,\n hidePasswordText = 'Hide password',\n showPasswordText = 'Show password',\n size = 'md',\n ...restProps\n },\n ref\n ) => {\n const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n const togglePasswordVisibility = () =>\n setIsPasswordVisible((currentState) => !currentState)\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n return (\n <Box css={{ position: 'relative', ...css }}>\n <Input\n {...restProps}\n size={size}\n type={isPasswordVisible ? 'text' : 'password'}\n ref={ref}\n css={{ pr: '$sizes$2' }}\n />\n <ActionIcon\n appearance=\"simple\"\n theme=\"neutral\"\n css={{\n bottom: size === 'lg' ? '4px' : 0,\n position: 'absolute',\n right: 0\n }}\n label={isPasswordVisible ? hidePasswordText : showPasswordText}\n onClick={togglePasswordVisibility}\n onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n size={iconSize}\n >\n <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n </ActionIcon>\n </Box>\n )\n }\n )\n\nPasswordInput.displayName = 'PasswordInput'\n"],"names":["PasswordInput","React","css","hidePasswordText","showPasswordText","size","restProps","ref","isPasswordVisible","setIsPasswordVisible","useState","togglePasswordVisibility","currentState","iconSize","getFieldIconSize","Box","Input","ActionIcon","e","Icon","Eye","EyeCrossed"],"mappings":"qiBAgBO,MAAMA,EACXC,EAAM,WACJ,CACE,CACE,IAAAC,EACA,iBAAAC,EAAmB,gBACnB,iBAAAC,EAAmB,gBACnB,KAAAC,EAAO,QACJC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAmBC,CAAoB,EAAIC,EAAkB,EAAK,EACnEC,EAA2B,IAC/BF,EAAsBG,GAAiB,CAACA,CAAY,EAEhDC,EAAWZ,EAAM,QAAQ,IAAMa,EAAiBT,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnE,OACEJ,EAAA,cAACc,EAAA,CAAI,IAAK,CAAE,SAAU,WAAY,GAAGb,CAAI,CAAA,EACvCD,EAAA,cAACe,EAAA,CACE,GAAGV,EACJ,KAAMD,EACN,KAAMG,EAAoB,OAAS,WACnC,IAAKD,EACL,IAAK,CAAE,GAAI,UAAW,CACxB,CAAA,EACAN,EAAA,cAACgB,EAAA,CACC,WAAW,SACX,MAAM,UACN,IAAK,CACH,OAAQZ,IAAS,KAAO,MAAQ,EAChC,SAAU,WACV,MAAO,CACT,EACA,MAAOG,EAAoBL,EAAmBC,EAC9C,QAASO,EACT,YAAcO,GAAMA,EAAE,iBACtB,KAAML,CAAAA,EAENZ,EAAA,cAACkB,EAAA,CAAK,GAAIX,EAAoBY,EAAMC,EAAY,CAClD,CACF,CAEJ,CACF,EAEFrB,EAAc,YAAc"}

package/dist/components/popover/Popover.d.ts CHANGED Viewed

@@ -23,6 +23,8 @@ export declare const Popover: import("@atom-learning/stitches-react/types/styled
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -395,6 +397,8 @@ export declare const Popover: 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/popover/PopoverContent.d.ts CHANGED Viewed

@@ -26,6 +26,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/popover/PopoverContent.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Close as d}from"@atom-learning/icons";import{Content as l,Arrow as p,Close as h}from"@radix-ui/react-popover";import*as e from"react";import{POPOVER_Z_INDEX as c}from"../../constants/zIndices.js";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{slideDownAndFade as f,slideLeftAndFade as x,slideUpAndFade as $,slideRightAndFade as g}from"../../utilities/style/keyframe-animations.js";import{ActionIcon as w}from"../action-icon/ActionIcon.js";import{Icon as z}from"../icon/Icon.js";const b=t(l,{bg:"white",borderRadius:"$1",boxShadow:"$2",maxWidth:"90vw",p:"$sizes$2",pr:"$6",position:"relative",zIndex:c,"@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:f},'&[data-side="right"]':{animationName:x},'&[data-side="bottom"]':{animationName:$},'&[data-side="left"]':{animationName:g}}},variants:{size:{sm:{maxWidth:"200px"},md:{maxWidth:"400px"},lg:{maxWidth:"600px"}}}}),C=t(p,{fill:"white",zIndex:1,'[data-align="end"] &':{mr:"$sizes$2"},'[data-align="start"] &':{ml:"$sizes$2"}}),u=({children:i,side:o="top",sideOffset:a=8,closePopoverText:s="Close popover",showCloseButton:n=!0,size:m="md",...r})=>e.createElement(b,{size:m,side:o,sideOffset:a,...r},n&&e.createElement(w,{as:h,css:{position:"absolute",right:"$0",top:"$0"},label:s,size:"md",hasTooltip:!1,theme:"neutral"},e.createElement(z,{is:d})),i,e.createElement(C,{width:16,height:8}));export{u as PopoverContent};
+import{Close as r}from"@atom-learning/icons";import{Content as l,Arrow as p,Close as h}from"@radix-ui/react-popover";import*as e from"react";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import{slideDownAndFade as c,slideLeftAndFade as f,slideUpAndFade as $,slideRightAndFade as x}from"../../utilities/style/keyframe-animations.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{ActionIcon as g}from"../action-icon/ActionIcon.js";import{Icon as w}from"../icon/Icon.js";const z=t(l,{bg:"white",borderRadius:"$1",boxShadow:"$2",maxWidth:"90vw",p:"$sizes$2",pr:"$6",position:"relative",zIndex:10,"@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:c},'&[data-side="right"]':{animationName:f},'&[data-side="bottom"]':{animationName:$},'&[data-side="left"]':{animationName:x}}},variants:{size:{sm:{maxWidth:"200px"},md:{maxWidth:"400px"},lg:{maxWidth:"600px"}}}}),b=t(p,{fill:"white",zIndex:1,'[data-align="end"] &':{mr:"$sizes$2"},'[data-align="start"] &':{ml:"$sizes$2"}}),C=({children:i,side:o="top",sideOffset:a=8,closePopoverText:s="Close popover",showCloseButton:n=!0,size:m="md",...d})=>e.createElement(z,{size:m,side:o,sideOffset:a,...d},n&&e.createElement(g,{as:h,css:{position:"absolute",right:"$0",top:"$0"},label:s,size:"md",hasTooltip:!1,theme:"neutral"},e.createElement(w,{is:r})),i,e.createElement(b,{width:16,height:8}));export{C as PopoverContent};
 //# sourceMappingURL=PopoverContent.js.map

package/dist/components/popover/PopoverContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopoverContent.js","sources":["../../../src/components/popover/PopoverContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Arrow, Close, Content } from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { ~~POPOVER_Z_INDEX } from '~/constants/zIndices'\nimport {~~ styled } from '~/stitches'\nimport {\n slideDownAndFade,\n slideLeftAndFade,\n slideRightAndFade,\n slideUpAndFade\n} from '~/utilities'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContent = styled(Content, {\n bg: 'white',\n borderRadius: '$1',\n boxShadow: '$2',\n maxWidth: '90vw',\n p: '$sizes$2',\n pr: '$6',\n position: 'relative',\n zIndex: ~~POPOVER_Z_INDEX~~,\n '@allowMotion': {\n animationDuration: '75ms',\n animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',\n willChange: 'transform, opacity',\n '&[data-state=\"open\"]': {\n '&[data-side=\"top\"]': { animationName: slideDownAndFade },\n '&[data-side=\"right\"]': { animationName: slideLeftAndFade },\n '&[data-side=\"bottom\"]': { animationName: slideUpAndFade },\n '&[data-side=\"left\"]': { animationName: slideRightAndFade }\n }\n },\n variants: {\n size: {\n sm: { maxWidth: '200px' },\n md: { maxWidth: '400px' },\n lg: { maxWidth: '600px' }\n }\n }\n})\n\nconst StyledArrow = styled(Arrow, {\n fill: 'white',\n zIndex: 1,\n '[data-align=\"end\"] &': { mr: '$sizes$2' },\n '[data-align=\"start\"] &': { ml: '$sizes$2' }\n})\n\ntype PopoverContentProps = React.ComponentProps<typeof StyledContent> &\n React.ComponentProps<typeof Content> & {\n closePopoverText?: string\n showCloseButton?: boolean\n }\n\nexport const PopoverContent = ({\n children,\n side = 'top',\n sideOffset = 8,\n closePopoverText = 'Close popover',\n showCloseButton = true,\n size = 'md',\n ...remainingProps\n}: PopoverContentProps) => (\n <StyledContent\n size={size}\n side={side}\n sideOffset={sideOffset}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n css={{ position: 'absolute', right: '$0', top: '$0' }}\n label={closePopoverText}\n size=\"md\"\n hasTooltip={false}\n theme=\"neutral\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {children}\n <StyledArrow width={16} height={8} />\n </StyledContent>\n)\n"],"names":["StyledContent","styled","Content","~~POPOVER_Z_INDEX","~~slideDownAndFade","slideLeftAndFade","slideUpAndFade","slideRightAndFade","StyledArrow","Arrow","PopoverContent","children","side","sideOffset","closePopoverText","showCloseButton","size","remainingProps","React","ActionIcon","Close","Icon","CloseIcon"],"mappings":"~~2mBAgBA~~,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,GAAI,QACJ,aAAc,KACd,UAAW,KACX,SAAU,OACV,EAAG,WACH,GAAI,KACJ,SAAU,WACV,~~OAAQC~~,~~EACR~~,eAAgB,CACd,kBAAmB,OACnB,wBAAyB,gCACzB,WAAY,qBACZ,uBAAwB,CACtB,qBAAsB,CAAE,cAAeC,CAAiB,EACxD,uBAAwB,CAAE,cAAeC,CAAiB,EAC1D,wBAAyB,CAAE,cAAeC,CAAe,EACzD,sBAAuB,CAAE,cAAeC,CAAkB,CAC5D,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,CAC1B,CACF,CACF,CAAC,EAEKC,~~EAAcP~~,~~EAAOQ~~,EAAO,CAChC,KAAM,QACN,OAAQ,EACR,uBAAwB,CAAE,GAAI,UAAW,EACzC,yBAA0B,CAAE,GAAI,UAAW,CAC7C,CAAC,EAQYC,EAAiB,CAAC,CAC7B,SAAAC,EACA,KAAAC,EAAO,MACP,WAAAC,EAAa,EACb,iBAAAC,EAAmB,gBACnB,gBAAAC,EAAkB,GAClB,KAAAC,EAAO,QACJC,CACL,IACEC,EAAA,~~cAAClB~~,EAAA,CACC,~~KAAMgB~~,EACN,KAAMJ,EACN,WAAYC,EACX,GAAGI,~~CAAAA~~,~~EAEHF~~,GACCG,EAAA,cAACC,EAAA,CACC,GAAIC,EACJ,IAAK,CAAE,SAAU,WAAY,MAAO,KAAM,IAAK,IAAK,EACpD,MAAON,EACP,KAAK,KACL,WAAY,GACZ,MAAM,SAENI,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,EAAW,CACvB,EAEDX,EACDO,EAAA,cAACV,EAAA,CAAY,MAAO,GAAI,OAAQ,CAAA,CAAG,CACrC"}
1	+ {"version":3,"file":"PopoverContent.js","sources":["../../../src/components/popover/PopoverContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Arrow, Close, Content } from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport {\n slideDownAndFade,\n slideLeftAndFade,\n slideRightAndFade,\n slideUpAndFade\n} from '~/utilities'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContent = styled(Content, {\n bg: 'white',\n borderRadius: '$1',\n boxShadow: '$2',\n maxWidth: '90vw',\n p: '$sizes$2',\n pr: '$6',\n position: 'relative',\n zIndex: 10,\n '@allowMotion': {\n animationDuration: '75ms',\n animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',\n willChange: 'transform, opacity',\n '&[data-state=\"open\"]': {\n '&[data-side=\"top\"]': { animationName: slideDownAndFade },\n '&[data-side=\"right\"]': { animationName: slideLeftAndFade },\n '&[data-side=\"bottom\"]': { animationName: slideUpAndFade },\n '&[data-side=\"left\"]': { animationName: slideRightAndFade }\n }\n },\n variants: {\n size: {\n sm: { maxWidth: '200px' },\n md: { maxWidth: '400px' },\n lg: { maxWidth: '600px' }\n }\n }\n})\n\nconst StyledArrow = styled(Arrow, {\n fill: 'white',\n zIndex: 1,\n '[data-align=\"end\"] &': { mr: '$sizes$2' },\n '[data-align=\"start\"] &': { ml: '$sizes$2' }\n})\n\ntype PopoverContentProps = React.ComponentProps<typeof StyledContent> &\n React.ComponentProps<typeof Content> & {\n closePopoverText?: string\n showCloseButton?: boolean\n }\n\nexport const PopoverContent = ({\n children,\n side = 'top',\n sideOffset = 8,\n closePopoverText = 'Close popover',\n showCloseButton = true,\n size = 'md',\n ...remainingProps\n}: PopoverContentProps) => (\n <StyledContent\n size={size}\n side={side}\n sideOffset={sideOffset}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n css={{ position: 'absolute', right: '$0', top: '$0' }}\n label={closePopoverText}\n size=\"md\"\n hasTooltip={false}\n theme=\"neutral\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {children}\n <StyledArrow width={16} height={8} />\n </StyledContent>\n)\n"],"names":["StyledContent","styled","Content","slideDownAndFade","slideLeftAndFade","slideUpAndFade","slideRightAndFade","StyledArrow","Arrow","PopoverContent","children","side","sideOffset","closePopoverText","showCloseButton","size","remainingProps","React","ActionIcon","Close","Icon","CloseIcon"],"mappings":"6iBAeA,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,GAAI,QACJ,aAAc,KACd,UAAW,KACX,SAAU,OACV,EAAG,WACH,GAAI,KACJ,SAAU,WACV,OAAQ,GACR,eAAgB,CACd,kBAAmB,OACnB,wBAAyB,gCACzB,WAAY,qBACZ,uBAAwB,CACtB,qBAAsB,CAAE,cAAeC,CAAiB,EACxD,uBAAwB,CAAE,cAAeC,CAAiB,EAC1D,wBAAyB,CAAE,cAAeC,CAAe,EACzD,sBAAuB,CAAE,cAAeC,CAAkB,CAC5D,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,CAC1B,CACF,CACF,CAAC,EAEKC,EAAcN,EAAOO,EAAO,CAChC,KAAM,QACN,OAAQ,EACR,uBAAwB,CAAE,GAAI,UAAW,EACzC,yBAA0B,CAAE,GAAI,UAAW,CAC7C,CAAC,EAQYC,EAAiB,CAAC,CAC7B,SAAAC,EACA,KAAAC,EAAO,MACP,WAAAC,EAAa,EACb,iBAAAC,EAAmB,gBACnB,gBAAAC,EAAkB,GAClB,KAAAC,EAAO,QACJC,CACL,IACEC,EAAA,cAACjB,EAAA,CACC,KAAMe,EACN,KAAMJ,EACN,WAAYC,EACX,GAAGI,CAEHF,EAAAA,GACCG,EAAA,cAACC,EAAA,CACC,GAAIC,EACJ,IAAK,CAAE,SAAU,WAAY,MAAO,KAAM,IAAK,IAAK,EACpD,MAAON,EACP,KAAK,KACL,WAAY,GACZ,MAAM,SAENI,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,EAAW,CACvB,EAEDX,EACDO,EAAA,cAACV,EAAA,CAAY,MAAO,GAAI,OAAQ,CAAA,CAAG,CACrC"}

package/dist/components/progress-bar/ProgressBar.d.ts CHANGED Viewed

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

package/dist/components/progress-bar/ProgressBar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as o from"@radix-ui/react-progress";import*as a from"react";import{styled as t}from"../../stitches.js";const m=t(o.Root,{borderRadius:"$round",background:"$grey200",position:"relative",overflow:"hidden",width:"100%",variants:{size:{sm:{height:"4px"},md:{height:"$0"}},theme:{primary:{color:"$primary800"},info:{color:"$info"},success:{color:"$success"},warning:{color:"$warning"},danger:{color:"$danger"},neutral:{color:"$grey800",bg:"$grey400"}}}}),d=t(o.Indicator,{backgroundColor:"currentcolor",borderRadius:"$round",boxSizing:"border-box",height:"100%",position:"absolute",transition:"all 300ms ease-out"}),i=({value:r,max:e=100,size:s="md",theme:n="primary",...l})=>a.createElement(m,{value:r,max:e,theme:n,size:s,...l},a.createElement(d,{style:{width:"100%",transform:`translateX(-${100-(r||0)/e*100}%)`}}));i.displayName="ProgressBar";export{i as ProgressBar};
+import*as o from"@radix-ui/react-progress";import*as a from"react";import{styled as t}from"../../stitches.js";const m=t(o.Root,{borderRadius:"$round",background:"$grey200",position:"relative",overflow:"hidden",width:"100%",variants:{size:{sm:{height:"4px"},md:{height:"$0"}},theme:{primary:{color:"$primary800"},info:{color:"$info"},success:{color:"$success"},warning:{color:"$warning"},danger:{color:"$danger"},neutral:{color:"$grey800",bg:"$grey400"}}}}),d=t(o.Indicator,{backgroundColor:"currentColor",borderRadius:"$round",boxSizing:"border-box",height:"100%",position:"absolute",transition:"all 300ms ease-out"}),i=({value:r,max:e=100,size:s="md",theme:n="primary",...l})=>a.createElement(m,{value:r,max:e,theme:n,size:s,...l},a.createElement(d,{style:{width:"100%",transform:`translateX(-${100-(r||0)/e*100}%)`}}));i.displayName="ProgressBar";export{i as ProgressBar};
 //# sourceMappingURL=ProgressBar.js.map

package/dist/components/progress-bar/ProgressBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.js","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import * as Progress from '@radix-ui/react-progress'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nconst StyledProgressBar = styled(Progress.Root, {\n borderRadius: '$round',\n background: '$grey200',\n position: 'relative',\n overflow: 'hidden',\n width: '100%',\n variants: {\n size: {\n sm: { height: '4px' },\n md: { height: '$0' }\n },\n theme: {\n primary: { color: '$primary800' },\n info: { color: '$info' },\n success: { color: '$success' },\n warning: { color: '$warning' },\n danger: { color: '$danger' },\n neutral: { color: '$grey800', bg: '$grey400' }\n }\n }\n})\n\nconst StyledIndicator = styled(Progress.Indicator, {\n backgroundColor: '~~currentcolor~~',\n borderRadius: '$round',\n boxSizing: 'border-box',\n height: '100%',\n position: 'absolute',\n transition: 'all 300ms ease-out'\n})\n\ntype ProgressBarProps = React.ComponentPropsWithoutRef<\n typeof StyledProgressBar\n> &\n (\n \| { id: string; 'aria-label'?: string }\n \| { 'aria-label': string; id?: string }\n )\n\nexport const ProgressBar = ({\n value,\n max = 100,\n size = 'md',\n theme = 'primary',\n ...remainingProps\n}: ProgressBarProps) => (\n <StyledProgressBar\n value={value}\n max={max}\n theme={theme}\n size={size}\n {...remainingProps}\n >\n <StyledIndicator\n style={{\n width: '100%',\n transform: `translateX(-${100 - ((value \|\| 0) / max) * 100}%)`\n }}\n />\n </StyledProgressBar>\n)\n\nProgressBar.displayName = 'ProgressBar'\n"],"names":["StyledProgressBar","styled","Progress","StyledIndicator","ProgressBar","value","max","size","theme","remainingProps","React"],"mappings":"8GAKA,MAAMA,EAAoBC,EAAOC,EAAS,KAAM,CAC9C,aAAc,SACd,WAAY,WACZ,SAAU,WACV,SAAU,SACV,MAAO,OACP,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,OAAQ,KAAM,EACpB,GAAI,CAAE,OAAQ,IAAK,CACrB,EACA,MAAO,CACL,QAAS,CAAE,MAAO,aAAc,EAChC,KAAM,CAAE,MAAO,OAAQ,EACvB,QAAS,CAAE,MAAO,UAAW,EAC7B,QAAS,CAAE,MAAO,UAAW,EAC7B,OAAQ,CAAE,MAAO,SAAU,EAC3B,QAAS,CAAE,MAAO,WAAY,GAAI,UAAW,CAC/C,CACF,CACF,CAAC,EAEKC,EAAkBF,EAAOC,EAAS,UAAW,CACjD,gBAAiB,eACjB,aAAc,SACd,UAAW,aACX,OAAQ,OACR,SAAU,WACV,WAAY,oBACd,CAAC,EAUYE,EAAc,CAAC,CAC1B,MAAAC,EACA,IAAAC,EAAM,IACN,KAAAC,EAAO,KACP,MAAAC,EAAQ,aACLC,CACL,IACEC,EAAA,cAACV,EAAA,CACC,MAAOK,EACP,IAAKC,EACL,MAAOE,EACP,KAAMD,EACL,GAAGE,GAEJC,EAAA,cAACP,EAAA,CACC,MAAO,CACL,MAAO,OACP,UAAW,eAAe,KAAQE,GAAS,GAAKC,EAAO,OACzD,CAAA,CACF,CACF,EAGFF,EAAY,YAAc"}
1	+ {"version":3,"file":"ProgressBar.js","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import * as Progress from '@radix-ui/react-progress'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nconst StyledProgressBar = styled(Progress.Root, {\n borderRadius: '$round',\n background: '$grey200',\n position: 'relative',\n overflow: 'hidden',\n width: '100%',\n variants: {\n size: {\n sm: { height: '4px' },\n md: { height: '$0' }\n },\n theme: {\n primary: { color: '$primary800' },\n info: { color: '$info' },\n success: { color: '$success' },\n warning: { color: '$warning' },\n danger: { color: '$danger' },\n neutral: { color: '$grey800', bg: '$grey400' }\n }\n }\n})\n\nconst StyledIndicator = styled(Progress.Indicator, {\n backgroundColor: 'currentColor',\n borderRadius: '$round',\n boxSizing: 'border-box',\n height: '100%',\n position: 'absolute',\n transition: 'all 300ms ease-out'\n})\n\ntype ProgressBarProps = React.ComponentPropsWithoutRef<\n typeof StyledProgressBar\n> &\n (\n \| { id: string; 'aria-label'?: string }\n \| { 'aria-label': string; id?: string }\n )\n\nexport const ProgressBar = ({\n value,\n max = 100,\n size = 'md',\n theme = 'primary',\n ...remainingProps\n}: ProgressBarProps) => (\n <StyledProgressBar\n value={value}\n max={max}\n theme={theme}\n size={size}\n {...remainingProps}\n >\n <StyledIndicator\n style={{\n width: '100%',\n transform: `translateX(-${100 - ((value \|\| 0) / max) * 100}%)`\n }}\n />\n </StyledProgressBar>\n)\n\nProgressBar.displayName = 'ProgressBar'\n"],"names":["StyledProgressBar","styled","Progress","StyledIndicator","ProgressBar","value","max","size","theme","remainingProps","React"],"mappings":"8GAKA,MAAMA,EAAoBC,EAAOC,EAAS,KAAM,CAC9C,aAAc,SACd,WAAY,WACZ,SAAU,WACV,SAAU,SACV,MAAO,OACP,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,OAAQ,KAAM,EACpB,GAAI,CAAE,OAAQ,IAAK,CACrB,EACA,MAAO,CACL,QAAS,CAAE,MAAO,aAAc,EAChC,KAAM,CAAE,MAAO,OAAQ,EACvB,QAAS,CAAE,MAAO,UAAW,EAC7B,QAAS,CAAE,MAAO,UAAW,EAC7B,OAAQ,CAAE,MAAO,SAAU,EAC3B,QAAS,CAAE,MAAO,WAAY,GAAI,UAAW,CAC/C,CACF,CACF,CAAC,EAEKC,EAAkBF,EAAOC,EAAS,UAAW,CACjD,gBAAiB,eACjB,aAAc,SACd,UAAW,aACX,OAAQ,OACR,SAAU,WACV,WAAY,oBACd,CAAC,EAUYE,EAAc,CAAC,CAC1B,MAAAC,EACA,IAAAC,EAAM,IACN,KAAAC,EAAO,KACP,MAAAC,EAAQ,aACLC,CACL,IACEC,EAAA,cAACV,EAAA,CACC,MAAOK,EACP,IAAKC,EACL,MAAOE,EACP,KAAMD,EACL,GAAGE,GAEJC,EAAA,cAACP,EAAA,CACC,MAAO,CACL,MAAO,OACP,UAAW,eAAe,KAAQE,GAAS,GAAKC,EAAO,OACzD,CAAA,CACF,CACF,EAGFF,EAAY,YAAc"}

package/dist/components/radio-button/RadioButton.d.ts CHANGED Viewed

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

package/dist/components/radio-button/RadioButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as o from"@radix-ui/react-radio-group";import*as e from"react";import{styled as t}from"../../stitches.js";const s=t(o.Item,{alignItems:"center",appearance:"none",backgroundColor:"transparent",border:"1px solid $grey800",borderRadius:"$round",color:"white",cursor:"pointer",display:"flex",justifyContent:"center",p:0,size:"$1",variants:{size:{md:{size:"$1"},lg:{size:"$2",mt:"-$1"}}},transition:"all 50ms ease-out","&:focus":{outline:"2px solid $primary800",outlineOffset:"1px"},'&[data-state="checked"]':{backgroundColor:"$primary800",borderColor:"$primary800"},"&[disabled]":{backgroundColor:"$grey200",borderColor:"$grey800",color:"$grey800",cursor:"not-allowed"}}),n=t(o.Indicator,{size:"6px",borderRadius:"$round",backgroundColor:"currentcolor",position:"absolute",variants:{size:{md:{size:"6px"},lg:{size:"12px"}}}}),a=({size:r,...i})=>e.createElement(s,{...i,size:r},e.createElement(n,{size:r}));a.displayName="RadioButton";export{a as RadioButton};
+import*as o from"@radix-ui/react-radio-group";import*as e from"react";import{styled as t}from"../../stitches.js";const s=t(o.Item,{alignItems:"center",appearance:"none",backgroundColor:"transparent",border:"1px solid $grey800",borderRadius:"$round",color:"white",cursor:"pointer",display:"flex",justifyContent:"center",p:0,size:"$1",variants:{size:{md:{size:"$1"},lg:{size:"$2",mt:"-$1"}}},transition:"all 50ms ease-out","&:focus":{outline:"2px solid $primary800",outlineOffset:"1px"},'&[data-state="checked"]':{backgroundColor:"$primary800",borderColor:"$primary800"},"&[disabled]":{backgroundColor:"$grey200",borderColor:"$grey800",color:"$grey800",cursor:"not-allowed"}}),n=t(o.Indicator,{size:"6px",borderRadius:"$round",backgroundColor:"currentColor",position:"absolute",variants:{size:{md:{size:"6px"},lg:{size:"12px"}}}}),a=({size:r,...i})=>e.createElement(s,{...i,size:r},e.createElement(n,{size:r}));a.displayName="RadioButton";export{a as RadioButton};
 //# sourceMappingURL=RadioButton.js.map

package/dist/components/radio-button/RadioButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.js","sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { Override } from '~/utilities/types'\n\nconst StyledRadioButton = styled(RadioGroup.Item, {\n alignItems: 'center',\n appearance: 'none',\n backgroundColor: 'transparent',\n border: '1px solid $grey800',\n borderRadius: '$round',\n color: 'white',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n p: 0,\n size: '$1',\n variants: {\n size: {\n md: {\n size: '$1'\n },\n lg: {\n size: '$2',\n mt: '-$1'\n }\n }\n },\n transition: 'all 50ms ease-out',\n '&:focus': {\n outline: '2px solid $primary800',\n outlineOffset: '1px'\n },\n '&[data-state=\"checked\"]': {\n backgroundColor: '$primary800',\n borderColor: '$primary800'\n },\n '&[disabled]': {\n backgroundColor: '$grey200',\n borderColor: '$grey800',\n color: '$grey800',\n cursor: 'not-allowed'\n }\n})\n\nconst StyledIndicator = styled(RadioGroup.Indicator, {\n size: '6px',\n borderRadius: '$round',\n backgroundColor: '~~currentcolor~~',\n position: 'absolute',\n variants: {\n size: {\n md: {\n size: '6px'\n },\n lg: {\n size: '12px'\n }\n }\n }\n})\n\ntype RadioButtonProps = Override<\n React.ComponentProps<typeof StyledRadioButton>,\n {\n as?: never\n } & {\n 'aria-label'?: string\n }\n>\n\nexport const RadioButton = ({ size, ...props }: RadioButtonProps) => {\n return (\n <StyledRadioButton {...props} size={size}>\n <StyledIndicator size={size} />\n </StyledRadioButton>\n )\n}\n\nRadioButton.displayName = 'RadioButton'\n"],"names":["StyledRadioButton","styled","RadioGroup","StyledIndicator","RadioButton","size","props","React"],"mappings":"iHAMA,MAAMA,EAAoBC,EAAOC,EAAW,KAAM,CAChD,WAAY,SACZ,WAAY,OACZ,gBAAiB,cACjB,OAAQ,qBACR,aAAc,SACd,MAAO,QACP,OAAQ,UACR,QAAS,OACT,eAAgB,SAChB,EAAG,EACH,KAAM,KACN,SAAU,CACR,KAAM,CACJ,GAAI,CACF,KAAM,IACR,EACA,GAAI,CACF,KAAM,KACN,GAAI,KACN,CACF,CACF,EACA,WAAY,oBACZ,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,0BAA2B,CACzB,gBAAiB,cACjB,YAAa,aACf,EACA,cAAe,CACb,gBAAiB,WACjB,YAAa,WACb,MAAO,WACP,OAAQ,aACV,CACF,CAAC,EAEKC,EAAkBF,EAAOC,EAAW,UAAW,CACnD,KAAM,MACN,aAAc,SACd,gBAAiB,eACjB,SAAU,WACV,SAAU,CACR,KAAM,CACJ,GAAI,CACF,KAAM,KACR,EACA,GAAI,CACF,KAAM,MACR,CACF,CACF,CACF,CAAC,EAWYE,EAAc,CAAC,CAAE,KAAAC,KAASC,CAAM,IAEzCC,EAAA,cAACP,EAAA,CAAmB,GAAGM,EAAO,KAAMD,GAClCE,EAAA,cAACJ,EAAA,CAAgB,KAAME,CAAAA,CAAM,CAC/B,EAIJD,EAAY,YAAc"}
1	+ {"version":3,"file":"RadioButton.js","sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { Override } from '~/utilities/types'\n\nconst StyledRadioButton = styled(RadioGroup.Item, {\n alignItems: 'center',\n appearance: 'none',\n backgroundColor: 'transparent',\n border: '1px solid $grey800',\n borderRadius: '$round',\n color: 'white',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n p: 0,\n size: '$1',\n variants: {\n size: {\n md: {\n size: '$1'\n },\n lg: {\n size: '$2',\n mt: '-$1'\n }\n }\n },\n transition: 'all 50ms ease-out',\n '&:focus': {\n outline: '2px solid $primary800',\n outlineOffset: '1px'\n },\n '&[data-state=\"checked\"]': {\n backgroundColor: '$primary800',\n borderColor: '$primary800'\n },\n '&[disabled]': {\n backgroundColor: '$grey200',\n borderColor: '$grey800',\n color: '$grey800',\n cursor: 'not-allowed'\n }\n})\n\nconst StyledIndicator = styled(RadioGroup.Indicator, {\n size: '6px',\n borderRadius: '$round',\n backgroundColor: 'currentColor',\n position: 'absolute',\n variants: {\n size: {\n md: {\n size: '6px'\n },\n lg: {\n size: '12px'\n }\n }\n }\n})\n\ntype RadioButtonProps = Override<\n React.ComponentProps<typeof StyledRadioButton>,\n {\n as?: never\n } & {\n 'aria-label'?: string\n }\n>\n\nexport const RadioButton = ({ size, ...props }: RadioButtonProps) => {\n return (\n <StyledRadioButton {...props} size={size}>\n <StyledIndicator size={size} />\n </StyledRadioButton>\n )\n}\n\nRadioButton.displayName = 'RadioButton'\n"],"names":["StyledRadioButton","styled","RadioGroup","StyledIndicator","RadioButton","size","props","React"],"mappings":"iHAMA,MAAMA,EAAoBC,EAAOC,EAAW,KAAM,CAChD,WAAY,SACZ,WAAY,OACZ,gBAAiB,cACjB,OAAQ,qBACR,aAAc,SACd,MAAO,QACP,OAAQ,UACR,QAAS,OACT,eAAgB,SAChB,EAAG,EACH,KAAM,KACN,SAAU,CACR,KAAM,CACJ,GAAI,CACF,KAAM,IACR,EACA,GAAI,CACF,KAAM,KACN,GAAI,KACN,CACF,CACF,EACA,WAAY,oBACZ,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,0BAA2B,CACzB,gBAAiB,cACjB,YAAa,aACf,EACA,cAAe,CACb,gBAAiB,WACjB,YAAa,WACb,MAAO,WACP,OAAQ,aACV,CACF,CAAC,EAEKC,EAAkBF,EAAOC,EAAW,UAAW,CACnD,KAAM,MACN,aAAc,SACd,gBAAiB,eACjB,SAAU,WACV,SAAU,CACR,KAAM,CACJ,GAAI,CACF,KAAM,KACR,EACA,GAAI,CACF,KAAM,MACR,CACF,CACF,CACF,CAAC,EAWYE,EAAc,CAAC,CAAE,KAAAC,KAASC,CAAM,IAEzCC,EAAA,cAACP,EAAA,CAAmB,GAAGM,EAAO,KAAMD,GAClCE,EAAA,cAACJ,EAAA,CAAgB,KAAME,CAAAA,CAAM,CAC/B,EAIJD,EAAY,YAAc"}

package/dist/components/radio-button/RadioButtonGroup.d.ts CHANGED Viewed

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

package/dist/components/radio-button-field/RadioButtonField.d.ts CHANGED Viewed

@@ -40,6 +40,8 @@ export declare const RadioButtonField: {
                     textMinimal: string;
                     background: string;
                     backgroundAccent: string;
+                    black: string;
+                    white: string;
                     grey100: string;
                     grey200: string;
                     grey300: string;

package/dist/components/radio-card/RadioCard.d.ts CHANGED Viewed

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

package/dist/components/search-input/SearchInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Search as $,Close as k}from"@atom-learning/icons";import*as t from"react";import{ActionIcon as L}from"../action-icon/ActionIcon.js";import{Icon as E}from"../icon/Icon.js";import{InputText as x,InputBackground as T}from"../input/Input.js";import{styled as f}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{getFieldIconSize as M}from"../../utilities/style/get-icon-size.js";import{useCallbackRef as N}from"../../utilities/hooks/useCallbackRef.js";var O=(e=>(e.SEARCH="SEARCH",e.CLEAR="CLEAR",e))(O||{});const V=f(E,{color:"$grey700",position:"absolute",pointerEvents:"none",variants:{size:{sm:{right:"$2",size:"$1"},md:{right:10,size:20},lg:{right:10,size:20}}}}),Y=f(x,{"&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button":{display:"none"}}),d=t.forwardRef(({size:e="md",appearance:h="standard",css:C,value:o,defaultValue:l="",onValueChange:a,clearText:b="Clear",onChange:c,...v},g)=>{const[u,A]=N(),[R,p]=t.useState(l),[z,m]=t.useState(l?"CLEAR":"SEARCH");t.useEffect(()=>{typeof o>"u"||(p(o),m(o?"CLEAR":"SEARCH"))},[o]);const S=t.useMemo(()=>M(e),[e]);t.useImperativeHandle(g,()=>u.current);const w=()=>{var n,r;const s=u.current;if(!s)return;const i=(n=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:n.set;(r=i==null?void 0:i.call)==null||r.call(i,s,"");const H=new Event("input",{bubbles:!0});s.dispatchEvent(H),s.focus(),a==null||a("")},I=n=>{c==null||c(n);const r=n.target.value;p(r),a==null||a(r),m(r?"CLEAR":"SEARCH")},y=()=>z==="SEARCH"?t.createElement(V,{is:$,size:e,css:{size:e=="sm"?"$1":20,top:"50%",transform:"translateY(-50%)"}}):t.createElement(L,{label:b,theme:"neutral",size:S,css:{position:"absolute",top:"50%",transform:"translateY(-50%)",right:"$1"},onClick:w},t.createElement(E,{is:k}));return t.createElement(T,{css:{position:"relative",width:"auto",...C},size:e,appearance:h},t.createElement(Y,{ref:A,size:e,type:"search",...v,value:R,onChange:I,css:{pr:e==="sm"?"$5":"$6"}}),y())});d.displayName="SearchInput";export{d as SearchInput};
+import{Search as $,Close as k}from"@atom-learning/icons";import*as t from"react";import{ActionIcon as L}from"../action-icon/ActionIcon.js";import{Icon as E}from"../icon/Icon.js";import{InputText as x,InputBackground as T}from"../input/Input.js";import{styled as f}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as M}from"../../utilities/style/get-icon-size.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{useCallbackRef as N}from"../../utilities/hooks/useCallbackRef.js";var O=(e=>(e.SEARCH="SEARCH",e.CLEAR="CLEAR",e))(O||{});const V=f(E,{color:"$grey700",position:"absolute",pointerEvents:"none",variants:{size:{sm:{right:"$2",size:"$1"},md:{right:10,size:20},lg:{right:10,size:20}}}}),Y=f(x,{"&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button":{display:"none"}}),d=t.forwardRef(({size:e="md",appearance:h="standard",css:C,value:o,defaultValue:l="",onValueChange:a,clearText:b="Clear",onChange:c,...v},g)=>{const[u,A]=N(),[R,p]=t.useState(l),[z,m]=t.useState(l?"CLEAR":"SEARCH");t.useEffect(()=>{typeof o>"u"||(p(o),m(o?"CLEAR":"SEARCH"))},[o]);const S=t.useMemo(()=>M(e),[e]);t.useImperativeHandle(g,()=>u.current);const w=()=>{var n,r;const s=u.current;if(!s)return;const i=(n=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:n.set;(r=i==null?void 0:i.call)==null||r.call(i,s,"");const H=new Event("input",{bubbles:!0});s.dispatchEvent(H),s.focus(),a==null||a("")},I=n=>{c==null||c(n);const r=n.target.value;p(r),a==null||a(r),m(r?"CLEAR":"SEARCH")},y=()=>z==="SEARCH"?t.createElement(V,{is:$,size:e,css:{size:e=="sm"?"$1":20,top:"50%",transform:"translateY(-50%)"}}):t.createElement(L,{label:b,theme:"neutral",size:S,css:{position:"absolute",top:"50%",transform:"translateY(-50%)",right:"$1"},onClick:w},t.createElement(E,{is:k}));return t.createElement(T,{css:{position:"relative",width:"auto",...C},size:e,appearance:h},t.createElement(Y,{ref:A,size:e,type:"search",...v,value:R,onChange:I,css:{pr:e==="sm"?"$5":"$6"}}),y())});d.displayName="SearchInput";export{d as SearchInput};
 //# sourceMappingURL=SearchInput.js.map

package/dist/components/section-message/SectionMessage.d.ts CHANGED Viewed

@@ -33,6 +33,8 @@ declare const StyledSectionMessage: import("@atom-learning/stitches-react/types/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -416,6 +418,8 @@ export declare const SectionMessage: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;

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

@@ -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 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};
 //# sourceMappingURL=SectionMessageLayout.js.map

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

	@@ -1 +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"}
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":"gGAKO,MAAMA,EAAwB,CAAC,CACpC,IAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CACC,IAAK,CACH,SAAU,OACV,WAAY,EACZ,WAAY,KACZ,yBAA0B,CAAE,GAAI,IAAK,EACrC,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"}