@synerise/ds-dropdown 1.3.1 → 1.3.3

package/dist/components/DropdownPopover/DropdownPopover.js

@@ -1,79 +1,49 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useRef } from 'react';
-import { FloatingList } from '@floating-ui/react';
-import { DropdownContextProvider } from '@synerise/ds-core';
-import { Popover, PopoverContent, PopoverTrigger, getPlacement } from '@synerise/ds-popover';
-import { POPOVER_FLIP_CONFIG, POPOVER_OFFSET_CONFIG, POPOVER_SHIFT_CONFIG, POPOVER_TRANSITION_DURATION } from '../../Dropdown.const';
-import { getTransitionConfig } from '../../utils';
-import { DropdownOverlay } from '../DropdownOverlay/DropdownOverlay';
-export var DropdownPopover = function DropdownPopover(_ref) {
-  var _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'bottomLeft' : _ref$placement,
-    children = _ref.children,
-    popoverProps = _ref.popoverProps,
-    popoverTriggerProps = _ref.popoverTriggerProps,
-    getPopupContainer = _ref.getPopupContainer,
-    trigger = _ref.trigger,
-    open = _ref.open,
-    onDismiss = _ref.onDismiss,
-    overlay = _ref.overlay,
-    handleOpenChange = _ref.handleOpenChange,
-    size = _ref.size,
-    handleItemClick = _ref.handleItemClick,
-    handleTriggerClick = _ref.handleTriggerClick,
-    hideOnItemClick = _ref.hideOnItemClick,
-    asChild = _ref.asChild,
-    overlayStyle = _ref.overlayStyle,
-    overlayClassName = _ref.overlayClassName,
-    overlayHTMLAttributes = _ref.overlayHTMLAttributes,
-    activeIndex = _ref.activeIndex,
-    setActiveIndex = _ref.setActiveIndex;
-  var floatingPlacement = getPlacement(placement);
-  var triggerRef = useRef(null);
-  var elementsRef = useRef([]);
-  var listNavigationConfig = {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { FloatingList } from "@floating-ui/react";
+import { DropdownContextProvider } from "@synerise/ds-core";
+import { getPlacement, Popover, PopoverTrigger, PopoverContent } from "@synerise/ds-popover";
+import { POPOVER_SHIFT_CONFIG, POPOVER_FLIP_CONFIG, POPOVER_OFFSET_CONFIG, POPOVER_TRANSITION_DURATION } from "../../Dropdown.const.js";
+import { getTransitionConfig } from "../../utils/getTransitionConfig.js";
+import { DropdownOverlay } from "../DropdownOverlay/DropdownOverlay.js";
+const DropdownPopover = ({
+  placement = "bottomLeft",
+  children,
+  popoverProps,
+  popoverTriggerProps,
+  getPopupContainer,
+  trigger,
+  open,
+  onDismiss,
+  overlay,
+  handleOpenChange,
+  size,
+  handleItemClick,
+  handleTriggerClick,
+  hideOnItemClick,
+  asChild,
+  overlayStyle,
+  overlayClassName,
+  overlayHTMLAttributes,
+  activeIndex,
+  setActiveIndex
+}) => {
+  const floatingPlacement = getPlacement(placement);
+  const triggerRef = useRef(null);
+  const elementsRef = useRef([]);
+  const listNavigationConfig = {
     enabled: true,
-    activeIndex: activeIndex,
-    onNavigate: function onNavigate(newIndex) {
+    activeIndex,
+    onNavigate: (newIndex) => {
       setActiveIndex(newIndex);
     },
     listRef: elementsRef
   };
-  return /*#__PURE__*/React.createElement(Popover, _extends({
-    placement: floatingPlacement,
-    trigger: trigger,
-    modal: false,
-    open: open,
-    onOpenChange: handleOpenChange,
-    onDismiss: onDismiss,
-    transitionDuration: POPOVER_TRANSITION_DURATION,
-    autoUpdate: true,
-    offsetConfig: POPOVER_OFFSET_CONFIG,
-    flipConfig: POPOVER_FLIP_CONFIG,
-    shiftConfig: POPOVER_SHIFT_CONFIG,
-    getTransitionConfig: getTransitionConfig,
-    getPopupContainer: getPopupContainer,
-    listNavigationConfig: listNavigationConfig,
-    testId: "dropdown"
-  }, popoverProps), /*#__PURE__*/React.createElement(PopoverTrigger, _extends({
-    ref: triggerRef,
-    asChild: asChild,
-    onClick: handleTriggerClick
-  }, popoverTriggerProps), children), /*#__PURE__*/React.createElement(PopoverContent, null, /*#__PURE__*/React.createElement(DropdownContextProvider, {
-    hideOnItemClick: hideOnItemClick,
-    activeIndex: activeIndex,
-    setIsOpen: handleOpenChange,
-    isOpen: !!open
-  }, /*#__PURE__*/React.createElement(FloatingList, {
-    elementsRef: elementsRef
-  }, /*#__PURE__*/React.createElement(DropdownOverlay, {
-    size: size,
-    triggerRef: triggerRef,
-    htmlAttributes: overlayHTMLAttributes,
-    overlayStyle: overlayStyle,
-    overlayClassName: overlayClassName,
-    hideOnItemClick: hideOnItemClick,
-    content: overlay,
-    handleItemClick: handleItemClick
-  })))));
-};
+  return /* @__PURE__ */ jsxs(Popover, { placement: floatingPlacement, trigger, modal: false, open, onOpenChange: handleOpenChange, onDismiss, transitionDuration: POPOVER_TRANSITION_DURATION, autoUpdate: true, offsetConfig: POPOVER_OFFSET_CONFIG, flipConfig: POPOVER_FLIP_CONFIG, shiftConfig: POPOVER_SHIFT_CONFIG, getTransitionConfig, getPopupContainer, listNavigationConfig, testId: "dropdown", ...popoverProps, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { ref: triggerRef, asChild, onClick: handleTriggerClick, ...popoverTriggerProps, children }),
+    /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(DropdownContextProvider, { hideOnItemClick, activeIndex, setIsOpen: handleOpenChange, isOpen: !!open, children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: /* @__PURE__ */ jsx(DropdownOverlay, { size, triggerRef, htmlAttributes: overlayHTMLAttributes, overlayStyle, overlayClassName, hideOnItemClick, content: overlay, handleItemClick }) }) }) })
+  ] });
+};
+export {
+  DropdownPopover
+};

package/dist/components/DropdownPopover/DropdownPopover.types.d.ts

@@ -1,4 +1,4 @@
-import { type DropdownProps } from '../../Dropdown.types';
+import { DropdownProps } from '../../Dropdown.types';
 export type DropdownPopoverProps = Pick<DropdownProps, 'asChild' | 'children' | 'onDismiss' | 'onOpenChange' | 'getPopupContainer' | 'placement' | 'popoverProps' | 'popoverTriggerProps' | 'overlay' | 'overlayClassName' | 'overlayHTMLAttributes' | 'overlayStyle' | 'open' | 'hideOnItemClick' | 'size' | 'trigger'> & {
     handleOpenChange: (newVal: boolean) => void;
     handleItemClick?: () => void;

package/dist/components/DropdownPopover/DropdownPopover.types.js

@@ -1 +1 @@
-export {};
+

package/dist/components/TextTrigger/TextTrigger.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-import { type TextTriggerProps } from './TextTrigger.types';
+import { default as React } from 'react';
+import { TextTriggerProps } from './TextTrigger.types';
 export declare const TextTrigger: React.ForwardRefExoticComponent<TextTriggerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/TextTrigger/TextTrigger.js

@@ -1,31 +1,24 @@
-import React, { forwardRef } from 'react';
-import { useTheme } from '@synerise/ds-core';
-import Icon, { AngleDownS } from '@synerise/ds-icon';
-import { Title } from '@synerise/ds-typography';
-import * as S from './TextTrigger.styles';
-export var TextTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var value = _ref.value,
-    expanded = _ref.expanded,
-    size = _ref.size,
-    _ref$inactiveColor = _ref.inactiveColor,
-    inactiveColor = _ref$inactiveColor === void 0 ? 'grey-800' : _ref$inactiveColor,
-    onClick = _ref.onClick,
-    onFocus = _ref.onFocus,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
-  var theme = useTheme();
-  return /*#__PURE__*/React.createElement(S.TextTrigger, {
-    onFocus: isDisabled ? undefined : onFocus,
-    inactiveColor: theme.palette[inactiveColor],
-    tabIndex: 0,
-    ref: ref,
-    onClick: isDisabled ? undefined : onClick,
-    isDisabled: isDisabled
-  }, /*#__PURE__*/React.createElement(Title, {
-    level: size
-  }, value), /*#__PURE__*/React.createElement(S.IconWrapper, {
-    expanded: expanded
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(AngleDownS, null)
-  })));
-});
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { AngleDownS } from "@synerise/ds-icon";
+import { Title } from "@synerise/ds-typography";
+import { TextTrigger as TextTrigger$1, IconWrapper } from "./TextTrigger.styles.js";
+const TextTrigger = forwardRef(({
+  value,
+  expanded,
+  size,
+  inactiveColor = "grey-800",
+  onClick,
+  onFocus,
+  isDisabled = false
+}, ref) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(TextTrigger$1, { onFocus: isDisabled ? void 0 : onFocus, inactiveColor: theme.palette[inactiveColor], tabIndex: 0, ref, onClick: isDisabled ? void 0 : onClick, isDisabled, children: [
+    /* @__PURE__ */ jsx(Title, { level: size, children: value }),
+    /* @__PURE__ */ jsx(IconWrapper, { expanded, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleDownS, {}) }) })
+  ] });
+});
+export {
+  TextTrigger
+};

package/dist/components/TextTrigger/TextTrigger.styles.d.ts

@@ -1,9 +1,9 @@
-import { type ThemeProps } from '@synerise/ds-core';
-export declare const TextTrigger: import("styled-components").StyledComponent<"div", any, {
+import { ThemeProps } from '@synerise/ds-core';
+export declare const TextTrigger: import('styled-components').StyledComponent<"div", any, {
     inactiveColor: string;
     onFocus?: () => void;
     isDisabled?: boolean;
 }, never>;
-export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const IconWrapper: import('styled-components').StyledComponent<"div", any, {
     expanded?: boolean;
 } & ThemeProps, never>;

package/dist/components/TextTrigger/TextTrigger.styles.js

@@ -1,27 +1,13 @@
-import styled from 'styled-components';
-export var TextTrigger = styled.div.withConfig({
+import styled from "styled-components";
+const TextTrigger = /* @__PURE__ */ styled.div.withConfig({
   displayName: "TextTriggerstyles__TextTrigger",
   componentId: "sc-xuqby2-0"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:center;cursor:", ";opacity:", ";.ds-title{margin:0;}.ds-title,svg{color:", ";fill:", ";}&&&:focus{.ds-title,svg{color:", ";fill:", ";}}}&:hover{.ds-title,svg{color:", ";fill:", ";}}"], function (props) {
-  return props.isDisabled ? 'default' : 'pointer';
-}, function (props) {
-  return props.isDisabled ? 0.4 : 1;
-}, function (props) {
-  return props.inactiveColor;
-}, function (props) {
-  return props.inactiveColor;
-}, function (props) {
-  return props.theme.palette['blue-700'];
-}, function (props) {
-  return props.theme.palette['blue-700'];
-}, function (props) {
-  return props.theme.palette['blue-600'];
-}, function (props) {
-  return props.theme.palette['blue-600'];
-});
-export var IconWrapper = styled.div.withConfig({
+})(["display:flex;flex-direction:row;align-items:center;justify-content:center;cursor:", ";opacity:", ";.ds-title{margin:0;}.ds-title,svg{color:", ";fill:", ";}&&&:focus{.ds-title,svg{color:", ";fill:", ";}}}&:hover{.ds-title,svg{color:", ";fill:", ";}}"], (props) => props.isDisabled ? "default" : "pointer", (props) => props.isDisabled ? 0.4 : 1, (props) => props.inactiveColor, (props) => props.inactiveColor, (props) => props.theme.palette["blue-700"], (props) => props.theme.palette["blue-700"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["blue-600"]);
+const IconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "TextTriggerstyles__IconWrapper",
   componentId: "sc-xuqby2-1"
-})(["&&&{svg{transition:transform 0.1s linear;transform:rotateZ( ", " );}}"], function (props) {
-  return props.expanded ? '180deg' : '0deg';
-});
+})(["&&&{svg{transition:transform 0.1s linear;transform:rotateZ( ", " );}}"], (props) => props.expanded ? "180deg" : "0deg");
+export {
+  IconWrapper,
+  TextTrigger
+};

package/dist/components/TextTrigger/TextTrigger.types.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import { default as React } from 'react';
 export type TextTriggerProps = {
     value: string | React.ReactNode | undefined;
     inactiveColor?: string;

package/dist/components/TextTrigger/TextTrigger.types.js

@@ -1 +1 @@
-export {};
+

package/dist/hooks/useDefaultTexts.d.ts

@@ -1,2 +1,2 @@
-import { type DropdownMenuTexts } from '../components/DropdownMenu/DropdownMenu.types';
+import { DropdownMenuTexts } from '../components/DropdownMenu/DropdownMenu.types';
 export declare const useDefaultTexts: (customTexts?: Partial<DropdownMenuTexts>) => DropdownMenuTexts;

package/dist/hooks/useDefaultTexts.js

@@ -1,21 +1,19 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-export var useDefaultTexts = function useDefaultTexts(customTexts) {
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  return _extends({
-    noSearchResults: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "DS.DROPDOWN-MENU.NO-SEARCH-RESULTS",
-      defaultMessage: "No results"
-    }),
-    searchClearTooltip: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "DS.CONFIRMATION.SEARCH-CLEAR-TOOLTIP",
-      defaultMessage: "Clear"
-    }),
+import { jsx } from "react/jsx-runtime";
+import { useIntl, FormattedMessage } from "react-intl";
+const useDefaultTexts = (customTexts) => {
+  const {
+    formatMessage
+  } = useIntl();
+  return {
+    noSearchResults: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.DROPDOWN-MENU.NO-SEARCH-RESULTS", defaultMessage: "No results" }),
+    searchClearTooltip: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.CONFIRMATION.SEARCH-CLEAR-TOOLTIP", defaultMessage: "Clear" }),
     searchPlaceholder: formatMessage({
-      id: 'DS.DROPDOWN-MENU.SEARCH-PLACEHOLDER',
-      defaultMessage: 'Search'
-    })
-  }, customTexts || {});
-};
+      id: "DS.DROPDOWN-MENU.SEARCH-PLACEHOLDER",
+      defaultMessage: "Search"
+    }),
+    ...customTexts || {}
+  };
+};
+export {
+  useDefaultTexts
+};

package/dist/hooks/useDropdownVisibility.js

@@ -1,40 +1,38 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-export var useDropdownVisibility = function useDropdownVisibility(_ref) {
-  var open = _ref.open,
-    onOpenChange = _ref.onOpenChange;
-  var _useState = useState(open),
-    internalOpen = _useState[0],
-    setInternalOpen = _useState[1];
-  var skipDuplicates = useRef(0);
-  var controlledComponent = open !== undefined;
-  var actualOpen = controlledComponent ? open : internalOpen;
-  useEffect(function () {
+import { useState, useRef, useEffect, useCallback } from "react";
+const useDropdownVisibility = ({
+  open,
+  onOpenChange
+}) => {
+  const [internalOpen, setInternalOpen] = useState(open);
+  const skipDuplicates = useRef(0);
+  const controlledComponent = open !== void 0;
+  const actualOpen = controlledComponent ? open : internalOpen;
+  useEffect(() => {
     skipDuplicates.current = 0;
   }, [internalOpen]);
-  useEffect(function () {
+  useEffect(() => {
     if (controlledComponent && open !== internalOpen) {
       if (skipDuplicates.current === 0) {
         skipDuplicates.current += 1;
-        onOpenChange == null || onOpenChange(open);
+        onOpenChange?.(open);
       }
       setInternalOpen(open);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [controlledComponent, open]);
-  var toggleOpen = useCallback(function (openState) {
+  const toggleOpen = useCallback((openState) => {
     if (openState !== internalOpen) {
       setInternalOpen(openState);
     }
-    // PopupTrigger fires toggleOpen onClick
-    // the trigger in the implementation may or may not have an onClick that changes `open` state
-    // this prevents duplicated onOpenChange calls if both have onClicks defined
     if (skipDuplicates.current === 0) {
       skipDuplicates.current += 1;
-      onOpenChange == null || onOpenChange(openState);
+      onOpenChange?.(openState);
     }
   }, [internalOpen, onOpenChange]);
   return {
-    toggleOpen: toggleOpen,
+    toggleOpen,
     open: actualOpen
   };
-};
+};
+export {
+  useDropdownVisibility
+};

package/dist/index.js

@@ -1,6 +1,15 @@
-export { default, Dropdown } from './Dropdown';
-export { DropdownMenu } from './components/DropdownMenu/DropdownMenu';
-export { DropdownOverlay } from './components/DropdownOverlay/DropdownOverlay';
-export { TextTrigger } from './components/TextTrigger/TextTrigger';
-export { BackAction } from './components/BackAction/BackAction';
-export { BottomAction } from './components/BottomAction/BottomAction';
+import { Dropdown, Dropdown as Dropdown2 } from "./Dropdown.js";
+import { DropdownMenu } from "./components/DropdownMenu/DropdownMenu.js";
+import { DropdownOverlay } from "./components/DropdownOverlay/DropdownOverlay.js";
+import { TextTrigger } from "./components/TextTrigger/TextTrigger.js";
+import { BackAction } from "./components/BackAction/BackAction.js";
+import { BottomAction } from "./components/BottomAction/BottomAction.js";
+export {
+  BackAction,
+  BottomAction,
+  Dropdown,
+  DropdownMenu,
+  DropdownOverlay,
+  TextTrigger,
+  Dropdown2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/dist/utils/getDropdownWidth.d.ts

@@ -1,2 +1,2 @@
-import { type DropdownSize } from '../Dropdown.types';
+import { DropdownSize } from '../Dropdown.types';
 export declare const getDropdownWidth: (size?: DropdownSize | number) => number | null;

package/dist/utils/getDropdownWidth.js

@@ -1,18 +1,21 @@
-export var getDropdownWidth = function getDropdownWidth(size) {
-  if (typeof size === 'number') {
+const getDropdownWidth = (size) => {
+  if (typeof size === "number") {
     return size;
   }
   switch (size) {
-    case 'small':
+    case "small":
       return 216;
-    case 'large':
+    case "large":
       return 588;
-    case 'medium':
+    case "medium":
       return 282;
-    case 'auto':
-    case 'match-trigger':
-    case 'min-match-trigger':
+    case "auto":
+    case "match-trigger":
+    case "min-match-trigger":
     default:
       return null;
   }
-};
+};
+export {
+  getDropdownWidth
+};

package/dist/utils/getTransitionConfig.d.ts

@@ -1,4 +1,4 @@
-import { type Placement, type UseTransitionStylesProps } from '@floating-ui/react';
+import { Placement, UseTransitionStylesProps } from '@floating-ui/react';
 export declare const getTransitionConfig: ({ placement, }: {
     placement: Placement;
 }) => Partial<UseTransitionStylesProps>;

package/dist/utils/getTransitionConfig.js

@@ -1,15 +1,19 @@
-export var getTransitionConfig = function getTransitionConfig(_ref) {
-  var placement = _ref.placement;
-  var isTop = placement.indexOf('top');
+const getTransitionConfig = ({
+  placement
+}) => {
+  const isTop = placement.indexOf("top");
   return {
     open: {
-      transform: 'scaleY(1)'
+      transform: "scaleY(1)"
     },
     initial: {
-      transform: 'scaleY(0)'
+      transform: "scaleY(0)"
     },
     common: {
-      transformOrigin: isTop ? 'top' : 'bottom'
+      transformOrigin: isTop ? "top" : "bottom"
     }
   };
-};
+};
+export {
+  getTransitionConfig
+};

package/dist/utils/index.js

@@ -1,3 +1,8 @@
-export * from './getTransitionConfig';
-export * from './isSplitFooter';
-export * from './getDropdownWidth';
+import { getTransitionConfig } from "./getTransitionConfig.js";
+import { isSplitFooter } from "./isSplitFooter.js";
+import { getDropdownWidth } from "./getDropdownWidth.js";
+export {
+  getDropdownWidth,
+  getTransitionConfig,
+  isSplitFooter
+};

package/dist/utils/isSplitFooter.d.ts

@@ -1,2 +1,2 @@
-import type { DropdownFooterProps, DropdownFooterSplit } from '../components/DropdownFooter/DropdownFooter.types';
+import { DropdownFooterProps, DropdownFooterSplit } from '../components/DropdownFooter/DropdownFooter.types';
 export declare const isSplitFooter: (footer: DropdownFooterProps["footer"]) => footer is DropdownFooterSplit;

package/dist/utils/isSplitFooter.js

@@ -1,3 +1,6 @@
-export var isSplitFooter = function isSplitFooter(footer) {
-  return !!(footer && typeof footer === 'object' && ('left' in footer || 'right' in footer));
-};
+const isSplitFooter = (footer) => {
+  return !!(footer && typeof footer === "object" && ("left" in footer || "right" in footer));
+};
+export {
+  isSplitFooter
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-dropdown",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "Dropdown UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -36,16 +36,16 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
-    "@synerise/ds-divider": "^1.3.1",
-    "@synerise/ds-empty-states": "^1.0.35",
-    "@synerise/ds-icon": "^1.15.0",
-    "@synerise/ds-list-item": "^1.4.9",
-    "@synerise/ds-popover": "^1.5.2",
-    "@synerise/ds-scrollbar": "^1.2.16",
-    "@synerise/ds-search-bar": "^1.4.19",
-    "@synerise/ds-tooltip": "^1.4.9",
-    "@synerise/ds-typography": "^1.1.12",
-    "@synerise/ds-utils": "^1.7.0",
+    "@synerise/ds-divider": "^1.3.3",
+    "@synerise/ds-empty-states": "^1.0.37",
+    "@synerise/ds-icon": "^1.15.2",
+    "@synerise/ds-list-item": "^1.4.11",
+    "@synerise/ds-popover": "^1.5.3",
+    "@synerise/ds-scrollbar": "^1.2.18",
+    "@synerise/ds-search-bar": "^1.4.21",
+    "@synerise/ds-tooltip": "^1.4.11",
+    "@synerise/ds-typography": "^1.1.14",
+    "@synerise/ds-utils": "^1.7.1",
     "classnames": "^2.5.1",
     "react-window": "^1.8.11"
   },
@@ -58,5 +58,5 @@
     "react-intl": "^6.8.7",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "c2384982c3533a31eb5e5e0408f8dcecb2b0f399"
 }