fis-component 0.1.8 → 0.1.10

package/dist/cjs/index.js

@@ -61893,6 +61893,11 @@ function SeparatorIcon(props) {
     return (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsxRuntime.jsx("path", { d: "M3.5 11L8.5 1", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 
+function HomeIcon(props) {
+    const { width = 16, height = 16, ...rest } = props;
+    return (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsxRuntime.jsx("path", { d: "M5.33333 11.3333H10.6667M7.34513 1.84267L2.82359 5.35942C2.52135 5.5945 2.37022 5.71204 2.26135 5.85925C2.16491 5.98964 2.09307 6.13653 2.04935 6.29271C2 6.46902 2 6.66047 2 7.04338V11.8667C2 12.6134 2 12.9868 2.14532 13.272C2.27316 13.5229 2.47713 13.7268 2.72801 13.8547C3.01323 14 3.3866 14 4.13333 14H11.8667C12.6134 14 12.9868 14 13.272 13.8547C13.5229 13.7268 13.7268 13.5229 13.8547 13.272C14 12.9868 14 12.6134 14 11.8667V7.04338C14 6.66047 14 6.46902 13.9506 6.29271C13.9069 6.13653 13.8351 5.98964 13.7386 5.85925C13.6298 5.71204 13.4787 5.5945 13.1764 5.35942L8.65487 1.84267C8.42065 1.6605 8.30354 1.56942 8.17423 1.53441C8.06013 1.50351 7.93987 1.50351 7.82577 1.53441C7.69646 1.56942 7.57935 1.6605 7.34513 1.84267Z", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+}
+
 function CloseIcon(props) {
     const { width = 16, height = 16, ...rest } = props;
     return (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsxRuntime.jsx("path", { d: "M12.6671 3.33325L3.33374 12.6666M3.33374 3.33325L12.6671 12.6666", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
@@ -63142,6 +63147,12 @@ const DivSwitchKnobSC = styled.div `
           left: ${getTheme("com/switch/item/size-md/left-padding")};
         `}
 `;
+const DivWrapperSC$6 = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${getTheme("com/input/vertical-gap")};
+  width: fit-content;
+`;
 const DivSwitchContainerSC = styled.div `
   display: flex;
   align-items: flex-start;
@@ -63209,9 +63220,29 @@ const DivSwitchContainerSC = styled.div `
     `}
 `;
 
-const FISSwitch = React.forwardRef(({ isOn, disabled = false, size = "md", label, subLabel, onToggle, ...props }, ref) => {
+const DivLabelSC = styled.div `
+  width: 100%;
+  display: flex;
+  align-items: center;
+`;
+const LabelTextSC = styled.label `
+  ${getTheme("Label/Sm")}
+  color: ${getTheme("com/input/label/label/color-text")};
+`;
+const SpanRequiredSC = styled.span `
+  ${getTheme("Label/Sm")}
+  color: ${getTheme("com/input/label/required-mark/color-text")};
+`;
+
+const FISInputLabel = (props) => {
+    const { textLabel, required, iconLabel, onClickIconLabel } = props;
+    return (jsxRuntime.jsxs(DivLabelSC, { children: [jsxRuntime.jsxs(LabelTextSC, { children: [textLabel, required && jsxRuntime.jsx(SpanRequiredSC, { children: "\u00A0*" })] }), iconLabel && (jsxRuntime.jsx(FISIconButton, { size: "xs", variant: "tertiary-invisible", icon: iconLabel, onClick: onClickIconLabel }))] }));
+};
+FISInputLabel.displayName = "FISInputLabel";
+
+const FISSwitch = React.forwardRef(({ isOn, disabled = false, size = "md", label, subLabel, onToggle, textLabel = "", required, iconLabel, onClickIconLabel, ...props }, ref) => {
     const labelContent = label || subLabel ? (jsxRuntime.jsxs(DivSwitchLabelContainerSC, { children: [label && jsxRuntime.jsx(SpanLabelSC$2, { "$size": size, children: label }), subLabel && jsxRuntime.jsx(SpanSubLabelSC$1, { "$size": size, children: subLabel })] })) : null;
-    return (jsxRuntime.jsxs(DivSwitchContainerSC, { ref: ref, "$size": size, "$isOn": isOn, "$disabled": disabled, onClick: () => !disabled && onToggle(), ...props, children: [jsxRuntime.jsx(DivSwitchTrackSC, { "$isOn": isOn, children: jsxRuntime.jsx(DivSwitchKnobSC, { "$isOn": isOn, "$size": size }) }), labelContent] }));
+    return (jsxRuntime.jsxs(DivWrapperSC$6, { ...props, onClick: () => !disabled && onToggle(), children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsxs(DivSwitchContainerSC, { ref: ref, "$size": size, "$isOn": isOn, "$disabled": disabled, children: [jsxRuntime.jsx(DivSwitchTrackSC, { "$isOn": isOn, children: jsxRuntime.jsx(DivSwitchKnobSC, { "$isOn": isOn, "$size": size }) }), labelContent] })] }));
 });
 // Add display name for better debugging experience
 FISSwitch.displayName = "FISSwitch";
@@ -64230,7 +64261,7 @@ const BreadcrumbEllipsis = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { childre
 const FISBreadcrumb = ({ items, className }) => {
     if (items.length === 0)
         return null;
-    return (jsxRuntime.jsxs(DivContainerSC$9, { className: className, children: [items?.[0]?.icon && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FISIconButton, { size: "xs", icon: items?.[0]?.icon, variant: "tertiary-invisible", onClick: items[0].onClick }), jsxRuntime.jsx(DivSeparatorIconSC$1, { children: jsxRuntime.jsx(SeparatorIcon, {}) })] })), items.length > MAX_VISIBLE_ITEMS ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [items.slice(1, 2).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(DivSeparatorIconSC$1, { children: jsxRuntime.jsx(SeparatorIcon, {}) })] }, index))), jsxRuntime.jsx(BreadcrumbEllipsis, {}), items.slice(-2).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(DivSeparatorIconSC$1, { children: jsxRuntime.jsx(SeparatorIcon, {}) })] }, `end-${index}`)))] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.slice(1).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(DivSeparatorIconSC$1, { children: jsxRuntime.jsx(SeparatorIcon, {}) })] }, index))) }))] }));
+    return (jsxRuntime.jsxs(DivContainerSC$9, { className: className, children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FISIconButton, { size: "xs", icon: items?.[0]?.icon ?? jsxRuntime.jsx(HomeIcon, {}), variant: "tertiary-invisible", onClick: items[0].onClick }), jsxRuntime.jsx(DivSeparatorIconSC$1, { children: jsxRuntime.jsx(SeparatorIcon, {}) })] }), items.length > MAX_VISIBLE_ITEMS ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [items.slice(1, 2).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(DivSeparatorIconSC$1, { children: jsxRuntime.jsx(SeparatorIcon, {}) })] }, index))), jsxRuntime.jsx(BreadcrumbEllipsis, {}), items.slice(-2).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(DivSeparatorIconSC$1, { children: jsxRuntime.jsx(SeparatorIcon, {}) })] }, `end-${index}`)))] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.slice(1).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(DivSeparatorIconSC$1, { children: jsxRuntime.jsx(SeparatorIcon, {}) })] }, index))) }))] }));
 };
 FISBreadcrumb.displayName = "FISBreadcrumb";
 
@@ -65305,26 +65336,6 @@ const SpanHintSC$3 = styled.span `
   }
 `;
 
-const DivLabelSC = styled.div `
-  width: 100%;
-  display: flex;
-  align-items: center;
-`;
-const LabelTextSC = styled.label `
-  ${getTheme("Label/Sm")}
-  color: ${getTheme("com/input/label/label/color-text")};
-`;
-const SpanRequiredSC = styled.span `
-  ${getTheme("Label/Sm")}
-  color: ${getTheme("com/input/label/required-mark/color-text")};
-`;
-
-const FISInputLabel = (props) => {
-    const { textLabel, required, iconLabel, onClickIconLabel } = props;
-    return (jsxRuntime.jsxs(DivLabelSC, { children: [jsxRuntime.jsxs(LabelTextSC, { children: [textLabel, required && jsxRuntime.jsx(SpanRequiredSC, { children: "\u00A0*" })] }), iconLabel && (jsxRuntime.jsx(FISIconButton, { size: "xs", variant: "tertiary-invisible", icon: iconLabel, onClick: onClickIconLabel }))] }));
-};
-FISInputLabel.displayName = "FISInputLabel";
-
 /**
  * A utility function to merge multiple React refs into a single callback function.
  * This function accepts any number of refs as arguments and returns a callback function.
@@ -66513,13 +66524,13 @@ const FISInputArea = React.forwardRef((props, ref) => {
                             "input-area-icon": iconSuffix,
                         }) }), iconSuffix && (jsxRuntime.jsx(DivIconSC$1, { className: classNames({
                             "input-area-lg": size === "lg",
-                        }), children: jsxRuntime.jsx(FISIconButton, { variant: "tertiary-invisible", size: "sm", icon: iconSuffix, onClick: onClickIconSuffix }) })), jsxRuntime.jsx(DivResizeSC, { id: "resizeHandle", onMouseDown: handleResize, children: jsxRuntime.jsx(ResizeIcon, {}) })] }), jsxRuntime.jsxs(DivBottomSC, { children: [jsxRuntime.jsx(SpanHintSC$2, { className: classNames({
+                        }), children: jsxRuntime.jsx(FISIconButton, { variant: "tertiary-invisible", size: "sm", icon: iconSuffix, onClick: onClickIconSuffix }) })), jsxRuntime.jsx(DivResizeSC, { id: "resizeHandle", onMouseDown: handleResize, children: jsxRuntime.jsx(ResizeIcon, {}) })] }), (!!message || (showCount && maxLength > 0)) && (jsxRuntime.jsxs(DivBottomSC, { children: [jsxRuntime.jsx(SpanHintSC$2, { className: classNames({
                             disabled,
                             negative,
                             positive,
                         }), children: message ? message : "" }), jsxRuntime.jsx(DivCountSC, { children: showCount && maxLength > 0 && (jsxRuntime.jsxs("span", { className: classNames("text-area__count", {
                                 negative: getCurrentValue()?.length > maxLength,
-                            }), children: [getCurrentValue()?.length, "/", maxLength] })) })] })] }));
+                            }), children: [getCurrentValue()?.length, "/", maxLength] })) })] }))] }));
 });
 FISInputArea.displayName = "FISInputArea";
 
@@ -72574,28 +72585,36 @@ const DivHeaderCellContainerSC = styled.div `
       justify-content: ${(props) => props.$textAlign === "right" ? "flex-end" : "space-between"};
       width: 100%;
       gap: ${getTheme("com/table/title-cell/default/label/vertical-gap")};
+      .label-container {
+        display: flex;
+        gap: 4px;
 
-      .label {
-        ${getTheme("Label/XS")};
-        width: 100%;
-        display: inline-block;
-        ${(props) => (props.$textAlign === "right" ? "text-align: end" : "")};
-        color: ${(props) => getTheme(`com/table/title-cell/${props?.$disabled ? "disable" : "default"}/label/color-text`)};
+        .label {
+          ${getTheme("Label/XS")};
+          width: 100%;
+          display: inline-block;
+          ${(props) => (props.$textAlign === "right" ? "text-align: end" : "")};
+          color: ${(props) => getTheme(`com/table/title-cell/${props?.$disabled ? "disable" : "default"}/label/color-text`)};
 
-        ${(props) => {
+          ${(props) => {
     if (props.$hasTruncateLabel) {
         return styled.css `
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-            `;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              `;
     }
     else {
         return styled.css `
-              white-space: pre-wrap;
-            `;
+                white-space: pre-wrap;
+              `;
     }
 }};
+        }
+        .required-asterisk {
+          ${getTheme("Label/XS")};
+          color: #D92D20;
+        }
       }
 
       .right-component-father {
@@ -72629,8 +72648,8 @@ const DivHeaderCellContainerSC = styled.div `
   }
 `;
 
-const FISTableHeaderCell = React.forwardRef(({ className, label, description, rightComponent, disabled, hasRightDivider = true, hasTruncateLabel = false, onlyIcon = false, textAlign = "left", ...rest }, ref) => {
-    return (jsxRuntime.jsx(DivHeaderCellContainerSC, { ref: ref, className: classNames("header-cell-container", className), "$textAlign": textAlign, "$disabled": disabled, "$hasTruncateLabel": hasTruncateLabel, "$hasRightDivider": hasRightDivider, "$onlyIcon": onlyIcon, ...rest, children: jsxRuntime.jsxs("div", { className: "header-cell-content", children: [jsxRuntime.jsxs("div", { className: "cell-content title", children: [label && jsxRuntime.jsx("div", { className: "label", children: label }), rightComponent && (jsxRuntime.jsx("div", { className: "right-component-father", children: rightComponent }))] }), description && (jsxRuntime.jsx("div", { className: "cell-content", children: jsxRuntime.jsx("div", { className: "description", children: description }) }))] }) }));
+const FISTableHeaderCell = React.forwardRef(({ className, label, description, rightComponent, disabled, hasRightDivider = true, hasTruncateLabel = false, onlyIcon = false, textAlign = "left", required, ...rest }, ref) => {
+    return (jsxRuntime.jsx(DivHeaderCellContainerSC, { ref: ref, className: classNames("header-cell-container", className), "$textAlign": textAlign, "$disabled": disabled, "$hasTruncateLabel": hasTruncateLabel, "$hasRightDivider": hasRightDivider, "$onlyIcon": onlyIcon, ...rest, children: jsxRuntime.jsxs("div", { className: "header-cell-content", children: [jsxRuntime.jsxs("div", { className: "cell-content title", children: [label && (jsxRuntime.jsxs("div", { className: "label-container", children: [jsxRuntime.jsx("div", { className: "label", children: label }), required && jsxRuntime.jsx("div", { className: "required-asterisk", children: "*" })] })), rightComponent && (jsxRuntime.jsx("div", { className: "right-component-father", children: rightComponent }))] }), description && (jsxRuntime.jsx("div", { className: "cell-content", children: jsxRuntime.jsx("div", { className: "description", children: description }) }))] }) }));
 });
 FISTableHeaderCell.displayName = "FISTableHeaderCell";
 
@@ -72930,8 +72949,8 @@ const DivIconSC = styled.div `
 }}
 `;
 
-const FISTableCell = React.forwardRef(({ className, textAlign, variant = COLUMN_VARIANT.PRIMARY, content, description, icon, disabled, hasBorder, onChange, contentWrapText = false, ...rest }, ref) => {
-    return (jsxRuntime.jsx(DivColumnCellContainerSC, { "$hasBorder": hasBorder, "$disabled": disabled, "$variant": variant, "$textAlign": textAlign, "$contentWrapText": contentWrapText, "$hasContent": content ? "true" : undefined, "$hasDescription": description, ref: ref, className: classNames("column-cell-container", className), ...rest, children: textAlign === COLUMN_TEXT_ALIGN.SINGLE_LINE ? (jsxRuntime.jsxs("div", { className: "single-line-content", children: [icon && (jsxRuntime.jsx("div", { className: "icon-box", children: jsxRuntime.jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon }) })), (content || description) && (jsxRuntime.jsxs("div", { className: "content-box", children: [content && jsxRuntime.jsx("div", { className: "content", children: content }), description && (jsxRuntime.jsx("div", { className: "description", children: description }))] }))] })) : (jsxRuntime.jsxs("div", { className: "left-right-content", children: [(icon || content) && (jsxRuntime.jsxs("div", { className: "content-box", children: [icon && (jsxRuntime.jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon })), content && jsxRuntime.jsx("div", { className: "content", children: content })] })), description && jsxRuntime.jsx("div", { className: "description", children: description })] })) }));
+const FISTableCell = React.forwardRef(({ className, textAlign, variant = COLUMN_VARIANT.PRIMARY, content, description, icon, disabled, hasBorder, onChange, contentWrapText = false, tooltip = false, placement = "top", variantTooltip = "primary", ...rest }, ref) => {
+    return (jsxRuntime.jsx(FISTooltip, { variant: variantTooltip, placement: placement, title: tooltip ? content || "" : undefined, children: jsxRuntime.jsx(DivColumnCellContainerSC, { "$hasBorder": hasBorder, "$disabled": disabled, "$variant": variant, "$textAlign": textAlign, "$contentWrapText": contentWrapText, "$hasContent": content ? "true" : undefined, "$hasDescription": description, ref: ref, className: classNames("column-cell-container", className), ...rest, children: textAlign === COLUMN_TEXT_ALIGN.SINGLE_LINE ? (jsxRuntime.jsxs("div", { className: "single-line-content", children: [icon && (jsxRuntime.jsx("div", { className: "icon-box", children: jsxRuntime.jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon }) })), (content || description) && (jsxRuntime.jsxs("div", { className: "content-box", children: [content && jsxRuntime.jsx("div", { className: "content", children: content }), description && (jsxRuntime.jsx("div", { className: "description", children: description }))] }))] })) : (jsxRuntime.jsxs("div", { className: "left-right-content", children: [(icon || content) && (jsxRuntime.jsxs("div", { className: "content-box", children: [icon && (jsxRuntime.jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon })), content && jsxRuntime.jsx("div", { className: "content", children: content })] })), description && jsxRuntime.jsx("div", { className: "description", children: description })] })) }) }));
 });
 FISTableCell.displayName = "FISTableCell";
 
@@ -74344,48 +74363,6 @@ const FISSplitButton = React.forwardRef((props, ref) => {
 });
 FISSplitButton.displayName = "FISSplitButton";
 
-const DivWrapperSC$1 = styled.div `
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: ${getTheme("com/input/vertical-gap")};
-`;
-const preventSelection = styled.css `
-  user-select: none !important;
-  -webkit-user-select: none !important;
-  -moz-user-select: none !important;
-  -ms-user-select: none !important;
-  cursor: pointer !important;
-`;
-const DivInputWrapperSC = styled.div `
-  position: relative;
-  display: inline-block;
-  width: 100%;
-
-  ${(props) => props.$hasValue &&
-    styled.css `
-      ${preventSelection}
-
-      input {
-        ${preventSelection}
-        pointer-events: none;
-      }
-    `}
-`;
-const DivDropdownMenuSC = styled.div `
-  margin-top: ${getTheme("com/select/vertical-gap")};
-`;
-const SelectedTagsWrapper = styled.div `
-  display: flex;
-  flex-wrap: wrap;
-  gap: ${getTheme("com/combo-box/selected-data/horizontal-gap")};
-  width: 100%;
-  max-height: calc(
-    2 * ${getTheme("com/chips-button/size-xs/height")} +
-      ${getTheme("com/combo-box/selected-data/horizontal-gap")}
-  );
-`;
-
 const InputSC = styled.input `
   width: 100%;
   cursor: pointer;
@@ -74463,7 +74440,7 @@ const InputSC = styled.input `
     }
   }
 `;
-const DivWrapperSC = styled.div `
+const DivWrapperSC$1 = styled.div `
   width: 100%;
   display: flex;
   align-items: center;
@@ -74667,10 +74644,52 @@ const FISSelectItem = React.forwardRef((props, ref) => {
             iconPrefix: iconPrefix,
             negative: negative,
             activeDropdown: activeDropdown,
-        }), "$size": size, "$activeDropdown": activeDropdown, children: jsxRuntime.jsxs(DivWrapperSC, { children: [iconPrefix && (jsxRuntime.jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsxRuntime.jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size, autoComplete: "off" }), iconSuffix && (jsxRuntime.jsx(DivIconSuffixSC, { "$size": size, "$disabled": disabled, children: iconSuffix }))] }) }));
+        }), "$size": size, "$activeDropdown": activeDropdown, children: jsxRuntime.jsxs(DivWrapperSC$1, { children: [iconPrefix && (jsxRuntime.jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsxRuntime.jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size, autoComplete: "off" }), iconSuffix && (jsxRuntime.jsx(DivIconSuffixSC, { "$size": size, "$disabled": disabled, children: iconSuffix }))] }) }));
 });
 FISSelectItem.displayName = "FISSelectItem";
 
+const DivWrapperSC = styled.div `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: ${getTheme("com/input/vertical-gap")};
+`;
+const preventSelection = styled.css `
+  user-select: none !important;
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+  cursor: pointer !important;
+`;
+const DivInputWrapperSC = styled.div `
+  position: relative;
+  display: inline-block;
+  width: 100%;
+
+  ${(props) => props.$hasValue &&
+    styled.css `
+      ${preventSelection}
+
+      input {
+        ${preventSelection}
+        pointer-events: none;
+      }
+    `}
+`;
+const DivDropdownMenuSC = styled.div `
+  margin-top: ${getTheme("com/select/vertical-gap")};
+`;
+const SelectedTagsWrapper = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${getTheme("com/combo-box/selected-data/horizontal-gap")};
+  width: 100%;
+  max-height: calc(
+    2 * ${getTheme("com/chips-button/size-xs/height")} +
+      ${getTheme("com/combo-box/selected-data/horizontal-gap")}
+  );
+`;
+
 function isMenuSize(value) {
     return value === "sm" || value === "md";
 }
@@ -74684,7 +74703,9 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
     const inputRef = React.useRef(null);
     // Expose focus and openDropdown methods via ref
     React.useImperativeHandle(ref, () => ({
-        ...inputRef.current,
+        focus: () => {
+            inputRef.current?.focus();
+        },
         openDropdown: () => {
             if (!disabled && !isOpen) {
                 setIsOpen(true);
@@ -74865,7 +74886,7 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
         }
         return selectInput;
     };
-    return (jsxRuntime.jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), renderSelectInput(), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && !hideChip && Array.isArray(value) && value.length > 0 && (jsxRuntime.jsx(SelectedTagsWrapper, { children: jsxRuntime.jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsxRuntime.jsx(Portal, { portal: portal, children: jsxRuntime.jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
+    return (jsxRuntime.jsxs(DivWrapperSC, { className: className, style: style, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), renderSelectInput(), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && !hideChip && Array.isArray(value) && value.length > 0 && (jsxRuntime.jsx(SelectedTagsWrapper, { children: jsxRuntime.jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsxRuntime.jsx(Portal, { portal: portal, children: jsxRuntime.jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
                         ...styles.popper,
                         width: referenceElement?.offsetWidth,
                         zIndex: 9999,