gd-design-library 0.4.0 → 0.6.0

package/CHANGELOG.md

@@ -51,7 +51,7 @@
 
 ---
 
-## [1.2.0] - 2025-06-12
+## [0.2.0] - 2025-06-12
 
 ### Added
 
@@ -72,7 +72,7 @@
 
 - Deprecated `LegacyBanner` component (removed in v1.2.0)
 
-## [1.3.0] - 2025-07-14
+## [0.3.0] - 2025-07-14
 
 ### Features
 
@@ -116,7 +116,7 @@ This release delivers major enhancements to the chat system, full Emotion adopti
 comprehensive documentation updates. The refactor improves maintainability, while new features like AI integration and
 drag-and-drop elevate component capabilities.
 
-## [1.4.0] - 2025-08-18
+## [0.4.0] - 2025-08-18
 
 ### New Features
 
@@ -142,3 +142,36 @@ drag-and-drop elevate component capabilities.
 - Eliminated console warnings in app.tsx and removed unused code
 - Fixed hardcoded Google API key by adding environment variable support
 - Patched entry point configuration and Portal import errors
+
+## [0.5.0] - 2025-09-01
+
+### Features
+
+- **Input**: Added wrapperAs prop for custom wrapper elements and improved styling customization
+- **Form**: Introduced core form configuration system with state management and field dependencies
+- **Loader**: Added customizable WrapperView prop and enhanced theme integration
+- **ChatContainer**: New component for chat-based interfaces
+- **Theme**: Added detailed theme previews in Storybook for colors, fonts, and spacing tokens
+- **Snackbar**: Added animated close functionality and improved customization options
+- **Icons**: Introduced standardized size variants (Xs, Sm, Md, Lg, Xl) for consistent scaling
+
+### Improvements
+
+- **Tooltip**: Enhanced type handling, prop interfaces, and theme usage
+- **Counter**: Improved type handling and theme configuration
+- **Stepper**: Refactored layout using FlexContainer for better mobile experience
+- **Tabs**: Enhanced styling with overflow handling and improved documentation
+- **Selector**: Replaced div elements with span for better accessibility
+- **Textarea**: Added dynamic height adjustment based on content
+- **Documentation**: Enhanced Storybook docs with detailed prop descriptions
+- **Theme**: Updated default colors and improved token structure
+- **Carousel**: Refactored styles and improved content navigation flexibility
+
+### Fixes
+
+- **Button**: Fixed border styling issues in disabled state
+- **Textarea**: Fixed dynamic height adjustment behavior
+- **Selector**: Corrected semantic HTML usage and import paths
+- **Build**: Fixed dist output paths and dependency isolation
+- **Types**: Resolved various TypeScript compatibility issues
+- **Storybook**: Corrected TokenViewer import paths and theme consistency

package/assets/icons/cross.d.ts

@@ -1,7 +1,5 @@
-export declare const CrossIcon: ({ width, height, fillSvg, fill, ...rest }: {
+export declare const CrossIcon: ({ fillSvg, fill, ...rest }: {
     [x: string]: any;
-    width?: number | undefined;
-    height?: number | undefined;
     fillSvg?: string | undefined;
     fill?: string | undefined;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/cross.js

@@ -1,16 +1,10 @@
 "use client";
-import { jsx as t } from "@emotion/react/jsx-runtime";
-import { icon as s } from "../../tokens/icon.js";
-const {
-  width: n,
-  height: h
-} = s.size.xs, d = ({
-  width: o = n,
-  height: e = h,
-  fillSvg: i = "none",
-  fill: L = "currentColor",
-  ...r
-}) => /* @__PURE__ */ t("svg", { width: o, height: e, viewBox: "0 0 14 14", fill: i, xmlns: "http://www.w3.org/2000/svg", ...r, children: /* @__PURE__ */ t("path", { d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z", fill: L }) });
+import { jsx as L } from "@emotion/react/jsx-runtime";
+const t = ({
+  fillSvg: o = "none",
+  fill: r = "currentColor",
+  ...n
+}) => /* @__PURE__ */ L("svg", { viewBox: "0 0 14 14", fill: o, xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ L("path", { d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z", fill: r }) });
 export {
-  d as CrossIcon
+  t as CrossIcon
 };

package/assets/icons/favorite.d.ts

@@ -1,7 +1,5 @@
-export declare const FavoriteIcon: ({ width, height, fillSvg, fill, ...rest }: {
+export declare const FavoriteIcon: ({ fillSvg, fill, ...rest }: {
     [x: string]: any;
-    width?: number | undefined;
-    height?: number | undefined;
     fillSvg?: string | undefined;
     fill?: string | undefined;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/favorite.js

@@ -1,17 +1,10 @@
 "use client";
-import { jsx as t } from "@emotion/react/jsx-runtime";
-import { icon as h } from "../../tokens/icon.js";
-import { SizeVariant as l } from "../../types/common.js";
-const {
-  width: m,
-  height: s
-} = h.size[l.Sm], d = ({
-  width: o = m,
-  height: i = s,
-  fillSvg: e = "none",
-  fill: r = "currentColor",
-  ...n
-}) => /* @__PURE__ */ t("svg", { width: o, height: i, viewBox: "0 0 24 24", fill: e, xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ t("path", { d: "M13.3499 20.13C12.5899 20.82 11.4199 20.82 10.6599 20.12L10.5499 20.02C5.29991 15.27 1.86991 12.16 1.99991 8.27998C2.05991 6.57998 2.92991 4.94998 4.33991 3.98998C6.97991 2.18998 10.2399 3.02998 11.9999 5.08998C13.7599 3.02998 17.0199 2.17998 19.6599 3.98998C21.0699 4.94998 21.9399 6.57998 21.9999 8.27998C22.1399 12.16 18.6999 15.27 13.4499 20.04L13.3499 20.13Z", fill: r }) });
+import { jsx as o } from "@emotion/react/jsx-runtime";
+const C = ({
+  fillSvg: r = "none",
+  fill: t = "currentColor",
+  ...e
+}) => /* @__PURE__ */ o("svg", { viewBox: "0 0 20 19", fill: r, xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ o("path", { d: "M10 18.35L8.55 17.03C3.4 12.36 0 9.28 0 5.5C0 2.42 2.42 0 5.5 0C7.24 0 8.91 0.81 10 2.09C11.09 0.81 12.76 0 14.5 0C17.58 0 20 2.42 20 5.5C20 9.28 16.6 12.36 11.45 17.04L10 18.35Z", fill: t }) });
 export {
-  d as FavoriteIcon
+  C as FavoriteIcon
 };

package/assets/icons/favorite_outlined.d.ts

@@ -1,7 +1,5 @@
-export declare const FavoriteOutlinedIcon: ({ width, height, fillSvg, fill, ...rest }: {
+export declare const FavoriteOutlinedIcon: ({ fillSvg, fill, ...rest }: {
     [x: string]: any;
-    width?: number | undefined;
-    height?: number | undefined;
     fillSvg?: string | undefined;
     fill?: string | undefined;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/favorite_outlined.js

@@ -1,17 +1,10 @@
 "use client";
-import { jsx as t } from "@emotion/react/jsx-runtime";
-import { icon as n } from "../../tokens/icon.js";
-import { SizeVariant as l } from "../../types/common.js";
-const {
-  width: h,
-  height: m
-} = n.size[l.Sm], a = ({
-  width: i = h,
-  height: o = m,
-  fillSvg: e = "none",
-  fill: r = "currentColor",
-  ...C
-}) => /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: i, height: o, viewBox: "0 0 24 24", fill: e, ...C, children: /* @__PURE__ */ t("path", { d: "M10.9997 2C9.83967 2 8.72634 2.54 7.99967 3.39333C7.27301 2.54 6.15967 2 4.99967 2C2.94634 2 1.33301 3.61333 1.33301 5.66667C1.33301 8.18667 3.59967 10.24 7.03301 13.36L7.99967 14.2333L8.96634 13.3533C12.3997 10.24 14.6663 8.18667 14.6663 5.66667C14.6663 3.61333 13.053 2 10.9997 2ZM8.06634 12.3667L7.99967 12.4333L7.93301 12.3667C4.75967 9.49333 2.66634 7.59333 2.66634 5.66667C2.66634 4.33333 3.66634 3.33333 4.99967 3.33333C6.02634 3.33333 7.02634 3.99333 7.37967 4.90667H8.62634C8.97301 3.99333 9.97301 3.33333 10.9997 3.33333C12.333 3.33333 13.333 4.33333 13.333 5.66667C13.333 7.59333 11.2397 9.49333 8.06634 12.3667Z", fill: r }) });
+import { jsx as C } from "@emotion/react/jsx-runtime";
+const r = ({
+  fillSvg: o = "none",
+  fill: t = "currentColor",
+  ...e
+}) => /* @__PURE__ */ C("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 19", fill: o, ...e, children: /* @__PURE__ */ C("path", { d: "M14.5 0C12.76 0 11.09 0.81 10 2.09C8.91 0.81 7.24 0 5.5 0C2.42 0 0 2.42 0 5.5C0 9.28 3.4 12.36 8.55 17.04L10 18.35L11.45 17.03C16.6 12.36 20 9.28 20 5.5C20 2.42 17.58 0 14.5 0ZM10.1 15.55L10 15.65L9.9 15.55C5.14 11.24 2 8.39 2 5.5C2 3.5 3.5 2 5.5 2C7.04 2 8.54 2.99 9.07 4.36H10.94C11.46 2.99 12.96 2 14.5 2C16.5 2 18 3.5 18 5.5C18 8.39 14.86 11.24 10.1 15.55Z", fill: t }) });
 export {
-  a as FavoriteOutlinedIcon
+  r as FavoriteOutlinedIcon
 };

package/assets/icons/keyboard_arrow_down.d.ts

@@ -0,0 +1,5 @@
+export declare const KeyboardArrowDown: ({ fillSvg, fill, ...rest }: {
+    [x: string]: any;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/keyboard_arrow_down.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as o } from "@emotion/react/jsx-runtime";
+const w = ({
+  fillSvg: r = "none",
+  fill: e = "currentColor",
+  ...n
+}) => /* @__PURE__ */ o("svg", { viewBox: "0 0 12 8", fill: r, xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ o("path", { d: "M1.41 0.590088L6 5.17009L10.59 0.590088L12 2.00009L6 8.00009L0 2.00009L1.41 0.590088Z", fill: e }) });
+export {
+  w as KeyboardArrowDown
+};

package/assets/icons/keyboard_arrow_up.d.ts

@@ -0,0 +1,5 @@
+export declare const KeyboardArrowUp: ({ fillSvg, fill, ...rest }: {
+    [x: string]: any;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/keyboard_arrow_up.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as o } from "@emotion/react/jsx-runtime";
+const l = ({
+  fillSvg: r = "none",
+  fill: e = "currentColor",
+  ...t
+}) => /* @__PURE__ */ o("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 8", fill: r, ...t, children: /* @__PURE__ */ o("path", { d: "M1.41 7.41L6 2.83L10.59 7.41L12 6L6 0L0 6L1.41 7.41Z", fill: e }) });
+export {
+  l as KeyboardArrowUp
+};

package/assets/icons/send.d.ts

@@ -0,0 +1,5 @@
+export declare const Send: ({ fillSvg, fill, ...rest }: {
+    [x: string]: any;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/send.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as o } from "@emotion/react/jsx-runtime";
+const l = ({
+  fillSvg: e = "none",
+  fill: n = "currentColor",
+  ...r
+}) => /* @__PURE__ */ o("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 21 18", fill: e, ...r, children: /* @__PURE__ */ o("path", { d: "M0.00999999 18L21 9L0.00999999 0L0 7L15 9L0 11L0.00999999 18Z", fill: n }) });
+export {
+  l as Send
+};

package/assets/icons/toast_success.d.ts

@@ -1,7 +1,5 @@
-export declare const ToastSuccessIcon: ({ width, height, fillSvg, fill, ...rest }: {
+export declare const ToastSuccessIcon: ({ fillSvg, fill, ...rest }: {
     [x: string]: any;
-    width?: number | undefined;
-    height?: number | undefined;
     fillSvg?: string | undefined;
     fill?: string | undefined;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/toast_success.js

@@ -1,20 +1,14 @@
 "use client";
-import { jsxs as H, jsx as C } from "@emotion/react/jsx-runtime";
-import { icon as V } from "../../tokens/icon.js";
-const {
-  width: i,
-  height: c
-} = V.size.lg, n = ({
-  width: L = i,
-  height: o = c,
-  fillSvg: e = "none",
-  fill: t = "currentColor",
-  ...s
-}) => /* @__PURE__ */ H("svg", { width: L, height: o, viewBox: "0 0 24 24", fill: e, xmlns: "http://www.w3.org/2000/svg", ...s, children: [
-  /* @__PURE__ */ C("path", { d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM9.29 16.29L5.7 12.7C5.31 12.31 5.31 11.68 5.7 11.29C6.09 10.9 6.72 10.9 7.11 11.29L10 14.17L16.88 7.29C17.27 6.9 17.9 6.9 18.29 7.29C18.68 7.68 18.68 8.31 18.29 8.7L10.7 16.29C10.32 16.68 9.68 16.68 9.29 16.29Z", fill: t }),
+import { jsxs as o, jsx as C } from "@emotion/react/jsx-runtime";
+const t = ({
+  fillSvg: V = "none",
+  fill: L = "currentColor",
+  ...H
+}) => /* @__PURE__ */ o("svg", { viewBox: "0 0 24 24", fill: V, xmlns: "http://www.w3.org/2000/svg", ...H, children: [
+  /* @__PURE__ */ C("path", { d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM9.29 16.29L5.7 12.7C5.31 12.31 5.31 11.68 5.7 11.29C6.09 10.9 6.72 10.9 7.11 11.29L10 14.17L16.88 7.29C17.27 6.9 17.9 6.9 18.29 7.29C18.68 7.68 18.68 8.31 18.29 8.7L10.7 16.29C10.32 16.68 9.68 16.68 9.29 16.29Z", fill: L }),
   /* @__PURE__ */ C("path", { d: "M39.35 7.326L39.154 8.796H36.634V17H34.772V8.796H32.168V7.326H39.35ZM42.2938 9.594V17H40.5018V9.594H42.2938ZM41.3838 5.842C41.7198 5.842 41.9905 5.94933 42.1958 6.164C42.4105 6.36933 42.5178 6.626 42.5178 6.934C42.5178 7.242 42.4105 7.49867 42.1958 7.704C41.9905 7.90933 41.7198 8.012 41.3838 8.012C41.0572 8.012 40.7865 7.90933 40.5718 7.704C40.3665 7.49867 40.2638 7.242 40.2638 6.934C40.2638 6.626 40.3665 6.36933 40.5718 6.164C40.7865 5.94933 41.0572 5.842 41.3838 5.842ZM48.695 16.65C48.4337 16.8367 48.1397 16.9767 47.813 17.07C47.4957 17.1633 47.169 17.21 46.833 17.21C46.105 17.2007 45.5497 16.9953 45.167 16.594C44.7937 16.1833 44.607 15.5813 44.607 14.788V10.882H43.445V9.594H44.607V7.956L46.399 7.746V9.594H48.121L47.939 10.882H46.399V14.746C46.399 15.11 46.4597 15.3713 46.581 15.53C46.7117 15.6887 46.9123 15.768 47.183 15.768C47.4537 15.768 47.7477 15.6793 48.065 15.502L48.695 16.65ZM51.3163 17.21C50.7469 17.21 50.2989 17.0467 49.9723 16.72C49.6549 16.384 49.4963 15.9127 49.4963 15.306V6.626L51.2883 6.43V15.25C51.2883 15.5953 51.4283 15.768 51.7083 15.768C51.8483 15.768 51.9883 15.7447 52.1283 15.698L52.5063 16.958C52.1329 17.126 51.7363 17.21 51.3163 17.21ZM59.7028 13.122C59.7028 13.2153 59.6888 13.458 59.6608 13.85H55.0128C55.0688 14.5687 55.2555 15.082 55.5728 15.39C55.8902 15.698 56.3102 15.852 56.8328 15.852C57.1595 15.852 57.4675 15.8007 57.7568 15.698C58.0462 15.586 58.3542 15.418 58.6808 15.194L59.4228 16.216C58.6015 16.8787 57.6868 17.21 56.6788 17.21C55.5495 17.21 54.6768 16.8647 54.0608 16.174C53.4542 15.4833 53.1508 14.5407 53.1508 13.346C53.1508 12.59 53.2815 11.9133 53.5428 11.316C53.8042 10.7093 54.1822 10.238 54.6768 9.902C55.1715 9.55667 55.7595 9.384 56.4408 9.384C57.4768 9.384 58.2795 9.71533 58.8488 10.378C59.4182 11.0313 59.7028 11.946 59.7028 13.122ZM57.9248 12.604C57.9248 11.3067 57.4442 10.658 56.4828 10.658C56.0442 10.658 55.6988 10.8213 55.4468 11.148C55.2042 11.4653 55.0595 11.9787 55.0128 12.688H57.9248V12.604Z", fill: "black" }),
-  /* @__PURE__ */ C("path", { d: "M298.2 3.80665C297.94 3.54665 297.52 3.54665 297.26 3.80665L294 7.05998L290.74 3.79998C290.48 3.53998 290.06 3.53998 289.8 3.79998C289.54 4.05998 289.54 4.47998 289.8 4.73998L293.06 7.99998L289.8 11.26C289.54 11.52 289.54 11.94 289.8 12.2C290.06 12.46 290.48 12.46 290.74 12.2L294 8.93998L297.26 12.2C297.52 12.46 297.94 12.46 298.2 12.2C298.46 11.94 298.46 11.52 298.2 11.26L294.94 7.99998L298.2 4.73998C298.453 4.48665 298.453 4.05998 298.2 3.80665Z", fill: t })
+  /* @__PURE__ */ C("path", { d: "M298.2 3.80665C297.94 3.54665 297.52 3.54665 297.26 3.80665L294 7.05998L290.74 3.79998C290.48 3.53998 290.06 3.53998 289.8 3.79998C289.54 4.05998 289.54 4.47998 289.8 4.73998L293.06 7.99998L289.8 11.26C289.54 11.52 289.54 11.94 289.8 12.2C290.06 12.46 290.48 12.46 290.74 12.2L294 8.93998L297.26 12.2C297.52 12.46 297.94 12.46 298.2 12.2C298.46 11.94 298.46 11.52 298.2 11.26L294.94 7.99998L298.2 4.73998C298.453 4.48665 298.453 4.05998 298.2 3.80665Z", fill: L })
 ] });
 export {
-  n as ToastSuccessIcon
+  t as ToastSuccessIcon
 };

package/assets/index.d.ts

@@ -28,7 +28,7 @@ export { FilterIcon } from './icons/filter';
 export { RulerIcon } from './icons/ruler';
 export { ProcessingIcon } from './icons/processing';
 export { PaymentCardIcon } from './icons/paymentCard';
-export { KeyboardArrowDownIcon } from './icons/keyboard-arrow-down';
+export { KeyboardArrowDown } from './icons/keyboard_arrow_down';
 export { EyeIcon } from './icons/eye';
 export { UploadIcon } from './icons/upload';
 export { SearchIcon } from './icons/search';
@@ -42,3 +42,5 @@ export { ContentCopyIcon } from './icons/content-copy';
 export { ThumbUpIcon } from './icons/thumb-up';
 export { ThumbDownIcon } from './icons/thumb-down';
 export { FileCopyIcon } from './icons/file-copy';
+export { KeyboardArrowUp } from './icons/keyboard_arrow_up';
+export { Send } from './icons/send';

package/assets/styles.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:Fira Sans,sans-serif;line-height:1.6}ol,ul{list-style:none}table{border-collapse:collapse}img{max-width:100%;height:auto;display:block}a{text-decoration:none;color:inherit}
+@import"https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Fira Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}

package/components/core/DropdownItem/DropdownItem.d.ts

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

package/components/core/DropdownItem/DropdownItem.js

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

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

@@ -1,14 +1,8 @@
-import { PropsWithChildren } from 'react';
-import { OnSelectProps, CommonCssComponentStyledProps } from '../..';
-import { Theme } from '../../../hooks';
-export interface DropdownItemProps<T> extends PropsWithChildren {
-    theme?: Theme;
-    onSelect?: (props: OnSelectProps) => T;
+import { SelectProps, CommonCssComponentStyledProps } from '../..';
+export interface DropdownItemProps<T> extends Partial<Pick<SelectProps<T>, 'styles' | 'onSelect' | 'children' | 'className'>> {
+    name?: string;
     disabled?: boolean;
     value?: unknown;
-    itemIndex?: number;
-    name?: string;
-    customClass?: string;
 }
 export interface DropdownItemStyledProps extends CommonCssComponentStyledProps {
     $disabled?: boolean;

package/components/core/DropdownItem/DropdownItemStyled.d.ts

@@ -1,2 +1,2 @@
-import { DropdownItemStyledProps } from './DropdownItem.types';
+import { DropdownItemStyledProps } from './';
 export declare const DropdownItemStyled: import('react').ForwardRefExoticComponent<Omit<DropdownItemStyledProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/components/core/Icon/Icon.js

@@ -1,33 +1,40 @@
 "use client";
-import { jsx as d } from "@emotion/react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { IconsList as g, COMPONENT_NAME as l } from "./constants.js";
-import { useTheme as h } from "../../../hooks/useTheme/useTheme.js";
+import { jsx as h } from "@emotion/react/jsx-runtime";
+import { forwardRef as S } from "react";
+import { IconsList as $, COMPONENT_NAME as l } from "./constants.js";
+import { useTheme as L } from "../../../hooks/useTheme/useTheme.js";
 import { get as n } from "../../../utils/helpers.js";
-let r = {};
-const x = (o) => {
-  r = {
-    ...r,
+let i = {};
+const M = (o) => {
+  i = {
+    ...i,
     ...o
   };
-}, $ = p((o, m) => {
+}, N = S((o, m) => {
   const {
     name: t,
-    width: f,
-    height: u,
+    width: f = 18,
+    height: u = 18,
     fill: s,
     fillSvg: e,
-    ...I
+    size: I,
+    ...a
   } = o, {
-    theme: a
-  } = h(), i = n(a, "colors", {}), c = {
-    ...g,
-    ...r
+    theme: d
+  } = L(), {
+    icon: p,
+    colors: r
+  } = d || {}, g = n(p, ["size", I], {
+    width: f,
+    height: u
+  }), c = {
+    ...$,
+    ...i
   }[t];
-  return c ? /* @__PURE__ */ d(c, { ref: m, "data-testid": `${l}-${t}`, width: f, height: u, fill: s && n(i, s, s), fillSvg: e && n(i, e, e), ...I }) : (console.warn(`Icon "${String(t)}" not found.`), null);
+  return c ? /* @__PURE__ */ h(c, { ref: m, "data-testid": `${l}-${t}`, fill: s && n(r, s, s), fillSvg: e && n(r, e, e), ...g, ...a }) : (console.warn(`Icon "${String(t)}" not found.`), null);
 });
-$.displayName = l;
+N.displayName = l;
 export {
-  $ as Icon,
-  x as registerCustomIcons
+  N as Icon,
+  M as registerCustomIcons
 };

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

@@ -1,7 +1,11 @@
+import { MouseEventHandler } from 'react';
+import { EnumOrPrimitive, SizeVariant } from '../../../types';
 export interface IconProps {
     name: string;
     width?: number;
     height?: number;
     fill?: string;
     fillSvg?: string;
+    onClick?: MouseEventHandler<SVGElement>;
+    size?: EnumOrPrimitive<SizeVariant>;
 }

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

@@ -1,15 +1,11 @@
 export declare const IconsList: {
-    cross: ({ width, height, fillSvg, fill, ...rest }: {
+    cross: ({ fillSvg, fill, ...rest }: {
         [x: string]: any;
-        width?: number | undefined;
-        height?: number | undefined;
         fillSvg?: string | undefined;
         fill?: string | undefined;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
-    success: ({ width, height, fillSvg, fill, ...rest }: {
+    success: ({ fillSvg, fill, ...rest }: {
         [x: string]: any;
-        width?: number | undefined;
-        height?: number | undefined;
         fillSvg?: string | undefined;
         fill?: string | undefined;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -103,17 +99,13 @@ export declare const IconsList: {
         fillSvg?: string | undefined;
         fill?: string | undefined;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
-    favorite: ({ width, height, fillSvg, fill, ...rest }: {
+    favorite: ({ fillSvg, fill, ...rest }: {
         [x: string]: any;
-        width?: number | undefined;
-        height?: number | undefined;
         fillSvg?: string | undefined;
         fill?: string | undefined;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
-    favoriteOutlined: ({ width, height, fillSvg, fill, ...rest }: {
+    favoriteOutlined: ({ fillSvg, fill, ...rest }: {
         [x: string]: any;
-        width?: number | undefined;
-        height?: number | undefined;
         fillSvg?: string | undefined;
         fill?: string | undefined;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -300,5 +292,20 @@ export declare const IconsList: {
         fillSvg?: string | undefined;
         fill?: string | undefined;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    keyboardArrowDown: ({ fillSvg, fill, ...rest }: {
+        [x: string]: any;
+        fillSvg?: string | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    keyboardArrowUp: ({ fillSvg, fill, ...rest }: {
+        [x: string]: any;
+        fillSvg?: string | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    send: ({ fillSvg, fill, ...rest }: {
+        [x: string]: any;
+        fillSvg?: string | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
 };
 export declare const COMPONENT_NAME = "Icon";