tide-design-system 2.4.1 → 2.4.2

package/netlify.toml

@@ -0,0 +1,3 @@
+[context."sandbox"]
+  command = "npm run build-sandbox"
+  publish = "/dist"

package/package.json

@@ -44,15 +44,17 @@
   },
   "scripts": {
     "build": "npm run enforce && npm run build-vite",
+    "build-sandbox": "vite build --config vite.config.sandbox.ts",
     "build-storybook": "npm run build-vite && storybook build && cp -r src/assets/ storybook-static/",
-    "build-vite": "vite build && cp -r src/assets/css/ dist/css/ && cp -r src/utilities/ dist/utilities/",
+    "build-vite": "vite build",
     "coverage": "vitest run --coverage",
     "dev": "vite",
     "enforce": "npm run lint && npm run type-check && npm run test",
     "lint": "eslint . --ext .js,.ts,.vue --ignore-path .gitignore",
     "lint:fix": "eslint . --ext .js,.ts,.vue --ignore-path .gitignore --fix",
     "precommit": "npm run lint:fix && npm run type-check && npm run test",
-    "preview": "npm run build-storybook && npx http-server -a localhost storybook-static/",
+    "preview-sandbox": "npm run build-sandbox && npx http-server -a localhost dist/",
+    "preview-storybook": "npm run build && npx http-server -a localhost storybook-static/",
     "storybook": "storybook dev -p 6006",
     "test": "vitest run",
     "type-check": "vue-tsc --noEmit"
@@ -61,7 +63,7 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/components/TideChipAction.vue

@@ -8,7 +8,7 @@
   import type { Element } from '@/types/Element';
 
   type Props = {
-    element: Element;
+    element?: Element;
     href?: string;
     isNewTab?: boolean;
     label: string;

package/src/components/TideImageBackground.vue

@@ -6,8 +6,8 @@
   import type { Source } from '@/types/Source';
 
   type Props = {
-    alt: string;
-    isLazy: boolean;
+    alt?: string;
+    isLazy?: boolean;
     sources?: Source[];
     src?: string;
   };

package/src/components/TideInputCheckboxDeprecated.vue

@@ -19,8 +19,8 @@
     disabled?: boolean;
     indeterminate?: boolean;
     inputId?: string;
-    label: string;
-    name: string;
+    label?: string;
+    name?: string;
     number?: number;
   };
 

package/src/components/TideInputRadioDeprecated.vue

@@ -15,8 +15,8 @@
     checked?: boolean;
     disabled?: boolean;
     inputId?: string;
-    label: string;
-    name: string;
+    label?: string;
+    name?: string;
     number?: number;
   };
 

package/src/components/TideInputTextDeprecated.vue

@@ -27,10 +27,10 @@
     hasClear?: boolean;
     iconLeading?: Icon;
     inputId?: string;
-    label: string;
+    label?: string;
     maxlength?: number | undefined;
     minlength?: number | undefined;
-    name: string;
+    name?: string;
     prefix?: string;
     required?: boolean;
     suffix?: string;

package/src/stories/FoundationsTypography.stories.ts

@@ -4,6 +4,8 @@ import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utili
 import type { StoryContext } from '@storybook/vue3';
 
 const TYPOGRAPHY = prependNoneAsEmpty(STYLES.TYPOGRAPHY);
+const TEXT_DECORATION = prependNoneAsEmpty(STYLES.TEXT_DECORATION);
+const TEXT_TRANSFORM = prependNoneAsEmpty(STYLES.TEXT_TRANSFORM);
 
 const formatArgs = (args: any) => {
   args.class = formatClassNames(args).join(' ');
@@ -15,6 +17,8 @@ const formatClassNames = (args: any) => {
   const classNames: string[] = [];
 
   if (args.type) classNames.push(args.type);
+  if (args.textDecoration) classNames.push(args.textDecoration);
+  if (args.textTransform) classNames.push(args.textTransform);
 
   return classNames;
 };
@@ -63,6 +67,24 @@ export default {
         type: { summary: 'string' },
       },
     },
+    textDecoration: {
+      ...formatArgType({ TEXT_DECORATION }),
+      description: 'Applies text decoration styles',
+      name: 'Text Decoration',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'CSS.STRIKETHROUGH | CSS.UNDERLINE' },
+      },
+    },
+    textTransform: {
+      ...formatArgType({ TEXT_TRANSFORM }),
+      description: 'Applies text transformation styles',
+      name: 'Text Transform',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'CSS.TEXT_TRANSFORM' },
+      },
+    },
     type: {
       ...formatArgType({ TYPOGRAPHY }),
       description: `Applies font rules`,
@@ -75,6 +97,8 @@ export default {
   },
   args: {
     label: 'Aa',
+    textDecoration: TEXT_DECORATION.None,
+    textTransform: TEXT_TRANSFORM.None,
     type: TYPOGRAPHY.None,
   },
   parameters,

package/src/types/Storybook.ts

@@ -217,6 +217,16 @@ export const SHADOW = {
   Top: CSS.SHADOW.TOP,
 };
 
+export const TEXT_DECORATION = {
+  Strikethrough: CSS.STRIKETHROUGH.ON,
+  Underline: CSS.UNDERLINE.REST.ON,
+};
+
+export const TEXT_TRANSFORM = {
+  Lowercase: CSS.TEXT_TRANSFORM.LOWER,
+  Uppercase: CSS.TEXT_TRANSFORM.UPPER,
+};
+
 export const TRANSPARENT = {
   '100: 90% White': CSS.BG.TRANSPARENT.ONE_HUNDRED,
   '200: 75% White': CSS.BG.TRANSPARENT.TWO_HUNDRED,

package/vite.config.sandbox.ts

@@ -0,0 +1,29 @@
+import vue from '@vitejs/plugin-vue';
+import { URL, fileURLToPath } from 'node:url';
+import { defineConfig } from 'vite';
+import ViteDts from 'vite-plugin-dts';
+import svgLoader from 'vite-svg-loader';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    cssCodeSplit: false,
+    outDir: 'dist',
+    sourcemap: true,
+  },
+  plugins: [
+    vue(),
+    svgLoader({
+      svgo: false,
+    }),
+    ViteDts({
+      insertTypesEntry: true,
+      rollupTypes: true,
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+});

package/dist/css/fonts.css

@@ -1,36 +0,0 @@
-/* latin */
-@font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 400;
-  font-display: block;
-  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
-  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* latin */
-@font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 500;
-  font-display: block;
-  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
-  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* latin */
-@font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 600;
-  font-display: block;
-  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
-  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* latin */
-@font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 700;
-  font-display: block;
-  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
-  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}

package/dist/css/grid-layout.css

@@ -1,34 +0,0 @@
-:root {
-  --tide-1232px: 73rem;
-  --tide-1920px: 120rem;
-}
-
-.tide-grid-layout {
-  --tide-max-content-width: var(--tide-1232px);
-  --tide-column-width:      minmax(0, var(--tide-max-content-width));
-  --tide-gutter-width:      var(--tide-spacing-1);
-
-  display: grid;
-  grid-auto-rows: min-content;
-  grid-template-columns:
-    minmax(var(--tide-gutter-width), 1fr)
-    var(--tide-column-width)
-    minmax(var(--tide-gutter-width), 1fr);
-}
-
-@media (min-width: 768px) {
-  .tide-grid-layout {--tide-gutter-width: var(--tide-spacing-2);}
-}
-
-@media (min-width: 1232px) {
-  .tide-grid-layout {--tide-gutter-width: var(--tide-spacing-4);}
-}
-
-.tide-grid-xl {--tide-max-content-width: var(--tide-1920px);}
-
-.tide-grid-layout > *,
-.tide-grid-item {
-  grid-column: 2 / -2;
-}
-
-.tide-fluid {grid-column: 1 / -1;}

package/dist/css/main.css

@@ -1,5 +0,0 @@
-@import './fonts.css';
-@import './reset.css';
-@import './variables.css';
-@import './utilities.css';
-@import './grid-layout.css';

package/dist/css/realm/aero.css

@@ -1,25 +0,0 @@
-/* Aero Trader Realm Colors */
-:root {
-  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-realm-aqua:       #A2DEE5;
-  --tide-realm-atmosphere: #3F6EBD;
-  --tide-realm-cloud:      #E3E8F1;
-  --tide-realm-sky:        #AAD4F0;
-  --tide-realm-starry:     #3F6EBD;
-
-  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:        var(--tide-realm-atmosphere);
-  --tide-surface-accent: var(--tide-realm-cloud);
-  --tide-surface-brand:  var(--tide-realm-starry);
-
-  --tide-on-primary:       var(--tide-gray-100);
-  --tide-on-surface-brand: var(--tide-realm-starry);
-
-  --tide-gradient-bottom-right-color: var(--tide-realm-sky);
-  --tide-gradient-top-color: var(--tide-realm-aqua);
-  --tide-gradient-bottom-left-color: var(--tide-realm-atmosphere);
-
-  --tide-gradient-bottom-right-opacity: 65%;
-  --tide-gradient-top-opacity: 42%;
-  --tide-gradient-bottom-left-opacity: 32%;
-}

package/dist/css/realm/atv.css

@@ -1,25 +0,0 @@
-/* ATV Trader Realm Colors */
-:root {
-  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-realm-charcoal: #33383B;
-  --tide-realm-maroon:   #9B2702;
-  --tide-realm-orange:   #C7521A;
-  --tide-realm-peach:    #E59A49;
-  --tide-realm-sand:     #F8EADD;
-
-  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:        var(--tide-realm-orange);
-  --tide-surface-accent: var(--tide-realm-sand);
-  --tide-surface-brand:  var(--tide-realm-charcoal);
-
-  --tide-on-primary:       var(--tide-gray-100);
-  --tide-on-surface-brand: var(--tide-realm-orange);
-
-  --tide-gradient-bottom-right-color: var(--tide-realm-maroon);
-  --tide-gradient-top-color: var(--tide-realm-peach);
-  --tide-gradient-bottom-left-color: var(--tide-realm-orange);
-
-  --tide-gradient-bottom-right-opacity: 27%;
-  --tide-gradient-top-opacity: 37%;
-  --tide-gradient-bottom-left-opacity: 44%;
-}

package/dist/css/realm/boatmart.css

@@ -1,25 +0,0 @@
-/* Boatmart Trader Realm Colors */
-:root {
-  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-realm-blue:      #499CC7;
-  --tide-realm-mist:      #DBEDFC;
-  --tide-realm-navy-dark: #143353;
-  --tide-realm-navy:      #1D4977;
-  --tide-realm-orange:    #D24614;
-
-  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:        var(--tide-realm-navy);
-  --tide-surface-accent: var(--tide-realm-mist);
-  --tide-surface-brand:  var(--tide-realm-navy-dark);
-
-  --tide-on-primary:       var(--tide-gray-100);
-  --tide-on-surface-brand: var(--tide-realm-navy);
-
-  --tide-gradient-bottom-right-color: var(--tide-realm-orange);
-  --tide-gradient-top-color: var(--tide-realm-blue);
-  --tide-gradient-bottom-left-color: var(--tide-realm-navy);
-
-  --tide-gradient-bottom-right-opacity: 12%;
-  --tide-gradient-top-opacity: 27%;
-  --tide-gradient-bottom-left-opacity: 32%;
-}

package/dist/css/realm/cycle.css

@@ -1,24 +0,0 @@
-/* Cycle Trader Realm Colors */
-:root {
-  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-realm-light-blue: #DFECF2;
-  --tide-realm-pure-black: #000000;
-  --tide-realm-red:        #C50000;
-  --tide-realm-steel-blue: #253E51;
-
-  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:        var(--tide-realm-pure-black);
-  --tide-surface-accent: var(--tide-realm-light-blue);
-  --tide-surface-brand:  var(--tide-gray-900);
-
-  --tide-on-primary:       var(--tide-gray-100);
-  --tide-on-surface-brand: var(--tide-realm-steel-blue);
-
-  --tide-gradient-bottom-right-color: var(--tide-realm-red);
-  --tide-gradient-top-color: var(--tide-realm-steel-blue);
-  --tide-gradient-bottom-left-color: var(--tide-realm-pure-black);
-
-  --tide-gradient-bottom-right-opacity: 8%;
-  --tide-gradient-top-opacity: 28%;
-  --tide-gradient-bottom-left-opacity: 17%;
-}

package/dist/css/realm/equipment.css

@@ -1,25 +0,0 @@
-/* Equipment Trader Realm Colors */
-:root {
-  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-realm-charcoal:  #333333;
-  --tide-realm-evergreen: #468200;
-  --tide-realm-moss:      #EEF6D7;
-  --tide-realm-steel:     #494949;
-  --tide-realm-yellow:    #FFCE34;
-
-  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:        var(--tide-realm-steel);
-  --tide-surface-accent: var(--tide-realm-moss);
-  --tide-surface-brand:  var(--tide-realm-charcoal);
-
-  --tide-on-primary:       var(--tide-gray-100);
-  --tide-on-surface-brand: var(--tide-realm-evergreen);
-
-  --tide-gradient-bottom-right-color: var(--tide-realm-evergreen);
-  --tide-gradient-top-color: var(--tide-realm-yellow);
-  --tide-gradient-bottom-left-color: var(--tide-realm-steel);
-
-  --tide-gradient-bottom-right-opacity: 22%;
-  --tide-gradient-top-opacity: 29%;
-  --tide-gradient-bottom-left-opacity: 39%;
-}

package/dist/css/realm/pwc.css

@@ -1,25 +0,0 @@
-/* PWC Trader Realm Colors */
-:root {
-  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-realm-baby-blue:     #86C0F4;
-  --tide-realm-blue:          #0B72B8;
-  --tide-realm-cantaloupe:    #ECA26A;
-  --tide-realm-foam:          #E0EBF5;
-  --tide-realm-midnight-blue: #002344;
-
-  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:        var(--tide-realm-blue);
-  --tide-surface-accent: var(--tide-realm-foam);
-  --tide-surface-brand:  var(--tide-realm-midnight-blue);
-
-  --tide-on-primary:       var(--tide-gray-100);
-  --tide-on-surface-brand: var(--tide-realm-blue);
-
-  --tide-gradient-bottom-right-color: var(--tide-realm-cantaloupe);
-  --tide-gradient-top-color: var(--tide-realm-baby-blue);
-  --tide-gradient-bottom-left-color: var(--tide-realm-blue);
-
-  --tide-gradient-bottom-right-opacity: 22%;
-  --tide-gradient-top-opacity: 39%;
-  --tide-gradient-bottom-left-opacity: 36%;
-}

package/dist/css/realm/rv.css

@@ -1,25 +0,0 @@
-/* RV Trader Realm Colors */
-:root {
-  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-realm-dark-green: #004926;
-  --tide-realm-green:      #006836;
-  --tide-realm-mint:       #98CFB6;
-  --tide-realm-pistachio:  #E0EDE7;
-  --tide-realm-yellow:     #F2B203;
-
-  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:        var(--tide-realm-green);
-  --tide-surface-accent: var(--tide-realm-pistachio);
-  --tide-surface-brand:  var(--tide-realm-dark-green);
-
-  --tide-on-primary:       var(--tide-gray-100);
-  --tide-on-surface-brand: var(--tide-realm-green);
-
-  --tide-gradient-bottom-right-color: var(--tide-realm-yellow);
-  --tide-gradient-top-color: var(--tide-realm-mint);
-  --tide-gradient-bottom-left-color: var(--tide-realm-green);
-
-  --tide-gradient-bottom-right-opacity: 15%;
-  --tide-gradient-top-opacity: 42%;
-  --tide-gradient-bottom-left-opacity: 36%;
-}

package/dist/css/realm/snow.css

@@ -1,25 +0,0 @@
-/* Snowmobile Trader Realm Colors */
-:root {
-  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-realm-frost:         #E3E8F2;
-  --tide-realm-ice:           #81C9DF;
-  --tide-realm-sapphire-dark: #122754;
-  --tide-realm-sapphire:      #193778;
-  --tide-realm-twilight:      #CCC5E7;
-
-  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:        var(--tide-realm-sapphire);
-  --tide-surface-accent: var(--tide-realm-frost);
-  --tide-surface-brand:  var(--tide-realm-sapphire-dark);
-
-  --tide-on-primary:       var(--tide-gray-100);
-  --tide-on-surface-brand: var(--tide-realm-sapphire);
-
-  --tide-gradient-bottom-right-color: var(--tide-realm-ice);
-  --tide-gradient-top-color: var(--tide-realm-twilight);
-  --tide-gradient-bottom-left-color: var(--tide-realm-sapphire);
-
-  --tide-gradient-bottom-right-opacity: 32%;
-  --tide-gradient-top-opacity: 42%;
-  --tide-gradient-bottom-left-opacity: 44%;
-}

package/dist/css/realm/truck.css

@@ -1,25 +0,0 @@
-/* Commercial Truck Trader Realm Colors */
-:root {
-  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-realm-baby-blue:     #97D1E3;
-  --tide-realm-blue:          #005F9E;
-  --tide-realm-cloud:         #DBEDF7;
-  --tide-realm-granny-smith:  #A6E6A7;
-  --tide-realm-midnight-blue: #172C4B;
-
-  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:        var(--tide-realm-blue);
-  --tide-surface-accent: var(--tide-realm-cloud);
-  --tide-surface-brand:  var(--tide-realm-midnight-blue);
-
-  --tide-on-primary:       var(--tide-gray-100);
-  --tide-on-surface-brand: var(--tide-realm-blue);
-
-  --tide-gradient-bottom-right-color: var(--tide-realm-granny-smith);
-  --tide-gradient-top-color: var(--tide-realm-baby-blue);
-  --tide-gradient-bottom-left-color: var(--tide-realm-blue);
-
-  --tide-gradient-bottom-right-opacity: 28%;
-  --tide-gradient-top-opacity: 42%;
-  --tide-gradient-bottom-left-opacity: 36%;
-}

package/dist/css/reset.css

@@ -1,95 +0,0 @@
-:root {
-  font-size: 16px;
-}
-
-body {
-  color: var(--tide-on-surface);
-  font-size: var(--tide-font-16);
-  font-weight: 400;
-  line-height: 1.4;
-}
-
-/* Cannot be applied to body tag in marketplace repo due to data-css-scope */
-.body-scroll-lock {
-  inset: 0;
-  margin-top: calc(0px - var(--saved-scroll-y, 0px));
-  overflow-y: scroll;
-  position: fixed;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  color: inherit;
-  font-family: Montserrat;
-  font-weight: inherit;
-  line-height: inherit;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-underline-offset: .2em;
-  text-decoration-skip-ink: none;
-}
-
-h1 {font-size: var(--tide-font-32);} /* 32px */
-h2 {font-size: var(--tide-font-24);} /* 24px */
-h3 {font-size: var(--tide-font-20);} /* 20px */
-h4 {font-size: var(--tide-font-16);} /* 16px */
-h5 {font-size: var(--tide-font-16);} /* 16px */
-
-h1,
-h2,
-h3,
-h4,
-h5 {
-  font-weight: 700;
-}
-
-img,
-label {
-  display: block;
-}
-
-img {
-  max-width: 100%;
-}
-
-p {
-  max-width: 80ch;
-}
-
-button,
-input,
-option,
-select,
-textarea {
-  background-color: unset;
-  font-family: inherit;
-  font-size: inherit;
-}
-
-button:enabled,
-select {
-  cursor: pointer;
-}
-
-button:disabled {
-  cursor: not-allowed;
-}
-
-/* cross-browser normalization */
-input::placeholder {
-  color: var(--tide-gray-700);
-  opacity: 1;
-}
-
-/* Clears the ‘X’ from Chrome */
-input::-webkit-search-decoration,
-input::-webkit-search-cancel-button,
-input::-webkit-search-results-button,
-input::-webkit-search-results-decoration {
-  display: none;
-}

package/dist/css/storybook.css

@@ -1,17 +0,0 @@
-/* Styles used for Storybook demonstration purposes only. Not bundled into distribution package. */
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
-
-.sb-border-black      {border: 1px solid #000000;}
-.sb-border-blue-light {border: 1px solid #CCDEF3;}
-.sb-border-white      {border: 1px solid #FFFFFF;}
-
-.sb-bg-black      {background-color: #000000;}
-.sb-bg-blue       {background-color: #0000FF;}
-.sb-bg-blue-light {background-color: #CCDEF3;}
-.sb-bg-green      {background-color: #00FF00;}
-.sb-bg-red        {background-color: #FF0000;}
-.sb-bg-white      {background-color: #FFFFFF;}
-
-.sb-font-black      {color: #000000;}
-.sb-font-blue-light {color: #CCDEF3;}
-.sb-font-white      {color: #FFFFFF;}