sit-onyx 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/utils/attrs.d.ts

@@ -1,4 +1,4 @@
-import { type HtmlHTMLAttributes } from "vue";
+import { type HTMLAttributes } from "vue";
 /**
  * Extension of `useAttrs` which splits root attributes from other properties.
  * As root properties are considered: `style` and `class`.
@@ -9,9 +9,9 @@ export declare const useRootAttrs: () => {
     /**
      * Contains the `class` and `style` fall-through attributes, if set.
      */
-    rootAttrs: import("vue").ComputedRef<Pick<HtmlHTMLAttributes, "class" | "style">>;
+    rootAttrs: import("vue").ComputedRef<Pick<HTMLAttributes, "class" | "style">>;
     /**
      * Contains all fall-through attributes except `class` and `style`.
      */
-    restAttrs: import("vue").ComputedRef<Omit<HtmlHTMLAttributes, "class" | "style">>;
+    restAttrs: import("vue").ComputedRef<Omit<HTMLAttributes, "class" | "style">>;
 };

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "sit-onyx",
   "description": "A design system and Vue.js component library created by Schwarz IT",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.21",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
   "files": [
     "dist",
     "src/i18n/locales",
-    "src/styles",
-    "src/types"
+    "src/styles"
   ],
   "types": "./dist/index.d.ts",
   "exports": {
@@ -23,8 +22,7 @@
     "./locales/*": "./src/i18n/locales/*",
     "./src/styles/*": "./src/styles/*",
     "./breakpoints.scss": "./src/styles/breakpoints.scss",
-    "./types": "./src/types/index.ts",
-    "./themes/*": "./src/styles/themes/*"
+    "./themes/*": "./src/styles/variables/themes/*"
   },
   "homepage": "https://onyx.schwarz",
   "repository": {
@@ -45,11 +43,10 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.9.1",
     "eslint-plugin-vue-scoped-css": "^2.8.1",
-    "vue-component-type-helpers": "^2.0.26",
-    "@sit-onyx/headless": "^1.0.0-beta.0"
+    "vue-component-type-helpers": "^2.0.29",
+    "@sit-onyx/headless": "^1.0.0-beta.4"
   },
   "scripts": {
-    "start": "pnpm run dev",
     "dev": "storybook dev -p 6006 --no-open",
     "build": "vite build && vue-tsc -p tsconfig.app.json --composite false",
     "build:storybook": "storybook build",

package/src/i18n/locales/de-DE.json

@@ -65,12 +65,17 @@
     "empty": "Keine Daten verfügbar",
     "noMatch": "Kein Element passt zum Suchtext",
     "searchInputLabel": "Liste durchsuchen",
-    "clearSearch": "Suchtext löschen"
+    "clearSearch": "Suchtext löschen",
+    "searchPlaceholder": "Suchen"
   },
   "selections": {
     "selectAll": "Alle auswählen",
     "currentSelection": "{n} ausgewählt"
   },
+  "stepper": {
+    "decrement": "Verringern um {stepSize}",
+    "increment": "Erhöhen um {stepSize}"
+  },
   "table": {
     "empty": "Diese Tabelle ist leer."
   },

package/src/i18n/locales/en-US.json

@@ -65,12 +65,17 @@
     "empty": "No data available",
     "noMatch": "No item matches your search",
     "searchInputLabel": "Filter the list items",
-    "clearSearch": "Clear search filter"
+    "clearSearch": "Clear search filter",
+    "searchPlaceholder": "Search"
   },
   "selections": {
     "selectAll": "Select all",
     "currentSelection": "{n} selected"
   },
+  "stepper": {
+    "decrement": "Decrement by {stepSize}",
+    "increment": "Increment by {stepSize}"
+  },
   "table": {
     "empty": "This table is empty."
   },

package/src/styles/global.css

@@ -1,7 +1,7 @@
 /**
  * Define the layer cascade layer priorities: Will apply from left-to-right.
  * We have to keep the layers in sync with layers.scss. We can't reference it in here,
- * as the projects can import this file separately from the other stylesheets. 
+ * as the projects can import this file separately from the other stylesheets.
  */
 @layer onyx.reset, onyx.utility, onyx.component, onyx.density;
 

package/src/styles/index.scss

@@ -5,12 +5,15 @@
 @use "layers"; // Must be imported first!
 @use "root.scss";
 @use "grid.scss";
-@use "density.scss";
 @use "z-indices.scss";
 @use "required.scss";
 @use "fonts.scss";
 @use "breakpoints.scss";
 
-@use "themes/onyx.css";
-@use "light.css";
-@use "dark.css";
+@use "variables/themes/onyx.css";
+@use "variables/light.css";
+@use "variables/dark.css";
+@use "variables/density-compact.css";
+@use "variables/density-default.css";
+@use "variables/density-cozy.css";
+@use "variables/spacing.css";

package/src/styles/mixins/checkbox.scss

@@ -1,22 +1,10 @@
 // this style sheet contains styles for the checkbox-box
 // that needs to be shared between OnyxCheckbox and OnyxSelect
 @use "layers";
-@use "density.scss";
 
 @mixin variables() {
   --onyx-checkbox-input-size: 1rem;
-
-  @include density.compact {
-    --onyx-checkbox-input-padding: var(--onyx-spacing-xs);
-  }
-
-  @include density.default {
-    --onyx-checkbox-input-padding: var(--onyx-spacing-sm);
-  }
-
-  @include density.cozy {
-    --onyx-checkbox-input-padding: var(--onyx-spacing-md);
-  }
+  --onyx-checkbox-input-padding: var(--onyx-density-sm);
 }
 
 @mixin define-checked-background($state, $color) {

package/src/styles/mixins/input.scss

@@ -16,11 +16,11 @@
 
     display: flex;
     align-items: center;
-    gap: var(--onyx-spacing-2xs);
+    gap: var(--onyx-density-xs);
 
     font-size: 1rem;
     line-height: 1.5rem;
-    padding: $vertical-padding var(--onyx-spacing-sm);
+    padding: $vertical-padding var(--onyx-density-sm);
     height: calc(1lh + 2 * #{$vertical-padding});
 
     &:has(#{$base-selector}__native:read-write:hover) {
@@ -64,6 +64,12 @@
         outline-color: var(--onyx-color-base-neutral-200);
       }
     }
+
+    &:has(#{$base-selector}__native:read-write) {
+      &:has(#{get-autofill-selectors("#{$base-selector}__native")}) {
+        background-color: var(--onyx-color-base-warning-100);
+      }
+    }
   }
 
   &__loading {
@@ -105,6 +111,15 @@
     &::selection {
       background: var(--selection-color);
     }
+
+    #{get-autofill-selectors("&")} {
+      background-color: transparent;
+      -webkit-text-fill-color: var(--onyx-color-text-icons-neutral-intense);
+
+      // many browsers use "!important" to set the autofill background so we need this
+      // transition workaround to make the background transparent
+      transition: background-color calc(infinity * 1s);
+    }
   }
 
   &:has(&__native:disabled) {
@@ -121,18 +136,47 @@
 }
 
 @mixin define-skeleton-styles($height) {
+  $adjustment: var(--skeleton-label-density-adjustment, 0rem);
+
   display: flex;
   flex-direction: column;
-  gap: var(--onyx-spacing-5xs);
+  gap: calc(var(--onyx-density-3xs) + $adjustment);
   line-height: 1.5rem;
 
   &__label {
-    width: var(--onyx-spacing-3xl);
-    height: 1.25rem;
+    width: var(--onyx-density-3xl);
+    height: calc(1.25rem - $adjustment);
   }
 
   &__input {
     width: 17rem;
+    max-width: 100%;
     height: $height;
   }
+
+  @include density.compact {
+    // the skeleton gap would be 0 in compact density so we shrink the label size a bit and increase the gap so it does not look off
+    --skeleton-label-density-adjustment: var(--onyx-spacing-5xs);
+  }
+}
+
+/**
+* Gets a comma separated CSS selector for the input autofill.
+* Includes default browser selectors as well as some specific selectors e.g. for certain password managers.
+*/
+@function get-autofill-selectors($prefix: "") {
+  $output: "";
+  $selectors: (":autofill", "[data-test-autofill]", "[data-com-onepassword-filled]");
+
+  @each $selector in $selectors {
+    $prefixed-selector: $prefix + $selector;
+
+    @if $output == "" {
+      $output: $prefixed-selector;
+    } @else {
+      $output: $output + ", " + $prefixed-selector;
+    }
+  }
+
+  @return $output;
 }

package/src/styles/mixins/list.scss

@@ -23,26 +23,17 @@
 
     &:not(:last-of-type) {
       border-bottom: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300);
-      margin-bottom: var(--onyx-spacing-2xs);
+      margin-bottom: var(--onyx-density-xs);
     }
   }
 
   &__group-name {
     display: block;
-    padding: 0 var(--onyx-spacing-sm);
+    padding: 0 var(--onyx-density-sm);
     color: var(--onyx-color-text-icons-neutral-medium);
     font-weight: 600;
   }
 
-  &__message {
-    color: var(--onyx-color-text-icons-neutral-soft);
-    display: inline-block;
-    width: 100%;
-    box-sizing: border-box;
-    text-align: right;
-    padding: $wrapper-padding var(--onyx-spacing-sm) 0;
-  }
-
   &:has(&__wrapper:focus-visible) {
     outline: 0.25rem solid var(--onyx-color-base-primary-200);
   }

package/src/styles/required.scss

@@ -35,7 +35,7 @@
     }
     content: var(--onyx-use-optional, var(--onyx-global-optional-text, "(optional)"));
     color: var(--onyx-use-optional, var(--onyx-color-text-icons-neutral-soft));
-    padding-left: var(--onyx-use-optional, var(--onyx-spacing-2xs));
+    padding-left: var(--onyx-use-optional, var(--onyx-density-xs));
     hyphens: var(--onyx-use-optional, none);
   }
 }

package/src/styles/{dark.css → variables/dark.css}

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly.
  * This file contains the specific variables for the "dark" theme.
- * Imported from Figma API on Wed, 03 Jul 2024 13:48:25 GMT
+ * Imported from Figma API on Fri, 26 Jul 2024 09:04:36 GMT
  */
 :where(.dark) {
   --onyx-color-base-background-blank: var(--onyx-color-themed-neutral-1100);
@@ -117,16 +117,4 @@
   --onyx-radius-sm: var(--onyx-number-radius-200);
   --onyx-radius-xl: var(--onyx-number-radius-500);
   --onyx-radius-xs: var(--onyx-number-radius-100);
-  --onyx-spacing-2xl: var(--onyx-number-spacing-700);
-  --onyx-spacing-2xs: var(--onyx-number-spacing-300);
-  --onyx-spacing-3xl: var(--onyx-number-spacing-800);
-  --onyx-spacing-3xs: var(--onyx-number-spacing-250);
-  --onyx-spacing-4xl: var(--onyx-number-spacing-900);
-  --onyx-spacing-4xs: var(--onyx-number-spacing-200);
-  --onyx-spacing-5xs: var(--onyx-number-spacing-100);
-  --onyx-spacing-lg: var(--onyx-number-spacing-500);
-  --onyx-spacing-md: var(--onyx-number-spacing-400);
-  --onyx-spacing-sm: var(--onyx-number-spacing-350);
-  --onyx-spacing-xl: var(--onyx-number-spacing-600);
-  --onyx-spacing-xs: var(--onyx-number-spacing-325);
 }

package/src/styles/variables/density-compact.css

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly.
+ * This file contains the specific variables for the "compact" theme.
+ * Imported from Figma API on Fri, 26 Jul 2024 09:04:53 GMT
+ */
+:where(.onyx-density-compact) {
+  --onyx-density-2xl: var(--onyx-number-spacing-600);
+  --onyx-density-2xs: var(--onyx-number-spacing-100);
+  --onyx-density-3xl: var(--onyx-number-spacing-700);
+  --onyx-density-3xs: var(--onyx-number-spacing-0);
+  --onyx-density-4xl: var(--onyx-number-spacing-800);
+  --onyx-density-lg: var(--onyx-number-spacing-400);
+  --onyx-density-md: var(--onyx-number-spacing-325);
+  --onyx-density-sm: var(--onyx-number-spacing-300);
+  --onyx-density-xl: var(--onyx-number-spacing-500);
+  --onyx-density-xs: var(--onyx-number-spacing-200);
+}

package/src/styles/variables/density-cozy.css

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly.
+ * This file contains the specific variables for the "cozy" theme.
+ * Imported from Figma API on Fri, 26 Jul 2024 09:04:53 GMT
+ */
+:where(.onyx-density-cozy) {
+  --onyx-density-2xl: var(--onyx-number-spacing-800);
+  --onyx-density-2xs: var(--onyx-number-spacing-300);
+  --onyx-density-3xl: var(--onyx-number-spacing-900);
+  --onyx-density-3xs: var(--onyx-number-spacing-200);
+  --onyx-density-4xl: var(--onyx-number-spacing-950);
+  --onyx-density-lg: var(--onyx-number-spacing-600);
+  --onyx-density-md: var(--onyx-number-spacing-500);
+  --onyx-density-sm: var(--onyx-number-spacing-400);
+  --onyx-density-xl: var(--onyx-number-spacing-700);
+  --onyx-density-xs: var(--onyx-number-spacing-350);
+}

package/src/styles/variables/density-default.css

@@ -0,0 +1,18 @@
+/**
+ * Do not edit directly.
+ * This file contains the specific variables for the "default" theme.
+ * Imported from Figma API on Fri, 26 Jul 2024 09:04:48 GMT
+ */
+:where(:root),
+:where(.onyx-density-default) {
+  --onyx-density-2xl: var(--onyx-number-spacing-700);
+  --onyx-density-2xs: var(--onyx-number-spacing-200);
+  --onyx-density-3xl: var(--onyx-number-spacing-800);
+  --onyx-density-3xs: var(--onyx-number-spacing-100);
+  --onyx-density-4xl: var(--onyx-number-spacing-900);
+  --onyx-density-lg: var(--onyx-number-spacing-500);
+  --onyx-density-md: var(--onyx-number-spacing-400);
+  --onyx-density-sm: var(--onyx-number-spacing-350);
+  --onyx-density-xl: var(--onyx-number-spacing-600);
+  --onyx-density-xs: var(--onyx-number-spacing-300);
+}

package/src/styles/{light.css → variables/light.css}

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly.
  * This file contains the specific variables for the "light" theme.
- * Imported from Figma API on Wed, 03 Jul 2024 13:48:19 GMT
+ * Imported from Figma API on Fri, 26 Jul 2024 09:04:30 GMT
  */
 :where(:root) {
   --onyx-color-base-background-blank: var(--onyx-color-universal-grayscale-white);
@@ -117,16 +117,4 @@
   --onyx-radius-sm: var(--onyx-number-radius-200);
   --onyx-radius-xl: var(--onyx-number-radius-500);
   --onyx-radius-xs: var(--onyx-number-radius-100);
-  --onyx-spacing-2xl: var(--onyx-number-spacing-700);
-  --onyx-spacing-2xs: var(--onyx-number-spacing-300);
-  --onyx-spacing-3xl: var(--onyx-number-spacing-800);
-  --onyx-spacing-3xs: var(--onyx-number-spacing-250);
-  --onyx-spacing-4xl: var(--onyx-number-spacing-900);
-  --onyx-spacing-4xs: var(--onyx-number-spacing-200);
-  --onyx-spacing-5xs: var(--onyx-number-spacing-100);
-  --onyx-spacing-lg: var(--onyx-number-spacing-500);
-  --onyx-spacing-md: var(--onyx-number-spacing-400);
-  --onyx-spacing-sm: var(--onyx-number-spacing-350);
-  --onyx-spacing-xl: var(--onyx-number-spacing-600);
-  --onyx-spacing-xs: var(--onyx-number-spacing-325);
 }

package/src/styles/variables/spacing.css

@@ -0,0 +1,20 @@
+/**
+ * Do not edit directly.
+ * This file contains the specific variables for the "spacing" theme.
+ * Imported from Figma API on Fri, 26 Jul 2024 09:04:42 GMT
+ */
+:where(:root) {
+  --onyx-spacing-2xl: var(--onyx-number-spacing-700);
+  --onyx-spacing-2xs: var(--onyx-number-spacing-300);
+  --onyx-spacing-3xl: var(--onyx-number-spacing-800);
+  --onyx-spacing-3xs: var(--onyx-number-spacing-250);
+  --onyx-spacing-4xl: var(--onyx-number-spacing-900);
+  --onyx-spacing-4xs: var(--onyx-number-spacing-200);
+  --onyx-spacing-5xl: var(--onyx-number-spacing-950);
+  --onyx-spacing-5xs: var(--onyx-number-spacing-100);
+  --onyx-spacing-lg: var(--onyx-number-spacing-500);
+  --onyx-spacing-md: var(--onyx-number-spacing-400);
+  --onyx-spacing-sm: var(--onyx-number-spacing-350);
+  --onyx-spacing-xl: var(--onyx-number-spacing-600);
+  --onyx-spacing-xs: var(--onyx-number-spacing-325);
+}

package/src/styles/{themes → variables/themes}/kaufland.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly.
  * This file contains the specific variables for the "kaufland" theme.
- * Imported from Figma API on Wed, 03 Jul 2024 13:48:13 GMT
+ * Imported from Figma API on Fri, 26 Jul 2024 09:04:24 GMT
  */
 :where(:root),
 .onyx-theme-kaufland {
@@ -109,7 +109,7 @@
   --onyx-number-radius-400: 1rem;
   --onyx-number-radius-500: 2rem;
   --onyx-number-radius-600: 62.5rem;
-  --onyx-number-spacing-0: 0;
+  --onyx-number-spacing-0: 0rem;
   --onyx-number-spacing-100: 0.125rem;
   --onyx-number-spacing-200: 0.25rem;
   --onyx-number-spacing-250: 0.375rem;

package/src/styles/{themes → variables/themes}/lidl.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly.
  * This file contains the specific variables for the "lidl" theme.
- * Imported from Figma API on Wed, 03 Jul 2024 13:48:13 GMT
+ * Imported from Figma API on Fri, 26 Jul 2024 09:04:24 GMT
  */
 :where(:root),
 .onyx-theme-lidl {
@@ -109,7 +109,7 @@
   --onyx-number-radius-400: 1rem;
   --onyx-number-radius-500: 2rem;
   --onyx-number-radius-600: 62.5rem;
-  --onyx-number-spacing-0: 0;
+  --onyx-number-spacing-0: 0rem;
   --onyx-number-spacing-100: 0.125rem;
   --onyx-number-spacing-200: 0.25rem;
   --onyx-number-spacing-250: 0.375rem;

package/src/styles/{themes → variables/themes}/onyx.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly.
  * This file contains the specific variables for the "onyx" theme.
- * Imported from Figma API on Wed, 03 Jul 2024 13:48:07 GMT
+ * Imported from Figma API on Fri, 26 Jul 2024 09:04:19 GMT
  */
 :where(:root),
 .onyx-theme-default {
@@ -109,7 +109,7 @@
   --onyx-number-radius-400: 1rem;
   --onyx-number-radius-500: 2rem;
   --onyx-number-radius-600: 62.5rem;
-  --onyx-number-spacing-0: 0;
+  --onyx-number-spacing-0: 0rem;
   --onyx-number-spacing-100: 0.125rem;
   --onyx-number-spacing-200: 0.25rem;
   --onyx-number-spacing-250: 0.375rem;

package/src/styles/{themes → variables/themes}/onyx.json

@@ -103,7 +103,7 @@
   "onyx-number-radius-400": "1rem",
   "onyx-number-radius-500": "2rem",
   "onyx-number-radius-600": "62.5rem",
-  "onyx-number-spacing-0": "0",
+  "onyx-number-spacing-0": "0rem",
   "onyx-number-spacing-100": "0.125rem",
   "onyx-number-spacing-200": "0.25rem",
   "onyx-number-spacing-250": "0.375rem",

package/src/styles/{themes → variables/themes}/twogo.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly.
  * This file contains the specific variables for the "twogo" theme.
- * Imported from Figma API on Wed, 03 Jul 2024 13:48:13 GMT
+ * Imported from Figma API on Fri, 26 Jul 2024 09:04:24 GMT
  */
 :where(:root),
 .onyx-theme-twogo {
@@ -109,7 +109,7 @@
   --onyx-number-radius-400: 1rem;
   --onyx-number-radius-500: 2rem;
   --onyx-number-radius-600: 62.5rem;
-  --onyx-number-spacing-0: 0;
+  --onyx-number-spacing-0: 0rem;
   --onyx-number-spacing-100: 0.125rem;
   --onyx-number-spacing-200: 0.25rem;
   --onyx-number-spacing-250: 0.375rem;

package/src/styles/density.scss

@@ -1,41 +0,0 @@
-$density-compact: 2rem;
-$density-default: 2.5rem;
-$density-cozy: 3rem;
-
-@layer onyx.utility {
-  .onyx-density-compact {
-    --onyx-density: #{$density-compact};
-  }
-
-  :root,
-  .onyx-density-default {
-    --onyx-density: #{$density-default};
-  }
-
-  .onyx-density-cozy {
-    --onyx-density: #{$density-cozy};
-  }
-
-  @media (pointer: fine) {
-    .onyx-density-fine-compact {
-      --onyx-density: #{$density-compact};
-    }
-    .onyx-density-fine-default {
-      --onyx-density: #{$density-default};
-    }
-    .onyx-density-fine-cozy {
-      --onyx-density: #{$density-cozy};
-    }
-  }
-  @media (pointer: coarse) {
-    .onyx-density-coarse-compact {
-      --onyx-density: #{$density-compact};
-    }
-    .onyx-density-coarse-default {
-      --onyx-density: #{$density-default};
-    }
-    .onyx-density-coarse-cozy {
-      --onyx-density: #{$density-cozy};
-    }
-  }
-}

package/src/types/breakpoints.ts

@@ -1,14 +0,0 @@
-/**
- * All available onyx breakpoints / viewports.
- * Key = breakpoint name, value = width in pixels.
- */
-export const ONYX_BREAKPOINTS = {
-  "2xs": 320,
-  xs: 576,
-  sm: 768,
-  md: 992,
-  lg: 1440,
-  xl: 1920,
-} as const;
-
-export type OnyxBreakpoint = keyof typeof ONYX_BREAKPOINTS;

package/src/types/colors.ts

@@ -1,10 +0,0 @@
-export const ONYX_COLORS = [
-  "primary",
-  "secondary",
-  "neutral",
-  "danger",
-  "warning",
-  "success",
-  "info",
-] as const;
-export type OnyxColor = (typeof ONYX_COLORS)[number];

package/src/types/components.ts

@@ -1,59 +0,0 @@
-import type { DensityProp } from "../composables/density";
-import type { TruncationType } from "./fonts";
-
-// IMPORTANT: When changing this type, make sure to implement the feature
-// for the following components:
-// - Checkbox / Checkbox group
-// - Radio button / Radio group
-// - Select
-// - ...
-
-/**
- * Base select option that is e.g. used inside the select, radio / checkbox group.
- */
-export type BaseSelectOption<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp & {
-  /**
-   * Value of the option when it is selected.
-   * Must be unique in the current list of options.
-   */
-  value: TValue;
-  /**
-   * Label to show. Required due to accessibility / screen readers.
-   * If you want to visually hide the label, use the `hideLabel` property.
-   */
-  label: string;
-  /**
-   * If `true`, the label will be visually hidden and the `title` attribute will be set.
-   * For accessibility / screen readers, the aria-label will still be set.
-   */
-  hideLabel?: boolean;
-  /**
-   * Whether to disable the component and prevent user interaction.
-   */
-  disabled?: boolean;
-  /**
-   * Shows a loading indicator.
-   */
-  loading?: boolean;
-  /**
-   * Whether to show a skeleton.
-   */
-  skeleton?: boolean;
-  /**
-   * How to truncate the label if it exceeds the max width.
-   */
-  truncation?: TruncationType;
-};
-
-export type SelectOptionValue = string | number | boolean;
-
-export type AutofocusProp = {
-  /**
-   * Whether to focus the component on page load or inside a dialog/popover once it opens.
-   * Can only be enabled for one element inside a page/dialog/popover.
-   * Note: Has no effect when set after the component has been mounted.
-   *
-   * **UX / Accessibility**: autofocus should be used carefully since it can reduce usability and accessibility for users.
-   */
-  autofocus?: boolean;
-};

package/src/types/fonts.ts

@@ -1,7 +0,0 @@
-export const TEXT_SIZES = ["small", "default", "large"] as const;
-export type TextSize = (typeof TEXT_SIZES)[number];
-
-// when adding a new truncation type, make sure to also add CSS for it
-// inside styles/fonts.scss
-export const TRUNCATION_TYPES = ["ellipsis", "multiline"] as const;
-export type TruncationType = (typeof TRUNCATION_TYPES)[number];