gd-design-library 1.2.0 → 1.3.0

package/ai/schemas/components/Image.d.ts

@@ -15,14 +15,22 @@ declare const _default: {
         keyboardSupport: boolean;
         screenReaderSupport: boolean;
         props: ({
+            name: string;
+            type: string;
+            description: string;
+            default: string;
+            required?: undefined;
+        } | {
             name: string;
             type: string;
             description: string;
             required: boolean;
+            default?: undefined;
         } | {
             name: string;
             type: string;
             description: string;
+            default?: undefined;
             required?: undefined;
         })[];
         examples: string[];

package/ai/schemas/components/Menu.d.ts

@@ -29,6 +29,11 @@ declare const _default: {
             type: string;
             description: string;
             default: string;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: number;
         })[];
         examples: string[];
     };

package/ai/schemas/components/Switch.d.ts

@@ -18,20 +18,20 @@ declare const _default: {
             name: string;
             type: string;
             description: string;
-            default: boolean;
+            default?: undefined;
             enum?: undefined;
         } | {
             name: string;
             type: string;
             description: string;
-            default: string;
-            enum: string[];
+            default: boolean;
+            enum?: undefined;
         } | {
             name: string;
             type: string;
             description: string;
-            default?: undefined;
-            enum?: undefined;
+            default: string;
+            enum: string[];
         } | {
             name: string;
             type: string;

package/components/core/Form/Form.stories.play.d.ts

@@ -0,0 +1,4 @@
+import { StoryContext } from '@storybook/types';
+export declare const withSubmitActions: ({ args, canvasElement, step }: StoryContext) => Promise<void>;
+export declare const withOnChangeActions: ({ args, canvasElement, step }: StoryContext) => Promise<void>;
+export declare const validationErrorsActions: ({ args, canvasElement, step }: StoryContext) => Promise<void>;

package/components/core/Image/Image.d.ts

@@ -1,2 +1,6 @@
 import { ImageProps } from './';
+/**
+ * @TODO: Cerebra
+ * - as span
+ */
 export declare const Image: import('react').ForwardRefExoticComponent<ImageProps & import('react').RefAttributes<HTMLImageElement>>;

package/components/core/Image/Image.js

@@ -1,40 +1,42 @@
 "use client";
-import { jsxs as x, jsx as a } from "@emotion/react/jsx-runtime";
-import { forwardRef as P, useState as p, useCallback as f } from "react";
+import { jsxs as A, jsx as r } from "@emotion/react/jsx-runtime";
+import { forwardRef as F, useState as f, useCallback as u } from "react";
 import { COMPONENT_NAME as e } from "./constants.js";
-import { ImageWrapperStyled as F, PlaceholderStyled as M, ImageStyled as O, CaptionStyled as T } from "./ImageStyled.js";
-import { Skeleton as A } from "../Skeleton/Skeleton.js";
-import { useTheme as R } from "../../../hooks/useTheme/useTheme.js";
-const W = P((u, g) => {
+import { ImageWrapperStyled as M, PlaceholderStyled as O, ImageStyled as T, CaptionStyled as R } from "./ImageStyled.js";
+import { Skeleton as W } from "../Skeleton/Skeleton.js";
+import { useTheme as _ } from "../../../hooks/useTheme/useTheme.js";
+const q = F((g, S) => {
   const {
-    id: S,
-    src: l,
-    alt: k,
-    width: s,
+    id: k,
+    src: s,
+    alt: C,
+    width: l,
     height: i,
     placeholder: d,
     caption: c,
-    onClick: C,
+    onClick: $,
     onLoad: t,
     onError: o,
     objectFit: b,
     fallbackComponent: n,
     styles: y,
-    ...w
-  } = u, {
-    theme: r
-  } = R(), [h, m] = p(!0), [E, I] = p(!1), L = h && d && l, N = (E || !l) && n, $ = f(() => {
-    m(!1), t == null || t();
-  }, [t]), j = f(() => {
-    m(!1), I(!0), o == null || o();
+    as: h,
+    captionAs: w,
+    ...E
+  } = g, {
+    theme: a
+  } = _(), [m, p] = f(!0), [I, L] = f(!1), N = m && d && s, j = (I || !s) && n, x = u(() => {
+    p(!1), t == null || t();
+  }, [t]), P = u(() => {
+    p(!1), L(!0), o == null || o();
   }, [o]);
-  return /* @__PURE__ */ x(F, { "data-testid": `${e}-wrapper`, id: S, width: s, height: i, theme: r, ...w, children: [
-    L && /* @__PURE__ */ a(M, { "data-testid": `${e}-placeholder`, theme: r, children: /* @__PURE__ */ a(A, { height: "100%", children: d }) }),
-    N ? n : /* @__PURE__ */ a(O, { "data-testid": e, theme: r, src: l, alt: k, width: s, height: i, objectFit: b, $isLoading: h, onLoad: $, onError: j, onClick: C, styles: y, ref: g }),
-    c && /* @__PURE__ */ a(T, { "data-testid": `${e}-caption`, theme: r, children: c })
+  return /* @__PURE__ */ A(M, { "data-testid": `${e}-wrapper`, id: k, width: l, height: i, theme: a, $as: h, ...E, children: [
+    N && /* @__PURE__ */ r(O, { "data-testid": `${e}-placeholder`, $as: h, theme: a, children: /* @__PURE__ */ r(W, { height: "100%", children: d }) }),
+    j ? n : /* @__PURE__ */ r(T, { "data-testid": e, theme: a, src: s, alt: C, width: l, height: i, objectFit: b, $isLoading: m, onLoad: x, onError: P, onClick: $, styles: y, ref: S }),
+    c && /* @__PURE__ */ r(R, { "data-testid": `${e}-caption`, $as: w, theme: a, children: c })
   ] });
 });
-W.displayName = e;
+q.displayName = e;
 export {
-  W as Image
+  q as Image
 };

package/components/core/Image/Image.types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
 import { CommonCssComponentProps, CommonCssComponentStyledProps } from '../..';
 export interface ImageProps extends CommonCssComponentProps {
     id?: string;
@@ -13,8 +13,11 @@ export interface ImageProps extends CommonCssComponentProps {
     placeholder?: ReactNode;
     fallbackComponent?: ReactNode;
     objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    as?: keyof HTMLElementTagNameMap | ElementType;
+    captionAs?: keyof HTMLElementTagNameMap | ElementType;
 }
 export interface ImageWrapperStyledProps extends Pick<ImageProps, 'width' | 'height' | 'id' | 'className'>, CommonCssComponentStyledProps {
+    $as?: keyof HTMLElementTagNameMap | ElementType;
 }
 export interface ImageStyledProps extends Pick<ImageProps, 'objectFit'>, CommonCssComponentStyledProps<HTMLImageElement> {
     $isLoading?: boolean;
@@ -23,5 +26,9 @@ export interface ImageStyledProps extends Pick<ImageProps, 'objectFit'>, CommonC
     width?: number;
     height?: number;
 }
-export type ImagePlaceholderStyledProps = CommonCssComponentStyledProps;
-export type ImageCaptionStyledProps = CommonCssComponentStyledProps;
+export interface ImagePlaceholderStyledProps extends CommonCssComponentStyledProps {
+    $as?: keyof HTMLElementTagNameMap | ElementType;
+}
+export interface ImageCaptionStyledProps extends CommonCssComponentStyledProps {
+    $as?: keyof HTMLElementTagNameMap | ElementType;
+}

package/components/core/Image/ImageStyled.js

@@ -1,76 +1,78 @@
-"use client";
-import { jsx as l } from "@emotion/react/jsx-runtime";
+import { jsx as a } from "@emotion/react/jsx-runtime";
 import { forwardRef as x } from "react";
-import { getBoxStyles as i, tokensHandler as y } from "../../../tokens/utils.js";
+import { getBoxStyles as y, tokensHandler as i } from "../../../tokens/utils.js";
 import { get as d } from "../../../utils/helpers.js";
-const $ = (s) => {
+const I = (s) => {
   const {
     width: t,
     height: e,
+    $as: o = "div",
     theme: {
-      image: o,
-      ...r
+      image: r,
+      ...n
     } = {},
-    styles: c,
-    ...n
+    styles: p,
+    ...c
   } = s, {
-    boxStyles: p,
-    restProps: m
-  } = i(n), a = new Proxy(o || {}, y(r)), h = [d(a, "wrapper", {}), {
+    boxStyles: m,
+    restProps: l
+  } = y(c), h = new Proxy(r || {}, i(n)), g = [d(h, "wrapper", {}), {
     width: `${t ? `${t}px` : "100%"}`,
     height: `${e ? `${e}px` : "100%"}`
-  }, p, c];
-  return /* @__PURE__ */ l("div", { css: h, ...m });
+  }, m, p];
+  return /* @__PURE__ */ a(o, { css: g, ...l });
 }, b = x((s, t) => {
   const {
     objectFit: e = "cover",
     $isLoading: o,
     theme: {
       image: r,
-      ...c
+      ...n
     } = {},
-    styles: n,
-    width: p,
+    styles: p,
+    width: c,
     height: m,
-    ...a
+    ...l
   } = s, {
     boxStyles: h,
     restProps: g
-  } = i(a), P = new Proxy(r || {}, y(c)), S = [d(P, "default", {}), {
+  } = y(l), P = new Proxy(r || {}, i(n)), S = [d(P, "default", {}), {
     objectFit: e,
     opacity: `${o ? 0 : 1}`
-  }, h, n];
-  return /* @__PURE__ */ l("img", { css: S, width: p, height: m, ...g, ref: t });
-}), N = (s) => {
+  }, h, p];
+  return /* @__PURE__ */ a("img", { css: S, width: c, height: m, ...g, ref: t });
+}), C = (s) => {
   const {
     theme: {
       image: t,
       ...e
     } = {},
-    styles: o,
-    ...r
+    $as: o = "span",
+    styles: r,
+    ...n
   } = s, {
-    boxStyles: c,
-    restProps: n
-  } = i(r), p = new Proxy(t || {}, y(e)), m = [d(p, "placeholder", {}), c, o];
-  return /* @__PURE__ */ l("div", { css: m, ...n });
-}, v = (s) => {
+    boxStyles: p,
+    restProps: c
+  } = y(n), m = new Proxy(t || {}, i(e)), l = [d(m, "placeholder", {}), p, r];
+  return /* @__PURE__ */ a(o, { css: l, ...c });
+}, N = (s) => {
   const {
     theme: {
       image: t,
       ...e
     } = {},
-    styles: o,
-    ...r
+    $as: o = "figcaption",
+    styles: r,
+    ...n
   } = s, {
-    boxStyles: c,
-    restProps: n
-  } = i(r), p = new Proxy(t || {}, y(e)), m = [d(p, "caption", {}), c, o];
-  return /* @__PURE__ */ l("figcaption", { css: m, ...n });
+    boxStyles: p,
+    restProps: c
+  } = y(n), m = new Proxy(t || {}, i(e)), l = [d(m, "caption", {}), p, r];
+  return /* @__PURE__ */ a(o, { css: l, ...c });
 };
 export {
-  v as CaptionStyled,
+  N as CaptionStyled,
   b as ImageStyled,
-  $ as ImageWrapperStyled,
-  N as PlaceholderStyled
+  I as ImageWrapperStyled,
+  C as PlaceholderStyled
 };

package/components/core/InputFile/InputFile.d.ts

@@ -1,2 +1,6 @@
 import { InputFileProps } from './';
+/**
+ * @TODO: Cerebra
+ * - apply same styles as a button
+ */
 export declare const InputFile: import('react').ForwardRefExoticComponent<InputFileProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/core/Menu/Menu.js

@@ -1,126 +1,134 @@
 "use client";
-import { jsxs as X, jsx as x } from "@emotion/react/jsx-runtime";
-import { forwardRef as K, useState as y, useRef as H, useCallback as L, useEffect as U, useImperativeHandle as W } from "react";
-import { EMPTY_CLIENT_RECT as j, COMPONENT_NAME as m } from "./constants.js";
-import { MenuTriggerStyled as G, MenuContentStyled as R } from "./MenuStyled.js";
-import { useAnimationFrame as V } from "../../../utils/animationFrame.js";
-import { SelectContext as q } from "../Select/hooks/useSelectContext.js";
-import { convertToInlineBoxStyles as z } from "../../../tokens/utils.js";
-import { useTheme as J } from "../../../hooks/useTheme/useTheme.js";
-import { useLogger as Q } from "../../../hooks/useLogger/useLogger.js";
-import { Portal as Z } from "../Portal/Portal.js";
-import { KEYBOARD_KEYS as ee } from "../../../constants/keyboard.js";
-const n = 4, te = 400, oe = 80, ne = K(({
-  onSelect: a,
-  children: A,
-  content: Y,
-  itemIdentifier: I = (f, r) => (f == null ? void 0 : f.value) === (r == null ? void 0 : r.value),
+import { jsxs as Z, jsx as O } from "@emotion/react/jsx-runtime";
+import { forwardRef as ee, useState as Y, useRef as L, useCallback as $, useEffect as te, useImperativeHandle as oe } from "react";
+import { EMPTY_CLIENT_RECT as ne, COMPONENT_NAME as f } from "./constants.js";
+import { MenuTriggerStyled as re, MenuContentStyled as se } from "./MenuStyled.js";
+import { useAnimationFrame as ie } from "../../../utils/animationFrame.js";
+import { SelectContext as le } from "../Select/hooks/useSelectContext.js";
+import { convertToInlineBoxStyles as ce } from "../../../tokens/utils.js";
+import { useTheme as me } from "../../../hooks/useTheme/useTheme.js";
+import { useLogger as fe } from "../../../hooks/useLogger/useLogger.js";
+import { get as E } from "../../../utils/helpers.js";
+import { Portal as ue } from "../Portal/Portal.js";
+import { KEYBOARD_KEYS as pe } from "../../../constants/keyboard.js";
+const ge = ee(({
+  onSelect: w,
+  children: X,
+  content: A,
+  itemIdentifier: I = (r, s) => (r == null ? void 0 : r.value) === (s == null ? void 0 : s.value),
   closeOnSelect: M = !0,
-  placement: _,
-  ...$
-}, v) => {
+  minHeight: _,
+  maxHeight: K,
+  offsetX: R,
+  offsetY: W,
+  placement: P,
+  ...B
+}, d) => {
   const {
-    theme: f
-  } = J(), r = Q(), [l, g] = y(!1), [i, P] = y(), [N, E] = y(), p = H(null), s = H(null), S = H({
+    theme: r
+  } = me(), s = fe(), [l, a] = Y(!1), [i, j] = Y(), [D, x] = Y(), p = L(null), n = L(null), F = L({
     top: 0,
     left: 0
-  }), F = L(({
+  }), N = _ || E(r, "menu.attrs.minHeight"), S = K || E(r, "menu.attrs.maxHeight"), g = R || E(r, "menu.attrs.offsetX", 0), u = W || E(r, "menu.attrs.offsetY", 0), V = $(({
     width: t,
     height: e
   }) => {
-    const o = p.current ? p.current.getBoundingClientRect() : j, w = window.innerWidth, d = window.innerHeight, h = window.scrollX || window.pageXOffset || 0, k = window.scrollY || window.pageYOffset || 0, O = _ || "bottom-right";
-    let c, u;
-    switch (O) {
+    const o = p.current ? p.current.getBoundingClientRect() : ne, h = window.innerWidth, C = window.innerHeight, T = window.scrollX || window.pageXOffset || 0, b = window.scrollY || window.pageYOffset || 0, v = P || "bottom-right";
+    let c, m;
+    switch (v) {
       case "top-left": {
-        c = o.left - t, u = o.top - e - n;
+        c = o.left - t - g, m = o.top - e - u;
         break;
       }
       case "top-right": {
-        c = o.right + n, u = o.top - e - n;
+        c = o.right + g, m = o.top - e - u;
         break;
       }
       case "bottom-left": {
-        c = o.left - t, u = o.bottom + n;
+        c = o.left - t - g, m = o.bottom + u;
         break;
       }
       case "bottom-right": {
-        c = o.right + n, u = o.bottom + n;
+        c = o.right + g, m = o.bottom + u;
         break;
       }
     }
-    return c + t > w && (c = w - t - n), c < 0 && (c = n), u + e > d && (u = d - e - n), u < 0 && (u = n), {
-      left: c + h,
-      top: u + k
+    const G = c + t > h, J = c < 0;
+    (G || J) && (v === "top-left" || v === "bottom-left" ? c = g : c = h - t - g);
+    const Q = m + e > C, U = m < 0;
+    return (Q || U) && (v === "top-left" || v === "top-right" ? m = u : m = C - e - u), {
+      left: c + T,
+      top: m + b
     };
-  }, [_]), C = L(({
+  }, [P, g, u]), H = $(({
     event: t,
     data: e
   }) => {
-    r.debug(`${m}: Select`, {
+    s.debug(`${f}: Select`, {
       value: e == null ? void 0 : e.value,
       name: e == null ? void 0 : e.name,
       previousValue: i == null ? void 0 : i.value,
       previousName: i == null ? void 0 : i.name
-    }), a == null || a({
+    }), w == null || w({
       event: t,
       data: e
-    }), P(e), M && g(!1);
-  }, [a, M, i]), B = L(() => {
-    g((t) => {
+    }), j(e), M && a(!1);
+  }, [w, M, i]), q = $(() => {
+    a((t) => {
       const e = !t;
-      return r.debug(`${m}: ${e ? "Open" : "Close"}`, {
+      return s.debug(`${f}: ${e ? "Open" : "Close"}`, {
         trigger: "toggle"
       }), e;
     });
-  }, []), D = {
-    onSelect: C,
+  }, []), z = {
+    onSelect: H,
     value: i,
     itemIdentifier: I
-  }, b = (t) => {
+  }, k = (t) => {
     var e;
-    ((e = v == null ? void 0 : v.current) != null && e.isOpen || l) && t.key === ee.ESCAPE && (r.debug(`${m}: Close`, {
+    ((e = d == null ? void 0 : d.current) != null && e.isOpen || l) && t.key === pe.ESCAPE && (s.debug(`${f}: Close`, {
       trigger: "escape"
-    }), g(!1));
-  }, T = (t) => {
+    }), a(!1));
+  }, y = (t) => {
     var e, o;
-    !((e = p == null ? void 0 : p.current) != null && e.contains(N || t.target)) && !((o = s == null ? void 0 : s.current) != null && o.contains(t.target)) && (r.debug(`${m}: Close`, {
+    !((e = p == null ? void 0 : p.current) != null && e.contains(D || t.target)) && !((o = n == null ? void 0 : n.current) != null && o.contains(t.target)) && (s.debug(`${f}: Close`, {
       trigger: "outsideClick"
-    }), g(!1), E(null));
+    }), a(!1), x(null));
   };
-  return U(() => (l ? (document.addEventListener("keydown", b), document.addEventListener("mousedown", T)) : (document.removeEventListener("keydown", b), document.removeEventListener("mousedown", T)), () => {
-    document.removeEventListener("keydown", b), document.removeEventListener("mousedown", T);
-  }), [l]), V(() => {
-    if (s.current && l) {
-      const t = s.current.getBoundingClientRect(), {
+  return te(() => (l ? (document.addEventListener("keydown", k), document.addEventListener("mousedown", y)) : (document.removeEventListener("keydown", k), document.removeEventListener("mousedown", y)), () => {
+    document.removeEventListener("keydown", k), document.removeEventListener("mousedown", y);
+  }), [l]), ie(() => {
+    if (n.current && l) {
+      const t = n.current.getBoundingClientRect(), {
         top: e,
         left: o
-      } = F(t), w = window.innerHeight, d = window.scrollY || window.pageYOffset || 0, h = e - d, k = w - h - n, O = Math.max(oe, Math.min(te, k));
-      S.current = {
+      } = V(t), h = window.innerHeight, C = window.scrollY || window.pageYOffset || 0, T = e - C, b = h - T - u;
+      F.current = {
         top: e,
         left: o
-      }, s.current && (s.current.style.left = `${o}px`, s.current.style.top = `${e}px`, s.current.style.maxHeight = `${O}px`);
+      }, n.current && (n.current.style.left = `${o}px`, n.current.style.top = `${e}px`, S && (n.current.style.maxHeight = `${Math.min(S, b)}px`), N && (n.current.style.minHeight = `${Math.min(N, b)}px`));
     }
-  }), W(v, () => ({
+  }), oe(d, () => ({
     ref: p,
     isOpen: l,
     selectedValue: i,
-    onSelect: C,
+    onSelect: H,
     open: (t) => {
-      r.debug(`${m}: Open`, {
+      s.debug(`${f}: Open`, {
         trigger: "ref"
-      }), !l && (E(t || null), g(!0));
+      }), !l && (x(t || null), a(!0));
     },
     close: (t) => {
-      r.debug(`${m}: Close`, {
+      s.debug(`${f}: Close`, {
         trigger: "ref"
-      }), l && (E(t || null), g(!1));
+      }), l && (x(t || null), a(!1));
     }
-  }), [l, i, C]), /* @__PURE__ */ X(q.Provider, { value: D, children: [
-    /* @__PURE__ */ x(G, { onClick: B, theme: f, ref: p, "data-testid": m, ...$, children: A }),
-    l && /* @__PURE__ */ x(Z, { withWrapper: !1, children: /* @__PURE__ */ x(R, { ref: s, "data-testid": m, theme: f, ...z($), children: Y }) })
+  }), [l, i, H]), /* @__PURE__ */ Z(le.Provider, { value: z, children: [
+    /* @__PURE__ */ O(re, { onClick: q, theme: r, ref: p, "data-testid": f, ...B, children: X }),
+    l && /* @__PURE__ */ O(ue, { withWrapper: !1, children: /* @__PURE__ */ O(se, { ref: n, "data-testid": f, theme: r, ...ce(B), children: A }) })
   ] });
 });
-ne.displayName = m;
+ge.displayName = f;
 export {
-  ne as Menu
+  ge as Menu
 };

package/components/core/Menu/Menu.types.d.ts

@@ -1,11 +1,15 @@
 import { ReactNode, Ref } from 'react';
 import { BoxCssComponentProps, CommonCssComponentStyledProps, Option, SelectOnSelect, ItemIdentifier } from '../..';
 export type MenuPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-export interface MenuProps extends Omit<BoxCssComponentProps, 'content' | 'onSelect'> {
+export interface MenuProps extends Omit<BoxCssComponentProps, 'content' | 'onSelect' | 'minHeight' | 'maxHeight' | 'offsetX' | 'offsetY'> {
     itemIdentifier?: ItemIdentifier;
     content?: ReactNode;
     onSelect?: SelectOnSelect;
     closeOnSelect?: boolean;
+    offsetX?: number;
+    offsetY?: number;
+    minHeight?: number;
+    maxHeight?: number;
     placement?: MenuPlacement;
 }
 export interface MenuRef {

package/components/core/Menu/constants.d.ts

@@ -1,10 +1,2 @@
 export declare const COMPONENT_NAME = "Menu";
 export declare const EMPTY_CLIENT_RECT: DOMRect;
-export declare const MENU_DEFAULT_OPTIONS: {
-    align: string;
-    direction: null;
-    limitWidth: string;
-    maxHeight: number;
-    minHeight: number;
-    offset: number;
-};

package/components/core/Switch/Switch.js

@@ -1,46 +1,46 @@
 "use client";
-import { jsxs as m, jsx as c } from "@emotion/react/jsx-runtime";
-import { forwardRef as k, useState as u, useCallback as n, useEffect as $ } from "react";
-import { COMPONENT_NAME as t } from "./constants.js";
-import { SwitchWrapperStyled as g, SwitchLabelStyled as x, SwitchStyled as y, SwitchSliderStyled as N, HiddenCheckboxStyled as C } from "./SwitchStyled.js";
-import { LabelPosition as E } from "../../../types/label.js";
-import { useTheme as j } from "../../../hooks/useTheme/useTheme.js";
-import { get as I } from "../../../utils/helpers.js";
-const H = k((f, p) => {
+import { jsxs as m, jsx as a } from "@emotion/react/jsx-runtime";
+import { forwardRef as $, useState as g, useCallback as p, useEffect as x } from "react";
+import { COMPONENT_NAME as r } from "./constants.js";
+import { SwitchWrapperStyled as y, SwitchLabelStyled as C, SwitchStyled as N, SwitchSliderStyled as E, HiddenCheckboxStyled as j } from "./SwitchStyled.js";
+import { LabelPosition as I } from "../../../types/label.js";
+import { useTheme as L } from "../../../hooks/useTheme/useTheme.js";
+import { get as M } from "../../../utils/helpers.js";
+const W = $((S, b) => {
   const {
-    onValueChange: d,
-    checked: s = !1,
-    disabled: r = !1,
-    label: S = E.Right,
-    children: b,
-    ...i
-  } = f, {
-    theme: e
-  } = j(), [l, o] = u(s), h = n((a) => {
-    o(a), d == null || d(a);
-  }, [d]), w = n((a) => {
-    r || h(I(a, "target.checked", !1));
-  }, [r, h]);
-  return $(() => {
-    o(s);
-  }, [s]), /* @__PURE__ */ m(g, { theme: e, ref: p, $disabled: r, "data-testid": `${t}-wrapper`, ...i, children: [
-    /* @__PURE__ */ c(x, { className: "gd-switch-label", theme: e, $label: S, "data-testid": `${t}-label`, children: b }),
-    /* @__PURE__ */ m(y, { "data-testid": t, theme: e, children: [
-      /* @__PURE__ */ c(N, { className: "gd-switch-slider", theme: e, $checked: l, "data-testid": `${t}-slider` }),
-      /* @__PURE__ */ c(
-        C,
+    onValueChange: c,
+    checked: e,
+    disabled: s = !1,
+    label: k = I.Right,
+    children: l,
+    ...o
+  } = S, {
+    theme: t
+  } = L(), d = e !== void 0, [u, h] = g(e ?? !1), n = d ? e : u, f = p((i) => {
+    d || h(i), c == null || c(i);
+  }, [c, d]), w = p((i) => {
+    s || f(M(i, "target.checked", !1));
+  }, [s, f]);
+  return x(() => {
+    d && h(e);
+  }, [e, d]), /* @__PURE__ */ m(y, { theme: t, ref: b, $disabled: s, "data-testid": `${r}-wrapper`, ...o, children: [
+    l && /* @__PURE__ */ a(C, { className: "gd-switch-label", theme: t, $label: k, "data-testid": `${r}-label`, children: l }),
+    /* @__PURE__ */ m(N, { "data-testid": r, theme: t, children: [
+      /* @__PURE__ */ a(E, { className: "gd-switch-slider", theme: t, $checked: n, "data-testid": `${r}-slider` }),
+      /* @__PURE__ */ a(
+        j,
         {
-          theme: e,
-          checked: l,
-          disabled: r,
+          theme: t,
+          checked: n,
+          disabled: s,
           onChange: w,
-          "data-testid": `${t}-checkbox`,
-          ...i
+          "data-testid": `${r}-checkbox`,
+          ...o
         }
       )
     ] })
   ] });
 });
 export {
-  H as Switch
+  W as Switch
 };