@codeandfunction/callaloo 3.15.2 → 3.16.0

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

@@ -90,33 +90,33 @@ declare const _default: import('vue').DefineComponent<{
     pattern: string;
     variant: CLColorVariants.Outline | CLColorVariants.Ghost;
     borderRadius: CLBorderRadius;
+    fluid: boolean;
+    rounded: boolean;
     testId: string;
     type: CLInputTypes;
-    required: boolean;
-    prefix: string | CLIconNames;
     onFocus: CLGenericFocusFunction;
     onBlur: CLGenericFocusFunction;
     onChange: CLGenericFunction;
     onInput: CLGenericInputFunction;
+    size: CLSizes;
+    required: boolean;
+    prefix: string | CLIconNames;
     ariaLabel: string;
     busy: boolean;
-    rounded: boolean;
-    fluid: boolean;
     disabled: boolean;
     pill: string;
-    size: CLSizes;
     placeholder: string;
     orientation: CLOrientation;
     readonly: boolean;
     messages: string[];
     messageType: CLColors;
+    maxLength: number;
+    grouped: boolean;
+    suffix: string | CLIconNames;
     autoComplete: boolean;
     charCounter: boolean;
-    grouped: boolean;
-    maxLength: number;
     minLength: number;
     spellCheck: boolean;
-    suffix: string | CLIconNames;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     'input-elem': HTMLInputElement;
 }, HTMLDivElement>;

package/dist/components/Form/CLInput/CLInputColorTools.vue.d.ts

@@ -0,0 +1,29 @@
+import { CLSizes } from '../../../index.ts';
+export interface CLInputColorToolsProps {
+    /** Whether color was copied */
+    copied?: boolean;
+    /** Initial color value for reset */
+    initialValue?: string;
+    /** Current color value */
+    modelValue?: string | number;
+    /** Size for buttons and icons */
+    size?: CLSizes;
+    /** Test ID for testing purposes */
+    testId?: string;
+}
+declare const _default: import('vue').DefineComponent<CLInputColorToolsProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    copy: () => any;
+    reset: (value: string | number | undefined) => any;
+    "update:copied": (copied: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<CLInputColorToolsProps> & Readonly<{
+    onCopy?: (() => any) | undefined;
+    onReset?: ((value: string | number | undefined) => any) | undefined;
+    "onUpdate:copied"?: ((copied: boolean) => any) | undefined;
+}>, {
+    testId: string;
+    size: CLSizes;
+    modelValue: string | number;
+    copied: boolean;
+    initialValue: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;

package/dist/components/Form/CLInput/CLInputPill.vue.d.ts

@@ -0,0 +1,14 @@
+import { CLColors } from '../../../types';
+export interface CLInputPillProps {
+    /** Color of the pill */
+    color?: CLColors;
+    /** The pill label text */
+    label: string;
+    /** Test ID for testing purposes */
+    testId?: string;
+}
+declare const _default: import('vue').DefineComponent<CLInputPillProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLInputPillProps> & Readonly<{}>, {
+    color: CLColors;
+    testId: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;

package/dist/components/Form/CLInput/CLInputPrefix.vue.d.ts

@@ -0,0 +1,20 @@
+import { CLIconNames, CLSizes } from '../../../index.ts';
+export interface CLInputPrefixProps {
+    /** The border radius size to apply to the prefix */
+    borderRadius?: string;
+    /** Whether input is grouped */
+    grouped?: boolean;
+    /** The prefix content - icon name or text string */
+    prefix: string | CLIconNames;
+    /** Size for icon rendering */
+    size?: CLSizes;
+    /** Test ID for testing purposes */
+    testId?: string;
+}
+declare const _default: import('vue').DefineComponent<CLInputPrefixProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLInputPrefixProps> & Readonly<{}>, {
+    borderRadius: string;
+    testId: string;
+    size: CLSizes;
+    grouped: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;

package/dist/components/Form/CLInput/CLInputSuffix.vue.d.ts

@@ -0,0 +1,20 @@
+import { CLIconNames, CLSizes } from '../../../index.ts';
+export interface CLInputSuffixProps {
+    /** The border radius size to apply to the suffix */
+    borderRadius?: string;
+    /** Whether input is grouped */
+    grouped?: boolean;
+    /** The suffix content - icon name or text string */
+    suffix: string | CLIconNames;
+    /** Size for icon rendering */
+    size?: CLSizes;
+    /** Test ID for testing purposes */
+    testId?: string;
+}
+declare const _default: import('vue').DefineComponent<CLInputSuffixProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLInputSuffixProps> & Readonly<{}>, {
+    borderRadius: string;
+    testId: string;
+    size: CLSizes;
+    grouped: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;

package/dist/components/Form/CLInput/index.d.ts

@@ -1,4 +1,19 @@
 import { default as CLInputComponent } from './CLInput.vue';
-export { CLInputComponent as CLInput };
-export default CLInputComponent;
-export type CLInput = InstanceType<typeof CLInputComponent>;
+import { default as CLInputPrefixComponent } from './CLInputPrefix.vue';
+import { default as CLInputSuffixComponent } from './CLInputSuffix.vue';
+import { default as CLInputPillComponent } from './CLInputPill.vue';
+import { default as CLInputColorToolsComponent } from './CLInputColorTools.vue';
+declare const CLInput: typeof CLInputComponent & {
+    Prefix: typeof CLInputPrefixComponent;
+    Suffix: typeof CLInputSuffixComponent;
+    Pill: typeof CLInputPillComponent;
+    ColorTools: typeof CLInputColorToolsComponent;
+};
+export { CLInput };
+export default CLInput;
+export type CLInput = InstanceType<typeof CLInput>;
+export type CLInputPrefix = InstanceType<typeof CLInputPrefixComponent>;
+export type CLInputSuffix = InstanceType<typeof CLInputSuffixComponent>;
+export type CLInputPill = InstanceType<typeof CLInputPillComponent>;
+export type CLInputColorTools = InstanceType<typeof CLInputColorToolsComponent>;
+export type { CLInputProps } from './CLInput.vue';

package/dist/components/Form/CLRadioButton/CLRadioButton.css

@@ -0,0 +1 @@
+:root{--clll-unit-0: 0;--clll-unit-0_5: .125rem;--clll-unit-1: .25rem;--clll-unit-1_5: .375rem;--clll-unit-2: .5rem;--clll-unit-2_5: .625rem;--clll-unit-3: .75rem;--clll-unit-3_5: .875rem;--clll-unit-4: 1rem;--clll-unit-4_5: 1.125rem;--clll-unit-5: 1.25rem;--clll-unit-5_5: 1.375rem;--clll-unit-6: 1.5rem;--clll-unit-6_5: 1.625rem;--clll-unit-7: 1.75rem;--clll-unit-7_5: 1.875rem;--clll-unit-8: 2rem;--clll-unit-8_5: 2.125rem;--clll-unit-9_5: 2.375rem;--clll-unit-10: 2.5rem;--clll-unit-10_5: 2.625rem;--clll-unit-12: 3rem;--clll-unit-14: 3.5rem;--clll-unit-14_5: 3.625rem;--clll-unit-18: 4.5rem}.form-addon-flex{display:flex;align-items:center;justify-content:center;pointer-events:none;user-select:none}.form-addon-flex--left{left:0}.form-addon-flex--right{right:0}.form-addon-flex--icon{z-index:10;box-sizing:border-box}.form-addon-flex--string{position:relative}.form-addon-radius--left-full{border-top-left-radius:var(--clll-rounded-full);border-bottom-left-radius:var(--clll-rounded-full)}.form-addon-radius--right-full{border-top-right-radius:var(--clll-rounded-full);border-bottom-right-radius:var(--clll-rounded-full)}.form-addon-radius--left-lg{border-top-left-radius:var(--clll-rounded-lg);border-bottom-left-radius:var(--clll-rounded-lg)}.form-addon-radius--right-lg{border-top-right-radius:var(--clll-rounded-lg);border-bottom-right-radius:var(--clll-rounded-lg)}.form-addon-radius--left-md{border-top-left-radius:var(--clll-rounded-md);border-bottom-left-radius:var(--clll-rounded-md)}.form-addon-radius--right-md{border-top-right-radius:var(--clll-rounded-md);border-bottom-right-radius:var(--clll-rounded-md)}.form-addon-radius--left-sm{border-top-left-radius:var(--clll-rounded-sm);border-bottom-left-radius:var(--clll-rounded-sm)}.form-addon-radius--right-sm{border-top-right-radius:var(--clll-rounded-sm);border-bottom-right-radius:var(--clll-rounded-sm)}.form-addon-radius--left-xs{border-top-left-radius:var(--clll-rounded-xs);border-bottom-left-radius:var(--clll-rounded-xs)}.form-addon-radius--right-xs{border-top-right-radius:var(--clll-rounded-xs);border-bottom-right-radius:var(--clll-rounded-xs)}.form-addon-radius--left-xl{border-top-left-radius:var(--clll-rounded-xl);border-bottom-left-radius:var(--clll-rounded-xl)}.form-addon-radius--right-xl{border-top-right-radius:var(--clll-rounded-xl);border-bottom-right-radius:var(--clll-rounded-xl)}.form-addon-radius--left-2xl{border-top-left-radius:var(--clll-rounded-2xl);border-bottom-left-radius:var(--clll-rounded-2xl)}.form-addon-radius--right-2xl{border-top-right-radius:var(--clll-rounded-2xl);border-bottom-right-radius:var(--clll-rounded-2xl)}.form-addon-radius--left-3xl{border-top-left-radius:var(--clll-rounded-3xl);border-bottom-left-radius:var(--clll-rounded-3xl)}.form-addon-radius--right-3xl{border-top-right-radius:var(--clll-rounded-3xl);border-bottom-right-radius:var(--clll-rounded-3xl)}.form-addon-radius--left-none{border-top-left-radius:0;border-bottom-left-radius:0}.form-addon-radius--right-none{border-top-right-radius:0;border-bottom-right-radius:0}.form-control-flex{display:inline-flex;align-items:center;justify-content:center;position:relative}.form-counter-flex{display:flex;align-items:center;justify-content:flex-end;max-width:100px;box-sizing:border-box;flex:1;position:relative;pointer-events:none;user-select:none}.form-select-icon-flex{position:absolute;top:0;right:0;height:100%;display:flex;align-items:center;pointer-events:none}:root{--clll-rounded-full: 9999px;--clll-rounded-none: 0;--clll-rounded-xs: var(--clll-unit-1);--clll-rounded-sm: var(--clll-unit-2);--clll-rounded-md: var(--clll-unit-3);--clll-rounded-lg: var(--clll-unit-4);--clll-rounded-xl: var(--clll-unit-5);--clll-rounded-2xl: var(--clll-unit-6);--clll-rounded-3xl: var(--clll-unit-7);--clll-px-xs: var(--clll-unit-1_5);--clll-px-sm: var(--clll-unit-2);--clll-px-md: var(--clll-unit-2_5);--clll-px-lg: var(--clll-unit-3);--clll-px-xl: var(--clll-unit-3_5);--clll-px-2xl: var(--clll-unit-4);--clll-px-3xl: var(--clll-unit-4_5);--clll-px-s-xs: calc(var(--clll-px-xs) * .5);--clll-px-s-sm: calc(var(--clll-px-sm) * .5);--clll-py-xs: calc(var(--clll-unit-1) - 1px);--clll-py-sm: calc(var(--clll-unit-1_5) - 1px);--clll-py-md: calc(var(--clll-unit-2) - 1px);--clll-py-lg: var(--clll-unit-2);--clll-py-xl: var(--clll-unit-2_5);--clll-py-2xl: var(--clll-unit-3);--clll-py-3xl: var(--clll-unit-3_5);--clll-py-4xl: var(--clll-unit-4);--clll-py-s-xs: calc(var(--clll-py-xs) * .5);--clll-z-index-10: 10}.clll-radiobutton{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-radiobutton .clll-radiobutton__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-radiobutton .clll-radiobutton__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-radiobutton .clll-radiobutton__radiobutton-container{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;overflow:visible}.clll-radiobutton .clll-radiobutton__radiobutton-container .clll-radiobutton__radiobutton-frame .clll-radiobutton__radiobutton:not(:checked)+.clll-radiobutton__indicator{display:none}.clll-radiobutton .clll-radiobutton__indicator{position:absolute;display:inline-flex;background-color:#fff}.clll-radiobutton .clll-radiobutton__radiobutton{display:inline-block;appearance:none;border-width:1px;cursor:pointer}.clll-radiobutton.clll-radiobutton--rounded .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-full)}.clll-radiobutton.clll-radiobutton--rounded:not(.clll-radiobutton--rounded-none) .clll-radiobutton__indicator{border-radius:var(--clll-rounded-full)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-full .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-full)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-lg .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-lg)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-md .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-md)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-sm .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-sm)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-xs .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-xs)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-xl .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-xl)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-2xl .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-2xl)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-3xl .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-3xl)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-none .clll-radiobutton__radiobutton{border-radius:0}.clll-radiobutton.clll-radiobutton--tiny .clll-radiobutton__radiobutton-container .clll-radiobutton__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-1_5)}.clll-radiobutton.clll-radiobutton--tiny .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-checkbox__checkbox,.clll-radiobutton.clll-radiobutton--tiny .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton{width:var(--clll-unit-4);height:var(--clll-unit-4)}.clll-radiobutton.clll-radiobutton--tiny .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__indicator{width:var(--clll-unit-1_5);height:var(--clll-unit-1_5)}.clll-radiobutton.clll-radiobutton--small .clll-radiobutton__radiobutton-container .clll-radiobutton__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-radiobutton.clll-radiobutton--small .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-checkbox__checkbox,.clll-radiobutton.clll-radiobutton--small .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton{width:var(--clll-unit-5);height:var(--clll-unit-5)}.clll-radiobutton.clll-radiobutton--small .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__indicator{width:var(--clll-unit-2);height:var(--clll-unit-2)}.clll-radiobutton.clll-radiobutton--medium .clll-radiobutton__radiobutton-container .clll-radiobutton__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2_5)}.clll-radiobutton.clll-radiobutton--medium .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-checkbox__checkbox,.clll-radiobutton.clll-radiobutton--medium .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton{width:var(--clll-unit-6);height:var(--clll-unit-6)}.clll-radiobutton.clll-radiobutton--medium .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__indicator{width:var(--clll-unit-2_5);height:var(--clll-unit-2_5)}.clll-radiobutton.clll-radiobutton--large .clll-radiobutton__radiobutton-container .clll-radiobutton__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3)}.clll-radiobutton.clll-radiobutton--large .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-checkbox__checkbox,.clll-radiobutton.clll-radiobutton--large .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton{width:var(--clll-unit-7);height:var(--clll-unit-7)}.clll-radiobutton.clll-radiobutton--large .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__indicator{width:var(--clll-unit-3);height:var(--clll-unit-3)}.clll-radiobutton.clll-radiobutton--xlarge .clll-radiobutton__radiobutton-container .clll-radiobutton__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3)}.clll-radiobutton.clll-radiobutton--xlarge .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-checkbox__checkbox,.clll-radiobutton.clll-radiobutton--xlarge .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton{width:var(--clll-unit-8);height:var(--clll-unit-8)}.clll-radiobutton.clll-radiobutton--xlarge .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__indicator{width:var(--clll-unit-3_5);height:var(--clll-unit-3_5)}

package/dist/components/Form/CLRadioButton/CLRadioButton.js

@@ -0,0 +1,132 @@
+import './CLRadioButton.css';
+import { defineComponent as k, mergeModels as x, useModel as T, useTemplateRef as h, computed as f, createBlock as m, openBlock as c, withCtx as $, createElementVNode as n, createCommentVNode as y, normalizeClass as d, unref as u, withDirectives as R, vModelRadio as q, createTextVNode as V, toDisplayString as M } from "vue";
+import { _ as S, c as z, a as F } from "../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-xm2qDJGJ.js";
+import { _ as N } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-CTc6UiQV.js";
+import { CLSizes as s, CLTextTypes as i, CLColorVariants as w, CLColors as D } from "../../../index.js";
+const I = ["data-testid"], X = ["for"], E = ["id", "aria-label", "checked", "disabled", "name", "value", "required"], A = /* @__PURE__ */ k({
+  name: "CLRadioButton",
+  __name: "CLRadioButton",
+  props: /* @__PURE__ */ x({
+    ariaLabel: {},
+    borderRadius: {},
+    busy: { type: Boolean },
+    checked: { type: Boolean },
+    color: { default: D.Neutral },
+    disabled: { type: Boolean },
+    form: {},
+    id: {},
+    label: {},
+    messages: {},
+    messageType: {},
+    name: {},
+    required: { type: Boolean },
+    rounded: { type: Boolean, default: !0 },
+    size: { default: s.Small },
+    testId: { default: "clll-radiobutton" },
+    value: { type: [String, Number, Boolean] },
+    variant: { default: w.Outline },
+    onBlur: {},
+    onChange: {},
+    onFocus: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e, { expose: C }) {
+    const g = {
+      [s.Tiny]: i.Small,
+      [s.Small]: i.Medium,
+      [s.Medium]: i.Medium,
+      [s.Large]: i.Large,
+      [s.XL]: i.XL
+    }, l = e, a = "clll-radiobutton", b = T(e, "modelValue"), r = h("radiobutton-ref"), v = () => {
+      r.value && r.value.focus();
+    }, B = f(() => [
+      a,
+      l.borderRadius ? `${a}--${l.borderRadius}` : "",
+      l.busy ? `${a}--busy` : `${a}--ready`,
+      `${a}--${l.color}`,
+      `${a}--${l.size}`,
+      l.disabled ? `${a}--disabled` : `${a}--active`,
+      l.label ? `${a}--haslabel` : "",
+      l.messageType ? `${a}--${l.messageType}` : "",
+      l.rounded ? `${a}--rounded` : `${a}--box`,
+      l.required ? `${a}--required` : `${a}--optional`
+    ]), L = f(() => [
+      `${a}__radiobutton-container`,
+      `${a}--${l.variant}`
+    ]);
+    return C({
+      radiobuttonRef: r
+    }), (H, t) => (c(), m(S, null, {
+      default: $(() => [
+        n("span", {
+          class: d([u(B), u(z)({ color: e.color, component: "radiobutton", disabled: e.disabled || e.busy, variant: e.variant })]),
+          "data-testid": e.testId
+        }, [
+          n("span", {
+            class: d(u(L)),
+            onClick: v
+          }, [
+            n("label", {
+              for: e.id,
+              class: d(`${a}__label`)
+            }, [
+              n("span", {
+                class: d([`${a}__radiobutton-frame`, "form-control-flex"])
+              }, [
+                R(n("input", {
+                  id: e.id,
+                  ref: "radiobutton-ref",
+                  "onUpdate:modelValue": t[0] || (t[0] = (o) => b.value = o),
+                  "aria-label": e.ariaLabel,
+                  class: d(`${a}__radiobutton`),
+                  checked: e.checked,
+                  disabled: e.disabled || e.busy,
+                  name: e.name,
+                  value: e.value,
+                  required: e.required,
+                  type: "radio",
+                  onBlur: t[1] || (t[1] = //@ts-ignore
+                  (...o) => e.onBlur && e.onBlur(...o)),
+                  onChange: t[2] || (t[2] = //@ts-ignore
+                  (...o) => e.onChange && e.onChange(...o)),
+                  onFocus: t[3] || (t[3] = //@ts-ignore
+                  (...o) => e.onFocus && e.onFocus(...o))
+                }, null, 42, E), [
+                  [q, b.value]
+                ]),
+                n("span", {
+                  class: d(`${a}__indicator`)
+                }, null, 2)
+              ], 2),
+              e.label ? (c(), m(u(N), {
+                key: 0,
+                as: "span",
+                type: g[e.size],
+                class: d(e.required ? `${a}__label--required` : "")
+              }, {
+                default: $(() => [
+                  V(M(e.label), 1)
+                ]),
+                _: 1
+              }, 8, ["type", "class"])) : y("", !0)
+            ], 10, X)
+          ], 2)
+        ], 10, I),
+        e.id ? (c(), m(F, {
+          key: 0,
+          id: e.id,
+          messages: e.messages,
+          "message-type": e.messageType
+        }, null, 8, ["id", "messages", "message-type"])) : y("", !0)
+      ]),
+      _: 1
+    }));
+  }
+});
+export {
+  A as CLRadioButton,
+  A as default
+};

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

@@ -56,8 +56,8 @@ declare const _default: import('vue').DefineComponent<{
 }>, {
     color: CLColors;
     variant: CLColorVariants.Outline | CLColorVariants.Ghost;
-    testId: string;
     rounded: boolean;
+    testId: string;
     size: CLSizes;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     'radiobutton-ref': HTMLInputElement;

package/dist/components/Form/CLSelect/CLSelect.css

@@ -0,0 +1 @@
+:root{--clll-unit-0: 0;--clll-unit-0_5: .125rem;--clll-unit-1: .25rem;--clll-unit-1_5: .375rem;--clll-unit-2: .5rem;--clll-unit-2_5: .625rem;--clll-unit-3: .75rem;--clll-unit-3_5: .875rem;--clll-unit-4: 1rem;--clll-unit-4_5: 1.125rem;--clll-unit-5: 1.25rem;--clll-unit-5_5: 1.375rem;--clll-unit-6: 1.5rem;--clll-unit-6_5: 1.625rem;--clll-unit-7: 1.75rem;--clll-unit-7_5: 1.875rem;--clll-unit-8: 2rem;--clll-unit-8_5: 2.125rem;--clll-unit-9_5: 2.375rem;--clll-unit-10: 2.5rem;--clll-unit-10_5: 2.625rem;--clll-unit-12: 3rem;--clll-unit-14: 3.5rem;--clll-unit-14_5: 3.625rem;--clll-unit-18: 4.5rem}.form-addon-flex{display:flex;align-items:center;justify-content:center;pointer-events:none;user-select:none}.form-addon-flex--left{left:0}.form-addon-flex--right{right:0}.form-addon-flex--icon{z-index:10;box-sizing:border-box}.form-addon-flex--string{position:relative}.form-addon-radius--left-full{border-top-left-radius:var(--clll-rounded-full);border-bottom-left-radius:var(--clll-rounded-full)}.form-addon-radius--right-full{border-top-right-radius:var(--clll-rounded-full);border-bottom-right-radius:var(--clll-rounded-full)}.form-addon-radius--left-lg{border-top-left-radius:var(--clll-rounded-lg);border-bottom-left-radius:var(--clll-rounded-lg)}.form-addon-radius--right-lg{border-top-right-radius:var(--clll-rounded-lg);border-bottom-right-radius:var(--clll-rounded-lg)}.form-addon-radius--left-md{border-top-left-radius:var(--clll-rounded-md);border-bottom-left-radius:var(--clll-rounded-md)}.form-addon-radius--right-md{border-top-right-radius:var(--clll-rounded-md);border-bottom-right-radius:var(--clll-rounded-md)}.form-addon-radius--left-sm{border-top-left-radius:var(--clll-rounded-sm);border-bottom-left-radius:var(--clll-rounded-sm)}.form-addon-radius--right-sm{border-top-right-radius:var(--clll-rounded-sm);border-bottom-right-radius:var(--clll-rounded-sm)}.form-addon-radius--left-xs{border-top-left-radius:var(--clll-rounded-xs);border-bottom-left-radius:var(--clll-rounded-xs)}.form-addon-radius--right-xs{border-top-right-radius:var(--clll-rounded-xs);border-bottom-right-radius:var(--clll-rounded-xs)}.form-addon-radius--left-xl{border-top-left-radius:var(--clll-rounded-xl);border-bottom-left-radius:var(--clll-rounded-xl)}.form-addon-radius--right-xl{border-top-right-radius:var(--clll-rounded-xl);border-bottom-right-radius:var(--clll-rounded-xl)}.form-addon-radius--left-2xl{border-top-left-radius:var(--clll-rounded-2xl);border-bottom-left-radius:var(--clll-rounded-2xl)}.form-addon-radius--right-2xl{border-top-right-radius:var(--clll-rounded-2xl);border-bottom-right-radius:var(--clll-rounded-2xl)}.form-addon-radius--left-3xl{border-top-left-radius:var(--clll-rounded-3xl);border-bottom-left-radius:var(--clll-rounded-3xl)}.form-addon-radius--right-3xl{border-top-right-radius:var(--clll-rounded-3xl);border-bottom-right-radius:var(--clll-rounded-3xl)}.form-addon-radius--left-none{border-top-left-radius:0;border-bottom-left-radius:0}.form-addon-radius--right-none{border-top-right-radius:0;border-bottom-right-radius:0}.form-control-flex{display:inline-flex;align-items:center;justify-content:center;position:relative}.form-counter-flex{display:flex;align-items:center;justify-content:flex-end;max-width:100px;box-sizing:border-box;flex:1;position:relative;pointer-events:none;user-select:none}.form-select-icon-flex{position:absolute;top:0;right:0;height:100%;display:flex;align-items:center;pointer-events:none}:root{--clll-rounded-full: 9999px;--clll-rounded-none: 0;--clll-rounded-xs: var(--clll-unit-1);--clll-rounded-sm: var(--clll-unit-2);--clll-rounded-md: var(--clll-unit-3);--clll-rounded-lg: var(--clll-unit-4);--clll-rounded-xl: var(--clll-unit-5);--clll-rounded-2xl: var(--clll-unit-6);--clll-rounded-3xl: var(--clll-unit-7);--clll-px-xs: var(--clll-unit-1_5);--clll-px-sm: var(--clll-unit-2);--clll-px-md: var(--clll-unit-2_5);--clll-px-lg: var(--clll-unit-3);--clll-px-xl: var(--clll-unit-3_5);--clll-px-2xl: var(--clll-unit-4);--clll-px-3xl: var(--clll-unit-4_5);--clll-px-s-xs: calc(var(--clll-px-xs) * .5);--clll-px-s-sm: calc(var(--clll-px-sm) * .5);--clll-py-xs: calc(var(--clll-unit-1) - 1px);--clll-py-sm: calc(var(--clll-unit-1_5) - 1px);--clll-py-md: calc(var(--clll-unit-2) - 1px);--clll-py-lg: var(--clll-unit-2);--clll-py-xl: var(--clll-unit-2_5);--clll-py-2xl: var(--clll-unit-3);--clll-py-3xl: var(--clll-unit-3_5);--clll-py-4xl: var(--clll-unit-4);--clll-py-s-xs: calc(var(--clll-py-xs) * .5);--clll-z-index-10: 10}.clll-select{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-select.clll-select--haslabel .clll-select__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-1)}.clll-select .clll-select__select-container{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;overflow:visible}.clll-select .clll-select__select-container .clll-select__select{display:inline-block;appearance:none;font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased}.clll-select .clll-select__icon{pointer-events:none}.clll-select.clll-select--rounded .clll-select__select-container,.clll-select.clll-select--rounded .clll-select__select{border-radius:var(--clll-rounded-xs)}.clll-select.clll-select--rounded.clll-select--rounded-full .clll-select__select-container{border-radius:var(--clll-rounded-full)}.clll-select.clll-select--rounded.clll-select--rounded-lg .clll-select__select-container{border-radius:var(--clll-rounded-lg)}.clll-select.clll-select--rounded.clll-select--rounded-md .clll-select__select-container{border-radius:var(--clll-rounded-md)}.clll-select.clll-select--rounded.clll-select--rounded-sm .clll-select__select-container{border-radius:var(--clll-rounded-sm)}.clll-select.clll-select--rounded.clll-select--rounded-xs .clll-select__select-container{border-radius:var(--clll-rounded-xs)}.clll-select.clll-select--rounded.clll-select--rounded-xl .clll-select__select-container{border-radius:var(--clll-rounded-xl)}.clll-select.clll-select--rounded.clll-select--rounded-2xl .clll-select__select-container{border-radius:var(--clll-rounded-2xl)}.clll-select.clll-select--rounded.clll-select--rounded-3xl .clll-select__select-container{border-radius:var(--clll-rounded-3xl)}.clll-select.clll-select--rounded.clll-select--rounded-none .clll-select__select-container{border-radius:0}.clll-select.clll-select--rounded.clll-select--rounded-full .clll-select__select{border-radius:var(--clll-rounded-full)}.clll-select.clll-select--rounded.clll-select--rounded-lg .clll-select__select{border-radius:var(--clll-rounded-lg)}.clll-select.clll-select--rounded.clll-select--rounded-md .clll-select__select{border-radius:var(--clll-rounded-md)}.clll-select.clll-select--rounded.clll-select--rounded-sm .clll-select__select{border-radius:var(--clll-rounded-sm)}.clll-select.clll-select--rounded.clll-select--rounded-xs .clll-select__select{border-radius:var(--clll-rounded-xs)}.clll-select.clll-select--rounded.clll-select--rounded-xl .clll-select__select{border-radius:var(--clll-rounded-xl)}.clll-select.clll-select--rounded.clll-select--rounded-2xl .clll-select__select{border-radius:var(--clll-rounded-2xl)}.clll-select.clll-select--rounded.clll-select--rounded-3xl .clll-select__select{border-radius:var(--clll-rounded-3xl)}.clll-select.clll-select--rounded.clll-select--rounded-none .clll-select__select{border-radius:0}.clll-select.clll-select--tiny .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5);padding:var(--clll-py-xs) var(--clll-px-xs);padding-right:var(--clll-unit-5)}.clll-select.clll-select--tiny .clll-select__select-container .clll-select__icon{padding-right:var(--clll-unit-1)}.clll-select.clll-select--small .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6);padding:var(--clll-py-sm) var(--clll-px-sm);padding-right:var(--clll-unit-7)}.clll-select.clll-select--small .clll-select__select-container .clll-select__icon{padding-right:var(--clll-unit-2)}.clll-select.clll-select--medium .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5);padding:var(--clll-py-md) var(--clll-px-md);padding-right:var(--clll-unit-10)}.clll-select.clll-select--medium .clll-select__select-container .clll-select__icon{padding-right:var(--clll-unit-3)}.clll-select.clll-select--large .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7);padding:var(--clll-py-lg) var(--clll-px-lg);padding-right:var(--clll-unit-14)}.clll-select.clll-select--large .clll-select__select-container .clll-select__icon{padding-right:var(--clll-unit-3_5)}.clll-select.clll-select--xlarge .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-5);line-height:var(--clll-unit-7_5);padding:var(--clll-py-xl) var(--clll-px-xl);padding-right:var(--clll-unit-18)}.clll-select.clll-select--xlarge .clll-select__select-container .clll-select__icon{padding-right:var(--clll-unit-4)}.clll-select.clll-select--fluid,.clll-select.clll-select--fluid .clll-select__select-container,.clll-select.clll-select--fluid .clll-select__select-container .clll-select__select{width:100%}.clll-select.clll-select--vertical{flex-direction:column}.clll-select.clll-select--vertical.clll-select--haslabel>:not([hidden])~:not([hidden]){margin-top:var(--clll-unit-1_5)}.clll-select.clll-select--horizontal.clll-select--haslabel{flex-direction:row;align-items:center;flex-wrap:wrap}.clll-select.clll-select--horizontal.clll-select--haslabel .clll-select__label,.clll-select.clll-select--horizontal.clll-select--haslabel .clll-select__select-container{width:50%}.clll-select.clll-select--hidden{display:none}

package/dist/components/Form/CLSelect/CLSelect.js

@@ -0,0 +1,137 @@
+import './CLSelect.css';
+import { defineComponent as B, mergeModels as h, useModel as S, useTemplateRef as q, computed as x, createBlock as f, openBlock as o, withCtx as T, createElementVNode as d, createCommentVNode as b, normalizeClass as r, unref as u, withDirectives as V, createElementBlock as $, Fragment as k, renderList as M, toDisplayString as F, vModelSelect as I, createVNode as N } from "vue";
+import { _ as R, s as D, a as w } from "../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-xm2qDJGJ.js";
+import { _ as E } from "../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-ORvye4vi.js";
+import { _ as H } from "../../../chunks/CLIcon.vue_vue_type_style_index_0_lang-zZ4zGuBt.js";
+import { CLSizes as n, CLIconSizes as s, CLOrientation as y, CLIconNames as O, CLColorVariants as P, CLColors as U } from "../../../index.js";
+const X = ["data-testid"], j = ["id", "aria-label", "disabled", "name", "placeholder", "form", "required"], A = ["value", "selected", "disabled"], Z = /* @__PURE__ */ B({
+  name: "CLSelect",
+  __name: "CLSelect",
+  props: /* @__PURE__ */ h({
+    ariaLabel: {},
+    borderRadius: {},
+    busy: { type: Boolean },
+    color: { default: U.Neutral },
+    disabled: { type: Boolean },
+    fluid: { type: Boolean, default: !1 },
+    form: {},
+    id: {},
+    label: {},
+    messages: {},
+    messageType: {},
+    name: {},
+    onBlur: {},
+    onChange: {},
+    onFocus: {},
+    orientation: { default: y.Vertical },
+    options: {},
+    placeholder: {},
+    required: { type: Boolean },
+    rounded: { type: Boolean, default: !0 },
+    size: { default: n.Small },
+    testId: { default: "clll-select" },
+    variant: { default: P.Outline }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e, { expose: C }) {
+    const g = {
+      [n.Tiny]: s.Tiny,
+      [n.Small]: s.Tiny,
+      [n.Medium]: s.Small,
+      [n.Large]: s.Medium,
+      [n.XL]: s.Medium
+    }, a = e, l = "clll-select", m = S(e, "modelValue"), c = q("select-ref"), v = () => {
+      c.value && c.value.focus();
+    }, L = x(() => [
+      l,
+      a.borderRadius ? `${l}--${a.borderRadius}` : "",
+      a.busy ? `${l}--busy` : `${l}--ready`,
+      `${l}--${a.color}`,
+      `${l}--${a.size}`,
+      `${l}--${a.variant}`,
+      a.disabled || a.busy ? `${l}--disabled` : `${l}--active`,
+      a.fluid || a.orientation === y.Horizontal ? `${l}--fluid` : `${l}--fixed`,
+      a.label ? `${l}--haslabel` : "",
+      a.messageType ? `${l}--${a.messageType}` : "",
+      a.orientation ? `${l}--${a.orientation}` : "",
+      a.rounded ? `${l}--rounded` : `${l}--box`,
+      a.required ? `${l}--required` : `${l}--optional`
+    ]);
+    return C({
+      selectRef: c
+    }), (G, i) => (o(), f(R, {
+      fluid: e.fluid,
+      orientation: e.orientation
+    }, {
+      default: T(() => [
+        d("span", {
+          class: r([u(L), u(D)({ color: e.color, component: "input", disabled: e.disabled || e.busy, variant: e.variant })]),
+          "data-testid": e.testId
+        }, [
+          e.label ? (o(), f(E, {
+            key: 0,
+            "css-prefix": l,
+            "html-for": e.id,
+            label: e.label,
+            required: e.required,
+            size: e.size
+          }, null, 8, ["html-for", "label", "required", "size"])) : b("", !0),
+          d("span", {
+            class: r(`${l}__select-container`),
+            onClick: v
+          }, [
+            V(d("select", {
+              id: e.id,
+              ref: "select-ref",
+              "onUpdate:modelValue": i[0] || (i[0] = (t) => m.value = t),
+              "aria-label": e.ariaLabel,
+              class: r(`${l}__select`),
+              disabled: e.disabled || e.busy,
+              name: e.name,
+              placeholder: e.placeholder,
+              form: e.form,
+              required: e.required,
+              onBlur: i[1] || (i[1] = //@ts-ignore
+              (...t) => e.onBlur && e.onBlur(...t)),
+              onChange: i[2] || (i[2] = //@ts-ignore
+              (...t) => e.onChange && e.onChange(...t)),
+              onFocus: i[3] || (i[3] = //@ts-ignore
+              (...t) => e.onFocus && e.onFocus(...t))
+            }, [
+              e.options ? (o(!0), $(k, { key: 0 }, M(e.options, (t, z) => (o(), $("option", {
+                key: `${e.id}-option-${z}`,
+                value: t.value,
+                selected: t.value === m.value,
+                disabled: t.disabled
+              }, F(t.label), 9, A))), 128)) : b("", !0)
+            ], 42, j), [
+              [I, m.value]
+            ]),
+            d("span", {
+              class: r([`${l}__icon`, "form-select-icon-flex"])
+            }, [
+              N(u(H), {
+                name: u(O).ChevronDown,
+                size: g[e.size]
+              }, null, 8, ["name", "size"])
+            ], 2)
+          ], 2)
+        ], 10, X),
+        e.id ? (o(), f(w, {
+          key: 0,
+          id: e.id,
+          messages: e.messages,
+          "message-type": e.messageType
+        }, null, 8, ["id", "messages", "message-type"])) : b("", !0)
+      ]),
+      _: 1
+    }, 8, ["fluid", "orientation"]));
+  }
+});
+export {
+  Z as CLSelect,
+  Z as default
+};

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

@@ -1,4 +1,4 @@
-import { CLBorderRadius, CLColors, CLColorVariants, CLGenericFocusFunction, CLGenericFunction, CLOption, CLOrientation, CLSizes } from '../../../index.ts';
+import { CLBorderRadius, CLColors, CLColorVariants, CLGenericFocusFunction, CLGenericFunction, CLOption, CLOrientation, CLSizes } from '../../../types';
 export interface CLSelectProps {
     /** Sets the aria-label on the input. It should be used when there is no label present. */
     ariaLabel?: string;
@@ -24,6 +24,12 @@ export interface CLSelectProps {
     messageType?: CLColors;
     /** A string representing name of the select. The name is submitted along with the select value when the form it belongs to is submitted. */
     name: string;
+    /** A callback function which handles when the select loses focus. */
+    onBlur?: CLGenericFocusFunction;
+    /** A callback function which handles when the select is clicked. */
+    onChange?: CLGenericFunction;
+    /** A callback function which handles when the select gains focus. */
+    onFocus?: CLGenericFocusFunction;
     /** Sets the label position to be above or to the left of the form element. The property can be one of `CLOrientation` */
     orientation?: CLOrientation;
     /** A list of options */
@@ -40,12 +46,6 @@ export interface CLSelectProps {
     testId?: string;
     /** Sets the color variant. The property can be one of `CLColorVariants.Outline | CLColorVariants.Ghost`, e.g `CLColorVariants.Outline`. */
     variant?: CLColorVariants.Outline | CLColorVariants.Ghost;
-    /** A callback function which handles when the select loses focus. */
-    onBlur?: CLGenericFocusFunction;
-    /** A callback function which handles when the select is clicked. */
-    onChange?: CLGenericFunction;
-    /** A callback function which handles when the select gains focus. */
-    onFocus?: CLGenericFocusFunction;
 }
 declare const _default: import('vue').DefineComponent<{
     modelValue?: string | number | null;
@@ -60,9 +60,9 @@ declare const _default: import('vue').DefineComponent<{
 }>, {
     color: CLColors;
     variant: CLColorVariants.Outline | CLColorVariants.Ghost;
-    testId: string;
-    rounded: boolean;
     fluid: boolean;
+    rounded: boolean;
+    testId: string;
     size: CLSizes;
     orientation: CLOrientation;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

package/dist/components/Form/CLTextArea/CLTextArea.css

@@ -0,0 +1 @@
+:root{--clll-unit-0: 0;--clll-unit-0_5: .125rem;--clll-unit-1: .25rem;--clll-unit-1_5: .375rem;--clll-unit-2: .5rem;--clll-unit-2_5: .625rem;--clll-unit-3: .75rem;--clll-unit-3_5: .875rem;--clll-unit-4: 1rem;--clll-unit-4_5: 1.125rem;--clll-unit-5: 1.25rem;--clll-unit-5_5: 1.375rem;--clll-unit-6: 1.5rem;--clll-unit-6_5: 1.625rem;--clll-unit-7: 1.75rem;--clll-unit-7_5: 1.875rem;--clll-unit-8: 2rem;--clll-unit-8_5: 2.125rem;--clll-unit-9_5: 2.375rem;--clll-unit-10: 2.5rem;--clll-unit-10_5: 2.625rem;--clll-unit-12: 3rem;--clll-unit-14: 3.5rem;--clll-unit-14_5: 3.625rem;--clll-unit-18: 4.5rem}.form-addon-flex{display:flex;align-items:center;justify-content:center;pointer-events:none;user-select:none}.form-addon-flex--left{left:0}.form-addon-flex--right{right:0}.form-addon-flex--icon{z-index:10;box-sizing:border-box}.form-addon-flex--string{position:relative}.form-addon-radius--left-full{border-top-left-radius:var(--clll-rounded-full);border-bottom-left-radius:var(--clll-rounded-full)}.form-addon-radius--right-full{border-top-right-radius:var(--clll-rounded-full);border-bottom-right-radius:var(--clll-rounded-full)}.form-addon-radius--left-lg{border-top-left-radius:var(--clll-rounded-lg);border-bottom-left-radius:var(--clll-rounded-lg)}.form-addon-radius--right-lg{border-top-right-radius:var(--clll-rounded-lg);border-bottom-right-radius:var(--clll-rounded-lg)}.form-addon-radius--left-md{border-top-left-radius:var(--clll-rounded-md);border-bottom-left-radius:var(--clll-rounded-md)}.form-addon-radius--right-md{border-top-right-radius:var(--clll-rounded-md);border-bottom-right-radius:var(--clll-rounded-md)}.form-addon-radius--left-sm{border-top-left-radius:var(--clll-rounded-sm);border-bottom-left-radius:var(--clll-rounded-sm)}.form-addon-radius--right-sm{border-top-right-radius:var(--clll-rounded-sm);border-bottom-right-radius:var(--clll-rounded-sm)}.form-addon-radius--left-xs{border-top-left-radius:var(--clll-rounded-xs);border-bottom-left-radius:var(--clll-rounded-xs)}.form-addon-radius--right-xs{border-top-right-radius:var(--clll-rounded-xs);border-bottom-right-radius:var(--clll-rounded-xs)}.form-addon-radius--left-xl{border-top-left-radius:var(--clll-rounded-xl);border-bottom-left-radius:var(--clll-rounded-xl)}.form-addon-radius--right-xl{border-top-right-radius:var(--clll-rounded-xl);border-bottom-right-radius:var(--clll-rounded-xl)}.form-addon-radius--left-2xl{border-top-left-radius:var(--clll-rounded-2xl);border-bottom-left-radius:var(--clll-rounded-2xl)}.form-addon-radius--right-2xl{border-top-right-radius:var(--clll-rounded-2xl);border-bottom-right-radius:var(--clll-rounded-2xl)}.form-addon-radius--left-3xl{border-top-left-radius:var(--clll-rounded-3xl);border-bottom-left-radius:var(--clll-rounded-3xl)}.form-addon-radius--right-3xl{border-top-right-radius:var(--clll-rounded-3xl);border-bottom-right-radius:var(--clll-rounded-3xl)}.form-addon-radius--left-none{border-top-left-radius:0;border-bottom-left-radius:0}.form-addon-radius--right-none{border-top-right-radius:0;border-bottom-right-radius:0}.form-control-flex{display:inline-flex;align-items:center;justify-content:center;position:relative}.form-counter-flex{display:flex;align-items:center;justify-content:flex-end;max-width:100px;box-sizing:border-box;flex:1;position:relative;pointer-events:none;user-select:none}.form-select-icon-flex{position:absolute;top:0;right:0;height:100%;display:flex;align-items:center;pointer-events:none}:root{--clll-rounded-full: 9999px;--clll-rounded-none: 0;--clll-rounded-xs: var(--clll-unit-1);--clll-rounded-sm: var(--clll-unit-2);--clll-rounded-md: var(--clll-unit-3);--clll-rounded-lg: var(--clll-unit-4);--clll-rounded-xl: var(--clll-unit-5);--clll-rounded-2xl: var(--clll-unit-6);--clll-rounded-3xl: var(--clll-unit-7);--clll-px-xs: var(--clll-unit-1_5);--clll-px-sm: var(--clll-unit-2);--clll-px-md: var(--clll-unit-2_5);--clll-px-lg: var(--clll-unit-3);--clll-px-xl: var(--clll-unit-3_5);--clll-px-2xl: var(--clll-unit-4);--clll-px-3xl: var(--clll-unit-4_5);--clll-px-s-xs: calc(var(--clll-px-xs) * .5);--clll-px-s-sm: calc(var(--clll-px-sm) * .5);--clll-py-xs: calc(var(--clll-unit-1) - 1px);--clll-py-sm: calc(var(--clll-unit-1_5) - 1px);--clll-py-md: calc(var(--clll-unit-2) - 1px);--clll-py-lg: var(--clll-unit-2);--clll-py-xl: var(--clll-unit-2_5);--clll-py-2xl: var(--clll-unit-3);--clll-py-3xl: var(--clll-unit-3_5);--clll-py-4xl: var(--clll-unit-4);--clll-py-s-xs: calc(var(--clll-py-xs) * .5);--clll-z-index-10: 10}.clll-textarea{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;flex-direction:column;align-items:flex-start;overflow:visible}.clll-textarea .clll-textarea__input-container{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;overflow:visible}.clll-textarea .clll-textarea__input{resize:none;display:inline-block;appearance:none;background-color:#fff;font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased}.clll-textarea.clll-textarea--resizable .clll-textarea__input{resize:both}.clll-textarea.clll-textarea--rounded .clll-textarea__input-container,.clll-textarea.clll-textarea--rounded .clll-textarea__input{border-radius:var(--clll-rounded-xs)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-full .clll-textarea__input-container{border-radius:var(--clll-rounded-full)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-lg .clll-textarea__input-container{border-radius:var(--clll-rounded-lg)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-md .clll-textarea__input-container{border-radius:var(--clll-rounded-md)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-sm .clll-textarea__input-container{border-radius:var(--clll-rounded-sm)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-xs .clll-textarea__input-container{border-radius:var(--clll-rounded-xs)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-xl .clll-textarea__input-container{border-radius:var(--clll-rounded-xl)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-2xl .clll-textarea__input-container{border-radius:var(--clll-rounded-2xl)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-3xl .clll-textarea__input-container{border-radius:var(--clll-rounded-3xl)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-none .clll-textarea__input-container{border-radius:0}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-full .clll-textarea__input{border-radius:var(--clll-rounded-full)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-lg .clll-textarea__input{border-radius:var(--clll-rounded-lg)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-md .clll-textarea__input{border-radius:var(--clll-rounded-md)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-sm .clll-textarea__input{border-radius:var(--clll-rounded-sm)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-xs .clll-textarea__input{border-radius:var(--clll-rounded-xs)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-xl .clll-textarea__input{border-radius:var(--clll-rounded-xl)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-2xl .clll-textarea__input{border-radius:var(--clll-rounded-2xl)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-3xl .clll-textarea__input{border-radius:var(--clll-rounded-3xl)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-none .clll-textarea__input{border-radius:0}.clll-textarea.clll-textarea--tiny .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5);padding:var(--clll-py-xs) var(--clll-px-sm)}.clll-textarea.clll-textarea--small .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6);padding:var(--clll-py-sm) var(--clll-px-md)}.clll-textarea.clll-textarea--medium .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5);padding:var(--clll-py-md) var(--clll-px-lg)}.clll-textarea.clll-textarea--large .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7);padding:var(--clll-py-lg) var(--clll-px-2xl)}.clll-textarea.clll-textarea--xlarge .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-5);line-height:var(--clll-unit-7_5);padding:var(--clll-py-2xl) var(--clll-px-3xl)}.clll-textarea.clll-textarea--fluid,.clll-textarea.clll-textarea--fluid .clll-textarea__input-container,.clll-textarea.clll-textarea--fluid .clll-textarea__input-container .clll-textarea__input{width:100%}.clll-textarea.clll-textarea--vertical{flex-direction:column}.clll-textarea.clll-textarea--vertical.clll-textarea--haslabel>:not([hidden])~:not([hidden]){margin-top:var(--clll-unit-1_5)}.clll-textarea.clll-textarea--horizontal.clll-textarea--haslabel{flex-direction:row;flex-wrap:wrap}.clll-textarea.clll-textarea--horizontal.clll-textarea--haslabel .clll-textarea__label{padding-top:var(--clll-unit-1_5)}.clll-textarea.clll-textarea--horizontal.clll-textarea--haslabel .clll-textarea__label,.clll-textarea.clll-textarea--horizontal.clll-textarea--haslabel .clll-textarea__input-container{width:50%}.clll-textarea.clll-textarea--hascharcounter>:not([hidden])~:not([hidden]){margin-top:var(--clll-unit-1)}