@synerise/ds-search-bar 1.4.19 → 1.4.21

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.21](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search-bar@1.4.20...@synerise/ds-search-bar@1.4.21) (2026-04-01)
+
+**Note:** Version bump only for package @synerise/ds-search-bar
+
+## [1.4.20](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search-bar@1.4.19...@synerise/ds-search-bar@1.4.20) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-search-bar
+
 ## [1.4.19](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search-bar@1.4.18...@synerise/ds-search-bar@1.4.19) (2026-03-20)
 
 **Note:** Version bump only for package @synerise/ds-search-bar

package/dist/SearchBar.constants.js

@@ -1,8 +1,18 @@
-export var SEARCH_BAR_PADDING_LEFT = 16;
-export var SEARCH_BAR_PADDING_RIGHT = 12;
-export var ICON_LEFT_SIZE = 24;
-export var ICON_LEFT_MARGIN_RIGHT = 12;
-export var CLEAR_ICON_SIZE = 18;
-export var CLEAR_ICON_MARGIN_LEFT = 12;
-export var VALUE_PREFIX_WRAPPER_LEFT_VALUE = SEARCH_BAR_PADDING_LEFT + ICON_LEFT_SIZE + ICON_LEFT_MARGIN_RIGHT;
-export var VALUE_PREFIX_WRAPPER_RIGHT_MARGIN = 4;
+const SEARCH_BAR_PADDING_LEFT = 16;
+const SEARCH_BAR_PADDING_RIGHT = 12;
+const ICON_LEFT_SIZE = 24;
+const ICON_LEFT_MARGIN_RIGHT = 12;
+const CLEAR_ICON_SIZE = 18;
+const CLEAR_ICON_MARGIN_LEFT = 12;
+const VALUE_PREFIX_WRAPPER_LEFT_VALUE = SEARCH_BAR_PADDING_LEFT + ICON_LEFT_SIZE + ICON_LEFT_MARGIN_RIGHT;
+const VALUE_PREFIX_WRAPPER_RIGHT_MARGIN = 4;
+export {
+  CLEAR_ICON_MARGIN_LEFT,
+  CLEAR_ICON_SIZE,
+  ICON_LEFT_MARGIN_RIGHT,
+  ICON_LEFT_SIZE,
+  SEARCH_BAR_PADDING_LEFT,
+  SEARCH_BAR_PADDING_RIGHT,
+  VALUE_PREFIX_WRAPPER_LEFT_VALUE,
+  VALUE_PREFIX_WRAPPER_RIGHT_MARGIN
+};

package/dist/SearchBar.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-declare const SearchBar: React.ForwardRefExoticComponent<Partial<Pick<import("@synerise/ds-input").InputProps, "handleInputRef">> & {
+import { default as React } from 'react';
+declare const SearchBar: React.ForwardRefExoticComponent<Partial<Pick<import('@synerise/ds-input').InputProps, "handleInputRef">> & {
     onSearchChange: (value: string) => void;
     onClearInput?: () => void;
     placeholder: React.ReactNode;
@@ -10,7 +10,7 @@ declare const SearchBar: React.ForwardRefExoticComponent<Partial<Pick<import("@s
     autofocusDelay?: number;
     disabled?: boolean;
     borderRadius?: boolean;
-    clearTooltipProps?: Partial<import("@synerise/ds-tooltip").TooltipProps>;
+    clearTooltipProps?: Partial<import('@synerise/ds-tooltip').TooltipProps>;
     valuePrefix?: React.ReactNode;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "iconLeft" | "disabled" | "value" | "placeholder" | "handleInputRef" | "onSearchChange" | "onClearInput" | "clearTooltip" | "autofocus" | "autofocusDelay" | "borderRadius" | "clearTooltipProps" | "valuePrefix"> & import("@synerise/ds-utils").DataAttributes & React.RefAttributes<HTMLDivElement>>;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "iconLeft" | "disabled" | "value" | "placeholder" | "handleInputRef" | "borderRadius" | "onSearchChange" | "onClearInput" | "clearTooltip" | "autofocus" | "autofocusDelay" | "clearTooltipProps" | "valuePrefix"> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>;
 export default SearchBar;

package/dist/SearchBar.js

@@ -1,62 +1,51 @@
-var _excluded = ["value", "className", "onSearchChange", "onClearInput", "placeholder", "iconLeft", "autofocus", "clearTooltip", "disabled", "borderRadius", "handleInputRef", "autofocusDelay", "clearTooltipProps", "valuePrefix"];
-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); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import classnames from 'classnames';
-import React, { forwardRef, useEffect, useMemo, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { useTheme } from '@synerise/ds-core';
-import Icon, { Close3M } from '@synerise/ds-icon';
-import Tooltip from '@synerise/ds-tooltip';
-import { CLEAR_ICON_SIZE } from './SearchBar.constants';
-import * as S from './SearchBar.styles';
-import { ValuePrefix } from './ValuePrefix';
-var DEFAULT_PLACEHOLDER_STRING = 'Search';
-var SearchBar = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
-  var value = _ref.value,
-    className = _ref.className,
-    onSearchChange = _ref.onSearchChange,
-    onClearInput = _ref.onClearInput,
-    placeholder = _ref.placeholder,
-    iconLeft = _ref.iconLeft,
-    autofocus = _ref.autofocus,
-    _ref$clearTooltip = _ref.clearTooltip,
-    clearTooltip = _ref$clearTooltip === void 0 ? /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "DS.SEARCH-BAR.CLEAR-TOOLTIP",
-      defaultMessage: "Clear"
-    }) : _ref$clearTooltip,
-    disabled = _ref.disabled,
-    borderRadius = _ref.borderRadius,
-    handleInputRef = _ref.handleInputRef,
-    autofocusDelay = _ref.autofocusDelay,
-    clearTooltipProps = _ref.clearTooltipProps,
-    valuePrefix = _ref.valuePrefix,
-    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var theme = useTheme();
-  var _useState = useState(false),
-    isFocused = _useState[0],
-    setFocus = _useState[1];
-  var _useState2 = useState(),
-    input = _useState2[0],
-    setInput = _useState2[1];
-  var _useState3 = useState(0),
-    valuePrefixWidth = _useState3[0],
-    setValuePrefixWidth = _useState3[1];
-  var handleRef = function handleRef(ref) {
-    handleInputRef == null || handleInputRef(ref);
+import { jsxs, jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef, useState, useEffect, useMemo } from "react";
+import { FormattedMessage } from "react-intl";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { Close3M } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { CLEAR_ICON_SIZE } from "./SearchBar.constants.js";
+import { SearchBarWrapper, IconLeftWrapper, ClearInputWrapper, PlaceholderWrapper, SearchBar as SearchBar$1 } from "./SearchBar.styles.js";
+import { ValuePrefix } from "./ValuePrefix.js";
+const DEFAULT_PLACEHOLDER_STRING = "Search";
+const SearchBar = forwardRef(({
+  value,
+  className,
+  onSearchChange,
+  onClearInput,
+  placeholder,
+  iconLeft,
+  autofocus,
+  clearTooltip = /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.SEARCH-BAR.CLEAR-TOOLTIP", defaultMessage: "Clear" }),
+  disabled,
+  borderRadius,
+  handleInputRef,
+  autofocusDelay,
+  clearTooltipProps,
+  valuePrefix,
+  ...htmlAttributes
+}, forwardedRef) => {
+  const theme = useTheme();
+  const [isFocused, setFocus] = useState(false);
+  const [input, setInput] = useState();
+  const [valuePrefixWidth, setValuePrefixWidth] = useState(0);
+  const handleRef = (ref) => {
+    handleInputRef?.(ref);
     if (ref.current) {
       setInput(ref.current);
     }
   };
-  useEffect(function () {
+  useEffect(() => {
     if (input) {
       if (autofocus) {
         if (autofocusDelay) {
-          var timeout = setTimeout(function () {
+          const timeout = setTimeout(() => {
             input.focus({
               preventScroll: true
             });
           }, autofocusDelay);
-          return function () {
+          return () => {
             clearTimeout(timeout);
           };
         }
@@ -65,54 +54,22 @@ var SearchBar = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
         });
       }
     }
-    return undefined;
+    return void 0;
   }, [autofocus, autofocusDelay, input]);
-  var placeholderString = typeof placeholder === 'string' ? placeholder : DEFAULT_PLACEHOLDER_STRING;
-  var finalClassName = useMemo(function () {
-    return classnames(className, {
-      'is-focused': isFocused
-    });
-  }, [className, isFocused]);
-  return /*#__PURE__*/React.createElement(S.SearchBarWrapper, _extends({
-    iconLeft: iconLeft,
-    isEmpty: !value,
-    disabled: disabled,
-    borderRadius: borderRadius,
-    "data-testid": "input-wrapper",
-    valuePrefixWidth: valuePrefixWidth
-  }, htmlAttributes, {
-    className: finalClassName,
-    ref: forwardedRef
-  }), iconLeft && /*#__PURE__*/React.createElement(S.IconLeftWrapper, null, iconLeft), onClearInput && (Boolean(valuePrefix) || Boolean(value)) && /*#__PURE__*/React.createElement(S.ClearInputWrapper, {
-    onClick: onClearInput,
-    "data-testid": "clear-btn"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(Tooltip, _extends({
-      title: clearTooltip
-    }, clearTooltipProps), /*#__PURE__*/React.createElement(Close3M, null)),
-    color: theme.palette['grey-500'],
-    size: CLEAR_ICON_SIZE
-  })), !!valuePrefix && /*#__PURE__*/React.createElement(ValuePrefix, {
-    value: valuePrefix,
-    setValuePrefixWidth: setValuePrefixWidth
-  }), !value && /*#__PURE__*/React.createElement(S.PlaceholderWrapper, {
-    valuePrefixWidth: valuePrefixWidth
-  }, placeholder), /*#__PURE__*/React.createElement(S.SearchBar, {
-    onChange: function onChange(event) {
+  const placeholderString = typeof placeholder === "string" ? placeholder : DEFAULT_PLACEHOLDER_STRING;
+  const finalClassName = useMemo(() => classnames(className, {
+    "is-focused": isFocused
+  }), [className, isFocused]);
+  return /* @__PURE__ */ jsxs(SearchBarWrapper, { iconLeft, isEmpty: !value, disabled, borderRadius, "data-testid": "input-wrapper", valuePrefixWidth, ...htmlAttributes, className: finalClassName, ref: forwardedRef, children: [
+    iconLeft && /* @__PURE__ */ jsx(IconLeftWrapper, { children: iconLeft }),
+    onClearInput && (Boolean(valuePrefix) || Boolean(value)) && /* @__PURE__ */ jsx(ClearInputWrapper, { onClick: onClearInput, "data-testid": "clear-btn", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Tooltip, { title: clearTooltip, ...clearTooltipProps, children: /* @__PURE__ */ jsx(Close3M, {}) }), color: theme.palette["grey-500"], size: CLEAR_ICON_SIZE }) }),
+    !!valuePrefix && /* @__PURE__ */ jsx(ValuePrefix, { value: valuePrefix, setValuePrefixWidth }),
+    !value && /* @__PURE__ */ jsx(PlaceholderWrapper, { valuePrefixWidth, children: placeholder }),
+    /* @__PURE__ */ jsx(SearchBar$1, { onChange: (event) => {
       onSearchChange(event.currentTarget.value);
-    },
-    onFocus: function onFocus() {
-      return setFocus(true);
-    },
-    onBlur: function onBlur() {
-      return setFocus(false);
-    },
-    value: value,
-    resetMargin: true,
-    placeholder: placeholderString,
-    handleInputRef: handleRef,
-    disabled: disabled,
-    autoComplete: "off"
-  }));
+    }, onFocus: () => setFocus(true), onBlur: () => setFocus(false), value, resetMargin: true, placeholder: placeholderString, handleInputRef: handleRef, disabled, autoComplete: "off" })
+  ] });
 });
-export default SearchBar;
+export {
+  SearchBar as default
+};

package/dist/SearchBar.styles.d.ts

@@ -1,13 +1,13 @@
-import { type StyledInput } from '@synerise/ds-input';
-export declare const IconLeftWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ValuePrefixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ValuePrefixTitle: import("styled-components").StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import("@synerise/ds-typography/dist/Title.types").Props) => React.JSX.Element, any, {}, never>;
-export declare const ClearInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PlaceholderWrapper: import("styled-components").StyledComponent<"div", any, {
+import { StyledInput } from '@synerise/ds-input';
+export declare const IconLeftWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ValuePrefixWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ValuePrefixTitle: import('styled-components').StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import('@synerise/ds-typography/dist/Title.types').Props) => React.JSX.Element, any, {}, never>;
+export declare const ClearInputWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const PlaceholderWrapper: import('styled-components').StyledComponent<"div", any, {
     valuePrefixWidth: number;
 }, never>;
 export declare const SearchBar: StyledInput;
-export declare const SearchBarWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const SearchBarWrapper: import('styled-components').StyledComponent<"div", any, {
     iconLeft: React.ReactNode;
     isEmpty: boolean;
     disabled: boolean;

package/dist/SearchBar.styles.js

@@ -1,74 +1,55 @@
-import styled from 'styled-components';
-import { Input } from '@synerise/ds-input';
-import { Title } from '@synerise/ds-typography';
-import { CLEAR_ICON_MARGIN_LEFT, CLEAR_ICON_SIZE, ICON_LEFT_MARGIN_RIGHT, ICON_LEFT_SIZE, SEARCH_BAR_PADDING_LEFT, SEARCH_BAR_PADDING_RIGHT, VALUE_PREFIX_WRAPPER_LEFT_VALUE, VALUE_PREFIX_WRAPPER_RIGHT_MARGIN } from './SearchBar.constants';
-var getPaddingAndWidthForSearchBarAntInput = function getPaddingAndWidthForSearchBarAntInput(_ref) {
-  var iconLeft = _ref.iconLeft,
-    isEmpty = _ref.isEmpty,
-    valuePrefixWidth = _ref.valuePrefixWidth;
-  var leftPadding = SEARCH_BAR_PADDING_LEFT + (iconLeft ? ICON_LEFT_SIZE + ICON_LEFT_MARGIN_RIGHT : 0) + valuePrefixWidth + (valuePrefixWidth ? VALUE_PREFIX_WRAPPER_RIGHT_MARGIN : 0);
-  var rightPadding = SEARCH_BAR_PADDING_RIGHT + (!isEmpty ? CLEAR_ICON_SIZE + CLEAR_ICON_MARGIN_LEFT : 0);
-  return "\n    padding: 0 " + rightPadding + "px 0 " + leftPadding + "px;\n    width: calc(100% - " + (rightPadding + leftPadding) + "px);\n  ";
+import styled from "styled-components";
+import { Input } from "@synerise/ds-input";
+import { Title } from "@synerise/ds-typography";
+import { SEARCH_BAR_PADDING_LEFT, SEARCH_BAR_PADDING_RIGHT, VALUE_PREFIX_WRAPPER_LEFT_VALUE, VALUE_PREFIX_WRAPPER_RIGHT_MARGIN, CLEAR_ICON_SIZE, CLEAR_ICON_MARGIN_LEFT, ICON_LEFT_SIZE, ICON_LEFT_MARGIN_RIGHT } from "./SearchBar.constants.js";
+const getPaddingAndWidthForSearchBarAntInput = ({
+  iconLeft,
+  isEmpty,
+  valuePrefixWidth
+}) => {
+  const leftPadding = SEARCH_BAR_PADDING_LEFT + (iconLeft ? ICON_LEFT_SIZE + ICON_LEFT_MARGIN_RIGHT : 0) + valuePrefixWidth + (valuePrefixWidth ? VALUE_PREFIX_WRAPPER_RIGHT_MARGIN : 0);
+  const rightPadding = SEARCH_BAR_PADDING_RIGHT + (!isEmpty ? CLEAR_ICON_SIZE + CLEAR_ICON_MARGIN_LEFT : 0);
+  return `
+    padding: 0 ${rightPadding}px 0 ${leftPadding}px;
+    width: calc(100% - ${rightPadding + leftPadding}px);
+  `;
 };
-export var IconLeftWrapper = styled.div.withConfig({
+const IconLeftWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SearchBarstyles__IconLeftWrapper",
   componentId: "sc-qhi5c4-0"
 })(["position:absolute;left:", "px;display:flex;align-items:center;height:100%;z-index:3;"], SEARCH_BAR_PADDING_LEFT);
-export var ValuePrefixWrapper = styled.div.withConfig({
+const ValuePrefixWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SearchBarstyles__ValuePrefixWrapper",
   componentId: "sc-qhi5c4-1"
 })(["position:absolute;left:", "px;display:flex;align-items:center;height:100%;z-index:3;"], VALUE_PREFIX_WRAPPER_LEFT_VALUE);
-export var ValuePrefixTitle = styled(Title).withConfig({
+const ValuePrefixTitle = /* @__PURE__ */ styled(Title).withConfig({
   displayName: "SearchBarstyles__ValuePrefixTitle",
   componentId: "sc-qhi5c4-2"
 })(["line-height:18px;"]);
-export var ClearInputWrapper = styled.div.withConfig({
+const ClearInputWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SearchBarstyles__ClearInputWrapper",
   componentId: "sc-qhi5c4-3"
 })(["right:", "px;position:absolute;display:flex;align-items:center;height:100%;z-index:3;cursor:pointer;"], SEARCH_BAR_PADDING_RIGHT);
-export var PlaceholderWrapper = styled.div.withConfig({
+const PlaceholderWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SearchBarstyles__PlaceholderWrapper",
   componentId: "sc-qhi5c4-4"
-})(["pointer-events:none;position:absolute;display:flex;white-space:nowrap;align-items:center;z-index:2;height:52px;left:", "px;color:", ";line-height:18px;"], function (_ref2) {
-  var valuePrefixWidth = _ref2.valuePrefixWidth;
-  return VALUE_PREFIX_WRAPPER_LEFT_VALUE + valuePrefixWidth + (valuePrefixWidth ? VALUE_PREFIX_WRAPPER_RIGHT_MARGIN : 0);
-}, function (props) {
-  return props.theme.palette['grey-500'];
-});
-export var SearchBar = styled(Input).withConfig({
+})(["pointer-events:none;position:absolute;display:flex;white-space:nowrap;align-items:center;z-index:2;height:52px;left:", "px;color:", ";line-height:18px;"], ({
+  valuePrefixWidth
+}) => VALUE_PREFIX_WRAPPER_LEFT_VALUE + valuePrefixWidth + (valuePrefixWidth ? VALUE_PREFIX_WRAPPER_RIGHT_MARGIN : 0), (props) => props.theme.palette["grey-500"]);
+const SearchBar = /* @__PURE__ */ styled(Input).withConfig({
   displayName: "SearchBarstyles__SearchBar",
   componentId: "sc-qhi5c4-5"
-})(["&&&{position:relative;height:52px;padding:0;input.ant-input{position:absolute;top:0;left:0;max-width:100%;height:52px;border:0;background:", ";box-sizing:content-box;&:focus{box-shadow:inset 0px -2px 0px 0px ", ";}::-webkit-input-placeholder{line-height:52px;color:transparent;}:-moz-placeholder{line-height:52px;color:transparent;}::-moz-placeholder{line-height:52px;color:transparent;}:-ms-input-placeholder{line-height:52px;color:transparent;}}}"], function (props) {
-  return props.theme.palette['grey-050'];
-}, function (props) {
-  return props.theme.palette['blue-600'];
-});
-// placeholder styling rules have to be separated
-// https://stackoverflow.com/questions/44971077/why-do-comma-separated-placeholder-rules-not-get-applied-in-css
-
-export var SearchBarWrapper = styled.div.withConfig({
+})(["&&&{position:relative;height:52px;padding:0;input.ant-input{position:absolute;top:0;left:0;max-width:100%;height:52px;border:0;background:", ";box-sizing:content-box;&:focus{box-shadow:inset 0px -2px 0px 0px ", ";}::-webkit-input-placeholder{line-height:52px;color:transparent;}:-moz-placeholder{line-height:52px;color:transparent;}::-moz-placeholder{line-height:52px;color:transparent;}:-ms-input-placeholder{line-height:52px;color:transparent;}}}"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["blue-600"]);
+const SearchBarWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SearchBarstyles__SearchBarWrapper",
   componentId: "sc-qhi5c4-6"
-})(["position:relative;overflow:hidden;border-bottom:1px solid ", ";pointer-events:", ";user-select:", ";border-radius:", ";min-width:150px;&&&{svg{transition:all 0.3s ease-out;fill:", ";}input.ant-input{border-radius:0;line-height:18px;", "}&:hover{", "{svg{fill:", ";}}", "{svg{fill:", ";}}", "{color:", ";}}}&.is-focused{", "{svg{fill:", ";}}", "{svg{fill:", ";}}", "{color:", ";}}"], function (props) {
-  return props.theme.palette['grey-100'];
-}, function (props) {
-  return props.disabled ? 'none' : '';
-}, function (props) {
-  return props.disabled ? 'none' : '';
-}, function (props) {
-  return props.borderRadius ? '3px' : '';
-}, function (props) {
-  return props.disabled ? props.theme.palette['grey-400'] : '';
-}, getPaddingAndWidthForSearchBarAntInput, IconLeftWrapper, function (props) {
-  return props.theme.palette['blue-600'];
-}, ClearInputWrapper, function (props) {
-  return props.theme.palette['red-600'];
-}, ValuePrefixTitle, function (props) {
-  return props.theme.palette['blue-600'];
-}, IconLeftWrapper, function (props) {
-  return props.theme.palette['blue-600'];
-}, ClearInputWrapper, function (props) {
-  return props.theme.palette['red-600'];
-}, ValuePrefixTitle, function (props) {
-  return props.theme.palette['blue-600'];
-});
+})(["position:relative;overflow:hidden;border-bottom:1px solid ", ";pointer-events:", ";user-select:", ";border-radius:", ";min-width:150px;&&&{svg{transition:all 0.3s ease-out;fill:", ";}input.ant-input{border-radius:0;line-height:18px;", "}&:hover{", "{svg{fill:", ";}}", "{svg{fill:", ";}}", "{color:", ";}}}&.is-focused{", "{svg{fill:", ";}}", "{svg{fill:", ";}}", "{color:", ";}}"], (props) => props.theme.palette["grey-100"], (props) => props.disabled ? "none" : "", (props) => props.disabled ? "none" : "", (props) => props.borderRadius ? "3px" : "", (props) => props.disabled ? props.theme.palette["grey-400"] : "", getPaddingAndWidthForSearchBarAntInput, IconLeftWrapper, (props) => props.theme.palette["blue-600"], ClearInputWrapper, (props) => props.theme.palette["red-600"], ValuePrefixTitle, (props) => props.theme.palette["blue-600"], IconLeftWrapper, (props) => props.theme.palette["blue-600"], ClearInputWrapper, (props) => props.theme.palette["red-600"], ValuePrefixTitle, (props) => props.theme.palette["blue-600"]);
+export {
+  ClearInputWrapper,
+  IconLeftWrapper,
+  PlaceholderWrapper,
+  SearchBar,
+  SearchBarWrapper,
+  ValuePrefixTitle,
+  ValuePrefixWrapper
+};

package/dist/SearchBar.types.d.ts

@@ -1,8 +1,8 @@
-import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
-import { type StyledComponent } from 'styled-components';
-import type { InputProps } from '@synerise/ds-input';
-import type { TooltipProps } from '@synerise/ds-tooltip';
-import type { WithHTMLAttributes } from '@synerise/ds-utils';
+import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import { StyledComponent } from 'styled-components';
+import { InputProps } from '@synerise/ds-input';
+import { TooltipProps } from '@synerise/ds-tooltip';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
 export type SearchBarProps = WithHTMLAttributes<HTMLDivElement, Partial<Pick<InputProps, 'handleInputRef'>> & {
     onSearchChange: (value: string) => void;
     onClearInput?: () => void;

package/dist/SearchBar.types.js

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

package/dist/ValuePrefix.d.ts

@@ -1,4 +1,4 @@
-import React, { type Dispatch, type ReactNode, type SetStateAction } from 'react';
+import { default as React, Dispatch, ReactNode, SetStateAction } from 'react';
 type ValuePrefixProps = {
     value: ReactNode;
     setValuePrefixWidth: Dispatch<SetStateAction<number>>;

package/dist/ValuePrefix.js

@@ -1,24 +1,21 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import { useResizeObserver } from '@synerise/ds-utils';
-import * as S from './SearchBar.styles';
-export var ValuePrefix = function ValuePrefix(_ref) {
-  var value = _ref.value,
-    setValuePrefixWidth = _ref.setValuePrefixWidth;
-  var valuePrefixRef = useRef(null);
-  var handleValuePrefixWidth = useCallback(function (dimensions) {
+import { jsx } from "react/jsx-runtime";
+import { useRef, useCallback, useEffect } from "react";
+import { useResizeObserver } from "@synerise/ds-utils";
+import { ValuePrefixWrapper, ValuePrefixTitle } from "./SearchBar.styles.js";
+const ValuePrefix = ({
+  value,
+  setValuePrefixWidth
+}) => {
+  const valuePrefixRef = useRef(null);
+  const handleValuePrefixWidth = useCallback((dimensions) => {
     setValuePrefixWidth(dimensions.width);
   }, [setValuePrefixWidth]);
   useResizeObserver(valuePrefixRef, handleValuePrefixWidth);
-  useEffect(function () {
-    return function () {
-      return setValuePrefixWidth(0);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    return () => setValuePrefixWidth(0);
   }, []);
-  return /*#__PURE__*/React.createElement(S.ValuePrefixWrapper, {
-    ref: valuePrefixRef
-  }, /*#__PURE__*/React.createElement(S.ValuePrefixTitle, {
-    level: 6,
-    withoutMargin: true
-  }, value));
-};
+  return /* @__PURE__ */ jsx(ValuePrefixWrapper, { ref: valuePrefixRef, children: /* @__PURE__ */ jsx(ValuePrefixTitle, { level: 6, withoutMargin: true, children: value }) });
+};
+export {
+  ValuePrefix
+};

package/dist/index.js

@@ -1 +1,4 @@
-export { default } from './SearchBar';
+import { default as default2 } from "./SearchBar.js";
+export {
+  default2 as default
+};

package/dist/modules.d.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-search-bar",
-  "version": "1.4.19",
+  "version": "1.4.21",
   "description": "SearchBar 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",
@@ -35,11 +35,11 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.15.0",
-    "@synerise/ds-input": "^1.6.9",
-    "@synerise/ds-tooltip": "^1.4.9",
-    "@synerise/ds-typography": "^1.1.12",
-    "@synerise/ds-utils": "^1.7.0",
+    "@synerise/ds-icon": "^1.15.2",
+    "@synerise/ds-input": "^1.6.11",
+    "@synerise/ds-tooltip": "^1.4.11",
+    "@synerise/ds-typography": "^1.1.14",
+    "@synerise/ds-utils": "^1.7.1",
     "classnames": "^2.5.1"
   },
   "peerDependencies": {
@@ -48,5 +48,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "c2384982c3533a31eb5e5e0408f8dcecb2b0f399"
 }