@fluidattacks/design 3.1.12 → 3.1.13

package/dist/index-DrfjITyT.mjs

@@ -1,61 +0,0 @@
-import { jsxs as p, jsx as c } from "react/jsx-runtime";
-import { useRef as d } from "react";
-import { useOption as g } from "react-aria";
-import { styled as o } from "styled-components";
-import { Icon as m } from "./components/icon/index.js";
-const w = o.ul`
-  ${({ theme: n }) => `
-    align-self: center;
-    background: ${n.palette.white};
-    border: 1px solid ${n.palette.gray[200]};
-    border-radius: ${n.spacing[0.25]};
-    box-shadow: ${n.shadows.md};
-    list-style: none;
-    max-height: 200px;
-    min-width: 240px;
-    overflow: hidden auto;
-    scrollbar-color: ${n.palette.gray[600]} ${n.palette.gray[100]};
-    scroll-padding: ${n.spacing[0.5]};
-    width: 95%;
-  `}
-`, y = o.li`
-  ${({ theme: n }) => `
-    align-items: center;
-    color: ${n.palette.gray[800]};
-    cursor: pointer;
-    display: flex;
-    font-family: ${n.typography.type.primary};
-    font-size: ${n.typography.text.sm};
-    gap: ${n.spacing[0.5]};
-    justify-content: space-between;
-    line-height: ${n.spacing[1.25]};
-    padding: ${n.spacing[0.25]} ${n.spacing[1]};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    span {
-      color: ${n.palette.gray[700]};
-    }
-
-    &:hover {
-      background: ${n.palette.gray[100]};
-    }
-
-    &.selected {
-      background: ${n.palette.gray[200]};
-    }
-
-    &.disabled {
-      color: ${n.palette.gray[400]};
-      cursor: not-allowed;
-    }
-  `}
-`, b = ({ item: n, state: a }) => {
-  const e = d(null), { optionProps: s, isSelected: t, isFocused: i, isDisabled: r } = g({ key: n.value }, a, e), l = [t ? "selected" : "", i ? "focused" : "", r ? "disabled" : ""].join(" ");
-  return p(y, { ...s, className: l, ref: e, children: [n.name, t ? c(m, { icon: "check", iconSize: "xxs", iconType: "fa-light" }) : void 0] });
-};
-export {
-  b as O,
-  w as S
-};

package/dist/styles-7_q7nHce.mjs

@@ -1,110 +0,0 @@
-import { styled as n, css as o } from "styled-components";
-import { a as s } from "./styles-C3cZmKVJ.mjs";
-import "react/jsx-runtime";
-const c = n(s)`
-  align-items: center;
-  background-color: inherit;
-  border-color: inherit;
-  display: flex;
-  height: 38px;
-  justify-content: center;
-  width: 40px;
-  margin: ${({ $margin: e = "0" }) => o`
-    ${e}
-  `};
-
-  &:hover:not(:disabled) {
-    background-color: ${({ theme: e }) => e.palette.gray[100]};
-    cursor: pointer;
-  }
-`, g = n.div`
-  ${({ theme: e }) => `
-    align-items: flex-start;
-    background: ${e.palette.white};
-    border: 1px solid ${e.palette.gray[200]};
-    border-radius: ${e.spacing[0.5]};
-    box-shadow: ${e.shadows.md};
-    display: inline-flex;
-    flex-direction: column;
-    gap: ${e.spacing[0.25]};
-    height: auto;
-    padding: ${e.spacing[0.25]};
-    width: 292px;
-  `}
-`, h = n.button`
-  ${({ theme: e, $disabled: a, $focus: i, $header: t }) => {
-  const r = i ? "34px" : "40px";
-  return `
-      align-items: center;
-      border-radius: ${t ? `0 ${e.spacing[0.5]} ${e.spacing[0.5]} 0` : "4px"};
-      border-left: inherit;
-      display: flex;
-      height: ${t ? "38px" : r};
-      justify-content: center;
-      outline: none;
-      width: ${t ? "38px" : "40px"};
-
-      &:hover {
-        background-color: ${e.palette.gray[a ? 500 : 100]};
-      }
-    `;
-}}
-`, $ = n.div`
-  ${({ theme: e }) => `
-    align-items: center;
-    background: transparent;
-    border-radius: ${e.spacing[0.5]} 0 0 ${e.spacing[0.5]};
-    border-color: inherit;
-    display: flex;
-    height: 100%;
-    justify-content: space-between;
-    width: calc(100% - 40px);
-  `}
-`, x = n.div`
-  align-items: center;
-  display: flex;
-  justify-content: flex-end;
-  gap: ${({ theme: e }) => e.spacing[0.5]};
-  flex: 1 0 0;
-`, u = n.div`
-  ${({ theme: e }) => `
-    align-items: center;
-    align-self: stretch;
-    background-color: ${e.palette.gray[200]};
-    border-radius: ${e.spacing[0.25]};
-    display: flex;
-    font-family: ${e.typography.type.primary};
-    gap: ${e.spacing[0.25]};
-    line-height: ${e.spacing[1.5]};
-    padding: 2px ${e.spacing[0.25]};
-  `}
-`, y = n.button`
-  ${({ theme: e }) => `
-    align-items: center;
-    background-color: inherit;
-    border: 0.5px solid ${e.palette.gray[200]};
-    border-radius: 7px;
-    color: ${e.palette.gray[800]};
-    cursor: pointer;
-    display: flex;
-    font-weight: ${e.typography.weight.regular};
-    justify-content: center;
-    gap: 10px;
-    padding: 2px 10px;
-
-    &#active {
-      background-color: ${e.palette.white};
-      box-shadow: ${e.shadows.md};
-      font-weight: ${e.typography.weight.bold};
-    }
-  `}
-`;
-export {
-  h as C,
-  g as D,
-  $ as I,
-  c as S,
-  x as T,
-  u as a,
-  y as b
-};

package/dist/styles-BA0WIQL-.mjs

@@ -1,74 +0,0 @@
-import { NavLink as e } from "react-router-dom";
-import { styled as n } from "styled-components";
-const r = n.button`
-  ${({ theme: t }) => `
-    align-items: center;
-    color: ${t.palette.gray[500]};
-    display: flex;
-    gap: ${t.spacing[0.625]};
-    justify-content: center;
-    padding: ${t.spacing[0.75]};
-    text-align: center;
-    width: 151px;
-
-    &.active {
-      color: ${t.palette.gray[800]};
-      border-bottom: 3px solid ${t.palette.primary[400]};
-    }
-
-    &:hover {
-      color: ${t.palette.gray[800]};
-    }
-  `}
-`, p = n.div`
-  ${({ theme: t }) => `
-    align-items: center;
-    border-bottom: 2px solid ${t.palette.gray[200]};
-    display: flex;
-    gap: ${t.spacing[3]};
-    height: ${t.spacing[3]};
-    width: max-content;
-  `}
-`, i = n(e)`
-  ${({ theme: t }) => `
-    align-items: center;
-    background: transparent;
-    cursor: pointer;
-    color: ${t.palette.gray[800]};
-    font-family: ${t.typography.type.primary};
-    font-size: ${t.typography.text.sm};
-    display: flex;
-    font-weight: ${t.typography.weight.regular};
-    padding: ${t.spacing[0.625]} ${t.spacing[0.5]};
-    position: relative;
-    text-align: center;
-    text-decoration: unset;
-
-    &:disabled {
-      cursor: not-allowed;
-      background-color: ${t.palette.gray[300]};
-      color: ${t.palette.gray[300]};
-    }
-
-    &:hover:not([disabled]) {
-      background-color: ${t.palette.gray[100]};
-      color: ${t.palette.gray[800]};
-    }
-
-    &.active {
-      background-color: transparent;
-      border-bottom: solid 4px ${t.palette.primary[500]};
-      padding-bottom: calc(${t.spacing[0.625]} - 4px);
-
-      &:hover {
-        background-color: transparent;
-        border-bottom: solid 4px ${t.palette.primary[500]};
-      }
-    }
-  `}
-`;
-export {
-  p as S,
-  i as T,
-  r as a
-};

package/dist/styles-C3cZmKVJ.mjs

@@ -1,131 +0,0 @@
-import { styled as g } from "styled-components";
-import { theme as r } from "./components/colors/index.js";
-const C = ["padding", "px", "py", "pl", "pr", "pt", "pb", "margin", "mx", "my", "ml", "mr", "mt", "mb", "zIndex", "position", "top", "right", "bottom", "left", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "borderColor", "borderRadius", "scroll", "visibility", "display", "height", "width", "maxHeight", "maxWidth", "minHeight", "minWidth", "shadow", "bgColor", "bgGradient", "gap", "flexDirection", "flexGrow", "justify", "justifySelf", "alignItems", "alignSelf", "wrap", "color", "fontFamily", "fontSize", "fontWeight", "textAlign", "whiteSpace", "letterSpacing", "lineSpacing", "textDecoration", "textOverflow", "whiteSpace", "wordBreak", "wordWrap", "cursor", "transition", "borderColorHover", "bgColorHover", "shadowHover"], n = (i, t) => t === void 0 ? "" : `${i}: ${t};`, p = (i) => {
-  const t = i.py ?? i.pt ?? 0, e = i.px ?? i.pr ?? 0, a = i.py ?? i.pb ?? 0, o = i.px ?? i.pl ?? 0;
-  if (i.padding) {
-    const [$, s, d, l] = i.padding;
-    return `padding: ${r.spacing[$]} ${r.spacing[s]} ${r.spacing[d]} ${r.spacing[l]};`;
-  }
-  return `padding: ${r.spacing[t]} ${r.spacing[e]} ${r.spacing[a]} ${r.spacing[o]};`;
-}, c = (i) => {
-  const t = i.my ?? i.mt ?? 0, e = i.mx ?? i.mr ?? 0, a = i.my ?? i.mb ?? 0, o = i.mx ?? i.ml ?? 0;
-  if (i.margin) {
-    const [$, s, d, l] = i.margin;
-    return `margin: ${r.spacing[$]} ${r.spacing[s]} ${r.spacing[d]} ${r.spacing[l]};`;
-  }
-  return `margin: ${r.spacing[t]} ${r.spacing[e]} ${r.spacing[a]} ${r.spacing[o]};`;
-}, h = (i) => `
-    ${n("position", i.position)}
-    ${n("top", i.top)}
-    ${n("right", i.right)}
-    ${n("bottom", i.bottom)}
-    ${n("left", i.left)}
-    ${n("z-index", i.zIndex)}
-  `, b = (i) => `
-    ${n("border", i.border)}
-    ${n("border-top", i.borderTop)}
-    ${n("border-right", i.borderRight)}
-    ${n("border-bottom", i.borderBottom)}
-    ${n("border-left", i.borderLeft)}
-    ${n("border-color", i.borderColor)}
-    ${n("border-radius", i.borderRadius)}
-  `, f = (i) => {
-  const t = i.scroll ? `
-      ${((u) => u.includes("x") ? "overflow-x: auto;" : "")(i.scroll)}
-      ${((u) => u.includes("y") ? "overflow-y: auto;" : "")(i.scroll)}
-    ` : "", e = n("visibility", i.visibility), a = n("display", i.display), o = n("height", i.height), $ = n("width", i.width), s = n("max-height", i.maxHeight), d = n("max-width", i.maxWidth), l = n("min-height", i.minHeight), y = n("min-width", i.minWidth), v = n("box-shadow", i.shadow ? r.shadows[i.shadow] : void 0), S = n("gap", i.gap === void 0 ? void 0 : r.spacing[i.gap]);
-  return `
-    ${t}
-    ${e}
-    ${a}
-    ${o}
-    ${$}
-    ${s}
-    ${d}
-    ${l}
-    ${y}
-    ${v}
-    ${n("background-color", i.bgColor)}
-    ${n("background", i.bgGradient)}
-    ${S}
-    ${n("flex-direction", i.flexDirection)}
-    ${n("flex-grow", i.flexGrow)}
-    ${n("justify-content", i.justify)}
-    ${n("justify-self", i.justifySelf)}
-    ${n("align-items", i.alignItems)}
-    ${n("align-self", i.alignSelf)}
-    ${n("flex-wrap", i.wrap)}
-  `;
-}, m = (i) => `
-    ${n("color", i.color)}
-    ${n("font-family", i.fontFamily)}
-    ${n("font-size", i.fontSize)}
-    ${n("font-weight", i.fontWeight)}
-    ${n("line-spacing", i.letterSpacing)}
-    ${n("line-height", i.lineSpacing)}
-    ${n("text-align", i.textAlign)}
-    ${n("text-decoration", i.textDecoration)}
-    ${n("text-overflow", i.textOverflow)}
-    ${n("white-space", i.whiteSpace)}
-    ${n("word-break", i.wordBreak)}
-    ${n("word-wrap", i.wordWrap)}
-  `, w = (i) => {
-  const t = n("cursor", i.cursor), e = n("border-color", i.borderColorHover), a = n("background-color", i.bgColorHover), o = n("box-shadow", i.shadowHover === void 0 ? void 0 : r.shadows[i.shadowHover]);
-  return `
-    ${t}
-
-    &:hover {
-      ${n("transition", i.transition) || "transition: all 0.2s;"}
-      ${e}
-      ${a}
-      ${o}
-    }
-  `;
-}, x = () => ({ shouldForwardProp: (i) => !C.includes(i) }), j = g.div.withConfig(x())`
-  ${p}
-  ${c}
-  ${h}
-  ${f}
-  ${m}
-  ${b}
-  ${w}
-`, k = g.button.withConfig(x())`
-  ${p}
-  ${c}
-  ${h}
-  ${f}
-  ${m}
-  ${b}
-  ${w}
-`, z = g.p.withConfig(x())`
-  ${p}
-  ${c}
-  ${h}
-  ${f}
-  ${m}
-  ${b}
-  ${w}
-`, B = g.span.withConfig(x())`
-  ${p}
-  ${c}
-  ${h}
-  ${f}
-  ${m}
-  ${b}
-  ${w}
-`;
-export {
-  j as B,
-  k as a,
-  z as b,
-  B as c,
-  m as d,
-  c as e,
-  w as f,
-  h as g,
-  C as h,
-  f as i,
-  b as j,
-  x as k,
-  p as s
-};

package/dist/styles-D85YYIjM.mjs

@@ -1,131 +0,0 @@
-import { styled as i } from "styled-components";
-import { v as t } from "./utils-CQvBF-wY.mjs";
-import "./styles-C3cZmKVJ.mjs";
-import "react/jsx-runtime";
-const { getVariant: a } = t((n) => ({ lg: `
-      @media screen and (min-width: ${n.breakpoints.sm}) {
-        width: 72%;
-      }
-      @media screen and (max-width: ${n.breakpoints.sm}) {
-        width: 80%;
-      }
-    `, md: `
-      @media screen and (min-width: ${n.breakpoints.sm}) {
-        width: 48%;
-      }
-      @media screen and (max-width: ${n.breakpoints.sm}) {
-        width: 60%;
-      }
-    `, sm: `
-      @media screen and (min-width: ${n.breakpoints.sm}) {
-        width: 32%;
-      }
-      @media screen and (max-width: ${n.breakpoints.sm}) {
-        width: 40%;
-      }
-    ` })), o = i.div.attrs({ className: "comp-modal fixed inset-0 overflow-auto" })`
-  align-items: center;
-  background-color: rgb(52 64 84 / 70%);
-  display: flex;
-  justify-content: center;
-  z-index: 99999;
-`, c = i.div`
-  ${({ theme: n, $size: e }) => `
-    background-color: ${n.palette.white};
-    border: 1px solid ${n.palette.gray[200]};
-    border-radius: ${n.spacing[0.25]};
-    color: ${n.palette.gray[800]};
-    display: flex;
-    flex-direction: column;
-    font-family: ${n.typography.type.primary};
-    font-size: ${n.typography.text.sm};
-    max-height: 80%;
-    min-height: minmax(max-content, 32%);
-    overflow: hidden auto;
-    padding: ${n.spacing[1.5]};
-    box-shadow: ${n.shadows.lg};
-    margin: auto;
-    white-space: pre-line;
-
-    > *:not(img) {
-      margin-bottom: ${n.spacing[1.5]};
-    }
-
-    > *:last-child {
-      margin-bottom: 0;
-    }
-
-    &#table-column-toggle {
-      @media screen and (min-width: ${n.breakpoints.sm}) {
-        width: 24%;
-      }
-      @media screen and (max-width: ${n.breakpoints.sm}) {
-        width: 32%;
-      }
-    }
-
-    ${a(n, e)}
-  `}
-`, p = i.div`
-  display: block;
-  overflow: unset;
-  height: max-content;
-  max-height: 100%;
-  max-width: 100%;
-  position: static;
-`, h = i.div.attrs({ className: "flex items-center justify-between mb-1.5" })``, l = i.div`
-  ${({ theme: n }) => `
-    display: flex;
-    flex-direction: row;
-    gap: ${n.spacing[0.75]};
-    justify-content: space-between;
-    margin: 0;
-    max-width: 392px;
-
-    > label {
-      margin: 0;
-      flex: 1 1 auto;
-    }
-
-    > div {
-      display: flex;
-      flex-direction: row;
-      flex: 1 1 auto;
-      gap: ${n.spacing[0.75]};
-      margin-right: ${n.spacing[0.75]};
-
-      > button {
-        justify-content: center;
-        max-width: 190px;
-      }
-    }
-
-    > div:last-child {
-      margin-right: 0;
-    }
-  `}
-`, g = i.div`
-  img {
-    margin: 0 calc(-${({ theme: n }) => n.spacing[1.5]} - 1px)
-      ${({ theme: n }) => n.spacing[1.5]};
-
-    min-width: calc(100% + 2px + ${({ theme: n }) => n.spacing[3]});
-    height: 185px;
-    object-fit: cover;
-
-    ${({ $framed: n = !1 }) => n ? `
-            border-radius: 8px;
-            min-width: 100%;
-            margin-left: 0;
-            margin-right: 0;
-          ` : ""}
-  }
-`;
-export {
-  l as F,
-  p as H,
-  g as I,
-  o as M,
-  h as T,
-  c as a
-};

package/dist/styles-EIbGRPlk.mjs

@@ -1,106 +0,0 @@
-import { styled as r } from "styled-components";
-import { v as t } from "./utils-CQvBF-wY.mjs";
-import { a as e } from "./styles-C3cZmKVJ.mjs";
-import "react/jsx-runtime";
-const { getVariant: o } = t((n) => ({ ghost: `
-      background: transparent;
-      border: none;
-      color: ${n.palette.gray[800]};
-      --btn-padding-x: ${n.spacing[0.5]};
-      --btn-padding-y: ${n.spacing[0.625]};
-      --btn-spacing: ${n.spacing[0.25]};
-
-      &:disabled {
-        color: ${n.palette.gray[400]};
-        cursor: not-allowed;
-      }
-
-      &:hover:not([disabled]) {
-        background-color: ${n.palette.gray[100]};
-        color: ${n.palette.gray[800]};
-      }
-    `, link: `
-      --btn-padding-x: 0;
-      --btn-padding-y: 0;
-      color: ${n.palette.gray[800]};
-
-      &:hover {
-        color: ${n.palette.gray[500]};
-      }
-    `, primary: `
-      background: ${n.palette.primary[500]};
-      border: none;
-      color: ${n.palette.white};
-      --btn-spacing: ${n.spacing[0.25]};
-
-      &:disabled {
-        background: ${n.palette.gray[200]};
-        color: ${n.palette.gray[400]};
-        cursor: not-allowed;
-      }
-
-      &:hover:not([disabled]) {
-        background-color: ${n.palette.primary[700]};
-        color: ${n.palette.white};
-      }
-    `, secondary: `
-      background: ${n.palette.gray[800]};
-      border: none;
-      color: ${n.palette.white};
-      --btn-spacing: ${n.spacing[0.25]};
-
-      &:disabled {
-        background: ${n.palette.gray[200]};
-        color: ${n.palette.gray[400]};
-        cursor: not-allowed;
-      }
-
-      &:hover:not([disabled]) {
-        background-color: ${n.palette.gray[600]};
-        color: ${n.palette.white};
-      }
-    `, tertiary: `
-      background: transparent;
-      border: 1px solid ${n.palette.primary[500]};
-      color: ${n.palette.primary[500]};
-      --btn-spacing: ${n.spacing[0.25]};
-
-      &:disabled {
-        background: transparent;
-        border: 1px solid ${n.palette.gray[200]};
-        color: ${n.palette.gray[300]};
-        cursor: not-allowed;
-      }
-
-      &:hover:not([disabled]) {
-        background-color: ${n.palette.primary[500]};
-        color: ${n.palette.white};
-      }
-    ` })), g = r(e)`
-  ${({ theme: n, $variant: a }) => `
-    align-items: center;
-    border-radius: var(--btn-spacing);
-    cursor: pointer;
-    display: inline-flex;
-    font-family: ${n.typography.type.primary};
-    font-size: ${n.typography.text.sm};
-    font-weight: ${n.typography.weight.regular};
-    gap: var(--btn-spacing);
-    justify-content: center;
-    line-height: ${n.spacing[1.25]};
-    padding: var(--btn-padding-y) var(--btn-padding-x);
-    position: relative;
-    text-align: start;
-    transition: all 0.5s ease;
-    white-space: nowrap;
-
-    @media screen and (max-width: ${n.breakpoints.mobile}) {
-      ${a !== "link" ? `--btn-padding-y: ${n.spacing[1]}` : ""};
-    }
-
-    ${o(n, a ?? "primary")}
-  `}
-`;
-export {
-  g as S
-};

package/dist/styles-Q1VXuWI7.mjs

@@ -1,65 +0,0 @@
-import { styled as e } from "styled-components";
-const a = e.li`
-  ${({ theme: n }) => `
-    align-items: center;
-    background-color: ${n.palette.white};
-    color: ${n.palette.gray[800]};
-    cursor: pointer;
-    display: flex;
-    font-size: ${n.typography.text.sm};
-    font-weight: ${n.typography.weight.regular};
-    justify-content: space-between;
-    gap: ${n.spacing[0.625]};
-    line-height: ${n.spacing[1.25]};
-    list-style-type: none;
-    min-height: 40px;
-    min-width: 240px;
-    padding: ${n.spacing[0.625]} ${n.spacing[1]};
-    pointer-events: auto;
-
-    p,
-    a {
-      word-break: break-word;
-    }
-
-    & > label {
-      margin: unset;
-    }
-
-    a {
-      color: ${n.palette.gray[500]};
-    }
-
-    &[aria-disabled="true"] {
-      color: ${n.palette.gray[300]};
-      pointer-events: none;
-
-      a {
-        color: ${n.palette.gray[300]};
-      }
-    }
-
-    &[aria-selected="true"] {
-      background-color: ${n.palette.gray[200]};
-    }
-
-    &:hover:not([aria-selected="true"]) {
-      background-color: ${n.palette.gray[100]};
-    }
-  `}
-`, r = e.ul`
-  ${({ theme: n }) => `
-    background-color: ${n.palette.white};
-    border: 1px solid ${n.palette.gray[200]};
-    border-radius: ${n.spacing[0.25]};
-    box-shadow: ${n.shadows.md};
-    display: inline-block;
-    margin: unset;
-    min-width: 240px;
-    padding: ${n.spacing[0.25]} 0 ${n.spacing[0.25]} 0;
-  `}
-`;
-export {
-  a as L,
-  r as a
-};