@codeandfunction/callaloo 3.16.4 → 3.16.5

package/dist/components/Containers/CLCard/CLCard.js

@@ -1,6 +1,6 @@
 import '../../../assets/core.css';
 import './CLCard.css';
-import { _ as r } from "../../../chunks/CLCard.vue_vue_type_style_index_0_lang-Ba1c7ZNn.js";
+import { _ as r } from "../../../chunks/CLCard.vue_vue_type_style_index_0_lang-Bj9WF_mX.js";
 export {
   r as CLCard,
   r as default

package/dist/components/Containers/CLCarousel/CLCarousel.js

@@ -1,8 +1,8 @@
 import '../../../assets/core.css';
 import './CLCarousel.css';
 import { defineComponent as re, computed as u, createElementBlock as c, openBlock as s, Fragment as F, createCommentVNode as C, unref as e, normalizeClass as l, renderList as me, createBlock as he, createElementVNode as y, createVNode as x, withCtx as X, createTextVNode as Y, toDisplayString as q, useCssVars as be, ref as r, onMounted as we, onUnmounted as pe, watch as Ce, renderSlot as Z, nextTick as se } from "vue";
-import { _ as E } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang--MP4S4D4.js";
-import { _ as ce } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-CG6043pv.js";
+import { _ as E } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang-B4xTt-xw.js";
+import { _ as ce } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-BJoS9z9q.js";
 import { CLPaginationType as $, CLColorVariants as B, CLSizes as W, CLIconSizes as D, CLIconNames as O, CLTextTypes as xe, CLAlign as A, CLOrder as R, CLColors as ye } from "../../../index.js";
 import { i as H, c as Pe, d as $e } from "../../../chunks/helper--hRjZVm6.js";
 import { useHasSlotContent as Te } from "../../../composables/useHasSlotContent.js";

package/dist/components/Containers/CLDisclosure/CLDisclosure.css

@@ -1 +1 @@
-.clll-disclosure .clll-disclosure__trigger .clll-button{display:block}.clll-disclosure.clll-disclosure--tiny .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-disclosure.clll-disclosure--small .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2_5)}.clll-disclosure.clll-disclosure--medium .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3)}.clll-disclosure.clll-disclosure--large .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3_5)}.clll-disclosure.clll-disclosure--xlarge .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-4_5)}.clll-disclosure.clll-disclosure--padded .clll-disclosure__content.clll-disclosure__content--tiny{padding:var(--clll-py-sm) var(--clll-unit-2)}.clll-disclosure.clll-disclosure--padded .clll-disclosure__content.clll-disclosure__content--small{padding:var(--clll-py-md) var(--clll-unit-2_5)}.clll-disclosure.clll-disclosure--padded .clll-disclosure__content.clll-disclosure__content--medium{padding:var(--clll-py-lg) var(--clll-unit-3)}.clll-disclosure.clll-disclosure--padded .clll-disclosure__content.clll-disclosure__content--large{padding:var(--clll-py-xl) var(--clll-unit-3_5)}.clll-disclosure.clll-disclosure--padded .clll-disclosure__content.clll-disclosure__content--xlarge{padding:var(--clll-py-2xl) var(--clll-unit-4_5)}.clll-disclosure.clll-disclosure--expanded .clll-disclosure__trigger .clll-button.clll-button--rounded{border-bottom-left-radius:0;border-bottom-right-radius:0}.clll-disclosure.clll-disclosure--expanded .clll-disclosure__content{display:block}.clll-disclosure.clll-disclosure--collapsed .clll-disclosure__content{display:none}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-full,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-lg,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-md,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-sm,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-xs,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-xl,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-2xl,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-3xl,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-none,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-none .clll-{border-radius:0}.clll-disclosure.clll-disclosure--compact .clll-disclosure__trigger{padding:0}.clll-disclosure.clll-disclosure--compact .clll-disclosure__trigger .clll-button,.clll-disclosure.clll-disclosure--compact .clll-disclosure__content,.clll-disclosure.clll-disclosure--compact .clll-disclosure__content.clll-disclosure__content--tiny,.clll-disclosure.clll-disclosure--compact .clll-disclosure__content.clll-disclosure__content--small,.clll-disclosure.clll-disclosure--compact .clll-disclosure__content.clll-disclosure__content--medium,.clll-disclosure.clll-disclosure--compact .clll-disclosure__content.clll-disclosure__content--large,.clll-disclosure.clll-disclosure--compact .clll-disclosure__content.clll-disclosure__content--xlarge{padding:var(--clll-unit-1) 0}.clll-disclosure:not(.clll-disclosure--bordered){border:0}.clll-disclosure:not(.clll-disclosure--bordered) .clll-disclosure__trigger .clll-button{border:0}.clll-disclosure:not(.clll-disclosure--bordered) .clll-disclosure__content{border:0}.clll-disclosure .clll-disclosure__heading{display:flex;flex-direction:row;align-items:center}.clll-disclosure .clll-disclosure__heading .clll-heading{flex:1}.clll-disclosure:not(.clll-disclosure--hasheading) .clll-disclosure__text-subheading{flex:1 1 0%}
+.clll-disclosure{border-color:var(--clll-disclosure-border-color, transparent);border-style:solid;border-width:1px}.clll-disclosure .clll-disclosure__trigger .clll-button{display:block;border:0}.clll-disclosure .clll-disclosure__heading .clll-heading,.clll-disclosure .clll-disclosure__heading .clll-text{color:var(--clll-disclosure-text-color, inherit)}.clll-disclosure .clll-disclosure__content{border-top-width:1px;border-top-style:solid;border-top-color:var(--clll-disclosure-content-border, transparent)}.clll-disclosure.clll-disclosure--tiny .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-disclosure.clll-disclosure--small .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2_5)}.clll-disclosure.clll-disclosure--medium .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3)}.clll-disclosure.clll-disclosure--large .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3_5)}.clll-disclosure.clll-disclosure--xlarge .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-4_5)}.clll-disclosure.clll-disclosure--padded .clll-disclosure__content.clll-disclosure__content--tiny{padding:var(--clll-py-sm) var(--clll-unit-2)}.clll-disclosure.clll-disclosure--padded .clll-disclosure__content.clll-disclosure__content--small{padding:var(--clll-py-md) var(--clll-unit-2_5)}.clll-disclosure.clll-disclosure--padded .clll-disclosure__content.clll-disclosure__content--medium{padding:var(--clll-py-lg) var(--clll-unit-3)}.clll-disclosure.clll-disclosure--padded .clll-disclosure__content.clll-disclosure__content--large{padding:var(--clll-py-xl) var(--clll-unit-3_5)}.clll-disclosure.clll-disclosure--padded .clll-disclosure__content.clll-disclosure__content--xlarge{padding:var(--clll-py-2xl) var(--clll-unit-4_5)}.clll-disclosure.clll-disclosure--expanded .clll-disclosure__trigger .clll-button.clll-button--rounded{border-bottom-left-radius:0;border-bottom-right-radius:0}.clll-disclosure.clll-disclosure--expanded .clll-disclosure__content{display:block}.clll-disclosure.clll-disclosure--collapsed .clll-disclosure__content{display:none}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-full,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-lg,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-md,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-sm,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-xs,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-xl,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-2xl,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-3xl,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-none,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-none .clll-{border-radius:0}.clll-disclosure.clll-disclosure--rounded:not([class*=clll-disclosure--rounded-]){border-radius:var(--clll-disclosure-theme-radius, var(--clll-rounded-sm))}.clll-disclosure.clll-disclosure--rounded:not([class*=clll-disclosure--rounded-]) .clll-disclosure__trigger .clll-button.clll-button--rounded{border-radius:var(--clll-disclosure-theme-radius, var(--clll-rounded-sm))}.clll-disclosure.clll-disclosure--compact .clll-disclosure__trigger{padding:0}.clll-disclosure.clll-disclosure--compact .clll-disclosure__trigger .clll-button,.clll-disclosure.clll-disclosure--compact .clll-disclosure__content,.clll-disclosure.clll-disclosure--compact .clll-disclosure__content.clll-disclosure__content--tiny,.clll-disclosure.clll-disclosure--compact .clll-disclosure__content.clll-disclosure__content--small,.clll-disclosure.clll-disclosure--compact .clll-disclosure__content.clll-disclosure__content--medium,.clll-disclosure.clll-disclosure--compact .clll-disclosure__content.clll-disclosure__content--large,.clll-disclosure.clll-disclosure--compact .clll-disclosure__content.clll-disclosure__content--xlarge{padding:var(--clll-unit-1) 0}.clll-disclosure:not(.clll-disclosure--bordered){border:0}.clll-disclosure:not(.clll-disclosure--bordered) .clll-disclosure__trigger .clll-button{border:0}.clll-disclosure:not(.clll-disclosure--bordered) .clll-disclosure__content{border:0}.clll-disclosure .clll-disclosure__heading{display:flex;flex-direction:row;align-items:center}.clll-disclosure .clll-disclosure__heading .clll-heading{flex:1}.clll-disclosure:not(.clll-disclosure--hasheading) .clll-disclosure__text-subheading{flex:1 1 0%}

package/dist/components/Containers/CLDisclosure/CLDisclosure.js

@@ -1,20 +1,20 @@
 import '../../../assets/core.css';
 import './CLDisclosure.css';
-import { defineComponent as S, ref as g, computed as $, onBeforeUnmount as L, createElementBlock as I, openBlock as i, normalizeClass as o, unref as d, createElementVNode as c, createVNode as T, withCtx as u, createBlock as l, createCommentVNode as s, createTextVNode as b, toDisplayString as y, renderSlot as H } from "vue";
-import { _ as k } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang--MP4S4D4.js";
-import { _ as E } from "../../../chunks/CLHeading.vue_vue_type_style_index_0_lang-BO5OiCE-.js";
-import { _ as h } from "../../../chunks/CLIcon.vue_vue_type_style_index_0_lang-B_341q_b.js";
-import { _ as N } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-CG6043pv.js";
-import { CLColorVariants as R, CLSizes as w, CLTextTypes as A, CLIconSizes as D, CLIconNames as C, CLHeadingTypes as V, CLColors as p, CLBorderRadius as M, CLButtonTypes as U } from "../../../index.js";
-import { d as F } from "../../../chunks/utils-B_htczw5.js";
-import { useEsc as j } from "../../../composables/useEsc.js";
-const q = ["data-testid"], G = ["id", "aria-labelledby", "aria-hidden"], _ = /* @__PURE__ */ S({
+import { defineComponent as x, ref as g, computed as $, onBeforeUnmount as L, createElementBlock as I, openBlock as i, normalizeStyle as T, normalizeClass as o, unref as d, createElementVNode as c, createVNode as H, withCtx as u, createBlock as l, createCommentVNode as s, createTextVNode as y, toDisplayString as b, renderSlot as k } from "vue";
+import { _ as E } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang-B4xTt-xw.js";
+import { _ as N } from "../../../chunks/CLHeading.vue_vue_type_style_index_0_lang-nUnSpm32.js";
+import { _ as h } from "../../../chunks/CLIcon.vue_vue_type_style_index_0_lang--1FTkRVd.js";
+import { _ as R } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-BJoS9z9q.js";
+import { CLColorVariants as w, CLSizes as A, CLTextTypes as D, CLIconSizes as V, CLIconNames as C, CLHeadingTypes as p, CLColors as M, CLBorderRadius as U, CLButtonTypes as F } from "../../../index.js";
+import { d as j } from "../../../chunks/utils-zJwcNHl4.js";
+import { useEsc as q } from "../../../composables/useEsc.js";
+const G = ["data-testid"], J = ["id", "aria-labelledby", "aria-hidden"], ee = /* @__PURE__ */ x({
   name: "CLDisclosure",
   __name: "CLDisclosure",
   props: {
     bordered: { type: Boolean, default: !0 },
-    borderRadius: { default: M.Medium },
-    color: { default: p.Neutral },
+    borderRadius: { default: U.Medium },
+    color: { default: M.Neutral },
     compact: { type: Boolean, default: !1 },
     contentSpacing: { type: Boolean, default: !0 },
     disclosureId: {},
@@ -22,17 +22,17 @@ const q = ["data-testid"], G = ["id", "aria-labelledby", "aria-hidden"], _ = /*
     expandedIcon: { default: C.ChevronUp },
     heading: {},
     headingLevel: {},
-    headingType: { default: V.Section },
+    headingType: { default: p.Section },
     iconAfter: { default: C.ChevronDown },
-    iconAfterSize: { default: D.Medium },
+    iconAfterSize: { default: V.Medium },
     iconBefore: {},
     iconBeforeSize: {},
     rounded: { type: Boolean, default: !0 },
     subHeading: {},
-    subHeadingType: { default: A.Body },
+    subHeadingType: { default: D.Body },
     testId: { default: "clll-disclosure" },
-    triggerButtonSize: { default: w.Medium },
-    variant: { default: R.Soft }
+    triggerButtonSize: { default: A.Medium },
+    variant: { default: w.Soft }
   },
   setup(e) {
     const a = "clll-disclosure", t = e;
@@ -56,17 +56,18 @@ const q = ["data-testid"], G = ["id", "aria-labelledby", "aria-hidden"], _ = /*
       r && (f.value = r);
     }, m = () => {
       n.value ? n.value = !1 : n.value = !0;
-    }, { clearEventListeners: x } = j({ escHandler: m, triggerElem: f });
+    }, { clearEventListeners: S } = q({ escHandler: m, triggerElem: f });
     return L(() => {
-      x();
-    }), (r, J) => (i(), I("div", {
-      class: o([d(v), d(F)({ color: e.color, variant: e.variant })]),
+      S();
+    }), (r, K) => (i(), I("div", {
+      class: o(d(v)),
+      style: T(d(j)({ color: e.color, variant: e.variant })),
       "data-testid": e.testId
     }, [
       c("div", {
         class: o(`${a}__trigger`)
       }, [
-        T(d(k), {
+        H(d(E), {
           id: `${a}__button--${e.disclosureId}`,
           "aria-controls": `${a}--${e.disclosureId}`,
           "aria-expanded": d(n),
@@ -75,7 +76,7 @@ const q = ["data-testid"], G = ["id", "aria-labelledby", "aria-hidden"], _ = /*
           "forward-ref": z,
           "on-click": m,
           size: e.triggerButtonSize,
-          type: d(U).Button,
+          type: d(F).Button,
           rounded: e.rounded,
           width: "100%",
           variant: e.variant
@@ -89,25 +90,25 @@ const q = ["data-testid"], G = ["id", "aria-labelledby", "aria-hidden"], _ = /*
                 name: e.iconBefore,
                 size: e.iconBeforeSize
               }, null, 8, ["name", "size"])) : s("", !0),
-              e.heading ? (i(), l(d(E), {
+              e.heading ? (i(), l(d(N), {
                 key: 1,
                 class: o(`${a}__text-heading`),
                 type: e.headingType,
                 level: e.headingLevel
               }, {
                 default: u(() => [
-                  b(y(e.heading), 1)
+                  y(b(e.heading), 1)
                 ]),
                 _: 1
               }, 8, ["class", "type", "level"])) : s("", !0),
-              e.subHeading ? (i(), l(d(N), {
+              e.subHeading ? (i(), l(d(R), {
                 key: 2,
                 class: o(`${a}__text-subheading`),
                 type: e.subHeadingType,
                 truncate: ""
               }, {
                 default: u(() => [
-                  b(y(e.subHeading), 1)
+                  y(b(e.subHeading), 1)
                 ]),
                 _: 1
               }, 8, ["class", "type"])) : s("", !0),
@@ -127,12 +128,12 @@ const q = ["data-testid"], G = ["id", "aria-labelledby", "aria-hidden"], _ = /*
         "aria-hidden": !d(n),
         class: o(d(B))
       }, [
-        H(r.$slots, "default")
-      ], 10, G)
-    ], 10, q));
+        k(r.$slots, "default")
+      ], 10, J)
+    ], 14, G));
   }
 });
 export {
-  _ as CLDisclosure,
-  _ as default
+  ee as CLDisclosure,
+  ee as default
 };

package/dist/components/Containers/utils.d.ts

@@ -3,6 +3,19 @@ interface ThemeProps {
     color: CLColors;
     variant: CLColorVariants;
 }
-export declare const cardTheme: ({ color, variant }: ThemeProps) => string;
-export declare const disclosureTheme: ({ color, variant }: ThemeProps) => string;
+export declare const cardTheme: ({ color, variant }: ThemeProps) => {
+    '--clll-card-border-color': string;
+    '--clll-card-bg-color': string;
+    '--clll-card-image-bg': string;
+    '--clll-card-text-color': string;
+    '--clll-card-focus-border': string;
+    '--clll-card-focus-shadow': string;
+    '--clll-card-theme-radius': string | undefined;
+};
+export declare const disclosureTheme: ({ color, variant }: ThemeProps) => {
+    '--clll-disclosure-border-color': string;
+    '--clll-disclosure-text-color': string;
+    '--clll-disclosure-content-border': string;
+    '--clll-disclosure-theme-radius': string | undefined;
+};
 export {};

package/dist/components/Form/CLCheckbox/CLCheckbox.css

@@ -1 +1 @@
-.clll-checkbox{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;align-items:flex-start;flex-direction:column;overflow:visible}.clll-checkbox .clll-checkbox__label{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;overflow:visible;text-align:left;user-select:none;cursor:pointer}.clll-checkbox .clll-checkbox__label.clll-checkbox--haslabel>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-checkbox .clll-checkbox__checkbox-container{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;overflow:visible}.clll-checkbox .clll-checkbox__checkbox-container .clll-checkbox__checkbox-frame .clll-checkbox__checkbox:not(:checked)+.clll-checkbox__icon{display:none}.clll-checkbox .clll-checkbox__icon{position:absolute;display:inline-flex}.clll-checkbox .clll-checkbox__checkbox{display:inline-block;appearance:none;cursor:pointer}.clll-checkbox.clll-checkbox--rounded .clll-checkbox__checkbox{border-radius:var(--clll-rounded-xs)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-full .clll-checkbox__checkbox{border-radius:var(--clll-rounded-full)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-lg .clll-checkbox__checkbox{border-radius:var(--clll-rounded-lg)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-md .clll-checkbox__checkbox{border-radius:var(--clll-rounded-md)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-sm .clll-checkbox__checkbox{border-radius:var(--clll-rounded-sm)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-xs .clll-checkbox__checkbox{border-radius:var(--clll-rounded-xs)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-xl .clll-checkbox__checkbox{border-radius:var(--clll-rounded-xl)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-2xl .clll-checkbox__checkbox{border-radius:var(--clll-rounded-2xl)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-3xl .clll-checkbox__checkbox{border-radius:var(--clll-rounded-3xl)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-none .clll-checkbox__checkbox{border-radius:0}.clll-checkbox.clll-checkbox--tiny .clll-checkbox__checkbox-container .clll-checkbox__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-1_5)}.clll-checkbox.clll-checkbox--tiny .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox,.clll-checkbox.clll-checkbox--tiny .clll-checkbox__checkbox-container .clll-checkbox__label .clll-radiobutton__radiobutton{width:var(--clll-unit-4);height:var(--clll-unit-4)}.clll-checkbox.clll-checkbox--small .clll-checkbox__checkbox-container .clll-checkbox__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-checkbox.clll-checkbox--small .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox,.clll-checkbox.clll-checkbox--small .clll-checkbox__checkbox-container .clll-checkbox__label .clll-radiobutton__radiobutton{width:var(--clll-unit-5);height:var(--clll-unit-5)}.clll-checkbox.clll-checkbox--medium .clll-checkbox__checkbox-container .clll-checkbox__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2_5)}.clll-checkbox.clll-checkbox--medium .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox,.clll-checkbox.clll-checkbox--medium .clll-checkbox__checkbox-container .clll-checkbox__label .clll-radiobutton__radiobutton{width:var(--clll-unit-6);height:var(--clll-unit-6)}.clll-checkbox.clll-checkbox--large .clll-checkbox__checkbox-container .clll-checkbox__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3)}.clll-checkbox.clll-checkbox--large .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox,.clll-checkbox.clll-checkbox--large .clll-checkbox__checkbox-container .clll-checkbox__label .clll-radiobutton__radiobutton{width:var(--clll-unit-7);height:var(--clll-unit-7)}.clll-checkbox.clll-checkbox--xlarge .clll-checkbox__checkbox-container .clll-checkbox__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3)}.clll-checkbox.clll-checkbox--xlarge .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox,.clll-checkbox.clll-checkbox--xlarge .clll-checkbox__checkbox-container .clll-checkbox__label .clll-radiobutton__radiobutton{width:var(--clll-unit-8);height:var(--clll-unit-8)}
+.clll-checkbox{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;align-items:flex-start;flex-direction:column;overflow:visible}.clll-checkbox.clll-checkbox--haslabel .clll-checkbox__label .clll-text.clll-checkbox__label--required:after{position:relative;top:var(--clll-unit-1);content:"*";font-size:var(--clll-unit-4_5);font-weight:500;font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased;color:var(--clll-checkbox-required-asterisk-color, red);text-decoration:unset;margin-inline-start:var(--clll-unit-0_5);box-sizing:content-box;line-height:0}.clll-checkbox .clll-checkbox__label{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;overflow:visible;text-align:left;user-select:none;cursor:pointer}.clll-checkbox .clll-checkbox__label.clll-checkbox--haslabel>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-checkbox .clll-checkbox__checkbox-container{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;overflow:visible}.clll-checkbox .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox-frame .clll-checkbox__checkbox:not(:checked)+.clll-checkbox__icon{display:none}.clll-checkbox .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox-frame .clll-checkbox__checkbox:focus-visible{outline-color:var(--clll-checkbox-focus-border, transparent);outline-style:solid;outline-width:var(--clll-checkbox-outline-width, 2px);box-shadow:0 0 0 var(--clll-unit-0) var(--clll-checkbox-focus-shadow, transparent);outline-offset:-1px}.clll-checkbox .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox-frame .clll-checkbox__checkbox:checked{background-color:var(--clll-checkbox-checked-bg, white)}.clll-checkbox .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox-frame .clll-checkbox__checkbox:disabled:checked{background-color:var(--clll-checkbox-disabled-bg, transparent)}.clll-checkbox .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox-frame .clll-checkbox__checkbox:disabled:focus-visible{outline-color:var(--clll-checkbox-disabled-border, transparent);outline-style:solid;outline-width:var(--clll-checkbox-outline-width, 2px);box-shadow:0 0 0 var(--clll-unit-0) var(--clll-checkbox-focus-shadow, transparent);outline-offset:-1px}.clll-checkbox .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox-frame .clll-checkbox__icon{color:var(--clll-checkbox-icon-color, inherit)}.clll-checkbox .clll-checkbox__icon{position:absolute;display:inline-flex}.clll-checkbox .clll-checkbox__checkbox{display:inline-block;appearance:none;cursor:pointer;background-color:var(--clll-checkbox-bg, white);border-color:var(--clll-checkbox-border, transparent);border-style:solid;border-width:1px}.clll-checkbox.clll-checkbox--disabled .clll-checkbox__checkbox-container .clll-checkbox__label{cursor:not-allowed}.clll-checkbox.clll-checkbox--disabled .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox-frame .clll-checkbox__icon{color:var(--clll-checkbox-disabled-icon-color, transparent)}.clll-checkbox.clll-checkbox--rounded .clll-checkbox__checkbox{border-radius:var(--clll-rounded-xs)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-full .clll-checkbox__checkbox{border-radius:var(--clll-rounded-full)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-lg .clll-checkbox__checkbox{border-radius:var(--clll-rounded-lg)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-md .clll-checkbox__checkbox{border-radius:var(--clll-rounded-md)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-sm .clll-checkbox__checkbox{border-radius:var(--clll-rounded-sm)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-xs .clll-checkbox__checkbox{border-radius:var(--clll-rounded-xs)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-xl .clll-checkbox__checkbox{border-radius:var(--clll-rounded-xl)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-2xl .clll-checkbox__checkbox{border-radius:var(--clll-rounded-2xl)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-3xl .clll-checkbox__checkbox{border-radius:var(--clll-rounded-3xl)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-none .clll-checkbox__checkbox{border-radius:0}.clll-checkbox.clll-checkbox--rounded:not([class*=clll-checkbox--rounded-]).clll-checkbox--rounded .clll-checkbox__checkbox{border-radius:var(--clll-checkbox-theme-radius, var(--clll-rounded-xs))}.clll-checkbox.clll-checkbox--tiny .clll-checkbox__checkbox-container .clll-checkbox__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-1_5)}.clll-checkbox.clll-checkbox--tiny .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox,.clll-checkbox.clll-checkbox--tiny .clll-checkbox__checkbox-container .clll-checkbox__label .clll-radiobutton__radiobutton{width:var(--clll-unit-4);height:var(--clll-unit-4)}.clll-checkbox.clll-checkbox--small .clll-checkbox__checkbox-container .clll-checkbox__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-checkbox.clll-checkbox--small .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox,.clll-checkbox.clll-checkbox--small .clll-checkbox__checkbox-container .clll-checkbox__label .clll-radiobutton__radiobutton{width:var(--clll-unit-5);height:var(--clll-unit-5)}.clll-checkbox.clll-checkbox--medium .clll-checkbox__checkbox-container .clll-checkbox__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2_5)}.clll-checkbox.clll-checkbox--medium .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox,.clll-checkbox.clll-checkbox--medium .clll-checkbox__checkbox-container .clll-checkbox__label .clll-radiobutton__radiobutton{width:var(--clll-unit-6);height:var(--clll-unit-6)}.clll-checkbox.clll-checkbox--large .clll-checkbox__checkbox-container .clll-checkbox__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3)}.clll-checkbox.clll-checkbox--large .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox,.clll-checkbox.clll-checkbox--large .clll-checkbox__checkbox-container .clll-checkbox__label .clll-radiobutton__radiobutton{width:var(--clll-unit-7);height:var(--clll-unit-7)}.clll-checkbox.clll-checkbox--xlarge .clll-checkbox__checkbox-container .clll-checkbox__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3)}.clll-checkbox.clll-checkbox--xlarge .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox,.clll-checkbox.clll-checkbox--xlarge .clll-checkbox__checkbox-container .clll-checkbox__label .clll-radiobutton__radiobutton{width:var(--clll-unit-8);height:var(--clll-unit-8)}

package/dist/components/Form/CLCheckbox/CLCheckbox.js

@@ -1,19 +1,19 @@
 import '../../../assets/core.css';
 import './CLCheckbox.css';
 import '../../../assets/shared/form-utilities.css';
-import { defineComponent as T, mergeModels as B, useTemplateRef as z, useModel as S, computed as y, createBlock as r, openBlock as f, withCtx as $, createElementVNode as s, createCommentVNode as C, normalizeClass as i, unref as n, withDirectives as M, vModelCheckbox as V, createVNode as q, createTextVNode as F, toDisplayString as N } from "vue";
-import { _ as I, c as R, a as D } from "../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-DZEfoinY.js";
-import { _ as X } from "../../../chunks/CLIcon.vue_vue_type_style_index_0_lang-B_341q_b.js";
-import { _ as w } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-CG6043pv.js";
-import { CLSizes as o, CLIconSizes as u, CLTextTypes as c, CLIconNames as E, CLColorVariants as H, CLColors as O } from "../../../index.js";
-const U = ["data-testid"], j = ["for", "disabled"], A = ["id", "aria-label", "disabled", "form", "name", "required", "value"], Y = /* @__PURE__ */ T({
+import { defineComponent as T, mergeModels as z, useTemplateRef as B, useModel as S, computed as y, createBlock as m, openBlock as f, withCtx as $, createElementVNode as s, createCommentVNode as C, normalizeStyle as M, normalizeClass as i, unref as n, withDirectives as V, vModelCheckbox as q, createVNode as F, createTextVNode as N, toDisplayString as I } from "vue";
+import { _ as R, c as D, a as X } from "../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-Bt5xgOT4.js";
+import { _ as w } from "../../../chunks/CLIcon.vue_vue_type_style_index_0_lang--1FTkRVd.js";
+import { _ as E } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-BJoS9z9q.js";
+import { CLSizes as o, CLIconSizes as u, CLTextTypes as c, CLIconNames as H, CLColorVariants as O, CLColors as U } from "../../../index.js";
+const j = ["data-testid"], A = ["for", "disabled"], G = ["id", "aria-label", "disabled", "form", "name", "required", "value"], Z = /* @__PURE__ */ T({
   name: "CLCheckbox",
   __name: "CLCheckbox",
-  props: /* @__PURE__ */ B({
+  props: /* @__PURE__ */ z({
     ariaLabel: { default: void 0 },
     borderRadius: { default: void 0 },
     busy: { type: Boolean, default: !1 },
-    color: { default: O.Neutral },
+    color: { default: U.Neutral },
     disabled: { type: Boolean, default: !1 },
     form: { default: void 0 },
     id: {},
@@ -29,14 +29,14 @@ const U = ["data-testid"], j = ["for", "disabled"], A = ["id", "aria-label", "di
     size: { default: o.Small },
     testId: { default: "clll-checkbox" },
     value: { type: [String, Number, Boolean], default: void 0 },
-    variant: { default: H.Outline }
+    variant: { default: O.Outline }
   }, {
     modelValue: { type: Boolean },
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(e, { expose: x }) {
-    const v = {
+  setup(e, { expose: v }) {
+    const x = {
       [o.Tiny]: u.Tiny,
       [o.Small]: u.Tiny,
       [o.Medium]: u.Small,
@@ -48,7 +48,7 @@ const U = ["data-testid"], j = ["for", "disabled"], A = ["id", "aria-label", "di
       [o.Medium]: c.Medium,
       [o.Large]: c.Large,
       [o.XL]: c.XL
-    }, l = e, m = z("checkbox-ref"), b = S(e, "modelValue"), a = "clll-checkbox", h = y(() => [
+    }, l = e, r = B("checkbox-ref"), b = S(e, "modelValue"), a = "clll-checkbox", g = y(() => [
       a,
       l.borderRadius ? `${a}--${l.borderRadius}` : "",
       l.busy ? `${a}--busy` : `${a}--ready`,
@@ -59,25 +59,23 @@ const U = ["data-testid"], j = ["for", "disabled"], A = ["id", "aria-label", "di
       l.messageType ? `${a}--${l.messageType}` : "",
       l.rounded ? `${a}--rounded` : `${a}--box`,
       l.required ? `${a}--required` : `${a}--optional`
-    ]), g = y(() => [
+    ]), h = y(() => [
       `${a}__checkbox-container`,
       `${a}--${l.variant}`
     ]), L = () => {
-      m.value && m.value.focus();
+      r.value && r.value.focus();
     };
-    return x({
-      checkboxRef: m
-    }), (G, d) => (f(), r(I, null, {
+    return v({
+      checkboxRef: r
+    }), (J, d) => (f(), m(R, null, {
       default: $(() => [
         s("span", {
-          class: i([
-            n(h),
-            n(R)({ color: e.color, component: "checkbox", disabled: e.disabled || e.busy, variant: e.variant })
-          ]),
+          class: i(n(g)),
+          style: M(n(D)({ color: e.color, disabled: e.disabled || e.busy, variant: e.variant })),
           "data-testid": e.testId
         }, [
           s("span", {
-            class: i(n(g)),
+            class: i(n(h)),
             onClick: L
           }, [
             s("label", {
@@ -88,7 +86,7 @@ const U = ["data-testid"], j = ["for", "disabled"], A = ["id", "aria-label", "di
               s("span", {
                 class: i([`${a}__checkbox-frame`, "form-control-flex"])
               }, [
-                M(s("input", {
+                V(s("input", {
                   id: e.id,
                   ref: "checkbox-ref",
                   "onUpdate:modelValue": d[0] || (d[0] = (t) => b.value = t),
@@ -106,33 +104,33 @@ const U = ["data-testid"], j = ["for", "disabled"], A = ["id", "aria-label", "di
                   (...t) => e.onChange && e.onChange(...t)),
                   onFocus: d[3] || (d[3] = //@ts-ignore
                   (...t) => e.onFocus && e.onFocus(...t))
-                }, null, 42, A), [
-                  [V, b.value]
+                }, null, 42, G), [
+                  [q, b.value]
                 ]),
                 s("span", {
                   class: i(`${a}__icon`)
                 }, [
-                  q(n(X), {
-                    name: n(E).Check,
-                    size: v[e.size]
+                  F(n(w), {
+                    name: n(H).Check,
+                    size: x[e.size]
                   }, null, 8, ["name", "size"])
                 ], 2)
               ], 2),
-              e.label ? (f(), r(n(w), {
+              e.label ? (f(), m(n(E), {
                 key: 0,
                 as: "span",
                 type: k[e.size],
                 class: i(e.required ? `${a}__label--required` : "")
               }, {
                 default: $(() => [
-                  F(N(e.label), 1)
+                  N(I(e.label), 1)
                 ]),
                 _: 1
               }, 8, ["type", "class"])) : C("", !0)
-            ], 10, j)
+            ], 10, A)
           ], 2)
-        ], 10, U),
-        e.id ? (f(), r(D, {
+        ], 14, j),
+        e.id ? (f(), m(X, {
           key: 0,
           id: e.id,
           messages: e.messages,
@@ -144,6 +142,6 @@ const U = ["data-testid"], j = ["for", "disabled"], A = ["id", "aria-label", "di
   }
 });
 export {
-  Y as CLCheckbox,
-  Y as default
+  Z as CLCheckbox,
+  Z as default
 };

package/dist/components/Form/CLCheckbox/CLCheckbox.vue.d.ts

@@ -54,11 +54,11 @@ declare const _default: import('vue').DefineComponent<{
 }>, {
     color: CLColors;
     variant: CLColorVariants.Outline | CLColorVariants.Ghost;
-    form: string;
-    label: string;
     borderRadius: CLBorderRadius;
     rounded: boolean;
     testId: string;
+    form: string;
+    label: string;
     onFocus: CLGenericFocusFunction;
     onBlur: CLGenericFocusFunction;
     onChange: CLGenericFunction;

package/dist/components/Form/CLInput/CLInput.css

@@ -1 +1 @@
-.clll-input__input-prefix--string,.clll-input__input-suffix--string{font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased}.clll-input__selected-color-tools{display:flex}.clll-input__selected-color-tools>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-0_5)}.clll-input__selected-color-tools .clll-button{flex:none}.clll-input{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;align-items:flex-start;overflow:visible}.clll-input .clll-input__input-container{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;display:flex;align-items:stretch;overflow:visible}.clll-input .clll-input__input-container .clll-input__input-border-control{display:flex;align-items:center;width:100%}.clll-input .clll-input__input{display:inline-block;appearance:none;font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased}.clll-input.clll-input--hascustomprefix,.clll-input.clll-input--hascustomsuffix,.clll-input.clll-input--grouped,.clll-input.clll-input--ghost{border-radius:var(--clll-rounded-xs)}.clll-input.clll-input--hascustomprefix:focus,.clll-input.clll-input--hascustomprefix:focus-within,.clll-input.clll-input--hascustomsuffix:focus,.clll-input.clll-input--hascustomsuffix:focus-within,.clll-input.clll-input--grouped:focus,.clll-input.clll-input--grouped:focus-within,.clll-input.clll-input--ghost:focus,.clll-input.clll-input--ghost:focus-within{border-color:transparent}.clll-input .clll-input__char-counter,.clll-input .clll-input__selected-color{display:flex;align-items:center;justify-content:center;pointer-events:none;user-select:none}.clll-input.clll-input--rounded .clll-input__input-container,.clll-input.clll-input--rounded .clll-input__input{border-radius:var(--clll-rounded-xs)}.clll-input.clll-input--rounded.clll-input--rounded-full .clll-input__input-container{border-radius:var(--clll-rounded-full)}.clll-input.clll-input--rounded.clll-input--rounded-lg .clll-input__input-container{border-radius:var(--clll-rounded-lg)}.clll-input.clll-input--rounded.clll-input--rounded-md .clll-input__input-container{border-radius:var(--clll-rounded-md)}.clll-input.clll-input--rounded.clll-input--rounded-sm .clll-input__input-container{border-radius:var(--clll-rounded-sm)}.clll-input.clll-input--rounded.clll-input--rounded-xs .clll-input__input-container{border-radius:var(--clll-rounded-xs)}.clll-input.clll-input--rounded.clll-input--rounded-xl .clll-input__input-container{border-radius:var(--clll-rounded-xl)}.clll-input.clll-input--rounded.clll-input--rounded-2xl .clll-input__input-container{border-radius:var(--clll-rounded-2xl)}.clll-input.clll-input--rounded.clll-input--rounded-3xl .clll-input__input-container{border-radius:var(--clll-rounded-3xl)}.clll-input.clll-input--rounded.clll-input--rounded-none .clll-input__input-container{border-radius:0}.clll-input.clll-input--rounded.clll-input--rounded-full .clll-input__input{border-radius:var(--clll-rounded-full)}.clll-input.clll-input--rounded.clll-input--rounded-lg .clll-input__input{border-radius:var(--clll-rounded-lg)}.clll-input.clll-input--rounded.clll-input--rounded-md .clll-input__input{border-radius:var(--clll-rounded-md)}.clll-input.clll-input--rounded.clll-input--rounded-sm .clll-input__input{border-radius:var(--clll-rounded-sm)}.clll-input.clll-input--rounded.clll-input--rounded-xs .clll-input__input{border-radius:var(--clll-rounded-xs)}.clll-input.clll-input--rounded.clll-input--rounded-xl .clll-input__input{border-radius:var(--clll-rounded-xl)}.clll-input.clll-input--rounded.clll-input--rounded-2xl .clll-input__input{border-radius:var(--clll-rounded-2xl)}.clll-input.clll-input--rounded.clll-input--rounded-3xl .clll-input__input{border-radius:var(--clll-rounded-3xl)}.clll-input.clll-input--rounded.clll-input--rounded-none .clll-input__input{border-radius:0}.clll-input.clll-input--rounded:not(.clll-input--hasiconprefix).clll-input--hasprefix .clll-input__input{border-top-left-radius:0;border-bottom-left-radius:0}.clll-input.clll-input--rounded:not(.clll-input--hasiconsuffix).clll-input--hassuffix .clll-input__input{border-top-right-radius:0;border-bottom-right-radius:0}.clll-input.clll-input--tiny .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5);padding:var(--clll-py-xs) var(--clll-px-sm)}.clll-input.clll-input--tiny .clll-input__input-container .clll-input__input::file-selector-button{padding:var(--clll-py-sm) var(--clll-px-sm);margin-right:var(--clll-px-sm)}.clll-input.clll-input--tiny.clll-input--hascharcounter .clll-input__input-container .clll-input__char-counter{padding:0 var(--clll-px-sm)}.clll-input.clll-input--tiny.clll-input--hasprefix .clll-input__input-prefix:not(.clll-input__input-prefix--string){padding-left:var(--clll-unit-1);padding-right:var(--clll-unit-1)}.clll-input.clll-input--tiny.clll-input--hasprefix .clll-input__input-prefix--string{padding-left:var(--clll-unit-1)}.clll-input.clll-input--tiny.clll-input--hasprefix .clll-input__input{padding-left:var(--clll-unit-0)}.clll-input.clll-input--tiny.clll-input--hassuffix .clll-input__input-suffix:not(.clll-input__input-suffix--string){padding-left:var(--clll-unit-1);padding-right:var(--clll-unit-1)}.clll-input.clll-input--tiny.clll-input--hassuffix .clll-input__input-suffix--string{padding-right:var(--clll-unit-1)}.clll-input.clll-input--tiny.clll-input--hassuffix .clll-input__input{padding-right:var(--clll-unit-0)}.clll-input.clll-input--tiny.clll-input--hascustomprefix,.clll-input.clll-input--tiny.clll-input--hascustomsuffix{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5)}.clll-input.clll-input--tiny.clll-input--hascustomprefix .clll-input__input{padding-left:0}.clll-input.clll-input--tiny.clll-input--hascustomsuffix .clll-input__input{padding-right:0}.clll-input.clll-input--tiny.clll-input--grouped .clll-input__input-prefix,.clll-input.clll-input--tiny.clll-input--grouped .clll-input__input-suffix{padding:var(--clll-unit-1_5)}.clll-input.clll-input--tiny.clll-input--grouped .clll-input__input-preffix--string,.clll-input.clll-input--tiny.clll-input--grouped .clll-input__input-suffix--string{padding-top:0;padding-bottom:0}.clll-input.clll-input--tiny.clll-input--grouped.clll-input--hasiconprefix .clll-input__input,.clll-input.clll-input--tiny.clll-input--grouped.clll-input--hascustomprefix .clll-input__input{padding-left:var(--clll-unit-1_5)}.clll-input.clll-input--tiny.clll-input--grouped.clll-input--hasiconsuffix .clll-input__input,.clll-input.clll-input--tiny.clll-input--grouped.clll-input--hascustomsuffix .clll-input__input{padding-right:var(--clll-unit-1_5)}.clll-input.clll-input--tiny.clll-input--color .clll-input__input-container>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-input.clll-input--tiny.clll-input--color .clll-input__input-container .clll-input__input{border-radius:var(--clll-rounded-full);height:var(--clll-unit-5_5);width:var(--clll-unit-5_5)}.clll-input.clll-input--tiny.clll-input--color .clll-input__input-container .clll-input__selected-color{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5)}.clll-input.clll-input--small .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6);padding:var(--clll-py-sm) var(--clll-px-md)}.clll-input.clll-input--small .clll-input__input-container .clll-input__input::file-selector-button{padding:var(--clll-py-md) var(--clll-px-md);margin-right:var(--clll-px-md)}.clll-input.clll-input--small.clll-input--hascharcounter .clll-input__input-container .clll-input__char-counter{padding:0 var(--clll-px-md)}.clll-input.clll-input--small.clll-input--hasprefix .clll-input__input-prefix:not(.clll-input__input-prefix--string){padding-left:var(--clll-unit-1_5);padding-right:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--hasprefix .clll-input__input-prefix--string{padding-left:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--hasprefix .clll-input__input{padding-left:var(--clll-unit-0)}.clll-input.clll-input--small.clll-input--hassuffix .clll-input__input-suffix:not(.clll-input__input-suffix--string){padding-left:var(--clll-unit-1_5);padding-right:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--hassuffix .clll-input__input-suffix--string{padding-right:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--hassuffix .clll-input__input{padding-right:var(--clll-unit-0)}.clll-input.clll-input--small.clll-input--hascustomprefix,.clll-input.clll-input--small.clll-input--hascustomsuffix{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6)}.clll-input.clll-input--small.clll-input--hascustomprefix .clll-input__input{padding-left:0}.clll-input.clll-input--small.clll-input--hascustomsuffix .clll-input__input{padding-right:0}.clll-input.clll-input--small.clll-input--grouped .clll-input__input-prefix,.clll-input.clll-input--small.clll-input--grouped .clll-input__input-suffix{padding:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--grouped .clll-input__input-preffix--string,.clll-input.clll-input--small.clll-input--grouped .clll-input__input-suffix--string{padding-top:0;padding-bottom:0}.clll-input.clll-input--small.clll-input--grouped.clll-input--hasiconprefix .clll-input__input,.clll-input.clll-input--small.clll-input--grouped.clll-input--hascustomprefix .clll-input__input{padding-left:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--grouped.clll-input--hasiconsuffix .clll-input__input,.clll-input.clll-input--small.clll-input--grouped.clll-input--hascustomsuffix .clll-input__input{padding-right:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--color .clll-input__input-container>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-input.clll-input--small.clll-input--color .clll-input__input-container .clll-input__input{border-radius:var(--clll-rounded-full);height:var(--clll-unit-6_5);width:var(--clll-unit-6_5)}.clll-input.clll-input--small.clll-input--color .clll-input__input-container .clll-input__selected-color{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6)}.clll-input.clll-input--medium .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5);padding:var(--clll-py-md) var(--clll-px-lg)}.clll-input.clll-input--medium .clll-input__input-container .clll-input__input::file-selector-button{padding:var(--clll-py-xl) var(--clll-px-lg);margin-right:var(--clll-px-lg)}.clll-input.clll-input--medium.clll-input--hascharcounter .clll-input__input-container .clll-input__char-counter{padding:0 var(--clll-px-lg)}.clll-input.clll-input--medium.clll-input--hasprefix .clll-input__input-prefix:not(.clll-input__input-prefix--string){padding-left:var(--clll-unit-2_5);padding-right:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--hasprefix .clll-input__input-prefix--string{padding-left:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--hasprefix .clll-input__input{padding-left:var(--clll-unit-0)}.clll-input.clll-input--medium.clll-input--hassuffix .clll-input__input-suffix:not(.clll-input__input-suffix--string){padding-left:var(--clll-unit-2_5);padding-right:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--hassuffix .clll-input__input-suffix--string{padding-right:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--hassuffix .clll-input__input{padding-right:var(--clll-unit-0)}.clll-input.clll-input--medium.clll-input--hascustomprefix,.clll-input.clll-input--medium.clll-input--hascustomsuffix{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5)}.clll-input.clll-input--medium.clll-input--hascustomprefix .clll-input__input{padding-left:0}.clll-input.clll-input--medium.clll-input--hascustomsuffix .clll-input__input{padding-right:0}.clll-input.clll-input--medium.clll-input--grouped .clll-input__input-prefix,.clll-input.clll-input--medium.clll-input--grouped .clll-input__input-suffix{padding:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--grouped .clll-input__input-preffix--string,.clll-input.clll-input--medium.clll-input--grouped .clll-input__input-suffix--string{padding-top:0;padding-bottom:0}.clll-input.clll-input--medium.clll-input--grouped.clll-input--hasiconprefix .clll-input__input,.clll-input.clll-input--medium.clll-input--grouped.clll-input--hascustomprefix .clll-input__input{padding-left:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--grouped.clll-input--hasiconsuffix .clll-input__input,.clll-input.clll-input--medium.clll-input--grouped.clll-input--hascustomsuffix .clll-input__input{padding-right:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--color .clll-input__input-container>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-input.clll-input--medium.clll-input--color .clll-input__input-container .clll-input__input{border-radius:var(--clll-rounded-full);height:var(--clll-unit-7_5);width:var(--clll-unit-7_5)}.clll-input.clll-input--medium.clll-input--color .clll-input__input-container .clll-input__selected-color{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5)}.clll-input.clll-input--large .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7);padding:var(--clll-py-lg) var(--clll-px-2xl)}.clll-input.clll-input--large .clll-input__input-container .clll-input__input::file-selector-button{padding:var(--clll-py-2xl) var(--clll-px-2xl);margin-right:var(--clll-px-2xl)}.clll-input.clll-input--large.clll-input--hascharcounter .clll-input__input-container .clll-input__char-counter{padding:0 var(--clll-px-2xl)}.clll-input.clll-input--large.clll-input--hasprefix .clll-input__input-prefix:not(.clll-input__input-prefix--string){padding-left:var(--clll-unit-3_5);padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--hasprefix .clll-input__input-prefix--string{padding-left:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--hasprefix .clll-input__input{padding-left:var(--clll-unit-0)}.clll-input.clll-input--large.clll-input--hassuffix .clll-input__input-suffix:not(.clll-input__input-suffix--string){padding-left:var(--clll-unit-3_5);padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--hassuffix .clll-input__input-suffix--string{padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--hassuffix .clll-input__input{padding-right:var(--clll-unit-0)}.clll-input.clll-input--large.clll-input--hascustomprefix,.clll-input.clll-input--large.clll-input--hascustomsuffix{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7)}.clll-input.clll-input--large.clll-input--hascustomprefix .clll-input__input{padding-left:0}.clll-input.clll-input--large.clll-input--hascustomsuffix .clll-input__input{padding-right:0}.clll-input.clll-input--large.clll-input--grouped .clll-input__input-prefix,.clll-input.clll-input--large.clll-input--grouped .clll-input__input-suffix{padding:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--grouped .clll-input__input-preffix--string,.clll-input.clll-input--large.clll-input--grouped .clll-input__input-suffix--string{padding-top:0;padding-bottom:0}.clll-input.clll-input--large.clll-input--grouped.clll-input--hasiconprefix .clll-input__input,.clll-input.clll-input--large.clll-input--grouped.clll-input--hascustomprefix .clll-input__input{padding-left:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--grouped.clll-input--hasiconsuffix .clll-input__input,.clll-input.clll-input--large.clll-input--grouped.clll-input--hascustomsuffix .clll-input__input{padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--color .clll-input__input-container>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-input.clll-input--large.clll-input--color .clll-input__input-container .clll-input__input{border-radius:var(--clll-rounded-full);height:var(--clll-unit-8_5);width:var(--clll-unit-8_5)}.clll-input.clll-input--large.clll-input--color .clll-input__input-container .clll-input__selected-color{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7)}.clll-input.clll-input--xlarge .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-5);line-height:var(--clll-unit-7_5);padding:var(--clll-py-2xl) var(--clll-px-3xl)}.clll-input.clll-input--xlarge .clll-input__input-container .clll-input__input::file-selector-button{padding:var(--clll-py-4xl) var(--clll-px-3xl);margin-right:var(--clll-px-3xl)}.clll-input.clll-input--xlarge.clll-input--hascharcounter .clll-input__input-container .clll-input__char-counter{padding:0 var(--clll-px-3xl)}.clll-input.clll-input--xlarge.clll-input--hasprefix .clll-input__input-prefix:not(.clll-input__input-prefix--string){padding-left:var(--clll-unit-3_5);padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--hasprefix .clll-input__input-prefix--string{padding-left:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--hasprefix .clll-input__input{padding-left:var(--clll-unit-0)}.clll-input.clll-input--xlarge.clll-input--hassuffix .clll-input__input-suffix:not(.clll-input__input-suffix--string){padding-left:var(--clll-unit-3_5);padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--hassuffix .clll-input__input-suffix--string{padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--hassuffix .clll-input__input{padding-right:var(--clll-unit-0)}.clll-input.clll-input--xlarge.clll-input--hascustomprefix,.clll-input.clll-input--xlarge.clll-input--hascustomsuffix{font-size:var(--clll-unit-5);line-height:var(--clll-unit-7_5)}.clll-input.clll-input--xlarge.clll-input--hascustomprefix .clll-input__input{padding-left:0}.clll-input.clll-input--xlarge.clll-input--hascustomsuffix .clll-input__input{padding-right:0}.clll-input.clll-input--xlarge.clll-input--grouped .clll-input__input-prefix,.clll-input.clll-input--xlarge.clll-input--grouped .clll-input__input-suffix{padding:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--grouped .clll-input__input-preffix--string,.clll-input.clll-input--xlarge.clll-input--grouped .clll-input__input-suffix--string{padding-top:0;padding-bottom:0}.clll-input.clll-input--xlarge.clll-input--grouped.clll-input--hasiconprefix .clll-input__input,.clll-input.clll-input--xlarge.clll-input--grouped.clll-input--hascustomprefix .clll-input__input{padding-left:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--grouped.clll-input--hasiconsuffix .clll-input__input,.clll-input.clll-input--xlarge.clll-input--grouped.clll-input--hascustomsuffix .clll-input__input{padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--color .clll-input__input-container>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-input.clll-input--xlarge.clll-input--color .clll-input__input-container .clll-input__input{border-radius:var(--clll-rounded-full);height:var(--clll-unit-9_5);width:var(--clll-unit-9_5)}.clll-input.clll-input--xlarge.clll-input--color .clll-input__input-container .clll-input__selected-color{font-size:var(--clll-unit-5);line-height:var(--clll-unit-7_5)}.clll-input.clll-input--grouped.clll-input--hasiconprefix .clll-input__input-container,.clll-input.clll-input--grouped.clll-input--hascustomprefix .clll-input__input-container{padding-left:0}.clll-input.clll-input--grouped.clll-input--hasiconsuffix .clll-input__input-container,.clll-input.clll-input--grouped.clll-input--hascustomsuffix .clll-input__input-container{padding-right:0}.clll-input.clll-input--grouped.clll-input--hascharcounter .clll-input__input-suffix{border-top-right-radius:0;border-bottom-right-radius:0;padding-right:0}.clll-input.clll-input--grouped.clll-input--hascharcounter .clll-input__char-counter{border-top-right-radius:var(--clll-rounded-xs);border-bottom-right-radius:var(--clll-rounded-xs)}.clll-input.clll-input--hassuffix.clll-input--hascharcounter .clll-input__input-suffix,.clll-input.clll-input--hassuffix.clll-input--hascharcounter .clll-input__input-suffix:not(.clll-input__input-suffix--string){padding-right:0}.clll-input.clll-input--fluid,.clll-input.clll-input--fluid .clll-input__input-container,.clll-input.clll-input--fluid .clll-input__input-container .clll-input__input{width:100%}.clll-input.clll-input--vertical{flex-direction:column}.clll-input.clll-input--vertical.clll-input--haslabel>:not([hidden])~:not([hidden]){margin-top:var(--clll-unit-1_5)}.clll-input.clll-input--horizontal.clll-input--haslabel{flex-direction:row;align-items:center;flex-wrap:wrap}.clll-input.clll-input--horizontal.clll-input--haslabel .clll-input__label,.clll-input.clll-input--horizontal.clll-input--haslabel .clll-input__input-container{width:50%}.clll-input.clll-input--hidden .clll-input__input-container{display:none}.clll-input.clll-input--file .clll-input__input-container .clll-input__input{cursor:pointer;padding-top:0;padding-left:0;padding-bottom:0;white-space:nowrap}.clll-input.clll-input--file .clll-input__input-container .clll-input__input::file-selector-button{cursor:pointer;border:0}.clll-input.clll-input--file.clll-input--readonly .clll-input__input{pointer-events:none;cursor:not-allowed}.clll-input.clll-input--color .clll-input__input-container .clll-input__input{cursor:pointer;padding:0;border:0}.clll-input.clll-input--color .clll-input__input-container .clll-input__input.--nocolor{opacity:0}.clll-input.clll-input--color .clll-input__input-container .clll-input__input-border-control{overflow:hidden;border-radius:var(--clll-rounded-full);background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>');width:auto}.clll-input.clll-input--color .clll-input__input-container .clll-input__selected-color{font-family:monospace;-webkit-font-smoothing:antialiased}.clll-input.clll-input--color.clll-input--disabled .clll-input__input{cursor:default}.clll-input.clll-input--color.clll-input--readonly .clll-input__input{pointer-events:none;cursor:not-allowed}.clll-input.clll-input--hascharcounter .clll-input__char-counter{pointer-events:none;justify-content:flex-end;max-width:100px;box-sizing:border-box;flex:1;position:relative}.clll-input ::-webkit-color-swatch-wrapper{padding:0}.clll-input ::-webkit-color-swatch{border:0}
+.clll-input__input-prefix--string,.clll-input__input-suffix--string{font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased}.clll-input__selected-color-tools{display:flex}.clll-input__selected-color-tools>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-0_5)}.clll-input__selected-color-tools .clll-button{flex:none}.clll-input{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;align-items:flex-start;overflow:visible}.clll-input.clll-input--haslabel .clll-input__label .clll-text.clll-input__label--required:after{position:relative;top:var(--clll-unit-1);content:"*";font-size:var(--clll-unit-4_5);font-weight:500;font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased;color:var(--clll-input-required-asterisk-color, red);text-decoration:unset;margin-inline-start:var(--clll-unit-0_5);box-sizing:content-box;line-height:0}.clll-input .clll-input__input-container{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;display:flex;align-items:stretch;overflow:visible;background-color:var(--clll-input-bg, white);border-color:var(--clll-input-border, transparent);border-style:solid;border-width:1px}.clll-input .clll-input__input-container:focus-within{outline-color:var(--clll-input-focus-border, transparent);outline-style:solid;outline-width:2px;outline-offset:-1px}.clll-input .clll-input__input-container .clll-input__input-border-control{display:flex;align-items:center;width:100%}.clll-input .clll-input__input{display:inline-block;appearance:none;background-color:var(--clll-input-bg, white);border-color:var(--clll-input-border, transparent);border-style:solid;border-width:0;color:var(--clll-input-text, inherit);font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased}.clll-input .clll-input__input::placeholder{color:var(--clll-input-text-placeholder, transparent)}.clll-input .clll-input__input:focus{outline:none}.clll-input .clll-input__input:disabled{border-color:var(--clll-input-disabled-border, transparent);background-color:var(--clll-input-disabled-bg, transparent);color:var(--clll-input-text-placeholder, transparent)}.clll-input .clll-input__input:disabled::placeholder{color:var(--clll-input-text-placeholder, transparent)}.clll-input .clll-input__input:read-only{border-color:var(--clll-input-readonly-border, transparent);background-color:var(--clll-input-readonly-bg, transparent);color:var(--clll-input-text-placeholder, transparent)}.clll-input .clll-input__input:read-only::placeholder{color:var(--clll-input-text-placeholder, transparent)}.clll-input .clll-input__input.--input-group{border:0;outline:none}.clll-input.clll-input--disabled{cursor:default}.clll-input.clll-input--disabled .clll-input__input-container{border-color:var(--clll-input-disabled-border, transparent)}.clll-input.clll-input--readonly{cursor:not-allowed}.clll-input.clll-input--readonly .clll-input__input-container{border-color:var(--clll-input-readonly-border, transparent);pointer-events:none}.clll-input .clll-input__input-prefix,.clll-input .clll-input__input-suffix,.clll-input .clll-icon{color:var(--clll-input-prefix-suffix-color, transparent)}.clll-input.clll-input--grouped .clll-input__input-prefix,.clll-input.clll-input--grouped .clll-input__input-suffix,.clll-input.clll-input--grouped .clll-input__char-counter{background-color:var(--clll-input-grouped-bg, transparent);color:var(--clll-input-prefix-suffix-color, transparent)}.clll-input.clll-input--grouped .clll-input__input-prefix .clll-icon,.clll-input.clll-input--grouped .clll-input__input-suffix .clll-icon,.clll-input.clll-input--grouped .clll-input__char-counter .clll-icon{color:var(--clll-input-prefix-suffix-color, transparent)}.clll-input.clll-input--grouped{background-color:transparent;border:0}.clll-input.clll-input--file .clll-input__input-container .clll-input__input::file-selector-button{background-color:var(--clll-input-grouped-bg, transparent)}.clll-input.clll-input--hascharcounter .clll-input__char-counter{color:var(--clll-input-prefix-suffix-color, transparent)}.clll-input.clll-input--hascharcounter .clll-input__input{border:0;outline:0}.clll-input.clll-input--ghost .clll-input__input-container,.clll-input.clll-input--ghost .clll-input__input-border-control,.clll-input.clll-input--ghost .clll-input__input{background-color:transparent;border:0;padding:var(--clll-input-ghost-padding, 0);border-radius:0}.clll-input.clll-input--ghost .clll-input__input-container:focus,.clll-input.clll-input--ghost .clll-input__input-container:focus-within,.clll-input.clll-input--ghost .clll-input__input-border-control:focus,.clll-input.clll-input--ghost .clll-input__input-border-control:focus-within,.clll-input.clll-input--ghost .clll-input__input:focus,.clll-input.clll-input--ghost .clll-input__input:focus-within{outline:none}.clll-input.clll-input--hascustomprefix,.clll-input.clll-input--hascustomsuffix,.clll-input.clll-input--grouped,.clll-input.clll-input--ghost{border-radius:var(--clll-rounded-xs)}.clll-input.clll-input--hascustomprefix:focus,.clll-input.clll-input--hascustomprefix:focus-within,.clll-input.clll-input--hascustomsuffix:focus,.clll-input.clll-input--hascustomsuffix:focus-within,.clll-input.clll-input--grouped:focus,.clll-input.clll-input--grouped:focus-within,.clll-input.clll-input--ghost:focus,.clll-input.clll-input--ghost:focus-within{border-color:transparent}.clll-input .clll-input__char-counter,.clll-input .clll-input__selected-color{display:flex;align-items:center;justify-content:center;pointer-events:none;user-select:none}.clll-input.clll-input--rounded:not(.clll-input--ghost) .clll-input__input-container,.clll-input.clll-input--rounded:not(.clll-input--ghost) .clll-input__input{border-radius:var(--clll-rounded-xs)}.clll-input.clll-input--rounded:not(.clll-input--ghost).clll-input--rounded-full .clll-input__input-container{border-radius:var(--clll-rounded-full)}.clll-input.clll-input--rounded:not(.clll-input--ghost).clll-input--rounded-lg .clll-input__input-container{border-radius:var(--clll-rounded-lg)}.clll-input.clll-input--rounded:not(.clll-input--ghost).clll-input--rounded-md .clll-input__input-container{border-radius:var(--clll-rounded-md)}.clll-input.clll-input--rounded:not(.clll-input--ghost).clll-input--rounded-sm .clll-input__input-container{border-radius:var(--clll-rounded-sm)}.clll-input.clll-input--rounded:not(.clll-input--ghost).clll-input--rounded-xs .clll-input__input-container{border-radius:var(--clll-rounded-xs)}.clll-input.clll-input--rounded:not(.clll-input--ghost).clll-input--rounded-xl .clll-input__input-container{border-radius:var(--clll-rounded-xl)}.clll-input.clll-input--rounded:not(.clll-input--ghost).clll-input--rounded-2xl .clll-input__input-container{border-radius:var(--clll-rounded-2xl)}.clll-input.clll-input--rounded:not(.clll-input--ghost).clll-input--rounded-3xl .clll-input__input-container{border-radius:var(--clll-rounded-3xl)}.clll-input.clll-input--rounded:not(.clll-input--ghost).clll-input--rounded-none .clll-input__input-container{border-radius:0}.clll-input.clll-input--rounded:not(.clll-input--ghost).clll-input--rounded-full .clll-input__input{border-radius:var(--clll-rounded-full)}.clll-input.clll-input--rounded:not(.clll-input--ghost).clll-input--rounded-lg .clll-input__input{border-radius:var(--clll-rounded-lg)}.clll-input.clll-input--rounded:not(.clll-input--ghost).clll-input--rounded-md .clll-input__input{border-radius:var(--clll-rounded-md)}.clll-input.clll-input--rounded:not(.clll-input--ghost).clll-input--rounded-sm .clll-input__input{border-radius:var(--clll-rounded-sm)}.clll-input.clll-input--rounded:not(.clll-input--ghost).clll-input--rounded-xs .clll-input__input{border-radius:var(--clll-rounded-xs)}.clll-input.clll-input--rounded:not(.clll-input--ghost).clll-input--rounded-xl .clll-input__input{border-radius:var(--clll-rounded-xl)}.clll-input.clll-input--rounded:not(.clll-input--ghost).clll-input--rounded-2xl .clll-input__input{border-radius:var(--clll-rounded-2xl)}.clll-input.clll-input--rounded:not(.clll-input--ghost).clll-input--rounded-3xl .clll-input__input{border-radius:var(--clll-rounded-3xl)}.clll-input.clll-input--rounded:not(.clll-input--ghost).clll-input--rounded-none .clll-input__input{border-radius:0}.clll-input.clll-input--rounded:not(.clll-input--ghost):not(.clll-input--hasiconprefix).clll-input--hasprefix .clll-input__input{border-top-left-radius:0;border-bottom-left-radius:0}.clll-input.clll-input--rounded:not(.clll-input--ghost):not(.clll-input--hasiconsuffix).clll-input--hassuffix .clll-input__input{border-top-right-radius:0;border-bottom-right-radius:0}.clll-input.clll-input--rounded.clll-input--ghost .clll-input__input-container,.clll-input.clll-input--rounded.clll-input--ghost .clll-input__input{border-radius:0}.clll-input.clll-input--tiny:not(.clll-input--ghost) .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5);padding:var(--clll-py-xs) var(--clll-px-sm)}.clll-input.clll-input--tiny:not(.clll-input--ghost) .clll-input__input-container .clll-input__input::file-selector-button{padding:var(--clll-py-sm) var(--clll-px-sm);*margin-right: var(--clll-px-sm)}.clll-input.clll-input--tiny:not(.clll-input--ghost).clll-input--file .clll-input__input-container .clll-input__input{padding-top:0;padding-left:0;padding-bottom:0}.clll-input.clll-input--tiny:not(.clll-input--ghost).clll-input--color .clll-input__input-container{border:0;outline:none}.clll-input.clll-input--tiny:not(.clll-input--ghost).clll-input--color .clll-input__input-container .clll-input__input{padding:0;border-width:2px}.clll-input.clll-input--tiny:not(.clll-input--ghost).clll-input--color .clll-input__input-container .clll-input__input.--nocolor{opacity:0}.clll-input.clll-input--tiny.clll-input--ghost .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5)}.clll-input.clll-input--tiny.clll-input--hascharcounter .clll-input__input-container .clll-input__char-counter{padding:0 var(--clll-px-sm)}.clll-input.clll-input--tiny.clll-input--hasprefix .clll-input__input-prefix:not(.clll-input__input-prefix--string){padding-left:var(--clll-unit-1);padding-right:var(--clll-unit-1)}.clll-input.clll-input--tiny.clll-input--hasprefix .clll-input__input-prefix--string{padding-left:var(--clll-unit-1)}.clll-input.clll-input--tiny.clll-input--hasprefix .clll-input__input{padding-left:var(--clll-unit-0)}.clll-input.clll-input--tiny.clll-input--hassuffix .clll-input__input-suffix:not(.clll-input__input-suffix--string){padding-left:var(--clll-unit-1);padding-right:var(--clll-unit-1)}.clll-input.clll-input--tiny.clll-input--hassuffix .clll-input__input-suffix--string{padding-right:var(--clll-unit-1)}.clll-input.clll-input--tiny.clll-input--hassuffix .clll-input__input{padding-right:var(--clll-unit-0)}.clll-input.clll-input--tiny.clll-input--hascustomprefix .clll-input__input-container .clll-input__input-prefix,.clll-input.clll-input--tiny.clll-input--hascustomprefix .clll-input__input-container .clll-input__input-suffix,.clll-input.clll-input--tiny.clll-input--hascustomsuffix .clll-input__input-container .clll-input__input-prefix,.clll-input.clll-input--tiny.clll-input--hascustomsuffix .clll-input__input-container .clll-input__input-suffix{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5)}.clll-input.clll-input--tiny.clll-input--hascustomprefix .clll-input__input{padding-left:0}.clll-input.clll-input--tiny.clll-input--hascustomsuffix .clll-input__input{padding-right:0}.clll-input.clll-input--tiny.clll-input--grouped .clll-input__input-prefix,.clll-input.clll-input--tiny.clll-input--grouped .clll-input__input-suffix{padding:var(--clll-unit-1_5)}.clll-input.clll-input--tiny.clll-input--grouped .clll-input__input-preffix--string,.clll-input.clll-input--tiny.clll-input--grouped .clll-input__input-suffix--string{padding-top:0;padding-bottom:0}.clll-input.clll-input--tiny.clll-input--grouped.clll-input--hasiconprefix .clll-input__input,.clll-input.clll-input--tiny.clll-input--grouped.clll-input--hascustomprefix .clll-input__input{padding-left:var(--clll-unit-1_5)}.clll-input.clll-input--tiny.clll-input--grouped.clll-input--hasiconsuffix .clll-input__input,.clll-input.clll-input--tiny.clll-input--grouped.clll-input--hascustomsuffix .clll-input__input{padding-right:var(--clll-unit-1_5)}.clll-input.clll-input--tiny.clll-input--color .clll-input__input-container>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-input.clll-input--tiny.clll-input--color .clll-input__input-container .clll-input__input{border-radius:var(--clll-rounded-full);height:var(--clll-unit-5_5);width:var(--clll-unit-5_5)}.clll-input.clll-input--tiny.clll-input--color .clll-input__input-container .clll-input__selected-color{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5)}.clll-input.clll-input--small:not(.clll-input--ghost) .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6);padding:var(--clll-py-sm) var(--clll-px-md)}.clll-input.clll-input--small:not(.clll-input--ghost) .clll-input__input-container .clll-input__input::file-selector-button{padding:var(--clll-py-md) var(--clll-px-md);margin-right:var(--clll-px-md)}.clll-input.clll-input--small:not(.clll-input--ghost).clll-input--file .clll-input__input-container .clll-input__input{padding-top:0;padding-left:0;padding-bottom:0}.clll-input.clll-input--small:not(.clll-input--ghost).clll-input--color .clll-input__input-container{border:0;outline:none}.clll-input.clll-input--small:not(.clll-input--ghost).clll-input--color .clll-input__input-container .clll-input__input{padding:0;border-width:2px}.clll-input.clll-input--small:not(.clll-input--ghost).clll-input--color .clll-input__input-container .clll-input__input.--nocolor{opacity:0}.clll-input.clll-input--small.clll-input--ghost .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6)}.clll-input.clll-input--small.clll-input--hascharcounter .clll-input__input-container .clll-input__char-counter{padding:0 var(--clll-px-md)}.clll-input.clll-input--small.clll-input--hasprefix .clll-input__input-prefix:not(.clll-input__input-prefix--string){padding-left:var(--clll-unit-1_5);padding-right:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--hasprefix .clll-input__input-prefix--string{padding-left:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--hasprefix .clll-input__input{padding-left:var(--clll-unit-0)}.clll-input.clll-input--small.clll-input--hassuffix .clll-input__input-suffix:not(.clll-input__input-suffix--string){padding-left:var(--clll-unit-1_5);padding-right:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--hassuffix .clll-input__input-suffix--string{padding-right:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--hassuffix .clll-input__input{padding-right:var(--clll-unit-0)}.clll-input.clll-input--small.clll-input--hascustomprefix .clll-input__input-container .clll-input__input-prefix,.clll-input.clll-input--small.clll-input--hascustomprefix .clll-input__input-container .clll-input__input-suffix,.clll-input.clll-input--small.clll-input--hascustomsuffix .clll-input__input-container .clll-input__input-prefix,.clll-input.clll-input--small.clll-input--hascustomsuffix .clll-input__input-container .clll-input__input-suffix{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6)}.clll-input.clll-input--small.clll-input--hascustomprefix .clll-input__input{padding-left:0}.clll-input.clll-input--small.clll-input--hascustomsuffix .clll-input__input{padding-right:0}.clll-input.clll-input--small.clll-input--grouped .clll-input__input-prefix,.clll-input.clll-input--small.clll-input--grouped .clll-input__input-suffix{padding:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--grouped .clll-input__input-preffix--string,.clll-input.clll-input--small.clll-input--grouped .clll-input__input-suffix--string{padding-top:0;padding-bottom:0}.clll-input.clll-input--small.clll-input--grouped.clll-input--hasiconprefix .clll-input__input,.clll-input.clll-input--small.clll-input--grouped.clll-input--hascustomprefix .clll-input__input{padding-left:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--grouped.clll-input--hasiconsuffix .clll-input__input,.clll-input.clll-input--small.clll-input--grouped.clll-input--hascustomsuffix .clll-input__input{padding-right:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--color .clll-input__input-container>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-input.clll-input--small.clll-input--color .clll-input__input-container .clll-input__input{border-radius:var(--clll-rounded-full);height:var(--clll-unit-6_5);width:var(--clll-unit-6_5)}.clll-input.clll-input--small.clll-input--color .clll-input__input-container .clll-input__selected-color{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6)}.clll-input.clll-input--medium:not(.clll-input--ghost) .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5);padding:var(--clll-py-md) var(--clll-px-lg)}.clll-input.clll-input--medium:not(.clll-input--ghost) .clll-input__input-container .clll-input__input::file-selector-button{padding:var(--clll-py-xl) var(--clll-px-lg);margin-right:var(--clll-px-lg)}.clll-input.clll-input--medium:not(.clll-input--ghost).clll-input--file .clll-input__input-container .clll-input__input{padding-top:0;padding-left:0;padding-bottom:0}.clll-input.clll-input--medium:not(.clll-input--ghost).clll-input--color .clll-input__input-container{border:0;outline:none}.clll-input.clll-input--medium:not(.clll-input--ghost).clll-input--color .clll-input__input-container .clll-input__input{padding:0;border-width:2px}.clll-input.clll-input--medium:not(.clll-input--ghost).clll-input--color .clll-input__input-container .clll-input__input.--nocolor{opacity:0}.clll-input.clll-input--medium.clll-input--ghost .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5)}.clll-input.clll-input--medium.clll-input--hascharcounter .clll-input__input-container .clll-input__char-counter{padding:0 var(--clll-px-lg)}.clll-input.clll-input--medium.clll-input--hasprefix .clll-input__input-prefix:not(.clll-input__input-prefix--string){padding-left:var(--clll-unit-2_5);padding-right:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--hasprefix .clll-input__input-prefix--string{padding-left:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--hasprefix .clll-input__input{padding-left:var(--clll-unit-0)}.clll-input.clll-input--medium.clll-input--hassuffix .clll-input__input-suffix:not(.clll-input__input-suffix--string){padding-left:var(--clll-unit-2_5);padding-right:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--hassuffix .clll-input__input-suffix--string{padding-right:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--hassuffix .clll-input__input{padding-right:var(--clll-unit-0)}.clll-input.clll-input--medium.clll-input--hascustomprefix .clll-input__input-container .clll-input__input-prefix,.clll-input.clll-input--medium.clll-input--hascustomprefix .clll-input__input-container .clll-input__input-suffix,.clll-input.clll-input--medium.clll-input--hascustomsuffix .clll-input__input-container .clll-input__input-prefix,.clll-input.clll-input--medium.clll-input--hascustomsuffix .clll-input__input-container .clll-input__input-suffix{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5)}.clll-input.clll-input--medium.clll-input--hascustomprefix .clll-input__input{padding-left:0}.clll-input.clll-input--medium.clll-input--hascustomsuffix .clll-input__input{padding-right:0}.clll-input.clll-input--medium.clll-input--grouped .clll-input__input-prefix,.clll-input.clll-input--medium.clll-input--grouped .clll-input__input-suffix{padding:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--grouped .clll-input__input-preffix--string,.clll-input.clll-input--medium.clll-input--grouped .clll-input__input-suffix--string{padding-top:0;padding-bottom:0}.clll-input.clll-input--medium.clll-input--grouped.clll-input--hasiconprefix .clll-input__input,.clll-input.clll-input--medium.clll-input--grouped.clll-input--hascustomprefix .clll-input__input{padding-left:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--grouped.clll-input--hasiconsuffix .clll-input__input,.clll-input.clll-input--medium.clll-input--grouped.clll-input--hascustomsuffix .clll-input__input{padding-right:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--color .clll-input__input-container>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-input.clll-input--medium.clll-input--color .clll-input__input-container .clll-input__input{border-radius:var(--clll-rounded-full);height:var(--clll-unit-7_5);width:var(--clll-unit-7_5)}.clll-input.clll-input--medium.clll-input--color .clll-input__input-container .clll-input__selected-color{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5)}.clll-input.clll-input--large:not(.clll-input--ghost) .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7);padding:var(--clll-py-lg) var(--clll-px-2xl)}.clll-input.clll-input--large:not(.clll-input--ghost) .clll-input__input-container .clll-input__input::file-selector-button{padding:var(--clll-py-2xl) var(--clll-px-2xl);margin-right:var(--clll-px-2xl)}.clll-input.clll-input--large:not(.clll-input--ghost).clll-input--file .clll-input__input-container .clll-input__input{padding-top:0;padding-left:0;padding-bottom:0}.clll-input.clll-input--large:not(.clll-input--ghost).clll-input--color .clll-input__input-container{border:0;outline:none}.clll-input.clll-input--large:not(.clll-input--ghost).clll-input--color .clll-input__input-container .clll-input__input{padding:0;border-width:2px}.clll-input.clll-input--large:not(.clll-input--ghost).clll-input--color .clll-input__input-container .clll-input__input.--nocolor{opacity:0}.clll-input.clll-input--large.clll-input--ghost .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7)}.clll-input.clll-input--large.clll-input--hascharcounter .clll-input__input-container .clll-input__char-counter{padding:0 var(--clll-px-2xl)}.clll-input.clll-input--large.clll-input--hasprefix .clll-input__input-prefix:not(.clll-input__input-prefix--string){padding-left:var(--clll-unit-3_5);padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--hasprefix .clll-input__input-prefix--string{padding-left:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--hasprefix .clll-input__input{padding-left:var(--clll-unit-0)}.clll-input.clll-input--large.clll-input--hassuffix .clll-input__input-suffix:not(.clll-input__input-suffix--string){padding-left:var(--clll-unit-3_5);padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--hassuffix .clll-input__input-suffix--string{padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--hassuffix .clll-input__input{padding-right:var(--clll-unit-0)}.clll-input.clll-input--large.clll-input--hascustomprefix .clll-input__input-container .clll-input__input-prefix,.clll-input.clll-input--large.clll-input--hascustomprefix .clll-input__input-container .clll-input__input-suffix,.clll-input.clll-input--large.clll-input--hascustomsuffix .clll-input__input-container .clll-input__input-prefix,.clll-input.clll-input--large.clll-input--hascustomsuffix .clll-input__input-container .clll-input__input-suffix{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7)}.clll-input.clll-input--large.clll-input--hascustomprefix .clll-input__input{padding-left:0}.clll-input.clll-input--large.clll-input--hascustomsuffix .clll-input__input{padding-right:0}.clll-input.clll-input--large.clll-input--grouped .clll-input__input-prefix,.clll-input.clll-input--large.clll-input--grouped .clll-input__input-suffix{padding:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--grouped .clll-input__input-preffix--string,.clll-input.clll-input--large.clll-input--grouped .clll-input__input-suffix--string{padding-top:0;padding-bottom:0}.clll-input.clll-input--large.clll-input--grouped.clll-input--hasiconprefix .clll-input__input,.clll-input.clll-input--large.clll-input--grouped.clll-input--hascustomprefix .clll-input__input{padding-left:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--grouped.clll-input--hasiconsuffix .clll-input__input,.clll-input.clll-input--large.clll-input--grouped.clll-input--hascustomsuffix .clll-input__input{padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--color .clll-input__input-container>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-input.clll-input--large.clll-input--color .clll-input__input-container .clll-input__input{border-radius:var(--clll-rounded-full);height:var(--clll-unit-8_5);width:var(--clll-unit-8_5)}.clll-input.clll-input--large.clll-input--color .clll-input__input-container .clll-input__selected-color{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7)}.clll-input.clll-input--xlarge:not(.clll-input--ghost) .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-5);line-height:var(--clll-unit-7_5);padding:var(--clll-py-2xl) var(--clll-px-3xl)}.clll-input.clll-input--xlarge:not(.clll-input--ghost) .clll-input__input-container .clll-input__input::file-selector-button{padding:var(--clll-py-4xl) var(--clll-px-3xl);margin-right:var(--clll-px-3xl)}.clll-input.clll-input--xlarge:not(.clll-input--ghost).clll-input--file .clll-input__input-container .clll-input__input{padding-top:0;padding-left:0;padding-bottom:0}.clll-input.clll-input--xlarge:not(.clll-input--ghost).clll-input--color .clll-input__input-container{border:0;outline:none}.clll-input.clll-input--xlarge:not(.clll-input--ghost).clll-input--color .clll-input__input-container .clll-input__input{padding:0;border-width:2px}.clll-input.clll-input--xlarge:not(.clll-input--ghost).clll-input--color .clll-input__input-container .clll-input__input.--nocolor{opacity:0}.clll-input.clll-input--xlarge.clll-input--ghost .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-5);line-height:var(--clll-unit-7_5)}.clll-input.clll-input--xlarge.clll-input--hascharcounter .clll-input__input-container .clll-input__char-counter{padding:0 var(--clll-px-3xl)}.clll-input.clll-input--xlarge.clll-input--hasprefix .clll-input__input-prefix:not(.clll-input__input-prefix--string){padding-left:var(--clll-unit-3_5);padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--hasprefix .clll-input__input-prefix--string{padding-left:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--hasprefix .clll-input__input{padding-left:var(--clll-unit-0)}.clll-input.clll-input--xlarge.clll-input--hassuffix .clll-input__input-suffix:not(.clll-input__input-suffix--string){padding-left:var(--clll-unit-3_5);padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--hassuffix .clll-input__input-suffix--string{padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--hassuffix .clll-input__input{padding-right:var(--clll-unit-0)}.clll-input.clll-input--xlarge.clll-input--hascustomprefix .clll-input__input-container .clll-input__input-prefix,.clll-input.clll-input--xlarge.clll-input--hascustomprefix .clll-input__input-container .clll-input__input-suffix,.clll-input.clll-input--xlarge.clll-input--hascustomsuffix .clll-input__input-container .clll-input__input-prefix,.clll-input.clll-input--xlarge.clll-input--hascustomsuffix .clll-input__input-container .clll-input__input-suffix{font-size:var(--clll-unit-5);line-height:var(--clll-unit-7_5)}.clll-input.clll-input--xlarge.clll-input--hascustomprefix .clll-input__input{padding-left:0}.clll-input.clll-input--xlarge.clll-input--hascustomsuffix .clll-input__input{padding-right:0}.clll-input.clll-input--xlarge.clll-input--grouped .clll-input__input-prefix,.clll-input.clll-input--xlarge.clll-input--grouped .clll-input__input-suffix{padding:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--grouped .clll-input__input-preffix--string,.clll-input.clll-input--xlarge.clll-input--grouped .clll-input__input-suffix--string{padding-top:0;padding-bottom:0}.clll-input.clll-input--xlarge.clll-input--grouped.clll-input--hasiconprefix .clll-input__input,.clll-input.clll-input--xlarge.clll-input--grouped.clll-input--hascustomprefix .clll-input__input{padding-left:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--grouped.clll-input--hasiconsuffix .clll-input__input,.clll-input.clll-input--xlarge.clll-input--grouped.clll-input--hascustomsuffix .clll-input__input{padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--color .clll-input__input-container>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-input.clll-input--xlarge.clll-input--color .clll-input__input-container .clll-input__input{border-radius:var(--clll-rounded-full);height:var(--clll-unit-9_5);width:var(--clll-unit-9_5)}.clll-input.clll-input--xlarge.clll-input--color .clll-input__input-container .clll-input__selected-color{font-size:var(--clll-unit-5);line-height:var(--clll-unit-7_5)}.clll-input.clll-input--grouped.clll-input--hasiconprefix .clll-input__input-container,.clll-input.clll-input--grouped.clll-input--hascustomprefix .clll-input__input-container{padding-left:0}.clll-input.clll-input--grouped.clll-input--hasiconsuffix .clll-input__input-container,.clll-input.clll-input--grouped.clll-input--hascustomsuffix .clll-input__input-container{padding-right:0}.clll-input.clll-input--grouped.clll-input--hascharcounter .clll-input__input-suffix{border-top-right-radius:0;border-bottom-right-radius:0;padding-right:0}.clll-input.clll-input--grouped.clll-input--hascharcounter .clll-input__char-counter{border-top-right-radius:var(--clll-rounded-xs);border-bottom-right-radius:var(--clll-rounded-xs)}.clll-input.clll-input--grouped .clll-input__input{border:0;outline:none}.clll-input.clll-input--hassuffix.clll-input--hascharcounter .clll-input__input-suffix,.clll-input.clll-input--hassuffix.clll-input--hascharcounter .clll-input__input-suffix:not(.clll-input__input-suffix--string){padding-right:0}.clll-input.clll-input--fluid,.clll-input.clll-input--fluid .clll-input__input-container,.clll-input.clll-input--fluid .clll-input__input-container .clll-input__input{width:100%}.clll-input.clll-input--vertical{flex-direction:column}.clll-input.clll-input--vertical.clll-input--haslabel>:not([hidden])~:not([hidden]){margin-top:var(--clll-unit-1_5)}.clll-input.clll-input--horizontal.clll-input--haslabel{flex-direction:row;align-items:center;flex-wrap:wrap}.clll-input.clll-input--horizontal.clll-input--haslabel .clll-input__label,.clll-input.clll-input--horizontal.clll-input--haslabel .clll-input__input-container{width:50%}.clll-input.clll-input--hidden .clll-input__input-container{display:none}.clll-input.clll-input--file .clll-input__input-container .clll-input__input{cursor:pointer;white-space:nowrap}.clll-input.clll-input--file .clll-input__input-container .clll-input__input::file-selector-button{cursor:pointer;border:0}.clll-input.clll-input--file.clll-input--readonly .clll-input__input{pointer-events:none;cursor:not-allowed}.clll-input.clll-input--color .clll-input__input-container .clll-input__input{cursor:pointer;border-radius:var(--clll-rounded-full)}.clll-input.clll-input--color .clll-input__input-container .clll-input__input-border-control{overflow:hidden;border-radius:var(--clll-rounded-full);background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>');width:auto}.clll-input.clll-input--color .clll-input__input-container .clll-input__selected-color{font-family:monospace;-webkit-font-smoothing:antialiased}.clll-input.clll-input--color.clll-input--disabled .clll-input__input{cursor:default}.clll-input.clll-input--color.clll-input--readonly .clll-input__input{pointer-events:none;cursor:not-allowed}.clll-input.clll-input--hascharcounter .clll-input__char-counter{pointer-events:none;justify-content:flex-end;max-width:100px;box-sizing:border-box;flex:1;position:relative}.clll-input ::-webkit-color-swatch-wrapper{padding:0}.clll-input ::-webkit-color-swatch{border:0}