@fluidattacks/design 3.1.10 → 3.1.12

package/dist/styles-CI-I6joH.mjs

@@ -0,0 +1,144 @@
+import { styled as n, css as i } from "styled-components";
+const p = n.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;
+    }
+  `}
+`, o = n.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;
+`, s = n.tr`
+  align-items: flex-start;
+  display: flex;
+  padding: ${({ theme: t }) => t.spacing[0.25]} 0;
+  width: 100%;
+`, e = i`
+  ${({ 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]};
+  `}
+`, r = n.th`
+  ${e}
+`, l = n.td`
+  ${({ theme: t }) => `
+    ${e}
+    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};
+      }
+    }
+  `}
+`, g = n.div.attrs({ className: "dot" })`
+  position: absolute;
+  top: 48%;
+
+  > span {
+    font-size: 4px;
+  }
+`, c = n.button`
+  cursor: pointer;
+  display: flex;
+
+  > span {
+    height: 3.5px;
+    width: 7px;
+  }
+`, d = n.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 {
+  c as C,
+  r as D,
+  d as F,
+  p as T,
+  s as W,
+  o as Y,
+  l as a,
+  g as b
+};

package/dist/styles-Cx93EcVo.mjs

@@ -0,0 +1,76 @@
+import { styled as t } from "styled-components";
+const i = t.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;
+    }
+  `}
+`, o = t.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 {
+  o as B,
+  i as C
+};

package/dist/styles-D85YYIjM.mjs

@@ -0,0 +1,131 @@
+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

@@ -0,0 +1,106 @@
+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

@@ -0,0 +1,65 @@
+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
+};

package/dist/styles-fH2c4cfc.mjs

@@ -0,0 +1,77 @@
+import { styled as d } from "styled-components";
+import { b as c } from "./styles-C3cZmKVJ.mjs";
+import "react/jsx-runtime";
+const k = d(c)`
+  ${({ theme: t, $bgGradient: a = "unset", $color: i = t.palette.gray[800], $display: n = "block", $fontFamily: o = t.typography.type.primary, $fontWeight: $ = "bold", $letterSpacing: r = 0, $lineSpacing: p = 1.5, $lineSpacingSm: l, $size: e, $sizeMd: g, $sizeSm: s, $textFill: h = "unset", $wordBreak: y = "normal" }) => `
+    background: ${a};
+    color: ${i};
+    display: ${n};
+    font-family: ${o};
+    font-size: ${t.typography.heading[e]};
+    font-weight: ${t.typography.weight[$]};
+    letter-spacing: ${r};
+    line-height: ${t.spacing[p]};
+    width: ${n === "block" ? "100%" : "auto"};
+    word-break: ${y};
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: ${h};
+
+    @media screen
+      and (min-width: ${t.breakpoints.mobile})
+      and (max-width: ${t.breakpoints.tablet})
+    {
+      font-size: ${t.typography.heading[g ?? e]};
+    }
+
+    @media screen and (max-width: ${t.breakpoints.mobile}) {
+      font-size: ${t.typography.heading[s ?? e]};
+      line-height: ${t.spacing[l ?? p]};
+    }
+  `}
+`, w = d(c)`
+  ${({ theme: t, $bgGradient: a = "unset", $color: i = t.palette.gray[600], $display: n = "block", $fontFamily: o = t.typography.type.primary, $fontWeight: $ = "regular", $letterSpacing: r = 0, $lineSpacing: p = 1.25, $lineSpacingSm: l, $size: e, $sizeMd: g, $sizeSm: s, $textFill: h = "unset", $wordBreak: y = "normal" }) => `
+    background: ${a};
+    color: ${i};
+    display: ${n};
+    font-family: ${o};
+    font-size: ${t.typography.text[e]};
+    font-weight: ${t.typography.weight[$]};
+    letter-spacing: ${r};
+    line-height: ${t.spacing[p]};
+    width: ${n === "block" ? "100%" : "auto"};
+    word-break: ${y};
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: ${h};
+
+    @media screen
+      and (min-width: ${t.breakpoints.mobile})
+      and (max-width: ${t.breakpoints.tablet})
+    {
+      font-size: ${t.typography.text[g ?? e]};
+    }
+
+    @media screen and (max-width: ${t.breakpoints.mobile}) {
+      font-size: ${t.typography.text[s ?? e]};
+      line-height: ${t.spacing[l ?? p]};
+    }
+  `}
+`, x = d.span`
+  ${({ theme: t, $color: a = t.palette.gray[600], $content: i, $display: n = "inline", $fontWeight: o = "regular", $size: $, $lineSpacing: r = 1.25 }) => `
+    color: ${a};
+    display: ${n};
+    font-family: ${t.typography.type.primary};
+    font-size: ${t.typography.text[$]};
+    font-weight: ${t.typography.weight[o]};
+    line-height: ${t.spacing[r]};
+    width: ${n === "block" ? "100%" : "auto"};
+
+    ${i === void 0 ? "" : `&::after { content: "${i}"; }`}
+  `}
+`;
+export {
+  k as S,
+  x as a,
+  w as b
+};