@lightsparkdev/ui 1.1.7 → 1.1.8

package/dist/{chunk-XWSQSVON.cjs → chunk-K425JWO4.cjs}

@@ -1,15 +1,15 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunk2YBZV2K6cjs = require('./chunk-2YBZV2K6.cjs');
+var _chunkAJT37TCScjs = require('./chunk-AJT37TCS.cjs');
 
 
-var _chunkMJXCSZKAcjs = require('./chunk-MJXCSZKA.cjs');
+var _chunk5R7OENS4cjs = require('./chunk-5R7OENS4.cjs');
 
 
-var _chunkTDSRZFOFcjs = require('./chunk-TDSRZFOF.cjs');
+var _chunk4FVDOZDAcjs = require('./chunk-4FVDOZDA.cjs');
 
 
-var _chunkCDAUKAQHcjs = require('./chunk-CDAUKAQH.cjs');
+var _chunkLPTWQ2KPcjs = require('./chunk-LPTWQ2KP.cjs');
 
 // src/components/IconWithCircleBackground.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -32,7 +32,7 @@ function IconWithCircleBackground({
   showNewTag = false
 }) {
   const content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _chunk2YBZV2K6cjs.Flex,
+    _chunkAJT37TCScjs.Flex,
     {
       center: true,
       onClick,
@@ -52,7 +52,7 @@ function IconWithCircleBackground({
             noBg,
             bgColor,
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkMJXCSZKAcjs.Icon,
+              _chunk5R7OENS4cjs.Icon,
               {
                 name: iconName,
                 width: iconWidth,
@@ -69,16 +69,16 @@ function IconWithCircleBackground({
       ]
     }
   );
-  return to ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { cursor: disabled ? "not-allowed" : void 0 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTDSRZFOFcjs.Link, { to, disabled, children: content }) }) : content;
+  return to ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { cursor: disabled ? "not-allowed" : void 0 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4FVDOZDAcjs.Link, { to, disabled, children: content }) }) : content;
 }
 var StyledIconWithCircleBackground = _styled2.default.div`
-  background: ${({ theme, darkBg, noBg, bgColor }) => darkBg ? `linear-gradient(291.4deg, #1C243F 0%, #21283A 100%)` : noBg ? "transparent" : bgColor ? _chunkCDAUKAQHcjs.getColor.call(void 0, theme, bgColor) : _chunkCDAUKAQHcjs.getColor.call(void 0, theme, "grayBlue94")};
+  background: ${({ theme, darkBg, noBg, bgColor }) => darkBg ? `linear-gradient(291.4deg, #1C243F 0%, #21283A 100%)` : noBg ? "transparent" : bgColor ? _chunkLPTWQ2KPcjs.getColor.call(void 0, theme, bgColor) : _chunkLPTWQ2KPcjs.getColor.call(void 0, theme, "grayBlue94")};
 
   &:hover {
-    ${({ theme, hoverActiveBg }) => hoverActiveBg ? `background: ${_chunkCDAUKAQHcjs.getColor.call(void 0, theme, "grayBlue94")}` : ""};
+    ${({ theme, hoverActiveBg }) => hoverActiveBg ? `background: ${_chunkLPTWQ2KPcjs.getColor.call(void 0, theme, "grayBlue94")}` : ""};
   }
   &:active {
-    ${({ theme, hoverActiveBg }) => hoverActiveBg ? `background: ${_chunkCDAUKAQHcjs.getColor.call(void 0, theme, "grayBlue78")}` : ""};
+    ${({ theme, hoverActiveBg }) => hoverActiveBg ? `background: ${_chunkLPTWQ2KPcjs.getColor.call(void 0, theme, "grayBlue78")}` : ""};
   }
 
   border-radius: 50%;

package/dist/{chunk-BB4O3PKG.cjs → chunk-K7EHO5O6.cjs}

@@ -3,22 +3,22 @@
 var _chunkFBWTYGYEcjs = require('./chunk-FBWTYGYE.cjs');
 
 
-var _chunkOL4MRFABcjs = require('./chunk-OL4MRFAB.cjs');
+var _chunkDSG76UY6cjs = require('./chunk-DSG76UY6.cjs');
 
 
-var _chunkT2JYWOH2cjs = require('./chunk-T2JYWOH2.cjs');
+var _chunkC3FY5BQCcjs = require('./chunk-C3FY5BQC.cjs');
 
 
-var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
-var _chunkMJXCSZKAcjs = require('./chunk-MJXCSZKA.cjs');
+var _chunk5R7OENS4cjs = require('./chunk-5R7OENS4.cjs');
 
 
-var _chunk6J2NXBLBcjs = require('./chunk-6J2NXBLB.cjs');
+var _chunkN6HLM4KCcjs = require('./chunk-N6HLM4KC.cjs');
 
 // src/components/DataManagerTable/DateWidget.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -158,8 +158,8 @@ var DateWidget = ({
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Container, { children: [
     dateRangeOperation === "is between" /* IsBetween */ && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Indicators, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMJXCSZKAcjs.Icon, { name: "ArrowCornerDownRight", width: 16, color: "c6Neutral" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOL4MRFABcjs.LabelModerate, { color: "c6Neutral", children: "and" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5R7OENS4cjs.Icon, { name: "ArrowCornerDownRight", width: 16, color: "c6Neutral" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDSG76UY6cjs.LabelModerate, { color: "c6Neutral", children: "and" })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CalendarContents, { active, children: calendarComponent })
   ] });
@@ -243,7 +243,7 @@ var CalendarContents = _styled2.default.div`
     height: 100%;
     flex-grow: 1;
     padding: 0 2px;
-    ${({ theme, active }) => _chunkT2JYWOH2cjs.textInputStyle.call(void 0, { theme, active })};
+    ${({ theme, active }) => _chunkC3FY5BQCcjs.textInputStyle.call(void 0, { theme, active })};
     input:focus-visible {
       outline: none;
     }
@@ -486,14 +486,14 @@ var CalendarContents = _styled2.default.div`
   }
 
   .react-calendar__navigation__label {
-    ${({ theme }) => _chunk6J2NXBLBcjs.getTypographyString.call(void 0, theme, "Label Moderate", "Medium")}
+    ${({ theme }) => _chunkN6HLM4KCcjs.getTypographyString.call(void 0, theme, "Label Moderate", "Medium")}
   }
 
   .react-calendar__navigation__next-button,
   .react-calendar__navigation__next2-button,
   .react-calendar__navigation__prev-button,
   .react-calendar__navigation__prev2-button {
-    ${({ theme }) => _chunk6J2NXBLBcjs.getTypographyString.call(void 0, theme, "Label Moderate", "Medium")}
+    ${({ theme }) => _chunkN6HLM4KCcjs.getTypographyString.call(void 0, theme, "Label Moderate", "Medium")}
     font-size: 20px;
     display: flex;
     align-items: center;
@@ -518,7 +518,7 @@ var CalendarContents = _styled2.default.div`
     abbr {
       text-decoration: none;
 
-      ${({ theme }) => _chunk6J2NXBLBcjs.getTypographyString.call(void 0, theme, "Label Moderate", "Small")}
+      ${({ theme }) => _chunkN6HLM4KCcjs.getTypographyString.call(void 0, theme, "Label Moderate", "Small")}
     }
   }
 
@@ -533,7 +533,7 @@ var CalendarContents = _styled2.default.div`
 
   .react-calendar__month-view__days {
     abbr {
-      ${({ theme }) => _chunk6J2NXBLBcjs.getTypographyString.call(void 0, theme, "Label Moderate", "Medium")}
+      ${({ theme }) => _chunkN6HLM4KCcjs.getTypographyString.call(void 0, theme, "Label Moderate", "Medium")}
     }
 
     display: grid !important;
@@ -548,7 +548,7 @@ var CalendarContents = _styled2.default.div`
   }
 
   .react-calendar__year-view__months {
-    ${({ theme }) => _chunk6J2NXBLBcjs.getTypographyString.call(void 0, theme, "Label Moderate", "Medium")}
+    ${({ theme }) => _chunkN6HLM4KCcjs.getTypographyString.call(void 0, theme, "Label Moderate", "Medium")}
 
     display: grid !important;
     gap: 1px;
@@ -562,7 +562,7 @@ var CalendarContents = _styled2.default.div`
   }
 
   .react-calendar__decade-view__years {
-    ${({ theme }) => _chunk6J2NXBLBcjs.getTypographyString.call(void 0, theme, "Label Moderate", "Medium")}
+    ${({ theme }) => _chunkN6HLM4KCcjs.getTypographyString.call(void 0, theme, "Label Moderate", "Medium")}
 
     display: grid !important;
     gap: 1px;
@@ -576,7 +576,7 @@ var CalendarContents = _styled2.default.div`
   }
 
   .react-calendar__century-view__decades {
-    ${({ theme }) => _chunk6J2NXBLBcjs.getTypographyString.call(void 0, theme, "Label Moderate", "Medium")}
+    ${({ theme }) => _chunkN6HLM4KCcjs.getTypographyString.call(void 0, theme, "Label Moderate", "Medium")}
 
     display: grid !important;
     gap: 1px;

package/dist/{chunk-MPYYQYRW.js → chunk-K7VLXZA2.js}

@@ -1,25 +1,25 @@
 import {
   TextInput
-} from "./chunk-P4VV6HNR.js";
-import {
-  InputSubtext,
-  inputBlockStyle
-} from "./chunk-ETT5SJWI.js";
+} from "./chunk-TDUDDWTZ.js";
 import {
   Pill
-} from "./chunk-6AUEGL3W.js";
+} from "./chunk-OKUFNIRX.js";
 import {
-  useClipboard
-} from "./chunk-QHODHUW2.js";
+  InputSubtext,
+  inputBlockStyle
+} from "./chunk-B5EUALP4.js";
 import {
   UnstyledButton
-} from "./chunk-XTM7UKRH.js";
+} from "./chunk-5UHQJD3J.js";
 import {
   Icon
-} from "./chunk-ULBM562P.js";
+} from "./chunk-U6AUAZQA.js";
 import {
   useBreakpoints
 } from "./chunk-JSGRNWSB.js";
+import {
+  useClipboard
+} from "./chunk-QHODHUW2.js";
 import {
   __async
 } from "./chunk-W7FAWX6T.js";

package/dist/{chunk-RL7ARYRE.js → chunk-KCUSJWDZ.js}

@@ -4331,6 +4331,18 @@ function getTypographyTypes(fontFamilies) {
             textCase: `${TEXT_CASE.none}`,
             textDecoration: `${TEXT_DECORATION.none}`,
             fontFeatureSettings: '"ss01"'
+          },
+          [TokenSize.ExtraSmall]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Regular}`,
+            lineHeight: `${LINE_HEIGHTS["Nage" /* Nage */]["xs"]}`,
+            fontSize: `${FONT_SIZE["Nage" /* Nage */]["xs"]}`,
+            letterSpacing: `${LETTER_SPACING["Nage" /* Nage */].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+            fontFeatureSettings: '"ss01"'
           }
         },
         [TypographyType.BodyStrong]: {
@@ -4533,6 +4545,18 @@ function getTypographyTypes(fontFamilies) {
             textCase: `${TEXT_CASE.none}`,
             textDecoration: `${TEXT_DECORATION.none}`,
             fontFeatureSettings: '"ss01"'
+          },
+          [TokenSize.ExtraSmall]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Regular}`,
+            lineHeight: `${LINE_HEIGHTS["Nage" /* Nage */]["xs"]}`,
+            fontSize: `${FONT_SIZE["Nage" /* Nage */]["xs"]}`,
+            letterSpacing: `${LETTER_SPACING["Nage" /* Nage */].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+            fontFeatureSettings: '"ss01"'
           }
         },
         [TypographyType.Overline]: {
@@ -4775,6 +4799,18 @@ function getTypographyTypes(fontFamilies) {
             textCase: `${TEXT_CASE.none}`,
             textDecoration: `${TEXT_DECORATION.none}`,
             fontFeatureSettings: '"ss01"'
+          },
+          [TokenSize.ExtraSmall]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Regular}`,
+            lineHeight: `${LINE_HEIGHTS["Nage" /* Nage */]["xs"]}`,
+            fontSize: `${FONT_SIZE["Nage" /* Nage */]["xs"]}`,
+            letterSpacing: `${LETTER_SPACING["Nage" /* Nage */].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+            fontFeatureSettings: '"ss01"'
           }
         },
         [TypographyType.BodyStrong]: {
@@ -4965,6 +5001,18 @@ function getTypographyTypes(fontFamilies) {
             textCase: `${TEXT_CASE.none}`,
             textDecoration: `${TEXT_DECORATION.none}`,
             fontFeatureSettings: '"ss01"'
+          },
+          [TokenSize.ExtraSmall]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Regular}`,
+            lineHeight: `${LINE_HEIGHTS["Nage" /* Nage */]["xs"]}`,
+            fontSize: `${FONT_SIZE["Nage" /* Nage */]["xs"]}`,
+            letterSpacing: `${LETTER_SPACING["Nage" /* Nage */].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+            fontFeatureSettings: '"ss01"'
           }
         },
         [TypographyType.Overline]: {

package/dist/{chunk-PEQVLKCB.js → chunk-KRYOR3UG.js}

@@ -1,15 +1,15 @@
+import {
+  Button
+} from "./chunk-2MB6EJ7Z.js";
 import {
   Spacing
 } from "./chunk-E5DUKMCU.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-VGEA6GWH.js";
-import {
-  Button
-} from "./chunk-DIPFMCPK.js";
+} from "./chunk-AGHCD2FL.js";
 import {
   standardContentInset
-} from "./chunk-WN3TOABH.js";
+} from "./chunk-33BECMKR.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

package/dist/{chunk-RTQK4CSK.js → chunk-KYMNXYGA.js}

@@ -1,36 +1,36 @@
 import {
   InfoIconTooltip
-} from "./chunk-BC6JBILA.js";
+} from "./chunk-OFRPVBSP.js";
 import {
-  ClipboardTextField
-} from "./chunk-W4PBGNUS.js";
+  Loading
+} from "./chunk-2NTAA34G.js";
 import {
-  useClipboard
-} from "./chunk-QHODHUW2.js";
+  ClipboardTextField
+} from "./chunk-GZ3F7LGH.js";
 import {
   lineClamp,
   overflowAutoWithoutScrollbars
-} from "./chunk-VGEA6GWH.js";
-import {
-  Loading
-} from "./chunk-YIDZ3OLQ.js";
+} from "./chunk-AGHCD2FL.js";
 import {
   Icon
-} from "./chunk-ULBM562P.js";
+} from "./chunk-U6AUAZQA.js";
 import {
   standardContentInset
-} from "./chunk-WN3TOABH.js";
+} from "./chunk-33BECMKR.js";
 import {
   Link,
   replaceParams,
   useNavigate
-} from "./chunk-Q3JHDXTD.js";
+} from "./chunk-OFIYWU7T.js";
 import {
   themeOrWithKey
-} from "./chunk-E6PRWBTH.js";
+} from "./chunk-2JNM2KTT.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
+import {
+  useClipboard
+} from "./chunk-QHODHUW2.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-J7HYXICM.cjs → chunk-L3HEWLR2.cjs}

@@ -1,13 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var _chunkRGG47LFCcjs = require('./chunk-RGG47LFC.cjs');
 
-var _chunkT2JYWOH2cjs = require('./chunk-T2JYWOH2.cjs');
 
 
-var _chunkVKKUATUFcjs = require('./chunk-VKKUATUF.cjs');
+var _chunkC3FY5BQCcjs = require('./chunk-C3FY5BQC.cjs');
 
 
-var _chunkMJXCSZKAcjs = require('./chunk-MJXCSZKA.cjs');
+var _chunk5R7OENS4cjs = require('./chunk-5R7OENS4.cjs');
 
 // src/components/FileInput.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -59,7 +59,7 @@ function FileInput({
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledFileInputContainer, { children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledFileInput, { hasValidFileSet: Boolean(fileName && fileContent), children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: name, children: fileName && fileContent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkVKKUATUFcjs.Pill,
+        _chunkRGG47LFCcjs.Pill,
         {
           text: fileName,
           cursor: "pointer",
@@ -67,7 +67,7 @@ function FileInput({
           onDeleteFromKeyboard: handleRemoveFile
         }
       ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMJXCSZKAcjs.Icon, { name: "Upload", width: 26, tutorialStep: 6 }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5R7OENS4cjs.Icon, { name: "Upload", width: 26, tutorialStep: 6 }),
         "Upload ",
         filePurpose || "",
         " file"
@@ -82,7 +82,7 @@ function FileInput({
         }
       )
     ] }),
-    fileErrorMsg ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkT2JYWOH2cjs.InputSubtext, { text: fileErrorMsg, hasError: true }) : null
+    fileErrorMsg ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkC3FY5BQCcjs.InputSubtext, { text: fileErrorMsg, hasError: true }) : null
   ] });
 }
 var StyledFileInputContainer = _styled2.default.div``;
@@ -94,7 +94,7 @@ var StyledFileInput = _styled2.default.div`
   label {
     display: block;
     cursor: pointer;
-    ${({ theme, hasValidFileSet }) => _chunkT2JYWOH2cjs.inputBlockStyle.call(void 0, { theme, hasValue: hasValidFileSet, hasError: false })}
+    ${({ theme, hasValidFileSet }) => _chunkC3FY5BQCcjs.inputBlockStyle.call(void 0, { theme, hasValue: hasValidFileSet, hasError: false })}
   }
 `;
 

package/dist/{chunk-FLVYS4ZS.js → chunk-L43ECI53.js}

@@ -1,18 +1,18 @@
 import {
   setDefaultReactNodesTypography
-} from "./chunk-WIYAOIAU.js";
+} from "./chunk-557I2E7R.js";
 import {
   toReactNodes
-} from "./chunk-5QARHWIH.js";
+} from "./chunk-R44KNXWJ.js";
 import {
   Icon
-} from "./chunk-ULBM562P.js";
+} from "./chunk-U6AUAZQA.js";
 import {
   standardBorderRadius
-} from "./chunk-WN3TOABH.js";
+} from "./chunk-33BECMKR.js";
 import {
   getColor
-} from "./chunk-E6PRWBTH.js";
+} from "./chunk-2JNM2KTT.js";
 
 // src/components/Badge.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-YXEMB4IF.js → chunk-L6JBAJZ5.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-2NT4RAQ3.js";
 import {
   StyledHeadline
-} from "./chunk-BO3TYOVH.js";
+} from "./chunk-V774KTFA.js";
 
 // src/components/documentation/DocsHeadline.tsx
 import React from "react";

package/dist/{chunk-VYSXSUD5.js → chunk-L6ZT3AUA.js}

@@ -1,10 +1,10 @@
 import {
   UnstyledButton
-} from "./chunk-XTM7UKRH.js";
+} from "./chunk-5UHQJD3J.js";
 import {
   getColor,
   themeOr
-} from "./chunk-E6PRWBTH.js";
+} from "./chunk-2JNM2KTT.js";
 import {
   colors
 } from "./chunk-5J7O4QVA.js";

package/dist/{chunk-PQSYLXMY.cjs → chunk-LJBYXGLZ.cjs}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkUCEYGDNPcjs = require('./chunk-UCEYGDNP.cjs');
+var _chunkJWHEHYZ5cjs = require('./chunk-JWHEHYZ5.cjs');
 
 
-var _chunkT2JYWOH2cjs = require('./chunk-T2JYWOH2.cjs');
+var _chunkC3FY5BQCcjs = require('./chunk-C3FY5BQC.cjs');
 
 
 
@@ -241,7 +241,7 @@ function CodeInput({
     const inputId = getInputId(i);
     inputs.push(
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkUCEYGDNPcjs.SingleCodeInput,
+        _chunkJWHEHYZ5cjs.SingleCodeInput,
         {
           value: inputState[inputId].value,
           id: inputId,
@@ -316,7 +316,7 @@ var CodeInputGroup = _styled2.default.div`
 var CodeInputGroupSeparator = _styled2.default.div`
   width: ${separatorWidth}px;
   height: 4px;
-  background-color: ${_chunkT2JYWOH2cjs.textInputBorderColor};
+  background-color: ${_chunkC3FY5BQCcjs.textInputBorderColor};
   border-radius: 2px;
   margin: 0 ${separatorMargin}px;
 `;

package/dist/{chunk-SIVR5ELD.cjs → chunk-LKPOBVNO.cjs}

@@ -3,41 +3,41 @@
 var _chunkB6Y7HCBMcjs = require('./chunk-B6Y7HCBM.cjs');
 
 
-var _chunkKL5ZQSVOcjs = require('./chunk-KL5ZQSVO.cjs');
-
+var _chunkZHZWTVS5cjs = require('./chunk-ZHZWTVS5.cjs');
 
-var _chunkYB5UJWWScjs = require('./chunk-YB5UJWWS.cjs');
 
+var _chunk5TDELL2Ncjs = require('./chunk-5TDELL2N.cjs');
 
-var _chunkWMUVW6UOcjs = require('./chunk-WMUVW6UO.cjs');
 
+var _chunkGYFYOAO2cjs = require('./chunk-GYFYOAO2.cjs');
 
-var _chunkCSS4ASVJcjs = require('./chunk-CSS4ASVJ.cjs');
 
-
-var _chunkA2GMDI24cjs = require('./chunk-A2GMDI24.cjs');
+var _chunk22Q6UJGLcjs = require('./chunk-22Q6UJGL.cjs');
 
 
 var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkMJXCSZKAcjs = require('./chunk-MJXCSZKA.cjs');
+var _chunk5R7OENS4cjs = require('./chunk-5R7OENS4.cjs');
 
 
 
 
-var _chunk7OVH56SPcjs = require('./chunk-7OVH56SP.cjs');
+var _chunkUL22WLXRcjs = require('./chunk-UL22WLXR.cjs');
 
 
-var _chunkTDSRZFOFcjs = require('./chunk-TDSRZFOF.cjs');
+var _chunk4FVDOZDAcjs = require('./chunk-4FVDOZDA.cjs');
 
 
-var _chunkCDAUKAQHcjs = require('./chunk-CDAUKAQH.cjs');
+var _chunkLPTWQ2KPcjs = require('./chunk-LPTWQ2KP.cjs');
 
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
 
 
+var _chunkKL5ZQSVOcjs = require('./chunk-KL5ZQSVO.cjs');
+
+
 
 var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
 
@@ -67,6 +67,7 @@ function Dropdown({
   minDropdownItemsWidth = 200,
   maxDropdownItemsWidth = 300,
   align = "center",
+  verticalPlacement = "bottom",
   footer = null,
   dropdownContent = null,
   borderRadius = 8
@@ -84,6 +85,7 @@ function Dropdown({
   const [dropdownButtonRef, dropdownButtonRefCb] = _chunkKL5ZQSVOcjs.useLiveRef.call(void 0, );
   const dropdownItemsRef = _react3.useRef.call(void 0, null);
   const [dropdownItemsWidth, setDropdownItemsWidth] = _react3.useState.call(void 0, 0);
+  const [dropdownItemsHeight, setDropdownItemsHeight] = _react3.useState.call(void 0, 0);
   const nodeRef = _react3.useRef.call(void 0, null);
   const [nodeReady, setNodeReady] = _react3.useState.call(void 0, false);
   _react3.useEffect.call(void 0, () => {
@@ -155,6 +157,7 @@ function Dropdown({
       setDropdownButtonWidth(dropdownButtonRect.width);
       const dropdownItemsRect = dropdownItemsRef.current.getBoundingClientRect();
       setDropdownItemsWidth(dropdownItemsRect.width);
+      setDropdownItemsHeight(dropdownItemsRect.height);
     }
   }, [dropdownButtonRef]);
   _react3.useLayoutEffect.call(void 0, () => {
@@ -206,13 +209,16 @@ function Dropdown({
     onClickDropdownItems && onClickDropdownItems();
   }, [onClickDropdownItems, setOpen]);
   const dropdownTopMargin = 8;
-  const dropdownItemOffsetTop = dropdownCoords.top + dropdownButtonHeight + dropdownTopMargin;
+  let dropdownItemOffsetTop = dropdownCoords.top + dropdownButtonHeight + dropdownTopMargin;
   let dropdownItemOffsetLeft = 0;
   if (align === "center") {
     dropdownItemOffsetLeft = dropdownCoords.left - (dropdownItemsWidth - dropdownButtonWidth) / 2;
   } else if (align === "right") {
     dropdownItemOffsetLeft = dropdownCoords.right - dropdownItemsWidth;
   }
+  if (verticalPlacement === "top") {
+    dropdownItemOffsetTop = dropdownCoords.top - dropdownItemsHeight - dropdownTopMargin;
+  }
   const commonButtonProps = {
     id: button.id,
     type: "button",
@@ -248,7 +254,7 @@ function Dropdown({
   } 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 }) }));
   } else {
-    buttonNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCSS4ASVJcjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, button), commonButtonProps));
+    buttonNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYFYOAO2cjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, button), commonButtonProps));
   }
   const containerCSS = getCSS && getCSS({ isOpen, theme });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -297,9 +303,9 @@ var DropdownFooter = _styled2.default.div`
   margin-top: 16px;
 `;
 var DropdownItems = _styled2.default.ul`
-  ${_chunk7OVH56SPcjs.overlaySurface}
-  color: ${({ theme }) => _chunkCDAUKAQHcjs.themeOr.call(void 0, theme.c6Neutral, theme.c8Neutral)};
-  ${({ borderRadius }) => _chunk7OVH56SPcjs.standardBorderRadius.call(void 0, borderRadius)}
+  ${_chunkUL22WLXRcjs.overlaySurface}
+  color: ${({ theme }) => _chunkLPTWQ2KPcjs.themeOr.call(void 0, theme.c6Neutral, theme.c8Neutral)};
+  ${({ borderRadius }) => _chunkUL22WLXRcjs.standardBorderRadius.call(void 0, borderRadius)}
   ${({ hasItems }) => hasItems ? "padding: 12px 0;" : "padding: 0;"}
   visibility: ${({ isOpen }) => isOpen ? "visible" : "hidden"};
   position: fixed;
@@ -315,7 +321,7 @@ function DropdownItem({ dropdownItem, onClick }) {
   const theme = _react.useTheme.call(void 0, );
   const dropdownItemIcon = dropdownItem.getIcon && dropdownItem.getIcon({ dropdownItem, theme });
   const dropdownItemIconNode = dropdownItemIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkMJXCSZKAcjs.Icon,
+    _chunk5R7OENS4cjs.Icon,
     {
       name: dropdownItemIcon.name,
       width: dropdownItemIcon.width || 12,
@@ -349,7 +355,7 @@ function DropdownItem({ dropdownItem, onClick }) {
     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, _chunkYB5UJWWScjs.MultiToggle, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, dropdownItem.toggle)) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWMUVW6UOcjs.Toggle, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, dropdownItem.toggle)) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginLeft: "auto" }, children: "options" in dropdownItem.toggle ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZHZWTVS5cjs.MultiToggle, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, dropdownItem.toggle)) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5TDELL2Ncjs.Toggle, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, dropdownItem.toggle)) })
     ] });
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -365,8 +371,8 @@ function DropdownItem({ dropdownItem, onClick }) {
     }
   );
 }
-var UnstyledDropdownButton = _styled2.default.call(void 0, _chunkA2GMDI24cjs.UnstyledButton)`
-  ${_chunk7OVH56SPcjs.standardFocusOutline}
+var UnstyledDropdownButton = _styled2.default.call(void 0, _chunk22Q6UJGLcjs.UnstyledButton)`
+  ${_chunkUL22WLXRcjs.standardFocusOutline}
 `;
 var dropdownItemStyle = ({
   theme,
@@ -397,12 +403,12 @@ var cssProp = ({
   selected
 }) => _react.css`
   ${dropdownItemStyle({ theme, selected: Boolean(selected) })}
-  ${_chunk7OVH56SPcjs.standardFocusOutline.call(void 0, { theme })}
+  ${_chunkUL22WLXRcjs.standardFocusOutline.call(void 0, { theme })}
 `;
 function DropdownItemLink(props) {
   const theme = _react.useTheme.call(void 0, );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkTDSRZFOFcjs.Link,
+    _chunk4FVDOZDAcjs.Link,
     _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, props), {
       css: cssProp({ theme, selected: Boolean(props.selected) })
     })
@@ -410,7 +416,7 @@ function DropdownItemLink(props) {
 }
 var DropdownItemDiv = _styled2.default.div`
   ${dropdownItemStyle}
-  ${_chunk7OVH56SPcjs.standardFocusOutline}
+  ${_chunkUL22WLXRcjs.standardFocusOutline}
 `;