@1money/component-ui 0.0.49 → 0.0.51

package/lib/utils/classnames.d.ts

@@ -0,0 +1,5 @@
+export declare const classnames: (namespace: string) => (block?: string) => (modifier?: string, className?: string) => string;
+export type ClassNamesFn = ReturnType<ReturnType<typeof classnames>>;
+export declare const joinCls: (...classes: (string | number | null | undefined | boolean)[]) => string;
+declare const _default: (block?: string) => (modifier?: string, className?: string) => string;
+export default _default;

package/lib/utils/classnames.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.joinCls = exports["default"] = exports.classnames = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var classnames = exports.classnames = function classnames(namespace) {
+  return function (block) {
+    return function (modifier, className) {
+      var base = block ? "".concat(namespace, "-").concat(block) : namespace;
+      return (0, _classnames["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, base, !!base && !modifier), "".concat(base, "-").concat(modifier), !!base && !!modifier), className);
+    };
+  };
+};
+var joinCls = exports.joinCls = function joinCls() {
+  for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
+    classes[_key] = arguments[_key];
+  }
+  return classes.filter(Boolean).join(' ');
+};
+var _default = exports["default"] = classnames('om-component-ui');
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy91dGlscy9jbGFzc25hbWVzLnRzIl0sIm5hbWVzIjpbIl9jbGFzc25hbWVzIiwiX2ludGVyb3BSZXF1aXJlRGVmYXVsdCIsInJlcXVpcmUiLCJjbGFzc25hbWVzIiwiZXhwb3J0cyIsIm5hbWVzcGFjZSIsImJsb2NrIiwibW9kaWZpZXIiLCJjbGFzc05hbWUiLCJiYXNlIiwiY29uY2F0IiwiY2xhc3NOYW1lcyIsIl9kZWZpbmVQcm9wZXJ0eTIiLCJqb2luQ2xzIiwiX2xlbiIsImFyZ3VtZW50cyIsImxlbmd0aCIsImNsYXNzZXMiLCJBcnJheSIsIl9rZXkiLCJmaWx0ZXIiLCJCb29sZWFuIiwiam9pbiIsIl9kZWZhdWx0Il0sIm1hcHBpbmdzIjoiOzs7Ozs7OztBQUFBLElBQUFBLFdBQUEsR0FBQUMsc0JBQUEsQ0FBQUMsT0FBQTtBQUVPLElBQU1DLFVBQVUsR0FBQUMsT0FBQSxDQUFBRCxVQUFBLEdBQUcsU0FBYkEsVUFBVUEsQ0FBSUUsU0FBaUI7RUFBQSxPQUFLLFVBQUNDLEtBQWM7SUFBQSxPQUFLLFVBQ25FQyxRQUFpQixFQUNqQkMsU0FBa0IsRUFDaEI7TUFDRixJQUFNQyxJQUFJLEdBQUdILEtBQUssTUFBQUksTUFBQSxDQUFNTCxTQUFTLE9BQUFLLE1BQUEsQ0FBSUosS0FBSyxJQUFLRCxTQUFTO01BQ3hELE9BQU8sSUFBQU0sc0JBQVUsTUFBQUMsZ0JBQUEsaUJBQUFBLGdCQUFBLGlCQUVaSCxJQUFJLEVBQUcsQ0FBQyxDQUFDQSxJQUFJLElBQUksQ0FBQ0YsUUFBUSxNQUFBRyxNQUFBLENBQ3ZCRCxJQUFJLE9BQUFDLE1BQUEsQ0FBSUgsUUFBUSxHQUFLLENBQUMsQ0FBQ0UsSUFBSSxJQUFJLENBQUMsQ0FBQ0YsUUFBUSxHQUUvQ0MsU0FBUyxDQUNWO0lBQ0gsQ0FBQztFQUFBO0FBQUE7QUFJTSxJQUFNSyxPQUFPLEdBQUFULE9BQUEsQ0FBQVMsT0FBQSxHQUFHLFNBQVZBLE9BQU9BLENBQUE7RUFBQSxTQUFBQyxJQUFBLEdBQUFDLFNBQUEsQ0FBQUMsTUFBQSxFQUFPQyxPQUF5RCxPQUFBQyxLQUFBLENBQUFKLElBQUEsR0FBQUssSUFBQSxNQUFBQSxJQUFBLEdBQUFMLElBQUEsRUFBQUssSUFBQTtJQUF6REYsT0FBeUQsQ0FBQUUsSUFBQSxJQUFBSixTQUFBLENBQUFJLElBQUE7RUFBQTtFQUFBLE9BQUtGLE9BQU8sQ0FBQ0csTUFBTSxDQUFDQyxPQUFPLENBQUMsQ0FBQ0MsSUFBSSxDQUFDLEdBQUcsQ0FBQztBQUFBO0FBQUMsSUFBQUMsUUFBQSxHQUFBbkIsT0FBQSxjQUU1R0QsVUFBVSxDQUFDLGlCQUFpQixDQUFDIiwiZmlsZSI6InV0aWxzL2NsYXNzbmFtZXMuanMiLCJzb3VyY2VzQ29udGVudCI6W251bGxdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=

package/lib/utils/clipboard.d.ts

@@ -0,0 +1,2 @@
+export declare const clipboard: (text: string | number, cb?: (succeeded: boolean) => any) => void;
+export default clipboard;

package/lib/utils/clipboard.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.clipboard = void 0;
+var clipboard = exports.clipboard = function clipboard(text, cb) {
+  var _a;
+  if (typeof window === 'undefined' || typeof text === 'undefined' || '' + text === 'null') return;
+  var str = '' + text;
+  if ((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText) {
+    navigator.clipboard.writeText(str).then(function () {
+      return cb === null || cb === void 0 ? void 0 : cb(true);
+    }, function () {
+      return fallbackCopy(str, cb);
+    });
+    return;
+  }
+  fallbackCopy(str, cb);
+};
+function fallbackCopy(text, cb) {
+  var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
+  var fakeElem = document.createElement('textarea');
+  // Prevent zooming on iOS
+  fakeElem.style.fontSize = '12pt';
+  // Reset box model
+  fakeElem.style.border = '0';
+  fakeElem.style.padding = '0';
+  fakeElem.style.margin = '0';
+  // Move element out of screen horizontally
+  fakeElem.style.position = 'absolute';
+  fakeElem.style[isRTL ? 'right' : 'left'] = '-9999px';
+  // Move element to the same position vertically
+  var yPosition = window.pageYOffset || document.documentElement.scrollTop;
+  fakeElem.style.top = "".concat(yPosition, "px");
+  fakeElem.setAttribute('readonly', '');
+  fakeElem.value = text;
+  document.body.appendChild(fakeElem);
+  // make selection
+  fakeElem.select();
+  fakeElem.setSelectionRange(0, fakeElem.value.length);
+  var succeeded;
+  try {
+    succeeded = document.execCommand('copy');
+  } catch (error) {
+    succeeded = false;
+  }
+  cb === null || cb === void 0 ? void 0 : cb(succeeded);
+  // remove the selection
+  var getSelection = window.getSelection();
+  getSelection === null || getSelection === void 0 ? void 0 : getSelection.removeAllRanges();
+  document.body.removeChild(fakeElem);
+  fakeElem = null;
+}
+var _default = exports["default"] = clipboard;
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy91dGlscy9jbGlwYm9hcmQudHMiLCJ1dGlscy9jbGlwYm9hcmQuanMiXSwibmFtZXMiOlsiY2xpcGJvYXJkIiwiZXhwb3J0cyIsInRleHQiLCJjYiIsIl9hIiwid2luZG93Iiwic3RyIiwibmF2aWdhdG9yIiwid3JpdGVUZXh0IiwidGhlbiIsImZhbGxiYWNrQ29weSIsImlzUlRMIiwiZG9jdW1lbnQiLCJkb2N1bWVudEVsZW1lbnQiLCJnZXRBdHRyaWJ1dGUiLCJmYWtlRWxlbSIsImNyZWF0ZUVsZW1lbnQiLCJzdHlsZSIsImZvbnRTaXplIiwiYm9yZGVyIiwicGFkZGluZyIsIm1hcmdpbiIsInBvc2l0aW9uIiwieVBvc2l0aW9uIiwicGFnZVlPZmZzZXQiLCJzY3JvbGxUb3AiLCJ0b3AiLCJjb25jYXQiLCJzZXRBdHRyaWJ1dGUiLCJ2YWx1ZSIsImJvZHkiLCJhcHBlbmRDaGlsZCIsInNlbGVjdCIsInNldFNlbGVjdGlvblJhbmdlIiwibGVuZ3RoIiwic3VjY2VlZGVkIiwiZXhlY0NvbW1hbmQiLCJlcnJvciIsImdldFNlbGVjdGlvbiIsInJlbW92ZUFsbFJhbmdlcyIsInJlbW92ZUNoaWxkIiwiX2RlZmF1bHQiXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFPLElBQU1BLFNBQVMsR0FBQUMsT0FBQSxDQUFBRCxTQUFBLEdBQXNFLFNBQS9FQSxTQUFTQSxDQUF1RUUsSUFBSSxFQUFFQyxFQUFFLEVBQUk7RUNDckcsSUFBSUMsRUFBRTtFREFSLElBQUksT0FBT0MsTUFBTSxLQUFLLFdBQVcsSUFBSSxPQUFPSCxJQUFJLEtBQUssV0FBVyxJQUFLLEVBQUUsR0FBR0EsSUFBSSxLQUFNLE1BQU0sRUFBRTtFQUU1RixJQUFNSSxHQUFHLEdBQUcsRUFBRSxHQUFHSixJQUFJO0VBRXJCLElBQUksQ0FBQUUsRUFBQSxHQUFBRyxTQUFTLENBQUNQLFNBQVMsTUFBQSxJQUFBLElBQUFJLEVBQUEsS0FBQSxLQUFBLENBQUEsR0FBQSxLQUFBLENBQUEsR0FBQUEsRUFBQSxDQUFFSSxTQUFTLEVBQUU7SUFDbENELFNBQVMsQ0FBQ1AsU0FBUyxDQUFDUSxTQUFTLENBQUNGLEdBQUcsQ0FBQyxDQUFDRyxJQUFJLENBQ3JDO01BQUEsT0FBTU4sRUFBRSxLQUFBLElBQUEsSUFBRkEsRUFBRSxLQUFBLEtBQUEsQ0FBQSxHQUFBLEtBQUEsQ0FBQSxHQUFGQSxFQUFFLENBQUcsSUFBSSxDQUFDO0lBQUEsR0FDaEI7TUFBQSxPQUFNTyxZQUFZLENBQUNKLEdBQUcsRUFBRUgsRUFBRSxDQUFDO0lBQUEsRUFDNUI7SUFDRDtFQUNGO0VBRUFPLFlBQVksQ0FBQ0osR0FBRyxFQUFFSCxFQUFFLENBQUM7QUFDdkIsQ0FBQztBQUVELFNBQVNPLFlBQVlBLENBQUNSLElBQVksRUFBRUMsRUFBZ0MsRUFBQTtFQUNsRSxJQUFNUSxLQUFLLEdBQUdDLFFBQVEsQ0FBQ0MsZUFBZSxDQUFDQyxZQUFZLENBQUMsS0FBSyxDQUFDLEtBQUssS0FBSztFQUNwRSxJQUFJQyxRQUFRLEdBQStCSCxRQUFRLENBQUNJLGFBQWEsQ0FBQyxVQUFVLENBQUM7RUFDN0U7RUFDQUQsUUFBUSxDQUFDRSxLQUFLLENBQUNDLFFBQVEsR0FBRyxNQUFNO0VBQ2hDO0VBQ0FILFFBQVEsQ0FBQ0UsS0FBSyxDQUFDRSxNQUFNLEdBQUcsR0FBRztFQUMzQkosUUFBUSxDQUFDRSxLQUFLLENBQUNHLE9BQU8sR0FBRyxHQUFHO0VBQzVCTCxRQUFRLENBQUNFLEtBQUssQ0FBQ0ksTUFBTSxHQUFHLEdBQUc7RUFDM0I7RUFDQU4sUUFBUSxDQUFDRSxLQUFLLENBQUNLLFFBQVEsR0FBRyxVQUFVO0VBQ3BDUCxRQUFRLENBQUNFLEtBQUssQ0FBRU4sS0FBSyxHQUFHLE9BQU8sR0FBRyxNQUFNLENBQUUsR0FBRyxTQUFTO0VBQ3REO0VBQ0EsSUFBTVksU0FBUyxHQUFHbEIsTUFBTSxDQUFDbUIsV0FBVyxJQUFJWixRQUFRLENBQUNDLGVBQWUsQ0FBQ1ksU0FBUztFQUMxRVYsUUFBUSxDQUFDRSxLQUFLLENBQUNTLEdBQUcsTUFBQUMsTUFBQSxDQUFNSixTQUFTLE9BQUk7RUFFckNSLFFBQVEsQ0FBQ2EsWUFBWSxDQUFDLFVBQVUsRUFBRSxFQUFFLENBQUM7RUFDckNiLFFBQVEsQ0FBQ2MsS0FBSyxHQUFHM0IsSUFBSTtFQUVyQlUsUUFBUSxDQUFDa0IsSUFBSSxDQUFDQyxXQUFXLENBQUNoQixRQUFRLENBQUM7RUFFbkM7RUFDQUEsUUFBUSxDQUFDaUIsTUFBTSxDQUFBLENBQUU7RUFDakJqQixRQUFRLENBQUNrQixpQkFBaUIsQ0FBQyxDQUFDLEVBQUVsQixRQUFRLENBQUNjLEtBQUssQ0FBQ0ssTUFBTSxDQUFDO0VBRXBELElBQUlDLFNBQWtCO0VBQ3RCLElBQUk7SUFDRkEsU0FBUyxHQUFHdkIsUUFBUSxDQUFDd0IsV0FBVyxDQUFDLE1BQU0sQ0FBQztFQUMxQyxDQUFDLENBQUMsT0FBT0MsS0FBSyxFQUFFO0lBQ2RGLFNBQVMsR0FBRyxLQUFLO0VBQ25CO0VBQ0FoQyxFQUFFLEtBQUEsSUFBQSxJQUFGQSxFQUFFLEtBQUEsS0FBQSxDQUFBLEdBQUEsS0FBQSxDQUFBLEdBQUZBLEVBQUUsQ0FBR2dDLFNBQVMsQ0FBQztFQUNmO0VBQ0EsSUFBTUcsWUFBWSxHQUFHakMsTUFBTSxDQUFDaUMsWUFBWSxDQUFBLENBQUU7RUFDMUNBLFlBQVksS0FBQSxJQUFBLElBQVpBLFlBQVksS0FBQSxLQUFBLENBQUEsR0FBQSxLQUFBLENBQUEsR0FBWkEsWUFBWSxDQUFFQyxlQUFlLENBQUEsQ0FBRTtFQUUvQjNCLFFBQVEsQ0FBQ2tCLElBQUksQ0FBQ1UsV0FBVyxDQUFDekIsUUFBUSxDQUFDO0VBQ25DQSxRQUFRLEdBQUcsSUFBSTtBQUNqQjtBQUFDLElBQUEwQixRQUFBLEdBQUF4QyxPQUFBLGNBRWNELFNBQVMiLCJmaWxlIjoidXRpbHMvY2xpcGJvYXJkLmpzIiwic291cmNlc0NvbnRlbnQiOltudWxsLCJleHBvcnQgY29uc3QgY2xpcGJvYXJkID0gKHRleHQsIGNiKSA9PiB7XG4gICAgdmFyIF9hO1xuICAgIGlmICh0eXBlb2Ygd2luZG93ID09PSAndW5kZWZpbmVkJyB8fCB0eXBlb2YgdGV4dCA9PT0gJ3VuZGVmaW5lZCcgfHwgKCcnICsgdGV4dCkgPT09ICdudWxsJylcbiAgICAgICAgcmV0dXJuO1xuICAgIGNvbnN0IHN0ciA9ICcnICsgdGV4dDtcbiAgICBpZiAoKF9hID0gbmF2aWdhdG9yLmNsaXBib2FyZCkgPT09IG51bGwgfHwgX2EgPT09IHZvaWQgMCA/IHZvaWQgMCA6IF9hLndyaXRlVGV4dCkge1xuICAgICAgICBuYXZpZ2F0b3IuY2xpcGJvYXJkLndyaXRlVGV4dChzdHIpLnRoZW4oKCkgPT4gY2IgPT09IG51bGwgfHwgY2IgPT09IHZvaWQgMCA/IHZvaWQgMCA6IGNiKHRydWUpLCAoKSA9PiBmYWxsYmFja0NvcHkoc3RyLCBjYikpO1xuICAgICAgICByZXR1cm47XG4gICAgfVxuICAgIGZhbGxiYWNrQ29weShzdHIsIGNiKTtcbn07XG5mdW5jdGlvbiBmYWxsYmFja0NvcHkodGV4dCwgY2IpIHtcbiAgICBjb25zdCBpc1JUTCA9IGRvY3VtZW50LmRvY3VtZW50RWxlbWVudC5nZXRBdHRyaWJ1dGUoJ2RpcicpID09PSAncnRsJztcbiAgICBsZXQgZmFrZUVsZW0gPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCd0ZXh0YXJlYScpO1xuICAgIC8vIFByZXZlbnQgem9vbWluZyBvbiBpT1NcbiAgICBmYWtlRWxlbS5zdHlsZS5mb250U2l6ZSA9ICcxMnB0JztcbiAgICAvLyBSZXNldCBib3ggbW9kZWxcbiAgICBmYWtlRWxlbS5zdHlsZS5ib3JkZXIgPSAnMCc7XG4gICAgZmFrZUVsZW0uc3R5bGUucGFkZGluZyA9ICcwJztcbiAgICBmYWtlRWxlbS5zdHlsZS5tYXJnaW4gPSAnMCc7XG4gICAgLy8gTW92ZSBlbGVtZW50IG91dCBvZiBzY3JlZW4gaG9yaXpvbnRhbGx5XG4gICAgZmFrZUVsZW0uc3R5bGUucG9zaXRpb24gPSAnYWJzb2x1dGUnO1xuICAgIGZha2VFbGVtLnN0eWxlW2lzUlRMID8gJ3JpZ2h0JyA6ICdsZWZ0J10gPSAnLTk5OTlweCc7XG4gICAgLy8gTW92ZSBlbGVtZW50IHRvIHRoZSBzYW1lIHBvc2l0aW9uIHZlcnRpY2FsbHlcbiAgICBjb25zdCB5UG9zaXRpb24gPSB3aW5kb3cucGFnZVlPZmZzZXQgfHwgZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LnNjcm9sbFRvcDtcbiAgICBmYWtlRWxlbS5zdHlsZS50b3AgPSBgJHt5UG9zaXRpb259cHhgO1xuICAgIGZha2VFbGVtLnNldEF0dHJpYnV0ZSgncmVhZG9ubHknLCAnJyk7XG4gICAgZmFrZUVsZW0udmFsdWUgPSB0ZXh0O1xuICAgIGRvY3VtZW50LmJvZHkuYXBwZW5kQ2hpbGQoZmFrZUVsZW0pO1xuICAgIC8vIG1ha2Ugc2VsZWN0aW9uXG4gICAgZmFrZUVsZW0uc2VsZWN0KCk7XG4gICAgZmFrZUVsZW0uc2V0U2VsZWN0aW9uUmFuZ2UoMCwgZmFrZUVsZW0udmFsdWUubGVuZ3RoKTtcbiAgICBsZXQgc3VjY2VlZGVkO1xuICAgIHRyeSB7XG4gICAgICAgIHN1Y2NlZWRlZCA9IGRvY3VtZW50LmV4ZWNDb21tYW5kKCdjb3B5Jyk7XG4gICAgfVxuICAgIGNhdGNoIChlcnJvcikge1xuICAgICAgICBzdWNjZWVkZWQgPSBmYWxzZTtcbiAgICB9XG4gICAgY2IgPT09IG51bGwgfHwgY2IgPT09IHZvaWQgMCA/IHZvaWQgMCA6IGNiKHN1Y2NlZWRlZCk7XG4gICAgLy8gcmVtb3ZlIHRoZSBzZWxlY3Rpb25cbiAgICBjb25zdCBnZXRTZWxlY3Rpb24gPSB3aW5kb3cuZ2V0U2VsZWN0aW9uKCk7XG4gICAgZ2V0U2VsZWN0aW9uID09PSBudWxsIHx8IGdldFNlbGVjdGlvbiA9PT0gdm9pZCAwID8gdm9pZCAwIDogZ2V0U2VsZWN0aW9uLnJlbW92ZUFsbFJhbmdlcygpO1xuICAgIGRvY3VtZW50LmJvZHkucmVtb3ZlQ2hpbGQoZmFrZUVsZW0pO1xuICAgIGZha2VFbGVtID0gbnVsbDtcbn1cbmV4cG9ydCBkZWZhdWx0IGNsaXBib2FyZDsiXSwic291cmNlUm9vdCI6Ii4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYyJ9

package/lib/utils/ref.d.ts

@@ -0,0 +1,4 @@
+import type { Ref } from 'react';
+export declare function fillRef<T>(ref: Ref<T>, node: T): void;
+export declare function composeRef<T>(...refs: Ref<T>[]): Ref<T>;
+export declare function useComposeRef<T>(...refs: Ref<T>[]): Ref<T>;

package/lib/utils/ref.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.composeRef = composeRef;
+exports.fillRef = fillRef;
+exports.useComposeRef = useComposeRef;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = require("react");
+function fillRef(ref, node) {
+  if (typeof ref === 'function') {
+    ref(node);
+  } else if ((0, _typeof2["default"])(ref) === 'object' && ref && 'current' in ref) {
+    ref.current = node;
+  }
+}
+function composeRef() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+  var refList = refs.filter(Boolean);
+  if (refList.length <= 1) {
+    return refList[0];
+  }
+  return function (node) {
+    refs.forEach(function (ref) {
+      fillRef(ref, node);
+    });
+  };
+}
+function useComposeRef() {
+  for (var _len2 = arguments.length, refs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    refs[_key2] = arguments[_key2];
+  }
+  return (0, _react.useMemo)(function () {
+    return composeRef.apply(void 0, refs);
+  }, refs);
+}
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy91dGlscy9yZWYudHMiXSwibmFtZXMiOlsiX3JlYWN0IiwicmVxdWlyZSIsImZpbGxSZWYiLCJyZWYiLCJub2RlIiwiX3R5cGVvZjIiLCJjdXJyZW50IiwiY29tcG9zZVJlZiIsIl9sZW4iLCJhcmd1bWVudHMiLCJsZW5ndGgiLCJyZWZzIiwiQXJyYXkiLCJfa2V5IiwicmVmTGlzdCIsImZpbHRlciIsIkJvb2xlYW4iLCJmb3JFYWNoIiwidXNlQ29tcG9zZVJlZiIsIl9sZW4yIiwiX2tleTIiLCJ1c2VNZW1vIiwiYXBwbHkiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7QUFDQSxJQUFBQSxNQUFBLEdBQUFDLE9BQUE7QUFFTSxTQUFVQyxPQUFPQSxDQUFJQyxHQUFXLEVBQUVDLElBQU8sRUFBQTtFQUM3QyxJQUFJLE9BQU9ELEdBQUcsS0FBSyxVQUFVLEVBQUU7SUFDN0JBLEdBQUcsQ0FBQ0MsSUFBSSxDQUFDO0VBQ1gsQ0FBQyxNQUFNLElBQUksSUFBQUMsUUFBQSxhQUFPRixHQUFHLE1BQUssUUFBUSxJQUFJQSxHQUFHLElBQUksU0FBUyxJQUFJQSxHQUFHLEVBQUU7SUFDNURBLEdBQXNCLENBQUNHLE9BQU8sR0FBR0YsSUFBSTtFQUN4QztBQUNGO0FBRU0sU0FBVUcsVUFBVUEsQ0FBQSxFQUFxQjtFQUFBLFNBQUFDLElBQUEsR0FBQUMsU0FBQSxDQUFBQyxNQUFBLEVBQWRDLElBQWMsT0FBQUMsS0FBQSxDQUFBSixJQUFBLEdBQUFLLElBQUEsTUFBQUEsSUFBQSxHQUFBTCxJQUFBLEVBQUFLLElBQUE7SUFBZEYsSUFBYyxDQUFBRSxJQUFBLElBQUFKLFNBQUEsQ0FBQUksSUFBQTtFQUFBO0VBQzdDLElBQU1DLE9BQU8sR0FBR0gsSUFBSSxDQUFDSSxNQUFNLENBQUNDLE9BQU8sQ0FBQztFQUNwQyxJQUFJRixPQUFPLENBQUNKLE1BQU0sSUFBSSxDQUFDLEVBQUU7SUFDdkIsT0FBT0ksT0FBTyxDQUFDLENBQUMsQ0FBQztFQUNuQjtFQUVBLE9BQU8sVUFBQ1YsSUFBTyxFQUFJO0lBQ2pCTyxJQUFJLENBQUNNLE9BQU8sQ0FBQyxVQUFDZCxHQUFHLEVBQUk7TUFDbkJELE9BQU8sQ0FBQ0MsR0FBRyxFQUFFQyxJQUFJLENBQUM7SUFDcEIsQ0FBQyxDQUFDO0VBQ0osQ0FBQztBQUNIO0FBRU0sU0FBVWMsYUFBYUEsQ0FBQSxFQUFxQjtFQUFBLFNBQUFDLEtBQUEsR0FBQVYsU0FBQSxDQUFBQyxNQUFBLEVBQWRDLElBQWMsT0FBQUMsS0FBQSxDQUFBTyxLQUFBLEdBQUFDLEtBQUEsTUFBQUEsS0FBQSxHQUFBRCxLQUFBLEVBQUFDLEtBQUE7SUFBZFQsSUFBYyxDQUFBUyxLQUFBLElBQUFYLFNBQUEsQ0FBQVcsS0FBQTtFQUFBO0VBQ2hELE9BQU8sSUFBQUMsY0FBTyxFQUFDO0lBQUEsT0FBTWQsVUFBVSxDQUFBZSxLQUFBLFNBQUlYLElBQUksQ0FBQztFQUFBLEdBQUVBLElBQUksQ0FBQztBQUNqRCIsImZpbGUiOiJ1dGlscy9yZWYuanMiLCJzb3VyY2VzQ29udGVudCI6W251bGxdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=

package/lib/utils/uuid.d.ts

@@ -0,0 +1,2 @@
+export declare function uuid(): string;
+export default uuid;

package/lib/utils/uuid.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+exports.uuid = uuid;
+function uuid() {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  function S4() {
+    return ((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
+  }
+  // Set version 4 bits and variant bits per RFC 4122
+  var s3 = S4();
+  var version4 = '4' + s3.substring(1); // version nibble = 4
+  var s4 = S4();
+  var variant = (parseInt(s4[0], 16) & 0x3 | 0x8).toString(16) + s4.substring(1); // variant bits = 10xx
+  return S4() + S4() + '-' + S4() + '-' + version4 + '-' + variant + '-' + S4() + S4() + S4();
+}
+var _default = exports["default"] = uuid;
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy91dGlscy91dWlkLnRzIl0sIm5hbWVzIjpbInV1aWQiLCJjcnlwdG8iLCJyYW5kb21VVUlEIiwiUzQiLCJNYXRoIiwicmFuZG9tIiwidG9TdHJpbmciLCJzdWJzdHJpbmciLCJzMyIsInZlcnNpb240IiwiczQiLCJ2YXJpYW50IiwicGFyc2VJbnQiLCJfZGVmYXVsdCIsImV4cG9ydHMiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBTSxTQUFVQSxJQUFJQSxDQUFBLEVBQUE7RUFDbEIsSUFBSSxPQUFPQyxNQUFNLEtBQUssV0FBVyxJQUFJLE9BQU9BLE1BQU0sQ0FBQ0MsVUFBVSxLQUFLLFVBQVUsRUFBRTtJQUM1RSxPQUFPRCxNQUFNLENBQUNDLFVBQVUsQ0FBQSxDQUFFO0VBQzVCO0VBRUEsU0FBU0MsRUFBRUEsQ0FBQSxFQUFBO0lBQ1QsT0FBTyxDQUFFLENBQUMsQ0FBQyxHQUFHQyxJQUFJLENBQUNDLE1BQU0sQ0FBQSxDQUFFLElBQUksT0FBTyxHQUFJLENBQUMsRUFBRUMsUUFBUSxDQUFDLEVBQUUsQ0FBQyxDQUFDQyxTQUFTLENBQUMsQ0FBQyxDQUFDO0VBQ3hFO0VBRUE7RUFDQSxJQUFNQyxFQUFFLEdBQUdMLEVBQUUsQ0FBQSxDQUFFO0VBQ2YsSUFBTU0sUUFBUSxHQUFHLEdBQUcsR0FBR0QsRUFBRSxDQUFDRCxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztFQUN4QyxJQUFNRyxFQUFFLEdBQUdQLEVBQUUsQ0FBQSxDQUFFO0VBQ2YsSUFBTVEsT0FBTyxHQUFHLENBQUVDLFFBQVEsQ0FBQ0YsRUFBRSxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxHQUFHLEdBQUcsR0FBSSxHQUFHLEVBQUVKLFFBQVEsQ0FBQyxFQUFFLENBQUMsR0FBR0ksRUFBRSxDQUFDSCxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztFQUVwRixPQUFPSixFQUFFLENBQUEsQ0FBRSxHQUFHQSxFQUFFLENBQUEsQ0FBRSxHQUFHLEdBQUcsR0FBR0EsRUFBRSxDQUFBLENBQUUsR0FBRyxHQUFHLEdBQUdNLFFBQVEsR0FBRyxHQUFHLEdBQUdFLE9BQU8sR0FBRyxHQUFHLEdBQUdSLEVBQUUsQ0FBQSxDQUFFLEdBQUdBLEVBQUUsQ0FBQSxDQUFFLEdBQUdBLEVBQUUsQ0FBQSxDQUFFO0FBQzdGO0FBQUMsSUFBQVUsUUFBQSxHQUFBQyxPQUFBLGNBRWNkLElBQUkiLCJmaWxlIjoidXRpbHMvdXVpZC5qcyIsInNvdXJjZXNDb250ZW50IjpbbnVsbF0sInNvdXJjZVJvb3QiOiIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMifQ==

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1money/component-ui",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "description": "React Components based on primereact for 1money front-end projects",
   "main": "lib/index.js",
   "module": "es/index.js",

package/scripts/mcp-server/examples.generated.json

@@ -37,12 +37,6 @@
       "source": "readme",
       "compilable": true
     },
-    "034773bdaca67ca0d5a236ca92c3d84403ca823cb8249eacea2414545523ab3d": {
-      "title": "Grouped",
-      "code": "{\n    const [value, setValue] = useState<string | number | undefined>('usdt');\n\n    return (\n      <Select\n        {...args}\n        value={value}\n        onChange={(nextValue, option) => {\n          setValue(nextValue as string | number | undefined);\n          args.onChange?.(nextValue, option);\n        }}\n      />\n    );\n  }",
-      "source": "stories",
-      "compilable": false
-    },
     "03ae4647e3bd8aa48fde505061070eb0425296d0b86b97f0b240c36897efc68f": {
       "title": "Split",
       "code": "<Space split={<span>|</span>} size={SPACE_SIZE.large}>\n      <span>Alpha</span>\n      <span>Beta</span>\n      <span>Gamma</span>\n    </Space>",
@@ -205,12 +199,6 @@
       "source": "stories",
       "compilable": false
     },
-    "123291e7b1b33126adc91e8204e4002c37c71a74eb5bfca67a4da71b9aec2f6a": {
-      "title": "Default",
-      "code": "{\n    const [value, setValue] = useState<string | number | undefined>('btc');\n\n    return (\n      <Select\n        {...args}\n        value={value}\n        onChange={(nextValue, option) => {\n          setValue(nextValue as string | number | undefined);\n          args.onChange?.(nextValue, option);\n        }}\n      />\n    );\n  }",
-      "source": "stories",
-      "compilable": false
-    },
     "1238535c7f91f78671738663cda3f3ed6984f0c29a539c190b264b03630e6d69": {
       "title": "Disabled",
       "code": "<Dropdown {...args} disabled content={<MenuContent />}>\n      <Button disabled>Disabled</Button>\n    </Dropdown>",
@@ -235,12 +223,6 @@
       "source": "readme",
       "compilable": true
     },
-    "17a413d259fae192ca2f0c09fc23af856852b5f5ca65c1efa9dcb95480776ede": {
-      "title": "Disabled Vs Read Only",
-      "code": "<div style={{ display: 'flex', gap: 24 }}>\n      <div style={storyContainerStyle}>\n        <Select\n          label=\"Disabled\"\n          options={OPTIONS}\n          value=\"btc\"\n          disabled\n        />\n      </div>\n      <div style={storyContainerStyle}>\n        <Select\n          label=\"Read only\"\n          options={OPTIONS}\n          value=\"btc\"\n          readOnly\n        />\n      </div>\n    </div>",
-      "source": "stories",
-      "compilable": true
-    },
     "17aad2a9b23bb7f9a4768f770a9b9b5b06d74dab24c5200037505b0047ec2391": {
       "title": "Controlled",
       "code": "{\n    const [open, setOpen] = useState(false);\n    return (\n      <div style={ANCHOR_WRAPPER_STYLE}>\n        <button id=\"tooltip-controlled\">Anchor</button>\n        <div style={CONTROL_ROW_STYLE}>\n          <button onClick={() => setOpen(true)}>Open</button>\n          <button onClick={() => setOpen(false)}>Close</button>\n          <button onClick={() => setOpen((v) => !v)}>Toggle</button>\n        </div>\n        <Tooltip\n          anchorSelect=\"#tooltip-controlled\"\n          title=\"Controlled\"\n          body=\"This tooltip is controlled externally.\"\n          open={open}\n          onOpenChange={setOpen}\n        />\n      </div>\n    );\n  }",
@@ -283,12 +265,6 @@
       "source": "stories",
       "compilable": true
     },
-    "1cc244bf13712c43e79b378e25198234696ed488d0a147473327f0eb16c461bc": {
-      "title": "Searchable Sizes",
-      "code": "{\n    const [largeValue, setLargeValue] = useState<string | number | undefined>('usdt');\n    const [smallValue, setSmallValue] = useState<string | number | undefined>('usdt');\n\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 24, width: 320 }}>\n        <Select\n          {...args}\n          size=\"large\"\n          label=\"Large\"\n          value={largeValue}\n          onChange={(nextValue, option) => {\n            setLargeValue(nextValue as string | number | undefined);\n            args.onChange?.(nextValue, option);\n          }}\n        />\n        <Select\n          {...args}\n          size=\"small\"\n          label=\"Small\"\n          filterInputAutoFocus={false}\n          value={smallValue}\n          onChange={(nextValue, option) => {\n            setSmallValue(nextValue as string | number | undefined);\n            args.onChange?.(nextValue, option);\n          }}\n        />\n      </div>\n    );\n  }",
-      "source": "stories",
-      "compilable": false
-    },
     "1d0cc410e4f667fa13d9ad249ca801acda6fd51fc78c87c3b00209163c48df6b": {
       "title": "Range Selection",
       "code": "<Calendar\n  label=\"Date Range\"\n  selectionMode=\"range\"\n  numberOfMonths={2}\n/>",
@@ -349,12 +325,6 @@
       "source": "readme",
       "compilable": true
     },
-    "20ec463b0b6df55a2fa2c5df4836735067151eb22ca13e76ea7b7795465b3141": {
-      "title": "Without Portal",
-      "code": "{\n    const [value, setValue] = useState<string | number | undefined>('btc');\n\n    return (\n      <div style={{ position: 'relative' }}>\n        <Select\n          {...args}\n          portal={false}\n          value={value}\n          onChange={(nextValue, option) => {\n            setValue(nextValue as string | number | undefined);\n            args.onChange?.(nextValue, option);\n          }}\n        />\n      </div>\n    );\n  }",
-      "source": "stories",
-      "compilable": false
-    },
     "216b625401b1ee29a2c8f02427f776e18dd670858e53fd87ea414473832ba9c9": {
       "title": "With Title",
       "code": "<div style={ANCHOR_WRAPPER_STYLE}>\n      <button id=\"tooltip-title\">Hover me</button>\n      <Tooltip {...args} anchorSelect=\"#tooltip-title\" />\n    </div>",
@@ -385,6 +355,12 @@
       "source": "stories",
       "compilable": false
     },
+    "22db460cb1da47a1d59eeff302bd4b045cc8fa5f8597eba6047dfc4c668f58f6": {
+      "title": "Overview",
+      "code": "{\n    const sizes = ['large', 'small'] as const;\n    const statuses = ['default', 'error'] as const;\n    const valueTypes = ['Placeholder', 'Filled'] as const;\n\n    return (\n      <div style={stackStyle}>\n        {sizes.map((size) => (\n          <div key={size}>\n            <h3 style={{ ...sectionTitleStyle, textTransform: 'capitalize' }}>{size}</h3>\n            <div style={rowStyle}>\n              {statuses.map((status) =>\n                valueTypes.map((vt) => (\n                  <div key={`${status}-${vt}`} style={cellStyle(310)}>\n                    <p style={captionStyle}>\n                      {status} / {vt}\n                    </p>\n                    <Select\n                      size={size}\n                      status={status}\n                      label=\"Label\"\n                      feedback=\"Feedback\"\n                      placeholder=\"Value\"\n                      options={OPTIONS}\n                      defaultValue={vt === 'Filled' ? 'btc' : undefined}\n                    />\n                  </div>\n                )),\n              )}\n              {valueTypes.map((vt) => (\n                <div key={`readonly-${vt}`} style={cellStyle(310)}>\n                  <p style={captionStyle}>read-only / {vt}</p>\n                  <Select\n                    size={size}\n                    readOnly\n                    label=\"Label\"\n                    options={OPTIONS}\n                    placeholder=\"Value\"\n                    defaultValue={vt === 'Filled' ? 'btc' : undefined}\n                  />\n                </div>\n              ))}\n              {valueTypes.map((vt) => (\n                <div key={`disabled-${vt}`} style={cellStyle(310)}>\n                  <p style={captionStyle}>disabled / {vt}</p>\n                  <Select\n                    size={size}\n                    disabled\n                    label=\"Label\"\n                    options={OPTIONS}\n                    placeholder=\"Value\"\n                    defaultValue={vt === 'Filled' ? 'btc' : undefined}\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
     "22edc8d5014aba685af83f60b94c089e387cc95677d233691190f5e2d031e262": {
       "title": "Dotted",
       "code": "<div>\n      <p>Lorem ipsum dolor sit amet.</p>\n      <Divider variant=\"dotted\" />\n      <p>Lorem ipsum dolor sit amet.</p>\n      <Divider variant=\"dotted\">Dotted</Divider>\n      <p>Lorem ipsum dolor sit amet.</p>\n    </div>",
@@ -547,6 +523,12 @@
       "source": "stories",
       "compilable": false
     },
+    "321187232dc3b48e95ce3712c00ca272ee685f253daca21db994104a5eb509d2": {
+      "title": "Searchable",
+      "code": "{\n    const [basic, setBasic] = useState<string | number | undefined>('usdt');\n    const [searchOnly, setSearchOnly] = useState<string | number | undefined>(undefined);\n    const [searchValue, setSearchValue] = useState('');\n    const [smallValue, setSmallValue] = useState<string | number | undefined>('usdt');\n\n    const trimmed = searchValue.trim().toLowerCase();\n    const filteredOptions = trimmed\n      ? ASSET_OPTIONS.filter((option) => {\n          const label = String(option.label).toLowerCase();\n          const description = String(option.description ?? '').toLowerCase();\n          const optionValue = String(option.value).toLowerCase();\n          return (\n            label.includes(trimmed) ||\n            description.includes(trimmed) ||\n            optionValue.includes(trimmed)\n          );\n        })\n      : [];\n\n    return (\n      <div style={rowStyle}>\n        <div style={cellStyle(320)}>\n          <p style={captionStyle}>Default (large)</p>\n          <Select\n            label=\"Asset\"\n            searchable\n            searchPlaceholder=\"Search\"\n            options={ASSET_OPTIONS}\n            value={basic}\n            onChange={(next) => setBasic(next as string | number | undefined)}\n          />\n        </div>\n        <div style={cellStyle(320)}>\n          <p style={captionStyle}>Small + grouped</p>\n          <Select\n            label=\"Asset\"\n            size=\"small\"\n            searchable\n            searchPlaceholder=\"Search\"\n            filterInputAutoFocus={false}\n            options={GROUPED_ASSET_OPTIONS}\n            renderOption={renderAssetOption}\n            value={smallValue}\n            onChange={(next) => setSmallValue(next as string | number | undefined)}\n          />\n        </div>\n        <div style={cellStyle(320)}>\n          <p style={captionStyle}>Controlled filter (search-only)</p>\n          <Select\n            label=\"Asset\"\n            searchable\n            searchPlaceholder=\"Search\"\n            options={filteredOptions}\n            searchValue={searchValue}\n            emptyContent={trimmed ? 'No matches' : 'Type to search assets'}\n            value={searchOnly}\n            onSearchChange={setSearchValue}\n            onChange={(next) => setSearchOnly(next as string | number | undefined)}\n          />\n        </div>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
     "3298cc00509da7da73ca2da525874e520a453a289a0c4985f6f11249b5768dba": {
       "title": "Full Width",
       "code": "<Tabs items={DEFAULT_ITEMS} fullWidth />",
@@ -619,9 +601,9 @@
       "source": "stories",
       "compilable": false
     },
-    "388bcf7888091d287918f2abfe24285c3cfff0239bf53bd18a57521a4d44c8e1": {
-      "title": "Custom",
-      "code": "{\n    const [selected, setSelected] = useState<Array<string | number>>(['btc', 'eth', 'sol']);\n    const [open, setOpen] = useState(false);\n\n    const toggle = (value: string | number) => {\n      setSelected((prev) =>\n        prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value],\n      );\n    };\n\n    const triggerLabel = selected.length > 0\n      ? `${selected.length} selected`\n      : null;\n\n    return (\n      <div style={storyContainerStyle}>\n        <Select.Custom\n          label=\"Assets\"\n          placeholder=\"Select assets\"\n          open={open}\n          onOpenChange={setOpen}\n          selectedTemplate={triggerLabel}\n        >\n          {() => (\n            <>\n              <div style={customPanelHeaderStyle}>\n                <span style={customPanelTitleStyle}>\n                  {selected.length} selected\n                </span>\n                <button\n                  type=\"button\"\n                  style={customClearAllStyle}\n                  onClick={() => setSelected([])}\n                >\n                  <Icons name=\"cross\" size={14} color=\"currentColor\" />\n                  Clear all\n                </button>\n              </div>\n              {ASSET_OPTIONS.map((option) => {\n                const isSelected = selected.includes(option.value);\n                return (\n                  <button\n                    key={option.value}\n                    type=\"button\"\n                    style={customRowStyle}\n                    onClick={() => toggle(option.value)}\n                  >\n                    <AssetMark value={option.value} />\n                    <span style={assetOptionLabelStyle}>{option.label}</span>\n                    <span style={customCheckboxStyle(isSelected)}>\n                      {isSelected && <Icons name=\"check\" size={14} color=\"currentColor\" />}\n                    </span>\n                  </button>\n                );\n              })}\n            </>\n          )}\n        </Select.Custom>\n      </div>\n    );\n  }",
+    "38c0990d0517329d8af0b08ed465ae4f70df6530837272d36afcf65edfb854bf": {
+      "title": "Grouped",
+      "code": "{\n    const [basic, setBasic] = useState<string | number | undefined>('usdt');\n    const [assets, setAssets] = useState<string | number | undefined>('usdt');\n\n    return (\n      <div style={rowStyle}>\n        <div style={cellStyle(310)}>\n          <p style={captionStyle}>Plain groups</p>\n          <Select\n            label=\"Asset\"\n            options={GROUPED_OPTIONS}\n            value={basic}\n            onChange={(next) => setBasic(next as string | number | undefined)}\n          />\n        </div>\n        <div style={cellStyle(310)}>\n          <p style={captionStyle}>Groups + custom render</p>\n          <Select\n            label=\"Asset\"\n            options={GROUPED_ASSET_OPTIONS}\n            renderOption={renderAssetOption}\n            value={assets}\n            onChange={(next) => setAssets(next as string | number | undefined)}\n          />\n        </div>\n      </div>\n    );\n  }",
       "source": "stories",
       "compilable": true
     },
@@ -685,12 +667,6 @@
       "source": "stories",
       "compilable": true
     },
-    "41af856d1d6a822e2c95f25c337807c0d18d1e445d318d07621beba85ce3e926": {
-      "title": "Searchable Small",
-      "code": "{\n    const [value, setValue] = useState<string | number | undefined>('usdt');\n\n    return (\n      <div style={storyContainerStyle}>\n        <Select\n          {...args}\n          value={value}\n          onChange={(nextValue, option) => {\n            setValue(nextValue as string | number | undefined);\n            args.onChange?.(nextValue, option);\n          }}\n        />\n      </div>\n    );\n  }",
-      "source": "stories",
-      "compilable": false
-    },
     "42725955e8eb348643a00cbbd15d1485475e1917d44f5e685f6f2a094fa6a4a5": {
       "title": "Canonical usage",
       "code": "import { Space } from '@1money/component-ui';\n// or\nimport { Space } from '@1money/component-ui/Space';\nimport { SPACE_ALIGN, SPACE_DIRECTION, SPACE_SIZE } from '@1money/component-ui/Space';",
@@ -709,12 +685,6 @@
       "source": "stories",
       "compilable": true
     },
-    "44c4b25e35236d2eaf4d26824badf330c6495194077c815a662b000591be91be": {
-      "title": "Multiple Collapsed",
-      "code": "{\n    const [value, setValue] = useState<Array<string | number>>([\n      'btc',\n      'eth',\n      'usdt',\n      'usdc',\n      'sol',\n      'doge',\n    ]);\n\n    return (\n      <div style={{ width: 320 }}>\n        <Select\n          {...args}\n          multiple\n          value={value}\n          onChange={(nextValue, option) => {\n            setValue((nextValue as Array<string | number>) ?? []);\n            args.onChange?.(nextValue, option);\n          }}\n        />\n      </div>\n    );\n  }",
-      "source": "stories",
-      "compilable": false
-    },
     "45540f738e1068d8a124b639401d1c1ce52ae887afdc2aec99071704644db73a": {
       "title": "Toolbar Spacing",
       "code": "<div style={DEMO_PAGE_STYLE}>\n      <div style={{ ...DEMO_PANEL_STYLE, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n        <Space size={SPACE_SIZE.small} align={SPACE_ALIGN.center}>\n          <div style={DEMO_INLINE_ITEM_STYLE}>Date Range</div>\n          <div style={DEMO_INLINE_ITEM_STYLE}>Status</div>\n          <div style={DEMO_INLINE_ITEM_STYLE}>Currency</div>\n        </Space>\n        <Space size={SPACE_SIZE.small} align={SPACE_ALIGN.center}>\n          <div style={DEMO_INLINE_ITEM_STYLE}>Export</div>\n          <div style={DEMO_INLINE_ITEM_STYLE}>Refresh</div>\n          <div style={DEMO_INLINE_ITEM_STYLE}>Create</div>\n        </Space>\n      </div>\n    </div>",
@@ -853,12 +823,6 @@
       "source": "readme",
       "compilable": true
     },
-    "572f2d8e36841d6c929bf0ee4c11423ef33dc618291ed6bd10d900f09cf64d11": {
-      "title": "Frameless",
-      "code": "{\n    const [value, setValue] = useState<string | number | undefined>('btc');\n\n    return (\n      <Select\n        {...args}\n        value={value}\n        variant=\"frameless\"\n        prefix={<Icons name=\"usd\" size={24} color=\"currentColor\" />}\n        onChange={(nextValue, option) => {\n          setValue(nextValue as string | number | undefined);\n          args.onChange?.(nextValue, option);\n        }}\n      />\n    );\n  }",
-      "source": "stories",
-      "compilable": false
-    },
     "57e5a7e81ccfa1d876cf40e95b6165f9d630fe343bc29dbb15c3fe546e689e62": {
       "title": "Default",
       "code": "<div style={wrapperStyle}>\n      <Step {...args} />\n    </div>",
@@ -973,6 +937,12 @@
       "source": "canonical",
       "compilable": true
     },
+    "622328c2d21bf88d74f96e2eef2801175864c2af381a438ab39a4cbccc92f623": {
+      "title": "Required Optional",
+      "code": "<div style={rowStyle}>\n      <div style={cellStyle(310)}>\n        <p style={captionStyle}>Required (default)</p>\n        <Select label=\"Label\" options={OPTIONS} placeholder=\"Required field\" />\n      </div>\n      <div style={cellStyle(310)}>\n        <p style={captionStyle}>Optional (required=false)</p>\n        <Select\n          label=\"Label\"\n          required={false}\n          options={OPTIONS}\n          placeholder=\"Optional field\"\n        />\n      </div>\n      <div style={cellStyle(310)}>\n        <p style={captionStyle}>With info</p>\n        <Select\n          label=\"Label\"\n          info={<Icons name=\"info\" size={16} />}\n          options={OPTIONS}\n          placeholder=\"Value\"\n        />\n      </div>\n      <div style={cellStyle(310)}>\n        <p style={captionStyle}>With description</p>\n        <Select\n          label=\"Label\"\n          description=\"Helper copy below the label\"\n          options={OPTIONS}\n          placeholder=\"Value\"\n        />\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
     "62b5efe615c2669f474d5e6b4b89e9548d25b067decf9570da5994151f8c3d63": {
       "title": "Import",
       "code": "import { Radio, RadioGroup } from '@1money/component-ui';\n// or tree-shakeable\nimport { Radio, RadioGroup } from '@1money/component-ui/Radio';",
@@ -1069,12 +1039,6 @@
       "source": "stories",
       "compilable": false
     },
-    "72f524de604ba1db3308d0b8f5131b0204abf6a3e411be78f4f61d0fc2081eb7": {
-      "title": "Render Option Content",
-      "code": "{\n    const [value, setValue] = useState<string | number | undefined>('usdt');\n\n    return (\n      <div style={storyContainerStyle}>\n        <Select\n          {...args}\n          value={value}\n          renderOptionContent={renderAssetOptionContent}\n          onChange={(nextValue, option) => {\n            setValue(nextValue as string | number | undefined);\n            args.onChange?.(nextValue, option);\n          }}\n        />\n      </div>\n    );\n  }",
-      "source": "stories",
-      "compilable": false
-    },
     "7318e5e19b35c2334284717d2b44382c3f0aa456d1d61c6892e3211c2c77135d": {
       "title": "Canonical usage",
       "code": "import { Pagination, usePagination } from '@1money/component-ui';\n// or\nimport { Pagination, usePagination } from '@1money/component-ui/Pagination';",
@@ -1201,12 +1165,6 @@
       "source": "stories",
       "compilable": false
     },
-    "7f9b721c6811ebeeeda10ed23eb590ad0f0d00b3e64ce2aedb8a6e3b12179071": {
-      "title": "Grouped Asset Options",
-      "code": "{\n    const [value, setValue] = useState<string | number | undefined>('usdt');\n\n    return (\n      <div style={storyContainerStyle}>\n        <Select\n          {...args}\n          value={value}\n          renderOption={renderAssetOption}\n          onChange={(nextValue, option) => {\n            setValue(nextValue as string | number | undefined);\n            args.onChange?.(nextValue, option);\n          }}\n        />\n      </div>\n    );\n  }",
-      "source": "stories",
-      "compilable": false
-    },
     "7fa92e052831cae87c3f0b935466ebe2f827bd696b626583810266f584e63167": {
       "title": "Page Loading Overlay",
       "code": "const PageLoader = ({ isLoading }: { isLoading: boolean }) => {\n  if (!isLoading) return null;\n\n  return (\n    <div className=\"page-loader-overlay\">\n      <Spinner size={48} />\n    </div>\n  );\n};",
@@ -1267,6 +1225,12 @@
       "source": "readme",
       "compilable": true
     },
+    "8403e3e85f925998931bcd3fef7363c0d75b3598527183aa58a4c63df20f0bce": {
+      "title": "Loading",
+      "code": "<div style={rowStyle}>\n      <div style={cellStyle(310)}>\n        <p style={captionStyle}>Large</p>\n        <Select label=\"Label\" options={OPTIONS} placeholder=\"Loading…\" loading />\n      </div>\n      <div style={cellStyle(310)}>\n        <p style={captionStyle}>Small</p>\n        <Select size=\"small\" label=\"Label\" options={OPTIONS} placeholder=\"Loading…\" loading />\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
     "842244e70f89e2aaf6941718de836ab3a6e08d642a4d4bb2e80cee160158470f": {
       "title": "Default",
       "code": "{\n    const sizes = ['large', 'small'] as const;\n    const statuses = ['default', 'error'] as const;\n    const valueTypes = ['Placeholder', 'Filled'] as const;\n\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>\n        {sizes.map((size) => (\n          <div key={size}>\n            <h3 style={{ margin: '0 0 16px', textTransform: 'capitalize' }}>{size}</h3>\n            <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>\n              {statuses.map((status) =>\n                valueTypes.map((vt) => (\n                  <div key={`${status}-${vt}`} style={{ width: 310 }}>\n                    <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>\n                      {status} / {vt}\n                    </p>\n                    <Input\n                      size={size}\n                      status={status}\n                      label=\"Label\"\n                      feedback=\"Feedback\"\n                      feedbackIcon={status === 'error' ? <Icons name=\"error\" size={16} /> : <Icons name=\"info\" size={16} />}\n                      placeholder=\"Value\"\n                      allowClear\n                      defaultValue={vt === 'Filled' ? 'Input value' : undefined}\n                    />\n                  </div>\n                )),\n              )}\n              {/* Read-Only */}\n              {valueTypes.map((vt) => (\n                <div key={`readonly-${vt}`} style={{ width: 310 }}>\n                  <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>\n                    read-only / {vt}\n                  </p>\n                  <Input\n                    size={size}\n                    readOnly\n                    label=\"Label\"\n                    feedback=\"Feedback\"\n                    feedbackIcon={<Icons name=\"info\" size={16} />}\n                    placeholder=\"Value\"\n                    defaultValue={vt === 'Filled' ? 'Read-only value' : undefined}\n                  />\n                </div>\n              ))}\n              {/* Disabled */}\n              {valueTypes.map((vt) => (\n                <div key={`disabled-${vt}`} style={{ width: 310 }}>\n                  <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>\n                    disabled / {vt}\n                  </p>\n                  <Input\n                    size={size}\n                    disabled\n                    label=\"Label\"\n                    feedback=\"Feedback\"\n                    feedbackIcon={<Icons name=\"info\" size={16} />}\n                    placeholder=\"Value\"\n                    defaultValue={vt === 'Filled' ? 'Disabled value' : undefined}\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        ))}\n\n        {/* ── With Prefix / Suffix ── */}\n        <div>\n          <h3 style={{ margin: '0 0 16px' }}>With Prefix / Suffix</h3>\n          <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>\n            <div style={{ width: 310 }}>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Prefix + Suffix</p>\n              <Input\n                label=\"Label\"\n                defaultValue=\"100\"\n                prefix={<span>USD</span>}\n                suffix={<span>Max</span>}\n                allowClear\n              />\n            </div>\n            <div style={{ width: 310 }}>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Prefix only</p>\n              <Input\n                label=\"Label\"\n                placeholder=\"Enter amount\"\n                prefix={<span>$</span>}\n                allowClear\n              />\n            </div>\n            <div style={{ width: 310 }}>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Suffix only</p>\n              <Input\n                label=\"Label\"\n                placeholder=\"Enter email\"\n                suffix={<span>@gmail.com</span>}\n              />\n            </div>\n          </div>\n        </div>\n\n        {/* ── Required / Info ── */}\n        <div>\n          <h3 style={{ margin: '0 0 16px' }}>Required / Info</h3>\n          <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>\n            <div style={{ width: 310 }}>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Required</p>\n              <Input\n                label=\"Label\"\n                required\n                placeholder=\"Required field\"\n              />\n            </div>\n            <div style={{ width: 310 }}>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Optional (required=false)</p>\n              <Input\n                label=\"Label\"\n                required={false}\n                placeholder=\"Optional field\"\n              />\n            </div>\n            <div style={{ width: 310 }}>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>With Info</p>\n              <Input\n                label=\"Label\"\n                info=\"Optional hint\"\n                placeholder=\"Value\"\n              />\n            </div>\n            <div style={{ width: 310 }}>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>With Tip</p>\n              <Input\n                label=\"Label\"\n                tip=\"This is a helpful tooltip\"\n                placeholder=\"Value\"\n              />\n            </div>\n            <div style={{ width: 310 }}>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Optional + Info + Tip</p>\n              <Input\n                label=\"Label\"\n                required={false}\n                info=\"Optional hint\"\n                tip=\"This is a helpful tooltip\"\n                placeholder=\"Value\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }",
@@ -1333,6 +1297,12 @@
       "source": "stories",
       "compilable": true
     },
+    "891d99f659a24e8f2a9b367205466b9a0829212be5d9614e3061c90bd45f6a24": {
+      "title": "Panel Actions",
+      "code": "{\n    const [open, setOpen] = useState(false);\n    const [value, setValue] = useState<Array<string | number>>(['btc']);\n    const [draftValue, setDraftValue] = useState<Array<string | number>>(['btc']);\n\n    return (\n      <div style={cellStyle(320)}>\n        <Select\n          label=\"Assets\"\n          placeholder=\"Select assets\"\n          options={ASSET_OPTIONS}\n          size=\"small\"\n          multiple\n          open={open}\n          value={open ? draftValue : value}\n          renderOption={renderAssetOption}\n          panelFooter={\n            <div style={panelFooterStyle}>\n              <Button\n                color=\"grey\"\n                size=\"small\"\n                style={{ flex: 1 }}\n                onClick={() => setDraftValue([])}\n              >\n                Reset\n              </Button>\n              <Button\n                size=\"small\"\n                style={{ flex: 1 }}\n                onClick={() => {\n                  setValue(draftValue);\n                  setOpen(false);\n                }}\n              >\n                Apply\n              </Button>\n            </div>\n          }\n          onOpenChange={(nextOpen) => {\n            setOpen(nextOpen);\n            setDraftValue(value);\n          }}\n          onChange={(next) => setDraftValue((next as Array<string | number>) ?? [])}\n        />\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
     "89acd530e5d3ac4d2f2cdc50085c98fc8d6ee5a3f488a16486455a35460bb354": {
       "title": "Long Text",
       "code": "<div style={PREVIEW_GRID_STYLE}>\n      <TooltipPreviewCard\n        label=\"Long body only\"\n        body={EXTRA_LONG_TEXT}\n      />\n      <TooltipPreviewCard\n        label=\"Long title + long body\"\n        title=\"This is a very long tooltip title that might wrap to multiple lines\"\n        body={EXTRA_LONG_TEXT}\n      />\n      <TooltipPreviewCard\n        label=\"Long body with placement right\"\n        body={EXTRA_LONG_TEXT}\n        placement=\"right\"\n      />\n    </div>",
@@ -1375,12 +1345,6 @@
       "source": "canonical",
       "compilable": true
     },
-    "90bea0eac958ff92526a0901cd2515a8694e96039b3d056e709ede70bd1b4678": {
-      "title": "Search Only Filtered",
-      "code": "{\n    const [value, setValue] = useState<string | number | undefined>(undefined);\n    const [searchValue, setSearchValue] = useState('');\n\n    const trimmed = searchValue.trim().toLowerCase();\n    const filteredOptions = trimmed\n      ? ASSET_OPTIONS.filter((option) => {\n          const label = String(option.label).toLowerCase();\n          const description = String(option.description ?? '').toLowerCase();\n          const optionValue = String(option.value).toLowerCase();\n          return (\n            label.includes(trimmed) ||\n            description.includes(trimmed) ||\n            optionValue.includes(trimmed)\n          );\n        })\n      : [];\n\n    return (\n      <div style={storyContainerStyle}>\n        <Select\n          {...args}\n          value={value}\n          options={filteredOptions}\n          searchValue={searchValue}\n          emptyContent={trimmed ? 'No matches' : 'Type to search assets'}\n          onSearchChange={(next) => {\n            setSearchValue(next);\n            args.onSearchChange?.(next);\n          }}\n          onChange={(nextValue, option) => {\n            setValue(nextValue as string | number | undefined);\n            args.onChange?.(nextValue, option);\n          }}\n        />\n      </div>\n    );\n  }",
-      "source": "stories",
-      "compilable": false
-    },
     "920c6084b0c74e8e6ccd8e98e3afd2477bffb820950ef10b1e933c2597cd446f": {
       "title": "Canonical usage",
       "code": "import { Icons, IconWrapper, IconHover } from '@1money/component-ui';\n// or\nimport { Icons, IconWrapper, IconHover } from '@1money/component-ui/Icons';\n\n// Type imports\nimport type { IconName, SortIconStatus } from '@1money/component-ui';",
@@ -1399,12 +1363,6 @@
       "source": "readme",
       "compilable": true
     },
-    "9532a16e360ac90c4955a5d2fb7dbfd364a470857fe111e7c0f76c886afe2153": {
-      "title": "Multiple",
-      "code": "{\n    const [value, setValue] = useState<Array<string | number>>([\n      'btc',\n      'eth',\n      'usdt',\n      'usdc',\n      'sol',\n      'doge',\n      'ada',\n      'matic',\n    ]);\n\n    return (\n      <Select\n        {...args}\n        multiple\n        value={value}\n        onChange={(nextValue, option) => {\n          setValue((nextValue as Array<string | number>) ?? []);\n          args.onChange?.(nextValue, option);\n        }}\n      />\n    );\n  }",
-      "source": "stories",
-      "compilable": false
-    },
     "957f519084a4f84fd6a79517a4f2c6a85245176f268b9c5f6e090ee983e82fa8": {
       "title": "Single Content States",
       "code": "<div style={stackStyle}>\n      <Alert\n        {...args}\n        title={multiLineTitle}\n        body={undefined}\n        link={undefined}\n        closable={false}\n      />\n      <Alert\n        {...args}\n        title={undefined}\n        body={multiLineBody}\n        link={undefined}\n        closable={false}\n      />\n      <Alert\n        {...args}\n        title={multiLineTitle}\n        body={undefined}\n        link={{ label: 'Open details', onClick: fn() }}\n        closable={false}\n      />\n      <Alert\n\n        title={multiLineTitle}\n        body={undefined}\n        closable={false}\n        action={<Button onClick={(() => {\n          console.log('Action button clicked');\n        })}>Take action</Button>}\n      />\n    </div>",
@@ -1615,6 +1573,12 @@
       "source": "stories",
       "compilable": true
     },
+    "abeafbd17ae622f40f4e0e684520b3147e5acb533583ea71c8b1d95fd3805540": {
+      "title": "Default",
+      "code": "{\n    const [value, setValue] = useState<string | number | undefined>('btc');\n    return (\n      <div style={{ width: 310 }}>\n        <Select\n          {...args}\n          value={value}\n          onChange={(nextValue, option) => {\n            setValue(nextValue as string | number | undefined);\n            args.onChange?.(nextValue, option);\n          }}\n        />\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
     "acab0e7cc530a58ffcca4edc686eb0a0b922021deac39c66bbd80ffd9d82ab5f": {
       "title": "Variable Height",
       "code": "<div style={containerStyle}>\n      <VirtualList\n        data={data1000}\n        height={300}\n        itemHeight={30}\n        itemKey=\"id\"\n      >\n        {(item: Item) => (\n          <div style={itemStyle(item.height)}>\n            <span>Item {item.id}</span>\n            <span style={{ color: '#999', fontSize: 12 }}>height: {item.height}px</span>\n          </div>\n        )}\n      </VirtualList>\n    </div>",
@@ -1897,6 +1861,12 @@
       "source": "stories",
       "compilable": true
     },
+    "c655c5bc04053a1ca3b1bdca71f5bd281e51c8df9e4f2fcd8f3e95ec7e1d5e9f": {
+      "title": "Multiple",
+      "code": "{\n    const [basic, setBasic] = useState<Array<string | number>>([\n      'btc',\n      'eth',\n      'usdt',\n    ]);\n    const [collapsed, setCollapsed] = useState<Array<string | number>>([\n      'btc',\n      'eth',\n      'usdt',\n      'usdc',\n      'sol',\n      'doge',\n    ]);\n\n    return (\n      <div style={rowStyle}>\n        <div style={cellStyle(320)}>\n          <p style={captionStyle}>Tags expanded</p>\n          <Select\n            label=\"Assets\"\n            multiple\n            options={OPTIONS}\n            placeholder=\"Select assets\"\n            value={basic}\n            onChange={(next) => setBasic((next as Array<string | number>) ?? [])}\n          />\n        </div>\n        <div style={cellStyle(320)}>\n          <p style={captionStyle}>maxVisibleValues = 1 (collapsed)</p>\n          <Select\n            label=\"Assets\"\n            multiple\n            maxVisibleValues={1}\n            variant=\"stroke\"\n            options={ASSET_OPTIONS}\n            placeholder=\"Select assets\"\n            value={collapsed}\n            onChange={(next) => setCollapsed((next as Array<string | number>) ?? [])}\n          />\n        </div>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
     "c6c6006c18fc013fe133931a21d10e19d9263c424b639dbe5b1038884729bb32": {
       "title": "Horizontal",
       "code": "<p>Above</p>\n<Divider />\n<p>Below</p>",
@@ -1921,6 +1891,12 @@
       "source": "stories",
       "compilable": false
     },
+    "c7eef70ce7146b555a7920611baa8f6c99f77512eae23734b54605a8647606b4": {
+      "title": "Custom Render",
+      "code": "{\n    const [optionValue, setOptionValue] = useState<string | number | undefined>('usdt');\n    const [contentValue, setContentValue] = useState<string | number | undefined>('usdt');\n\n    return (\n      <div style={rowStyle}>\n        <div style={cellStyle(310)}>\n          <p style={captionStyle}>renderOption (full body + check)</p>\n          <Select\n            label=\"Asset\"\n            options={ASSET_OPTIONS}\n            renderOption={renderAssetOption}\n            value={optionValue}\n            onChange={(next) => setOptionValue(next as string | number | undefined)}\n          />\n        </div>\n        <div style={cellStyle(310)}>\n          <p style={captionStyle}>renderOptionContent (body only)</p>\n          <Select\n            label=\"Asset\"\n            options={ASSET_OPTIONS}\n            renderOptionContent={renderAssetOptionContent}\n            value={contentValue}\n            onChange={(next) => setContentValue(next as string | number | undefined)}\n          />\n        </div>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
     "c816f5980daf6d897749e81e8bcb52963fb9584ae3d56cc2d6d73194bb1a655a": {
       "title": "Import",
       "code": "import { Tag } from '@1money/component-ui';\n// or\nimport { Tag } from '@1money/component-ui/Tag';",
@@ -1957,6 +1933,12 @@
       "source": "stories",
       "compilable": true
     },
+    "cab7b0339adc5ff1f6d96dd2cbef98e653af02cd0eb13266e0be2ec5f5efe4ed": {
+      "title": "Variants",
+      "code": "<div style={rowStyle}>\n      <div style={cellStyle(310)}>\n        <p style={captionStyle}>fill</p>\n        <Select label=\"Label\" variant=\"fill\" options={OPTIONS} defaultValue=\"btc\" />\n      </div>\n      <div style={cellStyle(310)}>\n        <p style={captionStyle}>stroke</p>\n        <Select label=\"Label\" variant=\"stroke\" options={OPTIONS} defaultValue=\"btc\" />\n      </div>\n      <div style={cellStyle(310)}>\n        <p style={captionStyle}>frameless</p>\n        <Select\n          variant=\"frameless\"\n          options={OPTIONS}\n          defaultValue=\"btc\"\n          placeholder=\"Currency\"\n          prefix={<Icons name=\"usd\" size={24} color=\"currentColor\" />}\n        />\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
     "ccaa3cb3e660ea38beaa59a26d94e5aa6bcd8ea3fb8449f82d28e13875c9c05e": {
       "title": "Group Disabled",
       "code": "<RadioGroup value=\"a\" disabled>\n      <Radio value=\"a\" label=\"Option A\" />\n      <Radio value=\"b\" label=\"Option B\" />\n      <Radio value=\"c\" label=\"Option C\" />\n    </RadioGroup>",
@@ -2167,12 +2149,6 @@
       "source": "readme",
       "compilable": true
     },
-    "e4c665e871b8546f38972172c483114d1eef73a4fc2b83e6ad929d359c408796": {
-      "title": "Allow Deselect",
-      "code": "{\n    const [value, setValue] = useState<string | number | undefined>('btc');\n\n    return (\n      <Select\n        {...args}\n        allowDeselect\n        value={value}\n        onChange={(nextValue, option) => {\n          setValue(nextValue as string | number | undefined);\n          args.onChange?.(nextValue, option);\n        }}\n      />\n    );\n  }",
-      "source": "stories",
-      "compilable": false
-    },
     "e507eed4788971490bf4cdd4a72e99bbbbb78635073b89a32022fdb2055c6a3b": {
       "title": "Virtual Usage",
       "code": "<VirtualTable\n  rowKey=\"id\"\n  columns={columns}\n  dataSource={rows}\n  scroll={{ x: 1200, y: 360 }}\n/>",
@@ -2203,12 +2179,6 @@
       "source": "stories",
       "compilable": false
     },
-    "e80f4581561ee3095a2839fea6b7193b3e3a682901390a7f6147c36c9a75cc0d": {
-      "title": "Asset Multi Select Actions",
-      "code": "{\n    const [open, setOpen] = useState(false);\n    const [value, setValue] = useState<Array<string | number>>(['btc']);\n    const [draftValue, setDraftValue] = useState<Array<string | number>>(['btc']);\n\n    return (\n      <div style={storyContainerStyle}>\n        <Select\n          {...args}\n          multiple\n          open={open}\n          value={open ? draftValue : value}\n          renderOption={renderAssetOption}\n          panelFooter={(\n            <div style={assetFooterActionsStyle}>\n              <Button\n                color=\"grey\"\n                size=\"small\"\n                style={{ flex: 1 }}\n                onClick={() => {\n                  setDraftValue([]);\n                }}\n              >\n                Reset\n              </Button>\n              <Button\n                size=\"small\"\n                style={{ flex: 1 }}\n                onClick={() => {\n                  setValue(draftValue);\n                  setOpen(false);\n                  args.onOpenChange?.(false);\n                }}\n              >\n                Apply\n              </Button>\n            </div>\n          )}\n          onOpenChange={(nextOpen) => {\n            setOpen(nextOpen);\n            setDraftValue(value);\n            args.onOpenChange?.(nextOpen);\n          }}\n          onChange={(nextValue, option) => {\n            setDraftValue((nextValue as Array<string | number>) ?? []);\n            args.onChange?.(nextValue, option);\n          }}\n        />\n      </div>\n    );\n  }",
-      "source": "stories",
-      "compilable": false
-    },
     "e95a0d0355599d90e5a8f3e2157c5f59f2ee97f9c77cde6b856ca73e439ba89d": {
       "title": "Usage",
       "code": "<ProForm\n  initialValues={{ name: '' }}\n  onFinish={(values) => console.log(values)}\n>\n  <ProForm.Text\n    name=\"name\"\n    label=\"Name\"\n    rules={[{ required: true, message: 'Name is required' }]}\n  />\n  <ProForm.Select\n    name=\"currency\"\n    label=\"Currency\"\n    fieldProps={{ options: [{ label: 'USD', value: 'USD' }] }}\n  />\n</ProForm>",
@@ -2293,6 +2263,12 @@
       "source": "stories",
       "compilable": true
     },
+    "f2e294ad49295129f9126f2ea2b586e365c25b5d141f73d5be89c1dd861e6aa1": {
+      "title": "Custom",
+      "code": "{\n    const [selected, setSelected] = useState<Array<string | number>>(['btc', 'eth', 'sol']);\n    const [open, setOpen] = useState(false);\n\n    const toggle = (value: string | number) => {\n      setSelected((prev) =>\n        prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value],\n      );\n    };\n\n    const triggerLabel = selected.length > 0 ? `${selected.length} selected` : null;\n\n    return (\n      <div style={cellStyle(320)}>\n        <Select.Custom\n          label=\"Assets\"\n          placeholder=\"Select assets\"\n          open={open}\n          onOpenChange={setOpen}\n          selectedTemplate={triggerLabel}\n        >\n          {() => (\n            <>\n              <div style={customPanelHeaderStyle}>\n                <span style={customPanelTitleStyle}>{selected.length} selected</span>\n                <button\n                  type=\"button\"\n                  style={customClearAllStyle}\n                  onClick={() => setSelected([])}\n                >\n                  <Icons name=\"cross\" size={14} color=\"currentColor\" />\n                  Clear all\n                </button>\n              </div>\n              {ASSET_OPTIONS.map((option) => {\n                const isSelected = selected.includes(option.value);\n                return (\n                  <button\n                    key={option.value}\n                    type=\"button\"\n                    style={customRowStyle}\n                    onClick={() => toggle(option.value)}\n                  >\n                    <AssetMark value={option.value} />\n                    <span style={assetOptionLabelStyle}>{option.label}</span>\n                    <span style={customCheckboxStyle(isSelected)}>\n                      {isSelected && <Icons name=\"check\" size={14} color=\"currentColor\" />}\n                    </span>\n                  </button>\n                );\n              })}\n            </>\n          )}\n        </Select.Custom>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
     "f3a91dcc57956f6ad5d0a390fd1f02519474f3ddfd4691ac865e8f7001fa9ef5": {
       "title": "H5 Width Spec",
       "code": "<TooltipPreviewCard\n      label=\"Maximum width 300px on H5\"\n      title=\"Long title\"\n      body={LONG_BODY}\n    />",