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

package/dist/components/chip/Chip.d.ts

@@ -24,6 +24,8 @@ export declare const StyledChipContent: import("@atom-learning/stitches-react/ty
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -371,10 +373,10 @@ export declare const StyledChipContent: import("@atom-learning/stitches-react/ty
 }>>;
 export declare const ChipIcon: (props: React.ComponentProps<typeof Icon>) => React.JSX.Element;
 export declare const StyledRoot: 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;
@@ -400,6 +402,8 @@ export declare const StyledRoot: import("@atom-learning/stitches-react/types/sty
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -770,6 +774,8 @@ export declare const StyledRoot: import("@atom-learning/stitches-react/types/sty
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -1119,11 +1125,11 @@ export type TChipRootContext = React.ComponentProps<typeof StyledRoot>;
 export type TChipRootProviderProps = TChipRootContext;
 export declare const ChipRootContext: React.Context<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "direction" | "gap" | "css" | "align" | "wrap" | "justify"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    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" | "gap" | "css" | "wrap" | "justify" | "align"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+    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;
@@ -1150,6 +1156,8 @@ export declare const ChipRootContext: React.Context<Omit<Omit<Omit<React.Detaile
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1522,6 +1530,8 @@ export declare const ChipRootContext: React.Context<Omit<Omit<Omit<React.Detaile
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1872,11 +1882,11 @@ export declare const ChipRootProvider: ({ size, children }: TChipRootProviderPro
 export type TChipRootProps = TChipRootProviderProps;
 export declare const Chip: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "direction" | "gap" | "css" | "align" | "wrap" | "justify"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    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" | "gap" | "css" | "wrap" | "justify" | "align"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+    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;
@@ -1903,6 +1913,8 @@ export declare const Chip: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -2275,6 +2287,8 @@ export declare const Chip: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;

package/dist/components/chip-dismissible-group/ChipDismissibleGroupItem.d.ts

@@ -3,11 +3,11 @@ import { DismissibleGroup } from '../../components/dismissible-group';
 import { Icon } from '../icon';
 declare const StyledChipDismissibleGroupItem: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "direction" | "gap" | "css" | "align" | "wrap" | "justify"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    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" | "gap" | "css" | "wrap" | "justify" | "align"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+    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;
@@ -34,6 +34,8 @@ declare const StyledChipDismissibleGroupItem: import("@atom-learning/stitches-re
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -406,6 +408,8 @@ declare const StyledChipDismissibleGroupItem: import("@atom-learning/stitches-re
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -781,6 +785,8 @@ declare const StyledChipDismissibleGroupItem: import("@atom-learning/stitches-re
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/chip-toggle-group/ChipToggleGroupItem.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { Icon } from '../../components/icon';
 declare const StyledChipToggleGroupItem: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "direction" | "gap" | "css" | "align" | "wrap" | "justify"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    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" | "gap" | "css" | "wrap" | "justify" | "align"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+    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;
@@ -34,6 +34,8 @@ declare const StyledChipToggleGroupItem: import("@atom-learning/stitches-react/t
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -406,6 +408,8 @@ declare const StyledChipToggleGroupItem: import("@atom-learning/stitches-react/t
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -781,6 +785,8 @@ declare const StyledChipToggleGroupItem: import("@atom-learning/stitches-react/t
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/chip-toggle-group/ChipToggleGroupItem.js

@@ -1,2 +1,2 @@
-import{Ok as s}from"@atom-learning/icons";import*as a from"@radix-ui/react-toggle-group";import*as o from"react";import{Chip as e}from"../chip/Chip.js";import"../chip/ChipGroup.js";import{Icon as p}from"../icon/Icon.js";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as n}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const i=t(p,{display:"none"}),c=t.withConfig({shouldForwardStitchesProp:r=>["as"].includes(r)})(e,{"&:not([disabled])":{cursor:"pointer","&:hover":{bg:"$grey200",color:"$grey1000",borderColor:"currentColor"},"&:focus-visible":{...n()},'&[data-state="on"]':{"&:hover":{bg:"white",color:"$primary1000"}}},'&[data-state="off"]':{color:"$grey800",bg:"white",borderColor:"$grey600"},'&[data-state="on"]':{[`& ${i}`]:{display:"block"}}}),d=({size:r="md",children:m,...l})=>o.createElement(a.Item,{...l,asChild:!0},o.createElement(c,{as:"button"},o.createElement(i,{is:s,size:r==="lg"?"md":"sm"}),o.createElement(e.Content,null,m)));export{d as ChipToggleGroupItem};
+import{Ok as l}from"@atom-learning/icons";import*as a from"@radix-ui/react-toggle-group";import*as o from"react";import{Chip as r}from"../chip/Chip.js";import"../chip/ChipGroup.js";import{Icon as n}from"../icon/Icon.js";import{styled as t}from"../../stitches.js";const p=t(n,{display:"none"}),m=t.withConfig({shouldForwardStitchesProp:e=>["as"].includes(e)})(r,{"&:not([disabled])":{cursor:"pointer","&:hover":{bg:"$grey200",color:"$grey1000",borderColor:"currentColor"},"&:focus-visible":{outline:"none",position:"relative",zIndex:1,boxShadow:"white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px"},'&[data-state="on"]':{"&:hover":{bg:"white",color:"$primary1000"}}},'&[data-state="off"]':{color:"$grey800",bg:"white",borderColor:"$grey600"},'&[data-state="on"]':{"& svg":{display:"block"}}}),d=({size:e="md",children:i,...s})=>o.createElement(a.Item,{...s,asChild:!0},o.createElement(m,{as:"button"},o.createElement(p,{is:l,size:e==="lg"?"md":"sm"}),o.createElement(r.Content,null,i)));export{d as ChipToggleGroupItem};
 //# sourceMappingURL=ChipToggleGroupItem.js.map

package/dist/components/chip-toggle-group/ChipToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipToggleGroupItem.js","sources":["../../../src/components/chip-toggle-group/ChipToggleGroupItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { Chip } from '~/components/chip'\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nconst StyledChipToggleIcon = styled(Icon, {\n  display: 'none'\n})\n\nconst StyledChipToggleGroupItem = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Chip, {\n  '&:not([disabled])': {\n    cursor: 'pointer',\n    '&:hover': {\n      bg: '$grey200',\n      color: '$grey1000',\n      borderColor: 'currentColor'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    },\n    '&[data-state=\"on\"]': {\n      '&:hover': {\n        bg: 'white',\n        color: '$primary1000'\n      }\n    }\n  },\n  '&[data-state=\"off\"]': {\n    color: '$grey800',\n    bg: 'white',\n    borderColor: '$grey600'\n  },\n  '&[data-state=\"on\"]': {\n    [`& ${StyledChipToggleIcon}`]: {\n      display: 'block'\n    }\n  }\n})\n\ntype TChipToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledChipToggleGroupItem>\n\nexport const ChipToggleGroupItem = ({\n  size = 'md',\n  children,\n  ...rest\n}: TChipToggleGroupItem) => {\n  return (\n    <ToggleGroup.Item {...rest} asChild>\n      <StyledChipToggleGroupItem as=\"button\">\n        <StyledChipToggleIcon is={Ok} size={size === 'lg' ? 'md' : 'sm'} />\n        <Chip.Content>{children}</Chip.Content>\n      </StyledChipToggleGroupItem>\n    </ToggleGroup.Item>\n  )\n}\n"],"names":["StyledChipToggleIcon","styled","Icon","StyledChipToggleGroupItem","propName","Chip","focusVisibleStyleBlock","ChipToggleGroupItem","size","children","rest","React","ToggleGroup","Ok"],"mappings":"2hBASA,MAAMA,EAAuBC,EAAOC,EAAM,CACxC,QAAS,MACX,CAAC,EAEKC,EAA4BF,EAAO,WAAW,CAClD,0BAA4BG,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,oBAAqB,CACnB,OAAQ,UACR,UAAW,CACT,GAAI,WACJ,MAAO,YACP,YAAa,cACf,EACA,kBAAmB,CACjB,GAAGC,GACL,EACA,qBAAsB,CACpB,UAAW,CACT,GAAI,QACJ,MAAO,cACT,CACF,CACF,EACA,sBAAuB,CACrB,MAAO,WACP,GAAI,QACJ,YAAa,UACf,EACA,qBAAsB,CACpB,CAAC,KAAKN,KAAyB,CAC7B,QAAS,OACX,CACF,CACF,CAAC,EAKYO,EAAsB,CAAC,CAClC,KAAAC,EAAO,KACP,SAAAC,KACGC,CACL,IAEIC,EAAA,cAACC,EAAY,KAAZ,CAAkB,GAAGF,EAAM,QAAO,EAAA,EACjCC,EAAA,cAACR,EAAA,CAA0B,GAAG,UAC5BQ,EAAA,cAACX,EAAA,CAAqB,GAAIa,EAAI,KAAML,IAAS,KAAO,KAAO,IAAA,CAAM,EACjEG,EAAA,cAACN,EAAK,QAAL,KAAcI,CAAS,CAC1B,CACF"}
+{"version":3,"file":"ChipToggleGroupItem.js","sources":["../../../src/components/chip-toggle-group/ChipToggleGroupItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { Chip } from '~/components/chip'\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/stitches'\n\nconst StyledChipToggleIcon = styled(Icon, {\n  display: 'none'\n})\n\nconst StyledChipToggleGroupItem = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Chip, {\n  '&:not([disabled])': {\n    cursor: 'pointer',\n    '&:hover': {\n      bg: '$grey200',\n      color: '$grey1000',\n      borderColor: 'currentColor'\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    '&[data-state=\"on\"]': {\n      '&:hover': {\n        bg: 'white',\n        color: '$primary1000'\n      }\n    }\n  },\n  '&[data-state=\"off\"]': {\n    color: '$grey800',\n    bg: 'white',\n    borderColor: '$grey600'\n  },\n  '&[data-state=\"on\"]': {\n    '& svg': {\n      display: 'block'\n    }\n  }\n})\n\ntype TChipToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledChipToggleGroupItem>\n\nexport const ChipToggleGroupItem = ({\n  size = 'md',\n  children,\n  ...rest\n}: TChipToggleGroupItem) => {\n  return (\n    <ToggleGroup.Item {...rest} asChild>\n      <StyledChipToggleGroupItem as=\"button\">\n        <StyledChipToggleIcon is={Ok} size={size === 'lg' ? 'md' : 'sm'} />\n        <Chip.Content>{children}</Chip.Content>\n      </StyledChipToggleGroupItem>\n    </ToggleGroup.Item>\n  )\n}\n"],"names":["StyledChipToggleIcon","styled","Icon","StyledChipToggleGroupItem","propName","Chip","ChipToggleGroupItem","size","children","rest","React","ToggleGroup","Ok"],"mappings":"uQAQA,MAAMA,EAAuBC,EAAOC,EAAM,CACxC,QAAS,MACX,CAAC,EAEKC,EAA4BF,EAAO,WAAW,CAClD,0BAA4BG,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,oBAAqB,CACnB,OAAQ,UACR,UAAW,CACT,GAAI,WACJ,MAAO,YACP,YAAa,cACf,EACA,kBAAmB,CACjB,QAAS,OACT,SAAU,WACV,OAAQ,EACR,UAAW,2DACb,EACA,qBAAsB,CACpB,UAAW,CACT,GAAI,QACJ,MAAO,cACT,CACF,CACF,EACA,sBAAuB,CACrB,MAAO,WACP,GAAI,QACJ,YAAa,UACf,EACA,qBAAsB,CACpB,QAAS,CACP,QAAS,OACX,CACF,CACF,CAAC,EAKYC,EAAsB,CAAC,CAClC,KAAAC,EAAO,KACP,SAAAC,KACGC,CACL,IAEIC,EAAA,cAACC,EAAY,KAAZ,CAAkB,GAAGF,EAAM,QAAO,EAAA,EACjCC,EAAA,cAACP,EAAA,CAA0B,GAAG,UAC5BO,EAAA,cAACV,EAAA,CAAqB,GAAIY,EAAI,KAAML,IAAS,KAAO,KAAO,IAAA,CAAM,EACjEG,EAAA,cAACL,EAAK,QAAL,KAAcG,CAAS,CAC1B,CACF"}

package/dist/components/combobox/Combobox.d.ts

@@ -23,6 +23,8 @@ export declare const Combobox: import("@atom-learning/stitches-react/types/style
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -393,6 +395,8 @@ export declare const Combobox: import("@atom-learning/stitches-react/types/style
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -770,6 +774,8 @@ export declare const Combobox: import("@atom-learning/stitches-react/types/style
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1140,6 +1146,8 @@ export declare const Combobox: import("@atom-learning/stitches-react/types/style
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1509,6 +1517,8 @@ export declare const Combobox: 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/combobox/ComboboxInput.d.ts

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

package/dist/components/combobox/ComboboxInput.js

@@ -1,2 +1,2 @@
-import{ComboboxInput as n}from"@reach/combobox";import*as o from"react";import{styled as a,theme as d}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{encodeBackgroundIcon as l}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";const e=a(n,{boxShadow:"none",appearance:"none",backgroundImage:l(d.colors.grey700.value,"chevron"),backgroundPosition:"right $space$3 top 50%, 0 0",backgroundRepeat:"no-repeat, repeat",backgroundSize:"20px auto, 100%",border:"1px solid $grey700",borderRadius:"$1",boxSizing:"border-box",color:"$grey1000",cursor:"text",display:"block",fontFamily:"$body",height:"$4",pl:"$3",pr:"$6",transition:"all 100ms ease-out",width:"100%","&::placeholder":{color:"$grey700",opacity:1},"&:focus-within":{borderColor:"$primary800",outline:"none"},"&[disabled]":{backgroundColor:"$grey200",color:"$grey800",cursor:"not-allowed"},variants:{size:{sm:{height:"$3",fontSize:"$sm",lineHeight:1.7},md:{height:"$4",fontSize:"$md",lineHeight:2},lg:{height:"$5",fontSize:"$md",lineHeight:2}},state:{error:{border:"1px solid $danger"}}}}),p=o.forwardRef(({size:r="md",...t},i)=>o.createElement(e,{size:r,...t,ref:i}));export{p as ComboboxInput,e as StyledComboboxInput};
+import{ComboboxInput as n}from"@reach/combobox";import*as o from"react";import{styled as a,theme as d}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{encodeBackgroundIcon as l}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";const e=a(n,{boxShadow:"none",appearance:"none",backgroundImage:l(d.colors.grey700.value,"chevron"),backgroundPosition:"right $space$3 top 50%, 0 0",backgroundRepeat:"no-repeat, repeat",backgroundSize:"20px auto, 100%",border:"1px solid $grey700",borderRadius:"$1",boxSizing:"border-box",color:"$grey1000",cursor:"text",display:"block",fontFamily:"$body",height:"$4",pl:"$3",pr:"$6",transition:"all 100ms ease-out",width:"100%","&::placeholder":{color:"$grey700",opacity:1},"&:focus-within":{borderColor:"$primary800",outline:"none"},"&[disabled]":{backgroundColor:"$grey200",color:"$grey800",cursor:"not-allowed"},variants:{size:{sm:{height:"$3",fontSize:"$sm",lineHeight:1.7},md:{height:"$4",fontSize:"$md",lineHeight:2},lg:{height:"$5",fontSize:"$md",lineHeight:2}},state:{error:{border:"1px solid $danger"}}}}),p=o.forwardRef(({size:r="md",...t},i)=>o.createElement(e,{size:r,...t,ref:i}));export{p as ComboboxInput,e as StyledComboboxInput};
 //# sourceMappingURL=ComboboxInput.js.map

package/dist/components/combobox/ComboboxList.d.ts

@@ -22,6 +22,8 @@ export declare const ComboboxList: 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/combobox/ComboboxOption.d.ts

@@ -22,6 +22,8 @@ export declare const ComboboxOption: 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/combobox/ComboboxOption.js

@@ -1,2 +1,2 @@
-import{ComboboxOption as o}from"@reach/combobox";import{styled as r}from"../../stitches.js";const e=r(o,{color:"$grey900",cursor:"pointer",m:0,p:"$2",'&:hover, &[aria-selected="true"]':{bg:"$grey100",borderRadius:"$0"},"[data-user-value]":{color:"$primary800"}});export{e as ComboboxOption};
+import{ComboboxOption as o}from"@reach/combobox";import{styled as r}from"../../stitches.js";const e=r(o,{color:"$grey900",cursor:"pointer",m:0,p:"$2",'&:hover, &[aria-selected="true"]':{bg:"$grey100",borderRadius:"$0"},"&[data-user-value]":{color:"$primary800"}});export{e as ComboboxOption};
 //# sourceMappingURL=ComboboxOption.js.map

package/dist/components/combobox/ComboboxOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOption.js","sources":["../../../src/components/combobox/ComboboxOption.tsx"],"sourcesContent":["import { ComboboxOption as BaseComboboxOption } from '@reach/combobox'\n\nimport { styled } from '~/stitches'\n\nexport const ComboboxOption = styled(BaseComboboxOption, {\n  color: '$grey900',\n  cursor: 'pointer',\n  m: 0,\n  p: '$2',\n  '&:hover, &[aria-selected=\"true\"]': {\n    bg: '$grey100',\n    borderRadius: '$0'\n  },\n  '[data-user-value]': {\n    color: '$primary800'\n  }\n})\n"],"names":["ComboboxOption","styled","BaseComboboxOption"],"mappings":"4FAIa,MAAAA,EAAiBC,EAAOC,EAAoB,CACvD,MAAO,WACP,OAAQ,UACR,EAAG,EACH,EAAG,KACH,mCAAoC,CAClC,GAAI,WACJ,aAAc,IAChB,EACA,oBAAqB,CACnB,MAAO,aACT,CACF,CAAC"}
+{"version":3,"file":"ComboboxOption.js","sources":["../../../src/components/combobox/ComboboxOption.tsx"],"sourcesContent":["import { ComboboxOption as BaseComboboxOption } from '@reach/combobox'\n\nimport { styled } from '~/stitches'\n\nexport const ComboboxOption = styled(BaseComboboxOption, {\n  color: '$grey900',\n  cursor: 'pointer',\n  m: 0,\n  p: '$2',\n  '&:hover, &[aria-selected=\"true\"]': {\n    bg: '$grey100',\n    borderRadius: '$0'\n  },\n  '&[data-user-value]': {\n    color: '$primary800'\n  }\n})\n"],"names":["ComboboxOption","styled","BaseComboboxOption"],"mappings":"4FAIa,MAAAA,EAAiBC,EAAOC,EAAoB,CACvD,MAAO,WACP,OAAQ,UACR,EAAG,EACH,EAAG,KACH,mCAAoC,CAClC,GAAI,WACJ,aAAc,IAChB,EACA,qBAAsB,CACpB,MAAO,aACT,CACF,CAAC"}

package/dist/components/combobox/ComboboxPopover.d.ts

@@ -22,6 +22,8 @@ export declare const ComboboxPopover: 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/combobox/ComboboxPopover.js

@@ -1,2 +1,2 @@
-import{ComboboxPopover as o}from"@reach/combobox";import{styled as r}from"../../stitches.js";const e=r(o,{bg:"white",border:"solid 1px $grey200",borderRadius:"$1",boxShadow:"$1",boxSizing:"border-box",fontFamily:"$body",fontSize:"$md",outline:"none",p:"$1",transform:"translateY($space$2)"});export{e as ComboboxPopover};
+import{ComboboxPopover as o}from"@reach/combobox";import{styled as r}from"../../stitches.js";const e=r(o,{bg:"white",border:"1px solid $grey200",borderRadius:"$1",boxShadow:"$1",boxSizing:"border-box",fontFamily:"$body",fontSize:"$md",outline:"none",p:"$1",transform:"translateY($space$2)"});export{e as ComboboxPopover};
 //# sourceMappingURL=ComboboxPopover.js.map

package/dist/components/combobox/ComboboxPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxPopover.js","sources":["../../../src/components/combobox/ComboboxPopover.tsx"],"sourcesContent":["import { ComboboxPopover as BaseComboboxPopover } from '@reach/combobox'\n\nimport { styled } from '~/stitches'\n\nexport const ComboboxPopover = styled(BaseComboboxPopover, {\n  bg: 'white',\n  border: 'solid 1px $grey200',\n  borderRadius: '$1',\n  boxShadow: '$1',\n  boxSizing: 'border-box',\n  fontFamily: '$body',\n  fontSize: '$md',\n  outline: 'none',\n  p: '$1',\n  transform: 'translateY($space$2)'\n})\n"],"names":["ComboboxPopover","styled","BaseComboboxPopover"],"mappings":"6FAIa,MAAAA,EAAkBC,EAAOC,EAAqB,CACzD,GAAI,QACJ,OAAQ,qBACR,aAAc,KACd,UAAW,KACX,UAAW,aACX,WAAY,QACZ,SAAU,MACV,QAAS,OACT,EAAG,KACH,UAAW,sBACb,CAAC"}
+{"version":3,"file":"ComboboxPopover.js","sources":["../../../src/components/combobox/ComboboxPopover.tsx"],"sourcesContent":["import { ComboboxPopover as BaseComboboxPopover } from '@reach/combobox'\n\nimport { styled } from '~/stitches'\n\nexport const ComboboxPopover = styled(BaseComboboxPopover, {\n  bg: 'white',\n  border: '1px solid $grey200',\n  borderRadius: '$1',\n  boxShadow: '$1',\n  boxSizing: 'border-box',\n  fontFamily: '$body',\n  fontSize: '$md',\n  outline: 'none',\n  p: '$1',\n  transform: 'translateY($space$2)'\n})\n"],"names":["ComboboxPopover","styled","BaseComboboxPopover"],"mappings":"6FAIa,MAAAA,EAAkBC,EAAOC,EAAqB,CACzD,GAAI,QACJ,OAAQ,qBACR,aAAc,KACd,UAAW,KACX,UAAW,aACX,WAAY,QACZ,SAAU,MACV,QAAS,OACT,EAAG,KACH,UAAW,sBACb,CAAC"}

package/dist/components/create-password-field/CreatePasswordField.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import type { CSS } from '../../stitches';
 import { Override } from '../../utilities';
 import { FieldElementWrapperProps } from '../field-wrapper';
 import { PasswordInput } from '../password-input';
@@ -9,7 +8,7 @@ type CreatePasswordFieldProps = Override<React.ComponentProps<typeof PasswordInp
     name?: string;
     validate: (password: string) => Promise<ValidationResult | undefined> | ValidationResult;
     defaultValidation: ValidationResult;
-    messageDirection?: CSS['flexDirection'];
+    messageDirection?: 'row' | 'column';
 }>;
 export declare const CreatePasswordField: {
     ({ validate, defaultValidation, messageDirection, label, name, css, validation, appearance, ...remainingProps }: CreatePasswordFieldProps): React.JSX.Element;

package/dist/components/create-password-field/CreatePasswordField.js

@@ -1,2 +1,2 @@
-import E from"invariant";import*as a from"react";import{useFormContext as k}from"react-hook-form";import{throttle as B}from"throttle-debounce";import{Box as P}from"../box/Box.js";import{Flex as D}from"../flex/Flex.js";import{InlineMessage as $}from"../inline-message/InlineMessage.js";import{PasswordField as I}from"../password-field/PasswordField.js";const p=({validate:u,defaultValidation:f,messageDirection:v="row",label:b="Create a password",name:r="password",css:w,validation:y,appearance:C,...x})=>{var i;const{formState:o,control:n}=k(),[s,m]=a.useState(!1),[c,d]=a.useState(f),F=o.touched[r],h=((i=o.errors[r])==null?void 0:i.type)==="validate"||Object.values(c).every(e=>!e),l=a.useCallback(async e=>{const t=await u(e);return t?(E(typeof t=="object","The validate function must return an object"),d(t),Object.values(t).every(S=>S)):!1},[d]),g=a.useCallback(B(500,l),[l]),j=(e,t)=>e?"success":t?"neutral":"error",O=n.mode.isOnBlur&&(s||F)||n.mode.isOnSubmit&&(s||o.isSubmitted&&h);return a.createElement(P,{css:w},a.createElement(I,{label:b,name:r,onChange:e=>g(e.target.value),onBlur:()=>m(!1),onFocus:()=>m(!0),validation:{...y,validate:l},appearance:C,...x}),O&&a.createElement(D,{css:{mt:"$2",gap:"$2",flexWrap:"wrap",flexDirection:v}},Object.entries(c).map(([e,t])=>a.createElement($,{key:e,theme:j(t,s)},e))))};p.displayName="CreatePasswordField";export{p as CreatePasswordField};
+import E from"invariant";import*as a from"react";import{useFormContext as k}from"react-hook-form";import{throttle as B}from"throttle-debounce";import{Box as P}from"../box/Box.js";import{Flex as D}from"../flex/Flex.js";import{InlineMessage as $}from"../inline-message/InlineMessage.js";import{PasswordField as I}from"../password-field/PasswordField.js";const p=({validate:u,defaultValidation:f,messageDirection:v="row",label:b="Create a password",name:r="password",css:y,validation:w,appearance:C,...x})=>{var l;const{formState:o,control:n}=k(),[s,m]=a.useState(!1),[c,d]=a.useState(f),F=o.touched[r],h=((l=o.errors[r])==null?void 0:l.type)==="validate"||Object.values(c).every(e=>!e),i=a.useCallback(async e=>{const t=await u(e);return t?(E(typeof t=="object","The validate function must return an object"),d(t),Object.values(t).every(S=>S)):!1},[d]),g=a.useCallback(B(500,i),[i]),j=(e,t)=>e?"success":t?"neutral":"error",O=n.mode.isOnBlur&&(s||F)||n.mode.isOnSubmit&&(s||o.isSubmitted&&h);return a.createElement(P,{css:y},a.createElement(I,{label:b,name:r,onChange:e=>g(e.target.value),onBlur:()=>m(!1),onFocus:()=>m(!0),validation:{...w,validate:i},appearance:C,...x}),O&&a.createElement(D,{style:{"--direction":v},css:{mt:"$2",gap:"$2",flexWrap:"wrap",flexDirection:"var(--direction)"}},Object.entries(c).map(([e,t])=>a.createElement($,{key:e,theme:j(t,s)},e))))};p.displayName="CreatePasswordField";export{p as CreatePasswordField};
 //# sourceMappingURL=CreatePasswordField.js.map

package/dist/components/create-password-field/CreatePasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreatePasswordField.js","sources":["../../../src/components/create-password-field/CreatePasswordField.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { throttle } from 'throttle-debounce'\n\nimport type { CSS } from '~/stitches'\nimport { Override } from '~/utilities'\n\nimport { Box } from '../box'\nimport { FieldElementWrapperProps } from '../field-wrapper'\nimport { Flex } from '../flex'\nimport { InlineMessage } from '../inline-message'\nimport { PasswordField } from '../password-field'\nimport { PasswordInput } from '../password-input'\n\ntype ValidationResult = Record<string, boolean>\n\ntype CreatePasswordFieldProps = Override<\n  React.ComponentProps<typeof PasswordInput> & FieldElementWrapperProps,\n  {\n    label?: string\n    name?: string\n    validate: (\n      password: string\n    ) => Promise<ValidationResult | undefined> | ValidationResult\n    defaultValidation: ValidationResult\n    messageDirection?: CSS['flexDirection']\n  }\n>\n\nexport const CreatePasswordField = ({\n  validate,\n  defaultValidation,\n  messageDirection = 'row',\n  label = 'Create a password',\n  name = 'password',\n  css,\n  validation,\n  appearance,\n  ...remainingProps\n}: CreatePasswordFieldProps) => {\n  const { formState, control } = useFormContext()\n  const [isFocused, setIsFocused] = React.useState<boolean>(false)\n  const [validationResult, setValidationResult] =\n    React.useState<ValidationResult>(defaultValidation)\n\n  const touched: boolean = formState.touched[name]\n  const error =\n    formState.errors[name]?.type === 'validate' ||\n    Object.values(validationResult).every((isValid) => !isValid)\n\n  const validatePassword = React.useCallback(\n    async (password: string) => {\n      const result = await validate(password)\n\n      if (result) {\n        invariant(\n          typeof result === 'object',\n          'The validate function must return an object'\n        )\n\n        setValidationResult(result)\n        return Object.values(result).every((isValid) => isValid)\n      }\n\n      return false\n    },\n    [setValidationResult]\n  )\n\n  const handleChange = React.useCallback(throttle(500, validatePassword), [\n    validatePassword\n  ])\n\n  const getMessageTheme = (result: boolean, isFocused: boolean) => {\n    if (result) return 'success'\n\n    return isFocused ? 'neutral' : 'error'\n  }\n\n  const showValidation: boolean =\n    (control.mode.isOnBlur && (isFocused || touched)) ||\n    (control.mode.isOnSubmit && (isFocused || (formState.isSubmitted && error)))\n\n  return (\n    <Box css={css}>\n      <PasswordField\n        label={label}\n        name={name}\n        onChange={(e) => handleChange(e.target.value)}\n        onBlur={() => setIsFocused(false)}\n        onFocus={() => setIsFocused(true)}\n        validation={{ ...validation, validate: validatePassword }}\n        appearance={appearance}\n        {...remainingProps}\n      />\n      {showValidation && (\n        <Flex\n          css={{\n            mt: '$2',\n            gap: '$2',\n            flexWrap: 'wrap',\n            flexDirection: messageDirection\n          }}\n        >\n          {Object.entries(validationResult).map(([message, result]) => (\n            <InlineMessage\n              key={message}\n              theme={getMessageTheme(result, isFocused)}\n            >\n              {message}\n            </InlineMessage>\n          ))}\n        </Flex>\n      )}\n    </Box>\n  )\n}\n\nCreatePasswordField.displayName = 'CreatePasswordField'\n"],"names":["CreatePasswordField","validate","defaultValidation","messageDirection","label","name","css","validation","appearance","remainingProps","_a","formState","control","useFormContext","isFocused","setIsFocused","React","validationResult","setValidationResult","touched","error","isValid","validatePassword","password","result","invariant","handleChange","throttle","getMessageTheme","showValidation","Box","PasswordField","Flex","message","InlineMessage"],"mappings":"gWA8Ba,MAAAA,EAAsB,CAAC,CAClC,SAAAC,EACA,kBAAAC,EACA,iBAAAC,EAAmB,MACnB,MAAAC,EAAQ,oBACR,KAAAC,EAAO,WACP,IAAAC,EACA,WAAAC,EACA,WAAAC,KACGC,CACL,IAAgC,CAxChC,IAAAC,EAyCE,KAAM,CAAE,UAAAC,EAAW,QAAAC,CAAQ,EAAIC,EAAe,EACxC,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzD,CAACC,EAAkBC,CAAmB,EAC1CF,EAAM,SAA2Bd,CAAiB,EAE9CiB,EAAmBR,EAAU,QAAQN,GACrCe,IACJV,EAAAC,EAAU,OAAON,KAAjB,KAAA,OAAAK,EAAwB,QAAS,YACjC,OAAO,OAAOO,CAAgB,EAAE,MAAOI,GAAY,CAACA,CAAO,EAEvDC,EAAmBN,EAAM,YAC7B,MAAOO,GAAqB,CAC1B,MAAMC,EAAS,MAAMvB,EAASsB,CAAQ,EAEtC,OAAIC,GACFC,EACE,OAAOD,GAAW,SAClB,6CACF,EAEAN,EAAoBM,CAAM,EACnB,OAAO,OAAOA,CAAM,EAAE,MAAOH,GAAYA,CAAO,GAGlD,EACT,EACA,CAACH,CAAmB,CACtB,EAEMQ,EAAeV,EAAM,YAAYW,EAAS,IAAKL,CAAgB,EAAG,CACtEA,CACF,CAAC,EAEKM,EAAkB,CAACJ,EAAiBV,IACpCU,EAAe,UAEZV,EAAY,UAAY,QAG3Be,EACHjB,EAAQ,KAAK,WAAaE,GAAaK,IACvCP,EAAQ,KAAK,aAAeE,GAAcH,EAAU,aAAeS,GAEtE,OACEJ,EAAA,cAACc,EAAA,CAAI,IAAKxB,CACRU,EAAAA,EAAA,cAACe,EAAA,CACC,MAAO3B,EACP,KAAMC,EACN,SAAW,GAAMqB,EAAa,EAAE,OAAO,KAAK,EAC5C,OAAQ,IAAMX,EAAa,EAAK,EAChC,QAAS,IAAMA,EAAa,EAAI,EAChC,WAAY,CAAE,GAAGR,EAAY,SAAUe,CAAiB,EACxD,WAAYd,EACX,GAAGC,CAAAA,CACN,EACCoB,GACCb,EAAA,cAACgB,EAAA,CACC,IAAK,CACH,GAAI,KACJ,IAAK,KACL,SAAU,OACV,cAAe7B,CACjB,CAAA,EAEC,OAAO,QAAQc,CAAgB,EAAE,IAAI,CAAC,CAACgB,EAAST,CAAM,IACrDR,EAAA,cAACkB,EAAA,CACC,IAAKD,EACL,MAAOL,EAAgBJ,EAAQV,CAAS,CAAA,EAEvCmB,CACH,CACD,CACH,CAEJ,CAEJ,EAEAjC,EAAoB,YAAc"}
+{"version":3,"file":"CreatePasswordField.js","sources":["../../../src/components/create-password-field/CreatePasswordField.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { throttle } from 'throttle-debounce'\n\nimport type { CSS } from '~/stitches'\nimport { Override } from '~/utilities'\n\nimport { Box } from '../box'\nimport { FieldElementWrapperProps } from '../field-wrapper'\nimport { Flex } from '../flex'\nimport { InlineMessage } from '../inline-message'\nimport { PasswordField } from '../password-field'\nimport { PasswordInput } from '../password-input'\n\ntype ValidationResult = Record<string, boolean>\n\ntype CreatePasswordFieldProps = Override<\n  React.ComponentProps<typeof PasswordInput> & FieldElementWrapperProps,\n  {\n    label?: string\n    name?: string\n    validate: (\n      password: string\n    ) => Promise<ValidationResult | undefined> | ValidationResult\n    defaultValidation: ValidationResult\n    messageDirection?: 'row' | 'column'\n  }\n>\n\nexport const CreatePasswordField = ({\n  validate,\n  defaultValidation,\n  messageDirection = 'row',\n  label = 'Create a password',\n  name = 'password',\n  css,\n  validation,\n  appearance,\n  ...remainingProps\n}: CreatePasswordFieldProps) => {\n  const { formState, control } = useFormContext()\n  const [isFocused, setIsFocused] = React.useState<boolean>(false)\n  const [validationResult, setValidationResult] =\n    React.useState<ValidationResult>(defaultValidation)\n\n  const touched: boolean = formState.touched[name]\n  const error =\n    formState.errors[name]?.type === 'validate' ||\n    Object.values(validationResult).every((isValid) => !isValid)\n\n  const validatePassword = React.useCallback(\n    async (password: string) => {\n      const result = await validate(password)\n\n      if (result) {\n        invariant(\n          typeof result === 'object',\n          'The validate function must return an object'\n        )\n\n        setValidationResult(result)\n        return Object.values(result).every((isValid) => isValid)\n      }\n\n      return false\n    },\n    [setValidationResult]\n  )\n\n  const handleChange = React.useCallback(throttle(500, validatePassword), [\n    validatePassword\n  ])\n\n  const getMessageTheme = (result: boolean, isFocused: boolean) => {\n    if (result) return 'success'\n\n    return isFocused ? 'neutral' : 'error'\n  }\n\n  const showValidation: boolean =\n    (control.mode.isOnBlur && (isFocused || touched)) ||\n    (control.mode.isOnSubmit && (isFocused || (formState.isSubmitted && error)))\n\n  return (\n    <Box css={css}>\n      <PasswordField\n        label={label}\n        name={name}\n        onChange={(e) => handleChange(e.target.value)}\n        onBlur={() => setIsFocused(false)}\n        onFocus={() => setIsFocused(true)}\n        validation={{ ...validation, validate: validatePassword }}\n        appearance={appearance}\n        {...remainingProps}\n      />\n      {showValidation && (\n        <Flex\n          style={{\n            '--direction': messageDirection\n          }}\n          css={{\n            mt: '$2',\n            gap: '$2',\n            flexWrap: 'wrap',\n            flexDirection: 'var(--direction)'\n          }}\n        >\n          {Object.entries(validationResult).map(([message, result]) => (\n            <InlineMessage\n              key={message}\n              theme={getMessageTheme(result, isFocused)}\n            >\n              {message}\n            </InlineMessage>\n          ))}\n        </Flex>\n      )}\n    </Box>\n  )\n}\n\nCreatePasswordField.displayName = 'CreatePasswordField'\n"],"names":["CreatePasswordField","validate","defaultValidation","messageDirection","label","name","css","validation","appearance","remainingProps","_a","formState","control","useFormContext","isFocused","setIsFocused","React","validationResult","setValidationResult","touched","error","isValid","validatePassword","password","result","invariant","handleChange","throttle","getMessageTheme","showValidation","Box","PasswordField","Flex","message","InlineMessage"],"mappings":"gWA8Ba,MAAAA,EAAsB,CAAC,CAClC,SAAAC,EACA,kBAAAC,EACA,iBAAAC,EAAmB,MACnB,MAAAC,EAAQ,oBACR,KAAAC,EAAO,WACP,IAAAC,EACA,WAAAC,EACA,WAAAC,KACGC,CACL,IAAgC,CAxChC,IAAAC,EAyCE,KAAM,CAAE,UAAAC,EAAW,QAAAC,CAAQ,EAAIC,EACzB,EAAA,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzD,CAACC,EAAkBC,CAAmB,EAC1CF,EAAM,SAA2Bd,CAAiB,EAE9CiB,EAAmBR,EAAU,QAAQN,GACrCe,IACJV,EAAAC,EAAU,OAAON,KAAjB,KAAA,OAAAK,EAAwB,QAAS,YACjC,OAAO,OAAOO,CAAgB,EAAE,MAAOI,GAAY,CAACA,CAAO,EAEvDC,EAAmBN,EAAM,YAC7B,MAAOO,GAAqB,CAC1B,MAAMC,EAAS,MAAMvB,EAASsB,CAAQ,EAEtC,OAAIC,GACFC,EACE,OAAOD,GAAW,SAClB,6CACF,EAEAN,EAAoBM,CAAM,EACnB,OAAO,OAAOA,CAAM,EAAE,MAAOH,GAAYA,CAAO,GAGlD,EACT,EACA,CAACH,CAAmB,CACtB,EAEMQ,EAAeV,EAAM,YAAYW,EAAS,IAAKL,CAAgB,EAAG,CACtEA,CACF,CAAC,EAEKM,EAAkB,CAACJ,EAAiBV,IACpCU,EAAe,UAEZV,EAAY,UAAY,QAG3Be,EACHjB,EAAQ,KAAK,WAAaE,GAAaK,IACvCP,EAAQ,KAAK,aAAeE,GAAcH,EAAU,aAAeS,GAEtE,OACEJ,EAAA,cAACc,EAAA,CAAI,IAAKxB,CAAAA,EACRU,EAAA,cAACe,EAAA,CACC,MAAO3B,EACP,KAAMC,EACN,SAAW,GAAMqB,EAAa,EAAE,OAAO,KAAK,EAC5C,OAAQ,IAAMX,EAAa,EAAK,EAChC,QAAS,IAAMA,EAAa,EAAI,EAChC,WAAY,CAAE,GAAGR,EAAY,SAAUe,CAAiB,EACxD,WAAYd,EACX,GAAGC,CACN,CAAA,EACCoB,GACCb,EAAA,cAACgB,EAAA,CACC,MAAO,CACL,cAAe7B,CACjB,EACA,IAAK,CACH,GAAI,KACJ,IAAK,KACL,SAAU,OACV,cAAe,kBACjB,CAAA,EAEC,OAAO,QAAQc,CAAgB,EAAE,IAAI,CAAC,CAACgB,EAAST,CAAM,IACrDR,EAAA,cAACkB,EAAA,CACC,IAAKD,EACL,MAAOL,EAAgBJ,EAAQV,CAAS,CAAA,EAEvCmB,CACH,CACD,CACH,CAEJ,CAEJ,EAEAjC,EAAoB,YAAc"}