@alfalab/core-components 32.0.0-beta.0 → 32.0.0

package/spinner/Component.js

@@ -9,9 +9,19 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"spinner":"spinner__spinner_1jzgy","spin_animation":"spinner__spin_animation_1jzgy","default":"spinner__default_1jzgy","inverted":"spinner__inverted_1jzgy","visible":"spinner__visible_1jzgy","xs":"spinner__xs_1jzgy","s":"spinner__s_1jzgy","m":"spinner__m_1jzgy"};
+var styles = {"spinner":"spinner__spinner_11o0o","spin_animation":"spinner__spin_animation_11o0o","visible":"spinner__visible_11o0o","xs":"spinner__xs_11o0o","s":"spinner__s_11o0o","m":"spinner__m_11o0o"};
 require('./index.css');
 
+var defaultColors = {"component":"spinner__component_1668x"};
+require('./default.css');
+
+var invertedColors = {"component":"spinner__component_1c0ld"};
+require('./inverted.css');
+
+var colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 var CONFIG = {
     xs: {
         padding: 1,
@@ -40,7 +50,7 @@ var Spinner = function (_a) {
     var r = y - xStart;
     var topGradientId = uniqId + "_top";
     var bottomGradientId = uniqId + "_bottom";
-    return (React__default['default'].createElement("svg", { viewBox: "0 0 " + size + " " + size, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn__default['default'](styles.spinner, styles[colors], styles[sizeProp], className, (_b = {},
+    return (React__default['default'].createElement("svg", { viewBox: "0 0 " + size + " " + size, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn__default['default'](styles.spinner, colorStyles[colors].component, styles[sizeProp], className, (_b = {},
             _b[styles.visible] = visible,
             _b)), "data-test-id": dataTestId, id: id },
         React__default['default'].createElement("defs", null,

package/spinner/cssm/Component.js

@@ -4,13 +4,21 @@ var React = require('react');
 var cn = require('classnames');
 var hooks = require('@alfalab/hooks');
 var styles = require('./index.module.css');
+var defaultColors = require('./default.module.css');
+var invertedColors = require('./inverted.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+var defaultColors__default = /*#__PURE__*/_interopDefaultLegacy(defaultColors);
+var invertedColors__default = /*#__PURE__*/_interopDefaultLegacy(invertedColors);
 
+var colorStyles = {
+    default: defaultColors__default['default'],
+    inverted: invertedColors__default['default'],
+};
 var CONFIG = {
     xs: {
         padding: 1,
@@ -39,7 +47,7 @@ var Spinner = function (_a) {
     var r = y - xStart;
     var topGradientId = uniqId + "_top";
     var bottomGradientId = uniqId + "_bottom";
-    return (React__default['default'].createElement("svg", { viewBox: "0 0 " + size + " " + size, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn__default['default'](styles__default['default'].spinner, styles__default['default'][colors], styles__default['default'][sizeProp], className, (_b = {},
+    return (React__default['default'].createElement("svg", { viewBox: "0 0 " + size + " " + size, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn__default['default'](styles__default['default'].spinner, colorStyles[colors].component, styles__default['default'][sizeProp], className, (_b = {},
             _b[styles__default['default'].visible] = visible,
             _b)), "data-test-id": dataTestId, id: id },
         React__default['default'].createElement("defs", null,

package/spinner/cssm/default.module.css

@@ -0,0 +1,17 @@
+:root {
+    --color-light-graphic-primary: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --spinner-default-color: var(--color-light-graphic-primary);
+}
+.component {
+    color: var(--spinner-default-color);
+}

package/spinner/cssm/index.js

@@ -4,6 +4,8 @@ require('react');
 require('classnames');
 require('@alfalab/hooks');
 require('./index.module.css');
+require('./default.module.css');
+require('./inverted.module.css');
 var Component = require('./Component.js');
 
 

package/spinner/cssm/index.module.css

@@ -1,7 +1,3 @@
-:root {
-    --color-light-graphic-primary: #0b1f35;
-    --color-light-graphic-primary-inverted: #fff;
-}
 :root {
 
     /* Hard */
@@ -14,20 +10,12 @@
     --spinner-display-visible: inline-block;
     --spinner-animation-duration: 0.8s;
     --spinner-animation-timing-function: linear;
-    --spinner-default-color: var(--color-light-graphic-primary);
-    --spinner-inverted-color: var(--color-light-graphic-primary-inverted);
 }
 .spinner {
     display: none;
     animation: spin_animation var(--spinner-animation-duration) infinite
         var(--spinner-animation-timing-function);
 }
-.default {
-    color: var(--spinner-default-color);
-}
-.inverted {
-    color: var(--spinner-inverted-color);
-}
 .visible {
     display: var(--spinner-display-visible);
     vertical-align: middle;

package/spinner/cssm/inverted.module.css

@@ -0,0 +1,17 @@
+:root {
+    --color-light-graphic-primary-inverted: #fff;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --spinner-inverted-color: var(--color-light-graphic-primary-inverted);
+}
+.component {
+    color: var(--spinner-inverted-color);
+}

package/spinner/default.css

@@ -0,0 +1,18 @@
+/* hash: kyox7 */
+:root {
+    --color-light-graphic-primary: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --spinner-default-color: var(--color-light-graphic-primary);
+}
+.spinner__component_1668x {
+    color: var(--spinner-default-color);
+}

package/spinner/esm/Component.js

@@ -2,9 +2,19 @@ import React from 'react';
 import cn from 'classnames';
 import { useId } from '@alfalab/hooks';
 
-var styles = {"spinner":"spinner__spinner_1jzgy","spin_animation":"spinner__spin_animation_1jzgy","default":"spinner__default_1jzgy","inverted":"spinner__inverted_1jzgy","visible":"spinner__visible_1jzgy","xs":"spinner__xs_1jzgy","s":"spinner__s_1jzgy","m":"spinner__m_1jzgy"};
+var styles = {"spinner":"spinner__spinner_11o0o","spin_animation":"spinner__spin_animation_11o0o","visible":"spinner__visible_11o0o","xs":"spinner__xs_11o0o","s":"spinner__s_11o0o","m":"spinner__m_11o0o"};
 require('./index.css');
 
+var defaultColors = {"component":"spinner__component_1668x"};
+require('./default.css');
+
+var invertedColors = {"component":"spinner__component_1c0ld"};
+require('./inverted.css');
+
+var colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 var CONFIG = {
     xs: {
         padding: 1,
@@ -33,7 +43,7 @@ var Spinner = function (_a) {
     var r = y - xStart;
     var topGradientId = uniqId + "_top";
     var bottomGradientId = uniqId + "_bottom";
-    return (React.createElement("svg", { viewBox: "0 0 " + size + " " + size, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn(styles.spinner, styles[colors], styles[sizeProp], className, (_b = {},
+    return (React.createElement("svg", { viewBox: "0 0 " + size + " " + size, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn(styles.spinner, colorStyles[colors].component, styles[sizeProp], className, (_b = {},
             _b[styles.visible] = visible,
             _b)), "data-test-id": dataTestId, id: id },
         React.createElement("defs", null,

package/spinner/esm/default.css

@@ -0,0 +1,18 @@
+/* hash: kyox7 */
+:root {
+    --color-light-graphic-primary: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --spinner-default-color: var(--color-light-graphic-primary);
+}
+.spinner__component_1668x {
+    color: var(--spinner-default-color);
+}

package/spinner/esm/index.css

@@ -1,8 +1,4 @@
-/* hash: mm896 */
-:root {
-    --color-light-graphic-primary: #0b1f35;
-    --color-light-graphic-primary-inverted: #fff;
-}
+/* hash: isypa */
 :root {
 
     /* Hard */
@@ -15,37 +11,29 @@
     --spinner-display-visible: inline-block;
     --spinner-animation-duration: 0.8s;
     --spinner-animation-timing-function: linear;
-    --spinner-default-color: var(--color-light-graphic-primary);
-    --spinner-inverted-color: var(--color-light-graphic-primary-inverted);
 }
-.spinner__spinner_1jzgy {
+.spinner__spinner_11o0o {
     display: none;
-    animation: spinner__spin_animation_1jzgy var(--spinner-animation-duration) infinite
+    animation: spinner__spin_animation_11o0o var(--spinner-animation-duration) infinite
         var(--spinner-animation-timing-function);
 }
-.spinner__default_1jzgy {
-    color: var(--spinner-default-color);
-}
-.spinner__inverted_1jzgy {
-    color: var(--spinner-inverted-color);
-}
-.spinner__visible_1jzgy {
+.spinner__visible_11o0o {
     display: var(--spinner-display-visible);
     vertical-align: middle;
 }
-.spinner__xs_1jzgy {
+.spinner__xs_11o0o {
     width: 18px;
     height: 18px;
 }
-.spinner__s_1jzgy {
+.spinner__s_11o0o {
     width: 24px;
     height: 24px;
 }
-.spinner__m_1jzgy {
+.spinner__m_11o0o {
     width: 48px;
     height: 48px;
 }
-@keyframes spinner__spin_animation_1jzgy {
+@keyframes spinner__spin_animation_11o0o {
     from {
         transform: rotate(0);
     }

package/spinner/esm/inverted.css

@@ -0,0 +1,18 @@
+/* hash: bsps3 */
+:root {
+    --color-light-graphic-primary-inverted: #fff;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --spinner-inverted-color: var(--color-light-graphic-primary-inverted);
+}
+.spinner__component_1c0ld {
+    color: var(--spinner-inverted-color);
+}

package/spinner/index.css

@@ -1,8 +1,4 @@
-/* hash: mm896 */
-:root {
-    --color-light-graphic-primary: #0b1f35;
-    --color-light-graphic-primary-inverted: #fff;
-}
+/* hash: isypa */
 :root {
 
     /* Hard */
@@ -15,37 +11,29 @@
     --spinner-display-visible: inline-block;
     --spinner-animation-duration: 0.8s;
     --spinner-animation-timing-function: linear;
-    --spinner-default-color: var(--color-light-graphic-primary);
-    --spinner-inverted-color: var(--color-light-graphic-primary-inverted);
 }
-.spinner__spinner_1jzgy {
+.spinner__spinner_11o0o {
     display: none;
-    animation: spinner__spin_animation_1jzgy var(--spinner-animation-duration) infinite
+    animation: spinner__spin_animation_11o0o var(--spinner-animation-duration) infinite
         var(--spinner-animation-timing-function);
 }
-.spinner__default_1jzgy {
-    color: var(--spinner-default-color);
-}
-.spinner__inverted_1jzgy {
-    color: var(--spinner-inverted-color);
-}
-.spinner__visible_1jzgy {
+.spinner__visible_11o0o {
     display: var(--spinner-display-visible);
     vertical-align: middle;
 }
-.spinner__xs_1jzgy {
+.spinner__xs_11o0o {
     width: 18px;
     height: 18px;
 }
-.spinner__s_1jzgy {
+.spinner__s_11o0o {
     width: 24px;
     height: 24px;
 }
-.spinner__m_1jzgy {
+.spinner__m_11o0o {
     width: 48px;
     height: 48px;
 }
-@keyframes spinner__spin_animation_1jzgy {
+@keyframes spinner__spin_animation_11o0o {
     from {
         transform: rotate(0);
     }

package/spinner/inverted.css

@@ -0,0 +1,18 @@
+/* hash: bsps3 */
+:root {
+    --color-light-graphic-primary-inverted: #fff;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --spinner-inverted-color: var(--color-light-graphic-primary-inverted);
+}
+.spinner__component_1c0ld {
+    color: var(--spinner-inverted-color);
+}

package/spinner/modern/Component.js

@@ -2,9 +2,19 @@ import React from 'react';
 import cn from 'classnames';
 import { useId } from '@alfalab/hooks';
 
-var styles = {"spinner":"spinner__spinner_1jzgy","spin_animation":"spinner__spin_animation_1jzgy","default":"spinner__default_1jzgy","inverted":"spinner__inverted_1jzgy","visible":"spinner__visible_1jzgy","xs":"spinner__xs_1jzgy","s":"spinner__s_1jzgy","m":"spinner__m_1jzgy"};
+var styles = {"spinner":"spinner__spinner_11o0o","spin_animation":"spinner__spin_animation_11o0o","visible":"spinner__visible_11o0o","xs":"spinner__xs_11o0o","s":"spinner__s_11o0o","m":"spinner__m_11o0o"};
 require('./index.css');
 
+var defaultColors = {"component":"spinner__component_1668x"};
+require('./default.css');
+
+var invertedColors = {"component":"spinner__component_1c0ld"};
+require('./inverted.css');
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 const CONFIG = {
     xs: {
         padding: 1,
@@ -31,7 +41,7 @@ const Spinner = ({ size: sizeProp = 's', colors = 'default', visible, id, classN
     const r = y - xStart;
     const topGradientId = `${uniqId}_top`;
     const bottomGradientId = `${uniqId}_bottom`;
-    return (React.createElement("svg", { viewBox: `0 0 ${size} ${size}`, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn(styles.spinner, styles[colors], styles[sizeProp], className, {
+    return (React.createElement("svg", { viewBox: `0 0 ${size} ${size}`, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn(styles.spinner, colorStyles[colors].component, styles[sizeProp], className, {
             [styles.visible]: visible,
         }), "data-test-id": dataTestId, id: id },
         React.createElement("defs", null,

package/spinner/modern/default.css

@@ -0,0 +1,18 @@
+/* hash: kyox7 */
+:root {
+    --color-light-graphic-primary: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --spinner-default-color: var(--color-light-graphic-primary);
+}
+.spinner__component_1668x {
+    color: var(--spinner-default-color);
+}

package/spinner/modern/index.css

@@ -1,8 +1,4 @@
-/* hash: mm896 */
-:root {
-    --color-light-graphic-primary: #0b1f35;
-    --color-light-graphic-primary-inverted: #fff;
-}
+/* hash: isypa */
 :root {
 
     /* Hard */
@@ -15,37 +11,29 @@
     --spinner-display-visible: inline-block;
     --spinner-animation-duration: 0.8s;
     --spinner-animation-timing-function: linear;
-    --spinner-default-color: var(--color-light-graphic-primary);
-    --spinner-inverted-color: var(--color-light-graphic-primary-inverted);
 }
-.spinner__spinner_1jzgy {
+.spinner__spinner_11o0o {
     display: none;
-    animation: spinner__spin_animation_1jzgy var(--spinner-animation-duration) infinite
+    animation: spinner__spin_animation_11o0o var(--spinner-animation-duration) infinite
         var(--spinner-animation-timing-function);
 }
-.spinner__default_1jzgy {
-    color: var(--spinner-default-color);
-}
-.spinner__inverted_1jzgy {
-    color: var(--spinner-inverted-color);
-}
-.spinner__visible_1jzgy {
+.spinner__visible_11o0o {
     display: var(--spinner-display-visible);
     vertical-align: middle;
 }
-.spinner__xs_1jzgy {
+.spinner__xs_11o0o {
     width: 18px;
     height: 18px;
 }
-.spinner__s_1jzgy {
+.spinner__s_11o0o {
     width: 24px;
     height: 24px;
 }
-.spinner__m_1jzgy {
+.spinner__m_11o0o {
     width: 48px;
     height: 48px;
 }
-@keyframes spinner__spin_animation_1jzgy {
+@keyframes spinner__spin_animation_11o0o {
     from {
         transform: rotate(0);
     }

package/spinner/modern/inverted.css

@@ -0,0 +1,18 @@
+/* hash: bsps3 */
+:root {
+    --color-light-graphic-primary-inverted: #fff;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --spinner-inverted-color: var(--color-light-graphic-primary-inverted);
+}
+.spinner__component_1c0ld {
+    color: var(--spinner-inverted-color);
+}

package/status/Component.js

@@ -8,7 +8,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"status__component_1pcwg","soft":"status__soft_1pcwg","green":"status__green_1pcwg","orange":"status__orange_1pcwg","red":"status__red_1pcwg","blue":"status__blue_1pcwg","grey":"status__grey_1pcwg","teal":"status__teal_1pcwg","purple":"status__purple_1pcwg","contrast":"status__contrast_1pcwg"};
+var styles = {"component":"status__component_13a19","soft":"status__soft_13a19","green":"status__green_13a19","orange":"status__orange_13a19","red":"status__red_13a19","blue":"status__blue_13a19","grey":"status__grey_13a19","teal":"status__teal_13a19","purple":"status__purple_13a19","contrast":"status__contrast_13a19"};
 require('./index.css');
 
 var colors = ['green', 'orange', 'red', 'blue', 'grey', 'teal', 'purple'];

package/status/esm/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"status__component_1pcwg","soft":"status__soft_1pcwg","green":"status__green_1pcwg","orange":"status__orange_1pcwg","red":"status__red_1pcwg","blue":"status__blue_1pcwg","grey":"status__grey_1pcwg","teal":"status__teal_1pcwg","purple":"status__purple_1pcwg","contrast":"status__contrast_1pcwg"};
+var styles = {"component":"status__component_13a19","soft":"status__soft_13a19","green":"status__green_13a19","orange":"status__orange_13a19","red":"status__red_13a19","blue":"status__blue_13a19","grey":"status__grey_13a19","teal":"status__teal_13a19","purple":"status__purple_13a19","contrast":"status__contrast_13a19"};
 require('./index.css');
 
 var colors = ['green', 'orange', 'red', 'blue', 'grey', 'teal', 'purple'];

package/status/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: i2dcx */
+/* hash: a7bv7 */
 :root {
     --color-static-status-blue: #007aff;
     --color-static-status-green: #13a463;
@@ -32,7 +32,7 @@
 :root {
     --border-radius-s: 4px;
 }
-.status__component_1pcwg {
+.status__component_13a19 {
     font-size: 11px;
     line-height: 16px;
     font-weight: 700;
@@ -47,58 +47,58 @@
     text-transform: uppercase;
     white-space: nowrap
 }
-.status__component_1pcwg:empty {
+.status__component_13a19:empty {
         padding: 0;
     }
-.status__soft_1pcwg.status__green_1pcwg {
+.status__soft_13a19.status__green_13a19 {
         background: var(--color-static-status-green-alpha-10);
         color: var(--color-static-status-green);
     }
-.status__soft_1pcwg.status__orange_1pcwg {
+.status__soft_13a19.status__orange_13a19 {
         background: var(--color-static-status-orange-alpha-10);
         color: var(--color-static-status-orange);
     }
-.status__soft_1pcwg.status__red_1pcwg {
+.status__soft_13a19.status__red_13a19 {
         background: var(--color-static-status-red-alpha-10);
         color: var(--color-static-status-red);
     }
-.status__soft_1pcwg.status__blue_1pcwg {
+.status__soft_13a19.status__blue_13a19 {
         background: var(--color-static-status-blue-alpha-10);
         color: var(--color-static-status-blue);
     }
-.status__soft_1pcwg.status__grey_1pcwg {
+.status__soft_13a19.status__grey_13a19 {
         background: var(--color-static-status-grey-alpha-10);
         color: var(--color-static-status-grey);
     }
-.status__soft_1pcwg.status__teal_1pcwg {
+.status__soft_13a19.status__teal_13a19 {
         background: var(--color-static-status-teal-alpha-10);
         color: var(--color-static-status-teal);
     }
-.status__soft_1pcwg.status__purple_1pcwg {
+.status__soft_13a19.status__purple_13a19 {
         background: var(--color-static-status-purple-alpha-10);
         color: var(--color-static-status-purple);
     }
-.status__contrast_1pcwg {
+.status__contrast_13a19 {
     color: var(--color-light-text-primary-inverted)
 }
-.status__contrast_1pcwg.status__green_1pcwg {
+.status__contrast_13a19.status__green_13a19 {
         background: var(--color-static-status-green);
     }
-.status__contrast_1pcwg.status__orange_1pcwg {
+.status__contrast_13a19.status__orange_13a19 {
         background: var(--color-static-status-orange);
     }
-.status__contrast_1pcwg.status__red_1pcwg {
+.status__contrast_13a19.status__red_13a19 {
         background: var(--color-static-status-red);
     }
-.status__contrast_1pcwg.status__blue_1pcwg {
+.status__contrast_13a19.status__blue_13a19 {
         background: var(--color-static-status-blue);
     }
-.status__contrast_1pcwg.status__grey_1pcwg {
+.status__contrast_13a19.status__grey_13a19 {
         background: var(--color-static-status-grey);
     }
-.status__contrast_1pcwg.status__teal_1pcwg {
+.status__contrast_13a19.status__teal_13a19 {
         background: var(--color-static-status-teal);
     }
-.status__contrast_1pcwg.status__purple_1pcwg {
+.status__contrast_13a19.status__purple_13a19 {
         background: var(--color-static-status-purple);
     }