@lightsparkdev/ui 1.0.17 → 1.1.0

package/dist/chunk-SFJ3DWJC.js

@@ -0,0 +1,33 @@
+// src/icons/central/BarsThree.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function BarsThree({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M2.75 12H21.25M2.75 5.75H21.25M2.75 18.25H21.25",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin,
+          vectorEffect: "non-scaling-stroke"
+        }
+      )
+    }
+  );
+}
+
+export {
+  BarsThree
+};

package/dist/{chunk-WHQV75TX.js → chunk-SFL5D7JR.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-5KSG5D3I.js";
 import {
   TextInput
-} from "./chunk-SCB5GKFG.js";
+} from "./chunk-JU2FTCTN.js";
 import {
   __spreadProps,
   __spreadValues
@@ -15,7 +15,10 @@ import {
   getCountries,
   getCountryCallingCode
 } from "libphonenumber-js";
-import { useCallback, useState } from "react";
+import {
+  useCallback,
+  useState
+} from "react";
 import { jsx } from "@emotion/react/jsx-runtime";
 var countries = getCountries();
 var defaultOptions = countries.map((countryCode) => {
@@ -32,6 +35,8 @@ function getSelectWidth(value, pxPerChar) {
 function PhoneInput({
   typography,
   onChange: onChangeProp,
+  onBlur: onBlurProp,
+  error: errorProp,
   pxPerChar = 6,
   defaultCountryCode = "US"
 }) {
@@ -65,6 +70,8 @@ function PhoneInput({
       if (onChangeProp && phoneNumber) {
         onChangeProp({
           number: phoneNumber.number,
+          countryCallingCode: phoneNumber.countryCallingCode,
+          nationalNumber: phoneNumber.nationalNumber,
           formatted: formattedValue2,
           isValid: phoneNumber.isValid()
         });
@@ -88,9 +95,14 @@ function PhoneInput({
       pattern: "[0-9,]*",
       inputMode: "numeric",
       value: formattedValue,
-      onBlur: () => setWasBlurred(true),
+      onBlur: (blurEvent) => {
+        setWasBlurred(true);
+        if (onBlurProp) {
+          onBlurProp(blurEvent);
+        }
+      },
       onChange,
-      error,
+      error: errorProp || error,
       typography
     }
   );

package/dist/chunk-SILL7PHK.js

@@ -0,0 +1,33 @@
+// src/icons/central/Phone.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function Phone({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M9.75 19.25H14.25M6.75 22.25H17.25C17.8023 22.25 18.25 21.8023 18.25 21.25V2.75C18.25 2.19772 17.8023 1.75 17.25 1.75H6.75C6.19772 1.75 5.75 2.19772 5.75 2.75V21.25C5.75 21.8023 6.19772 22.25 6.75 22.25Z",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin,
+          vectorEffect: "non-scaling-stroke"
+        }
+      )
+    }
+  );
+}
+
+export {
+  Phone
+};

package/dist/{chunk-VGH42UK6.js → chunk-SJ22UUXF.js}

@@ -1,10 +1,10 @@
 import {
   toReactNodes
-} from "./chunk-SJ2MVP3F.js";
+} from "./chunk-AHC2USPG.js";
 import {
   StyledBody,
   getPropDefaults
-} from "./chunk-XDJJ5SAF.js";
+} from "./chunk-6Q373SSH.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/chunk-SKCBVJQC.cjs

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/central/ChevronBottomSm.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function ChevronBottomSm({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M18 9.94822L12.5303 15.4179C12.2374 15.7108 11.7626 15.7108 11.4697 15.4179L6 9.94822",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin,
+          vectorEffect: "non-scaling-stroke"
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.ChevronBottomSm = ChevronBottomSm;

package/dist/{chunk-EB6CFGPX.js → chunk-SNSZGFFQ.js}

@@ -1,15 +1,15 @@
 import {
   TextIconAligner
-} from "./chunk-S7KG743Q.js";
+} from "./chunk-WSQWII3I.js";
 import {
   UnstyledButton
-} from "./chunk-GT2UW67L.js";
+} from "./chunk-Z6I64NIF.js";
 import {
   getFocusOutline
-} from "./chunk-XDL2VYUF.js";
+} from "./chunk-E46IHC27.js";
 import {
   Link
-} from "./chunk-B7ROYPB4.js";
+} from "./chunk-5HDXWO2E.js";
 import {
   elide
 } from "./chunk-HAC5YAGQ.js";

package/dist/{chunk-JPI72A4T.cjs → chunk-SRMVVFER.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkJBVSQGPYcjs = require('./chunk-JBVSQGPY.cjs');
+var _chunkPMF5K72Fcjs = require('./chunk-PMF5K72F.cjs');
 
 
 
-var _chunkGZ7ZKXUQcjs = require('./chunk-GZ7ZKXUQ.cjs');
+var _chunk6X6QKELEcjs = require('./chunk-6X6QKELE.cjs');
 
 
 
@@ -13,12 +13,12 @@ var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
 // src/components/typography/Display.tsx
 var _jsxruntime = require('@emotion/react/jsx-runtime');
 function Display(props) {
-  const propsWithDefaults = _chunkGZ7ZKXUQcjs.getPropDefaults.call(void 0, props);
+  const propsWithDefaults = _chunk6X6QKELEcjs.getPropDefaults.call(void 0, props);
   let reactNodes = props.children || null;
   if (props.content) {
-    reactNodes = _chunkJBVSQGPYcjs.toReactNodes.call(void 0, props.content);
+    reactNodes = _chunkPMF5K72Fcjs.toReactNodes.call(void 0, props.content);
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGZ7ZKXUQcjs.StyledDisplay, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, propsWithDefaults), { children: reactNodes }));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6X6QKELEcjs.StyledDisplay, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, propsWithDefaults), { children: reactNodes }));
 }
 
 

package/dist/{chunk-YXTL55KM.js → chunk-T3Z7NMDH.js}

@@ -1,6 +1,6 @@
 import {
   pxToRems
-} from "./chunk-MFTEQD6P.js";
+} from "./chunk-RKAVKJX6.js";
 
 // src/components/StatusIndicator.tsx
 import styled from "@emotion/styled";

package/dist/chunk-T6XDAWX2.cjs

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/central/SquareBehindSquare1.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function SquareBehindSquare1({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M15.25 8.75V3.25C15.25 2.97386 15.0261 2.75 14.75 2.75H3.25C2.97386 2.75 2.75 2.97386 2.75 3.25V14.75C2.75 15.0261 2.97386 15.25 3.25 15.25H8.75M9.25 8.75H20.75C21.0261 8.75 21.25 8.97386 21.25 9.25V20.75C21.25 21.0261 21.0261 21.25 20.75 21.25H9.25C8.97386 21.25 8.75 21.0261 8.75 20.75V9.25C8.75 8.97386 8.97386 8.75 9.25 8.75Z",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin,
+          vectorEffect: "non-scaling-stroke"
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.SquareBehindSquare1 = SquareBehindSquare1;

package/dist/{chunk-2ZERFWQC.cjs → chunk-TBJKNYG4.cjs}

@@ -9,7 +9,7 @@ var _chunkB2MHM6CYcjs = require('./chunk-B2MHM6CY.cjs');
 var _chunk6VA4SAHQcjs = require('./chunk-6VA4SAHQ.cjs');
 
 
-var _chunkFZBPLBNDcjs = require('./chunk-FZBPLBND.cjs');
+var _chunkDO3PWX7Qcjs = require('./chunk-DO3PWX7Q.cjs');
 
 
 
@@ -28,7 +28,7 @@ function getPropDefaults(props) {
   return _chunkSFGLEWHWcjs.getPropDefaultsBase.call(void 0, props, { as: props.heading || "h1" });
 }
 var StyledHeadline = _styled2.default.span`
-  ${({ theme, size, colorProp }) => _chunkFZBPLBNDcjs.applyTypography.call(void 0, theme, "Headline", size, colorProp)}
+  ${({ theme, size, colorProp }) => _chunkDO3PWX7Qcjs.applyTypography.call(void 0, theme, "Headline", size, colorProp)}
   ${_chunkB2MHM6CYcjs.typographyStyles}
 `;
 function headlineSelector(heading) {

package/dist/{chunk-FOCQSOQL.js → chunk-TCPAMMYH.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-YW4BJCOL.js";
 import {
   applyTypography
-} from "./chunk-TK5AT24W.js";
+} from "./chunk-H2R5LMTF.js";
 import {
   __objRest,
   __spreadProps,

package/dist/chunk-TCWNQIEO.js

@@ -0,0 +1,31 @@
+// src/icons/central/ShareAndroid.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function ShareAndroid({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M9.00003 10.4286L14 7.57141M9.00003 13.5714L14 16.4286M20.25 6C20.25 7.79493 18.7949 9.25 17 9.25C15.2051 9.25 13.75 7.79493 13.75 6C13.75 4.20507 15.2051 2.75 17 2.75C18.7949 2.75 20.25 4.20507 20.25 6ZM20.25 18C20.25 19.7949 18.7949 21.25 17 21.25C15.2051 21.25 13.75 19.7949 13.75 18C13.75 16.2051 15.2051 14.75 17 14.75C18.7949 14.75 20.25 16.2051 20.25 18ZM9.25 12C9.25 13.7949 7.79493 15.25 6 15.25C4.20507 15.25 2.75 13.7949 2.75 12C2.75 10.2051 4.20507 8.75 6 8.75C7.79493 8.75 9.25 10.2051 9.25 12Z",
+          stroke: "currentColor",
+          strokeWidth,
+          vectorEffect: "non-scaling-stroke"
+        }
+      )
+    }
+  );
+}
+
+export {
+  ShareAndroid
+};

package/dist/chunk-TCWY4GZA.js

@@ -0,0 +1,33 @@
+// src/icons/central/ArrowDownLeft.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function ArrowDownLeft({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M5.75 8.75V18.25H15.25M18 6L6.39983 17.6002",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin,
+          vectorEffect: "non-scaling-stroke"
+        }
+      )
+    }
+  );
+}
+
+export {
+  ArrowDownLeft
+};

package/dist/chunk-THSWGYVR.js

@@ -0,0 +1,45 @@
+// src/icons/central/CircleInfo.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function CircleInfo({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M10.75 11H12V16.25M21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12Z",
+            stroke: "currentColor",
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin,
+            vectorEffect: "non-scaling-stroke"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 7.375C11.6548 7.375 11.375 7.65482 11.375 8C11.375 8.34518 11.6548 8.625 12 8.625C12.3452 8.625 12.625 8.34518 12.625 8C12.625 7.65482 12.3452 7.375 12 7.375Z",
+            fill: "currentColor",
+            stroke: "currentColor",
+            strokeWidth: "0.25",
+            vectorEffect: "non-scaling-stroke"
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  CircleInfo
+};

package/dist/chunk-TVY3TN3W.js

@@ -0,0 +1,40 @@
+// src/icons/central/ShapesPlusXSquareCircle.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function ShapesPlusXSquareCircle({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("mask", { id: "path-1-inside-1_2004_2196", fill: "white", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M7.75 3.75C7.75 3.33579 7.41421 3 7 3C6.58579 3 6.25 3.33579 6.25 3.75H7.75ZM6.25 10.25C6.25 10.6642 6.58579 11 7 11C7.41421 11 7.75 10.6642 7.75 10.25H6.25ZM3.75 6.25C3.33579 6.25 3 6.58579 3 7C3 7.41421 3.33579 7.75 3.75 7.75V6.25ZM10.25 7.75C10.6642 7.75 11 7.41421 11 7C11 6.58579 10.6642 6.25 10.25 6.25V7.75ZM19.8284 15.2322C20.1213 14.9393 20.1213 14.4645 19.8284 14.1716C19.5355 13.8787 19.0607 13.8787 18.7678 14.1716L19.8284 15.2322ZM14.1716 18.7678C13.8787 19.0607 13.8787 19.5355 14.1716 19.8284C14.4645 20.1213 14.9393 20.1213 15.2322 19.8284L14.1716 18.7678ZM15.2322 14.1716C14.9393 13.8787 14.4645 13.8787 14.1716 14.1716C13.8787 14.4645 13.8787 14.9393 14.1716 15.2322L15.2322 14.1716ZM18.7678 19.8284C19.0607 20.1213 19.5355 20.1213 19.8284 19.8284C20.1213 19.5355 20.1213 19.0607 19.8284 18.7678L18.7678 19.8284ZM17 9.5C15.6193 9.5 14.5 8.38071 14.5 7H13C13 9.20914 14.7909 11 17 11V9.5ZM19.5 7C19.5 8.38071 18.3807 9.5 17 9.5V11C19.2091 11 21 9.20914 21 7H19.5ZM17 4.5C18.3807 4.5 19.5 5.61929 19.5 7H21C21 4.79086 19.2091 3 17 3V4.5ZM17 3C14.7909 3 13 4.79086 13 7H14.5C14.5 5.61929 15.6193 4.5 17 4.5V3ZM6.25 3.75V7H7.75V3.75H6.25ZM6.25 7V10.25H7.75V7H6.25ZM3.75 7.75H7V6.25H3.75V7.75ZM7 7.75H10.25V6.25H7V7.75ZM18.7678 14.1716L16.4697 16.4697L17.5303 17.5303L19.8284 15.2322L18.7678 14.1716ZM16.4697 16.4697L14.1716 18.7678L15.2322 19.8284L17.5303 17.5303L16.4697 16.4697ZM14.1716 15.2322L16.4697 17.5303L17.5303 16.4697L15.2322 14.1716L14.1716 15.2322ZM16.4697 17.5303L18.7678 19.8284L19.8284 18.7678L17.5303 16.4697L16.4697 17.5303ZM4.75 14.5H9.25V13H4.75V14.5ZM9.5 14.75V19.25H11V14.75H9.5ZM9.25 19.5H4.75V21H9.25V19.5ZM4.5 19.25V14.75H3V19.25H4.5ZM4.75 19.5C4.61193 19.5 4.5 19.3881 4.5 19.25H3C3 20.2165 3.7835 21 4.75 21V19.5ZM9.5 19.25C9.5 19.3881 9.38807 19.5 9.25 19.5V21C10.2165 21 11 20.2165 11 19.25H9.5ZM9.25 14.5C9.38807 14.5 9.5 14.6119 9.5 14.75H11C11 13.7835 10.2165 13 9.25 13V14.5ZM4.75 13C3.7835 13 3 13.7835 3 14.75H4.5C4.5 14.6119 4.61193 14.5 4.75 14.5V13Z",
+            vectorEffect: "non-scaling-stroke"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M6.25 4.5H7.75V3H6.25V4.5ZM7.75 9.5H6.25V11H7.75V9.5ZM4.5 7.75V6.25H3V7.75H4.5ZM9.5 6.25V7.75H11V6.25H9.5ZM18.2375 14.7019L19.2981 15.7625L20.3587 14.7019L19.2981 13.6413L18.2375 14.7019ZM15.7625 19.2981L14.7019 18.2375L13.6413 19.2981L14.7019 20.3587L15.7625 19.2981ZM14.7019 15.7625L15.7625 14.7019L14.7019 13.6413L13.6413 14.7019L14.7019 15.7625ZM19.2981 18.2375L18.2375 19.2981L19.2981 20.3587L20.3587 19.2981L19.2981 18.2375ZM14.5 6.25H13V7.75H14.5V6.25ZM17.75 11V9.5H16.25V11H17.75ZM21 6.25H19.5V7.75H21V6.25ZM16.25 3V4.5H17.75V3H16.25ZM6.25 7.75H7.75V6.25H6.25V7.75ZM7.75 7.75V6.25H6.25V7.75H7.75ZM15.9394 17L17 18.0606L18.0606 17L17 15.9394L15.9394 17ZM17 18.0606L18.0606 17L17 15.9394L15.9394 17L17 18.0606ZM10 14.5V13H8.5V14.5H10ZM4 13V14.5H5.5V13H4ZM9.5 20H11V18.5H9.5V20ZM11 14H9.5V15.5H11V14ZM4 19.5V21H5.5V19.5H4ZM10 21V19.5H8.5V21H10ZM4.5 14H3V15.5H4.5V14ZM3 20H4.5V18.5H3V20Z",
+            fill: "currentColor",
+            mask: "url(#path-1-inside-1_2004_2196)",
+            vectorEffect: "non-scaling-stroke"
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  ShapesPlusXSquareCircle
+};

package/dist/{chunk-CEZHIXNR.js → chunk-U6EBWLCK.js}

@@ -1,34 +1,34 @@
 import {
   Loading
-} from "./chunk-QETS33GL.js";
-import {
-  UnstyledButton
-} from "./chunk-GT2UW67L.js";
+} from "./chunk-MYRSWJPJ.js";
 import {
   Tooltip
-} from "./chunk-5JWZFCRU.js";
+} from "./chunk-KPNJ6H7M.js";
+import {
+  UnstyledButton
+} from "./chunk-Z6I64NIF.js";
 import {
   Icon
-} from "./chunk-BV25DKRW.js";
+} from "./chunk-DJOYSVI3.js";
 import {
   getFocusOutline
-} from "./chunk-XDL2VYUF.js";
+} from "./chunk-E46IHC27.js";
 import {
   Link
-} from "./chunk-B7ROYPB4.js";
+} from "./chunk-5HDXWO2E.js";
 import {
   renderTypography
-} from "./chunk-UU76LJDF.js";
+} from "./chunk-6H54ZONZ.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   applyTypography
-} from "./chunk-TK5AT24W.js";
+} from "./chunk-H2R5LMTF.js";
 import {
   getBackgroundColor,
   isThemeOrColorKey
-} from "./chunk-DJOYSOXT.js";
+} from "./chunk-AM7EMJXN.js";
 import {
   __objRest,
   __spreadProps,
@@ -39,7 +39,11 @@ import {
 import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import { uniqueId } from "lodash-es";
-import { Fragment, useRef } from "react";
+import {
+  forwardRef,
+  Fragment,
+  useRef
+} from "react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 var buttonKinds = [
   "secondary",
@@ -56,7 +60,9 @@ var buttonKinds = [
   "tertiary",
   "quaternary",
   "roundSingleChar",
-  "roundIcon"
+  "roundIcon",
+  "gray",
+  "grayGradient"
 ];
 function resolveBackgroundColorKey(theme, kind, defaultKey) {
   var _a;
@@ -155,7 +161,7 @@ function resolveProps(props, theme) {
     activeBorderColor
   });
 }
-function Button(props) {
+var Button = forwardRef((props, ref) => {
   const theme = useTheme();
   const {
     kind,
@@ -171,6 +177,12 @@ function Button(props) {
     filename,
     toParams,
     onClick,
+    onMouseEnter,
+    onMouseDown,
+    onMouseUp,
+    onMouseLeave,
+    onFocus,
+    onBlur,
     icon,
     backgroundColor,
     borderColor,
@@ -264,6 +276,12 @@ function Button(props) {
     type,
     typography,
     onClick,
+    onMouseEnter,
+    onMouseDown,
+    onMouseUp,
+    onMouseLeave,
+    onFocus,
+    onBlur,
     fullWidth,
     iconSide,
     paddingX,
@@ -285,7 +303,16 @@ function Button(props) {
     zIndex
   };
   if (to) {
-    return /* @__PURE__ */ jsx(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, hash, children: content }));
+    return /* @__PURE__ */ jsx(
+      ButtonLink,
+      __spreadProps(__spreadValues({}, commonProps), {
+        to,
+        params: toParams,
+        hash,
+        ref,
+        children: content
+      })
+    );
   }
   return externalLink ? /* @__PURE__ */ jsx(
     ButtonHrefLink,
@@ -293,10 +320,12 @@ function Button(props) {
       href: externalLink,
       download: filename,
       target: "_blank",
+      ref,
       children: content
     })
-  ) : /* @__PURE__ */ jsx(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
-}
+  ) : /* @__PURE__ */ jsx(StyledButton, __spreadProps(__spreadValues({}, commonProps), { ref, children: content }));
+});
+Button.displayName = "Button";
 var buttonStyle = ({
   paddingX,
   paddingY,
@@ -372,6 +401,9 @@ var ButtonIcon = styled.div`
   justify-content: center;
   ${({ iconSide, paddingX }) => `${iconSide}: ${paddingX}px;`}
 `;
+var LinkWithoutTypography = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Link, __spreadProps(__spreadValues({}, props), { ref }));
+});
 var StyledButton = styled(UnstyledButton)`
   ${(props) => buttonStyle(props)}
 `;
@@ -384,9 +416,6 @@ var ButtonHrefLink = styled.a`
 var ButtonSelector = (prepend = "", append = "") => `${prepend}*:is(${select(StyledButton)}, ${select(ButtonLink)}, ${select(
   ButtonHrefLink
 )})${append}`;
-function LinkWithoutTypography(props) {
-  return /* @__PURE__ */ jsx(Link, __spreadValues({}, props));
-}
 
 export {
   buttonKinds,

package/dist/{chunk-ACQIOYO3.js → chunk-UGRRR64W.js}

@@ -1,49 +1,46 @@
 import {
   isReactNode
 } from "./chunk-PEK53X7W.js";
-import {
-  useLiveRef
-} from "./chunk-UDFJ6IWI.js";
 import {
   ProgressBar
-} from "./chunk-BR3ELBNC.js";
+} from "./chunk-WK3QJMNV.js";
 import {
   Drawer
-} from "./chunk-ZG3RCS6W.js";
+} from "./chunk-VFOOK2Q5.js";
 import {
   IconWithCircleBackground
-} from "./chunk-LDHIR73W.js";
+} from "./chunk-E5INXIWL.js";
 import {
   Spacing
 } from "./chunk-E5DUKMCU.js";
 import {
   setDefaultReactNodesTypography
-} from "./chunk-TACMJI7W.js";
+} from "./chunk-2WPDZCWM.js";
 import {
   toReactNodes
-} from "./chunk-SJ2MVP3F.js";
+} from "./chunk-AHC2USPG.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-MFTEQD6P.js";
+} from "./chunk-RKAVKJX6.js";
 import {
   Button,
   ButtonSelector
-} from "./chunk-CEZHIXNR.js";
+} from "./chunk-U6EBWLCK.js";
 import {
   UnstyledButton
-} from "./chunk-GT2UW67L.js";
+} from "./chunk-Z6I64NIF.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   Icon
-} from "./chunk-BV25DKRW.js";
+} from "./chunk-DJOYSVI3.js";
 import {
   overlaySurface,
   standardBorderRadius,
   standardContentInset,
   standardFocusOutline
-} from "./chunk-XDL2VYUF.js";
+} from "./chunk-E46IHC27.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
@@ -51,6 +48,9 @@ import {
   bp,
   useBreakpoints
 } from "./chunk-JSGRNWSB.js";
+import {
+  useLiveRef
+} from "./chunk-UDFJ6IWI.js";
 import {
   __objRest,
   __spreadValues
@@ -321,6 +321,9 @@ function Modal({
           "aria-modal": true,
           "aria-hidden": true,
           tabIndex: -1,
+          onClick: (event) => {
+            event.stopPropagation();
+          },
           role: "dialog",
           ref: modalContainerRef,
           top: top || (smKind === "default" ? standardContentInset.smPx : 0),