@indico-data/design-system 2.7.0 → 2.9.0

package/lib/index.css

@@ -870,6 +870,10 @@
   --pf-input-text-color: var(--pf-gray-color);
   --pf-input-placeholder-text-color: var(--pf-gray-color-300);
   --pf-input-help-text-color: var(--pf-gray-color-400);
+  --pf-input-disabled-background-color: var(--pf-gray-color-100);
+  --pf-input-border-color: var(--pf-gray-color);
+  --pf-input-disabled-color: var(--pf-gray-color-400);
+  --pf-input-border-color: var(--pf-gray-color);
   --pf-input-rounded: var(--pf-rounded);
 }
 
@@ -879,6 +883,9 @@
   --pf-input-text-color: var(--pf-gray-color-100);
   --pf-input-placeholder-text-color: var(--pf-gray-color);
   --pf-input-help-text-color: var(--pf-gray-color-200);
+  --pf-input-disabled-background-color: var(--pf-primary-color-200);
+  --pf-input-disabled-border-color: var(--pf-gray-color-300);
+  --pf-input-disabled-color: var(--pf-gray-color-400);
 }
 
 .input {
@@ -913,9 +920,9 @@
   border-color: var(--pf-info-color);
 }
 .input:disabled {
-  background-color: var(--pf-gray-color-100);
-  border-color: var(--pf-gray-color-300);
-  color: var(--pf-gray-color-400);
+  background-color: var(--pf-input-disabled-background-color);
+  border-color: var(--pf-input-disabled-border-color);
+  color: var(--pf-input-disabled-color);
 }
 .input--has-icon {
   padding-left: var(--pf-padding-7);
@@ -1064,7 +1071,7 @@
 }
 
 :root [data-theme=dark] {
-  --pf-checkbox-background-color: transparent;
+  --pf-checkbox-background-color: var(--pf-primary-color-200);
   --pf-checkbox-check-color: var(--pf-white-color);
   --pf-checkbox-border-color: var(--pf-white-color);
   --pf-checkbox-disabled-color: var(--pf-gray-color-300);
@@ -1083,21 +1090,21 @@
 .form-control .checkbox-input-label {
   cursor: pointer;
 }
-.form-control [type=checkbox]:checked,
-.form-control [type=checkbox]:not(:checked) {
+.form-control .checkbox-input:checked,
+.form-control .checkbox-input:not(:checked) {
   position: absolute;
   left: -9999px;
 }
-.form-control [type=checkbox]:checked + label,
-.form-control [type=checkbox]:not(:checked) + label {
+.form-control .checkbox-input:checked + label,
+.form-control .checkbox-input:not(:checked) + label {
   position: relative;
   padding-left: var(--pf-padding-7);
   cursor: pointer;
   line-height: 20px;
   display: inline-block;
 }
-.form-control [type=checkbox]:checked + label:before,
-.form-control [type=checkbox]:not(:checked) + label:before {
+.form-control .checkbox-input:checked + label:before,
+.form-control .checkbox-input:not(:checked) + label:before {
   content: "";
   position: absolute;
   left: 0;
@@ -1108,8 +1115,8 @@
   border-radius: var(--pf-rounded);
   background: var(--pf-checkbox-background-color);
 }
-.form-control [type=checkbox]:checked + label:after,
-.form-control [type=checkbox]:not(:checked) + label:after {
+.form-control .checkbox-input:checked + label:after,
+.form-control .checkbox-input:not(:checked) + label:after {
   content: "";
   width: 12px;
   height: 12px;
@@ -1120,29 +1127,198 @@
   border-radius: var(--pf-rounded);
   transition: all 0.2s ease;
 }
-.form-control [type=checkbox]:not(:checked) + label:after {
+.form-control .checkbox-input:not(:checked) + label:after {
   opacity: 0;
   transform: scale(0);
 }
-.form-control [type=checkbox]:checked + label:after {
+.form-control .checkbox-input:checked + label:after {
   opacity: 1;
   transform: scale(1);
 }
-.form-control [type=checkbox]:disabled,
-.form-control [type=checkbox]:disabled + label {
+.form-control .checkbox-input:disabled,
+.form-control .checkbox-input:disabled + label {
   cursor: not-allowed;
 }
-.form-control [type=checkbox]:disabled + label {
+.form-control .checkbox-input:disabled + label {
   color: var(--pf-checkbox-disabled-color);
   opacity: 0.5;
 }
-.form-control [type=checkbox]:disabled + label:before {
+.form-control .checkbox-input:disabled + label:before {
   border-color: var(--pf-checkbox-disabled-color);
 }
-.form-control [type=checkbox]:disabled + label:after {
+.form-control .checkbox-input:disabled + label:after {
   background: var(--pf-checkbox-disabled-color);
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-textarea-background-color: var(--pf-white-color);
+  --pf-textarea-border-color: var(--pf-gray-color);
+  --pf-textarea-text-color: var(--pf-gray-color);
+  --pf-textarea-placeholder-text-color: var(--pf-gray-color-300);
+  --pf-textarea-help-text-color: var(--pf-gray-color-400);
+  --pf-textarea-disabled-background-color: var(--pf-gray-color-100);
+  --pf-textarea-border-color: var(--pf-gray-color);
+  --pf-textarea-disabled-color: var(--pf-gray-color-400);
+  --pf-textarea-rounded: var(--pf-rounded);
+}
+
+:root [data-theme=dark] {
+  --pf-textarea-background-color: var(--pf-primary-color);
+  --pf-textarea-border-color: var(--pf-gray-color-100);
+  --pf-textarea-text-color: var(--pf-gray-color-100);
+  --pf-textarea-placeholder-text-color: var(--pf-gray-color);
+  --pf-textarea-help-text-color: var(--pf-gray-color-200);
+  --pf-textarea-disabled-background-color: var(--pf-primary-color-200);
+  --pf-textarea-disabled-border-color: var(--pf-gray-color-300);
+  --pf-textarea-disabled-color: var(--pf-gray-color-400);
+}
+
+.textarea {
+  background-color: var(--pf-textarea-background-color);
+  border: 1px solid var(--pf-textarea-border-color);
+  border-radius: var(--pf-textarea-rounded);
+  color: var(--pf-textarea-text-color);
+  padding: 10px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.textarea::-moz-placeholder {
+  color: var(--pf-textarea-placeholder-text-color);
+}
+.textarea::placeholder {
+  color: var(--pf-textarea-placeholder-text-color);
+}
+.textarea:focus {
+  border-color: var(--pf-primary-color);
+}
+.textarea.error {
+  border-color: var(--pf-error-color);
+}
+.textarea.success {
+  border-color: var(--pf-success-color);
+}
+.textarea.warning {
+  border-color: var(--pf-warning-color);
+}
+.textarea.info {
+  border-color: var(--pf-info-color);
+}
+.textarea:disabled {
+  background-color: var(--pf-textarea-disabled-background-color);
+  border-color: var(--pf-textarea-disabled-border-color);
+  color: var(--pf-textarea-disabled-color);
+}
+.textarea--has-icon {
+  padding-left: var(--pf-padding-7);
+}
+
+.form-control .error-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  margin-top: var(--pf-margin-2);
+  margin-bottom: var(--pf-margin-2);
+  color: var(--pf-error-color);
+}
+.form-control .help-text {
+  margin-top: var(--pf-margin-2);
+  margin-bottom: var(--pf-margin-2);
+  color: var(--pf-textarea-help-text-color);
+  font-size: var(--pf-font-size-subtitle2);
+}
+.form-control .is-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.form-control .form-label {
+  margin-bottom: var(--pf-margin-2);
+}
+
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-toggle-background-color: var(--pf-gray-color-200);
+  --pf-toggle-circle-color: var(--pf-primary-color);
+  --pf-toggle-border-color: var(--pf-gray-color);
+  --pf-toggle-disabled-background-color: var(--pf-gray-color-400);
+  --pf-toggle-disabled-circle-color: var(--pf-gray-color-300);
+  --pf-toggle-checked-background-color: var(--pf-primary-color-200);
+}
+
+:root [data-theme=dark] {
+  --pf-toggle-background-color: var(--pf-primary-color-100);
+  --pf-toggle-circle-color: var(--pf-white-color);
+  --pf-toggle-border-color: var(--pf-white-color);
+  --pf-toggle-disabled-background-color: var(--pf-gray-color-600);
+  --pf-toggle-disabled-circle-color: var(--pf-gray-color-900);
+  --pf-toggle-checked-background-color: var(--pf-secondary-color-400);
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+  background-color: var(--pf-toggle-background-color);
+  border-radius: 20px;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+
+.switch::after {
+  content: "";
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: var(--pf-toggle-circle-color);
+  top: 1px;
+  left: 1px;
+  transition: all 0.3s;
+}
+
+.toggle-input:checked + label.switch::after {
+  left: 20px;
+}
+
+.toggle-input:checked + label.switch {
+  background-color: var(--pf-toggle-checked-background-color);
+}
+
+.toggle-input:checked,
+.toggle-input:not(:checked) {
+  position: absolute;
+  left: -9999px;
+}
+
+.toggle-input:disabled + label.switch {
+  background-color: var(--pf-toggle-disabled-background-color);
+  cursor: not-allowed;
+}
+
+.toggle-input:disabled + label.switch::after {
+  background-color: var(--pf-toggle-disabled-circle-color);
+}
+
+.toggle-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.toggle-label {
+  cursor: pointer;
+  margin-left: var(--pf-margin-2);
+}
+
 :root {
   --pf-font-family-base: "Mulish", sans-serif;
   --pf-font-size-base: 1rem;

package/lib/index.d.ts

@@ -758,7 +758,7 @@ type Props$1 = {
     checkedIconName?: IconName$1;
     notCheckedIconName?: IconName$1;
 } & PermafrostComponent$1;
-declare const Toggle: (props: Props$1) => react_jsx_runtime.JSX.Element;
+declare const Toggle$1: (props: Props$1) => react_jsx_runtime.JSX.Element;
 
 type Props = PermafrostComponent$1 & {
     questionMark?: boolean;
@@ -962,4 +962,16 @@ interface CheckboxProps {
 }
 declare const Checkbox: ({ ref, id, label, name, value, onChange, isDisabled, isChecked, ...rest }: CheckboxProps) => react_jsx_runtime.JSX.Element;
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio$2 as Radio, RadioGroup$1 as RadioGroup, Radio as RadioInput, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, typography as TYPOGRAPHY, Table, TextInput, TextTruncate, Toggle, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
+interface ToggleProps {
+    ref?: React$1.LegacyRef<HTMLInputElement>;
+    id: string;
+    label?: string;
+    name: string;
+    value?: string;
+    onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
+    isDisabled?: boolean;
+    isChecked?: boolean;
+}
+declare const Toggle: ({ ref, id, label, name, value, onChange, isDisabled, isChecked, ...rest }: ToggleProps) => react_jsx_runtime.JSX.Element;
+
+export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio$2 as Radio, RadioGroup$1 as RadioGroup, Radio as RadioInput, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, typography as TYPOGRAPHY, Table, TextInput, TextTruncate, Toggle$1 as Toggle, Toggle as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };

package/lib/index.esm.css

@@ -870,6 +870,10 @@
   --pf-input-text-color: var(--pf-gray-color);
   --pf-input-placeholder-text-color: var(--pf-gray-color-300);
   --pf-input-help-text-color: var(--pf-gray-color-400);
+  --pf-input-disabled-background-color: var(--pf-gray-color-100);
+  --pf-input-border-color: var(--pf-gray-color);
+  --pf-input-disabled-color: var(--pf-gray-color-400);
+  --pf-input-border-color: var(--pf-gray-color);
   --pf-input-rounded: var(--pf-rounded);
 }
 
@@ -879,6 +883,9 @@
   --pf-input-text-color: var(--pf-gray-color-100);
   --pf-input-placeholder-text-color: var(--pf-gray-color);
   --pf-input-help-text-color: var(--pf-gray-color-200);
+  --pf-input-disabled-background-color: var(--pf-primary-color-200);
+  --pf-input-disabled-border-color: var(--pf-gray-color-300);
+  --pf-input-disabled-color: var(--pf-gray-color-400);
 }
 
 .input {
@@ -913,9 +920,9 @@
   border-color: var(--pf-info-color);
 }
 .input:disabled {
-  background-color: var(--pf-gray-color-100);
-  border-color: var(--pf-gray-color-300);
-  color: var(--pf-gray-color-400);
+  background-color: var(--pf-input-disabled-background-color);
+  border-color: var(--pf-input-disabled-border-color);
+  color: var(--pf-input-disabled-color);
 }
 .input--has-icon {
   padding-left: var(--pf-padding-7);
@@ -1064,7 +1071,7 @@
 }
 
 :root [data-theme=dark] {
-  --pf-checkbox-background-color: transparent;
+  --pf-checkbox-background-color: var(--pf-primary-color-200);
   --pf-checkbox-check-color: var(--pf-white-color);
   --pf-checkbox-border-color: var(--pf-white-color);
   --pf-checkbox-disabled-color: var(--pf-gray-color-300);
@@ -1083,21 +1090,21 @@
 .form-control .checkbox-input-label {
   cursor: pointer;
 }
-.form-control [type=checkbox]:checked,
-.form-control [type=checkbox]:not(:checked) {
+.form-control .checkbox-input:checked,
+.form-control .checkbox-input:not(:checked) {
   position: absolute;
   left: -9999px;
 }
-.form-control [type=checkbox]:checked + label,
-.form-control [type=checkbox]:not(:checked) + label {
+.form-control .checkbox-input:checked + label,
+.form-control .checkbox-input:not(:checked) + label {
   position: relative;
   padding-left: var(--pf-padding-7);
   cursor: pointer;
   line-height: 20px;
   display: inline-block;
 }
-.form-control [type=checkbox]:checked + label:before,
-.form-control [type=checkbox]:not(:checked) + label:before {
+.form-control .checkbox-input:checked + label:before,
+.form-control .checkbox-input:not(:checked) + label:before {
   content: "";
   position: absolute;
   left: 0;
@@ -1108,8 +1115,8 @@
   border-radius: var(--pf-rounded);
   background: var(--pf-checkbox-background-color);
 }
-.form-control [type=checkbox]:checked + label:after,
-.form-control [type=checkbox]:not(:checked) + label:after {
+.form-control .checkbox-input:checked + label:after,
+.form-control .checkbox-input:not(:checked) + label:after {
   content: "";
   width: 12px;
   height: 12px;
@@ -1120,29 +1127,198 @@
   border-radius: var(--pf-rounded);
   transition: all 0.2s ease;
 }
-.form-control [type=checkbox]:not(:checked) + label:after {
+.form-control .checkbox-input:not(:checked) + label:after {
   opacity: 0;
   transform: scale(0);
 }
-.form-control [type=checkbox]:checked + label:after {
+.form-control .checkbox-input:checked + label:after {
   opacity: 1;
   transform: scale(1);
 }
-.form-control [type=checkbox]:disabled,
-.form-control [type=checkbox]:disabled + label {
+.form-control .checkbox-input:disabled,
+.form-control .checkbox-input:disabled + label {
   cursor: not-allowed;
 }
-.form-control [type=checkbox]:disabled + label {
+.form-control .checkbox-input:disabled + label {
   color: var(--pf-checkbox-disabled-color);
   opacity: 0.5;
 }
-.form-control [type=checkbox]:disabled + label:before {
+.form-control .checkbox-input:disabled + label:before {
   border-color: var(--pf-checkbox-disabled-color);
 }
-.form-control [type=checkbox]:disabled + label:after {
+.form-control .checkbox-input:disabled + label:after {
   background: var(--pf-checkbox-disabled-color);
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-textarea-background-color: var(--pf-white-color);
+  --pf-textarea-border-color: var(--pf-gray-color);
+  --pf-textarea-text-color: var(--pf-gray-color);
+  --pf-textarea-placeholder-text-color: var(--pf-gray-color-300);
+  --pf-textarea-help-text-color: var(--pf-gray-color-400);
+  --pf-textarea-disabled-background-color: var(--pf-gray-color-100);
+  --pf-textarea-border-color: var(--pf-gray-color);
+  --pf-textarea-disabled-color: var(--pf-gray-color-400);
+  --pf-textarea-rounded: var(--pf-rounded);
+}
+
+:root [data-theme=dark] {
+  --pf-textarea-background-color: var(--pf-primary-color);
+  --pf-textarea-border-color: var(--pf-gray-color-100);
+  --pf-textarea-text-color: var(--pf-gray-color-100);
+  --pf-textarea-placeholder-text-color: var(--pf-gray-color);
+  --pf-textarea-help-text-color: var(--pf-gray-color-200);
+  --pf-textarea-disabled-background-color: var(--pf-primary-color-200);
+  --pf-textarea-disabled-border-color: var(--pf-gray-color-300);
+  --pf-textarea-disabled-color: var(--pf-gray-color-400);
+}
+
+.textarea {
+  background-color: var(--pf-textarea-background-color);
+  border: 1px solid var(--pf-textarea-border-color);
+  border-radius: var(--pf-textarea-rounded);
+  color: var(--pf-textarea-text-color);
+  padding: 10px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.textarea::-moz-placeholder {
+  color: var(--pf-textarea-placeholder-text-color);
+}
+.textarea::placeholder {
+  color: var(--pf-textarea-placeholder-text-color);
+}
+.textarea:focus {
+  border-color: var(--pf-primary-color);
+}
+.textarea.error {
+  border-color: var(--pf-error-color);
+}
+.textarea.success {
+  border-color: var(--pf-success-color);
+}
+.textarea.warning {
+  border-color: var(--pf-warning-color);
+}
+.textarea.info {
+  border-color: var(--pf-info-color);
+}
+.textarea:disabled {
+  background-color: var(--pf-textarea-disabled-background-color);
+  border-color: var(--pf-textarea-disabled-border-color);
+  color: var(--pf-textarea-disabled-color);
+}
+.textarea--has-icon {
+  padding-left: var(--pf-padding-7);
+}
+
+.form-control .error-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  margin-top: var(--pf-margin-2);
+  margin-bottom: var(--pf-margin-2);
+  color: var(--pf-error-color);
+}
+.form-control .help-text {
+  margin-top: var(--pf-margin-2);
+  margin-bottom: var(--pf-margin-2);
+  color: var(--pf-textarea-help-text-color);
+  font-size: var(--pf-font-size-subtitle2);
+}
+.form-control .is-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.form-control .form-label {
+  margin-bottom: var(--pf-margin-2);
+}
+
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-toggle-background-color: var(--pf-gray-color-200);
+  --pf-toggle-circle-color: var(--pf-primary-color);
+  --pf-toggle-border-color: var(--pf-gray-color);
+  --pf-toggle-disabled-background-color: var(--pf-gray-color-400);
+  --pf-toggle-disabled-circle-color: var(--pf-gray-color-300);
+  --pf-toggle-checked-background-color: var(--pf-primary-color-200);
+}
+
+:root [data-theme=dark] {
+  --pf-toggle-background-color: var(--pf-primary-color-100);
+  --pf-toggle-circle-color: var(--pf-white-color);
+  --pf-toggle-border-color: var(--pf-white-color);
+  --pf-toggle-disabled-background-color: var(--pf-gray-color-600);
+  --pf-toggle-disabled-circle-color: var(--pf-gray-color-900);
+  --pf-toggle-checked-background-color: var(--pf-secondary-color-400);
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+  background-color: var(--pf-toggle-background-color);
+  border-radius: 20px;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+
+.switch::after {
+  content: "";
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: var(--pf-toggle-circle-color);
+  top: 1px;
+  left: 1px;
+  transition: all 0.3s;
+}
+
+.toggle-input:checked + label.switch::after {
+  left: 20px;
+}
+
+.toggle-input:checked + label.switch {
+  background-color: var(--pf-toggle-checked-background-color);
+}
+
+.toggle-input:checked,
+.toggle-input:not(:checked) {
+  position: absolute;
+  left: -9999px;
+}
+
+.toggle-input:disabled + label.switch {
+  background-color: var(--pf-toggle-disabled-background-color);
+  cursor: not-allowed;
+}
+
+.toggle-input:disabled + label.switch::after {
+  background-color: var(--pf-toggle-disabled-circle-color);
+}
+
+.toggle-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.toggle-label {
+  cursor: pointer;
+  margin-left: var(--pf-margin-2);
+}
+
 :root {
   --pf-font-family-base: "Mulish", sans-serif;
   --pf-font-size-base: 1rem;

package/lib/index.esm.js

@@ -18656,7 +18656,12 @@ const Radio$2 = (_a) => {
 
 const Checkbox = (_a) => {
     var { ref, id, label, name, value, onChange, isDisabled, isChecked = false } = _a, rest = __rest$1(_a, ["ref", "id", "label", "name", "value", "onChange", "isDisabled", "isChecked"]);
-    return (jsx("div", { className: "form-control", children: jsxs("div", { className: "checkbox-wrapper", children: [jsx("input", Object.assign({ "data-testid": `form-checkbox-input-${name}` }, rest, { className: "checkbox-input", type: "checkbox", id: id, checked: isChecked, name: name, value: value, disabled: isDisabled, ref: ref, onChange: onChange, tabIndex: 0, "aria-describedby": id, "aria-label": label })), jsx("label", { htmlFor: id, className: "checkbox-input-label", "data-testid": `label-checkbox-input-${name}`, children: label })] }) }));
+    return (jsx("div", { className: "form-control", children: jsxs("div", { className: "checkbox-wrapper", children: [jsx("input", Object.assign({ "data-testid": `form-checkbox-input-${name}`, className: "checkbox-input", type: "checkbox", id: id, checked: isChecked, name: name, value: value, disabled: isDisabled, ref: ref, onChange: onChange, tabIndex: 0, "aria-describedby": id, "aria-label": label }, rest)), jsx("label", { htmlFor: id, className: "checkbox-input-label", "data-testid": `label-checkbox-input-${name}`, children: label })] }) }));
+};
+
+const Toggle$1 = (_a) => {
+    var { ref, id, label, name, value, onChange, isDisabled, isChecked } = _a, rest = __rest$1(_a, ["ref", "id", "label", "name", "value", "onChange", "isDisabled", "isChecked"]);
+    return (jsx("div", { className: "form-control", children: jsxs("div", { className: "toggle-wrapper", children: [jsx("input", Object.assign({ "data-testid": `form-toggle-input-${name}`, className: "toggle-input", type: "checkbox", id: id, checked: isChecked, name: name, value: value, disabled: isDisabled, ref: ref, onChange: onChange, tabIndex: 0, "aria-describedby": id, "aria-label": label }, rest)), jsx("label", { htmlFor: id, className: "switch" }), jsx("label", { className: 'toggle-label', htmlFor: id, children: label })] }) }));
 };
 
 const StyledAccordion = styled.details `
@@ -41480,5 +41485,5 @@ const Tooltip = (props) => {
                 openOnClick: props.clickToShow, id: props.for, delayShow: props.delayShow, delayHide: props.delayHide, children: props.children })] }));
 };
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$2 as Button, allColors as COLORS, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio, RadioGroup, Radio$2 as RadioInput, RandomLoadingMessage, Row$1 as Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, typography as TYPOGRAPHY, Table$1 as Table, TextInput, TextTruncate, Toggle, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
+export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$2 as Button, allColors as COLORS, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio, RadioGroup, Radio$2 as RadioInput, RandomLoadingMessage, Row$1 as Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, typography as TYPOGRAPHY, Table$1 as Table, TextInput, TextTruncate, Toggle, Toggle$1 as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
 //# sourceMappingURL=index.esm.js.map