@atom-learning/components 3.12.4 → 3.12.7

package/dist/components/tabs/Tabs.js

@@ -1,2 +1,2 @@
-import{Root as e}from"@radix-ui/react-tabs";import*as i from"react";import{styled as m}from"../../stitches.js";import{TabsContent as s}from"./TabsContent.js";import{TabsTrigger as a}from"./TabsTrigger.js";import{TabsTriggerList as g}from"./TabsTriggerList.js";const T=m(e,{width:"100%"}),r=({children:t,...o})=>i.createElement(T,{...o},t);r.TriggerList=g,r.Trigger=a,r.Content=s,r.displayName="Tabs";export{r as Tabs};
+import{Root as o}from"@radix-ui/react-tabs";import{styled as t}from"../../stitches.js";import{TabsContent as i}from"./TabsContent.js";import{TabsTrigger as s}from"./TabsTrigger.js";import{TabsTriggerList as m}from"./TabsTriggerList.js";const r=t(o,{width:"100%"}),e=Object.assign(r,{TriggerList:m,Trigger:s,Content:i});r.displayName="Tabs";export{e as Tabs};
 //# sourceMappingURL=Tabs.js.map

package/dist/components/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { TabsContent } from './TabsContent'\nimport { TabsTrigger } from './TabsTrigger'\nimport { TabsTriggerList } from './TabsTriggerList'\n\ntype TabsProps = React.ComponentProps<typeof StyledRoot>\n\nconst StyledRoot = styled(Root, { width: '100%' })\n\nexport const Tabs: React.FC<TabsProps> & {\n  TriggerList: typeof TabsTriggerList\n  Trigger: typeof TabsTrigger\n  Content: typeof TabsContent\n} = ({ children, ...remainingProps }) => {\n  return <StyledRoot {...remainingProps}>{children}</StyledRoot>\n}\n\nTabs.TriggerList = TabsTriggerList\nTabs.Trigger = TabsTrigger\nTabs.Content = TabsContent\n\nTabs.displayName = 'Tabs'\n"],"names":["StyledRoot","styled","Root","Tabs","children","remainingProps","React","TabsTriggerList","TabsTrigger","TabsContent"],"mappings":"oQAWA,MAAMA,EAAaC,EAAOC,EAAM,CAAE,MAAO,MAAO,CAAC,EAEpCC,EAIT,CAAC,CAAE,SAAAC,KAAaC,CAAe,IAC1BC,EAAA,cAACN,EAAA,CAAY,GAAGK,CAAAA,EAAiBD,CAAS,EAGnDD,EAAK,YAAcI,EACnBJ,EAAK,QAAUK,EACfL,EAAK,QAAUM,EAEfN,EAAK,YAAc"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { TabsContent } from './TabsContent'\nimport { TabsTrigger } from './TabsTrigger'\nimport { TabsTriggerList } from './TabsTriggerList'\n\ntype TabsProps = React.ComponentProps<typeof StyledRoot>\n\nconst StyledRoot = styled(Root, { width: '100%' })\n\nexport const Tabs = Object.assign(StyledRoot, {\n  TriggerList: TabsTriggerList,\n  Trigger: TabsTrigger,\n  Content: TabsContent\n})\n\nStyledRoot.displayName = 'Tabs'\n"],"names":["StyledRoot","styled","Root","Tabs","TabsTriggerList","TabsTrigger","TabsContent"],"mappings":"4OAWA,MAAMA,EAAaC,EAAOC,EAAM,CAAE,MAAO,MAAO,CAAC,EAEpCC,EAAO,OAAO,OAAOH,EAAY,CAC5C,YAAaI,EACb,QAASC,EACT,QAASC,CACX,CAAC,EAEDN,EAAW,YAAc"}

package/dist/components/tabs/TabsTrigger.d.ts

@@ -330,8 +330,10 @@ declare const StyledTabsTrigger: import("@stitches/react/types/styled-component"
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-interface TabsTriggerProps extends React.ComponentProps<typeof StyledTabsTrigger> {
-    value: string;
-}
-export declare const TabsTrigger: React.FC<TabsTriggerProps>;
+export declare const TabsTrigger: {
+    ({ children, ...rest }: React.ComponentProps<typeof StyledTabsTrigger> & {
+        value: string;
+    }): JSX.Element;
+    displayName: string;
+};
 export {};

package/dist/components/tabs/TabsTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.js","sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle, focusVisibleStyleBlock } from '~/utilities'\n\nimport { Text } from '../text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n  position: 'absolute',\n  inset: 0,\n  height: 'calc(100% + 2px)',\n  opacity: 0,\n  bg: '$interactive1'\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n  background: 'none',\n  border: 'none',\n  cursor: 'pointer',\n  flexShrink: 0,\n  p: '$4',\n  userSelect: 'none',\n  borderBottom: '2px solid transparent',\n  position: 'relative',\n  '&[data-state=\"active\"]': {\n    color: '$interactive1',\n    fontWeight: 600,\n    letterSpacing: '-0.005em',\n    borderColor: 'currentColor'\n  },\n  '&[data-disabled]': disabledStyle,\n  '&:not([data-disabled])': {\n    '&:hover, &:focus-visible': {\n      color: '$interactive2',\n      [`& ${StyledTabsTriggerHoverBackground}`]: {\n        opacity: 0.07\n      }\n    },\n    '&:active': {\n      color: '$interactive3'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  }\n})\n\ninterface TabsTriggerProps\n  extends React.ComponentProps<typeof StyledTabsTrigger> {\n  value: string\n}\n\nexport const TabsTrigger: React.FC<TabsTriggerProps> = ({\n  children,\n  ...rest\n}) => (\n  <StyledTabsTrigger {...rest}>\n    <Text size=\"sm\" as=\"span\">\n      {children}\n    </Text>\n    <StyledTabsTriggerHoverBackground />\n  </StyledTabsTrigger>\n)\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"names":["StyledTabsTriggerHoverBackground","styled","StyledTabsTrigger","Trigger","disabledStyle","focusVisibleStyleBlock","TabsTrigger","children","rest","React","Text"],"mappings":"ofAQA,MAAMA,EAAmCC,EAAO,MAAO,CACrD,SAAU,WACV,MAAO,EACP,OAAQ,mBACR,QAAS,EACT,GAAI,eACN,CAAC,EAEKC,EAAoBD,EAAOE,EAAS,CACxC,WAAY,OACZ,OAAQ,OACR,OAAQ,UACR,WAAY,EACZ,EAAG,KACH,WAAY,OACZ,aAAc,wBACd,SAAU,WACV,yBAA0B,CACxB,MAAO,gBACP,WAAY,IACZ,cAAe,WACf,YAAa,cACf,EACA,mBAAoBC,EACpB,yBAA0B,CACxB,2BAA4B,CAC1B,MAAO,gBACP,CAAC,KAAKJ,KAAqC,CACzC,QAAS,GACX,CACF,EACA,WAAY,CACV,MAAO,eACT,EACA,kBAAmB,CACjB,GAAGK,EACL,CAAA,CACF,CACF,CAAC,EAOYC,EAA0C,CAAC,CACtD,SAAAC,KACGC,CACL,IACEC,EAAA,cAACP,EAAA,CAAmB,GAAGM,GACrBC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,GAAG,MAAA,EAChBH,CACH,EACAE,EAAA,cAACT,EAAA,IAAiC,CACpC,EAGFM,EAAY,YAAc"}
+{"version":3,"file":"TabsTrigger.js","sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle, focusVisibleStyleBlock } from '~/utilities'\n\nimport { Text } from '../text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n  position: 'absolute',\n  inset: 0,\n  height: 'calc(100% + 2px)',\n  opacity: 0,\n  bg: '$interactive1'\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n  background: 'none',\n  border: 'none',\n  cursor: 'pointer',\n  flexShrink: 0,\n  p: '$4',\n  userSelect: 'none',\n  borderBottom: '2px solid transparent',\n  position: 'relative',\n  '&[data-state=\"active\"]': {\n    color: '$interactive1',\n    fontWeight: 600,\n    letterSpacing: '-0.005em',\n    borderColor: 'currentColor'\n  },\n  '&[data-disabled]': disabledStyle,\n  '&:not([data-disabled])': {\n    '&:hover, &:focus-visible': {\n      color: '$interactive2',\n      [`& ${StyledTabsTriggerHoverBackground}`]: {\n        opacity: 0.07\n      }\n    },\n    '&:active': {\n      color: '$interactive3'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  }\n})\n\nexport const TabsTrigger = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledTabsTrigger> & { value: string }) => (\n  <StyledTabsTrigger {...rest}>\n    <Text size=\"sm\" as=\"span\">\n      {children}\n    </Text>\n    <StyledTabsTriggerHoverBackground />\n  </StyledTabsTrigger>\n)\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"names":["StyledTabsTriggerHoverBackground","styled","StyledTabsTrigger","Trigger","disabledStyle","focusVisibleStyleBlock","TabsTrigger","children","rest","React","Text"],"mappings":"ofAQA,MAAMA,EAAmCC,EAAO,MAAO,CACrD,SAAU,WACV,MAAO,EACP,OAAQ,mBACR,QAAS,EACT,GAAI,eACN,CAAC,EAEKC,EAAoBD,EAAOE,EAAS,CACxC,WAAY,OACZ,OAAQ,OACR,OAAQ,UACR,WAAY,EACZ,EAAG,KACH,WAAY,OACZ,aAAc,wBACd,SAAU,WACV,yBAA0B,CACxB,MAAO,gBACP,WAAY,IACZ,cAAe,WACf,YAAa,cACf,EACA,mBAAoBC,EACpB,yBAA0B,CACxB,2BAA4B,CAC1B,MAAO,gBACP,CAAC,KAAKJ,KAAqC,CACzC,QAAS,GACX,CACF,EACA,WAAY,CACV,MAAO,eACT,EACA,kBAAmB,CACjB,GAAGK,EACL,CAAA,CACF,CACF,CAAC,EAEYC,EAAc,CAAC,CAC1B,SAAAC,KACGC,CACL,IACEC,EAAA,cAACP,EAAA,CAAmB,GAAGM,GACrBC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,GAAG,MAAA,EAChBH,CACH,EACAE,EAAA,cAACT,EAAA,IAAiC,CACpC,EAGFM,EAAY,YAAc"}

package/dist/components/tabs/TabsTriggerList.d.ts

@@ -331,7 +331,342 @@ declare const StyledTriggerList: import("@stitches/react/types/styled-component"
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-export declare const TabsTriggerList: React.FC<React.ComponentProps<typeof StyledTriggerList> & {
-    colorScheme?: TcolorScheme;
-}>;
+export declare const TabsTriggerList: {
+    ({ children, colorScheme, ...rest }: Omit<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>, "css"> & import("@stitches/react/types/styled-component").TransformProps<{}, {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        reducedMotion: string;
+        allowMotion: string;
+        hover: string;
+    }> & {
+        css?: import("@stitches/react/types/css-util").CSS<{
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            reducedMotion: string;
+            allowMotion: string;
+            hover: string;
+        }, {
+            colors: {
+                textBold: any;
+                textRegular: any;
+                textSubtle: any;
+                textMinimal: any;
+                background: any;
+                backgroundAccent: any;
+                grey100: any;
+                grey200: any;
+                grey300: any;
+                grey400: any;
+                grey500: any;
+                grey600: any;
+                grey700: any;
+                grey800: any;
+                grey900: any;
+                grey1000: any;
+                grey1100: any;
+                grey1200: any;
+                blue100: any;
+                blue200: any;
+                blue300: any;
+                blue400: any;
+                blue500: any;
+                blue600: any;
+                blue700: any;
+                blue800: any;
+                blue900: any;
+                blue1000: any;
+                blue1100: any;
+                blue1200: any;
+                purple100: any;
+                purple200: any;
+                purple300: any;
+                purple400: any;
+                purple500: any;
+                purple600: any;
+                purple700: any;
+                purple800: any;
+                purple900: any;
+                purple1000: any;
+                purple1100: any;
+                purple1200: any;
+                cyan100: any;
+                cyan200: any;
+                cyan300: any;
+                cyan400: any;
+                cyan500: any;
+                cyan600: any;
+                cyan700: any;
+                cyan800: any;
+                cyan900: any;
+                cyan1000: any;
+                cyan1100: any;
+                cyan1200: any;
+                green100: any;
+                green200: any;
+                green300: any;
+                green400: any;
+                green500: any;
+                green600: any;
+                green700: any;
+                green800: any;
+                green900: any;
+                green1000: any;
+                green1100: any;
+                green1200: any;
+                magenta100: any;
+                magenta200: any;
+                magenta300: any;
+                magenta400: any;
+                magenta500: any;
+                magenta600: any;
+                magenta700: any;
+                magenta800: any;
+                magenta900: any;
+                magenta1000: any;
+                magenta1100: any;
+                magenta1200: any;
+                red100: any;
+                red200: any;
+                red300: any;
+                red400: any;
+                red500: any;
+                red600: any;
+                red700: any;
+                red800: any;
+                red900: any;
+                red1000: any;
+                red1100: any;
+                red1200: any;
+                teal100: any;
+                teal200: any;
+                teal300: any;
+                teal400: any;
+                teal500: any;
+                teal600: any;
+                teal700: any;
+                teal800: any;
+                teal900: any;
+                teal1000: any;
+                teal1100: any;
+                teal1200: any;
+                orange100: any;
+                orange200: any;
+                orange300: any;
+                orange400: any;
+                orange500: any;
+                orange600: any;
+                orange700: any;
+                orange800: any;
+                orange900: any;
+                orange1000: any;
+                orange1100: any;
+                orange1200: any;
+                yellow100: any;
+                yellow200: any;
+                yellow300: any;
+                yellow400: any;
+                yellow500: any;
+                yellow600: any;
+                yellow700: any;
+                yellow800: any;
+                yellow900: any;
+                yellow1000: any;
+                yellow1100: any;
+                yellow1200: any;
+                lime100: any;
+                lime200: any;
+                lime300: any;
+                lime400: any;
+                lime500: any;
+                lime600: any;
+                lime700: any;
+                lime800: any;
+                lime900: any;
+                lime1000: any;
+                lime1100: any;
+                lime1200: any;
+                tonal50: any;
+                tonal100: any;
+                tonal200: any;
+                tonal300: any;
+                tonal400: any;
+                tonal500: any;
+                tonal600: any;
+                alpha100: any;
+                alpha150: any;
+                alpha200: any;
+                alpha250: any;
+                alpha600: any;
+                brandRed: any;
+                brandRedAccent: any;
+                brandGreen: any;
+                brandGreenAccent: any;
+                brandPurple: any;
+                brandPurpleAccent: any;
+                brandYellow: any;
+                brandYellowAccent: any;
+                infoLight: any;
+                info: any;
+                infoMid: any;
+                infoDark: any;
+                successLight: any;
+                success: any;
+                successMid: any;
+                successDark: any;
+                dangerLight: any;
+                danger: any;
+                dangerMid: any;
+                dangerDark: any;
+                warningLight: any;
+                warning: any;
+                warningMid: any;
+                warningDark: any;
+                warningText: any;
+                subjectEnglish: any;
+                subjectMaths: any;
+                subjectScience: any;
+                subjectVerbalReasoning: any;
+                subjectNonVerbalReasoning: any;
+                subjectCreativeWriting: any;
+                subjectExamSkills: any;
+                glBlueLight: any;
+                glBluePrimary: any;
+                glBlueDark: any;
+                primary100: any;
+                primary200: any;
+                primary300: any;
+                primary400: any;
+                primary500: any;
+                primary600: any;
+                primary700: any;
+                primary800: any;
+                primary900: any;
+                primary1000: any;
+                primary1100: any;
+                primary1200: any;
+            };
+            space: {
+                "0": any;
+                "1": any;
+                "2": any;
+                "3": any;
+                "4": any;
+                "5": any;
+                "6": any;
+                "7": any;
+                "8": any;
+                "9": any;
+                "24": any;
+            };
+            fontSizes: {
+                xs: any;
+                sm: any;
+                md: any;
+                lg: any;
+                xl: any;
+                "2xl": any;
+                "3xl": any;
+                "4xl": any;
+            };
+            fonts: {
+                sans: any;
+                mono: any;
+                display: any;
+                body: any;
+            };
+            sizes: {
+                "0": any;
+                "1": any;
+                "2": any;
+                "3": any;
+                "4": any;
+                "5": any;
+                "6": any;
+                "7": any;
+                "8": any;
+            };
+            radii: {
+                "0": any;
+                "1": any;
+                "2": any;
+                "3": any;
+                round: any;
+            };
+            shadows: {
+                "0": any;
+                "1": any;
+                "2": any;
+                "3": any;
+            };
+            ratios: {
+                "16-9": any;
+                "3-2": any;
+                "4-3": any;
+                "1-1": any;
+                "3-4": any;
+            };
+        }, import("@stitches/react/types/config").DefaultThemeMap, {
+            bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
+                background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
+            };
+            size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">) => {
+                height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+                width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+            };
+            p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            };
+            pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            };
+            pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            };
+            pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            };
+            pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            };
+            px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+                paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            };
+            py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+                paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            };
+            m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            };
+            mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            };
+            mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            };
+            mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            };
+            ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            };
+            mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+                marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            };
+            my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+                marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            };
+        }> | undefined;
+    } & {
+        colorScheme?: TcolorScheme | undefined;
+    }): JSX.Element;
+    displayName: string;
+};
 export {};

package/dist/components/tabs/TabsTriggerList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTriggerList.js","sources":["../../../src/components/tabs/TabsTriggerList.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport { List } from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useScrollPosition } from '~/utilities/hooks/useScrollPosition'\nimport { useSize } from '~/utilities/hooks/useSize'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\n\nconst StyledContainer = styled(ColorScheme, {\n  position: 'relative',\n  borderBottom: '1px solid $base4',\n  width: '100%'\n})\n\nconst StyledTriggerList = styled(List, {\n  flexShrink: 0,\n  display: 'flex',\n  width: '100%',\n  overflowX: 'auto',\n  '&::-webkit-scrollbar': { display: 'none' },\n  scrollbarWidth: 'none'\n})\n\nconst StyledChevronActionIcon = styled(ActionIcon, {\n  height: '100% !important',\n  position: 'absolute',\n  top: '50%',\n  transform: 'translateY(-50%)',\n  cursor: 'pointer',\n  background: '$base1 !important',\n  color: '$interactive1 !important',\n  borderRadius: 0,\n  opacity: 0.9\n})\n\nconst SCROLL_STEP = 0.8 // Used to scroll 80% of clientWidth\n\nexport const TabsTriggerList: React.FC<\n  React.ComponentProps<typeof StyledTriggerList> & {\n    colorScheme?: TcolorScheme\n  }\n> = ({ children, colorScheme = {}, ...rest }) => {\n  const [listRef, setListRefCallback] = useCallbackRefState()\n\n  const { width } = useSize({ element: listRef, delay: 500 })\n  const { left } = useScrollPosition({\n    element: listRef,\n    delay: 100,\n    delayMethod: 'debounce'\n  })\n\n  const canScrollXAxis = React.useMemo(() => {\n    if (!listRef) return false\n    return listRef.scrollWidth > listRef.clientWidth\n  }, [width, listRef])\n\n  const canScrollLeft = React.useMemo(() => {\n    if (!canScrollXAxis) return false\n    return left > 0\n  }, [left, canScrollXAxis])\n\n  const canScrollRight = React.useMemo(() => {\n    if (!listRef || !canScrollXAxis) return false\n    return listRef.scrollWidth - left - listRef.clientWidth > 1 // 1 rather than 0 to account for sub-pixel widths and calculations\n  }, [listRef, left, canScrollXAxis])\n\n  const scrollList = React.useCallback(\n    (stepModifier) => {\n      if (!listRef) return\n      listRef.scroll({\n        left: listRef.scrollLeft + listRef.clientWidth * stepModifier,\n        behavior: 'smooth'\n      })\n    },\n    [listRef]\n  )\n\n  return (\n    <StyledContainer\n      base=\"grey1\"\n      accent=\"primary1\"\n      interactive=\"hiContrast\"\n      {...colorScheme}\n      {...rest}\n    >\n      <StyledTriggerList ref={setListRefCallback}>{children}</StyledTriggerList>\n\n      {canScrollLeft && (\n        <StyledChevronActionIcon\n          label=\"scroll left\"\n          size=\"md\"\n          css={{\n            left: 0\n          }}\n          onClick={() => scrollList(-SCROLL_STEP)}\n          tabIndex={-1}\n        >\n          <Icon is={ChevronLeft} />\n        </StyledChevronActionIcon>\n      )}\n\n      {canScrollRight && (\n        <StyledChevronActionIcon\n          label=\"scroll right\"\n          size=\"md\"\n          css={{\n            right: 0\n          }}\n          onClick={() => scrollList(SCROLL_STEP)}\n          tabIndex={-1}\n        >\n          <Icon is={ChevronRight} />\n        </StyledChevronActionIcon>\n      )}\n    </StyledContainer>\n  )\n}\n\nTabsTriggerList.displayName = 'TabsTriggerList'\n"],"names":["StyledContainer","styled","ColorScheme","StyledTriggerList","List","StyledChevronActionIcon","ActionIcon","SCROLL_STEP","TabsTriggerList","children","colorScheme","rest","listRef","setListRefCallback","useCallbackRefState","width","useSize","left","useScrollPosition","canScrollXAxis","React","canScrollLeft","canScrollRight","scrollList","stepModifier","Icon","ChevronLeft","ChevronRight"],"mappings":"sjBAaA,MAAMA,EAAkBC,EAAOC,EAAa,CAC1C,SAAU,WACV,aAAc,mBACd,MAAO,MACT,CAAC,EAEKC,EAAoBF,EAAOG,EAAM,CACrC,WAAY,EACZ,QAAS,OACT,MAAO,OACP,UAAW,OACX,uBAAwB,CAAE,QAAS,MAAO,EAC1C,eAAgB,MAClB,CAAC,EAEKC,EAA0BJ,EAAOK,EAAY,CACjD,OAAQ,kBACR,SAAU,WACV,IAAK,MACL,UAAW,mBACX,OAAQ,UACR,WAAY,oBACZ,MAAO,2BACP,aAAc,EACd,QAAS,EACX,CAAC,EAEKC,EAAc,GAEPC,EAIT,CAAC,CAAE,SAAAC,EAAU,YAAAC,EAAc,CAAA,KAAOC,CAAK,IAAM,CAC/C,KAAM,CAACC,EAASC,CAAkB,EAAIC,IAEhC,CAAE,MAAAC,CAAM,EAAIC,EAAQ,CAAE,QAASJ,EAAS,MAAO,GAAI,CAAC,EACpD,CAAE,KAAAK,CAAK,EAAIC,EAAkB,CACjC,QAASN,EACT,MAAO,IACP,YAAa,UACf,CAAC,EAEKO,EAAiBC,EAAM,QAAQ,IAC9BR,EACEA,EAAQ,YAAcA,EAAQ,YADhB,GAEpB,CAACG,EAAOH,CAAO,CAAC,EAEbS,EAAgBD,EAAM,QAAQ,IAC7BD,EACEF,EAAO,EADc,GAE3B,CAACA,EAAME,CAAc,CAAC,EAEnBG,EAAiBF,EAAM,QAAQ,IAC/B,CAACR,GAAW,CAACO,EAAuB,GACjCP,EAAQ,YAAcK,EAAOL,EAAQ,YAAc,EACzD,CAACA,EAASK,EAAME,CAAc,CAAC,EAE5BI,EAAaH,EAAM,YACtBI,GAAiB,CACZ,CAACZ,GACLA,EAAQ,OAAO,CACb,KAAMA,EAAQ,WAAaA,EAAQ,YAAcY,EACjD,SAAU,QACZ,CAAC,CACH,EACA,CAACZ,CAAO,CACV,EAEA,OACEQ,EAAA,cAACpB,EAAA,CACC,KAAK,QACL,OAAO,WACP,YAAY,aACX,GAAGU,EACH,GAAGC,CAAAA,EAEJS,EAAA,cAACjB,EAAA,CAAkB,IAAKU,GAAqBJ,CAAS,EAErDY,GACCD,EAAA,cAACf,EAAA,CACC,MAAM,cACN,KAAK,KACL,IAAK,CACH,KAAM,CACR,EACA,QAAS,IAAMkB,EAAW,CAAChB,CAAW,EACtC,SAAU,EAAA,EAEVa,EAAA,cAACK,EAAA,CAAK,GAAIC,CAAa,CAAA,CACzB,EAGDJ,GACCF,EAAA,cAACf,EAAA,CACC,MAAM,eACN,KAAK,KACL,IAAK,CACH,MAAO,CACT,EACA,QAAS,IAAMkB,EAAWhB,CAAW,EACrC,SAAU,EAAA,EAEVa,EAAA,cAACK,EAAA,CAAK,GAAIE,EAAc,CAC1B,CAEJ,CAEJ,EAEAnB,EAAgB,YAAc"}
+{"version":3,"file":"TabsTriggerList.js","sources":["../../../src/components/tabs/TabsTriggerList.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport { List } from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useScrollPosition } from '~/utilities/hooks/useScrollPosition'\nimport { useSize } from '~/utilities/hooks/useSize'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\n\nconst StyledContainer = styled(ColorScheme, {\n  position: 'relative',\n  borderBottom: '1px solid $base4',\n  width: '100%'\n})\n\nconst StyledTriggerList = styled(List, {\n  flexShrink: 0,\n  display: 'flex',\n  width: '100%',\n  overflowX: 'auto',\n  '&::-webkit-scrollbar': { display: 'none' },\n  scrollbarWidth: 'none'\n})\n\nconst StyledChevronActionIcon = styled(ActionIcon, {\n  height: '100% !important',\n  position: 'absolute',\n  top: '50%',\n  transform: 'translateY(-50%)',\n  cursor: 'pointer',\n  background: '$base1 !important',\n  color: '$interactive1 !important',\n  borderRadius: 0,\n  opacity: 0.9\n})\n\nconst SCROLL_STEP = 0.8 // Used to scroll 80% of clientWidth\n\nexport const TabsTriggerList = ({\n  children,\n  colorScheme = {},\n  ...rest\n}: React.ComponentProps<typeof StyledTriggerList> & {\n  colorScheme?: TcolorScheme\n}) => {\n  const [listRef, setListRefCallback] = useCallbackRefState()\n\n  const { width } = useSize({ element: listRef, delay: 500 })\n  const { left } = useScrollPosition({\n    element: listRef,\n    delay: 100,\n    delayMethod: 'debounce'\n  })\n\n  const canScrollXAxis = React.useMemo(() => {\n    if (!listRef) return false\n    return listRef.scrollWidth > listRef.clientWidth\n  }, [width, listRef])\n\n  const canScrollLeft = React.useMemo(() => {\n    if (!canScrollXAxis) return false\n    return left > 0\n  }, [left, canScrollXAxis])\n\n  const canScrollRight = React.useMemo(() => {\n    if (!listRef || !canScrollXAxis) return false\n    return listRef.scrollWidth - left - listRef.clientWidth > 1 // 1 rather than 0 to account for sub-pixel widths and calculations\n  }, [listRef, left, canScrollXAxis])\n\n  const scrollList = React.useCallback(\n    (stepModifier) => {\n      if (!listRef) return\n      listRef.scroll({\n        left: listRef.scrollLeft + listRef.clientWidth * stepModifier,\n        behavior: 'smooth'\n      })\n    },\n    [listRef]\n  )\n\n  return (\n    <StyledContainer\n      base=\"grey1\"\n      accent=\"primary1\"\n      interactive=\"hiContrast\"\n      {...colorScheme}\n      {...rest}\n    >\n      <StyledTriggerList ref={setListRefCallback}>{children}</StyledTriggerList>\n\n      {canScrollLeft && (\n        <StyledChevronActionIcon\n          label=\"scroll left\"\n          size=\"md\"\n          css={{\n            left: 0\n          }}\n          onClick={() => scrollList(-SCROLL_STEP)}\n          tabIndex={-1}\n        >\n          <Icon is={ChevronLeft} />\n        </StyledChevronActionIcon>\n      )}\n\n      {canScrollRight && (\n        <StyledChevronActionIcon\n          label=\"scroll right\"\n          size=\"md\"\n          css={{\n            right: 0\n          }}\n          onClick={() => scrollList(SCROLL_STEP)}\n          tabIndex={-1}\n        >\n          <Icon is={ChevronRight} />\n        </StyledChevronActionIcon>\n      )}\n    </StyledContainer>\n  )\n}\n\nTabsTriggerList.displayName = 'TabsTriggerList'\n"],"names":["StyledContainer","styled","ColorScheme","StyledTriggerList","List","StyledChevronActionIcon","ActionIcon","SCROLL_STEP","TabsTriggerList","children","colorScheme","rest","listRef","setListRefCallback","useCallbackRefState","width","useSize","left","useScrollPosition","canScrollXAxis","React","canScrollLeft","canScrollRight","scrollList","stepModifier","Icon","ChevronLeft","ChevronRight"],"mappings":"sjBAaA,MAAMA,EAAkBC,EAAOC,EAAa,CAC1C,SAAU,WACV,aAAc,mBACd,MAAO,MACT,CAAC,EAEKC,EAAoBF,EAAOG,EAAM,CACrC,WAAY,EACZ,QAAS,OACT,MAAO,OACP,UAAW,OACX,uBAAwB,CAAE,QAAS,MAAO,EAC1C,eAAgB,MAClB,CAAC,EAEKC,EAA0BJ,EAAOK,EAAY,CACjD,OAAQ,kBACR,SAAU,WACV,IAAK,MACL,UAAW,mBACX,OAAQ,UACR,WAAY,oBACZ,MAAO,2BACP,aAAc,EACd,QAAS,EACX,CAAC,EAEKC,EAAc,GAEPC,EAAkB,CAAC,CAC9B,SAAAC,EACA,YAAAC,EAAc,CAAA,KACXC,CACL,IAEM,CACJ,KAAM,CAACC,EAASC,CAAkB,EAAIC,IAEhC,CAAE,MAAAC,CAAM,EAAIC,EAAQ,CAAE,QAASJ,EAAS,MAAO,GAAI,CAAC,EACpD,CAAE,KAAAK,CAAK,EAAIC,EAAkB,CACjC,QAASN,EACT,MAAO,IACP,YAAa,UACf,CAAC,EAEKO,EAAiBC,EAAM,QAAQ,IAC9BR,EACEA,EAAQ,YAAcA,EAAQ,YADhB,GAEpB,CAACG,EAAOH,CAAO,CAAC,EAEbS,EAAgBD,EAAM,QAAQ,IAC7BD,EACEF,EAAO,EADc,GAE3B,CAACA,EAAME,CAAc,CAAC,EAEnBG,EAAiBF,EAAM,QAAQ,IAC/B,CAACR,GAAW,CAACO,EAAuB,GACjCP,EAAQ,YAAcK,EAAOL,EAAQ,YAAc,EACzD,CAACA,EAASK,EAAME,CAAc,CAAC,EAE5BI,EAAaH,EAAM,YACtBI,GAAiB,CACZ,CAACZ,GACLA,EAAQ,OAAO,CACb,KAAMA,EAAQ,WAAaA,EAAQ,YAAcY,EACjD,SAAU,QACZ,CAAC,CACH,EACA,CAACZ,CAAO,CACV,EAEA,OACEQ,EAAA,cAACpB,EAAA,CACC,KAAK,QACL,OAAO,WACP,YAAY,aACX,GAAGU,EACH,GAAGC,CAAAA,EAEJS,EAAA,cAACjB,EAAA,CAAkB,IAAKU,GAAqBJ,CAAS,EAErDY,GACCD,EAAA,cAACf,EAAA,CACC,MAAM,cACN,KAAK,KACL,IAAK,CACH,KAAM,CACR,EACA,QAAS,IAAMkB,EAAW,CAAChB,CAAW,EACtC,SAAU,EAAA,EAEVa,EAAA,cAACK,EAAA,CAAK,GAAIC,CAAa,CAAA,CACzB,EAGDJ,GACCF,EAAA,cAACf,EAAA,CACC,MAAM,eACN,KAAK,KACL,IAAK,CACH,MAAO,CACT,EACA,QAAS,IAAMkB,EAAWhB,CAAW,EACrC,SAAU,EAAA,EAEVa,EAAA,cAACK,EAAA,CAAK,GAAIE,EAAc,CAC1B,CAEJ,CAEJ,EAEAnB,EAAgB,YAAc"}

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

@@ -333,5 +333,5 @@ declare const StyledTextarea: import("@stitches/react/types/styled-component").S
     };
 }>>;
 export declare type TextareaProps = React.ComponentProps<typeof StyledTextarea>;
-export declare const Textarea: React.FC<TextareaProps>;
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps>;
 export {};

package/dist/components/textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nconst StyledTextarea = styled('textarea', {\n  boxShadow: 'none', // remove iOS default styling\n  fontSize: '$md', // prevent iOS zooming on focus\n  appearance: 'none',\n  border: '1px solid $tonal400',\n  borderRadius: '$0',\n  boxSizing: 'border-box',\n  color: '$tonal600',\n  fontFamily: '$body',\n  fontWeight: 400,\n  lineHeight: 1.4,\n  minHeight: '$7',\n  px: '$3',\n  py: 'calc($2 + $1)', // offset the line height of the text\n  resize: 'vertical',\n  transition: 'all 75ms ease-out',\n  width: '100%',\n  '&:focus': {\n    borderColor: '$primary800',\n    outline: 'none'\n  },\n  '&[disabled]': {\n    backgroundColor: '$tonal100',\n    color: '$tonal400',\n    cursor: 'not-allowed'\n  },\n  '&::placeholder': {\n    color: '$tonal300',\n    opacity: 1\n  },\n  variants: {\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea: React.FC<TextareaProps> = React.forwardRef(\n  (props, ref) => <StyledTextarea {...props} ref={ref} />\n)\n\nTextarea.displayName = 'Textarea'\n"],"names":["StyledTextarea","styled","Textarea","React","props","ref"],"mappings":"mEAIA,MAAMA,EAAiBC,EAAO,WAAY,CACxC,UAAW,OACX,SAAU,MACV,WAAY,OACZ,OAAQ,sBACR,aAAc,KACd,UAAW,aACX,MAAO,YACP,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,UAAW,KACX,GAAI,KACJ,GAAI,gBACJ,OAAQ,WACR,WAAY,oBACZ,MAAO,OACP,UAAW,CACT,YAAa,cACb,QAAS,MACX,EACA,cAAe,CACb,gBAAiB,YACjB,MAAO,YACP,OAAQ,aACV,EACA,iBAAkB,CAChB,MAAO,YACP,QAAS,CACX,EACA,SAAU,CACR,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAIYC,EAAoCC,EAAM,WACrD,CAACC,EAAOC,IAAQF,EAAA,cAACH,EAAA,CAAgB,GAAGI,EAAO,IAAKC,CAAK,CAAA,CACvD,EAEAH,EAAS,YAAc"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nconst StyledTextarea = styled('textarea', {\n  boxShadow: 'none', // remove iOS default styling\n  fontSize: '$md', // prevent iOS zooming on focus\n  appearance: 'none',\n  border: '1px solid $tonal400',\n  borderRadius: '$0',\n  boxSizing: 'border-box',\n  color: '$tonal600',\n  fontFamily: '$body',\n  fontWeight: 400,\n  lineHeight: 1.4,\n  minHeight: '$7',\n  px: '$3',\n  py: 'calc($2 + $1)', // offset the line height of the text\n  resize: 'vertical',\n  transition: 'all 75ms ease-out',\n  width: '100%',\n  '&:focus': {\n    borderColor: '$primary800',\n    outline: 'none'\n  },\n  '&[disabled]': {\n    backgroundColor: '$tonal100',\n    color: '$tonal400',\n    cursor: 'not-allowed'\n  },\n  '&::placeholder': {\n    color: '$tonal300',\n    opacity: 1\n  },\n  variants: {\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea: React.ForwardRefExoticComponent<TextareaProps> =\n  React.forwardRef((props, ref) => <StyledTextarea {...props} ref={ref} />)\n\nTextarea.displayName = 'Textarea'\n"],"names":["StyledTextarea","styled","Textarea","React","props","ref"],"mappings":"mEAIA,MAAMA,EAAiBC,EAAO,WAAY,CACxC,UAAW,OACX,SAAU,MACV,WAAY,OACZ,OAAQ,sBACR,aAAc,KACd,UAAW,aACX,MAAO,YACP,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,UAAW,KACX,GAAI,KACJ,GAAI,gBACJ,OAAQ,WACR,WAAY,oBACZ,MAAO,OACP,UAAW,CACT,YAAa,cACb,QAAS,MACX,EACA,cAAe,CACb,gBAAiB,YACjB,MAAO,YACP,OAAQ,aACV,EACA,iBAAkB,CAChB,MAAO,YACP,QAAS,CACX,EACA,SAAU,CACR,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAIYC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAQF,EAAA,cAACH,EAAA,CAAgB,GAAGI,EAAO,IAAKC,CAAK,CAAA,CAAE,EAE1EH,EAAS,YAAc"}

package/dist/components/textarea-field/TextareaField.d.ts

@@ -1,6 +1,9 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { FieldElementWrapperProps } from '../../components/field-wrapper';
 import { TextareaProps } from '../../components/textarea';
 declare type TextareaFieldProps = TextareaProps & FieldElementWrapperProps;
-export declare const TextareaField: React.FC<TextareaFieldProps>;
+export declare const TextareaField: {
+    ({ css, hideLabel, label, name, validation, prompt, description, ...remainingProps }: TextareaFieldProps): JSX.Element;
+    displayName: string;
+};
 export {};

package/dist/components/textarea-field/TextareaField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaField.js","sources":["../../../src/components/textarea-field/TextareaField.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 { Textarea, TextareaProps } from '~/components/textarea'\n\ntype TextareaFieldProps = TextareaProps & FieldElementWrapperProps\n\nexport const TextareaField: React.FC<TextareaFieldProps> = ({\n  css = undefined,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  ...remainingProps\n}) => {\n  const { register } = useFormContext()\n  const { error } = useFieldError(name)\n\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      <Textarea\n        id={name}\n        name={name}\n        ref={ref}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nTextareaField.displayName = 'TextareaField'\n"],"names":["TextareaField","css","hideLabel","label","name","validation","prompt","description","remainingProps","register","useFormContext","error","useFieldError","ref","React","FieldWrapper","Textarea"],"mappings":"4TAYO,MAAMA,EAA8C,CAAC,CAC1D,IAAAC,EAAM,OACN,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,KACGC,CACL,IAAM,CACJ,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9B,CAAE,MAAAC,CAAM,EAAIC,EAAcR,CAAI,EAE9BS,EAAMR,EAAaI,EAASJ,CAAU,EAAII,EAEhD,OACEK,EAAA,cAACC,EAAA,CACC,IAAKd,EACL,YAAaM,EACb,MAAOI,EACP,QAASP,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,YAAAA,EAAY,QAAQ,CAEtCS,EAAAA,EAAA,cAACE,EAAA,CACC,GAAIZ,EACJ,KAAMA,EACN,IAAKS,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGH,EACN,CACF,CAEJ,EAEAR,EAAc,YAAc"}
+{"version":3,"file":"TextareaField.js","sources":["../../../src/components/textarea-field/TextareaField.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 { Textarea, TextareaProps } from '~/components/textarea'\n\ntype TextareaFieldProps = TextareaProps & FieldElementWrapperProps\n\nexport const TextareaField = ({\n  css = undefined,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  ...remainingProps\n}: TextareaFieldProps) => {\n  const { register } = useFormContext()\n  const { error } = useFieldError(name)\n\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      <Textarea\n        id={name}\n        name={name}\n        ref={ref}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nTextareaField.displayName = 'TextareaField'\n"],"names":["TextareaField","css","hideLabel","label","name","validation","prompt","description","remainingProps","register","useFormContext","error","useFieldError","ref","React","FieldWrapper","Textarea"],"mappings":"4TAYO,MAAMA,EAAgB,CAAC,CAC5B,IAAAC,EAAM,OACN,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,KACGC,CACL,IAA0B,CACxB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9B,CAAE,MAAAC,CAAM,EAAIC,EAAcR,CAAI,EAE9BS,EAAMR,EAAaI,EAASJ,CAAU,EAAII,EAEhD,OACEK,EAAA,cAACC,EAAA,CACC,IAAKd,EACL,YAAaM,EACb,MAAOI,EACP,QAASP,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,YAAAA,EAAY,QAAQ,CAEtCS,EAAAA,EAAA,cAACE,EAAA,CACC,GAAIZ,EACJ,KAAMA,EACN,IAAKS,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGH,EACN,CACF,CAEJ,EAEAR,EAAc,YAAc"}

package/dist/components/tile/Tile.d.ts

@@ -337,5 +337,5 @@ export declare const StyledTile: import("@stitches/react/types/styled-component"
 declare type TTileProps = React.ComponentProps<typeof StyledTile> & {
     colorScheme?: TcolorScheme;
 };
-export declare const Tile: React.ForwardRefExoticComponent<Pick<TTileProps, "colorScheme" | "border" | "borderRadius" | "css" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export declare const Tile: React.ForwardRefExoticComponent<TTileProps>;
 export {};

package/dist/components/tile/Tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.js","sources":["../../../src/components/tile/Tile.tsx"],"sourcesContent":["import React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\n\nexport const StyledTile = styled('div', {\n  all: 'unset', // important for buttons etc\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexDirection: 'column',\n  position: 'relative', // for pseudo-elements\n  border: '1px solid',\n  bg: '$base1',\n  color: '$foreground',\n  borderColor: 'transparent',\n  variants: {\n    borderRadius: {\n      sm: { borderRadius: '$0' },\n      md: { borderRadius: '$1' },\n      lg: { borderRadius: '$3' }\n    },\n    border: {\n      true: { borderColor: '$base3' }\n    }\n  }\n})\n\ntype TTileProps = React.ComponentProps<typeof StyledTile> & {\n  colorScheme?: TcolorScheme\n}\n\nexport const Tile = React.forwardRef<HTMLDivElement, TTileProps>(\n  ({ children, colorScheme = {}, ...rest }, ref) => (\n    <ColorScheme\n      asChild\n      base=\"grey1\"\n      accent=\"primary2\"\n      interactive=\"loContrast\"\n      {...colorScheme}\n    >\n      <StyledTile ref={ref} {...rest}>\n        {children}\n      </StyledTile>\n    </ColorScheme>\n  )\n)\n\nTile.displayName = 'Tile'\n"],"names":["StyledTile","styled","Tile","React","children","colorScheme","rest","ref","ColorScheme"],"mappings":"4IAKO,MAAMA,EAAaC,EAAO,MAAO,CACtC,IAAK,QACL,UAAW,aACX,QAAS,OACT,cAAe,SACf,SAAU,WACV,OAAQ,YACR,GAAI,SACJ,MAAO,cACP,YAAa,cACb,SAAU,CACR,aAAc,CACZ,GAAI,CAAE,aAAc,IAAK,EACzB,GAAI,CAAE,aAAc,IAAK,EACzB,GAAI,CAAE,aAAc,IAAK,CAC3B,EACA,OAAQ,CACN,KAAM,CAAE,YAAa,QAAS,CAChC,CACF,CACF,CAAC,EAMYC,EAAOC,EAAM,WACxB,CAAC,CAAE,SAAAC,EAAU,YAAAC,EAAc,MAAOC,CAAK,EAAGC,IACxCJ,EAAA,cAACK,EAAA,CACC,QAAO,GACP,KAAK,QACL,OAAO,WACP,YAAY,aACX,GAAGH,CAAAA,EAEJF,EAAA,cAACH,EAAA,CAAW,IAAKO,EAAM,GAAGD,CAAAA,EACvBF,CACH,CACF,CAEJ,EAEAF,EAAK,YAAc"}
+{"version":3,"file":"Tile.js","sources":["../../../src/components/tile/Tile.tsx"],"sourcesContent":["import React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\n\nexport const StyledTile = styled('div', {\n  all: 'unset', // important for buttons etc\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexDirection: 'column',\n  position: 'relative', // for pseudo-elements\n  border: '1px solid',\n  bg: '$base1',\n  color: '$foreground',\n  borderColor: 'transparent',\n  variants: {\n    borderRadius: {\n      sm: { borderRadius: '$0' },\n      md: { borderRadius: '$1' },\n      lg: { borderRadius: '$3' }\n    },\n    border: {\n      true: { borderColor: '$base3' }\n    }\n  }\n})\n\ntype TTileProps = React.ComponentProps<typeof StyledTile> & {\n  colorScheme?: TcolorScheme\n}\n\nexport const Tile: React.ForwardRefExoticComponent<TTileProps> =\n  React.forwardRef(({ children, colorScheme = {}, ...rest }, ref) => (\n    <ColorScheme\n      asChild\n      base=\"grey1\"\n      accent=\"primary2\"\n      interactive=\"loContrast\"\n      {...colorScheme}\n    >\n      <StyledTile ref={ref} {...rest}>\n        {children}\n      </StyledTile>\n    </ColorScheme>\n  ))\n\nTile.displayName = 'Tile'\n"],"names":["StyledTile","styled","Tile","React","children","colorScheme","rest","ref","ColorScheme"],"mappings":"4IAKO,MAAMA,EAAaC,EAAO,MAAO,CACtC,IAAK,QACL,UAAW,aACX,QAAS,OACT,cAAe,SACf,SAAU,WACV,OAAQ,YACR,GAAI,SACJ,MAAO,cACP,YAAa,cACb,SAAU,CACR,aAAc,CACZ,GAAI,CAAE,aAAc,IAAK,EACzB,GAAI,CAAE,aAAc,IAAK,EACzB,GAAI,CAAE,aAAc,IAAK,CAC3B,EACA,OAAQ,CACN,KAAM,CAAE,YAAa,QAAS,CAChC,CACF,CACF,CAAC,EAMYC,EACXC,EAAM,WAAW,CAAC,CAAE,SAAAC,EAAU,YAAAC,EAAc,MAAOC,CAAK,EAAGC,IACzDJ,EAAA,cAACK,EAAA,CACC,QAAO,GACP,KAAK,QACL,OAAO,WACP,YAAY,aACX,GAAGH,CAAAA,EAEJF,EAAA,cAACH,EAAA,CAAW,IAAKO,EAAM,GAAGD,CAAAA,EACvBF,CACH,CACF,CACD,EAEHF,EAAK,YAAc"}

package/dist/components/tile-interactive/TileInteractive.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NavigatorActions } from '../../types';
-declare const StyledTileInteractive: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+declare const StyledTileInteractive: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, "border" | "borderRadius" | "css"> & import("@stitches/react/types/styled-component").TransformProps<{
     borderRadius?: "sm" | "md" | "lg" | undefined;
@@ -339,7 +339,7 @@ declare const StyledTileInteractive: import("@stitches/react/types/styled-compon
     }> | undefined;
 } & {
     colorScheme?: import("../..").TcolorScheme | undefined;
-}, "colorScheme" | "border" | "borderRadius" | "css" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>, {}, {
+}>, {}, {
     sm: string;
     md: string;
     lg: string;
@@ -671,5 +671,5 @@ declare const StyledTileInteractive: import("@stitches/react/types/styled-compon
     };
 }>>;
 declare type TTileInteractiveProps = React.ComponentProps<typeof StyledTileInteractive> & React.ButtonHTMLAttributes<HTMLButtonElement> & NavigatorActions;
-export declare const TileInteractive: React.ForwardRefExoticComponent<Pick<TTileInteractiveProps, "color" | "colorScheme" | "translate" | "border" | "borderRadius" | "css" | "onBlur" | "onChange" | "onSubmit" | "form" | "slot" | "style" | "title" | "key" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "value" | "type" | "href" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const TileInteractive: React.ForwardRefExoticComponent<TTileInteractiveProps>;
 export {};

package/dist/components/tile-interactive/TileInteractive.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileInteractive.js","sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tile } from '~/components/tile'\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nconst StyledTileInteractive = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Tile, {\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([disabled])': {\n    cursor: 'pointer',\n    transform: 'translateY(0)',\n    transition: 'transform 250ms ease',\n    '&::after': {\n      content: '',\n      position: 'absolute',\n      inset: 0,\n      boxShadow: '$2',\n      opacity: 0,\n      transition: 'opacity 250ms ease-out',\n      borderRadius: 'inherit',\n      pointerEvents: 'none'\n    },\n    '&:hover': {\n      transform: 'translateY(-$space$0)',\n      '&::after': {\n        opacity: 1\n      }\n    },\n    '&:active': {\n      bg: '$base2'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  }\n})\n\ntype TTileInteractiveProps = React.ComponentProps<\n  typeof StyledTileInteractive\n> &\n  React.ButtonHTMLAttributes<HTMLButtonElement> &\n  NavigatorActions\n\nexport const TileInteractive = React.forwardRef<\n  HTMLButtonElement,\n  TTileInteractiveProps\n>(({ onClick, href, type = 'button', ...rest }, ref) => {\n  const isLink = !!href\n  const elementSpecificProps = isLink\n    ? {\n        as: 'a' as React.ElementType,\n        href,\n        onClick: undefined\n      }\n    : { as: 'button' as React.ElementType, type, onClick }\n\n  return <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n})\n\nTileInteractive.displayName = 'TileInteractive'\n"],"names":["StyledTileInteractive","styled","propName","Tile","focusVisibleStyleBlock","TileInteractive","React","onClick","href","type","rest","ref"],"mappings":"mZAOA,MAAMA,EAAwBC,EAAO,WAAW,CAC9C,0BAA4BC,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,oBAAqB,CACnB,OAAQ,UACR,UAAW,gBACX,WAAY,uBACZ,WAAY,CACV,QAAS,GACT,SAAU,WACV,MAAO,EACP,UAAW,KACX,QAAS,EACT,WAAY,yBACZ,aAAc,UACd,cAAe,MACjB,EACA,UAAW,CACT,UAAW,wBACX,WAAY,CACV,QAAS,CACX,CACF,EACA,WAAY,CACV,GAAI,QACN,EACA,kBAAmB,CACjB,GAAGC,EACL,CAAA,CACF,CACF,CAAC,EAQYC,EAAkBC,EAAM,WAGnC,CAAC,CAAE,QAAAC,EAAS,KAAAC,EAAM,KAAAC,EAAO,YAAaC,CAAK,EAAGC,IAUvCL,EAAA,cAACN,EAAA,CAAuB,GAAGU,EAAO,GATxBF,EAEb,CACE,GAAI,IACJ,KAAAA,EACA,QAAS,MACX,EACA,CAAE,GAAI,SAA+B,KAAAC,EAAM,QAAAF,CAAQ,EAEW,IAAKI,CAAAA,CAAK,CAC7E,EAEDN,EAAgB,YAAc"}
+{"version":3,"file":"TileInteractive.js","sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tile } from '~/components/tile'\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nconst StyledTileInteractive = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Tile, {\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([disabled])': {\n    cursor: 'pointer',\n    transform: 'translateY(0)',\n    transition: 'transform 250ms ease',\n    '&::after': {\n      content: '',\n      position: 'absolute',\n      inset: 0,\n      boxShadow: '$2',\n      opacity: 0,\n      transition: 'opacity 250ms ease-out',\n      borderRadius: 'inherit',\n      pointerEvents: 'none'\n    },\n    '&:hover': {\n      transform: 'translateY(-$space$0)',\n      '&::after': {\n        opacity: 1\n      }\n    },\n    '&:active': {\n      bg: '$base2'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  }\n})\n\ntype TTileInteractiveProps = React.ComponentProps<\n  typeof StyledTileInteractive\n> &\n  React.ButtonHTMLAttributes<HTMLButtonElement> &\n  NavigatorActions\n\nexport const TileInteractive: React.ForwardRefExoticComponent<TTileInteractiveProps> =\n  React.forwardRef(({ onClick, href, type = 'button', ...rest }, ref) => {\n    const isLink = !!href\n    const elementSpecificProps = isLink\n      ? {\n          as: 'a' as React.ElementType,\n          href,\n          onClick: undefined\n        }\n      : { as: 'button' as React.ElementType, type, onClick }\n\n    return (\n      <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n    )\n  })\n\nTileInteractive.displayName = 'TileInteractive'\n"],"names":["StyledTileInteractive","styled","propName","Tile","focusVisibleStyleBlock","TileInteractive","React","onClick","href","type","rest","ref"],"mappings":"mZAOA,MAAMA,EAAwBC,EAAO,WAAW,CAC9C,0BAA4BC,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,oBAAqB,CACnB,OAAQ,UACR,UAAW,gBACX,WAAY,uBACZ,WAAY,CACV,QAAS,GACT,SAAU,WACV,MAAO,EACP,UAAW,KACX,QAAS,EACT,WAAY,yBACZ,aAAc,UACd,cAAe,MACjB,EACA,UAAW,CACT,UAAW,wBACX,WAAY,CACV,QAAS,CACX,CACF,EACA,WAAY,CACV,GAAI,QACN,EACA,kBAAmB,CACjB,GAAGC,EACL,CAAA,CACF,CACF,CAAC,EAQYC,EACXC,EAAM,WAAW,CAAC,CAAE,QAAAC,EAAS,KAAAC,EAAM,KAAAC,EAAO,YAAaC,CAAK,EAAGC,IAW3DL,EAAA,cAACN,EAAA,CAAuB,GAAGU,EAAO,GAVnBF,EAEb,CACE,GAAI,IACJ,KAAAA,EACA,QAAS,MACX,EACA,CAAE,GAAI,SAA+B,KAAAC,EAAM,QAAAF,CAAQ,EAGM,IAAKI,CAAAA,CAAK,CAExE,EAEHN,EAAgB,YAAc"}

package/dist/components/tile-toggle-group/TileToggleGroupItem.d.ts

@@ -1,6 +1,6 @@
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import * as React from 'react';
-declare const StyledTileToggleGroupItem: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+declare const StyledTileToggleGroupItem: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, "border" | "borderRadius" | "css"> & import("@stitches/react/types/styled-component").TransformProps<{
     borderRadius?: "sm" | "md" | "lg" | undefined;
@@ -339,7 +339,7 @@ declare const StyledTileToggleGroupItem: import("@stitches/react/types/styled-co
     }> | undefined;
 } & {
     colorScheme?: import("../..").TcolorScheme | undefined;
-}, "colorScheme" | "border" | "borderRadius" | "css" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "css"> & import("@stitches/react/types/styled-component").TransformProps<{}, {
+}, "css"> & import("@stitches/react/types/styled-component").TransformProps<{}, {
     sm: string;
     md: string;
     lg: string;
@@ -671,7 +671,7 @@ declare const StyledTileToggleGroupItem: import("@stitches/react/types/styled-co
             marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
     }> | undefined;
-} & React.ButtonHTMLAttributes<HTMLButtonElement> & import("../../types").NavigatorActions, "color" | "colorScheme" | "translate" | "border" | "borderRadius" | "css" | "onBlur" | "onChange" | "onSubmit" | "form" | "slot" | "style" | "title" | "key" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "value" | "type" | "href" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>, {}, {
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & import("../../types").NavigatorActions>, {}, {
     sm: string;
     md: string;
     lg: string;
@@ -1003,5 +1003,5 @@ declare const StyledTileToggleGroupItem: import("@stitches/react/types/styled-co
     };
 }>>;
 declare type TTileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> & React.ComponentProps<typeof StyledTileToggleGroupItem>;
-export declare const TileToggleGroupItem: React.FC<TTileToggleGroupItem>;
+export declare const TileToggleGroupItem: ({ children, ...rest }: TTileToggleGroupItem) => JSX.Element;
 export {};

package/dist/components/tile-toggle-group/TileToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileToggleGroupItem.js","sources":["../../../src/components/tile-toggle-group/TileToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { TileInteractive } from '~/components/tile-interactive'\nimport { styled } from '~/stitches'\n\nconst StyledTileToggleGroupItem = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(TileInteractive, {\n  '&:not([disabled])': {\n    '&[data-state=\"on\"]': {\n      '&:hover': {\n        bg: '$interactive2'\n      },\n      '&:active': {\n        bg: '$interactive3'\n      }\n    }\n  },\n  '&[data-state=\"on\"]': {\n    bg: '$interactive1',\n    borderColor: '$accent8',\n    '&::before': {\n      content: '',\n      position: 'absolute',\n      inset: -1, // account for 1px Tile border\n      boxShadow: 'inset $colors$accent8 0px 0px 0px 2px',\n      borderRadius: 'inherit',\n      zIndex: 1 // so it's over anything nested which touches sides\n    }\n  }\n})\n\ntype TTileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledTileToggleGroupItem>\n\nexport const TileToggleGroupItem: React.FC<TTileToggleGroupItem> = ({\n  children,\n  ...rest\n}) => {\n  return (\n    <ToggleGroup.Item {...rest} asChild>\n      <StyledTileToggleGroupItem as=\"button\">\n        {children}\n      </StyledTileToggleGroupItem>\n    </ToggleGroup.Item>\n  )\n}\n"],"names":["StyledTileToggleGroupItem","styled","propName","TileInteractive","TileToggleGroupItem","children","rest","React","ToggleGroup"],"mappings":"2LAMA,MAAMA,EAA4BC,EAAO,WAAW,CAClD,0BAA4BC,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAiB,CAClB,oBAAqB,CACnB,qBAAsB,CACpB,UAAW,CACT,GAAI,eACN,EACA,WAAY,CACV,GAAI,eACN,CACF,CACF,EACA,qBAAsB,CACpB,GAAI,gBACJ,YAAa,WACb,YAAa,CACX,QAAS,GACT,SAAU,WACV,MAAO,GACP,UAAW,wCACX,aAAc,UACd,OAAQ,CACV,CACF,CACF,CAAC,EAKYC,EAAsD,CAAC,CAClE,SAAAC,KACGC,CACL,IAEIC,EAAA,cAACC,EAAY,KAAZ,CAAkB,GAAGF,EAAM,QAAO,IACjCC,EAAA,cAACP,EAAA,CAA0B,GAAG,QAC3BK,EAAAA,CACH,CACF"}
+{"version":3,"file":"TileToggleGroupItem.js","sources":["../../../src/components/tile-toggle-group/TileToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { TileInteractive } from '~/components/tile-interactive'\nimport { styled } from '~/stitches'\n\nconst StyledTileToggleGroupItem = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(TileInteractive, {\n  '&:not([disabled])': {\n    '&[data-state=\"on\"]': {\n      '&:hover': {\n        bg: '$interactive2'\n      },\n      '&:active': {\n        bg: '$interactive3'\n      }\n    }\n  },\n  '&[data-state=\"on\"]': {\n    bg: '$interactive1',\n    borderColor: '$accent8',\n    '&::before': {\n      content: '',\n      position: 'absolute',\n      inset: -1, // account for 1px Tile border\n      boxShadow: 'inset $colors$accent8 0px 0px 0px 2px',\n      borderRadius: 'inherit',\n      zIndex: 1 // so it's over anything nested which touches sides\n    }\n  }\n})\n\ntype TTileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledTileToggleGroupItem>\n\nexport const TileToggleGroupItem = ({\n  children,\n  ...rest\n}: TTileToggleGroupItem) => {\n  return (\n    <ToggleGroup.Item {...rest} asChild>\n      <StyledTileToggleGroupItem as=\"button\">\n        {children}\n      </StyledTileToggleGroupItem>\n    </ToggleGroup.Item>\n  )\n}\n"],"names":["StyledTileToggleGroupItem","styled","propName","TileInteractive","TileToggleGroupItem","children","rest","React","ToggleGroup"],"mappings":"2LAMA,MAAMA,EAA4BC,EAAO,WAAW,CAClD,0BAA4BC,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAiB,CAClB,oBAAqB,CACnB,qBAAsB,CACpB,UAAW,CACT,GAAI,eACN,EACA,WAAY,CACV,GAAI,eACN,CACF,CACF,EACA,qBAAsB,CACpB,GAAI,gBACJ,YAAa,WACb,YAAa,CACX,QAAS,GACT,SAAU,WACV,MAAO,GACP,UAAW,wCACX,aAAc,UACd,OAAQ,CACV,CACF,CACF,CAAC,EAKYC,EAAsB,CAAC,CAClC,SAAAC,KACGC,CACL,IAEIC,EAAA,cAACC,EAAY,KAAZ,CAAkB,GAAGF,EAAM,QAAO,IACjCC,EAAA,cAACP,EAAA,CAA0B,GAAG,QAC3BK,EAAAA,CACH,CACF"}