superdesk-ui-framework 6.1.3 → 6.1.4

package/dist/superdesk-ui.bundle.js.LICENSE.txt

@@ -31,7 +31,8 @@
  * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
  */
 
-/** @license React v16.13.1
+/**
+ * @license React
  * react-is.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -40,7 +41,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/** @license React v17.0.2
+/**
+ * @license React
+ * use-sync-external-store-shim.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
  * react-is.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "superdesk-ui-framework",
-    "version": "6.1.3",
+    "version": "6.1.4",
     "license": "AGPL-3.0",
     "repository": {
         "type": "git",
@@ -50,7 +50,6 @@
         "@types/lodash": "^4.14.161",
         "@types/mocha": "^9.1.1",
         "@types/react": "16.8.23",
-        "@types/react-beautiful-dnd": "^13.1.2",
         "@types/react-dom": "16.8.0",
         "@types/react-router-dom": "^5.1.2",
         "@types/react-scrollspy": "^3.3.5",
@@ -111,7 +110,7 @@
         "popper-max-size-modifier": "^0.2.0",
         "popper.js": "1.14.4",
         "primeicons": "2.0.0",
-        "react-beautiful-dnd": "^13.0.0",
+        "@hello-pangea/dnd": "^16.6.0",
         "react-id-generator": "^3.0.0",
         "react-resizable-panels": "^3.0.6",
         "react-scrollspy": "^3.4.3",
@@ -126,4 +125,4 @@
     "volta": {
         "node": "22.22.0"
     }
-}
+}

package/react/components/Lists/TableList.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropResult } from 'react-beautiful-dnd';
+import { DropResult } from '@hello-pangea/dnd';
 import { IMenuItem, ISubmenu, IMenuGroup } from '../Dropdown';
 export interface IProps {
     array: Array<IPropsArrayItem>;

package/react/components/Lists/TableList.js

@@ -66,7 +66,7 @@ exports.TableListItem = exports.TableList = void 0;
 var React = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var classnames_1 = __importDefault(require("classnames"));
-var react_beautiful_dnd_1 = require("react-beautiful-dnd");
+var dnd_1 = require("@hello-pangea/dnd");
 var Tooltip_1 = require("../Tooltip");
 var Button_1 = require("../Button");
 var Dropdown_1 = require("../Dropdown");
@@ -125,9 +125,9 @@ var TableList = /** @class */ (function (_super) {
             },
             _a["".concat(this.props.className)] = this.props.className,
             _a));
-        return this.state.items.length > 0 ? (this.props.dragAndDrop ? (React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
-            React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("div", __assign({ role: "list", className: classes, ref: provided.innerRef }, provided.droppableProps),
-                _this.state.items.map(function (item, index) { return (React.createElement(react_beautiful_dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, snapshot) {
+        return this.state.items.length > 0 ? (this.props.dragAndDrop ? (React.createElement(dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
+            React.createElement(dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("div", __assign({ role: "list", className: classes, ref: provided.innerRef }, provided.droppableProps),
+                _this.state.items.map(function (item, index) { return (React.createElement(dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, snapshot) {
                     return _this.props.append ? (React.createElement(PortalItem, { provided: provided2, snapshot: snapshot, item: item, index: index, dragAndDrop: _this.props.dragAndDrop, showDragHandle: _this.props.showDragHandle, addItem: _this.props.addItem, onAddItem: function () {
                             return _this.props.onAddItem && _this.props.onAddItem(index, item);
                         }, itemsDropdown: function () {

package/react/components/TreeSelect/TreeSelect.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IInputWrapper } from '../Form/InputWrapper';
-import { DropResult } from 'react-beautiful-dnd';
+import { DropResult } from '@hello-pangea/dnd';
 interface IState<T> {
     value: Array<T>;
     options: Array<ITreeNode<T>>;

package/react/components/TreeSelect/TreeSelect.js

@@ -86,7 +86,7 @@ var TreeSelectPill_1 = require("./TreeSelectPill");
 var TreeSelectItem_1 = require("./TreeSelectItem");
 var KeyboardNavigation_1 = require("./KeyboardNavigation");
 var WithPortal_1 = require("../WithPortal");
-var react_beautiful_dnd_1 = require("react-beautiful-dnd");
+var dnd_1 = require("@hello-pangea/dnd");
 var zIndex_1 = require("../../zIndex");
 var common_1 = require("@sourcefabric/common");
 var translations_1 = require("../../translations");
@@ -570,8 +570,8 @@ var TreeSelect = /** @class */ (function (_super) {
         var ListWrapper = this.props.sortable
             ? function (_a) {
                 var children = _a.children;
-                return (React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: _this.onDragEnd },
-                    React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable", direction: "horizontal" }, function (provided, _snapshot) { return (React.createElement("ul", __assign({ className: "tags-input__tag-list", ref: provided.innerRef }, provided.droppableProps),
+                return (React.createElement(dnd_1.DragDropContext, { onDragEnd: _this.onDragEnd },
+                    React.createElement(dnd_1.Droppable, { droppableId: "droppable", direction: "horizontal" }, function (provided, _snapshot) { return (React.createElement("ul", __assign({ className: "tags-input__tag-list", ref: provided.innerRef }, provided.droppableProps),
                         children,
                         provided.placeholder)); })));
             }
@@ -582,7 +582,7 @@ var TreeSelect = /** @class */ (function (_super) {
         var ItemWrapper = this.props.sortable
             ? function (_a) {
                 var children = _a.children, itemId = _a.itemId, i = _a.i;
-                return (React.createElement(react_beautiful_dnd_1.Draggable, { draggableId: itemId, index: i }, function (provided2) { return (React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps), children)); }));
+                return (React.createElement(dnd_1.Draggable, { draggableId: itemId, index: i }, function (provided2) { return (React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps), children)); }));
             }
             : function (_a) {
                 var children = _a.children;

package/storybook-static/{components-Button-stories.d513b08d.iframe.bundle.js → components-Button-stories.d26accad.iframe.bundle.js}

@@ -1 +1 @@
-"use strict";(self.webpackChunksuperdesk_ui_framework=self.webpackChunksuperdesk_ui_framework||[]).push([[672],{"./app-typescript/components/Button.stories.tsx"(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{IconOnly:()=>IconOnly,Playground:()=>Playground,RecommendedTypes:()=>RecommendedTypes,Sizes:()=>Sizes,States:()=>States,WithIcons:()=>WithIcons,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Button_stories});var react=__webpack_require__("./node_modules/react/index.js"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames);function _typeof(o){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 _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 _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _toPropertyKey(t){var 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)}(t,"string");return"symbol"==_typeof(i)?i:i+""}function _callSuper(t,o,e){return o=_getPrototypeOf(o),function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}var Icon=function(_React$PureComponent){function Icon(){return function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}(this,Icon),_callSuper(this,Icon,arguments)}return function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}(Icon,_React$PureComponent),function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}(Icon,[{key:"render",value:function render(){var classes=classnames_default()(this.props.className,_defineProperty(_defineProperty(_defineProperty(_defineProperty({},"icon-".concat(this.props.name),this.props.name&&!this.props.size||this.props.name&&"small"===this.props.size),"big-icon--".concat(this.props.name),this.props.name&&"big"===this.props.size),"color--".concat(this.props.type),this.props.type),"scale--".concat(this.props.scale),this.props.scale));return react.createElement("i",{className:classes,"aria-label":this.props.name,"aria-hidden":this.props.ariaHidden,style:{color:this.props.color}})}}])}(react.PureComponent);try{Icon.displayName="Icon",Icon.__docgenInfo={description:"",displayName:"Icon",props:{name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"string"}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"big"'}]}},type:{defaultValue:null,description:"",name:"type",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"default"'},{value:'"success"'},{value:'"warning"'},{value:'"alert"'},{value:'"highlight"'},{value:'"light"'},{value:'"white"'}]}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},scale:{defaultValue:null,description:"",name:"scale",required:!1,type:{name:"enum",value:[{value:'"1.5x"'},{value:'"2x"'},{value:'"3x"'},{value:'"4x"'}]}},ariaHidden:{defaultValue:null,description:"",name:"ariaHidden",required:!1,type:{name:"boolean"}},color:{defaultValue:null,description:"",name:"color",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/components/Icon.tsx#Icon"]={docgenInfo:Icon.__docgenInfo,name:"Icon",path:"app-typescript/components/Icon.tsx#Icon"})}catch(__react_docgen_typescript_loader_error){}function Spinner_typeof(o){return Spinner_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},Spinner_typeof(o)}function Spinner_classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function Spinner_defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,Spinner_toPropertyKey(o.key),o)}}function Spinner_createClass(e,r,t){return r&&Spinner_defineProperties(e.prototype,r),t&&Spinner_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function Spinner_toPropertyKey(t){var i=function Spinner_toPrimitive(t,r){if("object"!=Spinner_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=Spinner_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==Spinner_typeof(i)?i:i+""}function Spinner_callSuper(t,o,e){return o=Spinner_getPrototypeOf(o),function Spinner_possibleConstructorReturn(t,e){if(e&&("object"==Spinner_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function Spinner_assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(t,Spinner_isNativeReflectConstruct()?Reflect.construct(o,e||[],Spinner_getPrototypeOf(t).constructor):o.apply(t,e))}function Spinner_isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(Spinner_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function Spinner_getPrototypeOf(t){return Spinner_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},Spinner_getPrototypeOf(t)}function Spinner_inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&Spinner_setPrototypeOf(t,e)}function Spinner_setPrototypeOf(t,e){return Spinner_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},Spinner_setPrototypeOf(t,e)}var LoadingOverlay=function(_React$PureComponent){function LoadingOverlay(){return Spinner_classCallCheck(this,LoadingOverlay),Spinner_callSuper(this,LoadingOverlay,arguments)}return Spinner_inherits(LoadingOverlay,_React$PureComponent),Spinner_createClass(LoadingOverlay,[{key:"render",value:function render(){return react.createElement("div",{className:"sd-loading-overlay--plain"},this.props.children)}}])}(react.PureComponent),Spinner=function(_React$PureComponent2){function Spinner(){return Spinner_classCallCheck(this,Spinner),Spinner_callSuper(this,Spinner,arguments)}return Spinner_inherits(Spinner,_React$PureComponent2),Spinner_createClass(Spinner,[{key:"render",value:function render(){var classes=classnames_default()("sd-spinner",function Spinner_defineProperty(e,r,t){return(r=Spinner_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}({"sd-spinner--small":void 0===this.props.size},"sd-spinner--".concat(this.props.size),this.props.size||void 0!==this.props.size));return react.createElement("svg",{viewBox:"0 0 24 24",className:classes,stroke:"var(--color-text-muted)"},react.createElement("g",{className:"sd-spinner__path"},react.createElement("circle",{cx:"12",cy:"12",r:"9.5",fill:"none","stroke-width":"3"})))}}])}(react.PureComponent);try{Spinner.displayName="Spinner",Spinner.__docgenInfo={description:"",displayName:"Spinner",props:{size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"large"'},{value:'"mini"'},{value:'"medium"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/components/Spinner.tsx#Spinner"]={docgenInfo:Spinner.__docgenInfo,name:"Spinner",path:"app-typescript/components/Spinner.tsx#Spinner"})}catch(__react_docgen_typescript_loader_error){}try{LoadingOverlay.displayName="LoadingOverlay",LoadingOverlay.__docgenInfo={description:"",displayName:"LoadingOverlay",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/components/Spinner.tsx#LoadingOverlay"]={docgenInfo:LoadingOverlay.__docgenInfo,name:"LoadingOverlay",path:"app-typescript/components/Spinner.tsx#LoadingOverlay"})}catch(__react_docgen_typescript_loader_error){}function assertNever(x){throw new Error("Unexpected object: "+x)}function nameof(name){return name.toString()}function getTextColor(backgroundColor){return backgroundColor?(299*parseInt(backgroundColor.substr(1,2),16)+587*parseInt(backgroundColor.substr(3,2),16)+114*parseInt(backgroundColor.substr(5,2),16))/1e3>=128?"black":"white":void 0}try{assertNever.displayName="assertNever",assertNever.__docgenInfo={description:"",displayName:"assertNever",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/helpers.tsx#assertNever"]={docgenInfo:assertNever.__docgenInfo,name:"assertNever",path:"app-typescript/helpers.tsx#assertNever"})}catch(__react_docgen_typescript_loader_error){}try{nameof.displayName="nameof",nameof.__docgenInfo={description:"",displayName:"nameof",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/helpers.tsx#nameof"]={docgenInfo:nameof.__docgenInfo,name:"nameof",path:"app-typescript/helpers.tsx#nameof"})}catch(__react_docgen_typescript_loader_error){}try{getTextColor.displayName="getTextColor",getTextColor.__docgenInfo={description:"",displayName:"getTextColor",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/helpers.tsx#getTextColor"]={docgenInfo:getTextColor.__docgenInfo,name:"getTextColor",path:"app-typescript/helpers.tsx#getTextColor"})}catch(__react_docgen_typescript_loader_error){}var react_dom=__webpack_require__("./node_modules/react-dom/index.js"),popper=__webpack_require__("./node_modules/@popperjs/core/lib/popper.js"),lodash=__webpack_require__("./node_modules/lodash/lodash.js"),popper_max_size_modifier_esm=__webpack_require__("./node_modules/popper-max-size-modifier/dist/popper-max-size-modifier.esm.js"),zIndex=1100;function ShowPopup_typeof(o){return ShowPopup_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},ShowPopup_typeof(o)}function ShowPopup_defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,ShowPopup_toPropertyKey(o.key),o)}}function ShowPopup_callSuper(t,o,e){return o=ShowPopup_getPrototypeOf(o),function ShowPopup_possibleConstructorReturn(t,e){if(e&&("object"==ShowPopup_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function ShowPopup_assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(t,ShowPopup_isNativeReflectConstruct()?Reflect.construct(o,e||[],ShowPopup_getPrototypeOf(t).constructor):o.apply(t,e))}function ShowPopup_isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(ShowPopup_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function ShowPopup_getPrototypeOf(t){return ShowPopup_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},ShowPopup_getPrototypeOf(t)}function ShowPopup_setPrototypeOf(t,e){return ShowPopup_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},ShowPopup_setPrototypeOf(t,e)}function ShowPopup_toPropertyKey(t){var i=function ShowPopup_toPrimitive(t,r){if("object"!=ShowPopup_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=ShowPopup_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==ShowPopup_typeof(i)?i:i+""}var PopupPositioner=function(_React$PureComponent){function PopupPositioner(props){var _this;return function ShowPopup_classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}(this,PopupPositioner),function ShowPopup_defineProperty(e,r,t){return(r=ShowPopup_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}(_this=ShowPopup_callSuper(this,PopupPositioner,[props]),"zIndex",function getNextZIndex(){return++zIndex}()),_this.getRefElement=_this.getRefElement.bind(_this),_this.closeOnClick=_this.closeOnClick.bind(_this),_this.closeOnScroll=(0,lodash.throttle)(_this.closeOnScroll.bind(_this),200),_this.closeOnMouseLeave=_this.closeOnMouseLeave.bind(_this),_this.wrapperEl=null,_this.popper=null,_this}return function ShowPopup_inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&ShowPopup_setPrototypeOf(t,e)}(PopupPositioner,_React$PureComponent),function ShowPopup_createClass(e,r,t){return r&&ShowPopup_defineProperties(e.prototype,r),t&&ShowPopup_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}(PopupPositioner,[{key:"getRefElement",value:function getRefElement(){return this.wrapperEl}},{key:"closeOnClick",value:function closeOnClick(event){null!=this.wrapperEl&&(null!=this.props.shouldClose&&!1===this.props.shouldClose(event)||!0!==this.props.getReferenceElement().contains(event.target)&&!0!==this.wrapperEl.contains(event.target)&&this.props.onClose())}},{key:"closeOnScroll",value:function closeOnScroll(event){null!=this.wrapperEl&&(null!=this.props.shouldClose&&!1===this.props.shouldClose(event)||!0!==this.wrapperEl.contains(event.target)&&this.props.onClose())}},{key:"closeOnMouseLeave",value:function closeOnMouseLeave(event){null!=this.wrapperEl&&(null!=this.props.shouldClose&&!1===this.props.shouldClose(event)||!0!==this.wrapperEl.contains(event.target)&&this.props.onClose())}},{key:"componentDidMount",value:function componentDidMount(){var _this2=this;window.addEventListener("click",this.closeOnClick,{capture:!0}),window.addEventListener("scroll",this.closeOnScroll,!0),this.props.closeOnHoverEnd&&null!=this.wrapperEl&&(this.props.getReferenceElement().addEventListener("mouseleave",this.closeOnMouseLeave),this.wrapperEl.addEventListener("mouseleave",this.closeOnMouseLeave));var applyMaxSize={name:"applyMaxSize",enabled:!0,phase:"beforeWrite",requires:["maxSize"],fn:function fn(_ref){var state=_ref.state,height=state.modifiersData.maxSize.height;state.styles.popper.maxHeight="".concat(height-8,"px")}},restrictHeightToMaxAvailable={name:"restrictHeightToMaxAvailable",enabled:!0,phase:"main",fn:lodash.noop,requires:["popperOffsets"],effect:function effect(args){var popperHeight=args.state.elements.popper.offsetHeight,viewportHeight=document.body.offsetHeight,refRect=args.state.elements.reference.getBoundingClientRect(),availableSpaceAbove=refRect.top,availableSpaceBelow=viewportHeight-refRect.bottom,availableSpaceMax=Math.max(availableSpaceAbove,availableSpaceBelow);return popperHeight>availableSpaceMax&&(args.state.elements.popper.style.height=availableSpaceMax+"px"),function(){}}};null!=this.wrapperEl&&setTimeout(function(){if(null!=_this2.wrapperEl){var options={modifiers:[restrictHeightToMaxAvailable,{name:"preventOverflow",options:{padding:{top:8}}},popper_max_size_modifier_esm.A,applyMaxSize]};null!=_this2.props.placement&&(options.placement=_this2.props.placement),_this2.popper=(0,popper.n4)(_this2.props.getReferenceElement(),_this2.wrapperEl,options)}},50)}},{key:"componentWillUnmount",value:function componentWillUnmount(){var _this$popper,_this$popper$destroy;window.removeEventListener("click",this.closeOnClick),window.removeEventListener("scroll",this.closeOnScroll,!0),this.props.closeOnHoverEnd&&null!=this.wrapperEl&&(this.props.getReferenceElement().removeEventListener("mouseleave",this.closeOnMouseLeave),this.wrapperEl.removeEventListener("mouseleave",this.closeOnMouseLeave)),null===(_this$popper=this.popper)||void 0===_this$popper||null===(_this$popper$destroy=_this$popper.destroy)||void 0===_this$popper$destroy||_this$popper$destroy.call(_this$popper)}},{key:"render",value:function render(){var _this3=this;return react.createElement(react.Fragment,null,react_dom.createPortal(react.createElement("div",{className:"sd-popup-positioner",ref:function ref(el){_this3.wrapperEl=el},style:{position:"absolute",left:"-100vw",display:"flex",zIndex:this.zIndex},tabIndex:0,"data-test-id":this.props["data-test-id"],onKeyDown:this.props.onKeyDown},this.props.children),document.body))}}])}(react.PureComponent);function showPopup(referenceElement,placement,Component,closeOnHoverEnd,onClose,shouldClose){var el=document.createElement("div");document.body.appendChild(el);var closeFn=function closeFn(){react_dom.unmountComponentAtNode(el),el.remove(),null==onClose||onClose()};return react_dom.render(react.createElement(PopupPositioner,{getReferenceElement:function getReferenceElement(){return referenceElement},placement,onClose:closeFn,shouldClose,closeOnHoverEnd:closeOnHoverEnd||!1},react.createElement(Component,{closePopup:closeFn})),el),{close:closeFn}}try{showPopup.displayName="showPopup",showPopup.__docgenInfo={description:"The popup will remove itself if click/scroll events are detected outside the popup.",displayName:"showPopup",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/components/ShowPopup.tsx#showPopup"]={docgenInfo:showPopup.__docgenInfo,name:"showPopup",path:"app-typescript/components/ShowPopup.tsx#showPopup"})}catch(__react_docgen_typescript_loader_error){}try{PopupPositioner.displayName="PopupPositioner",PopupPositioner.__docgenInfo={description:"",displayName:"PopupPositioner",props:{getReferenceElement:{defaultValue:null,description:"",name:"getReferenceElement",required:!0,type:{name:"() => HTMLElement"}},placement:{defaultValue:null,description:"",name:"placement",required:!1,type:{name:"enum",value:[{value:'"auto"'},{value:'"auto-start"'},{value:'"auto-end"'},{value:'"top"'},{value:'"bottom"'},{value:'"right"'},{value:'"left"'},{value:'"top-start"'},{value:'"top-end"'},{value:'"bottom-start"'},{value:'"bottom-end"'},{value:'"right-start"'},{value:'"right-end"'},{value:'"left-start"'},{value:'"left-end"'}]}},onClose:{defaultValue:null,description:"",name:"onClose",required:!0,type:{name:"() => void"}},shouldClose:{defaultValue:null,description:"",name:"shouldClose",required:!1,type:{name:"(event: MouseEvent | Event) => boolean"}},closeOnHoverEnd:{defaultValue:null,description:"",name:"closeOnHoverEnd",required:!1,type:{name:"boolean"}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"(event: KeyboardEvent<Element>) => void"}},"data-test-id":{defaultValue:null,description:"",name:"data-test-id",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/components/ShowPopup.tsx#PopupPositioner"]={docgenInfo:PopupPositioner.__docgenInfo,name:"PopupPositioner",path:"app-typescript/components/ShowPopup.tsx#PopupPositioner"})}catch(__react_docgen_typescript_loader_error){}function WithPopover_typeof(o){return WithPopover_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},WithPopover_typeof(o)}function WithPopover_defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,WithPopover_toPropertyKey(o.key),o)}}function WithPopover_toPropertyKey(t){var i=function WithPopover_toPrimitive(t,r){if("object"!=WithPopover_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=WithPopover_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==WithPopover_typeof(i)?i:i+""}function WithPopover_callSuper(t,o,e){return o=WithPopover_getPrototypeOf(o),function WithPopover_possibleConstructorReturn(t,e){if(e&&("object"==WithPopover_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function WithPopover_assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(t,WithPopover_isNativeReflectConstruct()?Reflect.construct(o,e||[],WithPopover_getPrototypeOf(t).constructor):o.apply(t,e))}function WithPopover_isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(WithPopover_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function WithPopover_getPrototypeOf(t){return WithPopover_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},WithPopover_getPrototypeOf(t)}function WithPopover_setPrototypeOf(t,e){return WithPopover_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},WithPopover_setPrototypeOf(t,e)}var WithPopover=function(_React$PureComponent){function WithPopover(props){var _this;return function WithPopover_classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}(this,WithPopover),(_this=WithPopover_callSuper(this,WithPopover,[props])).togglePopup=_this.togglePopup.bind(_this),_this}return function WithPopover_inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&WithPopover_setPrototypeOf(t,e)}(WithPopover,_React$PureComponent),function WithPopover_createClass(e,r,t){return r&&WithPopover_defineProperties(e.prototype,r),t&&WithPopover_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}(WithPopover,[{key:"togglePopup",value:function togglePopup(referenceElement){var _this2=this;null!=this.closePopup?(this.closePopup(),this.closePopup=void 0):this.closePopup=showPopup(referenceElement,this.props.placement,this.props.component,this.props.closeOnHoverEnd,function(){var _this2$props$onClose,_this2$props;_this2.closePopup=void 0,null===(_this2$props$onClose=(_this2$props=_this2.props).onClose)||void 0===_this2$props$onClose||_this2$props$onClose.call(_this2$props)},this.props.shouldClose).close}},{key:"render",value:function render(){return this.props.children(this.togglePopup)}}])}(react.PureComponent);try{WithPopover.displayName="WithPopover",WithPopover.__docgenInfo={description:"Wraps `PopupPositioner`\nQuicker to use for simple use cases.",displayName:"WithPopover",props:{placement:{defaultValue:null,description:"",name:"placement",required:!1,type:{name:"enum",value:[{value:'"auto"'},{value:'"auto-start"'},{value:'"auto-end"'},{value:'"top"'},{value:'"bottom"'},{value:'"right"'},{value:'"left"'},{value:'"top-start"'},{value:'"top-end"'},{value:'"bottom-start"'},{value:'"bottom-end"'},{value:'"right-start"'},{value:'"right-end"'},{value:'"left-start"'},{value:'"left-end"'}]}},component:{defaultValue:null,description:"",name:"component",required:!0,type:{name:"ComponentType<{ closePopup(): void; }>"}},closeOnHoverEnd:{defaultValue:null,description:"",name:"closeOnHoverEnd",required:!1,type:{name:"boolean"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!1,type:{name:"() => void"}},shouldClose:{defaultValue:null,description:"",name:"shouldClose",required:!1,type:{name:"(event: MouseEvent | Event) => boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/components/WithPopover.tsx#WithPopover"]={docgenInfo:WithPopover.__docgenInfo,name:"WithPopover",path:"app-typescript/components/WithPopover.tsx#WithPopover"})}catch(__react_docgen_typescript_loader_error){}function TooltipV2_typeof(o){return TooltipV2_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},TooltipV2_typeof(o)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}function TooltipV2_defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,TooltipV2_toPropertyKey(o.key),o)}}function TooltipV2_toPropertyKey(t){var i=function TooltipV2_toPrimitive(t,r){if("object"!=TooltipV2_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=TooltipV2_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==TooltipV2_typeof(i)?i:i+""}function TooltipV2_callSuper(t,o,e){return o=TooltipV2_getPrototypeOf(o),function TooltipV2_possibleConstructorReturn(t,e){if(e&&("object"==TooltipV2_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function TooltipV2_assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(t,TooltipV2_isNativeReflectConstruct()?Reflect.construct(o,e||[],TooltipV2_getPrototypeOf(t).constructor):o.apply(t,e))}function TooltipV2_isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(TooltipV2_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function TooltipV2_getPrototypeOf(t){return TooltipV2_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},TooltipV2_getPrototypeOf(t)}function TooltipV2_setPrototypeOf(t,e){return TooltipV2_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},TooltipV2_setPrototypeOf(t,e)}var TooltipV2=function(_React$PureComponent){function TooltipV2(){return function TooltipV2_classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}(this,TooltipV2),TooltipV2_callSuper(this,TooltipV2,arguments)}return function TooltipV2_inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&TooltipV2_setPrototypeOf(t,e)}(TooltipV2,_React$PureComponent),function TooltipV2_createClass(e,r,t){return r&&TooltipV2_defineProperties(e.prototype,r),t&&TooltipV2_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}(TooltipV2,[{key:"render",value:function render(){var _this$props$placement,_this=this;return react.createElement(WithPopover,{placement:null!==(_this$props$placement=this.props.placement)&&void 0!==_this$props$placement?_this$props$placement:"top",component:function component(){return react.createElement("div",{className:"tooltip"},function(){if("string"==typeof _this.props.content)return react.createElement("span",null,_this.props.content);var Component=_this.props.content;return react.createElement(Component,null)}())}},function(toggle){var attributes={onMouseEnter:function onMouseEnter(event){toggle(event.target)},onMouseLeave:function onMouseLeave(event){toggle(event.target)}};return"function"==typeof _this.props.children?_this.props.children({attributes}):react.createElement("span",_extends({},attributes,{style:{display:"contents"}}),_this.props.children)})}}])}(react.PureComponent);try{TooltipV2.displayName="TooltipV2",TooltipV2.__docgenInfo={description:"Component is intentionally not exported.\nIt will be moved into the components/Tooltip.tsx when legacy support is dropped there.",displayName:"TooltipV2",props:{content:{defaultValue:null,description:"",name:"content",required:!0,type:{name:"string | ComponentType<{}>"}},placement:{defaultValue:null,description:"",name:"placement",required:!1,type:{name:"enum",value:[{value:'"auto"'},{value:'"auto-start"'},{value:'"auto-end"'},{value:'"top"'},{value:'"bottom"'},{value:'"right"'},{value:'"left"'},{value:'"top-start"'},{value:'"top-end"'},{value:'"bottom-start"'},{value:'"bottom-end"'},{value:'"right-start"'},{value:'"right-end"'},{value:'"left-start"'},{value:'"left-end"'}]}},children:{defaultValue:null,description:"If unsure - use ReactNode.\nFunction is for advanced use cases where it's needed to avoid the wrapping span.",name:"children",required:!1,type:{name:"(ReactNode | ((options: { attributes: HTMLAttributes<HTMLElement>; }) => ReactNode)) & ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/components/TooltipV2.tsx#TooltipV2"]={docgenInfo:TooltipV2.__docgenInfo,name:"TooltipV2",path:"app-typescript/components/TooltipV2.tsx#TooltipV2"})}catch(__react_docgen_typescript_loader_error){}function Tooltip_typeof(o){return Tooltip_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},Tooltip_typeof(o)}function Tooltip_extends(){return Tooltip_extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},Tooltip_extends.apply(null,arguments)}function Tooltip_defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,Tooltip_toPropertyKey(o.key),o)}}function Tooltip_toPropertyKey(t){var i=function Tooltip_toPrimitive(t,r){if("object"!=Tooltip_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=Tooltip_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==Tooltip_typeof(i)?i:i+""}function Tooltip_callSuper(t,o,e){return o=Tooltip_getPrototypeOf(o),function Tooltip_possibleConstructorReturn(t,e){if(e&&("object"==Tooltip_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function Tooltip_assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(t,Tooltip_isNativeReflectConstruct()?Reflect.construct(o,e||[],Tooltip_getPrototypeOf(t).constructor):o.apply(t,e))}function Tooltip_isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(Tooltip_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function Tooltip_getPrototypeOf(t){return Tooltip_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},Tooltip_getPrototypeOf(t)}function Tooltip_setPrototypeOf(t,e){return Tooltip_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},Tooltip_setPrototypeOf(t,e)}function flowToPlacement(flow){switch(flow){case void 0:return;case"top":return"top";case"right":return"right";case"down":return"bottom";case"left":return"left";default:return assertNever(flow)}}var Tooltip=function(_React$PureComponent){function Tooltip(){return function Tooltip_classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}(this,Tooltip),Tooltip_callSuper(this,Tooltip,arguments)}return function Tooltip_inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&Tooltip_setPrototypeOf(t,e)}(Tooltip,_React$PureComponent),function Tooltip_createClass(e,r,t){return r&&Tooltip_defineProperties(e.prototype,r),t&&Tooltip_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}(Tooltip,[{key:"render",value:function render(){var _this$props$text,_this=this;return null!=this.props.content?react.createElement(TooltipV2,this.props):react.createElement(TooltipV2,{content:null!==(_this$props$text=this.props.text)&&void 0!==_this$props$text?_this$props$text:"",placement:flowToPlacement(this.props.flow)},function(_ref){var attributes=_ref.attributes;return react.createElement("div",Tooltip_extends({},attributes,{style:{display:"contents"}}),_this.props.children)})}}])}(react.PureComponent);try{Tooltip.displayName="Tooltip",Tooltip.__docgenInfo={description:"",displayName:"Tooltip",props:{content:{defaultValue:null,description:"",name:"content",required:!1,type:{name:"string | ComponentType<{}>"}},placement:{defaultValue:null,description:"",name:"placement",required:!1,type:{name:"enum",value:[{value:'"auto"'},{value:'"auto-start"'},{value:'"auto-end"'},{value:'"top"'},{value:'"bottom"'},{value:'"right"'},{value:'"left"'},{value:'"top-start"'},{value:'"top-end"'},{value:'"bottom-start"'},{value:'"bottom-end"'},{value:'"right-start"'},{value:'"right-end"'},{value:'"left-start"'},{value:'"left-end"'}]}},children:{defaultValue:null,description:"If unsure - use ReactNode.\nFunction is for advanced use cases where it's needed to avoid the wrapping span.",name:"children",required:!1,type:{name:"string | number | boolean | {} | ReactElement<any, string | JSXElementConstructor<any>> | ReactNodeArray | ReactPortal | ... 37 more ... | (((options: { ...; }) => ReactNode) & ReactPortal)"}},text:{defaultValue:null,description:"",name:"text",required:!0,type:{name:"string"}},flow:{defaultValue:null,description:"",name:"flow",required:!1,type:{name:"enum",value:[{value:'"top"'},{value:'"right"'},{value:'"left"'},{value:'"down"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/components/Tooltip.tsx#Tooltip"]={docgenInfo:Tooltip.__docgenInfo,name:"Tooltip",path:"app-typescript/components/Tooltip.tsx#Tooltip"})}catch(__react_docgen_typescript_loader_error){}function Button_typeof(o){return Button_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},Button_typeof(o)}function Button_extends(){return Button_extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},Button_extends.apply(null,arguments)}function Button_defineProperty(e,r,t){return(r=Button_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function Button_classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function Button_defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,Button_toPropertyKey(o.key),o)}}function Button_createClass(e,r,t){return r&&Button_defineProperties(e.prototype,r),t&&Button_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function Button_toPropertyKey(t){var i=function Button_toPrimitive(t,r){if("object"!=Button_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=Button_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==Button_typeof(i)?i:i+""}function Button_callSuper(t,o,e){return o=Button_getPrototypeOf(o),function Button_possibleConstructorReturn(t,e){if(e&&("object"==Button_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function Button_assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(t,Button_isNativeReflectConstruct()?Reflect.construct(o,e||[],Button_getPrototypeOf(t).constructor):o.apply(t,e))}function Button_isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(Button_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function Button_getPrototypeOf(t){return Button_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},Button_getPrototypeOf(t)}function Button_inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&Button_setPrototypeOf(t,e)}function Button_setPrototypeOf(t,e){return Button_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},Button_setPrototypeOf(t,e)}var Button=function(_React$PureComponent){function Button(){return Button_classCallCheck(this,Button),Button_callSuper(this,Button,arguments)}return Button_inherits(Button,_React$PureComponent),Button_createClass(Button,[{key:"render",value:function render(){var _this=this,classes=classnames_default()("btn",Button_defineProperty(Button_defineProperty(Button_defineProperty(Button_defineProperty(Button_defineProperty(Button_defineProperty(Button_defineProperty(Button_defineProperty(Button_defineProperty(Button_defineProperty({"btn--expanded":this.props.expand,"btn--hollow":"tertiary"===this.props.type||"hollow"===this.props.style},"btn--".concat(this.props.size),"normal"!==this.props.size&&void 0!==this.props.size),"btn--".concat(this.props.type),"secondary"!==this.props.type&&void 0!==this.props.type),"btn--".concat(this.props.type),"default"!==this.props.type&&void 0!==this.props.type),"btn--".concat(this.props.style),"filled"!==this.props.style&&void 0!==this.props.style),"btn--disabled",this.props.disabled),"btn--icon-only",this.props.iconOnly),"btn--ui-dark","dark"===this.props.theme),"btn--icon-only-circle","round"===this.props.shape&&this.props.iconOnly),"sd-flex-justify-start","start"===this.props.textAlign),"sd-flex-justify-end","end"===this.props.textAlign));return react.createElement(TooltipWrapper,{tooltipText:this.props.tooltip},function(_ref){var _this$props$ariaLabel,attributes=_ref.attributes;return react.createElement("button",Button_extends({},attributes,{id:_this.props.id,className:classes,tabIndex:0,disabled:_this.props.disabled||_this.props.isLoading,"data-loading":_this.props.isLoading,onClick:_this.props.disabled?function(){return!1}:function(event){return _this.props.onClick(event)},"aria-label":null!==(_this$props$ariaLabel=_this.props.ariaLabel)&&void 0!==_this$props$ariaLabel?_this$props$ariaLabel:_this.props.iconOnly?_this.props.text:void 0,"data-test-id":_this.props["data-test-id"],style:_this.props.noMargin?{margin:0}:void 0}),_this.props.isLoading?react.createElement(Spinner,{size:"mini"}):null,_this.props.icon&&!_this.props.isLoading?react.createElement(Icon,{ariaHidden:!0,name:_this.props.icon}):null,_this.props.iconOnly?null:_this.props.text)})}}])}(react.PureComponent),TooltipWrapper=function(_React$PureComponent2){function TooltipWrapper(){return Button_classCallCheck(this,TooltipWrapper),Button_callSuper(this,TooltipWrapper,arguments)}return Button_inherits(TooltipWrapper,_React$PureComponent2),Button_createClass(TooltipWrapper,[{key:"render",value:function render(){var _this$props=this.props,tooltipText=_this$props.tooltipText,children=_this$props.children;return null!=tooltipText&&(null!=tooltipText?tooltipText:"").length>0?react.createElement(Tooltip,{content:tooltipText},function(_ref2){var attributes=_ref2.attributes;return children({attributes})}):react.createElement(react.Fragment,null,children({attributes:{}}))}}])}(react.PureComponent);try{Button.displayName="Button",Button.__docgenInfo={description:"",displayName:"Button",props:{text:{defaultValue:null,description:"",name:"text",required:!0,type:{name:"string"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!0,type:{name:"(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void"}},expand:{defaultValue:null,description:"",name:"expand",required:!1,type:{name:"boolean"}},style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"enum",value:[{value:'"filled"'},{value:'"hollow"'},{value:'"text-only"'}]}},shape:{defaultValue:null,description:"",name:"shape",required:!1,type:{name:"enum",value:[{value:'"square"'},{value:'"round"'}]}},isLoading:{defaultValue:null,description:"",name:"isLoading",required:!1,type:{name:"boolean"}},loadingLabel:{defaultValue:null,description:"",name:"loadingLabel",required:!1,type:{name:"string"}},tooltip:{defaultValue:null,description:"",name:"tooltip",required:!1,type:{name:"string"}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"string"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"enum",value:[{value:'"light"'},{value:'"dark"'}]}},type:{defaultValue:null,description:"",name:"type",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"default"'},{value:'"success"'},{value:'"warning"'},{value:'"alert"'},{value:'"highlight"'},{value:'"sd-green"'}]}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"normal"'},{value:'"large"'}]}},textAlign:{defaultValue:null,description:"",name:"textAlign",required:!1,type:{name:"enum",value:[{value:'"start"'},{value:'"center"'},{value:'"end"'}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"string"}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"boolean"}},iconOnly:{defaultValue:null,description:"",name:"iconOnly",required:!1,type:{name:"boolean"}},noMargin:{defaultValue:null,description:"",name:"noMargin",required:!1,type:{name:"boolean"}},ariaLabel:{defaultValue:null,description:"",name:"ariaLabel",required:!1,type:{name:"string"}},"data-test-id":{defaultValue:null,description:"",name:"data-test-id",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/components/Button.tsx#Button"]={docgenInfo:Button.__docgenInfo,name:"Button",path:"app-typescript/components/Button.tsx#Button"})}catch(__react_docgen_typescript_loader_error){}const noop=()=>{},Button_stories={title:"Basic Components/Button",component:Button,parameters:{layout:"centered",docs:{description:{component:"A versatile button component supporting multiple variants, sizes, and states. **Primary, Secondary, and Tertiary** types are recommended for Superdesk applications."}}},tags:["autodocs"],argTypes:{text:{control:"text",description:"Button text label (becomes aria-label for icon-only buttons)"},onClick:{action:"clicked",description:"Click handler function"},type:{control:"select",options:["primary","secondary","tertiary","default","success","warning","alert","highlight","sd-green"],description:"Button variant type. **Recommended:** primary, secondary, tertiary",table:{defaultValue:{summary:"default"}}},size:{control:"select",options:["small","normal","large"],description:"Button size",table:{defaultValue:{summary:"normal"}}},style:{control:"select",options:["filled","hollow","text-only"],description:"⚠️ **DEPRECATED** - Will be removed in future versions",table:{defaultValue:{summary:"filled"}}},theme:{control:"select",options:["light","dark"],description:"Theme variant for different backgrounds",table:{defaultValue:{summary:"light"}}},shape:{control:"select",options:["square","round"],description:"Button shape (round only works with iconOnly)",table:{defaultValue:{summary:"square"}}},disabled:{control:"boolean",description:"Disable button interactions",table:{defaultValue:{summary:"false"}}},isLoading:{control:"boolean",description:"Show loading spinner",table:{defaultValue:{summary:"false"}}},expand:{control:"boolean",description:"Expand to full width of container",table:{defaultValue:{summary:"false"}}},iconOnly:{control:"boolean",description:"Show only icon (text becomes aria-label)",table:{defaultValue:{summary:"false"}}},noMargin:{control:"boolean",description:"Remove default margins",table:{defaultValue:{summary:"false"}}},icon:{control:"text",description:"Icon name from icon font"},tooltip:{control:"text",description:"Tooltip text shown on hover"},ariaLabel:{control:"text",description:"Custom ARIA label (auto-generated for iconOnly)"},textAlign:{control:"select",options:["start","center","end"],description:"Text alignment within button",table:{defaultValue:{summary:"center"}}}}},Playground={args:{text:"Button Text",type:"primary",onClick:noop}},RecommendedTypes={render:()=>react.createElement("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"}},react.createElement(Button,{text:"Primary",type:"primary",onClick:noop}),react.createElement(Button,{text:"Secondary",type:"secondary",onClick:noop}),react.createElement(Button,{text:"Tertiary",type:"tertiary",onClick:noop})),parameters:{controls:{disable:!0},docs:{description:{story:"These are the recommended button types for Superdesk applications."}}}},Sizes={render:()=>react.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"12px"}},react.createElement("div",{style:{display:"flex",gap:"12px",alignItems:"center",flexWrap:"wrap"}},react.createElement(Button,{text:"Small",type:"primary",size:"small",onClick:noop}),react.createElement(Button,{text:"Normal",type:"primary",onClick:noop}),react.createElement(Button,{text:"Large",type:"primary",size:"large",onClick:noop})),react.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"12px"}},react.createElement(Button,{text:"Large expanded button",expand:!0,size:"large",type:"primary",onClick:noop}),react.createElement(Button,{text:"Normal expanded button",expand:!0,type:"primary",onClick:noop}),react.createElement(Button,{text:"Small expanded button",expand:!0,size:"small",type:"primary",onClick:noop}))),parameters:{controls:{disable:!0},docs:{description:{story:"Buttons are available in three sizes. Use the expand prop to make buttons take full width."}}}},States={render:()=>react.createElement("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"}},react.createElement(Button,{text:"Normal",type:"primary",onClick:noop}),react.createElement(Button,{text:"Disabled",type:"primary",disabled:!0,onClick:noop}),react.createElement(Button,{text:"Loading",type:"primary",isLoading:!0,onClick:noop})),parameters:{controls:{disable:!0},docs:{description:{story:"Common button states including disabled and loading."}}}},WithIcons={render:()=>react.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"16px"}},react.createElement("div",null,react.createElement("div",{style:{marginBottom:"8px",fontSize:"14px",fontWeight:600}},"Default size"),react.createElement("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"}},react.createElement(Button,{text:"Primary",type:"primary",icon:"plus-sign",onClick:noop}),react.createElement(Button,{text:"Secondary",type:"secondary",icon:"info-sign",onClick:noop}),react.createElement(Button,{text:"Tertiary",type:"tertiary",icon:"info-sign",onClick:noop}))),react.createElement("div",null,react.createElement("div",{style:{marginBottom:"8px",fontSize:"14px",fontWeight:600}},"Large and small"),react.createElement("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"}},react.createElement(Button,{text:"Primary large",type:"primary",icon:"plus-sign",size:"large",onClick:noop}),react.createElement(Button,{text:"Secondary large",type:"secondary",icon:"info-sign",size:"large",onClick:noop}),react.createElement(Button,{text:"Primary small",type:"primary",icon:"plus-sign",size:"small",onClick:noop}),react.createElement(Button,{text:"Tertiary small",type:"tertiary",icon:"info-sign",size:"small",onClick:noop})))),parameters:{controls:{disable:!0},docs:{description:{story:"Buttons can include icons from the icon font in different sizes."}}}},IconOnly={render:()=>react.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"16px"}},react.createElement("div",null,react.createElement("div",{style:{marginBottom:"8px",fontSize:"14px",fontWeight:600}},"Square (large, default, small)"),react.createElement("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"}},react.createElement(Button,{type:"primary",icon:"plus-sign",text:"plus-sign",size:"large",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"secondary",icon:"exclamation-sign",text:"exclamation-sign",size:"large",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"tertiary",icon:"bell",text:"bell",size:"large",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"primary",icon:"plus-sign",text:"plus-sign",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"secondary",icon:"info-sign",text:"info-sign",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"tertiary",icon:"ok",text:"ok",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"primary",icon:"plus-sign",text:"plus-sign",size:"small",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"secondary",icon:"calendar",text:"calendar",size:"small",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"tertiary",icon:"refresh",text:"refresh",size:"small",iconOnly:!0,onClick:noop}))),react.createElement("div",null,react.createElement("div",{style:{marginBottom:"8px",fontSize:"14px",fontWeight:600}},"Round (large, default, small)"),react.createElement("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"}},react.createElement(Button,{type:"primary",icon:"plus-large",text:"plus-large",size:"large",shape:"round",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"secondary",icon:"exclamation-sign",text:"exclamation-sign",size:"large",shape:"round",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"tertiary",icon:"chevron-up-thin",text:"Pull up",size:"large",shape:"round",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"primary",icon:"plus-large",text:"plus-large",shape:"round",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"secondary",icon:"info-sign",text:"info-sign",shape:"round",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"tertiary",icon:"ok",text:"ok",shape:"round",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"primary",icon:"plus-large",text:"Add New",size:"small",shape:"round",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"secondary",icon:"star",text:"star",size:"small",shape:"round",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"tertiary",icon:"close-small",text:"close-small",size:"small",shape:"round",iconOnly:!0,onClick:noop})))),parameters:{controls:{disable:!0},docs:{description:{story:"Icon-only buttons hide text visually but use it for aria-label. Available in both square and round shapes."}}}},__namedExportsOrder=["Playground","RecommendedTypes","Sizes","States","WithIcons","IconOnly"];Playground.parameters={...Playground.parameters,docs:{...Playground.parameters?.docs,source:{originalSource:"{\n  args: {\n    text: 'Button Text',\n    type: 'primary',\n    onClick: noop\n  }\n}",...Playground.parameters?.docs?.source}}},RecommendedTypes.parameters={...RecommendedTypes.parameters,docs:{...RecommendedTypes.parameters?.docs,source:{originalSource:'{\n  render: () => <div style={{\n    display: \'flex\',\n    gap: \'12px\',\n    flexWrap: \'wrap\'\n  }}>\n            <Button text="Primary" type="primary" onClick={noop} />\n            <Button text="Secondary" type="secondary" onClick={noop} />\n            <Button text="Tertiary" type="tertiary" onClick={noop} />\n        </div>,\n  parameters: {\n    controls: {\n      disable: true\n    },\n    docs: {\n      description: {\n        story: \'These are the recommended button types for Superdesk applications.\'\n      }\n    }\n  }\n} satisfies RenderStory',...RecommendedTypes.parameters?.docs?.source}}},Sizes.parameters={...Sizes.parameters,docs:{...Sizes.parameters?.docs,source:{originalSource:'{\n  render: () => <div style={{\n    display: \'flex\',\n    flexDirection: \'column\',\n    gap: \'12px\'\n  }}>\n            <div style={{\n      display: \'flex\',\n      gap: \'12px\',\n      alignItems: \'center\',\n      flexWrap: \'wrap\'\n    }}>\n                <Button text="Small" type="primary" size="small" onClick={noop} />\n                <Button text="Normal" type="primary" onClick={noop} />\n                <Button text="Large" type="primary" size="large" onClick={noop} />\n            </div>\n            <div style={{\n      display: \'flex\',\n      flexDirection: \'column\',\n      gap: \'12px\'\n    }}>\n                <Button text="Large expanded button" expand={true} size="large" type="primary" onClick={noop} />\n                <Button text="Normal expanded button" expand={true} type="primary" onClick={noop} />\n                <Button text="Small expanded button" expand={true} size="small" type="primary" onClick={noop} />\n            </div>\n        </div>,\n  parameters: {\n    controls: {\n      disable: true\n    },\n    docs: {\n      description: {\n        story: \'Buttons are available in three sizes. Use the expand prop to make buttons take full width.\'\n      }\n    }\n  }\n} satisfies RenderStory',...Sizes.parameters?.docs?.source}}},States.parameters={...States.parameters,docs:{...States.parameters?.docs,source:{originalSource:'{\n  render: () => <div style={{\n    display: \'flex\',\n    gap: \'12px\',\n    flexWrap: \'wrap\'\n  }}>\n            <Button text="Normal" type="primary" onClick={noop} />\n            <Button text="Disabled" type="primary" disabled onClick={noop} />\n            <Button text="Loading" type="primary" isLoading onClick={noop} />\n        </div>,\n  parameters: {\n    controls: {\n      disable: true\n    },\n    docs: {\n      description: {\n        story: \'Common button states including disabled and loading.\'\n      }\n    }\n  }\n} satisfies RenderStory',...States.parameters?.docs?.source}}},WithIcons.parameters={...WithIcons.parameters,docs:{...WithIcons.parameters?.docs,source:{originalSource:'{\n  render: () => <div style={{\n    display: \'flex\',\n    flexDirection: \'column\',\n    gap: \'16px\'\n  }}>\n            <div>\n                <div style={{\n        marginBottom: \'8px\',\n        fontSize: \'14px\',\n        fontWeight: 600\n      }}>Default size</div>\n                <div style={{\n        display: \'flex\',\n        gap: \'12px\',\n        flexWrap: \'wrap\'\n      }}>\n                    <Button text="Primary" type="primary" icon="plus-sign" onClick={noop} />\n                    <Button text="Secondary" type="secondary" icon="info-sign" onClick={noop} />\n                    <Button text="Tertiary" type="tertiary" icon="info-sign" onClick={noop} />\n                </div>\n            </div>\n            <div>\n                <div style={{\n        marginBottom: \'8px\',\n        fontSize: \'14px\',\n        fontWeight: 600\n      }}>Large and small</div>\n                <div style={{\n        display: \'flex\',\n        gap: \'12px\',\n        flexWrap: \'wrap\',\n        alignItems: \'center\'\n      }}>\n                    <Button text="Primary large" type="primary" icon="plus-sign" size="large" onClick={noop} />\n                    <Button text="Secondary large" type="secondary" icon="info-sign" size="large" onClick={noop} />\n                    <Button text="Primary small" type="primary" icon="plus-sign" size="small" onClick={noop} />\n                    <Button text="Tertiary small" type="tertiary" icon="info-sign" size="small" onClick={noop} />\n                </div>\n            </div>\n        </div>,\n  parameters: {\n    controls: {\n      disable: true\n    },\n    docs: {\n      description: {\n        story: \'Buttons can include icons from the icon font in different sizes.\'\n      }\n    }\n  }\n} satisfies RenderStory',...WithIcons.parameters?.docs?.source}}},IconOnly.parameters={...IconOnly.parameters,docs:{...IconOnly.parameters?.docs,source:{originalSource:'{\n  render: () => <div style={{\n    display: \'flex\',\n    flexDirection: \'column\',\n    gap: \'16px\'\n  }}>\n            <div>\n                <div style={{\n        marginBottom: \'8px\',\n        fontSize: \'14px\',\n        fontWeight: 600\n      }}>\n                    Square (large, default, small)\n                </div>\n                <div style={{\n        display: \'flex\',\n        gap: \'12px\',\n        flexWrap: \'wrap\',\n        alignItems: \'center\'\n      }}>\n                    <Button type="primary" icon="plus-sign" text="plus-sign" size="large" iconOnly onClick={noop} />\n                    <Button type="secondary" icon="exclamation-sign" text="exclamation-sign" size="large" iconOnly onClick={noop} />\n                    <Button type="tertiary" icon="bell" text="bell" size="large" iconOnly onClick={noop} />\n                    <Button type="primary" icon="plus-sign" text="plus-sign" iconOnly onClick={noop} />\n                    <Button type="secondary" icon="info-sign" text="info-sign" iconOnly onClick={noop} />\n                    <Button type="tertiary" icon="ok" text="ok" iconOnly onClick={noop} />\n                    <Button type="primary" icon="plus-sign" text="plus-sign" size="small" iconOnly onClick={noop} />\n                    <Button type="secondary" icon="calendar" text="calendar" size="small" iconOnly onClick={noop} />\n                    <Button type="tertiary" icon="refresh" text="refresh" size="small" iconOnly onClick={noop} />\n                </div>\n            </div>\n            <div>\n                <div style={{\n        marginBottom: \'8px\',\n        fontSize: \'14px\',\n        fontWeight: 600\n      }}>\n                    Round (large, default, small)\n                </div>\n                <div style={{\n        display: \'flex\',\n        gap: \'12px\',\n        flexWrap: \'wrap\',\n        alignItems: \'center\'\n      }}>\n                    <Button type="primary" icon="plus-large" text="plus-large" size="large" shape="round" iconOnly onClick={noop} />\n                    <Button type="secondary" icon="exclamation-sign" text="exclamation-sign" size="large" shape="round" iconOnly onClick={noop} />\n                    <Button type="tertiary" icon="chevron-up-thin" text="Pull up" size="large" shape="round" iconOnly onClick={noop} />\n                    <Button type="primary" icon="plus-large" text="plus-large" shape="round" iconOnly onClick={noop} />\n                    <Button type="secondary" icon="info-sign" text="info-sign" shape="round" iconOnly onClick={noop} />\n                    <Button type="tertiary" icon="ok" text="ok" shape="round" iconOnly onClick={noop} />\n                    <Button type="primary" icon="plus-large" text="Add New" size="small" shape="round" iconOnly onClick={noop} />\n                    <Button type="secondary" icon="star" text="star" size="small" shape="round" iconOnly onClick={noop} />\n                    <Button type="tertiary" icon="close-small" text="close-small" size="small" shape="round" iconOnly onClick={noop} />\n                </div>\n            </div>\n        </div>,\n  parameters: {\n    controls: {\n      disable: true\n    },\n    docs: {\n      description: {\n        story: \'Icon-only buttons hide text visually but use it for aria-label. Available in both square and round shapes.\'\n      }\n    }\n  }\n} satisfies RenderStory',...IconOnly.parameters?.docs?.source}}}}}]);
+"use strict";(self.webpackChunksuperdesk_ui_framework=self.webpackChunksuperdesk_ui_framework||[]).push([[672],{"./app-typescript/components/Button.stories.tsx"(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{IconOnly:()=>IconOnly,Playground:()=>Playground,RecommendedTypes:()=>RecommendedTypes,Sizes:()=>Sizes,States:()=>States,WithIcons:()=>WithIcons,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Button_stories});var react=__webpack_require__("./node_modules/react/index.js"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames);function _typeof(o){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 _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 _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _toPropertyKey(t){var 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)}(t,"string");return"symbol"==_typeof(i)?i:i+""}function _callSuper(t,o,e){return o=_getPrototypeOf(o),function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}var Icon=function(_React$PureComponent){function Icon(){return function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}(this,Icon),_callSuper(this,Icon,arguments)}return function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}(Icon,_React$PureComponent),function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}(Icon,[{key:"render",value:function render(){var classes=classnames_default()(this.props.className,_defineProperty(_defineProperty(_defineProperty(_defineProperty({},"icon-".concat(this.props.name),this.props.name&&!this.props.size||this.props.name&&"small"===this.props.size),"big-icon--".concat(this.props.name),this.props.name&&"big"===this.props.size),"color--".concat(this.props.type),this.props.type),"scale--".concat(this.props.scale),this.props.scale));return react.createElement("i",{className:classes,"aria-label":this.props.name,"aria-hidden":this.props.ariaHidden,style:{color:this.props.color}})}}])}(react.PureComponent);try{Icon.displayName="Icon",Icon.__docgenInfo={description:"",displayName:"Icon",props:{name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"string"}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"big"'}]}},type:{defaultValue:null,description:"",name:"type",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"default"'},{value:'"success"'},{value:'"warning"'},{value:'"alert"'},{value:'"highlight"'},{value:'"light"'},{value:'"white"'}]}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},scale:{defaultValue:null,description:"",name:"scale",required:!1,type:{name:"enum",value:[{value:'"1.5x"'},{value:'"2x"'},{value:'"3x"'},{value:'"4x"'}]}},ariaHidden:{defaultValue:null,description:"",name:"ariaHidden",required:!1,type:{name:"boolean"}},color:{defaultValue:null,description:"",name:"color",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/components/Icon.tsx#Icon"]={docgenInfo:Icon.__docgenInfo,name:"Icon",path:"app-typescript/components/Icon.tsx#Icon"})}catch(__react_docgen_typescript_loader_error){}function Spinner_typeof(o){return Spinner_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},Spinner_typeof(o)}function Spinner_classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function Spinner_defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,Spinner_toPropertyKey(o.key),o)}}function Spinner_createClass(e,r,t){return r&&Spinner_defineProperties(e.prototype,r),t&&Spinner_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function Spinner_toPropertyKey(t){var i=function Spinner_toPrimitive(t,r){if("object"!=Spinner_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=Spinner_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==Spinner_typeof(i)?i:i+""}function Spinner_callSuper(t,o,e){return o=Spinner_getPrototypeOf(o),function Spinner_possibleConstructorReturn(t,e){if(e&&("object"==Spinner_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function Spinner_assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(t,Spinner_isNativeReflectConstruct()?Reflect.construct(o,e||[],Spinner_getPrototypeOf(t).constructor):o.apply(t,e))}function Spinner_isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(Spinner_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function Spinner_getPrototypeOf(t){return Spinner_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},Spinner_getPrototypeOf(t)}function Spinner_inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&Spinner_setPrototypeOf(t,e)}function Spinner_setPrototypeOf(t,e){return Spinner_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},Spinner_setPrototypeOf(t,e)}var LoadingOverlay=function(_React$PureComponent){function LoadingOverlay(){return Spinner_classCallCheck(this,LoadingOverlay),Spinner_callSuper(this,LoadingOverlay,arguments)}return Spinner_inherits(LoadingOverlay,_React$PureComponent),Spinner_createClass(LoadingOverlay,[{key:"render",value:function render(){return react.createElement("div",{className:"sd-loading-overlay--plain"},this.props.children)}}])}(react.PureComponent),Spinner=function(_React$PureComponent2){function Spinner(){return Spinner_classCallCheck(this,Spinner),Spinner_callSuper(this,Spinner,arguments)}return Spinner_inherits(Spinner,_React$PureComponent2),Spinner_createClass(Spinner,[{key:"render",value:function render(){var classes=classnames_default()("sd-spinner",function Spinner_defineProperty(e,r,t){return(r=Spinner_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}({"sd-spinner--small":void 0===this.props.size},"sd-spinner--".concat(this.props.size),this.props.size||void 0!==this.props.size));return react.createElement("svg",{viewBox:"0 0 24 24",className:classes,stroke:"var(--color-text-muted)"},react.createElement("g",{className:"sd-spinner__path"},react.createElement("circle",{cx:"12",cy:"12",r:"9.5",fill:"none","stroke-width":"3"})))}}])}(react.PureComponent);try{Spinner.displayName="Spinner",Spinner.__docgenInfo={description:"",displayName:"Spinner",props:{size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"large"'},{value:'"mini"'},{value:'"medium"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/components/Spinner.tsx#Spinner"]={docgenInfo:Spinner.__docgenInfo,name:"Spinner",path:"app-typescript/components/Spinner.tsx#Spinner"})}catch(__react_docgen_typescript_loader_error){}try{LoadingOverlay.displayName="LoadingOverlay",LoadingOverlay.__docgenInfo={description:"",displayName:"LoadingOverlay",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/components/Spinner.tsx#LoadingOverlay"]={docgenInfo:LoadingOverlay.__docgenInfo,name:"LoadingOverlay",path:"app-typescript/components/Spinner.tsx#LoadingOverlay"})}catch(__react_docgen_typescript_loader_error){}function assertNever(x){throw new Error("Unexpected object: "+x)}function nameof(name){return name.toString()}function getTextColor(backgroundColor){return backgroundColor?(299*parseInt(backgroundColor.substr(1,2),16)+587*parseInt(backgroundColor.substr(3,2),16)+114*parseInt(backgroundColor.substr(5,2),16))/1e3>=128?"black":"white":void 0}try{assertNever.displayName="assertNever",assertNever.__docgenInfo={description:"",displayName:"assertNever",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/helpers.tsx#assertNever"]={docgenInfo:assertNever.__docgenInfo,name:"assertNever",path:"app-typescript/helpers.tsx#assertNever"})}catch(__react_docgen_typescript_loader_error){}try{nameof.displayName="nameof",nameof.__docgenInfo={description:"",displayName:"nameof",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/helpers.tsx#nameof"]={docgenInfo:nameof.__docgenInfo,name:"nameof",path:"app-typescript/helpers.tsx#nameof"})}catch(__react_docgen_typescript_loader_error){}try{getTextColor.displayName="getTextColor",getTextColor.__docgenInfo={description:"",displayName:"getTextColor",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/helpers.tsx#getTextColor"]={docgenInfo:getTextColor.__docgenInfo,name:"getTextColor",path:"app-typescript/helpers.tsx#getTextColor"})}catch(__react_docgen_typescript_loader_error){}var react_dom=__webpack_require__("./node_modules/react-dom/index.js"),popper=__webpack_require__("./node_modules/@popperjs/core/lib/popper.js"),lodash=__webpack_require__("./node_modules/lodash/lodash.js"),popper_max_size_modifier_esm=__webpack_require__("./node_modules/popper-max-size-modifier/dist/popper-max-size-modifier.esm.js"),zIndex=1100;function ShowPopup_typeof(o){return ShowPopup_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},ShowPopup_typeof(o)}function ShowPopup_defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,ShowPopup_toPropertyKey(o.key),o)}}function ShowPopup_callSuper(t,o,e){return o=ShowPopup_getPrototypeOf(o),function ShowPopup_possibleConstructorReturn(t,e){if(e&&("object"==ShowPopup_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function ShowPopup_assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(t,ShowPopup_isNativeReflectConstruct()?Reflect.construct(o,e||[],ShowPopup_getPrototypeOf(t).constructor):o.apply(t,e))}function ShowPopup_isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(ShowPopup_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function ShowPopup_getPrototypeOf(t){return ShowPopup_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},ShowPopup_getPrototypeOf(t)}function ShowPopup_setPrototypeOf(t,e){return ShowPopup_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},ShowPopup_setPrototypeOf(t,e)}function ShowPopup_toPropertyKey(t){var i=function ShowPopup_toPrimitive(t,r){if("object"!=ShowPopup_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=ShowPopup_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==ShowPopup_typeof(i)?i:i+""}var PopupPositioner=function(_React$PureComponent){function PopupPositioner(props){var _this;return function ShowPopup_classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}(this,PopupPositioner),function ShowPopup_defineProperty(e,r,t){return(r=ShowPopup_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}(_this=ShowPopup_callSuper(this,PopupPositioner,[props]),"zIndex",function getNextZIndex(){return++zIndex}()),_this.getRefElement=_this.getRefElement.bind(_this),_this.closeOnClick=_this.closeOnClick.bind(_this),_this.closeOnScroll=(0,lodash.throttle)(_this.closeOnScroll.bind(_this),200),_this.closeOnMouseLeave=_this.closeOnMouseLeave.bind(_this),_this.wrapperEl=null,_this.popper=null,_this}return function ShowPopup_inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&ShowPopup_setPrototypeOf(t,e)}(PopupPositioner,_React$PureComponent),function ShowPopup_createClass(e,r,t){return r&&ShowPopup_defineProperties(e.prototype,r),t&&ShowPopup_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}(PopupPositioner,[{key:"getRefElement",value:function getRefElement(){return this.wrapperEl}},{key:"closeOnClick",value:function closeOnClick(event){null!=this.wrapperEl&&(null!=this.props.shouldClose&&!1===this.props.shouldClose(event)||!0!==this.props.getReferenceElement().contains(event.target)&&!0!==this.wrapperEl.contains(event.target)&&this.props.onClose())}},{key:"closeOnScroll",value:function closeOnScroll(event){null!=this.wrapperEl&&(null!=this.props.shouldClose&&!1===this.props.shouldClose(event)||!0!==this.wrapperEl.contains(event.target)&&this.props.onClose())}},{key:"closeOnMouseLeave",value:function closeOnMouseLeave(event){null!=this.wrapperEl&&(null!=this.props.shouldClose&&!1===this.props.shouldClose(event)||!0!==this.wrapperEl.contains(event.target)&&this.props.onClose())}},{key:"componentDidMount",value:function componentDidMount(){var _this2=this;window.addEventListener("click",this.closeOnClick,{capture:!0}),window.addEventListener("scroll",this.closeOnScroll,!0),this.props.closeOnHoverEnd&&null!=this.wrapperEl&&(this.props.getReferenceElement().addEventListener("mouseleave",this.closeOnMouseLeave),this.wrapperEl.addEventListener("mouseleave",this.closeOnMouseLeave));var applyMaxSize={name:"applyMaxSize",enabled:!0,phase:"beforeWrite",requires:["maxSize"],fn:function fn(_ref){var state=_ref.state,height=state.modifiersData.maxSize.height;state.styles.popper.maxHeight="".concat(height-8,"px")}},restrictHeightToMaxAvailable={name:"restrictHeightToMaxAvailable",enabled:!0,phase:"main",fn:lodash.noop,requires:["popperOffsets"],effect:function effect(args){var popperHeight=args.state.elements.popper.offsetHeight,viewportHeight=document.body.offsetHeight,refRect=args.state.elements.reference.getBoundingClientRect(),availableSpaceAbove=refRect.top,availableSpaceBelow=viewportHeight-refRect.bottom,availableSpaceMax=Math.max(availableSpaceAbove,availableSpaceBelow);return popperHeight>availableSpaceMax&&(args.state.elements.popper.style.height=availableSpaceMax+"px"),function(){}}};null!=this.wrapperEl&&setTimeout(function(){if(null!=_this2.wrapperEl){var options={modifiers:[restrictHeightToMaxAvailable,{name:"preventOverflow",options:{padding:{top:8}}},popper_max_size_modifier_esm.A,applyMaxSize]};null!=_this2.props.placement&&(options.placement=_this2.props.placement),_this2.popper=(0,popper.n4)(_this2.props.getReferenceElement(),_this2.wrapperEl,options)}},50)}},{key:"componentWillUnmount",value:function componentWillUnmount(){var _this$popper,_this$popper$destroy;window.removeEventListener("click",this.closeOnClick),window.removeEventListener("scroll",this.closeOnScroll,!0),this.props.closeOnHoverEnd&&null!=this.wrapperEl&&(this.props.getReferenceElement().removeEventListener("mouseleave",this.closeOnMouseLeave),this.wrapperEl.removeEventListener("mouseleave",this.closeOnMouseLeave)),null===(_this$popper=this.popper)||void 0===_this$popper||null===(_this$popper$destroy=_this$popper.destroy)||void 0===_this$popper$destroy||_this$popper$destroy.call(_this$popper)}},{key:"render",value:function render(){var _this3=this;return react.createElement(react.Fragment,null,react_dom.createPortal(react.createElement("div",{className:"sd-popup-positioner",ref:function ref(el){_this3.wrapperEl=el},style:{position:"absolute",left:"-100vw",display:"flex",zIndex:this.zIndex},tabIndex:0,"data-test-id":this.props["data-test-id"],onKeyDown:this.props.onKeyDown},this.props.children),document.body))}}])}(react.PureComponent);function showPopup(referenceElement,placement,Component,closeOnHoverEnd,onClose,shouldClose){var el=document.createElement("div");document.body.appendChild(el);var closeFn=function closeFn(){react_dom.unmountComponentAtNode(el),el.remove(),null==onClose||onClose()};return react_dom.render(react.createElement(PopupPositioner,{getReferenceElement:function getReferenceElement(){return referenceElement},placement,onClose:closeFn,shouldClose,closeOnHoverEnd:closeOnHoverEnd||!1},react.createElement(Component,{closePopup:closeFn})),el),{close:closeFn}}try{showPopup.displayName="showPopup",showPopup.__docgenInfo={description:"The popup will remove itself if click/scroll events are detected outside the popup.",displayName:"showPopup",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/components/ShowPopup.tsx#showPopup"]={docgenInfo:showPopup.__docgenInfo,name:"showPopup",path:"app-typescript/components/ShowPopup.tsx#showPopup"})}catch(__react_docgen_typescript_loader_error){}try{PopupPositioner.displayName="PopupPositioner",PopupPositioner.__docgenInfo={description:"",displayName:"PopupPositioner",props:{getReferenceElement:{defaultValue:null,description:"",name:"getReferenceElement",required:!0,type:{name:"() => HTMLElement"}},placement:{defaultValue:null,description:"",name:"placement",required:!1,type:{name:"enum",value:[{value:'"auto"'},{value:'"auto-start"'},{value:'"auto-end"'},{value:'"top"'},{value:'"bottom"'},{value:'"right"'},{value:'"left"'},{value:'"top-start"'},{value:'"top-end"'},{value:'"bottom-start"'},{value:'"bottom-end"'},{value:'"right-start"'},{value:'"right-end"'},{value:'"left-start"'},{value:'"left-end"'}]}},onClose:{defaultValue:null,description:"",name:"onClose",required:!0,type:{name:"() => void"}},shouldClose:{defaultValue:null,description:"",name:"shouldClose",required:!1,type:{name:"(event: MouseEvent | Event) => boolean"}},closeOnHoverEnd:{defaultValue:null,description:"",name:"closeOnHoverEnd",required:!1,type:{name:"boolean"}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"(event: KeyboardEvent<Element>) => void"}},"data-test-id":{defaultValue:null,description:"",name:"data-test-id",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/components/ShowPopup.tsx#PopupPositioner"]={docgenInfo:PopupPositioner.__docgenInfo,name:"PopupPositioner",path:"app-typescript/components/ShowPopup.tsx#PopupPositioner"})}catch(__react_docgen_typescript_loader_error){}function WithPopover_typeof(o){return WithPopover_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},WithPopover_typeof(o)}function WithPopover_defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,WithPopover_toPropertyKey(o.key),o)}}function WithPopover_toPropertyKey(t){var i=function WithPopover_toPrimitive(t,r){if("object"!=WithPopover_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=WithPopover_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==WithPopover_typeof(i)?i:i+""}function WithPopover_callSuper(t,o,e){return o=WithPopover_getPrototypeOf(o),function WithPopover_possibleConstructorReturn(t,e){if(e&&("object"==WithPopover_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function WithPopover_assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(t,WithPopover_isNativeReflectConstruct()?Reflect.construct(o,e||[],WithPopover_getPrototypeOf(t).constructor):o.apply(t,e))}function WithPopover_isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(WithPopover_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function WithPopover_getPrototypeOf(t){return WithPopover_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},WithPopover_getPrototypeOf(t)}function WithPopover_setPrototypeOf(t,e){return WithPopover_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},WithPopover_setPrototypeOf(t,e)}var WithPopover=function(_React$PureComponent){function WithPopover(props){var _this;return function WithPopover_classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}(this,WithPopover),(_this=WithPopover_callSuper(this,WithPopover,[props])).togglePopup=_this.togglePopup.bind(_this),_this}return function WithPopover_inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&WithPopover_setPrototypeOf(t,e)}(WithPopover,_React$PureComponent),function WithPopover_createClass(e,r,t){return r&&WithPopover_defineProperties(e.prototype,r),t&&WithPopover_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}(WithPopover,[{key:"togglePopup",value:function togglePopup(referenceElement){var _this2=this;null!=this.closePopup?(this.closePopup(),this.closePopup=void 0):this.closePopup=showPopup(referenceElement,this.props.placement,this.props.component,this.props.closeOnHoverEnd,function(){var _this2$props$onClose,_this2$props;_this2.closePopup=void 0,null===(_this2$props$onClose=(_this2$props=_this2.props).onClose)||void 0===_this2$props$onClose||_this2$props$onClose.call(_this2$props)},this.props.shouldClose).close}},{key:"render",value:function render(){return this.props.children(this.togglePopup)}}])}(react.PureComponent);try{WithPopover.displayName="WithPopover",WithPopover.__docgenInfo={description:"Wraps `PopupPositioner`\nQuicker to use for simple use cases.",displayName:"WithPopover",props:{placement:{defaultValue:null,description:"",name:"placement",required:!1,type:{name:"enum",value:[{value:'"auto"'},{value:'"auto-start"'},{value:'"auto-end"'},{value:'"top"'},{value:'"bottom"'},{value:'"right"'},{value:'"left"'},{value:'"top-start"'},{value:'"top-end"'},{value:'"bottom-start"'},{value:'"bottom-end"'},{value:'"right-start"'},{value:'"right-end"'},{value:'"left-start"'},{value:'"left-end"'}]}},component:{defaultValue:null,description:"",name:"component",required:!0,type:{name:"ComponentType<{ closePopup(): void; }>"}},closeOnHoverEnd:{defaultValue:null,description:"",name:"closeOnHoverEnd",required:!1,type:{name:"boolean"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!1,type:{name:"() => void"}},shouldClose:{defaultValue:null,description:"",name:"shouldClose",required:!1,type:{name:"(event: MouseEvent | Event) => boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/components/WithPopover.tsx#WithPopover"]={docgenInfo:WithPopover.__docgenInfo,name:"WithPopover",path:"app-typescript/components/WithPopover.tsx#WithPopover"})}catch(__react_docgen_typescript_loader_error){}function TooltipV2_typeof(o){return TooltipV2_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},TooltipV2_typeof(o)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}function TooltipV2_defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,TooltipV2_toPropertyKey(o.key),o)}}function TooltipV2_toPropertyKey(t){var i=function TooltipV2_toPrimitive(t,r){if("object"!=TooltipV2_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=TooltipV2_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==TooltipV2_typeof(i)?i:i+""}function TooltipV2_callSuper(t,o,e){return o=TooltipV2_getPrototypeOf(o),function TooltipV2_possibleConstructorReturn(t,e){if(e&&("object"==TooltipV2_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function TooltipV2_assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(t,TooltipV2_isNativeReflectConstruct()?Reflect.construct(o,e||[],TooltipV2_getPrototypeOf(t).constructor):o.apply(t,e))}function TooltipV2_isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(TooltipV2_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function TooltipV2_getPrototypeOf(t){return TooltipV2_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},TooltipV2_getPrototypeOf(t)}function TooltipV2_setPrototypeOf(t,e){return TooltipV2_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},TooltipV2_setPrototypeOf(t,e)}var TooltipV2=function(_React$PureComponent){function TooltipV2(){return function TooltipV2_classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}(this,TooltipV2),TooltipV2_callSuper(this,TooltipV2,arguments)}return function TooltipV2_inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&TooltipV2_setPrototypeOf(t,e)}(TooltipV2,_React$PureComponent),function TooltipV2_createClass(e,r,t){return r&&TooltipV2_defineProperties(e.prototype,r),t&&TooltipV2_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}(TooltipV2,[{key:"render",value:function render(){var _this$props$placement,_this=this;return react.createElement(WithPopover,{placement:null!==(_this$props$placement=this.props.placement)&&void 0!==_this$props$placement?_this$props$placement:"top",component:function component(){return react.createElement("div",{className:"tooltip"},function(){if("string"==typeof _this.props.content)return react.createElement("span",null,_this.props.content);var Component=_this.props.content;return react.createElement(Component,null)}())}},function(toggle){var attributes={onMouseEnter:function onMouseEnter(event){toggle(event.target)},onMouseLeave:function onMouseLeave(event){toggle(event.target)}};return"function"==typeof _this.props.children?_this.props.children({attributes}):react.createElement("span",_extends({},attributes,{style:{display:"contents"}}),_this.props.children)})}}])}(react.PureComponent);try{TooltipV2.displayName="TooltipV2",TooltipV2.__docgenInfo={description:"Component is intentionally not exported.\nIt will be moved into the components/Tooltip.tsx when legacy support is dropped there.",displayName:"TooltipV2",props:{content:{defaultValue:null,description:"",name:"content",required:!0,type:{name:"string | ComponentType<{}>"}},placement:{defaultValue:null,description:"",name:"placement",required:!1,type:{name:"enum",value:[{value:'"auto"'},{value:'"auto-start"'},{value:'"auto-end"'},{value:'"top"'},{value:'"bottom"'},{value:'"right"'},{value:'"left"'},{value:'"top-start"'},{value:'"top-end"'},{value:'"bottom-start"'},{value:'"bottom-end"'},{value:'"right-start"'},{value:'"right-end"'},{value:'"left-start"'},{value:'"left-end"'}]}},children:{defaultValue:null,description:"If unsure - use ReactNode.\nFunction is for advanced use cases where it's needed to avoid the wrapping span.",name:"children",required:!1,type:{name:"(ReactNode | ((options: { attributes: HTMLAttributes<HTMLElement>; }) => ReactNode)) & ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/components/TooltipV2.tsx#TooltipV2"]={docgenInfo:TooltipV2.__docgenInfo,name:"TooltipV2",path:"app-typescript/components/TooltipV2.tsx#TooltipV2"})}catch(__react_docgen_typescript_loader_error){}function Tooltip_typeof(o){return Tooltip_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},Tooltip_typeof(o)}function Tooltip_extends(){return Tooltip_extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},Tooltip_extends.apply(null,arguments)}function Tooltip_defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,Tooltip_toPropertyKey(o.key),o)}}function Tooltip_toPropertyKey(t){var i=function Tooltip_toPrimitive(t,r){if("object"!=Tooltip_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=Tooltip_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==Tooltip_typeof(i)?i:i+""}function Tooltip_callSuper(t,o,e){return o=Tooltip_getPrototypeOf(o),function Tooltip_possibleConstructorReturn(t,e){if(e&&("object"==Tooltip_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function Tooltip_assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(t,Tooltip_isNativeReflectConstruct()?Reflect.construct(o,e||[],Tooltip_getPrototypeOf(t).constructor):o.apply(t,e))}function Tooltip_isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(Tooltip_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function Tooltip_getPrototypeOf(t){return Tooltip_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},Tooltip_getPrototypeOf(t)}function Tooltip_setPrototypeOf(t,e){return Tooltip_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},Tooltip_setPrototypeOf(t,e)}function flowToPlacement(flow){switch(flow){case void 0:return;case"top":return"top";case"right":return"right";case"down":return"bottom";case"left":return"left";default:return assertNever(flow)}}var Tooltip=function(_React$PureComponent){function Tooltip(){return function Tooltip_classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}(this,Tooltip),Tooltip_callSuper(this,Tooltip,arguments)}return function Tooltip_inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&Tooltip_setPrototypeOf(t,e)}(Tooltip,_React$PureComponent),function Tooltip_createClass(e,r,t){return r&&Tooltip_defineProperties(e.prototype,r),t&&Tooltip_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}(Tooltip,[{key:"render",value:function render(){var _this$props$text,_this=this;return null!=this.props.content?react.createElement(TooltipV2,this.props):react.createElement(TooltipV2,{content:null!==(_this$props$text=this.props.text)&&void 0!==_this$props$text?_this$props$text:"",placement:flowToPlacement(this.props.flow)},function(_ref){var attributes=_ref.attributes;return react.createElement("div",Tooltip_extends({},attributes,{style:{display:"contents"}}),_this.props.children)})}}])}(react.PureComponent);try{Tooltip.displayName="Tooltip",Tooltip.__docgenInfo={description:"",displayName:"Tooltip",props:{content:{defaultValue:null,description:"",name:"content",required:!1,type:{name:"string | ComponentType<{}>"}},placement:{defaultValue:null,description:"",name:"placement",required:!1,type:{name:"enum",value:[{value:'"auto"'},{value:'"auto-start"'},{value:'"auto-end"'},{value:'"top"'},{value:'"bottom"'},{value:'"right"'},{value:'"left"'},{value:'"top-start"'},{value:'"top-end"'},{value:'"bottom-start"'},{value:'"bottom-end"'},{value:'"right-start"'},{value:'"right-end"'},{value:'"left-start"'},{value:'"left-end"'}]}},children:{defaultValue:null,description:"If unsure - use ReactNode.\nFunction is for advanced use cases where it's needed to avoid the wrapping span.",name:"children",required:!1,type:{name:"string | number | boolean | {} | ReactElement<any, string | JSXElementConstructor<any>> | ReactNodeArray | ReactPortal | ... 37 more ... | (((options: { ...; }) => ReactNode) & ReactPortal)"}},text:{defaultValue:null,description:"",name:"text",required:!0,type:{name:"string"}},flow:{defaultValue:null,description:"",name:"flow",required:!1,type:{name:"enum",value:[{value:'"top"'},{value:'"right"'},{value:'"left"'},{value:'"down"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/components/Tooltip.tsx#Tooltip"]={docgenInfo:Tooltip.__docgenInfo,name:"Tooltip",path:"app-typescript/components/Tooltip.tsx#Tooltip"})}catch(__react_docgen_typescript_loader_error){}function Button_typeof(o){return Button_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},Button_typeof(o)}function Button_extends(){return Button_extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},Button_extends.apply(null,arguments)}function Button_defineProperty(e,r,t){return(r=Button_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function Button_classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function Button_defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,Button_toPropertyKey(o.key),o)}}function Button_createClass(e,r,t){return r&&Button_defineProperties(e.prototype,r),t&&Button_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function Button_toPropertyKey(t){var i=function Button_toPrimitive(t,r){if("object"!=Button_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=Button_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==Button_typeof(i)?i:i+""}function Button_callSuper(t,o,e){return o=Button_getPrototypeOf(o),function Button_possibleConstructorReturn(t,e){if(e&&("object"==Button_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function Button_assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(t,Button_isNativeReflectConstruct()?Reflect.construct(o,e||[],Button_getPrototypeOf(t).constructor):o.apply(t,e))}function Button_isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(Button_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function Button_getPrototypeOf(t){return Button_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},Button_getPrototypeOf(t)}function Button_inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&Button_setPrototypeOf(t,e)}function Button_setPrototypeOf(t,e){return Button_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},Button_setPrototypeOf(t,e)}var Button=function(_React$PureComponent){function Button(){return Button_classCallCheck(this,Button),Button_callSuper(this,Button,arguments)}return Button_inherits(Button,_React$PureComponent),Button_createClass(Button,[{key:"render",value:function render(){var _this=this,classes=classnames_default()("btn",Button_defineProperty(Button_defineProperty(Button_defineProperty(Button_defineProperty(Button_defineProperty(Button_defineProperty(Button_defineProperty(Button_defineProperty(Button_defineProperty(Button_defineProperty({"btn--expanded":this.props.expand,"btn--hollow":"tertiary"===this.props.type||"hollow"===this.props.style},"btn--".concat(this.props.size),"normal"!==this.props.size&&void 0!==this.props.size),"btn--".concat(this.props.type),"secondary"!==this.props.type&&void 0!==this.props.type),"btn--".concat(this.props.type),"default"!==this.props.type&&void 0!==this.props.type),"btn--".concat(this.props.style),"filled"!==this.props.style&&void 0!==this.props.style),"btn--disabled",this.props.disabled),"btn--icon-only",this.props.iconOnly),"btn--ui-dark","dark"===this.props.theme),"btn--icon-only-circle","round"===this.props.shape&&this.props.iconOnly),"sd-flex-justify-start","start"===this.props.textAlign),"sd-flex-justify-end","end"===this.props.textAlign));return react.createElement(TooltipWrapper,{tooltipText:this.props.tooltip},function(_ref){var _this$props$ariaLabel,attributes=_ref.attributes;return react.createElement("button",Button_extends({},attributes,{id:_this.props.id,className:classes,tabIndex:0,disabled:_this.props.disabled||_this.props.isLoading,"data-loading":_this.props.isLoading,onClick:_this.props.disabled?function(){return!1}:function(event){return _this.props.onClick(event)},"aria-label":null!==(_this$props$ariaLabel=_this.props.ariaLabel)&&void 0!==_this$props$ariaLabel?_this$props$ariaLabel:_this.props.iconOnly?_this.props.text:void 0,"data-test-id":_this.props["data-test-id"],style:_this.props.noMargin?{margin:0}:void 0}),_this.props.isLoading?react.createElement(Spinner,{size:"mini"}):null,_this.props.icon&&!_this.props.isLoading?react.createElement(Icon,{ariaHidden:!0,name:_this.props.icon}):null,_this.props.iconOnly?null:_this.props.text)})}}])}(react.PureComponent),TooltipWrapper=function(_React$PureComponent2){function TooltipWrapper(){return Button_classCallCheck(this,TooltipWrapper),Button_callSuper(this,TooltipWrapper,arguments)}return Button_inherits(TooltipWrapper,_React$PureComponent2),Button_createClass(TooltipWrapper,[{key:"render",value:function render(){var _this$props=this.props,tooltipText=_this$props.tooltipText,children=_this$props.children;return null!=tooltipText&&(null!=tooltipText?tooltipText:"").length>0?react.createElement(Tooltip,{content:tooltipText},function(_ref2){var attributes=_ref2.attributes;return children({attributes})}):react.createElement(react.Fragment,null,children({attributes:{}}))}}])}(react.PureComponent);try{Button.displayName="Button",Button.__docgenInfo={description:"",displayName:"Button",props:{text:{defaultValue:null,description:"",name:"text",required:!0,type:{name:"string"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!0,type:{name:"(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void"}},expand:{defaultValue:null,description:"",name:"expand",required:!1,type:{name:"boolean"}},style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"enum",value:[{value:'"filled"'},{value:'"hollow"'},{value:'"text-only"'}]}},shape:{defaultValue:null,description:"",name:"shape",required:!1,type:{name:"enum",value:[{value:'"square"'},{value:'"round"'}]}},isLoading:{defaultValue:null,description:"",name:"isLoading",required:!1,type:{name:"boolean"}},loadingLabel:{defaultValue:null,description:"",name:"loadingLabel",required:!1,type:{name:"string"}},tooltip:{defaultValue:null,description:"",name:"tooltip",required:!1,type:{name:"string"}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"string"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"enum",value:[{value:'"light"'},{value:'"dark"'}]}},type:{defaultValue:null,description:"",name:"type",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"default"'},{value:'"success"'},{value:'"warning"'},{value:'"alert"'},{value:'"highlight"'},{value:'"sd-green"'}]}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"normal"'},{value:'"large"'}]}},textAlign:{defaultValue:null,description:"",name:"textAlign",required:!1,type:{name:"enum",value:[{value:'"start"'},{value:'"center"'},{value:'"end"'}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"string"}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"boolean"}},iconOnly:{defaultValue:null,description:"",name:"iconOnly",required:!1,type:{name:"boolean"}},noMargin:{defaultValue:null,description:"",name:"noMargin",required:!1,type:{name:"boolean"}},ariaLabel:{defaultValue:null,description:"",name:"ariaLabel",required:!1,type:{name:"string"}},"data-test-id":{defaultValue:null,description:"",name:"data-test-id",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["app-typescript/components/Button.tsx#Button"]={docgenInfo:Button.__docgenInfo,name:"Button",path:"app-typescript/components/Button.tsx#Button"})}catch(__react_docgen_typescript_loader_error){}const noop=()=>{},Button_stories={title:"Basic Components/Button",component:Button,parameters:{layout:"centered",docs:{description:{component:"A versatile button component supporting multiple variants, sizes, and states. **Primary, Secondary, and Tertiary** types are recommended for Superdesk applications."}}},tags:["autodocs"],argTypes:{text:{control:"text",description:"Button text label (becomes aria-label for icon-only buttons)"},onClick:{action:"clicked",description:"Click handler function"},type:{control:"select",options:["primary","secondary","tertiary","default","success","warning","alert","highlight","sd-green"],description:"Button variant type. **Recommended:** primary, secondary, tertiary. **Note:** Other variants should be avoided, as they will likely be deprecated in future versions.",table:{defaultValue:{summary:"default"}}},size:{control:"select",options:["small","normal","large"],description:"Button size",table:{defaultValue:{summary:"normal"}}},style:{control:"select",options:["filled","hollow","text-only"],description:"⚠️ **DEPRECATED** - Will be removed in future versions",table:{defaultValue:{summary:"filled"}}},theme:{control:"select",options:["light","dark"],description:"Theme variant for different backgrounds",table:{defaultValue:{summary:"light"}}},shape:{control:"select",options:["square","round"],description:"Button shape (round only works with iconOnly)",table:{defaultValue:{summary:"square"}}},disabled:{control:"boolean",description:"Disable button interactions",table:{defaultValue:{summary:"false"}}},isLoading:{control:"boolean",description:"Show loading spinner",table:{defaultValue:{summary:"false"}}},expand:{control:"boolean",description:"Expand to full width of container",table:{defaultValue:{summary:"false"}}},iconOnly:{control:"boolean",description:"Show only icon (text becomes aria-label)",table:{defaultValue:{summary:"false"}}},noMargin:{control:"boolean",description:"Remove default margins",table:{defaultValue:{summary:"false"}}},icon:{control:"text",description:"Icon name from icon font"},tooltip:{control:"text",description:"Tooltip text shown on hover"},ariaLabel:{control:"text",description:"Custom ARIA label (auto-generated for iconOnly)"},textAlign:{control:"select",options:["start","center","end"],description:"Text alignment within button",table:{defaultValue:{summary:"center"}}}}},Playground={args:{text:"Button Text",type:"primary",onClick:noop}},RecommendedTypes={render:()=>react.createElement("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"}},react.createElement(Button,{text:"Primary",type:"primary",onClick:noop}),react.createElement(Button,{text:"Secondary",type:"secondary",onClick:noop}),react.createElement(Button,{text:"Tertiary",type:"tertiary",onClick:noop})),parameters:{controls:{disable:!0},docs:{description:{story:"These are the recommended button types for Superdesk applications."}}}},Sizes={render:()=>react.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"12px"}},react.createElement("div",{style:{display:"flex",gap:"12px",alignItems:"center",flexWrap:"wrap"}},react.createElement(Button,{text:"Small",type:"primary",size:"small",onClick:noop}),react.createElement(Button,{text:"Normal",type:"primary",onClick:noop}),react.createElement(Button,{text:"Large",type:"primary",size:"large",onClick:noop})),react.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"12px"}},react.createElement(Button,{text:"Large expanded button",expand:!0,size:"large",type:"primary",onClick:noop}),react.createElement(Button,{text:"Normal expanded button",expand:!0,type:"primary",onClick:noop}),react.createElement(Button,{text:"Small expanded button",expand:!0,size:"small",type:"primary",onClick:noop}))),parameters:{controls:{disable:!0},docs:{description:{story:"Buttons are available in three sizes. Use the expand prop to make buttons take full width."}}}},States={render:()=>react.createElement("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"}},react.createElement(Button,{text:"Normal",type:"primary",onClick:noop}),react.createElement(Button,{text:"Disabled",type:"primary",disabled:!0,onClick:noop}),react.createElement(Button,{text:"Loading",type:"primary",isLoading:!0,onClick:noop})),parameters:{controls:{disable:!0},docs:{description:{story:"Common button states including disabled and loading."}}}},WithIcons={render:()=>react.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"16px"}},react.createElement("div",null,react.createElement("div",{style:{marginBottom:"8px",fontSize:"14px",fontWeight:600}},"Default size"),react.createElement("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"}},react.createElement(Button,{text:"Primary",type:"primary",icon:"plus-sign",onClick:noop}),react.createElement(Button,{text:"Secondary",type:"secondary",icon:"info-sign",onClick:noop}),react.createElement(Button,{text:"Tertiary",type:"tertiary",icon:"info-sign",onClick:noop}))),react.createElement("div",null,react.createElement("div",{style:{marginBottom:"8px",fontSize:"14px",fontWeight:600}},"Large and small"),react.createElement("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"}},react.createElement(Button,{text:"Primary large",type:"primary",icon:"plus-sign",size:"large",onClick:noop}),react.createElement(Button,{text:"Secondary large",type:"secondary",icon:"info-sign",size:"large",onClick:noop}),react.createElement(Button,{text:"Primary small",type:"primary",icon:"plus-sign",size:"small",onClick:noop}),react.createElement(Button,{text:"Tertiary small",type:"tertiary",icon:"info-sign",size:"small",onClick:noop})))),parameters:{controls:{disable:!0},docs:{description:{story:"Buttons can include icons from the icon font in different sizes."}}}},IconOnly={render:()=>react.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"16px"}},react.createElement("div",null,react.createElement("div",{style:{marginBottom:"8px",fontSize:"14px",fontWeight:600}},"Square (large, default, small)"),react.createElement("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"}},react.createElement(Button,{type:"primary",icon:"plus-sign",text:"plus-sign",size:"large",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"secondary",icon:"exclamation-sign",text:"exclamation-sign",size:"large",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"tertiary",icon:"bell",text:"bell",size:"large",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"primary",icon:"plus-sign",text:"plus-sign",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"secondary",icon:"info-sign",text:"info-sign",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"tertiary",icon:"ok",text:"ok",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"primary",icon:"plus-sign",text:"plus-sign",size:"small",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"secondary",icon:"calendar",text:"calendar",size:"small",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"tertiary",icon:"refresh",text:"refresh",size:"small",iconOnly:!0,onClick:noop}))),react.createElement("div",null,react.createElement("div",{style:{marginBottom:"8px",fontSize:"14px",fontWeight:600}},"Round (large, default, small)"),react.createElement("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"}},react.createElement(Button,{type:"primary",icon:"plus-large",text:"plus-large",size:"large",shape:"round",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"secondary",icon:"exclamation-sign",text:"exclamation-sign",size:"large",shape:"round",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"tertiary",icon:"chevron-up-thin",text:"Pull up",size:"large",shape:"round",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"primary",icon:"plus-large",text:"plus-large",shape:"round",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"secondary",icon:"info-sign",text:"info-sign",shape:"round",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"tertiary",icon:"ok",text:"ok",shape:"round",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"primary",icon:"plus-large",text:"Add New",size:"small",shape:"round",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"secondary",icon:"star",text:"star",size:"small",shape:"round",iconOnly:!0,onClick:noop}),react.createElement(Button,{type:"tertiary",icon:"close-small",text:"close-small",size:"small",shape:"round",iconOnly:!0,onClick:noop})))),parameters:{controls:{disable:!0},docs:{description:{story:"Icon-only buttons hide text visually but use it for aria-label. Available in both square and round shapes."}}}},__namedExportsOrder=["Playground","RecommendedTypes","Sizes","States","WithIcons","IconOnly"];Playground.parameters={...Playground.parameters,docs:{...Playground.parameters?.docs,source:{originalSource:"{\n  args: {\n    text: 'Button Text',\n    type: 'primary',\n    onClick: noop\n  }\n}",...Playground.parameters?.docs?.source}}},RecommendedTypes.parameters={...RecommendedTypes.parameters,docs:{...RecommendedTypes.parameters?.docs,source:{originalSource:'{\n  render: () => <div style={{\n    display: \'flex\',\n    gap: \'12px\',\n    flexWrap: \'wrap\'\n  }}>\n            <Button text="Primary" type="primary" onClick={noop} />\n            <Button text="Secondary" type="secondary" onClick={noop} />\n            <Button text="Tertiary" type="tertiary" onClick={noop} />\n        </div>,\n  parameters: {\n    controls: {\n      disable: true\n    },\n    docs: {\n      description: {\n        story: \'These are the recommended button types for Superdesk applications.\'\n      }\n    }\n  }\n} satisfies RenderStory',...RecommendedTypes.parameters?.docs?.source}}},Sizes.parameters={...Sizes.parameters,docs:{...Sizes.parameters?.docs,source:{originalSource:'{\n  render: () => <div style={{\n    display: \'flex\',\n    flexDirection: \'column\',\n    gap: \'12px\'\n  }}>\n            <div style={{\n      display: \'flex\',\n      gap: \'12px\',\n      alignItems: \'center\',\n      flexWrap: \'wrap\'\n    }}>\n                <Button text="Small" type="primary" size="small" onClick={noop} />\n                <Button text="Normal" type="primary" onClick={noop} />\n                <Button text="Large" type="primary" size="large" onClick={noop} />\n            </div>\n            <div style={{\n      display: \'flex\',\n      flexDirection: \'column\',\n      gap: \'12px\'\n    }}>\n                <Button text="Large expanded button" expand={true} size="large" type="primary" onClick={noop} />\n                <Button text="Normal expanded button" expand={true} type="primary" onClick={noop} />\n                <Button text="Small expanded button" expand={true} size="small" type="primary" onClick={noop} />\n            </div>\n        </div>,\n  parameters: {\n    controls: {\n      disable: true\n    },\n    docs: {\n      description: {\n        story: \'Buttons are available in three sizes. Use the expand prop to make buttons take full width.\'\n      }\n    }\n  }\n} satisfies RenderStory',...Sizes.parameters?.docs?.source}}},States.parameters={...States.parameters,docs:{...States.parameters?.docs,source:{originalSource:'{\n  render: () => <div style={{\n    display: \'flex\',\n    gap: \'12px\',\n    flexWrap: \'wrap\'\n  }}>\n            <Button text="Normal" type="primary" onClick={noop} />\n            <Button text="Disabled" type="primary" disabled onClick={noop} />\n            <Button text="Loading" type="primary" isLoading onClick={noop} />\n        </div>,\n  parameters: {\n    controls: {\n      disable: true\n    },\n    docs: {\n      description: {\n        story: \'Common button states including disabled and loading.\'\n      }\n    }\n  }\n} satisfies RenderStory',...States.parameters?.docs?.source}}},WithIcons.parameters={...WithIcons.parameters,docs:{...WithIcons.parameters?.docs,source:{originalSource:'{\n  render: () => <div style={{\n    display: \'flex\',\n    flexDirection: \'column\',\n    gap: \'16px\'\n  }}>\n            <div>\n                <div style={{\n        marginBottom: \'8px\',\n        fontSize: \'14px\',\n        fontWeight: 600\n      }}>Default size</div>\n                <div style={{\n        display: \'flex\',\n        gap: \'12px\',\n        flexWrap: \'wrap\'\n      }}>\n                    <Button text="Primary" type="primary" icon="plus-sign" onClick={noop} />\n                    <Button text="Secondary" type="secondary" icon="info-sign" onClick={noop} />\n                    <Button text="Tertiary" type="tertiary" icon="info-sign" onClick={noop} />\n                </div>\n            </div>\n            <div>\n                <div style={{\n        marginBottom: \'8px\',\n        fontSize: \'14px\',\n        fontWeight: 600\n      }}>Large and small</div>\n                <div style={{\n        display: \'flex\',\n        gap: \'12px\',\n        flexWrap: \'wrap\',\n        alignItems: \'center\'\n      }}>\n                    <Button text="Primary large" type="primary" icon="plus-sign" size="large" onClick={noop} />\n                    <Button text="Secondary large" type="secondary" icon="info-sign" size="large" onClick={noop} />\n                    <Button text="Primary small" type="primary" icon="plus-sign" size="small" onClick={noop} />\n                    <Button text="Tertiary small" type="tertiary" icon="info-sign" size="small" onClick={noop} />\n                </div>\n            </div>\n        </div>,\n  parameters: {\n    controls: {\n      disable: true\n    },\n    docs: {\n      description: {\n        story: \'Buttons can include icons from the icon font in different sizes.\'\n      }\n    }\n  }\n} satisfies RenderStory',...WithIcons.parameters?.docs?.source}}},IconOnly.parameters={...IconOnly.parameters,docs:{...IconOnly.parameters?.docs,source:{originalSource:'{\n  render: () => <div style={{\n    display: \'flex\',\n    flexDirection: \'column\',\n    gap: \'16px\'\n  }}>\n            <div>\n                <div style={{\n        marginBottom: \'8px\',\n        fontSize: \'14px\',\n        fontWeight: 600\n      }}>\n                    Square (large, default, small)\n                </div>\n                <div style={{\n        display: \'flex\',\n        gap: \'12px\',\n        flexWrap: \'wrap\',\n        alignItems: \'center\'\n      }}>\n                    <Button type="primary" icon="plus-sign" text="plus-sign" size="large" iconOnly onClick={noop} />\n                    <Button type="secondary" icon="exclamation-sign" text="exclamation-sign" size="large" iconOnly onClick={noop} />\n                    <Button type="tertiary" icon="bell" text="bell" size="large" iconOnly onClick={noop} />\n                    <Button type="primary" icon="plus-sign" text="plus-sign" iconOnly onClick={noop} />\n                    <Button type="secondary" icon="info-sign" text="info-sign" iconOnly onClick={noop} />\n                    <Button type="tertiary" icon="ok" text="ok" iconOnly onClick={noop} />\n                    <Button type="primary" icon="plus-sign" text="plus-sign" size="small" iconOnly onClick={noop} />\n                    <Button type="secondary" icon="calendar" text="calendar" size="small" iconOnly onClick={noop} />\n                    <Button type="tertiary" icon="refresh" text="refresh" size="small" iconOnly onClick={noop} />\n                </div>\n            </div>\n            <div>\n                <div style={{\n        marginBottom: \'8px\',\n        fontSize: \'14px\',\n        fontWeight: 600\n      }}>\n                    Round (large, default, small)\n                </div>\n                <div style={{\n        display: \'flex\',\n        gap: \'12px\',\n        flexWrap: \'wrap\',\n        alignItems: \'center\'\n      }}>\n                    <Button type="primary" icon="plus-large" text="plus-large" size="large" shape="round" iconOnly onClick={noop} />\n                    <Button type="secondary" icon="exclamation-sign" text="exclamation-sign" size="large" shape="round" iconOnly onClick={noop} />\n                    <Button type="tertiary" icon="chevron-up-thin" text="Pull up" size="large" shape="round" iconOnly onClick={noop} />\n                    <Button type="primary" icon="plus-large" text="plus-large" shape="round" iconOnly onClick={noop} />\n                    <Button type="secondary" icon="info-sign" text="info-sign" shape="round" iconOnly onClick={noop} />\n                    <Button type="tertiary" icon="ok" text="ok" shape="round" iconOnly onClick={noop} />\n                    <Button type="primary" icon="plus-large" text="Add New" size="small" shape="round" iconOnly onClick={noop} />\n                    <Button type="secondary" icon="star" text="star" size="small" shape="round" iconOnly onClick={noop} />\n                    <Button type="tertiary" icon="close-small" text="close-small" size="small" shape="round" iconOnly onClick={noop} />\n                </div>\n            </div>\n        </div>,\n  parameters: {\n    controls: {\n      disable: true\n    },\n    docs: {\n      description: {\n        story: \'Icon-only buttons hide text visually but use it for aria-label. Available in both square and round shapes.\'\n      }\n    }\n  }\n} satisfies RenderStory',...IconOnly.parameters?.docs?.source}}}}}]);

package/storybook-static/iframe.html

@@ -546,8 +546,8 @@
       
       import './mocker-runtime-injected.js';
       
-      import './runtime~main.4063e973.iframe.bundle.js';
+      import './runtime~main.7d9dbba0.iframe.bundle.js';
       
       import './780.b0b7860a.iframe.bundle.js';
       
-      import './main.6ba8c211.iframe.bundle.js';</script></body></html>
+      import './main.2713e2b2.iframe.bundle.js';</script></body></html>