gd-design-library 1.0.2 → 1.2.0

package/assets/icons/volume-up.js

@@ -1,17 +1,10 @@
 "use client";
-import { jsx as t } from "@emotion/react/jsx-runtime";
-import { icon as l } from "../../tokens/icon.js";
-import { SizeVariant as m } from "../../types/common.js";
-const {
-  width: h,
-  height: s
-} = l.size[m.Sm], V = ({
-  width: o = h,
-  height: i = s,
+import { jsx as o } from "@emotion/react/jsx-runtime";
+const l = ({
   fillSvg: e = "none",
-  fill: r = "currentColor",
-  ...n
-}) => /* @__PURE__ */ t("svg", { width: o, height: i, fill: e, viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ t("path", { d: "M2 5.99999V9.99999H4.66667L8 13.3333V2.66665L4.66667 5.99999H2ZM11 7.99999C11 6.81999 10.32 5.80665 9.33333 5.31332V10.68C10.32 10.1933 11 9.17999 11 7.99999ZM9.33333 2.15332V3.52665C11.26 4.09999 12.6667 5.88665 12.6667 7.99999C12.6667 10.1133 11.26 11.9 9.33333 12.4733V13.8467C12.0067 13.24 14 10.8533 14 7.99999C14 5.14665 12.0067 2.75999 9.33333 2.15332Z", fill: r }) });
+  fill: n = "currentColor",
+  ...r
+}) => /* @__PURE__ */ o("svg", { fill: e, viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", ...r, children: /* @__PURE__ */ o("path", { d: "M2 5.99999V9.99999H4.66667L8 13.3333V2.66665L4.66667 5.99999H2ZM11 7.99999C11 6.81999 10.32 5.80665 9.33333 5.31332V10.68C10.32 10.1933 11 9.17999 11 7.99999ZM9.33333 2.15332V3.52665C11.26 4.09999 12.6667 5.88665 12.6667 7.99999C12.6667 10.1133 11.26 11.9 9.33333 12.4733V13.8467C12.0067 13.24 14 10.8533 14 7.99999C14 5.14665 12.0067 2.75999 9.33333 2.15332Z", fill: n }) });
 export {
-  V as VolumeUpIcon
+  l as VolumeUpIcon
 };

package/assets/icons/wifiTethering.d.ts

@@ -1,7 +1,5 @@
-export declare const WifiTetheringIcon: ({ width, height, fillSvg, fill, ...rest }: {
+export declare const WifiTetheringIcon: ({ 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/wifiTethering.js

@@ -1,17 +1,10 @@
 "use client";
 import { jsx as C } from "@emotion/react/jsx-runtime";
-import { icon as n } from "../../tokens/icon.js";
-import { SizeVariant as h } from "../../types/common.js";
-const {
-  width: l,
-  height: m
-} = n.size[h.Sm], d = ({
-  width: t = l,
-  height: i = m,
+const t = ({
   fillSvg: o = "none",
   fill: e = "currentColor",
-  ...r
-}) => /* @__PURE__ */ C("svg", { width: t, height: i, viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", fill: o, ...r, children: /* @__PURE__ */ C("path", { d: "M7.99998 7.33333C7.26665 7.33333 6.66665 7.93333 6.66665 8.66667C6.66665 9.4 7.26665 10 7.99998 10C8.73331 10 9.33331 9.4 9.33331 8.66667C9.33331 7.93333 8.73331 7.33333 7.99998 7.33333ZM12 8.66667C12 6.46 10.2066 4.66667 7.99998 4.66667C5.79331 4.66667 3.99998 6.46 3.99998 8.66667C3.99998 10.1467 4.80665 11.4333 5.99998 12.1267L6.66665 10.9667C5.87331 10.5 5.33331 9.65333 5.33331 8.66667C5.33331 7.19333 6.52665 6 7.99998 6C9.47331 6 10.6666 7.19333 10.6666 8.66667C10.6666 9.65333 10.1266 10.5 9.33331 10.9667L9.99998 12.1267C11.1933 11.4333 12 10.1467 12 8.66667ZM7.99998 2C4.31998 2 1.33331 4.98667 1.33331 8.66667C1.33331 11.1333 2.67331 13.28 4.65998 14.4333L5.32665 13.28C3.73998 12.3533 2.66665 10.64 2.66665 8.66667C2.66665 5.72 5.05331 3.33333 7.99998 3.33333C10.9466 3.33333 13.3333 5.72 13.3333 8.66667C13.3333 10.64 12.26 12.3533 10.6666 13.28L11.3333 14.4333C13.3266 13.28 14.6666 11.1333 14.6666 8.66667C14.6666 4.98667 11.68 2 7.99998 2Z", fill: e }) });
+  ...n
+}) => /* @__PURE__ */ C("svg", { viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", fill: o, ...n, children: /* @__PURE__ */ C("path", { d: "M7.99998 7.33333C7.26665 7.33333 6.66665 7.93333 6.66665 8.66667C6.66665 9.4 7.26665 10 7.99998 10C8.73331 10 9.33331 9.4 9.33331 8.66667C9.33331 7.93333 8.73331 7.33333 7.99998 7.33333ZM12 8.66667C12 6.46 10.2066 4.66667 7.99998 4.66667C5.79331 4.66667 3.99998 6.46 3.99998 8.66667C3.99998 10.1467 4.80665 11.4333 5.99998 12.1267L6.66665 10.9667C5.87331 10.5 5.33331 9.65333 5.33331 8.66667C5.33331 7.19333 6.52665 6 7.99998 6C9.47331 6 10.6666 7.19333 10.6666 8.66667C10.6666 9.65333 10.1266 10.5 9.33331 10.9667L9.99998 12.1267C11.1933 11.4333 12 10.1467 12 8.66667ZM7.99998 2C4.31998 2 1.33331 4.98667 1.33331 8.66667C1.33331 11.1333 2.67331 13.28 4.65998 14.4333L5.32665 13.28C3.73998 12.3533 2.66665 10.64 2.66665 8.66667C2.66665 5.72 5.05331 3.33333 7.99998 3.33333C10.9466 3.33333 13.3333 5.72 13.3333 8.66667C13.3333 10.64 12.26 12.3533 10.6666 13.28L11.3333 14.4333C13.3266 13.28 14.6666 11.1333 14.6666 8.66667C14.6666 4.98667 11.68 2 7.99998 2Z", fill: e }) });
 export {
-  d as WifiTetheringIcon
+  t as WifiTetheringIcon
 };

package/components/core/Button/Button.js

@@ -1,44 +1,47 @@
 "use client";
-import { jsxs as $, jsx as n } from "@emotion/react/jsx-runtime";
-import { forwardRef as b } from "react";
-import { convertToInlineBoxStyles as x } from "../../../tokens/utils.js";
+import { jsxs as b, jsx as n } from "@emotion/react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { convertToInlineBoxStyles as T } from "../../../tokens/utils.js";
 import { COMPONENT_NAME as e } from "./constants.js";
-import { ButtonStyled as T, StartIconStyled as E, ContentStyled as N, EndIconStyled as v } from "./ButtonStyled.js";
-import { ButtonVariant as C, ButtonTypes as P, ButtonRole as j } from "../../../types/button.js";
-import { useTheme as M } from "../../../hooks/useTheme/useTheme.js";
-import { get as O } from "../../../utils/helpers.js";
-import { TabIndex as R } from "../../../types/accesability.js";
-const W = b((s, m) => {
+import { ButtonStyled as C, StartIconStyled as E, ContentStyled as N, EndIconStyled as j } from "./ButtonStyled.js";
+import { ButtonVariant as v, ButtonTypes as P, ButtonRole as M } from "../../../types/button.js";
+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 {
     theme: t
-  } = M(), {
-    variant: u = C.Primary,
-    rounded: c = O(t, "button.attrs.rounded", "none"),
+  } = O(), {
+    variant: c = v.Primary,
+    rounded: f = R(t, "button.attrs.rounded", "none"),
     children: o,
     iconStart: r = null,
     iconEnd: a = null,
-    type: f = P.Button,
-    disabled: p = !1,
-    isIcon: y = !1,
+    type: p = P.Button,
+    disabled: y = !1,
+    isIcon: h = !1,
     ariaLabel: i,
     ariaPressed: l,
-    role: h = j.Button,
-    fullWidth: B = !1,
-    tabIndex: I = R.Default,
-    onClick: S,
-    ...d
-  } = s;
-  return /* @__PURE__ */ $(T, { ref: m, $variant: u, $isIcon: y, $fullWidth: B, $rounded: c, disabled: p, onClick: S, type: f, role: h, theme: t, tabIndex: I, "data-testid": e, ...x(d), ...i ? {
+    role: B = M.Button,
+    fullWidth: I = !1,
+    tabIndex: S = W.Default,
+    onClick: $,
+    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 ? {
     "aria-label": i
   } : {}, ...l ? {
     "aria-pressed": l
-  } : {}, ...d, children: [
+  } : {}, ...s, children: [
     r ? /* @__PURE__ */ n(E, { theme: t, "data-testid": `${e}-icon-start`, children: r }) : null,
-    o ? /* @__PURE__ */ n(N, { theme: t, "data-testid": `${e}-content`, children: o }) : null,
-    a ? /* @__PURE__ */ n(v, { theme: t, "data-testid": `${e}-icon-end`, children: a }) : null
+    o ? /* @__PURE__ */ n(N, { theme: t, styles: d ? {
+      justifyContent: d
+    } : {}, "data-testid": `${e}-content`, children: o }) : null,
+    a ? /* @__PURE__ */ n(j, { theme: t, "data-testid": `${e}-icon-end`, children: a }) : null
   ] });
 });
-W.displayName = e;
+g.displayName = e;
 export {
-  W as Button
+  g as Button
 };

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

@@ -1,9 +1,9 @@
 import { PropsWithChildren, MouseEvent, ReactNode } from 'react';
-import { ButtonRole, ButtonTypes, ButtonVariant, EnumOrPrimitive } from '../../../types';
+import { ButtonRole, ButtonTypes, ButtonVariant, EnumOrPrimitive, Rounded } from '../../../types';
 import { BoxCssComponentProps, BoxCssComponentStyledProps } from '../..';
 export interface ButtonProps extends BoxCssComponentProps<HTMLButtonElement>, PropsWithChildren {
     variant?: EnumOrPrimitive<ButtonVariant>;
-    rounded?: 'none' | 'default' | 'round' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    rounded?: Rounded;
     iconStart?: ReactNode;
     iconEnd?: ReactNode;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;

package/components/core/Button/ButtonStyled.js

@@ -1,58 +1,59 @@
-"use client";
 import { jsx as c } from "@emotion/react/jsx-runtime";
 import { forwardRef as b } from "react";
-import { getBoxStyles as h, tokensHandler as P } from "../../../tokens/utils.js";
+import { getBoxStyles as h, tokensHandler as x } from "../../../tokens/utils.js";
 import { get as t } from "../../../utils/helpers.js";
-const B = b((e, n) => {
+const w = b(({
+  theme: {
+    button: e,
+    ...o
+  } = {},
+  $isIcon: n,
+  $fullWidth: s,
+  $variant: l,
+  $rounded: d,
+  className: m,
+  styles: p = {},
+  ...a
+}, f) => {
   const {
-    theme: {
-      button: s,
-      ...o
-    } = {},
-    $isIcon: u,
-    $fullWidth: d,
-    $variant: p,
-    $rounded: a,
-    styles: m = {},
-    ...f
-  } = e, {
-    boxStyles: i,
-    restProps: y
-  } = h(f), r = new Proxy(s || {}, P(o)), l = t(o, ["radius", a], "0px"), S = [t(r, "default", {}), t(r, p, {}), i, u ? t(r, "icon", {}) : {}, d ? t(r, "fullWidth", {}) : {}, {
-    borderRadius: l,
+    boxStyles: y,
+    restProps: S
+  } = h(a), r = new Proxy(e || {}, x(o)), u = t(o, ["radius", d], "0px"), i = [t(r, "default", {}), t(r, l, {}), y, n ? t(r, "icon", {}) : {}, s ? t(r, "fullWidth", {}) : {}, {
+    borderRadius: u,
     "&:focus-visible::after": {
-      borderRadius: l
+      borderRadius: u
     }
-  }, m];
-  return /* @__PURE__ */ c("button", { css: S, ...y, ref: n });
-}), v = (e) => {
+  }, p];
+  return /* @__PURE__ */ c("button", { css: i, className: m, ...S, ref: f });
+}), N = (e) => {
   const {
     theme: {
-      button: n
+      button: o
     } = {},
+    styles: n,
     ...s
-  } = e, o = t(n, "content", {});
-  return /* @__PURE__ */ c("span", { css: t(o, "default", {}), className: "gd-button__content", ...s });
-}, w = (e) => {
+  } = e, l = t(o, "content", {});
+  return /* @__PURE__ */ c("span", { css: [t(l, "default", {}), n], className: "gd-button__content", ...s });
+}, R = (e) => {
   const {
     theme: {
-      button: n
+      button: o
     } = {},
-    ...s
-  } = e, o = t(n, "startIcon", {});
-  return /* @__PURE__ */ c("span", { css: t(o, "default", {}), ...s });
-}, N = (e) => {
+    ...n
+  } = e, s = t(o, "startIcon", {});
+  return /* @__PURE__ */ c("span", { css: t(s, "default", {}), ...n });
+}, _ = (e) => {
   const {
     theme: {
-      button: n
+      button: o
     } = {},
-    ...s
-  } = e, o = t(n, "endIcon", {});
-  return /* @__PURE__ */ c("span", { css: t(o, "default", {}), ...s });
+    ...n
+  } = e, s = t(o, "endIcon", {});
+  return /* @__PURE__ */ c("span", { css: t(s, "default", {}), ...n });
 };
 export {
-  B as ButtonStyled,
-  v as ContentStyled,
-  N as EndIconStyled,
-  w as StartIconStyled
+  w as ButtonStyled,
+  N as ContentStyled,
+  _ as EndIconStyled,
+  R as StartIconStyled
 };

package/components/core/Dropdown/Dropdown.d.ts

@@ -1,3 +1,3 @@
-export declare const Dropdown: import('react').ForwardRefExoticComponent<import('../..').CommonCssComponentProps<HTMLDivElement> & {
+export declare const Dropdown: import('react').ForwardRefExoticComponent<import('../..').BoxCssComponentProps<HTMLDivElement> & {
     children?: import('react').ReactNode | undefined;
 } & import('react').RefAttributes<HTMLDivElement>>;

package/components/core/Dropdown/Dropdown.js

@@ -1,19 +1,19 @@
 "use client";
-import { jsx as u } from "@emotion/react/jsx-runtime";
-import { forwardRef as y } from "react";
+import { jsx as a } from "@emotion/react/jsx-runtime";
+import { forwardRef as u } from "react";
 import { KEYBOARD_KEYS as s } from "../../../constants/keyboard.js";
-import { getClosestFocusable as D } from "../../../utils/focus.js";
-import { DropdownStyled as E } from "./DropdownStyled.js";
+import { getClosestFocusable as y } from "../../../utils/focus.js";
+import { DropdownStyled as D } from "./DropdownStyled.js";
 import { COMPONENT_NAME as c } from "./constants.js";
-import { useTheme as R } from "../../../hooks/useTheme/useTheme.js";
-const w = y((l, p) => {
+import { useTheme as E } from "../../../hooks/useTheme/useTheme.js";
+const R = u(({
+  children: p,
+  ...l
+}, d) => {
   const {
-    children: d,
-    ...f
-  } = l, {
-    theme: a
-  } = R();
-  return /* @__PURE__ */ u(E, { ref: p, theme: a, "data-testid": c, onKeyDown: (o) => {
+    theme: f
+  } = E();
+  return /* @__PURE__ */ a(D, { ref: d, theme: f, "data-testid": c, onKeyDown: (o) => {
     var m;
     if (![s.ARROW_DOWN, s.ARROW_UP].includes(o.key))
       return;
@@ -22,7 +22,7 @@ const w = y((l, p) => {
     if (t && e.contains(t)) {
       const r = document.createElement("div");
       e.insertBefore(r, i ? t : t.nextSibling);
-      const n = D({
+      const n = y({
         initial: r,
         previous: i,
         root: e,
@@ -30,9 +30,9 @@ const w = y((l, p) => {
       });
       e.removeChild(r), n == null || n.focus();
     }
-  }, ...f, children: d });
+  }, ...l, children: p });
 });
-w.displayName = c;
+R.displayName = c;
 export {
-  w as Dropdown
+  R as Dropdown
 };

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

@@ -1,8 +1,8 @@
 import { PropsWithChildren } from 'react';
-import { CommonCssComponentProps, CommonCssComponentStyledProps } from '../../index.types';
+import { BoxCssComponentProps, BoxCssComponentStyledProps } from '../../index.types';
 import { OnSelectProps } from '../types/events.types';
-export type DropdownProps = PropsWithChildren<CommonCssComponentProps>;
-export type DropdownStyledProps = PropsWithChildren<CommonCssComponentStyledProps>;
+export type DropdownProps = PropsWithChildren<BoxCssComponentProps>;
+export type DropdownStyledProps = PropsWithChildren<BoxCssComponentStyledProps>;
 export interface DropdownContextType {
     onSelect?: (props: OnSelectProps) => void;
 }

package/components/core/Dropdown/DropdownStyled.js

@@ -1,21 +1,20 @@
-"use client";
-import { jsx as d } from "@emotion/react/jsx-runtime";
+import { jsx as c } from "@emotion/react/jsx-runtime";
 import { forwardRef as f } from "react";
-import { getBoxStyles as y, tokensHandler as i } from "../../../tokens/utils.js";
+import { getBoxStyles as l, tokensHandler as y } from "../../../tokens/utils.js";
 import { get as S } from "../../../utils/helpers.js";
-const a = f((t, e) => {
+const a = f(({
+  theme: {
+    select: o,
+    ...t
+  } = {},
+  styles: e = {},
+  ...r
+}, s) => {
   const {
-    theme: {
-      select: o,
-      ...r
-    } = {},
-    styles: s = {},
-    ...n
-  } = t, {
     boxStyles: m,
-    restProps: p
-  } = y(n), c = new Proxy(o || {}, i(r)), l = [S(c, "dropdown", {}), m, s];
-  return /* @__PURE__ */ d("div", { css: l, ...p, ref: e });
+    restProps: n
+  } = l(r), p = new Proxy(o || {}, y(t)), d = [S(p, "dropdown", {}), m, e];
+  return /* @__PURE__ */ c("div", { css: d, ...n, ref: s });
 });
 export {
   a as DropdownStyled

package/components/core/Icon/Icon.js

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

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

@@ -1,6 +1,7 @@
 import { MouseEventHandler } from 'react';
 import { EnumOrPrimitive, SizeVariant } from '../../../types';
-export interface IconProps {
+import { BoxCssComponentProps } from '../..';
+export interface IconProps extends Omit<BoxCssComponentProps<SVGElement>, 'width' | 'height'> {
     name: string;
     width?: number;
     height?: number;