@fluidattacks/design 3.1.11 → 3.1.12

package/dist/components/toggle-buttons/index.js

@@ -1,5 +1,74 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("react"),t=require("styled-components");require("../typography/heading/index.js"),require("../typography/span/index.js");const r=require("../typography/text/index.js"),a=t.styled.div`
-  ${({theme:n})=>`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 352px;\n\n    > button:first-child {\n      border-radius: ${n.spacing[2]} 0 0 ${n.spacing[2]};\n    }\n    > button:last-child {\n      --angle-grad: -45deg;\n      border-radius: 0 ${n.spacing[2]} ${n.spacing[2]} 0;\n    }\n\n    &::before {\n      background: ${n.palette.gradients["01"]} border-box;\n      border-radius: ${n.spacing[2]};\n      content: "";\n      position: absolute;\n      inset: 0;\n      border: 2px solid transparent;\n      mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n      mask-composite: exclude;\n    }\n\n    @media screen and (max-width: ${n.breakpoints.mobile}) {\n      width: 320px;\n    }\n  `}
-`,i=t.styled.button`
-  ${({theme:n})=>`\n    align-items: center;\n    background: linear-gradient(\n      var(--angle-grad),\n      rgba(243, 38, 55, var(--opacity-grad)),\n      rgba(184, 7, 93, var(--opacity-grad))\n    );\n    color: ${n.palette.primary[500]};\n    cursor: pointer;\n    display: flex;\n    flex: 1 0 0;\n    justify-content: center;\n    gap: ${n.spacing[.625]};\n    height: ${n.spacing[4]};\n    padding: ${n.spacing[1.25]};\n    position: relative;\n    transition: color, --opacity-grad 0.5s ease-in-out;\n\n    &.selected {\n      --opacity-grad: 1;\n      background: linear-gradient(\n        var(--angle-grad),\n        rgba(243, 38, 55, var(--opacity-grad)),\n        rgba(184, 7, 93, var(--opacity-grad))\n      );\n      color: ${n.palette.white};\n    }\n  `}
-`;exports.ToggleButton=({defaultSelection:t,options:o,handleClick:s})=>{const[d,l]=e.useState(t??o[0]),c=e.useCallback((n=>()=>{l(n),s(n)}),[s]);return n.jsx(a,{children:o.map(((e,t)=>n.jsx(i,{className:`${e.includes(d)&&"selected"}`,onClick:c(e),children:n.jsx(r.Text,{color:"inherit",fontWeight:"bold",size:"md",sizeSm:"sm",textAlign:"center",children:e})},`${e}-${t}`)))})};
+import { jsx as e } from "react/jsx-runtime";
+import { useState as c, useCallback as g } from "react";
+import { styled as r } from "styled-components";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as p } from "../typography/text/index.js";
+const m = r.div`
+  ${({ theme: n }) => `
+    align-items: center;
+    display: flex;
+    position: relative;
+    width: 352px;
+
+    > button:first-child {
+      border-radius: ${n.spacing[2]} 0 0 ${n.spacing[2]};
+    }
+    > button:last-child {
+      --angle-grad: -45deg;
+      border-radius: 0 ${n.spacing[2]} ${n.spacing[2]} 0;
+    }
+
+    &::before {
+      background: ${n.palette.gradients["01"]} border-box;
+      border-radius: ${n.spacing[2]};
+      content: "";
+      position: absolute;
+      inset: 0;
+      border: 2px solid transparent;
+      mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+      mask-composite: exclude;
+    }
+
+    @media screen and (max-width: ${n.breakpoints.mobile}) {
+      width: 320px;
+    }
+  `}
+`, b = r.button`
+  ${({ theme: n }) => `
+    align-items: center;
+    background: linear-gradient(
+      var(--angle-grad),
+      rgba(243, 38, 55, var(--opacity-grad)),
+      rgba(184, 7, 93, var(--opacity-grad))
+    );
+    color: ${n.palette.primary[500]};
+    cursor: pointer;
+    display: flex;
+    flex: 1 0 0;
+    justify-content: center;
+    gap: ${n.spacing[0.625]};
+    height: ${n.spacing[4]};
+    padding: ${n.spacing[1.25]};
+    position: relative;
+    transition: color, --opacity-grad 0.5s ease-in-out;
+
+    &.selected {
+      --opacity-grad: 1;
+      background: linear-gradient(
+        var(--angle-grad),
+        rgba(243, 38, 55, var(--opacity-grad)),
+        rgba(184, 7, 93, var(--opacity-grad))
+      );
+      color: ${n.palette.white};
+    }
+  `}
+`, k = ({ defaultSelection: n, options: t, handleClick: i }) => {
+  const [o, s] = c(n ?? t[0]), d = g((a) => () => {
+    s(a), i(a);
+  }, [i]);
+  return e(m, { children: t.map((a, l) => e(b, { className: `${a.includes(o) && "selected"}`, onClick: d(a), children: e(p, { color: "inherit", fontWeight: "bold", size: "md", sizeSm: "sm", textAlign: "center", children: a }) }, `${a}-${l}`)) });
+};
+export {
+  k as ToggleButton
+};

package/dist/components/tooltip/index.js

@@ -1 +1,13 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("react/jsx-runtime");const e=require("../../index-CmylnDrF.js");require("lodash"),require("react"),require("react-dom"),require("styled-components"),require("../icon/index.js"),require("../typography/heading/index.js"),require("../typography/span/index.js"),require("../typography/text/index.js"),exports.Tooltip=e.Tooltip;
+import "react/jsx-runtime";
+import { T as s } from "../../index-D-lcuEHY.mjs";
+import "lodash";
+import "react";
+import "react-dom";
+import "styled-components";
+import "../icon/index.js";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import "../typography/text/index.js";
+export {
+  s as Tooltip
+};