@fluidattacks/design 3.1.13 → 3.1.14

package/dist/components/card/card-with-input/index.js

@@ -1,106 +1,8 @@
-import { jsx as o, jsxs as x } from "react/jsx-runtime";
-import { useMemo as I } from "react";
-import { styled as C } from "styled-components";
-import { CardHeader as j } from "../card-header/index.js";
-import "../../inputs/fields/combobox/index.js";
-import { InputDate as y } from "../../inputs/fields/date/index.js";
-import "../../inputs/fields/date-range/index.js";
-import "../../inputs/fields/date-time/index.js";
+import "react/jsx-runtime";
+import "react";
+import { n as a } from "../../../components-C2JBXbtI.mjs";
 import "lodash";
-import "../../icon/index.js";
-import "../../../index-DwznImvK.mjs";
-import "../../container/index.js";
-import "../../link/index.js";
-import "../../typography/heading/index.js";
-import "../../typography/span/index.js";
-import "../../typography/text/index.js";
-import { Input as h } from "../../inputs/fields/input/index.js";
-import "../../inputs/fields/input-file/index.js";
-import "../../inputs/fields/input-tags/index.js";
-import { InputNumber as w } from "../../inputs/fields/number/index.js";
-import "../../inputs/fields/number-range/index.js";
-import "../../inputs/fields/phone/index.js";
-import "../../inputs/fields/text-area/index.js";
-import "../../../styles-BXFVwnWT.mjs";
-import "../../tag/index.js";
-import "../../icon-button/index.js";
-const H = C.div`
-  ${({
-  theme: t,
-  $align: r = "center",
-  $minWidth: p = "auto",
-  $minHeight: m = "auto"
-}) => `
-    display: flex;
-    background-color: ${t.palette.white};
-    border-radius: ${t.spacing[0.25]};
-    border: 1px solid ${t.palette.gray[200]};
-    flex-direction: column;
-    justify-content: center;
-    gap: ${t.spacing[0.5]};
-    min-width: ${p};
-    min-height: ${m};
-    padding: ${t.spacing[1]};
-
-    input {
-      color: ${t.palette.gray[800]};
-      line-height: ${t.spacing[1.5]};
-      text-align: ${r};
-    }
-  `}
-`, Z = ({
-  description: t,
-  disabled: r,
-  id: p,
-  align: m,
-  inputType: n = "text",
-  inputNumberProps: c,
-  minHeight: e,
-  minWidth: u,
-  name: i,
-  placeholder: a,
-  tooltip: g,
-  title: s
-}) => {
-  const $ = I(() => {
-    if (n === "text")
-      return /* @__PURE__ */ o(h, { disabled: r, name: i, placeholder: a });
-    if (n === "date")
-      return /* @__PURE__ */ o(y, { disabled: r, name: i });
-    const { decimalPlaces: d, max: f, min: l } = c ?? {};
-    return /* @__PURE__ */ o(
-      w,
-      {
-        decimalPlaces: d,
-        disabled: r,
-        max: f,
-        min: l,
-        name: i,
-        placeholder: a
-      }
-    );
-  }, [r, c, n, i, a]);
-  return /* @__PURE__ */ x(
-    H,
-    {
-      $align: m,
-      $minHeight: e,
-      $minWidth: u,
-      children: [
-        /* @__PURE__ */ o(
-          j,
-          {
-            description: t,
-            id: p,
-            title: s,
-            tooltip: g
-          }
-        ),
-        $
-      ]
-    }
-  );
-};
+import "styled-components";
 export {
-  Z as CardWithInput
+  a as CardWithInput
 };

package/dist/components/card/card-with-selector/index.js

@@ -1,71 +1,6 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { useTheme as f } from "styled-components";
-import { M as s } from "../../../index-maWH3JYC.mjs";
-import { Container as t } from "../../container/index.js";
-import { Icon as c } from "../../icon/index.js";
-import { RadioButton as h } from "../../radio-button/index.js";
-import { Heading as g } from "../../typography/heading/index.js";
-import "../../typography/span/index.js";
-import "../../typography/text/index.js";
-const z = ({
-  alt: a,
-  imageId: n,
-  icon: r,
-  selectorProps: o,
-  onClick: m,
-  title: l,
-  width: p = "fit-content"
-}) => {
-  const i = f();
-  return /* @__PURE__ */ d(
-    t,
-    {
-      alignItems: "center",
-      border: `1px solid ${i.palette.gray[200]}`,
-      borderColorHover: i.palette.gray[600],
-      borderRadius: i.spacing[0.25],
-      display: "inline-flex",
-      padding: [1, 1, 1, 1],
-      shadowHover: "md",
-      width: p,
-      children: [
-        /* @__PURE__ */ e(t, { alignSelf: "start", display: "flex", width: "fit-content", children: /* @__PURE__ */ e(
-          h,
-          {
-            name: o.name,
-            onClick: m,
-            value: o.value
-          }
-        ) }),
-        /* @__PURE__ */ d(
-          t,
-          {
-            alignItems: "center",
-            display: "flex",
-            gap: 0.5,
-            justify: "space-between",
-            ml: 1,
-            mr: 1,
-            width: "100%",
-            children: [
-              n === void 0 ? void 0 : /* @__PURE__ */ e(
-                s,
-                {
-                  alt: a ?? "card image",
-                  height: "32px",
-                  publicId: n,
-                  width: "32px"
-                }
-              ),
-              r === void 0 ? void 0 : /* @__PURE__ */ e(c, { icon: r, iconSize: "sm", iconType: "fa-light" }),
-              /* @__PURE__ */ e(g, { fontWeight: "bold", lineSpacing: 1.75, size: "xs", children: l })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
+import "react/jsx-runtime";
+import "styled-components";
+import { p as e } from "../../../components-C2JBXbtI.mjs";
 export {
-  z as CardWithSelector
+  e as CardWithSelector
 };

package/dist/components/card/card-with-switch/index.js

@@ -1,50 +1,6 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { useTheme as d } from "styled-components";
-import { CardHeader as c } from "../card-header/index.js";
-import { Container as i } from "../../container/index.js";
-import { Toggle as g } from "../../toggle/index.js";
-const y = ({
-  id: o,
-  title: a,
-  toggles: m,
-  minWidth: n = "auto",
-  height: l = "auto"
-}) => {
-  const e = d();
-  return /* @__PURE__ */ p(
-    i,
-    {
-      alignItems: "center",
-      bgColor: e.palette.white,
-      border: `1px solid ${e.palette.gray[200]}`,
-      borderRadius: e.spacing[0.25],
-      display: "flex",
-      flexDirection: "column",
-      gap: 0.5,
-      height: l,
-      justify: "center",
-      minHeight: "100px",
-      minWidth: n,
-      padding: [1.25, 1.25, 1.25, 1.25],
-      children: [
-        /* @__PURE__ */ t(c, { id: o, title: a }),
-        /* @__PURE__ */ t(
-          i,
-          {
-            display: "flex",
-            flexDirection: "column",
-            gap: 0.5,
-            minHeight: "40px",
-            width: "100%",
-            children: m.map(
-              (r) => /* @__PURE__ */ t(g, { ...r }, `$card-toggle-${r.name}`)
-            )
-          }
-        )
-      ]
-    }
-  );
-};
+import "react/jsx-runtime";
+import "styled-components";
+import { q as m } from "../../../components-C2JBXbtI.mjs";
 export {
-  y as CardWithSwitch
+  m as CardWithSwitch
 };

package/dist/components/card/index.js

@@ -1,12 +1,8 @@
-import { CardHeader as o } from "./card-header/index.js";
-import { CardWithImage as a } from "./card-with-image/index.js";
-import { CardWithInput as m } from "./card-with-input/index.js";
-import { CardWithSelector as f } from "./card-with-selector/index.js";
-import { CardWithSwitch as i } from "./card-with-switch/index.js";
+import { C as t, o as d, n as e, p as C, q as h } from "../../components-C2JBXbtI.mjs";
 export {
-  o as CardHeader,
-  a as CardWithImage,
-  m as CardWithInput,
-  f as CardWithSelector,
-  i as CardWithSwitch
+  t as CardHeader,
+  d as CardWithImage,
+  e as CardWithInput,
+  C as CardWithSelector,
+  h as CardWithSwitch
 };

package/dist/components/carousel/index.js

@@ -1,76 +1,7 @@
-import { jsxs as d, jsx as i } from "react/jsx-runtime";
-import { useCallback as u } from "react";
-import { styled as e } from "styled-components";
-import { u as m } from "../../use-carousel-CgAF78h3.mjs";
+import "react/jsx-runtime";
+import "react";
+import { r as i } from "../../components-C2JBXbtI.mjs";
 import "lodash";
-const g = e.div`
-  position: relative;
-  margin: auto;
-  overflow: hidden;
-`, v = e.div`
-  display: flex;
-  transition: transform 0.5s ease-in-out;
-  transform: translateX(
-    ${({ $currentIndex: t }) => -t * 100}%
-  );
-`, f = e.div`
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  min-width: 100%;
-`, $ = e.button`
-  ${({ theme: t, $isActive: a }) => `
-    background-color: ${a ? t.palette.primary[400] : t.palette.white};
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    height: ${t.spacing[0.75]};
-    width: ${t.spacing[0.75]};
-  `}
-`, y = e.div`
-  align-items: center;
-  display: flex;
-  gap: ${({ theme: t }) => t.spacing[0.5]};
-  justify-content: center;
-  margin-top: ${({ theme: t }) => t.spacing[2]};
-`, w = ({
-  slides: t,
-  interval: a = 300
-}) => {
-  const { cycle: s, setCycle: c, setProgress: l } = m(a, t.length), p = u(
-    (n) => () => {
-      c(n), l(0);
-    },
-    [c, l]
-  );
-  return /* @__PURE__ */ d(g, { "aria-roledescription": "carousel", children: [
-    /* @__PURE__ */ i(v, { $currentIndex: s, children: t.map((n, r) => {
-      const o = `slide-${r}`;
-      return /* @__PURE__ */ i(
-        f,
-        {
-          "aria-label": o,
-          "aria-roledescription": "slide",
-          children: n.content
-        },
-        o
-      );
-    }) }),
-    /* @__PURE__ */ i(y, { children: t.map((n, r) => {
-      const o = `nav-button-${r}`;
-      return /* @__PURE__ */ i(
-        $,
-        {
-          $isActive: r === s,
-          "aria-label": `Go to slide ${r + 1}`,
-          "data-testid": r === s ? "active" : "inactive",
-          onClick: p(r)
-        },
-        o
-      );
-    }) })
-  ] });
-};
 export {
-  w as Carousel
+  i as Carousel
 };

package/dist/components/checkbox/index.js

@@ -1,118 +1,6 @@
-import { jsxs as $, jsx as p } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { styled as b } from "styled-components";
-import { Icon as u } from "../icon/index.js";
-const f = b.label`
-  ${({ theme: a }) => `
-    align-items: start;
-    color: ${a.palette.gray[600]};
-    display: flex;
-    cursor: pointer;
-    font-family: ${a.typography.type.primary};
-    font-size: ${a.typography.text.sm};
-    font-weight: ${a.typography.weight.regular};
-    line-height: ${a.spacing[1]};
-    letter-spacing: 0;
-    position: relative;
-    text-align: left;
-
-    &[aria-disabled="true"] {
-      color: ${a.palette.gray[300]};
-      cursor: not-allowed;
-    }
-
-    input {
-      position: absolute;
-      opacity: 0;
-      cursor: pointer;
-      height: 0;
-      width: 0;
-    }
-
-    svg {
-      background-color: ${a.palette.white};
-      border-radius: ${a.spacing[0.25]};
-      border: 1px solid ${a.palette.gray[600]};
-      top: 0;
-      left: 0;
-      height: ${a.spacing[0.5]};
-      margin-right: ${a.spacing[0.5]};
-      width: ${a.spacing[0.5]};
-      padding: ${a.spacing[0.25]};
-    }
-
-    svg > path {
-      fill: ${a.palette.white};
-    }
-
-    input:checked ~ span > svg {
-      background-color: ${a.palette.primary[500]};
-      border: 1px solid ${a.palette.primary[500]};
-    }
-
-    input:disabled ~ span > svg {
-      border: 1px solid ${a.palette.gray[300]};
-      cursor: not-allowed;
-    }
-
-    input:not(:disabled):hover ~ span > svg {
-      box-shadow: 0 0 0 4px ${a.palette.gray[100]};
-    }
-
-    input:checked:disabled ~ span > svg {
-      background-color: ${a.palette.gray[300]};
-      border: 1px solid ${a.palette.gray[300]};
-    }
-
-    input:not(:disabled):hover:checked ~ span > svg {
-      box-shadow: 0 0 0 4px ${a.palette.primary[50]};
-    }
-
-    input:checked ~ span > svg > path {
-      fill: ${a.palette.white};
-    }
-
-    input:checked:disabled ~ span > svg > path {
-      fill: ${a.palette.white};
-    }
-  `}
-`, v = y(function({
-  defaultChecked: o = !1,
-  disabled: i = !1,
-  label: l,
-  name: r,
-  onChange: s,
-  onClick: n,
-  onFocus: e,
-  onKeyDown: c,
-  value: t,
-  ...d
-}, g) {
-  return /* @__PURE__ */ $(f, { "aria-disabled": i, htmlFor: r, children: [
-    /* @__PURE__ */ p(
-      "input",
-      {
-        "aria-checked": o,
-        "aria-disabled": i,
-        "aria-label": r,
-        defaultChecked: o,
-        disabled: i,
-        id: r,
-        name: r,
-        onChange: s,
-        onClick: n,
-        onFocus: e,
-        onKeyDown: c,
-        ref: g,
-        type: "checkbox",
-        value: t,
-        ...d
-      }
-    ),
-    /* @__PURE__ */ p(u, { disabled: i, icon: "check", iconSize: "sm" }),
-    l ?? t
-  ] });
-});
+import "react/jsx-runtime";
+import "react";
+import { t as p } from "../../components-C2JBXbtI.mjs";
 export {
-  v as Checkbox
+  p as Checkbox
 };

package/dist/components/cloud-image/index.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
-import { M as a } from "../../index-maWH3JYC.mjs";
+import "../../vendor-CVMqCpkZ.mjs";
 import "react";
-import "../../use-cloudinary-image-BCxwj15o.mjs";
+import { M as a } from "../../components-C2JBXbtI.mjs";
 import "lodash";
 export {
   a as CloudImage

package/dist/components/code-snippet/index.js

@@ -1,72 +1,8 @@
-import { jsxs as a, jsx as n } from "react/jsx-runtime";
-import l from "lodash";
-import { useState as g, useCallback as c, useMemo as C } from "react";
-import { useTheme as w } from "styled-components";
-import { C as x, B as y } from "../../styles-CROOwXEH.mjs";
-import { Button as S } from "../button/index.js";
-import { Container as v } from "../container/index.js";
-import { Icon as B } from "../icon/index.js";
-import { IconButton as b } from "../icon-button/index.js";
-const E = ({
-  noCodeMessage: s = "Code snippet not available",
-  snippet: o
-}) => {
-  const e = w(), [i, h] = g(!1), [d, m] = g(!0), u = c(() => {
-    h((t) => !t);
-  }, [h]), p = c(() => {
-    if (l.isNil(o) || l.isEmpty(o) || !l.isString(o))
-      return m(!1), s;
-    const t = o.split(`
-`);
-    return t.length > 8 && !i ? `${[...t].splice(0, 7).join(`
-`)}
-${t[8]}...` : (t.length < 8 && m(!1), o);
-  }, [i, o, s]), r = C(p, [p]), f = c(async () => {
-    await navigator.clipboard.writeText(r);
-  }, [r]);
-  return /* @__PURE__ */ a(
-    v,
-    {
-      bgColor: e.palette.gray[100],
-      borderRadius: "4px",
-      display: "inline-flex",
-      minWidth: "565px",
-      position: "relative",
-      children: [
-        /* @__PURE__ */ n(x, { "data-private": !0, children: /* @__PURE__ */ n("pre", { children: /* @__PURE__ */ n("code", { className: "language-none", children: r }) }) }),
-        /* @__PURE__ */ a(y, { children: [
-          /* @__PURE__ */ n(
-            b,
-            {
-              height: e.spacing[2.5],
-              icon: "copy",
-              iconColor: e.palette.gray[700],
-              iconSize: "xs",
-              iconType: "fa-light",
-              onClick: f,
-              variant: "ghost",
-              width: e.spacing[2.5]
-            }
-          ),
-          d ? /* @__PURE__ */ a(S, { onClick: u, variant: "ghost", children: [
-            i ? "Show Less" : "Show more",
-            /* @__PURE__ */ n(
-              B,
-              {
-                icon: i ? "chevron-up" : "chevron-down",
-                iconColor: e.palette.gray[700],
-                iconSize: "xxs",
-                iconType: "fa-light",
-                ml: 0.25,
-                onClick: f
-              }
-            )
-          ] }) : !1
-        ] })
-      ]
-    }
-  );
-};
+import "react/jsx-runtime";
+import "lodash";
+import "react";
+import "styled-components";
+import { u as e } from "../../components-C2JBXbtI.mjs";
 export {
-  E as CodeSnippet
+  e as CodeSnippet
 };