@fluidattacks/design 3.1.13 → 3.2.0

package/dist/index-CUQBAqt_.mjs

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

package/dist/index-CWlrSlUk.mjs

@@ -1,68 +0,0 @@
-import { jsxs as p, jsx as n } from "react/jsx-runtime";
-import { useCallback as e } from "react";
-import { styled as t, useTheme as s } from "styled-components";
-import { Icon as c } from "./components/icon/index.js";
-import "./components/typography/heading/index.js";
-import "./components/typography/span/index.js";
-import { Text as l } from "./components/typography/text/index.js";
-const y = t.div`
-  ${({ theme: i, $itemsLength: o }) => `
-    display: flex;
-    background-color: ${i.palette.white};
-    border: 1px solid ${i.palette.gray[200]};
-    border-radius: ${i.spacing[0.25]};
-    box-shadow: ${i.shadows.lg};
-    flex-direction: column;
-    min-width: 507px;
-    max-width: ${o <= 4 ? "507px" : "980px"};
-    padding: ${i.spacing[1.5]};
-
-    @media screen and (max-width: 980px) and (min-width: 742px) {
-      width: 742px;
-    }
-    @media screen and (max-width: 742px) {
-      width: 507px;
-    }
-  `}
-`, x = t.div`
-  ${({ theme: i, $isSelected: o }) => `
-    align-items: center;
-    background-color: ${o ? i.palette.gray[100] : i.palette.white};
-    border: 1px solid ${i.palette.gray[200]};
-    border-radius: ${i.spacing[0.25]};
-    cursor: pointer;
-    display: flex;
-    flex-direction: ${o ? "row-reverse" : "row"};
-    min-height: 50px;
-    padding: ${i.spacing[1]} ${i.spacing[0.625]};
-    width: 215px;
-
-    &:hover {
-      background-color: ${i.palette.gray[100]};
-    }
-  `}
-`, b = ({
-  isSelected: i = !1,
-  label: o,
-  onSelect: r
-}) => {
-  const a = s(), d = e(() => {
-    r && r(o);
-  }, [r, o]);
-  return /* @__PURE__ */ p(x, { $isSelected: i, onClick: d, children: [
-    i ? /* @__PURE__ */ n(
-      c,
-      {
-        icon: "check",
-        iconColor: a.palette.gray[800],
-        iconSize: "md"
-      }
-    ) : null,
-    /* @__PURE__ */ n(l, { color: a.palette.gray[800], fontWeight: "bold", size: "sm", children: o })
-  ] });
-};
-export {
-  x as O,
-  y as S,
-  b as a
-};

package/dist/index-Ckmu1TfV.mjs

@@ -1,86 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { styled as a } from "styled-components";
-import { theme as o } from "./components/colors/index.js";
-import { Icon as r } from "./components/icon/index.js";
-const c = a.div`
-  ${({ theme: i }) => `
-    align-items: flex-start;
-    backdrop-filter: blur(3.15px);
-    background: radial-gradient(
-      68.83% 167.8% at 171.9% 90.34%,
-      ${i.palette.complementary[300]} 0%,
-      ${i.palette.primary[400]} 100%
-    ),
-    linear-gradient(
-      241deg,
-      ${i.palette.primary[400]} 3.45%,
-      ${i.palette.primary[500]} 82.59%
-    );
-    border-radius: ${i.spacing[1]};
-    box-shadow: ${i.shadows.md};
-    display: flex;
-    flex-direction: column;
-    gap: ${i.spacing[0.625]};
-    height: 300px;
-    padding: ${i.spacing[1]};
-    position: relative;
-    width: 300px;
-
-    button > * {
-      font-size: ${i.typography.text.sm};
-    }
-
-    #hovered {
-      display: none;
-    }
-
-    &:hover {
-      background: ${i.palette.gray[900]};
-
-      #hovered {
-        display: flex;
-      }
-      #uncover {
-        display: none;
-      }
-    }
-
-    @media screen and (max-width: ${i.breakpoints.mobile}) {
-      height: 320px;
-      width: 320px;
-
-      #hovered {
-        margin-bottom: ${i.spacing[1.75]};
-      }
-    }
-  `}
-`, n = a.div`
-  align-items: center;
-  position: absolute;
-  justify-content: center;
-  opacity: 0.15;
-  top: 14%;
-  left: 25%;
-  z-index: -1;
-
-  span {
-    font-size: 265px;
-    height: 260px;
-    width: 260px;
-  }
-`, l = ({
-  icon: i
-}) => /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(
-  r,
-  {
-    icon: i,
-    iconColor: o.palette.white,
-    iconSize: "xs",
-    iconTransform: "shrink-2",
-    iconType: "fa-light"
-  }
-) });
-export {
-  c as I,
-  l as a
-};