@atom-learning/components 2.51.0 → 2.53.0

package/dist/components/text/Text.js

@@ -1,2 +1,2 @@
-import*as n from"react";import{styled as m}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{capsize as e}from"../../utilities/style/capsize.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const t={size:{xs:{fontSize:"$xs",lineHeight:1.6,...e(.4364)},sm:{fontSize:"$sm",lineHeight:1.53,...e(.4056)},md:{fontSize:"$md",lineHeight:1.5,...e(.3864)},lg:{fontSize:"$lg",lineHeight:1.52,...e(.3983)},xl:{fontSize:"$xl",lineHeight:1.42,...e(.3506)}},noCapsize:{true:{"&::before, &::after":{display:"none !important"}}}},f=({size:i,noCapsize:o})=>({...t.size[i],...t.noCapsize[`${o}`]}),r=m("p",{fontFamily:"$body",fontWeight:400,margin:0,"& > &":{"&:before, &:after":{display:"none"}},variants:t}),a=n.forwardRef(({size:i="md",...o},s)=>n.createElement(r,{size:i,...o,ref:s}));a.displayName="Text";export{r as StyledText,a as Text,f as getTextVariant,t as textVariants};
+import*as n from"react";import{styled as m}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{capsize as e}from"../../utilities/style/capsize.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const t={size:{xs:{fontSize:"$xs",lineHeight:1.6,...e(.4364)},sm:{fontSize:"$sm",lineHeight:1.53,...e(.4056)},md:{fontSize:"$md",lineHeight:1.5,...e(.3864)},lg:{fontSize:"$lg",lineHeight:1.52,...e(.3983)},xl:{fontSize:"$xl",lineHeight:1.42,...e(.3506)}},noCapsize:{true:{"&::before, &::after":{display:"none !important"}}}},f=({size:i,noCapsize:o})=>({...t.size[i],...t.noCapsize[`${o}`]}),r=m("p",{fontFamily:"$body",fontWeight:400,margin:0,"& > &":{"&:before, &:after":{display:"none"}},variants:t}),a=n.forwardRef(({size:i="md",...o},s)=>n.createElement(r,{size:i,...o,ref:s}));a.displayName="Text";export{r as StyledText,a as Text,f as getTextVariant,t as textVariants};
 //# sourceMappingURL=Text.js.map

package/dist/components/text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../../src/components/text/Text.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport type { Override } from '~/utilities'\nimport { capsize } from '~/utilities'\n\nexport const textVariants = {\n  size: {\n    xs: { fontSize: '$xs', lineHeight: 1.6, ...capsize(0.4364) },\n    sm: { fontSize: '$sm', lineHeight: 1.53, ...capsize(0.4056) },\n    md: { fontSize: '$md', lineHeight: 1.5, ...capsize(0.3864) },\n    lg: { fontSize: '$lg', lineHeight: 1.52, ...capsize(0.3983) },\n    xl: { fontSize: '$xl', lineHeight: 1.42, ...capsize(0.3506) }\n  },\n  noCapsize: {\n    true: {\n      '&::before, &::after': { display: 'none !important' }\n    }\n  }\n}\n\nexport const getTextVariant: (options: {\n  size: keyof typeof textVariants.size\n  noCapsize?: boolean\n}) => CSS = ({ size, noCapsize }) => ({\n  ...textVariants.size[size],\n  ...textVariants.noCapsize[`${noCapsize}`]\n})\n\nexport const StyledText = styled('p', {\n  fontFamily: '$body',\n  fontWeight: 400,\n  margin: 0,\n  /** Allow nesting `<Text />` inside `<Text />` without forcing a new line and spacing. */\n  '& > &': {\n    '&:before, &:after': { display: 'none' }\n  },\n  variants: textVariants\n})\n\ntype TextProps = Override<\n  React.ComponentProps<typeof StyledText>,\n  {\n    as?:\n      | 'blockquote'\n      | 'caption'\n      | 'dd'\n      | 'dt'\n      | 'figcaption'\n      | 'li'\n      | 'p'\n      | 'span'\n      | 'legend'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n\nexport const Text: React.ForwardRefExoticComponent<TextProps> =\n  React.forwardRef(({ size = 'md', ...remainingProps }, ref) => (\n    <StyledText size={size} {...remainingProps} ref={ref} />\n  ))\n\nText.displayName = 'Text'\n"],"names":["textVariants","capsize","getTextVariant","size","noCapsize","StyledText","styled","Text","React","remainingProps","ref"],"mappings":"qPAMO,MAAMA,EAAe,CAC1B,KAAM,CACJ,GAAI,CAAE,SAAU,MAAO,WAAY,IAAK,GAAGC,EAAQ,KAAM,CAAE,EAC3D,GAAI,CAAE,SAAU,MAAO,WAAY,KAAM,GAAGA,EAAQ,KAAM,CAAE,EAC5D,GAAI,CAAE,SAAU,MAAO,WAAY,IAAK,GAAGA,EAAQ,KAAM,CAAE,EAC3D,GAAI,CAAE,SAAU,MAAO,WAAY,KAAM,GAAGA,EAAQ,KAAM,CAAE,EAC5D,GAAI,CAAE,SAAU,MAAO,WAAY,KAAM,GAAGA,EAAQ,KAAM,CAAE,CAC9D,EACA,UAAW,CACT,KAAM,CACJ,sBAAuB,CAAE,QAAS,iBAAkB,CACtD,CACF,CACF,EAEaC,EAGD,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,KAAO,CACpC,GAAGJ,EAAa,KAAKG,GACrB,GAAGH,EAAa,UAAU,GAAGI,IAC/B,GAEaC,EAAaC,EAAO,IAAK,CACpC,WAAY,QACZ,WAAY,IACZ,OAAQ,EAER,QAAS,CACP,oBAAqB,CAAE,QAAS,MAAO,CACzC,EACA,SAAUN,CACZ,CAAC,EAoBYO,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAL,EAAO,QAASM,CAAe,EAAGC,IACpDF,EAAA,cAACH,EAAW,CAAA,KAAMF,EAAO,GAAGM,EAAgB,IAAKC,CAAAA,CAAK,CACvD,EAEHH,EAAK,YAAc"}
+{"version":3,"file":"Text.js","sources":["../../../src/components/text/Text.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport type { Override } from '~/utilities'\nimport { capsize } from '~/utilities'\n\nexport const textVariants = {\n  size: {\n    xs: { fontSize: '$xs', lineHeight: 1.6, ...capsize(0.4364) },\n    sm: { fontSize: '$sm', lineHeight: 1.53, ...capsize(0.4056) },\n    md: { fontSize: '$md', lineHeight: 1.5, ...capsize(0.3864) },\n    lg: { fontSize: '$lg', lineHeight: 1.52, ...capsize(0.3983) },\n    xl: { fontSize: '$xl', lineHeight: 1.42, ...capsize(0.3506) }\n  },\n  noCapsize: {\n    true: {\n      '&::before, &::after': { display: 'none !important' }\n    }\n  }\n}\n\nexport const getTextVariant: (options: {\n  size: keyof typeof textVariants.size\n  noCapsize?: boolean\n}) => CSS = ({ size, noCapsize }) => ({\n  ...textVariants.size[size],\n  ...textVariants.noCapsize[`${noCapsize}`]\n})\n\nexport const StyledText = styled('p', {\n  fontFamily: '$body',\n  fontWeight: 400,\n  margin: 0,\n  /** Allow nesting `<Text />` inside `<Text />` without forcing a new line and spacing. */\n  '& > &': {\n    '&:before, &:after': { display: 'none' }\n  },\n  variants: textVariants\n})\n\ntype TextProps = Override<\n  React.ComponentProps<typeof StyledText>,\n  {\n    as?:\n      | 'blockquote'\n      | 'caption'\n      | 'dd'\n      | 'dt'\n      | 'figcaption'\n      | 'li'\n      | 'p'\n      | 'span'\n      | 'legend'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n\nexport const Text: React.ForwardRefExoticComponent<TextProps> =\n  React.forwardRef(({ size = 'md', ...remainingProps }, ref) => (\n    <StyledText size={size} {...remainingProps} ref={ref} />\n  ))\n\nText.displayName = 'Text'\n"],"names":["textVariants","capsize","getTextVariant","size","noCapsize","StyledText","styled","Text","React","remainingProps","ref"],"mappings":"sTAMO,MAAMA,EAAe,CAC1B,KAAM,CACJ,GAAI,CAAE,SAAU,MAAO,WAAY,IAAK,GAAGC,EAAQ,KAAM,CAAE,EAC3D,GAAI,CAAE,SAAU,MAAO,WAAY,KAAM,GAAGA,EAAQ,KAAM,CAAE,EAC5D,GAAI,CAAE,SAAU,MAAO,WAAY,IAAK,GAAGA,EAAQ,KAAM,CAAE,EAC3D,GAAI,CAAE,SAAU,MAAO,WAAY,KAAM,GAAGA,EAAQ,KAAM,CAAE,EAC5D,GAAI,CAAE,SAAU,MAAO,WAAY,KAAM,GAAGA,EAAQ,KAAM,CAAE,CAC9D,EACA,UAAW,CACT,KAAM,CACJ,sBAAuB,CAAE,QAAS,iBAAkB,CACtD,CACF,CACF,EAEaC,EAGD,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,KAAO,CACpC,GAAGJ,EAAa,KAAKG,GACrB,GAAGH,EAAa,UAAU,GAAGI,IAC/B,GAEaC,EAAaC,EAAO,IAAK,CACpC,WAAY,QACZ,WAAY,IACZ,OAAQ,EAER,QAAS,CACP,oBAAqB,CAAE,QAAS,MAAO,CACzC,EACA,SAAUN,CACZ,CAAC,EAoBYO,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAL,EAAO,QAASM,CAAe,EAAGC,IACpDF,EAAA,cAACH,EAAW,CAAA,KAAMF,EAAO,GAAGM,EAAgB,IAAKC,CAAAA,CAAK,CACvD,EAEHH,EAAK,YAAc"}

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

@@ -159,6 +159,13 @@ declare const StyledTextarea: import("@stitches/react/types/styled-component").S
         "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">;

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

@@ -161,6 +161,13 @@ export declare const StyledTile: import("@stitches/react/types/styled-component"
         "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">;

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

@@ -166,6 +166,13 @@ export declare const TileGroup: import("react").ForwardRefExoticComponent<Omit<P
             "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">;

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

@@ -1,7 +1,2 @@
-import { Tile as TileRoot } from './Tile';
-import { TileNoOverflowContainer } from './TileNoOverflowContainer';
-declare type TTile = typeof TileRoot & {
-    NoOverflowContainer: typeof TileNoOverflowContainer;
-};
-export declare const Tile: TTile;
+export { Tile } from './Tile';
 export { TileGroup } from './TileGroup';

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

@@ -164,6 +164,13 @@ declare const StyledTileInteractive: import("@stitches/react/types/styled-compon
             "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">;
@@ -222,433 +229,7 @@ declare const StyledTileInteractive: import("@stitches/react/types/styled-compon
 } & {
     asWorkaround?: React.ElementType<any> | undefined;
     colorScheme?: import("../..").TcolorScheme | undefined;
-}, "colorScheme" | "border" | "borderRadius" | "css" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asWorkaround"> & React.RefAttributes<HTMLButtonElement>> & {
-    NoOverflowContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        reducedMotion: string;
-        allowMotion: string;
-        hover: string;
-    }, import("@stitches/react/types/css-util").CSS<{
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        reducedMotion: string;
-        allowMotion: string;
-        hover: string;
-    }, {
-        colors: {
-            textForeground: any;
-            textSubtle: any;
-            textPlaceholder: 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;
-            tonal50: any;
-            tonal100: any;
-            tonal200: any;
-            tonal300: any;
-            tonal400: any;
-            tonal500: any;
-            tonal600: any;
-            alpha100: any;
-            alpha150: any;
-            alpha200: any;
-            alpha250: any;
-            alpha600: any;
-            primaryLight: any;
-            primary: any;
-            primaryMid: any;
-            primaryDark: any;
-            secondary: any;
-            brandRed: any;
-            brandRedAccent: any;
-            brandGreen: any;
-            brandGreenAccent: any;
-            brandPurple: any;
-            brandPurpleAccent: any;
-            brandYellow: any;
-            brandYellowAccent: 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;
-        };
-        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;
-        };
-    }, 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">;
-        };
-    }>>, {}, {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        reducedMotion: string;
-        allowMotion: string;
-        hover: string;
-    }, import("@stitches/react/types/css-util").CSS<{
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        reducedMotion: string;
-        allowMotion: string;
-        hover: string;
-    }, {
-        colors: {
-            textForeground: any;
-            textSubtle: any;
-            textPlaceholder: 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;
-            tonal50: any;
-            tonal100: any;
-            tonal200: any;
-            tonal300: any;
-            tonal400: any;
-            tonal500: any;
-            tonal600: any;
-            alpha100: any;
-            alpha150: any;
-            alpha200: any;
-            alpha250: any;
-            alpha600: any;
-            primaryLight: any;
-            primary: any;
-            primaryMid: any;
-            primaryDark: any;
-            secondary: any;
-            brandRed: any;
-            brandRedAccent: any;
-            brandGreen: any;
-            brandGreenAccent: any;
-            brandPurple: any;
-            brandPurpleAccent: any;
-            brandYellow: any;
-            brandYellowAccent: 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;
-        };
-        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;
-        };
-    }, 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">;
-        };
-    }>>;
-}, {}, {
+}, "colorScheme" | "border" | "borderRadius" | "css" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asWorkaround"> & React.RefAttributes<HTMLButtonElement>>, {}, {
     sm: string;
     md: string;
     lg: string;
@@ -806,6 +387,13 @@ declare const StyledTileInteractive: import("@stitches/react/types/styled-compon
         "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">;

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

@@ -1,2 +1,2 @@
-import o from"react";import{Tile as n}from"../tile/index.js";import{styled as l}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const m=l(n,{"&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{cursor:"pointer",transform:"translateY(0)",transition:"transform 250ms ease","&::after":{content:"",position:"absolute",inset:0,boxShadow:"$2",opacity:0,transition:"opacity 250ms ease-out",borderRadius:"inherit"},"&:hover":{transform:"translateY(-$space$0)","&::after":{opacity:1}},"&:active":{bg:"$base2"},"&:focus-visible":{...c()}}}),e=o.forwardRef(({onClick:r,href:t,type:a="button",...i},s)=>o.createElement(m,{...i,...t?{asWorkaround:"a",href:t,onClick:void 0}:{asWorkaround:"button",type:a,onClick:r},ref:s}));e.displayName="TileInteractive";export{e as TileInteractive};
+import o from"react";import{Tile as n}from"../tile/Tile.js";import"../stack/Stack.js";import{styled as l}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const m=l(n,{"&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{cursor:"pointer",transform:"translateY(0)",transition:"transform 250ms ease","&::after":{content:"",position:"absolute",inset:0,boxShadow:"$2",opacity:0,transition:"opacity 250ms ease-out",borderRadius:"inherit"},"&:hover":{transform:"translateY(-$space$0)","&::after":{opacity:1}},"&:active":{bg:"$base2"},"&:focus-visible":{...c()}}}),r=o.forwardRef(({onClick:e,href:t,type:a="button",...i},s)=>o.createElement(m,{...i,...t?{asWorkaround:"a",href:t,onClick:void 0}:{asWorkaround:"button",type:a,onClick:e},ref:s}));r.displayName="TileInteractive";export{r as TileInteractive};
 //# sourceMappingURL=TileInteractive.js.map

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(Tile, {\n  '&[data-disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([data-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    },\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> & { type?: string } & 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        asWorkaround: 'a' as React.ElementType,\n        href,\n        onClick: undefined\n      }\n    : { asWorkaround: 'button' as React.ElementType, type, onClick }\n\n  return <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n})\n\nTileInteractive.displayName = 'TileInteractive'\n"],"names":["StyledTileInteractive","styled","Tile","focusVisibleStyleBlock","TileInteractive","React","onClick","href","type","rest","ref"],"mappings":"2TAOA,MAAMA,EAAwBC,EAAOC,EAAM,CACzC,mBAAoB,CAClB,QAAS,GACT,OAAQ,aACV,EACA,yBAA0B,CACxB,OAAQ,UACR,UAAW,gBACX,WAAY,uBACZ,WAAY,CACV,QAAS,GACT,SAAU,WACV,MAAO,EACP,UAAW,KACX,QAAS,EACT,WAAY,yBACZ,aAAc,SAChB,EACA,UAAW,CACT,UAAW,wBACX,WAAY,CACV,QAAS,CACX,CACF,EACA,WAAY,CACV,GAAI,QACN,EACA,kBAAmB,CACjB,GAAGC,EACL,CAAA,CACF,CACF,CAAC,EAMYC,EAAkBC,EAAM,WAGnC,CAAC,CAAE,QAAAC,EAAS,KAAAC,EAAM,KAAAC,EAAO,YAAaC,CAAK,EAAGC,IAUvCL,EAAA,cAACL,EAAA,CAAuB,GAAGS,EAAO,GATxBF,EAEb,CACE,aAAc,IACd,KAAAA,EACA,QAAS,MACX,EACA,CAAE,aAAc,SAA+B,KAAAC,EAAM,QAAAF,CAAQ,EAEC,IAAKI,CAAK,CAAA,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(Tile, {\n  '&[data-disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([data-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    },\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> & { type?: string } & 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        asWorkaround: 'a' as React.ElementType,\n        href,\n        onClick: undefined\n      }\n    : { asWorkaround: 'button' as React.ElementType, type, onClick }\n\n  return <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n})\n\nTileInteractive.displayName = 'TileInteractive'\n"],"names":["StyledTileInteractive","styled","Tile","focusVisibleStyleBlock","TileInteractive","React","onClick","href","type","rest","ref"],"mappings":"qZAOA,MAAMA,EAAwBC,EAAOC,EAAM,CACzC,mBAAoB,CAClB,QAAS,GACT,OAAQ,aACV,EACA,yBAA0B,CACxB,OAAQ,UACR,UAAW,gBACX,WAAY,uBACZ,WAAY,CACV,QAAS,GACT,SAAU,WACV,MAAO,EACP,UAAW,KACX,QAAS,EACT,WAAY,yBACZ,aAAc,SAChB,EACA,UAAW,CACT,UAAW,wBACX,WAAY,CACV,QAAS,CACX,CACF,EACA,WAAY,CACV,GAAI,QACN,EACA,kBAAmB,CACjB,GAAGC,EACL,CAAA,CACF,CACF,CAAC,EAMYC,EAAkBC,EAAM,WAGnC,CAAC,CAAE,QAAAC,EAAS,KAAAC,EAAM,KAAAC,EAAO,YAAaC,CAAK,EAAGC,IAUvCL,EAAA,cAACL,EAAA,CAAuB,GAAGS,EAAO,GATxBF,EAEb,CACE,aAAc,IACd,KAAAA,EACA,QAAS,MACX,EACA,CAAE,aAAc,SAA+B,KAAAC,EAAM,QAAAF,CAAQ,EAEC,IAAKI,CAAK,CAAA,CAC7E,EAEDN,EAAgB,YAAc"}

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

@@ -164,6 +164,13 @@ declare const StyledTileToggleGroupItem: import("@stitches/react/types/styled-co
             "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">;
@@ -381,6 +388,13 @@ declare const StyledTileToggleGroupItem: import("@stitches/react/types/styled-co
             "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">;
@@ -596,6 +610,13 @@ declare const StyledTileToggleGroupItem: import("@stitches/react/types/styled-co
         "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">;

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

@@ -167,6 +167,13 @@ export declare const TileToggleGroupRoot: React.ForwardRefExoticComponent<(Pick<
             "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">;
@@ -392,6 +399,13 @@ export declare const TileToggleGroupRoot: React.ForwardRefExoticComponent<(Pick<
             "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">;

package/dist/components/tile-toggle-group/TileToggleGroupRoot.js

@@ -1,2 +1,2 @@
-import*as i from"@radix-ui/react-toggle-group";import*as r from"react";import"../tile/index.js";import{TileGroup as n}from"../tile/TileGroup.js";const a=o=>o==="horizontal"?"row":o==="vertical"?"column":void 0,m=r.forwardRef((o,t)=>{const e=a(o.orientation);return r.createElement(n,{ref:t,as:i.Root,direction:e,align:!1,...o})});export{m as TileToggleGroupRoot};
+import*as i from"@radix-ui/react-toggle-group";import*as r from"react";import"../tile/Tile.js";import{TileGroup as n}from"../tile/TileGroup.js";const a=o=>o==="horizontal"?"row":o==="vertical"?"column":void 0,m=r.forwardRef((o,t)=>{const e=a(o.orientation);return r.createElement(n,{ref:t,as:i.Root,direction:e,align:!1,...o})});export{m as TileToggleGroupRoot};
 //# sourceMappingURL=TileToggleGroupRoot.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TileToggleGroupRoot.js","sources":["../../../src/components/tile-toggle-group/TileToggleGroupRoot.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { TileGroup } from '~/components/tile'\n\ntype TTileToggleGroupRootProps = React.ComponentProps<typeof TileGroup> &\n  React.ComponentProps<typeof ToggleGroup.Root>\n\nconst orientationToDirection = (orientation) =>\n  orientation === 'horizontal'\n    ? 'row'\n    : orientation === 'vertical'\n    ? 'column'\n    : undefined\n\nexport const TileToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  TTileToggleGroupRootProps\n>((props, ref) => {\n  const direction = orientationToDirection(props.orientation)\n  return (\n    <TileGroup\n      ref={ref}\n      as={ToggleGroup.Root}\n      direction={direction}\n      align={false}\n      {...props}\n    />\n  )\n})\n"],"names":["orientationToDirection","orientation","TileToggleGroupRoot","React","props","ref","direction","TileGroup","ToggleGroup"],"mappings":"iJAQA,MAAMA,EAA0BC,GAC9BA,IAAgB,aACZ,MACAA,IAAgB,WAChB,SACA,OAEOC,EAAsBC,EAAM,WAGvC,CAACC,EAAOC,IAAQ,CAChB,MAAMC,EAAYN,EAAuBI,EAAM,WAAW,EAC1D,OACED,EAAA,cAACI,EAAA,CACC,IAAKF,EACL,GAAIG,EAAY,KAChB,UAAWF,EACX,MAAO,GACN,GAAGF,CACN,CAAA,CAEJ,CAAC"}
+{"version":3,"file":"TileToggleGroupRoot.js","sources":["../../../src/components/tile-toggle-group/TileToggleGroupRoot.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { TileGroup } from '~/components/tile'\n\ntype TTileToggleGroupRootProps = React.ComponentProps<typeof TileGroup> &\n  React.ComponentProps<typeof ToggleGroup.Root>\n\nconst orientationToDirection = (orientation) =>\n  orientation === 'horizontal'\n    ? 'row'\n    : orientation === 'vertical'\n    ? 'column'\n    : undefined\n\nexport const TileToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  TTileToggleGroupRootProps\n>((props, ref) => {\n  const direction = orientationToDirection(props.orientation)\n  return (\n    <TileGroup\n      ref={ref}\n      as={ToggleGroup.Root}\n      direction={direction}\n      align={false}\n      {...props}\n    />\n  )\n})\n"],"names":["orientationToDirection","orientation","TileToggleGroupRoot","React","props","ref","direction","TileGroup","ToggleGroup"],"mappings":"gJAQA,MAAMA,EAA0BC,GAC9BA,IAAgB,aACZ,MACAA,IAAgB,WAChB,SACA,OAEOC,EAAsBC,EAAM,WAGvC,CAACC,EAAOC,IAAQ,CAChB,MAAMC,EAAYN,EAAuBI,EAAM,WAAW,EAC1D,OACED,EAAA,cAACI,EAAA,CACC,IAAKF,EACL,GAAIG,EAAY,KAChB,UAAWF,EACX,MAAO,GACN,GAAGF,CACN,CAAA,CAEJ,CAAC"}