gd-design-library 1.5.0 → 1.6.0

package/ai/README.md

@@ -266,7 +266,7 @@ export function FAQSection() {
           <Typography as="h3" variant="h5">How do I get started?</Typography>
         </AccordionHeader>
         <AccordionContent>
-          <Typography variant="body">
+          <Typography variant="p">
             Follow these steps to begin using the design system in your project.
           </Typography>
         </AccordionContent>
@@ -276,7 +276,7 @@ export function FAQSection() {
           <Typography as="h3" variant="h5">What are the pricing options?</Typography>
         </AccordionHeader>
         <AccordionContent>
-          <Typography variant="body">
+          <Typography variant="p">
             We offer three flexible pricing plans to meet your needs.
           </Typography>
         </AccordionContent>
@@ -310,7 +310,7 @@ export function StyledAccordionSection() {
           <Typography as="h3" variant="h5">Item with Box Props</Typography>
         </AccordionHeader>
         <AccordionContent>
-          <Typography variant="body">
+          <Typography variant="p">
             This AccordionItem uses Box layout props like margin, padding, width, and maxWidth for flexible layout control.
           </Typography>
         </AccordionContent>
@@ -325,7 +325,7 @@ export function StyledAccordionSection() {
           <Typography as="h3" variant="h5">Flex Item</Typography>
         </AccordionHeader>
         <AccordionContent>
-          <Typography variant="body">
+          <Typography variant="p">
             Using flex="1" for flexible width distribution in a flex container.
           </Typography>
         </AccordionContent>

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

@@ -19,6 +19,11 @@ declare const _default: {
             type: string;
             description: string;
             default: number;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: boolean;
         } | {
             name: string;
             type: string;

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

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

package/components/core/Input/Input.d.ts

@@ -1,2 +1,2 @@
 import { InputFieldProps } from './Input.types';
-export declare const Input: import('react').ForwardRefExoticComponent<(InputFieldProps & Partial<Omit<HTMLInputElement, "color" | "prefix" | "disabled" | "tabIndex" | "type" | "hidden" | "width" | "content" | "translate" | "name" | "label" | "children" | "className" | "styles" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "placeholder" | "adornmentStart" | "adornmentEnd" | "debounceCallbackTime" | "readOnly" | "required" | "ariaRequired" | "ariaDescribedBy" | "wrapperAs" | "helperText">>) & import('react').RefAttributes<HTMLInputElement>>;
+export declare const Input: import('react').ForwardRefExoticComponent<(InputFieldProps & Partial<Omit<HTMLInputElement, "color" | "prefix" | "disabled" | "tabIndex" | "type" | "hidden" | "width" | "content" | "translate" | "name" | "label" | "children" | "className" | "styles" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "placeholder" | "adornmentStart" | "adornmentEnd" | "debounceCallbackTime" | "readOnly" | "required" | "ariaRequired" | "ariaDescribedBy" | "inputmode" | "wrapperAs" | "helperText">>) & import('react').RefAttributes<HTMLInputElement>>;

package/components/core/Input/Input.js

@@ -4,8 +4,8 @@ import { forwardRef as q } from "react";
 import { COMPONENT_NAME as o, DEFAULT_PROPS as e, FOCUS_EXCLUDED_LIST as x } from "./constants.js";
 import { useInputHandlers as z } from "./useInputHandlers.js";
 import { InputStyled as D } from "./InputStyled.js";
-import { InputWrapper as l } from "./InputWrapper/InputWrapper.js";
-import { InputHelper as u } from "./InputHelper/InputHelper.js";
+import { InputWrapper as u } from "./InputWrapper/InputWrapper.js";
+import { InputHelper as l } from "./InputHelper/InputHelper.js";
 import { InputAdornment as f } from "./InputAdornment/InputAdornment.js";
 import { useTheme as T } from "../../../hooks/useTheme/useTheme.js";
 import { SizeVariant as g } from "../../../types/common.js";
@@ -22,7 +22,7 @@ const G = q(({
   readOnly: O = e.readOnly,
   // Accessibility props
   ariaRequired: w = e.ariaRequired,
-  role: y = e.role,
+  role: y,
   tabIndex: E = e.tabIndex,
   ariaDescribedBy: a,
   // Event handling props
@@ -51,9 +51,9 @@ const G = q(({
     onChange: M,
     debounceCallbackTime: F
   });
-  return /* @__PURE__ */ s(l, { as: h, withGap: P, className: _, width: N, styles: I, children: [
-    i && /* @__PURE__ */ r(u, { children: i }),
-    /* @__PURE__ */ s(l, { width: "100%", children: [
+  return /* @__PURE__ */ s(u, { as: h, withGap: P, className: _, width: N, styles: I, children: [
+    i && /* @__PURE__ */ r(l, { children: i }),
+    /* @__PURE__ */ s(u, { width: "100%", children: [
       p && /* @__PURE__ */ r(f, { children: p }),
       /* @__PURE__ */ r(D, { $isMouseInteraction: U && c, $color: m, ref: H, disabled: S, role: y, theme: L, type: n, readOnly: O, tabIndex: E, "aria-required": w, "data-testid": o, ...R, ...a ? {
         "aria-describedby": a
@@ -64,7 +64,7 @@ const G = q(({
       ] }),
       d && /* @__PURE__ */ r(f, { children: d })
     ] }),
-    t && /* @__PURE__ */ r(u, { color: m, size: g.Sm, children: t })
+    t && /* @__PURE__ */ r(l, { color: m, size: g.Sm, children: t })
   ] });
 });
 G.displayName = o;

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

@@ -1,5 +1,5 @@
 import { ChangeEvent, FocusEvent, MouseEvent, KeyboardEvent, ReactNode, ElementType, PropsWithChildren } from 'react';
-import { EnumOrPrimitive, InputColorVariant, InputRole, InputVariantType, SizeVariant } from '../../../types';
+import { EnumOrPrimitive, InputColorVariant, InputVariantType, SizeVariant } from '../../../types';
 import { CommonCssComponentProps, CommonCssComponentStyledProps } from '../..';
 export interface BaseInputFieldProps extends CommonCssComponentProps<HTMLInputElement> {
     readOnly?: boolean;
@@ -21,7 +21,8 @@ export interface BaseInputFieldProps extends CommonCssComponentProps<HTMLInputEl
     required?: boolean;
     ariaRequired?: boolean;
     ariaDescribedBy?: string;
-    role?: EnumOrPrimitive<InputRole>;
+    role?: string;
+    inputmode?: string;
     tabIndex?: number;
     debounceCallbackTime?: number;
 }

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

@@ -1,4 +1,4 @@
-import { TabIndex, InputColorVariant, InputRole, InputVariantType } from '../../../types';
+import { TabIndex, InputColorVariant, InputVariantType } from '../../../types';
 export declare const COMPONENT_NAME = "Input";
 export declare const DEFAULT_PROPS: {
     variant: InputVariantType;
@@ -6,8 +6,6 @@ export declare const DEFAULT_PROPS: {
     disabled: boolean;
     readOnly: boolean;
     ariaRequired: boolean;
-    role: InputRole;
     tabIndex: TabIndex;
-    styles: {};
 };
 export declare const FOCUS_EXCLUDED_LIST: InputVariantType[];

package/components/core/Input/constants.js

@@ -1,16 +1,15 @@
-import { InputVariantType as a, InputRole as e, InputColorVariant as o } from "../../../types/input.js";
-import { TabIndex as t } from "../../../types/accesability.js";
-const i = "Input", l = {
+import { InputVariantType as a, InputColorVariant as e } from "../../../types/input.js";
+import { TabIndex as r } from "../../../types/accesability.js";
+const n = "Input", i = {
   variant: a.Text,
-  color: o.Primary,
+  color: e.Primary,
   disabled: !1,
   readOnly: !1,
   ariaRequired: !1,
-  role: e.Textbox,
-  tabIndex: t.Default
-}, p = [a.Checkbox, a.Radio, a.Range];
+  tabIndex: r.Default
+}, l = [a.Checkbox, a.Radio, a.Range];
 export {
-  i as COMPONENT_NAME,
-  l as DEFAULT_PROPS,
-  p as FOCUS_EXCLUDED_LIST
+  n as COMPONENT_NAME,
+  i as DEFAULT_PROPS,
+  l as FOCUS_EXCLUDED_LIST
 };

package/components/core/Loader/Loader.js

@@ -13,16 +13,16 @@ const g = N((d, s) => {
   const {
     theme: t
   } = M(), {
-    name: f,
+    name: f = "circle",
     variant: r = m.Inline,
     rounded: l = V(t, "loader.attrs.rounded", "none"),
     children: a,
-    size: u = W.Md,
-    animationProps: c = P,
+    size: c = W.Md,
+    animationProps: u = P,
     withWrapper: i = !0,
     WrapperView: n = "span",
     ...h
-  } = d, e = () => a || /* @__PURE__ */ o($, { ref: s, theme: t, $name: f, $variant: r, $size: u, $animationProps: c, $rounded: l, "data-testid": p, ...h });
+  } = d, e = () => a || /* @__PURE__ */ o($, { ref: s, theme: t, $name: f, $variant: r, $size: c, $animationProps: u, $rounded: l, "data-testid": p, ...h });
   return r === m.FullPage ? /* @__PURE__ */ o(w, { wrapperVariant: r, withWrapper: i, WrapperView: n, children: e() }) : i ? /* @__PURE__ */ o(A, { variant: r, as: n, children: e() }) : e();
 });
 g.displayName = p;

package/components/core/Modal/Modal.js

@@ -1,56 +1,58 @@
 "use client";
 import { jsx as d, jsxs as y, Fragment as B } from "@emotion/react/jsx-runtime";
-import { forwardRef as T, useCallback as s, useEffect as w } from "react";
+import { forwardRef as T, useCallback as g, useEffect as w } from "react";
 import { COMPONENT_NAME as e } from "./constants.js";
 import { ModalOverlayStyled as x, ModalContentStyled as N, ModalHeaderStyled as P, ModalTitleStyled as A, CloseButtonStyled as K, ModalBodyStyled as L, ModalFooterStyled as j } from "./ModalStyled.js";
 import { useTheme as D } from "../../../hooks/useTheme/useTheme.js";
 import { useLogger as F } from "../../../hooks/useLogger/useLogger.js";
-import { get as g } from "../../../utils/helpers.js";
+import { get as s } from "../../../utils/helpers.js";
 import { Portal as H } from "../Portal/Portal.js";
 import { convertToInlineBoxStyles as I } from "../../../tokens/utils.js";
 import { Icon as R } from "../Icon/Icon.js";
 import { KEYBOARD_KEYS as Y } from "../../../constants/keyboard.js";
 const _ = T(({
-  isOpen: c = !1,
+  isOpen: l = !1,
   isCustomView: p = !1,
   onClose: t,
   showCloseButton: n = !0,
-  closeOnClickOutside: o = !0,
+  closeOnClickOutside: m = !0,
   closeOnEscape: f,
-  title: a,
-  children: l,
+  title: i,
+  children: c,
   footer: u,
   styles: h,
   ...S
 }, b) => {
   const {
     theme: r
-  } = D(), m = F(), M = g(r, "modal.icons", {}), k = a || !!(n && t), E = s(() => {
-    m.debug(`${e}: Close`, {
+  } = D(), a = F(), M = s(r, "modal.icons", {}), k = i || !!(n && t), E = g(() => {
+    a.debug(`${e}: Close`, {
       trigger: "overlay",
-      closeOnClickOutside: o
-    }), o && (t == null || t());
-  }, [t, o]), $ = s(() => {
-    m.debug(`${e}: Close`, {
+      closeOnClickOutside: m
+    }), m && (t == null || t());
+  }, [t, m, a]), $ = g(() => {
+    a.debug(`${e}: Close`, {
       trigger: "closeButton"
     }), t == null || t();
-  }, [t]);
+  }, [t, a]);
   return w(() => {
     if (!f) return;
-    const i = (v) => {
-      t && v.key === Y.ESCAPE && (m.debug(`${e}: Close`, {
+    const o = (v) => {
+      t && v.key === Y.ESCAPE && (a.debug(`${e}: Close`, {
         trigger: "escape"
       }), t == null || t());
     };
-    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
-  }, [c, f, t]), c ? /* @__PURE__ */ d(H, { blocksScroll: !0, children: /* @__PURE__ */ d(x, { onClick: E, theme: r, children: /* @__PURE__ */ d(N, { ref: b, onClick: (i) => i.stopPropagation(), "data-testid": e, theme: r, styles: h, ...I(S), children: p ? l : /* @__PURE__ */ y(B, { children: [
-    k && /* @__PURE__ */ y(P, { theme: r, $withTitle: !!a, "data-testid": `${e}-header`, children: [
-      a && /* @__PURE__ */ d(A, { theme: r, "data-testid": `${e}-title`, children: a }),
-      n && t && /* @__PURE__ */ d(K, { onClick: $, "data-testid": "close-button", theme: r, "aria-label": "Close modal", children: /* @__PURE__ */ d(R, { ...g(M, "close", {
+    return l && document.addEventListener("keydown", o), () => {
+      document.removeEventListener("keydown", o);
+    };
+  }, [l, f, t, a]), l ? /* @__PURE__ */ d(H, { blocksScroll: !0, children: /* @__PURE__ */ d(x, { onClick: E, theme: r, children: /* @__PURE__ */ d(N, { ref: b, onClick: (o) => o.stopPropagation(), "data-testid": e, theme: r, styles: h, ...I(S), children: p ? c : /* @__PURE__ */ y(B, { children: [
+    k && /* @__PURE__ */ y(P, { theme: r, $withTitle: !!i, "data-testid": `${e}-header`, children: [
+      i && /* @__PURE__ */ d(A, { theme: r, "data-testid": `${e}-title`, children: i }),
+      n && t && /* @__PURE__ */ d(K, { onClick: $, "data-testid": "close-button", theme: r, "aria-label": "Close modal", children: /* @__PURE__ */ d(R, { ...s(M, "close", {
         name: "cross"
       }) }) })
     ] }),
-    l && /* @__PURE__ */ d(L, { theme: r, "data-testid": `${e}-body`, children: l }),
+    c && /* @__PURE__ */ d(L, { theme: r, "data-testid": `${e}-body`, children: c }),
     u && /* @__PURE__ */ d(j, { theme: r, "data-testid": `${e}-footer`, children: u })
   ] }) }) }) }) : null;
 });

package/components/core/Switch/Switch.js

@@ -1,46 +1,60 @@
 "use client";
-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) => {
+import { jsxs as h, jsx as o } from "@emotion/react/jsx-runtime";
+import { forwardRef as N, useState as k, useCallback as u, useEffect as v } from "react";
+import { COMPONENT_NAME as e } from "./constants.js";
+import { SwitchWrapperStyled as E, SwitchLabelStyled as I, SwitchStyled as T, SwitchSliderStyled as j, HiddenCheckboxStyled as L } from "./SwitchStyled.js";
+import { Loader as M } from "../Loader/Loader.js";
+import { useTheme as O } from "../../../hooks/useTheme/useTheme.js";
+import { useLogger as z } from "../../../hooks/useLogger/useLogger.js";
+import { get as S } from "../../../utils/helpers.js";
+const q = N(({
+  onValueChange: a,
+  checked: s,
+  disabled: $ = !1,
+  isLoading: f = !1,
+  label: g = "right",
+  children: m,
+  ...n
+}, w) => {
   const {
-    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: r
+  } = O(), d = z(), t = s !== void 0, [x, p] = k(s ?? !1), c = t ? s : x, i = $ || f, b = u((l) => {
+    d.debug(`${e}: Value changed`, {
+      newChecked: l,
+      isControlled: t
+    }), t || p(l), a == null || a(l);
+  }, [a, t, d]), y = u((l) => {
+    d.debug(`${e}: Value change is disabled:`, {
+      isDisabled: i
+    }), !i && b(S(l, "target.checked", !1));
+  }, [i, b, d]);
+  return v(() => {
+    d.debug(`${e}: Update internal value when external value changes:`, {
+      checked: s,
+      isControlled: t
+    }), t && p(s);
+  }, [s, t, d]), /* @__PURE__ */ h(E, { theme: r, ref: w, $disabled: i, "data-testid": `${e}-wrapper`, ...n, children: [
+    m && /* @__PURE__ */ o(I, { className: "gd-switch-label", theme: r, $label: g, "data-testid": `${e}-label`, children: m }),
+    /* @__PURE__ */ h(T, { "data-testid": e, $checked: c, theme: r, children: [
+      f ? /* @__PURE__ */ o(M, { ...S(r, "switchToken.slider.loader.attrs", {}), styles: {
+        position: "relative",
+        zIndex: 1
+      } }) : null,
+      /* @__PURE__ */ o(j, { className: "gd-switch-slider", theme: r, $checked: c, $disabled: i, "data-testid": `${e}-slider` }),
+      /* @__PURE__ */ o(
+        L,
         {
-          theme: t,
-          checked: n,
-          disabled: s,
-          onChange: w,
-          "data-testid": `${r}-checkbox`,
-          ...o
+          theme: r,
+          checked: c,
+          disabled: i,
+          onChange: y,
+          "data-testid": `${e}-checkbox`,
+          ...n
         }
       )
     ] })
   ] });
 });
 export {
-  W as Switch
+  q as Switch
 };

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

@@ -1,10 +1,11 @@
 import { PropsWithChildren } from 'react';
-import { EnumOrPrimitive, LabelPosition } from '../../../types';
 import { BoxCssComponentProps, BoxCssComponentStyledProps, CommonCssInputStyledProps } from '../..';
+export type LabelPosition = 'left' | 'right';
 export interface SwitchProps<T> extends PropsWithChildren<BoxCssComponentProps<T>> {
-    label?: EnumOrPrimitive<LabelPosition>;
+    label?: LabelPosition;
     name?: string;
     disabled?: boolean;
+    isLoading?: boolean;
     checked?: boolean;
     onValueChange?: (value: boolean) => void;
 }
@@ -13,7 +14,7 @@ export interface SwitchStyledProps<T> extends PropsWithChildren<BoxCssComponentS
     $checked?: boolean;
 }
 export interface SwitchLabelStyledProps extends PropsWithChildren<BoxCssComponentStyledProps> {
-    $label?: EnumOrPrimitive<LabelPosition>;
+    $label?: LabelPosition;
 }
 export interface HiddenCheckboxStyledProps extends CommonCssInputStyledProps {
     disabled?: boolean;

package/components/core/Switch/SwitchStyled.js

@@ -1,81 +1,83 @@
 "use client";
-import { jsx as d } from "@emotion/react/jsx-runtime";
+import { jsx as i } from "@emotion/react/jsx-runtime";
 import { forwardRef as w } from "react";
 import { getBoxStyles as y, tokensHandler as S } from "../../../tokens/utils.js";
-import { get as h } from "../../../utils/helpers.js";
-const x = (e) => {
+import { get as t } from "../../../utils/helpers.js";
+const b = (s) => {
   const {
     theme: {
-      switchToken: t,
-      ...s
+      switchToken: o,
+      ...r
     } = {},
-    styles: o,
-    ...r
-  } = e, {
-    boxStyles: c,
-    restProps: n
-  } = y(r), l = new Proxy(t || {}, S(s)), p = [h(l, "checkbox", {}), c, o];
-  return /* @__PURE__ */ d("input", { type: "checkbox", css: p, ...n });
-}, b = w((e, t) => {
+    styles: c,
+    ...n
+  } = s, {
+    boxStyles: l,
+    restProps: d
+  } = y(n), p = new Proxy(o || {}, S(r)), e = [t(p, "checkbox", {}), l, c];
+  return /* @__PURE__ */ i("input", { type: "checkbox", css: e, ...d });
+}, x = w((s, o) => {
   const {
     theme: {
-      switchToken: s,
-      ...o
+      switchToken: r,
+      ...c
     } = {},
-    styles: r = {},
-    $disabled: c,
-    ...n
-  } = e, {
-    boxStyles: l,
-    restProps: p
-  } = y(n), i = new Proxy(s || {}, S(o));
-  return /* @__PURE__ */ d("label", { css: [h(i, "wrapper.default", {}), c ? h(i, "wrapper.disabled", {}) : {}, l, r], ...p, ref: t });
-}), u = (e) => {
+    styles: n = {},
+    $disabled: l,
+    ...d
+  } = s, {
+    boxStyles: p,
+    restProps: e
+  } = y(d), h = new Proxy(r || {}, S(c));
+  return /* @__PURE__ */ i("label", { css: [t(h, "wrapper.default", {}), l ? t(h, "wrapper.disabled", {}) : {}, p, n], ...e, ref: o });
+}), u = (s) => {
   const {
     theme: {
-      switchToken: t,
-      ...s
+      switchToken: o,
+      ...r
     } = {},
-    $label: o,
-    styles: r,
-    ...c
-  } = e, {
-    boxStyles: n,
-    restProps: l
-  } = y(c), p = new Proxy(t || {}, S(s));
-  return /* @__PURE__ */ d("span", { css: [h(p, "label.default", {}), h(p, ["label", o], {}), n, r], ...l });
-}, f = (e) => {
+    $label: c,
+    styles: n,
+    ...l
+  } = s, {
+    boxStyles: d,
+    restProps: p
+  } = y(l), e = new Proxy(o || {}, S(r));
+  return /* @__PURE__ */ i("span", { css: [t(e, "label.default", {}), t(e, ["label", c], {}), d, n], ...p });
+}, f = (s) => {
   const {
     theme: {
-      switchToken: t,
-      ...s
+      switchToken: o,
+      ...r
     } = {},
-    $checked: o,
-    styles: r,
-    ...c
-  } = e, {
-    boxStyles: n,
-    restProps: l
-  } = y(c), p = new Proxy(t || {}, S(s));
-  return /* @__PURE__ */ d("span", { css: [h(p, "slider.default", {}), o ? h(p, "slider.checked", {}) : {}, n, r], ...l });
-}, T = (e) => {
+    $checked: c,
+    $disabled: n,
+    styles: l,
+    ...d
+  } = s, {
+    boxStyles: p,
+    restProps: e
+  } = y(d), h = new Proxy(o || {}, S(r));
+  return /* @__PURE__ */ i("span", { css: [t(h, "slider.default", {}), c ? t(h, "slider.checked", {}) : {}, n ? t(h, "slider.disabled", {}) : {}, p, l], ...e });
+}, T = (s) => {
   const {
     theme: {
-      switchToken: t,
-      ...s
+      switchToken: o,
+      ...r
     } = {},
-    styles: o,
-    ...r
-  } = e, {
-    boxStyles: c,
-    restProps: n
-  } = y(r), l = new Proxy(t || {}, S(s));
-  return /* @__PURE__ */ d("span", { css: [h(l, "default", {}), c, o], ...n });
+    styles: c,
+    $checked: n,
+    ...l
+  } = s, {
+    boxStyles: d,
+    restProps: p
+  } = y(l), e = new Proxy(o || {}, S(r)), h = [t(e, "default", {}), n && t(e, "checked", {}), d, c];
+  return /* @__PURE__ */ i("span", { css: h, ...p });
 };
 export {
-  x as HiddenCheckboxStyled,
+  b as HiddenCheckboxStyled,
   u as SwitchLabelStyled,
   f as SwitchSliderStyled,
   T as SwitchStyled,
-  b as SwitchWrapperStyled
+  x as SwitchWrapperStyled
 };

package/components/core/Table/Table.d.ts

@@ -1,2 +1,2 @@
-import { TableProps, TableRef, TableRowData } from './Table.types';
-export declare const Table: import('react').ForwardRefExoticComponent<TableProps<TableRowData<Record<string, unknown>>> & import('react').RefAttributes<TableRef>>;
+import { TableProps, TableRef } from './Table.types';
+export declare const Table: import('react').ForwardRefExoticComponent<TableProps & import('react').RefAttributes<TableRef>>;