@xsolla/xui-multi-select 0.216.0 → 0.217.0

package/web/index.js

@@ -35,7 +35,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/MultiSelect.tsx
-var import_react12 = require("react");
+var import_react7 = require("react");
 
 // ../../foundation/primitives-web/src/Box.tsx
 var import_react2 = __toESM(require("react"));
@@ -402,656 +402,19 @@ var Icon = ({
 var isWeb = true;
 
 // src/MultiSelect.tsx
-var import_xui_core4 = require("@xsolla/xui-core");
+var import_xui_core3 = require("@xsolla/xui-core");
 var import_xui_icons_base2 = require("@xsolla/xui-icons-base");
 
 // src/MultiSelectControl.tsx
-var import_react9 = require("react");
-var import_xui_core3 = require("@xsolla/xui-core");
+var import_react4 = require("react");
+var import_xui_core2 = require("@xsolla/xui-core");
 var import_xui_icons_base = require("@xsolla/xui-icons-base");
 
 // src/useMultiSelectControl.tsx
-var import_react8 = require("react");
-
-// ../tag/dist/web/index.mjs
-var import_react6 = __toESM(require("react"), 1);
-var import_styled_components5 = __toESM(require("styled-components"), 1);
-var import_react7 = __toESM(require("react"), 1);
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var import_styled_components6 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var import_styled_components7 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react3 = require("react");
+var import_xui_tag = require("@xsolla/xui-tag");
 var import_xui_core = require("@xsolla/xui-core");
-
-// ../../foundation/icons/dist/web/index.mjs
-var import_react5 = __toESM(require("react"), 1);
-var import_styled_components4 = __toESM(require("styled-components"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
-
-// ../../../node_modules/lucide-react/dist/esm/createLucideIcon.js
-var import_react4 = require("react");
-
-// ../../../node_modules/lucide-react/dist/esm/shared/src/utils.js
-var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-var mergeClasses = (...classes) => classes.filter((className, index4, array) => {
-  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index4;
-}).join(" ").trim();
-
-// ../../../node_modules/lucide-react/dist/esm/Icon.js
-var import_react3 = require("react");
-
-// ../../../node_modules/lucide-react/dist/esm/defaultAttributes.js
-var defaultAttributes = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: 2,
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-};
-
-// ../../../node_modules/lucide-react/dist/esm/Icon.js
-var Icon2 = (0, import_react3.forwardRef)(
-  ({
-    color = "currentColor",
-    size = 24,
-    strokeWidth = 2,
-    absoluteStrokeWidth,
-    className = "",
-    children,
-    iconNode,
-    ...rest
-  }, ref) => {
-    return (0, import_react3.createElement)(
-      "svg",
-      {
-        ref,
-        ...defaultAttributes,
-        width: size,
-        height: size,
-        stroke: color,
-        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
-        className: mergeClasses("lucide", className),
-        ...rest
-      },
-      [
-        ...iconNode.map(([tag, attrs]) => (0, import_react3.createElement)(tag, attrs)),
-        ...Array.isArray(children) ? children : [children]
-      ]
-    );
-  }
-);
-
-// ../../../node_modules/lucide-react/dist/esm/createLucideIcon.js
-var createLucideIcon = (iconName, iconNode) => {
-  const Component = (0, import_react4.forwardRef)(
-    ({ className, ...props }, ref) => (0, import_react4.createElement)(Icon2, {
-      ref,
-      iconNode,
-      className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
-      ...props
-    })
-  );
-  Component.displayName = `${iconName}`;
-  return Component;
-};
-
-// ../../../node_modules/lucide-react/dist/esm/icons/x.js
-var X = createLucideIcon("X", [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-]);
-
-// ../../foundation/icons/dist/web/index.mjs
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function memoize2(fn) {
-  var cache = {};
-  return function(arg) {
-    if (cache[arg] === void 0) cache[arg] = fn(arg);
-    return cache[arg];
-  };
-}
-var memoize_esm_default2 = memoize2;
-var reactPropsRegex2 = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
-var index2 = memoize_esm_default2(
-  function(prop) {
-    return reactPropsRegex2.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
-  }
-  /* Z+1 */
-);
-var is_prop_valid_esm_default2 = index2;
-var ADDITIONAL_BLOCKED_PROPS2 = /* @__PURE__ */ new Set([
-  // RN-only event handlers (pass isPropValid's on* pattern)
-  "onPress",
-  "onChangeText",
-  "onLayout",
-  "onMoveShouldSetResponder",
-  "onResponderGrant",
-  "onResponderMove",
-  "onResponderRelease",
-  "onResponderTerminate",
-  // SVG attributes that pass isPropValid
-  "strokeWidth",
-  // CSS properties that pass isPropValid but are used as component props
-  "overflow",
-  "opacity",
-  "cursor",
-  "fontSize",
-  "fontWeight",
-  "fontFamily",
-  "textDecoration",
-  // Cross-platform layout prop that Text consumes as CSS, never as an
-  // attribute. Pinned explicitly because it is now spread into the styled
-  // component rather than destructured away before it can reach the DOM.
-  "numberOfLines"
-]);
-function shouldForwardProp2(key) {
-  if (ADDITIONAL_BLOCKED_PROPS2.has(key)) return false;
-  return is_prop_valid_esm_default2(key);
-}
-function createFilteredElement2(defaultTag) {
-  const Component = import_react5.default.forwardRef(
-    ({ children, elementType, ...props }, ref) => {
-      const Tag2 = elementType || defaultTag;
-      const htmlProps = {};
-      for (const key of Object.keys(props)) {
-        if (shouldForwardProp2(key)) {
-          htmlProps[key] = props[key];
-        }
-      }
-      return import_react5.default.createElement(
-        Tag2,
-        { ref, ...htmlProps },
-        children
-      );
-    }
-  );
-  Component.displayName = `Filtered(${defaultTag})`;
-  return Component;
-}
-var FilteredDiv3 = createFilteredElement2("div");
-var StyledIcon2 = (0, import_styled_components4.default)(FilteredDiv3)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
-  height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
-  color: ${(props) => props.color || "currentColor"};
-
-  /* Icons paint themselves — each icon's own SVG sets its fill/stroke
-     (icons-base via inline "fill: currentColor", Lucide via "fill"/"stroke"
-     attributes). Do not add fill/stroke here: it re-strokes fill-based icons
-     and thickens the glyph. See FEP-877. */
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-`;
-var Icon3 = ({
-  children,
-  testID,
-  "data-testid": dataTestId,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledIcon2, { "data-testid": dataTestId || testID, ...props, children });
-};
-var X2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon3, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(X, { size: "100%" }) });
-
-// ../tag/dist/web/index.mjs
-var import_jsx_runtime9 = require("react/jsx-runtime");
-function memoize3(fn) {
-  var cache = {};
-  return function(arg) {
-    if (cache[arg] === void 0) cache[arg] = fn(arg);
-    return cache[arg];
-  };
-}
-var memoize_esm_default3 = memoize3;
-var reactPropsRegex3 = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
-var index3 = memoize_esm_default3(
-  function(prop) {
-    return reactPropsRegex3.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
-  }
-  /* Z+1 */
-);
-var is_prop_valid_esm_default3 = index3;
-var ADDITIONAL_BLOCKED_PROPS3 = /* @__PURE__ */ new Set([
-  // RN-only event handlers (pass isPropValid's on* pattern)
-  "onPress",
-  "onChangeText",
-  "onLayout",
-  "onMoveShouldSetResponder",
-  "onResponderGrant",
-  "onResponderMove",
-  "onResponderRelease",
-  "onResponderTerminate",
-  // SVG attributes that pass isPropValid
-  "strokeWidth",
-  // CSS properties that pass isPropValid but are used as component props
-  "overflow",
-  "opacity",
-  "cursor",
-  "fontSize",
-  "fontWeight",
-  "fontFamily",
-  "textDecoration",
-  // Cross-platform layout prop that Text consumes as CSS, never as an
-  // attribute. Pinned explicitly because it is now spread into the styled
-  // component rather than destructured away before it can reach the DOM.
-  "numberOfLines"
-]);
-function shouldForwardProp3(key) {
-  if (ADDITIONAL_BLOCKED_PROPS3.has(key)) return false;
-  return is_prop_valid_esm_default3(key);
-}
-function createFilteredElement3(defaultTag) {
-  const Component = import_react7.default.forwardRef(
-    ({ children, elementType, ...props }, ref) => {
-      const Tag2 = elementType || defaultTag;
-      const htmlProps = {};
-      for (const key of Object.keys(props)) {
-        if (shouldForwardProp3(key)) {
-          htmlProps[key] = props[key];
-        }
-      }
-      return import_react7.default.createElement(
-        Tag2,
-        { ref, ...htmlProps },
-        children
-      );
-    }
-  );
-  Component.displayName = `Filtered(${defaultTag})`;
-  return Component;
-}
-var FilteredDiv4 = createFilteredElement3("div");
-var StyledBox2 = (0, import_styled_components5.default)(FilteredDiv4)`
-  display: flex;
-  box-sizing: border-box;
-  background-color: ${(props) => props.backgroundColor || "transparent"};
-  border-color: ${(props) => props.borderColor || "transparent"};
-  border-width: ${(props) => typeof props.borderWidth === "number" ? `${props.borderWidth}px` : props.borderWidth || 0};
-
-  ${(props) => props.borderBottomWidth !== void 0 && `
-    border-bottom-width: ${typeof props.borderBottomWidth === "number" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};
-    border-bottom-color: ${props.borderBottomColor || props.borderColor || "transparent"};
-    border-bottom-style: solid;
-  `}
-  ${(props) => props.borderTopWidth !== void 0 && `
-    border-top-width: ${typeof props.borderTopWidth === "number" ? `${props.borderTopWidth}px` : props.borderTopWidth};
-    border-top-color: ${props.borderTopColor || props.borderColor || "transparent"};
-    border-top-style: solid;
-  `}
-  ${(props) => props.borderLeftWidth !== void 0 && `
-    border-left-width: ${typeof props.borderLeftWidth === "number" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};
-    border-left-color: ${props.borderLeftColor || props.borderColor || "transparent"};
-    border-left-style: solid;
-  `}
-  ${(props) => props.borderRightWidth !== void 0 && `
-    border-right-width: ${typeof props.borderRightWidth === "number" ? `${props.borderRightWidth}px` : props.borderRightWidth};
-    border-right-color: ${props.borderRightColor || props.borderColor || "transparent"};
-    border-right-style: solid;
-  `}
-
-  border-style: ${(props) => props.borderStyle || (props.borderWidth || props.borderBottomWidth || props.borderTopWidth || props.borderLeftWidth || props.borderRightWidth ? "solid" : "none")};
-  border-radius: ${(props) => typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius || 0};
-  height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height || "auto"};
-  width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
-  min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
-  min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
-  max-width: ${(props) => typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth || "none"};
-  max-height: ${(props) => typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight || "none"};
-
-  padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
-  ${(props) => props.paddingHorizontal && `
-    padding-left: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
-    padding-right: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
-  `}
-  ${(props) => props.paddingVertical && `
-    padding-top: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
-    padding-bottom: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
-  `}
-  ${(props) => props.paddingTop !== void 0 && `padding-top: ${typeof props.paddingTop === "number" ? `${props.paddingTop}px` : props.paddingTop};`}
-  ${(props) => props.paddingBottom !== void 0 && `padding-bottom: ${typeof props.paddingBottom === "number" ? `${props.paddingBottom}px` : props.paddingBottom};`}
-  ${(props) => props.paddingLeft !== void 0 && `padding-left: ${typeof props.paddingLeft === "number" ? `${props.paddingLeft}px` : props.paddingLeft};`}
-  ${(props) => props.paddingRight !== void 0 && `padding-right: ${typeof props.paddingRight === "number" ? `${props.paddingRight}px` : props.paddingRight};`}
-
-  margin: ${(props) => typeof props.margin === "number" ? `${props.margin}px` : props.margin || 0};
-  ${(props) => props.marginTop !== void 0 && `margin-top: ${typeof props.marginTop === "number" ? `${props.marginTop}px` : props.marginTop};`}
-  ${(props) => props.marginBottom !== void 0 && `margin-bottom: ${typeof props.marginBottom === "number" ? `${props.marginBottom}px` : props.marginBottom};`}
-  ${(props) => props.marginLeft !== void 0 && `margin-left: ${typeof props.marginLeft === "number" ? `${props.marginLeft}px` : props.marginLeft};`}
-  ${(props) => props.marginRight !== void 0 && `margin-right: ${typeof props.marginRight === "number" ? `${props.marginRight}px` : props.marginRight};`}
-
-  flex-direction: ${(props) => props.flexDirection || "column"};
-  flex-wrap: ${(props) => props.flexWrap || "nowrap"};
-  align-items: ${(props) => props.alignItems || "stretch"};
-  justify-content: ${(props) => props.justifyContent || "flex-start"};
-  cursor: ${(props) => props.cursor ? props.cursor : props.onClick || props.onPress ? "pointer" : "inherit"};
-  position: ${(props) => props.position || "static"};
-  top: ${(props) => typeof props.top === "number" ? `${props.top}px` : props.top};
-  bottom: ${(props) => typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom};
-  left: ${(props) => typeof props.left === "number" ? `${props.left}px` : props.left};
-  right: ${(props) => typeof props.right === "number" ? `${props.right}px` : props.right};
-  flex: ${(props) => props.flex};
-  flex-shrink: ${(props) => props.flexShrink ?? 1};
-  gap: ${(props) => typeof props.gap === "number" ? `${props.gap}px` : props.gap || 0};
-  align-self: ${(props) => props.alignSelf || "auto"};
-  /* Only emit overflow-x/y when explicitly set. Defaulting them to
-     visible after overflow would override the shorthand and break
-     clipping (e.g. OtherCard bottom-right promo image). */
-  overflow: ${(props) => props.overflow || "visible"};
-  ${(props) => props.overflowX != null ? `overflow-x: ${props.overflowX};` : ""}
-  ${(props) => props.overflowY != null ? `overflow-y: ${props.overflowY};` : ""}
-  z-index: ${(props) => props.zIndex};
-  opacity: ${(props) => props.opacity != null ? props.opacity : props.disabled ? 0.5 : 1};
-  pointer-events: ${(props) => props.disabled ? "none" : "auto"};
-
-  /* \`background\` is emitted before \`background-color\` so a caller passing
-     both still gets backgroundColor as the winner. Use the shorthand for a
-     layered fill (e.g. an overlay tint over a resting surface colour), which
-     a single background-color cannot express. */
-  &:hover {
-    ${(props) => props.hoverStyle?.background && `background: ${props.hoverStyle.background};`}
-    ${(props) => props.hoverStyle?.backgroundColor && `background-color: ${props.hoverStyle.backgroundColor};`}
-    ${(props) => props.hoverStyle?.borderColor && `border-color: ${props.hoverStyle.borderColor};`}
-  }
-
-  &:active {
-    ${(props) => props.pressStyle?.background && `background: ${props.pressStyle.background};`}
-    ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
-  }
-`;
-var Box2 = import_react6.default.forwardRef(
-  ({
-    children,
-    onPress,
-    onKeyDown,
-    onKeyUp,
-    role,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-current": ariaCurrent,
-    "aria-disabled": ariaDisabled,
-    "aria-live": ariaLive,
-    "aria-busy": ariaBusy,
-    "aria-describedby": ariaDescribedBy,
-    "aria-expanded": ariaExpanded,
-    "aria-haspopup": ariaHasPopup,
-    "aria-pressed": ariaPressed,
-    "aria-controls": ariaControls,
-    tabIndex,
-    as,
-    src,
-    alt,
-    onError,
-    onLoad,
-    type,
-    disabled,
-    id,
-    testID,
-    "data-testid": dataTestId,
-    ...props
-  }, ref) => {
-    if (as === "img" && src) {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        "img",
-        {
-          src,
-          alt: alt || "",
-          onError,
-          onLoad,
-          "data-testid": dataTestId || testID,
-          style: {
-            display: "block",
-            objectFit: "cover",
-            width: typeof props.width === "number" ? `${props.width}px` : props.width,
-            height: typeof props.height === "number" ? `${props.height}px` : props.height,
-            borderRadius: typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius,
-            position: props.position,
-            top: typeof props.top === "number" ? `${props.top}px` : props.top,
-            left: typeof props.left === "number" ? `${props.left}px` : props.left,
-            right: typeof props.right === "number" ? `${props.right}px` : props.right,
-            bottom: typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom,
-            ...props.style
-          }
-        }
-      );
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      StyledBox2,
-      {
-        ref,
-        elementType: as,
-        id,
-        type: as === "button" ? type || "button" : void 0,
-        disabled: as === "button" ? disabled : void 0,
-        onClick: onPress,
-        onKeyDown,
-        onKeyUp,
-        role,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-current": ariaCurrent,
-        "aria-disabled": ariaDisabled,
-        "aria-busy": ariaBusy,
-        "aria-describedby": ariaDescribedBy,
-        "aria-expanded": ariaExpanded,
-        "aria-haspopup": ariaHasPopup,
-        "aria-pressed": ariaPressed,
-        "aria-controls": ariaControls,
-        "aria-live": ariaLive,
-        tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
-        "data-testid": dataTestId || testID,
-        ...props,
-        children
-      }
-    );
-  }
-);
-Box2.displayName = "Box";
-var truncationStyles2 = (numberOfLines) => {
-  if (!numberOfLines || numberOfLines < 1) return "";
-  if (numberOfLines === 1) {
-    return `
-      display: block;
-      max-width: 100%;
-      min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `;
-  }
-  return `
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: ${numberOfLines};
-    line-clamp: ${numberOfLines};
-    max-width: 100%;
-    min-width: 0;
-    overflow: hidden;
-  `;
-};
-var FilteredSpan2 = createFilteredElement3("span");
-var StyledText2 = (0, import_styled_components6.default)(FilteredSpan2)`
-  color: ${(props) => props.color || "inherit"};
-  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
-  font-weight: ${(props) => props.fontWeight || "normal"};
-  font-family: ${(props) => props.fontFamily || '"Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'};
-  line-height: ${(props) => typeof props.lineHeight === "number" ? `${props.lineHeight}px` : props.lineHeight || "inherit"};
-  white-space: ${(props) => props.whiteSpace || "normal"};
-  text-align: ${(props) => props.textAlign || "inherit"};
-  text-decoration: ${(props) => props.textDecoration || "none"};
-
-  /* Keep last: single-line truncation has to win over white-space above. */
-  ${(props) => truncationStyles2(props.numberOfLines)}
-`;
-var Text2 = ({
-  style,
-  className,
-  id,
-  role,
-  testID,
-  "data-testid": dataTestId,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    StyledText2,
-    {
-      ...props,
-      style,
-      className,
-      id,
-      role,
-      "data-testid": dataTestId || testID
-    }
-  );
-};
-var FilteredDiv22 = createFilteredElement3("div");
-var StyledIcon3 = (0, import_styled_components7.default)(FilteredDiv22)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
-  height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
-  color: ${(props) => props.color || "currentColor"};
-
-  /* Icons paint themselves — each icon's own SVG sets its fill/stroke
-     (icons-base via inline "fill: currentColor", Lucide via "fill"/"stroke"
-     attributes). Do not add fill/stroke here: it re-strokes fill-based icons
-     and thickens the glyph. See FEP-877. */
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-`;
-var Icon4 = ({
-  children,
-  testID,
-  "data-testid": dataTestId,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledIcon3, { "data-testid": dataTestId || testID, ...props, children });
-};
-var Tag = ({
-  size = "md",
-  tone = "primary",
-  type = "solid",
-  children,
-  iconLeft,
-  iconRight,
-  onRemove,
-  testID,
-  themeMode,
-  themeProductContext
-}) => {
-  const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
-  const sizeStyles = theme.sizing.tag(size);
-  const resolveColors = () => {
-    const isOutlined = type === "outlined";
-    switch (tone) {
-      case "primary":
-        return {
-          bg: isOutlined ? "transparent" : theme.colors.background.primary,
-          text: theme.colors.content.primary,
-          border: theme.colors.border.secondary
-        };
-      case "brand":
-        return {
-          bg: isOutlined ? "transparent" : theme.colors.background.brand.primary,
-          text: isOutlined ? theme.colors.content.brand.primary : theme.colors.content.on.brand,
-          border: theme.colors.border.brand
-        };
-      case "brandExtra":
-        return {
-          bg: isOutlined ? "transparent" : theme.colors.background.brandExtra.primary,
-          text: isOutlined ? theme.colors.content.brandExtra.primary : theme.colors.content.on.brandExtra,
-          border: theme.colors.border.brandExtra
-        };
-      case "success":
-        return {
-          bg: isOutlined ? "transparent" : theme.colors.background.success.primary,
-          text: isOutlined ? theme.colors.content.success.primary : theme.colors.content.on.success,
-          border: theme.colors.border.success
-        };
-      case "warning":
-        return {
-          bg: isOutlined ? "transparent" : theme.colors.background.warning.primary,
-          text: isOutlined ? theme.colors.content.warning.primary : theme.colors.content.on.warning,
-          border: theme.colors.border.warning
-        };
-      case "alert":
-        return {
-          bg: isOutlined ? "transparent" : theme.colors.background.alert.primary,
-          text: isOutlined ? theme.colors.content.alert.primary : theme.colors.content.on.alert,
-          border: theme.colors.border.alert
-        };
-      case "neutral":
-        return {
-          bg: isOutlined ? "transparent" : theme.colors.background.neutral.primary,
-          text: isOutlined ? theme.colors.content.neutral.primary : theme.colors.content.on.neutral,
-          border: theme.colors.border.neutral
-        };
-      default:
-        return {
-          bg: isOutlined ? "transparent" : theme.colors.background.primary,
-          text: theme.colors.content.primary,
-          border: theme.colors.border.secondary
-        };
-    }
-  };
-  const { bg, text, border } = resolveColors();
-  const isIconOnly = !children && (!!iconLeft || !!iconRight);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-    Box2,
-    {
-      testID,
-      backgroundColor: bg,
-      borderRadius: sizeStyles.radius,
-      height: sizeStyles.height,
-      width: isIconOnly ? sizeStyles.height : void 0,
-      paddingHorizontal: isIconOnly ? 0 : sizeStyles.padding,
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: sizeStyles.gap,
-      borderWidth: sizeStyles.borderWidth,
-      borderColor: border,
-      borderStyle: "solid",
-      style: {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap"
-      },
-      children: [
-        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon4, { size: sizeStyles.iconSize, color: text, children: iconLeft }),
-        children && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          Text2,
-          {
-            color: text,
-            fontSize: sizeStyles.fontSize,
-            fontWeight: "500",
-            whiteSpace: "nowrap",
-            style: {
-              overflow: "hidden",
-              textOverflow: "ellipsis"
-            },
-            children
-          }
-        ),
-        iconRight && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon4, { size: sizeStyles.iconSize, color: text, children: iconRight }),
-        onRemove && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box2, { onPress: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(X2, { size: sizeStyles.iconSize, color: text }) })
-      ]
-    }
-  );
-};
-
-// src/useMultiSelectControl.tsx
-var import_xui_core2 = require("@xsolla/xui-core");
-var import_jsx_runtime10 = require("react/jsx-runtime");
 var COUNT_ITEM_VALUE = "count-item";
 var useMultiSelectControl = ({
   variant,
@@ -1067,16 +430,16 @@ var useMultiSelectControl = ({
   themeMode,
   themeProductContext
 }) => {
-  const { theme } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
-  const displayStateRef = (0, import_react8.useRef)(0 /* Placeholder */);
-  const savedWidthsRef = (0, import_react8.useRef)(null);
-  const itemsRef = (0, import_react8.useRef)(null);
-  const [itemsWidth, setItemsWidth] = (0, import_react8.useState)(0);
-  const [selectedContent, setSelectedContent] = (0, import_react8.useState)(
+  const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
+  const displayStateRef = (0, import_react3.useRef)(0 /* Placeholder */);
+  const savedWidthsRef = (0, import_react3.useRef)(null);
+  const itemsRef = (0, import_react3.useRef)(null);
+  const [itemsWidth, setItemsWidth] = (0, import_react3.useState)(0);
+  const [selectedContent, setSelectedContent] = (0, import_react3.useState)(
     null
   );
   const isPlaceholder = !selectedItems || selectedItems.length === 0;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!containerRef.current) return;
     let rafId = null;
     const syncItemsWidth = () => {
@@ -1096,12 +459,13 @@ var useMultiSelectControl = ({
       resizeObserver.disconnect();
     };
   }, [containerRef]);
-  const widthsDependencies = (0, import_react8.useMemo)(
+  const widthsDependencies = (0, import_react3.useMemo)(
     () => ({
       stateList: stateList.map((item) => item.value),
       variant,
       size,
-      removeTagsButtons
+      removeTagsButtons,
+      lockedList: stateList.filter((item) => item.removable === false).map((item) => item.value)
     }),
     [stateList, variant, size, removeTagsButtons]
   );
@@ -1114,16 +478,23 @@ var useMultiSelectControl = ({
       return true;
     if (prev.stateList.length !== widthsDependencies.stateList.length)
       return true;
+    if (prev.lockedList.length !== widthsDependencies.lockedList.length)
+      return true;
     let i = 0;
     for (const v of prev.stateList) {
       if (v !== widthsDependencies.stateList[i]) return true;
       i++;
     }
+    let j = 0;
+    for (const v of prev.lockedList) {
+      if (v !== widthsDependencies.lockedList[j]) return true;
+      j++;
+    }
     return false;
   };
   const setPlaceholder = () => {
     setSelectedContent(
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         Text,
         {
           color: theme.colors.control.input.placeholder,
@@ -1170,28 +541,30 @@ var useMultiSelectControl = ({
       const countText = displayStateRef.current === 1 /* PreRender */ ? `+${itemsList.length}` : `+${itemsList.length - displayedItems.length}`;
       displayedItems.push({ value: COUNT_ITEM_VALUE, label: countText });
     }
-    const content = displayedItems.map((item, index4) => {
+    const content = displayedItems.map((item, index2) => {
       const isCount = item.value === COUNT_ITEM_VALUE;
-      const isReducable = index4 === 0 && displayStateRef.current === 3 /* Render */ && displayedItemsCount === 0 || flexible;
+      const isLocked = !isCount && item.removable === false;
+      const canRemove = !isCount && !isLocked;
+      const isReducable = index2 === 0 && displayStateRef.current === 3 /* Render */ && displayedItemsCount === 0 || flexible;
       if (variant === "tag") {
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Box,
           {
-            onPress: !isCount ? (e) => {
+            onPress: canRemove ? (e) => {
               e.stopPropagation();
               if (!disabled) removeValue(item.value, e);
             } : void 0,
             style: {
               minWidth: isReducable ? 0 : "fit-content",
               opacity: disabled ? 0.5 : 1,
-              cursor: disabled || isCount ? "not-allowed" : "pointer"
+              cursor: isLocked ? "default" : disabled || isCount ? "not-allowed" : "pointer"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              Tag,
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_xui_tag.Tag,
               {
                 size,
                 tone: "primary",
-                onRemove: removeTagsButtons && !isCount ? (e) => {
+                onRemove: removeTagsButtons && canRemove ? (e) => {
                   e?.stopPropagation();
                   if (!disabled) removeValue(item.value, e);
                 } : void 0,
@@ -1203,8 +576,8 @@ var useMultiSelectControl = ({
         );
       }
       const isCountItem = hasHidden;
-      const needsComma = index4 < displayedItems.length - 2 || index4 < displayedItems.length - 1 && !isCountItem;
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      const needsComma = index2 < displayedItems.length - 2 || index2 < displayedItems.length - 1 && !isCountItem;
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         Text,
         {
           color: theme.colors.content.primary,
@@ -1239,11 +612,11 @@ var useMultiSelectControl = ({
     const countItemWidth = countEl.getBoundingClientRect().width;
     const columnGap = parseInt(getComputedStyle(itemsRef.current).columnGap || "0", 10) || 0;
     const tagsWidths = {};
-    let index4 = 0;
+    let index2 = 0;
     for (const el of allItems) {
-      const key = index4 < allItems.length - 1 ? stateList[index4].value : COUNT_ITEM_VALUE;
+      const key = index2 < allItems.length - 1 ? stateList[index2].value : COUNT_ITEM_VALUE;
       tagsWidths[key] = el.getBoundingClientRect().width;
-      index4++;
+      index2++;
     }
     savedWidthsRef.current = {
       tagsWidths,
@@ -1254,7 +627,7 @@ var useMultiSelectControl = ({
     displayStateRef.current = 3 /* Render */;
     setItemsRender();
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (isPlaceholder) {
       displayStateRef.current = 0 /* Placeholder */;
       setPlaceholder();
@@ -1288,7 +661,7 @@ var useMultiSelectControl = ({
     widthsDependencies,
     stateList
   ]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (displayStateRef.current !== 2 /* Calculation */) return;
     const rafId = requestAnimationFrame(() => {
       if (displayStateRef.current === 2 /* Calculation */) {
@@ -1306,8 +679,8 @@ var useMultiSelectControl = ({
 };
 
 // src/MultiSelectControl.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var MultiSelectControl = (0, import_react9.forwardRef)(
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var MultiSelectControl = (0, import_react4.forwardRef)(
   ({
     variant = "tag",
     flexible = true,
@@ -1331,12 +704,12 @@ var MultiSelectControl = (0, import_react9.forwardRef)(
     themeMode,
     themeProductContext
   }, ref) => {
-    const { theme } = (0, import_xui_core3.useResolvedTheme)({ themeMode, themeProductContext });
+    const { theme } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
     const sizeStyles = theme.sizing.input(size);
     const inputColors = theme.colors.control.input;
     const state = externalState || (disabled ? "disable" : "default");
     const isDisable = state === "disable" || disabled;
-    const containerRef = (0, import_react9.useRef)(null);
+    const containerRef = (0, import_react4.useRef)(null);
     const { itemsRef, selectedContent, isCalculating } = useMultiSelectControl({
       variant,
       flexible,
@@ -1366,7 +739,7 @@ var MultiSelectControl = (0, import_react9.forwardRef)(
       borderColor = inputColors.borderHover;
     }
     const iconColor = isDisable ? inputColors.textDisable : inputColors.placeholder;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       Box,
       {
         ref,
@@ -1394,7 +767,7 @@ var MultiSelectControl = (0, import_react9.forwardRef)(
           borderColor: inputColors.borderHover
         } : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             Box,
             {
               ref: containerRef,
@@ -1404,8 +777,8 @@ var MultiSelectControl = (0, import_react9.forwardRef)(
               gap: 8,
               style: { minWidth: 0 },
               children: [
-                iconLeft && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { size: sizeStyles.iconSize, color: iconColor, variant: "line", children: iconLeft }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                iconLeft && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: sizeStyles.iconSize, color: iconColor, variant: "line", children: iconLeft }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   Box,
                   {
                     ref: itemsRef,
@@ -1421,8 +794,8 @@ var MultiSelectControl = (0, import_react9.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
-            extraClear && selectedItems.length > 0 && !isDisable && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
+            extraClear && selectedItems.length > 0 && !isDisable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               Box,
               {
                 onPress: (e) => {
@@ -1430,11 +803,11 @@ var MultiSelectControl = (0, import_react9.forwardRef)(
                   removeAllValues();
                 },
                 style: { cursor: "pointer" },
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_xui_icons_base.Remove, { size: 18, color: iconColor, variant: "line" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_xui_icons_base.Remove, { size: 18, color: iconColor, variant: "line" })
               }
             ),
-            isError && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_xui_icons_base.ExclamationMarkCr, { size: 18, color: theme.colors.content.alert.primary }),
-            iconRight ? iconRight : isOpen ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_xui_icons_base.ChevronUp, { size: 18, color: iconColor, variant: "line" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_xui_icons_base.ChevronDown, { size: 18, color: iconColor, variant: "line" })
+            isError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_xui_icons_base.ExclamationMarkCr, { size: 18, color: theme.colors.content.alert.primary }),
+            iconRight ? iconRight : isOpen ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_xui_icons_base.ChevronUp, { size: 18, color: iconColor, variant: "line" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_xui_icons_base.ChevronDown, { size: 18, color: iconColor, variant: "line" })
           ] })
         ]
       }
@@ -1444,23 +817,28 @@ var MultiSelectControl = (0, import_react9.forwardRef)(
 MultiSelectControl.displayName = "MultiSelectControl";
 
 // src/useMultiSelect.ts
-var import_react10 = require("react");
+var import_react5 = require("react");
 var initialState = {
   values: [],
   selectedItems: [],
   isOpen: false
 };
+var isLockedOption = (option) => option.removable === false;
 var useMultiSelect = ({
   options,
   value = [],
   onChange
 }) => {
-  const [state, setState] = (0, import_react10.useState)(initialState);
-  const optionsRef = (0, import_react10.useRef)(options);
-  (0, import_react10.useEffect)(() => {
+  const [state, setState] = (0, import_react5.useState)(initialState);
+  const optionsRef = (0, import_react5.useRef)(options);
+  const valuesRef = (0, import_react5.useRef)(value);
+  (0, import_react5.useEffect)(() => {
     optionsRef.current = options;
   }, [options]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
+    valuesRef.current = state.values;
+  }, [state.values]);
+  (0, import_react5.useEffect)(() => {
     const selectedItems = options.filter((opt) => value.includes(opt.value));
     setState((prevState) => ({
       ...prevState,
@@ -1468,9 +846,15 @@ var useMultiSelect = ({
       selectedItems
     }));
   }, [options, value]);
-  const onChoose = (0, import_react10.useCallback)(
+  const getLockedSelectedValues = () => optionsRef.current.filter(
+    (opt) => isLockedOption(opt) && valuesRef.current.includes(opt.value)
+  ).map((opt) => opt.value);
+  const onChoose = (0, import_react5.useCallback)(
     (selectedIds) => {
-      const newValues = optionsRef.current.filter((opt) => selectedIds.includes(String(opt.value))).map((opt) => opt.value);
+      const lockedValues = getLockedSelectedValues();
+      const newValues = optionsRef.current.filter(
+        (opt) => selectedIds.includes(String(opt.value)) || lockedValues.includes(opt.value)
+      ).map((opt) => opt.value);
       const newSelectedItems = optionsRef.current.filter(
         (opt) => newValues.includes(opt.value)
       );
@@ -1483,9 +867,11 @@ var useMultiSelect = ({
     },
     [onChange]
   );
-  const onRemove = (0, import_react10.useCallback)(
+  const onRemove = (0, import_react5.useCallback)(
     (value2, event) => {
       event?.stopPropagation();
+      const option = optionsRef.current.find((opt) => opt.value === value2);
+      if (option && isLockedOption(option)) return;
       setState((prev) => {
         const newValues = prev.values.filter((v) => v !== value2);
         const newSelectedItems = optionsRef.current.filter(
@@ -1501,21 +887,25 @@ var useMultiSelect = ({
     },
     [onChange]
   );
-  const onRemoveAll = (0, import_react10.useCallback)(() => {
+  const onRemoveAll = (0, import_react5.useCallback)(() => {
+    const keptValues = getLockedSelectedValues();
+    const keptItems = optionsRef.current.filter(
+      (opt) => keptValues.includes(opt.value)
+    );
     setState((prevState) => ({
       ...prevState,
-      values: [],
-      selectedItems: []
+      values: keptValues,
+      selectedItems: keptItems
     }));
-    onChange?.([]);
+    onChange?.(keptValues);
   }, [onChange]);
-  const onSelectClick = (0, import_react10.useCallback)(() => {
+  const onSelectClick = (0, import_react5.useCallback)(() => {
     setState((prevState) => ({
       ...prevState,
       isOpen: !prevState.isOpen
     }));
   }, []);
-  const onClose = (0, import_react10.useCallback)(() => {
+  const onClose = (0, import_react5.useCallback)(() => {
     setState((prevState) => ({
       ...prevState,
       isOpen: false
@@ -1535,19 +925,21 @@ var useMultiSelect = ({
 };
 
 // src/Portal.web.tsx
-var import_react11 = require("react");
+var import_react6 = require("react");
 var import_react_dom = require("react-dom");
 var Portal = ({ children }) => {
-  const [mountNode, setMountNode] = (0, import_react11.useState)(null);
-  (0, import_react11.useEffect)(() => setMountNode(document.body), []);
+  const [mountNode, setMountNode] = (0, import_react6.useState)(null);
+  (0, import_react6.useEffect)(() => setMountNode(document.body), []);
   if (!mountNode) return null;
   return (0, import_react_dom.createPortal)(children, mountNode);
 };
 
 // src/MultiSelect.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var EXTERNAL_MENU_MIN_WIDTH_DEFAULT = 540;
-var MultiSelect = (0, import_react12.forwardRef)(
+var SEARCH_ROW_HEIGHT = 60;
+var SELECT_ALL_ROW_HEIGHT = 37;
+var MultiSelect = (0, import_react7.forwardRef)(
   ({
     options,
     errorMessage,
@@ -1573,19 +965,22 @@ var MultiSelect = (0, import_react12.forwardRef)(
     searchable = false,
     searchPlaceholder = "Search",
     noOptionsMessage = "No results",
+    selectAll = false,
+    selectAllLabel = "Select all",
+    deselectAllLabel = "Deselect all",
     testID,
     themeMode,
     themeProductContext
   }, ref) => {
-    const { theme } = (0, import_xui_core4.useResolvedTheme)({ themeMode, themeProductContext });
-    const modalId = (0, import_xui_core4.useModalId)();
-    const overlayLayer = (0, import_xui_core4.useOverlayLayer)();
-    const controlRef = (0, import_react12.useRef)(null);
-    const menuRef = (0, import_react12.useRef)(null);
-    const containerRef = (0, import_react12.useRef)(null);
-    const searchInputRef = (0, import_react12.useRef)(null);
-    const [menuPosition, setMenuPosition] = (0, import_react12.useState)(null);
-    const [searchValue, setSearchValue] = (0, import_react12.useState)("");
+    const { theme } = (0, import_xui_core3.useResolvedTheme)({ themeMode, themeProductContext });
+    const modalId = (0, import_xui_core3.useModalId)();
+    const overlayLayer = (0, import_xui_core3.useOverlayLayer)();
+    const controlRef = (0, import_react7.useRef)(null);
+    const menuRef = (0, import_react7.useRef)(null);
+    const containerRef = (0, import_react7.useRef)(null);
+    const searchInputRef = (0, import_react7.useRef)(null);
+    const [menuPosition, setMenuPosition] = (0, import_react7.useState)(null);
+    const [searchValue, setSearchValue] = (0, import_react7.useState)("");
     const sizeStyles = theme.sizing.input(size);
     const inputColors = theme.colors.control.input;
     const state = externalState || (disabled ? "disable" : "default");
@@ -1607,39 +1002,50 @@ var MultiSelect = (0, import_react12.forwardRef)(
       value,
       onChange
     });
-    (0, import_react12.useEffect)(() => {
+    (0, import_react7.useEffect)(() => {
       if (isDisable || !dropdownMenu) {
         onClose();
       }
     }, [isDisable, dropdownMenu, onClose]);
-    (0, import_react12.useEffect)(() => {
+    (0, import_react7.useEffect)(() => {
       if (isOpen && searchable && isWeb) {
         searchInputRef.current?.focus();
       }
     }, [isOpen, searchable]);
-    (0, import_react12.useEffect)(() => {
+    (0, import_react7.useEffect)(() => {
       if (!isOpen) setSearchValue("");
     }, [isOpen]);
     const getOptionText = (opt) => typeof opt.label === "string" ? opt.label : String(opt.value);
     const filteredOptions = searchable && searchValue ? options.filter(
       (opt) => getOptionText(opt).toLowerCase().includes(searchValue.toLowerCase())
     ) : options;
+    const selectedIds = values.map(String);
     const menuItems = filteredOptions.map((opt) => {
       const id = String(opt.value);
-      const checked = values.map(String).includes(id);
+      const checked = selectedIds.includes(id);
       return {
         id,
         children: opt.label,
         checked,
-        disabled: opt.disabled
+        disabled: opt.disabled,
+        locked: opt.removable === false
       };
     });
     const handleItemToggle = (id, checked) => {
-      const value2 = options.find((opt) => String(opt.value) === id)?.value;
-      if (value2 === void 0) return;
-      const newValues = checked ? [...values, value2] : values.filter((v) => v !== value2);
+      const option = options.find((opt) => String(opt.value) === id);
+      if (option === void 0) return;
+      if (!checked && option.removable === false) return;
+      const newValues = checked ? [...values, option.value] : values.filter((v) => v !== option.value);
       onChoose(newValues.map(String));
     };
+    const selectAllTargets = filteredOptions.filter((opt) => !opt.disabled);
+    const showSelectAll = selectAll && dropdownMenu && selectAllTargets.length > 0;
+    const areAllTargetsSelected = showSelectAll && selectAllTargets.every((opt) => selectedIds.includes(String(opt.value)));
+    const handleSelectAllToggle = () => {
+      const targetIds = selectAllTargets.map((opt) => String(opt.value));
+      const nextIds = areAllTargetsSelected ? selectedIds.filter((id) => !targetIds.includes(id)) : Array.from(/* @__PURE__ */ new Set([...selectedIds, ...targetIds]));
+      onChoose(nextIds);
+    };
     const controlMenuOpen = dropdownMenu ? isOpen : Boolean(menuOpen);
     const controlOnClick = dropdownMenu ? onSelectClick : onTriggerPress;
     const isScrollOverflow = optionOverflow === "scroll";
@@ -1658,7 +1064,8 @@ var MultiSelect = (0, import_react12.forwardRef)(
       overflow: "hidden",
       textOverflow: "ellipsis"
     };
-    (0, import_react12.useEffect)(() => {
+    const optionsListMaxHeight = maxHeight - (searchable ? SEARCH_ROW_HEIGHT : 0) - (showSelectAll ? SELECT_ALL_ROW_HEIGHT : 0);
+    (0, import_react7.useEffect)(() => {
       if (!isWeb || !controlMenuOpen || isDisable || !dropdownMenu) return;
       let rafId = null;
       const repositionMenu = () => {
@@ -1684,7 +1091,7 @@ var MultiSelect = (0, import_react12.forwardRef)(
         window.removeEventListener("scroll", scheduleUpdate, true);
       };
     }, [controlMenuOpen, dropdownMenu, isDisable]);
-    (0, import_react12.useEffect)(() => {
+    (0, import_react7.useEffect)(() => {
       if (!isWeb || !dropdownMenu || !isOpen || isDisable) return;
       const handleOutsideMouseDown = (event) => {
         const path = typeof event.composedPath === "function" ? event.composedPath() : [];
@@ -1701,8 +1108,8 @@ var MultiSelect = (0, import_react12.forwardRef)(
       minWidth: menuMinWidth ?? EXTERNAL_MENU_MIN_WIDTH_DEFAULT,
       boxSizing: "border-box"
     } : void 0;
-    const dropdown = dropdownMenu && isOpen && !isDisable && (!isWeb || menuPosition) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-      !isWeb && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    const dropdown = dropdownMenu && isOpen && !isDisable && (!isWeb || menuPosition) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      !isWeb && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         Box,
         {
           "data-modal-id": modalId,
@@ -1712,13 +1119,13 @@ var MultiSelect = (0, import_react12.forwardRef)(
             left: 0,
             right: 0,
             bottom: 0,
-            zIndex: overlayLayer + import_xui_core4.LAYER_OFFSET.menu,
+            zIndex: overlayLayer + import_xui_core3.LAYER_OFFSET.menu,
             cursor: "default"
           },
           onPress: onClose
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         Box,
         {
           ref: menuRef,
@@ -1737,18 +1144,18 @@ var MultiSelect = (0, import_react12.forwardRef)(
             right: isWeb ? void 0 : 0,
             width: isWeb ? menuPosition?.width : void 0,
             marginTop: isWeb ? void 0 : 4,
-            zIndex: overlayLayer + import_xui_core4.LAYER_OFFSET.popover,
+            zIndex: overlayLayer + import_xui_core3.LAYER_OFFSET.popover,
             boxShadow: theme.shadow.popover
           },
           children: [
-            searchable && isWeb && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            searchable && isWeb && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               Box,
               {
                 paddingHorizontal: sizeStyles.paddingHorizontal,
                 paddingVertical: sizeStyles.paddingVertical,
                 borderBottomWidth: 1,
                 borderColor: theme.colors.border.secondary,
-                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                   Box,
                   {
                     flexDirection: "row",
@@ -1756,15 +1163,15 @@ var MultiSelect = (0, import_react12.forwardRef)(
                     gap: sizeStyles.paddingHorizontal / 2,
                     paddingHorizontal: 4,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         Icon,
                         {
                           size: sizeStyles.iconSize - 2,
                           color: inputColors.placeholder,
-                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_xui_icons_base2.Search, {})
+                          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_xui_icons_base2.Search, {})
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         Box,
                         {
                           as: "input",
@@ -1791,23 +1198,52 @@ var MultiSelect = (0, import_react12.forwardRef)(
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            showSelectAll && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              Box,
+              {
+                role: "button",
+                "aria-label": areAllTargetsSelected ? deselectAllLabel : selectAllLabel,
+                testID: testID ? `${testID}-select-all` : void 0,
+                paddingHorizontal: sizeStyles.paddingHorizontal,
+                paddingVertical: 8,
+                borderBottomWidth: 1,
+                borderColor: theme.colors.border.secondary,
+                flexDirection: "row",
+                alignItems: "center",
+                onPress: handleSelectAllToggle,
+                hoverStyle: {
+                  backgroundColor: theme.colors.control.input.bgHover
+                },
+                style: { cursor: "pointer" },
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  Text,
+                  {
+                    color: theme.colors.content.brand.primary,
+                    fontSize: sizeStyles.fontSize,
+                    fontWeight: "500",
+                    numberOfLines: 1,
+                    children: areAllTargetsSelected ? deselectAllLabel : selectAllLabel
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               Box,
               {
                 paddingVertical: 4,
                 style: {
-                  maxHeight: searchable ? maxHeight - 60 : maxHeight,
+                  maxHeight: optionsListMaxHeight,
                   overflowY: "auto",
                   overflowX: optionListOverflowX,
                   scrollbarWidth: "none"
                 },
-                children: menuItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                children: menuItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   Box,
                   {
                     paddingVertical: sizeStyles.paddingVertical * 2,
                     paddingHorizontal: sizeStyles.paddingHorizontal,
                     alignItems: "center",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                       Text,
                       {
                         color: theme.colors.content.tertiary,
@@ -1819,14 +1255,15 @@ var MultiSelect = (0, import_react12.forwardRef)(
                 ) : menuItems.map((item, _index) => {
                   const brandColors = theme.colors.control.brand.primary;
                   const contentColors = theme.colors.content;
-                  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  const isInert = item.locked && item.checked;
+                  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     Box,
                     {
                       testID,
                       paddingHorizontal: sizeStyles.paddingHorizontal,
                       paddingVertical: 8,
                       onPress: () => {
-                        if (!item.disabled) {
+                        if (!item.disabled && !isInert) {
                           handleItemToggle(item.id, !item.checked);
                         }
                       },
@@ -1838,11 +1275,11 @@ var MultiSelect = (0, import_react12.forwardRef)(
                         backgroundColor: theme.colors.control.input.bgHover
                       } : void 0,
                       style: {
-                        cursor: item.disabled ? "not-allowed" : "pointer",
+                        cursor: item.disabled ? "not-allowed" : isInert ? "default" : "pointer",
                         opacity: item.disabled ? 0.5 : 1,
                         minWidth: optionRowMinWidth
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         Text,
                         {
                           color: item.checked ? contentColors.on.brand : theme.colors.content.secondary,
@@ -1863,7 +1300,7 @@ var MultiSelect = (0, import_react12.forwardRef)(
         }
       )
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       Box,
       {
         ref: containerRef,
@@ -1872,7 +1309,7 @@ var MultiSelect = (0, import_react12.forwardRef)(
         gap: sizeStyles.fieldGap,
         style: externalFieldLayout,
         children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Text,
             {
               color: theme.colors.content.secondary,
@@ -1881,7 +1318,7 @@ var MultiSelect = (0, import_react12.forwardRef)(
               children: label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             Box,
             {
               ref,
@@ -1890,7 +1327,7 @@ var MultiSelect = (0, import_react12.forwardRef)(
                 ...externalFieldLayout ? { width: "100%" } : {}
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   MultiSelectControl,
                   {
                     ref: controlRef,
@@ -1915,11 +1352,11 @@ var MultiSelect = (0, import_react12.forwardRef)(
                     extraClear
                   }
                 ),
-                isWeb ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Portal, { children: dropdown }) : dropdown
+                isWeb ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Portal, { children: dropdown }) : dropdown
               ]
             }
           ),
-          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Text,
             {
               color: theme.colors.content.alert.primary,
@@ -1938,19 +1375,4 @@ MultiSelect.displayName = "MultiSelect";
 0 && (module.exports = {
   MultiSelect
 });
-/*! Bundled license information:
-
-lucide-react/dist/esm/shared/src/utils.js:
-lucide-react/dist/esm/defaultAttributes.js:
-lucide-react/dist/esm/Icon.js:
-lucide-react/dist/esm/createLucideIcon.js:
-lucide-react/dist/esm/icons/x.js:
-lucide-react/dist/esm/lucide-react.js:
-  (**
-   * @license lucide-react v0.470.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-*/
 //# sourceMappingURL=index.js.map