gd-design-library 1.7.2 → 1.8.1

package/ai/testing_prompts/molecular_prompts.md

@@ -0,0 +1,155 @@
+# Molecular Component Testing Prompts
+
+## PROMPT FOR ACCORDION
+
+Generate default Accordion with 2 titles: one already opened with title = 'Cappuccino', the second closed with title = 'Latte' containing 1–2 sentences about coffee.
+
+---
+
+## PROMPT FOR BREADCRUMBS
+
+Generate breadcrumbs with string separator = `|`, content = 'product', 'home', 'category', and with an information icon at the end, colored with border.
+
+---
+
+## PROMPT FOR COUNTER
+
+Generate 2 different counters:
+
+1. Simple counter with initial value = 5, min = 0, and max = 20
+2. Disabled counter with initial value = 25
+
+---
+
+## PROMPT FOR DROPDOWN
+
+Generate 2 different dropdowns:
+
+1. Simple dropdown with 2 options: 'drop' and 'down'
+2. Dropdown with checkboxes: 'drop' and 'up'
+
+---
+
+## PROMPT FOR FORM
+
+Generate a complete form containing the following components:
+
+- Input with email variant/type
+- Input with password variant/type
+- Checkbox input with label = 'Remember me'
+- Radio input group with options = 'yes', 'no', 'maybe'
+- Submit button with text = 'Submit data'
+
+---
+
+## PROMPT FOR INLINE NOTIFICATION
+
+Generate 3 types of inline notifications:
+
+1. Default inline notification with text: 'Default InlineNotification'
+2. Inline notification with text: 'Info InlineNotification'
+3. Warning inline notification
+
+---
+
+## PROMPT FOR LIST
+
+Generate list component with 3 list items: 'Item1', 'Item2', 'Item3'.
+
+---
+
+## PROMPT FOR MENU
+
+Generate menu component with 3 items inside it: 'Open', 'Close', 'Profile'.
+
+---
+
+## PROMPT FOR PRICE
+
+Generate 3 different types of price:
+
+1. Default price = 50 with decimals, size small
+2. With old price: new = 120, old = 300, European convention, size medium
+3. Free price, old one is 300, size large
+
+---
+
+## PROMPT FOR PROGRESSBAR
+
+Generate 2 different types of progress bar:
+
+1. Default progress bar with value = 20 and percentage text displayed on it
+2. Progress bar with value = 50, no percentage displayed
+
+---
+
+## PROMPT FOR RADIOGROUP
+
+Generate 3 different radio groups:
+
+1. Default radio group with 5 basic options, where the second option is disabled and with a pre-selected `defaultValue` = 3
+2. Color picker using the 'grid' variant with `gridColumns` = 3 and `gridColumnGutter`
+3. Visual image picker where options contain an `image` URL and `tooltip`
+
+---
+
+## PROMPT FOR RATING
+
+Generate 3 different ratings:
+
+1. Default interactive rating with a pre-selected `defaultValue` = 3
+2. Read-only rating with a fractional value = 4.5 and size = 'lg'
+3. Rating with max = 10, value = 7, size = 'sm', with custom color = #FF0000
+
+---
+
+## PROMPT FOR SNACKBAR
+
+Generate a component with 4 buttons that trigger different snackbars using the `showSnackbar` function:
+
+1. Success snackbar with title = 'Saved' and a short duration of 3000ms
+2. Persistent error snackbar (duration = 0, dismissOnClick = false) containing an 'action' button 'Retry'
+3. Warning snackbar with the 'colored' property enabled (filled background)
+4. Info snackbar that overrides the default icon with a custom icon
+
+---
+
+## PROMPT FOR STEPPER
+
+Generate 3 different steppers:
+
+1. Default checkout stepper with 4 steps ('Cart', 'Shipping', 'Payment', 'Review') where activeStep = 1
+2. Stepper displaying validation states: first step has validationStatus = 'success', second step has validationStatus = 'error', and activeStep = 2
+3. Icons view stepper (`isIconsView` = true) with 3 steps
+
+---
+
+## PROMPT FOR TABLE
+
+Generate 4 different tables:
+
+1. Basic table where the first column has a fixed width of '200px' and the second has a width of '15%', using a small dataset
+2. Table with expandable rows (`expandableRows` = true) that renders a custom Box with text inside `renderExpandedContent`
+3. Table with stickyHeader and sticky footer including a generated large dataset of 30 items
+4. Table in a loading state (`loading` = true) that displays a custom `loadingState` using Skeleton components instead of data
+
+---
+
+## PROMPT FOR TABS
+
+Generate 3 different tabs:
+
+1. Default tabs with 3 items ('Overview', 'Details', 'Reviews') where activeTab = 1
+2. Tabs where one of the items has a noticeCounter = 3
+3. Tabs where the last item is disabled
+
+---
+
+## PROMPT FOR TOOLTIP
+
+Generate 2 different tooltips:
+
+1. Default tooltip with content = 'Save your changes' wrapping a standard Button
+2. Tooltip with rich content (using a Typography component inside the content prop)
+
+---

package/components/atoms/Avatar/Avatar.d.ts

@@ -1,6 +1,9 @@
+import { AvatarUser } from '../../molecules';
 import { AvatarProps } from './Avatar.types';
-export declare const Avatar: import('react').ForwardRefExoticComponent<AvatarProps & {
+declare const AvatarBase: import('react').ForwardRefExoticComponent<AvatarProps & {
     children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLDivElement>> & {
-    User: import('react').ForwardRefExoticComponent<import('../..').AvatarUserProps & import('react').RefAttributes<HTMLDivElement>>;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Avatar: typeof AvatarBase & {
+    User: typeof AvatarUser;
 };
+export {};

package/components/atoms/Avatar/Avatar.js

@@ -1,19 +1,19 @@
 "use client";
-import { jsxs as s, jsx as l } from "@emotion/react/jsx-runtime";
+import { jsxs as l, jsx as i } from "@emotion/react/jsx-runtime";
 import { forwardRef as E, useState as S } from "react";
 import { COMPONENT_NAME as d, FALLBACK_COMPONENT as B, BADGE_COMPONENT as F } from "./constants.js";
-import { AvatarStyled as T, AvatarImageWrapperStyled as $, FallbackComponentWrapperStyled as x, FallbackTextStyled as z, BadgeStyled as M } from "./AvatarStyled.js";
-import { AvatarUser as P } from "../../molecules/AvatarUser/AvatarUser.js";
-import { Image as V } from "../Image/Image.js";
+import { AvatarStyled as P, AvatarImageWrapperStyled as T, FallbackComponentWrapperStyled as $, FallbackTextStyled as x, BadgeStyled as z } from "./AvatarStyled.js";
+import { Image as M } from "../Image/Image.js";
+import { AvatarUser as V } from "../../molecules/AvatarUser/AvatarUser.js";
 import { useTheme as j } from "../../../hooks/useTheme/useTheme.js";
-const m = E((p, f) => {
+const m = E((f, p) => {
   const {
-    id: b,
-    sizeVariant: t,
-    withBadge: g,
-    badgeColor: u = "bg.fill.success.primary.default",
+    id: u,
+    sizeVariant: a,
+    withBadge: b,
+    badgeColor: g = "bg.fill.success.primary.default",
     backgroundColor: y,
-    src: r,
+    src: t,
     alt: o,
     className: A,
     placeholder: C,
@@ -21,28 +21,31 @@ const m = E((p, f) => {
     fallbackComponent: e,
     styles: h = {},
     ...O
-  } = p, {
-    theme: a
-  } = j(), [i, n] = S(!1), k = () => {
+  } = f, {
+    theme: r
+  } = j(), [s, n] = S(!1), k = () => {
     n(!0);
   }, v = () => {
     n(!1);
   }, c = typeof e == "string" || typeof e == "number";
-  return /* @__PURE__ */ s(T, { theme: a, role: "img", "aria-label": o, $sizeVariant: t, styles: h, ref: f, className: A, "data-testid": d, ...O, children: [
-    /* @__PURE__ */ s($, { $color: y, theme: a, children: [
-      !i && r && /* @__PURE__ */ l(V, { id: b, src: r, alt: o, placeholder: C, onClick: N, onError: k, onLoad: v }),
-      (i || !r) && /* @__PURE__ */ s(x, { "data-testid": B, "aria-label": o, children: [
-        c && /* @__PURE__ */ l(z, { $sizeVariant: t, theme: a, children: e }),
+  return /* @__PURE__ */ l(P, { theme: r, role: "img", "aria-label": o, $sizeVariant: a, styles: h, ref: p, className: A, "data-testid": d, ...O, children: [
+    /* @__PURE__ */ l(T, { $color: y, theme: r, children: [
+      !s && t && /* @__PURE__ */ i(M, { id: u, src: t, alt: o, placeholder: C, onClick: N, onError: k, onLoad: v }),
+      (s || !t) && /* @__PURE__ */ l($, { "data-testid": B, "aria-label": o, children: [
+        c && /* @__PURE__ */ i(x, { $sizeVariant: a, theme: r, children: e }),
         !c && e
       ] })
     ] }),
-    g && /* @__PURE__ */ l(M, { "data-testid": F, role: "status", $color: u, theme: a, $sizeVariant: t })
+    b && /* @__PURE__ */ i(z, { "data-testid": F, role: "status", $color: g, theme: r, $sizeVariant: a })
   ] });
 });
 m.displayName = d;
-const G = Object.assign(m, {
-  User: P
+const L = m;
+Object.defineProperty(L, "User", {
+  configurable: !0,
+  enumerable: !0,
+  get: () => V
 });
 export {
-  G as Avatar
+  L as Avatar
 };

package/components/atoms/Avatar/AvatarStyled.js

@@ -2,8 +2,8 @@
 import { jsx as d } from "@emotion/react/jsx-runtime";
 import { getBoxStyles as i, tokensHandler as u, resolveThemeColor as P } from "../../../tokens/utils.js";
 import { Row as x } from "../../layout/Row/Row.js";
-import { Typography as b } from "../Typography/Typography.js";
 import { get as o } from "../../../utils/helpers.js";
+import { Typography as b } from "../Typography/Typography.js";
 const $ = (t) => {
   const {
     theme: {

package/components/atoms/Button/Button.js

@@ -4,27 +4,27 @@ import { forwardRef as v } from "react";
 import { convertToInlineBoxStyles as C } from "../../../tokens/utils.js";
 import { COMPONENT_NAME as o } from "./constants.js";
 import { ButtonStyled as E, StartIconStyled as N, ContentStyled as g, EndIconStyled as j } from "./ButtonStyled.js";
-import { ButtonVariant as L, ButtonTypes as P, ButtonRole as W } from "../../../types/button.js";
-import { Loader as w } from "../Loader/Loader.js";
-import { useTheme as M } from "../../../hooks/useTheme/useTheme.js";
+import { Loader as L } from "../Loader/Loader.js";
+import { useTheme as P } from "../../../hooks/useTheme/useTheme.js";
+import { ButtonVariant as W, ButtonTypes as w, ButtonRole as M } from "../../../types/button.js";
 import { get as O } from "../../../utils/helpers.js";
 import { TabIndex as R } from "../../../types/accesability.js";
 const k = v((m, u) => {
   const {
     theme: t
-  } = M(), {
-    variant: f = L.Primary,
+  } = P(), {
+    variant: f = W.Primary,
     rounded: c = O(t, "button.attrs.rounded", "none"),
     children: n,
     iconStart: a = null,
     iconEnd: i = null,
-    type: p = P.Button,
+    type: p = w.Button,
     disabled: y = !1,
     isIcon: h = !1,
     isLoading: r = !1,
     ariaLabel: l,
     ariaPressed: d,
-    role: b = W.Button,
+    role: b = M.Button,
     fullWidth: B = !1,
     tabIndex: x = R.Default,
     onClick: I,
@@ -35,7 +35,7 @@ const k = v((m, u) => {
     "aria-label": l
   } : {}, ...d ? {
     "aria-pressed": d
-  } : {}, children: r ? /* @__PURE__ */ e(w, { size: "xs", withWrapper: !1 }) : /* @__PURE__ */ $(T, { children: [
+  } : {}, children: r ? /* @__PURE__ */ e(L, { size: "xs", withWrapper: !1 }) : /* @__PURE__ */ $(T, { children: [
     a ? /* @__PURE__ */ e(N, { theme: t, "data-testid": `${o}-icon-start`, children: a }) : null,
     n ? /* @__PURE__ */ e(g, { theme: t, styles: s ? {
       justifyContent: s

package/components/atoms/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" | "placeholder" | "variant" | "readOnly" | "required" | "debounceCallbackTime" | "ariaRequired" | "ariaDescribedBy" | "inputmode" | "wrapperAs" | "helperText" | "adornmentStart" | "adornmentEnd">>) & 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" | "onClick" | "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" | "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" | "readOnly" | "placeholder" | "required" | "ariaRequired" | "ariaDescribedBy" | "inputmode" | "debounceCallbackTime" | "wrapperAs" | "helperText" | "adornmentStart" | "adornmentEnd">>) & import('react').RefAttributes<HTMLInputElement>>;

package/components/atoms/Input/constants.js

@@ -1,5 +1,5 @@
-import { InputVariantType as a } from "../../../types/input.js";
 import { TabIndex as e } from "../../../types/accesability.js";
+import { InputVariantType as a } from "../../../types/input.js";
 const o = "Input", n = {
   variant: a.Text,
   color: "primary",

package/components/atoms/Input/useInputHandlers.js

@@ -1,9 +1,9 @@
 "use client";
 import { useState as A, useCallback as d } from "react";
 import { COMPONENT_NAME as c } from "./constants.js";
-import { KEYBOARD_KEYS as m } from "../../../constants/keyboard.js";
-import { debounce as p } from "../../../utils/helpers.js";
+import { debounce as m } from "../../../utils/helpers.js";
 import { useLogger as E } from "../../../hooks/useLogger/useLogger.js";
+import { KEYBOARD_KEYS as p } from "../../../constants/keyboard.js";
 const n = ({
   onMouseDown: s,
   onChange: f,
@@ -14,16 +14,16 @@ const n = ({
   const [i, g] = A(!1), e = E(), o = d((t) => {
     g(!0), e.debug(`${c}: MouseDown`), s == null || s(t);
   }, [s, e]), l = d((t) => {
-    t.key === m.TAB && g(!1), e.debug(`${c}: KeyDown`, {
+    t.key === p.TAB && g(!1), e.debug(`${c}: KeyDown`, {
       key: t.key,
-      isTab: t.key === m.TAB
+      isTab: t.key === p.TAB
     }), r == null || r(t);
   }, [r, e]), h = d((t) => {
     g(!1), e.debug(`${c}: Blur`, {
       value: t.target.value,
       valueLength: t.target.value.length
     }), u == null || u(t);
-  }, [u, e]), b = typeof a == "number" && r ? p(l, a) : l, y = typeof a == "number" && f ? p(f, a) : f;
+  }, [u, e]), b = typeof a == "number" && r ? m(l, a) : l, y = typeof a == "number" && f ? m(f, a) : f;
   return {
     handlers: {
       onMouseDown: o,

package/components/atoms/Link/Link.js

@@ -4,9 +4,9 @@ import { forwardRef as x } from "react";
 import { COMPONENT_NAME as r } from "./constants.js";
 import { LinkStyled as h } from "./LinkStyled.js";
 import { LinkVariant as T, LinkTarget as y } from "../../../types/link.js";
-import { Roles as C } from "../types/roles.types.js";
-import { Cursors as P } from "../../../types/cursors.js";
-import { TabIndex as g } from "../../../types/accesability.js";
+import { Cursors as C } from "../../../types/cursors.js";
+import { TabIndex as P } from "../../../types/accesability.js";
+import { Roles as g } from "../types/roles.types.js";
 import { useTheme as v } from "../../../hooks/useTheme/useTheme.js";
 const z = x((t, o) => {
   const {
@@ -15,11 +15,11 @@ const z = x((t, o) => {
     underline: s,
     disabled: e = !1,
     className: l = "",
-    cursor: d = P.Pointer,
+    cursor: d = C.Pointer,
     target: f = y.Blank,
-    tabindex: p = g.Default,
+    tabindex: p = P.Default,
     href: c,
-    role: u = C.Link,
+    role: u = g.Link,
     children: b,
     onClick: k,
     ariaLabel: i,

package/components/atoms/Loader/Loader.js

@@ -3,27 +3,27 @@ import { jsx as o } from "@emotion/react/jsx-runtime";
 import { forwardRef as N } from "react";
 import { BASE_ANIMATION as P, COMPONENT_NAME as p } from "./constants.js";
 import { LoaderStyled as $ } from "./LoaderStyled.js";
-import { Portal as w } from "../../layout/Portal/Portal.js";
-import A from "../Wrapper/Wrapper.js";
-import { useTheme as M } from "../../../hooks/useTheme/useTheme.js";
+import w from "../Wrapper/Wrapper.js";
+import { useTheme as A } from "../../../hooks/useTheme/useTheme.js";
 import { WrapperVariant as m } from "../../../types/wrapper.js";
-import { get as V } from "../../../utils/helpers.js";
-import { SizeVariant as W } from "../../../types/common.js";
+import { get as M } from "../../../utils/helpers.js";
+import { SizeVariant as V } from "../../../types/common.js";
+import { Portal as W } from "../../layout/Portal/Portal.js";
 const g = N((d, s) => {
   const {
     theme: t
-  } = M(), {
+  } = A(), {
     name: f = "circle",
     variant: r = m.Inline,
-    rounded: l = V(t, "loader.attrs.rounded", "none"),
+    rounded: l = M(t, "loader.attrs.rounded", "none"),
     children: a,
-    size: c = W.Md,
+    size: c = V.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: 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();
+  return r === m.FullPage ? /* @__PURE__ */ o(W, { wrapperVariant: r, withWrapper: i, WrapperView: n, children: e() }) : i ? /* @__PURE__ */ o(w, { variant: r, as: n, children: e() }) : e();
 });
 g.displayName = p;
 export {

package/components/atoms/Select/Select.js

@@ -7,10 +7,10 @@ import { Dropdown as Ke } from "../../molecules/Dropdown/Dropdown.js";
 import { DEFAULT_SELECTED_VALUE as Fe, COMPONENT_NAME as l } from "./constants.js";
 import { SelectWrapperStyled as Ve, InitiatorWrapperStyled as Ue, DropdownButtonStyled as je, SelectAdornmentStyled as V, ArrowIconWrapperStyled as ze, SelectSearchInputStyled as Ye } from "./SelectStyled.js";
 import { getClosestFocusable as U } from "../../../utils/focus.js";
-import { SelectContext as qe } from "./hooks/useSelectContext.js";
 import { get as le, toNumber as ce } from "../../../utils/helpers.js";
-import { useTheme as Ge } from "../../../hooks/useTheme/useTheme.js";
-import { useLogger as Je } from "../../../hooks/useLogger/useLogger.js";
+import { useTheme as qe } from "../../../hooks/useTheme/useTheme.js";
+import { useLogger as Ge } from "../../../hooks/useLogger/useLogger.js";
+import { SelectContext as Je } from "./hooks/useSelectContext.js";
 import { Icon as Qe } from "../Icon/Icon.js";
 import { Portal as Xe } from "../../layout/Portal/Portal.js";
 const Ze = Ie((ue, ae) => {
@@ -43,7 +43,7 @@ const Ze = Ie((ue, ae) => {
     searchPlaceholder: ge = "Search..."
   } = ue, {
     theme: w
-  } = Ge(), a = Je(), d = D(null), B = D(null), x = D(null), Q = D(!0), [p, g] = y(!1), [t, W] = y(v ? Array.isArray(i) ? i : i ? [i] : [] : i ?? null), [H, X] = y(""), Z = D(null), S = L && H ? h == null ? void 0 : h.filter((e) => P(e).toLowerCase().includes(H.toLowerCase())) : h, [ye, he] = y(T), [ve, Ae] = y("bottom"), [be, Ee] = y(I), [Se, De] = y(-9999), [Re, ee] = y(void 0), [$e, re] = y(void 0), Oe = 1;
+  } = qe(), a = Ge(), d = D(null), B = D(null), x = D(null), Q = D(!0), [p, g] = y(!1), [t, W] = y(v ? Array.isArray(i) ? i : i ? [i] : [] : i ?? null), [H, X] = y(""), Z = D(null), S = L && H ? h == null ? void 0 : h.filter((e) => P(e).toLowerCase().includes(H.toLowerCase())) : h, [ye, he] = y(T), [ve, Ae] = y("bottom"), [be, Ee] = y(I), [Se, De] = y(-9999), [Re, ee] = y(void 0), [$e, re] = y(void 0), Oe = 1;
   C(() => {
     if (p) {
       if (a.debug(`${l}: Open`, {
@@ -230,7 +230,7 @@ const Ze = Ie((ue, ae) => {
     toggle: () => {
       u || g((e) => !e);
     }
-  })), /* @__PURE__ */ f(qe.Provider, { value: Ce, children: /* @__PURE__ */ F(Ve, { ref: d, theme: w, "data-testid": l, styles: {
+  })), /* @__PURE__ */ f(Je.Provider, { value: Ce, children: /* @__PURE__ */ F(Ve, { ref: d, theme: w, "data-testid": l, styles: {
     ...fe,
     width: T,
     maxWidth: q,

package/components/layout/ChatContainer/ChatContainer.js

@@ -4,10 +4,10 @@ import { forwardRef as N, useRef as I, useState as W, useCallback as b, useImper
 import { COMPONENT_NAME as t } from "./constants.js";
 import { MainWrapperStyled as B, SidebarWrapperStyled as D, SidebarStyled as E, SidebarHeaderStyled as H, SidebarToggleButtonStyled as $, SidebarContentWrapperStyled as P, SidebarMinifiedStyled as v, BodyStyled as A, MainHeaderStyled as L, ContentStyled as Q } from "./ChatContainerStyled.js";
 import { useMediaQuery as _ } from "../../../hooks/useMediaQuery/useMediaQuery.js";
-import { Icon as g } from "../../atoms/Icon/Icon.js";
 import { useTheme as q } from "../../../hooks/useTheme/useTheme.js";
 import { useLogger as z } from "../../../hooks/useLogger/useLogger.js";
 import { get as p } from "../../../utils/helpers.js";
+import { Icon as g } from "../../atoms/Icon/Icon.js";
 const F = N(({
   sidebarContent: y,
   headerContent: m,

package/components/layout/ChatContainer/ChatContainerStyled.js

@@ -1,9 +1,9 @@
 import { jsx as p } from "@emotion/react/jsx-runtime";
 import { forwardRef as P } from "react";
 import { getBoxStyles as m, tokensHandler as i, getMediaQuery as S } from "../../../tokens/utils.js";
-import { Button as b } from "../../atoms/Button/Button.js";
 import { get as t } from "../../../utils/helpers.js";
-import { ButtonVariant as u } from "../../../types/button.js";
+import { ButtonVariant as b } from "../../../types/button.js";
+import { Button as u } from "../../atoms/Button/Button.js";
 const N = P((n, s) => {
   const {
     theme: {
@@ -132,13 +132,13 @@ const N = P((n, s) => {
     boxStyles: r,
     restProps: d
   } = m(o), a = new Proxy(s || {}, i(e)), l = c ? t(a, "toggleButton.open") : {}, y = t(a, "toggleButton.attrs", {
-    variant: u.Text
+    variant: b.Text
   }), h = {
     ...t(a, "toggleButton.default"),
     ...l,
     ...r
   };
-  return /* @__PURE__ */ p(b, { ...y, ...d, isIcon: !0, styles: h });
+  return /* @__PURE__ */ p(u, { ...y, ...d, isIcon: !0, styles: h });
 };
 export {
   M as BodyStyled,

package/components/molecules/AvatarUser/AvatarUser.d.ts

@@ -1,2 +1,2 @@
-import { AvatarUserProps } from '../../atoms/Avatar/Avatar.types';
+import { AvatarUserProps } from '../../atoms';
 export declare const AvatarUser: import('react').ForwardRefExoticComponent<AvatarUserProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/molecules/AvatarUser/AvatarUser.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsxs as l, jsx as e } from "@emotion/react/jsx-runtime";
 import { forwardRef as N } from "react";
-import { COMPONENT_NAME as m } from "./constants.js";
 import { AvatarUserStyled as V } from "./AvatarUserStyled.js";
+import { COMPONENT_NAME as m } from "./constants.js";
 import { Avatar as $ } from "../../atoms/Avatar/Avatar.js";
 import { useTheme as x } from "../../../hooks/useTheme/useTheme.js";
 import { get as i } from "../../../utils/helpers.js";

package/components/molecules/Counter/Counter.js

@@ -3,12 +3,12 @@ import { jsxs as E, jsx as i } from "@emotion/react/jsx-runtime";
 import { forwardRef as k, useState as N, useRef as A, useEffect as R } from "react";
 import { INITIAL_QTY as B, COMPONENT_NAME as e, MAX_INITIAL_QTY as L, MIN_INITIAL_QTY as Q, REGEX_NUMBER as D } from "./constants.js";
 import { CounterStyled as Y, NavButtonStyled as $ } from "./CounterStyled.js";
+import { Icon as C } from "../../atoms/Icon/Icon.js";
 import { Input as j } from "../../atoms/Input/Input.js";
-import { useTheme as x } from "../../../hooks/useTheme/useTheme.js";
-import { useLogger as O } from "../../../hooks/useLogger/useLogger.js";
+import { InputVariantType as x } from "../../../types/input.js";
+import { useTheme as O } from "../../../hooks/useTheme/useTheme.js";
+import { useLogger as X } from "../../../hooks/useLogger/useLogger.js";
 import { get as s } from "../../../utils/helpers.js";
-import { Icon as C } from "../../atoms/Icon/Icon.js";
-import { InputVariantType as X } from "../../../types/input.js";
 const G = k(({
   min: u = Q,
   max: o = L,
@@ -19,7 +19,7 @@ const G = k(({
 }, S) => {
   const {
     theme: l
-  } = x(), r = O(), v = s(l, "counter.icons", {}), [t, p] = N(g), [d, c] = N(String(g)), f = A(h);
+  } = O(), r = X(), v = s(l, "counter.icons", {}), [t, p] = N(g), [d, c] = N(String(g)), f = A(h);
   f.current = h;
   const V = t >= o, b = t <= u, w = () => {
     if (V) {
@@ -90,7 +90,7 @@ const G = k(({
     /* @__PURE__ */ i($, { theme: l, disabled: b || m, onClick: M, "aria-label": "Decrement counter", "data-testid": `${e}-button-decrease`, children: /* @__PURE__ */ i(C, { ...s(v, "minus", {
       name: "minus"
     }) }) }),
-    /* @__PURE__ */ i(j, { variant: X.Number, onChange: y, onBlur: _, value: d, disabled: m, role: "spinbutton", "aria-valuemin": u, ...o !== 1 / 0 ? {
+    /* @__PURE__ */ i(j, { variant: x.Number, onChange: y, onBlur: _, value: d, disabled: m, role: "spinbutton", "aria-valuemin": u, ...o !== 1 / 0 ? {
       "aria-valuemax": o
     } : {}, "data-testid": `${e}-input`, "aria-label": "Quantity value" }),
     /* @__PURE__ */ i($, { theme: l, disabled: V || m, onClick: w, "data-testid": `${e}-button-increase`, "aria-label": "Increment counter", children: /* @__PURE__ */ i(C, { ...s(v, "plus", {

package/components/molecules/Counter/CounterStyled.js

@@ -1,8 +1,8 @@
 import { jsx as u } from "@emotion/react/jsx-runtime";
 import { forwardRef as a } from "react";
 import { tokensHandler as f } from "../../../tokens/utils.js";
-import { get as c } from "../../../utils/helpers.js";
 import { Button as d } from "../../atoms/Button/Button.js";
+import { get as c } from "../../../utils/helpers.js";
 const x = a((o, e) => {
   const {
     theme: {

package/components/molecules/DropdownItem/DropdownItem.js

@@ -5,8 +5,8 @@ import { KEYBOARD_KEYS as K } from "../../../constants/keyboard.js";
 import { COMPONENT_NAME as D } from "./constants.js";
 import { DropdownItemStyled as N } from "./DropdownItemStyled.js";
 import { useSelectContext as T } from "../../atoms/Select/hooks/useSelectContext.js";
-import { useTheme as k } from "../../../hooks/useTheme/useTheme.js";
 import { TabIndex as y } from "../../../types/accesability.js";
+import { useTheme as k } from "../../../hooks/useTheme/useTheme.js";
 const I = x((S, v) => {
   const {
     children: A,

package/components/molecules/Form/utils.js

@@ -1,17 +1,17 @@
+import { ButtonTypes as i } from "../../../types/button.js";
 import { get as s, set as n } from "../../../utils/helpers.js";
-import { InputVariantType as i } from "../../../types/input.js";
-import { ButtonTypes as f } from "../../../types/button.js";
+import { InputVariantType as f } from "../../../types/input.js";
 const u = (o) => Array.from(s(o, "elements", [])).reduce((t, e) => h(e, t), {}), h = (o, r = {}) => {
   const t = s(o, "tagName", "").toLowerCase(), e = s(o, "name"), m = s(o, "type"), a = s(o, "checked"), c = s(o, "value");
-  if (!(t === f.Button || m === f.Submit || !e))
+  if (!(t === i.Button || m === i.Submit || !e))
     switch (m) {
-      case i.Checkbox:
+      case f.Checkbox:
         n(r, e, {
           value: c,
           isChecked: a
         });
         break;
-      case i.Radio:
+      case f.Radio:
         a && n(r, e, {
           value: c,
           isChecked: a