@assembly-js/design-system 3.1.12 → 3.1.15

package/dist/umd/components/Button/Base.js

@@ -31,7 +31,8 @@
       variant: {
         primary: (0, _clsx["default"])('cop-bg-button-primary cop-text-white cop-border-primary', 'hover:cop-bg-[#6B6F76] hover:cop-border-[#00000012]', 'disabled:cop-bg-secondary disabled:cop-border-[#00000012]'),
         secondary: 'cop-bg-white cop-text-primary cop-border-[#00000012] hover:cop-bg-[#F8F9FB]',
-        minimal: 'cop-bg-transparent cop-border-transparent cop-text-primary hover:cop-bg-[#F8F9FB] hover:cop-border-[#F8F9FB]'
+        minimal: 'cop-bg-transparent cop-border-transparent cop-text-primary hover:cop-bg-[#F8F9FB] hover:cop-border-[#F8F9FB]',
+        studio: (0, _clsx["default"])('cop-bg-studio-green cop-text-black cop-border-transparent', 'hover:cop-bg-studio-green-hover', 'disabled:cop-opacity-50')
       }
     },
     defaultVariants: {

package/dist/umd/components/UserCompanySelector/SelectedValueChip.js

@@ -39,8 +39,12 @@
       }
     };
     return /*#__PURE__*/_react["default"].createElement(_Chip.Chip, {
-      className: "!cop-rounded cop-border cop-border-solid cop-py-[5px] cop-max-w-[200px]",
+      className: "cop-max-w-[200px] !cop-rounded cop-border cop-border-solid cop-py-[5px]",
       variant: "outlined",
+      onClick: function onClick() {
+        return null;
+      } // passing onclick would allow showing the hover state - this is a temporary solution avoiding doing big changes in the chip component might causing regressions
+      ,
       truncate: true,
       onClose: handleRemove,
       prefixIcon: option.type === 'company' ? /*#__PURE__*/_react["default"].createElement(_Avatar.Avatar, {

package/dist/umd/components/UserCompanySelector/UserCompanySelector.js

@@ -2,17 +2,17 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "react-select", "./ListItem", "../Typography", "./SelectedValueChip", "./LimitedOptionsList", "../../theme/colors"], factory);
+    define(["exports", "react", "react-select", "./ListItem", "../Typography", "./SelectedValueChip", "./LimitedOptionsList", "../../theme/colors", "./getClassNames", "./getOptionRelevanceScore"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("react-select"), require("./ListItem"), require("../Typography"), require("./SelectedValueChip"), require("./LimitedOptionsList"), require("../../theme/colors"));
+    factory(exports, require("react"), require("react-select"), require("./ListItem"), require("../Typography"), require("./SelectedValueChip"), require("./LimitedOptionsList"), require("../../theme/colors"), require("./getClassNames"), require("./getOptionRelevanceScore"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.reactSelect, global.ListItem, global.Typography, global.SelectedValueChip, global.LimitedOptionsList, global.colors);
+    factory(mod.exports, global.react, global.reactSelect, global.ListItem, global.Typography, global.SelectedValueChip, global.LimitedOptionsList, global.colors, global.getClassNames, global.getOptionRelevanceScore);
     global.UserCompanySelector = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _reactSelect, _ListItem, _Typography, _SelectedValueChip, _LimitedOptionsList, _colors) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _reactSelect, _ListItem, _Typography, _SelectedValueChip, _LimitedOptionsList, _colors, _getClassNames, _getOptionRelevanceScore) {
   "use strict";
   'use client';
 
@@ -22,7 +22,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
   _exports.UserCompanySelector = void 0;
   _react = _interopRequireWildcard(_react);
   _reactSelect = _interopRequireDefault(_reactSelect);
-  var _excluded = ["autoFocus", "grouped", "name", "internalUsers", "clientUsers", "companies", "onChange", "onBlur", "placeholder", "styles", "ignoreCompanies", "ignoreFilterClientsByCompany", "limitSelectedOptions", "initialValue", "customLabels", "listHeading", "listClassName"];
+  var _excluded = ["autoFocus", "grouped", "name", "internalUsers", "clientUsers", "companies", "onChange", "onBlur", "placeholder", "styles", "ignoreCompanies", "ignoreFilterClientsByCompany", "limitSelectedOptions", "initialValue", "customLabels", "listHeading", "listClassName", "variant"];
   function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
   function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
   function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -94,6 +94,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       customLabels = _ref.customLabels,
       listHeading = _ref.listHeading,
       listClassName = _ref.listClassName,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'default' : _ref$variant,
       others = _objectWithoutProperties(_ref, _excluded);
     var limitSelectedOptions = limitSelectedOptionsUnvalidated === 0 ? 1000 : Math.min(1000, limitSelectedOptionsUnvalidated);
     var companiesMap = (0, _react.useMemo)(function () {
@@ -117,29 +119,9 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       _useState4 = _slicedToArray(_useState3, 2),
       inputValue = _useState4[0],
       setInputValue = _useState4[1];
-
-    /**
-     * Returns a relevance score for an option based on the input value.
-     * Higher scores indicate more relevant matches (direct name matches > company name matches).
-     * @param option - the option to score
-     * @returns 2 for direct name match, 1 for company name match only, 0 for no match
-     */
-    var getOptionRelevanceScore = (0, _react.useCallback)(function (option) {
-      if (!inputValue) {
-        return 1; // Show all options when no input
-      }
-      var lowerInput = inputValue.toLowerCase();
-      var nameMatches = option.label.toLowerCase().includes(lowerInput);
-      if (option.type === 'client') {
-        var _option$companyId, _company$label;
-        var company = companiesMap.get((_option$companyId = option.companyId) !== null && _option$companyId !== void 0 ? _option$companyId : '');
-        var companyMatches = company === null || company === void 0 || (_company$label = company.label) === null || _company$label === void 0 ? void 0 : _company$label.toLowerCase().includes(lowerInput);
-        if (nameMatches) return 2; // Direct name match - highest priority
-        if (companyMatches) return 1; // Company name match - lower priority
-        return 0; // No match
-      }
-      return nameMatches ? 1 : 0;
-    }, [inputValue, companiesMap]);
+    var scoreOption = (0, _react.useCallback)(function (option) {
+      return (0, _getOptionRelevanceScore.getOptionRelevanceScore)(option, inputValue, companiesMap, ignoreCompanies);
+    }, [inputValue, companiesMap, ignoreCompanies]);
     var isOptionSelected = (0, _react.useCallback)(function (option) {
       return selectedOptions.some(function (o) {
         return o.value === option.value;
@@ -183,7 +165,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           options: group.options.map(function (opt) {
             return {
               opt: opt,
-              score: getOptionRelevanceScore(opt)
+              score: scoreOption(opt)
             };
           }).filter(function (_ref2) {
             var score = _ref2.score;
@@ -199,7 +181,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       var filteredFlatOptions = [].concat(_toConsumableArray(filteredInternalUsers), _toConsumableArray(filteredClients), _toConsumableArray(filteredCompanies)).map(function (opt) {
         return {
           opt: opt,
-          score: getOptionRelevanceScore(opt)
+          score: scoreOption(opt)
         };
       }).filter(function (_ref4) {
         var score = _ref4.score;
@@ -214,7 +196,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       // when grouped is true then we need to show the options list in a group manner.
       var opts = grouped ? filteredGroupedOptions : filteredFlatOptions;
       return opts;
-    }, [internalUsers, clientUsers, companies, grouped, selectedOptions, ignoreFilterClientsByCompany, limitSelectedOptions, getOptionRelevanceScore, isOptionSelected, customLabels]);
+    }, [internalUsers, clientUsers, companies, grouped, selectedOptions, ignoreFilterClientsByCompany, limitSelectedOptions, scoreOption, isOptionSelected, customLabels]);
 
     /**
      * Handles the change of the selected options
@@ -269,8 +251,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
      * @returns the option with the company data
      */
     var getCompanyData = (0, _react.useCallback)(function (option) {
-      var _option$companyId2, _clientToCompanyCount2, _option$value;
-      var company = option.type === 'client' ? companiesMap.get((_option$companyId2 = option.companyId) !== null && _option$companyId2 !== void 0 ? _option$companyId2 : '') : undefined;
+      var _option$companyId, _clientToCompanyCount2, _option$value;
+      var company = option.type === 'client' ? companiesMap.get((_option$companyId = option.companyId) !== null && _option$companyId !== void 0 ? _option$companyId : '') : undefined;
 
       // only setup the company avatar data if the client is part of more than one company
       var clientsCount = (_clientToCompanyCount2 = clientToCompanyCount.get((_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : '')) !== null && _clientToCompanyCount2 !== void 0 ? _clientToCompanyCount2 : 0;
@@ -281,11 +263,12 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       } : {});
     }, [companiesMap, clientToCompanyCount]);
     var handleFilterOption = (0, _react.useCallback)(function (option, inputValue) {
+      var _option$data$label$to, _option$data$label;
       var lowerCaseInputValue = inputValue.toLowerCase();
       if (ignoreCompanies && option.data.type === 'company') {
         return false;
       }
-      var optionLabel = option.data.label.toLowerCase();
+      var optionLabel = (_option$data$label$to = (_option$data$label = option.data.label) === null || _option$data$label === void 0 ? void 0 : _option$data$label.toLowerCase()) !== null && _option$data$label$to !== void 0 ? _option$data$label$to : '';
       // for clients option, we should filter by company name too
       // e.g. if a client company is ACME and the input is ACME, the result should
       // show the client with the company ACME and the client with the company name
@@ -348,6 +331,9 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         }
       };
     }, [getCompanyData, listHeading, listClassName]);
+    var variantClassNames = (0, _react.useMemo)(function () {
+      return (0, _getClassNames.getClassNames)(variant);
+    }, [variant]);
     return /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], _extends({
       autoFocus: autoFocus,
       isMulti: true,
@@ -361,7 +347,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       placeholder: placeholder,
       filterOption: handleFilterOption,
       unstyled: true,
-      styles: _objectSpread({
+      styles: _objectSpread(_objectSpread({
         clearIndicator: function clearIndicator() {
           return {
             display: 'none' // hide the clear button. Unfortunatelly, the class specificity is not enough to override the default styles.
@@ -372,20 +358,20 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             color: _colors.colors.gray[500]
           });
         }
-      }, styles),
-      classNames: {
-        valueContainer: function valueContainer() {
-          return 'cop-flex cop-gap-1';
-        },
-        input: function input() {
-          return 'cop-text-base cop-text-primary hover:cop-cursor-text';
-        },
-        menuList: function menuList() {
-          return 'cop-relative cop-bg-white cop-shadow-popover-50 cop-rounded cop-border cop-border-solid cop-border-secondary cop-mt-1';
-        },
-        control: function control() {
-          return 'cop-border-solid cop-border-[1px] cop-border-secondary focus-within:cop-border-primary cop-px-3 cop-py-[2px] cop-rounded';
+      }, variant === 'unified' ? {
+        menu: function menu() {
+          return {
+            position: 'static'
+          };
         }
+      } : {}), styles),
+      classNames: {
+        container: variantClassNames.container,
+        valueContainer: variantClassNames.valueContainer,
+        input: variantClassNames.input,
+        placeholder: variantClassNames.placeholder,
+        menuList: variantClassNames.menuList,
+        control: variantClassNames.control
       },
       components: memoizedComponents,
       value: selectedOptions

package/dist/umd/components/UserCompanySelector/__tests__/getClassNames.test.js

@@ -0,0 +1,96 @@
+// This file is generated by a script. Do not edit this file directly.
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../getClassNames"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../getClassNames"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global.getClassNames);
+    global.getClassNamesTest = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_getClassNames) {
+  "use strict";
+
+  describe('getClassNames', function () {
+    describe('default variant', function () {
+      var cls = (0, _getClassNames.getClassNames)('default');
+      it('control has outer border, rounded, and focus-within blue border', function () {
+        var control = cls.control();
+        expect(control).toContain('cop-border-solid');
+        expect(control).toContain('cop-border-[1px]');
+        expect(control).toContain('cop-border-secondary');
+        expect(control).toContain('cop-rounded');
+        expect(control).toContain('focus-within:cop-border-primary');
+      });
+      it('menuList has its own border, shadow, rounded, and top margin', function () {
+        var menuList = cls.menuList();
+        expect(menuList).toContain('cop-shadow-popover-50');
+        expect(menuList).toContain('cop-rounded');
+        expect(menuList).toContain('cop-border');
+        expect(menuList).toContain('cop-border-secondary');
+        expect(menuList).toContain('cop-mt-1');
+      });
+      it('container returns undefined (no outer wrapper in default)', function () {
+        expect(cls.container).toBeUndefined();
+      });
+    });
+    describe('unified variant', function () {
+      var cls = (0, _getClassNames.getClassNames)('unified');
+      it('container has border, rounded corners, and shadow', function () {
+        var _cls$container, _cls$container2;
+        var container = (_cls$container = (_cls$container2 = cls.container) === null || _cls$container2 === void 0 ? void 0 : _cls$container2.call(cls)) !== null && _cls$container !== void 0 ? _cls$container : '';
+        expect(container).toContain('cop-border');
+        expect(container).toContain('cop-border-secondary');
+        expect(container).toContain('cop-rounded');
+        expect(container).toContain('cop-shadow-popover-50');
+        expect(container).toContain('cop-overflow-hidden');
+      });
+      it('control has no border (outer container owns all border styling)', function () {
+        var control = cls.control();
+        expect(control).toContain('cop-px-3');
+        expect(control).toContain('cop-py-[2px]');
+        expect(control).not.toContain('cop-border');
+        expect(control).not.toContain('cop-rounded');
+        expect(control).not.toContain('focus-within:cop-border-primary');
+      });
+      it('menuList has no border, no shadow, no rounded, no top margin', function () {
+        var menuList = cls.menuList();
+        expect(menuList).not.toContain('cop-shadow-popover-50');
+        expect(menuList).not.toContain('cop-rounded');
+        expect(menuList).not.toContain('cop-border-solid');
+        expect(menuList).not.toContain('cop-border-secondary');
+        expect(menuList).not.toContain('cop-mt-1');
+      });
+    });
+    describe('shared across variants', function () {
+      it('input uses 13px font size with 20px line height in default', function () {
+        var input = (0, _getClassNames.getClassNames)('default').input();
+        expect(input).toContain('cop-text-[13px]');
+        expect(input).toContain('cop-leading-5');
+      });
+      it('input uses 13px font size with 20px line height in unified', function () {
+        var input = (0, _getClassNames.getClassNames)('unified').input();
+        expect(input).toContain('cop-text-[13px]');
+        expect(input).toContain('cop-leading-5');
+      });
+      it('placeholder uses 13px font size with 20px line height in default', function () {
+        var placeholder = (0, _getClassNames.getClassNames)('default').placeholder();
+        expect(placeholder).toContain('cop-text-[13px]');
+        expect(placeholder).toContain('cop-leading-5');
+      });
+      it('placeholder uses 13px font size with 20px line height in unified', function () {
+        var placeholder = (0, _getClassNames.getClassNames)('unified').placeholder();
+        expect(placeholder).toContain('cop-text-[13px]');
+        expect(placeholder).toContain('cop-leading-5');
+      });
+      it('valueContainer is the same flex gap class in both variants', function () {
+        expect((0, _getClassNames.getClassNames)('default').valueContainer()).toBe((0, _getClassNames.getClassNames)('unified').valueContainer());
+        expect((0, _getClassNames.getClassNames)('default').valueContainer()).toContain('cop-flex');
+        expect((0, _getClassNames.getClassNames)('default').valueContainer()).toContain('cop-gap-1');
+      });
+    });
+  });
+});

package/dist/umd/components/UserCompanySelector/__tests__/getOptionRelevanceScore.test.js

@@ -0,0 +1,130 @@
+// This file is generated by a script. Do not edit this file directly.
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../getOptionRelevanceScore"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../getOptionRelevanceScore"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global.getOptionRelevanceScore);
+    global.getOptionRelevanceScoreTest = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_getOptionRelevanceScore) {
+  "use strict";
+
+  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+  function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+  function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+  var company = {
+    value: 'company-1',
+    label: 'Acme Inc',
+    type: 'company'
+  };
+  var client = {
+    value: 'client-1',
+    label: 'Jane Doe',
+    type: 'client',
+    companyId: 'company-1'
+  };
+  var internalUser = {
+    value: 'user-1',
+    label: 'John Smith',
+    type: 'internalUser'
+  };
+  var companiesMap = new Map([[company.value, company]]);
+  describe('getOptionRelevanceScore', function () {
+    describe('empty input', function () {
+      it('returns 1 (show all) when input is empty', function () {
+        expect((0, _getOptionRelevanceScore.getOptionRelevanceScore)(client, '', companiesMap)).toBe(1);
+        expect((0, _getOptionRelevanceScore.getOptionRelevanceScore)(company, '', companiesMap)).toBe(1);
+        expect((0, _getOptionRelevanceScore.getOptionRelevanceScore)(internalUser, '', companiesMap)).toBe(1);
+      });
+    });
+    describe('client options', function () {
+      it('returns 2 for a direct name match', function () {
+        expect((0, _getOptionRelevanceScore.getOptionRelevanceScore)(client, 'jane', companiesMap)).toBe(2);
+      });
+      it('returns 1 for a company name match only', function () {
+        expect((0, _getOptionRelevanceScore.getOptionRelevanceScore)(client, 'acme', companiesMap)).toBe(1);
+      });
+      it('prefers the direct name match (2) over a company match', function () {
+        var acmeClient = _objectSpread(_objectSpread({}, client), {}, {
+          label: 'Acme Person'
+        });
+        expect((0, _getOptionRelevanceScore.getOptionRelevanceScore)(acmeClient, 'acme', companiesMap)).toBe(2);
+      });
+      it('returns 0 when neither name nor company match', function () {
+        expect((0, _getOptionRelevanceScore.getOptionRelevanceScore)(client, 'zzz', companiesMap)).toBe(0);
+      });
+      it('matches case-insensitively', function () {
+        expect((0, _getOptionRelevanceScore.getOptionRelevanceScore)(client, 'JANE', companiesMap)).toBe(2);
+      });
+      it('returns 0 for a company match when the company is missing from the map', function () {
+        expect((0, _getOptionRelevanceScore.getOptionRelevanceScore)(client, 'acme', new Map())).toBe(0);
+      });
+    });
+    describe('non-client options', function () {
+      it('returns 1 for a matching company', function () {
+        expect((0, _getOptionRelevanceScore.getOptionRelevanceScore)(company, 'acme', companiesMap)).toBe(1);
+      });
+      it('returns 0 for a non-matching company', function () {
+        expect((0, _getOptionRelevanceScore.getOptionRelevanceScore)(company, 'zzz', companiesMap)).toBe(0);
+      });
+      it('returns 1 for a matching internal user', function () {
+        expect((0, _getOptionRelevanceScore.getOptionRelevanceScore)(internalUser, 'john', companiesMap)).toBe(1);
+      });
+    });
+    describe('ignoreCompanies', function () {
+      it('returns 0 for company options when ignoreCompanies is true, even on a match', function () {
+        expect((0, _getOptionRelevanceScore.getOptionRelevanceScore)(company, 'acme', companiesMap, true)).toBe(0);
+      });
+      it('returns 0 for company options when ignoreCompanies is true and input is empty', function () {
+        expect((0, _getOptionRelevanceScore.getOptionRelevanceScore)(company, '', companiesMap, true)).toBe(0);
+      });
+      it('still scores client options normally when ignoreCompanies is true', function () {
+        expect((0, _getOptionRelevanceScore.getOptionRelevanceScore)(client, 'jane', companiesMap, true)).toBe(2);
+      });
+    });
+    describe('null-safety (bad runtime data)', function () {
+      it('does not throw and returns 0 when a client label is null', function () {
+        var badClient = _objectSpread(_objectSpread({}, client), {}, {
+          label: null
+        });
+        expect(function () {
+          return (0, _getOptionRelevanceScore.getOptionRelevanceScore)(badClient, 'jane', companiesMap);
+        }).not.toThrow();
+        // name does not match (null), company "Acme" does not match "jane" -> 0
+        expect((0, _getOptionRelevanceScore.getOptionRelevanceScore)(badClient, 'jane', companiesMap)).toBe(0);
+      });
+      it('falls back to the company match when a client label is null', function () {
+        var badClient = _objectSpread(_objectSpread({}, client), {}, {
+          label: undefined
+        });
+        expect((0, _getOptionRelevanceScore.getOptionRelevanceScore)(badClient, 'acme', companiesMap)).toBe(1);
+      });
+      it('does not throw and returns 0 when a company label is null', function () {
+        var badCompany = _objectSpread(_objectSpread({}, company), {}, {
+          label: null
+        });
+        expect(function () {
+          return (0, _getOptionRelevanceScore.getOptionRelevanceScore)(badCompany, 'acme', companiesMap);
+        }).not.toThrow();
+        expect((0, _getOptionRelevanceScore.getOptionRelevanceScore)(badCompany, 'acme', companiesMap)).toBe(0);
+      });
+      it('does not throw when the matching company in the map has a null label', function () {
+        var mapWithBadCompany = new Map([[company.value, _objectSpread(_objectSpread({}, company), {}, {
+          label: null
+        })]]);
+        expect(function () {
+          return (0, _getOptionRelevanceScore.getOptionRelevanceScore)(client, 'acme', mapWithBadCompany);
+        }).not.toThrow();
+        expect((0, _getOptionRelevanceScore.getOptionRelevanceScore)(client, 'acme', mapWithBadCompany)).toBe(0);
+      });
+    });
+  });
+});

package/dist/umd/components/UserCompanySelector/data.js

@@ -22,14 +22,19 @@
    * This file is used to generate the data for the combo select stories
    */
 
-  function generateRandomSrc() {
-    return "https://i.pravatar.cc/150?img=".concat(Math.floor(Math.random() * 70) + 1);
+  // Deterministic avatar src so Storybook/Chromatic snapshots are stable across builds.
+  // pravatar exposes images 1-70, so we cycle through that range based on the item index.
+  function generateSrc(index) {
+    return "https://i.pravatar.cc/150?img=".concat(index % 70 + 1);
   }
   var firstNames = ['John', 'Jane', 'Alice', 'Bob', 'Lara', 'Mike', 'Sarah', 'David', 'Emily', 'Daniel', 'Chris', 'Olivia', 'James', 'Sophia', 'Henry', 'Emma', 'Liam', 'Mia', 'Noah', 'Zoe'];
   var lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Miller', 'Davis', 'Garcia', 'Martinez', 'Lopez', 'Clark', 'Lewis', 'Walker', 'Young', 'Allen', 'King', 'Wright', 'Scott', 'Torres', 'Nguyen'];
 
-  // Generate unique name combinations
+  // Generate unique name combinations deterministically.
+  // `offset` lets callers pick a different, non-overlapping slice of the same
+  // stable ordering so internal and client lists don't share identical names.
   function generateUniqueNames(count) {
+    var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     var combinations = [];
     for (var _i = 0, _firstNames = firstNames; _i < _firstNames.length; _i++) {
       var first = _firstNames[_i];
@@ -38,16 +43,12 @@
         combinations.push("".concat(first, " ").concat(last));
       }
     }
-    // Shuffle and slice to the required count
-    var shuffled = combinations.sort(function () {
-      return 0.5 - Math.random();
-    });
-    return shuffled.slice(0, count);
+    return combinations.slice(offset, offset + count);
   }
 
-  // Get 100 unique names for internal and client users
+  // Get 100 unique names for internal and client users (non-overlapping slices)
   var internalUserNames = generateUniqueNames(100);
-  var clientUserNames = generateUniqueNames(100);
+  var clientUserNames = generateUniqueNames(100, 100);
 
   // Generate companies
   var companies = _exports.companies = Array.from({
@@ -56,7 +57,7 @@
     return {
       value: "company-".concat(i + 1),
       label: "Company ".concat(i + 1),
-      avatarSrc: generateRandomSrc(),
+      avatarSrc: generateSrc(i),
       type: 'company'
     };
   });
@@ -66,20 +67,21 @@
     return {
       value: "internal-".concat(i + 1),
       label: name,
-      avatarSrc: generateRandomSrc(),
+      avatarSrc: generateSrc(i),
       type: 'internalUser'
     };
   });
 
   // Generate client users (with valid companyIds)
   var clientUsers = _exports.clientUsers = clientUserNames.map(function (name, i) {
-    var _companies$Math$floor;
+    var _companies;
     return {
       value: "client-".concat(i + 1),
       label: name,
-      avatarSrc: generateRandomSrc(),
+      avatarSrc: generateSrc(i),
       type: 'client',
-      companyId: (_companies$Math$floor = companies[Math.floor(Math.random() * companies.length)]) === null || _companies$Math$floor === void 0 ? void 0 : _companies$Math$floor.value
+      // Deterministically distribute clients across companies for stable snapshots.
+      companyId: (_companies = companies[i % companies.length]) === null || _companies === void 0 ? void 0 : _companies.value
     };
   });
 });

package/dist/umd/components/UserCompanySelector/getClassNames.js

@@ -0,0 +1,64 @@
+// This file is generated by a script. Do not edit this file directly.
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.getClassNames = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.getClassNames = void 0;
+  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+  function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+  function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+  var INPUT_CLASSES = 'cop-text-[13px] cop-leading-5 cop-text-primary hover:cop-cursor-text';
+  var PLACEHOLDER_CLASSES = 'cop-text-[13px] cop-leading-5';
+  var VALUE_CONTAINER_CLASSES = 'cop-flex cop-gap-1';
+  var getClassNames = _exports.getClassNames = function getClassNames(variant) {
+    var shared = {
+      input: function input() {
+        return INPUT_CLASSES;
+      },
+      placeholder: function placeholder() {
+        return PLACEHOLDER_CLASSES;
+      },
+      valueContainer: function valueContainer() {
+        return VALUE_CONTAINER_CLASSES;
+      }
+    };
+    if (variant === 'unified') {
+      return _objectSpread(_objectSpread({}, shared), {}, {
+        container: function container() {
+          return 'cop-border cop-border-solid cop-border-secondary cop-rounded cop-shadow-popover-50 cop-overflow-hidden';
+        },
+        control: function control() {
+          return 'cop-px-3 cop-py-[2px]';
+        },
+        menuList: function menuList() {
+          return 'cop-relative cop-bg-white';
+        }
+      });
+    }
+    return _objectSpread(_objectSpread({}, shared), {}, {
+      control: function control() {
+        return 'cop-border-solid cop-border-[1px] cop-border-secondary focus-within:cop-border-primary cop-px-3 cop-py-[2px] cop-rounded';
+      },
+      menuList: function menuList() {
+        return 'cop-relative cop-bg-white cop-shadow-popover-50 cop-rounded cop-border cop-border-solid cop-border-secondary cop-mt-1';
+      }
+    });
+  };
+});

package/dist/umd/components/UserCompanySelector/getOptionRelevanceScore.js

@@ -0,0 +1,53 @@
+// This file is generated by a script. Do not edit this file directly.
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.getOptionRelevanceScore = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.getOptionRelevanceScore = void 0;
+  /**
+   * Returns a relevance score for an option based on the input value.
+   * Higher scores indicate more relevant matches (direct name matches > company name matches).
+   *
+   * This is a pure function so it can be unit-tested in isolation.
+   *
+   * @param option - the option to score
+   * @param inputValue - the current search input
+   * @param companiesMap - lookup of company value -> company option (used to match clients by company name)
+   * @param ignoreCompanies - when true, company options are excluded from results entirely
+   * @returns 2 for direct name match, 1 for company name match only, 0 for no match
+   */
+  var getOptionRelevanceScore = _exports.getOptionRelevanceScore = function getOptionRelevanceScore(option, inputValue, companiesMap, ignoreCompanies) {
+    var _option$label$toLower, _option$label;
+    if (ignoreCompanies && option.type === 'company') {
+      return 0; // companies are hidden when ignoreCompanies is set
+    }
+    if (!inputValue) {
+      return 1; // Show all options when no input
+    }
+    var lowerInput = inputValue.toLowerCase();
+    var nameMatches = (_option$label$toLower = (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toLowerCase().includes(lowerInput)) !== null && _option$label$toLower !== void 0 ? _option$label$toLower : false;
+    if (option.type === 'client') {
+      var _option$companyId, _company$label$toLowe, _company$label;
+      var company = companiesMap.get((_option$companyId = option.companyId) !== null && _option$companyId !== void 0 ? _option$companyId : '');
+      var companyMatches = (_company$label$toLowe = company === null || company === void 0 || (_company$label = company.label) === null || _company$label === void 0 ? void 0 : _company$label.toLowerCase().includes(lowerInput)) !== null && _company$label$toLowe !== void 0 ? _company$label$toLowe : false;
+      if (nameMatches) return 2; // Direct name match - highest priority
+      if (companyMatches) return 1; // Company name match - lower priority
+      return 0; // No match
+    }
+    return nameMatches ? 1 : 0;
+  };
+});

package/dist/umd/types/components/Button/Base.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'cva';
 import type { ButtonHTMLAttributes } from 'react';
 declare const baseButtonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "minimal" | undefined;
+    variant?: "primary" | "studio" | "secondary" | "minimal" | undefined;
 } & ({
     class?: import("cva").ClassValue;
     className?: undefined;

package/dist/umd/types/components/Button/Button.stories.d.ts

@@ -21,3 +21,4 @@ export declare const TextVariant: Story;
 export declare const Disabled: Story;
 export declare const Small: Story;
 export declare const Loading: Story;
+export declare const StudioVariant: Story;