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

package/dist/components/accordion/AccordionTrigger.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TcolorScheme } from '../../experiments/color-scheme';
-declare const StyledTrigger: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>, {}, {
+declare const StyledTrigger: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>, {}, {
     sm: string;
     md: string;
     lg: string;
@@ -8,7 +8,7 @@ declare const StyledTrigger: import("@stitches/react/types/styled-component").St
     reducedMotion: string;
     allowMotion: string;
     hover: string;
-}, import("@stitches/react/types/css-util").CSS<{
+}, import("@atom-learning/stitches-react/types/css-util").CSS<{
     sm: string;
     md: string;
     lg: string;
@@ -48,6 +48,18 @@ declare const StyledTrigger: import("@stitches/react/types/styled-component").St
         blue1000: any;
         blue1100: any;
         blue1200: any;
+        pink100: any;
+        pink200: any;
+        pink300: any;
+        pink400: any;
+        pink500: any;
+        pink600: any;
+        pink700: any;
+        pink800: any;
+        pink900: any;
+        pink1000: any;
+        pink1100: any;
+        pink1200: any;
         purple100: any;
         purple200: any;
         purple300: any;
@@ -192,26 +204,11 @@ declare const StyledTrigger: import("@stitches/react/types/styled-component").St
         marsh1000: any;
         marsh1100: any;
         marsh1200: 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;
@@ -312,62 +309,62 @@ declare const StyledTrigger: import("@stitches/react/types/styled-component").St
         "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">;
+}, import("@atom-learning/stitches-react/types/config").DefaultThemeMap, {
+    bg: (value: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">) => {
+        background: import("@atom-learning/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">;
+    size: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">) => {
+        height: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
+        width: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
     };
-    p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    p: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        padding: string | number | import("@atom-learning/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">;
+    pt: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingTop: string | number | import("@atom-learning/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">;
+    pr: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    pb: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    pl: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingLeft: string | number | import("@atom-learning/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">;
+    px: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    py: (value: 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">;
+    py: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    m: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        margin: string | number | import("@atom-learning/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">;
+    mt: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginTop: string | number | import("@atom-learning/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">;
+    mr: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    mb: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    ml: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginLeft: string | number | import("@atom-learning/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">;
+    mx: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    my: (value: 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">;
+    my: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-export declare const AccordionTrigger: ({ children, colorScheme, asChild, ...remainingProps }: Omit<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "css"> & import("@stitches/react/types/styled-component").TransformProps<{}, {
+export declare const AccordionTrigger: ({ children, colorScheme, asChild, ...remainingProps }: Omit<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "css"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{}, {
     sm: string;
     md: string;
     lg: string;
@@ -376,7 +373,7 @@ export declare const AccordionTrigger: ({ children, colorScheme, asChild, ...rem
     allowMotion: string;
     hover: string;
 }> & {
-    css?: import("@stitches/react/types/css-util").CSS<{
+    css?: import("@atom-learning/stitches-react/types/css-util").CSS<{
         sm: string;
         md: string;
         lg: string;
@@ -416,6 +413,18 @@ export declare const AccordionTrigger: ({ children, colorScheme, asChild, ...rem
             blue1000: any;
             blue1100: any;
             blue1200: any;
+            pink100: any;
+            pink200: any;
+            pink300: any;
+            pink400: any;
+            pink500: any;
+            pink600: any;
+            pink700: any;
+            pink800: any;
+            pink900: any;
+            pink1000: any;
+            pink1100: any;
+            pink1200: any;
             purple100: any;
             purple200: any;
             purple300: any;
@@ -560,26 +569,11 @@ export declare const AccordionTrigger: ({ children, colorScheme, asChild, ...rem
             marsh1000: any;
             marsh1100: any;
             marsh1200: 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;
@@ -680,62 +674,62 @@ export declare const AccordionTrigger: ({ children, colorScheme, asChild, ...rem
             "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">;
+    }, import("@atom-learning/stitches-react/types/config").DefaultThemeMap, {
+        bg: (value: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">) => {
+            background: import("@atom-learning/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">;
+        size: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">) => {
+            height: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
+            width: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
         };
-        p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-            padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        p: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+            padding: string | number | import("@atom-learning/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">;
+        pt: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+            paddingTop: string | number | import("@atom-learning/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">;
+        pr: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+            paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
         };
-        pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-            paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        pb: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+            paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
         };
-        pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-            paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        pl: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+            paddingLeft: string | number | import("@atom-learning/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">;
+        px: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+            paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+            paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
         };
-        py: (value: 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">;
+        py: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+            paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+            paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
         };
-        m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-            margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        m: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+            margin: string | number | import("@atom-learning/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">;
+        mt: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+            marginTop: string | number | import("@atom-learning/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">;
+        mr: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+            marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
         };
-        mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-            marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        mb: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+            marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
         };
-        ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-            marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        ml: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+            marginLeft: string | number | import("@atom-learning/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">;
+        mx: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+            marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+            marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
         };
-        my: (value: 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">;
+        my: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+            marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+            marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
         };
     }> | undefined;
 } & {
     colorScheme?: TcolorScheme | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export {};

package/dist/components/action-icon/ActionIcon.d.ts

@@ -1,9 +1,9 @@
-import type { VariantProps } from '@stitches/react';
+import type { VariantProps } from '@atom-learning/stitches-react';
 import * as React from 'react';
 import { NavigatorActions } from '../../types';
 import { Override } from '../../utilities';
 import type { TOptionalTooltipWrapperProps } from '../../utilities/optional-tooltip-wrapper';
-declare const StyledButton: import("@stitches/react/types/styled-component").StyledComponent<"button", {
+declare const StyledButton: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"button", {
     theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
     appearance?: "outline" | "solid" | "simple" | undefined;
     size?: "sm" | "md" | "lg" | "xs" | undefined;
@@ -16,7 +16,7 @@ declare const StyledButton: import("@stitches/react/types/styled-component").Sty
     reducedMotion: string;
     allowMotion: string;
     hover: string;
-}, import("@stitches/react/types/css-util").CSS<{
+}, import("@atom-learning/stitches-react/types/css-util").CSS<{
     sm: string;
     md: string;
     lg: string;
@@ -56,6 +56,18 @@ declare const StyledButton: import("@stitches/react/types/styled-component").Sty
         blue1000: any;
         blue1100: any;
         blue1200: any;
+        pink100: any;
+        pink200: any;
+        pink300: any;
+        pink400: any;
+        pink500: any;
+        pink600: any;
+        pink700: any;
+        pink800: any;
+        pink900: any;
+        pink1000: any;
+        pink1100: any;
+        pink1200: any;
         purple100: any;
         purple200: any;
         purple300: any;
@@ -200,26 +212,11 @@ declare const StyledButton: import("@stitches/react/types/styled-component").Sty
         marsh1000: any;
         marsh1100: any;
         marsh1200: 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;
@@ -320,59 +317,59 @@ declare const StyledButton: import("@stitches/react/types/styled-component").Sty
         "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">;
+}, import("@atom-learning/stitches-react/types/config").DefaultThemeMap, {
+    bg: (value: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">) => {
+        background: import("@atom-learning/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">;
+    size: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">) => {
+        height: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
+        width: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
     };
-    p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    p: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        padding: string | number | import("@atom-learning/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">;
+    pt: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingTop: string | number | import("@atom-learning/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">;
+    pr: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    pb: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    pl: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingLeft: string | number | import("@atom-learning/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">;
+    px: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    py: (value: 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">;
+    py: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    m: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        margin: string | number | import("@atom-learning/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">;
+    mt: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginTop: string | number | import("@atom-learning/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">;
+    mr: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    mb: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    ml: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginLeft: string | number | import("@atom-learning/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">;
+    mx: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    my: (value: 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">;
+    my: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
 declare type ActionIconProps = Override<React.ComponentProps<typeof StyledButton>, VariantProps<typeof StyledButton> & {

package/dist/components/action-icon/ActionIcon.js

@@ -1,2 +1,2 @@
-import u from"invariant";import*as o from"react";import{styled as w}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as k}from"../../utilities/style/disabledStyle.js";import{getExternalAnchorProps as D}from"../../utilities/uri/index.js";import{Icon as m}from"../icon/Icon.js";import{ActionIconSizeMap as z}from"./ActionIcon.constants.js";import{OptionalTooltipWrapper as M}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";const s=(r,a,i,e)=>({theme:r,appearance:"simple",css:{bg:"transparent",color:a,"&:not(:disabled):hover, &:not(:disabled):focus":{color:i},"&:not(:disabled):active":{color:e}}}),t=(r,a,i,e)=>({theme:r,appearance:"solid",css:{bg:a,color:"white","&:not(:disabled):hover, &:not(:disabled):focus":{bg:i,color:"white"},"&:not(:disabled):active":{bg:e}}}),p=(r,a,i,e)=>({theme:r,appearance:"outline",css:{border:"1px solid",borderColor:"currentColor",color:a,"&:not(:disabled):hover, &:not(:disabled):focus":{color:i},"&:not(:disabled):active":{color:e}}}),v=w("button",{alignItems:"center",appearance:"none",bg:"white",border:"unset",borderRadius:"$0",boxSizing:"border-box",cursor:"pointer",display:"flex",flexShrink:0,justifyContent:"center",p:"unset",transition:"all 100ms ease-out","&[disabled]":k,variants:{theme:{neutral:{},primary:{},success:{},warning:{},danger:{}},appearance:{simple:{},outline:{},solid:{}},size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[s("neutral","$tonal300","$primary900","$primary1000"),s("primary","$primary800","$primary900","$primary1000"),s("primaryDark","$primary1000","$primary1100","$primary1200"),s("success","$success","$successMid","$successDark"),s("warning","$warning","$warningMid","$warningDark"),s("danger","$danger","$dangerMid","$dangerDark"),t("primary","$primary800","$primary900","$primary1000"),t("primaryDark","$primary1000","$primary1100","$primary1200"),t("success","$success","$successMid","$successDark"),t("warning","$warning","$warningMid","$warningDark"),t("danger","$danger","$dangerMid","$dangerDark"),p("primary","$primary800","$primary900","$primary1000"),p("primaryDark","$primary1000","$primary1100","$primary1200"),p("success","$success","$successMid","$successDark"),p("warning","$warning","$warningMid","$warningDark"),p("danger","$danger","$dangerMid","$dangerDark")]}),d=o.forwardRef(({children:r,theme:a="primary",appearance:i="simple",size:e="sm",label:$,href:l,disabled:c,hasTooltip:g=!0,tooltipSide:b,...h},f)=>{const y=`A single ${m.displayName} component is permitted as a child of ${d.displayName}`;return u(o.Children.count(r)===1,y),o.createElement(M,{hasTooltip:g,label:$,tooltipSide:b},o.createElement(v,{...l?{as:"a",href:c?null:l,onClick:void 0,"aria-disabled":!!c}:{type:"button"},...D(l),...h,"aria-label":$,theme:a,appearance:i,size:e,ref:f,disabled:c},o.Children.map(r,n=>{if(!o.isValidElement(n))throw new Error(y);return u(n.type===m,`Children of type ${n==null?void 0:n.type} aren't permitted. Only an ${m.displayName} component is allowed in ${d.displayName}`),o.cloneElement(n,{size:z[e],css:{...n.props.css?n.props.css:{}}})})))});d.displayName="ActionIcon";export{d as ActionIcon};
+import u from"invariant";import*as n from"react";import{styled as w}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as k}from"../../utilities/style/disabledStyle.js";import{getExternalAnchorProps as D}from"../../utilities/uri/index.js";import{Icon as m}from"../icon/Icon.js";import{ActionIconSizeMap as z}from"./ActionIcon.constants.js";import{OptionalTooltipWrapper as M}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";const o=(r,a,i,e)=>({theme:r,appearance:"simple",css:{bg:"transparent",color:a,"&:not(:disabled):hover, &:not(:disabled):focus":{color:i},"&:not(:disabled):active":{color:e}}}),t=(r,a,i,e)=>({theme:r,appearance:"solid",css:{bg:a,color:"white","&:not(:disabled):hover, &:not(:disabled):focus":{bg:i,color:"white"},"&:not(:disabled):active":{bg:e}}}),p=(r,a,i,e)=>({theme:r,appearance:"outline",css:{border:"1px solid",borderColor:"currentColor",color:a,"&:not(:disabled):hover, &:not(:disabled):focus":{color:i},"&:not(:disabled):active":{color:e}}}),v=w("button",{alignItems:"center",appearance:"none",bg:"white",border:"unset",borderRadius:"$0",boxSizing:"border-box",cursor:"pointer",display:"flex",flexShrink:0,justifyContent:"center",p:"unset",transition:"all 100ms ease-out","&[disabled]":k,variants:{theme:{neutral:{},primary:{},success:{},warning:{},danger:{}},appearance:{simple:{},outline:{},solid:{}},size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[o("neutral","$grey700","$primary900","$primary1000"),o("primary","$primary800","$primary900","$primary1000"),o("primaryDark","$primary1000","$primary1100","$primary1200"),o("success","$success","$successMid","$successDark"),o("warning","$warning","$warningMid","$warningDark"),o("danger","$danger","$dangerMid","$dangerDark"),t("primary","$primary800","$primary900","$primary1000"),t("primaryDark","$primary1000","$primary1100","$primary1200"),t("success","$success","$successMid","$successDark"),t("warning","$warning","$warningMid","$warningDark"),t("danger","$danger","$dangerMid","$dangerDark"),p("primary","$primary800","$primary900","$primary1000"),p("primaryDark","$primary1000","$primary1100","$primary1200"),p("success","$success","$successMid","$successDark"),p("warning","$warning","$warningMid","$warningDark"),p("danger","$danger","$dangerMid","$dangerDark")]}),d=n.forwardRef(({children:r,theme:a="primary",appearance:i="simple",size:e="sm",label:$,href:l,disabled:c,hasTooltip:g=!0,tooltipSide:b,...h},f)=>{const y=`A single ${m.displayName} component is permitted as a child of ${d.displayName}`;return u(n.Children.count(r)===1,y),n.createElement(M,{hasTooltip:g,label:$,tooltipSide:b},n.createElement(v,{...l?{as:"a",href:c?null:l,onClick:void 0,"aria-disabled":!!c}:{type:"button"},...D(l),...h,"aria-label":$,theme:a,appearance:i,size:e,ref:f,disabled:c},n.Children.map(r,s=>{if(!n.isValidElement(s))throw new Error(y);return u(s.type===m,`Children of type ${s==null?void 0:s.type} aren't permitted. Only an ${m.displayName} component is allowed in ${d.displayName}`),n.cloneElement(s,{size:z[e],css:{...s.props.css?s.props.css:{}}})})))});d.displayName="ActionIcon";export{d as ActionIcon};
 //# sourceMappingURL=ActionIcon.js.map

package/dist/components/action-icon/ActionIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionIcon.js","sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import type { VariantProps } from '@stitches/react'\nimport invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { disabledStyle, Override } from '~/utilities'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst getSimpleVariant = (\n  theme: string,\n  base: string,\n  interact: string,\n  active: string\n) => ({\n  theme,\n  appearance: 'simple',\n  css: {\n    bg: 'transparent',\n    color: base,\n    '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n    '&:not(:disabled):active': { color: active }\n  }\n})\n\nconst getSolidVariant = (\n  theme: string,\n  base: string,\n  interact: string,\n  active: string\n) => ({\n  theme,\n  appearance: 'solid',\n  css: {\n    bg: base,\n    color: 'white',\n    '&:not(:disabled):hover, &:not(:disabled):focus': {\n      bg: interact,\n      color: 'white'\n    },\n    '&:not(:disabled):active': { bg: active }\n  }\n})\n\nconst getOutlineVariant = (\n  theme: string,\n  base: string,\n  interact: string,\n  active: string\n) => ({\n  theme,\n  appearance: 'outline',\n  css: {\n    border: '1px solid',\n    borderColor: 'currentColor',\n    color: base,\n    '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n    '&:not(:disabled):active': { color: active }\n  }\n})\n\nconst StyledButton = styled('button', {\n  alignItems: 'center',\n  appearance: 'none',\n  bg: 'white',\n  border: 'unset',\n  borderRadius: '$0',\n  boxSizing: 'border-box',\n  cursor: 'pointer',\n  display: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  p: 'unset',\n  transition: 'all 100ms ease-out',\n  '&[disabled]': disabledStyle,\n  variants: {\n    theme: {\n      neutral: {},\n      primary: {},\n      success: {},\n      warning: {},\n      danger: {}\n    },\n    appearance: {\n      simple: {},\n      outline: {},\n      solid: {}\n    },\n    size: {\n      xs: { size: '$2' },\n      sm: { size: '$3' },\n      md: { size: '$4' },\n      lg: { size: '$5' }\n    },\n    isRounded: {\n      true: {\n        borderRadius: '$round'\n      }\n    }\n  },\n\n  // prettier-ignore\n  compoundVariants: [\n    getSimpleVariant('neutral', '$tonal300', '$primary900', '$primary1000'),\n    getSimpleVariant('primary', '$primary800', '$primary900', '$primary1000'),\n    getSimpleVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n    getSimpleVariant('success', '$success', '$successMid', '$successDark'),\n    getSimpleVariant('warning', '$warning', '$warningMid', '$warningDark'),\n    getSimpleVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n\n    getSolidVariant('primary', '$primary800', '$primary900', '$primary1000'),\n    getSolidVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n    getSolidVariant('success', '$success', '$successMid', '$successDark'),\n    getSolidVariant('warning', '$warning', '$warningMid', '$warningDark'),\n    getSolidVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n\n    getOutlineVariant('primary', '$primary800', '$primary900', '$primary1000'),\n    getOutlineVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n    getOutlineVariant('success', '$success', '$successMid', '$successDark'),\n    getOutlineVariant('warning', '$warning', '$warningMid', '$warningDark'),\n    getOutlineVariant('danger', '$danger', '$dangerMid', '$dangerDark')\n  ]\n})\n\ntype ActionIconProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  VariantProps<typeof StyledButton> & {\n    as?: string | React.ReactNode\n    children: React.ReactNode\n    label: string\n  } & Omit<TOptionalTooltipWrapperProps, 'label'> &\n    NavigatorActions\n>\n\nexport const ActionIcon: React.ForwardRefExoticComponent<ActionIconProps> =\n  React.forwardRef(\n    (\n      {\n        children,\n        theme = 'primary',\n        appearance = 'simple',\n        size = 'sm',\n        label,\n        href,\n        disabled,\n        hasTooltip = true,\n        tooltipSide,\n        ...remainingProps\n      },\n      ref\n    ) => {\n      const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n      invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n      const optionalLinkProps = href\n        ? ({\n            as: 'a',\n            href: disabled ? null : href,\n            onClick: undefined,\n            'aria-disabled': !!disabled\n          } as const)\n        : ({ type: 'button' } as const)\n\n      return (\n        <OptionalTooltipWrapper\n          hasTooltip={hasTooltip}\n          label={label}\n          tooltipSide={tooltipSide}\n        >\n          <StyledButton\n            {...optionalLinkProps}\n            {...getExternalAnchorProps(href)}\n            {...remainingProps}\n            aria-label={label}\n            theme={theme}\n            appearance={appearance}\n            size={size}\n            ref={ref}\n            disabled={disabled}\n          >\n            {React.Children.map(children, (child) => {\n              // TS needs this check for any following code to access child.type\n              // even with optional chaining\n              if (!React.isValidElement(child)) {\n                throw new Error(INVALID_CHILDREN_MESSAGE)\n              }\n\n              invariant(\n                child.type === Icon,\n                `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n              )\n\n              return React.cloneElement(child, {\n                size: ActionIconSizeMap[size as string],\n                css: { ...(child.props.css ? child.props.css : {}) }\n              })\n            })}\n          </StyledButton>\n        </OptionalTooltipWrapper>\n      )\n    }\n  )\n\nActionIcon.displayName = 'ActionIcon'\n"],"names":["getSimpleVariant","theme","base","interact","active","getSolidVariant","getOutlineVariant","StyledButton","styled","disabledStyle","ActionIcon","React","children","appearance","size","label","href","disabled","hasTooltip","tooltipSide","remainingProps","ref","INVALID_CHILDREN_MESSAGE","Icon","invariant","OptionalTooltipWrapper","getExternalAnchorProps","child","ActionIconSizeMap"],"mappings":"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"}
+{"version":3,"file":"ActionIcon.js","sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import type { VariantProps } from '@atom-learning/stitches-react'\nimport invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { disabledStyle, Override } from '~/utilities'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst getSimpleVariant = (\n  theme: string,\n  base: string,\n  interact: string,\n  active: string\n) => ({\n  theme,\n  appearance: 'simple',\n  css: {\n    bg: 'transparent',\n    color: base,\n    '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n    '&:not(:disabled):active': { color: active }\n  }\n})\n\nconst getSolidVariant = (\n  theme: string,\n  base: string,\n  interact: string,\n  active: string\n) => ({\n  theme,\n  appearance: 'solid',\n  css: {\n    bg: base,\n    color: 'white',\n    '&:not(:disabled):hover, &:not(:disabled):focus': {\n      bg: interact,\n      color: 'white'\n    },\n    '&:not(:disabled):active': { bg: active }\n  }\n})\n\nconst getOutlineVariant = (\n  theme: string,\n  base: string,\n  interact: string,\n  active: string\n) => ({\n  theme,\n  appearance: 'outline',\n  css: {\n    border: '1px solid',\n    borderColor: 'currentColor',\n    color: base,\n    '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n    '&:not(:disabled):active': { color: active }\n  }\n})\n\nconst StyledButton = styled('button', {\n  alignItems: 'center',\n  appearance: 'none',\n  bg: 'white',\n  border: 'unset',\n  borderRadius: '$0',\n  boxSizing: 'border-box',\n  cursor: 'pointer',\n  display: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  p: 'unset',\n  transition: 'all 100ms ease-out',\n  '&[disabled]': disabledStyle,\n  variants: {\n    theme: {\n      neutral: {},\n      primary: {},\n      success: {},\n      warning: {},\n      danger: {}\n    },\n    appearance: {\n      simple: {},\n      outline: {},\n      solid: {}\n    },\n    size: {\n      xs: { size: '$2' },\n      sm: { size: '$3' },\n      md: { size: '$4' },\n      lg: { size: '$5' }\n    },\n    isRounded: {\n      true: {\n        borderRadius: '$round'\n      }\n    }\n  },\n\n  // prettier-ignore\n  compoundVariants: [\n    getSimpleVariant('neutral', '$grey700', '$primary900', '$primary1000'),\n    getSimpleVariant('primary', '$primary800', '$primary900', '$primary1000'),\n    getSimpleVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n    getSimpleVariant('success', '$success', '$successMid', '$successDark'),\n    getSimpleVariant('warning', '$warning', '$warningMid', '$warningDark'),\n    getSimpleVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n\n    getSolidVariant('primary', '$primary800', '$primary900', '$primary1000'),\n    getSolidVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n    getSolidVariant('success', '$success', '$successMid', '$successDark'),\n    getSolidVariant('warning', '$warning', '$warningMid', '$warningDark'),\n    getSolidVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n\n    getOutlineVariant('primary', '$primary800', '$primary900', '$primary1000'),\n    getOutlineVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n    getOutlineVariant('success', '$success', '$successMid', '$successDark'),\n    getOutlineVariant('warning', '$warning', '$warningMid', '$warningDark'),\n    getOutlineVariant('danger', '$danger', '$dangerMid', '$dangerDark')\n  ]\n})\n\ntype ActionIconProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  VariantProps<typeof StyledButton> & {\n    as?: string | React.ReactNode\n    children: React.ReactNode\n    label: string\n  } & Omit<TOptionalTooltipWrapperProps, 'label'> &\n    NavigatorActions\n>\n\nexport const ActionIcon: React.ForwardRefExoticComponent<ActionIconProps> =\n  React.forwardRef(\n    (\n      {\n        children,\n        theme = 'primary',\n        appearance = 'simple',\n        size = 'sm',\n        label,\n        href,\n        disabled,\n        hasTooltip = true,\n        tooltipSide,\n        ...remainingProps\n      },\n      ref\n    ) => {\n      const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n      invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n      const optionalLinkProps = href\n        ? ({\n            as: 'a',\n            href: disabled ? null : href,\n            onClick: undefined,\n            'aria-disabled': !!disabled\n          } as const)\n        : ({ type: 'button' } as const)\n\n      return (\n        <OptionalTooltipWrapper\n          hasTooltip={hasTooltip}\n          label={label}\n          tooltipSide={tooltipSide}\n        >\n          <StyledButton\n            {...optionalLinkProps}\n            {...getExternalAnchorProps(href)}\n            {...remainingProps}\n            aria-label={label}\n            theme={theme}\n            appearance={appearance}\n            size={size}\n            ref={ref}\n            disabled={disabled}\n          >\n            {React.Children.map(children, (child) => {\n              // TS needs this check for any following code to access child.type\n              // even with optional chaining\n              if (!React.isValidElement(child)) {\n                throw new Error(INVALID_CHILDREN_MESSAGE)\n              }\n\n              invariant(\n                child.type === Icon,\n                `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n              )\n\n              return React.cloneElement(child, {\n                size: ActionIconSizeMap[size as string],\n                css: { ...(child.props.css ? child.props.css : {}) }\n              })\n            })}\n          </StyledButton>\n        </OptionalTooltipWrapper>\n      )\n    }\n  )\n\nActionIcon.displayName = 'ActionIcon'\n"],"names":["getSimpleVariant","theme","base","interact","active","getSolidVariant","getOutlineVariant","StyledButton","styled","disabledStyle","ActionIcon","React","children","appearance","size","label","href","disabled","hasTooltip","tooltipSide","remainingProps","ref","INVALID_CHILDREN_MESSAGE","Icon","invariant","OptionalTooltipWrapper","getExternalAnchorProps","child","ActionIconSizeMap"],"mappings":"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"}