@fluidattacks/design 3.1.10 → 3.1.12

package/dist/components/group-selector/index.js

@@ -1 +1,26 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("react-dom"),n=require("styled-components"),i=require("../../index-Dy8ZUIYs.js"),a=require("../container/index.js"),o=require("../divider/index.js"),s=require("../icon/index.js"),l=require("../icon-button/index.js"),c=require("../search/index.js");require("../typography/heading/index.js"),require("../typography/span/index.js");const d=require("../typography/text/index.js");exports.GroupSelector=({isOpen:x=!0,items:u,handleNewOrganization:p,onSelect:g,onClose:h,selectedItem:j,title:m,variant:y})=>{const C=n.useTheme(),[f,q]=r.useState(u),[S,b]=r.useState(""),v=r.useCallback((e=>{q((r=>r.filter((r=>String(r.name).toLowerCase().includes(e.toLocaleLowerCase())))))}),[q]),w=r.useCallback((e=>{e.currentTarget&&(b(e.currentTarget.value),v(e.currentTarget.value))}),[b,v]);return r.useEffect((()=>{q(u),v(S)}),[u,v,S]),x?t.createPortal(e.jsx(a.Container,{"aria-modal":"true",className:"comp-modal fixed inset-0 overflow-auto",zIndex:99999,children:e.jsx(a.Container,{alignItems:"center",bgColor:"rgb(52 64 84 / 70%)",display:"flex",height:"100vh",justify:"center",left:"0",top:"0",width:"100%",children:e.jsxs(i.StyledGroupContainer,{$itemsLength:f.length,children:[e.jsxs(a.Container,{alignItems:"center",display:"flex",justify:"space-between",children:[e.jsx(d.Text,{color:C.palette.gray[800],fontWeight:"bold",size:"lg",children:m}),e.jsx(l.IconButton,{icon:"xmark",iconColor:C.palette.gray[400],iconSize:"xs",iconType:"fa-light",onClick:h,variant:"ghost"})]}),e.jsx(a.Container,{mt:1,children:e.jsx(c.Search,{onInput:w,placeholder:"Search"})}),e.jsx(o.Divider,{mb:1,mt:1}),e.jsxs(a.Container,{display:"inline-flex",gap:1,maxHeight:"332px",scroll:"y",wrap:"wrap",children:["organization-selector"===y?e.jsx(i.OptionBoxContainer,{onClick:p,children:e.jsxs(a.Container,{alignItems:"center",display:"flex",children:[e.jsx(s.Icon,{icon:"square-plus",iconColor:C.palette.gray[400],iconSize:"xs",iconType:"fa-light",mr:.5}),e.jsx(d.Text,{color:C.palette.gray[400],size:"sm",children:"New organization"})]})}):void 0,f.map((r=>e.jsx(i.OptionContainer,{isSelected:j.toLowerCase()===r.name,label:r.name.charAt(0).toUpperCase()+r.name.slice(1),onSelect:g},r.name)))]})]})})}),document.body):e.jsx("div",{})};
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { useState as p, useCallback as d, useEffect as I } from "react";
+import { createPortal as b } from "react-dom";
+import { useTheme as T } from "styled-components";
+import { S as L, O as k, a as j } from "../../index-B5yoGFs6.mjs";
+import { Container as t } from "../container/index.js";
+import { Divider as N } from "../divider/index.js";
+import { Icon as O } from "../icon/index.js";
+import { IconButton as q } from "../icon-button/index.js";
+import { Search as A } from "../search/index.js";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as h } from "../typography/text/index.js";
+const Q = ({ isOpen: f = !0, items: n, handleNewOrganization: g, onSelect: u, onClose: x, selectedItem: y, title: C, variant: S }) => {
+  const o = T(), [s, l] = p(n), [c, m] = p(""), a = d((r) => {
+    l((v) => v.filter((z) => String(z.name).toLowerCase().includes(r.toLocaleLowerCase())));
+  }, [l]), w = d((r) => {
+    r.currentTarget && (m(r.currentTarget.value), a(r.currentTarget.value));
+  }, [m, a]);
+  return I(() => {
+    l(n), a(c);
+  }, [n, a, c]), f ? b(e(t, { "aria-modal": "true", className: "comp-modal fixed inset-0 overflow-auto", zIndex: 99999, children: e(t, { alignItems: "center", bgColor: "rgb(52 64 84 / 70%)", display: "flex", height: "100vh", justify: "center", left: "0", top: "0", width: "100%", children: i(L, { $itemsLength: s.length, children: [i(t, { alignItems: "center", display: "flex", justify: "space-between", children: [e(h, { color: o.palette.gray[800], fontWeight: "bold", size: "lg", children: C }), e(q, { icon: "xmark", iconColor: o.palette.gray[400], iconSize: "xs", iconType: "fa-light", onClick: x, variant: "ghost" })] }), e(t, { mt: 1, children: e(A, { onInput: w, placeholder: "Search" }) }), e(N, { mb: 1, mt: 1 }), i(t, { display: "inline-flex", gap: 1, maxHeight: "332px", scroll: "y", wrap: "wrap", children: [S === "organization-selector" ? e(k, { onClick: g, children: i(t, { alignItems: "center", display: "flex", children: [e(O, { icon: "square-plus", iconColor: o.palette.gray[400], iconSize: "xs", iconType: "fa-light", mr: 0.5 }), e(h, { color: o.palette.gray[400], size: "sm", children: "New organization" })] }) }) : void 0, s.map((r) => e(j, { isSelected: y.toLowerCase() === r.name, label: r.name.charAt(0).toUpperCase() + r.name.slice(1), onSelect: u }, r.name))] })] }) }) }), document.body) : e("div", {});
+};
+export {
+  Q as GroupSelector
+};

package/dist/components/group-selector/option-container/index.js

@@ -1 +1,12 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("react/jsx-runtime"),require("react"),require("styled-components");const e=require("../../../index-Dy8ZUIYs.js");require("../../icon/index.js"),require("../../typography/heading/index.js"),require("../../typography/span/index.js"),require("../../typography/text/index.js"),exports.OptionBoxContainer=e.OptionBoxContainer,exports.OptionContainer=e.OptionContainer;
+import "react/jsx-runtime";
+import "react";
+import "styled-components";
+import { O, a as s } from "../../../index-B5yoGFs6.mjs";
+import "../../icon/index.js";
+import "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import "../../typography/text/index.js";
+export {
+  O as OptionBoxContainer,
+  s as OptionContainer
+};

package/dist/components/icon/index.js

@@ -1,10 +1,48 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("react"),e=require("styled-components"),r=require("../../styles-C2CoGJl7.js"),i={xl:"96px",lg:"64px",md:"32px",sm:"24px",xs:"16px",xxs:"12px",xxss:"10px"},s=e.styled(r.BaseSpanComponent)`
-  ${({$clickable:n,$color:o="inherit",$disabled:e=!1,$hoverColor:r,$rotation:s,$size:t,$secondaryColor:a})=>`\n      color: ${o};\n      cursor: ${n?"pointer":"inherit"};\n      font-size: ${i[t]};\n      line-height: 0;\n      vertical-align: middle;\n      pointer-events: inherit;\n      opacity: ${e?"0.5":"1"};\n\n      > svg {\n        --fa-secondary-color: ${a};\n        transform: ${void 0===s?"":`rotate(${s}deg)`};\n      }\n\n      .fill-gradient-01 path {\n        fill: url(/gradients.svg#gradient-01);\n        fill: url(#gradient-01);\n      }\n      .fill-gradient-02 path {\n        fill: url(/gradients.svg#gradient-02);\n        fill: url(#gradient-02);\n      }\n\n      ${n?`&:hover {\n              filter: ${r?"":"brightness(50%)"};\n              color: ${r??""};\n            }`:""}\n    `}
-`;e.styled.div`
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as v } from "react";
+import { styled as d } from "styled-components";
+import { c as C } from "../../styles-C3cZmKVJ.mjs";
+const u = { xl: "96px", lg: "64px", md: "32px", sm: "24px", xs: "16px", xxs: "12px", xxss: "10px" }, b = d(C)`
+  ${({ $clickable: n, $color: a = "inherit", $disabled: l = !1, $hoverColor: o, $rotation: r, $size: e, $secondaryColor: i }) => `
+      color: ${a};
+      cursor: ${n ? "pointer" : "inherit"};
+      font-size: ${u[e]};
+      line-height: 0;
+      vertical-align: middle;
+      pointer-events: inherit;
+      opacity: ${l ? "0.5" : "1"};
+
+      > svg {
+        --fa-secondary-color: ${i};
+        transform: ${r === void 0 ? "" : `rotate(${r}deg)`};
+      }
+
+      .fill-gradient-01 path {
+        fill: url(/gradients.svg#gradient-01);
+        fill: url(#gradient-01);
+      }
+      .fill-gradient-02 path {
+        fill: url(/gradients.svg#gradient-02);
+        fill: url(#gradient-02);
+      }
+
+      ${n ? `&:hover {
+              filter: ${o ? "" : "brightness(50%)"};
+              color: ${o ?? ""};
+            }` : ""}
+    `}
+`;
+d.div`
   cursor: pointer;
   transition: all 0.2s ease-in-out;
 
   &:hover:not([disabled]) {
     transform: scale(1.2);
   }
-`;const t=o.forwardRef((function({clickable:o,disabled:e,hoverColor:r,icon:i,iconClass:t="",iconColor:a,iconMask:l,iconSize:c,iconTransform:d,iconType:$="fa-solid",onClick:f,rotation:p,spanClass:g,secondaryColor:x,...u},v){return n.jsx(s,{$clickable:o,$color:a,$disabled:e,$hoverColor:r,$rotation:p,$secondaryColor:x,$size:c,className:g,"data-testid":`${i}-icon`,onClick:f,ref:v,...u,children:n.jsx("i",{className:`${$} fa-${i} ${t}`,...void 0!==l?{"data-fa-mask":l}:{},...void 0!==d?{"data-fa-transform":d}:{}})},`${$}-${i}`)}));exports.Icon=t;
+`;
+const T = v(function({ clickable: n, disabled: a, hoverColor: l, icon: o, iconClass: r = "", iconColor: e, iconMask: i, iconSize: $, iconTransform: s, iconType: t = "fa-solid", onClick: f, rotation: p, spanClass: m, secondaryColor: g, ...x }, h) {
+  return c(b, { $clickable: n, $color: e, $disabled: a, $hoverColor: l, $rotation: p, $secondaryColor: g, $size: $, className: m, "data-testid": `${o}-icon`, onClick: f, ref: h, ...x, children: c("i", { className: `${t} fa-${o} ${r}`, ...i !== void 0 ? { "data-fa-mask": i } : {}, ...s !== void 0 ? { "data-fa-transform": s } : {} }) }, `${t}-${o}`);
+});
+export {
+  T as Icon
+};

package/dist/components/icon-button/index.js

@@ -1,3 +1,27 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),n=require("styled-components"),r=require("../../styles--Elze-LV.js"),t=require("../icon/index.js"),o=require("../../index-CmylnDrF.js"),a=n.styled(r.StyledButton)`
-  ${({theme:e,$borderRadius:i="4px",$px:n=.5,$py:r=.5})=>`\n    --btn-spacing: ${i};\n    --btn-padding-x: ${e.spacing[n]};\n    --btn-padding-y: ${e.spacing[r]};\n\n    align-items: center;\n    line-height: 0;\n    text-align: center;\n\n    > span {\n      margin: 0 !important;\n    }\n  `}
-`,c=i.forwardRef((function({borderRadius:i,disabled:n,icon:r,iconColor:c,iconSize:s="xxs",iconTransform:d,iconType:l,id:p,justify:u="center",onClick:y,px:x,py:b,type:$="button",tooltip:g,tooltipPlace:j,value:m,variant:f="primary",...q},v){const T=e.jsx(a,{$borderRadius:i,$px:x,$py:b,$variant:f,"aria-disabled":n,"aria-label":p,borderRadius:i,disabled:n,id:p,justify:u,onClick:y,ref:v,type:$,value:m,...q,children:e.jsx(t.Icon,{clickable:!1,icon:r,iconColor:c,iconSize:s,iconTransform:d,iconType:l})}),h=($+(f??"")+(p??r)).replace(/ /u,"_");return void 0===g?T:e.jsx(o.Tooltip,{id:`${h}-tooltip`,place:j,tip:g,children:T})}));exports.IconButton=c;
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as v } from "react";
+import { styled as C } from "styled-components";
+import { S as R } from "../../styles-EIbGRPlk.mjs";
+import { Icon as k } from "../icon/index.js";
+import { T as S } from "../../index-D-lcuEHY.mjs";
+const j = C(R)`
+  ${({ theme: i, $borderRadius: n = "4px", $px: o = 0.5, $py: r = 0.5 }) => `
+    --btn-spacing: ${n};
+    --btn-padding-x: ${i.spacing[o]};
+    --btn-padding-y: ${i.spacing[r]};
+
+    align-items: center;
+    line-height: 0;
+    text-align: center;
+
+    > span {
+      margin: 0 !important;
+    }
+  `}
+`, q = v(function({ borderRadius: i, disabled: n, icon: o, iconColor: r, iconSize: d = "xxs", iconTransform: l, iconType: m, id: a, justify: b = "center", onClick: f, px: u, py: y, type: e = "button", tooltip: p, tooltipPlace: $, value: g, variant: c = "primary", ...x }, T) {
+  const s = t(j, { $borderRadius: i, $px: u, $py: y, $variant: c, "aria-disabled": n, "aria-label": a, borderRadius: i, disabled: n, id: a, justify: b, onClick: f, ref: T, type: e, value: g, ...x, children: t(k, { clickable: !1, icon: o, iconColor: r, iconSize: d, iconTransform: l, iconType: m }) }), h = (e + (c ?? "") + (a ?? o)).replace(/ /u, "_");
+  return p === void 0 ? s : t(S, { id: `${h}-tooltip`, place: $, tip: p, children: s });
+});
+export {
+  q as IconButton
+};

package/dist/components/indicator-card/index.js

@@ -1 +1,15 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("lodash"),t=require("styled-components"),r=require("../container/index.js"),n=require("../../index-CmylnDrF.js"),d=require("../typography/heading/index.js");require("../typography/span/index.js");const o=require("../typography/text/index.js");exports.IndicatorCard=({description:s,height:a="auto",leftIconName:l,children:p,rightIconName:c,title:x,tooltipId:g,tooltipTip:h,tooltipPlace:y="bottom",variant:u="centered",width:f="318px"})=>{const j=t.useTheme(),m="centered"===u,v=e.jsx(n.Tooltip,{icon:c??l,iconColor:j.palette.gray[800],id:g,place:y,tip:h});return e.jsxs(r.Container,{alignItems:m?"center":"flex-start",bgColor:j.palette.gray[50],border:`1px solid ${j.palette.gray[200]}`,borderRadius:"4px",display:"inline-flex",flexDirection:m?"column":"column-reverse",gap:.5,height:a,justify:"center",padding:[1.25,1.25,1.25,1.25],width:f,children:[e.jsxs(r.Container,{alignItems:"center",display:"flex",gap:.5,children:[m||i.isUndefined(l)?void 0:v,e.jsx(o.Text,{color:m?j.palette.gray[800]:j.palette.gray[400],size:"md",textAlign:m?"center":"start",children:s}),m||i.isUndefined(c)?void 0:v]}),e.jsxs(r.Container,{alignItems:"center",display:"flex",gap:.5,my:.5,children:[m&&!i.isUndefined(l)?v:void 0,e.jsxs("div",{style:{display:"flex",gap:"12px"},children:[i.isUndefined(x)?void 0:e.jsx(d.Heading,{fontWeight:"bold",size:"md",children:x}),p]}),m&&!i.isUndefined(c)?v:void 0]})]})};
+import { jsx as n, jsxs as o } from "react/jsx-runtime";
+import { isUndefined as i } from "lodash";
+import { useTheme as u } from "styled-components";
+import { Container as d } from "../container/index.js";
+import { T as v } from "../../index-D-lcuEHY.mjs";
+import { Heading as I } from "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as b } from "../typography/text/index.js";
+const H = ({ description: s, height: c = "auto", leftIconName: a, children: m, rightIconName: l, title: p, tooltipId: g, tooltipTip: f, tooltipPlace: h = "bottom", variant: x = "centered", width: y = "318px" }) => {
+  const t = u(), e = x === "centered", r = n(v, { icon: l ?? a, iconColor: t.palette.gray[800], id: g, place: h, tip: f });
+  return o(d, { alignItems: e ? "center" : "flex-start", bgColor: t.palette.gray[50], border: `1px solid ${t.palette.gray[200]}`, borderRadius: "4px", display: "inline-flex", flexDirection: e ? "column" : "column-reverse", gap: 0.5, height: c, justify: "center", padding: [1.25, 1.25, 1.25, 1.25], width: y, children: [o(d, { alignItems: "center", display: "flex", gap: 0.5, children: [e || i(a) ? void 0 : r, n(b, { color: e ? t.palette.gray[800] : t.palette.gray[400], size: "md", textAlign: e ? "center" : "start", children: s }), e || i(l) ? void 0 : r] }), o(d, { alignItems: "center", display: "flex", gap: 0.5, my: 0.5, children: [e && !i(a) ? r : void 0, o("div", { style: { display: "flex", gap: "12px" }, children: [i(p) ? void 0 : n(I, { fontWeight: "bold", size: "md", children: p }), m] }), e && !i(l) ? r : void 0] })] });
+};
+export {
+  H as IndicatorCard
+};

package/dist/components/info-sidebar/index.js

@@ -1 +1,16 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("styled-components"),i=require("../button/index.js"),n=require("../container/index.js"),r=require("../icon-button/index.js"),l=require("../tabs/index.js");require("../typography/heading/index.js"),require("../typography/span/index.js");const o=require("../typography/text/index.js");exports.InfoSidebar=({actions:a,children:s,header:p,title:x,tabs:c,footer:d})=>{const y=t.useTheme();return e.jsxs(n.Container,{alignItems:"flex-start",bgColor:y.palette.white,borderLeft:`1px solid ${y.palette.gray[300]}`,display:"flex",flexDirection:"column",maxHeight:"750px",width:"480px",children:[e.jsxs(n.Container,{alignItems:"flex-start",alignSelf:"stretch",borderBottom:`1px solid ${y.palette.gray[300]}`,display:"flex",gap:.25,justify:"space-between",px:1.25,py:1,children:[e.jsxs(n.Container,{display:"flex",flexDirection:"column",gap:.25,children:[e.jsx(o.Text,{color:y.palette.gray[800],fontWeight:"bold",lineSpacing:1.75,size:"xl",children:x}),p]}),a&&e.jsx(n.Container,{display:"flex",gap:.25,children:a.map((({icon:t,onClick:i},n)=>e.jsx(r.IconButton,{icon:t??"paper-plane",iconColor:y.palette.gray[400],iconSize:"xxs",iconType:"fa-light",onClick:i,variant:"ghost"},`${n}-${t}`)))})]}),e.jsx(n.Container,{display:"flex",pt:.25,width:"100%",children:e.jsx(l.Tabs,{items:c})}),e.jsx(n.Container,{alignSelf:"stretch",display:"flex",flexDirection:"column",px:1.25,py:1,scroll:"y",children:s}),d&&e.jsx(n.Container,{alignSelf:"stretch",borderTop:`1px solid ${y.palette.gray[300]}`,display:"flex",gap:.5,justify:"end",px:1.25,py:1,children:d.map((({icon:t,text:n,onClick:r},l)=>e.jsx(i.Button,{icon:t,onClick:r,variant:0===l?"primary":"tertiary",width:"100%",children:n},`${l}-${n}`)))})]})};
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useTheme as m } from "styled-components";
+import { Button as h } from "../button/index.js";
+import { Container as t } from "../container/index.js";
+import { IconButton as y } from "../icon-button/index.js";
+import { Tabs as g } from "../tabs/index.js";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as b } from "../typography/text/index.js";
+const B = ({ actions: n, children: c, header: d, title: f, tabs: x, footer: p }) => {
+  const i = m();
+  return a(t, { alignItems: "flex-start", bgColor: i.palette.white, borderLeft: `1px solid ${i.palette.gray[300]}`, display: "flex", flexDirection: "column", maxHeight: "750px", width: "480px", children: [a(t, { alignItems: "flex-start", alignSelf: "stretch", borderBottom: `1px solid ${i.palette.gray[300]}`, display: "flex", gap: 0.25, justify: "space-between", px: 1.25, py: 1, children: [a(t, { display: "flex", flexDirection: "column", gap: 0.25, children: [e(b, { color: i.palette.gray[800], fontWeight: "bold", lineSpacing: 1.75, size: "xl", children: f }), d] }), n && e(t, { display: "flex", gap: 0.25, children: n.map(({ icon: l, onClick: o }, r) => e(y, { icon: l ?? "paper-plane", iconColor: i.palette.gray[400], iconSize: "xxs", iconType: "fa-light", onClick: o, variant: "ghost" }, `${r}-${l}`)) })] }), e(t, { display: "flex", pt: 0.25, width: "100%", children: e(g, { items: x }) }), e(t, { alignSelf: "stretch", display: "flex", flexDirection: "column", px: 1.25, py: 1, scroll: "y", children: c }), p && e(t, { alignSelf: "stretch", borderTop: `1px solid ${i.palette.gray[300]}`, display: "flex", gap: 0.5, justify: "end", px: 1.25, py: 1, children: p.map(({ icon: l, text: o, onClick: r }, s) => e(h, { icon: l, onClick: r, variant: s === 0 ? "primary" : "tertiary", width: "100%", children: o }, `${s}-${o}`)) })] });
+};
+export {
+  B as InfoSidebar
+};

package/dist/components/inputs/fields/combobox/index.js

@@ -1 +1,26 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),o=require("react-aria"),n=require("react-stately"),r=require("styled-components"),i=require("../../../../index-DpQYiwGu.js"),l=require("../../outline-container/index.js"),s=require("../../../../styles-Bl-CstrT.js"),a=require("../../utils/popover/index.js"),u=require("../../../icon/index.js"),c=require("../../../icon-button/index.js"),p=t.forwardRef((function({disabled:p=!1,error:d,helpLink:x,helpLinkText:m,helpText:f,label:h,name:b,items:j,onChange:v,required:C,tooltip:g,value:q,weight:y,...S},R){const B=r.useTheme(),[T,w]=t.useState(q??""),[P,k]=t.useState(q),[O,I]=t.useState(j),{contains:L}=o.useFilter({sensitivity:"base"}),z=t.useRef(null),N=t.useRef(null),F=t.useRef(null),M=t.useRef(null),V=t.useMemo((()=>j.map((t=>L(t.name,T)?e.jsx(n.Item,{children:t.name},t.value):null))),[L,T,j]),$=t.useCallback((e=>{w(e),k((t=>{const o=""===e?"":t;return null==v||v(o),o})),I(j.filter((t=>L(t.name,e))))}),[L,j,v]),D=t.useCallback((e=>{var t;e&&(w((null==(t=j.find((t=>t.value===e)))?void 0:t.name)??""),k(String(e)),null==v||v(e),I(j))}),[v,j]),E=n.useComboBoxState({allowsEmptyCollection:!0,inputValue:T,items:O,shouldCloseOnBlur:!0,selectedKey:P,onInputChange:$,onSelectionChange:D,children:V}),{buttonProps:K,inputProps:A,listBoxProps:G}=o.useComboBox({inputValue:T,items:O,buttonRef:z,id:b,inputRef:R,label:h,listBoxRef:N,name:b,popoverRef:M},E),{listBoxProps:H}=o.useListBox(G,E,N),{buttonProps:J}=o.useButton(K,z);return e.jsxs(l.OutlineContainer,{error:d,helpLink:x,helpLinkText:m,helpText:f,htmlFor:b,label:h,required:C,tooltip:g,weight:y,children:[e.jsxs(s.StyledTextInputContainer,{className:`${p?"disabled":""} ${d?"error":""}`,ref:F,children:[e.jsx("input",{...A,...S,"aria-invalid":d?"true":"false",ref:R}),d?e.jsx(u.Icon,{icon:"exclamation-circle",iconClass:"error-icon",iconColor:B.palette.error[500],iconSize:"xs"}):void 0,e.jsx(c.IconButton,{...J,className:"action",icon:E.isOpen?"chevron-up":"chevron-down",iconColor:B.palette.gray[400],iconSize:"xxs",iconType:"fa-light",px:.125,py:.125,ref:z,variant:"ghost"})]}),E.isOpen&&E.collection.size>0&&!p?e.jsx(a.Popover,{className:"dropdown",offset:4,placement:"bottom start",popoverRef:M,state:E,triggerRef:F,children:e.jsx(i.StyledDropdown,{...H,ref:N,children:O.map((t=>e.jsx(i.Option,{item:t,state:E},t.value)))})}):null]})}));exports.ComboBox=p;
+import { jsx as i, jsxs as I } from "react/jsx-runtime";
+import { forwardRef as J, useState as d, useRef as m, useMemo as Q, useCallback as L } from "react";
+import { useFilter as U, useComboBox as W, useListBox as X, useButton as Y } from "react-aria";
+import { Item as Z, useComboBoxState as _ } from "react-stately";
+import { useTheme as T } from "styled-components";
+import { S as k, O as ee } from "../../../../index-DrfjITyT.mjs";
+import { OutlineContainer as oe } from "../../outline-container/index.js";
+import { S as te } from "../../../../styles-lSVV9kjn.mjs";
+import { Popover as re } from "../../utils/popover/index.js";
+import { Icon as ie } from "../../../icon/index.js";
+import { IconButton as ne } from "../../../icon-button/index.js";
+const be = J(function({ disabled: x = !1, error: s, helpLink: O, helpLinkText: P, helpText: z, label: b, name: u, items: o, onChange: t, required: F, tooltip: N, value: v, weight: V, ...$ }, g) {
+  const C = T(), [a, B] = d(v ?? ""), [j, R] = d(v), [c, S] = d(o), { contains: l } = U({ sensitivity: "base" }), f = m(null), h = m(null), y = m(null), w = m(null), E = Q(() => o.map((e) => l(e.name, a) ? i(Z, { children: e.name }, e.value) : null), [l, a, o]), K = L((e) => {
+    B(e), R((n) => {
+      const p = e === "" ? "" : n;
+      return t == null || t(p), p;
+    }), S(o.filter((n) => l(n.name, e)));
+  }, [l, o, t]), M = L((e) => {
+    var n;
+    e && (B(((n = o.find((p) => p.value === e)) == null ? void 0 : n.name) ?? ""), R(String(e)), t == null || t(e), S(o));
+  }, [t, o]), r = _({ allowsEmptyCollection: !0, inputValue: a, items: c, shouldCloseOnBlur: !0, selectedKey: j, onInputChange: K, onSelectionChange: M, children: E }), { buttonProps: q, inputProps: A, listBoxProps: D } = W({ inputValue: a, items: c, buttonRef: f, id: u, inputRef: g, label: b, listBoxRef: h, name: u, popoverRef: w }, r), { listBoxProps: G } = X(D, r, h), { buttonProps: H } = Y(q, f);
+  return I(oe, { error: s, helpLink: O, helpLinkText: P, helpText: z, htmlFor: u, label: b, required: F, tooltip: N, weight: V, children: [I(te, { className: `${x ? "disabled" : ""} ${s ? "error" : ""}`, ref: y, children: [i("input", { ...A, ...$, "aria-invalid": s ? "true" : "false", ref: g }), s ? i(ie, { icon: "exclamation-circle", iconClass: "error-icon", iconColor: C.palette.error[500], iconSize: "xs" }) : void 0, i(ne, { ...H, className: "action", icon: r.isOpen ? "chevron-up" : "chevron-down", iconColor: C.palette.gray[400], iconSize: "xxs", iconType: "fa-light", px: 0.125, py: 0.125, ref: f, variant: "ghost" })] }), r.isOpen && r.collection.size > 0 && !x ? i(re, { className: "dropdown", offset: 4, placement: "bottom start", popoverRef: w, state: r, triggerRef: y, children: i(k, { ...G, ref: h, children: c.map((e) => i(ee, { item: e, state: r }, e.value)) }) }) : null] });
+});
+export {
+  be as ComboBox
+};

package/dist/components/inputs/fields/combobox/option/index.js

@@ -1 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("react/jsx-runtime"),require("react"),require("react-aria");const e=require("../../../../../index-DpQYiwGu.js");require("../../../../icon/index.js"),exports.Option=e.Option;
+import "react/jsx-runtime";
+import "react";
+import "react-aria";
+import { O } from "../../../../../index-DrfjITyT.mjs";
+import "../../../../icon/index.js";
+export {
+  O as Option
+};

package/dist/components/inputs/fields/date/calendar/cell/index.js

@@ -1 +1,16 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("@internationalized/date"),t=require("lodash"),a=require("react"),r=require("react-aria"),l=require("../../../../../../styles-DYoftbd3.js"),s=require("../../../../../icon/index.js");exports.CalendarCell=({state:n,date:d})=>{const o=a.useRef(null),c=i.isToday(d,i.getLocalTimeZone()),{cellProps:g,buttonProps:h,isSelected:u,isDisabled:x,formattedDate:j}=r.useCalendarCell({date:d},n,o),m="highlightedRange"in n&&!t.isNull(n.highlightedRange)?i.isSameDay(d,n.highlightedRange.start):u,y="highlightedRange"in n&&!t.isNull(n.highlightedRange)?i.isSameDay(d,n.highlightedRange.end):u,q=!u||x||m||y?"":"range";return e.jsx(l.DayItemTd,{id:q,...g,children:e.jsxs("div",{...h,className:`cell ${m||y?"selected":""}\n          ${x?"disabled":""} ${c?"today":""}\n          ${n.isFocused||c?"":"focused"} ${q}`,ref:o,children:[j,c?e.jsx(l.DotIconContainer,{children:e.jsx(s.Icon,{clickable:!1,icon:"circle",iconSize:"xxs"})}):void 0]})})};
+import { jsx as l, jsxs as p } from "react/jsx-runtime";
+import { isToday as u, getLocalTimeZone as R, isSameDay as c } from "@internationalized/date";
+import { isNull as m } from "lodash";
+import { useRef as b } from "react";
+import { useCalendarCell as x } from "react-aria";
+import { a as $, b as C } from "../../../../../../styles-CI-I6joH.mjs";
+import { Icon as j } from "../../../../../icon/index.js";
+const k = ({ state: e, date: i }) => {
+  const t = b(null), a = u(i, R()), { cellProps: g, buttonProps: h, isSelected: s, isDisabled: o, formattedDate: f } = x({ date: i }, e, t), r = "highlightedRange" in e && !m(e.highlightedRange) ? c(i, e.highlightedRange.start) : s, d = "highlightedRange" in e && !m(e.highlightedRange) ? c(i, e.highlightedRange.end) : s, n = !s || o || r || d ? "" : "range";
+  return l($, { id: n, ...g, children: p("div", { ...h, className: `cell ${r || d ? "selected" : ""}
+          ${o ? "disabled" : ""} ${a ? "today" : ""}
+          ${e.isFocused || a ? "" : "focused"} ${n}`, ref: t, children: [f, a ? l(C, { children: l(j, { clickable: !1, icon: "circle", iconSize: "xxs" }) }) : void 0] }) });
+};
+export {
+  k as CalendarCell
+};

package/dist/components/inputs/fields/date/calendar/grid/index.js

@@ -1 +1,15 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@internationalized/date"),t=require("react-aria"),a=require("../cell/index.js"),s=require("../../../../../../styles-DYoftbd3.js");exports.CalendarGrid=({state:n,...i})=>{const{locale:l}=t.useLocale(),{weekDays:d}=t.useCalendarGrid(i,n),c=r.getWeeksInMonth(n.visibleRange.start,l);return e.jsxs("table",{children:[e.jsx("thead",{children:e.jsx(s.WeekDaysTr,{children:d.map(((r,t)=>{const a=`key_${t}`;return e.jsx(s.DayHeaderTh,{children:r},a)}))})}),e.jsx("tbody",{children:[...new Array(c).keys()].map((r=>e.jsx(s.WeekDaysTr,{children:n.getDatesInWeek(r).map(((r,t)=>{const s=`key_${t}`;return r?e.jsx(a.CalendarCell,{date:r,state:n},s):e.jsx("td",{},s)}))},r)))})]})};
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { getWeeksInMonth as p } from "@internationalized/date";
+import { useLocale as h, useCalendarGrid as k } from "react-aria";
+import { CalendarCell as y } from "../cell/index.js";
+import { W as n, D as f } from "../../../../../../styles-CI-I6joH.mjs";
+const D = ({ state: a, ...o }) => {
+  const { locale: d } = h(), { weekDays: i } = k(o, a), l = p(a.visibleRange.start, d);
+  return m("table", { children: [e("thead", { children: e(n, { children: i.map((r, t) => e(f, { children: r }, `key_${t}`)) }) }), e("tbody", { children: [...new Array(l).keys()].map((r) => e(n, { children: a.getDatesInWeek(r).map((t, c) => {
+    const s = `key_${c}`;
+    return t ? e(y, { date: t, state: a }, s) : e("td", {}, s);
+  }) }, r)) })] });
+};
+export {
+  D as CalendarGrid
+};

package/dist/components/inputs/fields/date/calendar/header/index.js

@@ -1 +1,16 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),s=require("../../../../../../styles-DYoftbd3.js"),r=require("../../../../../icon/index.js"),o=require("../../../../utils/calendar-button/index.js");exports.Header=({state:a,prevButtonProps:n,nextButtonProps:i,title:c})=>{const l=a.focusedDate,u=t.useCallback((()=>{a.setFocusedDate(l.add({years:1}))}),[l,a]),x=t.useCallback((()=>{a.setFocusedDate(l.subtract({years:1}))}),[l,a]);return e.jsxs("div",{className:"header flex items-start",children:[e.jsx(o.Button,{icon:"chevron-left",props:n}),e.jsxs(s.TitleContainer,{children:[c,e.jsxs(s.YearSwitch,{children:[e.jsx(s.CaretButton,{"aria-label":"top",onClick:u,children:e.jsx(r.Icon,{icon:"caret-up",iconClass:"fa-sharp",iconSize:"xxss"})}),e.jsx(s.CaretButton,{"aria-label":"bottom",onClick:x,children:e.jsx(r.Icon,{icon:"caret-down",iconClass:"fa-sharp",iconSize:"xxss"})})]})]}),e.jsx(o.Button,{icon:"chevron-right",props:i})]})};
+import { jsxs as e, jsx as s } from "react/jsx-runtime";
+import { useCallback as r } from "react";
+import { T as h, Y as f, C as t } from "../../../../../../styles-CI-I6joH.mjs";
+import { Icon as c } from "../../../../../icon/index.js";
+import { Button as i } from "../../../../utils/calendar-button/index.js";
+const k = ({ state: o, prevButtonProps: n, nextButtonProps: l, title: p }) => {
+  const a = o.focusedDate, d = r(() => {
+    o.setFocusedDate(a.add({ years: 1 }));
+  }, [a, o]), m = r(() => {
+    o.setFocusedDate(a.subtract({ years: 1 }));
+  }, [a, o]);
+  return e("div", { className: "header flex items-start", children: [s(i, { icon: "chevron-left", props: n }), e(h, { children: [p, e(f, { children: [s(t, { "aria-label": "top", onClick: d, children: s(c, { icon: "caret-up", iconClass: "fa-sharp", iconSize: "xxss" }) }), s(t, { "aria-label": "bottom", onClick: m, children: s(c, { icon: "caret-down", iconClass: "fa-sharp", iconSize: "xxss" }) })] })] }), s(i, { icon: "chevron-right", props: l })] });
+};
+export {
+  k as Header
+};

package/dist/components/inputs/fields/date/calendar/index.js

@@ -1 +1,15 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@internationalized/date"),t=require("react-aria"),a=require("react-stately"),n=require("./grid/index.js"),s=require("./header/index.js"),i=require("../../../../../styles-DYoftbd3.js"),o=require("../../../../button/index.js");exports.Calendar=({onClose:l,props:d})=>{const{locale:u}=t.useLocale(),c=a.useCalendarState({...d,createCalendar:r.createCalendar,locale:u}),{prevButtonProps:x,nextButtonProps:j,title:p}=t.useCalendar(d,c);return e.jsxs("div",{className:"calendar",children:[e.jsx(s.Header,{nextButtonProps:j,prevButtonProps:x,state:c,title:p}),e.jsx(n.CalendarGrid,{state:c}),e.jsx(i.FooterContainer,{children:e.jsx(o.Button,{onClick:l,variant:"ghost",children:"Cancel"})})]})};
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { createCalendar as m } from "@internationalized/date";
+import { useLocale as p, useCalendar as d } from "react-aria";
+import { useCalendarState as c } from "react-stately";
+import { CalendarGrid as u } from "./grid/index.js";
+import { Header as f } from "./header/index.js";
+import { F as C } from "../../../../../styles-CI-I6joH.mjs";
+import { Button as x } from "../../../../button/index.js";
+const G = ({ onClose: e, props: t }) => {
+  const { locale: o } = p(), a = c({ ...t, createCalendar: m, locale: o }), { prevButtonProps: s, nextButtonProps: n, title: l } = d(t, a);
+  return i("div", { className: "calendar", children: [r(f, { nextButtonProps: n, prevButtonProps: s, state: a, title: l }), r(u, { state: a }), r(C, { children: r(x, { onClick: e, variant: "ghost", children: "Cancel" }) })] });
+};
+export {
+  G as Calendar
+};

package/dist/components/inputs/fields/date/index.js

@@ -1 +1,18 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@internationalized/date"),t=require("lodash"),i=require("react"),o=require("react-aria"),a=require("react-stately"),s=require("./calendar/index.js"),l=require("../../outline-container/index.js"),n=require("../../utils/date-selector/index.js"),u=require("../../utils/dialog/index.js"),d=require("../../utils/popover/index.js"),p=i.forwardRef((function({disabled:p=!1,error:c,required:q,label:x,name:P,tooltip:f,value:j,...b},g){const m=i.useRef(null),D=a.useDatePickerState(b),{close:h}=D,{groupProps:v,fieldProps:R,buttonProps:y,dialogProps:S,calendarProps:k}=o.useDatePicker({...b,"aria-label":x??P},D,m);return e.jsxs(l.OutlineContainer,{error:c,htmlFor:P,label:x,required:q,tooltip:f,children:[e.jsx(n.DateSelector,{buttonProps:y,datePickerRef:m,disabled:p,error:c,fieldProps:t.isNil(j)||t.isEmpty(j)||"-"===j?R:{...R,value:r.parseDate(j.replace(/\//gu,"-"))},groupProps:v,inputRef:g,name:P}),D.isOpen&&!p?e.jsx(d.Popover,{offset:8,placement:"bottom start",state:D,triggerRef:m,children:e.jsx(u.Dialog,{...S,children:e.jsx(s.Calendar,{onClose:h,props:{...k}})})}):null]})}));exports.InputDate=p;
+import { jsxs as R, jsx as e } from "react/jsx-runtime";
+import { parseDate as h } from "@internationalized/date";
+import n from "lodash";
+import { forwardRef as k, useRef as v } from "react";
+import { useDatePicker as C } from "react-aria";
+import { useDatePickerState as q } from "react-stately";
+import { Calendar as y } from "./calendar/index.js";
+import { OutlineContainer as E } from "../../outline-container/index.js";
+import { DateSelector as O } from "../../utils/date-selector/index.js";
+import { Dialog as S } from "../../utils/dialog/index.js";
+import { Popover as j } from "../../utils/popover/index.js";
+const K = k(function({ disabled: s = !1, error: i, required: f, label: p, name: t, tooltip: u, value: r, ...l }, d) {
+  const a = v(null), o = q(l), { close: c } = o, { groupProps: P, fieldProps: m, buttonProps: g, dialogProps: b, calendarProps: D } = C({ ...l, "aria-label": p ?? t }, o, a);
+  return R(E, { error: i, htmlFor: t, label: p, required: f, tooltip: u, children: [e(O, { buttonProps: g, datePickerRef: a, disabled: s, error: i, fieldProps: n.isNil(r) || n.isEmpty(r) || r === "-" ? m : { ...m, value: h(r.replace(/\//gu, "-")) }, groupProps: P, inputRef: d, name: t }), o.isOpen && !s ? e(j, { offset: 8, placement: "bottom start", state: o, triggerRef: a, children: e(S, { ...b, children: e(y, { onClose: c, props: { ...D } }) }) }) : null] });
+});
+export {
+  K as InputDate
+};

package/dist/components/inputs/fields/date-range/calendar/index.js

@@ -1 +1,16 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@internationalized/date"),t=require("react"),a=require("react-aria"),n=require("react-stately"),s=require("../../date/calendar/grid/index.js"),i=require("../../date/calendar/header/index.js"),l=require("../../../../../styles-DYoftbd3.js"),o=require("../../../../button/index.js");exports.Calendar=({onClose:d,props:u})=>{const{locale:c}=a.useLocale(),x=t.useRef(null),j=n.useRangeCalendarState({...u,createCalendar:r.createCalendar,locale:c}),{prevButtonProps:p,nextButtonProps:C,title:q}=a.useRangeCalendar(u,j,x);return e.jsxs("div",{className:"calendar-range",ref:x,children:[e.jsx(i.Header,{nextButtonProps:C,prevButtonProps:p,state:j,title:q}),e.jsx(s.CalendarGrid,{state:j}),e.jsx(l.FooterContainer,{children:e.jsx(o.Button,{onClick:d,variant:"ghost",children:"Cancel"})})]})};
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { createCalendar as p } from "@internationalized/date";
+import { useRef as c } from "react";
+import { useLocale as d, useRangeCalendar as f } from "react-aria";
+import { useRangeCalendarState as u } from "react-stately";
+import { CalendarGrid as C } from "../../date/calendar/grid/index.js";
+import { Header as x } from "../../date/calendar/header/index.js";
+import { F as h } from "../../../../../styles-CI-I6joH.mjs";
+import { Button as v } from "../../../../button/index.js";
+const L = ({ onClose: o, props: e }) => {
+  const { locale: s } = d(), t = c(null), a = u({ ...e, createCalendar: p, locale: s }), { prevButtonProps: n, nextButtonProps: l, title: m } = f(e, a, t);
+  return i("div", { className: "calendar-range", ref: t, children: [r(x, { nextButtonProps: l, prevButtonProps: n, state: a, title: m }), r(C, { state: a }), r(h, { children: r(v, { onClick: o, variant: "ghost", children: "Cancel" }) })] });
+};
+export {
+  L as Calendar
+};

package/dist/components/inputs/fields/date-range/index.js

@@ -1,3 +1,28 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("react-aria"),a=require("react-stately"),l=require("./calendar/index.js"),o=require("styled-components"),i=require("../../outline-container/index.js"),s=require("../../utils/date-selector/index.js"),n=require("../../utils/dialog/index.js"),d=require("../../utils/popover/index.js"),u=o.styled.div`
-  ${({theme:e,$disabled:r,$show:t})=>`\n    border-color: ${t?e.palette.error[500]:e.palette.gray[300]};\n    display: flex;\n    gap: ${e.spacing[.25]};\n    width: 100%;\n\n    ~ div {\n      background: ${r?e.palette.gray[200]:e.palette.white};\n    }\n  `}
-`,p=r.forwardRef((function({disabled:o=!1,error:p,label:c,name:b,required:g,tooltip:P,...x},f){const j=r.useRef(null),m=a.useDateRangePickerState(x),{close:q}=m,$=`min${b}`,h=`max${b}`,{groupProps:v,startFieldProps:R,endFieldProps:y,buttonProps:D,dialogProps:S,calendarProps:k}=t.useDateRangePicker(x,m,j);return e.jsxs(i.OutlineContainer,{error:p,htmlFor:b,label:c,required:g,tooltip:P,children:[e.jsxs(u,{$disabled:o,$show:void 0!==p,ref:j,children:[e.jsx(s.DateSelector,{buttonProps:D,datePickerRef:j,disabled:o,error:p,fieldProps:{...R,"aria-label":`${R["aria-label"]} ${b}`,validate:e=>y.value&&e>y.value?"Start date must be less than or equal to end date":null},groupProps:v,inputRef:f,name:$}),e.jsx(s.DateSelector,{buttonProps:D,datePickerRef:j,disabled:o,error:p,fieldProps:{...y,"aria-label":`${y["aria-label"]} ${b}`,validate:e=>R.value&&e<R.value?"End date must be greater than or equal to start date":null},groupProps:v,inputRef:f,name:h})]}),m.isOpen&&!o?e.jsx(d.Popover,{offset:8,placement:"bottom start",state:m,triggerRef:j,children:e.jsx(n.Dialog,{...S,children:e.jsx(l.Calendar,{onClose:q,props:{...k}})})}):null]})}));exports.InputDateRange=p;
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import { forwardRef as w, useRef as x } from "react";
+import { useDateRangePicker as q } from "react-aria";
+import { useDateRangePickerState as y } from "react-stately";
+import { Calendar as D } from "./calendar/index.js";
+import { styled as C } from "styled-components";
+import { OutlineContainer as F } from "../../outline-container/index.js";
+import { DateSelector as c } from "../../utils/date-selector/index.js";
+import { Dialog as j } from "../../utils/dialog/index.js";
+import { Popover as S } from "../../utils/popover/index.js";
+const O = C.div`
+  ${({ theme: e, $disabled: r, $show: n }) => `
+    border-color: ${n ? e.palette.error[500] : e.palette.gray[300]};
+    display: flex;
+    gap: ${e.spacing[0.25]};
+    width: 100%;
+
+    ~ div {
+      background: ${r ? e.palette.gray[200] : e.palette.white};
+    }
+  `}
+`, M = w(function({ disabled: e = !1, error: r, label: n, name: a, required: P, tooltip: g, ...p }, m) {
+  const o = x(null), l = y(p), { close: h } = l, $ = `min${a}`, v = `max${a}`, { groupProps: u, startFieldProps: s, endFieldProps: i, buttonProps: f, dialogProps: R, calendarProps: k } = q(p, l, o);
+  return b(F, { error: r, htmlFor: a, label: n, required: P, tooltip: g, children: [b(O, { $disabled: e, $show: r !== void 0, ref: o, children: [t(c, { buttonProps: f, datePickerRef: o, disabled: e, error: r, fieldProps: { ...s, "aria-label": `${s["aria-label"]} ${a}`, validate: (d) => i.value && d > i.value ? "Start date must be less than or equal to end date" : null }, groupProps: u, inputRef: m, name: $ }), t(c, { buttonProps: f, datePickerRef: o, disabled: e, error: r, fieldProps: { ...i, "aria-label": `${i["aria-label"]} ${a}`, validate: (d) => s.value && d < s.value ? "End date must be greater than or equal to start date" : null }, groupProps: u, inputRef: m, name: v })] }), l.isOpen && !e ? t(S, { offset: 8, placement: "bottom start", state: l, triggerRef: o, children: t(j, { ...R, children: t(D, { onClose: h, props: { ...k } }) }) }) : null] });
+});
+export {
+  M as InputDateRange
+};

package/dist/components/inputs/fields/date-time/calendar/index.js

@@ -1,9 +1,35 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@internationalized/date"),r=require("react-aria"),n=require("react-stately"),a=require("styled-components"),i=require("../../../utils/date-time-field/index.js"),s=require("../../date/calendar/grid/index.js"),l=require("../../date/calendar/header/index.js"),d=require("../../../../../styles-DYoftbd3.js"),o=require("../../../../button/index.js");require("../../../../typography/heading/index.js"),require("../../../../typography/span/index.js");const c=require("../../../../typography/text/index.js"),u=a.styled.div`
-  ${({theme:e})=>`\n    align-items: center;\n    border-top: 1px solid ${e.palette.gray[200]};\n    display: flex;\n    gap: ${e.spacing[1.5]};\n    justify-content: center;\n    padding: ${e.spacing[.5]} ${e.spacing[1.25]};\n  `}
-`,p=a.styled.div`
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { createCalendar as f } from "@internationalized/date";
+import { useLocale as g, useCalendar as h } from "react-aria";
+import { useCalendarState as u } from "react-stately";
+import { styled as n, useTheme as C } from "styled-components";
+import { TimeField as x } from "../../../utils/date-time-field/index.js";
+import { CalendarGrid as v } from "../../date/calendar/grid/index.js";
+import { Header as y } from "../../date/calendar/header/index.js";
+import { F as $ } from "../../../../../styles-CI-I6joH.mjs";
+import { Button as B } from "../../../../button/index.js";
+import "../../../../typography/heading/index.js";
+import "../../../../typography/span/index.js";
+import { Text as j } from "../../../../typography/text/index.js";
+const T = n.div`
+  ${({ theme: e }) => `
+    align-items: center;
+    border-top: 1px solid ${e.palette.gray[200]};
+    display: flex;
+    gap: ${e.spacing[1.5]};
+    justify-content: center;
+    padding: ${e.spacing[0.5]} ${e.spacing[1.25]};
+  `}
+`, b = n.div`
   align-items: center;
   display: flex;
-  gap: ${({theme:e})=>e.spacing[.5]};
+  gap: ${({ theme: e }) => e.spacing[0.5]};
   justify-content: flex-end;
   flex: 1 0 0;
-`;exports.Calendar=({handleTimeChange:x,onClose:g,props:j,timeState:h})=>{const y=a.useTheme(),{locale:m}=r.useLocale(),q=n.useCalendarState({...j,createCalendar:t.createCalendar,locale:m}),{prevButtonProps:C,nextButtonProps:f,title:v}=r.useCalendar(j,q);return e.jsxs("div",{className:"calendar",children:[e.jsx(l.Header,{nextButtonProps:f,prevButtonProps:C,state:q,title:v}),e.jsx(s.CalendarGrid,{state:q}),e.jsxs(u,{children:[e.jsx(c.Text,{color:y.palette.gray[800],fontWeight:"bold",size:"sm",children:"Time"}),e.jsx(p,{children:e.jsx(i.TimeField,{hourCycle:12,label:"time-field",onChange:x,value:h.timeValue})})]}),e.jsx(d.FooterContainer,{children:e.jsx(o.Button,{onClick:g,variant:"ghost",children:"Cancel"})})]})};
+`, A = ({ handleTimeChange: e, onClose: i, props: r, timeState: s }) => {
+  const l = C(), { locale: m } = g(), a = u({ ...r, createCalendar: f, locale: m }), { prevButtonProps: p, nextButtonProps: d, title: c } = h(r, a);
+  return o("div", { className: "calendar", children: [t(y, { nextButtonProps: d, prevButtonProps: p, state: a, title: c }), t(v, { state: a }), o(T, { children: [t(j, { color: l.palette.gray[800], fontWeight: "bold", size: "sm", children: "Time" }), t(b, { children: t(x, { hourCycle: 12, label: "time-field", onChange: e, value: s.timeValue }) })] }), t($, { children: t(B, { onClick: i, variant: "ghost", children: "Cancel" }) })] });
+};
+export {
+  A as Calendar
+};

package/dist/components/inputs/fields/date-time/index.js

@@ -1 +1,18 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("react-aria"),i=require("react-stately"),o=require("./calendar/index.js"),l=require("../../outline-container/index.js"),a=require("../../utils/date-selector/index.js"),s=require("../../utils/dialog/index.js"),n=require("../../utils/popover/index.js"),u=r.forwardRef((function(u,d){const c=r.useRef(null),p=i.useDatePickerState({...u,granularity:"minute",hourCycle:12,shouldCloseOnSelect:!1}),{close:m}=p,{disabled:x=!1,error:P,required:f,label:g,name:j,tooltip:q}=u,{groupProps:b,fieldProps:h,buttonProps:C,dialogProps:y,calendarProps:S}=t.useDatePicker(u,p,c),D=r.useCallback((e=>{e&&p.setTimeValue(e)}),[p]);return e.jsxs(l.OutlineContainer,{error:P,htmlFor:j,label:g,required:f,tooltip:q,children:[e.jsx(a.DateSelector,{buttonProps:C,datePickerRef:c,disabled:x,error:P,fieldProps:h,granularity:"minute",groupProps:b,inputRef:d,name:j}),p.isOpen&&!x?e.jsx(n.Popover,{offset:8,placement:"bottom start",state:p,triggerRef:c,children:e.jsx(s.Dialog,{...y,children:e.jsx(o.Calendar,{handleTimeChange:D,onClose:m,props:{...S},timeState:p})})}):null]})}));exports.InputDateTime=u;
+import { jsxs as C, jsx as r } from "react/jsx-runtime";
+import { forwardRef as R, useRef as D, useCallback as S } from "react";
+import { useDatePicker as k } from "react-aria";
+import { useDatePickerState as x } from "react-stately";
+import { Calendar as y } from "./calendar/index.js";
+import { OutlineContainer as O } from "../../outline-container/index.js";
+import { DateSelector as T } from "../../utils/date-selector/index.js";
+import { Dialog as j } from "../../utils/dialog/index.js";
+import { Popover as q } from "../../utils/popover/index.js";
+const G = R(function(o, n) {
+  const t = D(null), e = x({ ...o, granularity: "minute", hourCycle: 12, shouldCloseOnSelect: !1 }), { close: m } = e, { disabled: a = !1, error: s, required: p, label: u, name: i, tooltip: f } = o, { groupProps: d, fieldProps: c, buttonProps: P, dialogProps: g, calendarProps: b } = k(o, e, t), h = S((l) => {
+    l && e.setTimeValue(l);
+  }, [e]);
+  return C(O, { error: s, htmlFor: i, label: u, required: p, tooltip: f, children: [r(T, { buttonProps: P, datePickerRef: t, disabled: a, error: s, fieldProps: c, granularity: "minute", groupProps: d, inputRef: n, name: i }), e.isOpen && !a ? r(q, { offset: 8, placement: "bottom start", state: e, triggerRef: t, children: r(j, { ...g, children: r(y, { handleTimeChange: h, onClose: m, props: { ...b }, timeState: e }) }) }) : null] });
+});
+export {
+  G as InputDateTime
+};

package/dist/components/inputs/fields/editable/index.js

@@ -1 +1,16 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("lodash"),i=require("../../label/index.js"),t=require("../../../container/index.js"),n=require("../../../link/index.js");require("../../../typography/heading/index.js"),require("../../../typography/span/index.js");const s=require("../../../typography/text/index.js");exports.Editable=({children:l,currentValue:o,externalLink:a,isEditing:d,label:x,name:u,tooltip:h})=>{if(d)return e.jsx("div",{children:l});const c=r.isNil(o)?"":o,j=String(a??c);return e.jsxs(t.Container,{children:[e.jsx(i.Label,{htmlFor:u,label:x,tooltip:h,weight:"bold"}),j.startsWith("https://")?e.jsx(n.Link,{href:j,children:c}):e.jsx(s.Text,{size:"md",children:c})]})};
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { isNil as d } from "lodash";
+import { Label as h } from "../../label/index.js";
+import { Container as f } from "../../../container/index.js";
+import { Link as c } from "../../../link/index.js";
+import "../../../typography/heading/index.js";
+import "../../../typography/span/index.js";
+import { Text as x } from "../../../typography/text/index.js";
+const w = ({ children: e, currentValue: i, externalLink: l, isEditing: n, label: s, name: a, tooltip: m }) => {
+  if (n) return r("div", { children: e });
+  const t = d(i) ? "" : i, o = String(l ?? t);
+  return p(f, { children: [r(h, { htmlFor: a, label: s, tooltip: m, weight: "bold" }), o.startsWith("https://") ? r(c, { href: o, children: t }) : r(x, { size: "md", children: t })] });
+};
+export {
+  w as Editable
+};

package/dist/components/inputs/fields/input/index.js

@@ -1 +1,13 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),i=require("styled-components"),t=require("../../outline-container/index.js"),n=require("../../../../styles-Bl-CstrT.js"),o=require("../../../icon/index.js"),a=r.forwardRef((function({disabled:r=!1,hasIcon:a=!1,helpLink:l,helpLinkText:s,helpText:c,error:d,label:u,name:p,maskValue:x=!1,required:h,tooltip:m,type:j="text",weight:b,...f},q){const y=i.useTheme();return e.jsx(t.OutlineContainer,{error:d,helpLink:l,helpLinkText:s,helpText:c,htmlFor:p,label:u,required:h,tooltip:m,weight:b,children:e.jsxs(n.StyledTextInputContainer,{className:`${r?"disabled":""} ${d?"error":""}`,children:[a?e.jsx(o.Icon,{icon:"user",iconSize:"sm",iconType:"fa-light"}):void 0,e.jsx("input",{"aria-hidden":!1,"aria-invalid":d?"true":"false","aria-label":p,"aria-required":h,autoComplete:"off",className:x?"sr-block":"","data-testid":`${p}-input`,disabled:r,id:p,name:p,ref:q,type:j,...f}),d?e.jsx(o.Icon,{icon:"exclamation-circle",iconClass:"error-icon",iconColor:y.palette.error[500],iconSize:"xs"}):void 0]})})}));exports.Input=a;
+import { jsx as r, jsxs as k } from "react/jsx-runtime";
+import { forwardRef as T } from "react";
+import { useTheme as C } from "styled-components";
+import { OutlineContainer as L } from "../../outline-container/index.js";
+import { S as g } from "../../../../styles-lSVV9kjn.mjs";
+import { Icon as t } from "../../../icon/index.js";
+const S = T(function({ disabled: o = !1, hasIcon: l = !1, helpLink: n, helpLinkText: s, helpText: m, error: i, label: c, name: e, maskValue: d = !1, required: a, tooltip: p, type: u = "text", weight: f, ...h }, x) {
+  const b = C();
+  return r(L, { error: i, helpLink: n, helpLinkText: s, helpText: m, htmlFor: e, label: c, required: a, tooltip: p, weight: f, children: k(g, { className: `${o ? "disabled" : ""} ${i ? "error" : ""}`, children: [l ? r(t, { icon: "user", iconSize: "sm", iconType: "fa-light" }) : void 0, r("input", { "aria-hidden": !1, "aria-invalid": i ? "true" : "false", "aria-label": e, "aria-required": a, autoComplete: "off", className: d ? "sr-block" : "", "data-testid": `${e}-input`, disabled: o, id: e, name: e, ref: x, type: u, ...h }), i ? r(t, { icon: "exclamation-circle", iconClass: "error-icon", iconColor: b.palette.error[500], iconSize: "xs" }) : void 0] }) });
+});
+export {
+  S as Input
+};

package/dist/components/inputs/fields/input-file/index.js

@@ -1,12 +1,32 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("lodash"),r=require("react"),t=require("styled-components"),o=require("../../../../styles-DlmKLhPh.js"),n=require("../../outline-container/index.js"),l=require("../../../../styles-Bl-CstrT.js"),s=require("../../../button/index.js"),a=require("../../../container/index.js"),d=require("../../../icon/index.js"),c=require("../../../icon-button/index.js"),p=t.styled(o.StyledText)`
+import { jsxs as o, jsx as i } from "react/jsx-runtime";
+import { isEmpty as q } from "lodash";
+import { forwardRef as z } from "react";
+import { styled as m, useTheme as C } from "styled-components";
+import { b as S } from "../../../../styles-fH2c4cfc.mjs";
+import { OutlineContainer as j } from "../../outline-container/index.js";
+import { S as k } from "../../../../styles-lSVV9kjn.mjs";
+import { Button as I } from "../../../button/index.js";
+import { Container as A } from "../../../container/index.js";
+import { Icon as s } from "../../../icon/index.js";
+import { IconButton as B } from "../../../icon-button/index.js";
+const F = m(S)`
   white-space: nowrap;
-  margin-right: ${({theme:e})=>e.spacing[.25]};
+  margin-right: ${({ theme: t }) => t.spacing[0.25]};
   text-overflow: ellipsis;
   overflow: hidden;
   max-width: 80%;
-`,u=t.styled.input`
+`, L = m.input`
   opacity: 0;
   position: absolute;
   visibility: hidden;
   width: 0;
-`,x=r.forwardRef((function({accept:r,disabled:o=!1,error:x,label:h,helpLink:m,helpText:j,id:y,multiple:b,name:g,required:q,tooltip:f,weight:v,value:w,...S},T){const C=t.useTheme(),I=(e=>{const i=e;return i?Array.from(i).map((e=>e.name)).join(", "):""})(w);return e.jsxs(n.OutlineContainer,{error:x,helpLink:m,helpText:j,htmlFor:g,label:h,required:q,tooltip:f,weight:v,children:[e.jsxs(l.StyledTextInputContainer,{className:`${o?"disabled":""} ${x?"error":""}`,children:[e.jsx(p,{$size:"xs",children:I}),e.jsxs(a.Container,{display:"flex",gap:.5,children:[i.isEmpty(I)?void 0:e.jsx(c.IconButton,{color:C.palette.gray[400],height:"20px",icon:"xmark",iconSize:"lg",iconType:"fa-light",variant:"ghost",width:"20px"}),x&&e.jsx(d.Icon,{icon:"exclamation-circle",iconClass:"error-icon",iconColor:C.palette.error[500],iconSize:"xs"})]}),e.jsxs(s.Button,{border:o?`1px solid ${C.palette.gray[300]} !important`:"",borderRadius:"0px 8px 8px 0px !important",disabled:o,height:"40px",variant:"primary",width:"96px",children:[e.jsx(d.Icon,{icon:"search",iconSize:"sm",mr:.5}),"Add file"]})]}),e.jsx(u,{accept:r,"aria-label":g,"data-testid":g,disabled:o,id:y,multiple:b,name:g,ref:T,required:void 0,type:"file",value:void 0,...S})]})}));exports.InputFile=x;
+`, Q = z(function({ accept: t, disabled: e = !1, error: a, label: d, helpLink: c, helpText: h, id: f, multiple: x, name: r, required: u, tooltip: g, weight: b, value: w, ...y }, v) {
+  const l = C(), p = ((T) => {
+    const n = T;
+    return n ? Array.from(n).map(($) => $.name).join(", ") : "";
+  })(w);
+  return o(j, { error: a, helpLink: c, helpText: h, htmlFor: r, label: d, required: u, tooltip: g, weight: b, children: [o(k, { className: `${e ? "disabled" : ""} ${a ? "error" : ""}`, children: [i(F, { $size: "xs", children: p }), o(A, { display: "flex", gap: 0.5, children: [q(p) ? void 0 : i(B, { color: l.palette.gray[400], height: "20px", icon: "xmark", iconSize: "lg", iconType: "fa-light", variant: "ghost", width: "20px" }), a && i(s, { icon: "exclamation-circle", iconClass: "error-icon", iconColor: l.palette.error[500], iconSize: "xs" })] }), o(I, { border: e ? `1px solid ${l.palette.gray[300]} !important` : "", borderRadius: "0px 8px 8px 0px !important", disabled: e, height: "40px", variant: "primary", width: "96px", children: [i(s, { icon: "search", iconSize: "sm", mr: 0.5 }), "Add file"] })] }), i(L, { accept: t, "aria-label": r, "data-testid": r, disabled: e, id: f, multiple: x, name: r, ref: v, required: void 0, type: "file", value: void 0, ...y })] });
+});
+export {
+  Q as InputFile
+};

package/dist/components/inputs/fields/input-tags/index.js

@@ -1,7 +1,19 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("styled-components"),a=require("../../outline-container/index.js"),i=require("../../../../styles-Bl-CstrT.js"),n=require("../../../tag/index.js"),l=t.styled.input`
+import { jsx as i, jsxs as b } from "react/jsx-runtime";
+import { forwardRef as c, useMemo as g } from "react";
+import { styled as x } from "styled-components";
+import { OutlineContainer as v } from "../../outline-container/index.js";
+import { S as w } from "../../../../styles-lSVV9kjn.mjs";
+import { Tag as C } from "../../../tag/index.js";
+const j = x.input`
   border: none;
   background: transparent;
   min-width: 15rem;
   padding: 0;
   flex: 1;
-`,o=r.forwardRef((function({disabled:t=!1,error:o,label:d,name:s="input-tag",onChange:u,placeholder:p,required:c,tooltip:g,weight:b,value:h,...m},x){const f=r.useMemo((()=>h&&"string"==typeof h?h.split(",").filter(Boolean):[]),[h]);return e.jsx(a.OutlineContainer,{error:o,htmlFor:s,label:d,required:c,tooltip:g,weight:b,children:e.jsxs(i.StyledTextInputContainer,{className:`${t?"disabled":""} ${o?"error":""}`,children:[f.map((r=>e.jsx(n.Tag,{disabled:t,tagLabel:r},r))),e.jsx(l,{"aria-hidden":!1,"aria-invalid":o?"true":"false","aria-label":s,"aria-required":c,autoComplete:"off",disabled:t,name:s,onChange:u,placeholder:0===f.length?p:void 0,ref:x,type:"text",value:h,...m})]})})}));exports.InputTags=o;
+`, F = c(function({ disabled: r = !1, error: a, label: d, name: o = "input-tag", onChange: s, placeholder: m, required: t, tooltip: p, weight: f, value: e, ...u }, h) {
+  const l = g(() => e && typeof e == "string" ? e.split(",").filter(Boolean) : [], [e]);
+  return i(v, { error: a, htmlFor: o, label: d, required: t, tooltip: p, weight: f, children: b(w, { className: `${r ? "disabled" : ""} ${a ? "error" : ""}`, children: [l.map((n) => i(C, { disabled: r, tagLabel: n }, n)), i(j, { "aria-hidden": !1, "aria-invalid": a ? "true" : "false", "aria-label": o, "aria-required": t, autoComplete: "off", disabled: r, name: o, onChange: s, placeholder: l.length === 0 ? m : void 0, ref: h, type: "text", value: e, ...u })] }) });
+});
+export {
+  F as InputTags
+};