@lightsparkdev/ui 1.1.10 → 1.1.12

package/dist/{chunk-CBZWRFNU.cjs → chunk-EFE67RSP.cjs}

@@ -1,8 +1,5 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkIO33D4VHcjs = require('./chunk-IO33D4VH.cjs');
-
-
 var _chunkWNB3MZJOcjs = require('./chunk-WNB3MZJO.cjs');
 
 
@@ -15,17 +12,20 @@ var _chunkYEN2IQ6Zcjs = require('./chunk-YEN2IQ6Z.cjs');
 var _chunkMEPSDTIKcjs = require('./chunk-MEPSDTIK.cjs');
 
 
-var _chunkJ26VDYFVcjs = require('./chunk-J26VDYFV.cjs');
+var _chunkCSFRHQZLcjs = require('./chunk-CSFRHQZL.cjs');
 
 
-var _chunkQV4YFGGGcjs = require('./chunk-QV4YFGGG.cjs');
+var _chunkVSTOGSPIcjs = require('./chunk-VSTOGSPI.cjs');
 
 
 var _chunkV6U2YSQUcjs = require('./chunk-V6U2YSQU.cjs');
 
 
+var _chunkIO33D4VHcjs = require('./chunk-IO33D4VH.cjs');
+
+
 
-var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
+var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
 
 // src/hooks/useNumberInput/useNumberInput.tsx
 var _react = require('react');
@@ -58,7 +58,7 @@ function useNumberInput({
   if (_groupSeparator && _chunkIO33D4VHcjs.isNumber.call(void 0, _groupSeparator)) {
     throw new Error("groupSeparator cannot be a number");
   }
-  const localeConfig = _react.useMemo.call(void 0, () => _chunkQV4YFGGGcjs.getLocaleConfig.call(void 0, intlConfig), [intlConfig]);
+  const localeConfig = _react.useMemo.call(void 0, () => _chunkVSTOGSPIcjs.getLocaleConfig.call(void 0, intlConfig), [intlConfig]);
   const decimalSeparator = _decimalSeparator || localeConfig.decimalSeparator || "";
   const groupSeparator = _groupSeparator || localeConfig.groupSeparator || "";
   if (decimalSeparator && groupSeparator && decimalSeparator === groupSeparator && disableGroupSeparators === false) {
@@ -83,7 +83,7 @@ function useNumberInput({
     transformRawValue
   };
   const [stateValue, setStateValue] = _react.useState.call(void 0, 
-    () => userValue != null ? _chunkJ26VDYFVcjs.formatValue.call(void 0, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, formatValueOptions), {
+    () => userValue != null ? _chunkCSFRHQZLcjs.formatValue.call(void 0, _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, formatValueOptions), {
       decimalScale,
       value: String(userValue)
     })) : ""
@@ -101,7 +101,7 @@ function useNumberInput({
       stateValue,
       groupSeparator
     });
-    const stringValue = _chunkYEN2IQ6Zcjs.cleanValue.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {
+    const stringValue = _chunkYEN2IQ6Zcjs.cleanValue.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {
       value: modifiedValue
     }, cleanValueOptions));
     if (userMaxLength && stringValue.replace(/-/g, "").length > userMaxLength) {
@@ -119,7 +119,7 @@ function useNumberInput({
     }
     const stringValueWithoutSeparator = decimalSeparator ? stringValue.replace(decimalSeparator, ".") : stringValue;
     const numberValue = parseFloat(stringValueWithoutSeparator);
-    const formattedValue = _chunkJ26VDYFVcjs.formatValue.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {
+    const formattedValue = _chunkCSFRHQZLcjs.formatValue.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {
       value: stringValue
     }, formatValueOptions));
     if (cursorPosition != null) {
@@ -151,7 +151,7 @@ function useNumberInput({
     const {
       target: { value }
     } = event;
-    const valueOnly = _chunkYEN2IQ6Zcjs.cleanValue.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, { value }, cleanValueOptions));
+    const valueOnly = _chunkYEN2IQ6Zcjs.cleanValue.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, { value }, cleanValueOptions));
     if (valueOnly === "-" || valueOnly === decimalSeparator || !valueOnly) {
       setStateValue("");
       return;
@@ -167,7 +167,7 @@ function useNumberInput({
       decimalScale !== void 0 ? decimalScale : fixedDecimalLength
     );
     const numberValue = parseFloat(newValue.replace(decimalSeparator, "."));
-    const formattedValue = _chunkJ26VDYFVcjs.formatValue.call(void 0, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, formatValueOptions), {
+    const formattedValue = _chunkCSFRHQZLcjs.formatValue.call(void 0, _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, formatValueOptions), {
       value: newValue
     }));
     if (onChange && formatValueOnBlur) {
@@ -186,7 +186,7 @@ function useNumberInput({
       event.preventDefault();
       setCursor(stateValue.length);
       const currentValue = parseFloat(
-        userValue != null ? String(userValue).replace(decimalSeparator, ".") : _chunkYEN2IQ6Zcjs.cleanValue.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, { value: stateValue }, cleanValueOptions))
+        userValue != null ? String(userValue).replace(decimalSeparator, ".") : _chunkYEN2IQ6Zcjs.cleanValue.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, { value: stateValue }, cleanValueOptions))
       ) || 0;
       const newValue = key === "ArrowUp" ? currentValue + step : currentValue - step;
       if (min !== void 0 && newValue < Number(min)) {
@@ -234,7 +234,7 @@ function useNumberInput({
   }, [stateValue, cursor, ref, dirty, changeCount]);
   const getRenderValue = () => {
     if (userValue != null && stateValue !== "-" && (!decimalSeparator || stateValue !== decimalSeparator)) {
-      return _chunkJ26VDYFVcjs.formatValue.call(void 0, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, formatValueOptions), {
+      return _chunkCSFRHQZLcjs.formatValue.call(void 0, _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, formatValueOptions), {
         decimalScale: dirty ? void 0 : decimalScale,
         value: String(userValue)
       }));

package/dist/chunk-EIMKA4T5.cjs

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkMVYSTBT3cjs = require('./chunk-MVYSTBT3.cjs');
+
+
+
+var _chunkMAZATZKEcjs = require('./chunk-MAZATZKE.cjs');
+
+
+
+var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
+
+// src/components/typography/Headline.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function Headline(props) {
+  const propsWithDefaults = _chunkMAZATZKEcjs.getPropDefaults.call(void 0, props);
+  let reactNodes = props.children || null;
+  if (props.content) {
+    reactNodes = _chunkMVYSTBT3cjs.toReactNodes.call(void 0, props.content);
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMAZATZKEcjs.StyledHeadline, _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, propsWithDefaults), { children: reactNodes }));
+}
+
+
+
+exports.Headline = Headline;

package/dist/{chunk-ZUAUG74V.cjs → chunk-EJR26GKN.cjs}

@@ -3,43 +3,49 @@
 var _chunkB6Y7HCBMcjs = require('./chunk-B6Y7HCBM.cjs');
 
 
-var _chunkKL5ZQSVOcjs = require('./chunk-KL5ZQSVO.cjs');
+var _chunk4VPHZC2Dcjs = require('./chunk-4VPHZC2D.cjs');
 
 
-var _chunkX7XHV4ICcjs = require('./chunk-X7XHV4IC.cjs');
+var _chunkGWYU4ZFAcjs = require('./chunk-GWYU4ZFA.cjs');
 
 
-var _chunkVLYEKZJ6cjs = require('./chunk-VLYEKZJ6.cjs');
+var _chunkP7BNVHNVcjs = require('./chunk-P7BNVHNV.cjs');
 
 
-var _chunkKKOBB4X5cjs = require('./chunk-KKOBB4X5.cjs');
+var _chunkGMDANQACcjs = require('./chunk-GMDANQAC.cjs');
 
 
-var _chunkSNSG4HBQcjs = require('./chunk-SNSG4HBQ.cjs');
+var _chunkJR6JLVEZcjs = require('./chunk-JR6JLVEZ.cjs');
 
 
 var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkWF7Z2VITcjs = require('./chunk-WF7Z2VIT.cjs');
+var _chunkMVYSTBT3cjs = require('./chunk-MVYSTBT3.cjs');
+
 
+var _chunkX6AJB6TLcjs = require('./chunk-X6AJB6TL.cjs');
 
 
 
-var _chunkRSHN4K6Ncjs = require('./chunk-RSHN4K6N.cjs');
 
+var _chunkRZ24JAMPcjs = require('./chunk-RZ24JAMP.cjs');
 
-var _chunkGH54P25Bcjs = require('./chunk-GH54P25B.cjs');
 
+var _chunkJOIBGT3Qcjs = require('./chunk-JOIBGT3Q.cjs');
 
-var _chunkOBHJBBPCcjs = require('./chunk-OBHJBBPC.cjs');
+
+var _chunkR5SHOMBXcjs = require('./chunk-R5SHOMBX.cjs');
 
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
 
 
+var _chunkKL5ZQSVOcjs = require('./chunk-KL5ZQSVO.cjs');
 
-var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
+
+
+var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
 
 // src/components/Dropdown.tsx
 var _react = require('@emotion/react');
@@ -68,8 +74,10 @@ function Dropdown({
   minDropdownItemsWidth = 200,
   maxDropdownItemsWidth = 300,
   align = "center",
+  dropdownItemOffsetTop: dropdownItemOffsetTopProp = 0,
   verticalPlacement = "bottom",
   footer = null,
+  getFooterCSS,
   dropdownContent = null,
   borderRadius = 8
 }) {
@@ -210,8 +218,8 @@ function Dropdown({
     onClickDropdownItems && onClickDropdownItems();
   }, [onClickDropdownItems, setOpen]);
   const dropdownTopMargin = 8;
-  let dropdownItemOffsetTop = dropdownCoords.top + dropdownButtonHeight + dropdownTopMargin;
-  let dropdownItemOffsetLeft = 0;
+  let dropdownItemOffsetTop = dropdownCoords.top + dropdownButtonHeight + dropdownTopMargin + dropdownItemOffsetTopProp;
+  let dropdownItemOffsetLeft = dropdownCoords.left;
   if (align === "center") {
     dropdownItemOffsetLeft = dropdownCoords.left - (dropdownItemsWidth - dropdownButtonWidth) / 2;
   } else if (align === "right") {
@@ -246,23 +254,24 @@ function Dropdown({
     onBlur: handleBlur,
     ref: dropdownButtonRefCb
   };
-  const commonUnstyledButtonProps = _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, commonButtonProps), {
+  const commonUnstyledButtonProps = _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, commonButtonProps), {
     css: "getCSS" in button && button.getCSS ? button.getCSS({ isOpen, theme }) : void 0
   });
   let buttonNode = null;
   if ("label" in button) {
-    buttonNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UnstyledDropdownButton, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, commonUnstyledButtonProps), { children: button.label }));
+    buttonNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UnstyledDropdownButton, _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, commonUnstyledButtonProps), { children: button.label }));
   } else if ("getContent" in button) {
-    buttonNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UnstyledDropdownButton, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, commonUnstyledButtonProps), { children: button.getContent({ isOpen, theme }) }));
+    buttonNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UnstyledDropdownButton, _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, commonUnstyledButtonProps), { children: button.getContent({ isOpen, theme }) }));
   } else {
-    buttonNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKKOBB4X5cjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, button), commonButtonProps));
+    buttonNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGMDANQACcjs.Button, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, button), commonButtonProps));
   }
   const containerCSS = getCSS && getCSS({ isOpen, theme });
   const dropdownItemsCSS = getDropdownItemsCSS && getDropdownItemsCSS({ isOpen, theme });
+  const footerCSS = getFooterCSS && getFooterCSS({ isOpen, theme });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
-      css: _chunkZ6EUSUADcjs.__spreadValues.call(void 0, { position: "relative", display: "inline-flex" }, containerCSS),
+      css: _chunkYM5JDZDQcjs.__spreadValues.call(void 0, { position: "relative", display: "inline-flex" }, containerCSS),
       ref: dropdownRef,
       children: [
         buttonNode,
@@ -285,12 +294,14 @@ function Dropdown({
                     DropdownItem,
                     {
                       dropdownItem,
-                      onClick: handleClickDropdownItems
+                      dropdownButtonHeight,
+                      onClick: handleClickDropdownItems,
+                      getDropdownCss: getCSS
                     }
-                  ) }, dropdownItem.label);
+                  ) }, dropdownItem.to);
                 }),
                 dropdownContent,
-                footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownFooter, { children: footer })
+                footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownFooter, _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, footerCSS && { css: footerCSS }), { children: footer }))
               ]
             }
           ),
@@ -301,14 +312,16 @@ function Dropdown({
   );
 }
 var DropdownFooter = _styled2.default.div`
-  padding: 24px 16px 0;
-  border-top: 1px solid ${({ theme }) => theme.c2Neutral};
-  margin-top: 16px;
+  ${({ css: css2, theme }) => css2 ? css2 : `
+    padding: 24px 16px 0;
+    border-top: 1px solid ${theme.c2Neutral};
+    margin-top: 16px;
+  `}
 `;
 var DropdownItems = _styled2.default.ul`
-  ${_chunkRSHN4K6Ncjs.overlaySurface}
-  color: ${({ theme }) => _chunkOBHJBBPCcjs.themeOr.call(void 0, theme.c6Neutral, theme.c8Neutral)};
-  ${({ borderRadius }) => _chunkRSHN4K6Ncjs.standardBorderRadius.call(void 0, borderRadius)}
+  ${_chunkRZ24JAMPcjs.overlaySurface}
+  color: ${({ theme }) => _chunkR5SHOMBXcjs.themeOr.call(void 0, theme.c6Neutral, theme.c8Neutral)};
+  ${({ borderRadius }) => _chunkRZ24JAMPcjs.standardBorderRadius.call(void 0, borderRadius)}
   ${({ hasItems }) => hasItems ? "padding: 12px 0;" : "padding: 0;"}
   visibility: ${({ isOpen }) => isOpen ? "visible" : "hidden"};
   position: fixed;
@@ -320,15 +333,22 @@ var DropdownItems = _styled2.default.ul`
   list-style: none;
   margin: 0;
 `;
-function DropdownItem({ dropdownItem, onClick }) {
+function DropdownItem({
+  dropdownItem,
+  dropdownButtonHeight,
+  onClick,
+  getDropdownCss
+}) {
   const theme = _react.useTheme.call(void 0, );
+  const [showSubDropdown, setShowSubDropdown] = _react3.useState.call(void 0, false);
+  const iconSide = dropdownItem.iconSide || "left";
   const dropdownItemIcon = dropdownItem.getIcon && dropdownItem.getIcon({ dropdownItem, theme });
   const dropdownItemIconNode = dropdownItemIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkWF7Z2VITcjs.Icon,
+    _chunkX6AJB6TLcjs.Icon,
     {
       name: dropdownItemIcon.name,
       width: dropdownItemIcon.width || 12,
-      mr: 10
+      mr: iconSide === "left" ? 10 : 0
     }
   ) : null;
   const cssProp2 = dropdownItem.getCSS && dropdownItem.getCSS({ theme, dropdownItem });
@@ -336,8 +356,24 @@ function DropdownItem({ dropdownItem, onClick }) {
     dropdownItem.onClick && dropdownItem.onClick(dropdownItem);
     onClick && onClick();
   }, [dropdownItem, onClick]);
+  const onMouseEnter = _react3.useCallback.call(void 0, () => {
+    dropdownItem.subDropdown && setShowSubDropdown(true);
+  }, [dropdownItem]);
+  const onMouseLeave = _react3.useCallback.call(void 0, () => {
+    dropdownItem.subDropdown && setShowSubDropdown(false);
+  }, [dropdownItem]);
+  const iconAndLabel = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    iconSide === "left" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      dropdownItemIconNode,
+      _chunkMVYSTBT3cjs.toReactNodes.call(void 0, dropdownItem.label)
+    ] }),
+    iconSide === "right" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkP7BNVHNVcjs.Flex, { justify: "space-between", align: "center", width: "100%", children: [
+      _chunkMVYSTBT3cjs.toReactNodes.call(void 0, dropdownItem.label),
+      dropdownItemIconNode
+    ] })
+  ] });
   if (dropdownItem.to !== void 0 || dropdownItem.externalLink) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       DropdownItemLink,
       {
         selected: Boolean(dropdownItem.selected),
@@ -347,35 +383,58 @@ function DropdownItem({ dropdownItem, onClick }) {
         onClick: onClickDropdownItem,
         css: cssProp2,
         hash: dropdownItem.hash,
-        children: [
-          dropdownItemIconNode,
-          dropdownItem.label
-        ]
+        children: iconAndLabel
       }
     );
   }
   if (dropdownItem.toggle) {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DropdownItemDiv, { selected: false, css: cssProp2, withHoverColor: false, children: [
-      dropdownItemIconNode,
-      dropdownItem.label,
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginLeft: "auto" }, children: "options" in dropdownItem.toggle ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkX7XHV4ICcjs.MultiToggle, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, dropdownItem.toggle)) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVLYEKZJ6cjs.Toggle, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, dropdownItem.toggle)) })
+      iconAndLabel,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginLeft: "auto" }, children: "options" in dropdownItem.toggle ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4VPHZC2Dcjs.MultiToggle, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, dropdownItem.toggle)) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGWYU4ZFAcjs.Toggle, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, dropdownItem.toggle)) })
     ] });
   }
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  if (dropdownItem.subDropdown) {
+    const DropdownComponent = dropdownItem.subDropdown.customDropdown || Dropdown;
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      DropdownItemDiv,
+      {
+        selected: false,
+        css: cssProp2,
+        onMouseEnter,
+        onMouseLeave,
+        children: [
+          iconAndLabel,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            DropdownComponent,
+            {
+              button: {
+                label: "",
+                getCSS: getDropdownCss
+              },
+              dropdownItems: dropdownItem.subDropdown.subItems,
+              align: "left",
+              dropdownItemOffsetTop: -dropdownButtonHeight,
+              isOpen: showSubDropdown,
+              onOpen: () => setShowSubDropdown(true),
+              onClose: () => setShowSubDropdown(false)
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     DropdownItemDiv,
     {
       selected: false,
       css: cssProp2,
       onClick: onClickDropdownItem,
-      children: [
-        dropdownItemIconNode,
-        dropdownItem.label
-      ]
+      children: iconAndLabel
     }
   );
 }
-var UnstyledDropdownButton = _styled2.default.call(void 0, _chunkSNSG4HBQcjs.UnstyledButton)`
-  ${_chunkRSHN4K6Ncjs.standardFocusOutline}
+var UnstyledDropdownButton = _styled2.default.call(void 0, _chunkJR6JLVEZcjs.UnstyledButton)`
+  ${_chunkRZ24JAMPcjs.standardFocusOutline}
 `;
 var dropdownItemStyle = ({
   theme,
@@ -406,20 +465,20 @@ var cssProp = ({
   selected
 }) => _react.css`
   ${dropdownItemStyle({ theme, selected: Boolean(selected) })}
-  ${_chunkRSHN4K6Ncjs.standardFocusOutline.call(void 0, { theme })}
+  ${_chunkRZ24JAMPcjs.standardFocusOutline.call(void 0, { theme })}
 `;
 function DropdownItemLink(props) {
   const theme = _react.useTheme.call(void 0, );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkGH54P25Bcjs.Link,
-    _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, props), {
+    _chunkJOIBGT3Qcjs.Link,
+    _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, props), {
       css: cssProp({ theme, selected: Boolean(props.selected) })
     })
   );
 }
 var DropdownItemDiv = _styled2.default.div`
   ${dropdownItemStyle}
-  ${_chunkRSHN4K6Ncjs.standardFocusOutline}
+  ${_chunkRZ24JAMPcjs.standardFocusOutline}
 `;
 
 

package/dist/{chunk-L33RQLMZ.js → chunk-ELDDEAMK.js}

@@ -1,15 +1,15 @@
 import {
   Flex
-} from "./chunk-5ENSQ45B.js";
+} from "./chunk-GQPSXKNA.js";
 import {
   Icon
-} from "./chunk-DMPXNHDT.js";
+} from "./chunk-6UZRKYFG.js";
 import {
   Link
-} from "./chunk-SWMGDTQN.js";
+} from "./chunk-X5XLAM3D.js";
 import {
   getColor
-} from "./chunk-VAH342U2.js";
+} from "./chunk-EE47JMIS.js";
 
 // src/components/IconWithCircleBackground.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-2FUPV2YR.js → chunk-EMESAQ5K.js}

@@ -1,17 +1,17 @@
 import {
   getPropDefaultsBase
-} from "./chunk-LEMT5P3Z.js";
+} from "./chunk-YQNDIDC2.js";
 import {
   typographyStyles
 } from "./chunk-YW4BJCOL.js";
 import {
   applyTypography
-} from "./chunk-2C7DZIDY.js";
+} from "./chunk-HXEOFTXC.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./chunk-W7FAWX6T.js";
+} from "./chunk-CWMXXUWU.js";
 
 // src/components/typography/base/Label.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-PHQ6NFOZ.js → chunk-EQHEEJE6.js}

@@ -1,7 +1,7 @@
 import {
   __spreadProps,
   __spreadValues
-} from "./chunk-W7FAWX6T.js";
+} from "./chunk-CWMXXUWU.js";
 
 // src/styles/themeDefaults/cardForm.tsx
 var cardFormThemeBaseProps = {

package/dist/{chunk-XO5V3EX5.cjs → chunk-ESB24OWJ.cjs}

@@ -1,21 +1,21 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
+var _chunkGMDANQACcjs = require('./chunk-GMDANQAC.cjs');
 
 
-var _chunkKKOBB4X5cjs = require('./chunk-KKOBB4X5.cjs');
+var _chunkJR6JLVEZcjs = require('./chunk-JR6JLVEZ.cjs');
 
 
-var _chunkSNSG4HBQcjs = require('./chunk-SNSG4HBQ.cjs');
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
-var _chunkWF7Z2VITcjs = require('./chunk-WF7Z2VIT.cjs');
+var _chunkX6AJB6TLcjs = require('./chunk-X6AJB6TL.cjs');
 
 
-var _chunkRSHN4K6Ncjs = require('./chunk-RSHN4K6N.cjs');
+var _chunkRZ24JAMPcjs = require('./chunk-RZ24JAMP.cjs');
 
 // src/components/Drawer.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -105,7 +105,7 @@ var Drawer = (props) => {
             children: [
               props.grabber && !props.nonDismissable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Grabber, { onClick: handleClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GrabberBar, {}) }),
               props.handleBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButtonContainer, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkKKOBB4X5cjs.Button,
+                _chunkGMDANQACcjs.Button,
                 {
                   onClick: props.handleBack,
                   icon: { name: "ChevronLeft" },
@@ -114,7 +114,7 @@ var Drawer = (props) => {
                 }
               ) }),
               props.closeButton && !props.nonDismissable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseButtonContainer, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseButton, { onClick: handleClose, type: "button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkWF7Z2VITcjs.Icon,
+                _chunkX6AJB6TLcjs.Icon,
                 {
                   name: "CentralCrossLarge",
                   square: true,
@@ -236,8 +236,8 @@ var CloseButtonContainer = _styled2.default.div`
     line-height: 14px;
   }
 `;
-var CloseButton = _styled2.default.call(void 0, _chunkSNSG4HBQcjs.UnstyledButton)`
-  ${_chunkRSHN4K6Ncjs.standardFocusOutline}
+var CloseButton = _styled2.default.call(void 0, _chunkJR6JLVEZcjs.UnstyledButton)`
+  ${_chunkRZ24JAMPcjs.standardFocusOutline}
   width: 24px;
   height: 24px;
   justify-self: flex-end;

package/dist/{chunk-TMHOHUIP.js → chunk-EWH523DU.js}

@@ -1,7 +1,7 @@
 import {
   __spreadProps,
   __spreadValues
-} from "./chunk-W7FAWX6T.js";
+} from "./chunk-CWMXXUWU.js";
 
 // src/hooks/useFields.tsx
 import { isValidUmaAddress } from "@uma-sdk/core";
@@ -19,14 +19,16 @@ var defaultMsgs = {
   required: "This field is required.",
   umaAddress: "Please enter a valid UMA address.",
   matchesField: "Target field does not match.",
-  clabe: "Please enter a valid CLABE."
+  clabe: "Please enter a valid CLABE.",
+  upi: "Please enter a valid UPI."
 };
 var regexp = {
   phone: /^[2-9]{1}[0-9]{9}$/,
   postalCode: /(^\d{5}$)|(^\d{5}-\d{4}$)/,
   email: /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/,
   state: /^(A[LKSZRAEP]|C[AOT]|D[EC]|F[LM]|G[AU]|HI|I[ADLN]|K[SY]|LA|M[ADEHINOPST]|N[CDEHJMVY]|O[HKR]|P[ARW]|RI|S[CD]|T[NX]|UT|V[AIT]|W[AIVY])$/,
-  clabe: /^[0-9]{18}$/
+  clabe: /^[0-9]{18}$/,
+  upi: /^[a-zA-Z0-9.\-_]{2,256}@[a-zA-Z]{2,64}$/
 };
 var v = {
   email: (msg = defaultMsgs.email) => (value) => !regexp.email.test(value) ? msg : false,
@@ -37,6 +39,7 @@ var v = {
   code: (msg = defaultMsgs.code) => (value) => value.trim().length !== 8 ? msg : false,
   umaAddress: (msg = defaultMsgs.umaAddress) => (value) => !isValidUmaAddress(value) ? msg : false,
   clabe: (msg = defaultMsgs.clabe) => (value) => !regexp.clabe.test(value) ? msg : false,
+  upi: (msg = defaultMsgs.upi) => (value) => !regexp.upi.test(value) ? msg : false,
   required: (msg = defaultMsgs.required) => (value) => value.trim() === "" ? msg : false,
   min: (msg, minLength = 3) => (value) => {
     const len = typeof minLength === "number" ? minLength : 3;

package/dist/{chunk-JZ3TGO3D.cjs → chunk-EZNRFABO.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
+var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
 
 // src/hooks/useClipboard.tsx
 var _react = require('react');
@@ -22,7 +22,7 @@ function useClipboard(clipboardArgs) {
     typeof ((_b = navigator.clipboard) == null ? void 0 : _b.writeText) !== "undefined"
   );
   const writeTextToClipboard = _react.useCallback.call(void 0, 
-    (text) => _chunkZ6EUSUADcjs.__async.call(void 0, this, null, function* () {
+    (text) => _chunkYM5JDZDQcjs.__async.call(void 0, this, null, function* () {
       try {
         if (!text.trim()) {
           if (onWriteEmptyText) {
@@ -43,7 +43,7 @@ function useClipboard(clipboardArgs) {
     }),
     [onWrite, onWriteEmptyText, onWriteError]
   );
-  const readTextFromClipboard = _react.useCallback.call(void 0, () => _chunkZ6EUSUADcjs.__async.call(void 0, this, null, function* () {
+  const readTextFromClipboard = _react.useCallback.call(void 0, () => _chunkYM5JDZDQcjs.__async.call(void 0, this, null, function* () {
     try {
       const text = yield navigator.clipboard.readText();
       return text;

package/dist/{chunk-L2UQFMAI.js → chunk-F2TLPMXI.js}

@@ -1,17 +1,17 @@
 import {
   getPropDefaultsBase
-} from "./chunk-LEMT5P3Z.js";
+} from "./chunk-YQNDIDC2.js";
 import {
   typographyStyles
 } from "./chunk-YW4BJCOL.js";
 import {
   applyTypography
-} from "./chunk-2C7DZIDY.js";
+} from "./chunk-HXEOFTXC.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./chunk-W7FAWX6T.js";
+} from "./chunk-CWMXXUWU.js";
 
 // src/components/typography/base/BodyStrong.tsx
 import styled from "@emotion/styled";