@arthurzakharov/ui-kit 1.0.6 → 1.0.7

package/dist/assets/card-image-DQ9c4G_r.css

@@ -0,0 +1 @@
+._CardImage_dw1xq_1{--font-size: 12px;--line-height: 14px;--img-size: 110px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--rm-ui-padding-xs)}._CardImageContent_dw1xq_13{width:135px;height:130px;padding:6px;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}._CardImageContent_dw1xq_13:hover{cursor:pointer}._CardImageTop_dw1xq_27{position:relative;flex-grow:1}._CardImageWrap_dw1xq_32{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--img-size);height:var(--img-size);background-repeat:no-repeat;background-size:700%}._CardImageBottom_dw1xq_43{flex-basis:calc(var(--line-height) * 2);display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:var(--rm-ui-padding-xs)}

package/dist/assets/card-text-fgHu9TyO.css

@@ -0,0 +1 @@
+._CardText_1eht8_1{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--rm-ui-padding-sm)}._CardTextLabel_1eht8_9{position:relative;padding:var(--rm-ui-padding-md) var(--rm-ui-padding-sm);flex-basis:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-xs)}._CardTextLabel_1eht8_9:hover{cursor:pointer}._CardTextChoice_1eht8_24{display:flex;flex-direction:row;align-items:center;justify-content:center}

package/dist/assets/checkbox-n_3O8ZLW.css

@@ -0,0 +1 @@
+._Checkbox_1l6ko_1{position:relative;display:inline-flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:var(--rm-ui-padding-xs)}._Checkbox_1l6ko_1:hover{cursor:pointer}._CheckboxChoice_1l6ko_14{position:relative;left:0;top:3px}._CheckboxContent_1l6ko_20{font-family:var(--rm-ui-font-family-regular),sans-serif;font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small);color:var(--rm-ui-color-primary)}._CheckboxContent_1l6ko_20 button{background-color:transparent;border:none;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:var(--rm-ui-color-action)}._CheckboxContent_1l6ko_20 button:hover{cursor:pointer;text-decoration:underline}

package/dist/assets/dropdown-DKR8xas9.css

@@ -0,0 +1 @@
+._Dropdown_152mp_1{--transition-time: .2s;--under-chevron: linear-gradient(90deg, rgba(255, 255, 255, 0) -10%, rgba(255, 255, 255, .5411764706) 25%, #fff 50%);--border-radius: 3px;position:relative;font-family:var(--rm-ui-font-family-regular),sans-serif;font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small);color:var(--rm-ui-color-primary);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-xxs)}._DropdownBorder_152mp_17{position:relative;min-height:60px;flex-grow:1;display:flex;align-items:center;justify-content:flex-start;padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm);overflow:hidden}._DropdownContent_152mp_28{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}._DropdownBorder_152mp_17:hover{cursor:pointer}._DropdownChevron_152mp_39{width:24px;height:24px;transition:transform var(--transition-time) ease-out}._DropdownChevron_152mp_39[data-open=false]{transform:rotate(0)}._DropdownChevron_152mp_39[data-open=true]{transform:rotate(180deg)}._DropdownChevronWrap_152mp_53{position:absolute;z-index:1;right:0;top:50%;transform:translateY(-50%);background:var(--under-chevron);border-radius:10px;width:80px;height:100%;padding-right:var(--rm-ui-padding-sm);display:flex;justify-content:flex-end;align-items:center}._DropdownBox_152mp_69{flex-grow:1;border-radius:10px;background-color:var(--rm-ui-grey-50)}._DropdownBoxVisible_152mp_75{display:block}._DropdownBoxHidden_152mp_79{display:none}._DropdownSearch_152mp_83{position:relative;border-bottom:1px var(--rm-ui-grey-300) solid;padding:var(--rm-ui-padding-sm)}._DropdownSearchVisible_152mp_89{display:block}._DropdownSearchHidden_152mp_93{display:none}._DropdownClose_152mp_97{border-top:1px var(--rm-ui-grey-300) solid;padding:var(--rm-ui-padding-sm);display:flex;flex-direction:row;align-items:center;justify-content:flex-end}._DropdownInput_152mp_106{width:100%;border-radius:10px;padding:var(--rm-ui-padding-xs) calc(var(--rm-ui-padding-sm) * 2 + 12px) var(--rm-ui-padding-xs) var(--rm-ui-padding-sm);border:1px var(--rm-ui-grey-300) solid;box-sizing:border-box;font-family:var(--rm-ui-font-family-regular),sans-serif;font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-primary);outline-color:var(--rm-ui-color-accent-primary)}._DropdownGlass_152mp_120{position:absolute;z-index:1;right:calc(var(--rm-ui-padding-sm) * 2);top:50%;transform:translateY(-50%);width:24px;height:24px;color:var(--rm-ui-grey-300)}._DropdownChoices_152mp_131{list-style:none;margin:0;padding:0;max-height:228px;overflow-y:scroll;border-radius:10px}._DropdownChoice_152mp_131{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-sm);padding:6px var(--rm-ui-padding-sm)}._DropdownChoice_152mp_131:hover{cursor:pointer;background-color:#fff}._DropdownChoiceNoResult_152mp_154{color:var(--rm-ui-grey-600);text-align:center}html[dir=rtl] ._DropdownGlass_152mp_120{left:31px;right:initial}html[dir=rtl] ._DropdownChevronWrap_152mp_53{left:19px;right:initial}

package/dist/assets/radio-BkD7BKk0.css

@@ -0,0 +1 @@
+._Radio_1wc8m_1{display:inline-flex}._RadioOrientationHorizontal_1wc8m_5{flex-direction:row;gap:var(--rm-ui-padding-lg)}._RadioOrientationVertical_1wc8m_10{flex-direction:column;gap:var(--rm-ui-padding-xxs)}._RadioLabel_1wc8m_15{position:relative;display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-xs)}._RadioLabel_1wc8m_15:hover{cursor:pointer}

package/dist/assets/text-Dt0DeN-I.css

@@ -0,0 +1 @@
+._Text_1ble1_1{box-sizing:border-box;position:relative;flex-grow:1;height:58px;padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm);display:flex;flex-direction:row;justify-content:stretch;align-items:flex-end}._Text_1ble1_1:hover{cursor:pointer}._TextLabel_1ble1_17{position:absolute;left:var(--rm-ui-padding-sm);transition:top .15s ease-out}._TextLabelIdle_1ble1_23{top:50%;transform:translateY(-50%)}._TextLabelActive_1ble1_28{top:var(--rm-ui-padding-xs);transform:translateY(0)}

package/dist/assets/textarea-qkrRnSO5.css

@@ -0,0 +1 @@
+._Textarea_1ltsl_1{resize:none;outline:none;box-sizing:border-box;width:100%;border:none;border-radius:10px;padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm);font-family:var(--rm-ui-font-family-medium),sans-serif;font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-primary)}._Textarea_1ltsl_1:hover{cursor:pointer}._Textarea_1ltsl_1:disabled{opacity:.33}._Textarea_1ltsl_1:disabled,._Textarea_1ltsl_1:-webkit-autofill,._Textarea_1ltsl_1:-webkit-autofill:hover,._Textarea_1ltsl_1:-webkit-autofill:focus,._Textarea_1ltsl_1:-webkit-autofill:active,._Textarea_1ltsl_1:autofill,._Textarea_1ltsl_1:autofill:hover,._Textarea_1ltsl_1:autofill:focus,._Textarea_1ltsl_1:autofill:active{background:transparent;transition:background 7200s ease-in-out 0s}._Textarea_1ltsl_1:-webkit-autofill{animation-name:_autofill-start_1ltsl_1;animation-duration:.1s;-webkit-text-fill-color:var(--rm-ui-grey-500)}._Textarea_1ltsl_1:not(:-webkit-autofill){animation-name:_autofill-cancel_1ltsl_1;animation-duration:.1s}@keyframes _autofill-start_1ltsl_1{}@keyframes _autofill-cancel_1ltsl_1{}

package/dist/components/certifications/certifications.component.d.ts

@@ -1,2 +1,6 @@
-import { CertificationsProps } from './certifications.types';
+type CertificationIcon = 'free' | 'gdpr' | 'ssl';
+type CertificationsProps = Readonly<{
+    icons?: CertificationIcon[];
+}>;
 export declare const Certifications: ({ icons }: CertificationsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/control/components/box/box.component.d.ts

@@ -1,2 +1,10 @@
-import { BoxProps } from './box.types';
+import { State } from '../../types';
+import { PropsWithChildren } from 'react';
+export interface BoxProps extends PropsWithChildren {
+    state?: State;
+    focused?: boolean;
+    checked?: boolean;
+    className?: string;
+    onClick?: () => void;
+}
 export declare const Box: import('react').ForwardRefExoticComponent<BoxProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/control/components/box/box.component.js

@@ -1,32 +1,32 @@
 import { jsx as d } from "react/jsx-runtime";
 import { forwardRef as _ } from "react";
-import S from "clsx";
-import '../../../../assets/box-b_yPaNPs.css';const l = "_Box_1tiwz_1", i = "_BoxChecked_1tiwz_15", n = "_BoxStateIdle_1tiwz_21", u = "_BoxFocused_1tiwz_25", m = "_BoxStateError_1tiwz_30", f = "_BoxStateSuccess_1tiwz_34", o = {
-  Box: l,
-  BoxChecked: i,
+import l from "clsx";
+import '../../../../assets/box-b_yPaNPs.css';const i = "_Box_1tiwz_1", S = "_BoxChecked_1tiwz_15", n = "_BoxStateIdle_1tiwz_21", u = "_BoxFocused_1tiwz_25", m = "_BoxStateError_1tiwz_30", f = "_BoxStateSuccess_1tiwz_34", o = {
+  Box: i,
+  BoxChecked: S,
   BoxStateIdle: n,
   BoxFocused: u,
   BoxStateError: m,
   BoxStateSuccess: f
-}, k = _((c, s) => {
-  const { children: x, className: r, focused: B, checked: a = !1, state: t = "idle", onClick: e } = c;
+}, z = _((e, c) => {
+  const { children: s, className: x, focused: r, checked: B = !1, state: t = "idle", onClick: a } = e;
   return /* @__PURE__ */ d(
     "div",
     {
       "data-testid": "box",
-      ref: s,
-      className: S(o.Box, r, {
-        [o.BoxFocused]: B,
-        [o.BoxChecked]: a,
+      ref: c,
+      className: l(o.Box, x, {
+        [o.BoxFocused]: r,
+        [o.BoxChecked]: B,
         [o.BoxStateIdle]: t === "idle",
         [o.BoxStateError]: t === "error",
         [o.BoxStateSuccess]: t === "success"
       }),
-      onClick: () => e == null ? void 0 : e.call(null),
-      children: x
+      onClick: () => a?.call(null),
+      children: s
     }
   );
 });
 export {
-  k as Box
+  z as Box
 };

package/dist/components/control/components/button/button.component.d.ts

@@ -1,2 +1,13 @@
-import { ButtonProps } from './button.types';
+import { PropsWithChildren } from 'react';
+export interface ButtonProps extends PropsWithChildren {
+    color: 'next' | 'previous';
+    size: 'sm' | 'md' | 'lg';
+    type: 'submit' | 'reset' | 'button';
+    disabled?: boolean;
+    info?: string;
+    fullWidth?: boolean;
+    onClick?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+}
 export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/control/components/button/button.component.js

@@ -1,53 +1,53 @@
-import { jsxs as d, jsx as s } from "react/jsx-runtime";
+import { jsxs as d, jsx as u } from "react/jsx-runtime";
 import h from "clsx";
 import { containsHtml as m } from "../../utils/utils.js";
-import '../../../../assets/button-XGvsKGqH.css';const S = "_Button_hr1uu_1", x = "_ButtonSizeSm_hr1uu_10", z = "_ButtonText_hr1uu_15", f = "_ButtonSizeMd_hr1uu_21", p = "_ButtonSizeLg_hr1uu_22", C = "_ButtonColorNext_hr1uu_37", N = "_ButtonColorPrevious_hr1uu_45", g = "_ButtonFullWidth_hr1uu_61", I = "_ButtonInfo_hr1uu_69", t = {
+import '../../../../assets/button-XGvsKGqH.css';const S = "_Button_hr1uu_1", x = "_ButtonSizeSm_hr1uu_10", z = "_ButtonText_hr1uu_15", f = "_ButtonSizeMd_hr1uu_21", C = "_ButtonSizeLg_hr1uu_22", p = "_ButtonColorNext_hr1uu_37", N = "_ButtonColorPrevious_hr1uu_45", g = "_ButtonFullWidth_hr1uu_61", F = "_ButtonInfo_hr1uu_69", t = {
   Button: S,
   ButtonSizeSm: x,
   ButtonText: z,
   ButtonSizeMd: f,
-  ButtonSizeLg: p,
-  ButtonColorNext: C,
+  ButtonSizeLg: C,
+  ButtonColorNext: p,
   ButtonColorPrevious: N,
   ButtonFullWidth: g,
-  ButtonInfo: I
-}, T = (r) => {
+  ButtonInfo: F
+}, M = (e) => {
   const {
-    children: i,
-    color: B,
+    children: s,
+    color: l,
     size: n,
-    type: _,
-    disabled: c = !1,
+    type: B,
+    disabled: r = !1,
     info: o = "",
-    fullWidth: a = !1,
-    onClick: u,
-    onFocus: l,
-    onBlur: e
-  } = r;
+    fullWidth: i = !1,
+    onClick: c,
+    onFocus: _,
+    onBlur: a
+  } = e;
   return /* @__PURE__ */ d(
     "button",
     {
       "data-testid": "button",
-      type: _,
-      disabled: c,
+      type: B,
+      disabled: r,
       className: h(t.Button, {
         [t.ButtonSizeSm]: n === "sm",
         [t.ButtonSizeMd]: n === "md",
         [t.ButtonSizeLg]: n === "lg",
-        [t.ButtonColorNext]: B === "next",
-        [t.ButtonColorPrevious]: B === "previous",
-        [t.ButtonFullWidth]: a
+        [t.ButtonColorNext]: l === "next",
+        [t.ButtonColorPrevious]: l === "previous",
+        [t.ButtonFullWidth]: i
       }),
-      onClick: () => u == null ? void 0 : u.call(null),
-      onFocus: () => l == null ? void 0 : l.call(null),
-      onBlur: () => e == null ? void 0 : e.call(null),
+      onClick: () => c?.call(null),
+      onFocus: () => _?.call(null),
+      onBlur: () => a?.call(null),
       children: [
-        /* @__PURE__ */ s("span", { className: t.ButtonText, children: i }),
-        m(o) && o ? /* @__PURE__ */ s("span", { className: t.ButtonInfo, dangerouslySetInnerHTML: { __html: o } }) : /* @__PURE__ */ s("span", { className: t.ButtonInfo, children: o })
+        /* @__PURE__ */ u("span", { className: t.ButtonText, children: s }),
+        m(o) && o ? /* @__PURE__ */ u("span", { className: t.ButtonInfo, dangerouslySetInnerHTML: { __html: o } }) : /* @__PURE__ */ u("span", { className: t.ButtonInfo, children: o })
       ]
     }
   );
 };
 export {
-  T as Button
+  M as Button
 };

package/dist/components/control/components/card-image/card-image.component.d.ts

@@ -1,2 +1,7 @@
-import { CardImageProps } from './card-image.types';
+import { Interactive, RadioChoice, ChoiceValue, State } from '../../types';
+export interface CardImageProps extends Interactive<ChoiceValue> {
+    sprite: string;
+    choices: RadioChoice[];
+    state?: State;
+}
 export declare const CardImage: (props: CardImageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/control/components/card-image/card-image.component.js

@@ -1,7 +1,59 @@
-import "react/jsx-runtime";
-import { c as a } from "../../../../index-DtupH5zG.js";
-import "../../hooks/useChoice/useChoice.hook.js";
-import "../../utils/utils.js";
+import { jsx as a, jsxs as g } from "react/jsx-runtime";
+import { Box as f } from "../box/box.component.js";
+import { Choice as q } from "../choice/choice.component.js";
+import { HiddenInput as w } from "../hidden-input/hidden-input.component.js";
+import { RadioLabel as B } from "../radio-label/radio-label.component.js";
+import { RadioText as N } from "../radio-text/radio-text.component.js";
+import { useChoice as T } from "../../hooks/useChoice/useChoice.hook.js";
+import { getChoiceId as b } from "../../utils/utils.js";
+import '../../../../assets/card-image-DQ9c4G_r.css';const W = "_CardImage_dw1xq_1", j = "_CardImageContent_dw1xq_13", y = "_CardImageTop_dw1xq_27", R = "_CardImageWrap_dw1xq_32", $ = "_CardImageBottom_dw1xq_43", r = {
+  CardImage: W,
+  CardImageContent: j,
+  CardImageTop: y,
+  CardImageWrap: R,
+  CardImageBottom: $
+}, J = (l) => {
+  const { sprite: I, choices: p, state: c = "idle", id: d, value: t, disabled: n, onChange: _ } = l, { type: i, onChoiceChange: v } = T(t, d, _);
+  return /* @__PURE__ */ a("div", { className: r.CardImage, children: p.map((e, h, u) => {
+    const m = b(d, e.value, h);
+    return /* @__PURE__ */ a(B, { id: m, value: t, state: c, choice: e, choices: u, children: ({ focused: s, hovered: x, checked: o, state: C }) => /* @__PURE__ */ a(f, { state: C, checked: o, focused: s, children: /* @__PURE__ */ g("div", { className: r.CardImageContent, children: [
+      /* @__PURE__ */ a(
+        w,
+        {
+          type: i,
+          id: m,
+          name: d,
+          value: e.value,
+          checked: o,
+          disabled: n,
+          onChange: () => v(e.value)
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: r.CardImageTop, children: /* @__PURE__ */ a(
+        "div",
+        {
+          "data-image": e.icon,
+          style: { backgroundImage: `url(${I})` },
+          className: r.CardImageWrap
+        }
+      ) }),
+      /* @__PURE__ */ g("div", { className: r.CardImageBottom, children: [
+        /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
+          q,
+          {
+            type: i,
+            state: C,
+            checked: o,
+            focused: s,
+            hovered: x,
+            disabled: n
+          }
+        ) }),
+        /* @__PURE__ */ a(N, { size: "md", checked: o, children: e.label })
+      ] })
+    ] }) }) }, m);
+  }) });
+};
 export {
-  a as CardImage
+  J as CardImage
 };

package/dist/components/control/components/card-text/card-text.component.d.ts

@@ -1,2 +1,6 @@
-import { CardTextProps } from './card-text.types';
+import { Interactive, RadioChoice, ChoiceValue, State } from '../../types';
+export interface CardTextProps extends Interactive<ChoiceValue> {
+    choices: RadioChoice[];
+    state?: State;
+}
 export declare const CardText: (props: CardTextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/control/components/card-text/card-text.component.js

@@ -1,7 +1,47 @@
-import "react/jsx-runtime";
-import { b as i } from "../../../../index-DtupH5zG.js";
-import "../../hooks/useChoice/useChoice.hook.js";
-import "../../utils/utils.js";
+import { jsx as e, jsxs as v } from "react/jsx-runtime";
+import { Box as b } from "../box/box.component.js";
+import { Choice as g } from "../choice/choice.component.js";
+import { HiddenInput as L } from "../hidden-input/hidden-input.component.js";
+import { RadioLabel as I } from "../radio-label/radio-label.component.js";
+import { RadioText as N } from "../radio-text/radio-text.component.js";
+import { useChoice as j } from "../../hooks/useChoice/useChoice.hook.js";
+import { getChoiceId as R } from "../../utils/utils.js";
+import '../../../../assets/card-text-fgHu9TyO.css';const y = "_CardText_1eht8_1", z = "_CardTextLabel_1eht8_9", B = "_CardTextChoice_1eht8_24", i = {
+  CardText: y,
+  CardTextLabel: z,
+  CardTextChoice: B
+}, J = (m) => {
+  const { choices: x, state: c = "idle", id: r, value: d, disabled: n = !1, onChange: h } = m, { type: l, onChoiceChange: T } = j(d, r, h);
+  return /* @__PURE__ */ e("div", { className: i.CardText, children: x.map((t, p, _) => {
+    const o = R(r, t.value, p);
+    return /* @__PURE__ */ e(I, { id: o, value: d, state: c, choice: t, choices: _, children: ({ focused: s, hovered: f, checked: a, state: C }) => /* @__PURE__ */ e(b, { state: C, checked: a, focused: s, children: /* @__PURE__ */ v("div", { className: i.CardTextLabel, children: [
+      /* @__PURE__ */ e(
+        L,
+        {
+          type: l,
+          id: o,
+          name: r,
+          value: t.value,
+          checked: a,
+          disabled: n,
+          onChange: (H, u) => T(t.value, u)
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: i.CardTextChoice, children: /* @__PURE__ */ e(
+        g,
+        {
+          type: l,
+          state: C,
+          checked: a,
+          focused: s,
+          hovered: f,
+          disabled: n
+        }
+      ) }),
+      /* @__PURE__ */ e(N, { size: "lg", checked: a, children: t.label })
+    ] }) }) }, o);
+  }) });
+};
 export {
-  i as CardText
+  J as CardText
 };

package/dist/components/control/components/checkbox/checkbox.component.d.ts

@@ -1,2 +1,6 @@
-import { CheckboxProps } from './checkbox.types';
+import { PropsWithChildren } from 'react';
+import { Interactive, State } from '../../types';
+export interface CheckboxProps extends PropsWithChildren, Interactive<boolean> {
+    state?: State;
+}
 export declare const Checkbox: (props: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/control/components/checkbox/checkbox.component.js

@@ -1,7 +1,51 @@
-import "react/jsx-runtime";
-import "usehooks-ts";
-import { C as i } from "../../../../index-DtupH5zG.js";
-import "../../../../utils/converter/converter.js";
+import { jsxs as v, jsx as c } from "react/jsx-runtime";
+import { useToggle as a } from "usehooks-ts";
+import { Choice as _ } from "../choice/choice.component.js";
+import { HiddenInput as B } from "../hidden-input/hidden-input.component.js";
+import { Converter as F } from "../../../../utils/converter/converter.js";
+import '../../../../assets/checkbox-n_3O8ZLW.css';const I = "_Checkbox_1l6ko_1", N = "_CheckboxChoice_1l6ko_14", j = "_CheckboxContent_1l6ko_20", l = {
+  Checkbox: I,
+  CheckboxChoice: N,
+  CheckboxContent: j
+}, D = (i) => {
+  const { children: u, state: k = "idle", id: o, value: n, disabled: e = !1, onChange: r, onFocus: b, onBlur: x } = i, [s, h] = a(!1), [d, C] = a(!1), m = (t) => {
+    e || s || (t.preventDefault(), r(!n, o));
+  }, p = (t) => {
+    e || (t.stopPropagation(), r(!n, o));
+  }, f = () => {
+    e || (h(), b?.call(null, o));
+  }, g = () => {
+    e || (h(), x?.call(null, o));
+  };
+  return /* @__PURE__ */ v(
+    "label",
+    {
+      htmlFor: o,
+      className: l.Checkbox,
+      onClick: m,
+      onFocus: f,
+      onBlur: g,
+      onMouseEnter: () => C(),
+      onMouseLeave: () => C(),
+      children: [
+        /* @__PURE__ */ c(
+          B,
+          {
+            type: "checkbox",
+            id: o,
+            name: o,
+            value: F.Boolean.ToBooleanString(n),
+            checked: n,
+            disabled: e,
+            onChange: p
+          }
+        ),
+        /* @__PURE__ */ c("div", { className: l.CheckboxChoice, children: /* @__PURE__ */ c(_, { type: "checkbox", state: k, checked: n, focused: s, hovered: d, disabled: e }) }),
+        /* @__PURE__ */ c("div", { className: l.CheckboxContent, children: u })
+      ]
+    }
+  );
+};
 export {
-  i as Checkbox
+  D as Checkbox
 };

package/dist/components/control/components/choice/choice.component.d.ts

@@ -1,2 +1,9 @@
-import { ChoiceProps } from './choice.types';
+export interface ChoiceProps {
+    type: 'radio' | 'checkbox';
+    checked: boolean;
+    state?: 'idle' | 'error' | 'success';
+    focused?: boolean;
+    hovered?: boolean;
+    disabled?: boolean;
+}
 export declare const Choice: (props: ChoiceProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/control/components/dropdown/dropdown.component.d.ts

@@ -1,2 +1,15 @@
-import { DropdownProps } from './dropdown.types';
+import { QuestionChoice } from '../../types';
+export interface DropdownProps {
+    choices: QuestionChoice[];
+    value: QuestionChoice[];
+    label?: string;
+    placeholder?: string;
+    noResult?: string;
+    isSearchHidden?: boolean;
+    multiple?: boolean;
+    closeButton?: string;
+    onChange: (values: QuestionChoice[]) => void;
+    onOpen?: (height: number, width: number) => void;
+    onClose?: () => void;
+}
 export declare const Dropdown: (props: DropdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/control/components/dropdown/dropdown.component.js

@@ -1,11 +1,97 @@
-import "react/jsx-runtime";
-import "react";
-import "usehooks-ts";
-import "lucide-react";
-import "clsx";
-import { D as e } from "../../../../index-DtupH5zG.js";
-import "../../utils/utils.js";
-import "../../../../utils/converter/converter.js";
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { useRef as u, useState as C, useEffect as N, useMemo as K } from "react";
+import { useBoolean as M, useResizeObserver as T, useOnClickOutside as E } from "usehooks-ts";
+import { ChevronDown as $, Search as q } from "lucide-react";
+import R from "clsx";
+import { Box as k } from "../box/box.component.js";
+import { Button as J } from "../button/button.component.js";
+import { Choice as P } from "../choice/choice.component.js";
+import { Label as Q } from "../label/label.component.js";
+import { RadioText as f } from "../radio-text/radio-text.component.js";
+import { clickHasNode as U } from "../../utils/utils.js";
+import { Converter as X } from "../../../../utils/converter/converter.js";
+import '../../../../assets/dropdown-DKR8xas9.css';const Y = "_Dropdown_152mp_1", Z = "_DropdownBorder_152mp_17", oo = "_DropdownContent_152mp_28", eo = "_DropdownChevron_152mp_39", no = "_DropdownChevronWrap_152mp_53", ro = "_DropdownBox_152mp_69", so = "_DropdownBoxVisible_152mp_75", co = "_DropdownBoxHidden_152mp_79", io = "_DropdownSearch_152mp_83", lo = "_DropdownSearchVisible_152mp_89", to = "_DropdownSearchHidden_152mp_93", po = "_DropdownClose_152mp_97", ao = "_DropdownInput_152mp_106", ho = "_DropdownGlass_152mp_120", wo = "_DropdownChoices_152mp_131", Do = "_DropdownChoice_152mp_131", mo = "_DropdownChoiceNoResult_152mp_154", e = {
+  Dropdown: Y,
+  DropdownBorder: Z,
+  DropdownContent: oo,
+  DropdownChevron: eo,
+  DropdownChevronWrap: no,
+  DropdownBox: ro,
+  DropdownBoxVisible: so,
+  DropdownBoxHidden: co,
+  DropdownSearch: io,
+  DropdownSearchVisible: lo,
+  DropdownSearchHidden: to,
+  DropdownClose: po,
+  DropdownInput: ao,
+  DropdownGlass: ho,
+  DropdownChoices: wo,
+  DropdownChoice: Do,
+  DropdownChoiceNoResult: mo
+}, ko = (s) => {
+  const { choices: v = [], value: a = [], isSearchHidden: H = !1, multiple: l = !1, onChange: h, onOpen: z, onClose: V } = s, y = s.label || "", I = s.placeholder || "Wählen Sie Ihre private Krankenversicherung...", O = s.noResult || "Keine Versicherung gefunden.", W = s.closeButton || "Schließen", x = u(null), w = u(null), B = u(null), { value: t, setFalse: D, toggle: A } = M(!1), [m, G] = C(""), [c, L] = C({ width: 0, height: 0 }), [p, S] = C([]);
+  T({
+    ref: w,
+    onResize: (o) => L({ width: o.width || 0, height: o.height || 0 })
+  }), E(w, (o) => {
+    U(o, x) || (l && h(p), D());
+  }), N(() => S(Array.isArray(a) ? a : []), [a]), N(() => {
+    t && c.width && c.height ? (B.current?.focus(), z?.call(null, c.height, c.width)) : V?.call(null);
+  }, [t, c]);
+  const j = (o, d) => {
+    S((i) => i.some(({ value: _ }) => _ === o) ? i.filter(({ value: _ }) => _ !== o) : [...i, { value: o, label: d }]);
+  }, F = () => {
+    D(), h(p);
+  }, b = K(
+    () => v.filter(({ label: o }) => o.toLowerCase().includes(m.toLowerCase())),
+    [m, v]
+  );
+  return /* @__PURE__ */ r("div", { className: e.Dropdown, children: [
+    /* @__PURE__ */ n(k, { ref: x, onClick: A, children: /* @__PURE__ */ r("div", { className: e.DropdownBorder, children: [
+      /* @__PURE__ */ r("div", { className: e.DropdownContent, children: [
+        /* @__PURE__ */ n(Q, { position: "active", children: y }),
+        /* @__PURE__ */ n(f, { size: "lg", checked: !0, oneLine: !0, children: X.Answer.FromArrayToMultiple(p.map(({ label: o }) => o)) || I })
+      ] }),
+      /* @__PURE__ */ n("div", { className: e.DropdownChevronWrap, children: /* @__PURE__ */ n($, { "data-open": t, className: e.DropdownChevron }) })
+    ] }) }),
+    /* @__PURE__ */ n(k, { ref: w, className: t ? e.DropdownBoxVisible : e.DropdownBoxHidden, children: /* @__PURE__ */ r("div", { className: e.DropdownBox, children: [
+      /* @__PURE__ */ r("div", { className: R(e.DropdownSearch, H ? e.DropdownSearchHidden : e.DropdownSearchVisible), children: [
+        /* @__PURE__ */ n(
+          "input",
+          {
+            ref: B,
+            value: m,
+            type: "text",
+            className: e.DropdownInput,
+            onChange: (o) => G(o.target.value)
+          }
+        ),
+        /* @__PURE__ */ n(q, { className: e.DropdownGlass })
+      ] }),
+      /* @__PURE__ */ n("ul", { className: e.DropdownChoices, children: b.length ? b.map(({ value: o, label: d }, i) => /* @__PURE__ */ r(
+        "li",
+        {
+          className: e.DropdownChoice,
+          onClick: () => {
+            l ? j(o, d) : (D(), h([{ value: o, label: d }]));
+          },
+          children: [
+            l && /* @__PURE__ */ n(
+              P,
+              {
+                type: "checkbox",
+                checked: p.some((g) => g.value === o)
+              }
+            ),
+            /* @__PURE__ */ n(f, { size: "lg", checked: !1, children: d })
+          ]
+        },
+        o + i
+      )) : /* @__PURE__ */ n("li", { className: R(e.DropdownChoice, e.DropdownChoiceNoResult), children: /* @__PURE__ */ n(f, { size: "lg", checked: !1, children: O }) }) }),
+      l && /* @__PURE__ */ n("div", { className: e.DropdownClose, children: /* @__PURE__ */ n(J, { color: "next", size: "sm", type: "button", onClick: () => F(), children: W }) })
+    ] }) })
+  ] });
+};
 export {
-  e as Dropdown
+  ko as Dropdown
 };

package/dist/components/control/components/hidden-input/hidden-input.component.d.ts

@@ -1,2 +1,12 @@
-import { HiddenInputProps } from './hidden-input.types';
+import { ChangeEvent } from 'react';
+import { InputChangeSource } from '../../types';
+export interface HiddenInputProps {
+    id: string;
+    value: string;
+    name: string;
+    type: 'radio' | 'checkbox';
+    checked: boolean;
+    disabled?: boolean;
+    onChange: (e: ChangeEvent<HTMLInputElement>, source?: InputChangeSource) => void;
+}
 export declare const HiddenInput: (props: HiddenInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/control/components/hidden-input/hidden-input.component.js

@@ -1,26 +1,25 @@
-import { jsx as o } from "react/jsx-runtime";
-import '../../../../assets/hidden-input-DHJQHUKd.css';const c = "_HiddenInput_bej3d_1", l = {
-  HiddenInput: c
-}, f = (a) => {
-  const { type: i, id: u, name: p, value: r, disabled: n = !1, checked: s, onChange: t } = a;
-  return /* @__PURE__ */ o(
+import { jsx as s } from "react/jsx-runtime";
+import '../../../../assets/hidden-input-DHJQHUKd.css';const o = "_HiddenInput_bej3d_1", c = {
+  HiddenInput: o
+}, v = (d) => {
+  const { type: a, id: i, name: u, value: p, disabled: n = !1, checked: r, onChange: t } = d;
+  return /* @__PURE__ */ s(
     "input",
     {
       "data-testid": "hidden-input",
-      type: i,
-      id: u,
-      name: p,
-      value: r,
-      checked: s,
+      type: a,
+      id: i,
+      name: u,
+      value: p,
+      checked: r,
       disabled: n,
-      className: l.HiddenInput,
+      className: c.HiddenInput,
       onChange: (e) => {
-        var d;
-        n || (e.preventDefault(), (d = e.nativeEvent) != null && d.pageX || e.nativeEvent.pageY ? (e.currentTarget.blur(), t(e, "mouse")) : t(e, "keyboard"));
+        n || (e.preventDefault(), e.nativeEvent?.pageX || e.nativeEvent.pageY ? (e.currentTarget.blur(), t(e, "mouse")) : t(e, "keyboard"));
       }
     }
   );
 };
 export {
-  f as HiddenInput
+  v as HiddenInput
 };

package/dist/components/control/components/input/input.component.d.ts

@@ -1,2 +1,8 @@
-import { InputProps } from './input.types';
+import { HTMLInputTypeAttribute } from 'react';
+import { Interactive } from '../../types';
+export interface InputProps extends Interactive<string> {
+    type?: HTMLInputTypeAttribute;
+    onAutofill?: (id: string) => void;
+    onAutofillCancel?: (id: string) => void;
+}
 export declare const Input: ({ id, value, disabled, type, onAutofill, onAutofillCancel, onChange, onFocus, onBlur, }: InputProps) => import("react/jsx-runtime").JSX.Element;