@lightsparkdev/ui 1.0.14 → 1.0.15

package/dist/{chunk-XPY4BBIM.cjs → chunk-FXRVJJE4.cjs}

@@ -1,46 +1,46 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkGSYM5JMBcjs = require('./chunk-GSYM5JMB.cjs');
+var _chunkDCH43ZYZcjs = require('./chunk-DCH43ZYZ.cjs');
 
 
-var _chunkOEDOWIS6cjs = require('./chunk-OEDOWIS6.cjs');
+var _chunkIQNQAXSOcjs = require('./chunk-IQNQAXSO.cjs');
 
 
-var _chunkXY4F2W3Jcjs = require('./chunk-XY4F2W3J.cjs');
+var _chunkHOSATPMScjs = require('./chunk-HOSATPMS.cjs');
 
 
-var _chunkGMN76DHFcjs = require('./chunk-GMN76DHF.cjs');
+var _chunkWD2RC7T7cjs = require('./chunk-WD2RC7T7.cjs');
 
 
 var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
+var _chunkV2HGIJA7cjs = require('./chunk-V2HGIJA7.cjs');
 
-var _chunkRSAWZM47cjs = require('./chunk-RSAWZM47.cjs');
 
+var _chunkT3KB7JMUcjs = require('./chunk-T3KB7JMU.cjs');
 
-var _chunkXRNCL5CAcjs = require('./chunk-XRNCL5CA.cjs');
 
+var _chunkZS6OPCVJcjs = require('./chunk-ZS6OPCVJ.cjs');
 
-var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkNSUGNTKScjs = require('./chunk-NSUGNTKS.cjs');
+var _chunkVXRUJP4Qcjs = require('./chunk-VXRUJP4Q.cjs');
 
 
-var _chunkKTXJ54RRcjs = require('./chunk-KTXJ54RR.cjs');
+var _chunkWBKVP5QRcjs = require('./chunk-WBKVP5QR.cjs');
 
 
-var _chunkWIIDMFXRcjs = require('./chunk-WIIDMFXR.cjs');
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkZFJVBBROcjs = require('./chunk-ZFJVBBRO.cjs');
+var _chunkNPXZDRT5cjs = require('./chunk-NPXZDRT5.cjs');
 
 
 
 
 
-var _chunkRUDXRW4Rcjs = require('./chunk-RUDXRW4R.cjs');
+var _chunk4GO7VWXEcjs = require('./chunk-4GO7VWXE.cjs');
 
 
 var _chunk6VA4SAHQcjs = require('./chunk-6VA4SAHQ.cjs');
@@ -50,11 +50,20 @@ var _chunk6VA4SAHQcjs = require('./chunk-6VA4SAHQ.cjs');
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
 
 
+var _chunkKL5ZQSVOcjs = require('./chunk-KL5ZQSVO.cjs');
+
 
-var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
+
+var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
 
 // src/components/Modal.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+
+
+
+
+
+
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 var _reactdom = require('react-dom'); var _reactdom2 = _interopRequireDefault(_reactdom);
 var _jsxruntime = require('@emotion/react/jsx-runtime');
@@ -77,6 +86,7 @@ function Modal({
   submitLoading,
   submitLoadingKind,
   submitText,
+  submitIcon,
   submitLink,
   cancelText = "Cancel",
   firstFocusRef,
@@ -86,6 +96,7 @@ function Modal({
   autoFocus = true,
   width = 460,
   progressBar,
+  buttonOrder,
   buttonLayout = "horizontal",
   extraActions,
   handleBack,
@@ -94,8 +105,9 @@ function Modal({
   topLeftIcon
 }) {
   const visibleChangedRef = _react.useRef.call(void 0, false);
+  const [visibleChanged, setVisibleChanged] = _react.useState.call(void 0, false);
   const nodeRef = _react.useRef.call(void 0, null);
-  const [defaultFirstFocusRef, defaultFirstFocusRefCb] = _chunkGSYM5JMBcjs.useLiveRef.call(void 0, );
+  const [defaultFirstFocusRef, defaultFirstFocusRefCb] = _chunkKL5ZQSVOcjs.useLiveRef.call(void 0, );
   const ref = firstFocusRef || defaultFirstFocusRef;
   const [nodeReady, setNodeReady] = _react2.default.useState(false);
   const overlayRef = _react.useRef.call(void 0, null);
@@ -106,9 +118,14 @@ function Modal({
   _react.useEffect.call(void 0, () => {
     if (visible !== visibleChangedRef.current) {
       visibleChangedRef.current = visible;
+      setVisibleChanged(true);
     }
   }, [visible]);
-  const visibleChanged = visible !== visibleChangedRef.current;
+  _react.useEffect.call(void 0, () => {
+    if (visibleChanged) {
+      setVisibleChanged(false);
+    }
+  }, [visibleChanged]);
   _react.useEffect.call(void 0, () => {
     prevFocusedElement.current = document.activeElement;
     const elementToAppendTo = appendToElement != null ? appendToElement : document.body;
@@ -179,6 +196,7 @@ function Modal({
   }
   function onSubmitForm(e) {
     e.preventDefault();
+    e.stopPropagation();
     if (!submitDisabled && onSubmit) {
       onSubmit();
     }
@@ -192,13 +210,15 @@ function Modal({
   }
   const linkIsHref = isSubmitLinkWithHref(submitLink);
   const linkIsRoute = !linkIsHref && submitLink;
+  const displayCancelAbove = !!buttonOrder ? buttonOrder === "cancel-first" : !isSm;
+  const displayCancelBelow = !!buttonOrder ? buttonOrder === "submit-first" : isSm;
   const buttonContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "above").map((_a, i) => {
-      var _b = _a, { placement, text } = _b, rest = _chunkYM5JDZDQcjs.__objRest.call(void 0, _b, ["placement", "text"]);
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRSAWZM47cjs.Button, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
+      var _b = _a, { placement, text } = _b, rest = _chunkZ6EUSUADcjs.__objRest.call(void 0, _b, ["placement", "text"]);
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVXRUJP4Qcjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
     }),
-    !isSm && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkRSAWZM47cjs.Button,
+    displayCancelAbove && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkVXRUJP4Qcjs.Button,
       {
         disabled: cancelDisabled,
         onClick: onClickCancel,
@@ -206,10 +226,11 @@ function Modal({
       }
     ),
     (onSubmit || submitLink) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkRSAWZM47cjs.Button,
+      _chunkVXRUJP4Qcjs.Button,
       {
         kind: "primary",
         disabled: submitDisabled,
+        icon: submitIcon,
         text: submitText != null ? submitText : "Continue",
         loading: submitLoading,
         loadingKind: submitLoadingKind,
@@ -220,10 +241,17 @@ function Modal({
         onClick: submitLink ? onSubmit : void 0
       }
     ),
-    isSm && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRSAWZM47cjs.Button, { onClick: onClose, text: cancelText }),
+    displayCancelBelow && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkVXRUJP4Qcjs.Button,
+      {
+        disabled: cancelDisabled,
+        onClick: onClickCancel,
+        text: cancelText
+      }
+    ),
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "below").map((_c, i) => {
-      var _d = _c, { placement, text } = _d, rest = _chunkYM5JDZDQcjs.__objRest.call(void 0, _d, ["placement", "text"]);
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRSAWZM47cjs.Button, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
+      var _d = _c, { placement, text } = _d, rest = _chunkZ6EUSUADcjs.__objRest.call(void 0, _d, ["placement", "text"]);
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVXRUJP4Qcjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
     })
   ] });
   let titleContent = null;
@@ -233,10 +261,10 @@ function Modal({
       heading: "h4",
       size: "Small"
     };
-    const titleNodesWithTypography = _chunkNSUGNTKScjs.setDefaultReactNodesTypography.call(void 0, title, {
+    const titleNodesWithTypography = _chunkV2HGIJA7cjs.setDefaultReactNodesTypography.call(void 0, title, {
       default: defaultTypography
     });
-    titleContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalTitle, { children: _chunkKTXJ54RRcjs.toReactNodes.call(void 0, titleNodesWithTypography) });
+    titleContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalTitle, { children: _chunkT3KB7JMUcjs.toReactNodes.call(void 0, titleNodesWithTypography) });
   }
   let descriptionContent = null;
   if (description) {
@@ -244,19 +272,23 @@ function Modal({
       type: "Body",
       size: "ExtraSmall"
     };
-    const descriptionNodesWithTypography = _chunkNSUGNTKScjs.setDefaultReactNodesTypography.call(void 0, 
+    const descriptionNodesWithTypography = _chunkV2HGIJA7cjs.setDefaultReactNodesTypography.call(void 0, 
       description,
       { default: defaultTypography }
     );
-    descriptionContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalDescription, { children: _chunkKTXJ54RRcjs.toReactNodes.call(void 0, descriptionNodesWithTypography) });
+    descriptionContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalDescription, { children: _chunkT3KB7JMUcjs.toReactNodes.call(void 0, descriptionNodesWithTypography) });
   }
   let topContentNode = null;
   if (topContent) {
-    topContentNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: _chunkZUAO4DW3cjs.Spacing.px.xl }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGMN76DHFcjs.IconWithCircleBackground, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, topContent)) });
+    if (_chunkDCH43ZYZcjs.isReactNode.call(void 0, topContent)) {
+      topContentNode = topContent;
+    } else {
+      topContentNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: _chunkZUAO4DW3cjs.Spacing.px.xl }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHOSATPMScjs.IconWithCircleBackground, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, topContent)) });
+    }
   }
   const modalContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
     progressBar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkOEDOWIS6cjs.ProgressBar,
+      _chunkIQNQAXSOcjs.ProgressBar,
       {
         progressPercentage: progressBar.progressPercentage,
         isSm: progressBar.isSm
@@ -271,7 +303,7 @@ function Modal({
   let content;
   if (smKind === "drawer" && isSm) {
     content = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkXY4F2W3Jcjs.Drawer,
+      _chunkWD2RC7T7cjs.Drawer,
       {
         onClose: () => onClickCloseButton(),
         closeButton: true,
@@ -291,12 +323,12 @@ function Modal({
           tabIndex: -1,
           role: "dialog",
           ref: modalContainerRef,
-          top: top || (smKind === "default" ? _chunkRUDXRW4Rcjs.standardContentInset.smPx : 0),
+          top: top || (smKind === "default" ? _chunk4GO7VWXEcjs.standardContentInset.smPx : 0),
           children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalContent, { width, ghost, smKind, children: [
             !firstFocusRef && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
             !ghost && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalNavigation, { children: [
-              handleBack ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButton, { onClick: handleBack, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZFJVBBROcjs.Icon, { name: "ChevronLeft", width: 16 }) }) : topLeftIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZFJVBBROcjs.Icon, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, topLeftIcon)) : null,
-              !nonDismissable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZFJVBBROcjs.Icon, { name: "Close", width: 9 }) })
+              handleBack ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButton, { onClick: handleBack, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNPXZDRT5cjs.Icon, { name: "ChevronLeft", width: 16 }) }) : topLeftIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNPXZDRT5cjs.Icon, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, topLeftIcon)) : null,
+              !nonDismissable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNPXZDRT5cjs.Icon, { name: "Close", width: 9 }) })
             ] }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalContentInner, { ghost, children: modalContent }),
             bottomContent && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginTop: "auto" }, children: bottomContent })
@@ -310,7 +342,7 @@ function Modal({
     nodeRef.current
   ) : null;
 }
-var DefaultFocusTarget = _styled2.default.call(void 0, _chunkXRNCL5CAcjs.UnstyledButton)`
+var DefaultFocusTarget = _styled2.default.call(void 0, _chunkWBKVP5QRcjs.UnstyledButton)`
   position: absolute;
   top: -30px;
   width: 0;
@@ -355,7 +387,7 @@ var ModalButtonRow = _styled2.default.div`
   ${_chunkKW3JYLRIcjs.bp.minSm(`display: flex;`)}
   gap: 10px;
 
-  ${_chunkRSAWZM47cjs.ButtonSelector.call(void 0, )} {
+  ${_chunkVXRUJP4Qcjs.ButtonSelector.call(void 0, )} {
     width: 50%;
     ${_chunkKW3JYLRIcjs.bp.sm(`
       width: 100%;
@@ -367,7 +399,7 @@ var ModalButtonColumn = _styled2.default.div`
   flex-direction: column;
   gap: ${_chunkZUAO4DW3cjs.Spacing.px.sm};
 
-  ${_chunkRSAWZM47cjs.ButtonSelector.call(void 0, )} {
+  ${_chunkVXRUJP4Qcjs.ButtonSelector.call(void 0, )} {
     width: 100%;
   }
 
@@ -383,22 +415,23 @@ var ModalContent = _styled2.default.div`
   pointer-events: auto;
   transition: width 0.25s ease-in;
 
-  ${({ theme, smKind, ghost }) => ghost ? "" : _chunkRUDXRW4Rcjs.overlaySurface.call(void 0, { theme, border: smKind !== "fullscreen" })}
+  ${({ theme, smKind, ghost }) => ghost ? "" : _chunk4GO7VWXEcjs.overlaySurface.call(void 0, { theme, border: smKind !== "fullscreen" })}
 
-  ${_chunkWIIDMFXRcjs.overflowAutoWithoutScrollbars}
-  ${_chunkRUDXRW4Rcjs.standardContentInset.smCSS.styles}
+  ${_chunkZS6OPCVJcjs.overflowAutoWithoutScrollbars}
+  ${_chunk4GO7VWXEcjs.standardContentInset.smCSS.styles}
   max-width: 100%;
   max-height: 100%;
   position: absolute;
   display: flex;
   flex-direction: column;
 
-  ${({ ghost, width }) => `
-    ${ghost ? "" : _chunkRUDXRW4Rcjs.standardBorderRadius.call(void 0, 16)}
+  ${({ ghost, smKind, width }) => `
+    ${ghost ? "" : _chunk4GO7VWXEcjs.standardBorderRadius.call(void 0, 16)}
     width: ${width}px;
   `}
 
   ${({ smKind }) => smKind === "fullscreen" ? _chunkKW3JYLRIcjs.bp.sm(`
+          border-radius: 0px;
           width: 100%;
           height: 100dvh;
         `) : ""}
@@ -410,14 +443,14 @@ var ModalNavigation = _styled2.default.div`
   grid-auto-flow: column;
   width: 100%;
 `;
-var BackButton = _styled2.default.call(void 0, _chunkXRNCL5CAcjs.UnstyledButton)`
-  ${_chunkRUDXRW4Rcjs.standardFocusOutline}
+var BackButton = _styled2.default.call(void 0, _chunkWBKVP5QRcjs.UnstyledButton)`
+  ${_chunk4GO7VWXEcjs.standardFocusOutline}
   width: 24px;
   height: 24px;
   justify-self: flex-start;
 `;
-var CloseButton = _styled2.default.call(void 0, _chunkXRNCL5CAcjs.UnstyledButton)`
-  ${_chunkRUDXRW4Rcjs.standardFocusOutline}
+var CloseButton = _styled2.default.call(void 0, _chunkWBKVP5QRcjs.UnstyledButton)`
+  ${_chunk4GO7VWXEcjs.standardFocusOutline}
   width: 24px;
   height: 24px;
   justify-self: flex-end;

package/dist/{chunk-4EXNT44R.js → chunk-G375DUHZ.js}

@@ -1,42 +1,39 @@
 import {
   Loading
-} from "./chunk-XDZPMJZG.js";
-import {
-  UnstyledButton
-} from "./chunk-I5WDNJY3.js";
+} from "./chunk-ASXQN3NJ.js";
 import {
   Tooltip
-} from "./chunk-XADWD755.js";
+} from "./chunk-NVSSVEIP.js";
+import {
+  UnstyledButton
+} from "./chunk-QYJ7HXKC.js";
 import {
   Icon
-} from "./chunk-RMZQSXO2.js";
+} from "./chunk-NXAP7SVM.js";
 import {
   getFocusOutline
-} from "./chunk-RNCUEVKR.js";
+} from "./chunk-QRFR2JVT.js";
 import {
   Link
-} from "./chunk-UUKJNNJ5.js";
+} from "./chunk-FD6VC3VV.js";
 import {
   renderTypography
-} from "./chunk-EFEPUABF.js";
+} from "./chunk-5WDQEXOH.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   applyTypography
-} from "./chunk-XBZNPA3L.js";
+} from "./chunk-XNXBY2U3.js";
 import {
   getBackgroundColor,
   isThemeOrColorKey
-} from "./chunk-QNPCRFUV.js";
-import {
-  TokenSize
-} from "./chunk-EWNQ3Z3L.js";
+} from "./chunk-ZNDP2XLL.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./chunk-CWMXXUWU.js";
+} from "./chunk-W7FAWX6T.js";
 
 // src/components/Button.tsx
 import { css, useTheme } from "@emotion/react";
@@ -57,32 +54,10 @@ var buttonKinds = [
   "danger",
   "warning",
   "tertiary",
-  "quaternary"
+  "quaternary",
+  "roundSingleChar",
+  "roundIcon"
 ];
-var roundPaddingsX = {
-  [TokenSize.ExtraSmall]: 10,
-  [TokenSize.Small]: 10,
-  [TokenSize.Schmedium]: 10,
-  [TokenSize.Medium]: 14,
-  [TokenSize.Mlarge]: 19,
-  [TokenSize.Large]: 19
-};
-var paddingsX = {
-  [TokenSize.ExtraSmall]: 16,
-  [TokenSize.Small]: 24,
-  [TokenSize.Schmedium]: 24,
-  [TokenSize.Medium]: 24,
-  [TokenSize.Mlarge]: 24,
-  [TokenSize.Large]: 24
-};
-function getPaddingX(size, kind, isRound) {
-  return kind === "ghost" ? 0 : isRound ? roundPaddingsX[size] : paddingsX[size];
-}
-function getPadding({ paddingY, kind, size, iconSide, isRound }) {
-  const paddingX = getPaddingX(size, kind, isRound);
-  const paddingForIcon = 0;
-  return kind === "ghost" ? 0 : `${paddingY}px ${paddingX + (iconSide === "right" ? paddingForIcon : 0)}px ${paddingY}px ${paddingX + (iconSide === "left" ? paddingForIcon : 0)}px`;
-}
 function resolveBackgroundColorKey(theme, kind, defaultKey) {
   var _a;
   const defaultBackgroundColorKey = (_a = theme.buttons.kinds[kind]) == null ? void 0 : _a[defaultKey];
@@ -107,8 +82,13 @@ function resolveProp(prop, kind, defaultKey, theme) {
   );
 }
 function resolveProps(props, theme) {
+  const isSingleCharRoundButton = Boolean(
+    props.text && props.text.length === 1 && !props.icon
+  );
+  const isRoundIconButton = Boolean(!props.text && props.icon);
+  const defaultKind = isSingleCharRoundButton ? "roundSingleChar" : isRoundIconButton ? "roundIcon" : "secondary";
   const _a = props, {
-    kind = "secondary",
+    kind = defaultKind,
     size: sizeProp,
     paddingY: paddingYType = "regular",
     borderRadius,
@@ -123,6 +103,8 @@ function resolveProps(props, theme) {
   const size = resolveProp(sizeProp, kind, "defaultSize", theme);
   const defaultPaddingsY = resolveProp(null, kind, "defaultPaddingsY", theme);
   const defaultPaddingY = defaultPaddingsY[size];
+  const defaultPaddingsX = resolveProp(null, kind, "defaultPaddingsX", theme);
+  const defaultPaddingX = defaultPaddingsX[size];
   const backgroundColor = resolveBackgroundColorKey(
     theme,
     kind,
@@ -163,7 +145,8 @@ function resolveProps(props, theme) {
     size,
     typography,
     paddingY: typeof defaultPaddingY === "number" ? defaultPaddingY : defaultPaddingY[paddingYType],
-    borderRadius: resolveProp(borderRadius, kind, "defaultBorderRadius", theme),
+    paddingX: defaultPaddingX,
+    borderRadius: kind === "roundSingleChar" || kind === "roundIcon" ? 999 : resolveProp(borderRadius, kind, "defaultBorderRadius", theme),
     backgroundColor,
     borderColor,
     hoverBackgroundColor,
@@ -178,6 +161,7 @@ function Button(props) {
     kind,
     typography,
     size,
+    paddingX,
     paddingY,
     text,
     to,
@@ -218,6 +202,7 @@ function Button(props) {
         text,
         typography,
         kind,
+        paddingX,
         children: /* @__PURE__ */ jsx(Loading, { size: defaultIconWidth, center: false, kind: loadingKind })
       }
     );
@@ -229,10 +214,12 @@ function Button(props) {
         text,
         typography,
         kind,
+        paddingX,
         children: /* @__PURE__ */ jsx(
           Icon,
           __spreadProps(__spreadValues({}, icon), {
             width: icon.width || defaultIconWidth,
+            square: true,
             color: typography.color
           })
         )
@@ -271,7 +258,6 @@ function Button(props) {
     ),
     tooltipText ? /* @__PURE__ */ jsx(Tooltip, { id: tooltipId.current, content: tooltipText }) : null
   ] });
-  const isSingleCharRoundButton = Boolean(text && text.length === 1 && !icon);
   const commonProps = {
     id,
     kind,
@@ -280,6 +266,7 @@ function Button(props) {
     onClick,
     fullWidth,
     iconSide,
+    paddingX,
     paddingY,
     backgroundColor,
     borderColor,
@@ -287,7 +274,6 @@ function Button(props) {
     hoverBorderColor,
     activeBackgroundColor,
     activeBorderColor,
-    isRound: isSingleCharRoundButton,
     isLoading: loading,
     disabled: disabled || loading,
     css: {
@@ -312,6 +298,7 @@ function Button(props) {
   ) : /* @__PURE__ */ jsx(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
 }
 var buttonStyle = ({
+  paddingX,
   paddingY,
   kind,
   theme,
@@ -322,7 +309,6 @@ var buttonStyle = ({
   zIndex,
   iconSide,
   borderColor: borderColorProp,
-  isRound,
   borderRadius,
   backgroundColor,
   hoverBackgroundColor,
@@ -362,14 +348,8 @@ var buttonStyle = ({
       box-sizing: content-box;
       border: 1px solid;
       border-color: ${borderColor};
-      border-radius: ${isRound ? "100%" : `${borderRadius}px`};
-      padding: ${getPadding({
-    paddingY,
-    kind,
-    size: typography.size,
-    iconSide,
-    isRound
-  })};
+      border-radius: ${typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius};
+      padding: ${paddingY}px ${paddingX}px;
       transition:
         background-color 0.2s ease-out,
         border-color 0.2s ease-out;
@@ -390,7 +370,7 @@ var ButtonIcon = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  ${({ iconSide, kind, typography }) => `${iconSide}: ${getPaddingX(typography.size, kind, false)}px;`}
+  ${({ iconSide, paddingX }) => `${iconSide}: ${paddingX}px;`}
 `;
 var StyledButton = styled(UnstyledButton)`
   ${(props) => buttonStyle(props)}

package/dist/{chunk-X6FYQTZ6.cjs → chunk-GBWOZLYD.cjs}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkQ4RAJLKPcjs = require('./chunk-Q4RAJLKP.cjs');
+var _chunkT3KB7JMUcjs = require('./chunk-T3KB7JMU.cjs');
 
 
-var _chunkKTXJ54RRcjs = require('./chunk-KTXJ54RR.cjs');
+var _chunkPJUAK2V6cjs = require('./chunk-PJUAK2V6.cjs');
 
 
-var _chunkZFJVBBROcjs = require('./chunk-ZFJVBBRO.cjs');
+var _chunkNPXZDRT5cjs = require('./chunk-NPXZDRT5.cjs');
 
 // src/components/InfoIconTooltip.tsx
 var _react = require('react');
@@ -16,17 +16,17 @@ function InfoIconTooltip({
   content,
   verticalAlign = "middle"
 }) {
-  const contentNodes = _chunkKTXJ54RRcjs.toReactNodes.call(void 0, content);
+  const contentNodes = _chunkT3KB7JMUcjs.toReactNodes.call(void 0, content);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
       {
         "data-tooltip-id": id,
         style: { display: "inline-flex", alignItems: "center", verticalAlign },
-        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZFJVBBROcjs.Icon, { name: "Info", width: 12, ml: 4 })
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNPXZDRT5cjs.Icon, { name: "Info", width: 12, ml: 4 })
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQ4RAJLKPcjs.Tooltip, { id, render: () => contentNodes, clickable: true })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPJUAK2V6cjs.Tooltip, { id, render: () => contentNodes, clickable: true })
   ] });
 }
 

package/dist/{chunk-KDUQH43X.cjs → chunk-GCHK6JJU.cjs}

@@ -11,8 +11,8 @@ function BrokenChainLink({ strokeWidth = "1" }) {
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "path",
         {
-          "fill-rule": "evenodd",
-          "clip-rule": "evenodd",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
           d: "M9.59613 1.71666C10.4891 1.49342 11.394 2.03636 11.6172 2.92934L12.4506 6.26267C12.6738 7.15567 12.1309 8.06056 11.2379 8.28381C10.3449 8.50706 9.44003 7.96413 9.21678 7.07113L8.38345 3.73779C8.1602 2.84481 8.70313 1.93991 9.59613 1.71666ZM30.8912 9.10938C27.6345 5.85274 22.3545 5.85274 19.0979 9.10938L19.0902 9.11712L17.8377 10.3531C17.1827 10.9997 16.1274 10.9928 15.4808 10.3376C14.8342 9.68249 14.8412 8.62724 15.4963 7.98067L16.745 6.74826C21.3037 2.19397 28.6912 2.19534 33.2482 6.75234C37.8054 11.3094 37.8065 18.697 33.2522 23.2558L33.2482 23.2597L32.0199 24.5043C31.3734 25.1595 30.318 25.1663 29.663 24.5198C29.0079 23.8732 29.0009 22.818 29.6474 22.1628L30.8912 20.9027C34.1479 17.646 34.1479 12.366 30.8912 9.10938ZM1.71678 9.59601C1.94003 8.70302 2.84492 8.16009 3.73792 8.38332L7.07125 9.21666C7.96423 9.43991 8.50717 10.3448 8.28392 11.2378C8.06068 12.1308 7.15578 12.6737 6.2628 12.4505L2.92947 11.6171C2.03647 11.3939 1.49353 10.489 1.71678 9.59601ZM10.3377 15.4807C10.9929 16.1272 10.9998 17.1825 10.3532 17.8377L9.10952 19.0978C5.85288 22.3545 5.85287 27.6345 9.10948 30.8912C12.3661 34.1477 17.6462 34.1477 20.9027 30.8912L20.9105 30.8833L22.163 29.6473C22.818 29.0007 23.8734 29.0077 24.5199 29.6628C25.1665 30.318 25.1595 31.3732 24.5044 32.0198L23.2599 33.2482L23.2557 33.2522C18.697 37.8065 11.3095 37.8052 6.75247 33.2482C2.19543 28.691 2.1941 21.3035 6.74847 16.7448L7.98078 15.4962C8.62737 14.841 9.68262 14.8341 10.3377 15.4807ZM31.7169 28.7627C31.94 27.8697 32.8449 27.3267 33.7379 27.55L37.0712 28.3833C37.9642 28.6065 38.5072 29.5115 38.2839 30.4045C38.0607 31.2975 37.1559 31.8403 36.2629 31.6172L32.9295 30.7838C32.0365 30.5605 31.4935 29.6557 31.7169 28.7627ZM28.7629 31.7167C29.6559 31.4933 30.5607 32.0363 30.7839 32.9293L31.6172 36.2627C31.8405 37.1557 31.2975 38.0605 30.4045 38.2838C29.5115 38.507 28.6067 37.9642 28.3835 37.0712L27.5502 33.7378C27.3269 32.8448 27.8699 31.9398 28.7629 31.7167Z",
           fill: "currentColor",
           stroke: "currentColor",

package/dist/chunk-GNRTDXIC.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/hooks/useNumberInput/utils/escapeRegExp.ts
+var escapeRegExp = (stringToGoIntoTheRegex) => {
+  return stringToGoIntoTheRegex.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
+};
+
+
+
+exports.escapeRegExp = escapeRegExp;

package/dist/chunk-GSJPWD4A.cjs

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkT3KB7JMUcjs = require('./chunk-T3KB7JMU.cjs');
+
+
+
+var _chunkFSFRDBEXcjs = require('./chunk-FSFRDBEX.cjs');
+
+
+
+var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
+
+// src/components/typography/LabelModerate.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function LabelModerate(props) {
+  const propsWithDefaults = _chunkFSFRDBEXcjs.getPropDefaults.call(void 0, props);
+  let reactNodes = props.children || null;
+  if (props.content) {
+    reactNodes = _chunkT3KB7JMUcjs.toReactNodes.call(void 0, props.content);
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFSFRDBEXcjs.StyledLabelModerate, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, propsWithDefaults), { children: reactNodes }));
+}
+
+
+
+exports.LabelModerate = LabelModerate;