@alfalab/core-components-switch 5.0.0 → 5.1.0-snapshot-92b8690

package/moderncssm/default.module.css

@@ -10,36 +10,47 @@
     --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
     --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
 }
+
 .switch {
     background-color: var(--switch-bg-color)
 }
+
 .switch:hover {
         background-color: var(--switch-hover-bg-color);
     }
+
 .label {
     color: var(--switch-label-color);
 }
+
 .hint {
     color: var(--switch-hint-color);
 }
+
 .checked .switch {
     background-color: var(--switch-checked-bg-color)
 }
+
 .checked .switch:hover {
         background-color: var(--switch-checked-hover-bg-color);
     }
+
 .disabled .label {
     color: var(--switch-disabled-color);
 }
+
 .disabled .hint {
     color: var(--switch-disabled-color);
 }
+
 .disabled .switch {
     background-color: var(--switch-disabled-bg-color)
 }
+
 .disabled .switch:before {
         background-color: var(--switch-icon-disabled-color);
     }
+
 .disabled.checked .switch {
     background-color: var(--switch-disabled-checked-bg-color);
 }

package/moderncssm/index.module.css

@@ -3,6 +3,7 @@
     --switch-error-color: var(--color-light-text-negative);
     --switch-icon-color: var(--color-static-neutral-0);
 }
+
 .component {
     display: inline-flex;
     align-items: flex-start;
@@ -12,24 +13,30 @@
     cursor: pointer;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
+
 .component input {
     opacity: 0;
     position: absolute;
 }
+
 .start {
     align-items: flex-start;
 }
+
 .center {
     align-items: center;
 }
+
 .addons {
     margin-left: auto;
     padding-left: var(--gap-16);
     line-height: 24px;
 }
+
 .block {
     width: 100%;
 }
+
 .switch {
     position: relative;
     border-radius: var(--border-radius-16);
@@ -41,6 +48,7 @@
     transition: background-color 0.2s ease, border-color 0.2s ease;
     box-sizing: border-box;
 }
+
 .switch:before {
     content: '';
     position: absolute;
@@ -54,50 +62,61 @@
     box-sizing: border-box;
     transition: transform 0.2s ease;
 }
+
 .content {
     margin-left: var(--gap-12);
     flex-grow: 1;
 }
+
 .label {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     display: block;
 }
+
 .label:not(:only-child) {
     margin-bottom: var(--gap-4);
 }
+
 .errorMessage {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     color: var(--switch-error-color);
 }
+
 .hint {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     display: block;
 }
+
 .component.reversed {
     flex-direction: row-reverse;
 }
+
 .reversed .content {
     margin-right: var(--gap-16);
     margin-left: var(--gap-0);
 }
+
 .reversed .addons {
     margin-left: var(--gap-0);
     padding-left: var(--gap-0);
     margin-right: auto;
     padding-right: var(--gap-16);
 }
+
 .checked .switch:before {
     transform: translateX(16px);
 }
+
 .disabled {
     cursor: var(--disabled-cursor);
 }
+
 .focused .switch {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;

package/moderncssm/inverted.module.css

@@ -10,36 +10,47 @@
     --switch-disabled-checked-bg-inverted-color: var(--switch-disabled-bg-inverted-color);
     --switch-icon-disabled-inverted-color: var(--color-light-neutral-translucent-500-inverted);
 }
+
 .switch {
     background-color: var(--switch-bg-inverted-color)
 }
+
 .switch:hover {
         background-color: var(--switch-hover-bg-inverted-color);
     }
+
 .label {
     color: var(--switch-label-inverted-color);
 }
+
 .hint {
     color: var(--switch-hint-inverted-color);
 }
+
 .checked .switch {
     background-color: var(--switch-checked-bg-inverted-color)
 }
+
 .checked .switch:hover {
         background-color: var(--switch-checked-hover-bg-inverted-color);
     }
+
 .disabled .label {
     color: var(--switch-disabled-inverted-color);
 }
+
 .disabled .hint {
     color: var(--switch-disabled-inverted-color);
 }
+
 .disabled .switch {
     background-color: var(--switch-disabled-bg-inverted-color)
 }
+
 .disabled .switch:before {
         background-color: var(--switch-icon-disabled-inverted-color);
     }
+
 .disabled.checked .switch {
     background-color: var(--switch-disabled-checked-bg-inverted-color);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-switch",
-    "version": "5.0.0",
+    "version": "5.1.0-snapshot-92b8690",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -10,7 +10,7 @@
     "main": "index.js",
     "module": "./esm/index.js",
     "dependencies": {
-        "@alfalab/core-components-shared": "^1.0.0",
+        "@alfalab/core-components-shared": "1.1.0-snapshot-92b8690",
         "@alfalab/hooks": "^1.13.1",
         "classnames": "^2.5.1",
         "react-merge-refs": "^1.1.0",
@@ -25,6 +25,6 @@
         "directory": "dist"
     },
     "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
-    "themesVersion": "14.0.0",
-    "varsVersion": "10.0.0"
+    "themesVersion": "14.1.0-snapshot-92b8690",
+    "varsVersion": "10.1.0-snapshot-92b8690"
 }

package/src/default.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';
 @import './vars.css';
 
 .switch {

package/src/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';
 @import './vars.css';
 
 .component {

package/src/inverted.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';
 @import './vars.css';
 
 .switch {