gd-design-library 1.0.2 → 1.2.0

package/components/layout/ChatContainer/ChatContainer.js

@@ -1,57 +1,74 @@
 "use client";
-import { jsxs as n, jsx as r } from "@emotion/react/jsx-runtime";
-import { forwardRef as O, useRef as N, useState as x, useImperativeHandle as H } from "react";
+import { jsxs as l, jsx as d } from "@emotion/react/jsx-runtime";
+import { forwardRef as N, useRef as I, useState as W, useCallback as $, useImperativeHandle as j } from "react";
 import { COMPONENT_NAME as t } from "./constants.js";
-import { MainWrapperStyled as I, SidebarWrapperStyled as M, SidebarStyled as v, SidebarHeaderStyled as R, SidebarToggleButtonStyled as p, BodyStyled as j, MainHeaderStyled as k, ContentStyled as A } from "./ChatContainerStyled.js";
-import { ChatLayoutVariant as B } from "../../../types/chat.js";
-import { useTheme as D } from "../../../hooks/useTheme/useTheme.js";
-import { Icon as h } from "../../core/Icon/Icon.js";
-import { get as f } from "../../../utils/helpers.js";
-const E = O((S, u) => {
+import { MainWrapperStyled as B, SidebarWrapperStyled as D, SidebarStyled as E, SidebarHeaderStyled as H, SidebarToggleButtonStyled as y, 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 { 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 b } from "../../core/Icon/Icon.js";
+const F = N(({
+  sidebarContent: g,
+  headerContent: m,
+  children: S,
+  isOpen: w,
+  sidebarHeaderContent: u,
+  sidebarMinifiedContent: f,
+  onToggleSidebar: i,
+  styles: C = {},
+  showSidebarAsideControl: k = !0,
+  showSidebarHeaderControl: M = !0,
+  ...O
+}, x) => {
   const {
-    sidebarContent: y,
-    headerContent: s,
-    children: b,
-    isOpen: g = !0,
-    sidebarHeaderContent: l,
-    onToggleSidebar: d,
-    styles: C = {},
-    variant: $ = B.Auto,
-    ...w
-  } = S, {
     theme: e
-  } = D(), c = N(null), [a, i] = x(g), o = () => {
-    const m = !a;
-    i(m), d == null || d(m);
-  };
-  return H(u, () => ({
-    ref: c,
-    isOpen: a,
-    open: () => i(!0),
-    close: () => i(!1),
-    toggle: o
-  })), /* @__PURE__ */ n(I, { className: "gd-chat-container", "data-testid": `${t}-main-wrapper`, theme: e, ref: c, ...w, styles: C, children: [
-    a && /* @__PURE__ */ r(M, { theme: e, $variant: $, "data-testid": `${t}-sidebar-wrapper`, children: /* @__PURE__ */ n(v, { theme: e, "data-testid": `${t}-sidebar`, children: [
-      l ? /* @__PURE__ */ n(R, { theme: e, "data-testid": `${t}-sidebar-header`, children: [
-        /* @__PURE__ */ r(p, { theme: e, onClick: o, $open: a, children: /* @__PURE__ */ r(h, { ...f(e, "chat.toggleIcon", {
+  } = q(), n = z(), h = I(null), [r, o] = W(w), s = _(`(max-width: ${p(e, "values.screenMedium", "768px")})`), c = $(() => {
+    const a = !r;
+    n.debug(`${t}: Toggle triggered (user interaction)`, {
+      isOpen: a
+    }), o(a), i == null || i(a);
+  }, [r, i, n]), R = $((a) => {
+    s && r && a.target === a.currentTarget && (n.debug(`${t}: Sidebar wrapper clicked (mobile close)`, {
+      isMobile: s,
+      wasOpen: r
+    }), o(!1), i == null || i(!1));
+  }, [s, r]);
+  return j(x, () => ({
+    ref: h,
+    isOpen: r,
+    open: () => {
+      n.debug(`${t}: Ref method called - open()`), o(!0);
+    },
+    close: () => {
+      n.debug(`${t}: Ref method called - close()`), o(!1);
+    },
+    toggle: () => {
+      n.debug(`${t}: Ref method called - toggle()`), c();
+    }
+  })), /* @__PURE__ */ l(B, { className: "gd-chat-container", "data-testid": `${t}-main-wrapper`, theme: e, ref: h, ...O, styles: C, children: [
+    /* @__PURE__ */ d(D, { theme: e, "data-testid": `${t}-sidebar-wrapper`, $open: r, onClick: R, children: /* @__PURE__ */ l(E, { theme: e, "data-testid": `${t}-sidebar`, $open: r, onClick: (a) => a.stopPropagation(), children: [
+      u ? /* @__PURE__ */ l(H, { theme: e, "data-testid": `${t}-sidebar-header`, children: [
+        k && /* @__PURE__ */ d(y, { theme: e, onClick: c, $open: r, children: /* @__PURE__ */ d(b, { ...p(e, "chat.toggleIcon", {
           name: "arrowDown"
         }) }) }),
-        l
+        u
       ] }) : null,
-      y
+      /* @__PURE__ */ d(P, { theme: e, children: g })
     ] }) }),
-    /* @__PURE__ */ n(j, { theme: e, "data-testid": `${t}-body`, children: [
-      s ? /* @__PURE__ */ n(k, { theme: e, "data-testid": `${t}-main-header`, children: [
-        !a && /* @__PURE__ */ r(p, { theme: e, onClick: o, children: /* @__PURE__ */ r(h, { ...f(e, "chat.toggleIcon", {
+    f && /* @__PURE__ */ d(v, { theme: e, "data-testid": `${t}-sidebar-minified`, $open: !r, children: f }),
+    /* @__PURE__ */ l(A, { theme: e, "data-testid": `${t}-body`, children: [
+      m ? /* @__PURE__ */ l(L, { theme: e, "data-testid": `${t}-main-header`, children: [
+        !r && M && /* @__PURE__ */ d(y, { theme: e, onClick: c, children: /* @__PURE__ */ d(b, { ...p(e, "chat.toggleIcon", {
           name: "arrowDown"
         }) }) }),
-        s
+        m
       ] }) : null,
-      /* @__PURE__ */ r(A, { theme: e, "data-testid": `${t}-content`, children: b })
+      /* @__PURE__ */ d(Q, { theme: e, "data-testid": `${t}-content`, children: S })
     ] })
   ] });
 });
-E.displayName = t;
+F.displayName = t;
 export {
-  E as ChatContainer
+  F as ChatContainer
 };

package/components/layout/ChatContainer/ChatContainer.types.d.ts

@@ -1,24 +1,27 @@
 import { PropsWithChildren, ReactNode } from 'react';
-import { EnumOrPrimitive, ChatLayoutVariant } from '../../../types';
 import { CommonCssComponentProps, CommonCssComponentStyledProps } from '../..';
 export interface ChatContainerProps extends PropsWithChildren<CommonCssComponentProps> {
     sidebarContent?: ReactNode;
+    sidebarMinifiedContent?: ReactNode;
     sidebarHeaderContent?: ReactNode;
     headerContent?: ReactNode;
     children?: ReactNode;
     isOpen?: boolean;
-    variant?: EnumOrPrimitive<ChatLayoutVariant>;
+    showSidebarAsideControl?: boolean;
+    showSidebarHeaderControl?: boolean;
     onToggleSidebar?: (open: boolean) => void;
 }
 export interface ChatContainerRef {
-    isOpen: boolean;
+    isOpen?: boolean;
     open: () => void;
     close: () => void;
     toggle: () => void;
 }
-export type ChatCommonStyledProps = PropsWithChildren<CommonCssComponentStyledProps>;
+export interface ChatCommonStyledProps extends PropsWithChildren<CommonCssComponentStyledProps> {
+    $open?: boolean;
+}
 export interface SidebarWrapperStyledProps extends CommonCssComponentStyledProps {
-    $variant?: EnumOrPrimitive<ChatLayoutVariant>;
+    $open?: boolean;
 }
 export interface SidebarToggleButtonStyledProps extends CommonCssComponentStyledProps<HTMLButtonElement> {
     $open?: boolean;

package/components/layout/ChatContainer/ChatContainerStyled.d.ts

@@ -4,6 +4,8 @@ export declare const MainHeaderStyled: (props: ChatCommonStyledProps) => import(
 export declare const BodyStyled: (props: ChatCommonStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const SidebarWrapperStyled: (props: SidebarWrapperStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const SidebarStyled: (props: ChatCommonStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SidebarMinifiedStyled: (props: ChatCommonStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const SidebarHeaderStyled: (props: ChatCommonStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SidebarContentWrapperStyled: (props: ChatCommonStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const ContentStyled: (props: ChatCommonStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const SidebarToggleButtonStyled: (props: SidebarToggleButtonStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/layout/ChatContainer/ChatContainerStyled.js

@@ -1,133 +1,154 @@
-"use client";
-import { jsx as d } from "@emotion/react/jsx-runtime";
+import { jsx as p } from "@emotion/react/jsx-runtime";
 import { forwardRef as P } from "react";
-import { getBoxStyles as l, tokensHandler as m, getMediaQuery as i } from "../../../tokens/utils.js";
-import { get as e } from "../../../utils/helpers.js";
-import { ButtonVariant as u } from "../../../types/button.js";
-import { Button as x } from "../../core/Button/Button.js";
+import { getBoxStyles as m, tokensHandler as i, getMediaQuery as S } from "../../../tokens/utils.js";
+import { get as t } from "../../../utils/helpers.js";
+import { ButtonVariant as b } from "../../../types/button.js";
+import { Button as u } from "../../core/Button/Button.js";
 const N = P((n, s) => {
   const {
     theme: {
-      chat: t,
-      ...r
+      chat: e,
+      ...c
     } = {},
-    styles: c = {},
-    ...a
+    styles: o = {},
+    ...r
   } = n, {
-    boxStyles: p,
-    restProps: o
-  } = l(a), y = new Proxy(t || {}, m(r)), S = [e(y, "wrapper.default", {}), p, c];
-  return /* @__PURE__ */ d("div", { css: S, ...o, ref: s });
-}), k = (n) => {
+    boxStyles: d,
+    restProps: a
+  } = m(r), l = new Proxy(e || {}, i(c)), y = [t(l, "wrapper.default", {}), d, o];
+  return /* @__PURE__ */ p("div", { css: y, ...a, ref: s });
+}), W = (n) => {
   const {
     theme: {
       chat: s,
-      ...t
+      ...e
     } = {},
-    ...r
+    ...c
   } = n, {
-    boxStyles: c,
-    restProps: a
-  } = l(r), p = new Proxy(s || {}, m(t)), o = [e(p, "mainHeader", {}), c];
-  return /* @__PURE__ */ d("header", { css: o, ...a });
-}, v = (n) => {
+    boxStyles: o,
+    restProps: r
+  } = m(c), d = new Proxy(s || {}, i(e)), a = [t(d, "mainHeader", {}), o];
+  return /* @__PURE__ */ p("header", { css: a, ...r });
+}, M = (n) => {
   const {
     theme: {
       chat: s,
-      ...t
+      ...e
     } = {},
-    ...r
+    ...c
   } = n, {
-    boxStyles: c,
-    restProps: a
-  } = l(r), p = new Proxy(s || {}, m(t)), o = [e(p, "body", {}), c];
-  return /* @__PURE__ */ d("div", { css: o, ...a });
-}, H = (n) => {
+    boxStyles: o,
+    restProps: r
+  } = m(c), d = new Proxy(s || {}, i(e)), a = [t(d, "body", {}), o];
+  return /* @__PURE__ */ p("div", { css: a, ...r });
+}, k = (n) => {
   const {
     theme: {
       chat: s,
-      ...t
+      ...e
     } = {},
-    $variant: r,
-    ...c
+    $open: c,
+    ...o
   } = n, {
-    boxStyles: a,
-    restProps: p
-  } = l(c), o = new Proxy(s || {}, m(t)), y = [e(o, "sidebarWrapper.default", {}), e(o, ["sidebarWrapper", r, "default"], {}), i({
-    max: e(t, "breakpoints.md")
-  }, e(s, ["sidebarWrapper", r, "md"], (S) => ({}))(t)), a];
-  return /* @__PURE__ */ d("div", { css: y, ...p });
-}, W = (n) => {
+    boxStyles: r,
+    restProps: d
+  } = m(o), a = new Proxy(s || {}, i(e)), l = [t(a, "sidebarWrapper.default", {}), t(a, c ? "sidebarWrapper.open" : "sidebarWrapper.close", {}), S({
+    max: t(e, "breakpoints.md")
+  }, t(s, ["sidebarWrapper", "md"], (y) => ({}))(e)), r];
+  return /* @__PURE__ */ p("div", { css: l, ...d });
+}, v = (n) => {
   const {
     theme: {
       chat: s,
-      ...t
+      ...e
     } = {},
-    ...r
+    $open: c,
+    ...o
   } = n, {
-    boxStyles: c,
-    restProps: a
-  } = l(r), p = new Proxy(s || {}, m(t)), o = [e(p, "sidebar", {}), c];
-  return /* @__PURE__ */ d("aside", { css: o, ...a });
-}, M = (n) => {
+    boxStyles: r,
+    restProps: d
+  } = m(o), a = new Proxy(s || {}, i(e)), l = [t(a, "sidebar.default", {}), t(a, c ? "sidebar.open" : "sidebar.close", {}), r];
+  return /* @__PURE__ */ p("aside", { css: l, ...d });
+}, H = (n) => {
   const {
     theme: {
       chat: s,
-      ...t
+      ...e
     } = {},
-    ...r
+    $open: c,
+    ...o
+  } = n, r = new Proxy(s || {}, i(e)), d = [t(r, "sidebarMinified.default", {}), t(r, c ? "sidebarMinified.open" : "sidebarMinified.close", {})];
+  return /* @__PURE__ */ p("aside", { css: d, ...o });
+}, $ = (n) => {
+  const {
+    theme: {
+      chat: s,
+      ...e
+    } = {},
+    ...c
   } = n, {
-    boxStyles: c,
-    restProps: a
-  } = l(r), p = new Proxy(s || {}, m(t)), o = [e(p, "sidebarHeader", {}), c];
-  return /* @__PURE__ */ d("header", { css: o, ...a });
+    boxStyles: o,
+    restProps: r
+  } = m(c), d = new Proxy(s || {}, i(e)), a = [t(d, "sidebarHeader", {}), t(d, "sidebar.open", {}), o];
+  return /* @__PURE__ */ p("header", { css: a, ...r });
 }, T = (n) => {
   const {
     theme: {
       chat: s,
-      ...t
+      ...e
     } = {},
-    styles: r = {},
     ...c
+  } = n, o = new Proxy(s || {}, i(e)), r = [t(o, "sidebarContentWrapper", {}), t(o, "sidebar.open", {})];
+  return /* @__PURE__ */ p("div", { css: r, ...c });
+}, j = (n) => {
+  const {
+    theme: {
+      chat: s,
+      ...e
+    } = {},
+    styles: c = {},
+    ...o
   } = n, {
-    boxStyles: a,
-    restProps: p
-  } = l(c), o = new Proxy(s || {}, m(t)), y = [e(o, "content.default", {}), i({
-    max: e(t, "breakpoints.md")
-  }, e(s, "content.md", {})), i({
-    min: e(t, "breakpoints.md"),
-    max: e(t, "breakpoints.xl")
-  }, e(s, "content.mdXl", {})), i({
-    min: e(t, "breakpoints.xl")
-  }, e(s, "content.xl", {})), a, r];
-  return /* @__PURE__ */ d("main", { css: y, ...p });
-}, $ = (n) => {
+    boxStyles: r,
+    restProps: d
+  } = m(o), a = new Proxy(s || {}, i(e)), l = [t(a, "content.default", {}), S({
+    max: t(e, "breakpoints.md")
+  }, t(s, "content.md", {})), S({
+    min: t(e, "breakpoints.md"),
+    max: t(e, "breakpoints.xl")
+  }, t(s, "content.mdXl", {})), S({
+    min: t(e, "breakpoints.xl")
+  }, t(s, "content.xl", {})), r, c];
+  return /* @__PURE__ */ p("main", { css: l, ...d });
+}, I = (n) => {
   const {
     theme: {
       chat: s,
-      ...t
+      ...e
     } = {},
-    $open: r,
-    ...c
+    $open: c,
+    ...o
   } = n, {
-    boxStyles: a,
-    restProps: p
-  } = l(c), o = new Proxy(s || {}, m(t)), y = r ? e(o, "toggleButton.open") : {}, S = e(o, "toggleButton.attrs", {
-    variant: u.Text
+    boxStyles: r,
+    restProps: d
+  } = m(o), a = new Proxy(s || {}, i(e)), l = c ? t(a, "toggleButton.open") : {}, y = t(a, "toggleButton.attrs", {
+    variant: b.Text
   }), h = {
-    ...e(o, "toggleButton.default"),
-    ...y,
-    ...a
+    ...t(a, "toggleButton.default"),
+    ...l,
+    ...r
   };
-  return /* @__PURE__ */ d(x, { ...S, ...p, isIcon: !0, styles: h });
+  return /* @__PURE__ */ p(u, { ...y, ...d, isIcon: !0, styles: h });
 };
 export {
-  v as BodyStyled,
-  T as ContentStyled,
-  k as MainHeaderStyled,
+  M as BodyStyled,
+  j as ContentStyled,
+  W as MainHeaderStyled,
   N as MainWrapperStyled,
-  M as SidebarHeaderStyled,
-  W as SidebarStyled,
-  $ as SidebarToggleButtonStyled,
-  H as SidebarWrapperStyled
+  T as SidebarContentWrapperStyled,
+  $ as SidebarHeaderStyled,
+  H as SidebarMinifiedStyled,
+  v as SidebarStyled,
+  I as SidebarToggleButtonStyled,
+  k as SidebarWrapperStyled
 };

package/components/layout/Column/Column.types.d.ts

@@ -1,6 +1,8 @@
-import { PropsWithChildren } from 'react';
+import { ElementType, PropsWithChildren } from 'react';
 import { BoxCssComponentProps, BoxCssComponentStyledProps, FlexElementProps, FlexElementStyledProps } from '../..';
 export interface ColumnProps extends BoxCssComponentProps, FlexElementProps, PropsWithChildren {
+    as?: keyof HTMLElementTagNameMap | ElementType;
 }
 export interface ColumnStyledProps extends BoxCssComponentStyledProps, FlexElementStyledProps, PropsWithChildren {
+    as?: keyof HTMLElementTagNameMap | ElementType;
 }

package/components/layout/Column/ColumnStyled.js

@@ -1,37 +1,37 @@
-"use client";
-import { jsx as d } from "@emotion/react/jsx-runtime";
-import { forwardRef as g } from "react";
-import { getBoxStyles as $, tokensHandler as S } from "../../../tokens/utils.js";
-import { calculateGutter as w, calculateJustify as P, calculateAlign as j } from "../../../utils/layout.js";
+import { jsx as g } from "@emotion/react/jsx-runtime";
+import { forwardRef as $ } from "react";
+import { getBoxStyles as S, tokensHandler as w } from "../../../tokens/utils.js";
+import { calculateGutter as C, calculateJustify as P, calculateAlign as j } from "../../../utils/layout.js";
 import { get as v } from "../../../utils/helpers.js";
-const k = g((t, r) => {
+const A = $((e, o) => {
   const {
     theme: {
-      column: o,
+      column: r,
       ...s
     } = {},
     $isWrap: l,
     $align: n,
     $justify: m,
-    $gutter: c,
-    $flex: e,
-    $isReversed: i,
-    styles: u,
-    ...a
-  } = t, {
-    boxStyles: f,
-    restProps: p
-  } = $(a), y = new Proxy(o || {}, S(s)), x = [v(y, "default", {}), {
-    flexDirection: i ? "column-reverse" : "column",
+    $gutter: a,
+    $flex: t,
+    $isReversed: c,
+    styles: f,
+    as: i = "div",
+    ...p
+  } = e, {
+    boxStyles: u,
+    restProps: y
+  } = S(p), x = new Proxy(r || {}, w(s)), d = [v(x, "default", {}), {
+    flexDirection: c ? "column-reverse" : "column",
     flexWrap: l ? "wrap" : "nowrap",
     alignItems: j(n),
     justifyContent: P(m),
-    gap: w(c)
-  }, f, e ? {
-    flex: e
-  } : {}, u];
-  return /* @__PURE__ */ d("div", { css: x, ...p, ref: r });
+    gap: C(a)
+  }, u, t ? {
+    flex: t
+  } : {}, f];
+  return /* @__PURE__ */ g(i, { css: d, ...y, ref: o });
 });
 export {
-  k as ColumnStyled
+  A as ColumnStyled
 };

package/components/layout/FlexContainer/FlexContainerStyled.js

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

package/components/layout/Row/Row.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
-import { RowProps } from './Row.types';
+import { RowProps } from './';
 export declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;

package/components/layout/Row/Row.js

@@ -1,26 +1,26 @@
 "use client";
-import { jsx as d } from "@emotion/react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { convertToInlineBoxStyles as c } from "../../../tokens/utils.js";
+import { jsx as n } from "@emotion/react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { convertToInlineBoxStyles as u } from "../../../tokens/utils.js";
 import { RowStyled as $ } from "./RowStyled.js";
-import { COMPONENT_NAME as e } from "./constants.js";
-import { useTheme as x } from "../../../hooks/useTheme/useTheme.js";
-const y = u((t, r) => {
+import { COMPONENT_NAME as t } from "./constants.js";
+import { useTheme as c } from "../../../hooks/useTheme/useTheme.js";
+const x = d(({
+  children: e,
+  gutter: r = 0,
+  align: o = "stretch",
+  justify: m = "start",
+  isWrap: s = !0,
+  isReversed: i = !1,
+  flex: f,
+  ...a
+}, p) => {
   const {
-    children: o,
-    gutter: s = 0,
-    align: i = "stretch",
-    justify: m = "start",
-    isWrap: f = !0,
-    isReversed: a = !1,
-    flex: l,
-    ...n
-  } = t, {
-    theme: p
-  } = x();
-  return /* @__PURE__ */ d($, { ref: r, theme: p, $isReversed: a, $gutter: s, $align: i, $justify: m, $isWrap: f, $flex: l, "data-testid": e, ...c(n), children: o });
+    theme: l
+  } = c();
+  return /* @__PURE__ */ n($, { ref: p, theme: l, $isReversed: i, $gutter: r, $align: o, $justify: m, $isWrap: s, $flex: f, "data-testid": t, ...u(a), children: e });
 });
-y.displayName = e;
+x.displayName = t;
 export {
-  y as Row
+  x as Row
 };

package/components/layout/Row/Row.types.d.ts

@@ -1,6 +1,8 @@
-import { PropsWithChildren } from 'react';
+import { ElementType, PropsWithChildren } from 'react';
 import { BoxCssComponentProps, BoxCssComponentStyledProps, FlexElementProps, FlexElementStyledProps } from '../..';
 export interface RowProps extends BoxCssComponentProps, FlexElementProps, PropsWithChildren {
+    as?: keyof HTMLElementTagNameMap | ElementType;
 }
 export interface RowStyledProps extends BoxCssComponentStyledProps, FlexElementStyledProps, PropsWithChildren {
+    as?: keyof HTMLElementTagNameMap | ElementType;
 }

package/components/layout/Row/RowStyled.js

@@ -1,36 +1,36 @@
-"use client";
-import { jsx as x } from "@emotion/react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { getBoxStyles as g, tokensHandler as $ } from "../../../tokens/utils.js";
-import { get as S } from "../../../utils/helpers.js";
-import { calculateGutter as P, calculateJustify as R, calculateAlign as j } from "../../../utils/layout.js";
-const A = d((t, r) => {
+import { jsx as d } from "@emotion/react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { getBoxStyles as $, tokensHandler as S } from "../../../tokens/utils.js";
+import { get as P } from "../../../utils/helpers.js";
+import { calculateGutter as R, calculateJustify as j, calculateAlign as v } from "../../../utils/layout.js";
+const A = g((e, r) => {
   const {
     theme: {
       row: o,
       ...s
     } = {},
-    $flex: e,
+    $flex: t,
     $isWrap: l,
-    $align: i,
-    $justify: n,
-    $gutter: a,
-    $isReversed: f,
-    styles: c,
-    ...p
-  } = t, {
-    boxStyles: m,
-    restProps: u
-  } = g(p), y = new Proxy(o || {}, $(s)), w = [S(y, "default", {}), {
-    flexDirection: f ? "row-reverse" : "row",
+    $align: n,
+    $justify: a,
+    $gutter: f,
+    $isReversed: i,
+    styles: p,
+    as: m = "div",
+    ...c
+  } = e, {
+    boxStyles: u,
+    restProps: y
+  } = $(c), w = new Proxy(o || {}, S(s)), x = [P(w, "default", {}), {
+    flexDirection: i ? "row-reverse" : "row",
     flexWrap: l ? "wrap" : "nowrap",
-    alignItems: j(i),
-    justifyContent: R(n),
-    gap: P(a)
-  }, m, e ? {
-    flex: e
-  } : {}, c];
-  return /* @__PURE__ */ x("div", { css: w, ...u, ref: r });
+    alignItems: v(n),
+    justifyContent: j(a),
+    gap: R(f)
+  }, u, t ? {
+    flex: t
+  } : {}, p];
+  return /* @__PURE__ */ d(m, { css: x, ...y, ref: r });
 });
 export {
   A as RowStyled

package/constants/index.d.ts

@@ -1,3 +1,2 @@
-export * from './positioning';
 export * from './timers';
 export * from './keyboard';

package/hooks/index.d.ts

@@ -4,3 +4,4 @@ export * from './useAutoFocus';
 export * from './useMediaQuery';
 export * from './useKeyControls';
 export * from './useCarousel';
+export * from './useLogger';