@fluidattacks/design 3.1.12 → 3.1.13

package/dist/index.js

@@ -1,5 +1,5 @@
-import { v as e } from "./utils-CQvBF-wY.mjs";
-import { a as p, B as m, c as a, b as f, k as x, h as n, j as i, i as s, f as u, e as d, s as l, g as C, d as g } from "./styles-C3cZmKVJ.mjs";
+import { v as e } from "./utils-V0EumEPM.mjs";
+import { a as p, B as m, c as a, b as f, k as x, h as n, j as i, i as s, f as u, e as d, s as l, g as C, d as g } from "./styles-CplEd2kw.mjs";
 import { Accordion as I } from "./components/accordion/index.js";
 import { Alert as T } from "./components/alert/index.js";
 import { Button as b } from "./components/button/index.js";
@@ -10,7 +10,7 @@ import { CardWithSelector as D } from "./components/card/card-with-selector/inde
 import { CardWithSwitch as W } from "./components/card/card-with-switch/index.js";
 import { Carousel as N } from "./components/carousel/index.js";
 import { Checkbox as A } from "./components/checkbox/index.js";
-import { M as R } from "./index-BwFnfaRh.mjs";
+import { M as R } from "./index-maWH3JYC.mjs";
 import { CodeSnippet as G } from "./components/code-snippet/index.js";
 import { CustomThemeProvider as j, icons as q, theme as z, uniqueIcons as J } from "./components/colors/index.js";
 import { useConfirmDialog as Q } from "./components/confirm-dialog/index.js";
@@ -74,23 +74,23 @@ import { Tag as oe } from "./components/tag/index.js";
 import { TimeLine as ee } from "./components/timeline/index.js";
 import { Toggle as pe } from "./components/toggle/index.js";
 import { ToggleButton as ae } from "./components/toggle-buttons/index.js";
-import { T as xe } from "./index-D-lcuEHY.mjs";
+import { T as xe } from "./index-DwznImvK.mjs";
 import { Tour as ie, baseStep as se } from "./components/tour/index.js";
 import { Heading as de } from "./components/typography/heading/index.js";
 import { Span as Ce } from "./components/typography/span/index.js";
 import { Text as ce } from "./components/typography/text/index.js";
 import { FormItem as Se, WebForm as Te } from "./components/web-form/index.js";
-import { u as be } from "./use-carousel-CvRxi2FI.mjs";
-import { u as Le } from "./use-click-outside-BtZLIoU1.mjs";
-import { u as Pe } from "./use-cloudinary-image-fG7ODNgr.mjs";
-import { u as Me, a as ye } from "./use-search-DpLNvt7Q.mjs";
-import { u as Oe } from "./use-modal-CkrZ-_-M.mjs";
-import { a as ke } from "./styles-Q1VXuWI7.mjs";
+import { u as be } from "./use-carousel-CgAF78h3.mjs";
+import { u as Le } from "./use-click-outside-BUll8Ag-.mjs";
+import { u as Pe } from "./use-cloudinary-image-BCxwj15o.mjs";
+import { u as Me, a as ye } from "./use-search-Dj47QDw9.mjs";
+import { u as Oe } from "./use-modal-CtgexKnf.mjs";
+import { a as ke } from "./styles-Bdque9TT.mjs";
 import { ModalConfirm as we } from "./components/modal/modal-confirm/index.js";
 import { OptionContainer as He } from "./components/oauth-selector/option-container/index.js";
 import { FixedTabs as Ee } from "./components/tabs/fixed-tabs/index.js";
 import { Tab as Ue } from "./components/tabs/tab/index.js";
-import { a as qe } from "./index-Bu448Tz2.mjs";
+import { a as qe } from "./index-C6LbClYh.mjs";
 import './assets/index.css';export {
   I as Accordion,
   T as Alert,

package/dist/styles-B2N0JLw1.mjs

@@ -0,0 +1,114 @@
+import { styled as o } from "styled-components";
+import { v as n } from "./utils-V0EumEPM.mjs";
+import { a as t } from "./styles-CplEd2kw.mjs";
+import "react/jsx-runtime";
+const { getVariant: i } = n(
+  (a) => ({
+    ghost: `
+      background: transparent;
+      border: none;
+      color: ${a.palette.gray[800]};
+      --btn-padding-x: ${a.spacing[0.5]};
+      --btn-padding-y: ${a.spacing[0.625]};
+      --btn-spacing: ${a.spacing[0.25]};
+
+      &:disabled {
+        color: ${a.palette.gray[400]};
+        cursor: not-allowed;
+      }
+
+      &:hover:not([disabled]) {
+        background-color: ${a.palette.gray[100]};
+        color: ${a.palette.gray[800]};
+      }
+    `,
+    link: `
+      --btn-padding-x: 0;
+      --btn-padding-y: 0;
+      color: ${a.palette.gray[800]};
+
+      &:hover {
+        color: ${a.palette.gray[500]};
+      }
+    `,
+    primary: `
+      background: ${a.palette.primary[500]};
+      border: none;
+      color: ${a.palette.white};
+      --btn-spacing: ${a.spacing[0.25]};
+
+      &:disabled {
+        background: ${a.palette.gray[200]};
+        color: ${a.palette.gray[400]};
+        cursor: not-allowed;
+      }
+
+      &:hover:not([disabled]) {
+        background-color: ${a.palette.primary[700]};
+        color: ${a.palette.white};
+      }
+    `,
+    secondary: `
+      background: ${a.palette.gray[800]};
+      border: none;
+      color: ${a.palette.white};
+      --btn-spacing: ${a.spacing[0.25]};
+
+      &:disabled {
+        background: ${a.palette.gray[200]};
+        color: ${a.palette.gray[400]};
+        cursor: not-allowed;
+      }
+
+      &:hover:not([disabled]) {
+        background-color: ${a.palette.gray[600]};
+        color: ${a.palette.white};
+      }
+    `,
+    tertiary: `
+      background: transparent;
+      border: 1px solid ${a.palette.primary[500]};
+      color: ${a.palette.primary[500]};
+      --btn-spacing: ${a.spacing[0.25]};
+
+      &:disabled {
+        background: transparent;
+        border: 1px solid ${a.palette.gray[200]};
+        color: ${a.palette.gray[300]};
+        cursor: not-allowed;
+      }
+
+      &:hover:not([disabled]) {
+        background-color: ${a.palette.primary[500]};
+        color: ${a.palette.white};
+      }
+    `
+  })
+), c = o(t)`
+  ${({ theme: a, $variant: r }) => `
+    align-items: center;
+    border-radius: var(--btn-spacing);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: ${a.typography.type.primary};
+    font-size: ${a.typography.text.sm};
+    font-weight: ${a.typography.weight.regular};
+    gap: var(--btn-spacing);
+    justify-content: center;
+    line-height: ${a.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: ${a.breakpoints.mobile}) {
+      ${r !== "link" ? `--btn-padding-y: ${a.spacing[1]}` : ""};
+    }
+
+    ${i(a, r ?? "primary")}
+  `}
+`;
+export {
+  c as S
+};

package/dist/styles-B64DVBIF.mjs

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

package/dist/{styles-lSVV9kjn.mjs → styles-BXFVwnWT.mjs}

@@ -1,15 +1,15 @@
-import { styled as e } from "styled-components";
-const i = e.div`
-  ${({ theme: n }) => `
+import { styled as i } from "styled-components";
+const a = i.div`
+  ${({ theme: t }) => `
     align-items: flex-start;
     display: inline-flex;
     flex-direction: column;
-    gap: ${n.spacing[0.25]};
+    gap: ${t.spacing[0.25]};
     position: relative;
     width: 100%;
 
     label {
-      color: ${n.palette.gray[800]};
+      color: ${t.palette.gray[800]};
     }
 
     &:has(input.date-input) {
@@ -30,38 +30,38 @@ const i = e.div`
     }
 
     > *:not(.error-msg) {
-      font-family: ${n.typography.type.primary};
-      font-size: ${n.typography.text.sm};
+      font-family: ${t.typography.type.primary};
+      font-size: ${t.typography.text.sm};
       font-style: normal;
-      font-weight: ${n.typography.weight.regular};
-      line-height: ${n.spacing[1.25]};
+      font-weight: ${t.typography.weight.regular};
+      line-height: ${t.spacing[1.25]};
     }
   `}
-`, a = e.div`
-  ${({ theme: n }) => `
+`, n = i.div`
+  ${({ theme: t }) => `
     align-items: center;
     display: flex;
-    border-radius: ${n.spacing[0.5]};
+    border-radius: ${t.spacing[0.5]};
     border: 1px solid;
-    border-color: ${n.palette.gray[300]};
-    color: ${n.palette.gray[600]};
-    gap: ${n.spacing[0.625]};
+    border-color: ${t.palette.gray[300]};
+    color: ${t.palette.gray[600]};
+    gap: ${t.spacing[0.625]};
     justify-content: space-between;
     height: 40px;
-    padding: ${n.spacing[0.625]} ${n.spacing[0.75]};
+    padding: ${t.spacing[0.625]} ${t.spacing[0.75]};
     width: 100%;
     white-space: nowrap;
 
     input, textarea {
       background: inherit;
-      color: ${n.palette.gray[800]};
+      color: ${t.palette.gray[800]};
       cursor: inherit;
       outline: none;
       resize: none;
       width: 100%;
 
       &::placeholder {
-        color: ${n.palette.gray[400]};
+        color: ${t.palette.gray[400]};
       }
 
       &:focus-visible {
@@ -94,7 +94,7 @@ const i = e.div`
     }
 
     textarea {
-      min-height: ${n.spacing[6]};
+      min-height: ${t.spacing[6]};
     }
 
     span:not(.action) {
@@ -102,18 +102,18 @@ const i = e.div`
     }
 
     &.disabled {
-      background: ${n.palette.gray[100]};
-      color: ${n.palette.gray[400]};
+      background: ${t.palette.gray[100]};
+      color: ${t.palette.gray[400]};
       cursor: not-allowed;
     }
 
     &.error:not(.disabled) {
-      border: 1px solid ${n.palette.error[500]};
+      border: 1px solid ${t.palette.error[500]};
     }
 
     &:focus-within:not(.disabled, .error) {
-      background: ${n.palette.white};
-      border: 2px solid ${n.palette.black};
+      background: ${t.palette.white};
+      border: 2px solid ${t.palette.black};
 
       button.action-btn {
         height: 36px;
@@ -122,12 +122,12 @@ const i = e.div`
     }
 
     &:hover:not(:focus-within, .disabled, .error) {
-      background: ${n.palette.white};
-      border: 1px solid ${n.palette.gray[600]};
+      background: ${t.palette.white};
+      border: 1px solid ${t.palette.gray[600]};
     }
   `}
 `;
 export {
-  a as S,
-  i as a
+  n as S,
+  a
 };

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-CI-I6joH.mjs → styles-BlHspTrz.mjs}

@@ -1,5 +1,5 @@
-import { styled as n, css as i } from "styled-components";
-const p = n.div`
+import { styled as i, css as n } from "styled-components";
+const e = i.div`
   ${({ theme: t }) => `
     align-items: center;
     color: ${t.palette.gray[800]};
@@ -20,7 +20,7 @@ const p = n.div`
       display: none;
     }
   `}
-`, o = n.div.attrs({ className: "year-selection" })`
+`, s = i.div.attrs({ className: "year-selection" })`
   align-items: flex-start;
   display: flex;
   flex-direction: column;
@@ -31,12 +31,12 @@ const p = n.div`
   padding: 0 0.5px;
   position: relative;
   width: 8px;
-`, s = n.tr`
+`, r = i.tr`
   align-items: flex-start;
   display: flex;
   padding: ${({ theme: t }) => t.spacing[0.25]} 0;
   width: 100%;
-`, e = i`
+`, a = n`
   ${({ theme: t }) => `
     align-items: center;
     color: ${t.palette.gray[800]};
@@ -52,11 +52,11 @@ const p = n.div`
     text-align: center;
     width: ${t.spacing[2.5]};
   `}
-`, r = n.th`
-  ${e}
-`, l = n.td`
+`, p = i.th`
+  ${a}
+`, l = i.td`
   ${({ theme: t }) => `
-    ${e}
+    ${a}
     height: ${t.spacing[2.5]};
     width: ${t.spacing[2.5]};
 
@@ -104,14 +104,14 @@ const p = n.div`
       }
     }
   `}
-`, g = n.div.attrs({ className: "dot" })`
+`, c = i.div.attrs({ className: "dot" })`
   position: absolute;
   top: 48%;
 
   > span {
     font-size: 4px;
   }
-`, c = n.button`
+`, g = i.button`
   cursor: pointer;
   display: flex;
 
@@ -119,7 +119,7 @@ const p = n.div`
     height: 3.5px;
     width: 7px;
   }
-`, d = n.div`
+`, d = i.div`
   ${({ theme: t }) => `
     align-items: end;
     border-top: 1px solid ${t.palette.gray[200]};
@@ -133,12 +133,12 @@ const p = n.div`
   `}
 `;
 export {
-  c as C,
-  r as D,
+  g as C,
+  p as D,
   d as F,
-  p as T,
-  s as W,
-  o as Y,
+  e as T,
+  r as W,
+  s as Y,
   l as a,
-  g as b
+  c as b
 };