@atom-learning/components 3.10.0 → 3.11.0

package/dist/components/radio-card/RadioCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCard.js","sources":["../../../src/components/radio-card/RadioCard.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Box } from '../box/Box'\n\nexport const StyledRadioCard = styled(RadioGroup.Item, {\n  alignItems: 'center',\n  bg: 'white',\n  border: '1px solid $tonal200',\n  borderRadius: '$0',\n  cursor: 'pointer',\n  display: 'flex',\n  textAlign: 'left',\n  '&[data-state=\"checked\"]': {\n    outline: '2px solid $primary',\n    outlineOffset: '-2px'\n  },\n  variants: {\n    align: {\n      left: { flexDirection: 'row' },\n      right: { flexDirection: 'row-reverse' }\n    },\n    size: {\n      md: { px: '$4', py: '$3' },\n      lg: { px: '$5', py: '$4' }\n    },\n    isFullWidth: {\n      true: { width: '100%' },\n      false: { width: 'max-content' }\n    }\n  }\n})\n\nconst RadioButton = styled('div', {\n  alignItems: 'center',\n  appearance: 'none',\n  backgroundColor: 'transparent',\n  border: '1px solid $tonal500',\n  borderRadius: '$round',\n  display: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  p: 0,\n  size: '$1',\n  transition: 'all 50ms ease-out',\n  '[data-state=\"checked\"] &': {\n    backgroundColor: '$primary',\n    borderColor: '$primary'\n  },\n  variants: {\n    containerIsFullWidth: {\n      true: {},\n      false: {}\n    },\n    align: {\n      left: { mr: '$4' },\n      right: {}\n    }\n  },\n\n  compoundVariants: [\n    {\n      containerIsFullWidth: true,\n      align: 'right',\n      css: { ml: 'auto' }\n    },\n    {\n      containerIsFullWidth: false,\n      align: 'right',\n      css: { ml: '$4' }\n    }\n  ]\n})\n\nconst Indicator = styled(RadioGroup.Indicator, {\n  backgroundColor: 'white',\n  borderRadius: '$round',\n  position: 'absolute',\n  size: '6px'\n})\n\ntype RadioCardProps = React.ComponentProps<typeof StyledRadioCard>\n\nexport const RadioCard: React.FC<RadioCardProps> = ({\n  children,\n  isFullWidth = false,\n  size = 'md',\n  align = 'left',\n  ...rest\n}) => (\n  <StyledRadioCard\n    {...rest}\n    align={align}\n    isFullWidth={isFullWidth}\n    size={size}\n  >\n    <RadioButton align={align} containerIsFullWidth={isFullWidth}>\n      <Indicator />\n    </RadioButton>\n    <Box>{children}</Box>\n  </StyledRadioCard>\n)\n"],"names":["StyledRadioCard","styled","RadioGroup","RadioButton","Indicator","RadioCard","children","isFullWidth","size","align","rest","React","Box"],"mappings":"qJAOa,MAAAA,EAAkBC,EAAOC,EAAW,KAAM,CACrD,WAAY,SACZ,GAAI,QACJ,OAAQ,sBACR,aAAc,KACd,OAAQ,UACR,QAAS,OACT,UAAW,OACX,0BAA2B,CACzB,QAAS,qBACT,cAAe,MACjB,EACA,SAAU,CACR,MAAO,CACL,KAAM,CAAE,cAAe,KAAM,EAC7B,MAAO,CAAE,cAAe,aAAc,CACxC,EACA,KAAM,CACJ,GAAI,CAAE,GAAI,KAAM,GAAI,IAAK,EACzB,GAAI,CAAE,GAAI,KAAM,GAAI,IAAK,CAC3B,EACA,YAAa,CACX,KAAM,CAAE,MAAO,MAAO,EACtB,MAAO,CAAE,MAAO,aAAc,CAChC,CACF,CACF,CAAC,EAEKC,EAAcF,EAAO,MAAO,CAChC,WAAY,SACZ,WAAY,OACZ,gBAAiB,cACjB,OAAQ,sBACR,aAAc,SACd,QAAS,OACT,WAAY,EACZ,eAAgB,SAChB,EAAG,EACH,KAAM,KACN,WAAY,oBACZ,2BAA4B,CAC1B,gBAAiB,WACjB,YAAa,UACf,EACA,SAAU,CACR,qBAAsB,CACpB,KAAM,CAAA,EACN,MAAO,EACT,EACA,MAAO,CACL,KAAM,CAAE,GAAI,IAAK,EACjB,MAAO,CACT,CAAA,CACF,EAEA,iBAAkB,CAChB,CACE,qBAAsB,GACtB,MAAO,QACP,IAAK,CAAE,GAAI,MAAO,CACpB,EACA,CACE,qBAAsB,GACtB,MAAO,QACP,IAAK,CAAE,GAAI,IAAK,CAClB,CACF,CACF,CAAC,EAEKG,EAAYH,EAAOC,EAAW,UAAW,CAC7C,gBAAiB,QACjB,aAAc,SACd,SAAU,WACV,KAAM,KACR,CAAC,EAIYG,EAAsC,CAAC,CAClD,SAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EAAO,KACP,MAAAC,EAAQ,UACLC,CACL,IACEC,EAAA,cAACX,GACE,GAAGU,EACJ,MAAOD,EACP,YAAaF,EACb,KAAMC,CAAAA,EAENG,EAAA,cAACR,EAAA,CAAY,MAAOM,EAAO,qBAAsBF,CAC/CI,EAAAA,EAAA,cAACP,EAAA,IAAU,CACb,EACAO,EAAA,cAACC,EAAA,KAAKN,CAAS,CACjB"}
+{"version":3,"file":"RadioCard.js","sources":["../../../src/components/radio-card/RadioCard.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Box } from '../box/Box'\n\nexport const StyledRadioCard = styled(RadioGroup.Item, {\n  alignItems: 'center',\n  bg: 'white',\n  border: '1px solid $tonal200',\n  borderRadius: '$0',\n  cursor: 'pointer',\n  display: 'flex',\n  textAlign: 'left',\n  '&[data-state=\"checked\"]': {\n    outline: '2px solid $primary800',\n    outlineOffset: '-2px'\n  },\n  variants: {\n    align: {\n      left: { flexDirection: 'row' },\n      right: { flexDirection: 'row-reverse' }\n    },\n    size: {\n      md: { px: '$4', py: '$3' },\n      lg: { px: '$5', py: '$4' }\n    },\n    isFullWidth: {\n      true: { width: '100%' },\n      false: { width: 'max-content' }\n    }\n  }\n})\n\nconst RadioButton = styled('div', {\n  alignItems: 'center',\n  appearance: 'none',\n  backgroundColor: 'transparent',\n  border: '1px solid $tonal500',\n  borderRadius: '$round',\n  display: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  p: 0,\n  size: '$1',\n  transition: 'all 50ms ease-out',\n  '[data-state=\"checked\"] &': {\n    backgroundColor: '$primary800',\n    borderColor: '$primary800'\n  },\n  variants: {\n    containerIsFullWidth: {\n      true: {},\n      false: {}\n    },\n    align: {\n      left: { mr: '$4' },\n      right: {}\n    }\n  },\n\n  compoundVariants: [\n    {\n      containerIsFullWidth: true,\n      align: 'right',\n      css: { ml: 'auto' }\n    },\n    {\n      containerIsFullWidth: false,\n      align: 'right',\n      css: { ml: '$4' }\n    }\n  ]\n})\n\nconst Indicator = styled(RadioGroup.Indicator, {\n  backgroundColor: 'white',\n  borderRadius: '$round',\n  position: 'absolute',\n  size: '6px'\n})\n\ntype RadioCardProps = React.ComponentProps<typeof StyledRadioCard>\n\nexport const RadioCard: React.FC<RadioCardProps> = ({\n  children,\n  isFullWidth = false,\n  size = 'md',\n  align = 'left',\n  ...rest\n}) => (\n  <StyledRadioCard\n    {...rest}\n    align={align}\n    isFullWidth={isFullWidth}\n    size={size}\n  >\n    <RadioButton align={align} containerIsFullWidth={isFullWidth}>\n      <Indicator />\n    </RadioButton>\n    <Box>{children}</Box>\n  </StyledRadioCard>\n)\n"],"names":["StyledRadioCard","styled","RadioGroup","RadioButton","Indicator","RadioCard","children","isFullWidth","size","align","rest","React","Box"],"mappings":"qJAOa,MAAAA,EAAkBC,EAAOC,EAAW,KAAM,CACrD,WAAY,SACZ,GAAI,QACJ,OAAQ,sBACR,aAAc,KACd,OAAQ,UACR,QAAS,OACT,UAAW,OACX,0BAA2B,CACzB,QAAS,wBACT,cAAe,MACjB,EACA,SAAU,CACR,MAAO,CACL,KAAM,CAAE,cAAe,KAAM,EAC7B,MAAO,CAAE,cAAe,aAAc,CACxC,EACA,KAAM,CACJ,GAAI,CAAE,GAAI,KAAM,GAAI,IAAK,EACzB,GAAI,CAAE,GAAI,KAAM,GAAI,IAAK,CAC3B,EACA,YAAa,CACX,KAAM,CAAE,MAAO,MAAO,EACtB,MAAO,CAAE,MAAO,aAAc,CAChC,CACF,CACF,CAAC,EAEKC,EAAcF,EAAO,MAAO,CAChC,WAAY,SACZ,WAAY,OACZ,gBAAiB,cACjB,OAAQ,sBACR,aAAc,SACd,QAAS,OACT,WAAY,EACZ,eAAgB,SAChB,EAAG,EACH,KAAM,KACN,WAAY,oBACZ,2BAA4B,CAC1B,gBAAiB,cACjB,YAAa,aACf,EACA,SAAU,CACR,qBAAsB,CACpB,KAAM,CAAA,EACN,MAAO,EACT,EACA,MAAO,CACL,KAAM,CAAE,GAAI,IAAK,EACjB,MAAO,CACT,CAAA,CACF,EAEA,iBAAkB,CAChB,CACE,qBAAsB,GACtB,MAAO,QACP,IAAK,CAAE,GAAI,MAAO,CACpB,EACA,CACE,qBAAsB,GACtB,MAAO,QACP,IAAK,CAAE,GAAI,IAAK,CAClB,CACF,CACF,CAAC,EAEKG,EAAYH,EAAOC,EAAW,UAAW,CAC7C,gBAAiB,QACjB,aAAc,SACd,SAAU,WACV,KAAM,KACR,CAAC,EAIYG,EAAsC,CAAC,CAClD,SAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EAAO,KACP,MAAAC,EAAQ,UACLC,CACL,IACEC,EAAA,cAACX,GACE,GAAGU,EACJ,MAAOD,EACP,YAAaF,EACb,KAAMC,CAAAA,EAENG,EAAA,cAACR,EAAA,CAAY,MAAOM,EAAO,qBAAsBF,CAC/CI,EAAAA,EAAA,cAACP,EAAA,IAAU,CACb,EACAO,EAAA,cAACC,EAAA,KAAKN,CAAS,CACjB"}

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

@@ -1,8 +1,8 @@
 import React from 'react';
-declare const StyledSectionMessage: import("@stitches/react/types/styled-component").StyledComponent<React.FC<import("../dismissible/DismissibleRoot").IDismissibleProps & import("../dismissible/DismissibleRoot").IDismissibleRootProps> & {
+declare const StyledSectionMessage: import("@stitches/react/types/styled-component").StyledComponent<React.FC<import("../dismissible/DismissibleRoot").IDismissibleRootInternalProps & import("../dismissible/DismissibleRoot").IDismissibleRootProps> & {
     Trigger: React.FC<import("../dismissible/DismissibleTrigger").IDismissibleTriggerProps>;
 }, {
-    theme?: "success" | "warning" | "neutral" | "info" | "error" | undefined;
+    theme?: "info" | "success" | "warning" | "neutral" | "error" | undefined;
     hasIcon?: boolean | "true" | undefined;
     hasDismiss?: boolean | "true" | undefined;
 }, {
@@ -23,9 +23,10 @@ declare const StyledSectionMessage: import("@stitches/react/types/styled-compone
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -172,11 +173,6 @@ declare const StyledSectionMessage: import("@stitches/react/types/styled-compone
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -185,6 +181,10 @@ declare const StyledSectionMessage: import("@stitches/react/types/styled-compone
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -208,6 +208,18 @@ declare const StyledSectionMessage: import("@stitches/react/types/styled-compone
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;
@@ -355,9 +367,10 @@ export declare const SectionMessage: {
             hover: string;
         }, {
             colors: {
-                textForeground: any;
+                textBold: any;
+                textRegular: any;
                 textSubtle: any;
-                textPlaceholder: any;
+                textMinimal: any;
                 background: any;
                 backgroundAccent: any;
                 grey100: any;
@@ -504,11 +517,6 @@ export declare const SectionMessage: {
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                primaryLight: any;
-                primary: any;
-                primaryMid: any;
-                primaryDark: any;
-                secondary: any;
                 brandRed: any;
                 brandRedAccent: any;
                 brandGreen: any;
@@ -517,6 +525,10 @@ export declare const SectionMessage: {
                 brandPurpleAccent: any;
                 brandYellow: any;
                 brandYellowAccent: any;
+                infoLight: any;
+                info: any;
+                infoMid: any;
+                infoDark: any;
                 successLight: any;
                 success: any;
                 successMid: any;
@@ -540,6 +552,18 @@ export declare const SectionMessage: {
                 glBlueLight: any;
                 glBluePrimary: any;
                 glBlueDark: any;
+                primary100: any;
+                primary200: any;
+                primary300: any;
+                primary400: any;
+                primary500: any;
+                primary600: any;
+                primary700: any;
+                primary800: any;
+                primary900: any;
+                primary1000: any;
+                primary1100: any;
+                primary1200: any;
             };
             space: {
                 "0": any;
@@ -683,9 +707,10 @@ export declare const SectionMessage: {
             hover: string;
         }, {
             colors: {
-                textForeground: any;
+                textBold: any;
+                textRegular: any;
                 textSubtle: any;
-                textPlaceholder: any;
+                textMinimal: any;
                 background: any;
                 backgroundAccent: any;
                 grey100: any;
@@ -832,11 +857,6 @@ export declare const SectionMessage: {
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                primaryLight: any;
-                primary: any;
-                primaryMid: any;
-                primaryDark: any;
-                secondary: any;
                 brandRed: any;
                 brandRedAccent: any;
                 brandGreen: any;
@@ -845,6 +865,10 @@ export declare const SectionMessage: {
                 brandPurpleAccent: any;
                 brandYellow: any;
                 brandYellowAccent: any;
+                infoLight: any;
+                info: any;
+                infoMid: any;
+                infoDark: any;
                 successLight: any;
                 success: any;
                 successMid: any;
@@ -868,6 +892,18 @@ export declare const SectionMessage: {
                 glBlueLight: any;
                 glBluePrimary: any;
                 glBlueDark: any;
+                primary100: any;
+                primary200: any;
+                primary300: any;
+                primary400: any;
+                primary500: any;
+                primary600: any;
+                primary700: any;
+                primary800: any;
+                primary900: any;
+                primary1000: any;
+                primary1100: any;
+                primary1200: any;
             };
             space: {
                 "0": any;
@@ -1010,9 +1046,10 @@ export declare const SectionMessage: {
             hover: string;
         }, {
             colors: {
-                textForeground: any;
+                textBold: any;
+                textRegular: any;
                 textSubtle: any;
-                textPlaceholder: any;
+                textMinimal: any;
                 background: any;
                 backgroundAccent: any;
                 grey100: any;
@@ -1159,11 +1196,6 @@ export declare const SectionMessage: {
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                primaryLight: any;
-                primary: any;
-                primaryMid: any;
-                primaryDark: any;
-                secondary: any;
                 brandRed: any;
                 brandRedAccent: any;
                 brandGreen: any;
@@ -1172,6 +1204,10 @@ export declare const SectionMessage: {
                 brandPurpleAccent: any;
                 brandYellow: any;
                 brandYellowAccent: any;
+                infoLight: any;
+                info: any;
+                infoMid: any;
+                infoDark: any;
                 successLight: any;
                 success: any;
                 successMid: any;
@@ -1195,6 +1231,18 @@ export declare const SectionMessage: {
                 glBlueLight: any;
                 glBluePrimary: any;
                 glBlueDark: any;
+                primary100: any;
+                primary200: any;
+                primary300: any;
+                primary400: any;
+                primary500: any;
+                primary600: any;
+                primary700: any;
+                primary800: any;
+                primary900: any;
+                primary1000: any;
+                primary1100: any;
+                primary1200: any;
             };
             space: {
                 "0": any;
@@ -1320,7 +1368,7 @@ export declare const SectionMessage: {
     Dismiss: ({ label, css, ...rest }: Pick<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
     }, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@stitches/react/types/styled-component").TransformProps<{
-        theme?: "primary" | "success" | "danger" | "warning" | "neutral" | undefined;
+        theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
         appearance?: "outline" | "solid" | "simple" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | undefined;
         isRounded?: boolean | "true" | undefined;
@@ -1343,9 +1391,10 @@ export declare const SectionMessage: {
             hover: string;
         }, {
             colors: {
-                textForeground: any;
+                textBold: any;
+                textRegular: any;
                 textSubtle: any;
-                textPlaceholder: any;
+                textMinimal: any;
                 background: any;
                 backgroundAccent: any;
                 grey100: any;
@@ -1492,11 +1541,6 @@ export declare const SectionMessage: {
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                primaryLight: any;
-                primary: any;
-                primaryMid: any;
-                primaryDark: any;
-                secondary: any;
                 brandRed: any;
                 brandRedAccent: any;
                 brandGreen: any;
@@ -1505,6 +1549,10 @@ export declare const SectionMessage: {
                 brandPurpleAccent: any;
                 brandYellow: any;
                 brandYellowAccent: any;
+                infoLight: any;
+                info: any;
+                infoMid: any;
+                infoDark: any;
                 successLight: any;
                 success: any;
                 successMid: any;
@@ -1528,6 +1576,18 @@ export declare const SectionMessage: {
                 glBlueLight: any;
                 glBluePrimary: any;
                 glBlueDark: any;
+                primary100: any;
+                primary200: any;
+                primary300: any;
+                primary400: any;
+                primary500: any;
+                primary600: any;
+                primary700: any;
+                primary800: any;
+                primary900: any;
+                primary1000: any;
+                primary1100: any;
+                primary1200: any;
             };
             space: {
                 "0": any;
@@ -1645,7 +1705,7 @@ export declare const SectionMessage: {
             };
         }> | undefined;
     }, "appearance" | "size" | "theme" | "label" | "children" | "as" | "hasTooltip" | "tooltipSide" | "isRounded" | keyof import("../../types").NavigatorActions> & import("@stitches/react/types/styled-component").TransformProps<{
-        theme?: "primary" | "success" | "danger" | "warning" | "neutral" | undefined;
+        theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
         appearance?: "outline" | "solid" | "simple" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | undefined;
         isRounded?: boolean | "true" | undefined;
@@ -1683,9 +1743,10 @@ export declare const SectionMessage: {
             hover: string;
         }, {
             colors: {
-                textForeground: any;
+                textBold: any;
+                textRegular: any;
                 textSubtle: any;
-                textPlaceholder: any;
+                textMinimal: any;
                 background: any;
                 backgroundAccent: any;
                 grey100: any;
@@ -1832,11 +1893,6 @@ export declare const SectionMessage: {
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                primaryLight: any;
-                primary: any;
-                primaryMid: any;
-                primaryDark: any;
-                secondary: any;
                 brandRed: any;
                 brandRedAccent: any;
                 brandGreen: any;
@@ -1845,6 +1901,10 @@ export declare const SectionMessage: {
                 brandPurpleAccent: any;
                 brandYellow: any;
                 brandYellowAccent: any;
+                infoLight: any;
+                info: any;
+                infoMid: any;
+                infoDark: any;
                 successLight: any;
                 success: any;
                 successMid: any;
@@ -1868,6 +1928,18 @@ export declare const SectionMessage: {
                 glBlueLight: any;
                 glBluePrimary: any;
                 glBlueDark: any;
+                primary100: any;
+                primary200: any;
+                primary300: any;
+                primary400: any;
+                primary500: any;
+                primary600: any;
+                primary700: any;
+                primary800: any;
+                primary900: any;
+                primary1000: any;
+                primary1100: any;
+                primary1200: any;
             };
             space: {
                 "0": any;
@@ -2012,9 +2084,10 @@ export declare const SectionMessage: {
             hover: string;
         }, {
             colors: {
-                textForeground: any;
+                textBold: any;
+                textRegular: any;
                 textSubtle: any;
-                textPlaceholder: any;
+                textMinimal: any;
                 background: any;
                 backgroundAccent: any;
                 grey100: any;
@@ -2161,11 +2234,6 @@ export declare const SectionMessage: {
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                primaryLight: any;
-                primary: any;
-                primaryMid: any;
-                primaryDark: any;
-                secondary: any;
                 brandRed: any;
                 brandRedAccent: any;
                 brandGreen: any;
@@ -2174,6 +2242,10 @@ export declare const SectionMessage: {
                 brandPurpleAccent: any;
                 brandYellow: any;
                 brandYellowAccent: any;
+                infoLight: any;
+                info: any;
+                infoMid: any;
+                infoDark: any;
                 successLight: any;
                 success: any;
                 successMid: any;
@@ -2197,6 +2269,18 @@ export declare const SectionMessage: {
                 glBlueLight: any;
                 glBluePrimary: any;
                 glBlueDark: any;
+                primary100: any;
+                primary200: any;
+                primary300: any;
+                primary400: any;
+                primary500: any;
+                primary600: any;
+                primary700: any;
+                primary800: any;
+                primary900: any;
+                primary1000: any;
+                primary1100: any;
+                primary1200: any;
             };
             space: {
                 "0": any;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"SectionMessage.js","sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Dismissible } from '../dismissible'\nimport { Stack } from '../stack'\nimport {\n  SectionMessageProvider,\n  useSectionMessageContext\n} from './SectionMessageContext'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n  SectionMessageActions,\n  SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n  position: 'relative',\n  borderRadius: '$0',\n  display: 'flex',\n  minHeight: '$5',\n  p: '$4',\n  border: '1px solid white',\n  variants: {\n    theme: {\n      success: {\n        bg: '$successLight',\n        color: '$successDark'\n      },\n      warning: {\n        bg: '$warningLight',\n        color: '$warningText'\n      },\n      error: {\n        bg: '$dangerLight',\n        color: '$dangerDark'\n      },\n      neutral: {\n        bg: '$grey100',\n        color: '$grey1000'\n      },\n      info: {\n        bg: '$blue100',\n        color: '$blue1000'\n      }\n    },\n    hasIcon: {\n      true: {\n        pl: '$6'\n      }\n    },\n    hasDismiss: {\n      true: {\n        pr: '$7'\n      }\n    }\n  }\n})\n\nconst StyledStack = styled(Stack, {\n  flexGrow: 1,\n  justifyContent: 'space-between !important'\n})\n\nconst SectionMessageRoot = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledSectionMessage>): JSX.Element => {\n  const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n  return (\n    <StyledSectionMessage\n      {...rest}\n      theme={theme}\n      hasIcon={hasIcon}\n      hasDismiss={hasDismiss}\n    >\n      <StyledStack gap={3}>{children}</StyledStack>\n    </StyledSectionMessage>\n  )\n}\n\nexport type SectionMessageTheme =\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral'\n  | 'info'\n\nexport interface SectionMessageProps\n  extends React.ComponentProps<typeof SectionMessageRoot> {\n  theme?: SectionMessageTheme\n}\n\nexport const SectionMessage = ({\n  theme = 'info',\n  ...rest\n}: SectionMessageProps): JSX.Element => {\n  return (\n    <TooltipProvider>\n      <SectionMessageProvider theme={theme}>\n        <SectionMessageRoot {...rest} />\n      </SectionMessageProvider>\n    </TooltipProvider>\n  )\n}\n\nSectionMessage.Title = SectionMessageTitle\nSectionMessage.Description = SectionMessageDescription\nSectionMessage.Icon = SectionMessageIcon\nSectionMessage.Dismiss = SectionMessageDismiss\nSectionMessage.Content = SectionMessageContent\nSectionMessage.Actions = SectionMessageActions\n"],"names":["StyledSectionMessage","styled","Dismissible","StyledStack","Stack","SectionMessageRoot","children","rest","theme","hasIcon","hasDismiss","useSectionMessageContext","React","SectionMessage","TooltipProvider","SectionMessageProvider","SectionMessageTitle","SectionMessageDescription","SectionMessageIcon","SectionMessageDismiss","SectionMessageContent","SectionMessageActions"],"mappings":"mqBAoBA,MAAMA,EAAuBC,EAAOC,EAAa,CAC/C,SAAU,WACV,aAAc,KACd,QAAS,OACT,UAAW,KACX,EAAG,KACH,OAAQ,kBACR,SAAU,CACR,MAAO,CACL,QAAS,CACP,GAAI,gBACJ,MAAO,cACT,EACA,QAAS,CACP,GAAI,gBACJ,MAAO,cACT,EACA,MAAO,CACL,GAAI,eACJ,MAAO,aACT,EACA,QAAS,CACP,GAAI,WACJ,MAAO,WACT,EACA,KAAM,CACJ,GAAI,WACJ,MAAO,WACT,CACF,EACA,QAAS,CACP,KAAM,CACJ,GAAI,IACN,CACF,EACA,WAAY,CACV,KAAM,CACJ,GAAI,IACN,CACF,CACF,CACF,CAAC,EAEKC,EAAcF,EAAOG,EAAO,CAChC,SAAU,EACV,eAAgB,0BAClB,CAAC,EAEKC,EAAqB,CAAC,CAC1B,SAAAC,KACGC,CACL,IAAsE,CACpE,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,WAAAC,CAAW,EAAIC,EAAAA,EAEvC,OACEC,EAAA,cAACZ,EAAA,CACE,GAAGO,EACJ,MAAOC,EACP,QAASC,EACT,WAAYC,CAAAA,EAEZE,EAAA,cAACT,EAAA,CAAY,IAAK,CAAIG,EAAAA,CAAS,CACjC,CAEJ,EAcaO,EAAiB,CAAC,CAC7B,MAAAL,EAAQ,UACLD,CACL,IAEIK,EAAA,cAACE,EAAA,KACCF,EAAA,cAACG,EAAA,CAAuB,MAAOP,GAC7BI,EAAA,cAACP,EAAA,CAAoB,GAAGE,CAAAA,CAAM,CAChC,CACF,EAIJM,EAAe,MAAQG,EACvBH,EAAe,YAAcI,EAC7BJ,EAAe,KAAOK,EACtBL,EAAe,QAAUM,EACzBN,EAAe,QAAUO,EACzBP,EAAe,QAAUQ"}
+{"version":3,"file":"SectionMessage.js","sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Dismissible } from '../dismissible'\nimport { Stack } from '../stack'\nimport {\n  SectionMessageProvider,\n  useSectionMessageContext\n} from './SectionMessageContext'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n  SectionMessageActions,\n  SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n  position: 'relative',\n  borderRadius: '$0',\n  display: 'flex',\n  minHeight: '$5',\n  p: '$4',\n  border: '1px solid white',\n  variants: {\n    theme: {\n      success: {\n        bg: '$successLight',\n        color: '$successDark'\n      },\n      warning: {\n        bg: '$warningLight',\n        color: '$warningText'\n      },\n      error: {\n        bg: '$dangerLight',\n        color: '$dangerDark'\n      },\n      neutral: {\n        bg: '$grey100',\n        color: '$grey1000'\n      },\n      info: {\n        bg: '$infoLight',\n        color: '$infoDark'\n      }\n    },\n    hasIcon: {\n      true: {\n        pl: '$6'\n      }\n    },\n    hasDismiss: {\n      true: {\n        pr: '$7'\n      }\n    }\n  }\n})\n\nconst StyledStack = styled(Stack, {\n  flexGrow: 1,\n  justifyContent: 'space-between !important'\n})\n\nconst SectionMessageRoot = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledSectionMessage>): JSX.Element => {\n  const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n  return (\n    <StyledSectionMessage\n      {...rest}\n      theme={theme}\n      hasIcon={hasIcon}\n      hasDismiss={hasDismiss}\n    >\n      <StyledStack gap={3}>{children}</StyledStack>\n    </StyledSectionMessage>\n  )\n}\n\nexport type SectionMessageTheme =\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral'\n  | 'info'\n\nexport interface SectionMessageProps\n  extends React.ComponentProps<typeof SectionMessageRoot> {\n  theme?: SectionMessageTheme\n}\n\nexport const SectionMessage = ({\n  theme = 'info',\n  ...rest\n}: SectionMessageProps): JSX.Element => {\n  return (\n    <TooltipProvider>\n      <SectionMessageProvider theme={theme}>\n        <SectionMessageRoot {...rest} />\n      </SectionMessageProvider>\n    </TooltipProvider>\n  )\n}\n\nSectionMessage.Title = SectionMessageTitle\nSectionMessage.Description = SectionMessageDescription\nSectionMessage.Icon = SectionMessageIcon\nSectionMessage.Dismiss = SectionMessageDismiss\nSectionMessage.Content = SectionMessageContent\nSectionMessage.Actions = SectionMessageActions\n"],"names":["StyledSectionMessage","styled","Dismissible","StyledStack","Stack","SectionMessageRoot","children","rest","theme","hasIcon","hasDismiss","useSectionMessageContext","React","SectionMessage","TooltipProvider","SectionMessageProvider","SectionMessageTitle","SectionMessageDescription","SectionMessageIcon","SectionMessageDismiss","SectionMessageContent","SectionMessageActions"],"mappings":"mqBAoBA,MAAMA,EAAuBC,EAAOC,EAAa,CAC/C,SAAU,WACV,aAAc,KACd,QAAS,OACT,UAAW,KACX,EAAG,KACH,OAAQ,kBACR,SAAU,CACR,MAAO,CACL,QAAS,CACP,GAAI,gBACJ,MAAO,cACT,EACA,QAAS,CACP,GAAI,gBACJ,MAAO,cACT,EACA,MAAO,CACL,GAAI,eACJ,MAAO,aACT,EACA,QAAS,CACP,GAAI,WACJ,MAAO,WACT,EACA,KAAM,CACJ,GAAI,aACJ,MAAO,WACT,CACF,EACA,QAAS,CACP,KAAM,CACJ,GAAI,IACN,CACF,EACA,WAAY,CACV,KAAM,CACJ,GAAI,IACN,CACF,CACF,CACF,CAAC,EAEKC,EAAcF,EAAOG,EAAO,CAChC,SAAU,EACV,eAAgB,0BAClB,CAAC,EAEKC,EAAqB,CAAC,CAC1B,SAAAC,KACGC,CACL,IAAsE,CACpE,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,WAAAC,CAAW,EAAIC,EAAAA,EAEvC,OACEC,EAAA,cAACZ,EAAA,CACE,GAAGO,EACJ,MAAOC,EACP,QAASC,EACT,WAAYC,CAAAA,EAEZE,EAAA,cAACT,EAAA,CAAY,IAAK,CAAIG,EAAAA,CAAS,CACjC,CAEJ,EAcaO,EAAiB,CAAC,CAC7B,MAAAL,EAAQ,UACLD,CACL,IAEIK,EAAA,cAACE,EAAA,KACCF,EAAA,cAACG,EAAA,CAAuB,MAAOP,GAC7BI,EAAA,cAACP,EAAA,CAAoB,GAAGE,CAAAA,CAAM,CAChC,CACF,EAIJM,EAAe,MAAQG,EACvBH,EAAe,YAAcI,EAC7BJ,EAAe,KAAOK,EACtBL,EAAe,QAAUM,EACzBN,EAAe,QAAUO,EACzBP,EAAe,QAAUQ"}

package/dist/components/select/Select.d.ts

@@ -21,9 +21,10 @@ declare const StyledSelect: import("@stitches/react/types/styled-component").Sty
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -170,11 +171,6 @@ declare const StyledSelect: import("@stitches/react/types/styled-component").Sty
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -183,6 +179,10 @@ declare const StyledSelect: import("@stitches/react/types/styled-component").Sty
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -206,6 +206,18 @@ declare const StyledSelect: import("@stitches/react/types/styled-component").Sty
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;

package/dist/components/select/Select.js

@@ -1,2 +1,2 @@
-import*as o from"react";import{styled as p,theme as s}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{encodeBackgroundIcon as c}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as u}from"../../utilities/style/disabledStyle.js";const m=p("select",{appearance:"none",backgroundColor:"white",backgroundImage:c(s.colors.tonal300.value,"chevron"),backgroundRepeat:"no-repeat, repeat",border:"1px solid $tonal300",borderRadius:"$0",color:"$tonal600",display:"block",fontFamily:"$body",fontWeight:400,lineHeight:1.4,transition:"all 75ms ease-out",width:"100%","&:hover":{cursor:"pointer"},"&:focus":{borderColor:"$primary",outline:"none"},"&::-ms-expand":{display:"none"},"&[disabled], > option[disabled]":u,variants:{size:{sm:{backgroundPosition:"right $space$2 top 50%, 0 0",backgroundSize:"18px auto, 100%",fontSize:"$sm",height:"$3",pl:"$2",pr:"$5"},md:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$4",pl:"$3",pr:"$6"},lg:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$5",pl:"$3",pr:"$6"}},state:{error:{border:"1px solid $danger"}}}}),a=o.forwardRef(({placeholder:r,children:i,size:n="md",...e},d)=>{const t={size:n,ref:d,...e};return[e.value,e.defaultValue].every(l=>l===void 0)&&(t.defaultValue=""),o.createElement(m,{...t},r&&o.createElement("option",{disabled:!0,hidden:!0,value:""},r),i)});a.displayName="Select";export{a as Select};
+import*as o from"react";import{styled as p,theme as s}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{encodeBackgroundIcon as c}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as u}from"../../utilities/style/disabledStyle.js";const m=p("select",{appearance:"none",backgroundColor:"white",backgroundImage:c(s.colors.tonal300.value,"chevron"),backgroundRepeat:"no-repeat, repeat",border:"1px solid $tonal300",borderRadius:"$0",color:"$tonal600",display:"block",fontFamily:"$body",fontWeight:400,lineHeight:1.4,transition:"all 75ms ease-out",width:"100%","&:hover":{cursor:"pointer"},"&:focus":{borderColor:"$primary800",outline:"none"},"&::-ms-expand":{display:"none"},"&[disabled], > option[disabled]":u,variants:{size:{sm:{backgroundPosition:"right $space$2 top 50%, 0 0",backgroundSize:"18px auto, 100%",fontSize:"$sm",height:"$3",pl:"$2",pr:"$5"},md:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$4",pl:"$3",pr:"$6"},lg:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$5",pl:"$3",pr:"$6"}},state:{error:{border:"1px solid $danger"}}}}),a=o.forwardRef(({placeholder:r,children:i,size:n="md",...e},d)=>{const t={size:n,ref:d,...e};return[e.value,e.defaultValue].every(l=>l===void 0)&&(t.defaultValue=""),o.createElement(m,{...t},r&&o.createElement("option",{disabled:!0,hidden:!0,value:""},r),i)});a.displayName="Select";export{a as Select};
 //# sourceMappingURL=Select.js.map

package/dist/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { disabledStyle, encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select', {\n  appearance: 'none',\n  backgroundColor: 'white',\n  backgroundImage: encodeBackgroundIcon(theme.colors.tonal300.value, 'chevron'),\n  backgroundRepeat: 'no-repeat, repeat',\n  border: '1px solid $tonal300',\n  borderRadius: '$0',\n  color: '$tonal600',\n  display: 'block',\n  fontFamily: '$body',\n  fontWeight: 400,\n  lineHeight: 1.4,\n  transition: 'all 75ms ease-out',\n  width: '100%',\n  '&:hover': {\n    cursor: 'pointer'\n  },\n  '&:focus': {\n    borderColor: '$primary',\n    outline: 'none'\n  },\n  '&::-ms-expand': {\n    display: 'none'\n  },\n  '&[disabled], > option[disabled]': disabledStyle,\n  variants: {\n    size: {\n      sm: {\n        backgroundPosition: 'right $space$2 top 50%, 0 0',\n        backgroundSize: '18px auto, 100%',\n        fontSize: '$sm',\n        height: '$3',\n        pl: '$2',\n        pr: '$5'\n      },\n      md: {\n        backgroundPosition: 'right $space$3 top 50%, 0 0',\n        backgroundSize: '20px auto, 100%',\n        fontSize: '$md',\n        height: '$4',\n        pl: '$3',\n        pr: '$6'\n      },\n      lg: {\n        backgroundPosition: 'right $space$3 top 50%, 0 0',\n        backgroundSize: '20px auto, 100%',\n        fontSize: '$md',\n        height: '$5',\n        pl: '$3',\n        pr: '$6'\n      }\n    },\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    as?: never\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select: React.FC<SelectProps> = React.forwardRef(\n  ({ placeholder, children, size = 'md', ...remainingProps }, ref) => {\n    const props = { size, ref, ...remainingProps }\n\n    if (\n      [remainingProps.value, remainingProps.defaultValue].every(\n        (value) => value === undefined\n      )\n    ) {\n      props.defaultValue = ''\n    }\n\n    return (\n      <StyledSelect {...props}>\n        {placeholder && (\n          <option disabled hidden value=\"\">\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n    )\n  }\n)\n\nSelect.displayName = 'Select'\n"],"names":["StyledSelect","styled","encodeBackgroundIcon","theme","disabledStyle","Select","React","placeholder","children","size","remainingProps","ref","props","value"],"mappings":"oZAMA,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,OACZ,gBAAiB,QACjB,gBAAiBC,EAAqBC,EAAM,OAAO,SAAS,MAAO,SAAS,EAC5E,iBAAkB,oBAClB,OAAQ,sBACR,aAAc,KACd,MAAO,YACP,QAAS,QACT,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,WAAY,oBACZ,MAAO,OACP,UAAW,CACT,OAAQ,SACV,EACA,UAAW,CACT,YAAa,WACb,QAAS,MACX,EACA,gBAAiB,CACf,QAAS,MACX,EACA,kCAAmCC,EACnC,SAAU,CACR,KAAM,CACJ,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAgBYC,EAAgCC,EAAM,WACjD,CAAC,CAAE,YAAAC,EAAa,SAAAC,EAAU,KAAAC,EAAO,QAASC,CAAe,EAAGC,IAAQ,CAClE,MAAMC,EAAQ,CAAE,KAAAH,EAAM,IAAAE,EAAK,GAAGD,CAAe,EAE7C,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,IAIrBN,EAAA,cAACN,EAAA,CAAc,GAAGY,CAAAA,EACfL,GACCD,EAAA,cAAC,UAAO,SAAQ,GAAC,OAAM,GAAC,MAAM,IAC3BC,CACH,EAEDC,CACH,CAEJ,CACF,EAEAH,EAAO,YAAc"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { disabledStyle, encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select', {\n  appearance: 'none',\n  backgroundColor: 'white',\n  backgroundImage: encodeBackgroundIcon(theme.colors.tonal300.value, 'chevron'),\n  backgroundRepeat: 'no-repeat, repeat',\n  border: '1px solid $tonal300',\n  borderRadius: '$0',\n  color: '$tonal600',\n  display: 'block',\n  fontFamily: '$body',\n  fontWeight: 400,\n  lineHeight: 1.4,\n  transition: 'all 75ms ease-out',\n  width: '100%',\n  '&:hover': {\n    cursor: 'pointer'\n  },\n  '&:focus': {\n    borderColor: '$primary800',\n    outline: 'none'\n  },\n  '&::-ms-expand': {\n    display: 'none'\n  },\n  '&[disabled], > option[disabled]': disabledStyle,\n  variants: {\n    size: {\n      sm: {\n        backgroundPosition: 'right $space$2 top 50%, 0 0',\n        backgroundSize: '18px auto, 100%',\n        fontSize: '$sm',\n        height: '$3',\n        pl: '$2',\n        pr: '$5'\n      },\n      md: {\n        backgroundPosition: 'right $space$3 top 50%, 0 0',\n        backgroundSize: '20px auto, 100%',\n        fontSize: '$md',\n        height: '$4',\n        pl: '$3',\n        pr: '$6'\n      },\n      lg: {\n        backgroundPosition: 'right $space$3 top 50%, 0 0',\n        backgroundSize: '20px auto, 100%',\n        fontSize: '$md',\n        height: '$5',\n        pl: '$3',\n        pr: '$6'\n      }\n    },\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    as?: never\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select: React.FC<SelectProps> = React.forwardRef(\n  ({ placeholder, children, size = 'md', ...remainingProps }, ref) => {\n    const props = { size, ref, ...remainingProps }\n\n    if (\n      [remainingProps.value, remainingProps.defaultValue].every(\n        (value) => value === undefined\n      )\n    ) {\n      props.defaultValue = ''\n    }\n\n    return (\n      <StyledSelect {...props}>\n        {placeholder && (\n          <option disabled hidden value=\"\">\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n    )\n  }\n)\n\nSelect.displayName = 'Select'\n"],"names":["StyledSelect","styled","encodeBackgroundIcon","theme","disabledStyle","Select","React","placeholder","children","size","remainingProps","ref","props","value"],"mappings":"oZAMA,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,OACZ,gBAAiB,QACjB,gBAAiBC,EAAqBC,EAAM,OAAO,SAAS,MAAO,SAAS,EAC5E,iBAAkB,oBAClB,OAAQ,sBACR,aAAc,KACd,MAAO,YACP,QAAS,QACT,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,WAAY,oBACZ,MAAO,OACP,UAAW,CACT,OAAQ,SACV,EACA,UAAW,CACT,YAAa,cACb,QAAS,MACX,EACA,gBAAiB,CACf,QAAS,MACX,EACA,kCAAmCC,EACnC,SAAU,CACR,KAAM,CACJ,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAgBYC,EAAgCC,EAAM,WACjD,CAAC,CAAE,YAAAC,EAAa,SAAAC,EAAU,KAAAC,EAAO,QAASC,CAAe,EAAGC,IAAQ,CAClE,MAAMC,EAAQ,CAAE,KAAAH,EAAM,IAAAE,EAAK,GAAGD,CAAe,EAE7C,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,IAIrBN,EAAA,cAACN,EAAA,CAAc,GAAGY,CAAAA,EACfL,GACCD,EAAA,cAAC,UAAO,SAAQ,GAAC,OAAM,GAAC,MAAM,IAC3BC,CACH,EAEDC,CACH,CAEJ,CACF,EAEAH,EAAO,YAAc"}