gd-design-library 1.3.0 → 1.5.0

package/ai/README.md

@@ -85,7 +85,7 @@ Component catalog
   - Forms: Form, Input, Select, Search, Label, Textarea, Switch, Toggle, RadioGroup, Slider, InputFile, DragAndDropFiles
   - Feedback & overlays: InlineNotification, Loader, Skeleton, Snackbar, SnackbarManager, Tooltip, Modal, Portal
   - Navigation & structure: Breadcrumbs, Tabs, Stepper, List, Accordion (with subcomponents: AccordionItem, AccordionHeader, AccordionContent), Link
-  - Display & content: Typography, Button, Icon, Image, Card, Avatar, Carousel, ContentCarousel, Counter, Price, ProgressBar, Rating, ChatContainer, ChatBubble
+  - Display & content: Typography, Button, Icon, Image, Card, Avatar, Carousel, ContentCarousel (with visibleItems, scrollStep, scrollAlignment props), Counter, Price, ProgressBar, Rating, ChatContainer, ChatBubble
 - Not part of gd-design-library (do not request/use): Grid, Stack, Alert, Toast, Table, Badge, ButtonGroup, Dropdown, Drawer, Popover, Pagination, Heading, Spinner.
 
 Important component structures:

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

@@ -0,0 +1,57 @@
+declare const _default: {
+    component: {
+        name: string;
+        import: string;
+        description: string;
+        category: string;
+        complexity: string;
+        accessibility: string;
+        performance: string;
+        dependencies: string[];
+        peerDependencies: string[];
+        bundleSize: string;
+        browserSupport: string;
+        touchSupport: boolean;
+        keyboardSupport: boolean;
+        screenReaderSupport: boolean;
+        props: ({
+            name: string;
+            type: string;
+            description: string;
+            default: string;
+            enum: string[];
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: string;
+            enum?: undefined;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default?: undefined;
+            enum?: undefined;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            required: boolean;
+            default?: undefined;
+            enum?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: {};
+            enum?: undefined;
+            required?: undefined;
+        })[];
+        examples: string[];
+    };
+    compositionTips: string[];
+};
+export default _default;

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

@@ -50,6 +50,24 @@ declare const _default: {
             required?: undefined;
             examples?: undefined;
             recommended?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: string;
+            examples: number[];
+            recommended: string;
+            required?: undefined;
+            accessibility?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: string;
+            examples: string[];
+            recommended: string;
+            required?: undefined;
+            accessibility?: undefined;
         } | {
             name: string;
             type: string;
@@ -72,8 +90,9 @@ declare const _default: {
         quickStart: {
             basic: string;
             withNavigation: string;
-            itemByItem: string;
-            accessible: string;
+            multipleVisible: string;
+            centered: string;
+            customScrollStep: string;
         };
         commonPatterns: {
             'Product Gallery': {

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

@@ -25,7 +25,7 @@ declare const _default: {
             name: string;
             type: string;
             description: string;
-            enum: (string | boolean)[];
+            enum: readonly ["user", "environment"];
             default: string;
             required?: undefined;
         } | {

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

@@ -0,0 +1,78 @@
+declare const _default: {
+    component: {
+        name: string;
+        import: string;
+        description: string;
+        category: string;
+        complexity: string;
+        accessibility: string;
+        performance: string;
+        dependencies: string[];
+        peerDependencies: string[];
+        bundleSize: string;
+        browserSupport: string;
+        touchSupport: boolean;
+        keyboardSupport: boolean;
+        screenReaderSupport: boolean;
+        props: ({
+            name: string;
+            type: string;
+            description: string;
+            required: boolean;
+            example: string;
+            default?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: boolean;
+            required?: undefined;
+            example?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: number;
+            required?: undefined;
+            example?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            example: string;
+            required?: undefined;
+            default?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: number[];
+            example: string;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            required?: undefined;
+            example?: undefined;
+            default?: undefined;
+        })[];
+        ref: {
+            type: string;
+            description: string;
+            methods: {
+                name: string;
+                type: string;
+                description: string;
+                example: string;
+            }[];
+            example: string;
+        };
+        examples: string[];
+        bestPractices: string[];
+        commonMistakes: string[];
+        relatedComponents: string[];
+    };
+    compositionTips: string[];
+};
+export default _default;

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

@@ -0,0 +1,46 @@
+declare const _default: {
+    component: {
+        name: string;
+        import: string;
+        description: string;
+        category: string;
+        complexity: string;
+        accessibility: string;
+        performance: string;
+        dependencies: string[];
+        peerDependencies: string[];
+        bundleSize: string;
+        browserSupport: string;
+        touchSupport: boolean;
+        keyboardSupport: boolean;
+        screenReaderSupport: boolean;
+        props: ({
+            name: string;
+            type: string;
+            description: string;
+            required: boolean;
+            default?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: number;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: {};
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            required?: undefined;
+            default?: undefined;
+        })[];
+        examples: string[];
+    };
+    compositionTips: string[];
+};
+export default _default;

package/components/core/Badge/Badge.d.ts

@@ -0,0 +1,2 @@
+import { BadgeProps } from './';
+export declare const Badge: import('react').ForwardRefExoticComponent<BadgeProps & import('react').RefAttributes<HTMLSpanElement>>;

package/components/core/Badge/Badge.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs as p, jsx as d } from "@emotion/react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { convertToInlineBoxStyles as u } from "../../../tokens/utils.js";
+import { COMPONENT_NAME as e } from "./constants.js";
+import { BadgeStyled as y, BadgeStartIconStyled as $, BadgeContentStyled as B, BadgeEndIconStyled as g } from "./BadgeStyled.js";
+import { useTheme as h } from "../../../hooks/useTheme/useTheme.js";
+const S = f(({
+  variant: n = "primary",
+  appearance: o = "filled",
+  size: l = "md",
+  children: i,
+  disabled: m,
+  iconStart: r = null,
+  iconEnd: a = null,
+  ...s
+}, c) => {
+  const {
+    theme: t
+  } = h();
+  return /* @__PURE__ */ p(y, { ref: c, $variant: n, $appearance: o, $size: l, theme: t, $disabled: m, "data-testid": e, ...u(s), children: [
+    r ? /* @__PURE__ */ d($, { theme: t, "data-testid": `${e}-icon-start`, children: r }) : null,
+    /* @__PURE__ */ d(B, { theme: t, "data-testid": `${e}-content`, children: i }),
+    a ? /* @__PURE__ */ d(g, { theme: t, "data-testid": `${e}-icon-end`, children: a }) : null
+  ] });
+});
+S.displayName = e;
+export {
+  S as Badge
+};

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

@@ -0,0 +1,20 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { EnumOrPrimitive } from '../../../types';
+import { BoxCssComponentProps, BoxCssComponentStyledProps } from '../..';
+export type BadgeVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
+export type BadgeAppearance = 'outline' | 'outlineFilledLight' | 'filled' | 'filledLight';
+export type BadgeSize = 'sm' | 'md';
+export interface BadgeProps extends BoxCssComponentProps<HTMLSpanElement>, PropsWithChildren {
+    variant?: EnumOrPrimitive<BadgeVariant>;
+    disabled?: boolean;
+    appearance?: EnumOrPrimitive<BadgeAppearance>;
+    size?: EnumOrPrimitive<BadgeSize>;
+    iconStart?: ReactNode;
+    iconEnd?: ReactNode;
+}
+export interface BadgeStyledProps extends BoxCssComponentStyledProps<HTMLSpanElement>, PropsWithChildren {
+    $variant?: EnumOrPrimitive<BadgeVariant>;
+    $appearance?: EnumOrPrimitive<BadgeAppearance>;
+    $size?: EnumOrPrimitive<BadgeSize>;
+    $disabled?: boolean;
+}

package/components/core/Badge/BadgeStyled.d.ts

@@ -0,0 +1,5 @@
+import { BadgeStyledProps } from './';
+export declare const BadgeStyled: import('react').ForwardRefExoticComponent<Omit<BadgeStyledProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const BadgeContentStyled: import('react').ForwardRefExoticComponent<Omit<BadgeStyledProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const BadgeStartIconStyled: import('react').ForwardRefExoticComponent<Omit<BadgeStyledProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const BadgeEndIconStyled: import('react').ForwardRefExoticComponent<Omit<BadgeStyledProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;

package/components/core/Badge/BadgeStyled.js

@@ -0,0 +1,54 @@
+import { jsx as d } from "@emotion/react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { getBoxStyles as i, tokensHandler as B } from "../../../tokens/utils.js";
+import { get as e } from "../../../utils/helpers.js";
+const I = a(({
+  theme: {
+    badge: s,
+    ...n
+  } = {},
+  $variant: t,
+  $appearance: o,
+  $size: r,
+  $disabled: l,
+  className: m,
+  styles: f = {},
+  ...g
+}, p) => {
+  const {
+    boxStyles: y,
+    restProps: S
+  } = i(g), c = new Proxy(s || {}, B(n)), u = [e(c, "default", {}), e(c, [t, o, "default"], {}), l ? e(c, [t, o, "disabled"], {}) : {}, r ? e(c, ["size", r], {}) : {}, y, f];
+  return /* @__PURE__ */ d("span", { css: u, className: m, ...S, ref: p });
+}), N = a(({
+  theme: {
+    badge: s
+  } = {},
+  styles: n,
+  ...t
+}, o) => {
+  const r = e(s, "content", {});
+  return /* @__PURE__ */ d("span", { css: [e(r, "default", {}), n], className: "gd-badge__content", ...t, ref: o });
+}), P = a(({
+  theme: {
+    badge: s
+  } = {},
+  ...n
+}, t) => {
+  const o = e(s, "startIcon", {});
+  return /* @__PURE__ */ d("span", { css: e(o, "default", {}), className: "gd-badge__icon-start", ...n, ref: t });
+}), w = a(({
+  theme: {
+    badge: s
+  } = {},
+  ...n
+}, t) => {
+  const o = e(s, "endIcon", {});
+  return /* @__PURE__ */ d("span", { css: e(o, "default", {}), className: "gd-badge__icon-end", ...n, ref: t });
+});
+export {
+  N as BadgeContentStyled,
+  w as BadgeEndIconStyled,
+  P as BadgeStartIconStyled,
+  I as BadgeStyled
+};

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

@@ -0,0 +1 @@
+export declare const COMPONENT_NAME = "Badge";

package/components/core/Badge/constants.js

@@ -0,0 +1,4 @@
+const N = "Badge";
+export {
+  N as COMPONENT_NAME
+};

package/components/core/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Badge';
+export * from './Badge.types';

package/components/core/Box/index.d.ts

@@ -1,3 +1,2 @@
 export * from './Box';
 export * from './Box.types';
-export * from './constants';

package/components/core/Button/Button.js

@@ -8,32 +8,32 @@ import { ButtonVariant as v, ButtonTypes as P, ButtonRole as M } from "../../../
 import { useTheme as O } from "../../../hooks/useTheme/useTheme.js";
 import { get as R } from "../../../utils/helpers.js";
 import { TabIndex as W } from "../../../types/accesability.js";
-const g = x((u, m) => {
+const g = x((s, u) => {
   const {
     theme: t
   } = O(), {
-    variant: c = v.Primary,
-    rounded: f = R(t, "button.attrs.rounded", "none"),
+    variant: m = v.Primary,
+    rounded: c = R(t, "button.attrs.rounded", "none"),
     children: o,
     iconStart: r = null,
     iconEnd: a = null,
-    type: p = P.Button,
-    disabled: y = !1,
-    isIcon: h = !1,
+    type: f = P.Button,
+    disabled: p = !1,
+    isIcon: y = !1,
     ariaLabel: i,
     ariaPressed: l,
-    role: B = M.Button,
-    fullWidth: I = !1,
-    tabIndex: S = W.Default,
-    onClick: $,
+    role: h = M.Button,
+    fullWidth: B = !1,
+    tabIndex: I = W.Default,
+    onClick: S,
     justifyContent: d,
-    ...s
-  } = u;
-  return /* @__PURE__ */ b(C, { ref: m, $variant: c, $isIcon: h, $fullWidth: I, $rounded: f, disabled: y, onClick: $, type: p, role: B, theme: t, tabIndex: S, "data-testid": e, ...T(s), ...i ? {
+    ...$
+  } = s;
+  return /* @__PURE__ */ b(C, { ref: u, $variant: m, $isIcon: y, $fullWidth: B, $rounded: c, disabled: p, onClick: S, type: f, role: h, theme: t, tabIndex: I, "data-testid": e, ...T($), ...i ? {
     "aria-label": i
   } : {}, ...l ? {
     "aria-pressed": l
-  } : {}, ...s, children: [
+  } : {}, children: [
     r ? /* @__PURE__ */ n(E, { theme: t, "data-testid": `${e}-icon-start`, children: r }) : null,
     o ? /* @__PURE__ */ n(N, { theme: t, styles: d ? {
       justifyContent: d

package/components/core/DropdownItem/DropdownItem.js

@@ -1,45 +1,46 @@
 "use client";
 import { jsx as E } from "@emotion/react/jsx-runtime";
-import { forwardRef as x, useMemo as I, useCallback as u } from "react";
-import { KEYBOARD_KEYS as O } from "../../../constants/keyboard.js";
+import { forwardRef as x, useMemo as O, useCallback as p } from "react";
+import { KEYBOARD_KEYS as K } from "../../../constants/keyboard.js";
 import { COMPONENT_NAME as D } from "./constants.js";
-import { DropdownItemStyled as v } from "./DropdownItemStyled.js";
-import { useSelectContext as K } from "../Select/hooks/useSelectContext.js";
-import { useTheme as T } from "../../../hooks/useTheme/useTheme.js";
-import { TabIndex as p } from "../../../types/accesability.js";
-const k = x((S, N) => {
+import { DropdownItemStyled as N } from "./DropdownItemStyled.js";
+import { useSelectContext as T } from "../Select/hooks/useSelectContext.js";
+import { useTheme as k } from "../../../hooks/useTheme/useTheme.js";
+import { TabIndex as y } from "../../../types/accesability.js";
+const I = x((S, v) => {
   const {
-    children: y,
-    value: n,
-    onSelect: i,
-    className: o,
-    disabled: e,
-    name: d,
+    children: A,
+    value: a,
+    onSelect: l,
+    className: e,
+    disabled: t,
+    name: c,
     ...b
   } = S, {
     theme: h
-  } = T(), {
+  } = k(), {
     onSelect: s,
-    value: l,
-    itemIdentifier: m
-  } = K(), r = {
-    name: d,
-    value: n
-  }, c = JSON.stringify(r), f = l !== void 0 && m ? m(l, r) : o == null ? void 0 : o.includes("active"), w = I(() => `${o || ""} ${f ? "active" : ""}`, [o, f]), a = u((t) => {
-    if (!e)
-      return i ? i({
-        event: t,
-        data: r
+    value: n,
+    itemIdentifier: i,
+    multiple: u
+  } = T(), o = {
+    name: c,
+    value: a
+  }, f = JSON.stringify(o), m = n === void 0 ? e == null ? void 0 : e.includes("active") : u && Array.isArray(n) ? n.some((r) => (i == null ? void 0 : i(r, o)) ?? r.value === o.value) : !u && !Array.isArray(n) && i ? i(n, o) : e == null ? void 0 : e.includes("active"), w = O(() => `${e || ""} ${m ? "active" : ""}`, [e, m]), d = p((r) => {
+    if (!t)
+      return l ? l({
+        event: r,
+        data: o
       }) : s && s({
-        event: t,
-        data: r
-      }), n;
-  }, [i, s, c, JSON.stringify(n), e]), C = u((t) => {
-    e || t.key === O.ENTER && (t.preventDefault(), a(t));
-  }, [a, e, c]);
-  return /* @__PURE__ */ E(v, { ref: N, theme: h, $disabled: e, tabIndex: e ? p.Disabled : p.Default, "data-testid": D, className: w, onClick: a, onKeyDown: C, ...b, children: y || d });
+        event: r,
+        data: o
+      }), a;
+  }, [l, s, f, JSON.stringify(a), t]), C = p((r) => {
+    t || r.key === K.ENTER && (r.preventDefault(), d(r));
+  }, [d, t, f]);
+  return /* @__PURE__ */ E(N, { ref: v, theme: h, $disabled: t, tabIndex: t ? y.Disabled : y.Default, "data-testid": D, className: w, onClick: d, onKeyDown: C, ...b, children: A || c });
 });
-k.displayName = D;
+I.displayName = D;
 export {
-  k as DropdownItem
+  I as DropdownItem
 };

package/components/core/Input/Input.js

@@ -1,73 +1,73 @@
 "use client";
-import { jsxs as t, jsx as r, Fragment as L } from "@emotion/react/jsx-runtime";
-import { forwardRef as P } from "react";
-import { DEFAULT_PROPS as e, COMPONENT_NAME as o, FOCUS_EXCLUDED_LIST as U } from "./constants.js";
-import { useInputHandlers as g } from "./useInputHandlers.js";
-import { InputStyled as j } from "./InputStyled.js";
-import { InputWrapper as c } from "./InputWrapper/InputWrapper.js";
+import { jsxs as s, jsx as r, Fragment as j } from "@emotion/react/jsx-runtime";
+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 { InputAdornment as h } from "./InputAdornment/InputAdornment.js";
-import { useTheme as v } from "../../../hooks/useTheme/useTheme.js";
-import { SizeVariant as z } from "../../../types/common.js";
-const B = P((f, b) => {
+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";
+const G = q(({
+  wrapperAs: h = "label",
+  // Layout props
+  styles: I = {},
+  className: _ = "",
+  width: N,
+  // Input behavior props
+  variant: n = e.variant,
+  color: m = e.color,
+  disabled: S = e.disabled,
+  readOnly: O = e.readOnly,
+  // Accessibility props
+  ariaRequired: w = e.ariaRequired,
+  role: y = e.role,
+  tabIndex: E = e.tabIndex,
+  ariaDescribedBy: a,
+  // Event handling props
+  debounceCallbackTime: F,
+  onChange: M,
+  onKeyDown: $,
+  onMouseDown: b,
+  onBlur: A,
+  // Adornments
+  adornmentStart: p,
+  adornmentEnd: d,
+  // Helper text
+  label: i,
+  helperText: t,
+  ...C
+}, H) => {
   const {
-    theme: I
-  } = v(), {
-    wrapperAs: y = "label",
-    // Layout props
-    width: w,
-    className: N = e.className,
-    styles: S = e.styles,
-    // Input behavior props
-    variant: s = e.variant,
-    color: i = e.color,
-    disabled: _ = e.disabled,
-    readOnly: x = e.readOnly,
-    // Accessibility props
-    ariaRequired: D = e.ariaRequired,
-    role: E = e.role,
-    tabIndex: O = e.tabIndex,
-    ariaDescribedBy: l,
-    // Event handling props
-    debounceCallbackTime: T,
-    onChange: C,
-    onKeyDown: M,
-    onMouseDown: A,
-    onBlur: F,
-    // Adornments
-    adornmentStart: d,
-    adornmentEnd: m,
-    // Helper text
-    label: a,
-    helperText: n,
-    ...R
-  } = f, p = !U.includes(s), $ = !!(a || n), {
-    handlers: q,
-    isMouseInteraction: H
-  } = g({
-    onKeyDown: M,
-    onBlur: F,
-    onMouseDown: A,
-    onChange: C,
-    debounceCallbackTime: T
+    theme: L
+  } = T(), c = !x.includes(n), P = !!(i || t), {
+    handlers: R,
+    isMouseInteraction: U
+  } = z({
+    onKeyDown: $,
+    onBlur: A,
+    onMouseDown: b,
+    onChange: M,
+    debounceCallbackTime: F
   });
-  return /* @__PURE__ */ t(c, { as: y, withGap: $, className: N, width: w, styles: S, children: [
-    a && /* @__PURE__ */ r(u, { children: a }),
-    /* @__PURE__ */ t(c, { width: "100%", children: [
-      d && /* @__PURE__ */ r(h, { children: d }),
-      /* @__PURE__ */ r(j, { $isMouseInteraction: H && p, $color: i, ref: b, disabled: _, role: E, theme: I, type: s, readOnly: x, tabIndex: O, "aria-required": D, "data-testid": o, ...q, ...l ? {
-        "aria-describedby": l
-      } : {}, ...R }),
-      p && /* @__PURE__ */ t(L, { children: [
+  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: [
+      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
+      } : {}, ...C }),
+      c && /* @__PURE__ */ s(j, { children: [
         /* @__PURE__ */ r("span", { className: `${o}__border` }),
         /* @__PURE__ */ r("span", { className: `${o}__outline` })
       ] }),
-      m && /* @__PURE__ */ r(h, { children: m })
+      d && /* @__PURE__ */ r(f, { children: d })
     ] }),
-    n && /* @__PURE__ */ r(u, { color: i, size: z.Sm, children: n })
+    t && /* @__PURE__ */ r(u, { color: m, size: g.Sm, children: t })
   ] });
 });
-B.displayName = o;
+G.displayName = o;
 export {
-  B as Input
+  G as Input
 };

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

@@ -57,7 +57,6 @@ export interface InputHelperProps extends CommonCssComponentProps, PropsWithChil
 }
 export interface InputWrapperPropsStyled extends CommonCssComponentStyledProps<HTMLBaseElement>, PropsWithChildren {
     $as?: keyof HTMLElementTagNameMap | ElementType;
-    $width?: string;
     $withGap?: boolean;
 }
 export interface InputHelperPropsStyled extends CommonCssComponentStyledProps, PropsWithChildren {