@atom-learning/components 2.28.1 → 2.28.3-beta.0

package/CHANGELOG.md

@@ -1,10 +1,3 @@
-## [2.28.1](https://github.com/Atom-Learning/components/compare/v2.28.0...v2.28.1) (2023-01-18)
-
-
-### Bug Fixes
-
-* added back theme for list ([b0c413e](https://github.com/Atom-Learning/components/commit/b0c413e25e2d4561b5ba497c9e1e0627486028e9))
-
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 
 

package/dist/components/accordion/AccordionContent.js

@@ -1 +1 @@
-import{Content as i}from"@radix-ui/react-accordion";import t from"react";import{keyframes as e,styled as n}from"../../stitches.js";import{CSSWrapper as c}from"../../utilities/css-wrapper/CSSWrapper.js";const d=e({from:{height:0},to:{height:"var(--radix-accordion-content-height)"}}),m=e({from:{height:"var(--radix-accordion-content-height)"},to:{height:0}}),s=n(i,{border:0,width:"100%",bg:"#fff",'&[data-state="open"]':{borderRadius:"0 0 $0 $0"},"@allowMotion":{'&[data-state="open"]':{animation:`${d} 300ms ease-out`},'&[data-state="closed"]':{animation:`${m} 300ms ease-out`}}}),h=({children:o,css:a,...r})=>t.createElement(s,{...r},t.createElement(c,{css:a},o));export{h as AccordionContent};
+import{Content as n}from"@radix-ui/react-accordion";import t from"react";import{keyframes as o,styled as i}from"../../stitches.js";import{CSSWrapper as d}from"../../utilities/css-wrapper/CSSWrapper.js";const c=o({from:{height:0},to:{height:"var(--radix-accordion-content-height)"}}),s=o({from:{height:"var(--radix-accordion-content-height)"},to:{height:0}}),m=i(n,{border:0,width:"100%",bg:"$background",overflow:"hidden",'&[data-state="open"]':{borderRadius:"0 0 $0 $0"},"@allowMotion":{'&[data-state="open"]':{animation:`${c} 300ms ease-out`},'&[data-state="closed"]':{animation:`${s} 300ms ease-out`}}}),h=({children:e,css:r,...a})=>t.createElement(m,{...a},t.createElement(d,{css:r},e));export{h as AccordionContent};

package/dist/components/accordion/AccordionItem.js

@@ -1 +1 @@
-import{Item as r}from"@radix-ui/react-accordion";import m from"react";import{styled as d}from"../../stitches.js";const l=d(r,{width:"100%",overflow:"hidden","&:not(:last-child)":{mb:"$1"}}),i=({children:t,value:e,...o})=>m.createElement(l,{value:e,...o},t);export{i as AccordionItem};
+import{Item as m}from"@radix-ui/react-accordion";import r from"react";import{styled as l}from"../../stitches.js";const c=l(m,{width:"100%","&:not(:last-child)":{mb:"$1"}}),i=({children:t,value:e,...o})=>r.createElement(c,{value:e,...o},t);export{i as AccordionItem};

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

@@ -1,7 +1,6 @@
 import React from 'react';
-declare const StyledTrigger: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>, {
-    theme?: "primaryDark" | "light" | "tonal" | undefined;
-}, {
+import { ColorScheme } 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>>, {}, {
     sm: string;
     md: string;
     lg: string;
@@ -267,6 +266,8 @@ declare const StyledTrigger: import("@stitches/react/types/styled-component").St
         };
     };
 }>>;
-declare type AccordionTriggerProps = React.ComponentProps<typeof StyledTrigger>;
+declare type AccordionTriggerProps = React.ComponentProps<typeof StyledTrigger> & {
+    colorScheme?: typeof ColorScheme;
+};
 export declare const AccordionTrigger: React.FC<AccordionTriggerProps>;
 export {};

package/dist/components/accordion/AccordionTrigger.js

@@ -1 +1 @@
-import{ChevronDown as s}from"@atom-learning/icons";import{Trigger as l}from"@radix-ui/react-accordion";import{darken as r}from"color2k";import n from"react";import{styled as i,theme as f}from"../../stitches.js";import{Icon as d}from"../icon/Icon.js";const a=(t,e,o,m="#fff")=>({bg:t,color:m,"&[disabled]":{bg:"$tonal100",cursor:"not-allowed",color:"$tonal400"},"&:not([disabled]):hover":{bg:e},"&:not([disabled]):active":{bg:o}}),p=i(d,{transition:"transform 300ms",'[data-state="open"] > &':{transform:"rotate(180deg)"},'[data-state="closed"] > &':{transform:"rotate(0deg)"}}),c=i(l,{border:0,py:"$3",px:"$4",width:"100%",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer",'&[data-state="open"]':{borderRadius:"$0 $0 0 0"},'&[data-state="closed"]':{borderRadius:"$0"},variants:{theme:{primaryDark:a("$primaryDark",r(f.colors.primaryDark.value,.1),r(f.colors.primaryDark.value,.15)),light:a("#fff",r("#fff",.1),r("#fff",.15),"$tonal600"),tonal:a("$tonal100",r("#fff",.1),r("#fff",.15),"$tonal500")}}}),g=({theme:t="primaryDark",children:e,...o})=>n.createElement(c,{theme:t,...o},e,n.createElement(p,{is:s}));export{g as AccordionTrigger};
+import{ChevronDown as i}from"@atom-learning/icons";import{Trigger as s}from"@radix-ui/react-accordion";import e from"react";import{styled as t}from"../../stitches.js";import{Icon as n}from"../icon/Icon.js";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";import{ColorScheme as d}from"../../experiments/color-scheme/ColorScheme.js";const l=t(n,{transition:"transform 300ms",'[data-state="open"] > &':{transform:"rotate(180deg)"},'[data-state="closed"] > &':{transform:"rotate(0deg)"}}),m=t(s,{border:0,py:"$3",px:"$4",width:"100%",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer",bg:"$interactive2",color:"$interactiveForeground","&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{"&:active, &:hover, &:focus-visible":{bg:"$interactive3"},"&:focus-visible":{...c()}},'&[data-state="open"]':{borderRadius:"$0 $0 0 0"},'&[data-state="closed"]':{borderRadius:"$0"}}),f=({children:o,colorScheme:r={},...a})=>e.createElement(d,{asChild:!0,accent:"slate",interactive:"loContrast1",...r},e.createElement(m,{...a},o,e.createElement(l,{is:i})));export{f as AccordionTrigger};

package/dist/components/data-table/DataTable.js

@@ -1 +1 @@
-import*as o from"react";import{DataTableBody as t}from"./DataTableBody.js";import{DataTableProvider as m}from"./DataTableContext.js";import{DataTableDataCell as e}from"./DataTableDataCell.js";import{DataTableError as l}from"./DataTableError.js";import{DataTableGlobalFilter as i}from"./DataTableGlobalFilter.js";import{DataTableHead as p}from"./DataTableHead.js";import{DataTableHeaderCell as b}from"./DataTableHeaderCell.js";import{DataTableLoading as D}from"./DataTableLoading.js";import{DataTableRow as T}from"./DataTableRow.js";import{DataTableTable as f}from"./DataTableTable.js";import"@dnd-kit/core";import"@dnd-kit/modifiers";import"@dnd-kit/sortable";import"../table/Table.js";import"@dnd-kit/utilities";import"@tanstack/react-table";import"./drag-and-drop/Handle.js";import{DragAndDropTable as d}from"./drag-and-drop/DragAndDropTable.js";import{Pagination as n}from"./pagination/Pagination.js";const a=r=>o.createElement(m,{...r});a.Body=t,a.DataCell=e,a.DragAndDropTable=d,a.Head=p,a.HeaderCell=b,a.Pagination=n,a.Row=T,a.GlobalFilter=i,a.Table=f,a.Loading=D,a.Error=l;export{a as DataTable};
+import*as o from"react";import{DataTableBody as t}from"./DataTableBody.js";import{DataTableProvider as e}from"./DataTableContext.js";import{DataTableDataCell as m}from"./DataTableDataCell.js";import{DataTableError as l}from"./DataTableError.js";import{DataTableGlobalFilter as i}from"./DataTableGlobalFilter.js";import{DataTableHead as p}from"./DataTableHead.js";import{DataTableHeaderCell as b}from"./DataTableHeaderCell.js";import{DataTableLoading as D}from"./DataTableLoading.js";import{DataTableRow as T}from"./DataTableRow.js";import{DataTableTable as f}from"./DataTableTable.js";import"./drag-and-drop/DragAndDropContainer.js";import"../table/Table.js";import"@dnd-kit/utilities";import"@dnd-kit/sortable";import"@tanstack/react-table";import"./drag-and-drop/Handle.js";import{DragAndDropTable as d}from"./drag-and-drop/DragAndDropTable.js";import{Pagination as n}from"./pagination/Pagination.js";const a=r=>o.createElement(e,{...r});a.Body=t,a.DataCell=m,a.DragAndDropTable=d,a.Head=p,a.HeaderCell=b,a.Pagination=n,a.Row=T,a.GlobalFilter=i,a.Table=f,a.Loading=D,a.Error=l;export{a as DataTable};

package/dist/components/data-table/drag-and-drop/DragAndDropContainer.d.ts

@@ -1,6 +1,9 @@
 import type { TAsyncDataResult, TableData } from '../DataTable.types';
 import type { UniqueIdentifier } from '@dnd-kit/core';
 import * as React from 'react';
+export declare const useDragAndDropTable: () => {
+    idColumn: string;
+};
 declare type DragAndDropContainerProps = {
     idColumn?: string;
     onChange?: (oldIndex: number, newIndex: number, newData: TableData) => void;

package/dist/components/data-table/drag-and-drop/DragAndDropContainer.js

@@ -1 +1 @@
-import{useDataTable as h}from"../DataTableContext.js";import{useSensors as D,useSensor as u,PointerSensor as f,KeyboardSensor as g,DndContext as y,closestCenter as C}from"@dnd-kit/core";import{restrictToVerticalAxis as S}from"@dnd-kit/modifiers";import{sortableKeyboardCoordinates as b,SortableContext as w,verticalListSortingStrategy as x,arrayMove as E}from"@dnd-kit/sortable";import*as c from"react";const p=(t,s,o,r,a)=>{const{active:i,over:d}=t,l=o.indexOf(i[r]),n=o.indexOf(d==null?void 0:d[r]),e=E(s.results,l,n);return a==null||a(l,n,e),{results:e,total:e.length}},m=(t,s)=>t.results.map(o=>{const r=o[s];if(r===void 0)throw new Error("To ensure drag-and-drop works correctly, please ensure that each row has a unique ID. Use the `id` property or pass DataTable an `idColumn` prop that defines the ID property on the rows.");return r}),T=({idColumn:t="id",onChange:s=void 0,children:o})=>{const{data:r,setData:a}=h(),i=c.useMemo(()=>m(r,t),[r]),d=D(u(f),u(g,{coordinateGetter:b}));return c.createElement(y,{sensors:d,collisionDetection:C,onDragEnd:l=>{const{active:n,over:e}=l;n.id&&(e==null?void 0:e.id)&&n.id!==(e==null?void 0:e.id)&&a(v=>p({active:n,over:e},v,i,t,s))},modifiers:[S]},c.createElement(w,{items:i,strategy:x},o))};export{T as DragAndDropContainer,m as getRowOrder,p as processDragEndEvent};
+import{useDataTable as g}from"../DataTableContext.js";import{useSensors as h,useSensor as u,PointerSensor as C,KeyboardSensor as f,DndContext as b,closestCenter as w}from"@dnd-kit/core";import{restrictToVerticalAxis as y}from"@dnd-kit/modifiers";import{sortableKeyboardCoordinates as x,SortableContext as E,verticalListSortingStrategy as S,arrayMove as T}from"@dnd-kit/sortable";import*as a from"react";const p=a.createContext({idColumn:"id"}),A=()=>{const e=a.useContext(p);if(!e)throw new Error("useDragAndDropTable can only be called within a DragAndDropContainer");return e},m=(e,i,o,t,s)=>{const{active:d,over:l}=e,c=o.indexOf(d.id),n=o.indexOf(l==null?void 0:l.id),r=T(i.results,c,n);return s==null||s(c,n,r),{results:r,total:r.length}},D=(e,i)=>e.results.map(o=>{const t=o[i];if(t===void 0)throw new Error("To ensure drag-and-drop works correctly, please ensure that each row has a unique ID. Use the `id` property or pass DataTable an `idColumn` prop that defines the ID property on the rows.");return t}),O=({idColumn:e="id",onChange:i=void 0,children:o})=>{const{data:t,setData:s}=g(),d=a.useMemo(()=>D(t,e),[t]),l=h(u(C),u(f,{coordinateGetter:x}));return a.createElement(b,{sensors:l,collisionDetection:w,onDragEnd:c=>{const{active:n,over:r}=c;n.id&&(r==null?void 0:r.id)&&n.id!==(r==null?void 0:r.id)&&s(v=>m({active:n,over:r},v,d,e,i))},modifiers:[y]},a.createElement(E,{items:d,strategy:S},a.createElement(p.Provider,{value:{idColumn:e}},o)))};export{O as DragAndDropContainer,D as getRowOrder,m as processDragEndEvent,A as useDragAndDropTable};

package/dist/components/data-table/drag-and-drop/DraggableRow.js

@@ -1 +1 @@
-import*as e from"react";import{Table as i}from"../../table/Table.js";import{DataTableDataCell as p}from"../DataTableDataCell.js";import"../DataTableContext.js";import"@dnd-kit/core";import"@dnd-kit/modifiers";import{useSortable as f}from"@dnd-kit/sortable";import{CSS as c}from"@dnd-kit/utilities";import{flexRender as d}from"@tanstack/react-table";import{Handle as g}from"./Handle.js";import"../DataTable.js";import"../DataTable.types.js";import"../DataTableLoading.js";const b=({row:t})=>{const{attributes:l,listeners:m,transform:a,setNodeRef:n,isDragging:o}=f({id:t.original.id});return e.createElement(i.Row,{ref:n,css:{transform:c.Transform.toString(a),zIndex:o?5:void 0}},t.getVisibleCells().map((r,s)=>s===0?e.createElement(i.Cell,{key:r.id},e.createElement(g,{...l,...m,isDragging:o,css:{display:"inline-block"},label:"drag and drop"}),d(r.column.columnDef.cell,r.getContext())):e.createElement(p,{key:r.id,cell:r})))};export{b as DraggableRow};
+import*as e from"react";import{Table as l}from"../../table/Table.js";import{DataTableDataCell as f}from"../DataTableDataCell.js";import{useDragAndDropTable as d}from"./DragAndDropContainer.js";import{CSS as g}from"@dnd-kit/utilities";import{useSortable as c}from"@dnd-kit/sortable";import{flexRender as b}from"@tanstack/react-table";import{Handle as D}from"./Handle.js";import"../DataTable.js";import"../DataTable.types.js";import"../DataTableContext.js";import"../DataTableLoading.js";const u=({row:t})=>{const{idColumn:i}=d(),{attributes:m,listeners:a,transform:n,setNodeRef:s,isDragging:o}=c({id:t.original[i]});return e.createElement(l.Row,{ref:s,css:{transform:g.Transform.toString(n),zIndex:o?5:void 0}},t.getVisibleCells().map((r,p)=>p===0?e.createElement(l.Cell,{key:r.id},e.createElement(D,{...m,...a,isDragging:o,css:{display:"inline-block"},label:"drag and drop"}),b(r.column.columnDef.cell,r.getContext())):e.createElement(f,{key:r.id,cell:r})))};export{u as DraggableRow};

package/dist/components/data-table/drag-and-drop/index.d.ts

@@ -1,4 +1,4 @@
-export { DragAndDropContainer } from './DragAndDropContainer';
+export { useDragAndDropTable, DragAndDropContainer } from './DragAndDropContainer';
 export { DraggableRow } from './DraggableRow';
 export { Handle } from './Handle';
 export { DragAndDropTable } from './DragAndDropTable';

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 i}from"@radix-ui/react-tabs";import*as e 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(i,{width:"100%"}),r=({children:t,...o})=>e.createElement(T,{...o},t);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 t}from"@radix-ui/react-tabs";import{styled as n}from"../../stitches.js";const e=n(t,{flexGrow:1,fontFamily:"$body"}),o=e;o.displayName="TabsContent";export{o as TabsContent};