@atom-learning/components 2.27.0-beta.0 → 2.28.0-beta.0

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

@@ -1,278 +1,9 @@
 import * as React from 'react';
-import { TriggerListWrapper } from './TabsTriggerList';
-import { TabTrigger } from './TabTrigger';
+import { TabsTriggerList } from './TabsTriggerList';
+import { TabsTrigger } from './TabsTrigger';
+import { TabsContent } from './TabsContent';
 declare type TabsProps = React.ComponentProps<typeof StyledRoot>;
-declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement>>, {
-    theme?: "dark" | "light" | undefined;
-}, {
-    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;
-        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;
-    };
-    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: {
-        readonly [$$PropertyValue]: "background";
-    }) => {
-        background: {
-            readonly [$$PropertyValue]: "background";
-        };
-    };
-    inset: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        top: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        right: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        bottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        left: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    size: (value: string | number | {
-        readonly [$$ScaleValue]: "size";
-    }) => {
-        height: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
-        width: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
-    };
-    p: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        padding: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pt: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pr: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pb: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pl: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    px: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    py: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    m: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        margin: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mt: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mr: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mb: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    ml: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mx: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    my: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-}>>;
-declare const StyledTabContent: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsContentProps & React.RefAttributes<HTMLDivElement>>, {
-    theme?: "dark" | "light" | undefined;
-}, {
+declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement>>, {}, {
     sm: string;
     md: string;
     lg: string;
@@ -539,8 +270,8 @@ declare const StyledTabContent: import("@stitches/react/types/styled-component")
     };
 }>>;
 export declare const Tabs: React.FC<TabsProps> & {
-    TriggerList: typeof TriggerListWrapper;
-    Trigger: typeof TabTrigger;
-    Content: typeof StyledTabContent;
+    TriggerList: typeof TabsTriggerList;
+    Trigger: typeof TabsTrigger;
+    Content: typeof TabsContent;
 };
 export {};

package/dist/components/tabs/Tabs.js

@@ -1 +1 @@
-import{Root as l,Content as n}from"@radix-ui/react-tabs";import*as p from"react";import{styled as e}from"../../stitches.js";import{TriggerListWrapper as o}from"./TabsTriggerList.js";import{TabTrigger as s}from"./TabTrigger.js";import{passPropsToChildren as g}from"./utils.js";const h=e(l,{display:"flex",flexDirection:"column",variants:{theme:{light:{color:"$primary"},dark:{color:"white"}}}}),i=e(n,{flexGrow:1,fontFamily:"$body",variants:{theme:{light:{color:"$textForeground"},dark:{bg:"$primaryDark",color:"white"}}}}),r=({theme:t="light",children:m,...a})=>p.createElement(h,{theme:t,...a},g(m,{theme:t},[o,i]));r.TriggerList=o,r.Trigger=s,r.Content=i,r.displayName="Tabs";export{r as Tabs};
+import{Root as e}from"@radix-ui/react-tabs";import*as i from"react";import{styled as m}from"../../stitches.js";import{TabsTriggerList as s}from"./TabsTriggerList.js";import{TabsTrigger as a}from"./TabsTrigger.js";import{TabsContent as g}from"./TabsContent.js";const T=m(e),r=({children:o,...t})=>i.createElement(T,{...t},o);r.TriggerList=s,r.Trigger=a,r.Content=g,r.displayName="Tabs";export{r as Tabs};

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

@@ -0,0 +1,267 @@
+/// <reference types="react" />
+export declare const TabsContent: import("@stitches/react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsContentProps & import("react").RefAttributes<HTMLDivElement>>, {}, {
+    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;
+        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;
+    };
+    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: {
+        readonly [$$PropertyValue]: "background";
+    }) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
+    };
+    inset: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        top: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        right: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        bottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        left: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "size";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+}>>;

package/dist/components/tabs/TabsContent.js

@@ -0,0 +1 @@
+import{Content as o}from"@radix-ui/react-tabs";import{styled as t}from"../../stitches.js";const n=t(o,{flexGrow:1,fontFamily:"$body"}),r=n;export{r as TabsContent};

package/dist/components/tabs/{TabTrigger.d.ts → TabsTrigger.d.ts}

@@ -1,7 +1,5 @@
 import * as React from 'react';
-declare const StyledTabTrigger: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>, {
-    theme?: "dark" | "light" | undefined;
-}, {
+declare const StyledTabsTrigger: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>, {}, {
     sm: string;
     md: string;
     lg: string;
@@ -267,9 +265,8 @@ declare const StyledTabTrigger: import("@stitches/react/types/styled-component")
         };
     };
 }>>;
-interface TabTriggerProps extends React.ComponentProps<typeof StyledTabTrigger> {
+interface TabsTriggerProps extends React.ComponentProps<typeof StyledTabsTrigger> {
     value: string;
-    disabled?: boolean;
 }
-export declare const TabTrigger: React.FC<TabTriggerProps>;
+export declare const TabsTrigger: React.FC<TabsTriggerProps>;
 export {};

package/dist/components/tabs/TabsTrigger.js

@@ -0,0 +1 @@
+import{Trigger as i}from"@radix-ui/react-tabs";import*as e from"react";import{styled as a}from"../../stitches.js";import{Text as n}from"../text/Text.js";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";const s=a(i,{background:"none",border:"none",cursor:"pointer",flexShrink:0,p:"$4",userSelect:"none",borderBottom:"2px solid transparent",'&[data-state="active"]':{color:"$interactive1",fontWeight:600,letterSpacing:"-0.005em",borderColor:"currentColor"},"&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{"&:hover, &:focus-visible":{color:"$interactive2",bg:"$accentA1"},"&:active":{color:"$interactive3"},"&:focus-visible":{...c()}}}),r=({children:o,...t})=>e.createElement(s,{asChild:!0,...t},e.createElement(n,{size:"sm",as:"span"},o));r.displayName="TabsTrigger";export{r as TabsTrigger};

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

@@ -1,12 +1,6 @@
 import React from 'react';
-interface ListProps extends React.ComponentProps<typeof StyledTriggerList> {
-    enableTabScrolling?: boolean;
-    scrollPercentage?: number;
-}
-declare const StyledTriggerList: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>>, {
-    theme?: "dark" | "light" | undefined;
-    appearance?: "uppercase" | undefined;
-}, {
+import { ColorScheme } from '@atom-learning/color-scheme';
+declare const StyledTriggerList: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>>, {}, {
     sm: string;
     md: string;
     lg: string;
@@ -272,5 +266,7 @@ declare const StyledTriggerList: import("@stitches/react/types/styled-component"
         };
     };
 }>>;
-export declare const TriggerListWrapper: React.FC<ListProps>;
+export declare const TabsTriggerList: React.FC<React.ComponentProps<typeof StyledTriggerList> & {
+    colorScheme?: typeof ColorScheme;
+}>;
 export {};

package/dist/components/tabs/TabsTriggerList.js

@@ -1 +1 @@
-import{ChevronLeft as P,ChevronRight as R}from"@atom-learning/icons";import{List as _}from"@radix-ui/react-tabs";import{opacify as y}from"color2k";import o,{useRef as F,useState as f,useCallback as J,useEffect as k}from"react";import{debounce as K}from"throttle-debounce";import{ActionIcon as M}from"../action-icon/ActionIcon.js";import{Flex as X}from"../flex/Flex.js";import{Icon as W}from"../icon/Icon.js";import{theme as j,styled as x}from"../../stitches.js";import{TabTrigger as L}from"./TabTrigger.js";import{passPropsToChildren as C}from"./utils.js";const q=y("white",-.2),G=y(j.colors.primaryDark.value,-.2),T=x(M,{position:"absolute",transition:"all 125ms",variants:{theme:{light:{bg:`${q} !important`},dark:{bg:`${G} !important`,color:"currentColor !important"}},visible:{true:{opacity:1,visibility:"visible",pointerEvents:"all"},false:{opacity:0,visibility:"hidden",pointerEvents:"none"}}}}),S=x(_,{flexShrink:0,display:"flex",width:"100%",overflowX:"auto","&::-webkit-scrollbar":{display:"none"},scrollbarWidth:"none",variants:{theme:{light:{borderBottom:"1px solid $tonal300"},dark:{bg:"$primaryDark",borderBottom:"1px solid $tonal200"}},appearance:{uppercase:{"& button":{textTransform:"uppercase"}}}}}),H=({children:h,theme:i,appearance:d,enableTabScrolling:$,scrollPercentage:z=10,...b})=>{const s=F(null),[u,a]=f(!1),[v,c]=f(!1),[D,I]=f(),g=J(t=>{const e=s.current;if(e){const{scrollWidth:l,scrollLeft:n,offsetWidth:m}=e,E=Math.round(l*(z/100));let p=n;if(t==="right"){const r=n+E;p=r+m<=l?r:l-m}else{const r=n-E;p=r>0?r:0}e.scroll({left:p,behavior:"smooth"}),setTimeout(()=>{const{scrollWidth:r,scrollLeft:w,offsetWidth:A}=e,B=r-(w+A);w===0?(a(!1),c(!0)):B<5?(c(!1),a(!0)):(a(!0),c(!0))},500)}},[]);return k(()=>{const t=K(500,()=>{I(window.innerWidth)});return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[]),k(()=>{var t;const e=s.current;if(e){const{offsetWidth:l,scrollWidth:n}=e,m=n>l;(t=e.scroll)==null||t.call(e,{left:0}),a(!1),c(m)}},[D]),u||v||$?o.createElement(X,{css:{position:"relative"}},o.createElement(T,{size:"lg",label:"Scroll Left",theme:i,onClick:()=>g("left"),visible:u,css:{left:0}},o.createElement(W,{is:P})),o.createElement(S,{...b,ref:s,appearance:d,theme:i},C(h,{theme:i},[L])),o.createElement(T,{size:"lg",label:"Scroll right",theme:i,onClick:()=>g("right"),visible:v,css:{right:0}},o.createElement(W,{is:R}))):o.createElement(S,{theme:i,...b,appearance:d,ref:s},C(h,{theme:i},[L]))};export{H as TriggerListWrapper};
+import{List as r}from"@radix-ui/react-tabs";import i from"react";import{styled as m}from"../../stitches.js";import{ColorScheme as s}from"@atom-learning/color-scheme";const a=m(r,{flexShrink:0,display:"flex",borderBottom:"1px solid $base3",width:"max-content"}),c=({children:e,colorScheme:t={},...o})=>i.createElement(s,{as:a,base:"slate",accent:"blue",interactive:"hiContrast1",...t,...o},e);export{c as TabsTriggerList};

package/dist/components/toast/Toast.js

@@ -1 +1 @@
-import{Error as g,Close as h}from"@atom-learning/icons";import*as t from"react";import{toast as v}from"react-hot-toast";import{keyframes as a,styled as i}from"../../stitches.js";import{ActionIcon as y}from"../action-icon/ActionIcon.js";import{Icon as s}from"../icon/Icon.js";import{Loader as $}from"../loader/Loader.js";import{Text as w}from"../text/Text.js";const n=400,x=a({"0%":{transform:"translate3d(0,-100%,0)",opacity:0},"100%":{transform:"translate3d(0,0,0)",opacity:1}}),E=a({"0%":{transform:"translate3d(0,0,0)",opacity:1},"100%":{transform:"translate3d(0,-100%,0)",opacity:0}}),k=i("div",{position:"absolute",width:"100%",variants:{visible:{true:{"@allowMotion":{animation:`${x} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}},false:{opacity:0,"@allowMotion":{animation:`${E} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}}}}}),I=i("div",{pointerEvents:"auto",alignItems:"center",borderRadius:"$0",boxShadow:"$1",boxSizing:"border-box",color:"white",display:"flex",minHeight:"$5",pl:"$4",position:"relative",pr:"$6",py:"$4",transition:"background-color 50ms ease-out",width:"100%","@sm":{width:n},"@allowMotion":{transition:"background-color 50ms ease-out, transform 150ms ease-out"},variants:{status:{blank:{bg:"$primary"},error:{bg:"$danger"},loading:{bg:"$primary"},success:{bg:"$success"}}}}),T=t.memo(({ariaLive:l,height:m,id:e,message:c,role:p,type:o="blank",visible:d,calculateOffset:u,updateHeight:b})=>{const f=u(e,{reverseOrder:!0,margin:8});return t.createElement(k,{visible:d},t.createElement(I,{ref:r=>{r&&m===void 0&&b(e,r.getBoundingClientRect().height)},status:o,role:p,"aria-live":l,style:{transform:`translateY(${f}px)`}},o==="error"&&t.createElement(s,{size:"sm",css:{mr:"$3",flex:"0 0 auto"},is:g}),t.createElement(w,null,c),o==="loading"?t.createElement($,{css:{flex:"0 0 auto",ml:"auto"}}):t.createElement(y,{css:{position:"absolute",top:"$2",right:"$2",color:"white","&:hover,&:focus":{color:"white",opacity:.5}},label:"Close alert",onClick:()=>v.dismiss(e)},t.createElement(s,{is:h}))))});export{n as TOAST_WIDTH,T as Toast};
+import{Error as g,Close as $}from"@atom-learning/icons";import*as t from"react";import{toast as h}from"react-hot-toast";import{keyframes as a,styled as i}from"../../stitches.js";import{ActionIcon as v}from"../action-icon/ActionIcon.js";import{Icon as s}from"../icon/Icon.js";import{Loader as y}from"../loader/Loader.js";import{Text as w}from"../text/Text.js";const n=400,x=a({"0%":{transform:"translate3d(0,-100%,0)",opacity:0},"100%":{transform:"translate3d(0,0,0)",opacity:1}}),E=a({"0%":{transform:"translate3d(0,0,0)",opacity:1},"100%":{transform:"translate3d(0,-100%,0)",opacity:0}}),k=i("div",{position:"absolute",width:"100%",variants:{visible:{true:{"@allowMotion":{animation:`${x} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}},false:{opacity:0,"@allowMotion":{animation:`${E} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}}}}}),I=i("div",{pointerEvents:"auto",alignItems:"center",borderRadius:"$0",boxShadow:"$1",boxSizing:"border-box",color:"white",display:"flex",minHeight:"$5",pl:"$4",position:"relative",pr:"$6",py:"$4",transition:"background-color 50ms ease-out",width:"100%","@sm":{width:n},"@allowMotion":{transition:"background-color 50ms ease-out, transform 150ms ease-out"},variants:{status:{blank:{bg:"$primary"},error:{bg:"$danger"},loading:{bg:"$primary"},success:{bg:"$success"}}}}),T=t.memo(({ariaLive:l,height:m,id:e,message:c,role:p,type:o="blank",visible:d,calculateOffset:u,updateHeight:b})=>{const f=u(e,{reverseOrder:!0,margin:8});return t.createElement(k,{visible:d},t.createElement(I,{ref:r=>{r&&m===void 0&&b(e,r.getBoundingClientRect().height)},status:o,role:p,"aria-live":l,style:{transform:`translateY(${f}px)`}},o==="error"&&t.createElement(s,{size:"sm",css:{mr:"$3",flex:"0 0 auto"},is:g}),t.createElement(w,null,c),o==="loading"?t.createElement(y,{css:{flex:"0 0 auto",ml:"auto"}}):t.createElement(v,{css:{position:"absolute",top:"$2",right:"$2",color:"white","&:hover,&:focus":{color:"white",opacity:.5}},label:"Close alert",onClick:()=>h.dismiss(e)},t.createElement(s,{is:$}))))});export{n as TOAST_WIDTH,T as Toast};

package/dist/components/toast/ToastProvider.js

@@ -1 +1 @@
-import*as t from"react";import{useToaster as p}from"react-hot-toast";import{default as P}from"react-hot-toast";import{styled as c}from"../../stitches.js";import{TOAST_WIDTH as d,Toast as f}from"./Toast.js";import{MAX_Z_INDEX as u}from"../../constants/zIndices.js";const T=c("div",{left:"$2",position:"fixed",top:"$2",right:"$2",zIndex:u,"@sm":{top:"$3",right:"auto",left:`calc(50% - ${d/2}px)`}}),o=({children:a})=>{const{toasts:r,handlers:s}=p(),{startPause:i,endPause:m,calculateOffset:n,updateHeight:l}=s;return t.createElement(t.Fragment,null,t.createElement(T,{onMouseEnter:i,onMouseLeave:m},r.map(e=>t.createElement(f,{key:e.id,calculateOffset:n,updateHeight:l,...e}))),a)};o.displayName="ToastProvider";export{o as ToastProvider,P as toast};
+import*as t from"react";import{useToaster as p}from"react-hot-toast";import{default as _}from"react-hot-toast";import{styled as c}from"../../stitches.js";import{TOAST_WIDTH as d,Toast as f}from"./Toast.js";import{MAX_Z_INDEX as u}from"../../constants/zIndices.js";const T=c("div",{left:"$2",position:"fixed",top:"$2",right:"$2",zIndex:u,"@sm":{top:"$3",right:"auto",left:`calc(50% - ${d/2}px)`}}),o=({children:a})=>{const{toasts:r,handlers:s}=p(),{startPause:i,endPause:m,calculateOffset:n,updateHeight:l}=s;return t.createElement(t.Fragment,null,t.createElement(T,{onMouseEnter:i,onMouseLeave:m},r.map(e=>t.createElement(f,{key:e.id,calculateOffset:n,updateHeight:l,...e}))),a)};o.displayName="ToastProvider";export{o as ToastProvider,_ as toast};

package/dist/components/toggle-group/ToggleGroupButton.js

@@ -1 +1 @@
-import*as n from"react";import{styled as g}from"../../stitches.js";import{StyledIcon as f,Icon as r}from"../icon/Icon.js";import{StyledItem as h}from"./ToggleGroupItem.js";const s={sm:"32px",md:"40px",lg:"48px"},u={sm:"$4",md:"$5",lg:"$5"},x={sm:"$2",md:"$3",lg:"$3"},l=i=>({fontSize:`$${i}`,px:u[i],minHeight:s[i],"& > *:not(:last-child)":{mr:x[i]}}),d=g(h,{flexGrow:1,display:"flex",alignItems:"center",justifyContent:"center",fontWeight:600,lineHeight:1,py:"$1",[`& ${f}`]:{flexShrink:0},variants:{size:{sm:l("sm"),md:l("md"),lg:l("lg")},isIconOnly:{true:{}}},compoundVariants:[{isIconOnly:!0,size:"sm",css:{minWidth:s.sm,p:0}},{isIconOnly:!0,size:"md",css:{minWidth:s.md,p:0}},{isIconOnly:!0,size:"lg",css:{minWidth:s.lg,p:0}}]}),I=n.forwardRef(({size:i="md",children:p,...c},a)=>{var m;const t=n.Children.toArray(p),o=t.length<=1,y=o&&n.isValidElement(t[0])&&((m=t[0])==null?void 0:m.type)===r;return n.createElement(d,{ref:a,size:i,isIconOnly:y,...c},t.map(e=>!o&&typeof e=="string"?n.createElement("span",{key:e},e):n.isValidElement(e)&&(e==null?void 0:e.type)===r?n.cloneElement(e,{...e.props,size:i}):e))});export{d as StyledButton,I as ToggleGroupButton};
+import*as n from"react";import{styled as g}from"../../stitches.js";import{StyledIcon as f,Icon as r}from"../icon/Icon.js";import{StyledItem as h}from"./ToggleGroupItem.js";const t={sm:"32px",md:"40px",lg:"48px"},$={sm:"$4",md:"$5",lg:"$5"},u={sm:"$2",md:"$3",lg:"$3"},l=i=>({fontSize:`$${i}`,px:$[i],minHeight:t[i],"& > *:not(:last-child)":{mr:u[i]}}),d=g(h,{flexGrow:1,display:"flex",alignItems:"center",justifyContent:"center",fontWeight:600,lineHeight:1,py:"$1",[`& ${f}`]:{flexShrink:0},variants:{size:{sm:l("sm"),md:l("md"),lg:l("lg")},isIconOnly:{true:{}}},compoundVariants:[{isIconOnly:!0,size:"sm",css:{minWidth:t.sm,p:0}},{isIconOnly:!0,size:"md",css:{minWidth:t.md,p:0}},{isIconOnly:!0,size:"lg",css:{minWidth:t.lg,p:0}}]}),x=n.forwardRef(({size:i="md",children:p,...c},a)=>{var o;const s=n.Children.toArray(p),m=s.length<=1,y=m&&n.isValidElement(s[0])&&((o=s[0])==null?void 0:o.type)===r;return n.createElement(d,{ref:a,size:i,isIconOnly:y,...c},s.map(e=>!m&&typeof e=="string"?n.createElement("span",{key:e},e):n.isValidElement(e)&&(e==null?void 0:e.type)===r?n.cloneElement(e,{...e.props,size:i}):e))});export{d as StyledButton,x as ToggleGroupButton};

package/dist/components/tooltip/TooltipContent.js

@@ -1 +1 @@
-import{Content as m,Arrow as l}from"@radix-ui/react-tooltip";import*as t from"react";import{TOOLTIP_Z_INDEX as r}from"../../constants/zIndices.js";import{styled as a}from"../../stitches.js";import{slideDownAndFade as s,slideLeftAndFade as p,slideUpAndFade as f,slideRightAndFade as c}from"../../utilities/style/keyframe-animations.js";const h=a(m,{backgroundColor:"$tonal500",borderRadius:"$0",boxShadow:"$0",color:"white",fontFamily:"$body",fontSize:"$sm",lineHeight:1.5,whiteSpace:"normal",px:"$3",py:"$2",zIndex:r,"@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="delayed-open"]':{'&[data-side="top"]':{animationName:s},'&[data-side="right"]':{animationName:p},'&[data-side="bottom"]':{animationName:f},'&[data-side="left"]':{animationName:c}}},variants:{size:{sm:{maxWidth:"100px"},md:{maxWidth:"250px"},lg:{maxWidth:"400px"}}}}),x=a(l,{fill:"$tonal500",'[data-align="end"] &':{mr:"$2"},'[data-align="start"] &':{ml:"$2"}}),$=({children:i,side:e="top",sideOffset:o=4,size:n="md",...d})=>t.createElement(h,{side:e,sideOffset:o,size:n,...d},i,t.createElement(x,null));export{$ as TooltipContent};
+import{Content as m,Arrow as l}from"@radix-ui/react-tooltip";import*as a from"react";import{TOOLTIP_Z_INDEX as r}from"../../constants/zIndices.js";import{styled as t}from"../../stitches.js";import{slideDownAndFade as s,slideLeftAndFade as p,slideUpAndFade as f,slideRightAndFade as c}from"../../utilities/style/keyframe-animations.js";const h=t(m,{backgroundColor:"$tonal500",borderRadius:"$0",boxShadow:"$0",color:"white",fontFamily:"$body",fontSize:"$sm",lineHeight:1.5,whiteSpace:"normal",px:"$3",py:"$2",zIndex:r,"@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="delayed-open"]':{'&[data-side="top"]':{animationName:s},'&[data-side="right"]':{animationName:p},'&[data-side="bottom"]':{animationName:f},'&[data-side="left"]':{animationName:c}}},variants:{size:{sm:{maxWidth:"100px"},md:{maxWidth:"250px"},lg:{maxWidth:"400px"}}}}),x=t(l,{fill:"$tonal500",'[data-align="end"] &':{mr:"$2"},'[data-align="start"] &':{ml:"$2"}}),$=({children:i,side:e="top",sideOffset:o=4,size:n="md",...d})=>a.createElement(h,{side:e,sideOffset:o,size:n,...d},i,a.createElement(x,null));export{$ as TooltipContent};