gd-design-library 0.3.4 → 0.4.0

package/components/core/Portal/Portal.js

@@ -1 +1,19 @@
-"use client";"use strict";const n=require("@emotion/react/jsx-runtime"),c=require("react"),o=require("react-dom");require("../Breadcrumbs/Breadcrumbs.js");require("../Button/Button.js");require("../Dropdown/Dropdown.js");require("../Dropdown/hooks/useDropdown.js");require("../DropdownItem/DropdownItem.js");require("../Form/Form.js");require("../Icon/Icon.js");require("../Image/Image.js");require("../InlineNotification/InlineNotification.js");require("../Input/Input.js");require("../InputFile/InputFile.js");require("../Label/Label.js");require("../Link/Link.js");require("../List/List.js");require("../Loader/Loader.js");require("../Menu/Menu.js");require("../Modal/Modal.js");require("../Scroll/Scroll.js");require("../Select/Select.js");require("../Separator/Separator.js");require("../Skeleton/Skeleton.js");require("../Slider/SliderStyled.js");require("../Slider/Slider.js");require("../Snackbar/Snackbar.js");require("uuid");require("../../../hooks/useTheme/useTheme.js");require("../Snackbar/SnackbarStyled.js");require("../Snackbar/constants.js");require("../Switch/Switch.js");require("../Toggle/Toggle.js");require("../Tooltip/Tooltip.js");require("../Typography/Typography.js");const s=require("../Wrapper/Wrapper.js");require("../Textarea/Textarea.js");require("../../layout/FlexContainer/FlexContainer.js");require("../../layout/Column/Column.js");require("../../layout/Row/Row.js");require("../../layout/ChatContainer/ChatContainer.js");require("../../domainSpecific/Accordion/hooks/useAccordion.js");require("embla-carousel-react");require("../../domainSpecific/Avatar/Avatar.js");require("../../domainSpecific/Card/Card.js");require("../../domainSpecific/Carousel/Carousel.js");require("../../domainSpecific/ChatBubble/ChatBubble.js");require("../../domainSpecific/ContentCarousel/ContentCarousel.js");require("../../domainSpecific/Counter/Counter.js");require("../../domainSpecific/DragAndDropFiles/DragAndDropFiles.js");require("../../domainSpecific/Header/Header.js");require("../../domainSpecific/Price/Price.js");require("../../domainSpecific/ProgressBar/ProgressBar.js");require("../../domainSpecific/RadioGroup/RadioGroup.js");require("../../domainSpecific/Rating/Rating.js");require("../../domainSpecific/Search/Search.js");require("../../domainSpecific/SearchModal/SearchModal.js");require("../../domainSpecific/Stepper/Stepper.js");require("../../domainSpecific/Tabs/Tabs.js");require("../../widget/DragAndDrop/DragAndDrop.js");require("../../templates/SkeletonSearch/SkeletonSearch.js");const p=require("../../../types/wrapper.js"),l=c.forwardRef((e,i)=>{const{children:r,container:u,wrapperVariant:q=p.WrapperVariant.FullPage,withWrapper:t=!0,...a}=e;return o.createPortal(t?n.jsx(s,{ref:i,variant:q,...a,children:r}):r,u||document.body)});module.exports=l;
+"use client";
+import { jsx as m } from "@emotion/react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { createPortal as f } from "react-dom";
+import c from "../Wrapper/Wrapper.js";
+import { WrapperVariant as l } from "../../../types/wrapper.js";
+const W = n((t, o) => {
+  const {
+    children: r,
+    container: e,
+    wrapperVariant: a = l.FullPage,
+    withWrapper: p = !0,
+    ...i
+  } = t;
+  return f(p ? /* @__PURE__ */ m(c, { ref: o, variant: a, ...i, children: r }) : r, e || document.body);
+});
+export {
+  W as Portal
+};

package/components/core/Portal/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Portal } from './Portal';
+export * from './Portal';
 export * from './Portal.types';

package/components/core/Scroll/Scroll.js

@@ -1 +1,40 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@emotion/react/jsx-runtime"),r=require("react"),O=require("../../../hooks/useTheme/useTheme.js"),v=require("../../../utils/animationFrame.js"),c=require("./ScrollStyled.js"),m=require("./ScrollBar.js"),i=require("./constants.js"),w=r.forwardRef((N,n)=>{const[a,b]=r.useState(!1),[u,M]=r.useState(!1),e=r.useRef(null),{theme:o}=O.useTheme(),{vertical:g="auto",horizontal:d="auto",children:y,...j}=N,S=(l,s)=>l==="visible"?!0:l==="hidden"?!1:s;return v.useAnimationFrame(()=>{if(!e.current)return;const{clientHeight:l,scrollHeight:s,clientWidth:q,scrollWidth:x}=e.current,h=S(g,Math.ceil(l/s*100)<100),f=S(d,Math.ceil(q/x*100)<100);h!==a&&b(h),f!==u&&M(f)},300),r.useImperativeHandle(n,()=>e.current,[]),t.jsxs(c.ScrollStyled,{className:"gd-scroll",ref:e,theme:o,...j,"data-testid":i.COMPONENT_NAME,children:[t.jsxs(c.ScrollBarsStyled,{className:"gd-scroll--scrollbars",theme:o,"data-testid":`${i.COMPONENT_NAME}-scrollbars`,children:[a&&t.jsx(m.ScrollBar,{direction:"vertical",containerRef:e}),u&&t.jsx(m.ScrollBar,{direction:"horizontal",containerRef:e})]}),t.jsx(c.ScrollContentStyled,{ref:n,className:"gd-scroll--content",theme:o,style:d==="hidden"?{maxWidth:"100%"}:void 0,"data-testid":`${i.COMPONENT_NAME}-content`,children:y})]})});exports.Scroll=w;
+"use client";
+import { jsxs as f, jsx as o } from "@emotion/react/jsx-runtime";
+import { forwardRef as z, useState as u, useRef as x, useImperativeHandle as M } from "react";
+import { ScrollStyled as V, ScrollBarsStyled as W, ScrollContentStyled as j } from "./ScrollStyled.js";
+import { ScrollBar as S } from "./ScrollBar.js";
+import { COMPONENT_NAME as i } from "./constants.js";
+import { useTheme as A } from "../../../hooks/useTheme/useTheme.js";
+import { useAnimationFrame as B } from "../../../utils/animationFrame.js";
+const I = z((b, c) => {
+  const [s, p] = u(!1), [a, g] = u(!1), t = x(null), {
+    theme: e
+  } = A(), {
+    vertical: w = "auto",
+    horizontal: n = "auto",
+    children: H,
+    ...N
+  } = b, d = (r, l) => r === "visible" ? !0 : r === "hidden" ? !1 : l;
+  return B(() => {
+    if (!t.current)
+      return;
+    const {
+      clientHeight: r,
+      scrollHeight: l,
+      clientWidth: v,
+      scrollWidth: y
+    } = t.current, h = d(w, Math.ceil(r / l * 100) < 100), m = d(n, Math.ceil(v / y * 100) < 100);
+    h !== s && p(h), m !== a && g(m);
+  }, 300), M(c, () => t.current, []), /* @__PURE__ */ f(V, { className: "gd-scroll", ref: t, theme: e, ...N, "data-testid": i, children: [
+    /* @__PURE__ */ f(W, { className: "gd-scroll--scrollbars", theme: e, "data-testid": `${i}-scrollbars`, children: [
+      s && /* @__PURE__ */ o(S, { direction: "vertical", containerRef: t }),
+      a && /* @__PURE__ */ o(S, { direction: "horizontal", containerRef: t })
+    ] }),
+    /* @__PURE__ */ o(j, { ref: c, className: "gd-scroll--content", theme: e, style: n === "hidden" ? {
+      maxWidth: "100%"
+    } : void 0, "data-testid": `${i}-content`, children: H })
+  ] });
+});
+export {
+  I as Scroll
+};

package/components/core/Scroll/ScrollBar.js

@@ -1 +1,68 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("@emotion/react/jsx-runtime"),v=require("react"),A=require("../../../hooks/useTheme/useTheme.js"),x=require("../../../utils/animationFrame.js"),z=require("./utils.js"),i=require("./constants.js"),S=require("./ScrollStyled.js"),C=$=>{const{direction:o,containerRef:t}=$,s=v.useRef(null),{theme:u}=A.useTheme();return x.useAnimationFrame(()=>{const r=t!=null&&t.current?z.getThumbPosition(t.current,o):{position:0,size:0};s.current&&(o==="vertical"?(s.current.style.top=`${r.position}%`,s.current.style.height=`${r.size}%`):(s.current.style.left=`${r.position}%`,s.current.style.width=`${r.size}%`))},i.SCROLL_BAR_ANIMATION_THROTTLE),v.useEffect(()=>{const r=s.current;if(!r)return;let a=0,d=0;const _=({clientY:e},{top:n,height:c})=>(e-n)/c,N=({clientX:e},{left:n,width:c})=>(e-n)/c,O=(e,n,c)=>{const h=r.parentElement,l=t==null?void 0:t.current;if(!h||!l)return[0,0];const{offsetHeight:g,offsetWidth:b}=r,{top:y,left:P,height:T,width:E}=h.getBoundingClientRect(),q=l.scrollHeight-T,B=l.scrollWidth-E,M=(e.clientY-y-g*n)/(T-g),w=(e.clientX-P-b*c)/(E-b);return[q*M,B*w]},m=e=>{const[n,c]=O(e,a,d);t!=null&&t.current&&(o==="vertical"?t.current.scrollTop=n:t.current.scrollLeft=c)},f=()=>{document.removeEventListener("pointermove",m),document.removeEventListener("pointerup",f)},p=e=>{e.stopPropagation(),e.preventDefault();const n=r.getBoundingClientRect();a=_(e,n),d=N(e,n),document.addEventListener("pointermove",m),document.addEventListener("pointerup",f)};return r.addEventListener("pointerdown",p),()=>{r.removeEventListener("pointerdown",p)}},[t,s,o]),L.jsx(S.ScrollBarStyled,{className:`gd-scroll--scrollbar gd-scroll--scrollbar__${o}`,$direction:o,theme:u,"data-testid":`${i.COMPONENT_NAME}-scrollbar_${o}`,children:L.jsx(S.ScrollBarThumbStyled,{className:`gd-scroll--scrollbar-thumb gd-scroll--scrollbar-thumb__${o}`,ref:s,$direction:o,theme:u,"data-testid":`${i.COMPONENT_NAME}-scrollbar-thumb_${o}`})})};exports.ScrollBar=C;
+"use client";
+import { jsx as T } from "@emotion/react/jsx-runtime";
+import { useRef as z, useEffect as A } from "react";
+import { getThumbPosition as H } from "./utils.js";
+import { SCROLL_BAR_ANIMATION_THROTTLE as x, COMPONENT_NAME as $ } from "./constants.js";
+import { ScrollBarStyled as C, ScrollBarThumbStyled as M } from "./ScrollStyled.js";
+import { useTheme as D } from "../../../hooks/useTheme/useTheme.js";
+import { useAnimationFrame as I } from "../../../utils/animationFrame.js";
+const Y = (v) => {
+  const {
+    direction: o,
+    containerRef: t
+  } = v, s = z(null), {
+    theme: i
+  } = D();
+  return I(() => {
+    const r = t != null && t.current ? H(t.current, o) : {
+      position: 0,
+      size: 0
+    };
+    s.current && (o === "vertical" ? (s.current.style.top = `${r.position}%`, s.current.style.height = `${r.size}%`) : (s.current.style.left = `${r.position}%`, s.current.style.width = `${r.size}%`));
+  }, x), A(() => {
+    const r = s.current;
+    if (!r)
+      return;
+    let u = 0, m = 0;
+    const E = ({
+      clientY: e
+    }, {
+      top: n,
+      height: l
+    }) => (e - n) / l, _ = ({
+      clientX: e
+    }, {
+      left: n,
+      width: l
+    }) => (e - n) / l, N = (e, n, l) => {
+      const a = r.parentElement, c = t == null ? void 0 : t.current;
+      if (!a || !c)
+        return [0, 0];
+      const {
+        offsetHeight: h,
+        offsetWidth: g
+      } = r, {
+        top: O,
+        left: S,
+        height: b,
+        width: L
+      } = a.getBoundingClientRect(), w = c.scrollHeight - b, y = c.scrollWidth - L, B = (e.clientY - O - h * n) / (b - h), P = (e.clientX - S - g * l) / (L - g);
+      return [w * B, y * P];
+    }, d = (e) => {
+      const [n, l] = N(e, u, m);
+      t != null && t.current && (o === "vertical" ? t.current.scrollTop = n : t.current.scrollLeft = l);
+    }, p = () => {
+      document.removeEventListener("pointermove", d), document.removeEventListener("pointerup", p);
+    }, f = (e) => {
+      e.stopPropagation(), e.preventDefault();
+      const n = r.getBoundingClientRect();
+      u = E(e, n), m = _(e, n), document.addEventListener("pointermove", d), document.addEventListener("pointerup", p);
+    };
+    return r.addEventListener("pointerdown", f), () => {
+      r.removeEventListener("pointerdown", f);
+    };
+  }, [t, s, o]), /* @__PURE__ */ T(C, { className: `gd-scroll--scrollbar gd-scroll--scrollbar__${o}`, $direction: o, theme: i, "data-testid": `${$}-scrollbar_${o}`, children: /* @__PURE__ */ T(M, { className: `gd-scroll--scrollbar-thumb gd-scroll--scrollbar-thumb__${o}`, ref: s, $direction: o, theme: i, "data-testid": `${$}-scrollbar-thumb_${o}` }) });
+};
+export {
+  Y as ScrollBar
+};

package/components/core/Scroll/ScrollStyled.js

@@ -1 +1,56 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("@emotion/react/jsx-runtime"),d=require("react"),o=require("../../../utils/helpers.js"),u=d.forwardRef((r,s)=>{const{theme:{scroll:t}={},styles:e={},...l}=r,c=[o.get(t,"container.default",{}),e];return n.jsx("div",{css:c,...l,ref:s})}),S=d.forwardRef((r,s)=>{const{theme:{scroll:t}={},styles:e={},...l}=r,c=[o.get(t,"content.default",{}),e];return n.jsx("div",{css:c,...l,ref:s})}),a=r=>{const{theme:{scroll:s}={},...t}=r,e=o.get(s,"scrollbars.default",{});return n.jsx("div",{css:e,...t})},y=r=>{const{$direction:s,theme:{scroll:t}={},...e}=r,l=[o.get(t,"scrollbar.default",{}),o.get(t,`scrollbar.${s}`,{})];return n.jsx("div",{css:l,...e})},i=d.forwardRef((r,s)=>{const{$direction:t,theme:{scroll:e}={},...l}=r,c=[o.get(e,"thumb.default",{}),o.get(e,`thumb.${t}`,{})];return n.jsx("div",{css:c,...l,ref:s})});exports.ScrollBarStyled=y;exports.ScrollBarThumbStyled=i;exports.ScrollBarsStyled=a;exports.ScrollContentStyled=S;exports.ScrollStyled=u;
+"use client";
+import { jsx as n } from "@emotion/react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { get as l } from "../../../utils/helpers.js";
+const i = d((e, r) => {
+  const {
+    theme: {
+      scroll: t
+    } = {},
+    styles: s = {},
+    ...o
+  } = e, c = [l(t, "container.default", {}), s];
+  return /* @__PURE__ */ n("div", { css: c, ...o, ref: r });
+}), p = d((e, r) => {
+  const {
+    theme: {
+      scroll: t
+    } = {},
+    styles: s = {},
+    ...o
+  } = e, c = [l(t, "content.default", {}), s];
+  return /* @__PURE__ */ n("div", { css: c, ...o, ref: r });
+}), a = (e) => {
+  const {
+    theme: {
+      scroll: r
+    } = {},
+    ...t
+  } = e, s = l(r, "scrollbars.default", {});
+  return /* @__PURE__ */ n("div", { css: s, ...t });
+}, f = (e) => {
+  const {
+    $direction: r,
+    theme: {
+      scroll: t
+    } = {},
+    ...s
+  } = e, o = [l(t, "scrollbar.default", {}), l(t, `scrollbar.${r}`, {})];
+  return /* @__PURE__ */ n("div", { css: o, ...s });
+}, y = d((e, r) => {
+  const {
+    $direction: t,
+    theme: {
+      scroll: s
+    } = {},
+    ...o
+  } = e, c = [l(s, "thumb.default", {}), l(s, `thumb.${t}`, {})];
+  return /* @__PURE__ */ n("div", { css: c, ...o, ref: r });
+});
+export {
+  f as ScrollBarStyled,
+  y as ScrollBarThumbStyled,
+  a as ScrollBarsStyled,
+  p as ScrollContentStyled,
+  i as ScrollStyled
+};

package/components/core/Scroll/constants.js

@@ -1 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T="Scroll",N=24,O=50;exports.COMPONENT_NAME=T;exports.MIN_WIDTH=N;exports.SCROLL_BAR_ANIMATION_THROTTLE=O;
+const N = "Scroll", T = 24, o = 50;
+export {
+  N as COMPONENT_NAME,
+  T as MIN_WIDTH,
+  o as SCROLL_BAR_ANIMATION_THROTTLE
+};

package/components/core/Scroll/utils.js

@@ -1 +1,41 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./constants.js");function H(e){const{clientHeight:t,scrollHeight:i}=e;return t*t/i>o.MIN_WIDTH?0:o.MIN_WIDTH/t}function W(e){const{clientWidth:t,scrollWidth:i}=e;return t*t/i>o.MIN_WIDTH?0:o.MIN_WIDTH/t}function d(e,t){const{clientHeight:i,scrollHeight:c,clientWidth:l,scrollWidth:n}=e,s=t==="vertical"?i/c:l/n;return Math.ceil(s*100)/100}const a=(e,t)=>{const{scrollTop:i,scrollHeight:c,clientHeight:l,scrollLeft:n,scrollWidth:s,clientWidth:h}=e,u=t==="vertical"?i/(c-l):n/(s-h),r=d(e,t),g=(t==="vertical"?H(e):W(e))||r;return{position:u*(1-g)*100,size:r*100}};exports.getThumbPosition=a;
+import { MIN_WIDTH as c } from "./constants.js";
+function m(e) {
+  const {
+    clientHeight: t,
+    scrollHeight: i
+  } = e;
+  return t * t / i > c ? 0 : c / t;
+}
+function H(e) {
+  const {
+    clientWidth: t,
+    scrollWidth: i
+  } = e;
+  return t * t / i > c ? 0 : c / t;
+}
+function d(e, t) {
+  const {
+    clientHeight: i,
+    scrollHeight: o,
+    clientWidth: l,
+    scrollWidth: n
+  } = e, r = t === "vertical" ? i / o : l / n;
+  return Math.ceil(r * 100) / 100;
+}
+const W = (e, t) => {
+  const {
+    scrollTop: i,
+    scrollHeight: o,
+    clientHeight: l,
+    scrollLeft: n,
+    scrollWidth: r,
+    clientWidth: h
+  } = e, u = t === "vertical" ? i / (o - l) : n / (r - h), s = d(e, t), g = (t === "vertical" ? m(e) : H(e)) || s;
+  return {
+    position: u * (1 - g) * 100,
+    size: s * 100
+  };
+};
+export {
+  W as getThumbPosition
+};

package/components/core/Select/Select.js

@@ -1 +1,145 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@emotion/react/jsx-runtime"),c=require("react"),R=require("../../../utils/focus.js"),x=require("../../../utils/helpers.js"),p=require("../../../constants/keyboard.js"),J=require("../../../hooks/useTheme/useTheme.js"),Q=require("../../../hooks/useClickOutside/useClickOutside.js"),X=require("../DropdownItem/DropdownItem.js"),Z=require("../Dropdown/Dropdown.js"),ee=require("../../layout/FlexContainer/utils.js"),m=require("./constants.js"),te=require("./hooks/useSelectContext.js"),l=require("./SelectStyled.js"),b=c.forwardRef((I,q)=>{const{onSelect:S,children:y,initiator:T,onInitiatorClick:w,renderOption:v,dropdownParams:M,renderDropdownHeader:O,emptyItemsResult:Y,autoOpen:P=!0,width:W=ee.calculateMaxWidth(),styles:B,activeIndex:A,value:h,onChange:D,itemStringifier:$=e=>String(e),itemIdentifier:L=(e,t)=>e===t,disabled:n=!1,items:d,adornmentStart:k,adornmentEnd:C}=I,{theme:s}=J.useTheme(),o=c.useRef(null),K=c.useRef(null),[f,i]=c.useState(!1),[N,_]=c.useState(h);c.useEffect(()=>{_(h)},[h]),Q.useClickOutside(o,()=>i(!1));const g=()=>{if(o.current&&!n){const e=R.getClosestFocusable({initial:o.current,root:o.current,keyboard:!0});e==null||e.focus()}};c.useEffect(()=>{const e=t=>{var a;if(!(!f||n)){if(t.key===p.KEYBOARD_KEYS.ESCAPE)t.preventDefault(),i(!1),g();else if(t.key===p.KEYBOARD_KEYS.TAB&&(t.preventDefault(),i(!1),o.current)){const E=document.createElement("div");(a=o.current.parentNode)==null||a.insertBefore(E,o.current.nextSibling);const u=R.getClosestFocusable({initial:E,root:document.body,keyboard:!0});E.remove(),u==null||u.focus()}}};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[f,n]),c.useImperativeHandle(q,()=>({ref:o,isOpen:f,open:()=>{n||i(!0)},close:()=>i(!1),toggle:()=>{n||i(e=>!e)}}));const F=()=>d!=null&&d.length?G():r.jsx(r.Fragment,{children:Y}),V={onSelect:(e,t)=>{n||(e.preventDefault(),_(t),D==null||D(t),S==null||S({event:e,value:t}),i(!1),setTimeout(()=>{g()}))},value:N,itemIdentifier:L},U=e=>{if(!(n||![p.KEYBOARD_KEYS.ARROW_DOWN,p.KEYBOARD_KEYS.ARROW_UP].includes(e.key)))switch(e.preventDefault(),e.key){case p.KEYBOARD_KEYS.ARROW_DOWN:j(e,!1);break;case p.KEYBOARD_KEYS.ARROW_UP:j(e,!0);break}},j=(e,t)=>{if(n)return;e.preventDefault();const a=K.current;if(!a){i(!0);return}const E=t?a.appendChild(document.createElement("div")):a,u=R.getClosestFocusable({initial:E,previous:t,root:a});u==null||u.focus()},H=()=>{!n&&P&&i(!f)},z=e=>{n||(w?w(e):H())},G=()=>r.jsxs(r.Fragment,{children:[O==null?void 0:O(s,M),d==null?void 0:d.map((e,t)=>v?v({item:e,index:t,isActiveItem:A==t,className:x.toNumber(A)===t?"active":""}):r.jsx(X.DropdownItem,{theme:s,value:e.value,name:e.name,customClass:`${x.toNumber(A)===t?"active":""}`,children:e.name},`dropdown-item-${e.value}-${t}`))]});return r.jsx(te.SelectContext.Provider,{value:V,children:r.jsxs(l.SelectWrapperStyled,{ref:o,theme:s,"data-testid":m.COMPONENT_NAME,styles:B,$disabled:n,children:[r.jsx(l.InitiatorWrapperStyled,{theme:s,onClick:z,onKeyDown:U,width:W,"data-testid":`${m.COMPONENT_NAME}-initiator-wrapper`,children:T??r.jsx(l.DropdownButtonStyled,{theme:s,disabled:n,iconStart:k&&r.jsx(l.SelectAdornmentStyled,{theme:s,children:k}),iconEnd:r.jsxs(l.SelectAdornmentStyled,{theme:s,children:[C&&r.jsx(l.SelectAdornmentStyled,{theme:s,children:C}),r.jsx(l.ArrowIconWrapperStyled,{theme:s,$isOpen:f,children:r.jsx(l.DropdownIconStyled,{theme:s})})]}),"data-testid":`${m.COMPONENT_NAME}-initiator`,children:N?$(N):r.jsx("span",{children:m.DEFAULT_SELECTED_VALUE})})}),f&&!n&&r.jsx(Z.Dropdown,{"data-testid":`${m.COMPONENT_NAME}-dropdown`,ref:K,children:Array.isArray(y)||c.isValidElement(y)?y:F()})]})})});b.displayName=m.COMPONENT_NAME;exports.Select=b;
+"use client";
+import { jsx as n, jsxs as D, Fragment as _ } from "@emotion/react/jsx-runtime";
+import { forwardRef as Z, useRef as $, useState as K, useEffect as L, useImperativeHandle as ee, isValidElement as te } from "react";
+import { KEYBOARD_KEYS as u } from "../../../constants/keyboard.js";
+import { DropdownItem as re } from "../DropdownItem/DropdownItem.js";
+import { Dropdown as ne } from "../Dropdown/Dropdown.js";
+import { calculateMaxWidth as oe } from "../../layout/FlexContainer/utils.js";
+import { COMPONENT_NAME as f, DEFAULT_SELECTED_VALUE as ie } from "./constants.js";
+import { SelectWrapperStyled as le, InitiatorWrapperStyled as se, DropdownButtonStyled as ae, SelectAdornmentStyled as A, ArrowIconWrapperStyled as ce, DropdownIconStyled as de } from "./SelectStyled.js";
+import { useClickOutside as ue } from "../../../hooks/useClickOutside/useClickOutside.js";
+import { getClosestFocusable as O } from "../../../utils/focus.js";
+import { toNumber as T } from "../../../utils/helpers.js";
+import { useTheme as me } from "../../../hooks/useTheme/useTheme.js";
+import { SelectContext as fe } from "./hooks/useSelectContext.js";
+const pe = Z((P, V) => {
+  const {
+    onSelect: p,
+    children: y,
+    initiator: B,
+    onInitiatorClick: R,
+    renderOption: k,
+    dropdownParams: U,
+    renderDropdownHeader: h,
+    emptyItemsResult: x,
+    autoOpen: M = !0,
+    width: j = oe(),
+    styles: F,
+    activeIndex: E,
+    value: S,
+    onChange: w,
+    itemStringifier: H = (e) => String(e),
+    itemIdentifier: Y = (e, t) => e === t,
+    disabled: r = !1,
+    items: c,
+    adornmentStart: I,
+    adornmentEnd: g
+  } = P, {
+    theme: o
+  } = me(), i = $(null), N = $(null), [d, l] = K(!1), [v, W] = K(S);
+  L(() => {
+    W(S);
+  }, [S]), ue(i, () => l(!1));
+  const b = () => {
+    if (i.current && !r) {
+      const e = O({
+        initial: i.current,
+        root: i.current,
+        keyboard: !0
+      });
+      e == null || e.focus();
+    }
+  };
+  L(() => {
+    const e = (t) => {
+      var s;
+      if (!(!d || r)) {
+        if (t.key === u.ESCAPE)
+          t.preventDefault(), l(!1), b();
+        else if (t.key === u.TAB && (t.preventDefault(), l(!1), i.current)) {
+          const m = document.createElement("div");
+          (s = i.current.parentNode) == null || s.insertBefore(m, i.current.nextSibling);
+          const a = O({
+            initial: m,
+            root: document.body,
+            keyboard: !0
+          });
+          m.remove(), a == null || a.focus();
+        }
+      }
+    };
+    return document.addEventListener("keydown", e), () => {
+      document.removeEventListener("keydown", e);
+    };
+  }, [d, r]), ee(V, () => ({
+    ref: i,
+    isOpen: d,
+    open: () => {
+      r || l(!0);
+    },
+    close: () => l(!1),
+    toggle: () => {
+      r || l((e) => !e);
+    }
+  }));
+  const q = () => c != null && c.length ? X() : /* @__PURE__ */ n(_, { children: x }), z = {
+    onSelect: (e, t) => {
+      r || (e.preventDefault(), W(t), w == null || w(t), p == null || p({
+        event: e,
+        value: t
+      }), l(!1), setTimeout(() => {
+        b();
+      }));
+    },
+    value: v,
+    itemIdentifier: Y
+  }, G = (e) => {
+    if (!(r || ![u.ARROW_DOWN, u.ARROW_UP].includes(e.key)))
+      switch (e.preventDefault(), e.key) {
+        case u.ARROW_DOWN:
+          C(e, !1);
+          break;
+        case u.ARROW_UP:
+          C(e, !0);
+          break;
+      }
+  }, C = (e, t) => {
+    if (r)
+      return;
+    e.preventDefault();
+    const s = N.current;
+    if (!s) {
+      l(!0);
+      return;
+    }
+    const m = t ? s.appendChild(document.createElement("div")) : s, a = O({
+      initial: m,
+      previous: t,
+      root: s
+    });
+    a == null || a.focus();
+  }, J = () => {
+    !r && M && l(!d);
+  }, Q = (e) => {
+    r || (R ? R(e) : J());
+  }, X = () => /* @__PURE__ */ D(_, { children: [
+    h == null ? void 0 : h(o, U),
+    c == null ? void 0 : c.map((e, t) => k ? k({
+      item: e,
+      index: t,
+      isActiveItem: E == t,
+      className: T(E) === t ? "active" : ""
+    }) : /* @__PURE__ */ n(re, { theme: o, value: e.value, name: e.name, customClass: `${T(E) === t ? "active" : ""}`, children: e.name }, `dropdown-item-${e.value}-${t}`))
+  ] });
+  return /* @__PURE__ */ n(fe.Provider, { value: z, children: /* @__PURE__ */ D(le, { ref: i, theme: o, "data-testid": f, styles: F, $disabled: r, children: [
+    /* @__PURE__ */ n(se, { theme: o, onClick: Q, onKeyDown: G, width: j, "data-testid": `${f}-initiator-wrapper`, children: B ?? /* @__PURE__ */ n(ae, { theme: o, disabled: r, iconStart: I && /* @__PURE__ */ n(A, { theme: o, children: I }), iconEnd: /* @__PURE__ */ D(A, { theme: o, children: [
+      g && /* @__PURE__ */ n(A, { theme: o, children: g }),
+      /* @__PURE__ */ n(ce, { theme: o, $isOpen: d, children: /* @__PURE__ */ n(de, { theme: o }) })
+    ] }), "data-testid": `${f}-initiator`, children: v ? H(v) : /* @__PURE__ */ n("span", { children: ie }) }) }),
+    d && !r && /* @__PURE__ */ n(ne, { "data-testid": `${f}-dropdown`, ref: N, children: Array.isArray(y) || te(y) ? y : q() })
+  ] }) });
+});
+pe.displayName = f;
+export {
+  pe as Select
+};

package/components/core/Select/SelectStyled.js

@@ -1 +1,70 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("@emotion/react/jsx-runtime"),q=require("react"),u=require("../../../utils/helpers.js");require("../Breadcrumbs/Breadcrumbs.js");const c=require("../Button/Button.js");require("../Dropdown/Dropdown.js");require("../Dropdown/hooks/useDropdown.js");require("../DropdownItem/DropdownItem.js");require("../Form/Form.js");const d=require("../Icon/Icon.js");require("../Image/Image.js");require("../InlineNotification/InlineNotification.js");require("../Input/Input.js");require("../InputFile/InputFile.js");require("../Label/Label.js");require("../Link/Link.js");require("../List/List.js");require("../Loader/Loader.js");require("../Menu/Menu.js");require("../Modal/Modal.js");require("../Portal/Portal.js");require("../Scroll/Scroll.js");require("./Select.js");require("../Separator/Separator.js");require("../Skeleton/Skeleton.js");require("../Slider/SliderStyled.js");require("../Slider/Slider.js");require("../Snackbar/Snackbar.js");require("uuid");require("../../../hooks/useTheme/useTheme.js");require("../Snackbar/SnackbarStyled.js");require("../Snackbar/constants.js");require("../Switch/Switch.js");require("../Toggle/Toggle.js");require("../Tooltip/Tooltip.js");require("../Typography/Typography.js");require("../Wrapper/Wrapper.js");require("../Textarea/Textarea.js");require("../../layout/FlexContainer/FlexContainer.js");require("../../layout/Column/Column.js");require("../../layout/Row/Row.js");require("../../layout/ChatContainer/ChatContainer.js");require("../../domainSpecific/Accordion/hooks/useAccordion.js");require("embla-carousel-react");require("../../domainSpecific/Avatar/Avatar.js");require("../../domainSpecific/Card/Card.js");require("../../domainSpecific/Carousel/Carousel.js");require("../../domainSpecific/ChatBubble/ChatBubble.js");require("../../domainSpecific/ContentCarousel/ContentCarousel.js");require("../../domainSpecific/Counter/Counter.js");require("../../domainSpecific/DragAndDropFiles/DragAndDropFiles.js");require("../../domainSpecific/Header/Header.js");require("../../domainSpecific/Price/Price.js");require("../../domainSpecific/ProgressBar/ProgressBar.js");require("../../domainSpecific/RadioGroup/RadioGroup.js");require("../../domainSpecific/Rating/Rating.js");require("../../domainSpecific/Search/Search.js");require("../../domainSpecific/SearchModal/SearchModal.js");require("../../domainSpecific/Stepper/Stepper.js");require("../../domainSpecific/Tabs/Tabs.js");require("../../widget/DragAndDrop/DragAndDrop.js");require("../../templates/SkeletonSearch/SkeletonSearch.js");const l=q.forwardRef((r,e)=>{const{theme:{select:t}={},styles:o={},$disabled:s,...n}=r;return i.jsx("div",{css:[u.get(t,"default",{}),s?u.get(t,"disabled",{}):{},o],...n,ref:e})}),a=r=>{const{theme:{select:e}={},width:t,...o}=r;return i.jsx("div",{css:[u.get(e,"initiatorWrapper",{}),t?{width:t}:{}],...o})},p=r=>{const{theme:{select:e}={},$isOpen:t,...o}=r;return i.jsx("div",{css:[u.get(e,"arrowIconWrapper.default",{}),t?u.get(e,"arrowIconWrapper.transform.open",{}):u.get(e,"arrowIconWrapper.transform.close",{})],...o})},S=r=>{const{theme:{select:e}={}}=r;return i.jsx(d.Icon,{...u.get(e,"arrowIcon",{name:"arrowDown"})})},y=r=>{const{theme:{select:e}={},...t}=r;return i.jsx(c.Button,{css:[u.get(e,"button.default",{})],...u.get(e,"button.attrs",{}),...t})},m=r=>{const{theme:{select:e}={},...t}=r;return i.jsx("div",{css:[u.get(e,"adornment.default",{})],...t})};exports.ArrowIconWrapperStyled=p;exports.DropdownButtonStyled=y;exports.DropdownIconStyled=S;exports.InitiatorWrapperStyled=a;exports.SelectAdornmentStyled=m;exports.SelectWrapperStyled=l;
+"use client";
+import { jsx as s } from "@emotion/react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { get as o } from "../../../utils/helpers.js";
+import { Button as d } from "../Button/Button.js";
+import { Icon as l } from "../Icon/Icon.js";
+const I = a((r, t) => {
+  const {
+    theme: {
+      select: e
+    } = {},
+    styles: n = {},
+    $disabled: c,
+    ...p
+  } = r;
+  return /* @__PURE__ */ s("div", { css: [o(e, "default", {}), c ? o(e, "disabled", {}) : {}, n], ...p, ref: t });
+}), S = (r) => {
+  const {
+    theme: {
+      select: t
+    } = {},
+    width: e,
+    ...n
+  } = r;
+  return /* @__PURE__ */ s("div", { css: [o(t, "initiatorWrapper", {}), e ? {
+    width: e
+  } : {}], ...n });
+}, h = (r) => {
+  const {
+    theme: {
+      select: t
+    } = {},
+    $isOpen: e,
+    ...n
+  } = r;
+  return /* @__PURE__ */ s("div", { css: [o(t, "arrowIconWrapper.default", {}), e ? o(t, "arrowIconWrapper.transform.open", {}) : o(t, "arrowIconWrapper.transform.close", {})], ...n });
+}, y = (r) => {
+  const {
+    theme: {
+      select: t
+    } = {}
+  } = r;
+  return /* @__PURE__ */ s(l, { ...o(t, "arrowIcon", {
+    name: "arrowDown"
+  }) });
+}, W = (r) => {
+  const {
+    theme: {
+      select: t
+    } = {},
+    ...e
+  } = r;
+  return /* @__PURE__ */ s(d, { css: [o(t, "button.default", {})], ...o(t, "button.attrs", {}), ...e });
+}, P = (r) => {
+  const {
+    theme: {
+      select: t
+    } = {},
+    ...e
+  } = r;
+  return /* @__PURE__ */ s("div", { css: [o(t, "adornment.default", {})], ...e });
+};
+export {
+  h as ArrowIconWrapperStyled,
+  W as DropdownButtonStyled,
+  y as DropdownIconStyled,
+  S as InitiatorWrapperStyled,
+  P as SelectAdornmentStyled,
+  I as SelectWrapperStyled
+};

package/components/core/Select/constants.js

@@ -1 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E="Select",e="Select";exports.COMPONENT_NAME=E;exports.DEFAULT_SELECTED_VALUE=e;
+const E = "Select", e = "Select";
+export {
+  E as COMPONENT_NAME,
+  e as DEFAULT_SELECTED_VALUE
+};

package/components/core/Select/hooks/useSelectContext.js

@@ -1 +1,12 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),o=t.createContext(void 0),n=()=>{const e=t.useContext(o);if(!e)throw new Error("useSelectContext must be used within a Select component or children");return e};exports.SelectContext=o;exports.useSelectContext=n;
+"use client";
+import { createContext as t, useContext as o } from "react";
+const n = t(void 0), r = () => {
+  const e = o(n);
+  if (!e)
+    throw new Error("useSelectContext must be used within a Select component or children");
+  return e;
+};
+export {
+  n as SelectContext,
+  r as useSelectContext
+};

package/components/core/Separator/Separator.js

@@ -1 +1,36 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@emotion/react/jsx-runtime"),x=require("react"),m=require("../../../hooks/useTheme/useTheme.js"),n=require("../../../types/separator.js"),b=require("./constants.js"),t=require("./SeparatorStyled.js"),p=x.forwardRef(($,h)=>{const{styles:u={},label:o,labelPosition:s=n.SeparatorLabelPosition.Center,size:a,variant:S,orientation:l,length:L,color:d,labelColor:i,...y}=$,{theme:r}=m.useTheme(),c=!!o,j=c&&s===n.SeparatorLabelPosition.Start,C=c&&s===n.SeparatorLabelPosition.Center,P=c&&s===n.SeparatorLabelPosition.End;return e.jsxs(t.SeparatorWrapperStyled,{theme:r,styles:u,ref:h,"data-testid":b.COMPONENT_NAME,$orientation:l,$length:L,...y,children:[j&&e.jsx(t.SeparatorLabelStyled,{theme:r,$size:a,$labelColor:i,children:o}),e.jsx(t.SeparatorLineStyled,{theme:r,$color:d,$size:a,$variant:S,$orientation:l}),C&&e.jsxs(e.Fragment,{children:[e.jsx(t.SeparatorLabelStyled,{theme:r,$size:a,$labelColor:i,children:o}),e.jsx(t.SeparatorLineStyled,{theme:r,$color:d,$size:a,$variant:S,$orientation:l})]}),P&&e.jsx(t.SeparatorLabelStyled,{theme:r,$size:a,$labelColor:i,children:o})]})});p.displayName=b.COMPONENT_NAME;exports.Separator=p;
+"use client";
+import { jsxs as $, jsx as t, Fragment as N } from "@emotion/react/jsx-runtime";
+import { forwardRef as P } from "react";
+import { COMPONENT_NAME as h } from "./constants.js";
+import { SeparatorWrapperStyled as g, SeparatorLabelStyled as c, SeparatorLineStyled as d } from "./SeparatorStyled.js";
+import { SeparatorLabelPosition as a } from "../../../types/separator.js";
+import { useTheme as u } from "../../../hooks/useTheme/useTheme.js";
+const v = P((b, S) => {
+  const {
+    styles: f = {},
+    label: o,
+    labelPosition: l = a.Center,
+    size: r,
+    variant: m,
+    orientation: i,
+    length: C,
+    color: p,
+    labelColor: n,
+    ...L
+  } = b, {
+    theme: e
+  } = u(), s = !!o, z = s && l === a.Start, y = s && l === a.Center, E = s && l === a.End;
+  return /* @__PURE__ */ $(g, { theme: e, styles: f, ref: S, "data-testid": h, $orientation: i, $length: C, ...L, children: [
+    z && /* @__PURE__ */ t(c, { theme: e, $size: r, $labelColor: n, children: o }),
+    /* @__PURE__ */ t(d, { theme: e, $color: p, $size: r, $variant: m, $orientation: i }),
+    y && /* @__PURE__ */ $(N, { children: [
+      /* @__PURE__ */ t(c, { theme: e, $size: r, $labelColor: n, children: o }),
+      /* @__PURE__ */ t(d, { theme: e, $color: p, $size: r, $variant: m, $orientation: i })
+    ] }),
+    E && /* @__PURE__ */ t(c, { theme: e, $size: r, $labelColor: n, children: o })
+  ] });
+});
+v.displayName = h;
+export {
+  v as Separator
+};

package/components/core/Separator/SeparatorStyled.js

@@ -1 +1,61 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("@emotion/react/jsx-runtime"),f=require("react"),e=require("../../../utils/helpers.js");require("../../../tokens/separator.js");require("../../../tokens/draganddrop.js");require("../../../tokens/avatar.js");require("../../../tokens/chatbubble.js");require("../../../tokens/radiogroup.js");require("../../../tokens/searchModal.js");require("../../../tokens/carousel.js");require("../../../tokens/progressbar.js");require("../../../tokens/card.js");require("../../../tokens/counter.js");require("../../../tokens/font.js");require("../../../tokens/spacing.js");require("../../../tokens/radius.js");require("../../../tokens/typography.js");require("../../../tokens/borders.js");require("../../../tokens/button.js");require("../../../tokens/input.js");require("../../../tokens/label.js");require("../../../tokens/link.js");require("../../../tokens/wrapper.js");require("../../../tokens/loader.js");require("../../../tokens/toggle.js");require("../../../tokens/skeleton.js");require("../../../tokens/snackbar.js");require("../../../tokens/list.js");require("../../../tokens/select.js");require("../../../tokens/search.js");require("../../../tokens/breadcrumbs.js");require("../../../tokens/icon.js");;/* empty css                         */require("../../../tokens/tabs.js");require("../../../tokens/stepper.js");require("../../../tokens/rating.js");require("../../../tokens/header.js");require("../../../tokens/switch.js");require("../../../tokens/chat.js");require("../../../tokens/slider.js");require("../../../tokens/menu.js");require("../../../tokens/scroll.js");require("../../../tokens/values.js");require("../../../tokens/flexContainer.js");require("../../../tokens/tooltip.js");require("../../../tokens/modal.js");require("../../../tokens/image.js");require("../../../tokens/price.js");require("../../../tokens/accordion.js");require("../../../tokens/inlineNotification.js");const x=require("../../../tokens/utils.js"),q=require("../../../types/common.js"),j=require("../../../types/separator.js"),L=require("../Typography/TypographyStyled.js"),O=f.forwardRef((a,t)=>{const{theme:{separator:i}={},styles:r={},$orientation:o=q.Orientation.Horizontal,$length:s,...u}=a,l={[o===q.Orientation.Horizontal?"width":"height"]:s},{boxStyles:c,restProps:p}=x.getBoxStyles(u),d=[e.get(i,"default",{}),e.get(i,o,{}),s?l:{},c,r];return S.jsx("div",{css:d,...p,ref:t})}),H=a=>{var y,g;const{theme:{separator:t,colors:i,values:r}={},styles:o={},$as:s="div",$orientation:u=q.Orientation.Horizontal,$color:n=e.get(i,"border.default",""),$size:l=q.SizeVariant.Sm,$variant:c=j.SeparatorVariant.Solid,...p}=a,d=e.get(r,`separator.thickness.${l}`,(g=(y=r==null?void 0:r.separator)==null?void 0:y.thickness)==null?void 0:g.sm),$=e.get(i,n,n),b=`${d} ${c} ${$}`,h=u===q.Orientation.Horizontal?"borderTop":"borderLeft",m={...e.get(t,`line.${u}`,{}),[h]:b},z=[e.get(t,"line.default",{}),m,o];return S.jsx(s,{css:z,...p})},T=a=>{const{theme:{separator:t,colors:i}={},$labelColor:r=e.get(i,"text.caption"),$size:o,children:s}=a,u=e.get(t,"label.default",{}),n=e.get(t,`label.attrs.${o}`,{});return S.jsx(L.TypographyStyled,{css:u,...n,$color:r,children:s})};exports.SeparatorLabelStyled=T;exports.SeparatorLineStyled=H;exports.SeparatorWrapperStyled=O;
+"use client";
+import { jsx as y } from "@emotion/react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { TypographyStyled as H } from "../Typography/TypographyStyled.js";
+import { SeparatorVariant as L } from "../../../types/separator.js";
+import { Orientation as c, SizeVariant as V } from "../../../types/common.js";
+import { getBoxStyles as k } from "../../../tokens/utils.js";
+import { get as t } from "../../../utils/helpers.js";
+const B = x((i, e) => {
+  const {
+    theme: {
+      separator: r
+    } = {},
+    styles: o = {},
+    $orientation: s = c.Horizontal,
+    $length: a,
+    ...n
+  } = i, p = {
+    [s === c.Horizontal ? "width" : "height"]: a
+  }, {
+    boxStyles: d,
+    restProps: m
+  } = k(n), S = [t(r, "default", {}), t(r, s, {}), a ? p : {}, d, o];
+  return /* @__PURE__ */ y("div", { css: S, ...m, ref: e });
+}), O = (i) => {
+  var $, f;
+  const {
+    theme: {
+      separator: e,
+      colors: r,
+      values: o
+    } = {},
+    styles: s = {},
+    $as: a = "div",
+    $orientation: n = c.Horizontal,
+    $color: l = t(r, "border.default", ""),
+    $size: p = V.Sm,
+    $variant: d = L.Solid,
+    ...m
+  } = i, S = t(o, `separator.thickness.${p}`, (f = ($ = o == null ? void 0 : o.separator) == null ? void 0 : $.thickness) == null ? void 0 : f.sm), b = t(r, l, l), u = `${S} ${d} ${b}`, h = n === c.Horizontal ? "borderTop" : "borderLeft", z = {
+    ...t(e, `line.${n}`, {}),
+    [h]: u
+  }, g = [t(e, "line.default", {}), z, s];
+  return /* @__PURE__ */ y(a, { css: g, ...m });
+}, R = (i) => {
+  const {
+    theme: {
+      separator: e,
+      colors: r
+    } = {},
+    $labelColor: o = t(r, "text.caption"),
+    $size: s,
+    children: a
+  } = i, n = t(e, "label.default", {}), l = t(e, `label.attrs.${s}`, {});
+  return /* @__PURE__ */ y(H, { css: n, ...l, $color: o, children: a });
+};
+export {
+  R as SeparatorLabelStyled,
+  O as SeparatorLineStyled,
+  B as SeparatorWrapperStyled
+};

package/components/core/Separator/constants.js

@@ -1 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="Separator";exports.COMPONENT_NAME=e;
+const o = "Separator";
+export {
+  o as COMPONENT_NAME
+};