@lightsparkdev/ui 1.1.7 → 1.1.9

package/dist/{chunk-VVLRO7QH.cjs → chunk-KHHAWWVK.cjs}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkM7ADZ766cjs = require('./chunk-M7ADZ766.cjs');
+var _chunk6RWMAYHKcjs = require('./chunk-6RWMAYHK.cjs');
 
 
-var _chunk7PHETHJZcjs = require('./chunk-7PHETHJZ.cjs');
+var _chunkISSWG34Jcjs = require('./chunk-ISSWG34J.cjs');
 
 
-var _chunkMJXCSZKAcjs = require('./chunk-MJXCSZKA.cjs');
+var _chunk4PZLEYONcjs = require('./chunk-4PZLEYON.cjs');
 
 
 
@@ -26,13 +26,13 @@ function TextIconAligner({
     size: (typographyProp == null ? void 0 : typographyProp.size) || "Small",
     color: (typographyProp == null ? void 0 : typographyProp.color) || "text"
   };
-  const nodesWithTypography = _chunkM7ADZ766cjs.setDefaultReactNodesTypography.call(void 0, contentProp, {
+  const nodesWithTypography = _chunk6RWMAYHKcjs.setDefaultReactNodesTypography.call(void 0, contentProp, {
     default: defaultTypography,
     link: _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, defaultTypography), { color: "link" })
   });
-  const content = _chunk7PHETHJZcjs.toReactNodes.call(void 0, nodesWithTypography);
+  const content = _chunkISSWG34Jcjs.toReactNodes.call(void 0, nodesWithTypography);
   const leftIconNode = leftIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkMJXCSZKAcjs.Icon,
+    _chunk4PZLEYONcjs.Icon,
     {
       name: leftIcon.name,
       width: leftIcon.width ? leftIcon.width : 12,
@@ -41,7 +41,7 @@ function TextIconAligner({
     }
   ) : null;
   const rightIconNode = rightIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkMJXCSZKAcjs.Icon,
+    _chunk4PZLEYONcjs.Icon,
     {
       name: rightIcon.name,
       width: rightIcon.width ? rightIcon.width : 12,

package/dist/{chunk-GNAZTAW4.js → chunk-KQH5FTRZ.js}

@@ -1,10 +1,10 @@
 import {
   toReactNodes
-} from "./chunk-5QARHWIH.js";
+} from "./chunk-BBA4F3CO.js";
 import {
   StyledLabel,
   getPropDefaults
-} from "./chunk-K3EZDBME.js";
+} from "./chunk-HP327W32.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-CSS4ASVJ.cjs → chunk-KZOTKUFA.cjs}

@@ -1,34 +1,34 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkUL33AOCCcjs = require('./chunk-UL33AOCC.cjs');
+var _chunk6SW3YUOScjs = require('./chunk-6SW3YUOS.cjs');
 
 
-var _chunkA2GMDI24cjs = require('./chunk-A2GMDI24.cjs');
+var _chunkUGLV6KNBcjs = require('./chunk-UGLV6KNB.cjs');
 
 
-var _chunkYKLD5HW5cjs = require('./chunk-YKLD5HW5.cjs');
+var _chunkBB4ZAFU4cjs = require('./chunk-BB4ZAFU4.cjs');
 
 
-var _chunkMJXCSZKAcjs = require('./chunk-MJXCSZKA.cjs');
+var _chunk4PZLEYONcjs = require('./chunk-4PZLEYON.cjs');
 
 
-var _chunk7OVH56SPcjs = require('./chunk-7OVH56SP.cjs');
+var _chunkYSMG5R44cjs = require('./chunk-YSMG5R44.cjs');
 
 
-var _chunkTDSRZFOFcjs = require('./chunk-TDSRZFOF.cjs');
+var _chunkM3TXRVC3cjs = require('./chunk-M3TXRVC3.cjs');
 
 
-var _chunkWPMYHFY7cjs = require('./chunk-WPMYHFY7.cjs');
+var _chunkRLSG4BCFcjs = require('./chunk-RLSG4BCF.cjs');
 
 
 var _chunk6VA4SAHQcjs = require('./chunk-6VA4SAHQ.cjs');
 
 
-var _chunkPV3W724Ecjs = require('./chunk-PV3W724E.cjs');
+var _chunk4NCWQQA2cjs = require('./chunk-4NCWQQA2.cjs');
 
 
 
-var _chunkCDAUKAQHcjs = require('./chunk-CDAUKAQH.cjs');
+var _chunkLL3KJ7DBcjs = require('./chunk-LL3KJ7DB.cjs');
 
 
 
@@ -73,11 +73,11 @@ function resolveBackgroundColorKey(theme, kind, defaultKey) {
   var _a;
   const defaultBackgroundColorKey = (_a = theme.buttons.kinds[kind]) == null ? void 0 : _a[defaultKey];
   let backgroundColorKey = defaultBackgroundColorKey;
-  if (!backgroundColorKey && _chunkCDAUKAQHcjs.isThemeOrColorKey.call(void 0, kind)) {
+  if (!backgroundColorKey && _chunkLL3KJ7DBcjs.isThemeOrColorKey.call(void 0, kind)) {
     backgroundColorKey = kind;
   }
   const defaultBackgroundColor = theme.buttons[defaultKey];
-  const backgroundColor = _chunkCDAUKAQHcjs.getBackgroundColor.call(void 0, 
+  const backgroundColor = _chunkLL3KJ7DBcjs.getBackgroundColor.call(void 0, 
     theme,
     backgroundColorKey,
     defaultBackgroundColor
@@ -199,6 +199,7 @@ var Button = _react3.forwardRef.call(void 0, (props, ref) => {
     loading = false,
     loadingKind = "primary",
     fullWidth = false,
+    spaceBetween = false,
     disabled = false,
     mt = 0,
     ml = 0,
@@ -221,7 +222,7 @@ var Button = _react3.forwardRef.call(void 0, (props, ref) => {
         typography,
         kind,
         paddingX,
-        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUL33AOCCcjs.Loading, { size: defaultIconWidth, center: false, kind: loadingKind })
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6SW3YUOScjs.Loading, { size: defaultIconWidth, center: false, kind: loadingKind })
       }
     );
   } else if (icon) {
@@ -234,7 +235,7 @@ var Button = _react3.forwardRef.call(void 0, (props, ref) => {
         kind,
         paddingX,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkMJXCSZKAcjs.Icon,
+          _chunk4PZLEYONcjs.Icon,
           _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, icon), {
             width: icon.width || defaultIconWidth,
             square: icon.square === void 0 ? true : icon.square,
@@ -251,7 +252,7 @@ var Button = _react3.forwardRef.call(void 0, (props, ref) => {
         css: {
           display: "flex",
           alignItems: "center",
-          justifyContent: "center",
+          justifyContent: spaceBetween ? "space-between" : "center",
           gap: "8px"
         },
         children: [
@@ -263,7 +264,7 @@ var Button = _react3.forwardRef.call(void 0, (props, ref) => {
                 textOverflow: "ellipsis",
                 overflow: "hidden"
               },
-              children: _chunkWPMYHFY7cjs.renderTypography.call(void 0, typography.type, {
+              children: _chunkRLSG4BCFcjs.renderTypography.call(void 0, typography.type, {
                 children: text,
                 color: typography.color,
                 size: typography.size
@@ -274,7 +275,7 @@ var Button = _react3.forwardRef.call(void 0, (props, ref) => {
         ]
       })
     ),
-    tooltipText ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYKLD5HW5cjs.Tooltip, { id: tooltipId.current, content: tooltipText }) : null
+    tooltipText ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUGLV6KNBcjs.Tooltip, { id: tooltipId.current, content: tooltipText }) : null
   ] });
   const commonProps = {
     id,
@@ -361,7 +362,7 @@ var buttonStyle = ({
 
     ${zIndex && `z-index: ${zIndex};`}
 
-    ${_chunkPV3W724Ecjs.applyTypography.call(void 0, 
+    ${_chunk4NCWQQA2cjs.applyTypography.call(void 0, 
     theme,
     typography.type,
     typography.size,
@@ -369,7 +370,7 @@ var buttonStyle = ({
   )}
 
     &:focus-visible {
-      outline: ${_chunk7OVH56SPcjs.getFocusOutline.call(void 0, { theme })};
+      outline: ${_chunkYSMG5R44cjs.getFocusOutline.call(void 0, { theme })};
       /* Slightly different offset for buttons so the outline is visible: */
       outline-offset: 0px;
     }
@@ -409,9 +410,9 @@ var ButtonIcon = _styled2.default.div`
   ${({ iconSide, paddingX }) => `${iconSide}: ${paddingX}px;`}
 `;
 var LinkWithoutTypography = _react3.forwardRef.call(void 0, (props, ref) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTDSRZFOFcjs.Link, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, props), { ref }));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkM3TXRVC3cjs.Link, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, props), { ref }));
 });
-var StyledButton = _styled2.default.call(void 0, _chunkA2GMDI24cjs.UnstyledButton)`
+var StyledButton = _styled2.default.call(void 0, _chunkBB4ZAFU4cjs.UnstyledButton)`
   ${(props) => buttonStyle(props)}
 `;
 var ButtonLink = _styled2.default.call(void 0, LinkWithoutTypography)`

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

@@ -3,41 +3,41 @@
 var _chunkB6Y7HCBMcjs = require('./chunk-B6Y7HCBM.cjs');
 
 
-var _chunkKL5ZQSVOcjs = require('./chunk-KL5ZQSVO.cjs');
-
+var _chunkFSHYBUHOcjs = require('./chunk-FSHYBUHO.cjs');
 
-var _chunkYB5UJWWScjs = require('./chunk-YB5UJWWS.cjs');
 
+var _chunkM5SCY5B5cjs = require('./chunk-M5SCY5B5.cjs');
 
-var _chunkWMUVW6UOcjs = require('./chunk-WMUVW6UO.cjs');
 
+var _chunkKZOTKUFAcjs = require('./chunk-KZOTKUFA.cjs');
 
-var _chunkCSS4ASVJcjs = require('./chunk-CSS4ASVJ.cjs');
 
-
-var _chunkA2GMDI24cjs = require('./chunk-A2GMDI24.cjs');
+var _chunkBB4ZAFU4cjs = require('./chunk-BB4ZAFU4.cjs');
 
 
 var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkMJXCSZKAcjs = require('./chunk-MJXCSZKA.cjs');
+var _chunk4PZLEYONcjs = require('./chunk-4PZLEYON.cjs');
 
 
 
 
-var _chunk7OVH56SPcjs = require('./chunk-7OVH56SP.cjs');
+var _chunkYSMG5R44cjs = require('./chunk-YSMG5R44.cjs');
 
 
-var _chunkTDSRZFOFcjs = require('./chunk-TDSRZFOF.cjs');
+var _chunkM3TXRVC3cjs = require('./chunk-M3TXRVC3.cjs');
 
 
-var _chunkCDAUKAQHcjs = require('./chunk-CDAUKAQH.cjs');
+var _chunkLL3KJ7DBcjs = require('./chunk-LL3KJ7DB.cjs');
 
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
 
 
+var _chunkKL5ZQSVOcjs = require('./chunk-KL5ZQSVO.cjs');
+
+
 
 var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
 
@@ -59,6 +59,7 @@ function Dropdown({
   horizontalScrollRef,
   onClickDropdownItems,
   getCSS,
+  getDropdownItemsCSS,
   isOpen: isOpenProp,
   onOpen,
   onClose,
@@ -67,6 +68,7 @@ function Dropdown({
   minDropdownItemsWidth = 200,
   maxDropdownItemsWidth = 300,
   align = "center",
+  verticalPlacement = "bottom",
   footer = null,
   dropdownContent = null,
   borderRadius = 8
@@ -84,6 +86,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 +158,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 +210,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,9 +255,10 @@ 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, _chunkKZOTKUFAcjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, button), commonButtonProps));
   }
   const containerCSS = getCSS && getCSS({ isOpen, theme });
+  const dropdownItemsCSS = getDropdownItemsCSS && getDropdownItemsCSS({ isOpen, theme });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
@@ -270,6 +278,7 @@ function Dropdown({
               maxWidth: maxDropdownItemsWidth,
               hasItems: dropdownItems ? dropdownItems.length > 0 : false,
               borderRadius,
+              css: dropdownItemsCSS,
               children: [
                 dropdownItems == null ? void 0 : dropdownItems.map((dropdownItem, i) => {
                   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { onBlur: handleBlur, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -297,9 +306,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)}
+  ${_chunkYSMG5R44cjs.overlaySurface}
+  color: ${({ theme }) => _chunkLL3KJ7DBcjs.themeOr.call(void 0, theme.c6Neutral, theme.c8Neutral)};
+  ${({ borderRadius }) => _chunkYSMG5R44cjs.standardBorderRadius.call(void 0, borderRadius)}
   ${({ hasItems }) => hasItems ? "padding: 12px 0;" : "padding: 0;"}
   visibility: ${({ isOpen }) => isOpen ? "visible" : "hidden"};
   position: fixed;
@@ -315,7 +324,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,
+    _chunk4PZLEYONcjs.Icon,
     {
       name: dropdownItemIcon.name,
       width: dropdownItemIcon.width || 12,
@@ -349,7 +358,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, _chunkFSHYBUHOcjs.MultiToggle, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, dropdownItem.toggle)) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkM5SCY5B5cjs.Toggle, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, dropdownItem.toggle)) })
     ] });
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -365,8 +374,8 @@ function DropdownItem({ dropdownItem, onClick }) {
     }
   );
 }
-var UnstyledDropdownButton = _styled2.default.call(void 0, _chunkA2GMDI24cjs.UnstyledButton)`
-  ${_chunk7OVH56SPcjs.standardFocusOutline}
+var UnstyledDropdownButton = _styled2.default.call(void 0, _chunkBB4ZAFU4cjs.UnstyledButton)`
+  ${_chunkYSMG5R44cjs.standardFocusOutline}
 `;
 var dropdownItemStyle = ({
   theme,
@@ -397,12 +406,12 @@ var cssProp = ({
   selected
 }) => _react.css`
   ${dropdownItemStyle({ theme, selected: Boolean(selected) })}
-  ${_chunk7OVH56SPcjs.standardFocusOutline.call(void 0, { theme })}
+  ${_chunkYSMG5R44cjs.standardFocusOutline.call(void 0, { theme })}
 `;
 function DropdownItemLink(props) {
   const theme = _react.useTheme.call(void 0, );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkTDSRZFOFcjs.Link,
+    _chunkM3TXRVC3cjs.Link,
     _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, props), {
       css: cssProp({ theme, selected: Boolean(props.selected) })
     })
@@ -410,7 +419,7 @@ function DropdownItemLink(props) {
 }
 var DropdownItemDiv = _styled2.default.div`
   ${dropdownItemStyle}
-  ${_chunk7OVH56SPcjs.standardFocusOutline}
+  ${_chunkYSMG5R44cjs.standardFocusOutline}
 `;
 
 

package/dist/{chunk-TZLVVAKZ.js → chunk-LB2TLBRA.js}

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

package/dist/{chunk-ITBXUTGC.js → chunk-LDMNFPJO.js}

@@ -2,11 +2,11 @@ import {
   standardBorderRadius,
   standardCardShadow,
   standardContentInset
-} from "./chunk-WN3TOABH.js";
+} from "./chunk-FS5ZY6RP.js";
 import {
   isDark,
   themeOr
-} from "./chunk-E6PRWBTH.js";
+} from "./chunk-A2JXE76O.js";
 
 // src/components/Table/TableEmptyState.tsx
 import styled from "@emotion/styled";