npm - @codeandfunction/callaloo - Versions diffs - 3.15.2 → 3.16.0 - Mend

@codeandfunction/callaloo 3.15.2 → 3.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (142) hide show

package/dist/components/Form/CLTextArea/CLTextArea.js ADDED Viewed

@@ -0,0 +1,149 @@
+import './CLTextArea.css';
+import { defineComponent as g, mergeModels as $, useTemplateRef as x, useModel as C, computed as L, createBlock as i, openBlock as r, withCtx as B, createElementVNode as u, createCommentVNode as s, normalizeClass as m, unref as c, withDirectives as z, vModelText as v } from "vue";
+import { _ as k, i as T, a as q } from "../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-xm2qDJGJ.js";
+import { _ as V } from "../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-ORvye4vi.js";
+import { _ as w } from "../../../chunks/CLFormCharCounter.vue_vue_type_style_index_0_lang-CJ4VrvmR.js";
+import { CLOrientation as f, CLCharCounterLayout as I, CLColorVariants as F, CLSizes as R, CLColors as M } from "../../../index.js";
+const A = ["data-testid"], N = ["id", "aria-label", "autocomplete", "cols", "disabled", "form", "maxlength", "minlength", "name", "pattern", "placeholder", "readonly", "required", "spellcheck", "rows"], U = /* @__PURE__ */ g({
+  name: "CLTextArea",
+  __name: "CLTextArea",
+  props: /* @__PURE__ */ $({
+    ariaLabel: {},
+    autoComplete: { type: Boolean },
+    borderRadius: {},
+    busy: { type: Boolean },
+    charCounter: { type: Boolean },
+    color: { default: M.Neutral },
+    cols: {},
+    disabled: { type: Boolean },
+    fluid: { type: Boolean, default: !1 },
+    form: {},
+    id: {},
+    label: {},
+    maxLength: {},
+    messages: {},
+    messageType: {},
+    minLength: {},
+    name: {},
+    onBlur: {},
+    onChange: {},
+    onFocus: {},
+    onInput: {},
+    orientation: { default: f.Vertical },
+    pattern: {},
+    placeholder: {},
+    readonly: { type: Boolean },
+    required: { type: Boolean },
+    resizable: { type: Boolean, default: !1 },
+    rounded: { type: Boolean, default: !0 },
+    rows: {},
+    size: { default: R.Small },
+    spellCheck: { type: Boolean },
+    testId: { default: "clll-textarea" },
+    variant: { default: F.Outline }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e, { expose: h }) {
+    const t = e, a = "clll-textarea", d = x("textarea-ref"), o = C(e, "modelValue"), y = () => {
+      d.value && d.value.focus();
+    }, b = L(() => [
+      a,
+      t.borderRadius ? `${a}--${t.borderRadius}` : "",
+      t.busy ? `${a}--busy` : `${a}--ready`,
+      `${a}--${t.color}`,
+      `${a}--${t.size}`,
+      `${a}--${t.variant}`,
+      t.disabled || t.busy ? `${a}--disabled` : `${a}--active`,
+      t.charCounter && t.maxLength ? `${a}--hascharcounter` : "",
+      t.fluid || t.orientation === f.Horizontal ? `${a}--fluid` : `${a}--fixed`,
+      t.label ? `${a}--haslabel` : "",
+      t.messageType ? `${a}--${t.messageType}` : "",
+      t.orientation ? `${a}--${t.orientation}` : "",
+      t.resizable ? `${a}--resizable` : "",
+      t.readonly ? `${a}--readonly` : `${a}--writeable`,
+      t.rounded ? `${a}--rounded` : `${a}--box`,
+      t.required ? `${a}--required` : `${a}--optional`
+    ]);
+    return h({
+      textareaRef: d
+    }), (S, l) => (r(), i(k, {
+      fluid: e.fluid,
+      "has-char-counter": !!(e.charCounter && e.maxLength),
+      orientation: e.orientation
+    }, {
+      default: B(() => [
+        u("span", {
+          class: m([c(b), c(T)({ color: e.color, component: "textarea", disabled: e.disabled || e.busy, readonly: e.readonly, variant: e.variant })]),
+          "data-testid": e.testId
+        }, [
+          e.label ? (r(), i(V, {
+            key: 0,
+            "css-prefix": a,
+            "html-for": e.id,
+            label: e.label,
+            required: e.required,
+            size: e.size
+          }, null, 8, ["html-for", "label", "required", "size"])) : s("", !0),
+          u("span", {
+            class: m(`${a}__input-container`),
+            onClick: y
+          }, [
+            z(u("textarea", {
+              id: e.id,
+              ref: "textarea-ref",
+              "onUpdate:modelValue": l[0] || (l[0] = (n) => o.value = n),
+              "aria-label": e.ariaLabel,
+              autocomplete: e.autoComplete ? "on" : "off",
+              class: m(`${a}__input`),
+              cols: e.cols,
+              disabled: e.disabled || e.busy,
+              form: e.form,
+              maxlength: e.maxLength,
+              minlength: e.minLength,
+              name: e.name,
+              pattern: e.pattern,
+              placeholder: e.placeholder,
+              readonly: e.readonly,
+              required: e.required,
+              spellcheck: e.spellCheck,
+              rows: e.rows,
+              onBlur: l[1] || (l[1] = //@ts-ignore
+              (...n) => e.onBlur && e.onBlur(...n)),
+              onChange: l[2] || (l[2] = //@ts-ignore
+              (...n) => e.onChange && e.onChange(...n)),
+              onFocus: l[3] || (l[3] = //@ts-ignore
+              (...n) => e.onFocus && e.onFocus(...n)),
+              onInput: l[4] || (l[4] = //@ts-ignore
+              (...n) => e.onInput && e.onInput(...n))
+            }, null, 42, N), [
+              [v, o.value]
+            ])
+          ], 2),
+          e.charCounter && e.maxLength ? (r(), i(w, {
+            key: 1,
+            "css-prefix": a,
+            "current-length": o.value ? o.value.toString().length : 0,
+            "max-length": e.maxLength,
+            color: e.color,
+            size: e.size,
+            layout: c(I).Block
+          }, null, 8, ["current-length", "max-length", "color", "size", "layout"])) : s("", !0)
+        ], 10, A),
+        e.id ? (r(), i(q, {
+          key: 0,
+          id: e.id,
+          messages: e.messages,
+          "message-type": e.messageType
+        }, null, 8, ["id", "messages", "message-type"])) : s("", !0)
+      ]),
+      _: 1
+    }, 8, ["fluid", "has-char-counter", "orientation"]));
+  }
+});
+export {
+  U as CLTextArea,
+  U as default
+};

package/dist/components/Form/CLTextArea/CLTextArea.vue.d.ts CHANGED Viewed

@@ -80,9 +80,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;
     resizable: boolean;

package/dist/components/Form/index.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
-import { CLCheckbox } from './CLCheckbox';
-import { CLInput } from './CLInput';
-import { CLRadioButton } from './CLRadioButton';
-import { CLSelect } from './CLSelect';
-import { CLTextArea } from './CLTextArea';
-export { CLCheckbox, CLInput, CLRadioButton, CLSelect, CLTextArea };
+export { CLCheckbox } from './CLCheckbox';
+export { CLInput } from './CLInput';
+export { CLRadioButton } from './CLRadioButton';
+export { CLSelect } from './CLSelect';
+export { CLTextArea } from './CLTextArea';

package/dist/components/Indicators/CLBadge/CLBadge.css ADDED Viewed

@@ -0,0 +1 @@

package/dist/components/Indicators/CLBadge/CLBadge.js ADDED Viewed

@@ -0,0 +1,40 @@
+import './CLBadge.css';
+import { defineComponent as c, computed as n, createElementBlock as m, openBlock as u, normalizeClass as s, unref as r, createElementVNode as f, toDisplayString as b } from "vue";
+import { CLColorVariants as g, CLColors as p } from "../../../index.js";
+import { b as C } from "../../../chunks/utils-D2P_fCSp.js";
+const v = ["data-testid"], h = /* @__PURE__ */ c({
+  name: "CLBadge",
+  __name: "CLBadge",
+  props: {
+    borderRadius: {},
+    color: { default: p.Neutral },
+    elevated: { type: Boolean, default: !1 },
+    label: {},
+    limit: {},
+    testId: { default: "clll-badge" },
+    variant: { default: g.Soft }
+  },
+  setup(a) {
+    const e = a, t = "clll-badge", d = n(() => {
+      const l = e.limit ?? 0, o = e.label ?? "";
+      return l && o.toString().length > l ? `${o.toString().slice(0, l)}+` : o;
+    }), i = n(() => [
+      t,
+      e.borderRadius ? `${t}--${e.borderRadius}` : "",
+      e.elevated ? `${t}--elevated` : "",
+      `${t}--${e.color}--${e.variant}`
+    ]);
+    return (l, o) => (u(), m("div", {
+      class: s([r(i), r(C)({ color: a.color, variant: a.variant })]),
+      "data-testid": a.testId
+    }, [
+      f("span", {
+        class: s(`${t}__count`)
+      }, b(r(d)), 3)
+    ], 10, v));
+  }
+});
+export {
+  h as CLBadge,
+  h as default
+};

package/dist/components/Indicators/CLBadge/CLBadge.vue.d.ts CHANGED Viewed

@@ -18,7 +18,7 @@ export interface CLBadgeProps {
 declare const _default: import('vue').DefineComponent<CLBadgeProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLBadgeProps> & Readonly<{}>, {
     color: CLColors;
     variant: CLColorVariants;
-    elevated: boolean;
     testId: string;
+    elevated: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/Indicators/CLBanner/CLBanner.css ADDED Viewed

@@ -0,0 +1 @@

package/dist/components/Indicators/CLBanner/CLBanner.js ADDED Viewed

@@ -0,0 +1,147 @@
+import './CLBanner.css';
+import { defineComponent as v, useCssVars as h, computed as x, createBlock as l, openBlock as n, unref as a, withCtx as s, createElementVNode as m, normalizeClass as r, createElementBlock as b, createCommentVNode as o, createTextVNode as f, toDisplayString as c, createVNode as $ } from "vue";
+import { _ as B } from "../../../chunks/CLA11yButton.vue_vue_type_style_index_0_lang-COGwQtRU.js";
+import { _ as C } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang-CqgySW52.js";
+import { _ as S } from "../../../chunks/CLHeading.vue_vue_type_style_index_0_lang-CbHdHW2E.js";
+import { _ as k } from "../../../chunks/CLSkeleton.vue_vue_type_style_index_0_lang-D7_swcoA.js";
+import { _ as z } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-CTc6UiQV.js";
+import { CLColorVariants as d, CLColors as D, CLAlign as T, CLHeadingTypes as N, CLTextTypes as V, CLSizes as w, CLIconSizes as A, CLIconNames as I } from "../../../index.js";
+import { c as R } from "../../../chunks/utils-D2P_fCSp.js";
+const E = ["data-testid"], O = /* @__PURE__ */ v({
+  name: "CLBanner",
+  __name: "CLBanner",
+  props: {
+    actionLabel: {},
+    align: { default: T.Left },
+    ariaLabel: {},
+    bordered: { type: Boolean, default: !0 },
+    borderRadius: {},
+    busy: { type: Boolean, default: !1 },
+    color: { default: D.Neutral },
+    height: { default: "auto" },
+    message: {},
+    onAction: {},
+    onClick: {},
+    onDismiss: {},
+    rounded: { type: Boolean, default: !0 },
+    testId: { default: "clll-banner" },
+    title: {},
+    width: { default: "100%" },
+    variant: { default: d.Soft }
+  },
+  setup(e) {
+    h((u) => ({
+      v42ada450: u.width,
+      v46a4d956: u.height
+    }));
+    const i = e, t = "clll-banner", g = x(() => [
+      t,
+      i.actionLabel ? `${t}--actionable` : "",
+      i.busy ? `${t}--busy` : `${t}--ready`,
+      i.bordered && i.variant !== d.Ghost ? `${t}--bordered` : "",
+      i.borderRadius ? `${t}--${i.borderRadius}` : "",
+      i.onDismiss ? `${t}--dismissable` : "",
+      `${t}--${i.color}--${i.variant}`,
+      `${t}--align-${i.align}`,
+      i.rounded ? `${t}--rounded` : `${t}--box`
+    ]);
+    return (u, y) => (n(), l(a(B), {
+      color: e.color,
+      enabled: !!(e.onClick && e.ariaLabel),
+      rounded: e.rounded
+    }, {
+      default: s(() => [
+        m("div", {
+          class: r([a(g), a(R)({ color: e.color, variant: e.variant })]),
+          "data-testid": e.testId
+        }, [
+          m("div", {
+            class: r(`${t}__content`)
+          }, [
+            m("div", {
+              class: r(`${t}__nested_content`)
+            }, [
+              e.busy ? (n(), l(a(k), {
+                key: 0,
+                height: "28px",
+                "test-id": `${t}__skeleton-title`
+              }, null, 8, ["test-id"])) : o("", !0),
+              e.busy ? (n(), l(a(k), {
+                key: 1,
+                width: "70%",
+                height: "20px",
+                "test-id": `${t}__skeleton-message`
+              }, null, 8, ["test-id"])) : o("", !0),
+              e.title && !e.busy ? (n(), l(a(S), {
+                key: 2,
+                align: e.align,
+                color: e.color,
+                type: a(N).Section
+              }, {
+                default: s(() => [
+                  f(c(e.title), 1)
+                ]),
+                _: 1
+              }, 8, ["align", "color", "type"])) : o("", !0),
+              e.message && !e.busy ? (n(), l(a(z), {
+                key: 3,
+                align: e.align,
+                color: e.color,
+                type: a(V).Summary
+              }, {
+                default: s(() => [
+                  f(c(e.message), 1)
+                ]),
+                _: 1
+              }, 8, ["align", "color", "type"])) : o("", !0)
+            ], 2),
+            e.onAction && e.actionLabel ? (n(), b("div", {
+              key: 0,
+              class: r(`${t}__action-button`)
+            }, [
+              $(a(C), {
+                color: e.color,
+                "border-radius": e.borderRadius,
+                "on-click": e.onAction,
+                "test-id": `${t}__action-button`,
+                variant: e.variant === a(d).Solid ? a(d).Soft : a(d).Solid
+              }, {
+                default: s(() => [
+                  f(c(e.actionLabel), 1)
+                ]),
+                _: 1
+              }, 8, ["color", "border-radius", "on-click", "test-id", "variant"])
+            ], 2)) : o("", !0)
+          ], 2),
+          e.onDismiss ? (n(), b("div", {
+            key: 0,
+            class: r(`${t}__dismiss-button`)
+          }, [
+            $(a(C), {
+              "aria-label": "Dismiss banner",
+              color: e.color,
+              "icon-before": a(I).Delete,
+              "icon-size": a(A).Tiny,
+              "on-click": e.onDismiss,
+              size: a(w).Tiny,
+              "test-id": `${t}__dismiss-button`,
+              variant: e.variant
+            }, null, 8, ["color", "icon-before", "icon-size", "on-click", "size", "test-id", "variant"])
+          ], 2)) : o("", !0),
+          e.onClick && e.ariaLabel ? (n(), b("button", {
+            key: 1,
+            class: "sr-only",
+            "data-expand-click-area": "",
+            onClick: y[0] || (y[0] = //@ts-ignore
+            (...L) => e.onClick && e.onClick(...L))
+          }, c(e.ariaLabel), 1)) : o("", !0)
+        ], 10, E)
+      ]),
+      _: 1
+    }, 8, ["color", "enabled", "rounded"]));
+  }
+});
+export {
+  O as CLBanner,
+  O as default
+};

package/dist/components/Indicators/CLBanner/CLBanner.vue.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { CLAlign, CLBorderRadius, CLColors, CLColorVariants, CLGenericFunction } from '../../../index.ts';
+import { CLAlign, CLBorderRadius, CLColors, CLColorVariants, CLGenericFunction } from '../../../types';
 export interface CLBannerProps {
     /** The action label text to be displayed. */
     actionLabel?: string;
@@ -40,10 +40,10 @@ declare const _default: import('vue').DefineComponent<CLBannerProps, {}, {}, {},
     width: string;
     height: string;
     variant: CLColorVariants.Ghost | CLColorVariants.Outline | CLColorVariants.Soft | CLColorVariants.Solid;
+    rounded: boolean;
     testId: string;
     align: CLAlign;
-    bordered: boolean;
     busy: boolean;
-    rounded: boolean;
+    bordered: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/Indicators/CLPill/CLPill.css ADDED Viewed

@@ -0,0 +1 @@

package/dist/components/Indicators/CLPill/CLPill.js ADDED Viewed

@@ -0,0 +1,6 @@
+import './CLPill.css';
+import { _ as s } from "../../../chunks/CLPill.vue_vue_type_style_index_0_lang-BXGTb6A6.js";
+export {
+  s as CLPill,
+  s as default
+};

package/dist/components/Indicators/CLPill/CLPill.vue.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { CLGenericFunction, CLIconNames, CLColors, CLColorVariants } from '../../../index.ts';
+import { CLGenericFunction, CLIconNames, CLColors, CLColorVariants } from '../../../types';
 export interface CLPillProps {
     /** Sets the color of the Pill. The property can be one of `CLColors`, e.g. `CLColors.Primary`. */
     color?: CLColors;
@@ -22,8 +22,8 @@ export interface CLPillProps {
 declare const _default: import('vue').DefineComponent<CLPillProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLPillProps> & Readonly<{}>, {
     color: CLColors;
     variant: CLColorVariants;
-    elevated: boolean;
-    testId: string;
     rounded: boolean;
+    testId: string;
+    elevated: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/Indicators/CLProgress/CLProgress.css ADDED Viewed

@@ -0,0 +1 @@

package/dist/components/Indicators/CLProgress/CLProgress.js ADDED Viewed

@@ -0,0 +1,6 @@
+import './CLProgress.css';
+import { _ as a } from "../../../chunks/CLProgress.vue_vue_type_style_index_0_lang-5-cwF-oh.js";
+export {
+  a as CLProgress,
+  a as default
+};

package/dist/components/Indicators/CLProgress/CLProgress.vue.d.ts CHANGED Viewed

@@ -23,10 +23,10 @@ declare const _default: import('vue').DefineComponent<{
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
     color: CLColors;
-    testId: string;
     rounded: boolean;
+    testId: string;
     size: CLSizes;
-    inverted: boolean;
     status: boolean;
+    inverted: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/Loading/CLSkeleton/CLSkeleton.css ADDED Viewed

@@ -0,0 +1 @@

package/dist/components/Loading/CLSkeleton/CLSkeleton.js ADDED Viewed

@@ -0,0 +1,6 @@
+import './CLSkeleton.css';
+import { _ as e } from "../../../chunks/CLSkeleton.vue_vue_type_style_index_0_lang-D7_swcoA.js";
+export {
+  e as CLSkeleton,
+  e as default
+};

package/dist/components/Loading/CLSkeleton/CLSkeleton.vue.d.ts CHANGED Viewed

@@ -14,7 +14,7 @@ export interface CLSkeletonProps {
 declare const _default: import('vue').DefineComponent<CLSkeletonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLSkeletonProps> & Readonly<{}>, {
     width: string;
     height: string;
-    testId: string;
     rounded: boolean;
+    testId: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/Loading/CLSpinner/CLSpinner.css ADDED Viewed

@@ -0,0 +1 @@

package/dist/components/Loading/CLSpinner/CLSpinner.js ADDED Viewed

@@ -0,0 +1,6 @@
+import './CLSpinner.css';
+import { _ as r } from "../../../chunks/CLSpinner.vue_vue_type_style_index_0_lang-CLccujHE.js";
+export {
+  r as CLSpinner,
+  r as default
+};

package/dist/components/Loading/CLSpinner/CLSpinner.vue.d.ts CHANGED Viewed

@@ -14,8 +14,8 @@ export interface CLSpinnerProps {
 declare const _default: import('vue').DefineComponent<CLSpinnerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLSpinnerProps> & Readonly<{}>, {
     color: CLColors;
     testId: string;
-    align: CLAlign;
     size: CLSizes;
+    align: CLAlign;
     position: CLPosition;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/Modals/CLModal/CLModal.css ADDED Viewed

@@ -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-prevent-scroll{overflow:initial}.clll-modal{position:fixed;inset:0;height:100dvh;z-index:var(--v1b3cde5d)}.clll-modal .clll-modal__window{position:relative;overflow-x:hidden;overflow-y:auto;height:100%;padding:0 var(--clll-px-md);z-index:var(--v9756aaa0)}.clll-modal .clll-modal__window .clll-modal__close-button{position:absolute;top:var(--clll-unit-2);right:var(--clll-unit-2);z-index:1}.clll-modal .clll-modal__window .clll-modal__content{border-radius:0;display:flex;flex-direction:column;height:auto;position:relative;margin:var(--clll-unit-6) auto;box-shadow:0 0 var(--clll-unit-3) var(--clll-unit-0_5) #0000001f,0 0 var(--clll-unit-1) var(--clll-unit-0_5) #00000005}.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--rounded-full,.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--rounded-lg,.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--rounded-md,.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--rounded-sm,.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--rounded-xs,.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--rounded-xl,.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--rounded-2xl,.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--rounded-3xl,.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--rounded-none,.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--rounded-none .clll-{border-radius:0}@media (min-width: 640px){.clll-modal .clll-modal__window .clll-modal__content{margin:var(--clll-unit-12) auto;max-width:var(--v7a09ccea)}}.clll-modal .clll-modal__window .clll-modal__content .clll-modal__content__header{padding:var(--clll-unit-6)}.clll-modal .clll-modal__window .clll-modal__content .clll-modal__content__header .clll-modal__content__title{align-items:start;display:flex;width:100%}.clll-modal .clll-modal__window .clll-modal__content .clll-modal__content__header .clll-modal__content__title .clll-modal__content__header__container{flex:1 1 0%}.clll-modal .clll-modal__window .clll-modal__content .clll-modal__content__scroller{display:flex;flex:1;flex-direction:column;overflow-y:auto}@media (min-width: 640px){.clll-modal .clll-modal__window .clll-modal__content .clll-modal__content__scroller{overflow-y:hidden}}.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--has-title .clll-modal__content__header .clll-modal__content__header__title,.clll-modal .clll-modal__window .clll-modal__content .clll-modal__content__body{flex:1}.clll-modal .clll-modal__window .clll-modal__content .clll-modal__content__body,.clll-modal .clll-modal__window .clll-modal__content .clll-modal__content__footer{padding:var(--clll-unit-6)}.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--has-title .clll-modal__content__header .clll-modal__content__header__title{flex:1}.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--has-no-title .clll-modal__content__header .clll-modal__content__title{justify-content:flex-end;padding-bottom:0}.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--has-no-body .clll-modal__content__body,.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--has-no-header .clll-modal__content__header,.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--has-no-footer .clll-modal__content__footer{display:none;padding:0}.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--has-close-button .clll-modal__content__body,.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--has-close-button .clll-modal__content__footer{padding:var(--clll-unit-6)}.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--has-no-title:not(.clll-modal__content--has-header) .clll-modal__content__body,.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--has-no-title:not(.clll-modal__content--has-header) .clll-modal__content__footer,.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--has-no-header .clll-modal__content__body,.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--has-no-header .clll-modal__content__footer{padding:var(--clll-unit-6) var(--clll-unit-12) var(--clll-unit-6) var(--clll-unit-6)}.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--has-no-title:not(.clll-modal__content--has-header).clll-modal__content--has-footer .clll-modal__content__body,.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--has-no-header.clll-modal__content--has-footer .clll-modal__content__body{padding-bottom:0}.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--has-title .clll-modal__content__body,.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--has-header .clll-modal__content__body{padding-top:0}.clll-modal .clll-modal__window .clll-modal__content.clll-modal__content--has-footer .clll-modal__content__body{padding-bottom:0}.clll-modal .clll-modal__window.clll-modal__window--fullscreen{padding:0}.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content{height:100%;margin:0;max-width:100%}@media (min-width: 640px){.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content{border-radius:0}}.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content .clll-modal__close-button{top:var(--clll-unit-2);right:var(--clll-unit-2)}.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content.clll-modal__content--has-no-title .clll-modal__close-button,.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content.clll-modal__content--has-no-header .clll-modal__close-button{right:var(--clll-unit-6)}@media (min-width: 1024px){.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content .clll-modal__content__header{padding:var(--clll-unit-6)}}.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content .clll-modal__content__body{flex:1}@media (min-width: 640px){.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content .clll-modal__content__body{overflow-y:auto;max-height:100%}}.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content .clll-modal__content__body,.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content .clll-modal__content__footer{padding:var(--clll-unit-6)}.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content.clll-modal__content--has-no-title:not(.clll-modal__content--has-header) .clll-modal__content__body,.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content.clll-modal__content--has-no-title:not(.clll-modal__content--has-header) .clll-modal__content__footer,.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content.clll-modal__content--has-no-header .clll-modal__content__body,.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content.clll-modal__content--has-no-header .clll-modal__content__footer{padding:var(--clll-unit-6) var(--clll-unit-14) var(--clll-unit-6) var(--clll-unit-6)}.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content.clll-modal__content--has-no-title:not(.clll-modal__content--has-header).clll-modal__content--has-footer .clll-modal__content__body,.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content.clll-modal__content--has-no-header.clll-modal__content--has-footer .clll-modal__content__body{padding-bottom:0}.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content.clll-modal__content--has-title .clll-modal__content__body,.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content.clll-modal__content--has-header .clll-modal__content__body{padding-top:0}.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content.clll-modal__content--has-footer .clll-modal__content__body{padding-bottom:0}.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content.clll-modal__content--has-no-close-button .clll-modal__content__body,.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content.clll-modal__content--has-no-close-button .clll-modal__content__footer{padding:var(--clll-unit-6)}@media (min-width: 1024px){.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content.clll-modal__content--has-no-close-button .clll-modal__content__body,.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content.clll-modal__content--has-no-close-button .clll-modal__content__footer{padding:var(--clll-unit-8)}}.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content.clll-modal__content--has-no-close-button.clll-modal__content--has-title .clll-modal__content__body,.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content.clll-modal__content--has-no-close-button.clll-modal__content--has-header .clll-modal__content__body{padding-top:0}.clll-modal .clll-modal__window.clll-modal__window--fullscreen .clll-modal__content.clll-modal__content--has-no-close-button.clll-modal__content--has-footer .clll-modal__content__body{padding-bottom:0}.clll-modal .clll-modal__overlay{position:fixed;inset:0;opacity:.4}