@lightsparkdev/ui 1.0.13 → 1.0.15

package/dist/chunk-MZJQAYFP.cjs

@@ -0,0 +1,262 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkZS6OPCVJcjs = require('./chunk-ZS6OPCVJ.cjs');
+
+
+var _chunkNPXZDRT5cjs = require('./chunk-NPXZDRT5.cjs');
+
+
+var _chunk4GO7VWXEcjs = require('./chunk-4GO7VWXE.cjs');
+
+
+var _chunkBW6SKFVJcjs = require('./chunk-BW6SKFVJ.cjs');
+
+
+var _chunkZBLXVPL4cjs = require('./chunk-ZBLXVPL4.cjs');
+
+
+var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
+
+// src/components/QRCode.tsx
+var _react = require('@emotion/react');
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _react3 = require('react');
+
+// src/static/images/FramedLogoOnCircle.svg?url
+var FramedLogoOnCircle_default = 'data:image/svg+xml,<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g clip-path="url(%23clip0_1800_26563)">%0A<circle cx="17.3333" cy="17.3333" r="14.3333" fill="%23FFF14E"/>%0A<path d="M17.2382 17.9634H11.5472L19.5845 10.929L18.0111 14.3381H18.9129L21.9401 7.77759L9.37109 18.7824H16.861L17.2382 17.9634Z" fill="black"/>%0A<path d="M17.2979 15.884L16.9206 16.7029H22.6116L14.5743 23.7374L16.1477 20.3283H15.246L14.6295 21.6671L12.2188 26.8888L24.7877 15.884H17.2979Z" fill="black"/>%0A</g>%0A<defs>%0A<clipPath id="clip0_1800_26563">%0A<rect width="28.6667" height="28.6667" fill="white" transform="translate(3 3)"/>%0A</clipPath>%0A</defs>%0A</svg>%0A';
+
+// src/static/images/UmaLogoQRCode.svg?url
+var UmaLogoQRCode_default = 'data:image/svg+xml,<svg width="50" height="40" viewBox="0 0 50 40" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M34.8575 22.3556C35.1875 22.3556 35.4647 22.2984 35.6891 22.184C35.9179 22.0652 36.0983 21.931 36.2303 21.7814C36.3667 21.6318 36.4591 21.5064 36.5075 21.4052C36.5999 21.2116 36.6527 20.9872 36.6659 20.732C36.6775 20.562 36.6852 20.4109 36.6892 20.2786C36.3978 20.3537 36.1414 20.4015 35.9355 20.44L35.9267 20.4416C35.5967 20.4988 35.3305 20.5516 35.1281 20.6C34.9257 20.6484 34.7475 20.7012 34.5935 20.7584C34.4175 20.8288 34.2745 20.9058 34.1645 20.9894C34.0589 21.0686 33.9797 21.1566 33.9269 21.2534C33.8785 21.3502 33.8543 21.458 33.8543 21.5768C33.8543 21.7396 33.8939 21.8804 33.9731 21.9992C34.0567 22.1136 34.1733 22.2016 34.3229 22.2632C34.4725 22.3248 34.6507 22.3556 34.8575 22.3556Z" fill="white"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M7.46122 14.3105C7 15.2157 7 16.4006 7 18.7706V21.2294C7 23.5994 7 24.7843 7.46122 25.6895C7.86691 26.4857 8.51427 27.1331 9.31049 27.5388C10.2157 28 11.4006 28 13.7706 28H36.5898C38.9597 28 40.1447 28 41.0499 27.5388C41.8461 27.1331 42.4935 26.4857 42.8992 25.6895C43.3604 24.7843 43.3604 23.5994 43.3604 21.2294V18.7706C43.3604 16.4006 43.3604 15.2157 42.8992 14.3105C42.4935 13.5143 41.8461 12.8669 41.0499 12.4612C40.1447 12 38.9597 12 36.5898 12H13.7706C11.4006 12 10.2157 12 9.31049 12.4612C8.51427 12.8669 7.86691 13.5143 7.46122 14.3105ZM34.4747 23.7681C33.9643 23.7681 33.5309 23.6713 33.1745 23.4777C32.8225 23.2797 32.5541 23.0178 32.3693 22.6922C32.1889 22.3622 32.0987 21.9992 32.0987 21.6032C32.0987 21.2732 32.1252 21.0831 32.2264 20.8103C32.3276 20.5375 32.4868 20.292 32.7112 20.0852C32.94 19.874 33.2549 19.7288 33.5098 19.6515C33.7647 19.5742 34.2404 19.4628 34.5435 19.4119C34.642 19.3954 34.7579 19.377 34.8906 19.3559L34.8907 19.3559L34.8908 19.3558C35.1666 19.312 35.5144 19.2566 35.9267 19.1833C36.245 19.1267 36.4899 19.0359 36.7106 18.9097C36.6828 18.5873 36.5844 18.3433 36.4151 18.1777C36.2127 17.9797 35.8739 17.8807 35.3987 17.8807C35.1347 17.8807 34.8597 17.9445 34.5737 18.0721C34.2877 18.1997 34.0875 18.4264 33.9731 18.752L32.3495 18.2371C32.5299 17.6475 32.8687 17.1679 33.3659 16.7983C33.8631 16.4287 34.5407 16.2439 35.3987 16.2439C36.0279 16.2439 36.5867 16.3407 37.0752 16.5343C37.5636 16.7279 37.9332 17.0623 38.184 17.5375C38.3248 17.8015 38.4084 18.0655 38.4348 18.3295C38.4612 18.5936 38.4744 18.8884 38.4744 19.214V23.5701H36.9036V22.695C36.6199 23.0292 36.3185 23.2813 35.9993 23.4513C35.5989 23.6625 35.0907 23.7681 34.4747 23.7681ZM28.9831 23.5698V19.359C28.9831 18.8881 28.8709 18.5229 28.6465 18.2633C28.4265 17.9993 28.1207 17.8673 27.729 17.8673C27.4782 17.8673 27.2604 17.9267 27.0756 18.0455C26.8908 18.1599 26.7456 18.3227 26.64 18.5339C26.5388 18.7407 26.4882 18.9805 26.4882 19.2534V23.5698H24.693V19.359C24.693 18.8881 24.5808 18.5229 24.3564 18.2633C24.1364 17.9993 23.8306 17.8673 23.439 17.8673C23.065 17.8673 22.7635 17.9971 22.5347 18.2567C22.3103 18.5119 22.1981 18.8441 22.1981 19.2534V23.5698H20.3897V16.4417H21.9737V17.2227C22.1805 16.968 22.4335 16.7583 22.7327 16.5935C23.1288 16.3779 23.571 16.2701 24.0594 16.2701C24.6182 16.2701 25.0758 16.3889 25.4322 16.6265C25.7299 16.8225 25.9632 17.0725 26.1321 17.3764C26.3586 17.0416 26.6511 16.7784 27.0096 16.5869C27.4012 16.3757 27.8346 16.2701 28.3099 16.2701C29.1239 16.2701 29.7377 16.5121 30.1513 16.9961C30.5693 17.4757 30.7783 18.1049 30.7783 18.8837V23.5698H28.9831ZM13.2979 23.4972C13.6499 23.6865 14.1053 23.7811 14.6641 23.7811C15.3638 23.7811 15.9424 23.6293 16.4 23.3256C16.6172 23.1829 16.8086 23.0193 16.9742 22.8348V23.5698H18.5582V16.4417H16.7498V20.0586C16.7498 20.4986 16.6992 20.855 16.598 21.1278C16.5012 21.3962 16.3758 21.6008 16.2218 21.7416C16.0678 21.878 15.9028 21.9704 15.7268 22.0188C15.5508 22.0672 15.3858 22.0914 15.2318 22.0914C14.849 22.0914 14.5519 22.0056 14.3407 21.834C14.1339 21.6624 13.9843 21.449 13.8919 21.1938C13.7995 20.9386 13.7445 20.6856 13.7269 20.4348C13.7093 20.1796 13.7005 19.9706 13.7005 19.8078V16.4417H11.8789V20.4414C11.8789 20.5602 11.8877 20.7494 11.9053 21.009C11.9229 21.2686 11.9735 21.5568 12.0571 21.8736C12.1407 22.186 12.2793 22.4874 12.4729 22.7778C12.6709 23.0682 12.9459 23.308 13.2979 23.4972Z" fill="white"/>%0A</svg>%0A';
+
+// src/components/QRCode.tsx
+var _core = require('@lightsparkdev/core');
+var _qrcodereact = require('qrcode.react');
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function QRCode({
+  value,
+  children,
+  heading,
+  border = true,
+  isCentered = true,
+  size = 256,
+  kind = "lightspark",
+  showLogo = true,
+  animated = false,
+  level = "L"
+}) {
+  const isUma = kind === "uma";
+  const logoSize = Math.round(size * 0.2);
+  const umaLogoSize = Math.round(size * 0.2);
+  const qrCodeProps = {
+    marginSize: isUma ? 4 : 0
+  };
+  if (isUma) {
+    qrCodeProps.bgColor = _chunkZBLXVPL4cjs.colors.grayBlue10;
+    qrCodeProps.fgColor = _chunkZBLXVPL4cjs.colors.white;
+  }
+  if (showLogo) {
+    qrCodeProps.imageSettings = {
+      excavate: true,
+      height: isUma ? _core.round.call(void 0, umaLogoSize * 0.8) : logoSize,
+      src: isUma ? UmaLogoQRCode_default : FramedLogoOnCircle_default,
+      width: isUma ? umaLogoSize : logoSize
+    };
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react3.Fragment, { children: [
+    heading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QRCodeLabel, { children: heading }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QRCodeContainer, { isCentered, size, children: value ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QRCodeImage, { isCentered, border, isUma, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _qrcodereact.QRCodeSVG,
+      _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {
+        value,
+        size,
+        level
+      }, qrCodeProps)
+    ) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmptyQRCodeSizer, { size, isUma, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      EmptyQRCode,
+      {
+        isCentered,
+        border,
+        animated,
+        isUma,
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkNPXZDRT5cjs.Icon,
+          {
+            name: isUma ? "Uma" : "LogoOnCircle",
+            color: isUma ? "white" : void 0,
+            width: isUma ? 42 : 30,
+            ml: "auto",
+            mr: "auto"
+          }
+        )
+      }
+    ) }) }),
+    children
+  ] });
+}
+var borderWidth = 10;
+var qr = ({ isCentered, border, isUma }) => _react.css`
+  display: inline-block;
+  overflow: hidden;
+  ${border && `border: ${borderWidth}px solid #ffffff;`}
+  ${border && `border-radius: 8px;`}
+  ${border && "box-sizing: content-box;"}
+  ${isUma && _chunk4GO7VWXEcjs.standardBorderRadius.call(void 0, 16)}
+`;
+var QRCodeContainer = _styled2.default.div`
+  display: flex;
+  ${({ size }) => `width: ${size}px;`}
+  max-width: 100%;
+
+  ${({ isCentered }) => isCentered && `
+      justify-content: center;
+      align-items: center;
+    `}
+  font-size: 12px;
+  svg {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+`;
+var QRCodeImage = _styled2.default.div`
+  ${qr}
+`;
+var shadowOffsetA = 2;
+var tailRadiusA = 1.1;
+var tailRadiusB = 0.5;
+var shadowColor = _chunkZBLXVPL4cjs.colors.white;
+var initialBoxShadow = `
+  box-shadow: -${shadowOffsetA}px 0px ${tailRadiusA}px 1.5px ${shadowColor},
+  0 0 4px ${tailRadiusB}px ${shadowColor};
+`;
+var opacityMax = 1;
+var opacityMin = 0.05;
+var scaleMin = 4;
+var scaleMax = 33;
+var startingLeftPer = 55;
+var EmptyQRCodeSizer = _styled2.default.div`
+  width: ${({ size }) => size}px;
+  max-width: 100%;
+  position: relative;
+  padding-top: 100%;
+  ${({ isUma, theme }) => isUma && `background-color: ${_chunkBW6SKFVJcjs.getColor.call(void 0, theme, "grayBlue10")};
+    ${_chunk4GO7VWXEcjs.standardBorderRadius.call(void 0, 16)}`}
+`;
+var EmptyQRCode = _styled2.default.div`
+  ${qr}
+  border-color: ${({ theme }) => theme.c2Neutral};
+  border-width: 1px;
+  width: calc(100% - 2px);
+  height: calc(100% - 2px);
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  @keyframes circle {
+    0% {
+      top: 0%;
+      left: ${startingLeftPer}%;
+      box-shadow:
+        0px -${shadowOffsetA}px 0px ${tailRadiusA / 2}px ${shadowColor},
+        0 0 4px ${tailRadiusB}px ${shadowColor};
+    }
+    2% {
+      top: 0%;
+      left: 100%;
+      box-shadow:
+        0px -${shadowOffsetA}px 0px ${tailRadiusA / 2}px ${shadowColor},
+        0 0 4px ${tailRadiusB}px ${shadowColor};
+    }
+    4% {
+      top: 100%;
+      left: 100%;
+      box-shadow:
+        0px -${shadowOffsetA}px 0px ${tailRadiusA / 2}px ${shadowColor},
+        0 0 4px ${tailRadiusB}px ${shadowColor};
+    }
+    6% {
+      top: 100%;
+      left: 0%;
+    }
+    8% {
+      top: 0%;
+      left: 0%;
+      box-shadow:
+        0px ${shadowOffsetA}px 0px ${tailRadiusA / 2}px ${shadowColor},
+        0 0 4px ${tailRadiusB}px ${shadowColor};
+    }
+    10% {
+      top: 0;
+      left: ${startingLeftPer - 1e-3}%;
+      ${initialBoxShadow};
+    }
+    100% {
+      top: 0;
+      left: ${startingLeftPer}%;
+      ${initialBoxShadow};
+    }
+  }
+
+  @keyframes pulse {
+    0% {
+      opacity: ${opacityMax};
+      transform: scaleX(1);
+    }
+    10% {
+      opacity: ${opacityMax * 0.3};
+      transform: scaleX(1);
+    }
+    25% {
+      opacity: ${opacityMin};
+      transform: scaleX(${scaleMax / 3 * 1});
+    }
+    45% {
+      opacity: ${opacityMin};
+      transform: scaleX(${scaleMin});
+    }
+    72% {
+      opacity: ${opacityMax / 3 * 1.3};
+      transform: scaleX(${scaleMax / 4 * 2});
+    }
+    93% {
+      opacity: ${opacityMin};
+      transform: scaleX(${scaleMin});
+    }
+    100% {
+      opacity: ${opacityMax};
+      transform: scaleX(${scaleMax});
+    }
+  }
+
+  ${({ animated }) => animated && `
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      left: ${startingLeftPer}%;
+      transform: scaleX(1);
+      transform-origin: 50% 0%;
+      animation: circle 7s ease-out infinite,
+        pulse 7s cubic-bezier(0.36, 0.11, 0.84, 0.52) infinite;
+      ${initialBoxShadow}
+    }
+  `}
+
+  & > * {
+    ${_chunkZS6OPCVJcjs.absoluteCenter}
+  }
+`;
+var QRCodeLabel = _styled2.default.p`
+  color: ${({ theme }) => theme.text};
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+`;
+
+
+
+
+
+exports.QRCode = QRCode; exports.qr = qr; exports.QRCodeLabel = QRCodeLabel;

package/dist/{chunk-HHKYB3S3.cjs → chunk-MZTSB32K.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkAER42TP2cjs = require('./chunk-AER42TP2.cjs');
+var _chunkL4BVS4G7cjs = require('./chunk-L4BVS4G7.cjs');
 
 // src/components/CardForm/CardFormCodeInput.tsx
 var _react = require('@emotion/react');
@@ -12,7 +12,7 @@ function CardFormCodeInput({
   onBlur
 }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkAER42TP2cjs.CodeInput,
+    _chunkL4BVS4G7cjs.CodeInput,
     {
       codeLength: 6,
       onSubmit,

package/dist/chunk-N4HKIKBY.js

@@ -0,0 +1,32 @@
+// src/icons/SettingsSlider.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function SettingsSlider({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M9.16667 4.66667H2.5M9.16667 4.66667C9.16667 3.46958 10.1363 2.5 11.3333 2.5C12.5304 2.5 13.5 3.46958 13.5 4.66667C13.5 5.86375 12.5304 6.83333 11.3333 6.83333C10.1363 6.83333 9.16667 5.86375 9.16667 4.66667ZM13.5 11.3333H8.16667M8.16667 11.3333C8.16667 12.5304 7.19707 13.5 6 13.5C4.80292 13.5 3.83333 12.5304 3.83333 11.3333M8.16667 11.3333C8.16667 10.1363 7.19707 9.16667 6 9.16667C4.80292 9.16667 3.83333 10.1363 3.83333 11.3333M3.83333 11.3333H2.5",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
+        }
+      )
+    }
+  );
+}
+
+export {
+  SettingsSlider
+};

package/dist/chunk-NANOYEVH.js

@@ -0,0 +1,8 @@
+// src/hooks/useNumberInput/utils/escapeRegExp.ts
+var escapeRegExp = (stringToGoIntoTheRegex) => {
+  return stringToGoIntoTheRegex.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
+};
+
+export {
+  escapeRegExp
+};

package/dist/{chunk-5O2EL5I3.js → chunk-NAVW6EEE.js}

@@ -5,6 +5,7 @@ var FilterType = /* @__PURE__ */ ((FilterType2) => {
   FilterType2["STRING"] = "string";
   FilterType2["ID"] = "id";
   FilterType2["NUMBER"] = "number";
+  FilterType2["CURRENCY"] = "currency";
   FilterType2["BOOLEAN"] = "boolean";
   return FilterType2;
 })(FilterType || {});

package/dist/chunk-NEAG7ITH.cjs

@@ -0,0 +1,56 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunk4O66VRA5cjs = require('./chunk-4O66VRA5.cjs');
+
+
+var _chunkFSFRDBEXcjs = require('./chunk-FSFRDBEX.cjs');
+
+
+var _chunkVU7H23OWcjs = require('./chunk-VU7H23OW.cjs');
+
+
+var _chunkRTYZ3DKFcjs = require('./chunk-RTYZ3DKF.cjs');
+
+
+var _chunkO5B6YYPNcjs = require('./chunk-O5B6YYPN.cjs');
+
+
+var _chunkON57QYPDcjs = require('./chunk-ON57QYPD.cjs');
+
+
+var _chunk3DOBLJXNcjs = require('./chunk-3DOBLJXN.cjs');
+
+
+var _chunkZJFRIMCCcjs = require('./chunk-ZJFRIMCC.cjs');
+
+
+var _chunkH7HEHP6Bcjs = require('./chunk-H7HEHP6B.cjs');
+
+
+var _chunkFPYSNZ5Xcjs = require('./chunk-FPYSNZ5X.cjs');
+
+// src/components/typography/renderTypography.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var typographyMap = {
+  Display: _chunkON57QYPDcjs.DisplayString,
+  Headline: _chunkFPYSNZ5Xcjs.HeadlineString,
+  Title: _chunk3DOBLJXNcjs.TitleString,
+  Body: _chunkZJFRIMCCcjs.BodyString,
+  "Body Strong": _chunkH7HEHP6Bcjs.BodyStrongString,
+  Label: _chunk4O66VRA5cjs.LabelString,
+  "Label Moderate": _chunkFSFRDBEXcjs.LabelModerateString,
+  "Label Strong": _chunkVU7H23OWcjs.LabelStrongString,
+  Overline: _chunkRTYZ3DKFcjs.OverlineString,
+  Code: _chunkO5B6YYPNcjs.CodeString,
+  "Code Strong": _chunkO5B6YYPNcjs.CodeString
+};
+var renderTypography = (typographyType, typographyProps) => {
+  const TypographyComponent = typographyMap[typographyType];
+  const { children } = typographyProps;
+  return _react2.default.createElement(TypographyComponent, typographyProps, children);
+};
+
+
+
+
+exports.typographyMap = typographyMap; exports.renderTypography = renderTypography;

package/dist/{chunk-YSQ6UQ6P.js → chunk-NMKM2XNP.js}

@@ -1,6 +1,6 @@
 import {
   CodeInput
-} from "./chunk-ON3L4ZE6.js";
+} from "./chunk-RW64JIJP.js";
 
 // src/components/CardForm/CardFormCodeInput.tsx
 import { css } from "@emotion/react";

package/dist/{chunk-ORWZTMF2.cjs → chunk-NPXZDRT5.cjs}

@@ -1,19 +1,19 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkH6XTEIHQcjs = require('./chunk-H6XTEIHQ.cjs');
+var _chunkCFVGGJDHcjs = require('./chunk-CFVGGJDH.cjs');
 
 
 
 var _chunkKS6GHRZIcjs = require('./chunk-KS6GHRZI.cjs');
 
 
-var _chunkD262WAOVcjs = require('./chunk-D262WAOV.cjs');
+var _chunk4GO7VWXEcjs = require('./chunk-4GO7VWXE.cjs');
 
 
-var _chunk7PRNB5U5cjs = require('./chunk-7PRNB5U5.cjs');
+var _chunkJA7KZV3Qcjs = require('./chunk-JA7KZV3Q.cjs');
 
 
-var _chunk6DWDBCUJcjs = require('./chunk-6DWDBCUJ.cjs');
+var _chunkBW6SKFVJcjs = require('./chunk-BW6SKFVJ.cjs');
 
 // src/components/Icon/Icon.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -23,19 +23,25 @@ function Icon({
   className,
   name,
   width,
+  square = false,
   tutorialStep,
   id,
   mr: mrProp = 0,
   ml: mlProp = 0,
+  mt: mtProp = 0,
+  mb: mbProp = 0,
   color = void 0,
   verticalAlign = "middle",
   iconProps
 }) {
-  const IconComponent = _chunkH6XTEIHQcjs.iconMap[name];
-  const w = parseFloat((width / _chunkD262WAOVcjs.rootFontSizePx).toFixed(2));
-  const mr = typeof mrProp === "number" ? `${parseFloat((mrProp / _chunkD262WAOVcjs.rootFontSizePx).toFixed(2))}em` : mrProp;
-  const ml = typeof mlProp === "number" ? `${parseFloat((mlProp / _chunkD262WAOVcjs.rootFontSizePx).toFixed(2))}em` : mlProp;
-  const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / _chunkD262WAOVcjs.rootFontSizePx).toFixed(2));
+  const IconComponent = _chunkCFVGGJDHcjs.iconMap[name];
+  const w = parseFloat((width / _chunk4GO7VWXEcjs.rootFontSizePx).toFixed(2));
+  const h = square ? w : "auto";
+  const mr = typeof mrProp === "number" ? `${parseFloat((mrProp / _chunk4GO7VWXEcjs.rootFontSizePx).toFixed(2))}em` : mrProp;
+  const ml = typeof mlProp === "number" ? `${parseFloat((mlProp / _chunk4GO7VWXEcjs.rootFontSizePx).toFixed(2))}em` : mlProp;
+  const mt = typeof mtProp === "number" ? `${parseFloat((mtProp / _chunk4GO7VWXEcjs.rootFontSizePx).toFixed(2))}em` : mtProp;
+  const mb = typeof mbProp === "number" ? `${parseFloat((mbProp / _chunk4GO7VWXEcjs.rootFontSizePx).toFixed(2))}em` : mbProp;
+  const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / _chunk4GO7VWXEcjs.rootFontSizePx).toFixed(2));
   const icon = _react2.default.createElement(IconComponent, iconProps, null);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     IconContainer,
@@ -43,8 +49,12 @@ function Icon({
       id,
       className,
       w,
+      h,
+      square,
       mr,
       ml,
+      mt,
+      mb,
       verticalAlign: va,
       fontColor: color,
       "data-tutorial-tip": tutorialStep == null ? void 0 : tutorialStep.toString(),
@@ -55,21 +65,35 @@ function Icon({
 var IconContainer = _styled2.default.span`
   pointer-events: none;
   display: inline-flex;
-  ${({ mr, ml, w }) => `
+  align-items: center;
+  justify-content: center;
+  ${({ mr, ml, mt, mb, w, h }) => `
     width: ${w}em;
+    height: ${typeof h === "number" ? `${h}em` : h};
     /* ensure no shrink in flex containers: */
     min-width: ${w}em;
     ${mr ? `margin-right: ${mr};` : ""}
     ${ml ? `margin-left: ${ml};` : ""}
+    ${mt ? `margin-top: ${mt};` : ""}
+    ${mb ? `margin-bottom: ${mb};` : ""}
   `}
 
-  vertical-align: ${({ verticalAlign }) => _chunk7PRNB5U5cjs.isString.call(void 0, verticalAlign) ? verticalAlign : `${verticalAlign}em`};
+  vertical-align: ${({ verticalAlign }) => _chunkJA7KZV3Qcjs.isString.call(void 0, verticalAlign) ? verticalAlign : `${verticalAlign}em`};
+
+  ${({ square }) => {
+  return square ? `
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    ` : "";
+}}
 
   ${({ theme, fontColor }) => {
-  const color = _chunk6DWDBCUJcjs.getFontColor.call(void 0, theme, fontColor, "inherit");
+  const color = _chunkBW6SKFVJcjs.getFontColor.call(void 0, theme, fontColor, "inherit");
   return `
     svg, path {
-      color: ${_chunk6DWDBCUJcjs.getFontColor.call(void 0, theme, fontColor, "inherit")};
+      color: ${_chunkBW6SKFVJcjs.getFontColor.call(void 0, theme, fontColor, "inherit")};
 
       /* 
         Provide a way for an SVG to invert relative to a specified color for