diff --git a/ds-ml-css/components/switch.scss b/ds-ml-css/components/switch.scss
new file mode 100644
index 0000000000000000000000000000000000000000..dd90c53abcb4403a2f6f075c8d1dc3f6f5b402f2
--- /dev/null
+++ b/ds-ml-css/components/switch.scss
@@ -0,0 +1,158 @@
+.switch-container {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ border-left: 2px solid transparent;
+ padding: 0 0 4px 16px;
+
+ label {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ max-width: fit-content;
+ padding-top: 6px;
+ gap: 16px;
+ }
+
+ .switch {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 40px;
+ position: relative;
+ padding-left: 6px;
+
+ input[type='checkbox'] {
+ opacity: 0;
+ width: 40px;
+ height: 18px;
+ position: absolute;
+ left: 0;
+ top: 0;
+ margin: 0;
+ z-index: 2;
+ cursor: pointer;
+ }
+
+ .slider {
+ position: relative;
+ width: 40px;
+ height: 18px;
+ background-color: var(--ml-switch-button-color);
+ border: 1px solid var(--ml-switch-color);
+ border-radius: 34px;
+ transition: background-color 0.4s;
+ margin-bottom: 3px;
+ z-index: 1;
+ }
+
+ .slider:before {
+ content: '';
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ left: 3px;
+ top: 3px;
+ background-color: var(--ml-switch-color);
+ border-radius: 50%;
+ transition:
+ transform 0.4s,
+ background-color 0.4s;
+ }
+
+ input:checked + .slider {
+ background-color: var(--ml-switch-color);
+ }
+
+ input:checked + .slider:before {
+ transform: translateX(21px);
+ background-color: var(--ml-switch-button-color);
+ }
+
+ input:focus-visible + .slider {
+ outline: 2px solid var(--ml-focus-color);
+ outline-offset: 2px;
+ }
+
+ .state {
+ font-size: var(--ml-xsmall-font-size);
+ color: var(--ml-secondary);
+ white-space: nowrap;
+ min-width: 53px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .on {
+ display: none;
+ }
+ .off {
+ display: inline;
+ }
+ }
+
+ input:checked ~ .state .on {
+ display: inline;
+ }
+ input:checked ~ .state .off {
+ display: none;
+ }
+ }
+
+ &.right > label {
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: space-between;
+ min-width: 100%;
+ }
+
+ .description {
+ font-size: var(--ml-small-font-size);
+ color: var(--ml-secondary);
+ }
+
+ .status {
+ font-size: var(--ml-small-font-size);
+ }
+
+ &.info {
+ border-left: 2px solid var(--ml-info);
+ .status {
+ color: var(--ml-info);
+ }
+ }
+ &.success {
+ border-left: 2px solid var(--ml-success);
+ .status {
+ color: var(--ml-success);
+ }
+ }
+ &.error {
+ border-left: 2px solid var(--ml-error);
+ .status {
+ color: var(--ml-error);
+ }
+ }
+ &.warning {
+ border-left: 2px solid var(--ml-warning);
+ .status {
+ color: var(--ml-warning);
+ }
+ }
+ &.disabled {
+ border-left: 2px solid var(--ml-n200);
+ label,
+ .on,
+ .off,
+ .status,
+ .description {
+ color: var(--ml-n200);
+ }
+ .slider {
+ border: 1px solid var(--ml-n200);
+ &:before {
+ background-color: var(--ml-n200);
+ }
+ }
+ }
+}
diff --git a/ds-ml-css/ds-ml-icons.scss b/ds-ml-css/ds-ml-icons.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ab7e1ba3cb0e1182420413d38dc1c6212c39d8e4
--- /dev/null
+++ b/ds-ml-css/ds-ml-icons.scss
@@ -0,0 +1,126 @@
+.success-icon {
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ position: relative;
+ vertical-align: middle;
+ margin-right: 6px;
+ &::before {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background: var(--ml-success);
+ }
+ &::after {
+ content: '';
+ position: absolute;
+ left: 3px;
+ top: 4px;
+ width: 6px;
+ height: 3px;
+ border-left: 2px solid #fff;
+ border-bottom: 2px solid #fff;
+ transform: rotate(-45deg);
+ border-radius: 0 0 2px 2px;
+ }
+}
+
+.error-icon {
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ position: relative;
+ vertical-align: -2px;
+ margin-right: 6px;
+ &::before {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background: var(--ml-error);
+ }
+ &::after {
+ content: '';
+ position: absolute;
+ left: 6px;
+ top: 3px;
+ width: 2px;
+ height: 8px;
+ background: linear-gradient(to bottom, #fff 0 60%, #fff 60%, transparent 60%, transparent 75%, #fff 75%, #fff 100%);
+ border-radius: 1px;
+ }
+}
+
+.info-icon {
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ position: relative;
+ vertical-align: -2px;
+ margin-right: 6px;
+ &::before {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background: var(--ml-info);
+ }
+ &::after {
+ content: '';
+ position: absolute;
+ left: 6px;
+ top: 3px;
+ width: 2px;
+ height: 8px;
+ background: linear-gradient(to bottom, #fff 0 20%, #fff 20% 30%, transparent 30% 35%, #fff 35% 100%);
+ border-radius: 1px;
+ }
+}
+
+.warning-icon {
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ position: relative;
+ margin-right: 6px;
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 2px;
+ width: 0;
+ height: 0;
+ border-left: 8px solid transparent;
+ border-right: 8px solid transparent;
+ border-bottom: 14px solid var(--ml-warning);
+ border-radius: 2px;
+ box-sizing: border-box;
+ }
+ &::after {
+ content: '';
+ position: absolute;
+ left: 7px;
+ top: 8px;
+ width: 2px;
+ height: 6px;
+ background: linear-gradient(to bottom, #fff 0 65%, transparent 65% 80%, #fff 80% 100%);
+ border-radius: 1px;
+ }
+}
+
+.disabled {
+ .success-icon,
+ .info-icon,
+ .error-icon {
+ &::before {
+ background: var(--ml-n200);
+ }
+ }
+ .warning-icon::before {
+ border-bottom-color: var(--ml-n200);
+ }
+}
diff --git a/ds-ml-css/ds-ml-var.scss b/ds-ml-css/ds-ml-var.scss
index 24cc2064c6aac9405ec6cb67efedf3dc02f3d92e..50bf7efb81a660260e46732204ab18dc23495fed 100644
--- a/ds-ml-css/ds-ml-var.scss
+++ b/ds-ml-css/ds-ml-var.scss
@@ -8,6 +8,7 @@
--ml-xxlarge-px: 20px;
/* FONT SIZE */
+ --ml-xsmall-font-size: 12px;
--ml-small-font-size: 14px;
--ml-medium-font-size: 16px;
--ml-large-font-size: 18px;
diff --git a/ds-ml-css/ds-ml.scss b/ds-ml-css/ds-ml.scss
index 670e4a5772101adad9e1d1d7c5226cdae00360c8..4ef8599182833ee651941beb1c310d53ab0b20b9 100644
--- a/ds-ml-css/ds-ml.scss
+++ b/ds-ml-css/ds-ml.scss
@@ -1,7 +1,8 @@
-@use "ds-color-palet.scss";
-@use "ds-ml-var.scss";
-@use "ds-ml-color-var.scss";
-@use "ds-ml-theme.scss";
+@use 'ds-color-palet.scss';
+@use 'ds-ml-var.scss';
+@use 'ds-ml-color-var.scss';
+@use 'ds-ml-icons.scss';
+@use 'ds-ml-theme.scss';
// components
@use 'components/accordion.scss';
@@ -10,12 +11,12 @@
@use 'components/header.scss';
@use 'components/input.scss';
@use 'components/radio-button-checkbox.scss';
-@use 'components/progress-bar.scss';
+@use 'components/switch.scss';
@use 'components/footer.scss';
:root {
/* define fonts */
- font-family: "Roboto", sans-serif;
+ font-family: 'Roboto', sans-serif;
font-size: 16px;
}