@orfium/ictinus 5.46.0 → 5.46.2

package/README.md

@@ -1,101 +1,64 @@
 # Ictinus
 
-An internal UI kit library that is opinionated. Primary focus is to solve UI duplications and provide a unified and cross product UX, UI and accessibility.
+React implementation of Orfium's Ictinus Design System.
 
-<hr />
+## Installation
 
-![npm](https://img.shields.io/npm/v/@orfium/ictinus)
-[![pan](https://github.com/Orfium/orfium-ictinus/workflows/CI/badge.svg)](https://github.com/Orfium/orfium-ictinus/actions)
-![min size](https://img.shields.io/bundlephobia/min/@orfium/ictinus)
-![minzip size](https://img.shields.io/bundlephobia/minzip/@orfium/ictinus)
+Install the package using your package manager of choice:
 
-## 📦 Installation
-
-```text
-$ npm install @orfium/ictinus
-```
-
-```text
-$ yarn add @orfium/ictinus
-```
-
-Please note that react >= 16.0.0 and react-dom >= 16.0.0 are peer dependencies. Also that emotion 11 is being used and that
-will not work in older emotion projects.
-
-if you want the next version you can always use the next tag.
-Remember: this is a release candidate, we encourage you to lock version on installation to avoid any changes
-
-```text
-$ yarn add @orfium/ictinus@next
+```sh
+pnpm install @orfium/ictinus
 ```
 
-## 🔨 Usage
-
-1. Import the CSS styles at the top of your main entry file (e.g., `main.tsx` or `index.tsx`)
+## Getting Started
 
-```js
-import '@orfium/ictinus/styles.css';
-```
+### 1. Add the Provider
 
-2. Start by wrapping your App with ictinus `ThemeProvider` component like below
+Wrap your application with `ThemeProvider` and `VanillaThemeProvider`:
 
 ```jsx
 import { ThemeProvider } from '@orfium/ictinus';
-
-const App = () => (
-  <ThemeProvider>
-    <Router>...</Router>
-  </ThemeProvider>
-);
+import { ThemeProvider as VanillaThemeProvider } from '@orfium/ictinus/vanilla';
+
+export function App() {
+  return (
+    <ThemeProvider>
+      <VanillaThemeProvider>{/* Your app code here */}</VanillaThemeProvider>
+    </ThemeProvider>
+  );
+}
 ```
 
-3.  That's it, now you are ready to go.
-
-```js
-import { Select, Button } from '@orfium/ictinus';
-```
+### 3. Use Components
 
-## ✨ Extra
-
-### Theme usage
-
-Now you can can have access to the library's theme config by using the hook provided
+Import and use components in your application:
 
+```jsx
+import { Box, Button } from '@orfium/ictinus/vanilla';
+
+export function MyComponent() {
+  return (
+    <Box display="flex" alignItems="start" flexDirection="column">
+      <Button>Submit</Button>
+    </Box>
+  );
+}
 ```
-import { useTheme } from '@orfium/ictinus';
 
-const theme = useTheme();
-```
+## Migrating from Emotion to Vanilla CSS
 
-### Theme config
+Components are gradually moving from Emotion (`@orfium/ictinus`) to Vanilla Extract (`@orfium/ictinus/vanilla`); switch imports per component and keep both theme providers until Ictinus no longer uses Emotion.
 
-You can apply your own branded colours for each product at the definition of the ThemeProvider. This way you can have access everywhere.
+## Documentation
 
-```
-<ThemeProvider>
-    ...
-</ThemeProvider>
-```
+For comprehensive guides, component API reference, and more examples:
 
-### Emotion Project - Merge theme configs from different providers
+- [Storybook](https://designlab.orfium.com/)
 
-If you are already using emotion and you have defined a different provider you still have to define Ictinus ThemeProvider as well. You must put the theme config example at the top of the providers and yours afterwards.
+## Contributing
 
-Then you must use the below function to create a new theme config for the second provider
+See the [main repository](https://github.com/Orfium/orfium-ictinus) for contribution guidelines.
 
-```
-export const defaultTheme = (ancestorTheme: IctinusTheme) => ({
-  ...ancestorTheme,
-  ...theme,
-});
-```
-
-The final outcome will look like this.
+## License
 
-```
-<IctinusThemeProvider>
-  <ThemeProvider theme={defaultTheme}>
-    ....
-  </ThemeProvider>
-</IctinusThemeProvider>
-```
+Apache-2.0

package/dist/package.json.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
   "name": "@orfium/ictinus",
-  "version": "5.46.0",
+  "version": "5.46.2",
   "type": "module",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -37,7 +37,7 @@ declare const _default: {
   "devDependencies": {
     "@emotion/babel-plugin": "^11.13.5",
     "@emotion/hash": "^0.9.2",
-    "@emotion/jest": "^11.13.0",
+    "@emotion/jest": "^11.14.2",
     "@emotion/react": "^11.14.0",
     "@emotion/serialize": "^1.3.3",
     "@emotion/styled": "^11.14.1",
@@ -60,13 +60,13 @@ declare const _default: {
     "@types/recharts": "^1.8.25",
     "@types/styled-components": "^5.1.7",
     "@vanilla-extract/css": "^1.17.4",
-    "@vanilla-extract/rollup-plugin": "^1.4.1",
+    "@vanilla-extract/rollup-plugin": "^1.5.3",
     "@vanilla-extract/vite-plugin": "^5.1.1",
     "@vitejs/plugin-react": "^4.1.0",
     "@vitest/coverage-v8": "catalog:",
     "fast-glob": "^3.3.2",
     "globals": "^16.3.0",
-    "jsdom": "^25.0.0",
+    "jsdom": "catalog:",
     "postcss-pxtorem": "^6.1.0",
     "prettier": "^3.5.3",
     "prettier-plugin-organize-imports": "^4.1.0",
@@ -78,9 +78,8 @@ declare const _default: {
     "rollup-plugin-typescript-paths": "^1.5.0",
     "styled-components": "^5.2.0",
     "vite": "catalog:",
-    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-dts": "catalog:",
     "vite-plugin-svgr": "^4.5.0",
-    "vite-plugin-turbosnap": "^1.0.3",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "catalog:"
   },
@@ -95,8 +94,8 @@ declare const _default: {
     "@vanilla-extract/sprinkles": "^1.6.5",
     "clsx": "^2.1.1",
     "dayjs": "^2.0.0-alpha.4",
-    "jscodeshift": "^0.15.1",
-    "lodash-es": "^4.17.21",
+    "jscodeshift": "^17.3.0",
+    "lodash-es": "^4.18.1",
     "pluralize": "^8.0.0",
     "polished": "^4.3.1",
     "react-aria": "^3.43.1",
@@ -105,7 +104,7 @@ declare const _default: {
     "react-highlight-words": "^0.20.0",
     "react-range": "^1.8.12",
     "react-responsive": "^10.0.0",
-    "react-stately": "^3.41.0",
+    "react-stately": "^3.47.0",
     "react-textarea-autosize": "^8.5.3",
     "react-tooltip": "^5.26.4",
     "react-window": "^1.8.6",

package/dist/package.json.js

@@ -1,4 +1,4 @@
-const o = "5.46.0";
+const o = "5.46.2";
 export {
   o as version
 };

package/dist/vanilla/Dropdown/Dropdown-css.js

@@ -1,8 +1,8 @@
-import './../assets/src/layers/layers.css.ts.vanilla-IMjbF_n6.css';
+import './../assets/src/layers/layers.css.ts.vanilla-DOIAmKzq.css';
 import './../assets/src/sprinkles/global.css.ts.vanilla-DRokxD0M.css';
-import './../assets/src/sprinkles/properties.css.ts.vanilla-CgAnwoJl.css';
+import './../assets/src/sprinkles/properties.css.ts.vanilla-Bg6g3lPE.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var separator = createRuntimeFn({defaultClassName:'nof6hx _123rexg',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
+var separator = createRuntimeFn({defaultClassName:'_48boly _18yarz8',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
 
 export { separator };

package/dist/vanilla/Menu/Menu-css.js

@@ -1,10 +1,10 @@
-import './../assets/src/layers/layers.css.ts.vanilla-IMjbF_n6.css';
+import './../assets/src/layers/layers.css.ts.vanilla-DOIAmKzq.css';
 import './../assets/src/sprinkles/global.css.ts.vanilla-DRokxD0M.css';
-import './../assets/src/sprinkles/properties.css.ts.vanilla-CgAnwoJl.css';
-import './../assets/src/vanilla/Menu/Menu.css.ts.vanilla-_CX_KJYW.css';
+import './../assets/src/sprinkles/properties.css.ts.vanilla-Bg6g3lPE.css';
+import './../assets/src/vanilla/Menu/Menu.css.ts.vanilla-BX4axxMl.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var item = createRuntimeFn({defaultClassName:'qsyol5 xdu8sx _5uqyp rmkwp7 _1yzcyga _1bjyyxj _1y3sibo _1j4jdrd',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
-var menu = createRuntimeFn({defaultClassName:'qtpll8 _15qvxga _5arml9 l6kjmv wz3w28',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
+var item = createRuntimeFn({defaultClassName:'fl39fk _1ngfy6r _1x05qv3 _1acxqa nbaqhl _1e7zg6e qux2zl _1mt7prj',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
+var menu = createRuntimeFn({defaultClassName:'cw9xxz _28gdcq yrg53w _8jmaib _11crbec',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
 
 export { item, menu };

package/dist/vanilla/Popover/Popover-css.js

@@ -1,10 +1,10 @@
-import './../assets/src/layers/layers.css.ts.vanilla-IMjbF_n6.css';
+import './../assets/src/layers/layers.css.ts.vanilla-DOIAmKzq.css';
 import './../assets/src/sprinkles/global.css.ts.vanilla-DRokxD0M.css';
-import './../assets/src/sprinkles/properties.css.ts.vanilla-CgAnwoJl.css';
-import './../assets/src/vanilla/Popover/Popover.css.ts.vanilla-ChNqyd-w.css';
+import './../assets/src/sprinkles/properties.css.ts.vanilla-Bg6g3lPE.css';
+import './../assets/src/vanilla/Popover/Popover.css.ts.vanilla-BfVDFq-Y.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var arrow = createRuntimeFn({defaultClassName:'_1ou1iov',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
-var popover = createRuntimeFn({defaultClassName:'amrd6a _16qs46f _1kkvjq2',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
+var arrow = createRuntimeFn({defaultClassName:'_1motiv3',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
+var popover = createRuntimeFn({defaultClassName:'_1ydgfg8 _9pb4gh bmw4mx',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
 
 export { arrow, popover };

package/dist/vanilla/Table/Table-css.js

@@ -1,10 +1,10 @@
-import './../assets/src/layers/layers.css.ts.vanilla-IMjbF_n6.css';
+import './../assets/src/layers/layers.css.ts.vanilla-DOIAmKzq.css';
 import './../assets/src/sprinkles/global.css.ts.vanilla-DRokxD0M.css';
-import './../assets/src/sprinkles/properties.css.ts.vanilla-CgAnwoJl.css';
-import './../assets/src/vanilla/Table/Table.css.ts.vanilla-Cx9oEFSr.css';
+import './../assets/src/sprinkles/properties.css.ts.vanilla-Bg6g3lPE.css';
+import './../assets/src/vanilla/Table/Table.css.ts.vanilla-CApleDcw.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var table = createRuntimeFn({defaultClassName:'_1hl8h14 _1tsxgwz h5vpau reeejj',variantClassNames:{layout:{auto:'ixvvpl',fixed:'_1cinar6 _6vw083'}},defaultVariants:{},compoundVariants:[]});
-var wrapper = createRuntimeFn({defaultClassName:'nt0mqz l6kjmv amrd6a jq31zo _1cfh0v5 _7v036u _1dk51hi nof6hx _16qs46f or1s98 _123rexg _15iy962',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
+var table = createRuntimeFn({defaultClassName:'_173xuhb _1d591np pl9j8m _184g68d',variantClassNames:{layout:{auto:'_1gd2ec5',fixed:'o2rj6r _1c9e2jo'}},defaultVariants:{},compoundVariants:[]});
+var wrapper = createRuntimeFn({defaultClassName:'_43cmje _8jmaib _1ydgfg8 _13y1047 _14vp3gu _1a63am2 lcut4n _48boly _9pb4gh _1774d4p _18yarz8 _125v9io',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
 
 export { table, wrapper };

package/dist/vanilla/Table/TableBody-css.js

@@ -1,6 +1,6 @@
-import './../assets/src/layers/layers.css.ts.vanilla-IMjbF_n6.css';
-import './../assets/src/vanilla/Table/TableBody.css.ts.vanilla-D6wJiebX.css';
+import './../assets/src/layers/layers.css.ts.vanilla-DOIAmKzq.css';
+import './../assets/src/vanilla/Table/TableBody.css.ts.vanilla-Bz_aiA7e.css';
 
-var body = 'nrnsv1';
+var body = '_1uozx7x';
 
 export { body };

package/dist/vanilla/Table/TableCell-css.js

@@ -1,10 +1,10 @@
-import './../assets/src/layers/layers.css.ts.vanilla-IMjbF_n6.css';
+import './../assets/src/layers/layers.css.ts.vanilla-DOIAmKzq.css';
 import './../assets/src/sprinkles/global.css.ts.vanilla-DRokxD0M.css';
-import './../assets/src/sprinkles/properties.css.ts.vanilla-CgAnwoJl.css';
-import './../assets/src/vanilla/Table/TableCell.css.ts.vanilla-yoCXB3yl.css';
+import './../assets/src/sprinkles/properties.css.ts.vanilla-Bg6g3lPE.css';
+import './../assets/src/vanilla/Table/TableCell.css.ts.vanilla-CBZnxJew.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var cell = createRuntimeFn({defaultClassName:'_16qs46f _123rexg _4w1zhl',variantClassNames:{pinned:{false:'_1mgftge',true:'ez4njf'}},defaultVariants:{},compoundVariants:[]});
-var content = createRuntimeFn({defaultClassName:'_1hl8h14 _1iprhki _1soajdx _1tsxgwz qtpll8 _5arml9 _123rexg n0vztp _1xpzbca',variantClassNames:{size:{sm:'_1rc6f80',md:'_1xcwxu9',lg:'_1xh357e',auto:'rbfac8'},bordered:{true:'_16bn8zl'}},defaultVariants:{},compoundVariants:[]});
+var cell = createRuntimeFn({defaultClassName:'_9pb4gh _18yarz8 _17hx6i6',variantClassNames:{pinned:{false:'snu1id',true:'nmjtkp'}},defaultVariants:{},compoundVariants:[]});
+var content = createRuntimeFn({defaultClassName:'_173xuhb _1ab44ap g754my _1d591np cw9xxz yrg53w _18yarz8 _11j3ix8 jo4rfh',variantClassNames:{size:{sm:'sbh5et',md:'_1rxahqf',lg:'_10wj8ip',auto:'jlfisy'},bordered:{true:'_180fw9c'}},defaultVariants:{},compoundVariants:[]});
 
 export { cell, content };

package/dist/vanilla/Table/TableFooter-css.js

@@ -1,7 +1,7 @@
-import './../assets/src/layers/layers.css.ts.vanilla-IMjbF_n6.css';
-import './../assets/src/vanilla/Table/TableFooter.css.ts.vanilla-6lhlGhY6.css';
+import './../assets/src/layers/layers.css.ts.vanilla-DOIAmKzq.css';
+import './../assets/src/vanilla/Table/TableFooter.css.ts.vanilla-Dyeqo-f_.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var footer = createRuntimeFn({defaultClassName:'_7tgm7v',variantClassNames:{pinned:{false:'xjr34i',true:'qnlu1r'}},defaultVariants:{},compoundVariants:[]});
+var footer = createRuntimeFn({defaultClassName:'_1qbvob5',variantClassNames:{pinned:{false:'flpxm',true:'_1qdi8qx'}},defaultVariants:{},compoundVariants:[]});
 
 export { footer };

package/dist/vanilla/Table/TableHeader-css.js

@@ -1,7 +1,7 @@
-import './../assets/src/layers/layers.css.ts.vanilla-IMjbF_n6.css';
-import './../assets/src/vanilla/Table/TableHeader.css.ts.vanilla-BFUvzHUo.css';
+import './../assets/src/layers/layers.css.ts.vanilla-DOIAmKzq.css';
+import './../assets/src/vanilla/Table/TableHeader.css.ts.vanilla-C-O5bQOq.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var header = createRuntimeFn({defaultClassName:'mq169p',variantClassNames:{pinned:{false:'_10km2he',true:'_1etsn4z'}},defaultVariants:{},compoundVariants:[]});
+var header = createRuntimeFn({defaultClassName:'_11xqhou',variantClassNames:{pinned:{false:'_1mxjwmx',true:'gsq08k'}},defaultVariants:{},compoundVariants:[]});
 
 export { header };

package/dist/vanilla/Table/TableHeaderCell-css.js

@@ -1,12 +1,12 @@
-import './../assets/src/layers/layers.css.ts.vanilla-IMjbF_n6.css';
+import './../assets/src/layers/layers.css.ts.vanilla-DOIAmKzq.css';
 import './../assets/src/sprinkles/global.css.ts.vanilla-DRokxD0M.css';
-import './../assets/src/sprinkles/properties.css.ts.vanilla-CgAnwoJl.css';
-import './../assets/src/vanilla/Table/TableHeader.css.ts.vanilla-BFUvzHUo.css';
-import './../assets/src/vanilla/Table/TableRow.css.ts.vanilla-Ce2GojWZ.css';
-import './../assets/src/vanilla/Table/TableHeaderCell.css.ts.vanilla-BEjMlivm.css';
+import './../assets/src/sprinkles/properties.css.ts.vanilla-Bg6g3lPE.css';
+import './../assets/src/vanilla/Table/TableHeader.css.ts.vanilla-C-O5bQOq.css';
+import './../assets/src/vanilla/Table/TableRow.css.ts.vanilla-CZTMbW9k.css';
+import './../assets/src/vanilla/Table/TableHeaderCell.css.ts.vanilla-nEcsr4g7.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var cell = createRuntimeFn({defaultClassName:'_123rexg q0m1ig czk4bc',variantClassNames:{pinned:{false:'_1675o31',true:'_1dkkjtl'}},defaultVariants:{},compoundVariants:[]});
-var content = createRuntimeFn({defaultClassName:'_1hl8h14 _1iprhki _1soajdx _1prh31k qtpll8 _5arml9 n0vztp _123rexg _1ay01bb',variantClassNames:{size:{sm:'_1rc6f80',md:'_1xcwxu9',lg:'_1xh357e'},bordered:{true:'e44n3t'}},defaultVariants:{},compoundVariants:[]});
+var cell = createRuntimeFn({defaultClassName:'_18yarz8 _19ldfpc w9qmm1',variantClassNames:{pinned:{false:'_15m4jdr',true:'j274se'}},defaultVariants:{},compoundVariants:[]});
+var content = createRuntimeFn({defaultClassName:'_173xuhb _1ab44ap g754my _1u7ctem cw9xxz yrg53w _11j3ix8 _18yarz8 ronnj8',variantClassNames:{size:{sm:'sbh5et',md:'_1rxahqf',lg:'_10wj8ip'},bordered:{true:'fhgsmr'}},defaultVariants:{},compoundVariants:[]});
 
 export { cell, content };

package/dist/vanilla/Table/TableRow-css.js

@@ -1,9 +1,9 @@
-import './../assets/src/layers/layers.css.ts.vanilla-IMjbF_n6.css';
+import './../assets/src/layers/layers.css.ts.vanilla-DOIAmKzq.css';
 import './../assets/src/sprinkles/global.css.ts.vanilla-DRokxD0M.css';
-import './../assets/src/sprinkles/properties.css.ts.vanilla-CgAnwoJl.css';
-import './../assets/src/vanilla/Table/TableRow.css.ts.vanilla-Ce2GojWZ.css';
+import './../assets/src/sprinkles/properties.css.ts.vanilla-Bg6g3lPE.css';
+import './../assets/src/vanilla/Table/TableRow.css.ts.vanilla-CZTMbW9k.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var row = createRuntimeFn({defaultClassName:'_9b7t0x _1hl8h14 _1p6is0t',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
+var row = createRuntimeFn({defaultClassName:'_1rfrwqg _173xuhb _6ylpg4',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
 
 export { row };

package/dist/vanilla/Text/Text-css.js

@@ -1,7 +1,7 @@
-import './../assets/src/layers/layers.css.ts.vanilla-IMjbF_n6.css';
-import './../assets/src/vanilla/Text/Text.css.ts.vanilla-Dc-awaCi.css';
+import './../assets/src/layers/layers.css.ts.vanilla-DOIAmKzq.css';
+import './../assets/src/vanilla/Text/Text.css.ts.vanilla-DgBbyUou.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var text = createRuntimeFn({defaultClassName:'_1xes09n',variantClassNames:{lineClamp:{'1':'_1vrumza _7kn758 _1qbod0p yu6qwh','2':'ny1rrl _7kn758 _1qbod0p dwyapw','3':'wtpgq4 _7kn758 _1qbod0p _1yi8ohl','4':'_1m9b0ay _7kn758 _1qbod0p js9kap'},truncate:{true:'_10t0g25 _7kn758'}},defaultVariants:{},compoundVariants:[]});
+var text = createRuntimeFn({defaultClassName:'_1r9w0wt',variantClassNames:{lineClamp:{'1':'tq3w8q _19esucb z4mv2j _1ch6vr6','2':'_3you51 _19esucb z4mv2j _14auaoe','3':'mlopkd _19esucb z4mv2j rhwql','4':'_1ljoqkc _19esucb z4mv2j y41ov1'},truncate:{true:'_1mxooxc _19esucb'}},defaultVariants:{},compoundVariants:[]});
 
 export { text };

package/dist/vanilla/Text/Text.js

@@ -8,22 +8,21 @@ import '../src/sprinkles/sprinkles.js';
 import { text } from './Text-css.js';
 
 const Slot = createSlot("@orfium/ictinus/Text");
-const Text = forwardRef(
-  ({ asChild, children, className, lineClamp, truncate, ...props }, ref) => {
-    props = useSlotProps(props, "text");
-    const Comp = asChild ? Slot : "span";
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        asChild: true,
-        ref,
-        className: cn(text({ lineClamp, truncate }), className),
-        ...props,
-        children: /* @__PURE__ */ jsx(Comp, { children })
-      }
-    );
-  }
-);
+const Text = forwardRef((props, ref) => {
+  props = useSlotProps(props, "text");
+  const { asChild, children, className, lineClamp, truncate, ...restProps } = props;
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      asChild: true,
+      ref,
+      className: cn(text({ lineClamp, truncate }), className),
+      ...restProps,
+      children: /* @__PURE__ */ jsx(Comp, { children })
+    }
+  );
+});
 Text.displayName = "Text";
 
 export { Text };

package/dist/vanilla/Tooltip/Tooltip-css.js

@@ -1,12 +1,12 @@
-import './../assets/src/layers/layers.css.ts.vanilla-IMjbF_n6.css';
+import './../assets/src/layers/layers.css.ts.vanilla-DOIAmKzq.css';
 import './../assets/src/sprinkles/global.css.ts.vanilla-DRokxD0M.css';
-import './../assets/src/sprinkles/properties.css.ts.vanilla-CgAnwoJl.css';
-import './../assets/src/vanilla/Tooltip/Tooltip.css.ts.vanilla-C_aGKL12.css';
+import './../assets/src/sprinkles/properties.css.ts.vanilla-Bg6g3lPE.css';
+import './../assets/src/vanilla/Tooltip/Tooltip.css.ts.vanilla-CZjbGORc.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var arrow = createRuntimeFn({defaultClassName:'a2rdqw',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
-var arrowInverse = createRuntimeFn({defaultClassName:'sljcfc',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
-var arrowInverseBorder = 'vchew0';
-var tooltip = createRuntimeFn({defaultClassName:'mjbhy2 qtpll8 _15qvxga amrd6a _1q2os7l e8p0x9',variantClassNames:{inverse:{true:'_1cfh0v5 _7v036u _1dk51hi nof6hx _9p9wst _1tsxgwz _123rexg di0wvq',false:'jw3zmj _16x2wlc'}},defaultVariants:{},compoundVariants:[]});
+var arrow = createRuntimeFn({defaultClassName:'_12mes6z',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
+var arrowInverse = createRuntimeFn({defaultClassName:'_1varswl',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
+var arrowInverseBorder = '_13lj9rf';
+var tooltip = createRuntimeFn({defaultClassName:'_1n24s6c cw9xxz _28gdcq _1ydgfg8 _1d4jc9u _9gx98v',variantClassNames:{inverse:{true:'_14vp3gu _1a63am2 lcut4n _48boly z1tf86 _1d591np _18yarz8 _75c0z6',false:'f9nucr _133vhkz'}},defaultVariants:{},compoundVariants:[]});
 
 export { arrow, arrowInverse, arrowInverseBorder, tooltip };

package/dist/vanilla/assets/src/actions/{ActionsContent.css.ts.vanilla-Blx4pWwn.css → ActionsContent.css.ts.vanilla-CTfz-Dds.css}

@@ -1,20 +1,20 @@
-@layer ictinus.mqfe5f;
-@layer ictinus.mqfe5f {
-  ._1jwinhw {
+@layer ictinus._1vlnks0;
+@layer ictinus._1vlnks0 {
+  ._17ka3bn {
     transition: opacity 150ms ease;
   }
-  .e6cwkz:not(:has(.e6cwkz)):focus-within ._1jwinhw, ._1jwinhw:is(:checked, [data-state=open], :has(:checked, [data-state=open], [aria-expanded=true])) {
+  .xj2ewb:not(:has(.xj2ewb)):focus-within ._17ka3bn, ._17ka3bn:is(:checked, [data-state=open], :has(:checked, [data-state=open], [aria-expanded=true])) {
     opacity: 1;
     transition: none;
   }
-  ._317fc3 {
+  .wzzrjg {
     opacity: 1;
   }
-  ._1xdpzp4 {
+  .bcalws {
     opacity: 0;
   }
   @media (hover: hover) {
-    .e6cwkz:not(:has(.e6cwkz)):hover ._1jwinhw {
+    .xj2ewb:not(:has(.xj2ewb)):hover ._17ka3bn {
       opacity: 1;
       transition: none;
     }

package/dist/vanilla/assets/src/avatar/{Avatar.css.ts.vanilla-CU7FGH6V.css → Avatar.css.ts.vanilla-C9H16jiF.css}

@@ -1,62 +1,62 @@
-@layer ictinus.mqfe5f;
-@layer ictinus.mqfe5f {
-  ._1pwzcop {
+@layer ictinus._1vlnks0;
+@layer ictinus._1vlnks0 {
+  .uj4a5q {
     border-color: var(--ictinus-color-palette-primary-alt-contrast);
   }
-  ._91vfi9 {
+  ._1ybd6u6 {
     border-color: var(--ictinus-color-palette-error-contrast);
   }
-  ._1rusbj7 {
+  ._1n2qdlp {
     border-color: var(--ictinus-color-palette-upsell-contrast);
   }
-  .p98n4y {
+  .q4z8ak {
     border-color: var(--ictinus-color-palette-success-contrast);
   }
-  ._1nnicix {
+  ._1sawzh {
     border-color: var(--ictinus-color-palette-warning-contrast);
   }
-  ._1v8k1bi ._1a9v2vk:not(:first-child) {
+  ._1lusdd0 .ff9g5k:not(:first-child) {
     margin-left: -2px;
   }
-  ._1v8k1bi ._1xq21ap:not(:first-child) {
+  ._1lusdd0 ._1287rxe:not(:first-child) {
     margin-left: -4px;
   }
-  ._1v8k1bi ._1x2cqmw:not(:first-child) {
+  ._1lusdd0 .tc22kn:not(:first-child) {
     margin-left: -6px;
   }
-  ._1v8k1bi ._16u4ss2:not(:first-child) {
+  ._1lusdd0 ._1cire68:not(:first-child) {
     margin-left: -8px;
   }
-  ._1v8k1bi .tgfn1o:not(:first-child) {
+  ._1lusdd0 .nzk8q4:not(:first-child) {
     margin-left: -12px;
   }
-  ._1v8k1bi ._1xp0xwi:not(:first-child) {
+  ._1lusdd0 ._12r6fha:not(:first-child) {
     margin-left: -16px;
   }
-  .epr0wv {
+  ._1lyk3r2 {
     fill: currentColor;
   }
-  ._1haocda {
+  ._1j13w0l {
     width: calc(var(--ictinus-sizing-5) * 0.8);
     height: calc(var(--ictinus-sizing-5) * 0.8);
   }
-  .ognff {
+  ._184g7wr {
     width: calc(var(--ictinus-sizing-6) * 0.8);
     height: calc(var(--ictinus-sizing-6) * 0.8);
   }
-  .r8obr0 {
+  ._19bnbct {
     width: calc(var(--ictinus-sizing-8) * 0.8);
     height: calc(var(--ictinus-sizing-8) * 0.8);
   }
-  .n3qg13 {
+  .xbe4tu {
     width: calc(var(--ictinus-sizing-12) * 0.8);
     height: calc(var(--ictinus-sizing-12) * 0.8);
   }
-  ._7qohy2 {
+  ._1n29rmq {
     width: calc(var(--ictinus-sizing-15) * 0.8);
     height: calc(var(--ictinus-sizing-15) * 0.8);
   }
-  .p7mnhg {
+  .mxwebd {
     width: calc(var(--ictinus-sizing-18) * 0.8);
     height: calc(var(--ictinus-sizing-18) * 0.8);
   }

package/dist/vanilla/assets/src/avatar/AvatarGroup.css.ts.vanilla-C363fwTT.css

@@ -0,0 +1,4 @@
+@layer ictinus._1vlnks0;
+@layer ictinus._1vlnks0 {
+
+}

package/dist/vanilla/assets/src/button/{Button.css.ts.vanilla-oeHduGpK.css → Button.css.ts.vanilla-BOfZAqJR.css}

@@ -1,12 +1,12 @@
-@layer ictinus.mqfe5f;
-@layer ictinus.mqfe5f {
-  .kjgyle[data-focus-visible] {
+@layer ictinus._1vlnks0;
+@layer ictinus._1vlnks0 {
+  ._1dxkldy[data-focus-visible] {
     outline: var(--ictinus-border-width-3) solid var(--ictinus-color-border-color-interactive-focused);
   }
-  .kjgyle[data-react-aria-pressable] {
+  ._1dxkldy[data-react-aria-pressable] {
     touch-action: pan-x pan-y pinch-zoom;
   }
-  ._32oevx {
+  ._199o49k {
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);

package/dist/vanilla/assets/src/cover/Cover.css.ts.vanilla-CCAAX9ZD.css

@@ -0,0 +1,35 @@
+@layer ictinus;
+@layer ictinus._1vlnks0;
+@layer ictinus {
+  .irlgjq {
+    position: static;
+  }
+  .irlgjq:focus-visible {
+    outline: none;
+  }
+}
+@layer ictinus._1vlnks0 {
+  .jwn4pk {
+    --_1efufs7: solid;
+  }
+  .jwn4pk::before {
+    content: "";
+    border-radius: var(--_1m7igzn, inherit);
+    inset: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+  .jwn4pk:focus-visible::before {
+    outline: 2px var(--_1efufs7) var(--ictinus-color-border-color-interactive-focused);
+    outline-offset: var(--_1brptp5);
+  }
+  .pnnzk5 {
+    --_1brptp5: 1px;
+  }
+  .q879ej {
+    --_1brptp5: -2px;
+  }
+  .q879ej:is(a) {
+    --_1efufs7: auto;
+  }
+}