@fluidattacks/design 3.1.11 → 3.1.13

package/dist/styles-BZQOqe8p.mjs

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

package/dist/styles-Bdque9TT.mjs

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

package/dist/styles-BlHspTrz.mjs

@@ -0,0 +1,144 @@
+import { styled as i, css as n } from "styled-components";
+const e = i.div`
+  ${({ theme: t }) => `
+    align-items: center;
+    color: ${t.palette.gray[800]};
+    display: flex;
+    font-family: ${t.typography.type.primary};
+    font-size: ${t.typography.text.sm};
+    font-weight: ${t.typography.weight.bold};
+    gap: ${t.spacing[0.5]};
+    height: 40px;
+    justify-content: center;
+    line-height: ${t.spacing[1.25]};
+    text-align: center;
+    padding: ${t.spacing[0.5]} 0;
+    width: 200px;
+    word-spacing: ${t.spacing[0.25]};
+
+    &:not(:hover) .year-selection {
+      display: none;
+    }
+  `}
+`, s = i.div.attrs({ className: "year-selection" })`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  height: 14px;
+  justify-content: center;
+  margin-bottom: 10px;
+  padding: 0 0.5px;
+  position: relative;
+  width: 8px;
+`, r = i.tr`
+  align-items: flex-start;
+  display: flex;
+  padding: ${({ theme: t }) => t.spacing[0.25]} 0;
+  width: 100%;
+`, a = n`
+  ${({ theme: t }) => `
+    align-items: center;
+    color: ${t.palette.gray[800]};
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    font-family: ${t.typography.type.primary};
+    font-size: ${t.typography.text.sm};
+    font-weight: ${t.typography.weight.regular};
+    height: ${t.spacing[2.5]};
+    justify-content: center;
+    line-height: ${t.spacing[1.25]};
+    text-align: center;
+    width: ${t.spacing[2.5]};
+  `}
+`, p = i.th`
+  ${a}
+`, l = i.td`
+  ${({ theme: t }) => `
+    ${a}
+    height: ${t.spacing[2.5]};
+    width: ${t.spacing[2.5]};
+
+    &#range {
+      background: ${t.palette.primary[25]};
+    }
+
+    div:not(.dot) {
+      align-items: center;
+      display: flex;
+      flex-direction: column;
+      font-size: ${t.typography.text.sm};
+      justify-content: center;
+      height: ${t.spacing[2.5]};
+      line-height: ${t.spacing[1.25]};
+      position: relative;
+      text-align: center;
+      width: ${t.spacing[2.5]};
+
+      &:focus-visible {
+        outline: none;
+      }
+
+      &:hover:not(.disabled, .selected, .range) {
+        background: ${t.palette.gray[100]};
+      }
+
+      &.disabled {
+        color: ${t.palette.gray[400]};
+        cursor: auto;
+      }
+
+      &.selected {
+        background: ${t.palette.primary[500]};
+        color: ${t.palette.white};
+      }
+
+      &.focused {
+        border: 2px solid ${t.palette.primary[500]};
+      }
+
+      &.today:not(.selected) {
+        color: ${t.palette.primary[500]};
+        font-weight: ${t.typography.weight.bold};
+      }
+    }
+  `}
+`, c = i.div.attrs({ className: "dot" })`
+  position: absolute;
+  top: 48%;
+
+  > span {
+    font-size: 4px;
+  }
+`, g = i.button`
+  cursor: pointer;
+  display: flex;
+
+  > span {
+    height: 3.5px;
+    width: 7px;
+  }
+`, d = i.div`
+  ${({ theme: t }) => `
+    align-items: end;
+    border-top: 1px solid ${t.palette.gray[200]};
+    display: flex;
+    flex-direction: row-reverse;
+    gap: ${t.spacing[0.5]};
+    height: 44px;
+    margin-bottom: ${t.spacing[0.25]};
+    padding: 0 ${t.spacing[0.25]};
+    width: 100%;
+  `}
+`;
+export {
+  g as C,
+  p as D,
+  d as F,
+  e as T,
+  r as W,
+  s as Y,
+  l as a,
+  c as b
+};

package/dist/styles-CROOwXEH.mjs

@@ -0,0 +1,76 @@
+import { styled as i } from "styled-components";
+const t = i.div`
+  ${({ theme: n }) => `
+    background-color: ${n.palette.gray[100]};
+    border-radius: ${n.spacing[0.25]};
+    display: inline-flex;
+    padding: ${n.spacing[1]};
+    position: relative;
+    width: fit-content;
+
+    .line-highlight.language-none {
+      background: ${n.palette.gray[100]};
+    }
+
+    .line-highlight {
+      background: hsl(354deg 88% 93% / 50%);
+      font-family: ${n.typography.type.mono};
+      font-size: ${n.typography.text.xs};
+      line-height: ${n.spacing[1]};
+    }
+
+    .line-highlight::before,
+    .line-highlight[data-end]::after {
+      background: ${n.palette.primary[300]};
+      background-color: hsl(355deg 89% 36%);
+      color: ${n.palette.white};
+    }
+
+    pre code {
+      color: #161616;
+      font-family: ${n.typography.type.mono};
+      font-size: ${n.typography.text.xs};
+      line-height: ${n.spacing[1]};
+    }
+
+    pre:not(.line-highlight) {
+      margin-top: unset;
+      margin-bottom: unset;
+      padding: unset;
+      width: 100%;
+    }
+
+    span:hover {
+      background-color: ${n.palette.gray[200]};
+    }
+
+    .no-data,
+    pre.line-highlight {
+      background-color: ${n.palette.gray[100]};
+      padding-top: unset;
+      padding-bottom: unset;
+    }
+  `}
+`, a = i.div`
+  ${({ theme: n }) => `
+    align-items: end;
+    background-color: ${n.palette.gray[100]};
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-width: 103px;
+    margin-right: ${n.spacing[1]};
+    padding-top: ${n.spacing[1]};
+    padding-bottom: ${n.spacing[1]};
+    position: relative;
+    padding-left: unset;
+
+    button:hover:not([disabled]) {
+      background-color: ${n.palette.gray[200]};
+    }
+  `}
+`;
+export {
+  a as B,
+  t as C
+};

package/dist/styles-CplEd2kw.mjs

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