fis-component 0.1.8 → 0.1.10

package/dist/cjs/types/src/components/Select/index.d.ts

@@ -1,3 +1,3 @@
-import { SelectProps } from "./types";
-declare const FISSelect: import("react").ForwardRefExoticComponent<SelectProps<string | number> & import("react").RefAttributes<HTMLInputElement>>;
+import { FISSelectRef, SelectProps } from "./types";
+declare const FISSelect: import("react").ForwardRefExoticComponent<SelectProps<string | number> & import("react").RefAttributes<FISSelectRef>>;
 export default FISSelect;

package/dist/cjs/types/src/components/Select/types.d.ts

@@ -43,4 +43,8 @@ export type MultiSelectProps<T extends string | number> = BaseSelectProps<T> & {
     displayValue?: (items: SelectOptionItem<T>[]) => string;
 };
 export type SelectProps<T extends string | number> = SingleSelectProps<T> | MultiSelectProps<T>;
+export interface FISSelectRef {
+    focus: () => void;
+    openDropdown: () => void;
+}
 export {};

package/dist/cjs/types/src/components/Switch/Switch.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import FISSwitch from '.';
+import type { Meta, StoryObj } from "@storybook/react";
+import FISSwitch from ".";
 declare const meta: Meta<typeof FISSwitch>;
 export default meta;
 type Story = StoryObj<typeof FISSwitch>;

package/dist/cjs/types/src/components/Switch/index.d.ts

@@ -46,6 +46,10 @@ interface SwitchProps {
      * - Used to update the `isOn` state.
      */
     onToggle: () => void;
+    textLabel?: string;
+    required?: boolean;
+    iconLabel?: React.ReactNode;
+    onClickIconLabel?: () => void;
 }
 declare const FISSwitch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLDivElement>>;
 export default FISSwitch;

package/dist/cjs/types/src/components/Switch/styles.d.ts

@@ -13,6 +13,7 @@ export declare const DivSwitchKnobSC: import("styled-components/dist/types").ISt
     $isOn: boolean;
     $size: SwitchSize;
 }>> & string;
+export declare const DivWrapperSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DivSwitchContainerSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $size: SwitchSize;
     $isOn: boolean;

package/dist/cjs/types/src/components/Table/ColumnCell/index.d.ts

@@ -1,4 +1,5 @@
 import { DetailedHTMLProps, HTMLAttributes, ReactElement } from "react";
+import { TooltipPlacement } from "antd/es/tooltip";
 interface ColumnCellProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "content"> {
     className?: string;
     textAlign?: string;
@@ -9,6 +10,9 @@ interface ColumnCellProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivE
     icon?: ReactElement;
     disabled?: boolean;
     hasBorder?: boolean;
+    tooltip?: boolean;
+    placement?: TooltipPlacement;
+    variantTooltip?: "primary" | "secondary";
 }
 declare const FISTableCell: import("react").ForwardRefExoticComponent<ColumnCellProps & import("react").RefAttributes<HTMLLabelElement>>;
 export default FISTableCell;

package/dist/cjs/types/src/components/Table/HeaderCell/index.d.ts

@@ -9,6 +9,7 @@ interface HeaderCellProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivE
     hasRightDivider?: boolean;
     hasTruncateLabel?: boolean;
     onlyIcon?: boolean;
+    required?: boolean;
 }
 declare const FISTableHeaderCell: import("react").ForwardRefExoticComponent<HeaderCellProps & import("react").RefAttributes<HTMLLabelElement>>;
 export default FISTableHeaderCell;

package/dist/cjs/types/src/components/Tooltip/index.d.ts

@@ -16,7 +16,7 @@ interface TooltipProps extends Omit<TooltipPropsAntd, "variant" | "title"> {
     /** Additional class names to apply to the tooltip*/
     className?: string | undefined;
     /** The color of the tooltip */
-    variant: TooltipColor;
+    variant?: TooltipColor;
     /** The tooltip title, which can be a custom object or a React node */
     title: TooltipTitleCustom | React.ReactNode;
     /** The size of the tooltip (optional) */

package/dist/esm/index.js

@@ -61873,6 +61873,11 @@ function SeparatorIcon(props) {
     return (jsx("svg", { width: width, height: height, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: 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 (jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: 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 (jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: 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" }) }));
@@ -63122,6 +63127,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;
@@ -63189,9 +63200,29 @@ const DivSwitchContainerSC = styled.div `
     `}
 `;
 
-const FISSwitch = 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 (jsxs(DivLabelSC, { children: [jsxs(LabelTextSC, { children: [textLabel, required && jsx(SpanRequiredSC, { children: "\u00A0*" })] }), iconLabel && (jsx(FISIconButton, { size: "xs", variant: "tertiary-invisible", icon: iconLabel, onClick: onClickIconLabel }))] }));
+};
+FISInputLabel.displayName = "FISInputLabel";
+
+const FISSwitch = forwardRef(({ isOn, disabled = false, size = "md", label, subLabel, onToggle, textLabel = "", required, iconLabel, onClickIconLabel, ...props }, ref) => {
     const labelContent = label || subLabel ? (jsxs(DivSwitchLabelContainerSC, { children: [label && jsx(SpanLabelSC$2, { "$size": size, children: label }), subLabel && jsx(SpanSubLabelSC$1, { "$size": size, children: subLabel })] })) : null;
-    return (jsxs(DivSwitchContainerSC, { ref: ref, "$size": size, "$isOn": isOn, "$disabled": disabled, onClick: () => !disabled && onToggle(), ...props, children: [jsx(DivSwitchTrackSC, { "$isOn": isOn, children: jsx(DivSwitchKnobSC, { "$isOn": isOn, "$size": size }) }), labelContent] }));
+    return (jsxs(DivWrapperSC$6, { ...props, onClick: () => !disabled && onToggle(), children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxs(DivSwitchContainerSC, { ref: ref, "$size": size, "$isOn": isOn, "$disabled": disabled, children: [jsx(DivSwitchTrackSC, { "$isOn": isOn, children: jsx(DivSwitchKnobSC, { "$isOn": isOn, "$size": size }) }), labelContent] })] }));
 });
 // Add display name for better debugging experience
 FISSwitch.displayName = "FISSwitch";
@@ -64210,7 +64241,7 @@ const BreadcrumbEllipsis = () => (jsxs(Fragment, { children: [jsx(DivIconDotSC,
 const FISBreadcrumb = ({ items, className }) => {
     if (items.length === 0)
         return null;
-    return (jsxs(DivContainerSC$9, { className: className, children: [items?.[0]?.icon && (jsxs(Fragment, { children: [jsx(FISIconButton, { size: "xs", icon: items?.[0]?.icon, variant: "tertiary-invisible", onClick: items[0].onClick }), jsx(DivSeparatorIconSC$1, { children: jsx(SeparatorIcon, {}) })] })), items.length > MAX_VISIBLE_ITEMS ? (jsxs(Fragment, { children: [items.slice(1, 2).map((item, index) => (jsxs(React__default.Fragment, { children: [jsx(BreadcrumbItem, { ...item }), jsx(DivSeparatorIconSC$1, { children: jsx(SeparatorIcon, {}) })] }, index))), jsx(BreadcrumbEllipsis, {}), items.slice(-2).map((item, index) => (jsxs(React__default.Fragment, { children: [jsx(BreadcrumbItem, { ...item }), jsx(DivSeparatorIconSC$1, { children: jsx(SeparatorIcon, {}) })] }, `end-${index}`)))] })) : (jsx(Fragment, { children: items.slice(1).map((item, index) => (jsxs(React__default.Fragment, { children: [jsx(BreadcrumbItem, { ...item }), jsx(DivSeparatorIconSC$1, { children: jsx(SeparatorIcon, {}) })] }, index))) }))] }));
+    return (jsxs(DivContainerSC$9, { className: className, children: [jsxs(Fragment, { children: [jsx(FISIconButton, { size: "xs", icon: items?.[0]?.icon ?? jsx(HomeIcon, {}), variant: "tertiary-invisible", onClick: items[0].onClick }), jsx(DivSeparatorIconSC$1, { children: jsx(SeparatorIcon, {}) })] }), items.length > MAX_VISIBLE_ITEMS ? (jsxs(Fragment, { children: [items.slice(1, 2).map((item, index) => (jsxs(React__default.Fragment, { children: [jsx(BreadcrumbItem, { ...item }), jsx(DivSeparatorIconSC$1, { children: jsx(SeparatorIcon, {}) })] }, index))), jsx(BreadcrumbEllipsis, {}), items.slice(-2).map((item, index) => (jsxs(React__default.Fragment, { children: [jsx(BreadcrumbItem, { ...item }), jsx(DivSeparatorIconSC$1, { children: jsx(SeparatorIcon, {}) })] }, `end-${index}`)))] })) : (jsx(Fragment, { children: items.slice(1).map((item, index) => (jsxs(React__default.Fragment, { children: [jsx(BreadcrumbItem, { ...item }), jsx(DivSeparatorIconSC$1, { children: jsx(SeparatorIcon, {}) })] }, index))) }))] }));
 };
 FISBreadcrumb.displayName = "FISBreadcrumb";
 
@@ -65285,26 +65316,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 (jsxs(DivLabelSC, { children: [jsxs(LabelTextSC, { children: [textLabel, required && jsx(SpanRequiredSC, { children: "\u00A0*" })] }), iconLabel && (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.
@@ -66493,13 +66504,13 @@ const FISInputArea = forwardRef((props, ref) => {
                             "input-area-icon": iconSuffix,
                         }) }), iconSuffix && (jsx(DivIconSC$1, { className: classNames({
                             "input-area-lg": size === "lg",
-                        }), children: jsx(FISIconButton, { variant: "tertiary-invisible", size: "sm", icon: iconSuffix, onClick: onClickIconSuffix }) })), jsx(DivResizeSC, { id: "resizeHandle", onMouseDown: handleResize, children: jsx(ResizeIcon, {}) })] }), jsxs(DivBottomSC, { children: [jsx(SpanHintSC$2, { className: classNames({
+                        }), children: jsx(FISIconButton, { variant: "tertiary-invisible", size: "sm", icon: iconSuffix, onClick: onClickIconSuffix }) })), jsx(DivResizeSC, { id: "resizeHandle", onMouseDown: handleResize, children: jsx(ResizeIcon, {}) })] }), (!!message || (showCount && maxLength > 0)) && (jsxs(DivBottomSC, { children: [jsx(SpanHintSC$2, { className: classNames({
                             disabled,
                             negative,
                             positive,
                         }), children: message ? message : "" }), jsx(DivCountSC, { children: showCount && maxLength > 0 && (jsxs("span", { className: classNames("text-area__count", {
                                 negative: getCurrentValue()?.length > maxLength,
-                            }), children: [getCurrentValue()?.length, "/", maxLength] })) })] })] }));
+                            }), children: [getCurrentValue()?.length, "/", maxLength] })) })] }))] }));
 });
 FISInputArea.displayName = "FISInputArea";
 
@@ -72554,28 +72565,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 css `
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-            `;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              `;
     }
     else {
         return css `
-              white-space: pre-wrap;
-            `;
+                white-space: pre-wrap;
+              `;
     }
 }};
+        }
+        .required-asterisk {
+          ${getTheme("Label/XS")};
+          color: #D92D20;
+        }
       }
 
       .right-component-father {
@@ -72609,8 +72628,8 @@ const DivHeaderCellContainerSC = styled.div `
   }
 `;
 
-const FISTableHeaderCell = forwardRef(({ className, label, description, rightComponent, disabled, hasRightDivider = true, hasTruncateLabel = false, onlyIcon = false, textAlign = "left", ...rest }, ref) => {
-    return (jsx(DivHeaderCellContainerSC, { ref: ref, className: classNames("header-cell-container", className), "$textAlign": textAlign, "$disabled": disabled, "$hasTruncateLabel": hasTruncateLabel, "$hasRightDivider": hasRightDivider, "$onlyIcon": onlyIcon, ...rest, children: jsxs("div", { className: "header-cell-content", children: [jsxs("div", { className: "cell-content title", children: [label && jsx("div", { className: "label", children: label }), rightComponent && (jsx("div", { className: "right-component-father", children: rightComponent }))] }), description && (jsx("div", { className: "cell-content", children: jsx("div", { className: "description", children: description }) }))] }) }));
+const FISTableHeaderCell = forwardRef(({ className, label, description, rightComponent, disabled, hasRightDivider = true, hasTruncateLabel = false, onlyIcon = false, textAlign = "left", required, ...rest }, ref) => {
+    return (jsx(DivHeaderCellContainerSC, { ref: ref, className: classNames("header-cell-container", className), "$textAlign": textAlign, "$disabled": disabled, "$hasTruncateLabel": hasTruncateLabel, "$hasRightDivider": hasRightDivider, "$onlyIcon": onlyIcon, ...rest, children: jsxs("div", { className: "header-cell-content", children: [jsxs("div", { className: "cell-content title", children: [label && (jsxs("div", { className: "label-container", children: [jsx("div", { className: "label", children: label }), required && jsx("div", { className: "required-asterisk", children: "*" })] })), rightComponent && (jsx("div", { className: "right-component-father", children: rightComponent }))] }), description && (jsx("div", { className: "cell-content", children: jsx("div", { className: "description", children: description }) }))] }) }));
 });
 FISTableHeaderCell.displayName = "FISTableHeaderCell";
 
@@ -72910,8 +72929,8 @@ const DivIconSC = styled.div `
 }}
 `;
 
-const FISTableCell = forwardRef(({ className, textAlign, variant = COLUMN_VARIANT.PRIMARY, content, description, icon, disabled, hasBorder, onChange, contentWrapText = false, ...rest }, ref) => {
-    return (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 ? (jsxs("div", { className: "single-line-content", children: [icon && (jsx("div", { className: "icon-box", children: jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon }) })), (content || description) && (jsxs("div", { className: "content-box", children: [content && jsx("div", { className: "content", children: content }), description && (jsx("div", { className: "description", children: description }))] }))] })) : (jsxs("div", { className: "left-right-content", children: [(icon || content) && (jsxs("div", { className: "content-box", children: [icon && (jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon })), content && jsx("div", { className: "content", children: content })] })), description && jsx("div", { className: "description", children: description })] })) }));
+const FISTableCell = forwardRef(({ className, textAlign, variant = COLUMN_VARIANT.PRIMARY, content, description, icon, disabled, hasBorder, onChange, contentWrapText = false, tooltip = false, placement = "top", variantTooltip = "primary", ...rest }, ref) => {
+    return (jsx(FISTooltip, { variant: variantTooltip, placement: placement, title: tooltip ? content || "" : undefined, children: 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 ? (jsxs("div", { className: "single-line-content", children: [icon && (jsx("div", { className: "icon-box", children: jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon }) })), (content || description) && (jsxs("div", { className: "content-box", children: [content && jsx("div", { className: "content", children: content }), description && (jsx("div", { className: "description", children: description }))] }))] })) : (jsxs("div", { className: "left-right-content", children: [(icon || content) && (jsxs("div", { className: "content-box", children: [icon && (jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon })), content && jsx("div", { className: "content", children: content })] })), description && jsx("div", { className: "description", children: description })] })) }) }));
 });
 FISTableCell.displayName = "FISTableCell";
 
@@ -74324,48 +74343,6 @@ const FISSplitButton = 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 = 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 &&
-    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;
@@ -74443,7 +74420,7 @@ const InputSC = styled.input `
     }
   }
 `;
-const DivWrapperSC = styled.div `
+const DivWrapperSC$1 = styled.div `
   width: 100%;
   display: flex;
   align-items: center;
@@ -74647,10 +74624,52 @@ const FISSelectItem = forwardRef((props, ref) => {
             iconPrefix: iconPrefix,
             negative: negative,
             activeDropdown: activeDropdown,
-        }), "$size": size, "$activeDropdown": activeDropdown, children: jsxs(DivWrapperSC, { children: [iconPrefix && (jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size, autoComplete: "off" }), iconSuffix && (jsx(DivIconSuffixSC, { "$size": size, "$disabled": disabled, children: iconSuffix }))] }) }));
+        }), "$size": size, "$activeDropdown": activeDropdown, children: jsxs(DivWrapperSC$1, { children: [iconPrefix && (jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size, autoComplete: "off" }), iconSuffix && (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 = 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 &&
+    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";
 }
@@ -74664,7 +74683,9 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
     const inputRef = useRef(null);
     // Expose focus and openDropdown methods via ref
     useImperativeHandle(ref, () => ({
-        ...inputRef.current,
+        focus: () => {
+            inputRef.current?.focus();
+        },
         openDropdown: () => {
             if (!disabled && !isOpen) {
                 setIsOpen(true);
@@ -74845,7 +74866,7 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
         }
         return selectInput;
     };
-    return (jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), renderSelectInput(), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && !hideChip && Array.isArray(value) && value.length > 0 && (jsx(SelectedTagsWrapper, { children: jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { portal: portal, children: jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
+    return (jsxs(DivWrapperSC, { className: className, style: style, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), renderSelectInput(), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && !hideChip && Array.isArray(value) && value.length > 0 && (jsx(SelectedTagsWrapper, { children: jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { portal: portal, children: jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
                         ...styles.popper,
                         width: referenceElement?.offsetWidth,
                         zIndex: 9999,