gd-design-library 0.3.5 → 0.4.0

package/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 # Changelog
 
-## [0.1.0]
+## [0.1.0] - 2025-05-15
 
 ### Features
 
@@ -51,25 +51,94 @@
 
 ---
 
-## Previous Changes
+## [1.2.0] - 2025-06-12
 
-<details>
-<summary>Expand full history</summary>
+### Added
 
-### Older Features
+- New `Stepper` component with horizontal/vertical orientation
+- `Button` now supports `loading` prop
 
-- **Search**: Added search functionality based on select (#102)
-- **Tabs**: Implemented Tabs component (#139)
-- **Stepper**: Added stepper view (#46)
-- **Form**: Added base form concept (#32)
-- **Textarea**: Added core textarea functionality (#26)
-- **Link**: Added Link component (#27)
-- **Input**: Added base input component (#13)
+### Changed
 
-### Infrastructure
+- `Input` now accepts `size="small" | "medium" | "large"`
+- Improved `Modal` focus trap behavior
 
-- **Monorepo**: Integrated Nx monorepo setup
-- **Linting**: Configured ESLint and Prettier (#6)
-- **Testing**: Added Jest and React Testing Library (#11)
+### Fixed
 
-</details>
+- Fixed `Tooltip` not displaying on keyboard focus
+- `Checkbox` label alignment issue in Safari
+
+### Removed
+
+- Deprecated `LegacyBanner` component (removed in v1.2.0)
+
+## [1.3.0] - 2025-07-14
+
+### Features
+
+- Integrated Google Generative AI with markdown support and file uploads in ChatDemo.
+- Added multi-chat session support with search functionality and chat caching.
+- Introduced ChatBubble component with status-based styling (pending, fulfilled, rejected).
+- Implemented AI feedback loop for iterative improvements in chat interactions.
+- Added DragAndDrop widget with file validation and upload progress indicators.
+- New Separator component for visual content division.
+- Enhanced Loader with customizable name prop for targeted styling.
+- Added use client directive for Next.js compatibility.
+- Dynamic theme support in ChatBubble using commonHeader tokens.
+
+### Refactor
+
+- Full migration from styled-components to @emotion/styled across all components.
+- Restructured Storybook stories and updated meta titles for consistency.
+- Replaced static styles with array-based computed styles (e.g., Avatar, Carousel).
+- Standardized prop names (e.g., wrap → isWrap in Row/Column).
+- Library imports are optimized for tree-shaking and performance.
+
+### Fixes
+
+- Fixed OptionPicker accessibility by adding explicit type="radio".
+- Resolved textarea dynamic height reset and added minHeight/maxHeight support.
+- Addressed chat container overflow, snackbar shadow clipping, and file card rendering issues.
+- Patched type errors, linter warnings, and CI/CD pipeline failures.
+- Restored automation step in Jenkins workflow.
+- Fixed ChatDemo image handling and scroll behavior.
+
+### Documentation
+
+- Updated Storybook documentation for all components post-Emotion migration.
+- Revised theming guide to use @emotion/styled and gd-design-library.
+- Added .env.example for ChatDemo API key setup.
+- Enhanced component docs with JSDoc examples and usage guidelines.
+
+### Summary
+
+This release delivers major enhancements to the chat system, full Emotion adoption for styling, critical UX fixes, and
+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
+
+### New Features
+
+- Added responsiveness documentation for layout composition techniques
+- Implemented TokenViewer for visual theme token representation in Storybook
+- Added styleVariant prop to Typography for combined styles (bold/italic/underline)
+- Introduced theme export script with downloadable defaultTheme.json in documentation
+
+### Improvements
+
+- Enhanced theme styles, fixed typos, and improved documentation across components
+- Updated mobile responsiveness and documentation for ChatBubble, ChatContainer, and Breadcrumbs
+- Refined Storybook controls and documentation for Button, Modal, and Card
+- Improved Textarea usability (removed deprecated props, added rows, updated docs)
+- Optimized build with tree shaking, dependency updates, and external library dependencies
+
+### Bug Fixes
+
+- Fixed Carousel SSR type errors and Dropdown linting issues
+- Adjusted Snackbar documentation and fixed style inconsistencies
+- Fixed Image styles, Carousel token styles, and RadioGroupItem behavior
+- Resolved avatar and chat page responsiveness issues
+- 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

package/components/core/Image/ImageStyled.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as r } from "@emotion/react/jsx-runtime";
-import { forwardRef as n } from "react";
+import { forwardRef as a } from "react";
 import { get as c } from "../../../utils/helpers.js";
-const g = (o) => {
+const h = (o) => {
   const {
     width: t,
     height: e,
@@ -15,20 +15,21 @@ const g = (o) => {
     height: `${e ? `${e}px` : "100%"}`
   }];
   return /* @__PURE__ */ r("div", { css: p, ...i });
-}, h = n((o, t) => {
+}, u = a((o, t) => {
   const {
     objectFit: e = "cover",
     $isLoading: s,
     theme: {
       image: i
     } = {},
-    ...p
-  } = o, m = [c(i, "default", {}), {
+    styles: p,
+    ...m
+  } = o, n = [c(i, "default", {}), {
     objectFit: e,
     opacity: `${s ? 0 : 1}`
-  }];
-  return /* @__PURE__ */ r("img", { css: m, ...p, ref: t });
-}), u = (o) => {
+  }, p];
+  return /* @__PURE__ */ r("img", { css: n, ...m, ref: t });
+}), y = (o) => {
   const {
     theme: {
       image: t
@@ -36,7 +37,7 @@ const g = (o) => {
     ...e
   } = o, s = [c(t, "placeholder", {})];
   return /* @__PURE__ */ r("div", { css: s, ...e });
-}, y = (o) => {
+}, f = (o) => {
   const {
     theme: {
       image: t
@@ -46,8 +47,8 @@ const g = (o) => {
   return /* @__PURE__ */ r("figcaption", { css: s, ...e });
 };
 export {
-  y as CaptionStyled,
-  h as ImageStyled,
-  g as ImageWrapperStyled,
-  u as PlaceholderStyled
+  f as CaptionStyled,
+  u as ImageStyled,
+  h as ImageWrapperStyled,
+  y as PlaceholderStyled
 };

package/components/core/Snackbar/SnackbarStyled.js

@@ -1,33 +1,33 @@
 "use client";
 import { jsx as e } from "@emotion/react/jsx-runtime";
 import { forwardRef as O } from "react";
-import { convertJsonToCssKeyframeCss as u, getBoxStyles as j } from "../../../tokens/utils.js";
-import { Typography as S } from "../Typography/Typography.js";
+import { convertJsonToCssKeyframeCss as S, getBoxStyles as j } from "../../../tokens/utils.js";
+import { Typography as p } from "../Typography/Typography.js";
 import { get as r } from "../../../utils/helpers.js";
-import { Icon as p } from "../Icon/Icon.js";
-import { TypographyStyleVariant as b, TypographyVariant as k, TextAlign as f } from "../../../types/typography.js";
+import { Icon as b } from "../Icon/Icon.js";
+import { TypographyStyleVariant as k, TypographyVariant as f, TextAlign as g } from "../../../types/typography.js";
 const G = O((n, o) => {
-  var d, l, m, y;
+  var l, m, y, u;
   const {
     theme: {
       animations: t,
       snackbar: s
     } = {},
-    $variant: g,
+    $variant: a,
     $colored: $,
     $isClosing: v,
     $isAnimated: h,
     styles: C,
     ...B
-  } = n, A = u(t == null ? void 0 : t.slideIn), T = u(t == null ? void 0 : t.slideOut), {
+  } = n, A = S(t == null ? void 0 : t.slideIn), T = S(t == null ? void 0 : t.slideOut), {
     boxStyles: x,
     restProps: I
-  } = j(B), a = (l = (d = s == null ? void 0 : s.snackbar) == null ? void 0 : d.animation) == null ? void 0 : l.duration, c = (y = (m = s == null ? void 0 : s.snackbar) == null ? void 0 : m.animation) == null ? void 0 : y.timing, P = `
-    ${T} ${a} ${c} forwards
+  } = j(B), c = (m = (l = s == null ? void 0 : s.snackbar) == null ? void 0 : l.animation) == null ? void 0 : m.duration, i = (u = (y = s == null ? void 0 : s.snackbar) == null ? void 0 : y.animation) == null ? void 0 : u.timing, P = `
+    ${T} ${c} ${i} forwards
   `, V = `
-    ${A} ${a} ${c}
-  `, i = r(s, "snackbar.background.default"), w = r(s, "snackbar.default", {}), N = {
-    background: $ ? r(s, `snackbar.background.variants.${g}`, i) : i
+    ${A} ${c} ${i}
+  `, d = r(s, "snackbar.background.default"), w = r(s, "snackbar.default", {}), N = {
+    background: $ ? r(s, `snackbar.background.variants.${a}`, d) : d
   };
   return /* @__PURE__ */ e("div", { css: [h ? {
     animation: {
@@ -50,7 +50,7 @@ const G = O((n, o) => {
   } = n, t = r(o, "icons.close", {
     name: "cross"
   });
-  return /* @__PURE__ */ e(p, { ...t });
+  return /* @__PURE__ */ e(b, { ...t });
 }, M = (n) => {
   const {
     $variant: o,
@@ -60,7 +60,7 @@ const G = O((n, o) => {
   } = n, s = r(t, ["icons", o], {
     name: ""
   });
-  return /* @__PURE__ */ e(p, { ...s });
+  return /* @__PURE__ */ e(b, { ...s });
 }, Q = (n) => {
   const {
     theme: {
@@ -77,7 +77,7 @@ const G = O((n, o) => {
     ...t
   } = n;
   return /* @__PURE__ */ e("div", { css: r(o, "snackbarContent", {}), ...t });
-}, X = (n) => /* @__PURE__ */ e(S, { align: f.Start, variant: k.Body2, styleVariant: b.Semibold, ...n }), Y = (n) => /* @__PURE__ */ e(S, { align: f.Start, variant: k.Body2, styleVariant: b.Normal, ...n }), Z = (n) => {
+}, X = (n) => /* @__PURE__ */ e(p, { align: g.Start, variant: f.Body2, styleVariant: k.Semibold, ...n }), Y = (n) => /* @__PURE__ */ e(p, { align: g.Start, variant: f.Body2, styleVariant: k.Normal, ...n }), Z = (n) => {
   const {
     theme: {
       snackbar: o
@@ -92,8 +92,8 @@ const G = O((n, o) => {
     } = {},
     $position: t,
     ...s
-  } = n;
-  return /* @__PURE__ */ e("div", { css: r(o, ["positions", t], {}), ...s });
+  } = n, a = [r(o, "container.default", {}), r(o, ["positions", t], {})];
+  return /* @__PURE__ */ e("div", { css: a, ...s });
 };
 export {
   L as CloseButtonIconStyled,

package/components/domainSpecific/Carousel/Carousel.js

@@ -2,9 +2,9 @@
 import { jsx as t, jsxs as S } from "@emotion/react/jsx-runtime";
 import { Fragment as q, forwardRef as G, Children as J, isValidElement as K, cloneElement as Q, useRef as U, useImperativeHandle as X } from "react";
 import { COMPONENT_NAME as o } from "./constants.js";
-import { LayoutType as Y, ThumbsPosition as D, CarouselVariantTypes as Z } from "./Carousel.types.js";
-import { CarouselSlideStyled as A, CarouselContainerStyled as tt, CarouselControlsWrapperStyled as et, CarouselControlsStyled as rt, CarouselControlsButtonStyled as T, ContentContainerStyled as ot, CarouselViewportStyled as at, CarouselViewportSlideWrapperStyled as nt, CarouselDotsStyled as lt, CarouselDotStyled as it, CarouselThumbsStyled as st, CarouselThumbsViewportStyled as dt, CarouselThumbsWrapperStyled as ct, CarouselThumbStyled as mt } from "./CarouselStyled.js";
-import { useCarousel as ut } from "../../../hooks/useCarousel/useCarousel.js";
+import { CarouselSlideStyled as A, CarouselContainerStyled as Y, CarouselControlsWrapperStyled as Z, CarouselControlsStyled as tt, CarouselControlsButtonStyled as T, ContentContainerStyled as et, CarouselViewportStyled as rt, CarouselViewportSlideWrapperStyled as ot, CarouselDotsStyled as at, CarouselDotStyled as nt, CarouselThumbsStyled as lt, CarouselThumbsViewportStyled as it, CarouselThumbsWrapperStyled as st, CarouselThumbStyled as dt } from "./CarouselStyled.js";
+import { useCarousel as ct } from "../../../hooks/useCarousel/useCarousel.js";
+import { LayoutType as mt, ThumbsPosition as D, CarouselVariantTypes as ut } from "../../../types/carousel.js";
 import { Typography as V } from "../../core/Typography/Typography.js";
 import { TypographyVariant as B } from "../../../types/typography.js";
 import { Image as pt } from "../../core/Image/Image.js";
@@ -39,8 +39,8 @@ function Ct(r) {
   };
 }
 const L = G(({
-  layout: r = Y.Horizontal,
-  variant: i = Z.Cards,
+  layout: r = mt.Horizontal,
+  variant: i = ut.Cards,
   showArrows: s = !0,
   isFocusable: w = !0,
   showDots: N = !1,
@@ -74,7 +74,7 @@ const L = G(({
     canScrollPrev: $,
     canScrollNext: b,
     slidesCount: F
-  } = ut({
+  } = ct({
     options: {
       axis: r === "vertical" ? "y" : "x"
     },
@@ -86,27 +86,27 @@ const L = G(({
     scrollTo: C,
     carouselApi: z,
     selectedIndex: f
-  }), [h, y, C, f]), /* @__PURE__ */ S(tt, { ref: R, theme: e, $layout: r, styles: d, $variant: i, tabIndex: w ? j.Default : j.Disabled, "data-testid": o, children: [
-    /* @__PURE__ */ S(et, { "data-testid": `${o}-controls-wrapper`, theme: e, styles: {
+  }), [h, y, C, f]), /* @__PURE__ */ S(Y, { ref: R, theme: e, $layout: r, styles: d, $variant: i, tabIndex: w ? j.Default : j.Disabled, "data-testid": o, children: [
+    /* @__PURE__ */ S(Z, { "data-testid": `${o}-controls-wrapper`, theme: e, styles: {
       order: n === D.Start ? 1 : "inherit"
     }, children: [
-      s && /* @__PURE__ */ S(rt, { theme: e, "data-testid": `${o}-controls`, children: [
+      s && /* @__PURE__ */ S(tt, { theme: e, "data-testid": `${o}-controls`, children: [
         /* @__PURE__ */ t(T, { isIcon: !0, theme: e, variant: I.Text, color: g.Primary, onClick: h, disabled: !$, "data-testid": `${o}-control-previous`, children: /* @__PURE__ */ t(x, { ...p, name: "arrowLeft", fill: $ ? m : u }) }),
         /* @__PURE__ */ t(T, { isIcon: !0, theme: e, variant: I.Text, styles: {
           transform: "rotate(180deg)"
         }, color: g.Primary, onClick: y, disabled: !b, "data-testid": `${o}-control-next`, children: /* @__PURE__ */ t(x, { ...p, name: "arrowLeft", fill: b ? m : u }) })
       ] }),
-      /* @__PURE__ */ t(ot, { theme: e, "data-testid": `${o}-content-container`, children: H }),
-      /* @__PURE__ */ t(at, { theme: e, ref: W, "data-testid": `${o}-viewport`, children: /* @__PURE__ */ t(nt, { theme: e, "data-testid": `${o}-slider-wrapper`, children: l == null ? void 0 : l.map((v, a) => /* @__PURE__ */ t(A, { theme: e, "data-testid": `${o}-slide-${a}`, children: v }, a)) }) }),
-      N && /* @__PURE__ */ t(lt, { theme: e, "data-testid": `${o}-dots`, children: (k = Array.from({
+      /* @__PURE__ */ t(et, { theme: e, "data-testid": `${o}-content-container`, children: H }),
+      /* @__PURE__ */ t(rt, { theme: e, ref: W, "data-testid": `${o}-viewport`, children: /* @__PURE__ */ t(ot, { theme: e, "data-testid": `${o}-slider-wrapper`, children: l == null ? void 0 : l.map((v, a) => /* @__PURE__ */ t(A, { theme: e, "data-testid": `${o}-slide-${a}`, children: v }, a)) }) }),
+      N && /* @__PURE__ */ t(at, { theme: e, "data-testid": `${o}-dots`, children: (k = Array.from({
         length: F
-      })) == null ? void 0 : k.map((v, a) => /* @__PURE__ */ t(it, { theme: e, $active: a === f, onClick: () => C(a) }, a)) })
+      })) == null ? void 0 : k.map((v, a) => /* @__PURE__ */ t(nt, { theme: e, $active: a === f, onClick: () => C(a) }, a)) })
     ] }),
-    n && /* @__PURE__ */ S(st, { theme: e, $layout: r, "data-testid": `${o}-thumbnails`, children: [
+    n && /* @__PURE__ */ S(lt, { theme: e, $layout: r, "data-testid": `${o}-thumbnails`, children: [
       /* @__PURE__ */ t(T, { isIcon: !0, theme: e, variant: I.Text, styles: {
         transform: `rotate(${r === "vertical" ? "90" : "0"}deg)`
       }, color: g.Primary, onClick: h, disabled: !$, "data-testid": `${o}-thumbnail-control-previous`, children: /* @__PURE__ */ t(x, { ...p, ...M, fill: $ ? m : u }) }),
-      /* @__PURE__ */ t(dt, { theme: e, $layout: r, "data-testid": `${o}-thumbs-viewport`, ref: _, children: /* @__PURE__ */ t(ct, { theme: e, $layout: r, "data-testid": `${o}-thumbs-wrapper`, children: l == null ? void 0 : l.map((v, a) => /* @__PURE__ */ t(mt, { theme: e, $layout: r, $active: a === f, onClick: () => C(a), "data-testid": `${o}-thumbnail-${a}`, children: v }, a)) }) }),
+      /* @__PURE__ */ t(it, { theme: e, $layout: r, "data-testid": `${o}-thumbs-viewport`, ref: _, children: /* @__PURE__ */ t(st, { theme: e, $layout: r, "data-testid": `${o}-thumbs-wrapper`, children: l == null ? void 0 : l.map((v, a) => /* @__PURE__ */ t(dt, { theme: e, $layout: r, $active: a === f, onClick: () => C(a), "data-testid": `${o}-thumbnail-${a}`, children: v }, a)) }) }),
       /* @__PURE__ */ t(T, { isIcon: !0, theme: e, variant: I.Text, color: g.Primary, onClick: y, styles: {
         transform: `rotate(${r === "vertical" ? "90" : "0"}deg)`
       }, disabled: !b, "data-testid": `${o}-thumbnail-control-next`, children: /* @__PURE__ */ t(x, { ...p, ...O, fill: b ? m : u }) })

package/components/domainSpecific/Carousel/Carousel.types.d.ts

@@ -2,18 +2,7 @@ import { ReactElement, ReactNode, PropsWithChildren } from 'react';
 import { EmblaOptionsType } from 'embla-carousel';
 import { Theme } from '../../../hooks';
 import { CommonCssComponentProps, CommonCssComponentStyledProps, ButtonProps } from '../..';
-export declare enum CarouselVariantTypes {
-    Cards = "cards",
-    Single = "single"
-}
-export declare enum LayoutType {
-    Horizontal = "horizontal",
-    Vertical = "vertical"
-}
-export declare enum ThumbsPosition {
-    Start = "start",
-    End = "end"
-}
+import { CarouselVariantTypes, LayoutType, ThumbsPosition } from '../../../types';
 export type KeyboardHandler = () => void;
 export type KeyboardConfig = Record<string, KeyboardHandler>;
 export interface CarouselProps extends PropsWithChildren<CommonCssComponentProps> {

package/components/domainSpecific/Carousel/CarouselStyled.js

@@ -1,7 +1,7 @@
 import { jsx as c } from "@emotion/react/jsx-runtime";
 import { forwardRef as n } from "react";
 import { get as o } from "../../../utils/helpers.js";
-import { Button as m } from "../../core/Button/Button.js";
+import { Button as d } from "../../core/Button/Button.js";
 const S = n((s, e) => {
   const {
     theme: {
@@ -11,7 +11,7 @@ const S = n((s, e) => {
     $variant: u,
     styles: l,
     ...a
-  } = s, p = [o(t, "container", {}), o(t, `container.layout.${r}`, {}), o(t, `container.variant.${u}`, {}), l];
+  } = s, p = [o(t, "container.default", {}), o(t, `container.layout.${r}`, {}), o(t, `container.variant.${u}`, {}), l];
   return /* @__PURE__ */ c("div", { css: p, ...a, ref: e });
 }), C = n((s, e) => {
   const {
@@ -78,7 +78,7 @@ const S = n((s, e) => {
     } = {},
     ...t
   } = s;
-  return /* @__PURE__ */ c(m, { styles: o(e, "controlsButton", {}), ...t });
+  return /* @__PURE__ */ c(d, { styles: o(e, "controlsButton", {}), ...t });
 }, V = (s) => {
   const {
     theme: {

package/components/domainSpecific/ContentCarousel/ContentCarousel.js

@@ -4,17 +4,17 @@ import { forwardRef as A, useRef as F, useImperativeHandle as j } from "react";
 import { CarouselContainerStyled as E, CarouselControlsWrapperStyled as H, CarouselViewportStyled as L, CarouselViewportSlideWrapperStyled as M, CarouselDotsStyled as O, CarouselDotStyled as W, CarouselControlsButtonStyled as S } from "../Carousel/CarouselStyled.js";
 import { COMPONENT_NAME as o } from "./constants.js";
 import { ContentSlideStyled as _, CarouselFooterStyled as z, CarouselFooterControlsStyled as q } from "./ContentCarouselStyled.js";
-import { CarouselVariantTypes as G, LayoutType as J } from "../Carousel/Carousel.types.js";
-import { useTheme as K } from "../../../hooks/useTheme/useTheme.js";
-import { useCarousel as Q } from "../../../hooks/useCarousel/useCarousel.js";
+import { useTheme as G } from "../../../hooks/useTheme/useTheme.js";
+import { useCarousel as J } from "../../../hooks/useCarousel/useCarousel.js";
 import { TabIndex as $ } from "../../../types/accesability.js";
+import { CarouselVariantTypes as K, LayoutType as Q } from "../../../types/carousel.js";
 import { ButtonColorVariant as v, ButtonVariant as x } from "../../../types/button.js";
 import { Icon as b } from "../../core/Icon/Icon.js";
 const U = A((w, I) => {
   var y;
   const {
     theme: t
-  } = K(), {
+  } = G(), {
     items: l,
     renderItem: T,
     showArrows: N = !0,
@@ -39,7 +39,7 @@ const U = A((w, I) => {
     canScrollPrev: C,
     canScrollNext: f,
     slidesCount: k
-  } = Q({
+  } = J({
     options: {
       axis: "x"
     },
@@ -50,7 +50,7 @@ const U = A((w, I) => {
     scrollNext: n,
     scrollTo: s,
     selectedIndex: a
-  }), [i, n, s, a]), /* @__PURE__ */ d(E, { ref: p, theme: t, styles: P, $layout: J.Horizontal, $variant: G.Cards, tabIndex: R ? $.Default : $.Disabled, "data-testid": o, children: [
+  }), [i, n, s, a]), /* @__PURE__ */ d(E, { ref: p, theme: t, styles: P, $layout: Q.Horizontal, $variant: K.Cards, tabIndex: R ? $.Default : $.Disabled, "data-testid": o, children: [
     /* @__PURE__ */ e(H, { "data-testid": `${o}-controls-wrapper`, theme: t, children: /* @__PURE__ */ e(L, { theme: t, ref: g, "data-testid": `${o}-viewport`, children: /* @__PURE__ */ e(M, { theme: t, "data-testid": `${o}-slider-wrapper`, children: l == null ? void 0 : l.map((h, r) => /* @__PURE__ */ e(_, { theme: t, "data-testid": `${o}-content-slide-${r}`, children: T(h, r) }, r)) }) }) }),
     /* @__PURE__ */ d(z, { theme: t, "data-testid": `${o}-footer`, children: [
       D && /* @__PURE__ */ e(O, { theme: t, "data-testid": `${o}-dots`, children: (y = Array.from({

package/components/domainSpecific/RadioGroup/RadioGroupItem/RadioGroupItem.js

@@ -21,11 +21,11 @@ const T = ({
   } = C(), h = () => {
     a || x(o.value);
   };
-  return o.tooltip ? /* @__PURE__ */ i(m, { content: o.tooltip, position: k.Top, styles: {}, children: /* @__PURE__ */ v(c, { selected: t, disabled: a, theme: r, $hex: o.hex, $image: o.image, $height: u, $width: $, "data-testid": `${p}-${o.value}`, onClick: h, styles: l, children: [
+  return o.tooltip ? /* @__PURE__ */ i(m, { content: o.tooltip, position: k.Top, styles: {}, children: /* @__PURE__ */ v(c, { selected: t, disabled: a, theme: r, $hex: o.hex, $image: o.image, $height: $, $width: u, "data-testid": `${p}-${o.value}`, onClick: h, styles: l, children: [
     /* @__PURE__ */ i(f, { name: e, theme: r, "data-testid": `${p}-input-${o.value}`, "aria-checked": t, "aria-disabled": a, value: o.value, checked: t, disabled: a, onChange: h }),
     n && n,
     !n && /* @__PURE__ */ i(g, { theme: r, selected: t, disabled: a, children: o.label })
-  ] }) }) : /* @__PURE__ */ v(c, { selected: t, disabled: a, theme: r, $hex: o.hex, $image: o.image, $height: u, $width: $, "data-testid": `${p}-${o.value}`, onClick: h, styles: l, children: [
+  ] }) }) : /* @__PURE__ */ v(c, { selected: t, disabled: a, theme: r, $hex: o.hex, $image: o.image, $height: $, $width: u, "data-testid": `${p}-${o.value}`, onClick: h, styles: l, children: [
     /* @__PURE__ */ i(f, { name: e, theme: r, value: o.value, checked: t, disabled: a, "data-testid": `${p}-input-${o.value}`, onChange: h, "aria-checked": t, "aria-disabled": a }),
     n && n,
     !n && /* @__PURE__ */ i(g, { theme: r, selected: t, disabled: a, children: o.label })

package/constants/positioning.js

@@ -3,6 +3,7 @@ const E = {
   NEGATIVE: -1,
   FIRST: 1,
   LOW: 100,
+  MEDIUM: 500,
   HIGH: 900,
   TOP: 1e3
 };

package/hooks/useTheme/useTheme.js

@@ -1,47 +1,48 @@
 "use client";
-import { jsx as b } from "@emotion/react/jsx-runtime";
-import { useState as l, useCallback as a, createContext as y, useContext as N } from "react";
-import { get as c, size as P } from "../../utils/helpers.js";
-import { defaultTheme as n } from "../../tokens/defaultTheme.js";
-const d = y({
-  theme: n,
+import { jsx as a } from "@emotion/react/jsx-runtime";
+import { useState as c, useCallback as d, createContext as y, useContext as N } from "react";
+import { ThemeProvider as $ } from "@emotion/react";
+import { get as T, size as g } from "../../utils/helpers.js";
+import { defaultTheme as i } from "../../tokens/defaultTheme.js";
+const u = y({
+  theme: i,
   setTheme: () => {
     console.warn("setTheme method is not implemented yet.");
   },
   addTheme: () => {
     console.warn("addTheme method is not implemented yet.");
   }
-}), $ = (o) => {
+}), E = (o) => {
   const {
-    children: T,
-    initialTheme: i,
-    isDefault: u = !1
+    children: f,
+    initialTheme: n,
+    isDefault: p = !1
   } = o;
   let e, m;
-  u ? (e = c(n, "name"), m = {
-    [e]: n
-  }) : (e = c(i, "name", ""), m = e ? {
+  p ? (e = T(i, "name"), m = {
     [e]: i
+  }) : (e = T(n, "name", ""), m = e ? {
+    [e]: n
   } : {});
-  const [s, f] = l(m), [x, r] = l(e), h = P(s), p = a((t = "") => {
+  const [s, x] = c(m), [v, r] = c(e), h = s[v], l = g(s), w = d((t = "") => {
     s[t] ? r(t) : (r(e), console.warn(`Theme '${t}' does not exist.`));
-  }, [h, e]), w = a((t, v) => {
-    s[t] ? console.warn(`Theme '${t}' already exist.`) : f((C) => Object.assign(C, {
-      [t]: v
+  }, [l, e]), P = d((t, C) => {
+    s[t] ? console.warn(`Theme '${t}' already exist.`) : x((b) => Object.assign(b, {
+      [t]: C
     }));
-  }, [h]);
-  return /* @__PURE__ */ b(d.Provider, { value: {
-    theme: s[x],
-    setTheme: p,
-    addTheme: w
-  }, children: T });
-}, k = () => {
-  const o = N(d);
+  }, [l]);
+  return /* @__PURE__ */ a(u.Provider, { value: {
+    theme: h,
+    setTheme: w,
+    addTheme: P
+  }, children: /* @__PURE__ */ a($, { theme: h, children: f }) });
+}, O = () => {
+  const o = N(u);
   if (!o)
     throw new Error("useTheme could not be used outside ThemeProvider");
   return o;
 };
 export {
-  $ as ThemeProvider,
-  k as useTheme
+  E as ThemeProvider,
+  O as useTheme
 };