@berenjena/react-dev-panel 2.0.0 → 2.2.0

package/dist/components/ControlRenderer/controls/ButtonControl/ButtonControl.js

@@ -1,10 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import '../../../../assets/ButtonControl.css';const o = "_button_b8ouv_132", b = {
-  button: o
-};
-function u({ control: t }) {
-  return /* @__PURE__ */ n("button", { onClick: t.onClick, disabled: t.disabled, className: b.button, children: t.label });
-}
-export {
-  u as ButtonControl
-};

package/dist/components/ControlRenderer/controls/ButtonGroupControl/ButtonGroupControl.d.ts

@@ -1,37 +0,0 @@
-import { ButtonGroupControlProps } from './types';
-/**
- * Component that renders a group of related buttons in a horizontal layout
- *
- * @param props - The component props
- * @param props.control - The button group control configuration object
- * @param props.control.type - The control type, must be 'buttonGroup'
- * @param props.control.buttons - Array of button configurations to render
- * @param props.control.buttons[].label - The text label displayed on the button
- * @param props.control.buttons[].onClick - Callback function triggered when button is clicked
- * @param props.control.buttons[].disabled - Optional flag to disable individual buttons
- * @returns JSX element representing a group of buttons
- *
- * @example
- * ```typescript
- * <ButtonGroupControl control={{
- *   type: 'buttonGroup',
- *   buttons: [
- *     { label: 'Save', onClick: () => save() },
- *     { label: 'Cancel', onClick: () => cancel() },
- *     { label: 'Delete', onClick: () => delete(), disabled: true }
- *   ]
- * }} />
- * ```
- *
- * @example
- * ```typescript
- * <ButtonGroupControl control={{
- *   type: 'buttonGroup',
- *   buttons: [
- *     { label: 'Previous', onClick: () => goToPrevious() },
- *     { label: 'Next', onClick: () => goToNext() }
- *   ]
- * }} />
- * ```
- */
-export declare function ButtonGroupControl({ control }: ButtonGroupControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlRenderer/controls/ButtonGroupControl/ButtonGroupControl.js

@@ -1,22 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { ButtonControl as e } from "../ButtonControl/ButtonControl.js";
-import '../../../../assets/ButtonGroupControl.css';const l = "_buttonGroupContainer_1642u_132", u = {
-  buttonGroupContainer: l
-};
-function p({ control: n }) {
-  return /* @__PURE__ */ t("div", { className: u.buttonGroupContainer, children: n.buttons.map((o, r) => /* @__PURE__ */ t(
-    e,
-    {
-      control: {
-        type: "button",
-        label: o.label,
-        onClick: o.onClick,
-        disabled: o.disabled
-      }
-    },
-    r
-  )) });
-}
-export {
-  p as ButtonGroupControl
-};

package/dist/components/ControlRenderer/controls/ColorControl/ColorControl.d.ts

@@ -1,23 +0,0 @@
-import { ColorControlProps } from './types';
-/**
- * Component that renders a color control with both visual color picker and text input
- *
- * @param props - The component props
- * @param props.control - The color control configuration object
- * @param props.control.type - The control type, must be 'color'
- * @param props.control.value - The current color value (hex, rgb, hsl, or named color)
- * @param props.control.onChange - Callback function triggered when color value changes
- * @param props.control.disabled - Optional flag to disable the control
- * @returns JSX element representing the color control with picker and text input
- *
- * @example
- * ```typescript
- * <ColorControl control={{
- *   type: 'color',
- *   value: '#ff0000',
- *   onChange: (value) => setColor(value),
- *   disabled: false
- * }}/>
- * ```
- */
-export declare function ColorControl({ control }: ColorControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlRenderer/controls/ColorControl/ColorControl.js

@@ -1,69 +0,0 @@
-import { jsxs as m, jsx as l } from "react/jsx-runtime";
-import { useState as v, useEffect as C } from "react";
-import { Input as p } from "../../../Input/Input.js";
-import { useDebouncedCallback as b } from "../../../../hooks/useDebounceCallback/useDebounceCallback.js";
-import '../../../../assets/ColorControl.css';const y = "_container_1oo6z_1", x = "_colorPreview_1oo6z_7", V = "_errorMessage_1oo6z_52", c = {
-  container: y,
-  colorPreview: x,
-  errorMessage: V
-};
-function P({ control: n }) {
-  const [r, o] = v(n.value), [s, i] = v(!0), u = b(n.onChange, 300);
-  function d(e) {
-    if (!e) return !1;
-    const t = document.createElement("div");
-    return t.style.color = e, t.style.color !== "";
-  }
-  function f(e) {
-    if (!e) return "#000000";
-    if (e.startsWith("#") && (e.length === 4 || e.length === 7))
-      return e.length === 4 ? `#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}` : e;
-    try {
-      const a = document.createElement("canvas").getContext("2d");
-      return a ? (a.fillStyle = e, a.fillStyle) : "#000000";
-    } catch {
-      return "#000000";
-    }
-  }
-  function g(e) {
-    const t = e.target.value;
-    o(t), i(!0), u(t);
-  }
-  function h(e) {
-    const t = e.target.value;
-    o(t);
-    const a = d(t);
-    i(a), (a || t === "") && u(t);
-  }
-  return C(() => {
-    o(n.value), i(d(n.value));
-  }, [n.value]), /* @__PURE__ */ m("div", { className: c.container, children: [
-    /* @__PURE__ */ l("div", { className: c.colorPreview, style: { backgroundColor: s ? r : "transparent" }, children: /* @__PURE__ */ l(
-      "input",
-      {
-        type: "color",
-        value: f(r),
-        disabled: n.disabled,
-        onChange: g,
-        title: "Open color picker"
-      }
-    ) }),
-    /* @__PURE__ */ l(
-      p,
-      {
-        type: "text",
-        value: r || "",
-        disabled: n.disabled,
-        onChange: h,
-        placeholder: "Enter color value (hex, rgb, hsl, named)",
-        style: {
-          borderColor: !s && r ? "var(--dev-panel-danger-color)" : void 0
-        }
-      }
-    ),
-    !s && r && /* @__PURE__ */ l("div", { className: c.errorMessage, children: "Invalid color format" })
-  ] });
-}
-export {
-  P as ColorControl
-};

package/dist/components/ControlRenderer/controls/DateControl/DateControl.d.ts

@@ -1,41 +0,0 @@
-import { DateControlProps } from './types';
-/**
- * Component that renders a date control with configurable event handling
- *
- * @param props - The component props
- * @param props.control - The date control configuration object
- * @param props.control.type - The control type, must be 'date'
- * @param props.control.value - The current date value in ISO format (YYYY-MM-DD)
- * @param props.control.min - Optional minimum allowed date in ISO format
- * @param props.control.max - Optional maximum allowed date in ISO format
- * @param props.control.event - When to trigger onChange: "onChange" (real-time) or "onBlur" (on focus loss). Defaults to "onBlur"
- * @param props.control.onChange - Callback function triggered when date value changes
- * @param props.control.disabled - Optional flag to disable the control
- * @returns JSX element representing the date input control
- *
- * @example
- * ```typescript
- * // Real-time updates
- * <DateControl control={{
- *   type: 'date',
- *   value: '2025-07-26',
- *   min: '2025-01-01',
- *   max: '2025-12-31',
- *   event: 'onChange',
- *   onChange: (value) => setSelectedDate(value),
- *   disabled: false
- * }} />
- * ```
- *
- * @example
- * ```typescript
- * // Updates only when losing focus (default)
- * <DateControl control={{
- *   type: 'date',
- *   value: '2025-07-26',
- *   event: 'onBlur',
- *   onChange: (value) => console.log('Date changed:', value)
- * }} />
- * ```
- */
-export declare function DateControl({ control }: DateControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlRenderer/controls/DateControl/DateControl.js

@@ -1,31 +0,0 @@
-import { jsx as m } from "react/jsx-runtime";
-import { useState as o, useEffect as s } from "react";
-import { Input as r } from "../../../Input/Input.js";
-function h({ control: e }) {
-  const n = e.event || "onBlur", [l, t] = o(e.value);
-  function i(u) {
-    const a = u.target.value;
-    t(a), n === "onChange" && e.onChange(a);
-  }
-  function f(u) {
-    const a = u.target.value;
-    n === "onBlur" && e.onChange(a);
-  }
-  return s(() => {
-    t(e.value);
-  }, [e.value]), /* @__PURE__ */ m(
-    r,
-    {
-      type: "date",
-      value: l,
-      min: e.min,
-      max: e.max,
-      disabled: e.disabled,
-      onChange: i,
-      ...n === "onBlur" && { onBlur: f }
-    }
-  );
-}
-export {
-  h as DateControl
-};

package/dist/components/ControlRenderer/controls/MultiSelectControl/MultiSelectControl.d.ts

@@ -1,28 +0,0 @@
-import { MultiSelectControlProps } from './types';
-/**
- * Component that renders a multi-select control with checkbox options
- *
- * @param props - The component props
- * @param props.control - The multi-select control configuration object
- * @param props.control.type - The control type, must be 'multiselect'
- * @param props.control.value - Array of currently selected option values
- * @param props.control.options - Array of available options (strings or objects with label/value)
- * @param props.control.onChange - Callback function triggered when selection changes
- * @param props.control.disabled - Optional flag to disable the control
- * @returns JSX element representing the multi-select control
- *
- * @example
- * ```typescript
- * <MultiSelectControl control={{
- *   type: 'multiselect',
- *   value: ['red', 'blue'],
- *   options: [
- *     { label: 'Red Color', value: 'red' },
- *     { label: 'Blue Color', value: 'blue' },
- *     { label: 'Green Color', value: 'green' }
- *   ],
- *   onChange: (values) => setSelectedColors(values)
- * }} />
- * ```
- */
-export declare function MultiSelectControl({ control }: MultiSelectControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlRenderer/controls/MultiSelectControl/MultiSelectControl.js

@@ -1,131 +0,0 @@
-import { jsxs as f, Fragment as O, jsx as r } from "react/jsx-runtime";
-import { useState as y, useRef as _, useCallback as R, useEffect as v } from "react";
-import { createPortal as S } from "react-dom";
-import { Icon as N } from "../../../Icon/index.js";
-import "../../../../store/SectionsStore.js";
-import "../../../../store/ThemeStore.js";
-import { useDevPanelPosition as z } from "../../../../store/UIStore.js";
-import { className as B } from "../../../../utils/className/className.js";
-import '../../../../assets/MultiSelectControl.css';const I = "_multiselect_1agkw_1", $ = "_trigger_1agkw_6", j = "_open_1agkw_36", A = "_value_1agkw_40", T = "_arrow_1agkw_53", V = "_dropdownPortal_1agkw_68", W = "_dropdown_1agkw_68", q = "_option_1agkw_115", F = "_disabled_1agkw_127", U = "_checkbox_1agkw_134", G = "_checkmark_1agkw_139", J = "_label_1agkw_170", n = {
-  multiselect: I,
-  trigger: $,
-  open: j,
-  value: A,
-  arrow: T,
-  dropdownPortal: V,
-  dropdown: W,
-  option: q,
-  disabled: F,
-  checkbox: U,
-  checkmark: G,
-  label: J
-};
-function oe({ control: t }) {
-  const c = z(), [a, u] = y(!1), [d, b] = y({
-    top: 0,
-    left: 0,
-    width: 0,
-    maxHeight: 200
-  }), p = _(null), w = _(null), k = _(null), s = R(() => {
-    a && b(x());
-  }, [a]);
-  function x() {
-    if (!w.current)
-      return { top: 0, left: 0, width: 0, maxHeight: 200 };
-    const e = w.current.getBoundingClientRect(), i = window.innerHeight, o = window.innerWidth, l = 200, m = 4, g = i - e.bottom - m, h = e.top - m, P = g < l && h > g, H = P ? e.top - Math.min(l, h) : e.bottom + m, D = Math.max(8, Math.min(e.left, o - e.width - 8)), M = P ? Math.min(l, h) : Math.min(l, g);
-    return {
-      top: H,
-      left: D,
-      width: e.width,
-      maxHeight: M
-    };
-  }
-  function L(e) {
-    const i = t.value.includes(e) ? t.value.filter((o) => o !== e) : [...t.value, e];
-    t.onChange(i);
-  }
-  function C() {
-    if (t.value.length === 0)
-      return "Select options...";
-    if (t.value.length === 1) {
-      const e = t.options.find((o) => (typeof o == "string" ? o : o.value) === t.value[0]);
-      return (typeof e == "string" ? e : e?.label) || t.value[0];
-    }
-    return `${t.value.length} selected`;
-  }
-  function E() {
-    t.disabled || (a ? u(!1) : (b(x()), u(!0)));
-  }
-  return v(() => {
-    if (a)
-      return s(), window.addEventListener("resize", s), window.addEventListener("scroll", s, !0), () => {
-        window.removeEventListener("resize", s), window.removeEventListener("scroll", s, !0);
-      };
-  }, [a, s]), v(() => {
-    const e = k.current;
-    (!e || e.x !== c.x || e.y !== c.y) && (k.current = c, s());
-  }, [c, s]), v(() => {
-    function e(i) {
-      if (p.current && !p.current.contains(i.target)) {
-        const o = document.querySelector(`.${n.dropdownPortal}`);
-        if (o && o.contains(i.target))
-          return;
-        u(!1);
-      }
-    }
-    return document.addEventListener("mousedown", e), () => {
-      document.removeEventListener("mousedown", e);
-    };
-  }, []), /* @__PURE__ */ f(O, { children: [
-    /* @__PURE__ */ r(
-      "div",
-      {
-        ref: p,
-        ...B(n.multiselect, {
-          [n.disabled]: !!t.disabled,
-          [n.open]: a
-        }),
-        children: /* @__PURE__ */ f("button", { ref: w, type: "button", className: n.trigger, onClick: E, disabled: t.disabled, children: [
-          /* @__PURE__ */ r("span", { className: n.value, children: C() }),
-          /* @__PURE__ */ r(N, { name: "ArrowDown", className: n.arrow })
-        ] })
-      }
-    ),
-    typeof window < "u" && S(
-      a && !t.disabled && /* @__PURE__ */ r(
-        "div",
-        {
-          className: `${n.dropdownPortal}`,
-          style: {
-            position: "fixed",
-            top: d.top,
-            left: d.left,
-            width: d.width,
-            maxHeight: d.maxHeight,
-            zIndex: 9999
-          },
-          children: /* @__PURE__ */ r("div", { className: n.dropdown, children: t.options.map((e) => {
-            const i = typeof e == "string" ? e : e.value, o = typeof e == "string" ? e : e.label, l = t.value.includes(i);
-            return /* @__PURE__ */ f("label", { className: n.option, children: [
-              /* @__PURE__ */ r(
-                "input",
-                {
-                  type: "checkbox",
-                  checked: l,
-                  onChange: () => L(i),
-                  className: n.checkbox
-                }
-              ),
-              /* @__PURE__ */ r(N, { name: "Check", className: n.checkmark }),
-              /* @__PURE__ */ r("span", { className: n.label, children: o })
-            ] }, i);
-          }) })
-        }
-      ),
-      document.body
-    )
-  ] });
-}
-export {
-  oe as MultiSelectControl
-};

package/dist/components/ControlRenderer/controls/NumberControl/NumberControl.d.ts

@@ -1,45 +0,0 @@
-import { NumberControlProps } from './types';
-/**
- * Component that renders a number control with configurable event handling
- *
- * @param props - The component props
- * @param props.control - The number control configuration object
- * @param props.control.type - The control type, must be 'number'
- * @param props.control.value - The current numeric value
- * @param props.control.min - Optional minimum allowed value
- * @param props.control.max - Optional maximum allowed value
- * @param props.control.step - Optional step increment for the number input (defaults to 1)
- * @param props.control.event - When to trigger onChange: "onChange" (real-time) or "onBlur" (on focus loss). Defaults to "onChange"
- * @param props.control.onChange - Callback function triggered when numeric value changes
- * @param props.control.disabled - Optional flag to disable the control
- * @returns JSX element representing the number input control
- *
- * @example
- * ```typescript
- * // Real-time updates with constraints
- * <NumberControl control={{
- *   type: 'number',
- *   value: 50,
- *   min: 0,
- *   max: 100,
- *   step: 5,
- *   event: 'onChange',
- *   onChange: (value) => setProgress(value),
- *   disabled: false
- * }} />
- * ```
- *
- * @example
- * ```typescript
- * // Updates only when losing focus
- * <NumberControl control={{
- *   type: 'number',
- *   value: 42,
- *   min: 1,
- *   step: 0.1,
- *   event: 'onBlur',
- *   onChange: (value) => console.log('Value changed:', value)
- * }} />
- * ```
- */
-export declare function NumberControl({ control }: NumberControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlRenderer/controls/NumberControl/NumberControl.js

@@ -1,32 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useState as r, useEffect as f } from "react";
-import { Input as p } from "../../../Input/Input.js";
-function v({ control: e }) {
-  const n = e.event || "onChange", [m, t] = r(e.value);
-  function l(u) {
-    const a = Number(u.target.value);
-    t(a), n === "onChange" && e.onChange(a);
-  }
-  function i(u) {
-    const a = Number(u.target.value);
-    n === "onBlur" && e.onChange(a);
-  }
-  return f(() => {
-    t(e.value);
-  }, [e.value]), /* @__PURE__ */ s(
-    p,
-    {
-      type: "number",
-      value: m,
-      min: e.min,
-      max: e.max,
-      step: e.step,
-      disabled: e.disabled,
-      onChange: l,
-      ...n === "onBlur" && { onBlur: i }
-    }
-  );
-}
-export {
-  v as NumberControl
-};

package/dist/components/ControlRenderer/controls/RangeControl/RangeControl.d.ts

@@ -1,46 +0,0 @@
-import { RangeControlProps } from './types';
-/**
- * Component that renders a range/slider control with configurable event handling and visual value display
- *
- * @param props - The component props
- * @param props.control - The range control configuration object
- * @param props.control.type - The control type, must be 'range'
- * @param props.control.value - The current numeric value of the slider
- * @param props.control.min - Optional minimum allowed value (defaults to 0)
- * @param props.control.max - Optional maximum allowed value (defaults to 100)
- * @param props.control.step - Optional step increment for the slider (defaults to 1)
- * @param props.control.event - When to trigger onChange: "onChange" (real-time) or "onBlur" (on focus loss). Defaults to "onChange"
- * @param props.control.onChange - Callback function triggered when slider value changes
- * @param props.control.disabled - Optional flag to disable the control
- * @returns JSX element representing the range slider control with value display
- *
- * @example
- * ```typescript
- * // Real-time updates with custom range (default behavior)
- * <RangeControl control={{
- *   type: 'range',
- *   value: 75,
- *   min: 0,
- *   max: 100,
- *   step: 5,
- *   event: 'onChange',
- *   onChange: (value) => setVolume(value),
- *   disabled: false
- * }} />
- * ```
- *
- * @example
- * ```typescript
- * // Updates only when losing focus with decimal steps
- * <RangeControl control={{
- *   type: 'range',
- *   value: 2.5,
- *   min: 0,
- *   max: 5,
- *   step: 0.1,
- *   event: 'onBlur',
- *   onChange: (value) => console.log('Rating changed:', value)
- * }} />
- * ```
- */
-export declare function RangeControl({ control }: RangeControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlRenderer/controls/RangeControl/RangeControl.js

@@ -1,40 +0,0 @@
-import { jsxs as c, jsx as i } from "react/jsx-runtime";
-import { useState as o, useEffect as m } from "react";
-import '../../../../assets/RangeControl.css';const v = "_container_lg827_1", h = "_range_lg827_9", d = "_value_lg827_115", u = {
-  container: v,
-  range: h,
-  value: d
-};
-function _({ control: e }) {
-  const n = e.event || "onChange", [l, t] = o(e.value);
-  function r(s) {
-    const a = Number(s.target.value);
-    t(a), n === "onChange" && e.onChange(a);
-  }
-  function g(s) {
-    const a = Number(s.target.value);
-    n === "onBlur" && e.onChange(a);
-  }
-  return m(() => {
-    t(e.value);
-  }, [e.value]), /* @__PURE__ */ c("div", { className: u.container, children: [
-    /* @__PURE__ */ i(
-      "input",
-      {
-        type: "range",
-        value: l,
-        min: e.min,
-        max: e.max,
-        step: e.step,
-        disabled: e.disabled,
-        onChange: r,
-        ...n === "onBlur" && { onBlur: g },
-        className: u.range
-      }
-    ),
-    /* @__PURE__ */ i("span", { className: u.value, children: l })
-  ] });
-}
-export {
-  _ as RangeControl
-};

package/dist/components/ControlRenderer/controls/SelectControl/SelectControl.d.ts

@@ -1,39 +0,0 @@
-import { SelectControlProps } from './types';
-/**
- * Component that renders a dropdown select control with single selection
- *
- * @param props - The component props
- * @param props.control - The select control configuration object
- * @param props.control.type - The control type, must be 'select'
- * @param props.control.value - The currently selected option value
- * @param props.control.options - Array of available options (strings or objects with label/value)
- * @param props.control.onChange - Callback function triggered when selection changes
- * @param props.control.disabled - Optional flag to disable the control
- * @returns JSX element representing a dropdown select control
- *
- * @example
- * ```typescript
- * <SelectControl control={{
- *   type: 'select',
- *   value: 'medium',
- *   options: ['small', 'medium', 'large'],
- *   onChange: (value) => setSize(value),
- *   disabled: false
- * }} />
- * ```
- *
- * @example
- * ```typescript
- * <SelectControl control={{
- *   type: 'select',
- *   value: 'red',
- *   options: [
- *     { label: 'Red Color', value: 'red' },
- *     { label: 'Blue Color', value: 'blue' },
- *     { label: 'Green Color', value: 'green' }
- *   ],
- *   onChange: (value) => console.log('Selected:', value)
- * }} />
- * ```
- */
-export declare function SelectControl({ control }: SelectControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlRenderer/controls/SelectControl/SelectControl.js

@@ -1,11 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { Select as n } from "../../../Select/Select.js";
-function s({ control: a }) {
-  return /* @__PURE__ */ t(n, { value: a.value, disabled: a.disabled, onChange: (e) => a.onChange(e.target.value), children: a.options.map((e) => {
-    const l = typeof e == "string" ? e : e.value, r = typeof e == "string" ? e : e.label;
-    return /* @__PURE__ */ t("option", { value: l, children: r }, l);
-  }) });
-}
-export {
-  s as SelectControl
-};

package/dist/components/ControlRenderer/controls/SeparatorControl/SeparatorControl.d.ts

@@ -1,39 +0,0 @@
-import { SeparatorControlProps } from './types';
-/**
- * Component that renders a visual separator to organize control groups
- *
- * @param props - The component props
- * @param props.control - The separator control configuration object
- * @param props.control.type - The control type, must be 'separator'
- * @param props.control.style - The style of separator: "line" (default), "space", or "label"
- * @param props.control.label - Optional label text (only displayed when style is "label")
- * @returns JSX element representing a visual separator
- *
- * @example
- * ```typescript
- * // Simple line separator (default)
- * <SeparatorControl control={{
- *   type: 'separator'
- * }} />
- * ```
- *
- * @example
- * ```typescript
- * // Separator with label text
- * <SeparatorControl control={{
- *   type: 'separator',
- *   style: 'label',
- *   label: 'Advanced Settings'
- * }} />
- * ```
- *
- * @example
- * ```typescript
- * // Space separator for extra spacing
- * <SeparatorControl control={{
- *   type: 'separator',
- *   style: 'space'
- * }} />
- * ```
- */
-export declare function SeparatorControl({ control }: SeparatorControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlRenderer/controls/SeparatorControl/SeparatorControl.js

@@ -1,14 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import '../../../../assets/SeparatorControl.css';const s = "_line_174q4_1", t = "_space_174q4_9", i = "_labelContainer_174q4_14", c = "_label_174q4_14", l = {
-  line: s,
-  space: t,
-  labelContainer: i,
-  label: c
-};
-function o({ control: a }) {
-  const n = a.style || "line";
-  return n === "space" ? /* @__PURE__ */ e("div", { className: l.space }) : n === "label" && a.label ? /* @__PURE__ */ e("div", { className: l.labelContainer, children: /* @__PURE__ */ e("span", { className: l.label, children: a.label }) }) : /* @__PURE__ */ e("div", { className: l.line });
-}
-export {
-  o as SeparatorControl
-};