@sio-group/form-react 0.1.0

package/dist/styles/index.css

@@ -0,0 +1,1733 @@
+:root {
+  --sio-color-white: #ffffff;
+  --sio-color-black: #000000;
+  --sio-color-gray: #655f5d;
+  --sio-color-light-gray: #c6c6c6;
+  --sio-color-primary: #3B82F6;
+  --sio-color-success: #10B981;
+  --sio-color-error: #EF4444;
+  --sio-color-warning: #F59E0B;
+  --sio-color-info: #06B6D4;
+  --sio-color-primary-rgb: 59, 130, 246;
+  --sio-color-error-rgb: 239, 68, 68;
+  --sio-form-label: var(--sio-color-primary);
+  --sio-form-border: var(--sio-color-light-gray);
+  --sio-form-bg: var(--sio-color-white);
+  --sio-btn-primary-bg: var(--sio-color-primary);
+  --sio-btn-primary-border: var(--sio-color-primary);
+  --sio-btn-primary-text: var(--sio-color-white);
+  --sio-btn-secondary-bg: transparent;
+  --sio-btn-secondary-border: var(--sio-color-primary);
+  --sio-btn-secondary-text: var(--sio-color-primary);
+  --sio-btn-link-bg: transparent;
+  --sio-btn-link-border: transparent;
+  --sio-btn-link-text: var(--sio-color-primary);
+}
+
+:root {
+  --sio-form-border-radius: 3px;
+  --sio-form-padding-x: 10px;
+  --sio-form-padding-y: 5px;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+:root {
+  --sio-grid-gutter: 15px;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.sio-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: calc(var(--sio-grid-gutter) * -1);
+  margin-right: calc(var(--sio-grid-gutter) * -1);
+}
+
+.sio-row .no-gutters {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.sio-row .no-gutters > .sio-col,
+.sio-row .no-gutters > [class*=sio-col-] {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.sio-col-xl,
+.sio-col-xl-auto, .sio-col-xl-12, .sio-col-xl-11, .sio-col-xl-10, .sio-col-xl-9, .sio-col-xl-8, .sio-col-xl-7, .sio-col-xl-6, .sio-col-xl-5, .sio-col-xl-4, .sio-col-xl-3, .sio-col-xl-2, .sio-col-xl-1, .sio-col-lg,
+.sio-col-lg-auto, .sio-col-lg-12, .sio-col-lg-11, .sio-col-lg-10, .sio-col-lg-9, .sio-col-lg-8, .sio-col-lg-7, .sio-col-lg-6, .sio-col-lg-5, .sio-col-lg-4, .sio-col-lg-3, .sio-col-lg-2, .sio-col-lg-1, .sio-col-md,
+.sio-col-md-auto, .sio-col-md-12, .sio-col-md-11, .sio-col-md-10, .sio-col-md-9, .sio-col-md-8, .sio-col-md-7, .sio-col-md-6, .sio-col-md-5, .sio-col-md-4, .sio-col-md-3, .sio-col-md-2, .sio-col-md-1, .sio-col-sm,
+.sio-col-sm-auto, .sio-col-sm-12, .sio-col-sm-11, .sio-col-sm-10, .sio-col-sm-9, .sio-col-sm-8, .sio-col-sm-7, .sio-col-sm-6, .sio-col-sm-5, .sio-col-sm-4, .sio-col-sm-3, .sio-col-sm-2, .sio-col-sm-1, .sio-col-xs,
+.sio-col-xs-auto, .sio-col-xs-12, .sio-col-xs-11, .sio-col-xs-10, .sio-col-xs-9, .sio-col-xs-8, .sio-col-xs-7, .sio-col-xs-6, .sio-col-xs-5, .sio-col-xs-4, .sio-col-xs-3, .sio-col-xs-2, .sio-col-xs-1 {
+  position: relative;
+  width: 100%;
+  padding-left: var(--sio-grid-gutter);
+  padding-right: var(--sio-grid-gutter);
+}
+
+.sio-col-xs {
+  flex-basis: 0;
+  flex-grow: 1;
+  max-width: 100%;
+}
+
+.sio-col-xs-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
+
+.sio-col-xs-1 {
+  flex: 0 0 8.3333333333%;
+  max-width: 8.3333333333%;
+}
+
+.sio-col-xs-2 {
+  flex: 0 0 16.6666666667%;
+  max-width: 16.6666666667%;
+}
+
+.sio-col-xs-3 {
+  flex: 0 0 25%;
+  max-width: 25%;
+}
+
+.sio-col-xs-4 {
+  flex: 0 0 33.3333333333%;
+  max-width: 33.3333333333%;
+}
+
+.sio-col-xs-5 {
+  flex: 0 0 41.6666666667%;
+  max-width: 41.6666666667%;
+}
+
+.sio-col-xs-6 {
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+
+.sio-col-xs-7 {
+  flex: 0 0 58.3333333333%;
+  max-width: 58.3333333333%;
+}
+
+.sio-col-xs-8 {
+  flex: 0 0 66.6666666667%;
+  max-width: 66.6666666667%;
+}
+
+.sio-col-xs-9 {
+  flex: 0 0 75%;
+  max-width: 75%;
+}
+
+.sio-col-xs-10 {
+  flex: 0 0 83.3333333333%;
+  max-width: 83.3333333333%;
+}
+
+.sio-col-xs-11 {
+  flex: 0 0 91.6666666667%;
+  max-width: 91.6666666667%;
+}
+
+.sio-col-xs-12 {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+.sio-order-xs-first {
+  order: -1;
+}
+
+.sio-order-xs-last {
+  order: 13;
+}
+
+.sio-order-xs-0 {
+  order: 0;
+}
+
+.sio-order-xs-1 {
+  order: 1;
+}
+
+.sio-order-xs-2 {
+  order: 2;
+}
+
+.sio-order-xs-3 {
+  order: 3;
+}
+
+.sio-order-xs-4 {
+  order: 4;
+}
+
+.sio-order-xs-5 {
+  order: 5;
+}
+
+.sio-order-xs-6 {
+  order: 6;
+}
+
+.sio-order-xs-7 {
+  order: 7;
+}
+
+.sio-order-xs-8 {
+  order: 8;
+}
+
+.sio-order-xs-9 {
+  order: 9;
+}
+
+.sio-order-xs-10 {
+  order: 10;
+}
+
+.sio-order-xs-11 {
+  order: 11;
+}
+
+.sio-order-xs-12 {
+  order: 12;
+}
+
+.sio-offset-xs-0 {
+  margin-left: 0;
+}
+
+.sio-offset-xs-1 {
+  margin-left: 8.3333333333%;
+}
+
+.sio-offset-xs-2 {
+  margin-left: 16.6666666667%;
+}
+
+.sio-offset-xs-3 {
+  margin-left: 25%;
+}
+
+.sio-offset-xs-4 {
+  margin-left: 33.3333333333%;
+}
+
+.sio-offset-xs-5 {
+  margin-left: 41.6666666667%;
+}
+
+.sio-offset-xs-6 {
+  margin-left: 50%;
+}
+
+.sio-offset-xs-7 {
+  margin-left: 58.3333333333%;
+}
+
+.sio-offset-xs-8 {
+  margin-left: 66.6666666667%;
+}
+
+.sio-offset-xs-9 {
+  margin-left: 75%;
+}
+
+.sio-offset-xs-10 {
+  margin-left: 83.3333333333%;
+}
+
+.sio-offset-xs-11 {
+  margin-left: 91.6666666667%;
+}
+
+.sio-d-xs-none {
+  display: none;
+}
+
+.d-xs-block {
+  display: block;
+}
+
+@media (min-width: 576px) {
+  .sio-col-sm {
+    flex-basis: 0;
+    flex-grow: 1;
+    max-width: 100%;
+  }
+  .sio-col-sm-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+  .sio-col-sm-1 {
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  .sio-col-sm-2 {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  .sio-col-sm-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .sio-col-sm-4 {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  .sio-col-sm-5 {
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  .sio-col-sm-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .sio-col-sm-7 {
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  .sio-col-sm-8 {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  .sio-col-sm-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .sio-col-sm-10 {
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  .sio-col-sm-11 {
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  .sio-col-sm-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .sio-order-sm-first {
+    order: -1;
+  }
+  .sio-order-sm-last {
+    order: 13;
+  }
+  .sio-order-sm-0 {
+    order: 0;
+  }
+  .sio-order-sm-1 {
+    order: 1;
+  }
+  .sio-order-sm-2 {
+    order: 2;
+  }
+  .sio-order-sm-3 {
+    order: 3;
+  }
+  .sio-order-sm-4 {
+    order: 4;
+  }
+  .sio-order-sm-5 {
+    order: 5;
+  }
+  .sio-order-sm-6 {
+    order: 6;
+  }
+  .sio-order-sm-7 {
+    order: 7;
+  }
+  .sio-order-sm-8 {
+    order: 8;
+  }
+  .sio-order-sm-9 {
+    order: 9;
+  }
+  .sio-order-sm-10 {
+    order: 10;
+  }
+  .sio-order-sm-11 {
+    order: 11;
+  }
+  .sio-order-sm-12 {
+    order: 12;
+  }
+  .sio-offset-sm-0 {
+    margin-left: 0;
+  }
+  .sio-offset-sm-1 {
+    margin-left: 8.3333333333%;
+  }
+  .sio-offset-sm-2 {
+    margin-left: 16.6666666667%;
+  }
+  .sio-offset-sm-3 {
+    margin-left: 25%;
+  }
+  .sio-offset-sm-4 {
+    margin-left: 33.3333333333%;
+  }
+  .sio-offset-sm-5 {
+    margin-left: 41.6666666667%;
+  }
+  .sio-offset-sm-6 {
+    margin-left: 50%;
+  }
+  .sio-offset-sm-7 {
+    margin-left: 58.3333333333%;
+  }
+  .sio-offset-sm-8 {
+    margin-left: 66.6666666667%;
+  }
+  .sio-offset-sm-9 {
+    margin-left: 75%;
+  }
+  .sio-offset-sm-10 {
+    margin-left: 83.3333333333%;
+  }
+  .sio-offset-sm-11 {
+    margin-left: 91.6666666667%;
+  }
+  .sio-d-sm-none {
+    display: none;
+  }
+  .d-sm-block {
+    display: block;
+  }
+}
+@media (min-width: 768px) {
+  .sio-col-md {
+    flex-basis: 0;
+    flex-grow: 1;
+    max-width: 100%;
+  }
+  .sio-col-md-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+  .sio-col-md-1 {
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  .sio-col-md-2 {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  .sio-col-md-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .sio-col-md-4 {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  .sio-col-md-5 {
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  .sio-col-md-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .sio-col-md-7 {
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  .sio-col-md-8 {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  .sio-col-md-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .sio-col-md-10 {
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  .sio-col-md-11 {
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  .sio-col-md-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .sio-order-md-first {
+    order: -1;
+  }
+  .sio-order-md-last {
+    order: 13;
+  }
+  .sio-order-md-0 {
+    order: 0;
+  }
+  .sio-order-md-1 {
+    order: 1;
+  }
+  .sio-order-md-2 {
+    order: 2;
+  }
+  .sio-order-md-3 {
+    order: 3;
+  }
+  .sio-order-md-4 {
+    order: 4;
+  }
+  .sio-order-md-5 {
+    order: 5;
+  }
+  .sio-order-md-6 {
+    order: 6;
+  }
+  .sio-order-md-7 {
+    order: 7;
+  }
+  .sio-order-md-8 {
+    order: 8;
+  }
+  .sio-order-md-9 {
+    order: 9;
+  }
+  .sio-order-md-10 {
+    order: 10;
+  }
+  .sio-order-md-11 {
+    order: 11;
+  }
+  .sio-order-md-12 {
+    order: 12;
+  }
+  .sio-offset-md-0 {
+    margin-left: 0;
+  }
+  .sio-offset-md-1 {
+    margin-left: 8.3333333333%;
+  }
+  .sio-offset-md-2 {
+    margin-left: 16.6666666667%;
+  }
+  .sio-offset-md-3 {
+    margin-left: 25%;
+  }
+  .sio-offset-md-4 {
+    margin-left: 33.3333333333%;
+  }
+  .sio-offset-md-5 {
+    margin-left: 41.6666666667%;
+  }
+  .sio-offset-md-6 {
+    margin-left: 50%;
+  }
+  .sio-offset-md-7 {
+    margin-left: 58.3333333333%;
+  }
+  .sio-offset-md-8 {
+    margin-left: 66.6666666667%;
+  }
+  .sio-offset-md-9 {
+    margin-left: 75%;
+  }
+  .sio-offset-md-10 {
+    margin-left: 83.3333333333%;
+  }
+  .sio-offset-md-11 {
+    margin-left: 91.6666666667%;
+  }
+  .sio-d-md-none {
+    display: none;
+  }
+  .d-md-block {
+    display: block;
+  }
+}
+@media (min-width: 992px) {
+  .sio-col-lg {
+    flex-basis: 0;
+    flex-grow: 1;
+    max-width: 100%;
+  }
+  .sio-col-lg-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+  .sio-col-lg-1 {
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  .sio-col-lg-2 {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  .sio-col-lg-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .sio-col-lg-4 {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  .sio-col-lg-5 {
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  .sio-col-lg-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .sio-col-lg-7 {
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  .sio-col-lg-8 {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  .sio-col-lg-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .sio-col-lg-10 {
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  .sio-col-lg-11 {
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  .sio-col-lg-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .sio-order-lg-first {
+    order: -1;
+  }
+  .sio-order-lg-last {
+    order: 13;
+  }
+  .sio-order-lg-0 {
+    order: 0;
+  }
+  .sio-order-lg-1 {
+    order: 1;
+  }
+  .sio-order-lg-2 {
+    order: 2;
+  }
+  .sio-order-lg-3 {
+    order: 3;
+  }
+  .sio-order-lg-4 {
+    order: 4;
+  }
+  .sio-order-lg-5 {
+    order: 5;
+  }
+  .sio-order-lg-6 {
+    order: 6;
+  }
+  .sio-order-lg-7 {
+    order: 7;
+  }
+  .sio-order-lg-8 {
+    order: 8;
+  }
+  .sio-order-lg-9 {
+    order: 9;
+  }
+  .sio-order-lg-10 {
+    order: 10;
+  }
+  .sio-order-lg-11 {
+    order: 11;
+  }
+  .sio-order-lg-12 {
+    order: 12;
+  }
+  .sio-offset-lg-0 {
+    margin-left: 0;
+  }
+  .sio-offset-lg-1 {
+    margin-left: 8.3333333333%;
+  }
+  .sio-offset-lg-2 {
+    margin-left: 16.6666666667%;
+  }
+  .sio-offset-lg-3 {
+    margin-left: 25%;
+  }
+  .sio-offset-lg-4 {
+    margin-left: 33.3333333333%;
+  }
+  .sio-offset-lg-5 {
+    margin-left: 41.6666666667%;
+  }
+  .sio-offset-lg-6 {
+    margin-left: 50%;
+  }
+  .sio-offset-lg-7 {
+    margin-left: 58.3333333333%;
+  }
+  .sio-offset-lg-8 {
+    margin-left: 66.6666666667%;
+  }
+  .sio-offset-lg-9 {
+    margin-left: 75%;
+  }
+  .sio-offset-lg-10 {
+    margin-left: 83.3333333333%;
+  }
+  .sio-offset-lg-11 {
+    margin-left: 91.6666666667%;
+  }
+  .sio-d-lg-none {
+    display: none;
+  }
+  .d-lg-block {
+    display: block;
+  }
+}
+@media (min-width: 1200px) {
+  .sio-col-xl {
+    flex-basis: 0;
+    flex-grow: 1;
+    max-width: 100%;
+  }
+  .sio-col-xl-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+  .sio-col-xl-1 {
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  .sio-col-xl-2 {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  .sio-col-xl-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .sio-col-xl-4 {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  .sio-col-xl-5 {
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  .sio-col-xl-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .sio-col-xl-7 {
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  .sio-col-xl-8 {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  .sio-col-xl-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .sio-col-xl-10 {
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  .sio-col-xl-11 {
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  .sio-col-xl-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .sio-order-xl-first {
+    order: -1;
+  }
+  .sio-order-xl-last {
+    order: 13;
+  }
+  .sio-order-xl-0 {
+    order: 0;
+  }
+  .sio-order-xl-1 {
+    order: 1;
+  }
+  .sio-order-xl-2 {
+    order: 2;
+  }
+  .sio-order-xl-3 {
+    order: 3;
+  }
+  .sio-order-xl-4 {
+    order: 4;
+  }
+  .sio-order-xl-5 {
+    order: 5;
+  }
+  .sio-order-xl-6 {
+    order: 6;
+  }
+  .sio-order-xl-7 {
+    order: 7;
+  }
+  .sio-order-xl-8 {
+    order: 8;
+  }
+  .sio-order-xl-9 {
+    order: 9;
+  }
+  .sio-order-xl-10 {
+    order: 10;
+  }
+  .sio-order-xl-11 {
+    order: 11;
+  }
+  .sio-order-xl-12 {
+    order: 12;
+  }
+  .sio-offset-xl-0 {
+    margin-left: 0;
+  }
+  .sio-offset-xl-1 {
+    margin-left: 8.3333333333%;
+  }
+  .sio-offset-xl-2 {
+    margin-left: 16.6666666667%;
+  }
+  .sio-offset-xl-3 {
+    margin-left: 25%;
+  }
+  .sio-offset-xl-4 {
+    margin-left: 33.3333333333%;
+  }
+  .sio-offset-xl-5 {
+    margin-left: 41.6666666667%;
+  }
+  .sio-offset-xl-6 {
+    margin-left: 50%;
+  }
+  .sio-offset-xl-7 {
+    margin-left: 58.3333333333%;
+  }
+  .sio-offset-xl-8 {
+    margin-left: 66.6666666667%;
+  }
+  .sio-offset-xl-9 {
+    margin-left: 75%;
+  }
+  .sio-offset-xl-10 {
+    margin-left: 83.3333333333%;
+  }
+  .sio-offset-xl-11 {
+    margin-left: 91.6666666667%;
+  }
+  .sio-d-xl-none {
+    display: none;
+  }
+  .d-xl-block {
+    display: block;
+  }
+}
+:where(.btn--primary) {
+  --sio-btn-bg: var(--sio-btn-primary-bg);
+  --sio-btn-border: var(--sio-btn-primary-border);
+  --sio-btn-text: var(--sio-btn-primary-text);
+  --sio-btn-bg-hover: color-mix(in srgb, var(--sio-btn-bg) 85%, black);
+  --sio-btn-border-hover: color-mix(in srgb, var(--sio-btn-border) 85%, black);
+  --sio-btn-text-hover: var(--sio-btn-text);
+  --sio-btn-bg-disabled: color-mix(in srgb, var(--sio-btn-bg) 40%, white);
+  --sio-btn-border-disabled: color-mix(in srgb, var(--sio-btn-border) 40%, white);
+  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 60%, black);
+}
+
+:where(.btn--secondary) {
+  --sio-btn-bg: var(--sio-btn-secondary-bg);
+  --sio-btn-border: var(--sio-btn-secondary-border);
+  --sio-btn-text: var(--sio-btn-secondary-text);
+  --sio-btn-bg-hover: var(--sio-btn-bg);
+  --sio-btn-border-hover: color-mix(in srgb, var(--sio-btn-border) 85%, black);
+  --sio-btn-text-hover: var(--sio-btn-text);
+  --sio-btn-bg-disabled: var(--sio-btn-bg);
+  --sio-btn-border-disabled: color-mix(in srgb, var(--sio-btn-border) 40%, white);
+  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 40%, white);
+}
+
+:where(.btn--link) {
+  --sio-btn-bg: var(--sio-btn-link-bg);
+  --sio-btn-border: var(--sio-btn-link-border);
+  --sio-btn-text: var(--sio-btn-link-text);
+  --sio-btn-bg-hover: var(--sio-btn-bg);
+  --sio-btn-border-hover: var(--sio-btn-border);
+  --sio-btn-text-hover: color-mix(in srgb, var(--sio-btn-text) 85%, black);
+  --sio-btn-bg-disabled: var(--sio-btn-bg);
+  --sio-btn-border-disabled: var(--sio-btn-border);
+  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 40%, white);
+}
+
+:where(.btn) {
+  background-color: var(--sio-btn-bg);
+  color: var(--sio-btn-text);
+  display: inline-block;
+  font-size: 0.9em;
+  font-weight: 500;
+  user-select: none;
+  text-align: center;
+  border: 1px solid var(--sio-btn-border);
+  padding: 2px 15px;
+  border-radius: 3px;
+  cursor: pointer;
+  min-height: 22px;
+  transition: all 0.3s ease-in;
+  text-decoration: none;
+}
+
+:where(.btn--link) {
+  display: inline;
+  font-weight: unset;
+  user-select: none;
+  text-align: left;
+  padding: 0;
+  border-radius: unset;
+  min-height: unset;
+  transition: all 0.3s ease-in;
+  text-decoration: underline;
+}
+
+:where(.btn:hover),
+:where(.btn:active),
+:where(.btn:focus),
+:where(.btn.btn--active) {
+  background: var(--sio-btn-bg-hover, var(--sio-btn-bg));
+  border-color: var(--sio-btn-border-hover, var(--sio-btn-border));
+  color: var(--sio-btn-text-hover, var(--sio-btn-text));
+}
+
+:where(.btn:disabled),
+:where(.btn.btn--disabled) {
+  cursor: not-allowed;
+  background: var(--sio-btn-bg-disabled, var(--sio-btn-bg));
+  border-color: var(--sio-btn-border-disabled, var(--sio-btn-border));
+  color: var(--sio-btn-text-disabled, var(--sio-btn-text));
+}
+
+:where(.btn--primary.btn--success) {
+  --sio-btn-bg: var(--sio-color-success);
+  --sio-btn-border: var(--sio-color-success);
+  --sio-btn-text: var(--sio-color-white);
+}
+
+:where(.btn--secondary.btn--success) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: var(--sio-color-success);
+  --sio-btn-text: var(--sio-color-success);
+}
+
+:where(.btn--link.btn--success) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: transparent;
+  --sio-btn-text: var(--sio-color-success);
+}
+
+:where(.btn--primary.btn--error) {
+  --sio-btn-bg: var(--sio-color-error);
+  --sio-btn-border: var(--sio-color-error);
+  --sio-btn-text: var(--sio-color-white);
+}
+
+:where(.btn--secondary.btn--error) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: var(--sio-color-error);
+  --sio-btn-text: var(--sio-color-error);
+}
+
+:where(.btn--link.btn--error) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: transparent;
+  --sio-btn-text: var(--sio-color-error);
+}
+
+:where(.btn--primary.btn--warning) {
+  --sio-btn-bg: var(--sio-color-warning);
+  --sio-btn-border: var(--sio-color-warning);
+  --sio-btn-text: var(--sio-color-white);
+}
+
+:where(.btn--secondary.btn--warning) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: var(--sio-color-warning);
+  --sio-btn-text: var(--sio-color-warning);
+}
+
+:where(.btn--link.btn--warning) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: transparent;
+  --sio-btn-text: var(--sio-color-warning);
+}
+
+:where(.btn--primary.btn--info) {
+  --sio-btn-bg: var(--sio-color-info);
+  --sio-btn-border: var(--sio-color-info);
+  --sio-btn-text: var(--sio-color-white);
+}
+
+:where(.btn--secondary.btn--info) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: var(--sio-color-info);
+  --sio-btn-text: var(--sio-color-info);
+}
+
+:where(.btn--link.btn--info) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: transparent;
+  --sio-btn-text: var(--sio-color-info);
+}
+
+:where(.btn--block) {
+  display: block;
+  width: 100%;
+}
+
+:where(.btn--lg) {
+  padding: 5px 20px;
+  font-size: 1.1em;
+  min-height: 34px;
+}
+
+:where(.btn--sm) {
+  padding: 2.5px 5px;
+  font-size: 0.7em;
+  min-height: 23px;
+}
+
+:where(.btn--loading) {
+  position: relative;
+  cursor: wait !important;
+}
+
+:where(.btn__spinner) {
+  display: flex;
+  animation: spin 1s infinite linear;
+  margin-right: 8px;
+  width: 20px;
+  height: 20px;
+}
+
+:where(.btn__spinner svg) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+:where(.btn__spinner circle) {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-dasharray: 30 100;
+  stroke-linecap: round;
+}
+
+:where(.btn__loading-text) {
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+:where(.btn-group) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+:where(.btn--link) {
+  --sio-btn-bg: var(--sio-btn-link-bg);
+  --sio-btn-border: var(--sio-btn-link-border);
+  --sio-btn-text: var(--sio-btn-link-text);
+  --sio-btn-bg-hover: var(--sio-btn-bg);
+  --sio-btn-border-hover: var(--sio-btn-border);
+  --sio-btn-text-hover: color-mix(in srgb, var(--sio-btn-text) 85%, black);
+  --sio-btn-bg-disabled: var(--sio-btn-bg);
+  --sio-btn-border-disabled: var(--sio-btn-border);
+  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 40%, white);
+}
+
+:where(.link) {
+  display: inline;
+  user-select: none;
+  transition: all 0.3s ease-in;
+  text-decoration: underline;
+}
+
+:where(.link:hover),
+:where(.link:active),
+:where(.link:focus),
+:where(.link.link--active) {
+  background: var(--sio-btn-bg-hover, var(--sio-btn-bg));
+  border-color: var(--sio-btn-border-hover, var(--sio-btn-border));
+  color: var(--sio-btn-text-hover, var(--sio-btn-text));
+}
+
+:where(.link:disabled),
+:where(.link.link--disabled) {
+  cursor: not-allowed;
+  background: var(--sio-btn-bg-disabled, var(--sio-btn-bg));
+  border-color: var(--sio-btn-border-disabled, var(--sio-btn-border));
+  color: var(--sio-btn-text-disabled, var(--sio-btn-text));
+}
+
+:where(.link--success) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: transparent;
+  --sio-btn-text: var(--sio-color-success);
+}
+
+:where(.link--error) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: transparent;
+  --sio-btn-text: var(--sio-color-error);
+}
+
+:where(.link--warning) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: transparent;
+  --sio-btn-text: var(--sio-color-warning);
+}
+
+:where(.link--info) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: transparent;
+  --sio-btn-text: var(--sio-color-info);
+}
+
+:where(.link--block) {
+  display: block;
+  width: 100%;
+}
+
+:where(.link--lg) {
+  font-size: 1.1em;
+}
+
+:where(.link--sm) {
+  font-size: 0.7em;
+}
+
+:where(.link--loading) {
+  position: relative;
+  cursor: wait !important;
+}
+
+:where(.form-field__control) {
+  border: 1px solid var(--sio-form-border);
+  background: var(--sio-form-bg);
+  position: relative;
+  font-size: 1em;
+  padding: 0;
+  margin: 2px 0 0;
+  display: flex;
+  justify-content: space-between;
+  border-radius: var(--sio-form-border-radius);
+  transition: color 300ms ease;
+}
+
+:where(.form-field__control input),
+:where(.form-field__control textarea) {
+  display: block;
+  color: var(--sio-color-gray);
+  width: 100%;
+  background: transparent;
+  border: none;
+  padding: var(--sio-form-padding-y) var(--sio-form-padding-x);
+  resize: vertical;
+  transition: color 300ms ease;
+}
+
+:where(.form-field__control input:focus),
+:where(.form-field__control textarea:focus),
+:where(.form-field__control select:focus) {
+  outline: none;
+  box-shadow: none;
+}
+
+:where(.form-field__control input::placeholder),
+:where(.form-field__control textarea::placeholder) {
+  color: var(--sio-color-light-gray);
+  font-weight: 200;
+  font-size: 1em;
+}
+
+:where(.form-field__icon) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  color: var(--sio-color-light-gray);
+  font-size: 1em;
+  margin-top: -1px;
+}
+
+:where(.form-field__action) {
+  color: var(--sio-color-white);
+  background-color: var(--sio-color-primary);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0 3px 3px 0;
+  margin: -1px -1px -1px 0;
+  cursor: pointer;
+}
+
+:where(.form-field__spinner) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--sio-color-light-gray);
+  gap: 1px;
+  margin-right: 1px;
+}
+
+:where(.form-field__spinner .btn) {
+  padding: 0 5px;
+  min-height: unset;
+  font-size: 0.5em;
+  height: 11px;
+}
+
+:where(.form-field__spinner-btn) {
+  padding: 0 0.5rem;
+  font-size: 1.2em;
+  text-decoration: none;
+}
+
+:where(.form-field input)::-webkit-resizer,
+:where(.form-field input)::-webkit-inner-spin-button,
+:where(.form-field input)::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+:where(.form-field input[type=date i]) {
+  font-family: Arial;
+}
+
+:where(.form-field input::-webkit-datetime-edit-text) {
+  color: var(--sio-color-primary);
+}
+
+:where(.form-field input)::-webkit-datetime-edit-day-field,
+:where(.form-field input)::-webkit-datetime-edit-month-field,
+:where(.form-field input)::-webkit-datetime-edit-year-field {
+  color: var(--sio-color-black);
+}
+
+:where(.form-field input)::-webkit-datetime-edit-day-field:focus,
+:where(.form-field input)::-webkit-datetime-edit-month-field:focus,
+:where(.form-field input)::-webkit-datetime-edit-year-field:focus {
+  background-color: color-mix(in srgb, rgb(var(--sio-color-primary)) 60%, white);
+  color: var(--sio-color-black);
+  border-radius: var(--sio-form-border-radius);
+}
+
+:where(.form-field) {
+  position: relative;
+  margin: 5px 0 15px 0;
+}
+
+:where(.form-field label) {
+  color: var(--sio-form-label);
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
+:where(.form-field label span) {
+  color: var(--sio-color-error);
+  font-weight: bold;
+}
+
+:where(.form-field__description) {
+  color: var(--sio-color-gray);
+  font-weight: 200;
+  font-size: 0.9em;
+  margin-left: 10px;
+  white-space: pre-wrap;
+}
+
+:where(.form-field__errors) {
+  list-style: none;
+  padding: 0;
+  margin: 5px 0 0;
+  color: var(--sio-color-error);
+}
+
+:where(.form-field__errors-item) {
+  font-size: 0.9em;
+}
+
+:where(.form-field--has-value .form-field__control) {
+  color: var(--sio-color-black);
+  border-color: var(--sio-color-primary);
+}
+
+:where(.form-field--has-value .form-field__icon) {
+  color: var(--sio-color-primary);
+}
+
+:where(.form-field--focused .form-field__control) {
+  color: var(--sio-color-black);
+  border-color: var(--sio-color-primary);
+  box-shadow: inset 2px 0 10px 0 rgba(var(--sio-color-primary-rgb), 0.3);
+}
+
+:where(.form-field--focused .form-field__icon) {
+  color: var(--sio-color-primary);
+}
+
+:where(.form-field--disabled label) {
+  color: var(--sio-color-gray);
+}
+
+:where(.form-field--disabled .form-field__control) {
+  color: var(--sio-color-light-gray);
+  border-color: var(--sio-color-light-gray);
+  background-color: color-mix(in srgb, var(--sio-color-light-gray) 20%, white);
+}
+
+:where(.form-field--disabled input),
+:where(.form-field--disabled textarea) {
+  color: var(--sio-color-light-gray);
+  cursor: not-allowed;
+}
+
+:where(.form-field--disabled .form-field__icon) {
+  color: var(--sio-color-light-gray);
+}
+
+:where(.form-field--has-errors label) {
+  color: var(--sio-color-error);
+}
+
+:where(.form-field--has-errors .form-field__control) {
+  background-color: color-mix(in srgb, var(--sio-color-error) 15%, white);
+  border-color: var(--sio-color-error);
+}
+
+:where(.form-field--has-errors.form-field--focused .form-field__control) {
+  box-shadow: inset 2px 0 10px 0 rgba(var(--sio-color-error-rgb), 0.3);
+}
+
+:where(.form-field--has-errors input[type=range])::-webkit-slider-runnable-track {
+  background: var(--sio-color-error);
+}
+
+:where(.form-field--has-errors .form-field__icon) {
+  color: var(--sio-color-error) !important;
+}
+
+:where(.form-field--hidden-layout .form-field__control) {
+  display: block;
+  width: 100%;
+  background: transparent;
+  border: none;
+  padding: 0;
+  box-shadow: unset;
+}
+
+:where(.form-field--hidden-layout input),
+:where(.form-field--hidden-layout textarea) {
+  color: unset;
+  width: unset;
+  padding: 0;
+  resize: unset;
+  display: unset;
+  border: unset;
+}
+
+:where(.form-field__checkbox label) {
+  position: relative;
+  padding-left: 32px;
+}
+
+:where(.form-field__checkbox label > div) {
+  display: inline;
+  color: var(--sio-color-black);
+  font-weight: normal;
+}
+
+:where(.form-field__checkbox label):before {
+  content: "";
+  background-color: var(--sio-form-bg);
+  position: absolute;
+  border-radius: var(--sio-form-border-radius);
+  cursor: pointer;
+  border: 1px solid var(--sio-form-border);
+  width: 17px;
+  height: 17px;
+  left: 0;
+  top: -1px;
+}
+
+:where(.form-field__checkbox label):after {
+  content: "";
+  position: absolute;
+  background-color: var(--sio-color-primary);
+  width: 13px;
+  height: 13px;
+  top: 2px;
+  left: 3px;
+  transform: scale(0);
+  border-radius: var(--sio-form-border-radius);
+  cursor: pointer;
+  transition: all 0.4s;
+}
+
+:where(.form-field__checkbox input[type=checkbox]) {
+  display: none !important;
+}
+
+:where(.form-field__checkbox.form-field--has-value label):before {
+  border-color: var(--sio-color-primary);
+}
+
+:where(.form-field__checkbox.form-field--has-value label):after {
+  transform: scale(1);
+}
+
+:where(.form-field__checkbox.form-field--has-errors label):before {
+  border-color: var(--sio-color-error);
+  background: rgba(var(--sio-color-error-rgb), 0.06);
+}
+
+:where(.form-field__checkbox.form-field--has-errors.form-field--has-value label):after {
+  border-color: var(--sio-color-error);
+  background: var(--sio-color-error);
+}
+
+:where(.form-field__checkbox.form-field--disabled label) {
+  cursor: not-allowed;
+}
+
+:where(.form-field__checkbox.form-field--disabled label):before,
+:where(.form-field__checkbox.form-field--disabled label):after {
+  cursor: not-allowed;
+}
+
+:where(.form-field__checkbox.form-field--disabled label):before {
+  border-color: var(--sio-color-light-gray);
+  background-color: color-mix(in srgb, var(--sio-color-light-gray) 75%, white);
+}
+
+:where(.form-field__checkbox.form-field--disabled label):after {
+  border-color: color-mix(in srgb, var(--sio-color-light-gray) 75%, black);
+  background-color: color-mix(in srgb, var(--sio-color-light-gray) 75%, black);
+  transform: scale(0);
+  transition: all 0.4s;
+}
+
+:where(.form-field__checkbox.form-field--disabled.form-field--has-value label):before {
+  border-color: var(--sio-color-light-gray);
+}
+
+:where(.form-field__checkbox.form-field--disabled.form-field--has-value label):after {
+  transform: scale(1);
+}
+
+:where(.form-field__radio .form-field__control) {
+  display: flex !important;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+:where(.form-field__radio .form-field__control label) {
+  position: relative;
+  padding-left: 32px;
+}
+
+:where(.form-field__radio .form-field__control label > div) {
+  display: inline;
+  color: var(--sio-color-black);
+  font-weight: normal;
+}
+
+:where(.form-field__radio .form-field__control label):before {
+  content: "";
+  position: absolute;
+  border: 1px solid var(--sio-form-border);
+  background-color: var(--sio-form-bg);
+  border-radius: 50%;
+  cursor: pointer;
+  width: 17px;
+  height: 17px;
+  top: -1px;
+  left: 0;
+}
+
+:where(.form-field__radio .form-field__control label):after {
+  content: "";
+  background-color: var(--sio-color-primary);
+  position: absolute;
+  border-radius: 50%;
+  cursor: pointer;
+  width: 13px;
+  height: 13px;
+  top: 2px;
+  left: 3px;
+  transform: scale(0);
+  transition: all 0.4s;
+}
+
+:where(.form-field__radio input[type=radio]) {
+  display: none !important;
+}
+
+:where(.form-field__radio label.form-field--has-value):before {
+  border-color: var(--sio-color-primary);
+}
+
+:where(.form-field__radio label.form-field--has-value):after {
+  transform: scale(1);
+}
+
+:where(.form-field__radio-inline .form-field__control) {
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+:where(.form-field__radio.form-field--has-errors label):before {
+  border-color: var(--sio-color-error);
+  background: rgba(var(--sio-color-error-rgb), 0.06);
+}
+
+:where(.form-field__radio.form-field--has-errors label.form-field--has-value):after {
+  border-color: var(--sio-color-error);
+  background: var(--sio-color-error);
+}
+
+:where(.form-field__radio.form-field--disabled .form-field__control label) {
+  cursor: not-allowed;
+}
+
+:where(.form-field__radio.form-field--disabled .form-field__control label):before,
+:where(.form-field__radio.form-field--disabled .form-field__control label):after {
+  cursor: not-allowed;
+}
+
+:where(.form-field__radio.form-field--disabled .form-field__control label):before {
+  border-color: var(--sio-color-light-gray);
+  background-color: color-mix(in srgb, var(--sio-color-light-gray) 75%, white);
+}
+
+:where(.form-field__radio.form-field--disabled .form-field__control label):after {
+  border-color: color-mix(in srgb, var(--sio-color-light-gray) 75%, black);
+  background-color: color-mix(in srgb, var(--sio-color-light-gray) 75%, black);
+  transform: scale(0);
+  transition: all 0.4s;
+}
+
+:where(.form-field__radio.form-field--disabled .form-field__control label.form-field--has-value):before {
+  border-color: var(--sio-color-light-gray);
+}
+
+:where(.form-field__radio.form-field--disabled .form-field__control label.form-field--has-value):after {
+  transform: scale(1);
+}
+
+:where(.form-field__select select) {
+  display: block;
+  width: 100%;
+  background: transparent;
+  border: none;
+  color: var(--var-color-gray);
+  font-size: 1em;
+  appearance: none;
+  cursor: pointer;
+}
+
+:where(.form-field__select-single .form-field__control) {
+  position: relative;
+}
+
+:where(.form-field__select-single .form-field__control):after {
+  content: "";
+  position: absolute;
+  right: 10px;
+  top: 11px;
+  width: 6px;
+  height: 6px;
+  border-right: 2px solid var(--sio-color-light-gray);
+  border-bottom: 2px solid var(--sio-color-light-gray);
+  transform: translateY(-50%) rotate(45deg);
+  pointer-events: none;
+}
+
+:where(.form-field__select-single select) {
+  padding: 5px 28px 5px 10px;
+}
+
+:where(.form-field__select-multiple select) {
+  padding: 5px 10px;
+}
+
+:where(.form-field__upload-file) {
+  display: flex;
+  justify-content: space-between;
+  margin: 10px 0;
+}
+
+:where(.form-field input[type=file i]) {
+  color: transparent;
+}
+
+:where(.form-field input)::file-selector-button {
+  padding: 0;
+  margin: 0;
+  border: none;
+  background-color: transparent;
+  color: var(--sio-color-light-gray);
+  font-weight: 200;
+  font-size: 1em;
+}
+
+:where(.form-field__upload-file-label) {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--sio-color-black);
+}
+
+:where(.form-field__upload-file-section button) {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+  padding: 3px 5px;
+  border-radius: 3px;
+}
+
+:where(.form-field__upload-file-remove-button) {
+  background: transparent;
+  color: var(--sio-color-error);
+}
+
+:where(.form-field__upload-buttons) {
+  display: flex;
+  justify-content: flex-end;
+  gap: 5px;
+}
+
+:where(.form-field__upload-remove-all-button) {
+  gap: 5px;
+  background: transparent;
+  color: var(--sio-color-error);
+}
+
+:where(.form-field__range .form-field__control) {
+  background: transparent !important;
+  border: none;
+  padding: 0;
+  box-shadow: none !important;
+  gap: 15px;
+}
+
+:where(.form-field__range-value) {
+  color: var(--sio-color-gray);
+  align-content: center;
+  min-width: 25px;
+}
+
+:where(.form-field input[type=range]) {
+  appearance: none;
+  width: 100%;
+  cursor: pointer;
+  outline: none;
+  padding: 12px 0 15px;
+  margin: 0;
+  height: 6px;
+  background: transparent;
+}
+
+:where(.form-field input[type=range])::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 5px;
+  cursor: pointer;
+  background: var(--sio-color-light-gray);
+  border-radius: 2px;
+}
+
+:where(.form-field input[type=range])::-webkit-slider-thumb {
+  appearance: none;
+  margin-top: -5.5px;
+  height: 14px;
+  width: 14px;
+  background-color: var(--sio-color-primary);
+  border-radius: 50%;
+  border: none;
+  transition: 0.2s ease-in-out;
+}
+
+:where(.form-field input[type=range])::-webkit-slider-thumb:hover {
+  box-shadow: 0 0 0 10px rgba(var(--sio-color-primary-rgb), 0.1);
+}
+
+:where(.form-field input[type=range]):active::-webkit-slider-thumb,
+:where(.form-field input[type=range]):focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 13px rgba(var(--sio-color-primary-rgb), 0.2);
+}
+
+:where(.form-field__color .form-field__control) {
+  max-width: 50px;
+}
+
+:where(.form-field__color input) {
+  padding: 0;
+  border-radius: var(--sio-form-border-radius);
+}
+
+:where(.form-field__color input[type=color i]) {
+  inline-size: 50px;
+  block-size: 25.5px;
+  padding: 0;
+  border: none;
+}
+
+:where(.form-field__color input[type=color])::-webkit-color-swatch-wrapper {
+  padding-block-end: 3px;
+  padding-block-start: 3px;
+  padding-inline-start: 3px;
+  padding-inline-end: 3px;
+  padding: 3px;
+  border: none;
+}
+
+:where(.form-field__color input[type=color])::-webkit-color-swatch {
+  border: none;
+  border-radius: 2px;
+}
+
+/*# sourceMappingURL=index.css.map */