@xsolla/xui-multi-select 0.216.0 → 0.217.0

package/web/index.mjs

@@ -1,6 +1,6 @@
 // src/MultiSelect.tsx
 import {
-  forwardRef as forwardRef4,
+  forwardRef as forwardRef2,
   useRef as useRef4,
   useEffect as useEffect4,
   useState as useState4
@@ -373,15 +373,15 @@ var isWeb = true;
 // src/MultiSelect.tsx
 import {
   useModalId,
-  useResolvedTheme as useResolvedTheme4,
+  useResolvedTheme as useResolvedTheme3,
   useOverlayLayer,
   LAYER_OFFSET
 } from "@xsolla/xui-core";
 import { Search as SearchIcon } from "@xsolla/xui-icons-base";
 
 // src/MultiSelectControl.tsx
-import { forwardRef as forwardRef3, useRef as useRef2 } from "react";
-import { useResolvedTheme as useResolvedTheme3 } from "@xsolla/xui-core";
+import { forwardRef, useRef as useRef2 } from "react";
+import { useResolvedTheme as useResolvedTheme2 } from "@xsolla/xui-core";
 import {
   ChevronDown,
   ChevronUp,
@@ -396,646 +396,9 @@ import {
   useRef,
   useState
 } from "react";
-
-// ../tag/dist/web/index.mjs
-import React22 from "react";
-import styled5 from "styled-components";
-import React4 from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-import styled22 from "styled-components";
-import { jsx as jsx23 } from "react/jsx-runtime";
-import styled32 from "styled-components";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { Tag } from "@xsolla/xui-tag";
 import { useResolvedTheme } from "@xsolla/xui-core";
-
-// ../../foundation/icons/dist/web/index.mjs
-import React3 from "react";
-import styled4 from "styled-components";
-import { jsx as jsx4 } from "react/jsx-runtime";
-
-// ../../../node_modules/lucide-react/dist/esm/createLucideIcon.js
-import { forwardRef as forwardRef2, createElement as createElement2 } from "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
-import { forwardRef, createElement } from "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 = forwardRef(
-  ({
-    color = "currentColor",
-    size = 24,
-    strokeWidth = 2,
-    absoluteStrokeWidth,
-    className = "",
-    children,
-    iconNode,
-    ...rest
-  }, ref) => {
-    return 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]) => createElement(tag, attrs)),
-        ...Array.isArray(children) ? children : [children]
-      ]
-    );
-  }
-);
-
-// ../../../node_modules/lucide-react/dist/esm/createLucideIcon.js
-var createLucideIcon = (iconName, iconNode) => {
-  const Component = forwardRef2(
-    ({ className, ...props }, ref) => createElement2(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
-import { jsx as jsx22 } from "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 = React3.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 React3.createElement(
-        Tag2,
-        { ref, ...htmlProps },
-        children
-      );
-    }
-  );
-  Component.displayName = `Filtered(${defaultTag})`;
-  return Component;
-}
-var FilteredDiv3 = createFilteredElement2("div");
-var StyledIcon2 = styled4(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__ */ jsx4(StyledIcon2, { "data-testid": dataTestId || testID, ...props, children });
-};
-var X2 = (props) => /* @__PURE__ */ jsx22(Icon3, { ...props, children: /* @__PURE__ */ jsx22(X, { size: "100%" }) });
-
-// ../tag/dist/web/index.mjs
-import { jsx as jsx42, jsxs } from "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 = React4.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 React4.createElement(
-        Tag2,
-        { ref, ...htmlProps },
-        children
-      );
-    }
-  );
-  Component.displayName = `Filtered(${defaultTag})`;
-  return Component;
-}
-var FilteredDiv4 = createFilteredElement3("div");
-var StyledBox2 = styled5(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 = React22.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__ */ jsx5(
-        "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__ */ jsx5(
-      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 = styled22(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__ */ jsx23(
-    StyledText2,
-    {
-      ...props,
-      style,
-      className,
-      id,
-      role,
-      "data-testid": dataTestId || testID
-    }
-  );
-};
-var FilteredDiv22 = createFilteredElement3("div");
-var StyledIcon3 = styled32(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__ */ jsx32(StyledIcon3, { "data-testid": dataTestId || testID, ...props, children });
-};
-var Tag = ({
-  size = "md",
-  tone = "primary",
-  type = "solid",
-  children,
-  iconLeft,
-  iconRight,
-  onRemove,
-  testID,
-  themeMode,
-  themeProductContext
-}) => {
-  const { theme } = 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__ */ 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__ */ jsx42(Icon4, { size: sizeStyles.iconSize, color: text, children: iconLeft }),
-        children && /* @__PURE__ */ jsx42(
-          Text2,
-          {
-            color: text,
-            fontSize: sizeStyles.fontSize,
-            fontWeight: "500",
-            whiteSpace: "nowrap",
-            style: {
-              overflow: "hidden",
-              textOverflow: "ellipsis"
-            },
-            children
-          }
-        ),
-        iconRight && /* @__PURE__ */ jsx42(Icon4, { size: sizeStyles.iconSize, color: text, children: iconRight }),
-        onRemove && /* @__PURE__ */ jsx42(Box2, { onPress: onRemove, children: /* @__PURE__ */ jsx42(X2, { size: sizeStyles.iconSize, color: text }) })
-      ]
-    }
-  );
-};
-
-// src/useMultiSelectControl.tsx
-import { useResolvedTheme as useResolvedTheme2 } from "@xsolla/xui-core";
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var COUNT_ITEM_VALUE = "count-item";
 var useMultiSelectControl = ({
   variant,
@@ -1051,7 +414,7 @@ var useMultiSelectControl = ({
   themeMode,
   themeProductContext
 }) => {
-  const { theme } = useResolvedTheme2({ themeMode, themeProductContext });
+  const { theme } = useResolvedTheme({ themeMode, themeProductContext });
   const displayStateRef = useRef(0 /* Placeholder */);
   const savedWidthsRef = useRef(null);
   const itemsRef = useRef(null);
@@ -1085,7 +448,8 @@ var useMultiSelectControl = ({
       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]
   );
@@ -1098,16 +462,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__ */ jsx6(
+      /* @__PURE__ */ jsx4(
         Text,
         {
           color: theme.colors.control.input.placeholder,
@@ -1154,28 +525,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__ */ jsx6(
+        return /* @__PURE__ */ jsx4(
           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__ */ jsx6(
+            children: /* @__PURE__ */ jsx4(
               Tag,
               {
                 size,
                 tone: "primary",
-                onRemove: removeTagsButtons && !isCount ? (e) => {
+                onRemove: removeTagsButtons && canRemove ? (e) => {
                   e?.stopPropagation();
                   if (!disabled) removeValue(item.value, e);
                 } : void 0,
@@ -1187,8 +560,8 @@ var useMultiSelectControl = ({
         );
       }
       const isCountItem = hasHidden;
-      const needsComma = index4 < displayedItems.length - 2 || index4 < displayedItems.length - 1 && !isCountItem;
-      return /* @__PURE__ */ jsxs2(
+      const needsComma = index2 < displayedItems.length - 2 || index2 < displayedItems.length - 1 && !isCountItem;
+      return /* @__PURE__ */ jsxs(
         Text,
         {
           color: theme.colors.content.primary,
@@ -1223,11 +596,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,
@@ -1290,8 +663,8 @@ var useMultiSelectControl = ({
 };
 
 // src/MultiSelectControl.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-var MultiSelectControl = forwardRef3(
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var MultiSelectControl = forwardRef(
   ({
     variant = "tag",
     flexible = true,
@@ -1315,7 +688,7 @@ var MultiSelectControl = forwardRef3(
     themeMode,
     themeProductContext
   }, ref) => {
-    const { theme } = useResolvedTheme3({ themeMode, themeProductContext });
+    const { theme } = useResolvedTheme2({ themeMode, themeProductContext });
     const sizeStyles = theme.sizing.input(size);
     const inputColors = theme.colors.control.input;
     const state = externalState || (disabled ? "disable" : "default");
@@ -1350,7 +723,7 @@ var MultiSelectControl = forwardRef3(
       borderColor = inputColors.borderHover;
     }
     const iconColor = isDisable ? inputColors.textDisable : inputColors.placeholder;
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs2(
       Box,
       {
         ref,
@@ -1378,7 +751,7 @@ var MultiSelectControl = forwardRef3(
           borderColor: inputColors.borderHover
         } : void 0,
         children: [
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs2(
             Box,
             {
               ref: containerRef,
@@ -1388,8 +761,8 @@ var MultiSelectControl = forwardRef3(
               gap: 8,
               style: { minWidth: 0 },
               children: [
-                iconLeft && /* @__PURE__ */ jsx7(Icon, { size: sizeStyles.iconSize, color: iconColor, variant: "line", children: iconLeft }),
-                /* @__PURE__ */ jsx7(
+                iconLeft && /* @__PURE__ */ jsx5(Icon, { size: sizeStyles.iconSize, color: iconColor, variant: "line", children: iconLeft }),
+                /* @__PURE__ */ jsx5(
                   Box,
                   {
                     ref: itemsRef,
@@ -1405,8 +778,8 @@ var MultiSelectControl = forwardRef3(
               ]
             }
           ),
-          /* @__PURE__ */ jsxs3(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
-            extraClear && selectedItems.length > 0 && !isDisable && /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsxs2(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
+            extraClear && selectedItems.length > 0 && !isDisable && /* @__PURE__ */ jsx5(
               Box,
               {
                 onPress: (e) => {
@@ -1414,11 +787,11 @@ var MultiSelectControl = forwardRef3(
                   removeAllValues();
                 },
                 style: { cursor: "pointer" },
-                children: /* @__PURE__ */ jsx7(Remove, { size: 18, color: iconColor, variant: "line" })
+                children: /* @__PURE__ */ jsx5(Remove, { size: 18, color: iconColor, variant: "line" })
               }
             ),
-            isError && /* @__PURE__ */ jsx7(ExclamationMarkCr, { size: 18, color: theme.colors.content.alert.primary }),
-            iconRight ? iconRight : isOpen ? /* @__PURE__ */ jsx7(ChevronUp, { size: 18, color: iconColor, variant: "line" }) : /* @__PURE__ */ jsx7(ChevronDown, { size: 18, color: iconColor, variant: "line" })
+            isError && /* @__PURE__ */ jsx5(ExclamationMarkCr, { size: 18, color: theme.colors.content.alert.primary }),
+            iconRight ? iconRight : isOpen ? /* @__PURE__ */ jsx5(ChevronUp, { size: 18, color: iconColor, variant: "line" }) : /* @__PURE__ */ jsx5(ChevronDown, { size: 18, color: iconColor, variant: "line" })
           ] })
         ]
       }
@@ -1434,6 +807,7 @@ var initialState = {
   selectedItems: [],
   isOpen: false
 };
+var isLockedOption = (option) => option.removable === false;
 var useMultiSelect = ({
   options,
   value = [],
@@ -1441,9 +815,13 @@ var useMultiSelect = ({
 }) => {
   const [state, setState] = useState2(initialState);
   const optionsRef = useRef3(options);
+  const valuesRef = useRef3(value);
   useEffect2(() => {
     optionsRef.current = options;
   }, [options]);
+  useEffect2(() => {
+    valuesRef.current = state.values;
+  }, [state.values]);
   useEffect2(() => {
     const selectedItems = options.filter((opt) => value.includes(opt.value));
     setState((prevState) => ({
@@ -1452,9 +830,15 @@ var useMultiSelect = ({
       selectedItems
     }));
   }, [options, value]);
+  const getLockedSelectedValues = () => optionsRef.current.filter(
+    (opt) => isLockedOption(opt) && valuesRef.current.includes(opt.value)
+  ).map((opt) => opt.value);
   const onChoose = 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)
       );
@@ -1470,6 +854,8 @@ var useMultiSelect = ({
   const onRemove = 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(
@@ -1486,12 +872,16 @@ var useMultiSelect = ({
     [onChange]
   );
   const onRemoveAll = 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 = useCallback(() => {
     setState((prevState) => ({
@@ -1529,9 +919,11 @@ var Portal = ({ children }) => {
 };
 
 // src/MultiSelect.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var EXTERNAL_MENU_MIN_WIDTH_DEFAULT = 540;
-var MultiSelect = forwardRef4(
+var SEARCH_ROW_HEIGHT = 60;
+var SELECT_ALL_ROW_HEIGHT = 37;
+var MultiSelect = forwardRef2(
   ({
     options,
     errorMessage,
@@ -1557,11 +949,14 @@ var MultiSelect = forwardRef4(
     searchable = false,
     searchPlaceholder = "Search",
     noOptionsMessage = "No results",
+    selectAll = false,
+    selectAllLabel = "Select all",
+    deselectAllLabel = "Deselect all",
     testID,
     themeMode,
     themeProductContext
   }, ref) => {
-    const { theme } = useResolvedTheme4({ themeMode, themeProductContext });
+    const { theme } = useResolvedTheme3({ themeMode, themeProductContext });
     const modalId = useModalId();
     const overlayLayer = useOverlayLayer();
     const controlRef = useRef4(null);
@@ -1608,22 +1003,33 @@ var MultiSelect = forwardRef4(
     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";
@@ -1642,6 +1048,7 @@ var MultiSelect = forwardRef4(
       overflow: "hidden",
       textOverflow: "ellipsis"
     };
+    const optionsListMaxHeight = maxHeight - (searchable ? SEARCH_ROW_HEIGHT : 0) - (showSelectAll ? SELECT_ALL_ROW_HEIGHT : 0);
     useEffect4(() => {
       if (!isWeb || !controlMenuOpen || isDisable || !dropdownMenu) return;
       let rafId = null;
@@ -1685,8 +1092,8 @@ var MultiSelect = forwardRef4(
       minWidth: menuMinWidth ?? EXTERNAL_MENU_MIN_WIDTH_DEFAULT,
       boxSizing: "border-box"
     } : void 0;
-    const dropdown = dropdownMenu && isOpen && !isDisable && (!isWeb || menuPosition) && /* @__PURE__ */ jsxs4(Fragment, { children: [
-      !isWeb && /* @__PURE__ */ jsx8(
+    const dropdown = dropdownMenu && isOpen && !isDisable && (!isWeb || menuPosition) && /* @__PURE__ */ jsxs3(Fragment, { children: [
+      !isWeb && /* @__PURE__ */ jsx6(
         Box,
         {
           "data-modal-id": modalId,
@@ -1702,7 +1109,7 @@ var MultiSelect = forwardRef4(
           onPress: onClose
         }
       ),
-      /* @__PURE__ */ jsxs4(
+      /* @__PURE__ */ jsxs3(
         Box,
         {
           ref: menuRef,
@@ -1725,14 +1132,14 @@ var MultiSelect = forwardRef4(
             boxShadow: theme.shadow.popover
           },
           children: [
-            searchable && isWeb && /* @__PURE__ */ jsx8(
+            searchable && isWeb && /* @__PURE__ */ jsx6(
               Box,
               {
                 paddingHorizontal: sizeStyles.paddingHorizontal,
                 paddingVertical: sizeStyles.paddingVertical,
                 borderBottomWidth: 1,
                 borderColor: theme.colors.border.secondary,
-                children: /* @__PURE__ */ jsxs4(
+                children: /* @__PURE__ */ jsxs3(
                   Box,
                   {
                     flexDirection: "row",
@@ -1740,15 +1147,15 @@ var MultiSelect = forwardRef4(
                     gap: sizeStyles.paddingHorizontal / 2,
                     paddingHorizontal: 4,
                     children: [
-                      /* @__PURE__ */ jsx8(
+                      /* @__PURE__ */ jsx6(
                         Icon,
                         {
                           size: sizeStyles.iconSize - 2,
                           color: inputColors.placeholder,
-                          children: /* @__PURE__ */ jsx8(SearchIcon, {})
+                          children: /* @__PURE__ */ jsx6(SearchIcon, {})
                         }
                       ),
-                      /* @__PURE__ */ jsx8(
+                      /* @__PURE__ */ jsx6(
                         Box,
                         {
                           as: "input",
@@ -1775,23 +1182,52 @@ var MultiSelect = forwardRef4(
                 )
               }
             ),
-            /* @__PURE__ */ jsx8(
+            showSelectAll && /* @__PURE__ */ jsx6(
+              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__ */ jsx6(
+                  Text,
+                  {
+                    color: theme.colors.content.brand.primary,
+                    fontSize: sizeStyles.fontSize,
+                    fontWeight: "500",
+                    numberOfLines: 1,
+                    children: areAllTargetsSelected ? deselectAllLabel : selectAllLabel
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx6(
               Box,
               {
                 paddingVertical: 4,
                 style: {
-                  maxHeight: searchable ? maxHeight - 60 : maxHeight,
+                  maxHeight: optionsListMaxHeight,
                   overflowY: "auto",
                   overflowX: optionListOverflowX,
                   scrollbarWidth: "none"
                 },
-                children: menuItems.length === 0 ? /* @__PURE__ */ jsx8(
+                children: menuItems.length === 0 ? /* @__PURE__ */ jsx6(
                   Box,
                   {
                     paddingVertical: sizeStyles.paddingVertical * 2,
                     paddingHorizontal: sizeStyles.paddingHorizontal,
                     alignItems: "center",
-                    children: /* @__PURE__ */ jsx8(
+                    children: /* @__PURE__ */ jsx6(
                       Text,
                       {
                         color: theme.colors.content.tertiary,
@@ -1803,14 +1239,15 @@ var MultiSelect = forwardRef4(
                 ) : menuItems.map((item, _index) => {
                   const brandColors = theme.colors.control.brand.primary;
                   const contentColors = theme.colors.content;
-                  return /* @__PURE__ */ jsx8(
+                  const isInert = item.locked && item.checked;
+                  return /* @__PURE__ */ jsx6(
                     Box,
                     {
                       testID,
                       paddingHorizontal: sizeStyles.paddingHorizontal,
                       paddingVertical: 8,
                       onPress: () => {
-                        if (!item.disabled) {
+                        if (!item.disabled && !isInert) {
                           handleItemToggle(item.id, !item.checked);
                         }
                       },
@@ -1822,11 +1259,11 @@ var MultiSelect = forwardRef4(
                         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__ */ jsx8(
+                      children: /* @__PURE__ */ jsx6(
                         Text,
                         {
                           color: item.checked ? contentColors.on.brand : theme.colors.content.secondary,
@@ -1847,7 +1284,7 @@ var MultiSelect = forwardRef4(
         }
       )
     ] });
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs3(
       Box,
       {
         ref: containerRef,
@@ -1856,7 +1293,7 @@ var MultiSelect = forwardRef4(
         gap: sizeStyles.fieldGap,
         style: externalFieldLayout,
         children: [
-          label && /* @__PURE__ */ jsx8(
+          label && /* @__PURE__ */ jsx6(
             Text,
             {
               color: theme.colors.content.secondary,
@@ -1865,7 +1302,7 @@ var MultiSelect = forwardRef4(
               children: label
             }
           ),
-          /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsxs3(
             Box,
             {
               ref,
@@ -1874,7 +1311,7 @@ var MultiSelect = forwardRef4(
                 ...externalFieldLayout ? { width: "100%" } : {}
               },
               children: [
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx6(
                   MultiSelectControl,
                   {
                     ref: controlRef,
@@ -1899,11 +1336,11 @@ var MultiSelect = forwardRef4(
                     extraClear
                   }
                 ),
-                isWeb ? /* @__PURE__ */ jsx8(Portal, { children: dropdown }) : dropdown
+                isWeb ? /* @__PURE__ */ jsx6(Portal, { children: dropdown }) : dropdown
               ]
             }
           ),
-          errorMessage && /* @__PURE__ */ jsx8(
+          errorMessage && /* @__PURE__ */ jsx6(
             Text,
             {
               color: theme.colors.content.alert.primary,
@@ -1921,19 +1358,4 @@ MultiSelect.displayName = "MultiSelect";
 export {
   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.mjs.map