@fluidattacks/design 3.1.12 → 3.1.13

package/dist/components/inputs/fields/text-area/index.js

@@ -1,13 +1,81 @@
-import { jsx as i, jsxs as w } from "react/jsx-runtime";
-import { forwardRef as L } from "react";
-import { useTheme as k } from "styled-components";
-import { OutlineContainer as v } from "../../outline-container/index.js";
-import { S as T } from "../../../../styles-lSVV9kjn.mjs";
-import { Icon as q } from "../../../icon/index.js";
-const A = L(function({ disabled: o = !1, error: r, helpLink: s, helpText: n, label: d, name: e = "input-text", id: m, maskValue: p = !1, maxLength: t, placeholder: h, required: l, rows: c, tooltip: u, value: a, weight: x, ...f }, b) {
-  const g = k();
-  return i(v, { error: r, helpLink: s, helpText: n, htmlFor: e, label: d, maxLength: t, required: l, tooltip: u, value: a ? String(a) : void 0, weight: x, children: w(T, { className: `${o ? "disabled" : ""} ${r ? "error" : ""}`, children: [i("textarea", { "aria-hidden": !1, "aria-invalid": r ? "true" : "false", "aria-label": e, "aria-required": l, className: p ? "sr-block" : "", "data-testid": `${e}-text-area`, disabled: o, id: m ?? e, maxLength: t, name: e, placeholder: h, ref: b, rows: c, value: a, ...f }), r ? i(q, { icon: "exclamation-circle", iconClass: "error-icon", iconColor: g.palette.error[500], iconSize: "xs" }) : void 0] }) });
+import { jsx as i, jsxs as T } from "react/jsx-runtime";
+import { forwardRef as $ } from "react";
+import { useTheme as b } from "styled-components";
+import { OutlineContainer as j } from "../../outline-container/index.js";
+import { S as A } from "../../../../styles-BXFVwnWT.mjs";
+import { Icon as I } from "../../../icon/index.js";
+const R = $(function({
+  disabled: o = !1,
+  error: r,
+  helpLink: s,
+  helpText: l,
+  label: c,
+  name: e = "input-text",
+  id: f,
+  maskValue: d = !1,
+  maxLength: a,
+  placeholder: m,
+  required: n,
+  rows: p,
+  tooltip: x,
+  value: t,
+  weight: u,
+  ...h
+}, C) {
+  const S = b();
+  return /* @__PURE__ */ i(
+    j,
+    {
+      error: r,
+      helpLink: s,
+      helpText: l,
+      htmlFor: e,
+      label: c,
+      maxLength: a,
+      required: n,
+      tooltip: x,
+      value: t ? String(t) : void 0,
+      weight: u,
+      children: /* @__PURE__ */ T(
+        A,
+        {
+          className: `${o ? "disabled" : ""} ${r ? "error" : ""}`,
+          children: [
+            /* @__PURE__ */ i(
+              "textarea",
+              {
+                "aria-hidden": !1,
+                "aria-invalid": r ? "true" : "false",
+                "aria-label": e,
+                "aria-required": n,
+                className: d ? "sr-block" : "",
+                "data-testid": `${e}-text-area`,
+                disabled: o,
+                id: f ?? e,
+                maxLength: a,
+                name: e,
+                placeholder: m,
+                ref: C,
+                rows: p,
+                value: t,
+                ...h
+              }
+            ),
+            r ? /* @__PURE__ */ i(
+              I,
+              {
+                icon: "exclamation-circle",
+                iconClass: "error-icon",
+                iconColor: S.palette.error[500],
+                iconSize: "xs"
+              }
+            ) : void 0
+          ]
+        }
+      )
+    }
+  );
 });
 export {
-  A as TextArea
+  R as TextArea
 };

package/dist/components/inputs/label/index.js

@@ -1,11 +1,37 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { isEmpty as p } from "lodash";
-import { useTheme as f } from "styled-components";
-import { Icon as c } from "../../icon/index.js";
-import { T as x } from "../../../index-D-lcuEHY.mjs";
-const j = ({ htmlFor: i, label: l, required: e, tooltip: o, weight: t = "normal" }) => {
-  const s = f(), a = `${i}-tooltip`, m = o !== void 0 && !p(o);
-  return n("label", { className: `flex font-${t} gap-1 w-full`, htmlFor: i, children: [l, e && r(c, { icon: "asterisk", iconColor: s.palette.error[500], iconSize: "xxss" }), m ? r(x, { display: "inline-flex", icon: "circle-info", id: a, place: "top", tip: o }) : null] });
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { isEmpty as m } from "lodash";
+import { useTheme as a } from "styled-components";
+import { Icon as f } from "../../icon/index.js";
+import { T as x } from "../../../index-DwznImvK.mjs";
+const j = ({
+  htmlFor: e,
+  label: r,
+  required: t,
+  tooltip: o,
+  weight: l = "normal"
+}) => {
+  const n = a(), s = `${e}-tooltip`, p = o !== void 0 && !m(o);
+  return /* @__PURE__ */ c("label", { className: `flex font-${l} gap-1 w-full`, htmlFor: e, children: [
+    r,
+    t && /* @__PURE__ */ i(
+      f,
+      {
+        icon: "asterisk",
+        iconColor: n.palette.error[500],
+        iconSize: "xxss"
+      }
+    ),
+    p ? /* @__PURE__ */ i(
+      x,
+      {
+        display: "inline-flex",
+        icon: "circle-info",
+        id: s,
+        place: "top",
+        tip: o
+      }
+    ) : null
+  ] });
 };
 export {
   j as Label

package/dist/components/inputs/outline-container/index.js

@@ -1,17 +1,103 @@
-import { jsxs as i, jsx as e, Fragment as L } from "react/jsx-runtime";
-import { useTheme as b } from "styled-components";
-import { Label as u } from "../label/index.js";
-import { a as v } from "../../../styles-lSVV9kjn.mjs";
-import { Container as m } from "../../container/index.js";
-import { Icon as w } from "../../icon/index.js";
-import { Link as T } from "../../link/index.js";
-import { Tag as k } from "../../tag/index.js";
+import { jsxs as r, jsx as e, Fragment as b } from "react/jsx-runtime";
+import { useTheme as w } from "styled-components";
+import { Label as x } from "../label/index.js";
+import { a as C } from "../../../styles-BXFVwnWT.mjs";
+import { Container as c } from "../../container/index.js";
+import { Icon as j } from "../../icon/index.js";
+import { Link as z } from "../../link/index.js";
+import { Tag as S } from "../../tag/index.js";
 import "../../typography/heading/index.js";
 import "../../typography/span/index.js";
-import { Text as p } from "../../typography/text/index.js";
-const B = ({ children: d, error: r, helpLink: o, helpLinkText: c = "Link here", helpText: t, htmlFor: h, label: n, maxLength: l, required: f, tooltip: g, value: s, weight: x }) => {
-  const a = b(), y = s ? s.length : 0;
-  return i(v, { children: [n === void 0 ? void 0 : e(u, { htmlFor: h, label: n, required: f, tooltip: g, weight: x }), d, r || l ? i(m, { display: "flex", justify: r === void 0 ? "end" : "space-between", width: "100%", children: [r && e(p, { className: "error-msg", color: a.palette.error[500], display: "block", lineSpacing: 1, size: "sm", children: r }), l && e(k, { priority: "low", tagLabel: `${y}/${l}`, variant: "error" })] }) : void 0, t || o ? i(m, { alignItems: "center", display: "flex", gap: 0.25, width: "100%", children: [t && i(L, { children: [e(w, { icon: "circle-info", iconColor: a.palette.gray[400], iconSize: "xxs", iconType: "fa-light" }), e(p, { color: a.palette.gray[400], display: "inline-block", size: "sm", children: t })] }), o && e(T, { href: o, children: c })] }) : void 0] });
+import { Text as d } from "../../typography/text/index.js";
+const B = ({
+  children: s,
+  error: i,
+  helpLink: n,
+  helpLinkText: f = "Link here",
+  helpText: o,
+  htmlFor: p,
+  label: m,
+  maxLength: t,
+  required: g,
+  tooltip: h,
+  value: a,
+  weight: u
+}) => {
+  const l = w(), y = a ? a.length : 0;
+  return /* @__PURE__ */ r(C, { children: [
+    m === void 0 ? void 0 : /* @__PURE__ */ e(
+      x,
+      {
+        htmlFor: p,
+        label: m,
+        required: g,
+        tooltip: h,
+        weight: u
+      }
+    ),
+    s,
+    i || t ? /* @__PURE__ */ r(
+      c,
+      {
+        display: "flex",
+        justify: i === void 0 ? "end" : "space-between",
+        width: "100%",
+        children: [
+          i && /* @__PURE__ */ e(
+            d,
+            {
+              className: "error-msg",
+              color: l.palette.error[500],
+              display: "block",
+              lineSpacing: 1,
+              size: "sm",
+              children: i
+            }
+          ),
+          t && /* @__PURE__ */ e(
+            S,
+            {
+              priority: "low",
+              tagLabel: `${y}/${t}`,
+              variant: "error"
+            }
+          )
+        ]
+      }
+    ) : void 0,
+    o || n ? /* @__PURE__ */ r(
+      c,
+      {
+        alignItems: "center",
+        display: "flex",
+        gap: 0.25,
+        width: "100%",
+        children: [
+          o && /* @__PURE__ */ r(b, { children: [
+            /* @__PURE__ */ e(
+              j,
+              {
+                icon: "circle-info",
+                iconColor: l.palette.gray[400],
+                iconSize: "xxs",
+                iconType: "fa-light"
+              }
+            ),
+            /* @__PURE__ */ e(
+              d,
+              {
+                color: l.palette.gray[400],
+                display: "inline-block",
+                size: "sm",
+                children: o
+              }
+            )
+          ] }),
+          n && /* @__PURE__ */ e(z, { href: n, children: f })
+        ]
+      }
+    ) : void 0
+  ] });
 };
 export {
   B as OutlineContainer

package/dist/components/inputs/utils/action-button/index.js

@@ -1,10 +1,31 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { S as e } from "../../../../styles-7_q7nHce.mjs";
-import { Icon as m } from "../../../icon/index.js";
-const b = s(function({ disabled: n, icon: o, margin: a, onClick: r, ...t }, c) {
-  return i(e, { $margin: a, "aria-label": o, className: "action-btn", disabled: n, onClick: r, ref: c, type: "button", ...t, children: i(m, { icon: o, iconClass: "action", iconSize: "xs", iconType: "fa-light" }) });
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+import { S as m } from "../../../../styles-D1eTIklB.mjs";
+import { Icon as f } from "../../../icon/index.js";
+const d = e(function({ disabled: n, icon: t, margin: i, onClick: r, ...a }, c) {
+  return /* @__PURE__ */ o(
+    m,
+    {
+      $margin: i,
+      "aria-label": t,
+      className: "action-btn",
+      disabled: n,
+      onClick: r,
+      ref: c,
+      type: "button",
+      ...a,
+      children: /* @__PURE__ */ o(
+        f,
+        {
+          icon: t,
+          iconClass: "action",
+          iconSize: "xs",
+          iconType: "fa-light"
+        }
+      )
+    }
+  );
 });
 export {
-  b as ActionButton
+  d as ActionButton
 };

package/dist/components/inputs/utils/calendar-button/index.js

@@ -1,13 +1,37 @@
-import { jsx as a } from "react/jsx-runtime";
-import { useRef as s } from "react";
-import { useButton as n } from "react-aria";
-import { C as l } from "../../../../styles-7_q7nHce.mjs";
-import { theme as p } from "../../../colors/index.js";
-import { Icon as d } from "../../../icon/index.js";
-const x = ({ disabled: o = !1, icon: r, props: i }) => {
-  const e = s(null), { buttonProps: t } = n(i, e);
-  return a(l, { ...t, $disabled: o, $focus: !!t["aria-expanded"], $header: r === "calendar" || r === "calendar-clock", disabled: o, ref: e, type: "button", children: a(d, { icon: r, iconColor: p.palette.gray[o ? 400 : 700], iconSize: "xs", iconType: "fa-light" }) });
+import { jsx as n } from "react/jsx-runtime";
+import { useRef as m } from "react";
+import { useButton as c } from "react-aria";
+import { C as p } from "../../../../styles-D1eTIklB.mjs";
+import { theme as f } from "../../../colors/index.js";
+import { Icon as i } from "../../../icon/index.js";
+const B = ({
+  disabled: o = !1,
+  icon: t,
+  props: a
+}) => {
+  const r = m(null), { buttonProps: e } = c(a, r);
+  return /* @__PURE__ */ n(
+    p,
+    {
+      ...e,
+      $disabled: o,
+      $focus: !!e["aria-expanded"],
+      $header: t === "calendar" || t === "calendar-clock",
+      disabled: o,
+      ref: r,
+      type: "button",
+      children: /* @__PURE__ */ n(
+        i,
+        {
+          icon: t,
+          iconColor: f.palette.gray[o ? 400 : 700],
+          iconSize: "xs",
+          iconType: "fa-light"
+        }
+      )
+    }
+  );
 };
 export {
-  x as Button
+  B as Button
 };

package/dist/components/inputs/utils/date-selector/index.js

@@ -1,8 +1,62 @@
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import { S as m } from "../../../../styles-lSVV9kjn.mjs";
-import { Button as c } from "../calendar-button/index.js";
-import { DateField as f } from "../date-time-field/index.js";
-const P = ({ error: a, buttonProps: t, datePickerRef: i, disabled: r = !1, granularity: o = "day", fieldProps: d, groupProps: l, inputRef: p, name: s, ...n }) => u(m, { ...l, className: `${r ? "disabled" : ""} ${a ? "error" : ""}`, ref: i, children: [e(f, { disabled: r, error: a != null, props: { ...d, autoFocus: !1, granularity: o, shouldForceLeadingZeros: !0 } }), e(c, { disabled: r, icon: o === "minute" ? "calendar-clock" : "calendar", props: t }), e("input", { ...n, "aria-label": s, className: "date-input", disabled: r, name: s, ref: p, type: "text", value: "" })] });
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
+import { S as m } from "../../../../styles-BXFVwnWT.mjs";
+import { Button as f } from "../calendar-button/index.js";
+import { DateField as d } from "../date-time-field/index.js";
+const j = ({
+  error: t,
+  buttonProps: n,
+  datePickerRef: s,
+  disabled: e = !1,
+  granularity: o = "day",
+  fieldProps: p,
+  groupProps: c,
+  inputRef: l,
+  name: a,
+  ...i
+}) => /* @__PURE__ */ u(
+  m,
+  {
+    ...c,
+    className: `${e ? "disabled" : ""} ${t ? "error" : ""}`,
+    ref: s,
+    children: [
+      /* @__PURE__ */ r(
+        d,
+        {
+          disabled: e,
+          error: t != null,
+          props: {
+            ...p,
+            autoFocus: !1,
+            granularity: o,
+            shouldForceLeadingZeros: !0
+          }
+        }
+      ),
+      /* @__PURE__ */ r(
+        f,
+        {
+          disabled: e,
+          icon: o === "minute" ? "calendar-clock" : "calendar",
+          props: n
+        }
+      ),
+      /* @__PURE__ */ r(
+        "input",
+        {
+          ...i,
+          "aria-label": a,
+          className: "date-input",
+          disabled: e,
+          name: a,
+          ref: l,
+          type: "text",
+          value: ""
+        }
+      )
+    ]
+  }
+);
 export {
-  P as DateSelector
+  j as DateSelector
 };

package/dist/components/inputs/utils/date-time-field/index.js

@@ -1,32 +1,133 @@
-import { jsxs as u, jsx as o } from "react/jsx-runtime";
-import { createCalendar as b } from "@internationalized/date";
-import { isNil as d } from "lodash";
-import { useRef as y, useCallback as f, useState as x } from "react";
-import { useDateField as S, useTimeField as C, useDateSegment as A } from "react-aria";
-import { useDateFieldState as F, useTimeFieldState as T } from "react-stately";
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { createCalendar as D } from "@internationalized/date";
+import { isNil as u } from "lodash";
+import { useRef as y, useCallback as P, useState as S } from "react";
+import { useDateField as C, useTimeField as F, useDateSegment as T } from "react-aria";
+import { useDateFieldState as b, useTimeFieldState as k } from "react-stately";
 import { useTheme as M } from "styled-components";
-import { I as k, T as D, a as g, b as h } from "../../../../styles-7_q7nHce.mjs";
-import { Icon as N } from "../../../icon/index.js";
-const P = ({ segment: i, state: m }) => {
-  const e = M(), a = y(null), t = { ...i, placeholder: { day: "dd", dayPeriod: "(AM/PM)", era: "", hour: "hh", literal: "", minute: "mm", month: "mm", second: "", timeZoneName: "", year: "yyyy" }[i.type] }, { segmentProps: r } = A(t, m, a), c = e.palette.gray[t.isEditable ? 800 : 500];
-  return o("div", { ...t.type !== "literal" && { ...r, className: "segment-cell" }, ref: a, style: t.type === "literal" ? void 0 : { color: t.isPlaceholder ? e.palette.gray[400] : c }, children: t.isPlaceholder ? t.placeholder : t.text });
-}, B = ({ disabled: i, error: m = !1, props: e }) => {
-  const a = M(), t = y(null), r = F({ ...e, createCalendar: b, locale: "en-US" }), { fieldProps: c } = S(e, r, t), p = f((l) => {
-    const n = document.getElementsByClassName("segment-cell"), s = l.currentTarget;
-    Object.values(n).some((v) => v.contains(s)) || (l.preventDefault(), l.stopPropagation());
-  }, []);
-  return u(k, { ...c, onClick: p, children: [o("div", { className: "flex flex-row", style: { color: a.palette.gray[d(r.value) ? 400 : 800] }, tabIndex: -1, children: r.segments.map((l, n) => {
-    const s = `key_${n}`;
-    return o(P, { segment: { ...l, isEditable: !i }, state: r }, s);
-  }) }), m ? o(N, { icon: "exclamation-circle", iconColor: a.palette.error[500], iconSize: "xs" }) : void 0] });
-}, L = (i) => {
-  const m = y(null), e = T({ ...i, locale: "en-US", shouldForceLeadingZeros: !0 }), { timeValue: a } = e, t = !d(a) && a.hour < 12 ? "AM" : "PM", [r, c] = x(d(a) ? "AM" : t), { fieldProps: p } = C(i, e, m), l = f((n) => {
-    const s = n.currentTarget.name;
-    s !== r && (d(a) || (s === "AM" ? e.setSegment("dayPeriod", 0) : s === "PM" && e.setSegment("dayPeriod", 12))), c(s);
-  }, [r, e, a]);
-  return u(D, { children: [o(g, { ...p, ref: m, children: e.segments.slice(0, -2).map((n, s) => o(P, { segment: n, state: e }, `key_${s}`)) }), u(g, { children: [o(h, { id: r === "AM" ? "active" : "", name: "AM", onClick: l, type: "button", children: "AM" }), o(h, { id: r === "PM" ? "active" : "", name: "PM", onClick: l, type: "button", children: "PM" })] })] });
+import { I as A, T as v, a as h, b as g } from "../../../../styles-D1eTIklB.mjs";
+import { Icon as I } from "../../../icon/index.js";
+const x = ({
+  segment: i,
+  state: a
+}) => {
+  const t = M(), n = y(null), e = { ...i, placeholder: {
+    day: "dd",
+    dayPeriod: "(AM/PM)",
+    era: "",
+    hour: "hh",
+    literal: "",
+    minute: "mm",
+    month: "mm",
+    second: "",
+    timeZoneName: "",
+    year: "yyyy"
+  }[i.type] }, { segmentProps: c } = T(e, a, n), m = t.palette.gray[e.isEditable ? 800 : 500];
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ...e.type !== "literal" && {
+        ...c,
+        className: "segment-cell"
+      },
+      ref: n,
+      style: e.type === "literal" ? void 0 : {
+        color: e.isPlaceholder ? t.palette.gray[400] : m
+      },
+      children: e.isPlaceholder ? e.placeholder : e.text
+    }
+  );
+}, $ = ({
+  disabled: i,
+  error: a = !1,
+  props: t
+}) => {
+  const n = M(), d = y(null), e = b({
+    ...t,
+    createCalendar: D,
+    locale: "en-US"
+  }), { fieldProps: c } = C(t, e, d), m = P(
+    (l) => {
+      const s = document.getElementsByClassName("segment-cell"), o = l.currentTarget;
+      Object.values(s).some(
+        (p) => p.contains(o)
+      ) || (l.preventDefault(), l.stopPropagation());
+    },
+    []
+  );
+  return /* @__PURE__ */ f(A, { ...c, onClick: m, children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: "flex flex-row",
+        style: { color: n.palette.gray[u(e.value) ? 400 : 800] },
+        tabIndex: -1,
+        children: e.segments.map((l, s) => {
+          const o = `key_${s}`;
+          return /* @__PURE__ */ r(
+            x,
+            {
+              segment: { ...l, isEditable: !i },
+              state: e
+            },
+            o
+          );
+        })
+      }
+    ),
+    a ? /* @__PURE__ */ r(
+      I,
+      {
+        icon: "exclamation-circle",
+        iconColor: n.palette.error[500],
+        iconSize: "xs"
+      }
+    ) : void 0
+  ] });
+}, w = (i) => {
+  const a = y(null), t = k({
+    ...i,
+    locale: "en-US",
+    shouldForceLeadingZeros: !0
+  }), { timeValue: n } = t, d = !u(n) && n.hour < 12 ? "AM" : "PM", [e, c] = S(
+    u(n) ? "AM" : d
+  ), { fieldProps: m } = F(i, t, a), l = P(
+    (s) => {
+      const o = s.currentTarget.name;
+      o !== e && (u(n) || (o === "AM" ? t.setSegment("dayPeriod", 0) : o === "PM" && t.setSegment("dayPeriod", 12))), c(o);
+    },
+    [e, t, n]
+  );
+  return /* @__PURE__ */ f(v, { children: [
+    /* @__PURE__ */ r(h, { ...m, ref: a, children: t.segments.slice(0, -2).map((s, o) => {
+      const p = `key_${o}`;
+      return /* @__PURE__ */ r(x, { segment: s, state: t }, p);
+    }) }),
+    /* @__PURE__ */ f(h, { children: [
+      /* @__PURE__ */ r(
+        g,
+        {
+          id: e === "AM" ? "active" : "",
+          name: "AM",
+          onClick: l,
+          type: "button",
+          children: "AM"
+        }
+      ),
+      /* @__PURE__ */ r(
+        g,
+        {
+          id: e === "PM" ? "active" : "",
+          name: "PM",
+          onClick: l,
+          type: "button",
+          children: "PM"
+        }
+      )
+    ] })
+  ] });
 };
 export {
-  B as DateField,
-  L as TimeField
+  $ as DateField,
+  w as TimeField
 };

package/dist/components/inputs/utils/dialog/index.js

@@ -1,11 +1,14 @@
 import { jsx as e } from "react/jsx-runtime";
-import { useRef as i } from "react";
-import { useDialog as m } from "react-aria";
-import { D as t } from "../../../../styles-7_q7nHce.mjs";
-const c = ({ children: r, ...s }) => {
-  const o = i(null), { dialogProps: a } = m(s, o);
-  return e(t, { ...a, ref: o, children: r });
+import { useRef as m } from "react";
+import { useDialog as s } from "react-aria";
+import { D as a } from "../../../../styles-D1eTIklB.mjs";
+const g = ({
+  children: r,
+  ...i
+}) => {
+  const o = m(null), { dialogProps: t } = s(i, o);
+  return /* @__PURE__ */ e(a, { ...t, ref: o, children: r });
 };
 export {
-  c as Dialog
+  g as Dialog
 };