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

package/dist/utilities/no-overflow-wrapper/NoOverflowWrapper.js

@@ -1,2 +1,2 @@
-import{Box as e}from"../../components/box/Box.js";import{styled as i}from"../../stitches.js";const o=()=>({size:"100%",borderRadius:"inherit",overflow:"hidden"}),r=i(e,o());r.displayName="NoOverflowWrapper";export{r as NoOverflowWrapper,o as noOverflowStyleBlock};
+import{styled as r}from"../../styled.js";const e=r("div",{base:["size-full","rounded-[inherit]","overflow-hidden"]});e.displayName="NoOverflowWrapper";export{e as NoOverflowWrapper};
 //# sourceMappingURL=NoOverflowWrapper.js.map

package/dist/utilities/no-overflow-wrapper/NoOverflowWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"NoOverflowWrapper.js","sources":["../../../src/utilities/no-overflow-wrapper/NoOverflowWrapper.tsx"],"sourcesContent":["import { Box } from '~/components/box'\nimport { styled } from '~/stitches'\n\nexport const noOverflowStyleBlock = (): {\n  size: string\n  borderRadius: string\n  overflow: string\n} => {\n  return {\n    size: '100%',\n    borderRadius: 'inherit',\n    overflow: 'hidden'\n  }\n}\n\nexport const NoOverflowWrapper = styled(Box, noOverflowStyleBlock())\n\nNoOverflowWrapper.displayName = 'NoOverflowWrapper'\n"],"names":["noOverflowStyleBlock","NoOverflowWrapper","styled","Box"],"mappings":"6FAGO,MAAMA,EAAuB,KAK3B,CACL,KAAM,OACN,aAAc,UACd,SAAU,QACZ,GAGWC,EAAoBC,EAAOC,EAAKH,EAAqB,CAAC,EAEnEC,EAAkB,YAAc"}
+{"version":3,"file":"NoOverflowWrapper.js","sources":["../../../src/utilities/no-overflow-wrapper/NoOverflowWrapper.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const NoOverflowWrapper = styled('div', {\n  base: ['size-full', 'rounded-[inherit]', 'overflow-hidden']\n})\n\nNoOverflowWrapper.displayName = 'NoOverflowWrapper'\n"],"names":["NoOverflowWrapper","styled"],"mappings":"yCAEa,MAAAA,EAAoBC,EAAO,MAAO,CAC7C,KAAM,CAAC,YAAa,oBAAqB,iBAAiB,CAC5D,CAAC,EAEDD,EAAkB,YAAc"}

package/dist/utilities/no-overflow-wrapper/index.d.ts

@@ -1 +1 @@
-export { NoOverflowWrapper, noOverflowStyleBlock } from './NoOverflowWrapper';
+export { NoOverflowWrapper } from './NoOverflowWrapper';

package/dist/utilities/override-styled-variant-value/overrideStyledVariantValue.d.ts

@@ -0,0 +1 @@
+export declare const overrideStyledVariantValue: (prop: any, overrideFunction: (any: any) => any) => any;

package/dist/utilities/override-styled-variant-value/overrideStyledVariantValue.js

@@ -0,0 +1,2 @@
+const c=(t,a)=>{let e;switch(typeof t){case"object":e={},Object.keys(t).forEach(o=>{const r=t[o];e[o]=r&&a(r)});break;default:e=a(t)}return e};export{c as overrideStyledVariantValue};
+//# sourceMappingURL=overrideStyledVariantValue.js.map

package/dist/utilities/override-styled-variant-value/overrideStyledVariantValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overrideStyledVariantValue.js","sources":["../../../src/utilities/override-styled-variant-value/overrideStyledVariantValue.ts"],"sourcesContent":["/*\n * Utility function to allow for overriding responsive variants using logic provided via the `overrideFunction` argument.\n *\n * It was developed out of a design requirement to override and pass through size properties to the <Icon /> component; depending\n * on the size of its parent component. It could be used for various other props where we want to tweak the value but\n * maintain the flexibility of a stitches variant property (which allows for use either via a string or a breakpoint object)\n * Documentation on stitches responsive variants: https://stitches.dev/docs/breakpoints#responsive-variants\n *\n */\nexport const overrideStyledVariantValue = (\n  prop: any,\n  overrideFunction: (any) => any\n) => {\n  let overrideValue\n  switch (typeof prop) {\n    case 'object':\n      overrideValue = {}\n      Object.keys(prop).forEach((breakpoint) => {\n        const propAtBreakpoint = prop[breakpoint]\n        overrideValue[breakpoint] = propAtBreakpoint\n          ? overrideFunction(propAtBreakpoint)\n          : propAtBreakpoint\n      })\n      break\n    default:\n      overrideValue = overrideFunction(prop)\n  }\n\n  return overrideValue\n}\n"],"names":["overrideStyledVariantValue","prop","overrideFunction","overrideValue","breakpoint","propAtBreakpoint"],"mappings":"AASa,MAAAA,EAA6B,CACxCC,EACAC,IACG,CACH,IAAIC,EACJ,OAAQ,OAAOF,EAAAA,CACb,IAAK,SACHE,EAAgB,CAAA,EAChB,OAAO,KAAKF,CAAI,EAAE,QAASG,GAAe,CACxC,MAAMC,EAAmBJ,EAAKG,CAAU,EACxCD,EAAcC,CAAU,EAAIC,GACxBH,EAAiBG,CAAgB,CAEvC,CAAC,EACD,MACF,QACEF,EAAgBD,EAAiBD,CAAI,CACzC,CAEA,OAAOE,CACT"}

package/dist/utilities/radix-overrides/index.d.ts

@@ -0,0 +1 @@
+export { ToggleGroup } from './toggle-group';

package/dist/utilities/radix-overrides/toggle-group/ToggleGroupRoot.d.ts

@@ -3,6 +3,5 @@ import * as React from 'react';
 type RootType = {
     disableDeselect?: boolean;
 };
-type ToggleGroupRootProps = React.ComponentProps<typeof ToggleGroup.Root> & RootType;
-export declare const ToggleGroupRoot: React.ForwardRefExoticComponent<ToggleGroupRootProps>;
+export declare const ToggleGroupRoot: React.ForwardRefExoticComponent<(Omit<ToggleGroup.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement> & RootType, "ref"> | Omit<ToggleGroup.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement> & RootType, "ref">) & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/utilities/radix-overrides/toggle-group/ToggleGroupRoot.js

@@ -1,2 +1,2 @@
-import*as g from"@radix-ui/react-toggle-group";import*as l from"react";const m=l.forwardRef(({disableDeselect:a=!1,onValueChange:t,defaultValue:o,...r},n)=>{const[u,f]=l.useState(o),s=e=>{a&&(e===""||(e==null?void 0:e.length)===0)||(f(e),t==null||t(e))};return l.createElement(g.Root,{ref:n,onValueChange:s,value:u,...r})});export{m as ToggleGroupRoot};
+import*as d from"@radix-ui/react-toggle-group";import*as l from"react";const g=l.forwardRef(({disableDeselect:a=!1,onValueChange:t,defaultValue:o,...r},n)=>{const[u,s]=l.useState(o),f=e=>{a&&(e===""||(e==null?void 0:e.length)===0)||(s(e),t==null||t(e))};return l.createElement(d.Root,{ref:n,onValueChange:f,value:u,...r})});export{g as ToggleGroupRoot};
 //# sourceMappingURL=ToggleGroupRoot.js.map

package/dist/utilities/radix-overrides/toggle-group/ToggleGroupRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupRoot.js","sources":["../../../../src/utilities/radix-overrides/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\ntype RootType = {\n  disableDeselect?: boolean\n}\n\ntype ToggleGroupRootProps = React.ComponentProps<typeof ToggleGroup.Root> &\n  RootType\n\nexport const ToggleGroupRoot: React.ForwardRefExoticComponent<ToggleGroupRootProps> =\n  React.forwardRef(\n    (\n      { disableDeselect = false, onValueChange, defaultValue, ...rest },\n      ref\n    ) => {\n      const [internalValue, setInternalValue] =\n        React.useState<ToggleGroupRootProps['value']>(defaultValue)\n      const handleValueChange: ToggleGroupRootProps['onValueChange'] = (\n        newValue\n      ) => {\n        if (disableDeselect && (newValue === '' || newValue?.length === 0))\n          return\n        setInternalValue(newValue)\n        onValueChange?.(newValue)\n      }\n\n      return (\n        // eslint-disable-next-line\n        // @ts-ignore Radix types complain on properties depending on whether `type=\"single\"` or `\"multiple\"`. Works correctly so muting.\n        <ToggleGroup.Root\n          ref={ref}\n          onValueChange={handleValueChange}\n          value={internalValue}\n          {...rest}\n        />\n      )\n    }\n  )\n"],"names":["ToggleGroupRoot","React","disableDeselect","onValueChange","defaultValue","rest","ref","internalValue","setInternalValue","handleValueChange","newValue","ToggleGroup"],"mappings":"uEAUO,MAAMA,EACXC,EAAM,WACJ,CACE,CAAE,gBAAAC,EAAkB,GAAO,cAAAC,EAAe,aAAAC,KAAiBC,CAAK,EAChEC,IACG,CACH,KAAM,CAACC,EAAeC,CAAgB,EACpCP,EAAM,SAAwCG,CAAY,EACtDK,EACJC,GACG,CACCR,IAAoBQ,IAAa,KAAMA,GAAA,KAAAA,OAAAA,EAAU,UAAW,KAEhEF,EAAiBE,CAAQ,EACzBP,GAAA,MAAAA,EAAgBO,CAAAA,EAClB,EAEA,OAGET,EAAA,cAACU,EAAY,KAAZ,CACC,IAAKL,EACL,cAAeG,EACf,MAAOF,EACN,GAAGF,CAAAA,CACN,CAEJ,CACF"}
+{"version":3,"file":"ToggleGroupRoot.js","sources":["../../../../src/utilities/radix-overrides/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\ntype RootType = {\n  disableDeselect?: boolean\n}\n\ntype ToggleGroupRootProps = React.ComponentProps<typeof ToggleGroup.Root> &\n  RootType\n\nexport const ToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  ToggleGroupRootProps\n>(({ disableDeselect = false, onValueChange, defaultValue, ...rest }, ref) => {\n  const [internalValue, setInternalValue] =\n    React.useState<ToggleGroupRootProps['value']>(defaultValue)\n  const handleValueChange: ToggleGroupRootProps['onValueChange'] = (\n    newValue\n  ) => {\n    if (disableDeselect && (newValue === '' || newValue?.length === 0)) return\n    setInternalValue(newValue)\n    onValueChange?.(newValue)\n  }\n\n  return (\n    // eslint-disable-next-line\n    // @ts-ignore Radix types complain on properties depending on whether `type=\"single\"` or `\"multiple\"`. Works correctly so muting.\n    <ToggleGroup.Root\n      ref={ref}\n      onValueChange={handleValueChange}\n      value={internalValue}\n      {...rest}\n    />\n  )\n})\n"],"names":["ToggleGroupRoot","React","disableDeselect","onValueChange","defaultValue","rest","ref","internalValue","setInternalValue","handleValueChange","newValue","ToggleGroup"],"mappings":"uEAUO,MAAMA,EAAkBC,EAAM,WAGnC,CAAC,CAAE,gBAAAC,EAAkB,GAAO,cAAAC,EAAe,aAAAC,EAAc,GAAGC,CAAK,EAAGC,IAAQ,CAC5E,KAAM,CAACC,EAAeC,CAAgB,EACpCP,EAAM,SAAwCG,CAAY,EACtDK,EACJC,GACG,CACCR,IAAoBQ,IAAa,KAAMA,GAAA,KAAAA,OAAAA,EAAU,UAAW,KAChEF,EAAiBE,CAAQ,EACzBP,GAAA,MAAAA,EAAgBO,CAAAA,EAClB,EAEA,OAGET,EAAA,cAACU,EAAY,KAAZ,CACC,IAAKL,EACL,cAAeG,EACf,MAAOF,EACN,GAAGF,CAAAA,CACN,CAEJ,CAAC"}

package/dist/utilities/radix-overrides/toggle-group/index.d.ts

@@ -1,5 +1,7 @@
 export declare const ToggleGroup: {
-    Root: import("react").ForwardRefExoticComponent<((import("@radix-ui/react-toggle-group").ToggleGroupSingleProps | import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps) & import("react").RefAttributes<HTMLDivElement>) & {
+    Root: import("react").ForwardRefExoticComponent<(Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & import("react").RefAttributes<HTMLDivElement> & {
         disableDeselect?: boolean;
-    }>;
+    }, "ref"> | Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & import("react").RefAttributes<HTMLDivElement> & {
+        disableDeselect?: boolean;
+    }, "ref">) & import("react").RefAttributes<HTMLDivElement>>;
 };

package/dist/utilities/style/backdrop-overlay.d.ts

@@ -1,14 +1 @@
-export declare const backdropOverlay: {
-    backgroundColor: string;
-    position: string;
-    inset: number;
-    zIndex: number;
-    '@allowMotion': {
-        '&[data-state="open"]': {
-            animation: string;
-        };
-        '&[data-state="closed"]': {
-            animation: string;
-        };
-    };
-};
+export declare const backdropOverlay: string[];

package/dist/utilities/style/backdrop-overlay.js

@@ -1,2 +1,2 @@
-import{DIALOG_Z_INDEX as o}from"../../constants/zIndices.js";import"../../stitches.js";import"../css-wrapper/CSSWrapper.js";import"../no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{fadeIn as t,fadeOut as a}from"./keyframe-animations.js";const e={backgroundColor:"$alpha600",position:"fixed",inset:0,zIndex:o,"@allowMotion":{'&[data-state="open"]':{animation:`${t} 250ms ease-out`},'&[data-state="closed"]':{animation:`${a} 550ms ease-out`}}};export{e as backdropOverlay};
+const a=["bg-alpha-600","fixed","inset-0","z-1147483646","motion-safe:data-[state=open]:animate-fade-in","motion-safe:data-[state=closed]:animate-fade-out"];export{a as backdropOverlay};
 //# sourceMappingURL=backdrop-overlay.js.map

package/dist/utilities/style/backdrop-overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"backdrop-overlay.js","sources":["../../../src/utilities/style/backdrop-overlay.ts"],"sourcesContent":["import { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { fadeIn, fadeOut } from '~/utilities'\n\nexport const backdropOverlay = {\n  backgroundColor: '$alpha600',\n  position: 'fixed',\n  inset: 0,\n  zIndex: DIALOG_Z_INDEX,\n  '@allowMotion': {\n    '&[data-state=\"open\"]': {\n      animation: `${fadeIn} 250ms ease-out`\n    },\n    '&[data-state=\"closed\"]': {\n      animation: `${fadeOut} 550ms ease-out`\n    }\n  }\n}\n"],"names":["backdropOverlay","DIALOG_Z_INDEX","fadeIn","fadeOut"],"mappings":"qQAGaA,EAAkB,CAC7B,gBAAiB,YACjB,SAAU,QACV,MAAO,EACP,OAAQC,EACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF"}
+{"version":3,"file":"backdrop-overlay.js","sources":["../../../src/utilities/style/backdrop-overlay.ts"],"sourcesContent":["export const backdropOverlay = [\n  'bg-alpha-600',\n  'fixed',\n  'inset-0',\n  'z-1147483646',\n  'motion-safe:data-[state=open]:animate-fade-in',\n  'motion-safe:data-[state=closed]:animate-fade-out'\n]\n"],"names":["backdropOverlay"],"mappings":"AAAO,MAAMA,EAAkB,CAC7B,eACA,QACA,UACA,eACA,gDACA,kDACF"}

package/dist/utilities/style/get-icon-size.js

@@ -1,2 +1,2 @@
-import{overrideStitchesVariantValue as i}from"../override-stitches-variant-value/overrideStitchesVariantValue.js";const m={sm:"sm",md:"md",lg:"md"},o=e=>i(e,t=>m[t]);export{o as getFieldIconSize};
+import{overrideStyledVariantValue as o}from"../override-styled-variant-value/overrideStyledVariantValue.js";const t={sm:"sm",md:"md",lg:"md"},d=e=>o(e,m=>t[m]);export{d as getFieldIconSize};
 //# sourceMappingURL=get-icon-size.js.map

package/dist/utilities/style/get-icon-size.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-icon-size.js","sources":["../../../src/utilities/style/get-icon-size.ts"],"sourcesContent":["import { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nconst toIconSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md'\n}\n\nexport const getFieldIconSize = (size: any) =>\n  overrideStitchesVariantValue(size, (s) => toIconSize[s])\n"],"names":["toIconSize","getFieldIconSize","size","overrideStitchesVariantValue","s"],"mappings":"kHAEA,MAAMA,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAoBC,GAC/BC,EAA6BD,EAAOE,GAAMJ,EAAWI,EAAE"}
+{"version":3,"file":"get-icon-size.js","sources":["../../../src/utilities/style/get-icon-size.ts"],"sourcesContent":["import { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nconst toIconSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md'\n}\n\nexport const getFieldIconSize = (size: any) =>\n  overrideStyledVariantValue(size, (s) => toIconSize[s])\n"],"names":["toIconSize","getFieldIconSize","size","overrideStyledVariantValue","s"],"mappings":"4GAEA,MAAMA,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAoBC,GAC/BC,EAA2BD,EAAOE,GAAMJ,EAAWI,CAAC,CAAC"}

package/dist/utilities/style/index.d.ts

@@ -1,6 +1 @@
-export * from './capsize';
-export * from './encode-background-icon';
-export * from './focus-visible-style-block';
-export * from './keyframe-animations';
 export * from './get-icon-size';
-export * from './disabledStyle';

package/package.json

@@ -4,16 +4,26 @@
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.js",
-  "version": "6.0.0-beta.1",
+  "version": "6.0.0-beta.10",
   "description": "",
   "files": [
-    "dist"
+    "dist",
+    "src/index.css"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs.js",
+      "default": "./dist/index.js"
+    },
+    "./index.css": "./src/index.css"
+  },
   "sideEffects": false,
   "scripts": {
     "dev": "NODE_ENV=development rollup -c -w",
     "build:lib": "NODE_ENV=production rollup -c",
-    "build:types": "NODE_ENV=production tsc --emitDeclarationOnly && tsc-alias",
+    "build:types": "NODE_ENV=production tsc --project tsconfig.build.json --emitDeclarationOnly && tsc-alias",
     "build:proptypes": "node ./scripts/generate-component-props.mjs",
     "start:sandbox": "vite -c ./sandbox/vite.config.js",
     "add-component": "node ./scripts/add-component.mjs",
@@ -59,10 +69,10 @@
   ],
   "devDependencies": {
     "@atom-learning/icons": "1.20.0",
-    "@atom-learning/jest-stitches": "1.0.10",
-    "@atom-learning/theme": "^5.0.1",
+    "@atom-learning/theme": "6.0.0-beta.1",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
     "@radix-ui/react-id": "1.0.1",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^17.1.0",
@@ -89,8 +99,9 @@
     "change-case": "^4.1.2",
     "chokidar": "^3.5.1",
     "del-cli": "^3.0.1",
+    "diffable-html": "^6.0.1",
     "es-jest": "^1.5.0",
-    "esbuild": "^0.14.10",
+    "esbuild": "^0.25.12",
     "eslint": "^7.18.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-import-resolver-typescript": "^2.3.0",
@@ -107,7 +118,8 @@
     "jest-dom": "^4.0.0",
     "lint-staged": "^10.5.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.2.1",
+    "prettier": "^3.6.2",
+    "pretty-format": "^30.2.0",
     "prompts": "^2.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -121,20 +133,18 @@
     "semantic-release-slack-bot": "^4.0.2",
     "semantic-release-yarn": "^3.0.2",
     "size-limit": "^7.0.5",
-    "stitches-reset": "^1.0.0",
     "tsc-alias": "^1.8.10",
     "typescript": "^5.5.4",
-    "vite": "^2.2.4",
+    "vite": "^7.2.2",
     "yargs": "^16.2.0"
   },
   "peerDependencies": {
     "@atom-learning/icons": "^1.0.0",
-    "@atom-learning/theme": "^5",
+    "@atom-learning/theme": "^6",
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
   "dependencies": {
-    "@atom-learning/stitches-react": "^1.4.1",
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/modifiers": "^6.0.0",
     "@dnd-kit/sortable": "^7.0.1",
@@ -158,8 +168,9 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "@radix-ui/react-visually-hidden": "^1.0.3",
     "@reach/combobox": "^0.16.1",
+    "@tailwindcss/vite": "^4.1.17",
     "@tanstack/react-table": "^8.5.11",
-    "color2k": "^2.0.0",
+    "clsx": "^2.1.1",
     "dayjs": "^1.10.7",
     "dayzed": "^3.2.2",
     "dlv": "^1.1.3",
@@ -174,6 +185,9 @@
     "react-hook-form": "^6.15.4",
     "react-hot-toast": "^1.0.2",
     "react-player": "^2.9.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss": "^4.1.17",
     "throttle-debounce": "^3.0.1",
     "uid": "^2.0.0",
     "use-deep-compare-effect": "^1.8.1"

package/src/index.css

@@ -0,0 +1,167 @@
+@import 'tailwindcss';
+
+@import '@atom-learning/theme/lib/theme-atom.css';
+
+@source '../src/';
+
+@theme {
+  --default-font-family: var(--font-body);
+  --easing: cubic-bezier(0.22, 1, 0.36, 1);
+
+  --bg-chevron: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%23757575%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%20color%3D%22%23757575%22%3E%3Cpolyline%20points%3D%226%2010%2012%2016%2018%2010%22%2F%3E%3C%2Fsvg%3E);
+
+  /**
+    * Font Feature Settings for Inter
+    *
+    * https://rsms.me/inter/#feature-examples
+    * https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
+    *
+    * These font-settings apply various character variants and stylistic alternatives
+    * to improve the readability of text.
+    *
+    * This will usually be applied across all app UI when used by a student.
+    */
+  --readability-features: 'cv02, cv04, cv05, cv08, cv11, ss03';
+  --readability-number-features: 'cv02, cv04, tnum';
+
+  /**
+   * Animations
+   */
+  --animate-accordion-open: accordion-open 300ms ease-out;
+  --animate-accordion-close: accordion-close 300ms ease-out;
+
+  @keyframes accordion-open {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-close {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  --animate-fade-in: fade-in 550ms var(--easing);
+  --animate-fade-out: fade-out 550ms var(--easing);
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes fade-out {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  --animate-slide-direction-in: slide-direction-in 225ms ease-out;
+  --animate-slide-direction-out: slide-direction-out 125ms ease-out;
+
+  @keyframes slide-direction-in {
+    0% {
+      opacity: var(--slide-opacity-out, 1);
+      translate: var(--slide-direction-out-x, 0) var(--slide-direction-out-y, 0);
+    }
+    100% {
+      opacity: var(--slide-opacity-in, 1);
+      translate: var(--slide-direction-in-x, 0) var(--slide-direction-in-y, 0);
+    }
+  }
+  @keyframes slide-direction-out {
+    0% {
+      opacity: var(--slide-opacity-in, 1);
+      translate: var(--slide-direction-in-x, 0) var(--slide-direction-in-y, 0);
+    }
+    100% {
+      opacity: var(--slide-opacity-out, 1);
+      translate: var(--slide-direction-out-x, 0) var(--slide-direction-out-y, 0);
+    }
+  }
+
+  --animate-slide-in-center: slide-in-center 550ms var(--easing);
+  --animate-slide-out-center: slide-out-center 550ms var(--easing);
+
+  @keyframes slide-in-center {
+    0% {
+      translate: -50% 50vh;
+    }
+    100% {
+      translate: -50% -50%;
+    }
+  }
+  @keyframes slide-out-center {
+    0% {
+      translate: -50% -50%;
+    }
+    100% {
+      translate: -50% 50vh;
+    }
+  }
+}
+
+@utility animation-delay-* {
+  animation-delay: calc(--value(integer) * 1ms);
+}
+
+@utility animation-duration-* {
+  animation-duration: calc(--value(integer) * 1ms);
+}
+
+@utility capsize-* {
+  &::before {
+    content: '';
+    margin-bottom: calc(-1em * --value([number]));
+    display: table;
+  }
+  &::after {
+    content: '';
+    margin-top: calc(-1em * --value([number]));
+    display: table;
+  }
+}
+
+@utility capsize-before-* {
+  &::before {
+    content: '';
+    margin-bottom: calc(-1em * --value([number]));
+    display: table;
+  }
+}
+
+@utility capsize-after-* {
+  &::after {
+    content: '';
+    margin-top: calc(-1em * --value([number]));
+    display: table;
+  }
+}
+
+/**
+ * Font Feature Settings for Inter
+ */
+@utility readability-features {
+  font-feature-settings: var(--readability-features);
+}
+
+@utility readability-number-features {
+  font-feature-settings: var(--readability-number-features);
+}
+
+@custom-variant supports-color-mix {
+  @supports (background-color: color-mix(in hsl, white 50%, transparent)) {
+    @slot;
+  }
+}