platformscode-new-react 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "platformscode-new-react",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "React Components for Platformscode",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -23,6 +23,9 @@
     "build": "vite build",
     "dev": "vite"
   },
+  "files": [
+    "dist"
+  ],
   "devDependencies": {
     "@types/node": "^20.14.2",
     "@types/react": "^18.3.3",

package/.editorconfig

@@ -1,15 +0,0 @@
-# http://editorconfig.org
-
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.md]
-insert_final_newline = false
-trim_trailing_whitespace = false

package/.prettierrc.json

@@ -1,13 +0,0 @@
-{
-  "arrowParens": "avoid",
-  "bracketSpacing": true,
-  "jsxBracketSameLine": false,
-  "jsxSingleQuote": false,
-  "quoteProps": "consistent",
-  "printWidth": 180,
-  "semi": true,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "trailingComma": "all",
-  "useTabs": false
-}

package/src/assets/styles/abstracts/_functions.scss

@@ -1,3 +0,0 @@
-@function alpha($type: "white", $percentage: 100%) {
-  @return hsla(var(--colors-alpha-#{$type})/$percentage);
-}

package/src/assets/styles/abstracts/_mixins.scss

@@ -1,60 +0,0 @@
-// MEDIA QUERY MANAGER
-/*
-0 - 600px:      Phone
-600 - 900px:    Tablet portrait
-900 - 1200px:   Tablet landscape
-[1200 - 1800] is where our normal styles apply
-1800px + :      Big desktop
-
-$breakpoint arguement choices:
-- phone
-- tab-port
-- tab-land
-- small-screen
-- big-desktop
-
-ORDER: Base + typography > general layout + grid > page layout > components
-
-1em = 16px
-*/
-@mixin responsive($breakpoint) {
-  @if $breakpoint==phone {
-    @media only screen and (max-width: 37.5em) {
-      @content
-    }
-
-    ; //600px
-  }
-
-  @if $breakpoint==tab-port {
-    @media only screen and (max-width: 56.25em) {
-      @content
-    }
-
-    ; //900px
-  }
-
-  @if $breakpoint==tab-land {
-    @media only screen and (max-width: 75em) {
-      @content
-    }
-
-    ; //1200px
-  }
-
-  @if $breakpoint==small-screen {
-    @media only screen and (max-width: 84em) {
-      @content
-    }
-
-    ; //1350px
-  }
-
-  @if $breakpoint==big-desktop {
-    @media only screen and (min-width: 112.5em) {
-      @content
-    }
-
-    ; //1800
-  }
-}

package/src/assets/styles/abstracts/_variables.scss

@@ -1,46 +0,0 @@
-@import "./variables/spacing";
-@import "./variables/widths";
-@import "./variables/radius";
-@import "./variables/colors";
-@import "./variables/shadows";
-
-// -------------------------
-// -------- colors ---------
-// -------------------------
-
-@import "../themes/light";
-
-[data-theme="dark"] {
-  @import "../themes/dark";
-}
-
-// -------------------------
-// ------ typography -------
-// -------------------------
-// my recommendation to do this
-// 16 px = 1 rem = 100  %
-// 10 px = 1 rem = 62.5 %
-// 6  px = 1 rem = 37.5 %
-
-// 60 px = 6 rem = 62.5 %
-// 40 px = 4 rem = 62.5 %
-// 30 px = 3 rem = 62.5 %
-// 20 px = 2 rem = 62.5 %
-
-// 36 px = 6 rem = 37.5 %
-// 24 px = 4 rem = 37.5 %
-// 18 px = 3 rem = 37.5 %
-// 12 px = 2 rem = 37.5 %
-
-// display
-$display-xl: 60px;
-$display-lg: 48px;
-$display-md: 36px;
-$display-sm: 30px;
-$display-xs: 24px;
-// text
-$text-xl: 18px;
-$text-lg: 16px;
-$text-md: 14px;
-$text-sm: 12px;
-$text-xs: 10px;

package/src/assets/styles/abstracts/variables/_colors.scss

@@ -1,145 +0,0 @@
-:root {
-  // updated vars
-  --colors-base-white: #ffffff;
-  --colors-base-black: #161616;
-
-  --colors-primary-sa-flag-25: #f7fdf9;
-  --colors-primary-sa-flag-50: #f3fcf6;
-  --colors-primary-sa-flag-100: #dff6e7;
-  --colors-primary-sa-flag-200: #b8eacb;
-  --colors-primary-sa-flag-300: #88d8ad;
-  --colors-primary-sa-flag-400: #54c08a;
-  --colors-primary-sa-flag-500-alpha-10: #25935f19;
-  --colors-primary-sa-flag-500: #25935f;
-  --colors-primary-sa-flag-600-primary: #1b8354;
-  --colors-primary-sa-flag-700: #166a45;
-  --colors-primary-sa-flag-800: #14573a;
-  --colors-primary-sa-flag-900: #104631;
-  --colors-primary-sa-flag-950: #092a1e;
-
-  --colors-secondary-gold-25: #fffef7;
-  --colors-secondary-gold-50: #fffef2;
-  --colors-secondary-gold-100: #fffce6;
-  --colors-secondary-gold-200: #fcf3bd;
-  --colors-secondary-gold-300: #fae996;
-  --colors-secondary-gold-400: #f7d54d;
-  --colors-secondary-gold-500: #f5bd02;
-  --colors-secondary-gold-600-primary: #dba102;
-  --colors-secondary-gold-700: #b87b02;
-  --colors-secondary-gold-800: #945c01;
-  --colors-secondary-gold-900: #6e3c00;
-  --colors-secondary-gold-950: #472400;
-
-  --colors-tertiary-lavendar-25: #fefcff;
-  --colors-tertiary-lavendar-50: #f9f5fa;
-  --colors-tertiary-lavendar-100: #f2e9f5;
-  --colors-tertiary-lavendar-200: #e1cce8;
-  --colors-tertiary-lavendar-300: #ccadd9;
-  --colors-tertiary-lavendar-400: #a57bba;
-  --colors-tertiary-lavendar-500-primary: #80519f;
-  --colors-tertiary-lavendar-600: #6d428f;
-  --colors-tertiary-lavendar-700: #532d75;
-  --colors-tertiary-lavendar-800: #3d1d5e;
-  --colors-tertiary-lavendar-900: #281047;
-  --colors-tertiary-lavendar-950: #16072e;
-
-  --colors-neutral-25: #fcfcfd;
-  --colors-neutral-50: #f9fafb;
-  --colors-neutral-100: #f3f4f6;
-  --colors-neutral-200: #e5e7eb;
-  --colors-neutral-300: #d2d6db;
-  --colors-neutral-400: #9da4ae;
-  --colors-neutral-500: #6c727e;
-  --colors-neutral-600: #4d5761;
-  --colors-neutral-700: #384250;
-  --colors-neutral-800: #1f2a37;
-  --colors-neutral-900: #111927;
-  --colors-neutral-950: #0c111b;
-
-  --colors-blue-25: #f5faff;
-  --colors-blue-50: #eff8ff;
-  --colors-blue-100: #d1e9ff;
-  --colors-blue-200: #b2ddff;
-  --colors-blue-300: #84caff;
-  --colors-blue-400: #53b0fd;
-  --colors-blue-500: #2e90fa;
-  --colors-blue-600: #156fee;
-  --colors-blue-700: #175cd3;
-  --colors-blue-800: #1849a9;
-  --colors-blue-900: #194084;
-  --colors-blue-950: #102a56;
-
-  --colors-green-25: #f6fef9;
-  --colors-green-50: #ecfdf3;
-  --colors-green-100: #dcfae6;
-  --colors-green-200: #abefc6;
-  --colors-green-300: #75dfa6;
-  --colors-green-400: #47cd89;
-  --colors-green-500: #17b169;
-  --colors-green-600: #069454;
-  --colors-green-700: #067647;
-  --colors-green-800: #085d3a;
-  --colors-green-900: #074c30;
-  --colors-green-950: #053321;
-
-  --colors-yellow-25: #fffcf5;
-  --colors-yellow-50: #fffaeb;
-  --colors-yellow-100: #fef0c7;
-  --colors-yellow-200: #fedf89;
-  --colors-yellow-300: #fec84b;
-  --colors-yellow-400: #fdb022;
-  --colors-yellow-500: #f79009;
-  --colors-yellow-600: #dc6803;
-  --colors-yellow-700: #b54707;
-  --colors-yellow-800: #93370c;
-  --colors-yellow-900: #7a2e0e;
-  --colors-yellow-950: #4e1d09;
-
-  --colors-red-25: #fffbfa;
-  --colors-red-50: #fef3f2;
-  --colors-red-100: #fee4e2;
-  --colors-red-200: #fecdca;
-  --colors-red-300: #fca19b;
-  --colors-red-400: #f97066;
-  --colors-red-500: #f04437;
-  --colors-red-600: #d92c20;
-  --colors-red-700: #b42318;
-  --colors-red-800: #912018;
-  --colors-red-900: #7a2619;
-  --colors-red-950: #54150c;
-
-  --colors-alpha-alpha-white-0: #ffffff00;
-  --colors-alpha-alpha-white-10: #ffffff19;
-  --colors-alpha-alpha-white-20: #ffffff33;
-  --colors-alpha-alpha-white-30: #ffffff4c;
-  --colors-alpha-alpha-white-40: #ffffff66;
-  --colors-alpha-alpha-white-50: #ffffff7f;
-  --colors-alpha-alpha-white-60: #ffffff99;
-  --colors-alpha-alpha-white-70: #ffffffb2;
-  --colors-alpha-alpha-white-80: #ffffffcc;
-  --colors-alpha-alpha-white-90: #ffffffe5;
-  --colors-alpha-alpha-white-100: #ffffff;
-
-  --colors-alpha-alpha-black-0: #16161600;
-  --colors-alpha-alpha-black-10: #16161619;
-  --colors-alpha-alpha-black-20: #16161633;
-  --colors-alpha-alpha-black-30: #1616164c;
-  --colors-alpha-alpha-black-40: #16161666;
-  --colors-alpha-alpha-black-50: #1616167f;
-  --colors-alpha-alpha-black-60: #16161699;
-  --colors-alpha-alpha-black-70: #161616b2;
-  --colors-alpha-alpha-black-80: #161616cc;
-  --colors-alpha-alpha-black-90: #161616e5;
-  --colors-alpha-alpha-black-100: #161616;
-
-  --colors-alpha-alpha-green-10: #1b835419;
-  --colors-alpha-alpha-green-20: #1b835433;
-  --colors-alpha-alpha-green-30: #1b83544c;
-  --colors-alpha-alpha-green-40: #1b835466;
-  --colors-alpha-alpha-green-50: #1b83547f;
-  --colors-alpha-alpha-green-60: #1b835499;
-  --colors-alpha-alpha-green-70: #1b8354b2;
-  --colors-alpha-alpha-green-80: #1b8354cc;
-  --colors-alpha-alpha-green-90: #1b8354e5;
-  --colors-alpha-alpha-green-100: var(--colors-primary-sa-flag-600-primary);
-}

package/src/assets/styles/abstracts/variables/_radius.scss

@@ -1,19 +0,0 @@
-:root {
-  // updated vars
-  --radius-0: 0;
-  --radius-2: 2px;
-  --radius-4: 4px;
-  --radius-8: 8px;
-  --radius-16: 16px;
-  --radius-24: 24px;
-  --radius-9999: 9999px;
-
-  --components-card-radius: var(--spacing-4);
-  --radius-none: var(--radius-0);
-  --radius-xs: var(--radius-2);
-  --radius-sm: var(--radius-4);
-  --radius-md: var(--radius-8);
-  --radius-lg: var(--radius-16);
-  --radius-xl: var(--radius-24);
-  --radius-full: var(--radius-9999);
-}

package/src/assets/styles/abstracts/variables/_shadows.scss

@@ -1,9 +0,0 @@
-:root {
-  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-  --shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
-  --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10);
-  --shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
-  --shadow-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
-  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
-  --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
-}

package/src/assets/styles/abstracts/variables/_spacing.scss

@@ -1,35 +0,0 @@
-:root {
-  // updated vars
-  --spacing-0: 0px;
-  --spacing-0․5: 2px;
-  --spacing-1: 4px;
-  --spacing-1․5: 6px;
-  --spacing-2: 8px;
-  --spacing-3: 12px;
-  --spacing-4: 16px;
-  --spacing-5: 20px;
-  --spacing-6: 24px;
-  --spacing-8: 32px;
-  --spacing-10: 40px;
-  --spacing-12: 48px;
-  --spacing-16: 64px;
-  --spacing-20: 80px;
-  --spacing-24: 96px;
-  --spacing-32: 128px;
-  --spacing-40: 160px;
-  --spacing-48: 192px;
-  --spacing-56: 224px;
-  --spacing-64: 256px;
-  --spacing-96: 384px;
-  --spacing-80: 320px;
-  --spacing-120: 480px;
-  --spacing-140: 560px;
-  --spacing-160: 640px;
-  --spacing-180: 720px;
-  --spacing-192: 768px;
-  --spacing-256: 1024px;
-  --spacing-320: 1280px;
-  --spacing-360: 1440px;
-  --spacing-400: 1600px;
-  --spacing-480: 1920px;
-}

package/src/assets/styles/abstracts/variables/_widths.scss

@@ -1,306 +0,0 @@
-:root {
-  /* Updated Vars */
-  --width-xxs: var(--spacing-80);
-  --width-xs: var(--spacing-96);
-  --width-sm: var(--spacing-120);
-  --width-md: var(--spacing-140);
-  --width-lg: var(--spacing-160);
-  --width-xl: var(--spacing-192);
-  --width-2xl: var(--spacing-256);
-  --width-3xl: var(--spacing-320);
-  --width-4xl: var(--spacing-360);
-  --width-5xl: var(--spacing-400);
-  --width-6xl: var(--spacing-480);
-  --maxwidth-paragraph-max-width: var(--spacing-180);
-}
-
-/* Desktop */
-@media only screen and (min-width: 1025px) {
-  :root {
-    --tooltip-padding: var(--spacing-2);
-    --tooltip-gap: var(--spacing-2);
-    --tab-button-gap: var(--spacing-1);
-    --notification-gap: var(--spacing-4);
-    --notification-padding: var(--spacing-4);
-    --notification-h-padding: var(--spacing-6);
-    --notification-alert-v-padding: var(--spacing-2);
-    --notification-alert-h-padding: var(--spacing-6);
-    --notification-toast-v-padding: var(--spacing-4);
-    --notification-toast-desktop-h-padding: var(--spacing-6);
-    --notification-toast-mobile-h-padding: var(--spacing-4);
-    --tab-horizontal-tab-md-button-v-padding: var(--spacing-3);
-    --tab-horizontal-tab-md-button-h-padding: var(--spacing-4);
-    --tab-horizontal-tab-sm-button-v-padding: var(--spacing-2);
-    --tab-horizontal-tab-sm-button-h-padding: var(--spacing-3);
-    --tab-vertical-tab-md-button-v-padding: var(--spacing-1.5);
-    --tab-vertical-tab-md-button-h-padding: var(--spacing-3);
-    --tab-vertical-tab-sm-button-v-padding: var(--spacing-0.5);
-    --tab-vertical-tab-sm-button-h-padding: var(--spacing-1.5);
-    --table-cell-gap: var(--spacing-2);
-    --table-cell-v-padding: var(--spacing-2);
-    --table-cell-h-padding: var(--spacing-4);
-    --control-vertical-gap: var(--spacing-1);
-    --control-title-error-gap: var(--spacing-4);
-    --control-switch-error-icon-gap: var(--spacing-2);
-    --control-radio-error-icon-gap: var(--spacing-4);
-    --control-switch-description-padding: var(--spacing-16);
-    --control-radio-description-padding: var(--spacing-12);
-    --form-label-gap: var(--spacing-1);
-    --form-field-label-gap: var(--spacing-2);
-    --form-input-padding: var(--spacing-0);
-    --form-input-gap: var(--spacing-0);
-    --form-textarea-padding: var(--spacing-0);
-    --form-textarea-gap: var(--spacing-0);
-    --form-select-padding: var(--spacing-0);
-    --form-select-gap: var(--spacing-0);
-    --accordion-lg-header-padding: var(--spacing-4);
-    --accordion-lg-header-gap: var(--spacing-4);
-    --accordion-md-header-padding: var(--spacing-3);
-    --accordion-md-header-gap: var(--spacing-12);
-    --accordion-sm-header-padding: var(--spacing-2);
-    --accordion-sm-header-gap: var(--spacing-2);
-    --card-lg-padding: var(--spacing-8);
-    --section-padding: var(--spacing-8);
-    --section-gap: var(--spacing-8);
-    --text-content-gap: var(--spacing-2);
-    --icon-text-gap: var(--spacing-2);
-    --buttons-lg-gap: var(--spacing-1);
-    --model-padding: var(--spacing-6);
-    --buttons-lg-padding: var(--spacing-4);
-    --model-gap: var(--spacing-2);
-    --buttons-md-gap: var(--spacing-1);
-    --buttons-md-padding: var(--spacing-3);
-    --buttons-sm-gap: var(--spacing-1);
-    --buttons-sm-padding: var(--spacing-2);
-    --model-content-bottom-padding: var(--spacing-4);
-    --buttons-group-gap: var(--spacing-2);
-    --button-menu-gap: var(--spacing-2);
-    --button-menu-v-padding: var(--spacing-2);
-    --button-menu-h-padding: var(--spacing-2);
-    --link-md-gap: var(--spacing-2);
-    --link-sm-gap: var(--spacing-1);
-    --link-links-group-gap: var(--spacing-3);
-    --progressindicator-progress-indicator-gap: var(--spacing-2);
-    --progressindicator-progress-text-content-side-padding: var(--spacing-4);
-    --pagination-item-sm-padding: var(--spacing-1);
-    --pagination-item-md-padding: var(--spacing-1.5);
-    --pagination-item-lg-padding: var(--spacing-2);
-    --pagination-items-padding: var(--spacing-2);
-    --spacing-none: var(--spacing-0);
-    --spacing-xxs: var(--spacing-0.5);
-    --spacing-xs: var(--spacing-1);
-    --spacing-sm: var(--spacing-1.5);
-    --spacing-md: var(--spacing-2);
-    --spacing-lg: var(--spacing-3);
-    --spacing-xl: var(--spacing-4);
-    --spacing-2xl: var(--spacing-5);
-    --spacing-3xl: var(--spacing-6);
-    --spacing-4xl: var(--spacing-8);
-    --spacing-5xl: var(--spacing-10);
-    --spacing-6xl: var(--spacing-12);
-    --spacing-7xl: var(--spacing-16);
-    --spacing-8xl: var(--spacing-20);
-    --spacing-9xl: var(--spacing-24);
-    --spacing-10xl: var(--spacing-32);
-    --spacing-11xl: var(--spacing-40);
-    --card-lg-gap: var(--spacing-6);
-    --card-md-padding: var(--spacing-8);
-    --card-md-gap: var(--spacing-6);
-    --card-sm-padding: var(--spacing-8);
-    --card-sm-gap: var(--spacing-6);
-  }
-}
-
-/* Tablet */
-@media only screen and (min-width: 768px) {
-  :root {
-    --tooltip-padding: var(--spacing-2);
-    --tooltip-gap: var(--spacing-2);
-    --tab-button-gap: var(--spacing-1);
-    --notification-gap: var(--spacing-4);
-    --notification-padding: var(--spacing-4);
-    --notification-h-padding: var(--spacing-6);
-    --notification-alert-v-padding: var(--spacing-2);
-    --notification-alert-h-padding: var(--spacing-6);
-    --notification-toast-v-padding: var(--spacing-4);
-    --notification-toast-desktop-h-padding: var(--spacing-6);
-    --notification-toast-mobile-h-padding: var(--spacing-4);
-    --tab-horizontal-tab-md-button-v-padding: var(--spacing-3);
-    --tab-horizontal-tab-md-button-h-padding: var(--spacing-4);
-    --tab-horizontal-tab-sm-button-v-padding: var(--spacing-2);
-    --tab-horizontal-tab-sm-button-h-padding: var(--spacing-3);
-    --tab-vertical-tab-md-button-v-padding: var(--spacing-1.5);
-    --tab-vertical-tab-md-button-h-padding: var(--spacing-3);
-    --tab-vertical-tab-sm-button-v-padding: var(--spacing-0.5);
-    --tab-vertical-tab-sm-button-h-padding: var(--spacing-1.5);
-    --table-cell-gap: var(--spacing-2);
-    --table-cell-v-padding: var(--spacing-2);
-    --table-cell-h-padding: var(--spacing-4);
-    --control-vertical-gap: var(--spacing-1);
-    --control-title-error-gap: var(--spacing-3);
-    --control-switch-error-icon-gap: var(--spacing-2);
-    --control-radio-error-icon-gap: var(--spacing-4);
-    --control-switch-description-padding: var(--spacing-16);
-    --control-radio-description-padding: var(--spacing-12);
-    --form-label-gap: var(--spacing-1);
-    --form-field-label-gap: var(--spacing-2);
-    --form-input-padding: var(--spacing-0);
-    --form-input-gap: var(--spacing-0);
-    --form-textarea-padding: var(--spacing-0);
-    --form-textarea-gap: var(--spacing-0);
-    --form-select-padding: var(--spacing-0);
-    --form-select-gap: var(--spacing-0);
-    --accordion-lg-header-padding: var(--spacing-4);
-    --accordion-lg-header-gap: var(--spacing-4);
-    --accordion-md-header-padding: var(--spacing-3);
-    --accordion-md-header-gap: var(--spacing-3);
-    --accordion-sm-header-padding: var(--spacing-2);
-    --accordion-sm-header-gap: var(--spacing-2);
-    --card-lg-padding: var(--spacing-6);
-    --section-padding: var(--spacing-6);
-    --section-gap: var(--spacing-6);
-    --text-content-gap: var(--spacing-2);
-    --icon-text-gap: var(--spacing-2);
-    --buttons-lg-gap: var(--spacing-1);
-    --model-padding: var(--spacing-6);
-    --buttons-lg-padding: var(--spacing-4);
-    --model-gap: var(--spacing-2);
-    --buttons-md-gap: var(--spacing-1);
-    --buttons-md-padding: var(--spacing-3);
-    --buttons-sm-gap: var(--spacing-1);
-    --buttons-sm-padding: var(--spacing-2);
-    --model-content-bottom-padding: var(--spacing-4);
-    --buttons-group-gap: var(--spacing-2);
-    --button-menu-gap: var(--spacing-2);
-    --button-menu-v-padding: var(--spacing-2);
-    --button-menu-h-padding: var(--spacing-2);
-    --link-md-gap: var(--spacing-2);
-    --link-sm-gap: var(--spacing-1);
-    --link-links-group-gap: var(--spacing-3);
-    --progressindicator-progress-indicator-gap: var(--spacing-2);
-    --progressindicator-progress-text-content-side-padding: var(--spacing-4);
-    --pagination-item-sm-padding: var(--spacing-1);
-    --pagination-item-md-padding: var(--spacing-1.5);
-    --pagination-item-lg-padding: var(--spacing-2);
-    --pagination-items-padding: var(--spacing-2);
-    --spacing-none: var(--spacing-0);
-    --spacing-xxs: var(--spacing-0.5);
-    --spacing-xs: var(--spacing-1);
-    --spacing-sm: var(--spacing-1.5);
-    --spacing-md: var(--spacing-2);
-    --spacing-lg: var(--spacing-3);
-    --spacing-xl: var(--spacing-4);
-    --spacing-2xl: var(--spacing-5);
-    --spacing-3xl: var(--spacing-6);
-    --spacing-4xl: var(--spacing-8);
-    --spacing-5xl: var(--spacing-10);
-    --spacing-6xl: var(--spacing-12);
-    --spacing-7xl: var(--spacing-16);
-    --spacing-8xl: var(--spacing-20);
-    --spacing-9xl: var(--spacing-24);
-    --spacing-10xl: var(--spacing-32);
-    --spacing-11xl: var(--spacing-40);
-    --card-lg-gap: var(--spacing-6);
-    --card-md-padding: var(--spacing-6);
-    --card-md-gap: var(--spacing-5);
-    --card-sm-padding: var(--spacing-6);
-    --card-sm-gap: var(--spacing-5);
-  }
-}
-
-/* Mobile */
-@media only screen and (max-width: 767px) {
-  :root {
-    --tooltip-padding: var(--spacing-2);
-    --tooltip-gap: var(--spacing-2);
-    --tab-button-gap: var(--spacing-1);
-    --notification-gap: var(--spacing-2);
-    --notification-padding: var(--spacing-3);
-    --notification-h-padding: var(--spacing-4);
-    --notification-alert-v-padding: var(--spacing-2);
-    --notification-alert-h-padding: var(--spacing-4);
-    --notification-toast-v-padding: var(--spacing-3);
-    --notification-toast-desktop-h-padding: var(--spacing-4);
-    --notification-toast-mobile-h-padding: var(--spacing-4);
-    --tab-horizontal-tab-md-button-v-padding: var(--spacing-2);
-    --tab-horizontal-tab-md-button-h-padding: var(--spacing-3);
-    --tab-horizontal-tab-sm-button-v-padding: var(--spacing-1);
-    --tab-horizontal-tab-sm-button-h-padding: var(--spacing-2);
-    --tab-vertical-tab-md-button-v-padding: var(--spacing-1);
-    --tab-vertical-tab-md-button-h-padding: var(--spacing-2);
-    --tab-vertical-tab-sm-button-v-padding: var(--spacing-0.5);
-    --tab-vertical-tab-sm-button-h-padding: var(--spacing-1);
-    --table-cell-gap: var(--spacing-1);
-    --table-cell-v-padding: var(--spacing-1);
-    --table-cell-h-padding: var(--spacing-3);
-    --control-vertical-gap: var(--spacing-1);
-    --control-title-error-gap: var(--spacing-2);
-    --control-switch-error-icon-gap: var(--spacing-1);
-    --control-radio-error-icon-gap: var(--spacing-12);
-    --control-switch-description-padding: var(--spacing-16);
-    --control-radio-description-padding: var(--spacing-12);
-    --form-label-gap: var(--spacing-1);
-    --form-field-label-gap: var(--spacing-2);
-    --form-input-padding: var(--spacing-0);
-    --form-input-gap: var(--spacing-0);
-    --form-textarea-padding: var(--spacing-0);
-    --form-textarea-gap: var(--spacing-0);
-    --form-select-padding: var(--spacing-0);
-    --form-select-gap: var(--spacing-0);
-    --accordion-lg-header-padding: var(--spacing-4);
-    --accordion-lg-header-gap: var(--spacing-4);
-    --accordion-md-header-padding: var(--spacing-3);
-    --accordion-md-header-gap: var(--spacing-3);
-    --accordion-sm-header-padding: var(--spacing-2);
-    --accordion-sm-header-gap: var(--spacing-2);
-    --card-lg-padding: var(--spacing-4);
-    --section-padding: var(--spacing-4);
-    --section-gap: var(--spacing-4);
-    --text-content-gap: var(--spacing-1);
-    --icon-text-gap: var(--spacing-1);
-    --buttons-lg-gap: var(--spacing-1);
-    --model-padding: var(--spacing-4);
-    --buttons-lg-padding: var(--spacing-4);
-    --model-gap: var(--spacing-1);
-    --buttons-md-gap: var(--spacing-1);
-    --buttons-md-padding: var(--spacing-3);
-    --buttons-sm-gap: var(--spacing-1);
-    --buttons-sm-padding: var(--spacing-2);
-    --model-content-bottom-padding: var(--spacing-2);
-    --buttons-group-gap: var(--spacing-1);
-    --button-menu-gap: var(--spacing-2);
-    --button-menu-v-padding: var(--spacing-2);
-    --button-menu-h-padding: var(--spacing-2);
-    --link-md-gap: var(--spacing-1);
-    --link-sm-gap: var(--spacing-1);
-    --link-links-group-gap: var(--spacing-2);
-    --progressindicator-progress-indicator-gap: var(--spacing-4);
-    --progressindicator-progress-text-content-side-padding: var(--spacing-3);
-    --pagination-item-sm-padding: var(--spacing-1);
-    --pagination-item-md-padding: var(--spacing-1.5);
-    --pagination-item-lg-padding: var(--spacing-2);
-    --pagination-items-padding: var(--spacing-1);
-    --spacing-none: var(--spacing-0);
-    --spacing-xxs: var(--spacing-0.5);
-    --spacing-xs: var(--spacing-1);
-    --spacing-sm: var(--spacing-1.5);
-    --spacing-md: var(--spacing-2);
-    --spacing-lg: var(--spacing-3);
-    --spacing-xl: var(--spacing-4);
-    --spacing-2xl: var(--spacing-5);
-    --spacing-3xl: var(--spacing-6);
-    --spacing-4xl: var(--spacing-8);
-    --spacing-5xl: var(--spacing-10);
-    --spacing-6xl: var(--spacing-12);
-    --spacing-7xl: var(--spacing-16);
-    --spacing-8xl: var(--spacing-20);
-    --spacing-9xl: var(--spacing-24);
-    --spacing-10xl: var(--spacing-32);
-    --spacing-11xl: var(--spacing-40);
-    --card-lg-gap: var(--spacing-4);
-    --card-md-padding: var(--spacing-4);
-    --card-md-gap: var(--spacing-3);
-    --card-sm-padding: var(--spacing-4);
-    --card-sm-gap: var(--spacing-3);
-  }
-}