@lightsparkdev/ui 1.1.7 → 1.1.8

package/dist/chunk-7CH3ABUN.cjs

@@ -0,0 +1,60 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkT6AJFLKZcjs = require('./chunk-T6AJFLKZ.cjs');
+
+
+var _chunk4B6UYZFKcjs = require('./chunk-4B6UYZFK.cjs');
+
+
+var _chunkZK5A2QKMcjs = require('./chunk-ZK5A2QKM.cjs');
+
+
+var _chunkNQMQX3SXcjs = require('./chunk-NQMQX3SX.cjs');
+
+
+var _chunkTOXR46LHcjs = require('./chunk-TOXR46LH.cjs');
+
+
+var _chunkARZVYBQPcjs = require('./chunk-ARZVYBQP.cjs');
+
+
+var _chunkZYHUGCHMcjs = require('./chunk-ZYHUGCHM.cjs');
+
+
+var _chunkWJEGS5N3cjs = require('./chunk-WJEGS5N3.cjs');
+
+
+var _chunkPSZDKHGGcjs = require('./chunk-PSZDKHGG.cjs');
+
+
+var _chunkE2KMCAZ5cjs = require('./chunk-E2KMCAZ5.cjs');
+
+
+var _chunkRVFS2DG7cjs = require('./chunk-RVFS2DG7.cjs');
+
+// src/components/typography/renderTypography.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var typographyMap = {
+  Display: _chunkWJEGS5N3cjs.DisplayString,
+  Headline: _chunkPSZDKHGGcjs.HeadlineString,
+  Title: _chunkARZVYBQPcjs.TitleString,
+  Body: _chunkE2KMCAZ5cjs.BodyString,
+  "Body Strong": _chunkRVFS2DG7cjs.BodyStrongString,
+  Label: _chunkNQMQX3SXcjs.LabelString,
+  "Label Moderate": _chunkTOXR46LHcjs.LabelModerateString,
+  "Label Strong": _chunkT6AJFLKZcjs.LabelStrongString,
+  Overline: _chunk4B6UYZFKcjs.OverlineString,
+  Code: _chunkZYHUGCHMcjs.CodeString,
+  "Code Strong": _chunkZYHUGCHMcjs.CodeString,
+  Btn: _chunkZK5A2QKMcjs.BtnString
+};
+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-O6MEN3EW.cjs → chunk-7EJGVZAA.cjs}

@@ -1,41 +1,41 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkWMUVW6UOcjs = require('./chunk-WMUVW6UO.cjs');
+var _chunk5TDELL2Ncjs = require('./chunk-5TDELL2N.cjs');
 
 
 
 
 
 
-var _chunkT2JYWOH2cjs = require('./chunk-T2JYWOH2.cjs');
+var _chunkC3FY5BQCcjs = require('./chunk-C3FY5BQC.cjs');
 
 
-var _chunkX7GP6LXKcjs = require('./chunk-X7GP6LXK.cjs');
+var _chunkCU6RWGR5cjs = require('./chunk-CU6RWGR5.cjs');
 
 
-var _chunkUL33AOCCcjs = require('./chunk-UL33AOCC.cjs');
+var _chunkYGKKGDPNcjs = require('./chunk-YGKKGDPN.cjs');
 
 
-var _chunkA2GMDI24cjs = require('./chunk-A2GMDI24.cjs');
+var _chunkW2Y7RKIEcjs = require('./chunk-W2Y7RKIE.cjs');
 
 
-var _chunkYKLD5HW5cjs = require('./chunk-YKLD5HW5.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 _chunkPV3W724Ecjs = require('./chunk-PV3W724E.cjs');
+var _chunk6SDFZ57Lcjs = require('./chunk-6SDFZ57L.cjs');
 
 
-var _chunkCDAUKAQHcjs = require('./chunk-CDAUKAQH.cjs');
+var _chunkLPTWQ2KPcjs = require('./chunk-LPTWQ2KP.cjs');
 
 
 
@@ -55,7 +55,7 @@ function withDefaults(textInputProps) {
     width: textInputProps.width || "full",
     type: textInputProps.type || "text",
     disabled: Boolean(textInputProps.disabled),
-    typography: _chunkZ6EUSUADcjs.__spreadValues.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, _chunkT2JYWOH2cjs.defaultTextInputTypography), textInputProps.typography)
+    typography: _chunkZ6EUSUADcjs.__spreadValues.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, _chunkC3FY5BQCcjs.defaultTextInputTypography), textInputProps.typography)
   });
 }
 function TextInput(textInputProps) {
@@ -182,7 +182,7 @@ function TextInput(textInputProps) {
           colorProp: props.typography.color,
           iconOffset: typeof props.paddingX === "number" ? props.paddingX : leftIconOffset,
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkMJXCSZKAcjs.Icon,
+            _chunk5R7OENS4cjs.Icon,
             {
               name: props.icon.name,
               width: iconWidth,
@@ -202,8 +202,8 @@ function TextInput(textInputProps) {
           hasValue: Boolean(props.value),
           colorProp: props.typography.color,
           iconOffset: typeof props.paddingX === "number" ? props.paddingX : rightIconOffset,
-          children: props.loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUL33AOCCcjs.Loading, { center: false, size: rightIconWidth }) : props.icon && iconSide === "right" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkMJXCSZKAcjs.Icon,
+          children: props.loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCU6RWGR5cjs.Loading, { center: false, size: rightIconWidth }) : props.icon && iconSide === "right" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunk5R7OENS4cjs.Icon,
             {
               name: props.icon.name,
               width: rightIconWidth,
@@ -235,7 +235,7 @@ function TextInput(textInputProps) {
     ),
     input,
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkT2JYWOH2cjs.InputSubtext,
+      _chunkC3FY5BQCcjs.InputSubtext,
       {
         text: props.error || props.success || props.hint,
         content: props.contentError || props.contentSuccess,
@@ -246,11 +246,11 @@ function TextInput(textInputProps) {
         focused
       }
     ),
-    props.hintTooltip ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYKLD5HW5cjs.Tooltip, { id: hintTooltipId, content: props.hintTooltip, place: "right" }) : null
+    props.hintTooltip ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkW2Y7RKIEcjs.Tooltip, { id: hintTooltipId, content: props.hintTooltip, place: "right" }) : null
   ] });
 }
 var TextInputSelect = _styled2.default.select`
-  ${({ typography, theme }) => _chunkPV3W724Ecjs.applyTypography.call(void 0, theme, typography.type, typography.size, typography.color)}
+  ${({ typography, theme }) => _chunk6SDFZ57Lcjs.applyTypography.call(void 0, theme, typography.type, typography.size, typography.color)}
   position: absolute;
   z-index: ${_chunkZU72XWNEcjs.z.textInput + 1};
   border: none;
@@ -261,10 +261,10 @@ var TextInputSelect = _styled2.default.select`
   width: ${({ widthProp }) => `${widthProp}px`};
 `;
 var WithIcon = _styled2.default.div`
-  ${_chunk7OVH56SPcjs.standardBorderRadius.call(void 0, 8)}
+  ${_chunkUL22WLXRcjs.standardBorderRadius.call(void 0, 8)}
   position: relative;
 
-  & ${_chunkMJXCSZKAcjs.IconContainer.toString()} {
+  & ${_chunk5R7OENS4cjs.IconContainer.toString()} {
     z-index: ${_chunkZU72XWNEcjs.z.textInput + 1};
   }
 `;
@@ -278,10 +278,10 @@ var TextInputIconContainer = _styled2.default.div`
   display: flex;
   align-items: center;
   cursor: ${({ onClick }) => onClick ? "pointer" : "auto"};
-  color: ${({ focused, hasValue, theme, colorProp }) => focused || hasValue ? _chunkCDAUKAQHcjs.getFontColor.call(void 0, theme, colorProp) : _chunkT2JYWOH2cjs.textInputPlaceholderColor.call(void 0, { theme })};
+  color: ${({ focused, hasValue, theme, colorProp }) => focused || hasValue ? _chunkLPTWQ2KPcjs.getFontColor.call(void 0, theme, colorProp) : _chunkC3FY5BQCcjs.textInputPlaceholderColor.call(void 0, { theme })};
 `;
 var Input = _styled2.default.input`
-  ${_chunkT2JYWOH2cjs.textInputStyle};
+  ${_chunkC3FY5BQCcjs.textInputStyle};
   // disable autofill styles in chrome https://stackoverflow.com/a/68240841/9808766
   &:-webkit-autofill,
   &:-webkit-autofill:focus,
@@ -303,7 +303,7 @@ var RightButtonAligner = _styled2.default.div`
   display: flex;
   align-items: center;
 `;
-var RightButton = _styled2.default.call(void 0, _chunkA2GMDI24cjs.UnstyledButton)`
+var RightButton = _styled2.default.call(void 0, _chunk22Q6UJGLcjs.UnstyledButton)`
   border-radius: 4px;
   border: none;
   background-color: ${({ theme }) => theme.vlcNeutral};
@@ -313,7 +313,7 @@ var RightButton = _styled2.default.call(void 0, _chunkA2GMDI24cjs.UnstyledButton
   padding: 8px 10px;
 `;
 var TextInputLabel = _styled2.default.label`
-  ${_chunk7OVH56SPcjs.standardBorderRadius.call(void 0, 8)}
+  ${_chunkUL22WLXRcjs.standardBorderRadius.call(void 0, 8)}
   font-size: 10px;
   position: absolute;
   z-index: ${_chunkZU72XWNEcjs.z.textInput + 1};
@@ -325,7 +325,7 @@ var TextInputLabel = _styled2.default.label`
   top: -10px;
 `;
 var TextInputHalfRow = _styled2.default.div`
-  margin-top: ${_chunkT2JYWOH2cjs.inputSpacingPx}px;
+  margin-top: ${_chunkC3FY5BQCcjs.inputSpacingPx}px;
   display: flex;
   justify-content: space-between;
   gap: 16px;
@@ -341,18 +341,18 @@ var StyledTextInput = _styled2.default.div`
 
   /* eg forms, should be left consistent: */
   & + & {
-    margin-top: ${_chunkT2JYWOH2cjs.inputSpacingPx}px;
+    margin-top: ${_chunkC3FY5BQCcjs.inputSpacingPx}px;
   }
 
   ${TextInputHalfRow.toString()} & + & {
     margin-top: 0;
   }
 
-  ${_chunkX7GP6LXKcjs.CheckboxContainer.toString()} + &,
-  ${_chunkWMUVW6UOcjs.ToggleContainer.toString()} + &,
-  & + ${_chunkX7GP6LXKcjs.CheckboxContainer.toString()},
-  & + ${_chunkWMUVW6UOcjs.ToggleContainer.toString()} {
-    margin-top: ${_chunkT2JYWOH2cjs.inputSpacingPx}px;
+  ${_chunkYGKKGDPNcjs.CheckboxContainer.toString()} + &,
+  ${_chunk5TDELL2Ncjs.ToggleContainer.toString()} + &,
+  & + ${_chunkYGKKGDPNcjs.CheckboxContainer.toString()},
+  & + ${_chunk5TDELL2Ncjs.ToggleContainer.toString()} {
+    margin-top: ${_chunkC3FY5BQCcjs.inputSpacingPx}px;
   }
 `;
 var InputContainer = _styled2.default.div`

package/dist/{chunk-TZLVVAKZ.js → chunk-7PLRPYVC.js}

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

package/dist/{chunk-LSOD7B7O.cjs → chunk-7SEIVOIB.cjs}

@@ -4,10 +4,10 @@ var _chunkB6Y7HCBMcjs = require('./chunk-B6Y7HCBM.cjs');
 
 
 
-var _chunk7OVH56SPcjs = require('./chunk-7OVH56SP.cjs');
+var _chunkUL22WLXRcjs = require('./chunk-UL22WLXR.cjs');
 
 
-var _chunkCDAUKAQHcjs = require('./chunk-CDAUKAQH.cjs');
+var _chunkLPTWQ2KPcjs = require('./chunk-LPTWQ2KP.cjs');
 
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
@@ -114,7 +114,7 @@ var globalComponentStyles = ({ theme }) => _react.css`
   ${getFontFaces(theme)};
 
   html {
-    font-size: ${_chunk7OVH56SPcjs.rootFontSizeRems}rem;
+    font-size: ${_chunkUL22WLXRcjs.rootFontSizeRems}rem;
     color: ${theme.text};
 
     /* required for iOS https://bit.ly/3Q8syG8 */
@@ -144,7 +144,7 @@ var globalComponentStyles = ({ theme }) => _react.css`
 
   * {
     box-sizing: border-box;
-    line-height: ${_chunk7OVH56SPcjs.standardLineHeightEms}em;
+    line-height: ${_chunkUL22WLXRcjs.standardLineHeightEms}em;
   }
 
   code {
@@ -191,7 +191,7 @@ var globalComponentStyles = ({ theme }) => _react.css`
 `;
 function GlobalStyles() {
   const theme = _react.useTheme.call(void 0, );
-  const bg = _chunkCDAUKAQHcjs.useThemeBg.call(void 0, );
+  const bg = _chunkLPTWQ2KPcjs.useThemeBg.call(void 0, );
   _react3.useEffect.call(void 0, () => {
     const documentHeight = () => {
       const doc = document.documentElement;

package/dist/{chunk-VGEA6GWH.js → chunk-AGHCD2FL.js}

@@ -1,6 +1,6 @@
 import {
   rootFontSizePx
-} from "./chunk-WN3TOABH.js";
+} from "./chunk-33BECMKR.js";
 
 // src/styles/utils.tsx
 import { css } from "@emotion/react";

package/dist/{chunk-L5D2IWLC.js → chunk-AIHJ6BXO.js}

@@ -1,12 +1,12 @@
 import {
   Filter
-} from "./chunk-7QHKDLFZ.js";
+} from "./chunk-YH2OXGVI.js";
 import {
   NumberInput_default
-} from "./chunk-3QYM7QD4.js";
+} from "./chunk-5YGFRMWK.js";
 import {
   ButtonRow
-} from "./chunk-PEQVLKCB.js";
+} from "./chunk-KRYOR3UG.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-2YBZV2K6.cjs → chunk-AJT37TCS.cjs}

@@ -30,7 +30,8 @@ function Flex({
   pl,
   height,
   width,
-  position
+  position,
+  grow
 }) {
   const justify = justifyProp ? justifyProp : center ? "center" : "stretch";
   const align = alignProp ? alignProp : center ? "center" : "stretch";
@@ -57,7 +58,8 @@ function Flex({
       gap,
       height,
       width,
-      position
+      position,
+      grow
     }, asButtonProps), {
       children
     })
@@ -110,6 +112,7 @@ var StyledFlex = _styled2.default.div`
   ${({ height }) => height && (_lodashes.isNumber.call(void 0, height) ? `height: ${height}px;` : `height: ${height};`)}
   ${({ width }) => width && (_lodashes.isNumber.call(void 0, width) ? `width: ${width}px;` : `width: ${width};`)}
   ${({ position }) => position && `position: ${position};`}
+  ${({ grow }) => grow && `flex-grow: ${grow};`}
 `;
 
 

package/dist/{chunk-5MWFIK57.cjs → chunk-ALBMXUVF.cjs}

@@ -3,7 +3,7 @@
 var _chunk4XPAKKBScjs = require('./chunk-4XPAKKBS.cjs');
 
 
-var _chunkO6MEN3EWcjs = require('./chunk-O6MEN3EW.cjs');
+var _chunk7EJGVZAAcjs = require('./chunk-7EJGVZAA.cjs');
 
 
 
@@ -86,7 +86,7 @@ function PhoneInput({
   const isValidPhone = formatter.isValid();
   const error = !isValidPhone && wasBlurred ? "Please enter a valid phone number." : void 0;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkO6MEN3EWcjs.TextInput,
+    _chunk7EJGVZAAcjs.TextInput,
     {
       select: {
         options,

package/dist/{chunk-JL4OLGEE.js → chunk-ANFRTY77.js}

@@ -4,10 +4,10 @@ import {
 import {
   rootFontSizeRems,
   standardLineHeightEms
-} from "./chunk-WN3TOABH.js";
+} from "./chunk-33BECMKR.js";
 import {
   useThemeBg
-} from "./chunk-E6PRWBTH.js";
+} from "./chunk-2JNM2KTT.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

package/dist/{chunk-7HYGARHN.cjs → chunk-AODOYPCH.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkO6MEN3EWcjs = require('./chunk-O6MEN3EW.cjs');
+var _chunk7EJGVZAAcjs = require('./chunk-7EJGVZAA.cjs');
 
 
 
@@ -14,7 +14,7 @@ function SecretInput(_a) {
   var rest = _chunkZ6EUSUADcjs.__objRest.call(void 0, _a, []);
   const [showSecret, setShowSecret] = _react.useState.call(void 0, false);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkO6MEN3EWcjs.TextInput,
+    _chunk7EJGVZAAcjs.TextInput,
     _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, rest), {
       type: showSecret ? void 0 : "password",
       onClickIcon: () => setShowSecret(!showSecret),

package/dist/{chunk-SODJEMWR.cjs → chunk-ARZVYBQP.cjs}

@@ -6,7 +6,7 @@ var _chunkSFGLEWHWcjs = require('./chunk-SFGLEWHW.cjs');
 var _chunkB2MHM6CYcjs = require('./chunk-B2MHM6CY.cjs');
 
 
-var _chunkPV3W724Ecjs = require('./chunk-PV3W724E.cjs');
+var _chunk6SDFZ57Lcjs = require('./chunk-6SDFZ57L.cjs');
 
 
 
@@ -24,7 +24,7 @@ function getPropDefaults(props) {
   return _chunkSFGLEWHWcjs.getPropDefaultsBase.call(void 0, props, { as: props.tag || "span" });
 }
 var StyledTitle = _styled2.default.span`
-  ${({ theme, size, colorProp }) => _chunkPV3W724Ecjs.applyTypography.call(void 0, theme, "Title", size, colorProp)}
+  ${({ theme, size, colorProp }) => _chunk6SDFZ57Lcjs.applyTypography.call(void 0, theme, "Title", size, colorProp)}
   ${_chunkB2MHM6CYcjs.typographyStyles}
 `;
 

package/dist/{chunk-GLKMRHMA.cjs → chunk-ASYEQ7SW.cjs}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkM67CAR2Ncjs = require('./chunk-M67CAR2N.cjs');
+var _chunkU2OBO5TYcjs = require('./chunk-U2OBO5TY.cjs');
 
 
-var _chunk44INWNYUcjs = require('./chunk-44INWNYU.cjs');
+var _chunkOTOCMBBScjs = require('./chunk-OTOCMBBS.cjs');
 
 
 
@@ -22,8 +22,8 @@ var BooleanFilter = ({
   state,
   label
 }) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkM67CAR2Ncjs.Filter, { label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk44INWNYUcjs.Radio,
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkU2OBO5TYcjs.Filter, { label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkOTOCMBBScjs.Radio,
     {
       radioOptions: [
         { label: "Yes" /* YES */ },

package/dist/{chunk-XLKDATYR.cjs → chunk-AZGIB4PQ.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkM3XFUYAIcjs = require('./chunk-M3XFUYAI.cjs');
+var _chunkUMXCOSIJcjs = require('./chunk-UMXCOSIJ.cjs');
 
 // src/components/StatusIndicator.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -15,7 +15,7 @@ function StatusIndicator({
 }
 var StyledStatusIndicator = _styled2.default.div`
   color: ${({ theme, color }) => theme[color]};
-  font-size: ${({ size }) => _chunkM3XFUYAIcjs.pxToRems.call(void 0, size)};
+  font-size: ${({ size }) => _chunkUMXCOSIJcjs.pxToRems.call(void 0, size)};
   font-weight: ${({ fontWeight }) => fontWeight};
 `;
 

package/dist/{chunk-ETT5SJWI.js → chunk-B5EUALP4.js}

@@ -1,21 +1,21 @@
-import {
-  toReactNodes
-} from "./chunk-5QARHWIH.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
+import {
+  toReactNodes
+} from "./chunk-R44KNXWJ.js";
 import {
   standardBorderRadius,
   subtext
-} from "./chunk-WN3TOABH.js";
+} from "./chunk-33BECMKR.js";
 import {
   applyTypography
-} from "./chunk-67GVLM7K.js";
+} from "./chunk-XIWXA6GF.js";
 import {
   getColor,
   isBridge,
   themeOr
-} from "./chunk-E6PRWBTH.js";
+} from "./chunk-2JNM2KTT.js";
 import {
   colors
 } from "./chunk-5J7O4QVA.js";

package/dist/{chunk-GCOJSHU5.js → chunk-B7HUWFEI.js}

@@ -1,41 +1,41 @@
 import {
   smHeaderLogoMarginLeft
 } from "./chunk-SLEBHXIK.js";
-import {
-  useLiveRef
-} from "./chunk-UDFJ6IWI.js";
 import {
   MultiToggle
-} from "./chunk-ZO5I3CT6.js";
+} from "./chunk-FEI75Y27.js";
 import {
   Toggle
-} from "./chunk-VYSXSUD5.js";
+} from "./chunk-L6ZT3AUA.js";
 import {
   Button
-} from "./chunk-DIPFMCPK.js";
+} from "./chunk-2MB6EJ7Z.js";
 import {
   UnstyledButton
-} from "./chunk-XTM7UKRH.js";
+} from "./chunk-5UHQJD3J.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   Icon
-} from "./chunk-ULBM562P.js";
+} from "./chunk-U6AUAZQA.js";
 import {
   overlaySurface,
   standardBorderRadius,
   standardFocusOutline
-} from "./chunk-WN3TOABH.js";
+} from "./chunk-33BECMKR.js";
 import {
   Link
-} from "./chunk-Q3JHDXTD.js";
+} from "./chunk-OFIYWU7T.js";
 import {
   themeOr
-} from "./chunk-E6PRWBTH.js";
+} from "./chunk-2JNM2KTT.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
+import {
+  useLiveRef
+} from "./chunk-UDFJ6IWI.js";
 import {
   __spreadProps,
   __spreadValues
@@ -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] = useLiveRef();
   const dropdownItemsRef = useRef(null);
   const [dropdownItemsWidth, setDropdownItemsWidth] = useState(0);
+  const [dropdownItemsHeight, setDropdownItemsHeight] = useState(0);
   const nodeRef = useRef(null);
   const [nodeReady, setNodeReady] = useState(false);
   useEffect(() => {
@@ -155,6 +157,7 @@ function Dropdown({
       setDropdownButtonWidth(dropdownButtonRect.width);
       const dropdownItemsRect = dropdownItemsRef.current.getBoundingClientRect();
       setDropdownItemsWidth(dropdownItemsRect.width);
+      setDropdownItemsHeight(dropdownItemsRect.height);
     }
   }, [dropdownButtonRef]);
   useLayoutEffect(() => {
@@ -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",