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

package/dist/components/segmented-control/SegmentedControlRoot.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as v}from"../../stitches.js";import{Tabs as c}from"../tabs/Tabs.js";import{SegmentedControlContext as f}from"./SegmentedControlContext.js";const h=v(c,{"& > div":{border:"none"},variants:{size:{sm:{width:"unset"},md:{},lg:{}}}}),g=({size:n,theme:m="primary",defaultValue:e,children:u,...o})=>{const a=o.value!==void 0,[i,s]=t.useState(e),r=a?o.value:i,l=a?o.onValueChange:s;t.useEffect(()=>{!a&&e&&s(e)},[e,a]);const d=t.useMemo(()=>({size:n,theme:m,defaultValue:e,onValueChange:l,value:r}),[n,m,e,l,r]);return t.createElement(f.Provider,{value:d},t.createElement(h,{size:n,value:r,onValueChange:l,...o},u))};export{g as SegmentedControlRoot};
+import*as o from"react";import{styled as v}from"../../styled.js";import{Tabs as c}from"../tabs/Tabs.js";import{SegmentedControlContext as f}from"./SegmentedControlContext.js";const p=v(c,{base:["[&>div]:border-none"],variants:{size:{sm:["w-[unset]"],md:[],lg:[]}}}),C=({size:n,theme:m="primary",defaultValue:e,children:u,...t})=>{const a=t.value!==void 0,[i,s]=o.useState(e),r=a?t.value:i,l=a?t.onValueChange:s;o.useEffect(()=>{!a&&e&&s(e)},[e,a]);const d=o.useMemo(()=>({size:n,theme:m,defaultValue:e,onValueChange:l,value:r}),[n,m,e,l,r]);return o.createElement(f.Provider,{value:d},o.createElement(p,{size:n,value:r,onValueChange:l,...t},u))};export{C as SegmentedControlRoot};
 //# sourceMappingURL=SegmentedControlRoot.js.map

package/dist/components/segmented-control/SegmentedControlRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlRoot.js","sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Tabs } from '../tabs'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledSegmentedControlRoot = styled(Tabs, {\n  '& > div': { border: 'none' },\n  variants: {\n    size: {\n      sm: {\n        width: 'unset'\n      },\n      md: {},\n      lg: {}\n    }\n  }\n})\n\nexport interface SegmentedControlRootProps\n  extends React.ComponentProps<typeof StyledSegmentedControlRoot> {\n  theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n  size,\n  theme = 'primary',\n  defaultValue,\n  children,\n  ...props\n}: React.PropsWithChildren<SegmentedControlRootProps>): React.JSX.Element => {\n  const isControlled = props.value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? props.value : internalValue\n  const handleValueChange = isControlled\n    ? props.onValueChange\n    : setInternalValue\n\n  React.useEffect(() => {\n    if (!isControlled && defaultValue) {\n      setInternalValue(defaultValue)\n    }\n  }, [defaultValue, isControlled])\n\n  const value = React.useMemo(\n    () => ({\n      size,\n      theme,\n      defaultValue,\n      onValueChange: handleValueChange,\n      value: currentValue\n    }),\n    [size, theme, defaultValue, handleValueChange, currentValue]\n  )\n\n  return (\n    <SegmentedControlContext.Provider value={value}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...props}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext.Provider>\n  )\n}\n"],"names":["StyledSegmentedControlRoot","styled","Tabs","SegmentedControlRoot","size","theme","defaultValue","children","props","isControlled","internalValue","setInternalValue","React","currentValue","handleValueChange","value","SegmentedControlContext"],"mappings":"iLAOA,MAAMA,EAA6BC,EAAOC,EAAM,CAC9C,UAAW,CAAE,OAAQ,MAAO,EAC5B,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,OACT,EACA,GAAI,CACJ,EAAA,GAAI,CAAA,CACN,CACF,CACF,CAAC,EAOYC,EAAuB,CAAC,CACnC,KAAAC,EACA,MAAAC,EAAQ,UACR,aAAAC,EACA,SAAAC,KACGC,CACL,IAA6E,CAC3E,MAAMC,EAAeD,EAAM,QAAU,OAE/B,CAACE,EAAeC,CAAgB,EAAIC,EAAM,SAASN,CAAY,EAE/DO,EAAeJ,EAAeD,EAAM,MAAQE,EAC5CI,EAAoBL,EACtBD,EAAM,cACNG,EAEJC,EAAM,UAAU,IAAM,CAChB,CAACH,GAAgBH,GACnBK,EAAiBL,CAAY,CAEjC,EAAG,CAACA,EAAcG,CAAY,CAAC,EAE/B,MAAMM,EAAQH,EAAM,QAClB,KAAO,CACL,KAAAR,EACA,MAAAC,EACA,aAAAC,EACA,cAAeQ,EACf,MAAOD,CACT,GACA,CAACT,EAAMC,EAAOC,EAAcQ,EAAmBD,CAAY,CAC7D,EAEA,OACED,EAAA,cAACI,EAAwB,SAAxB,CAAiC,MAAOD,CACvCH,EAAAA,EAAA,cAACZ,EAAA,CACC,KAAMI,EACN,MAAOS,EACP,cAAeC,EACd,GAAGN,CAEHD,EAAAA,CACH,CACF,CAEJ"}
+{"version":3,"file":"SegmentedControlRoot.js","sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledSegmentedControlRoot = styled(Tabs, {\n  base: ['[&>div]:border-none'],\n  variants: {\n    size: {\n      sm: ['w-[unset]'],\n      md: [],\n      lg: []\n    }\n  }\n})\n\nexport interface SegmentedControlRootProps\n  extends React.ComponentProps<typeof StyledSegmentedControlRoot> {\n  theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n  size,\n  theme = 'primary',\n  defaultValue,\n  children,\n  ...props\n}: React.PropsWithChildren<SegmentedControlRootProps>): React.JSX.Element => {\n  const isControlled = props.value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? props.value : internalValue\n  const handleValueChange = isControlled\n    ? props.onValueChange\n    : setInternalValue\n\n  React.useEffect(() => {\n    if (!isControlled && defaultValue) {\n      setInternalValue(defaultValue)\n    }\n  }, [defaultValue, isControlled])\n\n  const value = React.useMemo(\n    () => ({\n      size,\n      theme,\n      defaultValue,\n      onValueChange: handleValueChange,\n      value: currentValue\n    }),\n    [size, theme, defaultValue, handleValueChange, currentValue]\n  )\n\n  return (\n    <SegmentedControlContext.Provider value={value}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...props}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext.Provider>\n  )\n}\n"],"names":["StyledSegmentedControlRoot","styled","Tabs","SegmentedControlRoot","size","theme","defaultValue","children","props","isControlled","internalValue","setInternalValue","React","currentValue","handleValueChange","value","SegmentedControlContext"],"mappings":"+KAQA,MAAMA,EAA6BC,EAAOC,EAAM,CAC9C,KAAM,CAAC,qBAAqB,EAC5B,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,WAAW,EAChB,GAAI,CAAA,EACJ,GAAI,CAAA,CACN,CACF,CACF,CAAC,EAOYC,EAAuB,CAAC,CACnC,KAAAC,EACA,MAAAC,EAAQ,UACR,aAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAA6E,CAC3E,MAAMC,EAAeD,EAAM,QAAU,OAE/B,CAACE,EAAeC,CAAgB,EAAIC,EAAM,SAASN,CAAY,EAE/DO,EAAeJ,EAAeD,EAAM,MAAQE,EAC5CI,EAAoBL,EACtBD,EAAM,cACNG,EAEJC,EAAM,UAAU,IAAM,CAChB,CAACH,GAAgBH,GACnBK,EAAiBL,CAAY,CAEjC,EAAG,CAACA,EAAcG,CAAY,CAAC,EAE/B,MAAMM,EAAQH,EAAM,QAClB,KAAO,CACL,KAAAR,EACA,MAAAC,EACA,aAAAC,EACA,cAAeQ,EACf,MAAOD,CACT,GACA,CAACT,EAAMC,EAAOC,EAAcQ,EAAmBD,CAAY,CAC7D,EAEA,OACED,EAAA,cAACI,EAAwB,SAAxB,CAAiC,MAAOD,CACvCH,EAAAA,EAAA,cAACZ,EAAA,CACC,KAAMI,EACN,MAAOS,EACP,cAAeC,EACd,GAAGN,CAEHD,EAAAA,CACH,CACF,CAEJ"}

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

@@ -1,381 +1,17 @@
 import * as React from 'react';
 import { Override } from '../../utilities/types';
-declare const StyledSelect: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"select", {
-    size?: "sm" | "md" | "lg" | undefined;
-    state?: "error" | undefined;
-    appearance?: "standard" | "modern" | undefined;
-}, {
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, import("@atom-learning/stitches-react/types/css-util").CSS<{
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, {
-    colors: {
-        textBold: string;
-        textRegular: string;
-        textSubtle: string;
-        textMinimal: string;
-        background: string;
-        backgroundAccent: string;
-        grey100: string;
-        grey200: string;
-        grey300: string;
-        grey400: string;
-        grey500: string;
-        grey600: string;
-        grey700: string;
-        grey800: string;
-        grey900: string;
-        grey1000: string;
-        grey1100: string;
-        grey1200: string;
-        blue100: string;
-        blue200: string;
-        blue300: string;
-        blue400: string;
-        blue500: string;
-        blue600: string;
-        blue700: string;
-        blue800: string;
-        blue900: string;
-        blue1000: string;
-        blue1100: string;
-        blue1200: string;
-        pink100: string;
-        pink200: string;
-        pink300: string;
-        pink400: string;
-        pink500: string;
-        pink600: string;
-        pink700: string;
-        pink800: string;
-        pink900: string;
-        pink1000: string;
-        pink1100: string;
-        pink1200: string;
-        purple100: string;
-        purple200: string;
-        purple300: string;
-        purple400: string;
-        purple500: string;
-        purple600: string;
-        purple700: string;
-        purple800: string;
-        purple900: string;
-        purple1000: string;
-        purple1100: string;
-        purple1200: string;
-        cyan100: string;
-        cyan200: string;
-        cyan300: string;
-        cyan400: string;
-        cyan500: string;
-        cyan600: string;
-        cyan700: string;
-        cyan800: string;
-        cyan900: string;
-        cyan1000: string;
-        cyan1100: string;
-        cyan1200: string;
-        green100: string;
-        green200: string;
-        green300: string;
-        green400: string;
-        green500: string;
-        green600: string;
-        green700: string;
-        green800: string;
-        green900: string;
-        green1000: string;
-        green1100: string;
-        green1200: string;
-        magenta100: string;
-        magenta200: string;
-        magenta300: string;
-        magenta400: string;
-        magenta500: string;
-        magenta600: string;
-        magenta700: string;
-        magenta800: string;
-        magenta900: string;
-        magenta1000: string;
-        magenta1100: string;
-        magenta1200: string;
-        red100: string;
-        red200: string;
-        red300: string;
-        red400: string;
-        red500: string;
-        red600: string;
-        red700: string;
-        red800: string;
-        red900: string;
-        red1000: string;
-        red1100: string;
-        red1200: string;
-        teal100: string;
-        teal200: string;
-        teal300: string;
-        teal400: string;
-        teal500: string;
-        teal600: string;
-        teal700: string;
-        teal800: string;
-        teal900: string;
-        teal1000: string;
-        teal1100: string;
-        teal1200: string;
-        orange100: string;
-        orange200: string;
-        orange300: string;
-        orange400: string;
-        orange500: string;
-        orange600: string;
-        orange700: string;
-        orange800: string;
-        orange900: string;
-        orange1000: string;
-        orange1100: string;
-        orange1200: string;
-        yellow100: string;
-        yellow200: string;
-        yellow300: string;
-        yellow400: string;
-        yellow500: string;
-        yellow600: string;
-        yellow700: string;
-        yellow800: string;
-        yellow900: string;
-        yellow1000: string;
-        yellow1100: string;
-        yellow1200: string;
-        lime100: string;
-        lime200: string;
-        lime300: string;
-        lime400: string;
-        lime500: string;
-        lime600: string;
-        lime700: string;
-        lime800: string;
-        lime900: string;
-        lime1000: string;
-        lime1100: string;
-        lime1200: string;
-        lapis100: string;
-        lapis200: string;
-        lapis300: string;
-        lapis400: string;
-        lapis500: string;
-        lapis600: string;
-        lapis700: string;
-        lapis800: string;
-        lapis900: string;
-        lapis1000: string;
-        lapis1100: string;
-        lapis1200: string;
-        maroon100: string;
-        maroon200: string;
-        maroon300: string;
-        maroon400: string;
-        maroon500: string;
-        maroon600: string;
-        maroon700: string;
-        maroon800: string;
-        maroon900: string;
-        maroon1000: string;
-        maroon1100: string;
-        maroon1200: string;
-        marsh100: string;
-        marsh200: string;
-        marsh300: string;
-        marsh400: string;
-        marsh500: string;
-        marsh600: string;
-        marsh700: string;
-        marsh800: string;
-        marsh900: string;
-        marsh1000: string;
-        marsh1100: string;
-        marsh1200: string;
-        alpha100: string;
-        alpha150: string;
-        alpha200: string;
-        alpha250: string;
-        alpha600: string;
-        infoLight: string;
-        info: string;
-        infoMid: string;
-        infoDark: string;
-        successLight: string;
-        success: string;
-        successMid: string;
-        successDark: string;
-        dangerLight: string;
-        danger: string;
-        dangerMid: string;
-        dangerDark: string;
-        warningLight: string;
-        warning: string;
-        warningMid: string;
-        warningDark: string;
-        warningText: string;
-        subjectEnglish: string;
-        subjectMaths: string;
-        subjectScience: string;
-        subjectVerbalReasoning: string;
-        subjectNonVerbalReasoning: string;
-        subjectCreativeWriting: string;
-        subjectExamSkills: string;
-        subjectGcseEnglishLiterature: string;
-        subjectGcseMaths: string;
-        subjectGcseChemistry: string;
-        subjectGcsePhysics: string;
-        subjectGcseBiology: string;
-        glBlueLight: string;
-        glBluePrimary: string;
-        glBlueDark: string;
-        primary100: string;
-        primary200: string;
-        primary300: string;
-        primary400: string;
-        primary500: string;
-        primary600: string;
-        primary700: string;
-        primary800: string;
-        primary900: string;
-        primary1000: string;
-        primary1100: string;
-        primary1200: string;
-    };
-    space: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        "7": string;
-        "8": string;
-        "9": string;
-        "24": string;
-    };
-    fontSizes: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        "3xl": string;
-        "4xl": string;
-    };
-    fonts: {
-        sans: string;
-        mono: string;
-        display: string;
-        body: string;
-    };
-    sizes: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        "7": string;
-        "8": string;
-    };
-    radii: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        round: string;
-    };
-    shadows: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-    };
-    ratios: {
-        "16-9": string;
-        "3-2": string;
-        "4-3": string;
-        "1-1": string;
-        "3-4": string;
-    };
-}, import("@atom-learning/stitches-react/types/config").DefaultThemeMap, {
-    bg: (value: import("@atom-learning/stitches-react").PropertyValue<"background">) => {
-        background: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">;
-    };
-    size: (value: import("@atom-learning/stitches-react").ScaleValue<"size"> | number | string) => {
-        height: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
-        width: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
-    };
-    p: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        padding: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pl: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    px: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    py: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    m: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        margin: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    ml: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mx: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    my: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-}>>;
+declare const StyledSelect: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
+    ref?: ((instance: HTMLSelectElement | null) => void) | React.RefObject<HTMLSelectElement> | null | undefined;
+}, "size" | "appearance" | "state"> & {
+    size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
+    state?: ("error" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "error">>) | undefined;
+    appearance?: ("standard" | "modern" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "standard" | "modern">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLSelectElement>>;
 export type SelectProps = Override<React.ComponentProps<typeof StyledSelect>, {
     as?: never;
     placeholder?: string;
 }>;
-export declare const Select: React.ForwardRefExoticComponent<SelectProps>;
+export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
 export {};

package/dist/components/select/Select.js

@@ -1,2 +1,2 @@
-import*as o from"react";import{styled as l,theme as c}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{encodeBackgroundIcon as u}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as g}from"../../utilities/style/disabledStyle.js";const m=l("select",{appearance:"none",backgroundImage:u(c.colors.grey700.value,"chevron"),backgroundRepeat:"no-repeat, repeat",color:"$grey1000",display:"block",fontFamily:"$body",fontWeight:400,lineHeight:1.4,width:"100%","&:hover":{cursor:"pointer"},"&::-ms-expand":{display:"none"},"&[disabled], > option[disabled]":g,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:{}},appearance:{standard:{backgroundColor:"white",border:"1px solid $grey700",borderRadius:"$0","&:focus":{borderColor:"$primary800",outline:"none"}},modern:{backgroundColor:"$grey100",border:"none",borderRadius:"$1","&:focus":{outline:"2px solid $blue800",outlineOffset:1,zIndex:1}}}},compoundVariants:[{state:"error",appearance:"standard",css:{borderColor:"$danger"}},{state:"error",appearance:"modern",css:{backgroundColor:"$dangerLight","&:focus":{outlineColor:"$danger"}}}]}),t=o.forwardRef(({placeholder:r,children:n,size:d="md",appearance:i="standard",...e},p)=>{const a={size:d,appearance:i,ref:p,...e};return[e.value,e.defaultValue].every(s=>s===void 0)&&(a.defaultValue=""),o.createElement(m,{...a},r&&o.createElement("option",{disabled:!0,hidden:!0,value:""},r),n)});t.displayName="Select";export{t as Select};
+import*as r from"react";import{styled as p}from"../../styled.js";const c=p("select",{base:["bg-(image:--bg-chevron)","appearance-none","[background-repeat:no-repeat,repeat-x]","rounded-md","text-grey-1000","block","font-body","font-normal","leading-[1.4]","w-full","hover:cursor-pointer","-ms-expand:hidden","disabled:opacity-30","disabled:cursor-not-allowed","*[[disabled]]:opacity-30","*[[disabled]]:cursor-not-allowed"],variants:{size:{sm:["bg-position-[right_--spacing(2)_top_50%,0_0]","bg-size-[18px_auto,100%]","text-sm","h-8","pl-2","pr-8"],md:["bg-position-[right_--spacing(3)_top_50%,0_0]","bg-size-[20px_auto,100%]","text-md","h-10","pl-3","pr-10"],lg:["bg-position-[right_--spacing(3)_top_50%,0_0]","bg-size-[20px_auto,100%]","text-md","h-12","pl-3","pr-10"]},state:{error:[]},appearance:{standard:["bg-white","border","border-grey-700","focus:border-primary-800","focus:outline-none"],modern:["bg-grey-100","border-none","focus:outline-2","focus:outline-blue-800","focus:outline-offset-1","focus:outline-solid","focus:z-1"]}},compoundVariants:[{state:"error",appearance:"standard",class:["border-danger"]},{state:"error",appearance:"modern",class:["bg-danger-light","focus:outline-danger"]}]}),t=r.forwardRef(({placeholder:o,children:n,size:d="md",appearance:s="standard",...e},i)=>{const a={size:d,appearance:s,ref:i,...e};return[e.value,e.defaultValue].every(l=>l===void 0)&&(a.defaultValue=""),r.createElement(c,{...a},o&&r.createElement("option",{disabled:!0,hidden:!0,value:""},o),n)});t.displayName="Select";export{t 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  backgroundImage: encodeBackgroundIcon(theme.colors.grey700.value, 'chevron'),\n  backgroundRepeat: 'no-repeat, repeat',\n  color: '$grey1000',\n  display: 'block',\n  fontFamily: '$body',\n  fontWeight: 400,\n  lineHeight: 1.4,\n  width: '100%',\n  '&:hover': {\n    cursor: 'pointer'\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    },\n    appearance: {\n      standard: {\n        backgroundColor: 'white',\n        border: '1px solid $grey700',\n        borderRadius: '$0',\n        '&:focus': {\n          borderColor: '$primary800',\n          outline: 'none'\n        }\n      },\n      modern: {\n        backgroundColor: '$grey100',\n        border: 'none',\n        borderRadius: '$1',\n        '&:focus': {\n          outline: '2px solid $blue800',\n          outlineOffset: 1,\n          zIndex: 1\n        }\n      }\n    }\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      css: { borderColor: '$danger' }\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      css: {\n        backgroundColor: '$dangerLight',\n        '&:focus': {\n          outlineColor: '$danger'\n        }\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.ForwardRefExoticComponent<SelectProps> =\n  React.forwardRef(\n    (\n      {\n        placeholder,\n        children,\n        size = 'md',\n        appearance = 'standard',\n        ...remainingProps\n      },\n      ref\n    ) => {\n      const props = { size, appearance, 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","appearance","remainingProps","ref","props","value"],"mappings":"oZAMA,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,OACZ,gBAAiBC,EAAqBC,EAAM,OAAO,QAAQ,MAAO,SAAS,EAC3E,iBAAkB,oBAClB,MAAO,YACP,QAAS,QACT,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,MAAO,OACP,UAAW,CACT,OAAQ,SACV,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,CACT,CAAA,EACA,WAAY,CACV,SAAU,CACR,gBAAiB,QACjB,OAAQ,qBACR,aAAc,KACd,UAAW,CACT,YAAa,cACb,QAAS,MACX,CACF,EACA,OAAQ,CACN,gBAAiB,WACjB,OAAQ,OACR,aAAc,KACd,UAAW,CACT,QAAS,qBACT,cAAe,EACf,OAAQ,CACV,CACF,CACF,CACF,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,IAAK,CAAE,YAAa,SAAU,CAChC,EACA,CACE,MAAO,QACP,WAAY,SACZ,IAAK,CACH,gBAAiB,eACjB,UAAW,CACT,aAAc,SAChB,CACF,CACF,CACF,CACF,CAAC,EAgBYC,EACXC,EAAM,WACJ,CACE,CACE,YAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,KACP,WAAAC,EAAa,cACVC,CACL,EACAC,IACG,CACH,MAAMC,EAAQ,CAAE,KAAAJ,EAAM,WAAAC,EAAY,IAAAE,EAAK,GAAGD,CAAe,EAEzD,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,IAIrBP,EAAA,cAACN,EAAA,CAAc,GAAGa,CACfN,EAAAA,GACCD,EAAA,cAAC,SAAO,CAAA,SAAQ,GAAC,OAAM,GAAC,MAAM,EAC3BC,EAAAA,CACH,EAEDC,CACH,CAEJ,CACF,EAEFH,EAAO,YAAc"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select', {\n  base: [\n    'bg-(image:--bg-chevron)',\n    'appearance-none',\n    '[background-repeat:no-repeat,repeat-x]',\n    'rounded-md',\n    'text-grey-1000',\n    'block',\n    'font-body',\n    'font-normal',\n    'leading-[1.4]',\n    'w-full',\n    'hover:cursor-pointer',\n    '-ms-expand:hidden',\n    'disabled:opacity-30',\n    'disabled:cursor-not-allowed',\n    '*[[disabled]]:opacity-30',\n    '*[[disabled]]:cursor-not-allowed'\n  ],\n  variants: {\n    size: {\n      sm: [\n        'bg-position-[right_--spacing(2)_top_50%,0_0]',\n        'bg-size-[18px_auto,100%]',\n        'text-sm',\n        'h-8',\n        'pl-2',\n        'pr-8'\n      ],\n      md: [\n        'bg-position-[right_--spacing(3)_top_50%,0_0]',\n        'bg-size-[20px_auto,100%]',\n        'text-md',\n        'h-10',\n        'pl-3',\n        'pr-10'\n      ],\n      lg: [\n        'bg-position-[right_--spacing(3)_top_50%,0_0]',\n        'bg-size-[20px_auto,100%]',\n        'text-md',\n        'h-12',\n        'pl-3',\n        'pr-10'\n      ]\n    },\n    state: {\n      error: []\n    },\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-700',\n        'focus:border-primary-800',\n        'focus:outline-none'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus:outline-2',\n        'focus:outline-blue-800',\n        'focus:outline-offset-1',\n        'focus:outline-solid',\n        'focus:z-1'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus:outline-danger']\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.forwardRef<HTMLSelectElement, SelectProps>(\n  (\n    {\n      placeholder,\n      children,\n      size = 'md',\n      appearance = 'standard',\n      ...remainingProps\n    },\n    ref\n  ) => {\n    // Type assertion needed due to responsive variant size prop compatibility\n    const props: React.ComponentProps<typeof StyledSelect> = {\n      size,\n      appearance,\n      ref,\n      ...remainingProps\n    }\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","Select","React","placeholder","children","size","appearance","remainingProps","ref","props","value"],"mappings":"iEAKA,MAAMA,EAAeC,EAAO,SAAU,CACpC,KAAM,CACJ,0BACA,kBACA,yCACA,aACA,iBACA,QACA,YACA,cACA,gBACA,SACA,uBACA,oBACA,sBACA,8BACA,2BACA,kCACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,+CACA,2BACA,UACA,MACA,OACA,MACF,EACA,GAAI,CACF,+CACA,2BACA,UACA,OACA,OACA,OACF,EACA,GAAI,CACF,+CACA,2BACA,UACA,OACA,OACA,OACF,CACF,EACA,MAAO,CACL,MAAO,EACT,EACA,WAAY,CACV,SAAU,CACR,WACA,SACA,kBACA,2BACA,oBACF,EACA,OAAQ,CACN,cACA,cACA,kBACA,yBACA,yBACA,sBACA,WACF,CACF,CACF,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,MAAO,CAAC,eAAe,CACzB,EACA,CACE,MAAO,QACP,WAAY,SACZ,MAAO,CAAC,kBAAmB,sBAAsB,CACnD,CACF,CACF,CAAC,EAgBYC,EAASC,EAAM,WAC1B,CACE,CACE,YAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,KACP,WAAAC,EAAa,WACb,GAAGC,CACL,EACAC,IACG,CAEH,MAAMC,EAAmD,CACvD,KAAAJ,EACA,WAAAC,EACA,IAAAE,EACA,GAAGD,CACL,EAEA,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,IAIrBP,EAAA,cAACH,EAAA,CAAc,GAAGU,CACfN,EAAAA,GACCD,EAAA,cAAC,SAAA,CAAO,SAAQ,GAAC,OAAM,GAAC,MAAM,EAAA,EAC3BC,CACH,EAEDC,CACH,CAEJ,CACF,EAEAH,EAAO,YAAc"}

package/dist/components/select-field/SelectField.d.ts

@@ -3,7 +3,7 @@ import { FieldElementWrapperProps } from '../../components/field-wrapper';
 import { SelectProps } from '../../components/select';
 type SelectFieldProps = SelectProps & FieldElementWrapperProps;
 export declare const SelectField: {
-    ({ css, hideLabel, children, name, label, validation, prompt, description, appearance, ...remainingProps }: SelectFieldProps): React.JSX.Element;
+    ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, ...remainingProps }: SelectFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/select-field/SelectField.js

@@ -1,2 +1,2 @@
-import*as p from"react";import{useFormContext as v}from"react-hook-form";import{FieldWrapper as S}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as h}from"../form/useFieldError.js";import{useFormCustomContext as x}from"../form/useFormCustomContext.js";import{Select as C}from"../select/Select.js";const l=({css:m=void 0,hideLabel:n,children:d,name:e,label:s,validation:r,prompt:c,description:u,appearance:f,...F})=>{const{register:o}=v(),t=x(),{error:i}=h(e),b=r?o(r):o,a=(t==null?void 0:t.appearance)||f;return p.createElement(S,{css:m,description:u,error:i,fieldId:e,hideLabel:n,label:s,prompt:c,required:Boolean(r==null?void 0:r.required),appearance:a},p.createElement(C,{name:e,id:e,appearance:a,...F,ref:b,...i&&{state:"error"}},d))};l.displayName="SelectField";export{l as SelectField};
+import*as p from"react";import{useFormContext as S}from"react-hook-form";import{FieldWrapper as h}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as x}from"../form/useFieldError.js";import{useFormCustomContext as C}from"../form/useFormCustomContext.js";import{Select as E}from"../select/Select.js";const m=({className:l,hideLabel:n,children:d,name:e,label:s,validation:r,prompt:c,description:u,appearance:f,...F})=>{const{register:o}=S(),t=C(),{error:a}=x(e),b=r?o(r):o,i=(t==null?void 0:t.appearance)||f;return p.createElement(h,{className:l,description:u,error:a,fieldId:e,hideLabel:n,label:s,prompt:c,required:!!(r!=null&&r.required),appearance:i},p.createElement(E,{name:e,id:e,appearance:i,...F,ref:b,...a&&{state:"error"}},d))};m.displayName="SelectField";export{m as SelectField};
 //# sourceMappingURL=SelectField.js.map

package/dist/components/select-field/SelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","sources":["../../../src/components/select-field/SelectField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError, useFormCustomContext } from '~/components/form'\nimport { Select, SelectProps } from '~/components/select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n  css = undefined,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: SelectFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n\n  return (\n    <FieldWrapper\n      css={css}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Select\n        name={name}\n        id={name}\n        appearance={formAppearance}\n        {...remainingProps}\n        ref={ref}\n        {...(error && { state: 'error' })}\n      >\n        {children}\n      </Select>\n    </FieldWrapper>\n  )\n}\n\nSelectField.displayName = 'SelectField'\n"],"names":["SelectField","css","hideLabel","children","name","label","validation","prompt","description","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","Select"],"mappings":"6XAYa,MAAAA,EAAc,CAAC,CAC1B,IAAAC,EAAM,OACN,UAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,KACGC,CACL,IAAwB,CACtB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9BC,EAAUC,EAAAA,EACV,CAAE,MAAAC,CAAM,EAAIC,EAAcZ,CAAI,EAC9Ba,EAAMX,EAAaK,EAASL,CAAU,EAAIK,EAC1CO,GAAiBL,GAAA,KAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,IAAKnB,EACL,YAAaO,EACb,MAAOO,EACP,QAASX,EACT,UAAWF,EACX,MAAOG,EACP,OAAQE,EACR,SAAU,QAAQD,GAAA,KAAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYY,CAAAA,EAEZC,EAAA,cAACE,EAAA,CACC,KAAMjB,EACN,GAAIA,EACJ,WAAYc,EACX,GAAGR,EACJ,IAAKO,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,CAAA,EAE9BZ,CACH,CACF,CAEJ,EAEAH,EAAY,YAAc"}
+{"version":3,"file":"SelectField.js","sources":["../../../src/components/select-field/SelectField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError, useFormCustomContext } from '~/components/form'\nimport { Select, SelectProps } from '~/components/select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n  className,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: SelectFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Select\n        name={name}\n        id={name}\n        appearance={formAppearance}\n        {...remainingProps}\n        ref={ref}\n        {...(error && { state: 'error' })}\n      >\n        {children}\n      </Select>\n    </FieldWrapper>\n  )\n}\n\nSelectField.displayName = 'SelectField'\n"],"names":["SelectField","className","hideLabel","children","name","label","validation","prompt","description","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","Select"],"mappings":"6XAYa,MAAAA,EAAc,CAAC,CAC1B,UAAAC,EACA,UAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,EACA,GAAGC,CACL,IAAwB,CACtB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAAA,EACfC,EAAUC,EAAqB,EAC/B,CAAE,MAAAC,CAAM,EAAIC,EAAcZ,CAAI,EAC9Ba,EAAMX,EAAaK,EAASL,CAAU,EAAIK,EAC1CO,GAAiBL,GAAA,KAAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,UAAWnB,EACX,YAAaO,EACb,MAAOO,EACP,QAASX,EACT,UAAWF,EACX,MAAOG,EACP,OAAQE,EACR,SAAU,CAAA,EAAQD,GAAA,MAAAA,EAAY,UAC9B,WAAYY,CAAAA,EAEZC,EAAA,cAACE,EAAA,CACC,KAAMjB,EACN,GAAIA,EACJ,WAAYc,EACX,GAAGR,EACJ,IAAKO,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,CAAA,EAE9BZ,CACH,CACF,CAEJ,EAEAH,EAAY,YAAc"}