welcome-ui 1.0.0-beta.8 → 7.0.0-alpha.6

package/dist/Pagination.js

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react");require("./Icon.js");const B=require("./index-BPeIa2mR.js"),L=require("./index-BNwz4P5j.js"),N=require("./System.js"),i=require("@xstyled/styled-components"),j=require("./hide-focus-rings-root-DGU4Klq5.js"),u=5,S=3;function m(t,e){return Array.from({length:t},(s,c)=>e(c))}function z(t,e){return t.reduce((s,c,l)=>{const n=[];return n.push(...s),n.push(...c),c.length&&l<t.length-1&&n.push(e),n},[])}function F(t,e){if(t<u)return"before";if(t>=u&&t<=e-u+1)return"center";if(t>e-u+1)return"after"}function G({page:t,pageCount:e,rangeDisplay:s}){return r.useMemo(()=>{if(e<=s||e<=u+1)return m(e,a=>a+1);const c=F(t,e),l=c==="before"?m(u,a=>a+1):[1],n=c==="center"?m(S,a=>a+t-1):[],d=c==="after"?m(u,a=>a+e-u+1):[e];return z([l,n,d],"-")},[t,e,s])}const M=i.nav(i.system),_=i.ul`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),i=require("@xstyled/styled-components"),B=require("./hide-focus-rings-root-DGU4Klq5.js");require("./Icon.js");const L=require("./index-BPeIa2mR.js"),N=require("./index-BNwz4P5j.js"),j=require("./System.js"),u=5,S=3;function m(t,e){return Array.from({length:t},(s,c)=>e(c))}function z(t,e){return t.reduce((s,c,l)=>{const n=[];return n.push(...s),n.push(...c),c.length&&l<t.length-1&&n.push(e),n},[])}function F(t,e){if(t<u)return"before";if(t>=u&&t<=e-u+1)return"center";if(t>e-u+1)return"after"}function G({page:t,pageCount:e,rangeDisplay:s}){return r.useMemo(()=>{if(e<=s||e<=u+1)return m(e,a=>a+1);const c=F(t,e),l=c==="before"?m(u,a=>a+1):[1],n=c==="center"?m(S,a=>a+t-1):[],d=c==="after"?m(u,a=>a+e-u+1):[e];return z([l,n,d],"-")},[t,e,s])}const M=i.nav(i.system),_=i.ul`
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -31,7 +31,7 @@
     transition: none;
   }
 
-  [${j.hideFocusRingsDataAttribute}] &:focus {
+  [${B.hideFocusRingsDataAttribute}] &:focus {
     box-shadow: none;
   }
 `,y=i.aBox(t=>i.css`
@@ -43,4 +43,4 @@
   `),J=i.aBox(t=>i.css`
     ${R};
     ${t["aria-current"]&&i.th("paginations.active")}
-  `),K=N.forwardRef(({"aria-label":t,dataTestId:e,getHref:s,leftArrow:c,onChange:l,page:n,pageCount:d,rangeDisplay:a=5,rightArrow:k,...v},q)=>{const P=G({page:n,pageCount:d,rangeDisplay:a}),x=r.useRef(null),$=r.useRef(null),h=n===1,E=n===d,A=r.useCallback(o=>{o.preventDefault();const f=n-1;f===1&&x.current.focus(),l(f)},[n,l]),D=r.useCallback(o=>{o.preventDefault();const f=n+1;f===d&&$.current.focus(),l(f)},[n,d,l]);return r.createElement(M,{"aria-label":t,"data-testid":e,ref:q,role:"navigation",...v},r.createElement(_,null,r.createElement(b,null,r.createElement(y,{"aria-disabled":h,"data-testid":e?`${e}-arrow-prev`:void 0,href:s?s(h?n:n-1):"",onClick:h?void 0:A,ref:x},c||r.createElement(B.LeftIcon,{size:"sm"}))),P.map((o,f)=>o==="-"?r.createElement(b,{key:`${f}-`},r.createElement(O,null,"...")):r.createElement(b,{key:o},r.createElement(J,{"aria-current":o===n,"data-testid":e?`${e}-${o}`:void 0,href:s?s(o):"",onClick:w=>{w.preventDefault(),l(o)}},o))),r.createElement(b,null,r.createElement(y,{"aria-disabled":E,"data-testid":e?`${e}-arrow-next`:void 0,href:s?s(E?n:n+1):"",onClick:E?void 0:D,ref:$},k||r.createElement(L.RightIcon,{size:"sm"})))))});exports.Pagination=K;
+  `),K=j.forwardRef(({"aria-label":t,dataTestId:e,getHref:s,leftArrow:c,onChange:l,page:n,pageCount:d,rangeDisplay:a=5,rightArrow:k,...v},q)=>{const P=G({page:n,pageCount:d,rangeDisplay:a}),x=r.useRef(null),$=r.useRef(null),h=n===1,E=n===d,A=r.useCallback(o=>{o.preventDefault();const f=n-1;f===1&&x.current.focus(),l(f)},[n,l]),D=r.useCallback(o=>{o.preventDefault();const f=n+1;f===d&&$.current.focus(),l(f)},[n,d,l]);return r.createElement(M,{"aria-label":t,"data-testid":e,ref:q,role:"navigation",...v},r.createElement(_,null,r.createElement(b,null,r.createElement(y,{"aria-disabled":h,"data-testid":e?`${e}-arrow-prev`:void 0,href:s?s(h?n:n-1):"",onClick:h?void 0:A,ref:x},c||r.createElement(L.LeftIcon,{size:"sm"}))),P.map((o,f)=>o==="-"?r.createElement(b,{key:`${f}-`},r.createElement(O,null,"...")):r.createElement(b,{key:o},r.createElement(J,{"aria-current":o===n,"data-testid":e?`${e}-${o}`:void 0,href:s?s(o):"",onClick:w=>{w.preventDefault(),l(o)}},o))),r.createElement(b,null,r.createElement(y,{"aria-disabled":E,"data-testid":e?`${e}-arrow-next`:void 0,href:s?s(E?n:n+1):"",onClick:E?void 0:D,ref:$},k||r.createElement(N.RightIcon,{size:"sm"})))))});exports.Pagination=K;

package/dist/Pagination.mjs

@@ -1,11 +1,11 @@
 "use client";
 import i, { useMemo as j, useRef as y, useCallback as R } from "react";
+import m, { system as z, th as E, css as h } from "@xstyled/styled-components";
+import { h as G } from "./hide-focus-rings-root-BNyva1yb.mjs";
 import "./Icon.mjs";
-import { L as z } from "./index-BpRjq7lj.mjs";
-import { R as G } from "./index-BRDOakbf.mjs";
-import { forwardRef as F } from "./System.mjs";
-import m, { system as M, th as E, css as h } from "@xstyled/styled-components";
-import { h as S } from "./hide-focus-rings-root-BNyva1yb.mjs";
+import { L as F } from "./index-BpRjq7lj.mjs";
+import { R as M } from "./index-BRDOakbf.mjs";
+import { forwardRef as S } from "./System.mjs";
 const a = 5, q = 3;
 function d(e, t) {
   return Array.from({ length: e }, (r, s) => t(s));
@@ -29,7 +29,7 @@ function O({ page: e, pageCount: t, rangeDisplay: r }) {
     return J([c, n, u], "-");
   }, [e, t, r]);
 }
-const Q = m.nav(M), U = m.ul`
+const Q = m.nav(z), U = m.ul`
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -62,7 +62,7 @@ const Q = m.nav(M), U = m.ul`
     transition: none;
   }
 
-  [${S}] &:focus {
+  [${G}] &:focus {
     box-shadow: none;
   }
 `, p = m.aBox(
@@ -78,7 +78,7 @@ const Q = m.nav(M), U = m.ul`
     ${A};
     ${e["aria-current"] && E("paginations.active")}
   `
-), g = F(
+), g = S(
   ({
     "aria-label": e,
     dataTestId: t,
@@ -124,7 +124,7 @@ const Q = m.nav(M), U = m.ul`
           onClick: x ? void 0 : B,
           ref: k
         },
-        s || /* @__PURE__ */ i.createElement(z, { size: "sm" })
+        s || /* @__PURE__ */ i.createElement(F, { size: "sm" })
       )), w.map(
         (o, f) => o === "-" ? (
           // eslint-disable-next-line react/no-array-index-key
@@ -150,7 +150,7 @@ const Q = m.nav(M), U = m.ul`
           onClick: $ ? void 0 : N,
           ref: v
         },
-        D || /* @__PURE__ */ i.createElement(G, { size: "sm" })
+        D || /* @__PURE__ */ i.createElement(M, { size: "sm" })
       )))
     );
   }

package/dist/PasswordInput.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react");require("./InputText.js");require("./System.js");const e=require("./index-gPtu0TOV.js");exports.PasswordInput=e.PasswordInput;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");require("./Icon.js");const a=require("./index-D6MJAN7T.js"),p=require("./Button.js"),d=require("./InputText.js"),m=require("./System.js"),w=({dataTestId:t,isHidden:n,onClick:r,title:o})=>e.createElement(p.Button,{"aria-controls":"password","aria-expanded":`${!n}`,dataTestId:t&&`${t}-action`,onClick:r,shape:"circle",size:"xs",title:o,variant:"ghost"},n?e.createElement(a.ShowIcon,null):e.createElement(a.HideIcon,null)),i=m.forwardRef(({dataTestId:t,title:n,...r},o)=>{const[s,u]=e.useState("password"),c=s==="password",l=()=>{u(c?"text":"password")};return e.createElement(d.InputText,{...r,dataTestId:t,icon:e.createElement(w,{dataTestId:t,isHidden:c,onClick:l,title:n}),iconPlacement:"right",ref:o,type:s})});i.displayName="PasswordInput";exports.PasswordInput=i;

package/dist/PasswordInput.mjs

@@ -1,7 +1,55 @@
-import "react";
-import "./InputText.mjs";
-import "./System.mjs";
-import { P as i } from "./index-CQ1IPLlk.mjs";
+"use client";
+import t, { useState as i } from "react";
+import "./Icon.mjs";
+import { S as l, H as m } from "./index-u1oHKa7X.mjs";
+import { Button as u } from "./Button.mjs";
+import { InputText as d } from "./InputText.mjs";
+import { forwardRef as f } from "./System.mjs";
+const w = ({
+  dataTestId: e,
+  isHidden: o,
+  onClick: r,
+  title: n
+}) => /* @__PURE__ */ t.createElement(
+  u,
+  {
+    "aria-controls": "password",
+    "aria-expanded": `${!o}`,
+    dataTestId: e && `${e}-action`,
+    onClick: r,
+    shape: "circle",
+    size: "xs",
+    title: n,
+    variant: "ghost"
+  },
+  o ? /* @__PURE__ */ t.createElement(l, null) : /* @__PURE__ */ t.createElement(m, null)
+), x = f(
+  ({ dataTestId: e, title: o, ...r }, n) => {
+    const [a, c] = i("password"), s = a === "password", p = () => {
+      c(s ? "text" : "password");
+    };
+    return /* @__PURE__ */ t.createElement(
+      d,
+      {
+        ...r,
+        dataTestId: e,
+        icon: /* @__PURE__ */ t.createElement(
+          w,
+          {
+            dataTestId: e,
+            isHidden: s,
+            onClick: p,
+            title: o
+          }
+        ),
+        iconPlacement: "right",
+        ref: n,
+        type: a
+      }
+    );
+  }
+);
+x.displayName = "PasswordInput";
 export {
-  i as PasswordInput
+  x as PasswordInput
 };

package/dist/Picker.js

@@ -1,8 +1,8 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),k=require("./index-DHCyCfRv.js"),E=require("./FieldGroup.js"),P=require("./Box.js"),n=require("./System.js"),s=require("@xstyled/styled-components"),$=require("./NLEBE274-DvH3XTTw.js"),a=require("./radio-group-BpImAAmy.js"),R=s($.Radio).withConfig({shouldForwardProp:n.shouldForwardProp})`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),s=require("@xstyled/styled-components"),n=require("./System.js"),k=require("./NLEBE274-DvH3XTTw.js"),E=require("./Label.js"),P=require("./FieldGroup.js"),$=require("./Box.js"),a=require("./radio-group-BpImAAmy.js"),R=s(k.Radio).withConfig({shouldForwardProp:n.shouldForwardProp})`
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
 
   ${s.system};
-`,u=n.forwardRef(({dataTestId:o,label:d,name:i,onChange:c,options:p,required:m,value:l,...y},f)=>{const q=a.useRadioStore({defaultValue:l}),b=r=>{r.stopPropagation(),c&&c(r)};return e.createElement(E.FieldGroup,{...y,as:a.RadioGroup,dataTestId:o,mb:0,ref:f,required:m,store:q},e.createElement(P.Box,{display:"flex",flexWrap:"wrap"},p.map(({element:r,value:t})=>e.createElement(k.Label,{checkableField:!0,dataTestId:o&&`${o}-item-${i}-${t}`,key:`${d}-${i}-${t}`,onClick:b},e.createElement(R,{name:i,value:t}),e.createElement(r,{selected:l===t})))))});u.displayName="Picker";exports.Picker=u;
+`,u=n.forwardRef(({dataTestId:o,label:d,name:i,onChange:c,options:p,required:m,value:l,...y},f)=>{const q=a.useRadioStore({defaultValue:l}),b=r=>{r.stopPropagation(),c&&c(r)};return e.createElement(P.FieldGroup,{...y,as:a.RadioGroup,dataTestId:o,mb:0,ref:f,required:m,store:q},e.createElement($.Box,{display:"flex",flexWrap:"wrap"},p.map(({element:r,value:t})=>e.createElement(E.Label,{checkableField:!0,dataTestId:o&&`${o}-item-${i}-${t}`,key:`${d}-${i}-${t}`,onClick:b},e.createElement(R,{name:i,value:t}),e.createElement(r,{selected:l===t})))))});u.displayName="Picker";exports.Picker=u;

package/dist/Picker.mjs

@@ -1,26 +1,26 @@
 "use client";
 import e from "react";
-import { L as u } from "./index-D3Tnfi3U.mjs";
-import { FieldGroup as R } from "./FieldGroup.mjs";
-import { Box as $ } from "./Box.mjs";
-import { shouldForwardProp as k, forwardRef as y } from "./System.mjs";
-import E, { system as b } from "@xstyled/styled-components";
-import { R as w } from "./NLEBE274-FThuwZH_.mjs";
-import { u as x, R as P } from "./radio-group-29lMl-2M.mjs";
-const _ = E(w).withConfig({ shouldForwardProp: k })`
+import u, { system as R } from "@xstyled/styled-components";
+import { shouldForwardProp as $, forwardRef as k } from "./System.mjs";
+import { R as y } from "./NLEBE274-C94QU78N.mjs";
+import { Label as E } from "./Label.mjs";
+import { FieldGroup as b } from "./FieldGroup.mjs";
+import { Box as w } from "./Box.mjs";
+import { u as x, R as P } from "./radio-group-CGC6DTFJ.mjs";
+const _ = u(y).withConfig({ shouldForwardProp: $ })`
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
 
-  ${b};
-`, h = y(
+  ${R};
+`, h = k(
   ({ dataTestId: r, label: m, name: i, onChange: a, options: s, required: c, value: l, ...p }, f) => {
     const d = x({ defaultValue: l }), n = (o) => {
       o.stopPropagation(), a && a(o);
     };
     return /* @__PURE__ */ e.createElement(
-      R,
+      b,
       {
         ...p,
         as: P,
@@ -30,8 +30,8 @@ const _ = E(w).withConfig({ shouldForwardProp: k })`
         required: c,
         store: d
       },
-      /* @__PURE__ */ e.createElement($, { display: "flex", flexWrap: "wrap" }, s.map(({ element: o, value: t }) => /* @__PURE__ */ e.createElement(
-        u,
+      /* @__PURE__ */ e.createElement(w, { display: "flex", flexWrap: "wrap" }, s.map(({ element: o, value: t }) => /* @__PURE__ */ e.createElement(
+        E,
         {
           checkableField: !0,
           dataTestId: r && `${r}-item-${i}-${t}`,

package/dist/Popover.js

@@ -1 +1,31 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./usePopover-CzPtX0h_.js");exports.Popover=e.Popover;exports.PopoverHover=e.PopoverHover;exports.usePopover=e.usePopover;exports.usePopoverHover=e.usePopoverHover;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),o=require("@xstyled/styled-components"),u=require("./QYJ6MIDR-CRK3satR.js"),a=require("./BYC7LY2E-BkAEL2VD.js"),l=require("./System.js");require("./Icon.js");const f=require("./index-C1FV1q-F.js"),g=require("./Box.js"),P=require("./Button.js"),h=o(u.PopoverArrow)`
+  color: ${o.th("popovers.default.backgroundColor")};
+`,w=o.svgBox(({$transform:t})=>o.css`
+    transform: ${t};
+  `),v=o.div`
+  ${o.th("popovers.content")};
+`,p=o.h6`
+  margin: 0;
+  ${o.th("popovers.title")};
+`,m=o(a.Popover)(({$withCloseButton:t})=>o.css`
+    ${o.th("popovers.default")};
+    outline: none;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
+    ${o.system};
+
+    /* on open popover for animation */
+    &[data-enter] {
+      opacity: 1;
+    }
+
+    ${t&&o.css`
+      ${p} {
+        padding-right: 50;
+      }
+    `}
+  `);o(u.PopoverDisclosure)`
+  ${o.system};
+`;const C=o(a.HovercardAnchor)`
+  ${o.system};
+`,$=l.forwardRef(({as:t,store:r,...e},s)=>n.createElement(u.PopoverDisclosure,{ref:s,render:t?c=>n.createElement(t,{...c}):void 0,store:r,...e})),E=l.forwardRef(({as:t,store:r,...e},s)=>n.createElement(C,{store:r,...e,forwardedAs:t,ref:s})),H={top:"rotateZ(180deg)",right:"rotateZ(-90deg)",bottom:"rotateZ(360deg)",left:"rotateZ(90deg)"},y=({store:t})=>{const r=t.useState("currentPlacement"),[e]=r.split("-"),s=H[e];return n.createElement(h,{store:t},n.createElement(w,{$transform:s,h:30,w:30,xmlns:"http://www.w3.org/2000/svg"},n.createElement("path",{d:"M7 30L15 22L23 30H7Z",fill:"currentColor",fillRule:"nonzero",id:"stroke"}),n.createElement("path",{d:"M8 30L15 23L22 30H8Z",fill:"currentColor",fillRule:"nonzero"})))},d=({children:t,onClose:r,store:e})=>{const s=()=>{r&&r(),e==null||e.hide()},{withCloseButton:c}=e;return n.createElement(g.Box,{position:"relative"},n.createElement(y,{store:e}),t,c&&n.createElement(P.Button,{flex:"0 0 auto",ml:"md",onClick:s,position:"absolute",right:1,shape:"square",size:"xs",top:1,variant:"secondary"},n.createElement(f.CrossIcon,null)))},B=l.forwardRef(({children:t,onClose:r,store:e,...s},c)=>{const{withCloseButton:i}=e;return n.createElement(m,{$withCloseButton:i,ref:c,store:e,...s},n.createElement(d,{onClose:r,store:e},t))}),q=Object.assign(B,{Content:v,Title:p,Trigger:$}),T=l.forwardRef(({children:t,onClose:r,store:e,...s},c)=>{const{withCloseButton:i}=e;return n.createElement(m,{as:a.Hovercard,store:e,...s,$withCloseButton:i,ref:c},n.createElement(d,{onClose:r,store:e},t))}),R=Object.assign(T,{Content:v,Title:p,Trigger:E}),b=({animated:t=150,withCloseButton:r=!1,...e}={})=>({...a.usePopoverStore({animated:t,...e}),withCloseButton:r}),x=({animated:t=150,hideTimeout:r=300,showTimeout:e=500,withCloseButton:s=!1,...c}={})=>({...a.useHovercardStore({animated:t,hideTimeout:r,showTimeout:e,...c}),withCloseButton:s});exports.Popover=q;exports.PopoverHover=R;exports.usePopover=b;exports.usePopoverHover=x;

package/dist/Popover.mjs

@@ -1,8 +1,144 @@
 "use client";
-import { P as r, a as s, u as v, b as a } from "./usePopover-AbS2gpZq.mjs";
+import r from "react";
+import a, { th as l, css as p, system as m } from "@xstyled/styled-components";
+import { P as h, a as v } from "./QYJ6MIDR-BLLqyXdd.mjs";
+import { P, H as $, a as C, u as w, b as E } from "./BYC7LY2E-CVjUW1dr.mjs";
+import { forwardRef as i } from "./System.mjs";
+import "./Icon.mjs";
+import { C as H } from "./index-C7zM96J_.mjs";
+import { Box as B } from "./Box.mjs";
+import { Button as T } from "./Button.mjs";
+const b = a(h)`
+  color: ${l("popovers.default.backgroundColor")};
+`, x = a.svgBox(
+  ({ $transform: t }) => p`
+    transform: ${t};
+  `
+), d = a.div`
+  ${l("popovers.content")};
+`, u = a.h6`
+  margin: 0;
+  ${l("popovers.title")};
+`, f = a(P)(
+  ({ $withCloseButton: t }) => p`
+    ${l("popovers.default")};
+    outline: none;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
+    ${m};
+
+    /* on open popover for animation */
+    &[data-enter] {
+      opacity: 1;
+    }
+
+    ${t && p`
+      ${u} {
+        padding-right: 50;
+      }
+    `}
+  `
+);
+a(v)`
+  ${m};
+`;
+const y = a($)`
+  ${m};
+`, Z = i(
+  ({ as: t, store: o, ...e }, n) => /* @__PURE__ */ r.createElement(
+    v,
+    {
+      ref: n,
+      render: t ? (s) => /* @__PURE__ */ r.createElement(t, { ...s }) : void 0,
+      store: o,
+      ...e
+    }
+  )
+), A = i(
+  ({ as: t, store: o, ...e }, n) => /* @__PURE__ */ r.createElement(y, { store: o, ...e, forwardedAs: t, ref: n })
+), L = {
+  top: "rotateZ(180deg)",
+  right: "rotateZ(-90deg)",
+  bottom: "rotateZ(360deg)",
+  left: "rotateZ(90deg)"
+}, R = ({ store: t }) => {
+  const o = t.useState("currentPlacement"), [e] = o.split("-"), n = L[e];
+  return /* @__PURE__ */ r.createElement(b, { store: t }, /* @__PURE__ */ r.createElement(x, { $transform: n, h: 30, w: 30, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ r.createElement("path", { d: "M7 30L15 22L23 30H7Z", fill: "currentColor", fillRule: "nonzero", id: "stroke" }), /* @__PURE__ */ r.createElement("path", { d: "M8 30L15 23L22 30H8Z", fill: "currentColor", fillRule: "nonzero" })));
+}, g = ({ children: t, onClose: o, store: e }) => {
+  const n = () => {
+    o && o(), e == null || e.hide();
+  }, { withCloseButton: s } = e;
+  return /* @__PURE__ */ r.createElement(B, { position: "relative" }, /* @__PURE__ */ r.createElement(R, { store: e }), t, s && /* @__PURE__ */ r.createElement(
+    T,
+    {
+      flex: "0 0 auto",
+      ml: "md",
+      onClick: n,
+      position: "absolute",
+      right: 1,
+      shape: "square",
+      size: "xs",
+      top: 1,
+      variant: "secondary"
+    },
+    /* @__PURE__ */ r.createElement(H, null)
+  ));
+}, _ = i(
+  ({ children: t, onClose: o, store: e, ...n }, s) => {
+    const { withCloseButton: c } = e;
+    return /* @__PURE__ */ r.createElement(f, { $withCloseButton: c, ref: s, store: e, ...n }, /* @__PURE__ */ r.createElement(g, { onClose: o, store: e }, t));
+  }
+), G = Object.assign(_, {
+  Content: d,
+  Title: u,
+  Trigger: Z
+}), k = i(
+  ({ children: t, onClose: o, store: e, ...n }, s) => {
+    const { withCloseButton: c } = e;
+    return /* @__PURE__ */ r.createElement(
+      f,
+      {
+        as: C,
+        store: e,
+        ...n,
+        $withCloseButton: c,
+        ref: s
+      },
+      /* @__PURE__ */ r.createElement(g, { onClose: o, store: e }, t)
+    );
+  }
+), J = Object.assign(k, {
+  Content: d,
+  Title: u,
+  Trigger: A
+}), K = ({
+  animated: t = 150,
+  withCloseButton: o = !1,
+  ...e
+} = {}) => ({
+  ...w({
+    animated: t,
+    ...e
+  }),
+  withCloseButton: o
+}), N = ({
+  animated: t = 150,
+  hideTimeout: o = 300,
+  showTimeout: e = 500,
+  withCloseButton: n = !1,
+  ...s
+} = {}) => ({
+  ...E({
+    animated: t,
+    hideTimeout: o,
+    showTimeout: e,
+    ...s
+  }),
+  withCloseButton: n
+});
 export {
-  r as Popover,
-  s as PopoverHover,
-  v as usePopover,
-  a as usePopoverHover
+  G as Popover,
+  J as PopoverHover,
+  K as usePopover,
+  N as usePopoverHover
 };

package/dist/{QYJ6MIDR-YegHsExc.mjs → QYJ6MIDR-BLLqyXdd.mjs}

@@ -1,12 +1,12 @@
 "use client";
-import { u as g, b as j, P as C } from "./MTZPJQMC-C9lHSyrL.mjs";
-import { c as v, _ as f, h as m, j as x, a as c, f as P, b as h, i as w, m as l, z as N, F as V, G as z, e as R, E as O } from "./LVA2YJMS-Dm5ieEMw.mjs";
+import { u as E, b as C, P as N } from "./MTZPJQMC-C0Xe_WK4.mjs";
+import { c as v, _ as f, d as m, e as x, g as c, f as P, h, i as w, t as l, z as V, F as j, G as z, b as R, E as O } from "./LVA2YJMS-qFC9J-lt.mjs";
 import { useMemo as T, useState as W } from "react";
-import { u as M } from "./AXB53BZF-DCqNWRx3.mjs";
+import { u as M } from "./AXB53BZF-CGoc4K3d.mjs";
 var H = "div", _ = v(
   function(t) {
     var r = t, { store: e } = r, o = f(r, ["store"]);
-    const n = g();
+    const n = E();
     return e = e || n, o = m(c({}, o), {
       ref: x(e == null ? void 0 : e.setAnchorElement, o.ref)
     }), o;
@@ -16,7 +16,7 @@ P(function(t) {
   const r = _(t);
   return h(H, r);
 });
-var E = "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z", L = "div", d = 30, a = d / 2, B = {
+var g = "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z", L = "div", d = 30, a = d / 2, B = {
   top: `rotate(180 ${a} ${a})`,
   right: `rotate(-90 ${a} ${a})`,
   bottom: `rotate(0 ${a} ${a})`,
@@ -24,7 +24,7 @@ var E = "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,
 };
 function F(u) {
   const [t, r] = W(), e = u.useState("contentElement");
-  return V(() => {
+  return j(() => {
     if (!e) return;
     const n = z(e).getComputedStyle(e);
     r(n);
@@ -33,7 +33,7 @@ function F(u) {
 var G = v(
   function(t) {
     var r = t, { store: e, size: o = d } = r, n = f(r, ["store", "size"]);
-    const p = j();
+    const p = C();
     e = e || p, w(
       e,
       process.env.NODE_ENV !== "production" && "PopoverArrow must be wrapped in a Popover component."
@@ -42,8 +42,8 @@ var G = v(
       (k) => k.currentPlacement.split("-")[0]
     ), s = F(e), y = (s == null ? void 0 : s.getPropertyValue("background-color")) || "none", A = (s == null ? void 0 : s.getPropertyValue(`border-${i}-color`)) || "none", S = (s == null ? void 0 : s.getPropertyValue(`border-${i}-width`)) || "0px", $ = Number.parseInt(S) * 2 * (d / o), b = B[i], D = T(
       () => /* @__PURE__ */ l.jsx("svg", { display: "block", viewBox: "0 0 30 30", children: /* @__PURE__ */ l.jsxs("g", { transform: b, children: [
-        /* @__PURE__ */ l.jsx("path", { fill: "none", d: E }),
-        /* @__PURE__ */ l.jsx("path", { stroke: "none", d: E })
+        /* @__PURE__ */ l.jsx("path", { fill: "none", d: g }),
+        /* @__PURE__ */ l.jsx("path", { stroke: "none", d: g })
       ] }) }),
       [b]
     );
@@ -63,14 +63,14 @@ var G = v(
         stroke: A,
         strokeWidth: $
       }, n.style)
-    }), N(n);
+    }), V(n);
   }
 ), X = P(function(t) {
   const r = G(t);
   return h(L, r);
 }), I = "button", U = v(function(t) {
   var r = t, { store: e } = r, o = f(r, ["store"]);
-  const n = g();
+  const n = E();
   e = e || n, w(
     e,
     process.env.NODE_ENV !== "production" && "PopoverDisclosure must receive a `store` prop or be wrapped in a PopoverProvider component."
@@ -80,7 +80,7 @@ var G = v(
   });
   return o = O(
     o,
-    (s) => /* @__PURE__ */ l.jsx(C, { value: e, children: s }),
+    (s) => /* @__PURE__ */ l.jsx(N, { value: e, children: s }),
     [e]
   ), o = m(c({}, o), {
     onClick: i

package/dist/{QYJ6MIDR-T-fJ_t8N.js → QYJ6MIDR-CRK3satR.js}

@@ -1 +1 @@
-"use client";"use strict";const l=require("./MTZPJQMC-D0pYOjc_.js"),e=require("./LVA2YJMS-B2HZjIhJ.js"),f=require("react"),R=require("./AXB53BZF-CAQ85RSy.js");var V="div",m=e.createHook(function(s){var t=s,{store:o}=t,r=e.__objRest(t,["store"]);const n=l.usePopoverProviderContext();return o=o||n,r=e.__spreadProps(e.__spreadValues({},r),{ref:e.useMergeRefs(o==null?void 0:o.setAnchorElement,r.ref)}),r});e.forwardRef2(function(s){const t=m(s);return e.createElement(V,t)});var P="M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z",j="div",d=30,a=d/2,y={top:`rotate(180 ${a} ${a})`,right:`rotate(-90 ${a} ${a})`,bottom:`rotate(0 ${a} ${a})`,left:`rotate(90 ${a} ${a})`};function S(c){const[s,t]=f.useState(),o=c.useState("contentElement");return e.useSafeLayoutEffect(()=>{if(!o)return;const n=e.getWindow(o).getComputedStyle(o);t(n)},[o]),s}var _=e.createHook(function(s){var t=s,{store:o,size:r=d}=t,n=e.__objRest(t,["store","size"]);const p=l.usePopoverContext();o=o||p,e.invariant(o,process.env.NODE_ENV!=="production"&&"PopoverArrow must be wrapped in a Popover component.");const i=o.useState(A=>A.currentPlacement.split("-")[0]),u=S(o),x=(u==null?void 0:u.getPropertyValue("background-color"))||"none",E=(u==null?void 0:u.getPropertyValue(`border-${i}-color`))||"none",w=(u==null?void 0:u.getPropertyValue(`border-${i}-width`))||"0px",b=Number.parseInt(w)*2*(d/r),v=y[i],g=f.useMemo(()=>e.jsxRuntimeExports.jsx("svg",{display:"block",viewBox:"0 0 30 30",children:e.jsxRuntimeExports.jsxs("g",{transform:v,children:[e.jsxRuntimeExports.jsx("path",{fill:"none",d:P}),e.jsxRuntimeExports.jsx("path",{stroke:"none",d:P})]})}),[v]);return n=e.__spreadProps(e.__spreadValues({children:g,"aria-hidden":!0},n),{ref:e.useMergeRefs(o.setArrowElement,n.ref),style:e.__spreadValues({position:"absolute",fontSize:r,width:"1em",height:"1em",pointerEvents:"none",fill:x,stroke:E,strokeWidth:b},n.style)}),e.removeUndefinedValues(n)}),D=e.forwardRef2(function(s){const t=_(s);return e.createElement(j,t)}),$="button",h=e.createHook(function(s){var t=s,{store:o}=t,r=e.__objRest(t,["store"]);const n=l.usePopoverProviderContext();o=o||n,e.invariant(o,process.env.NODE_ENV!=="production"&&"PopoverDisclosure must receive a `store` prop or be wrapped in a PopoverProvider component.");const p=r.onClick,i=e.useEvent(u=>{o==null||o.setAnchorElement(u.currentTarget),p==null||p(u)});return r=e.useWrapElement(r,u=>e.jsxRuntimeExports.jsx(l.PopoverScopedContextProvider,{value:o,children:u}),[o]),r=e.__spreadProps(e.__spreadValues({},r),{onClick:i}),r=m(e.__spreadValues({store:o},r)),r=R.useDialogDisclosure(e.__spreadValues({store:o},r)),r}),k=e.forwardRef2(function(s){const t=h(s);return e.createElement($,t)});exports.PopoverArrow=D;exports.PopoverDisclosure=k;exports.usePopoverArrow=_;exports.usePopoverDisclosure=h;
+"use client";"use strict";const l=require("./MTZPJQMC-5Xg78Uyy.js"),e=require("./LVA2YJMS-B2HZjIhJ.js"),f=require("react"),R=require("./AXB53BZF-KWM2jKTz.js");var V="div",m=e.createHook(function(s){var t=s,{store:o}=t,r=e.__objRest(t,["store"]);const n=l.usePopoverProviderContext();return o=o||n,r=e.__spreadProps(e.__spreadValues({},r),{ref:e.useMergeRefs(o==null?void 0:o.setAnchorElement,r.ref)}),r});e.forwardRef2(function(s){const t=m(s);return e.createElement(V,t)});var P="M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z",j="div",d=30,a=d/2,y={top:`rotate(180 ${a} ${a})`,right:`rotate(-90 ${a} ${a})`,bottom:`rotate(0 ${a} ${a})`,left:`rotate(90 ${a} ${a})`};function S(c){const[s,t]=f.useState(),o=c.useState("contentElement");return e.useSafeLayoutEffect(()=>{if(!o)return;const n=e.getWindow(o).getComputedStyle(o);t(n)},[o]),s}var _=e.createHook(function(s){var t=s,{store:o,size:r=d}=t,n=e.__objRest(t,["store","size"]);const p=l.usePopoverContext();o=o||p,e.invariant(o,process.env.NODE_ENV!=="production"&&"PopoverArrow must be wrapped in a Popover component.");const i=o.useState(A=>A.currentPlacement.split("-")[0]),u=S(o),x=(u==null?void 0:u.getPropertyValue("background-color"))||"none",E=(u==null?void 0:u.getPropertyValue(`border-${i}-color`))||"none",w=(u==null?void 0:u.getPropertyValue(`border-${i}-width`))||"0px",b=Number.parseInt(w)*2*(d/r),v=y[i],g=f.useMemo(()=>e.jsxRuntimeExports.jsx("svg",{display:"block",viewBox:"0 0 30 30",children:e.jsxRuntimeExports.jsxs("g",{transform:v,children:[e.jsxRuntimeExports.jsx("path",{fill:"none",d:P}),e.jsxRuntimeExports.jsx("path",{stroke:"none",d:P})]})}),[v]);return n=e.__spreadProps(e.__spreadValues({children:g,"aria-hidden":!0},n),{ref:e.useMergeRefs(o.setArrowElement,n.ref),style:e.__spreadValues({position:"absolute",fontSize:r,width:"1em",height:"1em",pointerEvents:"none",fill:x,stroke:E,strokeWidth:b},n.style)}),e.removeUndefinedValues(n)}),D=e.forwardRef2(function(s){const t=_(s);return e.createElement(j,t)}),$="button",h=e.createHook(function(s){var t=s,{store:o}=t,r=e.__objRest(t,["store"]);const n=l.usePopoverProviderContext();o=o||n,e.invariant(o,process.env.NODE_ENV!=="production"&&"PopoverDisclosure must receive a `store` prop or be wrapped in a PopoverProvider component.");const p=r.onClick,i=e.useEvent(u=>{o==null||o.setAnchorElement(u.currentTarget),p==null||p(u)});return r=e.useWrapElement(r,u=>e.jsxRuntimeExports.jsx(l.PopoverScopedContextProvider,{value:o,children:u}),[o]),r=e.__spreadProps(e.__spreadValues({},r),{onClick:i}),r=m(e.__spreadValues({store:o},r)),r=R.useDialogDisclosure(e.__spreadValues({store:o},r)),r}),k=e.forwardRef2(function(s){const t=h(s);return e.createElement($,t)});exports.PopoverArrow=D;exports.PopoverDisclosure=k;exports.usePopoverArrow=_;exports.usePopoverDisclosure=h;

package/dist/Radio.js

@@ -1,5 +1,5 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),x=require("./Hint.js"),u=require("./System.js"),e=require("@xstyled/styled-components"),y=require("./Box.js"),$=require("./index-DHCyCfRv.js"),k=require("./field-styles-D_gf6ypV.js"),E=require("./NLEBE274-DvH3XTTw.js"),q=e(E.Radio).withConfig({shouldForwardProp:u.shouldForwardProp})(({order:t="-1",size:o,variant:i})=>e.css`
-    ${k.defaultFieldStyles({size:o,variant:i})};
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),e=require("@xstyled/styled-components"),x=require("./field-styles-D_gf6ypV.js"),y=require("./Box.js"),u=require("./System.js"),$=require("./Label.js"),k=require("./NLEBE274-DvH3XTTw.js"),E=require("./Hint.js"),q=e(k.Radio).withConfig({shouldForwardProp:u.shouldForwardProp})(({order:t="-1",size:o,variant:i})=>e.css`
+    ${x.defaultFieldStyles({size:o,variant:i})};
     ${e.th("radios.default")}
     position: relative;
     padding: 0;
@@ -57,4 +57,4 @@
 `,C=e.div`
   display: flex;
   flex-direction: column;
-`,m=u.forwardRef(({dataTestId:t,disabled:o,disabledIcon:i,flexDirection:f,hint:a,label:l,maxWidth:p,onChange:s,onClick:d,variant:c,...b},h)=>{const g=n=>{n.stopPropagation(),d&&d(n),s&&s(n)};return r.createElement(w,{alignItems:"flex-start",checkableField:!0,disabled:o,disabledIcon:i,flexDirection:"column",maxWidth:p,onClick:g,variant:c,withDisabledIcon:!1},r.createElement(L,{flexDirection:f},r.createElement(R,null,r.createElement(q,{"data-testid":t,disabled:o,label:l,ref:h,variant:c,...b})),r.createElement(C,null,r.createElement("div",{"data-testid":t?`${t}-label`:void 0},l),a&&r.createElement(x.Hint,{"data-testid":t?`${t}-hint`:void 0,mt:"0"},a))))});m.displayName="Radio";exports.Radio=m;
+`,m=u.forwardRef(({dataTestId:t,disabled:o,disabledIcon:i,flexDirection:f,hint:a,label:l,maxWidth:p,onChange:s,onClick:d,variant:c,...b},h)=>{const g=n=>{n.stopPropagation(),d&&d(n),s&&s(n)};return r.createElement(w,{alignItems:"flex-start",checkableField:!0,disabled:o,disabledIcon:i,flexDirection:"column",maxWidth:p,onClick:g,variant:c,withDisabledIcon:!1},r.createElement(L,{flexDirection:f},r.createElement(R,null,r.createElement(q,{"data-testid":t,disabled:o,label:l,ref:h,variant:c,...b})),r.createElement(C,null,r.createElement("div",{"data-testid":t?`${t}-label`:void 0},l),a&&r.createElement(E.Hint,{"data-testid":t?`${t}-hint`:void 0,mt:"0"},a))))});m.displayName="Radio";exports.Radio=m;

package/dist/Radio.mjs

@@ -1,15 +1,15 @@
 "use client";
 import t from "react";
-import { Hint as $ } from "./Hint.mjs";
-import { shouldForwardProp as x, forwardRef as k } from "./System.mjs";
-import o, { css as w, th as i, system as f } from "@xstyled/styled-components";
-import { Box as y } from "./Box.mjs";
-import { L as E } from "./index-D3Tnfi3U.mjs";
-import { d as R } from "./field-styles-CeV7pnOp.mjs";
-import { R as C } from "./NLEBE274-FThuwZH_.mjs";
-const L = o(C).withConfig({ shouldForwardProp: x })(
-  ({ order: e = "-1", size: r, variant: a }) => w`
-    ${R({ size: r, variant: a })};
+import o, { css as $, th as i, system as f } from "@xstyled/styled-components";
+import { d as x } from "./field-styles-CeV7pnOp.mjs";
+import { Box as k } from "./Box.mjs";
+import { shouldForwardProp as w, forwardRef as y } from "./System.mjs";
+import { Label as E } from "./Label.mjs";
+import { R } from "./NLEBE274-C94QU78N.mjs";
+import { Hint as C } from "./Hint.mjs";
+const L = o(R).withConfig({ shouldForwardProp: w })(
+  ({ order: e = "-1", size: r, variant: a }) => $`
+    ${x({ size: r, variant: a })};
     ${i("radios.default")}
     position: relative;
     padding: 0;
@@ -57,7 +57,7 @@ const L = o(C).withConfig({ shouldForwardProp: x })(
   position: relative;
   align-items: center;
   display: flex;
-`, v = o(y)`
+`, v = o(k)`
   display: flex;
   align-items: flex-start;
   gap: sm;
@@ -68,13 +68,13 @@ const L = o(C).withConfig({ shouldForwardProp: x })(
 `, D = o.div`
   display: flex;
   flex-direction: column;
-`, H = k(
+`, H = y(
   ({
     dataTestId: e,
     disabled: r,
     disabledIcon: a,
     flexDirection: p,
-    hint: l,
+    hint: n,
     label: d,
     maxWidth: u,
     onChange: s,
@@ -82,8 +82,8 @@ const L = o(C).withConfig({ shouldForwardProp: x })(
     variant: c,
     ...b
   }, h) => {
-    const g = (n) => {
-      n.stopPropagation(), m && m(n), s && s(n);
+    const g = (l) => {
+      l.stopPropagation(), m && m(l), s && s(l);
     };
     return /* @__PURE__ */ t.createElement(
       _,
@@ -108,7 +108,7 @@ const L = o(C).withConfig({ shouldForwardProp: x })(
           variant: c,
           ...b
         }
-      )), /* @__PURE__ */ t.createElement(D, null, /* @__PURE__ */ t.createElement("div", { "data-testid": e ? `${e}-label` : void 0 }, d), l && /* @__PURE__ */ t.createElement($, { "data-testid": e ? `${e}-hint` : void 0, mt: "0" }, l)))
+      )), /* @__PURE__ */ t.createElement(D, null, /* @__PURE__ */ t.createElement("div", { "data-testid": e ? `${e}-label` : void 0 }, d), n && /* @__PURE__ */ t.createElement(C, { "data-testid": e ? `${e}-hint` : void 0, mt: "0" }, n)))
     );
   }
 );

package/dist/RadioGroup.js

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),$=require("./FieldGroup.js"),x=require("./Radio.js"),S=require("./System.js"),t=require("@xstyled/styled-components"),d=require("./radio-group-BpImAAmy.js"),w=t.divBox(({flexDirection:r})=>t.css`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),t=require("@xstyled/styled-components"),$=require("./FieldGroup.js"),x=require("./Radio.js"),S=require("./System.js"),d=require("./radio-group-BpImAAmy.js"),w=t.divBox(({flexDirection:r})=>t.css`
     display: flex;
     flex-direction: ${r};
     flex-wrap: wrap;

package/dist/RadioGroup.mjs

@@ -1,20 +1,20 @@
 "use client";
 import t from "react";
-import { FieldGroup as x } from "./FieldGroup.mjs";
-import { Radio as y } from "./Radio.mjs";
-import { forwardRef as b } from "./System.mjs";
-import G, { css as _, system as w } from "@xstyled/styled-components";
-import { u as E, R as V } from "./radio-group-29lMl-2M.mjs";
-const h = G.divBox(
-  ({ flexDirection: a }) => _`
+import x, { css as y, system as b } from "@xstyled/styled-components";
+import { FieldGroup as G } from "./FieldGroup.mjs";
+import { Radio as _ } from "./Radio.mjs";
+import { forwardRef as w } from "./System.mjs";
+import { u as E, R as V } from "./radio-group-CGC6DTFJ.mjs";
+const h = x.divBox(
+  ({ flexDirection: a }) => y`
     display: flex;
     flex-direction: ${a};
     flex-wrap: wrap;
     gap: md;
 
-    ${w};
+    ${b};
   `
-), k = b(
+), k = w(
   ({
     dataTestId: a,
     flexDirection: i,
@@ -24,7 +24,7 @@ const h = G.divBox(
     name: u,
     onChange: r,
     options: f = [],
-    renderOption: c = y,
+    renderOption: c = _,
     required: p,
     value: v,
     ...d
@@ -33,7 +33,7 @@ const h = G.divBox(
       d.disabled || (l.setValue(e), r == null || r(e));
     };
     return /* @__PURE__ */ t.createElement(
-      x,
+      G,
       {
         as: V,
         dataTestId: a,