@orfium/ictinus 5.43.0 → 5.43.2

package/dist/vanilla/src/theme/functions.js

@@ -0,0 +1,64 @@
+import { css } from '@emotion/react';
+
+css`
+  display: grid;
+
+  grid-auto-columns: 1fr;
+`;
+css`
+  border-radius: 6px;
+  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
+  background-color: white;
+`;
+css`
+  position: absolute;
+  margin: auto;
+  top: 0;
+  bottom: 0;
+`;
+const transition = (s, type = "all") => css`
+  -webkit-transition: ${type} ${s}s ease-in-out;
+  -moz-transition: ${type} ${s}s ease-in-out;
+  -ms-transition: ${type} ${s}s ease-in-out;
+  -o-transition: ${type} ${s}s ease-in-out;
+  transition: ${type} ${s}s ease-in-out;
+`;
+css`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const flex = css`
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+`;
+css`
+  ${flex};
+  -webkit-align-items: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  justify-content: center;
+`;
+css`
+  ${flex};
+  -webkit-align-items: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+`;
+css`
+  ${transition(0.1, "color")}
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  text-shadow: none;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+`;
+
+export { flex, transition };

package/dist/vanilla/src/utils/date.js

@@ -0,0 +1,13 @@
+import dayjsLib from 'dayjs';
+import 'dayjs/locale/en';
+import 'dayjs/locale/en-gb';
+import localeData from 'dayjs/plugin/localeData';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+
+const dayjs = dayjsLib;
+dayjs.extend(localizedFormat);
+dayjs.extend(localeData);
+const browserLanguage = typeof navigator !== "undefined" && navigator?.language === "en-GB" ? "en-gb" : "en";
+dayjs.locale(browserLanguage);
+
+export { dayjs as default };

package/dist/vanilla/src/utils/helpers.js

@@ -0,0 +1,7 @@
+import 'lodash-es';
+import 'react';
+import './date.js';
+
+const generateTestDataId = (defaultId, customId) => customId ? `${defaultId}-${customId}` : defaultId;
+
+export { generateTestDataId };

package/dist/vanilla-extract/global.css.ts.vanilla.css

@@ -1 +1 @@
-@font-face{src:url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format("woff2");font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto}@font-face{src:url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format("woff2");font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto}@font-face{src:url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format("woff2");font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto}@font-face{src:url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format("woff2");font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto}@font-face{src:url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format("woff2");font-style:normal;font-weight:900;font-stretch:100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto}@font-face{src:url(https://fonts.gstatic.com/s/robotomono/v30/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2) format("woff2");font-style:normal;font-weight:300;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto Mono}@font-face{src:url(https://fonts.gstatic.com/s/robotomono/v30/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto Mono}@font-face{src:url(https://fonts.gstatic.com/s/robotomono/v30/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2) format("woff2");font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto Mono}@font-face{src:url(https://fonts.gstatic.com/s/robotomono/v30/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2) format("woff2");font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto Mono}@layer ictinus.reset;@layer ictinus.reset{*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-width:thin;scrollbar-color:var(--ictinus-color-palette-primary-muted) transparent;border:0 solid}*:focus{outline:0}html,body{background-color:var(--ictinus-color-background-default);color:var(--ictinus-color-text-default-primary);font-family:var(--ictinus-font-sans)}a,area,button,[role=button],input:not([type=range]),label,select,summary,textarea{text-decoration:none}[role=button]{background:none}input,button,select,optgroup,textarea{border:none;line-height:inherit;color:inherit;font-family:inherit;font-size:inherit}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:none}input,textarea{appearance:none;-webkit-appearance:none}ul,ol{list-style:none}button,a{cursor:pointer}}
+@font-face{src:url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format("woff2");font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto}@font-face{src:url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format("woff2");font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto}@font-face{src:url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format("woff2");font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto}@font-face{src:url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format("woff2");font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto}@font-face{src:url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format("woff2");font-style:normal;font-weight:900;font-stretch:100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto}@font-face{src:url(https://fonts.gstatic.com/s/robotomono/v30/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2) format("woff2");font-style:normal;font-weight:300;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto Mono}@font-face{src:url(https://fonts.gstatic.com/s/robotomono/v30/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto Mono}@font-face{src:url(https://fonts.gstatic.com/s/robotomono/v30/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2) format("woff2");font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto Mono}@font-face{src:url(https://fonts.gstatic.com/s/robotomono/v30/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2) format("woff2");font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto Mono}@layer ictinus.reset;@layer ictinus.reset{*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-width:thin;scrollbar-color:var(--ictinus-color-palette-secondary-contrast) transparent;border:0 solid}*:focus{outline:0}html,body{background-color:var(--ictinus-color-background-default);color:var(--ictinus-color-text-default-primary);font-family:var(--ictinus-font-sans)}a,area,button,[role=button],input:not([type=range]),label,select,summary,textarea{text-decoration:none}[role=button]{background:none}input,button,select,optgroup,textarea{border:none;line-height:inherit;color:inherit;font-family:inherit;font-size:inherit}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:none}input,textarea{appearance:none;-webkit-appearance:none}ul,ol{list-style:none}button,a{cursor:pointer}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "5.43.0",
+  "version": "5.43.2",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
@@ -35,27 +35,33 @@
   "devDependencies": {
     "@commitlint/cli": "^17.7.2",
     "@commitlint/config-conventional": "^17.7.0",
+    "@emotion/babel-plugin": "^11.13.5",
     "@emotion/eslint-plugin": "^11.12.0",
+    "@emotion/jest": "^11.13.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/serialize": "^1.3.3",
+    "@emotion/styled": "^11.14.1",
     "@eslint/compat": "^1.3.2",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.34.0",
     "@react-types/shared": "^3.29.0",
     "@rollup/plugin-json": "^6.1.0",
     "@svgr/webpack": "^8.1.0",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/table-core": "^8.21.3",
     "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^14.3.1",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.5.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/events": "^3.0.0",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^25.0.3",
     "@types/pluralize": "^0.0.29",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
     "@types/react-highlight-words": "^0.16.5",
-    "@types/react-input-mask": "^3.0.2",
     "@types/recharts": "^1.8.25",
     "@types/styled-components": "^5.1.7",
-    "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vanilla-extract/css": "^1.17.4",
@@ -80,6 +86,8 @@
     "postcss-pxtorem": "^6.1.0",
     "prettier": "^3.5.3",
     "prettier-plugin-organize-imports": "^4.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "remark-gfm": "^4.0.1",
     "rimraf": "^3.0.2",
     "rollup": "^4.50.2",
@@ -97,9 +105,11 @@
     "vite-tsconfig-paths": "^5.1.4"
   },
   "dependencies": {
+    "@mona-health/react-input-mask": "^3.0.3",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.18",
+    "@vanilla-extract/dynamic": "^2.1.5",
     "@vanilla-extract/recipes": "^0.5.7",
     "@vanilla-extract/sprinkles": "^1.6.5",
     "clsx": "^2.1.1",
@@ -113,7 +123,6 @@
     "react-aria-components": "^1.12.1",
     "react-fast-compare": "^3.2.0",
     "react-highlight-words": "^0.20.0",
-    "react-input-mask": "^2.0.4",
     "react-range": "^1.8.12",
     "react-responsive": "^10.0.0",
     "react-stately": "^3.41.0",
@@ -121,18 +130,15 @@
     "react-tooltip": "^5.26.4",
     "react-window": "^1.8.6",
     "recharts": "^2.8.0",
-    "tslib": "^2.4.1",
-    "uuid": "^8.3.2",
     "@orfium/tokens": "5.1.3"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "prop-types": "^15.7.2",
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0",
-    "react-router": "^6.21.3",
-    "react-router-dom": "^6.21.3"
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/table-core": "^8.21.3",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "keywords": [
     "Orfium",

package/src/actions/ActionsContent.css.ts

@@ -0,0 +1,52 @@
+import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
+import { sprinkles } from '~/sprinkles';
+import { style } from '../vanilla-extract';
+import * as rootStyles from './ActionsRoot.css';
+
+export const content = recipe({
+  base: [
+    sprinkles({
+      alignItems: 'center',
+      display: 'flex',
+      justifyContent: 'space-between',
+    }),
+    style({
+      transition: 'opacity 150ms ease',
+
+      '@media': {
+        '(hover: hover)': {
+          selectors: {
+            [`${rootStyles.className}:not(:has(${rootStyles.className})):hover &`]: {
+              opacity: '1',
+              transition: 'none',
+            },
+          },
+        },
+      },
+
+      selectors: {
+        [`${rootStyles.className}:not(:has(${rootStyles.className})):focus-within &, &:is(:checked, [data-state=open], :has(:checked, [data-state=open], [aria-expanded=true]))`]:
+          {
+            opacity: '1',
+            transition: 'none',
+          },
+      },
+    }),
+  ],
+
+  variants: {
+    /**
+     * Control whether to always show the contents or only when user is hovering or interacting with them.
+     */
+    visible: {
+      always: style({
+        opacity: '1',
+      }),
+      'if-needed': style({
+        opacity: '0',
+      }),
+    },
+  },
+});
+
+export type ContentVariants = RecipeVariants<typeof content>;

package/src/actions/ActionsContent.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+
+import { cn } from '../utils/cn';
+import { Box, type BoxProps } from '../vanilla/Box';
+import * as styles from './ActionsContent.css';
+
+export type ActionsContentProps = BoxProps<'div', styles.ContentVariants>;
+
+export const ActionsContent = forwardRef<HTMLDivElement, ActionsContentProps>(
+  ({ children, className, visible = 'if-needed', ...props }, ref) => {
+    return (
+      <Box ref={ref} className={cn(styles.content({ visible }), className)} {...props}>
+        {children}
+      </Box>
+    );
+  }
+);
+
+ActionsContent.displayName = 'ActionsContent';

package/src/actions/ActionsRoot.css.ts

@@ -0,0 +1,8 @@
+import { recipe } from '@vanilla-extract/recipes';
+import { style } from '../vanilla-extract';
+
+export const className = style({});
+
+export const root = recipe({
+  base: className,
+});

package/src/actions/ActionsRoot.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+
+import { cn } from '../utils/cn';
+import { Box, type BoxProps } from '../vanilla/Box';
+import * as styles from './ActionsRoot.css';
+
+export type ActionsRootProps = BoxProps<'div'>;
+
+export const ActionsRoot = forwardRef<HTMLDivElement, ActionsRootProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <Box ref={ref} className={cn(styles.root({}), className)} {...props}>
+        {children}
+      </Box>
+    );
+  }
+);
+
+ActionsRoot.displayName = 'ActionsRoot';

package/src/actions/index.ts

@@ -0,0 +1,2 @@
+export * from './ActionsContent';
+export * from './ActionsRoot';

package/src/components/Avatar/Avatar.tsx

@@ -1,8 +1,8 @@
 import { forwardRef, useMemo, type PropsWithChildren } from 'react';
 
-import UserAvatar from './assets/user-avatar.svg?react';
 import { avatarStyle, iconStyles } from './Avatar.style';
 import type { AvatarProps } from './Avatar.types';
+import { UserAvatar } from './UserAvatar';
 
 const Avatar = forwardRef<HTMLDivElement, PropsWithChildren<AvatarProps>>(
   ({ src = '', size = 1, color = 'blue', className, dataTestPrefixId = '', children }, ref) => {

package/src/components/Avatar/UserAvatar.tsx

@@ -0,0 +1,18 @@
+import { Box, type BoxProps } from '../../vanilla/Box';
+
+export function UserAvatar(props: BoxProps) {
+  return (
+    <Box asChild {...props}>
+      <svg viewBox="0 0 14 17" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M6.96625 6.55647C8.77677 6.55647 10.2445 5.08876 10.2445 3.27824C10.2445 1.46772 8.77677 0 6.96625 0C5.15573 0 3.68801 1.46772 3.68801 3.27824C3.68801 5.08876 5.15573 6.55647 6.96625 6.55647Z"
+          fill="currentColor"
+        />
+        <path
+          d="M0 12.2113C0 12.1401 0.0171683 12.0699 0.0515269 12.0076C1.31285 9.7198 3.95046 8.09435 7 8.09435C10.0495 8.09435 12.6872 9.7198 13.9485 12.0076C13.9828 12.0699 14 12.1401 14 12.2113C14 12.2824 13.9828 12.3528 13.9483 12.4151C12.687 14.6941 10.0518 16.0044 7.00244 16.0044C3.95304 16.0044 1.31314 14.6941 0.0516988 12.4151C0.0172363 12.3528 0 12.2824 0 12.2113Z"
+          fill="currentColor"
+        />
+      </svg>
+    </Box>
+  );
+}

package/src/components/Button/Button.tsx

@@ -4,12 +4,12 @@ import type { TestProps } from 'utils/types';
 
 import type { AvatarProps } from 'components/Avatar';
 import Avatar from 'components/Avatar';
-import { BUTTON_COLOR } from 'components/ButtonBase/constants';
+import { BUTTON_ICON_COLOR } from 'components/ButtonBase/constants';
 import type { AcceptedIconNames } from 'components/Icon';
-import Icon from 'components/Icon';
+import { Icon } from '../../icon';
+import { Text } from '../../vanilla/Text';
 import type { ButtonBaseProps } from '../ButtonBase/ButtonBase';
 import ButtonBase from '../ButtonBase/ButtonBase';
-import { buttonSpanStyle } from './Button.style';
 
 export type ButtonProps = ButtonBaseProps &
   TestProps &
@@ -35,23 +35,19 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
   } = props;
 
   const hasAvatar = ['primary', 'secondary', 'tertiary'].includes(type) && avatar;
+  const isCompact = size === 'compact';
+  const iconSize = isCompact ? 'sm' : 'md';
 
   return (
     <ButtonBase {...props} ref={ref} isLoading={isLoading} onClick={onClick}>
-      <span css={buttonSpanStyle()}>
-        {size === 'compact' ? (
-          <span>{children}</span>
-        ) : (
-          <>
-            {hasAvatar && <Avatar src={avatar?.src}>{avatar?.label}</Avatar>}
-            {iconLeftName && !hasAvatar && (
-              <Icon name={iconLeftName} color={BUTTON_COLOR[type].text} />
-            )}
-            <span>{children}</span>
-            {iconRightName && <Icon name={iconRightName} color={BUTTON_COLOR[type].text} />}
-          </>
-        )}
-      </span>
+      {hasAvatar && <Avatar src={avatar?.src}>{avatar?.label}</Avatar>}
+      {iconLeftName && !hasAvatar && (
+        <Icon name={iconLeftName} color={BUTTON_ICON_COLOR[type]} size={iconSize} />
+      )}
+      <Text>{children}</Text>
+      {iconRightName && (
+        <Icon name={iconRightName} color={BUTTON_ICON_COLOR[type]} size={iconSize} />
+      )}
     </ButtonBase>
   );
 });

package/src/components/ButtonBase/ButtonBase.style.ts

@@ -48,11 +48,13 @@ export const buttonBaseStyle =
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
+      flexShrink: 0,
+      gap: vars.spacing['4'],
       color: BUTTON_COLOR[type].text,
       width: getButtonWidth(),
       height: BUTTON_SIZE[size].size,
       backgroundColor: BUTTON_COLOR[type][isLoading ? 'activeFill' : 'defaultFill'],
-      padding: BUTTON_SIZE[size].padding,
+      padding: isIconButton ? 0 : BUTTON_SIZE[size].padding,
       borderRadius:
         isIconButton && shape === 'circle'
           ? vars['border-radius']['7']
@@ -90,14 +92,3 @@ export const buttonBaseStyle =
       ${sx?.container};
     `;
   };
-
-export const buttonSpanStyle = () => () => {
-  return {
-    display: 'flex',
-    alignItems: 'center',
-  };
-};
-
-export const iconStyle = () => () => ({
-  display: 'inline-flex',
-});

package/src/components/ButtonBase/ButtonBase.tsx

@@ -6,11 +6,11 @@ import type { CommonButtonProps } from 'utils/common';
 import { generateTestDataId } from 'utils/helpers';
 import type { ComponentSizes, TestProps } from 'utils/types';
 
-import { buttonBaseStyle, buttonWrapperStyle } from './ButtonBase.style';
-import { useSlotProps } from '../utils/Slots';
 import type { ButtonTypes } from 'components/Button/Button.types';
 import ButtonLoader from 'components/Button/ButtonLoader';
 import type { IconButtonShape } from 'components/IconButton';
+import { useSlotProps } from '../utils/Slots';
+import { buttonBaseStyle, buttonWrapperStyle } from './ButtonBase.style';
 
 export type EventButtonProps = {
   onClick?: (event: ClickEvent) => void;
@@ -70,6 +70,7 @@ const ButtonBase = React.forwardRef<HTMLButtonElement, ButtonBaseProps>((props,
       <button
         {...omit(rest, ['avatar', 'iconRightName', 'iconLeftName', 'iconName'])}
         ref={ref}
+        // eslint-disable-next-line react/button-has-type
         type={htmlType}
         data-testid={generateTestDataId(testIdName, dataTestId)}
         css={buttonBaseStyle({

package/src/components/ButtonBase/constants.ts

@@ -30,6 +30,13 @@ export const BUTTON_COLOR: Record<ButtonTypes, Record<string, `var(--${string})`
   },
 };
 
+export const BUTTON_ICON_COLOR = {
+  primary: 'inverted.primary',
+  secondary: 'active',
+  tertiary: 'active',
+  danger: 'error',
+} as const;
+
 export const typographySizes: Record<ComponentSizes, SemanticTypographyKey> = {
   normal: 'normal.label02',
   compact: 'normal.label03',

package/src/components/Controls/CheckBox/CheckBox.style.ts

@@ -34,6 +34,7 @@ export const checkboxStyles =
         height: ${vars.sizing['5']};
         align-items: center;
         box-sizing: border-box;
+        display: flex;
 
         border: ${vars['border-width']['2']} solid ${vars.color['border-color'].interactive.default};
         border-radius: ${vars['border-radius']['2']};

package/src/components/Controls/CheckBox/CheckBox.tsx

@@ -3,10 +3,9 @@ import type { CheckboxAria } from 'react-aria';
 import { Checkbox as ReactAriaCheckbox } from 'react-aria-components';
 import type { TestProps } from 'utils/types';
 
-import { vars } from '@orfium/tokens';
 import type { LabelConfig } from 'components/Controls/Controls.types';
-import Icon from 'components/Icon';
 import Box from '~/components/Box';
+import { Icon } from '../../../icon';
 import { ControlHelpText, ControlLabelText } from '../ControlLabel';
 import { checkboxStyles, checkboxWrapperStyles } from './CheckBox.style';
 
@@ -59,14 +58,16 @@ const CheckBox = React.forwardRef<HTMLLabelElement, CheckBoxProps>((props, ref)
           justifyContent={placement === 'left' ? 'space-between' : 'unset'}
         >
           <Box data-role="checkbox-icon">
-            <Icon
-              name={isIndeterminate ? 'minus' : 'check'}
-              size={vars.sizing['5']}
-              color={vars.color.text.inverted.primary}
-              dataTestId={`${dataTestPrefixId}${value ? `_${value}` : ''}_${
-                isIndeterminate ? 'minus' : isSelected ? 'checkmark' : 'unselected'
-              }`}
-            />
+            <div>
+              <Icon
+                name={isIndeterminate ? 'minus' : 'check'}
+                size="md"
+                color="inverted.primary"
+                data-testid={`${dataTestPrefixId}${value ? `_${value}` : ''}_${
+                  isIndeterminate ? 'minus' : isSelected ? 'checkmark' : 'unselected'
+                }`}
+              />
+            </div>
           </Box>
           {children && (
             <ControlLabelText

package/src/components/Controls/CheckBox/__snapshots__/CheckBox.test.tsx.snap

@@ -28,6 +28,10 @@ exports[`Checkbox Component > it renders the Checkbox correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   border: var(--ictinus-border-width-2) solid var(--ictinus-color-border-color-interactive-default);
   border-radius: var(--ictinus-border-radius-2);
 }
@@ -91,25 +95,6 @@ exports[`Checkbox Component > it renders the Checkbox correctly 1`] = `
   justify-content: unset;
 }
 
-.emotion-6 {
-  width: var(--ictinus-sizing-5);
-  height: var(--ictinus-sizing-5);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-7 {
-  width: var(--ictinus-sizing-5);
-  height: var(--ictinus-sizing-5);
-}
-
-.emotion-7 path,
-.emotion-7 rect {
-  fill: var(--ictinus-color-text-inverted-primary)!important;
-}
-
 <div>
   <div
     class="emotion-0"
@@ -138,20 +123,17 @@ exports[`Checkbox Component > it renders the Checkbox correctly 1`] = `
           class="emotion-4 emotion-3"
           data-role="checkbox-icon"
         >
-          <div
-            class="emotion-6"
-            data-slot="icon"
-            data-testid="test_test_unselected"
-          >
+          <div>
             <svg
-              class="emotion-7"
-              fill="none"
+              class="properties_color_inverted.primary_base__146hxcf23u properties_height_5_base__146hxcf74 properties_width_5_base__146hxcf4c"
+              data-ictinus="test-version"
+              data-testid="test_test_unselected"
               viewBox="0 0 20 20"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
                 d="M7.98578 15C7.86013 15 7.73789 14.9759 7.61906 14.9277C7.50021 14.8796 7.38896 14.8 7.28531 14.6891L3.75302 10.9092C3.58026 10.7244 3.49597 10.5031 3.50015 10.2454C3.50434 9.9877 3.59282 9.76641 3.76558 9.58154C3.93834 9.39666 4.14304 9.30421 4.37969 9.30421C4.61632 9.30421 4.82101 9.39666 4.99377 9.58154L7.98578 12.7832L15.0001 5.27733C15.1729 5.09244 15.3797 5 15.6205 5C15.8613 5 16.0681 5.09244 16.2409 5.27733C16.4136 5.4622 16.5 5.68348 16.5 5.94118C16.5 6.19888 16.4136 6.42016 16.2409 6.60503L8.68626 14.6891C8.5826 14.8 8.47135 14.8796 8.35251 14.9277C8.23368 14.9759 8.11143 15 7.98578 15Z"
-                fill="#6265AD"
+                fill="currentColor"
               />
             </svg>
           </div>

package/src/components/DatePicker/DatePicker.test.tsx

@@ -1,9 +1,37 @@
 import { waitFor } from '@testing-library/react';
 import dayjs from 'dayjs';
 import { vi } from 'vitest';
+import { KEYBOARD_EVENT_KEYS } from '../../hooks/useKeyboardEvents';
 import { fireEvent, render } from '../../test';
 import DatePicker from './DatePicker';
-import { currentDay, navigateOnElement } from './utils';
+import { currentDay } from './utils';
+
+export const clickOnElement = (element: HTMLElement, key: string, charCode: number) =>
+  fireEvent.keyDown(element, {
+    key: key,
+    code: key,
+    charCode: charCode,
+  });
+
+export const navigateOnElement = (
+  element: HTMLElement,
+  path: (keyof typeof KEYBOARD_EVENT_KEYS)[]
+) => {
+  path.forEach((key) => {
+    switch (key) {
+      case KEYBOARD_EVENT_KEYS.ArrowLeft:
+        return clickOnElement(element, KEYBOARD_EVENT_KEYS.ArrowLeft, 37);
+      case KEYBOARD_EVENT_KEYS.ArrowUp:
+        return clickOnElement(element, KEYBOARD_EVENT_KEYS.ArrowUp, 38);
+      case KEYBOARD_EVENT_KEYS.ArrowRight:
+        return clickOnElement(element, KEYBOARD_EVENT_KEYS.ArrowRight, 39);
+      case KEYBOARD_EVENT_KEYS.ArrowDown:
+        return clickOnElement(element, KEYBOARD_EVENT_KEYS.ArrowDown, 40);
+      default:
+        return null;
+    }
+  });
+};
 
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
   observe: vi.fn(),