@maggioli-design-system/mds-table-row 4.5.3 → 4.6.0

package/dist/types/stencil-public-runtime.d.ts

@@ -768,6 +768,7 @@ export declare namespace JSXBase {
         hrefLang?: string;
         hreflang?: string;
         media?: string;
+        ping?: string;
         rel?: string;
         target?: string;
         referrerPolicy?: ReferrerPolicy;
@@ -794,7 +795,6 @@ export declare namespace JSXBase {
         cite?: string;
     }
     interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
         disabled?: boolean;
         form?: string;
         formAction?: string;
@@ -921,8 +921,6 @@ export declare namespace JSXBase {
         autocapitalize?: string;
         autoComplete?: string;
         autocomplete?: string;
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         capture?: string;
         checked?: boolean;
         crossOrigin?: string;
@@ -979,8 +977,6 @@ export declare namespace JSXBase {
         popoverTarget?: string;
     }
     interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         challenge?: string;
         disabled?: boolean;
         form?: string;
@@ -993,7 +989,6 @@ export declare namespace JSXBase {
     interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
         form?: string;
         htmlFor?: string;
-        htmlfor?: string;
     }
     interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
         value?: string | string[] | number;
@@ -1104,7 +1099,6 @@ export declare namespace JSXBase {
     interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
         form?: string;
         htmlFor?: string;
-        htmlfor?: string;
         name?: string;
     }
     interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -1129,7 +1123,6 @@ export declare namespace JSXBase {
         type?: string;
     }
     interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
         disabled?: boolean;
         form?: string;
         multiple?: boolean;
@@ -1164,8 +1157,6 @@ export declare namespace JSXBase {
     interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
         autoComplete?: string;
         autocomplete?: string;
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         cols?: number;
         disabled?: boolean;
         form?: string;
@@ -1218,6 +1209,8 @@ export declare namespace JSXBase {
     interface HTMLAttributes<T = HTMLElement> extends DOMAttributes<T> {
         innerHTML?: string;
         accessKey?: string;
+        autoFocus?: boolean;
+        autofocus?: boolean | string;
         class?: string | {
             [className: string]: boolean;
         };

package/dist/types/type/preference.d.ts

@@ -0,0 +1,2 @@
+export type UIPreferenceType = 'animation' | 'consumption' | 'contrast' | 'theme';
+export type ConsumptionModeType = 'high' | 'medium' | 'low';

package/documentation.json

@@ -1,9 +1,9 @@
 {
-  "timestamp": "2024-04-18T15:04:37",
+  "timestamp": "2024-09-05T13:13:09",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.10.0",
-    "typescriptVersion": "5.3.3"
+    "version": "4.21.0",
+    "typescriptVersion": "5.5.3"
   },
   "components": [
     {
@@ -236,26 +236,6 @@
       "docstring": "",
       "path": "src/components/mds-filter-item/meta/event-detail.ts"
     },
-    "src/components/mds-form/meta/types.ts::CharacterSetType": {
-      "declaration": "export type CharacterSetType =\n  | '8859-1'\n  | 'ansi'\n  | 'ascii'\n  | 'utf-8'",
-      "docstring": "",
-      "path": "src/components/mds-form/meta/types.ts"
-    },
-    "src/components/mds-form/meta/types.ts::FormAutocompleteType": {
-      "declaration": "export type FormAutocompleteType =\n  | 'off'\n  | 'on'",
-      "docstring": "",
-      "path": "src/components/mds-form/meta/types.ts"
-    },
-    "src/components/mds-form/meta/types.ts::EnctypeType": {
-      "declaration": "export type EnctypeType =\n  | 'application/x-www-form-urlencoded'\n  | 'multipart/form-data'\n  | 'text/plain'",
-      "docstring": "",
-      "path": "src/components/mds-form/meta/types.ts"
-    },
-    "src/components/mds-form/meta/types.ts::FormMethodType": {
-      "declaration": "export type FormMethodType =\n  | 'get'\n  | 'post'",
-      "docstring": "",
-      "path": "src/components/mds-form/meta/types.ts"
-    },
     "src/components/mds-header-bar/meta/types.ts::MenuType": {
       "declaration": "export type MenuType =\n  | 'all'\n  | 'desktop'\n  | 'mobile'\n  | 'none'",
       "docstring": "",
@@ -366,11 +346,26 @@
       "docstring": "",
       "path": "src/components/mds-input-switch/meta/event-detail.ts"
     },
+    "src/components/mds-input-tip/meta/types.ts::InputTipPositionType": {
+      "declaration": "export type InputTipPositionType =\n  | 'top'\n  | 'bottom'",
+      "docstring": "",
+      "path": "src/components/mds-input-tip/meta/types.ts"
+    },
+    "src/components/mds-input-tip-item/meta/types.ts::InputTipItemVariantType": {
+      "declaration": "export type InputTipItemVariantType =\n  | 'required'\n  | 'required-success'\n  | 'disabled'\n  | 'readonly'\n  | 'text'",
+      "docstring": "",
+      "path": "src/components/mds-input-tip-item/meta/types.ts"
+    },
     "src/components/mds-input-upload/meta/types.ts::AttachmentSort": {
       "declaration": "type AttachmentSort =\n  'status' |\n  'date'",
       "docstring": "",
       "path": "src/components/mds-input-upload/meta/types.ts"
     },
+    "src/components/mds-input-upload/meta/types.ts::FileError": {
+      "declaration": "interface FileError {\n  filename: string,\n  errorMessage: string,\n}",
+      "docstring": "",
+      "path": "src/components/mds-input-upload/meta/types.ts"
+    },
     "src/type/typography.ts::TypographyType": {
       "declaration": "export type TypographyType =\n  | 'action'\n  | 'caption'\n  | 'snippet'\n  | 'detail'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'hack'\n  | 'label'\n  | 'option'\n  | 'paragraph'\n  | 'tip'",
       "docstring": "",
@@ -401,6 +396,31 @@
       "docstring": "",
       "path": "src/components/mds-paginator/meta/event-detail.ts"
     },
+    "src/components/mds-pref-animation/meta/types.ts::AnimationModeType": {
+      "declaration": "export type AnimationModeType =\n  | 'reduce'\n  | 'no-preference'\n  | 'system'",
+      "docstring": "",
+      "path": "src/components/mds-pref-animation/meta/types.ts"
+    },
+    "src/type/preference.ts::ConsumptionModeType": {
+      "declaration": "export type ConsumptionModeType =\n  | 'high'\n  | 'medium'\n  | 'low'",
+      "docstring": "",
+      "path": "src/type/preference.ts"
+    },
+    "src/components/mds-pref-contrast/meta/types.ts::ContrastModeType": {
+      "declaration": "export type ContrastModeType =\n  | 'more'\n  | 'no-preference'\n  | 'system'",
+      "docstring": "",
+      "path": "src/components/mds-pref-contrast/meta/types.ts"
+    },
+    "src/components/mds-pref-theme/meta/types.ts::ThemeModeType": {
+      "declaration": "export type ThemeModeType =\n  | 'light'\n  | 'dark'\n  | 'system'",
+      "docstring": "",
+      "path": "src/components/mds-pref-theme/meta/types.ts"
+    },
+    "src/components/mds-pref-theme/meta/types.ts::ThemeTransitionType": {
+      "declaration": "export type ThemeTransitionType =\n  | 'none'\n  | 'flash'\n  | 'smooth'",
+      "docstring": "",
+      "path": "src/components/mds-pref-theme/meta/types.ts"
+    },
     "src/components/mds-price-table-features-cell/meta/types.ts::PriceTableFeaturesCellType": {
       "declaration": "export type PriceTableFeaturesCellType =\n  | 'custom'\n  | 'label'\n  | 'supported'\n  | 'text'\n  | 'unsupported'",
       "docstring": "",

package/loader/cdn.js

@@ -1,3 +1,2 @@
-
 module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.cjs.js

@@ -1,3 +1,2 @@
-
 module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.d.ts

@@ -9,6 +9,9 @@ export interface CustomElementsDefineOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
 export declare function applyPolyfills(): Promise<void>;
 
 /**

package/loader/index.es2017.js

@@ -1,3 +1,2 @@
-
 export * from '../dist/esm/polyfills/index.js';
-export * from '../dist/esm/loader.js';
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -1,4 +1,3 @@
-
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../dist/esm/polyfills/index.js';
-export * from '../dist/esm-es5/loader.js';
+export * from '../dist/esm-es5/loader.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-table-row",
-  "version": "4.5.3",
+  "version": "4.6.0",
   "description": "mds-table-row is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -23,9 +23,9 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-table-cell": "4.5.1",
-    "@maggioli-design-system/styles": "14.3.2",
-    "@stencil/core": "4.10.0"
+    "@maggioli-design-system/mds-table-cell": "4.6.0",
+    "@maggioli-design-system/styles": "15.3.0",
+    "@stencil/core": "4.21.0"
   },
   "license": "MIT",
   "author": {

package/src/common/locale.ts

@@ -0,0 +1,66 @@
+import Handlebars from 'handlebars'
+
+type LocaleConfig = {
+  it?: Record<string, string | string[]>
+  en?: Record<string, string | string[]>
+  gr?: Record<string, string | string[]>
+}
+
+export class Locale {
+  defaultLanguage: string = 'en'
+  language: string
+  config: LocaleConfig
+
+  constructor (configData: LocaleConfig) {
+    this.config = configData
+  }
+
+  lang = (element: HTMLElement): void => {
+    const closestElement:HTMLElement = element.closest('[lang]') as HTMLElement
+    if (closestElement) {
+      if (closestElement.lang) {
+        this.language = closestElement.lang
+        return
+      }
+    }
+
+    this.language = this.defaultLanguage
+  }
+
+  private pluralize = (tag: string | string[], context: Record<string, string | number>): string => {
+
+    const languagePhrase: string | string[] = this.config[this.language][tag] ?? this.config[this.defaultLanguage][tag]
+    const phrases: string[] = []
+    
+    if (Array.isArray(languagePhrase)) {
+      phrases.push(languagePhrase[0])
+      phrases.push(languagePhrase[1])
+    } else {
+      phrases.push(languagePhrase)
+      phrases.push(languagePhrase)
+    }
+
+    const [ defaultPhrase ] = phrases
+    let translatePhrase: string = defaultPhrase
+
+    const keys = Object.keys(context)
+    if (keys.length > 0) {
+      const [firstKey] = keys
+      if (typeof context[firstKey] === 'number') {
+        if (context[firstKey] !== 1) {
+          translatePhrase = phrases[1]
+        }
+      }
+    }
+
+    const template = Handlebars.compile(translatePhrase)
+    return template(context)
+  }
+
+  get = (tag: string | string[], context?: Record<string, string | number>): string => {
+    if (context) {
+      return this.pluralize(tag, context)
+    }
+    return this.config[this.language][tag] ?? this.config[this.defaultLanguage][tag]
+  }
+}

package/src/components/mds-table-row/css/mds-table-row-pref-animation.css

@@ -0,0 +1,16 @@
+@tailwind utilities;
+
+@container style(--magma-pref-animation: reduce) {
+  :host {
+    transition-duration: 0s;
+  }
+}
+
+@container style(--magma-pref-animation: system) {
+
+  @media (prefers-reduced-motion) {
+    :host {
+      transition-duration: 0s;
+    }
+  }
+}

package/src/components/mds-table-row/mds-table-row.css

@@ -1,10 +1,24 @@
 @tailwind utilities;
 
 :host {
+
+  --mds-table-row-color-hover: var(--mds-table-color-hover, theme('colors.tone-neutral-02'));
+  --mds-table-row-color: var(--mds-table-color, theme('colors.tone-neutral-03'));
+
+  @apply
+    duration-200
+    ease-out;
+
+  color: var(--mds-table-row-color);
   display: table-row;
+  transition-property: color;
+
 }
 
 :host( [interactive]:hover ) {
 
   --mds-table-cell-background: var(--mds-table-cell-background-hover, theme('colors.tone-neutral'));
+  --mds-table-row-color: var(--mds-table-row-color-hover);
 }
+
+@import './css/mds-table-row-pref-animation.css';

package/src/fixtures/icons.json

@@ -34,6 +34,7 @@
     "mgg/address-book-on",
     "mgg/adv-denied",
     "mgg/alerts-pagopa",
+    "mgg/ansc",
     "mgg/area-edificabile",
     "mgg/area-weather",
     "mgg/assignments-accept-rejection",
@@ -61,6 +62,9 @@
     "mgg/citizenship",
     "mgg/city-bin",
     "mgg/classic-permission",
+    "mgg/consumption-high",
+    "mgg/consumption-low",
+    "mgg/consumption-medium",
     "mgg/copy-paste",
     "mgg/d-instrumental-buildings",
     "mgg/data-analytics-alt",
@@ -113,6 +117,8 @@
     "mgg/fullscreen-on-alt",
     "mgg/google-check-small",
     "mgg/google-experiment",
+    "mgg/google-face-retouching-off",
+    "mgg/google-hub",
     "mgg/google-keyboard-double-arrow-down",
     "mgg/google-keyboard-double-arrow-up",
     "mgg/google-place-item",
@@ -159,6 +165,7 @@
     "mgg/national-document-off",
     "mgg/not-instrumental-d-buildings",
     "mgg/not-sent-yet",
+    "mgg/office-off",
     "mgg/order-return-down-left-to-right",
     "mgg/order-return-down-left-to-up",
     "mgg/order-return-down-right-to-left",
@@ -197,6 +204,7 @@
     "mgg/relevance",
     "mgg/reporting-abuse",
     "mgg/residency-permit",
+    "mgg/robot",
     "mgg/roles-permission",
     "mgg/rubber-stamp",
     "mgg/rurale",
@@ -256,6 +264,7 @@
     "mgg/view-chart-gantt",
     "mgg/view-side-by-side",
     "mgg/warning-superscript",
+    "mgg/web-app-ansc",
     "mgg/work-book",
     "mi/baseline/account-balance",
     "mi/baseline/account-balance-wallet",
@@ -263,21 +272,26 @@
     "mi/baseline/add-circle",
     "mi/baseline/adobe",
     "mi/baseline/agriculture",
+    "mi/baseline/animation",
     "mi/baseline/arrow-back",
     "mi/baseline/arrow-forward",
     "mi/baseline/attach-file",
     "mi/baseline/attachment",
     "mi/baseline/audiotrack",
+    "mi/baseline/auto-awesome",
     "mi/baseline/badge",
     "mi/baseline/book",
     "mi/baseline/border-all",
+    "mi/baseline/broken-image",
     "mi/baseline/cancel",
     "mi/baseline/category",
     "mi/baseline/check-box",
     "mi/baseline/check-box-outline-blank",
     "mi/baseline/check-circle",
     "mi/baseline/close",
+    "mi/baseline/contrast",
     "mi/baseline/css",
+    "mi/baseline/dark-mode",
     "mi/baseline/description",
     "mi/baseline/done",
     "mi/baseline/downhill-skiing",
@@ -294,6 +308,7 @@
     "mi/baseline/insert-drive-file",
     "mi/baseline/keyboard-arrow-down",
     "mi/baseline/keyboard-arrow-up",
+    "mi/baseline/light-mode",
     "mi/baseline/local-activity",
     "mi/baseline/lock-open",
     "mi/baseline/login",
@@ -316,6 +331,9 @@
     "mi/baseline/warning-amber",
     "mi/baseline/web",
     "mi/baseline/wysiwyg",
+    "mi/outline/auto-awesome",
+    "mi/outline/circle",
+    "mi/outline/dark-mode",
     "mi/outline/help-outline",
     "mi/outline/schedule",
     "mi/round/arrow-circle-down",

package/src/fixtures/iconsauce.json

@@ -22,6 +22,7 @@
     "mgg/address-book-on",
     "mgg/adv-denied",
     "mgg/alerts-pagopa",
+    "mgg/ansc",
     "mgg/area-edificabile",
     "mgg/area-weather",
     "mgg/assignments-accept-rejection",
@@ -49,6 +50,9 @@
     "mgg/citizenship",
     "mgg/city-bin",
     "mgg/classic-permission",
+    "mgg/consumption-high",
+    "mgg/consumption-low",
+    "mgg/consumption-medium",
     "mgg/copy-paste",
     "mgg/d-instrumental-buildings",
     "mgg/data-analytics-alt",
@@ -101,6 +105,8 @@
     "mgg/fullscreen-on-alt",
     "mgg/google-check-small",
     "mgg/google-experiment",
+    "mgg/google-face-retouching-off",
+    "mgg/google-hub",
     "mgg/google-keyboard-double-arrow-down",
     "mgg/google-keyboard-double-arrow-up",
     "mgg/google-place-item",
@@ -147,6 +153,7 @@
     "mgg/national-document",
     "mgg/not-instrumental-d-buildings",
     "mgg/not-sent-yet",
+    "mgg/office-off",
     "mgg/order-return-down-left-to-right",
     "mgg/order-return-down-left-to-up",
     "mgg/order-return-down-right-to-left",
@@ -185,6 +192,7 @@
     "mgg/relevance",
     "mgg/reporting-abuse",
     "mgg/residency-permit",
+    "mgg/robot",
     "mgg/roles-permission",
     "mgg/rubber-stamp",
     "mgg/rurale",
@@ -244,5 +252,6 @@
     "mgg/view-chart-gantt",
     "mgg/view-side-by-side",
     "mgg/warning-superscript",
+    "mgg/web-app-ansc",
     "mgg/work-book"
 ]

package/src/tailwind/components.css

@@ -1,5 +1,6 @@
 @import '~@maggioli-design-system/styles/dist/tailwind/components.css';
 @tailwind components;
+@tailwind utilities;
 
 @layer components {
   .svg {
@@ -12,4 +13,74 @@
       h-full
       w-full;
   }
+
+  .contrast-area-base {
+    border-radius: inherit;
+    box-shadow: theme('boxShadow.outline-50') inset;
+    display: none;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    transition-behavior: allow-discrete;
+    transition-property: display opacity;
+  }
+
+  .contrast-area-50 {
+    @apply contrast-area-base;
+
+    box-shadow: theme('boxShadow.outline-50') inset;
+  }
+
+  .contrast-area {
+    @apply contrast-area-base;
+
+    box-shadow: theme('boxShadow.outline') inset;
+  }
+
+  @container style(--magma-pref-contrast: more) {
+    .contrast-area,
+    .contrast-area-50 {
+      @apply
+        block
+        opacity-100;
+
+      /* @starting-style {
+        opacity: 0;
+      } */
+    }
+  }
+
+  @container style(--magma-pref-contrast: system) {
+
+    @media (prefers-contrast: more) {
+      .contrast-area,
+      .contrast-area-50 {
+        @apply
+          block
+          opacity-100;
+
+        /* @starting-style {
+          opacity: 0;
+        } */
+      }
+    }
+  }
+
+  @container style(--magma-pref-animation: reduce) {
+    .contrast-area,
+    .contrast-area-50 {
+      @apply duration-0;
+    }
+  }
+
+  @container style(--magma-pref-animation: system) {
+    
+    @media (prefers-reduced-motion) {
+      .contrast-area,
+      .contrast-area-50 {
+        @apply duration-0;
+      }
+    }
+  }
 }

package/src/type/preference.ts

@@ -0,0 +1,10 @@
+export type UIPreferenceType =
+  | 'animation'
+  | 'consumption'
+  | 'contrast'
+  | 'theme'
+
+export type ConsumptionModeType =
+  | 'high'
+  | 'medium'
+  | 'low'

package/src/type/variant-file-format.ts

@@ -4,6 +4,15 @@ import baselineAudiotrack from '@icon/mi/baseline/audiotrack.svg'
 import baselineTerminal from '@icon/mi/baseline/terminal.svg'
 import baselineInsertDriveFile from '@icon/mi/baseline/insert-drive-file.svg'
 import mdiHardDisk from '@icon/mdi/harddisk.svg'
+import baselineEmail from '@icon/mi/baseline/email.svg'
+import baselineWysiwyg from '@icon/mi/baseline/wysiwyg.svg'
+import baselinePanorama from '@icon/mi/baseline/panorama.svg'
+import baselineWeb from '@icon/mi/baseline/web.svg'
+import baselineTV from '@icon/mi/baseline/tv.svg'
+import baselineBorderAll from '@icon/mi/baseline/border-all.svg'
+import baselineDescription from '@icon/mi/baseline/description.svg'
+import mdiVectorCurve from '@icon/mdi/vector-curve.svg'
+import baselineVideocam from '@icon/mi/baseline/videocam.svg'
 
 interface FileFormatVariant {
   color: string
@@ -55,67 +64,67 @@ const fileFormatsVariant: FileFormatVariants = {
   },
   email: {
     color: 'fill-label-blue-04 text-label-blue-04',
-    icon: 'mi/baseline/email',
+    icon: baselineEmail,
     iconBackground: 'bg-label-blue-10',
     variant: 'blue',
   },
   executable: {
     color: 'fill-label-amaranth-04 text-label-amaranth-04',
-    icon: 'mi/baseline/wysiwyg',
+    icon: baselineWysiwyg,
     iconBackground: 'bg-label-amaranth-10',
     variant: 'amaranth',
   },
   image: {
     color: 'fill-label-green-04 text-label-green-04',
-    icon: 'mi/baseline/panorama',
+    icon: baselinePanorama,
     iconBackground: 'bg-label-green-10',
     variant: 'green',
   },
   imageRaster: {
     color: 'fill-label-green-04 text-label-green-04',
-    icon: 'mi/baseline/panorama',
+    icon: baselinePanorama,
     iconBackground: 'bg-label-green-10',
     variant: 'green',
   },
   markup: {
     color: 'fill-label-yellow-04 text-label-yellow-04',
-    icon: 'mi/baseline/web',
+    icon: baselineWeb,
     iconBackground: 'bg-label-yellow-10',
     variant: 'yellow',
   },
   slide: {
     color: 'fill-label-orchid-04 text-label-orchid-04',
-    icon: 'mi/baseline/tv',
+    icon: baselineTV,
     iconBackground: 'bg-label-orchid-10',
     variant: 'orchid',
   },
   spreadsheet: {
     color: 'fill-label-lime-04 text-label-lime-04',
-    icon: 'mi/baseline/border-all',
+    icon: baselineBorderAll,
     iconBackground: 'bg-label-lime-10',
     variant: 'lime',
   },
   text: {
     color: 'fill-label-blue-04 text-label-blue-04',
-    icon: 'mi/baseline/description',
+    icon: baselineDescription,
     iconBackground: 'bg-label-blue-10',
     variant: 'blue',
   },
   vectorImage: {
     color: 'fill-label-aqua-04 text-label-aqua-04',
-    icon: 'mdi/vector-curve',
+    icon: mdiVectorCurve,
     iconBackground: 'bg-label-aqua-10',
     variant: 'aqua',
   },
   vector: {
     color: 'fill-label-aqua-04 text-label-aqua-04',
-    icon: 'mdi/vector-curve',
+    icon: mdiVectorCurve,
     iconBackground: 'bg-label-aqua-10',
     variant: 'aqua',
   },
   video: {
     color: 'fill-label-violet-04 text-label-violet-04',
-    icon: 'mi/baseline/videocam',
+    icon: baselineVideocam,
     iconBackground: 'bg-label-violet-10',
     variant: 'violet',
   },