npm - @atom-learning/components - Versions diffs - 5.4.3 → 5.5.0-beta.0 - Mend

@atom-learning/components 5.4.3 → 5.5.0-beta.0

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

Files changed (82) hide show

package/dist/components/segmented-control/SegmentedControl.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 export declare const SegmentedControl: {
-    Root: ({ size, theme, defaultValue, children, ...props }: import("react").PropsWithChildren<import("./SegmentedControlRoot").SegmentedControlRootProps>) => import("react").JSX.Element;
+    Root: ({ size, theme, defaultValue, children, ...props }: React.PropsWithChildren<import("./SegmentedControlRoot").SegmentedControlRootProps>) => React.JSX.Element;
     Item: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "css"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{}, {
         sm: string;
         md: string;
@@ -736,7 +736,7 @@ export declare const SegmentedControl: {
             };
         }> | undefined;
     }, "size">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    Heading: (props: Omit<import("react").ComponentProps<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    Heading: (props: Omit<React.ComponentProps<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
         ref?: ((instance: HTMLParagraphElement | null) => void) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
     }, "size" | "css" | "weight" | "noCapsize" | "family"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
         weight?: "bold" | "normal" | undefined;
@@ -1109,7 +1109,7 @@ export declare const SegmentedControl: {
             };
         }> | undefined;
     }, "as"> & {
-        as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | import("react").ComponentType | import("react").ElementType;
+        as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
     }>, {
         size?: "sm" | "md" | "lg" | undefined;
     }, {
@@ -1476,7 +1476,7 @@ export declare const SegmentedControl: {
             marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
         };
     }>>>, "size">) => JSX.Element;
-    Description: (props: Omit<import("react").ComponentProps<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    Description: (props: Omit<React.ComponentProps<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
         ref?: ((instance: HTMLParagraphElement | null) => void) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
     }, "size" | "css" | "weight" | "noCapsize" | "family"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
         weight?: "bold" | "normal" | undefined;
@@ -1849,7 +1849,7 @@ export declare const SegmentedControl: {
             };
         }> | undefined;
     }, "as"> & {
-        as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | import("react").ComponentType | import("react").ElementType;
+        as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
     }>, {
         size?: "sm" | "md" | "lg" | undefined;
     }, {
@@ -2216,7 +2216,7 @@ export declare const SegmentedControl: {
             marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
         };
     }>>>, "size">) => JSX.Element;
-    Icon: (props: Omit<import("react").ComponentProps<typeof import("..").Icon>, "size">) => JSX.Element;
+    Icon: (props: Omit<React.ComponentProps<typeof import("..").Icon>, "size">) => JSX.Element;
     Content: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsContentProps & import("react").RefAttributes<HTMLDivElement>>, {}, {
         sm: string;
         md: string;
@@ -2581,6 +2581,374 @@ export declare const SegmentedControl: {
             marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
         };
     }>>;
-    Badge: ({ css, ...props }: Omit<import("react").ComponentProps<typeof import("..").Badge>, "size">) => JSX.Element;
-    ItemList: import("react").FC<{}>;
+    Badge: ({ css, ...props }: Omit<React.ComponentProps<typeof import("..").Badge>, "size">) => JSX.Element;
+    ItemList: (props: React.ComponentProps<{
+        ({ children, colorScheme, ...rest }: React.ComponentProps<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>>, {}, {
+            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;
+                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">;
+            };
+        }>>> & {
+            colorScheme?: import("../..").TcolorScheme;
+        }): import("react").JSX.Element;
+        displayName: string;
+    }>) => JSX.Element;
 };

package/dist/components/segmented-control/SegmentedControlItemList.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 import * as React from 'react';
-export declare const SegmentedControlItemList: React.FC;
+import { Tabs } from '../tabs';
+export declare const SegmentedControlItemList: (props: React.ComponentProps<typeof Tabs.TriggerList>) => JSX.Element;

package/dist/components/segmented-control/SegmentedControlItemList.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as l}from"../../stitches.js";import{Box as b}from"../box/Box.js";import{Tabs as g}from"../tabs/Tabs.js";import{SegmentedControlContext as E}from"./SegmentedControlContext.js";const w=l(g.TriggerList,{position:"relative",p:"$1",borderRadius:"$3",overflow:"hidden",variants:{theme:{primary:{bg:"$primary200"},marsh:{bg:"$marsh200"}}},'& > div[role="tablist"]':{position:"relative"},"& > button":{zIndex:2}}),C=l(b,{content:"",position:"absolute",bg:"white",borderRadius:"$2",variants:{interacted:{true:{transition:"all 0.3s ease"},false:{transition:"none"}}}}),d=s=>{const{theme:c,defaultValue:u,value:m}=t.useContext(E),a=t.useRef([]),i=t.Children.toArray(s.children).findIndex(e=>(e==null?void 0:e.props.value)===m),[f,h]=t.useState({left:0,height:0,width:0}),[p,v]=t.useState(!1),n=t.useCallback(()=>{const e=a.current[i];if(!e)return;const{width:o,height:r}=e.getBoundingClientRect();h({left:e.offsetLeft,height:r,width:o})},[i]);return t.useEffect(()=>{const e=new ResizeObserver(n),o=a.current;return o.forEach(r=>{r&&e.observe(r)}),()=>{o.forEach(r=>{r&&e.unobserve(r)}),e.disconnect()}},[i,n]),t.useEffect(()=>(window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}),[n]),t.useEffect(()=>{n()},[i,n]),t.createElement(w,{theme:c,defaultValue:u,...s},t.createElement(C,{css:{...f},interacted:p}),t.Children.map(s.children,(e,o)=>{if(!t.isValidElement(e))throw new Error(`Child passed to ${d.displayName} is not a valid element`);return t.cloneElement(e,{onClick:r=>{v(!0),e.props.onClick&&e.props.onClick(r)},ref:r=>a.current[o]=r})}))};export{d as SegmentedControlItemList};
+import*as t from"react";import{styled as l}from"../../stitches.js";import{Box as v}from"../box/Box.js";import{Tabs as g}from"../tabs/Tabs.js";import{SegmentedControlContext as b}from"./SegmentedControlContext.js";const C=l(g.TriggerList,{position:"relative",p:"$1",borderRadius:"$3",overflow:"hidden",variants:{theme:{primary:{bg:"$primary200"},marsh:{bg:"$marsh200"}}},'& > div[role="tablist"]':{position:"relative"},"& > button":{zIndex:2}}),E=l(v,{content:"",position:"absolute",bg:"white",borderRadius:"$2",variants:{interacted:{true:{transition:"all 0.3s ease"},false:{transition:"none"}}}}),w=s=>{const{theme:d,defaultValue:c,value:m}=t.useContext(b),a=t.useRef([]),i=t.Children.toArray(s.children).findIndex(e=>(e==null?void 0:e.props.value)===m),[u,f]=t.useState({left:0,height:0,width:0}),[h,p]=t.useState(!1),n=t.useCallback(()=>{const e=a.current[i];if(!e)return;const{width:o,height:r}=e.getBoundingClientRect();f({left:e.offsetLeft,height:r,width:o})},[i]);return t.useEffect(()=>{const e=new ResizeObserver(n),o=a.current;return o.forEach(r=>{r&&e.observe(r)}),()=>{o.forEach(r=>{r&&e.unobserve(r)}),e.disconnect()}},[i,n]),t.useEffect(()=>(window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}),[n]),t.useEffect(()=>{n()},[i,n]),t.createElement(C,{theme:d,defaultValue:c,...s},t.createElement(E,{css:{...u},interacted:h}),t.Children.map(s.children,(e,o)=>{if(!t.isValidElement(e))throw new Error("Child passed to SegmentedControlItemList is not a valid element");return t.cloneElement(e,{onClick:r=>{p(!0),e.props.onClick&&e.props.onClick(r)},ref:r=>a.current[o]=r})}))};export{w as SegmentedControlItemList};
 //# sourceMappingURL=SegmentedControlItemList.js.map

package/dist/components/segmented-control/SegmentedControlItemList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Box } from '../box'\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n position: 'relative',\n p: '$1',\n borderRadius: '$3',\n overflow: 'hidden',\n variants: {\n theme: {\n primary: { bg: '$primary200' },\n marsh: { bg: '$marsh200' }\n }\n },\n '& > div[role=\"tablist\"]': {\n position: 'relative'\n },\n '& > button': {\n zIndex: 2\n }\n})\n\nconst SelectionIndicator = styled(Box, {\n content: '',\n position: 'absolute',\n bg: 'white',\n borderRadius: '$2',\n variants: {\n interacted: {\n true: {\n transition: 'all 0.3s ease'\n },\n false: {\n transition: 'none'\n }\n }\n }\n})\n\nexport const SegmentedControlItemList: ~~React.FC~~ = (\n props: React.ComponentProps<typeof Tabs.TriggerList>\n) => {\n const { theme, defaultValue, value } = React.useContext(\n SegmentedControlContext\n )\n\n const tabsRef = React.useRef<(HTMLElement \| null)[]>([])\n\n const selectedIndex = React.Children.toArray(props.children).findIndex(\n (child) => (child as React.ReactElement)?.props.value === value\n )\n\n const [indicatorStyles, setIndicatorStyles] = React.useState({\n left: 0,\n height: 0,\n width: 0\n })\n const [hasInteracted, setHasInteracted] = React.useState(false)\n\n const updateIndicatorPosition = React.useCallback(() => {\n const currentTab = tabsRef.current[selectedIndex]\n if (!currentTab) return\n\n const { width, height } = currentTab.getBoundingClientRect()\n setIndicatorStyles({ left: currentTab.offsetLeft, height, width })\n }, [selectedIndex])\n\n React.useEffect(() => {\n const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n const currentTabs = tabsRef.current\n currentTabs.forEach((tab) => {\n if (tab) resizeObserver.observe(tab)\n })\n\n return () => {\n currentTabs.forEach((tab) => {\n if (tab) resizeObserver.unobserve(tab)\n })\n resizeObserver.disconnect()\n }\n }, [selectedIndex, updateIndicatorPosition])\n\n React.useEffect(() => {\n window.addEventListener('resize', updateIndicatorPosition)\n return () => {\n window.removeEventListener('resize', updateIndicatorPosition)\n }\n }, [updateIndicatorPosition])\n\n React.useEffect(() => {\n updateIndicatorPosition()\n }, [selectedIndex, updateIndicatorPosition])\n\n return (\n <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n <SelectionIndicator\n css={{\n ...indicatorStyles\n }}\n interacted={hasInteracted}\n />\n {React.Children.map(props.children, (child, index) => {\n if (!React.isValidElement(child)) {\n throw new Error(\n `Child passed to ${SegmentedControlItemList~~.displayName}~~ is not a valid element`\n )\n }\n\n return React.cloneElement(\n child as React.ReactElement<\n React.ComponentProps<typeof SegmentedControlItem>\n >,\n {\n onClick: (e) => {\n setHasInteracted(true)\n if (child.props.onClick) child.props.onClick(e)\n },\n ref: (el) => (tabsRef.current[index] = el)\n }\n )\n })}\n </StyledTriggerList>\n )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SelectionIndicator","Box","SegmentedControlItemList","props","theme","defaultValue","value","React","SegmentedControlContext","tabsRef","selectedIndex","child","indicatorStyles","setIndicatorStyles","hasInteracted","setHasInteracted","updateIndicatorPosition","currentTab","width","height","resizeObserver","currentTabs","tab","index","e","el"],"mappings":"qNASA,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,SAAU,WACV,EAAG,KACH,aAAc,KACd,SAAU,SACV,SAAU,CACR,MAAO,CACL,QAAS,CAAE,GAAI,aAAc,EAC7B,MAAO,CAAE,GAAI,WAAY,CAC3B,CACF,EACA,0BAA2B,CACzB,SAAU,UACZ,EACA,aAAc,CACZ,OAAQ,CACV,CACF,CAAC,EAEKC,EAAqBF,EAAOG,EAAK,CACrC,QAAS,GACT,SAAU,WACV,GAAI,QACJ,aAAc,KACd,SAAU,CACR,WAAY,CACV,KAAM,CACJ,WAAY,eACd,EACA,MAAO,CACL,WAAY,MACd,CACF,CACF,CACF,CAAC,EAEYC,EACXC,~~GACG~~,~~CACH~~,KAAM,CAAE,MAAAC,EAAO,aAAAC,EAAc,MAAAC,CAAM,EAAIC,EAAM,WAC3CC,CACF,EAEMC,EAAUF,EAAM,OAA+B,CAAE,~~CAAA,~~EAEjDG,EAAgBH,EAAM,SAAS,QAAQJ,EAAM,QAAQ,EAAE,UAC1DQ,IAAWA,GAAA,~~YAAAA~~,EAA8B,MAAM,SAAUL,CAC5D,EAEM,CAACM,EAAiBC,CAAkB,EAAIN,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EACK,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAAS,EAAK,EAExDS,EAA0BT,EAAM,YAAY,IAAM,CACtD,MAAMU,EAAaR,EAAQ,QAAQC,GACnC,GAAI,CAACO,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,~~wBACrCJ~~,EAAmB,CAAE,KAAMI,EAAW,WAAY,OAAAE,EAAQ,MAAAD,CAAM,CAAC,CACnE,EAAG,CAACR,CAAa,CAAC,EAElB,OAAAH,EAAM,UAAU,IAAM,CACpB,MAAMa,EAAiB,IAAI,eAAeJ,CAAuB,EAC3DK,EAAcZ,EAAQ,QAC5B,OAAAY,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,QAAQE,CAAG,CACrC,CAAC,EAEM,IAAM,CACXD,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,UAAUE,CAAG,CACvC,CAAC,EACDF,EAAe,~~YACjB~~,CACF,EAAG,CAACV,EAAeM,CAAuB,CAAC,EAE3CT,EAAM,UAAU,KACd,OAAO,iBAAiB,SAAUS,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACA,CAAuB,CAAC,EAE5BT,EAAM,UAAU,IAAM,CACpBS,~~EACF~~,~~CAAA~~,EAAG,CAACN,EAAeM,CAAuB,CAAC,EAGzCT,EAAA,cAACV,EAAA,CAAkB,MAAOO,EAAO,aAAcC,EAAe,GAAGF,CAAAA,EAC/DI,EAAA,cAACP,EAAA,CACC,IAAK,CACH,GAAGY,CACL,EACA,WAAYE,CAAAA,CACd,EACCP,EAAM,SAAS,IAAIJ,EAAM,SAAU,CAACQ,EAAOY,IAAU,CACpD,GAAI,CAAChB,EAAM,eAAeI,CAAK,EAC7B,MAAM,IAAI,MACR,~~mBAAmBT~~,~~EAAyB,oCAC9C,~~EAGF,~~OAAOK~~,EAAM,aACXI,EAGA,CACE,QAAUa,GAAM,CACdT,EAAiB,EAAI,EACjBJ,EAAM,MAAM,SAASA,EAAM,MAAM,QAAQa,CAAC,CAChD,EACA,IAAMC,GAAQhB,EAAQ,QAAQc,GAASE,CACzC,CACF,CACF,CAAC,CACH,CAEJ"}
1	+ {"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Box } from '../box'\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n position: 'relative',\n p: '$1',\n borderRadius: '$3',\n overflow: 'hidden',\n variants: {\n theme: {\n primary: { bg: '$primary200' },\n marsh: { bg: '$marsh200' }\n }\n },\n '& > div[role=\"tablist\"]': {\n position: 'relative'\n },\n '& > button': {\n zIndex: 2\n }\n})\n\nconst SelectionIndicator = styled(Box, {\n content: '',\n position: 'absolute',\n bg: 'white',\n borderRadius: '$2',\n variants: {\n interacted: {\n true: {\n transition: 'all 0.3s ease'\n },\n false: {\n transition: 'none'\n }\n }\n }\n})\n\nexport const SegmentedControlItemList = (\n props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n const { theme, defaultValue, value } = React.useContext(\n SegmentedControlContext\n )\n\n const tabsRef = React.useRef<(HTMLElement \| null)[]>([])\n\n const selectedIndex = React.Children.toArray(props.children).findIndex(\n (child) => (child as React.ReactElement)?.props.value === value\n )\n\n const [indicatorStyles, setIndicatorStyles] = React.useState({\n left: 0,\n height: 0,\n width: 0\n })\n const [hasInteracted, setHasInteracted] = React.useState(false)\n\n const updateIndicatorPosition = React.useCallback(() => {\n const currentTab = tabsRef.current[selectedIndex]\n if (!currentTab) return\n\n const { width, height } = currentTab.getBoundingClientRect()\n setIndicatorStyles({ left: currentTab.offsetLeft, height, width })\n }, [selectedIndex])\n\n React.useEffect(() => {\n const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n const currentTabs = tabsRef.current\n currentTabs.forEach((tab) => {\n if (tab) resizeObserver.observe(tab)\n })\n\n return () => {\n currentTabs.forEach((tab) => {\n if (tab) resizeObserver.unobserve(tab)\n })\n resizeObserver.disconnect()\n }\n }, [selectedIndex, updateIndicatorPosition])\n\n React.useEffect(() => {\n window.addEventListener('resize', updateIndicatorPosition)\n return () => {\n window.removeEventListener('resize', updateIndicatorPosition)\n }\n }, [updateIndicatorPosition])\n\n React.useEffect(() => {\n updateIndicatorPosition()\n }, [selectedIndex, updateIndicatorPosition])\n\n return (\n <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n <SelectionIndicator\n css={{\n ...indicatorStyles\n }}\n interacted={hasInteracted}\n />\n {React.Children.map(props.children, (child, index) => {\n if (!React.isValidElement(child)) {\n throw new Error(\n `Child passed to SegmentedControlItemList is not a valid element`\n )\n }\n\n return React.cloneElement(\n child as React.ReactElement<\n React.ComponentProps<typeof SegmentedControlItem>\n >,\n {\n onClick: (e) => {\n setHasInteracted(true)\n if (child.props.onClick) child.props.onClick(e)\n },\n ref: (el) => (tabsRef.current[index] = el)\n }\n )\n })}\n </StyledTriggerList>\n )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SelectionIndicator","Box","SegmentedControlItemList","props","theme","defaultValue","value","React","SegmentedControlContext","tabsRef","selectedIndex","child","indicatorStyles","setIndicatorStyles","hasInteracted","setHasInteracted","updateIndicatorPosition","currentTab","width","height","resizeObserver","currentTabs","tab","index","e","el"],"mappings":"qNASA,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,SAAU,WACV,EAAG,KACH,aAAc,KACd,SAAU,SACV,SAAU,CACR,MAAO,CACL,QAAS,CAAE,GAAI,aAAc,EAC7B,MAAO,CAAE,GAAI,WAAY,CAC3B,CACF,EACA,0BAA2B,CACzB,SAAU,UACZ,EACA,aAAc,CACZ,OAAQ,CACV,CACF,CAAC,EAEKC,EAAqBF,EAAOG,EAAK,CACrC,QAAS,GACT,SAAU,WACV,GAAI,QACJ,aAAc,KACd,SAAU,CACR,WAAY,CACV,KAAM,CACJ,WAAY,eACd,EACA,MAAO,CACL,WAAY,MACd,CACF,CACF,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,MAAAC,EAAO,aAAAC,EAAc,MAAAC,CAAM,EAAIC,EAAM,WAC3CC,CACF,EAEMC,EAAUF,EAAM,OAA+B,CAAA,CAAE,EAEjDG,EAAgBH,EAAM,SAAS,QAAQJ,EAAM,QAAQ,EAAE,UAC1DQ,IAAWA,GAAA,KAAAA,OAAAA,EAA8B,MAAM,SAAUL,CAC5D,EAEM,CAACM,EAAiBC,CAAkB,EAAIN,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EACK,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAAS,EAAK,EAExDS,EAA0BT,EAAM,YAAY,IAAM,CACtD,MAAMU,EAAaR,EAAQ,QAAQC,GACnC,GAAI,CAACO,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,sBACrCJ,EAAAA,EAAmB,CAAE,KAAMI,EAAW,WAAY,OAAAE,EAAQ,MAAAD,CAAM,CAAC,CACnE,EAAG,CAACR,CAAa,CAAC,EAElB,OAAAH,EAAM,UAAU,IAAM,CACpB,MAAMa,EAAiB,IAAI,eAAeJ,CAAuB,EAC3DK,EAAcZ,EAAQ,QAC5B,OAAAY,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,QAAQE,CAAG,CACrC,CAAC,EAEM,IAAM,CACXD,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,UAAUE,CAAG,CACvC,CAAC,EACDF,EAAe,WACjB,CAAA,CACF,EAAG,CAACV,EAAeM,CAAuB,CAAC,EAE3CT,EAAM,UAAU,KACd,OAAO,iBAAiB,SAAUS,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACA,CAAuB,CAAC,EAE5BT,EAAM,UAAU,IAAM,CACpBS,EAAwB,CAC1B,EAAG,CAACN,EAAeM,CAAuB,CAAC,EAGzCT,EAAA,cAACV,EAAA,CAAkB,MAAOO,EAAO,aAAcC,EAAe,GAAGF,CAAAA,EAC/DI,EAAA,cAACP,EAAA,CACC,IAAK,CACH,GAAGY,CACL,EACA,WAAYE,CAAAA,CACd,EACCP,EAAM,SAAS,IAAIJ,EAAM,SAAU,CAACQ,EAAOY,IAAU,CACpD,GAAI,CAAChB,EAAM,eAAeI,CAAK,EAC7B,MAAM,IAAI,MACR,iEACF,EAGF,OAAOJ,EAAM,aACXI,EAGA,CACE,QAAUa,GAAM,CACdT,EAAiB,EAAI,EACjBJ,EAAM,MAAM,SAASA,EAAM,MAAM,QAAQa,CAAC,CAChD,EACA,IAAMC,GAAQhB,EAAQ,QAAQc,GAASE,CACzC,CACF,CACF,CAAC,CACH,CAEJ"}

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

@@ -3,6 +3,7 @@ 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;

package/dist/components/select/Select.js CHANGED Viewed

@@ -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.grey700.value,"chevron"),backgroundRepeat:"no-repeat, repeat",border:"1px solid $grey700",borderRadius:"$0",color:"$grey1000",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"}}}}),i=o.forwardRef(({placeholder:r,children:a,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),a)});i.displayName="Select";export{i as Select};
+import*as o from"react";import{styled as s,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=s("select",{appearance:"none",backgroundImage:u(c.colors.grey700.value,"chevron"),backgroundRepeat:"no-repeat, repeat",border:"1px solid",color:"$grey1000",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]":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:{border:"1px solid $danger"}},appearance:{standard:{backgroundColor:"white",borderColor:"$grey700",borderRadius:"$0"},modern:{backgroundColor:"$grey100",borderColor:"$grey100",borderRadius:"$1"}}}}),t=o.forwardRef(({placeholder:r,children:d,size:i="md",appearance:n="standard",...e},p)=>{const a={size:i,appearance:n,ref:p,...e};return[e.value,e.defaultValue].every(l=>l===void 0)&&(a.defaultValue=""),o.createElement(m,{...a},r&&o.createElement("option",{disabled:!0,hidden:!0,value:""},r),d)});t.displayName="Select";export{t as Select};
 //# sourceMappingURL=Select.js.map

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

	@@ -1 +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.grey700.value, 'chevron'),\n backgroundRepeat: 'no-repeat, repeat',\n border: '1px solid ~~$grey700~~',\n ~~borderRadius: '$0',\n~~ color: '$grey1000',\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.ForwardRefExoticComponent<SelectProps> =\n 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,QAAQ,MAAO,SAAS,EAC3E,iBAAkB,oBAClB,OAAQ,~~qBACR~~,~~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,EACXC,EAAM,WACJ,~~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,EAEFH,EAAO,YAAc"}
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 border: '1px solid',\n color: '$grey1000',\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 appearance: {\n standard: {\n backgroundColor: 'white',\n borderColor: '$grey700',\n borderRadius: '$0'\n },\n modern: {\n backgroundColor: '$grey100',\n borderColor: '$grey100',\n borderRadius: '$1'\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,OAAQ,YACR,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,EACA,WAAY,CACV,SAAU,CACR,gBAAiB,QACjB,YAAa,WACb,aAAc,IAChB,EACA,OAAQ,CACN,gBAAiB,WACjB,YAAa,WACb,aAAc,IAChB,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,EAAA,EAC3BC,CACH,EAEDC,CACH,CAEJ,CACF,EAEFH,EAAO,YAAc"}

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

@@ -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, ...remainingProps }: SelectFieldProps): React.JSX.Element;
+    ({ css, hideLabel, children, name, label, validation, prompt, description, appearance, ...remainingProps }: SelectFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

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

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

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

	@@ -1 +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 } 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 ...remainingProps\n}: SelectFieldProps) => {\n const { register } = useFormContext()\n const { error } = useFieldError(name)\n const ref = validation ? register(validation) : register\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 >\n <Select\n name={name}\n id={name}\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","remainingProps","register","useFormContext","error","useFieldError","ref","React","FieldWrapper","Select"],"mappings":"~~sTAYO~~,~~MAAMA~~,EAAc,CAAC,CAC1B,IAAAC,EAAM,OACN,UAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,KACGC,CACL,IAAwB,CACtB,KAAM,CAAE,SAAAC,CAAS,EAAIC,~~EAAe~~,~~EAC9B~~,CAAE,MAAAC,CAAM,EAAIC,~~EAAcT~~,CAAI,~~EAC9BU~~,~~EAAMR~~,~~EAAaI~~,~~EAASJ~~,CAAU,~~EAAII~~,EAEhD,OACEK,EAAA,cAACC,EAAA,CACC,~~IAAKf~~,EACL,YAAaO,EACb,~~MAAOI~~,EACP,~~QAASR~~,EACT,UAAWF,EACX,MAAOG,EACP,OAAQE,EACR,SAAU,QAAQD,GAAA,~~YAAAA~~,EAAY,QAAQ,~~CAEtCS~~,EAAAA,EAAA,cAACE,EAAA,CACC,~~KAAMb~~,EACN,GAAIA,~~EACH~~,~~GAAGK~~,EACJ,IAAKK,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,~~CAE9BT~~,EAAAA,CACH,CACF,CAEJ,EAEAH,EAAY,YAAc"}
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 } 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 { error } = useFieldError(name)\n const ref = validation ? register(validation) : register\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={appearance}\n >\n <Select\n name={name}\n id={name}\n appearance={appearance}\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","error","useFieldError","ref","React","FieldWrapper","Select"],"mappings":"sTAYa,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,EACf,EAAA,CAAE,MAAAC,CAAM,EAAIC,EAAcV,CAAI,EAC9BW,EAAMT,EAAaK,EAASL,CAAU,EAAIK,EAEhD,OACEK,EAAA,cAACC,EAAA,CACC,IAAKhB,EACL,YAAaO,EACb,MAAOK,EACP,QAAST,EACT,UAAWF,EACX,MAAOG,EACP,OAAQE,EACR,SAAU,QAAQD,GAAA,KAAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYG,CAEZO,EAAAA,EAAA,cAACE,EAAA,CACC,KAAMd,EACN,GAAIA,EACJ,WAAYK,EACX,GAAGC,EACJ,IAAKK,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,CAE9BV,EAAAA,CACH,CACF,CAEJ,EAEAH,EAAY,YAAc"}

package/dist/components/side-bar/SideBarComponents.d.ts CHANGED Viewed

@@ -2202,7 +2202,7 @@ export declare const SideBarBrandName: import("@atom-learning/stitches-react/typ
         };
     }> | undefined;
 }, "as"> & {
-    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | import("react").ComponentType | import("react").ElementType;
+    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
 }>, {}, {
     sm: string;
     md: string;

package/dist/components/sortable/index.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 export declare const Sortable: {
     Root: {
-        ({ sortableIds, onSortChange, children }: import("react").PropsWithChildren<{
-            sortableIds: import("react").ReactText[];
+        ({ sortableIds, onSortChange, children }: React.PropsWithChildren<{
+            sortableIds: React.ReactText[];
             onSortChange: (onSortChangeData: {
                 order: import("@dnd-kit/core").UniqueIdentifier[];
                 oldIndex: number;
@@ -11,7 +11,7 @@ export declare const Sortable: {
         displayName: string;
     };
     Item: {
-        ({ id, asChild, css, isDragHandle, disabled, ...rest }: import("react").PropsWithChildren<import("./SortableItem").TSortableItemProps>): import("react").JSX.Element;
+        ({ id, asChild, css, isDragHandle, disabled, ...rest }: React.PropsWithChildren<import("./SortableItem").TSortableItemProps>): import("react").JSX.Element;
         displayName: string;
     };
     Handle: {

package/dist/components/stepper/StepperStepLabel.d.ts CHANGED Viewed

@@ -371,7 +371,7 @@ export declare const StepperStepLabel: import("@atom-learning/stitches-react/typ
         };
     }> | undefined;
 }, "as"> & {
-    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | import("react").ComponentType | import("react").ElementType;
+    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
 }>, {
     direction?: "horizontal" | "vertical" | undefined;
     status?: "success" | "default" | "active" | "viewed" | "completed" | "reviewed" | undefined;

package/dist/components/textarea/Textarea.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import * as React from 'react';
 declare const StyledTextarea: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"textarea", {
+    appearance?: "standard" | "modern" | undefined;
     state?: "error" | undefined;
 }, {
     sm: string;

package/dist/components/textarea/Textarea.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as t}from"../../stitches.js";const i=t("textarea",{boxShadow:"none",fontSize:"$md",appearance:"none",border:"1px solid $grey800",borderRadius:"$0",boxSizing:"border-box",color:"$grey1000",fontFamily:"$body",fontWeight:400,lineHeight:1.4,minHeight:"$7",px:"$3",py:"calc($2 + $1)",resize:"vertical",transition:"all 75ms ease-out",width:"100%","&:focus":{borderColor:"$primary800",outline:"none"},"&[disabled]":{backgroundColor:"$grey200",color:"$grey800",cursor:"not-allowed"},"&::placeholder":{color:"$grey700",opacity:1},variants:{state:{error:{border:"1px solid $danger"}}}}),o=e.forwardRef((r,a)=>e.createElement(i,{...r,ref:a}));o.displayName="Textarea";export{o as Textarea};
+import*as r from"react";import{styled as t}from"../../stitches.js";const d=t("textarea",{boxShadow:"none",fontSize:"$md",appearance:"none",border:"1px solid",boxSizing:"border-box",color:"$grey1000",fontFamily:"$body",fontWeight:400,lineHeight:1.4,minHeight:"$7",px:"$3",py:"calc($2 + $1)",resize:"vertical",transition:"all 75ms ease-out",width:"100%","&:focus":{borderColor:"$primary800",outline:"none"},"&[disabled]":{backgroundColor:"$grey200",color:"$grey800",cursor:"not-allowed"},"&::placeholder":{color:"$grey700",opacity:1},variants:{appearance:{standard:{background:"white",borderColor:"$grey800",borderRadius:"$0"},modern:{background:"$grey100",borderColor:"$grey100",borderRadius:"$1"}},state:{error:{border:"1px solid $danger"}}},defaultVariants:{appearance:"standard"}}),e=r.forwardRef((o,a)=>r.createElement(d,{...o,ref:a}));e.displayName="Textarea";export{e as Textarea};
 //# sourceMappingURL=Textarea.js.map