@fluidattacks/design 3.1.11 → 3.1.13

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

@@ -1 +1,30 @@
-"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 l, jsx as r } from "react/jsx-runtime";
+import { createCalendar as s } from "@internationalized/date";
+import { useLocale as c, useCalendar as d } from "react-aria";
+import { useCalendarState as p } from "react-stately";
+import { CalendarGrid as f } from "./grid/index.js";
+import { Header as C } from "./header/index.js";
+import { F as u } from "../../../../../styles-BlHspTrz.mjs";
+import { Button as h } from "../../../../button/index.js";
+const G = ({
+  onClose: e,
+  props: t
+}) => {
+  const { locale: a } = c(), o = p({ ...t, createCalendar: s, locale: a }), { prevButtonProps: n, nextButtonProps: i, title: m } = d(t, o);
+  return /* @__PURE__ */ l("div", { className: "calendar", children: [
+    /* @__PURE__ */ r(
+      C,
+      {
+        nextButtonProps: i,
+        prevButtonProps: n,
+        state: o,
+        title: m
+      }
+    ),
+    /* @__PURE__ */ r(f, { state: o }),
+    /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(h, { onClick: e, variant: "ghost", children: "Cancel" }) })
+  ] });
+};
+export {
+  G as Calendar
+};

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

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

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

@@ -1 +1,35 @@
-"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 s, jsx as r } from "react/jsx-runtime";
+import { createCalendar as c } from "@internationalized/date";
+import { useRef as d } from "react";
+import { useLocale as f, useRangeCalendar as p } from "react-aria";
+import { useRangeCalendarState as u } from "react-stately";
+import { CalendarGrid as C } from "../../date/calendar/grid/index.js";
+import { Header as g } from "../../date/calendar/header/index.js";
+import { F as h } from "../../../../../styles-BlHspTrz.mjs";
+import { Button as x } from "../../../../button/index.js";
+const L = ({
+  onClose: a,
+  props: o
+}) => {
+  const { locale: n } = f(), t = d(null), e = u({ ...o, createCalendar: c, locale: n }), { prevButtonProps: l, nextButtonProps: m, title: i } = p(
+    o,
+    e,
+    t
+  );
+  return /* @__PURE__ */ s("div", { className: "calendar-range", ref: t, children: [
+    /* @__PURE__ */ r(
+      g,
+      {
+        nextButtonProps: m,
+        prevButtonProps: l,
+        state: e,
+        title: i
+      }
+    ),
+    /* @__PURE__ */ r(C, { state: e }),
+    /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(x, { onClick: a, variant: "ghost", children: "Cancel" }) })
+  ] });
+};
+export {
+  L as Calendar
+};

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

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

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

@@ -1,9 +1,64 @@
-"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 i, jsx as t } from "react/jsx-runtime";
+import { createCalendar as f } from "@internationalized/date";
+import { useLocale as u, useCalendar as g } from "react-aria";
+import { useCalendarState as C } from "react-stately";
+import { styled as n, useTheme as x } from "styled-components";
+import { TimeField as h } from "../../../utils/date-time-field/index.js";
+import { CalendarGrid as y } from "../../date/calendar/grid/index.js";
+import { Header as v } from "../../date/calendar/header/index.js";
+import { F as $ } from "../../../../../styles-BlHspTrz.mjs";
+import { Button as T } from "../../../../button/index.js";
+import "../../../../typography/heading/index.js";
+import "../../../../typography/span/index.js";
+import { Text as j } from "../../../../typography/text/index.js";
+const b = 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"})})]})};
+`, w = ({
+  handleTimeChange: e,
+  onClose: a,
+  props: o,
+  timeState: l
+}) => {
+  const s = x(), { locale: m } = u(), r = C({ ...o, createCalendar: f, locale: m }), { prevButtonProps: c, nextButtonProps: d, title: p } = g(o, r);
+  return /* @__PURE__ */ i("div", { className: "calendar", children: [
+    /* @__PURE__ */ t(
+      v,
+      {
+        nextButtonProps: d,
+        prevButtonProps: c,
+        state: r,
+        title: p
+      }
+    ),
+    /* @__PURE__ */ t(y, { state: r }),
+    /* @__PURE__ */ i(b, { children: [
+      /* @__PURE__ */ t(j, { color: s.palette.gray[800], fontWeight: "bold", size: "sm", children: "Time" }),
+      /* @__PURE__ */ t(B, { children: /* @__PURE__ */ t(
+        h,
+        {
+          hourCycle: 12,
+          label: "time-field",
+          onChange: e,
+          value: l.timeValue
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ t($, { children: /* @__PURE__ */ t(T, { onClick: a, variant: "ghost", children: "Cancel" }) })
+  ] });
+};
+export {
+  w as Calendar
+};

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

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

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

@@ -1 +1,28 @@
-"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 h } from "react/jsx-runtime";
+import { isNil as l } from "lodash";
+import { Label as d } from "../../label/index.js";
+import { Container as c } from "../../../container/index.js";
+import { Link as a } from "../../../link/index.js";
+import "../../../typography/heading/index.js";
+import "../../../typography/span/index.js";
+import { Text as x } from "../../../typography/text/index.js";
+const z = ({
+  children: m,
+  currentValue: i,
+  externalLink: e,
+  isEditing: n,
+  label: s,
+  name: p,
+  tooltip: f
+}) => {
+  if (n)
+    return /* @__PURE__ */ r("div", { children: m });
+  const t = l(i) ? "" : i, o = String(e ?? t);
+  return /* @__PURE__ */ h(c, { children: [
+    /* @__PURE__ */ r(d, { htmlFor: p, label: s, tooltip: f, weight: "bold" }),
+    o.startsWith("https://") ? /* @__PURE__ */ r(a, { href: o, children: t }) : /* @__PURE__ */ r(x, { size: "md", children: t })
+  ] });
+};
+export {
+  z as Editable
+};

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

@@ -1 +1,77 @@
-"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 o, jsxs as I } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
+import { useTheme as T } from "styled-components";
+import { OutlineContainer as $ } from "../../outline-container/index.js";
+import { S as b } from "../../../../styles-BXFVwnWT.mjs";
+import { Icon as n } from "../../../icon/index.js";
+const w = S(function({
+  disabled: t = !1,
+  hasIcon: a = !1,
+  helpLink: l,
+  helpLinkText: s,
+  helpText: c,
+  error: i,
+  label: f,
+  name: e,
+  maskValue: m = !1,
+  required: r,
+  tooltip: p,
+  type: d = "text",
+  weight: u,
+  ...x
+}, h) {
+  const C = T();
+  return /* @__PURE__ */ o(
+    $,
+    {
+      error: i,
+      helpLink: l,
+      helpLinkText: s,
+      helpText: c,
+      htmlFor: e,
+      label: f,
+      required: r,
+      tooltip: p,
+      weight: u,
+      children: /* @__PURE__ */ I(
+        b,
+        {
+          className: `${t ? "disabled" : ""} ${i ? "error" : ""}`,
+          children: [
+            a ? /* @__PURE__ */ o(n, { icon: "user", iconSize: "sm", iconType: "fa-light" }) : void 0,
+            /* @__PURE__ */ o(
+              "input",
+              {
+                "aria-hidden": !1,
+                "aria-invalid": i ? "true" : "false",
+                "aria-label": e,
+                "aria-required": r,
+                autoComplete: "off",
+                className: m ? "sr-block" : "",
+                "data-testid": `${e}-input`,
+                disabled: t,
+                id: e,
+                name: e,
+                ref: h,
+                type: d,
+                ...x
+              }
+            ),
+            i ? /* @__PURE__ */ o(
+              n,
+              {
+                icon: "exclamation-circle",
+                iconClass: "error-icon",
+                iconColor: C.palette.error[500],
+                iconSize: "xs"
+              }
+            ) : void 0
+          ]
+        }
+      )
+    }
+  );
+});
+export {
+  w as Input
+};

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

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