@lumx/core 3.20.1-alpha.5 → 3.20.1-alpha.50

package/js/utils/events/keyboard.js

@@ -0,0 +1,44 @@
+/**
+ * Make sure the pressed key is the enter key before calling the callback.
+ *
+ * @param  handler The handler to call on enter/return press.
+ * @return The decorated function.
+ */
+function onEnterPressed(handler) {
+    return (evt) => {
+        if (evt.key !== 'Enter') {
+            return;
+        }
+        handler(evt);
+    };
+}
+/**
+ * Make sure the pressed key is the escape key before calling the callback.
+ *
+ * @param  handler The handler to call on enter/return press.
+ * @return The decorated function.
+ */
+function onEscapePressed(handler) {
+    return (evt) => {
+        if (evt.key !== 'Escape') {
+            return;
+        }
+        handler(evt);
+    };
+}
+/**
+ * Handle button key pressed (Enter + Space).
+ *
+ * @param  handler The handler to call.
+ * @return The decorated function.
+ */
+function onButtonPressed(handler) {
+    return (evt) => {
+        if (evt.key !== 'Enter' && evt.key !== ' ') {
+            return;
+        }
+        handler(evt);
+    };
+}
+
+export { onButtonPressed, onEnterPressed, onEscapePressed };

package/js/utils/events/swipe.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Detects horizontal swipe direction without blocking the browser scroll using passive event.
+ * @see http://javascriptkit.com/javatutors/touchevents2.shtml
+ * @see https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+ */
+export declare function detectHorizontalSwipe(touchSurface: Element, handleSwipe: (direction: 'right' | 'left') => void): () => void;

package/js/utils/events/swipe.js

@@ -0,0 +1,79 @@
+/**
+ * Checks whether the browser support passive events.
+ * @see https://github.com/Modernizr/Modernizr/blob/6d56d814b9682843313b16060adb25a58d83a317/feature-detects/dom/passiveeventlisteners.js
+ */
+function isPassiveEventAvailable() {
+    let supportsPassiveOption = false;
+    try {
+        const opts = Object.defineProperty({}, 'passive', {
+            get() {
+                supportsPassiveOption = true;
+            },
+        });
+        window.addEventListener('testPassiveEventSupport', () => { }, opts);
+        window.removeEventListener('testPassiveEventSupport', () => { }, opts);
+    }
+    catch (e) {
+        // ignored
+    }
+    return supportsPassiveOption;
+}
+/**
+ * Detects horizontal swipe direction without blocking the browser scroll using passive event.
+ * @see http://javascriptkit.com/javatutors/touchevents2.shtml
+ * @see https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+ */
+function detectHorizontalSwipe(touchSurface, handleSwipe) {
+    let startX;
+    let startY;
+    // Required min distance traveled to be considered swipe.
+    const threshold = 150;
+    // Maximum distance allowed at the same time in perpendicular direction.
+    const restraint = 150;
+    // Maximum time allowed to travel that distance.
+    const allowedTime = 300;
+    let elapsedTime;
+    let startTime;
+    let finished;
+    const onTouchStart = (evt) => {
+        const [touch] = Array.from(evt.changedTouches);
+        startX = touch.pageX;
+        startY = touch.pageY;
+        // Record time when finger first makes contact with surface.
+        startTime = new Date().getTime();
+        finished = false;
+    };
+    const onTouchMove = (evt) => {
+        if (finished) {
+            return;
+        }
+        elapsedTime = new Date().getTime() - startTime;
+        if (elapsedTime > allowedTime) {
+            // Touch swipe too long to be considered.
+            return;
+        }
+        const [touch] = Array.from(evt.changedTouches);
+        // Get horizontal dist traveled by finger while in contact with surface.
+        const distX = touch.pageX - startX;
+        // Get vertical dist traveled by finger while in contact with surface.
+        const distY = touch.pageY - startY;
+        if (!(Math.abs(distX) >= threshold && Math.abs(distY) <= restraint)) {
+            // Swipe is not horizontal.
+            return;
+        }
+        // Swipe direction.
+        const direction = distX < 0 ? 'left' : 'right';
+        handleSwipe(direction);
+        finished = true;
+    };
+    // Activate passive event if possible for better scrolling performance.
+    const eventOptions = isPassiveEventAvailable() ? { passive: true } : false;
+    touchSurface.addEventListener('touchstart', onTouchStart, eventOptions);
+    touchSurface.addEventListener('touchmove', onTouchMove, eventOptions);
+    return () => {
+        touchSurface.removeEventListener('touchstart', onTouchStart, eventOptions);
+        touchSurface.removeEventListener('touchmove', onTouchMove, eventOptions);
+    };
+}
+
+export { detectHorizontalSwipe };

package/js/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * as classNames from './classNames';
+export * from './events';

package/js/utils/index.js

@@ -1,223 +1,4 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var noop = require('lodash/noop');
-var js_utils_className_handleBasicClasses = require('./className/handleBasicClasses.js');
-var js_utils_className_getBasicClass = require('./className/getBasicClass.js');
-var js_utils_className_getRootClassName = require('./className/getRootClassName.js');
-var js_utils_className_getTypographyClassName = require('./className/getTypographyClassName.js');
-var js_utils_className_fontColorClass = require('./className/fontColorClass.js');
-var js_utils_className_resolveColorWithVariants = require('./className/resolveColorWithVariants.js');
-require('classnames');
-require('lodash/isBoolean');
-require('lodash/isEmpty');
-require('lodash/kebabCase');
-require('../constants/index.js');
-require('../constants/keycodes.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
-
-/**
- * Make sure the pressed key is the enter key before calling the callback.
- *
- * @param  handler The handler to call on enter/return press.
- * @return The decorated function.
- */
-function onEnterPressed(handler) {
-    return (evt) => {
-        if (evt.key !== 'Enter') {
-            return;
-        }
-        handler(evt);
-    };
-}
-/**
- * Make sure the pressed key is the escape key before calling the callback.
- *
- * @param  handler The handler to call on enter/return press.
- * @return The decorated function.
- */
-function onEscapePressed(handler) {
-    return (evt) => {
-        if (evt.key !== 'Escape') {
-            return;
-        }
-        handler(evt);
-    };
-}
-/**
- * Handle button key pressed (Enter + Space).
- *
- * @param  handler The handler to call.
- * @return The decorated function.
- */
-function onButtonPressed(handler) {
-    return (evt) => {
-        if (evt.key !== 'Enter' && evt.key !== ' ') {
-            return;
-        }
-        handler(evt);
-    };
-}
-/**
- * Detects swipe direction.
- * Credits: http://javascriptkit.com/javatutors/touchevents2.shtml.
- *
- * @deprecated use `detectHorizontalSwipe` instead if possible (better performance and does not block scroll)
- * @param  touchSurface          Element that will hold touch events.
- * @param  handleSwipe Callback function.
- * @return Function to remove listeners.
- */
-function detectSwipe(touchSurface, handleSwipe = noop__default["default"]) {
-    let distX;
-    let distY;
-    let startX;
-    let startY;
-    let direction;
-    // Required min distance traveled to be considered swipe.
-    const threshold = 150;
-    // Maximum distance allowed at the same time in perpendicular direction.
-    const restraint = 100;
-    // Maximum time allowed to travel that distance.
-    const allowedTime = 300;
-    let elapsedTime;
-    let startTime;
-    const onTouchStart = (evt) => {
-        const [touch] = Array.from(evt.changedTouches);
-        direction = 'none';
-        // Const dist = 0;
-        startX = touch.pageX;
-        startY = touch.pageY;
-        // Record time when finger first makes contact with surface.
-        startTime = new Date().getTime();
-        evt.preventDefault();
-    };
-    const onTouchMove = (evt) => {
-        // Prevent scrolling when inside DIV.
-        evt.preventDefault();
-    };
-    const onTouchEnd = (evt) => {
-        const [touch] = Array.from(evt.changedTouches);
-        // Get horizontal dist traveled by finger while in contact with surface.
-        distX = touch.pageX - startX;
-        // Get vertical dist traveled by finger while in contact with surface.
-        distY = touch.pageY - startY;
-        // Get time elapsed.
-        elapsedTime = new Date().getTime() - startTime;
-        if (elapsedTime <= allowedTime) {
-            // First condition for awipe met.
-            if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) {
-                // 2nd condition for horizontal swipe met.
-                // If dist traveled is negative, it indicates left swipe.
-                direction = distX < 0 ? 'left' : 'right';
-            }
-            else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) {
-                // 2nd condition for vertical swipe met.
-                // If dist traveled is negative, it indicates up swipe.
-                direction = distY < 0 ? 'up' : 'down';
-            }
-        }
-        handleSwipe(direction);
-        evt.preventDefault();
-    };
-    touchSurface.addEventListener('touchstart', onTouchStart, false);
-    touchSurface.addEventListener('touchmove', onTouchMove, false);
-    touchSurface.addEventListener('touchend', onTouchEnd, false);
-    return () => {
-        touchSurface.removeEventListener('touchstart', onTouchStart, false);
-        touchSurface.removeEventListener('touchmove', onTouchMove, false);
-        touchSurface.removeEventListener('touchend', onTouchEnd, false);
-    };
-}
-/**
- * Checks whether or not the browser support passive events.
- * @see https://github.com/Modernizr/Modernizr/blob/6d56d814b9682843313b16060adb25a58d83a317/feature-detects/dom/passiveeventlisteners.js
- */
-function isPassiveEventAvailable() {
-    let supportsPassiveOption = false;
-    try {
-        const opts = Object.defineProperty({}, 'passive', {
-            get() {
-                supportsPassiveOption = true;
-            },
-        });
-        window.addEventListener('testPassiveEventSupport', noop__default["default"], opts);
-        window.removeEventListener('testPassiveEventSupport', noop__default["default"], opts);
-    }
-    catch (e) {
-        // ignored
-    }
-    return supportsPassiveOption;
-}
-/**
- * Detects horizontal swipe direction without blocking the browser scroll using passive event.
- * @see http://javascriptkit.com/javatutors/touchevents2.shtml
- * @see https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
- */
-function detectHorizontalSwipe(touchSurface, handleSwipe) {
-    let startX;
-    let startY;
-    // Required min distance traveled to be considered swipe.
-    const threshold = 150;
-    // Maximum distance allowed at the same time in perpendicular direction.
-    const restraint = 150;
-    // Maximum time allowed to travel that distance.
-    const allowedTime = 300;
-    let elapsedTime;
-    let startTime;
-    let finished;
-    const onTouchStart = (evt) => {
-        const [touch] = Array.from(evt.changedTouches);
-        startX = touch.pageX;
-        startY = touch.pageY;
-        // Record time when finger first makes contact with surface.
-        startTime = new Date().getTime();
-        finished = false;
-    };
-    const onTouchMove = (evt) => {
-        if (finished) {
-            return;
-        }
-        elapsedTime = new Date().getTime() - startTime;
-        if (elapsedTime > allowedTime) {
-            // Touch swipe too long to be considered.
-            return;
-        }
-        const [touch] = Array.from(evt.changedTouches);
-        // Get horizontal dist traveled by finger while in contact with surface.
-        const distX = touch.pageX - startX;
-        // Get vertical dist traveled by finger while in contact with surface.
-        const distY = touch.pageY - startY;
-        if (!(Math.abs(distX) >= threshold && Math.abs(distY) <= restraint)) {
-            // Swipe is not horizontal.
-            return;
-        }
-        // Swipe direction.
-        const direction = distX < 0 ? 'left' : 'right';
-        handleSwipe(direction);
-        finished = true;
-    };
-    // Activate passive event if possible for better scrolling performance.
-    const eventOptions = isPassiveEventAvailable() ? { passive: true } : false;
-    touchSurface.addEventListener('touchstart', onTouchStart, eventOptions);
-    touchSurface.addEventListener('touchmove', onTouchMove, eventOptions);
-    return () => {
-        touchSurface.removeEventListener('touchstart', onTouchStart, eventOptions);
-        touchSurface.removeEventListener('touchmove', onTouchMove, eventOptions);
-    };
-}
-
-exports.handleBasicClasses = js_utils_className_handleBasicClasses.handleBasicClasses;
-exports.getBasicClass = js_utils_className_getBasicClass.getBasicClass;
-exports.getRootClassName = js_utils_className_getRootClassName.getRootClassName;
-exports.getTypographyClassName = js_utils_className_getTypographyClassName.getTypographyClassName;
-exports.fontColorClass = js_utils_className_fontColorClass.fontColorClass;
-exports.resolveColorWithVariants = js_utils_className_resolveColorWithVariants.resolveColorWithVariants;
-exports.detectHorizontalSwipe = detectHorizontalSwipe;
-exports.detectSwipe = detectSwipe;
-exports.onButtonPressed = onButtonPressed;
-exports.onEnterPressed = onEnterPressed;
-exports.onEscapePressed = onEscapePressed;
+import * as index from './classNames/index.js';
+export { index as classNames };
+export { onButtonPressed, onEnterPressed, onEscapePressed } from './events/keyboard.js';
+export { detectHorizontalSwipe } from './events/swipe.js';

package/lumx.css

@@ -8733,13 +8733,14 @@ table {
 
 /* Item spacing
    ========================================================================== */
-.lumx-list--item-padding-big .lumx-list-item__link,
-.lumx-list--item-padding-big .lumx-list-item__wrapper {
+.lumx-list:has(.lumx-list-item__link) .lumx-list-item__link, .lumx-list.lumx-list--item-padding-big .lumx-list-item__link,
+.lumx-list:has(.lumx-list-item__link) .lumx-list-item__wrapper,
+.lumx-list.lumx-list--item-padding-big .lumx-list-item__wrapper {
   padding-right: 16px;
   padding-left: 16px;
 }
-.lumx-list--item-padding-huge .lumx-list-item__link,
-.lumx-list--item-padding-huge .lumx-list-item__wrapper {
+.lumx-list.lumx-list--item-padding-huge .lumx-list-item__link,
+.lumx-list.lumx-list--item-padding-huge .lumx-list-item__wrapper {
   padding-right: 24px;
   padding-left: 24px;
 }
@@ -8772,11 +8773,11 @@ table {
   line-height: 14px;
   margin-right: 8px;
 }
-.lumx-list--item-padding-big .lumx-list-subheader {
+.lumx-list:has(.lumx-list-item__link) .lumx-list-subheader, .lumx-list.lumx-list--item-padding-big .lumx-list-subheader {
   padding-right: 16px;
   padding-left: 16px;
 }
-.lumx-list--item-padding-huge .lumx-list-subheader {
+.lumx-list.lumx-list--item-padding-huge .lumx-list-subheader {
   padding-right: 24px;
   padding-left: 24px;
 }
@@ -12055,7 +12056,10 @@ table {
   flex: 1 1 auto;
   padding: var(--lumx-text-field-wrapper-padding-vertical) 0;
 }
-.lumx-text-field--theme-light .lumx-text-field__input-native {
+.lumx-text-field__input-native {
+  resize: none;
+}
+.lumx-text-field--theme-light .lumx-text-field__input-native, .lumx-text-field__input-native--theme-light {
   display: block;
   width: 100%;
   padding: 0;
@@ -12068,16 +12072,16 @@ table {
   color: var(--lumx-color-dark-N);
   color: var(--lumx-text-field-state-default-theme-light-input-content-color);
 }
-.lumx-text-field--theme-light .lumx-text-field__input-native[type=number]::-webkit-inner-spin-button, .lumx-text-field--theme-light .lumx-text-field__input-native[type=number]::-webkit-outer-spin-button {
+.lumx-text-field--theme-light .lumx-text-field__input-native[type=number]::-webkit-inner-spin-button, .lumx-text-field--theme-light .lumx-text-field__input-native[type=number]::-webkit-outer-spin-button, .lumx-text-field__input-native--theme-light[type=number]::-webkit-inner-spin-button, .lumx-text-field__input-native--theme-light[type=number]::-webkit-outer-spin-button {
   opacity: 1;
 }
-.lumx-text-field--theme-light .lumx-text-field__input-native::-moz-placeholder {
+.lumx-text-field--theme-light .lumx-text-field__input-native::-moz-placeholder, .lumx-text-field__input-native--theme-light::-moz-placeholder {
   color: var(--lumx-text-field-state-default-theme-light-input-placeholder-color);
 }
-.lumx-text-field--theme-light .lumx-text-field__input-native::placeholder {
+.lumx-text-field--theme-light .lumx-text-field__input-native::placeholder, .lumx-text-field__input-native--theme-light::placeholder {
   color: var(--lumx-text-field-state-default-theme-light-input-placeholder-color);
 }
-.lumx-text-field--theme-dark .lumx-text-field__input-native {
+.lumx-text-field--theme-dark .lumx-text-field__input-native, .lumx-text-field__input-native--theme-dark {
   display: block;
   width: 100%;
   padding: 0;
@@ -12090,13 +12094,13 @@ table {
   color: var(--lumx-color-light-N);
   color: var(--lumx-text-field-state-default-theme-dark-input-content-color);
 }
-.lumx-text-field--theme-dark .lumx-text-field__input-native[type=number]::-webkit-inner-spin-button, .lumx-text-field--theme-dark .lumx-text-field__input-native[type=number]::-webkit-outer-spin-button {
+.lumx-text-field--theme-dark .lumx-text-field__input-native[type=number]::-webkit-inner-spin-button, .lumx-text-field--theme-dark .lumx-text-field__input-native[type=number]::-webkit-outer-spin-button, .lumx-text-field__input-native--theme-dark[type=number]::-webkit-inner-spin-button, .lumx-text-field__input-native--theme-dark[type=number]::-webkit-outer-spin-button {
   opacity: 1;
 }
-.lumx-text-field--theme-dark .lumx-text-field__input-native::-moz-placeholder {
+.lumx-text-field--theme-dark .lumx-text-field__input-native::-moz-placeholder, .lumx-text-field__input-native--theme-dark::-moz-placeholder {
   color: var(--lumx-text-field-state-default-theme-dark-input-placeholder-color);
 }
-.lumx-text-field--theme-dark .lumx-text-field__input-native::placeholder {
+.lumx-text-field--theme-dark .lumx-text-field__input-native::placeholder, .lumx-text-field__input-native--theme-dark::placeholder {
   color: var(--lumx-text-field-state-default-theme-dark-input-placeholder-color);
 }
 .lumx-text-field--has-chips .lumx-text-field__input-native {
@@ -12105,9 +12109,6 @@ table {
   min-width: 100px;
   line-height: var(--lumx-material-chip-size-s-height);
 }
-.lumx-text-field__input-native--textarea {
-  resize: none;
-}
 .lumx-text-field__input-clear, .lumx-text-field__after-element {
   flex-shrink: 0;
   margin: calc(var(--lumx-text-field-wrapper-padding-vertical) + (var(--lumx-material-text-field-input-content-line-height) - var(--lumx-button-height) / 1.5) / 2) 4px;

package/package.json

@@ -6,7 +6,6 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/icons": "^3.20.1-alpha.5",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.17.21",
@@ -20,6 +19,7 @@
         "LumX"
     ],
     "license": "MIT",
+    "type": "module",
     "name": "@lumx/core",
     "publishConfig": {
         "directory": "dist"
@@ -29,33 +29,29 @@
         "url": "git+https://github.com/lumapps/design-system.git"
     },
     "scripts": {
-        "generate:design-tokens": "yarn node style-dictionary",
+        "generate:design-tokens": "yarn node style-dictionary/index.cjs",
         "build": "rollup -c",
+        "test": "vitest run",
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "3.20.1-alpha.5",
+    "version": "3.20.1-alpha.50",
     "devDependencies": {
-        "@rollup/plugin-commonjs": "^19.0.2",
-        "@rollup/plugin-terser": "^0.4.4",
-        "@rollup/plugin-typescript": "^12.1.4",
-        "@testing-library/dom": "^9.3.4",
-        "@testing-library/jest-dom": "^5.16.4",
+        "@rollup/plugin-typescript": "^12.3.0",
         "@types/react": "^17.0.2",
         "autoprefixer": "^9.7.4",
         "glob": "^7.1.6",
         "postcss": "^8.5.6",
-        "react": "^17.0.2",
-        "rollup": "^2.79.1",
+        "rollup": "^4.53.3",
         "rollup-plugin-cleaner": "^1.0.0",
         "rollup-plugin-copy": "^3.5.0",
         "sass": "^1.54.0",
         "style-dictionary": "^3.9.0",
         "tinycolor2": "^1.4.1",
-        "version-changelog": "^3.1.1"
-    },
-    "peerDependencies": {
-        "moment": ">= 2",
-        "moment-range": "^4.0.2"
+        "typescript": "^5.4.3",
+        "version-changelog": "^3.1.1",
+        "vite": "^6.3.5",
+        "vite-tsconfig-paths": "^5.1.4",
+        "vitest": "^3.0.0"
     }
 }

package/scss/components/list/_index.scss

@@ -52,11 +52,14 @@
 
 .#{$lumx-base-prefix}-list-item__link,
 .#{$lumx-base-prefix}-list-item__wrapper {
-    .#{$lumx-base-prefix}-list--item-padding-big & {
+    // Padding big (defaults when list contain clickable item)
+    .#{$lumx-base-prefix}-list:has(.#{$lumx-base-prefix}-list-item__link) &,
+    .#{$lumx-base-prefix}-list.#{$lumx-base-prefix}-list--item-padding-big & {
         @include lumx-list-item-padding("big");
     }
 
-    .#{$lumx-base-prefix}-list--item-padding-huge & {
+    // Padding huge
+    .#{$lumx-base-prefix}-list.#{$lumx-base-prefix}-list--item-padding-huge & {
         @include lumx-list-item-padding("huge");
     }
 }
@@ -78,11 +81,14 @@
         @include lumx-list-subheader-icon;
     }
 
-    .#{$lumx-base-prefix}-list--item-padding-big & {
+    // Padding big (defaults when list contain clickable item)
+    .#{$lumx-base-prefix}-list:has(.#{$lumx-base-prefix}-list-item__link) &,
+    .#{$lumx-base-prefix}-list.#{$lumx-base-prefix}-list--item-padding-big & {
         @include lumx-list-item-padding("big");
     }
 
-    .#{$lumx-base-prefix}-list--item-padding-huge & {
+    // Padding huge
+    .#{$lumx-base-prefix}-list.#{$lumx-base-prefix}-list--item-padding-huge & {
         @include lumx-list-item-padding("huge");
     }
 }

package/scss/components/text-field/_index.scss

@@ -104,7 +104,9 @@
     }
 
     &__input-native {
-        #{$self}--theme-light & {
+        resize: none;
+
+        #{$self}--theme-light &, &--theme-light {
             @include lumx-text-field-input-native(lumx-base-const("theme", "LIGHT"));
             @include lumx-text-field-input-content-color(
                 lumx-base-const("state", "DEFAULT"),
@@ -119,7 +121,7 @@
             }
         }
 
-        #{$self}--theme-dark & {
+        #{$self}--theme-dark &, &--theme-dark {
             @include lumx-text-field-input-native(lumx-base-const("theme", "DARK"));
             @include lumx-text-field-input-content-color(
                 lumx-base-const("state", "DEFAULT"),
@@ -140,10 +142,6 @@
             min-width: $lumx-text-field-min-width;
             line-height: var(--lumx-material-chip-size-s-height);
         }
-
-        &--textarea {
-            resize: none;
-        }
     }
 
     &__input-clear,

package/js/components/Icon/Stories.js

@@ -1,40 +0,0 @@
-import { mdiEmail } from '@lumx/icons';
-
-import { Size } from '@lumx/core/js/constants';
-import { iconArgType } from '@lumx/core/stories/controls/icons';
-import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
-import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
-import { Icon } from '.';
-
-const iconSizes = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
-
-export default {
-    argTypes: {
-        icon: iconArgType,
-        hasShape: { control: 'boolean' },
-        color: colorArgType,
-        colorVariant: colorVariantArgType,
-    },
-    args: Icon.defaultProps,
-};
-
-export const SizeAndShape = {
-    args: {
-        icon: mdiEmail,
-    },
-    argTypes: {
-        hasShape: { control: false },
-        size: { control: false },
-    },
-    getDecorators: ({ withCombinations }) => [
-        withCombinations({
-            combinations: {
-                cols: { key: 'size', options: withUndefined(iconSizes) },
-                rows: {
-                    Default: {},
-                    'Has shape': { hasShape: true },
-                },
-            },
-        }),
-    ],
-};