diff --git a/iframe.html b/iframe.html
index faa04b16..aa4951ab 100644
--- a/iframe.html
+++ b/iframe.html
@@ -361,4 +361,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src/stories","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src/stories","files":"**/*.stories.@(ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(ts|tsx))$"}];</script><script src="runtime~main.1cb2d625.iframe.bundle.js"></script><script src="84.c58761fd.iframe.bundle.js"></script><script src="main.3e7645f7.iframe.bundle.js"></script></body></html>
\ No newline at end of file
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src/stories","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src/stories","files":"**/*.stories.@(ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(ts|tsx))$"}];</script><script src="runtime~main.1cb2d625.iframe.bundle.js"></script><script src="84.c58761fd.iframe.bundle.js"></script><script src="main.e62b9e8a.iframe.bundle.js"></script></body></html>
\ No newline at end of file
diff --git a/main.3e7645f7.iframe.bundle.js b/main.e62b9e8a.iframe.bundle.js
similarity index 99%
rename from main.3e7645f7.iframe.bundle.js
rename to main.e62b9e8a.iframe.bundle.js
index 9f42e4b8..74e8e278 100644
--- a/main.3e7645f7.iframe.bundle.js
+++ b/main.e62b9e8a.iframe.bundle.js
@@ -1 +1 @@
-(self.webpackChunkonyxia_ui=self.webpackChunkonyxia_ui||[]).push([[179],{"./src/stories/assets/svg/Services.svg":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{r:()=>ForwardRef});var _path,_path2,_path3,_path4,react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_excluded=["title","titleId"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function SvgServices(_ref,svgRef){var title=_ref.title,titleId=_ref.titleId,props=_objectWithoutProperties(_ref,_excluded);return react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg",_extends({width:48,height:48,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",ref:svgRef,"aria-labelledby":titleId},props),title?react__WEBPACK_IMPORTED_MODULE_0__.createElement("title",{id:titleId},title):null,_path||(_path=react__WEBPACK_IMPORTED_MODULE_0__.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M19.3594 2.75998C19.1506 2.54494 18.4993 2.22766 18.1906 2.22766H6.01589C5.44517 2.22766 4.98197 2.40622 4.64021 2.75854C4.44677 2.95774 4.21349 3.5515 4.21349 3.98974L4.15109 20.052C4.15109 20.9073 4.39781 21.1603 4.61573 21.3835L4.64021 21.4085C4.85573 21.6302 5.14085 21.7526 5.44325 21.7526H18.5583C18.8607 21.7526 19.1458 21.6302 19.3613 21.4085C19.5557 21.2078 19.7881 20.9001 19.7881 20.5709V3.59614C19.7871 3.26926 19.5548 2.9611 19.3594 2.75998ZM5.82389 3.85342L18.2079 3.90142V8.21998L5.82389 8.20366V3.85342ZM5.82389 10.0181H18.2079V14.2277H5.82389V10.0181ZM18.1585 20.1811H5.77445L5.82629 16.0334H18.2103L18.1585 20.1811Z"})),_path2||(_path2=react__WEBPACK_IMPORTED_MODULE_0__.createElement("path",{d:"M8.0102 6.83088C8.44867 6.83088 8.80412 6.47543 8.80412 6.03696C8.80412 5.59849 8.44867 5.24304 8.0102 5.24304C7.57173 5.24304 7.21628 5.59849 7.21628 6.03696C7.21628 6.47543 7.57173 6.83088 8.0102 6.83088Z"})),_path3||(_path3=react__WEBPACK_IMPORTED_MODULE_0__.createElement("path",{d:"M8.0102 12.8659C8.44867 12.8659 8.80412 12.5105 8.80412 12.072C8.80412 11.6335 8.44867 11.2781 8.0102 11.2781C7.57173 11.2781 7.21628 11.6335 7.21628 12.072C7.21628 12.5105 7.57173 12.8659 8.0102 12.8659Z"})),_path4||(_path4=react__WEBPACK_IMPORTED_MODULE_0__.createElement("path",{d:"M8.0102 18.7882C8.44867 18.7882 8.80412 18.4327 8.80412 17.9942C8.80412 17.5558 8.44867 17.2003 8.0102 17.2003C7.57173 17.2003 7.21628 17.5558 7.21628 17.9942C7.21628 18.4327 7.57173 18.7882 8.0102 18.7882Z"})))}var ForwardRef=react__WEBPACK_IMPORTED_MODULE_0__.forwardRef(SvgServices);__webpack_require__.p},"./src/stories/documentation/Fundamentals/colors.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__,onyxiaBrandColors:()=>onyxiaBrandColors,orangeFocusColor:()=>orangeFocusColor});__webpack_require__("./node_modules/react/index.js");var _mdx_js_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),storybook_dark_mode__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/storybook-dark-mode/dist/index.js"),_theme__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/stories/theme.ts"),_emotion_css__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@emotion/css/dist/emotion-css.esm.js");function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const layoutProps={};function MDXContent({components,...props}){return(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("wrapper",_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.h_,{title:"Documentation/Fundamentals/Colors",decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_4__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_3__.useDarkMode)(),mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,{mdxType:"Story"}))],mdxType:"Meta"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h1",null,"Colors"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The color system is based on a customizable palette, to which a wide variety of themes can be applied,\nand functional use cases to which the different colors of the palette are attached. Color use cases are designed\nto make something harmonious, ensure accessible text, and distinguish user interface elements and surfaces from one another.\nApplication of the color palette brings a unified and recognizable consistency to a vast array of digital products and interfaces.\nThis consistency is grounded by a set of well-defined rules on how to work with the component library in the context of dark and light themes."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#structure"},"Palette")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#sizes"},"Usecases")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#sizes"},"Themes")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#rules-of-use"},"Rules of use"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Color palette"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The color palette system is based on 3 main colors: Focus, Dark and Light.\nThis system allows a simplification of the use of a dark theme and the variations\nof the system with several themes for a better personification."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Focus color"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The Focus color serves as the primary action color for all experiences of an interface.\nIt is often used to mark the identity of the interface in components, but it is mainly used\nto attract the attention of the user, on clickable elements or active states for example."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Dark and light: the Neutral colors"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Neutral colors are basic colors used in typography, backgrounds, outlines and separators in most components.\nThey are used in particular in non-clickable elements and to represent inactive states.\nBoth colors have tonal variations for display nuances and so improve the prioritization of information in the interface.\nPlaying with a dark and light color makes it possible to display a light mode with dark elements on light surfaces\nand easily switch to a dark mode which inverts the colors and so displays light elements on dark surfaces."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Signal colors"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The signal colors are used solely for notifications, warnings, and status messages if a color differentiation is required.\nThere are 4 types of signal allowing information of different kinds to be given."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Color usecases"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The Design System offers components suitable for two color modes:"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"The clear theme: to be accessible on a light background.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"The dark theme: to be accessible on a dark background."))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The use of the dark theme is particularly recommended to reduce power consumption and reduce eye strain."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("blockquote",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"blockquote"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("strong",{parentName:"p"},"Warning :")," It is not possible to mix the colors of the light theme and those of the dark theme.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The color correspondences between these two themes have been defined according to the uses on the different\ncomponents. They are automatically applied when you install the dark theme on your site."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Theming"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Onyxia brand colors"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Orange, Blue, and White: these are the Onyxia brand colors.\nThe order is immaterial because there is no hierarchy here.\nWhat matters is that the colors support the message you want to convey and that the overall layout is not too colorful."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Onyxia brand colors",mdxType:"Story"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridAutoRows:20,alignItems:"center",gridGap:40})},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.focus.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Exeburant Orange (Focus)"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FF562C"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Midnight Blue (Dark)"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#2C323F"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White snow (Light)"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#F1F0EB")))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",null,"Colors palette"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"For functional applications, the color palette can be extended to include shade ranging from light to dark."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Orange Focus color",mdxType:"Story"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridAutoRows:20,alignItems:"center",gridGap:40})},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.focus.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Orange (Focus) - Main"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FF562C"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.focus.light})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Orange (Focus) - Light"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FFAD99"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.focus.light2})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Orange (Focus) - Light 2"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FF562C"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Main"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#2C323F"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.light})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Light"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#373E4F"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.greyVariant1})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Tones Variant 1"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#242C39"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.greyVariant2})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Tones Variant 2"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#5A6270"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.greyVariant3})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Tones Variant 3"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#8A9099"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.greyVariant4})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Tones Variant 4"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#B8BABF"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Main"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#F1F0EB"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.light})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Light"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FDFDFC"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.greyVariant1})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Tones Variant 1"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#E6E6E6"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.greyVariant2})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Tones Variant 2"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#C9C9C9"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.greyVariant3})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Tones Variant 3"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#9E9E9E"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.greyVariant4})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Tones Variant 4"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#747474")))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Rules of use"))}MDXContent.isMDXComponent=!0;const onyxiaBrandColors=()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridAutoRows:20,alignItems:"center",gridGap:40})},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.focus.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Exeburant Orange (Focus)"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FF562C"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Midnight Blue (Dark)"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#2C323F"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White snow (Light)"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#F1F0EB"));onyxiaBrandColors.storyName="Onyxia brand colors",onyxiaBrandColors.parameters={storySource:{source:'<div className={css({\n  "display": "grid",\n  "gridTemplateColumns": "repeat(3, 1fr)",\n  "gridAutoRows": 20,\n  "alignItems": "center",\n  "gridGap": 40\n})}>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.focus.main\n  })} />\n            <h4 className={css({})}>Exeburant Orange (Focus)</h4>\n            <p className={css({})}>#FF562C</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.dark.main\n  })} />\n            <h4 className={css({})}>Midnight Blue (Dark)</h4>\n            <p className={css({})}>#2C323F</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.light.main\n  })} />\n            <h4 className={css({})}>White snow (Light)</h4>\n            <p className={css({})}>#F1F0EB</p>\n        </div>'}};const orangeFocusColor=()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridAutoRows:20,alignItems:"center",gridGap:40})},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.focus.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Orange (Focus) - Main"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FF562C"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.focus.light})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Orange (Focus) - Light"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FFAD99"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.focus.light2})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Orange (Focus) - Light 2"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FF562C"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Main"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#2C323F"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.light})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Light"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#373E4F"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.greyVariant1})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Tones Variant 1"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#242C39"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.greyVariant2})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Tones Variant 2"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#5A6270"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.greyVariant3})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Tones Variant 3"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#8A9099"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.greyVariant4})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Tones Variant 4"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#B8BABF"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Main"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#F1F0EB"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.light})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Light"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FDFDFC"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.greyVariant1})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Tones Variant 1"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#E6E6E6"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.greyVariant2})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Tones Variant 2"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#C9C9C9"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.greyVariant3})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Tones Variant 3"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#9E9E9E"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.greyVariant4})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Tones Variant 4"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#747474"));orangeFocusColor.storyName="Orange Focus color",orangeFocusColor.parameters={storySource:{source:'<div className={css({\n  "display": "grid",\n  "gridTemplateColumns": "repeat(3, 1fr)",\n  "gridAutoRows": 20,\n  "alignItems": "center",\n  "gridGap": 40\n})}>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.focus.main\n  })} />\n            <h4 className={css({})}>Orange (Focus) - Main</h4>\n            <p className={css({})}>#FF562C</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.focus.light\n  })} />\n            <h4 className={css({})}>Orange (Focus) - Light</h4>\n            <p className={css({})}>#FFAD99</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.focus.light2\n  })} />\n            <h4 className={css({})}>Orange (Focus) - Light 2</h4>\n            <p className={css({})}>#FF562C</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.dark.main\n  })} />\n            <h4 className={css({})}>Blue (Dark) - Main</h4>\n            <p className={css({})}>#2C323F</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.dark.light\n  })} />\n            <h4 className={css({})}>Blue (Dark) - Light</h4>\n            <p className={css({})}>#373E4F</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.dark.greyVariant1\n  })} />\n            <h4 className={css({})}>Blue (Dark) - Tones Variant 1</h4>\n            <p className={css({})}>#242C39</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.dark.greyVariant2\n  })} />\n            <h4 className={css({})}>Blue (Dark) - Tones Variant 2</h4>\n            <p className={css({})}>#5A6270</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.dark.greyVariant3\n  })} />\n            <h4 className={css({})}>Blue (Dark) - Tones Variant 3</h4>\n            <p className={css({})}>#8A9099</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.dark.greyVariant4\n  })} />\n            <h4 className={css({})}>Blue (Dark) - Tones Variant 4</h4>\n            <p className={css({})}>#B8BABF</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.light.main\n  })} />\n            <h4 className={css({})}>White (Light) - Main</h4>\n            <p className={css({})}>#F1F0EB</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.light.light\n  })} />\n            <h4 className={css({})}>White (Light) - Light</h4>\n            <p className={css({})}>#FDFDFC</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.light.greyVariant1\n  })} />\n            <h4 className={css({})}>White (Light) - Tones Variant 1</h4>\n            <p className={css({})}>#E6E6E6</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.light.greyVariant2\n  })} />\n            <h4 className={css({})}>White (Light) - Tones Variant 2</h4>\n            <p className={css({})}>#C9C9C9</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.light.greyVariant3\n  })} />\n            <h4 className={css({})}>White (Light) - Tones Variant 3</h4>\n            <p className={css({})}>#9E9E9E</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.light.greyVariant4\n  })} />\n            <h4 className={css({})}>White (Light) - Tones Variant 4</h4>\n            <p className={css({})}>#747474</p>\n        </div>'}};const componentMeta={title:"Documentation/Fundamentals/Colors",decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_4__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_3__.useDarkMode)()},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,null))],includeStories:["onyxiaBrandColors","orangeFocusColor"]},mdxStoryNameToKey={"Onyxia brand colors":"onyxiaBrandColors","Orange Focus color":"orangeFocusColor"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.aT,{mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(MDXContent,null))};const __WEBPACK_DEFAULT_EXPORT__=componentMeta,__namedExportsOrder=["onyxiaBrandColors","orangeFocusColor"]},"./src/stories/documentation/components/Alert.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__,errorAlert:()=>errorAlert,infoAlert:()=>infoAlert,successAlert:()=>successAlert,warningAlert:()=>warningAlert});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_theme__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/theme.ts"),_Alert__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/Alert.tsx"),_emotion_css__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@emotion/css/dist/emotion-css.esm.js"),storybook_dark_mode__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/storybook-dark-mode/dist/index.js");function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const layoutProps={};function MDXContent({components,...props}){return(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("wrapper",_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.h_,{title:"Documentation/Components/Alert",component:_Alert__WEBPACK_IMPORTED_MODULE_4__.b,decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_6__.useDarkMode)(),mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,{mdxType:"Story"}))],parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h1",null,"Alert"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"This is a documentation of ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("inlineCode",{parentName:"p"},"<Alert/>")," component.\nAlerts are used to draw the user's attention to information."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#structure"},"Structure")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#types-of-alert"},"Types of alert")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#rules-of-use"},"Rules of use")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#properties"},"Properties"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Structure"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The alert is made up of the following elements:"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"a title - mandatory.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"a pictogram and a color - mandatory.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"a description text - optional.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"a closing cross - optional."))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Alerts are displayed contextually in a page / form, during user interactions with validation messages\n(example: success or error following submission of a form) or during application / system side events\n(example : information, alert, update messages, etc.)."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Types of alert"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"There are 4 types of alert allowing information of different kinds to be given:"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#error-alert"},"Error alert")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#success-alert"},"Success alert")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#information-alert"},"Information alert")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#warning-alert"},"Warning alert"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Error alert"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Used when there are several errors in a form, or fatal errors for the user to report."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Error  Alert",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"error",mdxType:"Alert"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1",mdxType:"Text"},"This is an error")))))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Alert severity="error">\n    <Text typo="body 1">This is an error</Text>\n</Alert>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Success alert"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Used to indicate to the user that an action or task has been completed successfully."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Success Alert",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"success",mdxType:"Alert"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1",mdxType:"Text"},"This is an success")))))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Alert severity="success">\n    <Text typo="body 1">This is an success</Text>\n</Alert>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Information alert"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Use to highlight important information"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Info Alert",mdxType:"Story"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:!1,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"info",mdxType:"Alert"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1",mdxType:"Text"},"This is an info"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:!0,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"info",mdxType:"Alert"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1",mdxType:"Text"},"This is an info"))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Alert severity="info">\n    <Text typo="body 1">This is an info</Text>\n</Alert>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Warning alert"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Use to highlight important information"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Warning Alert",mdxType:"Story"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:!1,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"warning",mdxType:"Alert"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1",mdxType:"Text"},"This is a warning"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:!0,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"warning",mdxType:"Alert"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1",mdxType:"Text"},"This is a warning"))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Alert severity="warning">\n    <Text typo="body 1">This is an info</Text>\n</Alert>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Rules of use"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"The title of the alert should be clear and concise."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"The alert description text should clearly detail the information / problem to the user."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"The tone should be courteous, not to blame the user, but to accompany him.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Properties"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.$4,{of:_Alert__WEBPACK_IMPORTED_MODULE_4__.b,mdxType:"ArgsTable"}))}MDXContent.isMDXComponent=!0;const errorAlert=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"error"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1"},"This is an error"))))));errorAlert.storyName="Error  Alert",errorAlert.parameters={storySource:{source:'[false, true].map(dark => <Fragment key={dark}>\n                <div className={css({\n    "margin": 20\n  })} />\n                <StoryProvider dark={dark}>\n                    <Alert severity="error">\n                        <Text typo="body 1">This is an error</Text>\n                    </Alert>\n                </StoryProvider>\n            </Fragment>)'}};const successAlert=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"success"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1"},"This is an success"))))));successAlert.storyName="Success Alert",successAlert.parameters={storySource:{source:'[false, true].map(dark => <Fragment key={dark}>\n                <div className={css({\n    "margin": 20\n  })} />\n                <StoryProvider dark={dark}>\n                    <Alert severity="success">\n                        <Text typo="body 1">This is an success</Text>\n                    </Alert>\n                </StoryProvider>\n            </Fragment>)'}};const infoAlert=()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:!1},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"info"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1"},"This is an info"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:!0},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"info"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1"},"This is an info"))));infoAlert.storyName="Info Alert",infoAlert.parameters={storySource:{source:'<StoryProvider dark={false}>\n            <Alert severity="info">\n                <Text typo="body 1">This is an info</Text>\n            </Alert>\n        </StoryProvider>\n<div className={css({\n  "margin": 20\n})} />\n<StoryProvider dark={true}>\n            <Alert severity="info">\n                <Text typo="body 1">This is an info</Text>\n            </Alert>\n        </StoryProvider>'}};const warningAlert=()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:!1},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"warning"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1"},"This is a warning"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:!0},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"warning"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1"},"This is a warning"))));warningAlert.storyName="Warning Alert",warningAlert.parameters={storySource:{source:'<StoryProvider dark={false}>\n            <Alert severity="warning">\n                <Text typo="body 1">This is a warning</Text>\n            </Alert>\n        </StoryProvider>\n<div className={css({\n  "margin": 20\n})} />\n<StoryProvider dark={true}>\n            <Alert severity="warning">\n                <Text typo="body 1">This is a warning</Text>\n            </Alert>\n        </StoryProvider>'}};const componentMeta={title:"Documentation/Components/Alert",parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_6__.useDarkMode)()},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,null))],component:_Alert__WEBPACK_IMPORTED_MODULE_4__.b,includeStories:["errorAlert","successAlert","infoAlert","warningAlert"]},mdxStoryNameToKey={"Error  Alert":"errorAlert","Success Alert":"successAlert","Info Alert":"infoAlert","Warning Alert":"warningAlert"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.aT,{mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(MDXContent,null))};const __WEBPACK_DEFAULT_EXPORT__=componentMeta,__namedExportsOrder=["errorAlert","successAlert","infoAlert","warningAlert"]},"./src/stories/documentation/components/Button.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,buttonWithLeftIcon:()=>buttonWithLeftIcon,buttonWithRightIcon:()=>buttonWithRightIcon,default:()=>__WEBPACK_DEFAULT_EXPORT__,disabledStatus:()=>disabledStatus,primaryButton:()=>primaryButton,secondaryButton:()=>secondaryButton,ternaryButton:()=>ternaryButton});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_theme__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/theme.ts"),_emotion_css__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@emotion/css/dist/emotion-css.esm.js"),storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/storybook-dark-mode/dist/index.js");function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const layoutProps={};function MDXContent({components,...props}){return(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("wrapper",_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.h_,{title:"documentation/Components/Button",component:_theme__WEBPACK_IMPORTED_MODULE_3__.zx,decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__.useDarkMode)(),mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,{mdxType:"Story"}))],parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h1",null,"Button"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"This is a documentation of ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("inlineCode",{parentName:"p"},"<Button/>")," component.\nButtons are elements of interaction with the interface allowing the user to perform an action.\nThey are used to show the user’s choice of options for actions and assign these to a clear hierarchy.\nFor example, a button helps the user to find the most important actions of a page or within a viewport and enables\nthem to perform these actions. The label is used to clearly indicate to the user what action will be triggered.\nButtons allow users to commit a change, complete steps in a task, or make choices."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#structure"},"Structure")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#variations"},"Variations")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#rules-of-use"},"Rules of use")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#properties"},"Properties"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Structure"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The button is made up of the following elements:"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"a label - mandatory.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"a icon, can be modified - optional."))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Variations"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#primary-button"},"Primary button")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#secondary-button"},"Secondary button")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#ternary-button"},"Ternary button")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#disabled-status"},"Disabled status")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#buttons-with-icon"},"Buttons with icon"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Primary button"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The primary button is used for main actions such as submitting a form or redirecting to content that you want to prioritize in the user journey."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Primary button",mdxType:"Story"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",variant:"primary",mdxType:"Button"}," ","Button text"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Button href="#" variant="primary">\n    Button text\n</Button>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"To be efficient and prioritize the actions offered to the user, limit the use of the primary button to 1 per screen\nand never use two primary buttons side by side. You can align a primary button with a secondary or tertiary button."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Secondary button"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The secondary button is used when the action has lower priority than the primary action,\nsuch as canceling, rewinding or resetting values ​​on a form."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Secondary button",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",variant:"secondary",mdxType:"Button"},"Button text"))))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Button href="#" variant="secondary">\n    Button text\n</Button>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Ternary button"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The ternary button is a third level of action, more rare,\nis used for external links or resetting values ​​on a form."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Ternary button",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",variant:"ternary",mdxType:"Button"},"Button text"))))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Button href="#" variant="ternary">\n    Button text\n</Button>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Disabled status"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The inactive state indicates that the user cannot interact with the button.\nIt should be only used very occasionally. For example, when we want to indicate\nto the user that he must take an upstream action."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:" Disabled status",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",disabled:"true",mdxType:"Button"},"Button text"))))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Button href="#" disabled="true">\n    Button text\n</Button>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Button with icon"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"It is possible to add an icon to your button allowing a better understanding of the action.\nTo do this, all you have to do is use the icon's CSS class (",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"p",href:"..."},"See the icons documentation"),")\nTwo variations are possible:"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"with icon to the right"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"with icon to the left")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"⚠️ Single icon, to use a single icon ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"p",href:"..."},"see the icon button documentation")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Button with right icon",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",endIcon:"help",mdxType:"Button"},"Button text"))))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Button href="#" endIcon="help">\n    Button text\n</Button>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Button with left icon",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",startIcon:"help",mdxType:"Button"},"Button text"))))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Button href="#" startIcon="help">\n    Button text\n</Button>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Rules of use"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Use a primary button for the next best action. Remaining calls-to-action should be represented as secondary or text buttons."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Use buttons in consistent locations in the user interface to improve user experience."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Only use one or two primary buttons per viewport, no limits per page."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Button labels must describe the action the button will perform and should include a verb. Use concise, specific, self-explanatory labels."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Button labels should always include a noun if there is any room for interpretation about what the verb operates on."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"You must use the same writing format on all your button labels (Example: 1st letter in uppercase, the rest in lowercase, imperative)."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},'Do not use generic labels like "Ok," especially in the case of an error; errors are never "Ok".'),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Use the button group component when there is a need to combine or lay out multiple buttons, and express different emphasis levels (e.g. one primary button and one secondary button)."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Do not use two primary buttons in a button group."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Do not use a button for a text link or navigation item.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Properties"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.$4,{of:_theme__WEBPACK_IMPORTED_MODULE_3__.zx,mdxType:"ArgsTable"}))}MDXContent.isMDXComponent=!0;const primaryButton=()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",variant:"primary"}," ","Button text"));primaryButton.storyName="Primary button",primaryButton.parameters={storySource:{source:'<div className={css({\n  "margin": 20\n})} />\n<Button href="#" variant="primary">\n                {" "}\n                Button text\n            </Button>'}};const secondaryButton=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",variant:"secondary"},"Button text")))));secondaryButton.storyName="Secondary button",secondaryButton.parameters={storySource:{source:'[false, true].map(dark => <Fragment key={dark}>\n                <div className={css({\n    "margin": 20\n  })} />\n                <StoryProvider dark={dark}>\n                    <Button href="#" variant="secondary">\n                        Button text\n                    </Button>\n                </StoryProvider>\n            </Fragment>)'}};const ternaryButton=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",variant:"ternary"},"Button text")))));ternaryButton.storyName="Ternary button",ternaryButton.parameters={storySource:{source:'[false, true].map(dark => <Fragment key={dark}>\n                <div className={css({\n    "margin": 20\n  })} />\n                <StoryProvider dark={dark}>\n                    <Button href="#" variant="ternary">\n                        Button text\n                    </Button>\n                </StoryProvider>\n            </Fragment>)'}};const disabledStatus=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",disabled:"true"},"Button text")))));disabledStatus.storyName=" Disabled status",disabledStatus.parameters={storySource:{source:'[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}>\n                    <div className={css({\n      "margin": 20\n    })} />\n                    <Button href="#" disabled="true">\n                        Button text\n                    </Button>\n                </StoryProvider>\n            </Fragment>)'}};const buttonWithRightIcon=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",endIcon:"help"},"Button text")))));buttonWithRightIcon.storyName="Button with right icon",buttonWithRightIcon.parameters={storySource:{source:'[false, true].map(dark => <Fragment key={dark}>\n                <div className={css({\n    "margin": 20\n  })} />\n                <StoryProvider dark={dark}>\n                    <Button href="#" endIcon="help">\n                        Button text\n                    </Button>\n                </StoryProvider>\n            </Fragment>)'}};const buttonWithLeftIcon=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",startIcon:"help"},"Button text")))));buttonWithLeftIcon.storyName="Button with left icon",buttonWithLeftIcon.parameters={storySource:{source:'[false, true].map(dark => <Fragment key={dark}>\n                <div className={css({\n    "margin": 20\n  })} />\n                <StoryProvider dark={dark}>\n                    <Button href="#" startIcon="help">\n                        Button text\n                    </Button>\n                </StoryProvider>\n            </Fragment>)'}};const componentMeta={title:"documentation/Components/Button",parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__.useDarkMode)()},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,null))],component:_theme__WEBPACK_IMPORTED_MODULE_3__.zx,includeStories:["primaryButton","secondaryButton","ternaryButton","disabledStatus","buttonWithRightIcon","buttonWithLeftIcon"]},mdxStoryNameToKey={"Primary button":"primaryButton","Secondary button":"secondaryButton","Ternary button":"ternaryButton"," Disabled status":"disabledStatus","Button with right icon":"buttonWithRightIcon","Button with left icon":"buttonWithLeftIcon"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.aT,{mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(MDXContent,null))};const __WEBPACK_DEFAULT_EXPORT__=componentMeta,__namedExportsOrder=["primaryButton","secondaryButton","ternaryButton","disabledStatus","buttonWithRightIcon","buttonWithLeftIcon"]},"./src/stories/documentation/components/Checkbox.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__,defaultStory:()=>defaultStory,disabled:()=>disabled,error:()=>error,helpText:()=>helpText});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_theme__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/theme.ts"),storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__=(__webpack_require__("./node_modules/@emotion/css/dist/emotion-css.esm.js"),__webpack_require__("./node_modules/storybook-dark-mode/dist/index.js"));function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const layoutProps={};function MDXContent({components,...props}){return(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("wrapper",_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.h_,{title:"documentation/Components/Checkbox",component:_theme__WEBPACK_IMPORTED_MODULE_3__.Checkbox,decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__.useDarkMode)(),mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,{mdxType:"Story"}))],parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h1",null,"Checkbox"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"This is a documentation of ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("inlineCode",{parentName:"p"},"<Checkbox/>")," component.\nThe checkbox allow the user to select one or more options from a list.\nThey are used to make multiple selections (from 0 to N elements) or to allow a binary choice,\nwhen the user can select or deselect a single option."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#structure"},"Structure")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#sizes"},"States")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#options"},"Options")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#properties"},"Properties"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Structure"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Checkbox is made up of the following elements:"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"a button / box - mandatory."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"a label, associated with the button - mandatory."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"an additional text for the buttons / labels - optional."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"a title, describing the context of the button group - mandatory for groups of boxes."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"an additional description for the legend - optional."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"an error message - required if a change of state is to be notified to the user.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"States"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Default"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Default",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Disabled"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Disabled",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Error"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Option to update"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Error",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Options"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Lists"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Option to update"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Help text"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Help text",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Properties"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.$4,{of:_theme__WEBPACK_IMPORTED_MODULE_3__.Checkbox,mdxType:"ArgsTable"}))}MDXContent.isMDXComponent=!0;const defaultStory=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));defaultStory.storyName="Default",defaultStory.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const disabled=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));disabled.storyName="Disabled",disabled.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const error=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));error.storyName="Error",error.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const helpText=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));helpText.storyName="Help text",helpText.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const componentMeta={title:"documentation/Components/Checkbox",parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__.useDarkMode)()},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,null))],component:_theme__WEBPACK_IMPORTED_MODULE_3__.Checkbox,includeStories:["defaultStory","disabled","error","helpText"]},mdxStoryNameToKey={Default:"defaultStory",Disabled:"disabled",Error:"error","Help text":"helpText"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.aT,{mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(MDXContent,null))};const __WEBPACK_DEFAULT_EXPORT__=componentMeta,__namedExportsOrder=["defaultStory","disabled","error","helpText"]},"./src/stories/documentation/components/NavigationBar.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,activeState:()=>activeState,default:()=>__WEBPACK_DEFAULT_EXPORT__,defaultState:()=>defaultState,disabledState:()=>disabledState,errorState:()=>errorState,helpTextField:()=>helpTextField,longHelpTextField:()=>longHelpTextField,passwordField:()=>passwordField,selectionField:()=>selectionField});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_theme__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/theme.ts"),storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__=(__webpack_require__("./node_modules/@emotion/css/dist/emotion-css.esm.js"),__webpack_require__("./node_modules/storybook-dark-mode/dist/index.js"));function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const ButtonBarButton=(name="ButtonBarButton",function MDXDefaultShortcode(props){return console.warn("Component "+name+" was not imported, exported, or provided by MDXProvider as global scope"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",props)});var name;const layoutProps={};function MDXContent({components,...props}){return(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("wrapper",_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.h_,{title:"documentation/Components/NavigationBar",component:_theme__WEBPACK_IMPORTED_MODULE_3__.k2,decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__.useDarkMode)(),mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,{mdxType:"Story"}))],parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h1",null,"Navigation Bar"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"This is a documentation of ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("inlineCode",{parentName:"p"},"<NavigationBar/>"),' component.\nA navigation bar is a group of related links, or "navigation items",\nthat indicate the action that will be taken or the content that will be revealed\nwhen the item is clicked. Navigation bars are commonly used for several purposes.'),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"First, to direct users to specific content on the current page or to an external page.\nSecond, and similar to tabs, as a control allowing the user to switch between content,\nshowing selected content and hiding other content, often using animated transitions\nto hide and reveal content. And then to finish also to carry out actions or operations\non the content of the page."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#structure"},"Structure")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#states"},"States")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#rules-of-use"},"Rules of use")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#properties"},"Properties"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Structure"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"It consists of the following elements:"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"A navigation bar")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"Menu items (Direct links or drop-down menu)"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"States"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Default state"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Default state",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(ButtonBarButton,{mdxType:"ButtonBarButton"},"hello"))))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Active state"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Active state",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Error state"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Error state",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Disabled state"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Disabled state",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Options"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Field with help text"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"An optional help text can be added to provide additional guidance to the user on how to interact with the component."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Help text field",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Field with a long help text"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"A long help text improve the guidance of help text for the user on how to interact with the component."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Long Help text field",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Selection field"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Selection field provide a choice of options from a list. The selected components\nare typically used in a form to allow users to make the desired selection from the list of options."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Selection field",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Passwords"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"If the information being entered by the user is sensitive, use the password option to protect it."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Password field",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Rules of use"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Keep the same label for fields requesting the same information"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"A help text may accompany this wording to clarify in particular the nature of the expected content.\nIf a precise format is expected, it should be indicated as clearly as possible and given examples."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Information should not be hidden in a tooltip or infobox, if this content is essential to enter the field."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"The eye spontaneously read from bottom to top, display the fields in a vertical list to facilitate reading and optimize ergonomics"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Use a primary button to validate an input field or a form, the secondary button will be used to go back, reset the form or abandon the input."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"The submission of a field must be followed by a message indicating the success or not of the desired action"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Label the form as (optional) when the input is not required."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Avoid the use of placeholder as it can confuse the user. However, if you wish to use, it is necessary\nto respect the proposed color in order to remain accessible, and its content must present information\nnot essential to understanding the field. In no case can it replace a label and it is only to be reserved\nfor secondary input aids.")))}MDXContent.isMDXComponent=!0;const defaultState=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(ButtonBarButton,null,"hello")))));defaultState.storyName="Default state",defaultState.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}>\n                    <ButtonBarButton>hello</ButtonBarButton>\n                </StoryProvider>\n            </Fragment>)"}};const activeState=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));activeState.storyName="Active state",activeState.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const errorState=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));errorState.storyName="Error state",errorState.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const disabledState=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));disabledState.storyName="Disabled state",disabledState.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const helpTextField=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));helpTextField.storyName="Help text field",helpTextField.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const longHelpTextField=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));longHelpTextField.storyName="Long Help text field",longHelpTextField.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const selectionField=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));selectionField.storyName="Selection field",selectionField.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const passwordField=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));passwordField.storyName="Password field",passwordField.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const componentMeta={title:"documentation/Components/NavigationBar",parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__.useDarkMode)()},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,null))],component:_theme__WEBPACK_IMPORTED_MODULE_3__.k2,includeStories:["defaultState","activeState","errorState","disabledState","helpTextField","longHelpTextField","selectionField","passwordField"]},mdxStoryNameToKey={"Default state":"defaultState","Active state":"activeState","Error state":"errorState","Disabled state":"disabledState","Help text field":"helpTextField","Long Help text field":"longHelpTextField","Selection field":"selectionField","Password field":"passwordField"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.aT,{mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(MDXContent,null))};const __WEBPACK_DEFAULT_EXPORT__=componentMeta,__namedExportsOrder=["defaultState","activeState","errorState","disabledState","helpTextField","longHelpTextField","selectionField","passwordField"]},"./src/stories/documentation/components/Tabs.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__,scrolling:()=>scrolling,selectionFollowsFocus:()=>selectionFollowsFocus,tabsLarge:()=>tabsLarge,tabsSmall:()=>tabsSmall});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_theme__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/theme.ts"),_Tabs__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/Tabs.tsx"),storybook_dark_mode__WEBPACK_IMPORTED_MODULE_6__=(__webpack_require__("./node_modules/@emotion/css/dist/emotion-css.esm.js"),__webpack_require__("./node_modules/storybook-dark-mode/dist/index.js"));function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const layoutProps={};function MDXContent({components,...props}){return(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("wrapper",_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.h_,{title:"documentation/Components/Tabs",component:_Tabs__WEBPACK_IMPORTED_MODULE_4__.m,decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_6__.useDarkMode)(),mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,{mdxType:"Story"}))],parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h1",null,"Tabs"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"This is a documentation of ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("inlineCode",{parentName:"p"},"<Tabs/>")," component.\nTabs are used to organize and navigate between related content on the same page.\nTabs ensure that large amounts of content can be organized in a manner that is easier\nto digest for the user. Tabs are arranged in bars of tabs called tab groups, with the tab\nlabel providing the user with an indication of what content will be revealed when the tab is selected."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#structure"},"Structure")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#sizes"},"States")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#sizes"},"Sizes")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#options"},"Options")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#rules-of-use"},"Rules of use")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#properties"},"Properties"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Structure"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Tabs are arranged in bars of tabs called tab groups, with the tab label providing the user\nwith an indication of what content will be revealed when the tab is selected."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"States"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Sizes"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Tabs come in two sizes, large and small. By default, tabs will be large unless the size prop is provided."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Large"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Tabs large",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Small"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Tabs small",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Options"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Scrolling"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"If there are more tabs provided than can fit within the viewport, tabs will scroll.\nThe user may scroll using a native control like a horizontal scroll wheel, or by using the scroll buttons."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Visibility of the scroll buttons can be controlled by the ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("inlineCode",{parentName:"p"},"areArrowsVisible")," prop.\nBy default, scroll buttons will appear automatically if needed. Options are..."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Scrolling",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Selection Follows Focus"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Selection Follows Focus",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Rules of use"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Sort tabs according to user needs, placing the most important first."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Tabs are relevant if the content can be usefully separated into clearly named sections."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Use the tab label to provide a clear and concise description of the content contained in that tab and to help differentiate between the different sections."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Do not use tabs if users need to read the content of all sections."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Do not use for too long content where tabs are difficult to find after reading."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Only one tab should be active at a given time."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Tabs should be positioned in a single, scrollable (if needed) row above the content it relates to."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Pay attention to the maximum number of tabs. consider further splitting the content or using a different navigation component."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Do not use tabs to create a sequence or progression of content that the user is expected to read in a given order."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Do not use tabs for comparing content (e.g. different model specifications)."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Do not use tabs to navigate users to a different page.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Properties"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.$4,{of:_Tabs__WEBPACK_IMPORTED_MODULE_4__.m,mdxType:"ArgsTable"}))}MDXContent.isMDXComponent=!0;const tabsLarge=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));tabsLarge.storyName="Tabs large",tabsLarge.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const tabsSmall=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));tabsSmall.storyName="Tabs small",tabsSmall.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const scrolling=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));scrolling.storyName="Scrolling",scrolling.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const selectionFollowsFocus=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));selectionFollowsFocus.storyName="Selection Follows Focus",selectionFollowsFocus.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const componentMeta={title:"documentation/Components/Tabs",parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_6__.useDarkMode)()},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,null))],component:_Tabs__WEBPACK_IMPORTED_MODULE_4__.m,includeStories:["tabsLarge","tabsSmall","scrolling","selectionFollowsFocus"]},mdxStoryNameToKey={"Tabs large":"tabsLarge","Tabs small":"tabsSmall",Scrolling:"scrolling","Selection Follows Focus":"selectionFollowsFocus"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.aT,{mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(MDXContent,null))};const __WEBPACK_DEFAULT_EXPORT__=componentMeta,__namedExportsOrder=["tabsLarge","tabsSmall","scrolling","selectionFollowsFocus"]},"./src/stories/documentation/components/Textfield.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,activeState:()=>activeState,default:()=>__WEBPACK_DEFAULT_EXPORT__,defaultState:()=>defaultState,disabledState:()=>disabledState,errorState:()=>errorState,helpTextField:()=>helpTextField,longHelpTextField:()=>longHelpTextField,passwordField:()=>passwordField,selectionField:()=>selectionField});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_theme__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/theme.ts"),storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__=(__webpack_require__("./node_modules/@emotion/css/dist/emotion-css.esm.js"),__webpack_require__("./node_modules/storybook-dark-mode/dist/index.js"));function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const layoutProps={};function MDXContent({components,...props}){return(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("wrapper",_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.h_,{title:"documentation/Components/Texfield",component:_theme__WEBPACK_IMPORTED_MODULE_3__.Texfield,decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__.useDarkMode)(),mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,{mdxType:"Story"}))],parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h1",null,"Texfield"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"This is a documentation of ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("inlineCode",{parentName:"p"},"<Textfield/>")," component.\nText fields are used when the user is required to input short form content,\nincluding text, numbers, e-mail addresses, or passwords."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#structure"},"Structure")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#states"},"States")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#options"},"Options")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#rules-of-use"},"Rules of use")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#properties"},"Properties"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Structure"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The input field is made up of the following elements:"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"one field - required.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"a label, linked to the field - mandatory.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"an additional description (helptext) - optional.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"one or two icons, which can be modified - optional.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"an error message - required if a change of state is to be notified to the user."))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"States"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Default state"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Default state",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Active state"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Active state",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Error state"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Error state",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Disabled state"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Disabled state",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Options"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Field with help text"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"An optional help text can be added to provide additional guidance to the user on how to interact with the component."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Help text field",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Field with a long help text"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"A long help text improve the guidance of help text for the user on how to interact with the component."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Long Help text field",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Selection field"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Selection field provide a choice of options from a list. The selected components\nare typically used in a form to allow users to make the desired selection from the list of options."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Selection field",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Passwords"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"If the information being entered by the user is sensitive, use the password option to protect it."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Password field",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Rules of use"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Keep the same label for fields requesting the same information"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"A help text may accompany this wording to clarify in particular the nature of the expected content.\nIf a precise format is expected, it should be indicated as clearly as possible and given examples."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Information should not be hidden in a tooltip or infobox, if this content is essential to enter the field."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"The eye spontaneously read from bottom to top, display the fields in a vertical list to facilitate reading and optimize ergonomics"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Use a primary button to validate an input field or a form, the secondary button will be used to go back, reset the form or abandon the input."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"The submission of a field must be followed by a message indicating the success or not of the desired action"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Label the form as (optional) when the input is not required."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Avoid the use of placeholder as it can confuse the user. However, if you wish to use, it is necessary\nto respect the proposed color in order to remain accessible, and its content must present information\nnot essential to understanding the field. In no case can it replace a label and it is only to be reserved\nfor secondary input aids.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Properties"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.$4,{of:_theme__WEBPACK_IMPORTED_MODULE_3__.Texfield,mdxType:"ArgsTable"}))}MDXContent.isMDXComponent=!0;const defaultState=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));defaultState.storyName="Default state",defaultState.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const activeState=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));activeState.storyName="Active state",activeState.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const errorState=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));errorState.storyName="Error state",errorState.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const disabledState=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));disabledState.storyName="Disabled state",disabledState.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const helpTextField=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));helpTextField.storyName="Help text field",helpTextField.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const longHelpTextField=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));longHelpTextField.storyName="Long Help text field",longHelpTextField.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const selectionField=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));selectionField.storyName="Selection field",selectionField.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const passwordField=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));passwordField.storyName="Password field",passwordField.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const componentMeta={title:"documentation/Components/Texfield",parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__.useDarkMode)()},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,null))],component:_theme__WEBPACK_IMPORTED_MODULE_3__.Texfield,includeStories:["defaultState","activeState","errorState","disabledState","helpTextField","longHelpTextField","selectionField","passwordField"]},mdxStoryNameToKey={"Default state":"defaultState","Active state":"activeState","Error state":"errorState","Disabled state":"disabledState","Help text field":"helpTextField","Long Help text field":"longHelpTextField","Selection field":"selectionField","Password field":"passwordField"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.aT,{mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(MDXContent,null))};const __WEBPACK_DEFAULT_EXPORT__=componentMeta,__namedExportsOrder=["defaultState","activeState","errorState","disabledState","helpTextField","longHelpTextField","selectionField","passwordField"]},"./src/stories/index.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,__page:()=>__page,default:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("./node_modules/react/index.js");var _mdx_js_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js");function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const Meta=(name="Meta",function MDXDefaultShortcode(props){return console.warn("Component "+name+" was not imported, exported, or provided by MDXProvider as global scope"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",props)});var name;const layoutProps={};function MDXContent({components,...props}){return(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("wrapper",_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Meta,{title:"Quick start",mdxType:"Meta"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-bash"},"yarn add onyxia-ui @mui/material @emotion/react @emotion/styled tss-react powerhooks\n\n# If you plan on using icons from: https://mui.com/components/material-icons/\nyarn add @mui/icons-material\n")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"At this stage, the documentation is under the form of a very simple ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"p",href:"https://github.com/garronej/onyxia-ui/tree/main/src/test"},"demo project"),".",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("br",{parentName:"p"}),"\n","The actual theme configuration ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"p",href:"https://github.com/garronej/onyxia-ui/blob/main/src/test/src/theme.ts"},"happens here"),".",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("br",{parentName:"p"}),"\n","If you want to experiment with it you can run the demo app with:"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"NOTE for ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"p",href:"https://storybook.js.org"},"Storybook")," users: As of writing this lines storybook still uses by default emotion 10.",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("br",{parentName:"p"}),"\n","mui and TSS runs emotion 11 so there is ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"p",href:"https://github.com/garronej/onyxia-ui/blob/324de62248074582b227e584c53fb2e123f5325f/.storybook/main.js#L31-L32"},"some changes"),"\nto be made to your ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("inlineCode",{parentName:"p"},".storybook/main.js")," to make it uses emotion 11."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-bash"},"git clone https://github.com/garronej/onyxia-ui\ncd onyxia-ui\nyarn\nyarn build\nyarn start\n")))}MDXContent.isMDXComponent=!0;const __page=()=>{throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};const componentMeta={title:"Quick start",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.aT,{mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(MDXContent,null))};const __WEBPACK_DEFAULT_EXPORT__=componentMeta,__namedExportsOrder=["__page"]},"./src/stories/Alert.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueNoTitle:()=>VueNoTitle,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_Alert__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/Alert.tsx"),_theme__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/theme.ts"),_sectionName__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/stories/getStory.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_2__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_4__.j,wrappedComponent:{Alert:_Alert__WEBPACK_IMPORTED_MODULE_0__.b},defaultWidth:500}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var VueNoTitle=getStory({doDisplayCross:!0,severity:"success",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_theme__WEBPACK_IMPORTED_MODULE_1__.xv,{typo:"body 1",children:"This is the text"})});VueNoTitle.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({storySource:{source:'getStory({\n    "doDisplayCross": true,\n    "severity": "success",\n    "children": <Text typo="body 1">This is the text</Text>,\n})'}},VueNoTitle.parameters);var __namedExportsOrder=["VueNoTitle"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Alert.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Alert.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Breadcrump.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,VueFromRoot:()=>VueFromRoot,VueMinDepth2:()=>VueMinDepth2,VueOtherSeparator:()=>VueOtherSeparator,VueStartFromCwd:()=>VueStartFromCwd,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Breadcrump_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react=__webpack_require__("./node_modules/react/index.js"),useEffectOnValueChange=__webpack_require__("./node_modules/powerhooks/useEffectOnValueChange.js"),toConsumableArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),hooks=__webpack_require__("./node_modules/evt/hooks/index.js"),lib=__webpack_require__("./node_modules/evt/lib/index.js"),useCallbackFactory=__webpack_require__("./node_modules/powerhooks/useCallbackFactory.js"),assert=__webpack_require__("./node_modules/tsafe/assert.js"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js"),useNonPostableEvtLike=__webpack_require__("./src/tools/useNonPostableEvtLike.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),Breadcrump=(0,react.memo)((function(props){var _props$minDepth=props.minDepth,minDepth=void 0===_props$minDepth?0:_props$minDepth,_props$isNavigationDi=props.isNavigationDisabled,isNavigationDisabled=void 0!==_props$isNavigationDi&&_props$isNavigationDi,onNavigate=props.onNavigate,className=props.className,evtActionLike=props.evtAction,_props$separatorChar=props.separatorChar,separatorChar=void 0===_props$separatorChar?"/":_props$separatorChar,evtAction=(0,useNonPostableEvtLike._)(evtActionLike),_useState=(0,react.useState)(props.path),_useState2=(0,slicedToArray.Z)(_useState,2),path=_useState2[0],setPath=_useState2[1],_useState3=(0,react.useState)(!1),_useState4=(0,slicedToArray.Z)(_useState3,2),isFocused=_useState4[0],setIsFocused=_useState4[1],_useState5=(0,react.useState)((function(){return lib.Evt.create(props.path)})),evtPropsPath=(0,slicedToArray.Z)(_useState5,1)[0];(0,react.useEffect)((function(){evtPropsPath.state=props.path}),[JSON.stringify(props.path)]),(0,hooks.useEvt)((function(ctx){return evtPropsPath.toStateless(ctx).attach((function(path){setIsFocused(!1),setPath(path)}))}),[evtPropsPath]),(0,hooks.useEvt)((function(ctx){var evtDisplayFeedback=null==evtAction?void 0:evtAction.pipe((function(data){return"DISPLAY COPY FEEDBACK"===data.action?[data.basename]:null}));null==evtDisplayFeedback||evtDisplayFeedback.attach(ctx,(function(basename){setIsFocused(!0),setPath([].concat((0,toConsumableArray.Z)(evtPropsPath.state),(0,toConsumableArray.Z)(basename?[basename]:[])));var scopedCtx=lib.Evt.newCtx(),timer=setTimeout((function(){scopedCtx.done(),setIsFocused(!1),setPath(evtPropsPath.state)}),500);scopedCtx.evtDoneOrAborted.attachOnce((function(){return clearTimeout(timer)})),evtDisplayFeedback.attachOnce(scopedCtx,(function(){return scopedCtx.done()})),evtPropsPath.toStateless(scopedCtx).attachOnce((function(){return scopedCtx.done()})),ctx.evtDoneOrAborted.attachOnce(scopedCtx,(function(){return scopedCtx.done()}))}))}),[evtAction,evtPropsPath]);var onClickFactory=(0,useCallbackFactory.useCallbackFactory)((function(_ref){var _ref2=(0,slicedToArray.Z)(_ref,2),partialPath=_ref2[0];return _ref2[1]?onNavigate({path:partialPath,upCount:path.length-partialPath.length}):(0,assert.assert)(!1)})),partialPaths=(0,react.useMemo)((function(){return function getPartialPaths(params){var path=params.path,isNavigationDisabled=params.isNavigationDisabled,minDepth=params.minDepth;return path.map((function(){for(var _len=arguments.length,_ref4=new Array(_len),_key=0;_key<_len;_key++)_ref4[_key]=arguments[_key];var i=_ref4[1],isLast=i===path.length-1;return{partialPath:(0,toConsumableArray.Z)(path).splice(0,i+1),isLast,isClickable:!isNavigationDisabled&&(!isLast&&i>=minDepth)}}))}({path,minDepth,isNavigationDisabled})}),[JSON.stringify(path),minDepth,isNavigationDisabled]);return(0,jsx_runtime.jsx)("div",{className,children:partialPaths.map((function(_ref3){var isClickable=_ref3.isClickable,isLast=_ref3.isLast,partialPath=_ref3.partialPath;return(0,jsx_runtime.jsx)(Section,{isClickable,isLast,partialPath,isFocused,onClick:onClickFactory(partialPath,isClickable),separatorChar},JSON.stringify(partialPath))}))})}));var _ref5=function(){function Section(props){var partialPath=props.partialPath,isLast=props.isLast,onClick=props.onClick,isFocused=props.isFocused,isClickable=props.isClickable,separatorChar=props.separatorChar,text=(0,react.useMemo)((function(){return"".concat(partialPath.slice(-1)[0]).concat(isLast?"":" ".concat(separatorChar))}),[partialPath,isLast]),classes=useStyles({isClickable,isFocused,isLast}).classes;return(0,jsx_runtime.jsx)(TextBase.x,{typo:"body 1",className:classes.root,componentProps:{onClick:isClickable?onClick:void 0},fixedSize_enabled:!0,fixedSize_fontWeight:500,children:text})}var useStyles=ThemeProvider.IR.withName("".concat((0,symToStr.symToStr)({Breadcrump})).concat((0,symToStr.symToStr)({Section}))).withParams().create((function(_ref6){var theme=_ref6.theme,isClickable=_ref6.isClickable,isFocused=_ref6.isFocused,isLast=_ref6.isLast;return{root:(0,objectSpread2.Z)((0,objectSpread2.Z)({},isClickable?{cursor:"pointer","&:hover, &:focus":{fontWeight:500,color:theme.colors.useCases.typography.textPrimary},"&:active":{color:theme.colors.useCases.typography.textFocus}}:{}),{},{color:theme.colors.useCases.typography[isFocused?"textFocus":isLast?"textPrimary":"textSecondary"]})}}));return{Section}}(),Section=_ref5.Section;try{Breadcrump.displayName="Breadcrump",Breadcrump.__docgenInfo={description:"",displayName:"Breadcrump",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},path:{defaultValue:null,description:"",name:"path",required:!0,type:{name:"string[]"}},minDepth:{defaultValue:null,description:"Default: 0",name:"minDepth",required:!1,type:{name:"number"}},isNavigationDisabled:{defaultValue:null,description:"Default false",name:"isNavigationDisabled",required:!1,type:{name:"boolean"}},onNavigate:{defaultValue:null,description:"",name:"onNavigate",required:!0,type:{name:"(params: { path: string[]; upCount: number; }) => void"}},evtAction:{defaultValue:null,description:"",name:"evtAction",required:!1,type:{name:'NonPostableEvtLike<{ action: "DISPLAY COPY FEEDBACK"; basename?: string; }>'}},separatorChar:{defaultValue:null,description:'Default "/", can be for example ">" or "\\\\"',name:"separatorChar",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Breadcrump.tsx#Breadcrump"]={docgenInfo:Breadcrump.__docgenInfo,name:"Breadcrump",path:"src/Breadcrump.tsx#Breadcrump"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx");var _getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:(0,defineProperty.Z)({},(0,symToStr.symToStr)({Breadcrump}),(function Component(props){var tick=props.tick,minDepth=props.minDepth,path=props.path,onNavigate=props.onNavigate,isNavigationDisabled=props.isNavigationDisabled,separatorChar=props.separatorChar,_useReducer=(0,react.useReducer)((function(index){return index+1}),0),_useReducer2=(0,slicedToArray.Z)(_useReducer,2),index=_useReducer2[0],incrementIndex=_useReducer2[1];(0,useEffectOnValueChange.useEffectOnValueChange)((function(){incrementIndex()}),[tick]);var _useState=(0,react.useState)((function(){return lib.Evt.create()})),evtAction=(0,slicedToArray.Z)(_useState,1)[0];return(0,useEffectOnValueChange.useEffectOnValueChange)((function(){evtAction.post({action:"DISPLAY COPY FEEDBACK",basename:"foo.svg"})}),[evtAction,index]),(0,jsx_runtime.jsx)(Breadcrump,{isNavigationDisabled,evtAction,minDepth,path,separatorChar,onNavigate})})),argTypes:{tick:{control:{type:"boolean"}}}}),meta=_getStoryFactory.meta,Breadcrump_stories_getStory=_getStoryFactory.getStory;const Breadcrump_stories=meta;var VueDefault=Breadcrump_stories_getStory((0,objectSpread2.Z)({path:["aaa","bbb","cccc","dddd"],isNavigationDisabled:!1,minDepth:0,tick:!0},(0,getStory.K)(["onNavigate"]))),VueOtherSeparator=Breadcrump_stories_getStory((0,objectSpread2.Z)({path:["aaa","bbb","cccc","dddd"],separatorChar:"/",isNavigationDisabled:!1,minDepth:0,tick:!0},(0,getStory.K)(["onNavigate"]))),VueMinDepth2=Breadcrump_stories_getStory((0,objectSpread2.Z)({path:["aaa","bbb","cccc","dddd"],separatorChar:"/",isNavigationDisabled:!1,minDepth:2,tick:!0},(0,getStory.K)(["onNavigate"]))),VueFromRoot=Breadcrump_stories_getStory((0,objectSpread2.Z)({path:["","aaa","bbb","cccc","dddd"],isNavigationDisabled:!1,minDepth:0,tick:!0},(0,getStory.K)(["onNavigate"]))),VueStartFromCwd=Breadcrump_stories_getStory((0,objectSpread2.Z)({path:[".","aaa","bbb","cccc","dddd"],isNavigationDisabled:!1,minDepth:0,tick:!0},(0,getStory.K)(["onNavigate"])));VueDefault.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "path": ["aaa", "bbb", "cccc", "dddd"],\n    "isNavigationDisabled": false,\n    "minDepth": 0,\n    "tick": true,\n    ...logCallbacks(["onNavigate"]),\n})'}},VueDefault.parameters),VueOtherSeparator.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "path": ["aaa", "bbb", "cccc", "dddd"],\n    "separatorChar": "/",\n    "isNavigationDisabled": false,\n    "minDepth": 0,\n    "tick": true,\n    ...logCallbacks(["onNavigate"]),\n})'}},VueOtherSeparator.parameters),VueMinDepth2.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "path": ["aaa", "bbb", "cccc", "dddd"],\n    "separatorChar": "/",\n    "isNavigationDisabled": false,\n    "minDepth": 2,\n    "tick": true,\n    ...logCallbacks(["onNavigate"]),\n})'}},VueMinDepth2.parameters),VueFromRoot.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "path": ["", "aaa", "bbb", "cccc", "dddd"],\n    "isNavigationDisabled": false,\n    "minDepth": 0,\n    "tick": true,\n    ...logCallbacks(["onNavigate"]),\n})'}},VueFromRoot.parameters),VueStartFromCwd.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "path": [".", "aaa", "bbb", "cccc", "dddd"],\n    "isNavigationDisabled": false,\n    "minDepth": 0,\n    "tick": true,\n    ...logCallbacks(["onNavigate"]),\n})'}},VueStartFromCwd.parameters);var __namedExportsOrder=["VueDefault","VueOtherSeparator","VueMinDepth2","VueFromRoot","VueStartFromCwd"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Breadcrump.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Breadcrump.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Button.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueNoIcon:()=>VueNoIcon,VueWithStartIcon:()=>VueWithStartIcon,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_theme__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/stories/theme.ts"),_sectionName__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/getStory.tsx"),_getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_2__.j,argTypes:{variant:{options:["primary","secondary","ternary"],control:{type:"radio"}}},wrappedComponent:{Button:_theme__WEBPACK_IMPORTED_MODULE_0__.zx}}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var VueNoIcon=getStory((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({children:"Default",variant:"primary"},(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.K)(["onClick"]))),VueWithStartIcon=getStory((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({children:"Foo bar",startIcon:"help",variant:"primary"},(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.K)(["onClick"])));VueNoIcon.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'getStory({\n    "children": "Default",\n    "variant": "primary",\n    ...logCallbacks(["onClick"]),\n})'}},VueNoIcon.parameters),VueWithStartIcon.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'getStory({\n    "children": "Foo bar",\n    "startIcon": "help",\n    "variant": "primary",\n    ...logCallbacks(["onClick"]),\n})'}},VueWithStartIcon.parameters);var __namedExportsOrder=["VueNoIcon","VueWithStartIcon"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Button.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Button.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/ButtonBar.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_ButtonBar__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/ButtonBar.tsx"),_sectionName__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/getStory.tsx"),_theme__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/stories/theme.ts"),ButtonBar=(0,_ButtonBar__WEBPACK_IMPORTED_MODULE_0__.c)({Icon:_theme__WEBPACK_IMPORTED_MODULE_2__.JO}).ButtonBar,_getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_3__.j,wrappedComponent:{ButtonBar}}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var VueDefault=getStory((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({buttons:[{buttonId:"btn1",icon:"help",isDisabled:!1,label:"Label 1"},{buttonId:"btn2",icon:"home",isDisabled:!1,label:"Label 2"},{buttonId:"btn3",icon:"services",isDisabled:!0,label:"Label 3"},{buttonId:"btn4",icon:"tour",isDisabled:!1,label:"Label 4"}]},(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.K)(["onClick"])));VueDefault.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'getStory({\n    "buttons": [\n        {\n            "buttonId": "btn1",\n            "icon": "help",\n            "isDisabled": false,\n            "label": "Label 1",\n        },\n        {\n            "buttonId": "btn2",\n            "icon": "home",\n            "isDisabled": false,\n            "label": "Label 2",\n        },\n        {\n            "buttonId": "btn3",\n            "icon": "services",\n            "isDisabled": true,\n            "label": "Label 3",\n        },\n        {\n            "buttonId": "btn4",\n            "icon": "tour",\n            "isDisabled": false,\n            "label": "Label 4",\n        },\n    ] as const,\n    ...logCallbacks(["onClick"]),\n})'}},VueDefault.parameters);var __namedExportsOrder=["VueDefault"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/ButtonBar.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/ButtonBar.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/ButtonBarButton.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_ButtonBarButton__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/ButtonBarButton.tsx"),_sectionName__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/getStory.tsx"),_theme__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/stories/theme.ts"),ButtonBarButton=(0,_ButtonBarButton__WEBPACK_IMPORTED_MODULE_0__.q)({Icon:_theme__WEBPACK_IMPORTED_MODULE_2__.JO}).ButtonBarButton,_getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_3__.j,wrappedComponent:{ButtonBarButton}}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var VueDefault=getStory((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({children:"Click me",disabled:!1,startIcon:"services"},(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.K)(["onClick"])));VueDefault.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'getStory({\n    "children": "Click me",\n    "disabled": false,\n    "startIcon": "services",\n    ...logCallbacks(["onClick"]),\n})'}},VueDefault.parameters);var __namedExportsOrder=["VueDefault"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/ButtonBarButton.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/ButtonBarButton.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Card.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueNoTitle:()=>VueNoTitle,VueWithDivider:()=>VueWithDivider,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Card_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react=__webpack_require__("./node_modules/react/index.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),assert=__webpack_require__("./node_modules/tsafe/assert.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","aboveDivider","children"],Card=(0,react.memo)((0,react.forwardRef)((function(props,ref){var className=props.className,aboveDivider=props.aboveDivider,children=props.children,rest=(0,objectWithoutProperties.Z)(props,_excluded);(0,assert.assert)();var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;return(0,jsx_runtime.jsxs)("div",(0,objectSpread2.Z)((0,objectSpread2.Z)({ref,className:cx(classes.root,className)},rest),{},{children:[void 0!==aboveDivider&&(0,jsx_runtime.jsx)("div",{className:classes.aboveDivider,children:aboveDivider}),(0,jsx_runtime.jsx)("div",{className:classes.belowDivider,children})]}))}))),useStyles=ThemeProvider.IR.withName({Card}).create((function(_ref){var theme=_ref.theme;return{root:{borderRadius:8,boxShadow:theme.shadows[1],backgroundColor:theme.colors.useCases.surfaces.surface1,"&:hover":{boxShadow:theme.shadows[6]},display:"flex",flexDirection:"column"},aboveDivider:{padding:theme.spacing({topBottom:3,rightLeft:4}),borderBottom:"1px solid ".concat(theme.colors.useCases.typography.textTertiary),boxSizing:"border-box"},belowDivider:{padding:theme.spacing(4),paddingTop:theme.spacing(3),flex:1,display:"flex",flexDirection:"column"}}}));try{Card.displayName="Card",Card.__docgenInfo={description:"",displayName:"Card",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},aboveDivider:{defaultValue:null,description:"",name:"aboveDivider",required:!1,type:{name:"ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Card.tsx#Card"]={docgenInfo:Card.__docgenInfo,name:"Card",path:"src/Card.tsx#Card"})}catch(__react_docgen_typescript_loader_error){}var theme=__webpack_require__("./src/stories/theme.ts"),sectionName=__webpack_require__("./src/stories/sectionName.ts"),_getStoryFactory=(0,__webpack_require__("./src/stories/getStory.tsx").A)({sectionName:sectionName.j,wrappedComponent:{Card}}),meta=_getStoryFactory.meta,Card_stories_getStory=_getStoryFactory.getStory;const Card_stories=meta;var VueNoTitle=Card_stories_getStory({children:(0,jsx_runtime.jsx)(theme.xv,{typo:"body 1",children:"I am the body"})}),VueWithDivider=Card_stories_getStory({aboveDivider:(0,jsx_runtime.jsx)(theme.xv,{typo:"object heading",children:"This is the title"}),children:(0,jsx_runtime.jsx)(theme.xv,{typo:"body 1",children:"I am the body"})});VueNoTitle.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "children": <Text typo="body 1">I am the body</Text>,\n})'}},VueNoTitle.parameters),VueWithDivider.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "aboveDivider": <Text typo="object heading">This is the title</Text>,\n    "children": <Text typo="body 1">I am the body</Text>,\n})'}},VueWithDivider.parameters);var __namedExportsOrder=["VueNoTitle","VueWithDivider"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Card.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Card.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Checkbox.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueControlled:()=>VueControlled,VueUncontrolled:()=>VueUncontrolled,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Checkbox_stories});var defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react=__webpack_require__("./node_modules/react/index.js"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),Checkbox=__webpack_require__("./node_modules/@mui/material/Checkbox/Checkbox.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["defaultChecked"],Checkbox_Checkbox=(0,react.memo)((function(props){var props_defaultChecked=props.defaultChecked,rest=(0,objectWithoutProperties.Z)(props,_excluded),defaultChecked=void 0!==rest.checked&&(null!=props_defaultChecked&&props_defaultChecked),_useState=(0,react.useState)(defaultChecked),_useState2=(0,slicedToArray.Z)(_useState,2),isChecked=_useState2[0],setIsChecked=_useState2[1];(0,react.useEffect)((function(){return setIsChecked(defaultChecked)}),[defaultChecked]);var onChange=(0,useConstCallback.useConstCallback)((function(event,checked){var _rest$onChange;setIsChecked(checked),null===(_rest$onChange=rest.onChange)||void 0===_rest$onChange||_rest$onChange.call(rest,event,checked)}));return(0,jsx_runtime.jsx)(Checkbox.Z,(0,objectSpread2.Z)((0,objectSpread2.Z)({},rest),void 0!==rest.checked?{value:rest.checked?"on":"off"}:{checked:isChecked,onChange,value:isChecked?"on":"off"}))}));try{Checkbox_Checkbox.displayName="Checkbox",Checkbox_Checkbox.__docgenInfo={description:"",displayName:"Checkbox",props:{component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:"ElementType<any>"}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null"}},action:{defaultValue:null,description:"A ref for imperative actions.\nIt currently only supports `focusVisible()` action.",name:"action",required:!1,type:{name:"Ref<ButtonBaseActions>"}},centerRipple:{defaultValue:{value:"false"},description:"If `true`, the ripples are centered.\nThey won't start at the cursor interaction position.",name:"centerRipple",required:!1,type:{name:"boolean"}},disableTouchRipple:{defaultValue:{value:"false"},description:"If `true`, the touch ripple effect is disabled.",name:"disableTouchRipple",required:!1,type:{name:"boolean"}},focusRipple:{defaultValue:{value:"false"},description:"If `true`, the base button will have a keyboard focus ripple.",name:"focusRipple",required:!1,type:{name:"boolean"}},focusVisibleClassName:{defaultValue:null,description:"This prop can help identify which element has keyboard focus.\nThe class name will be applied when the element gains the focus through keyboard interaction.\nIt's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).\nThe rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).\nA [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components\nif needed.",name:"focusVisibleClassName",required:!1,type:{name:"string"}},LinkComponent:{defaultValue:{value:"'a'"},description:"The component used to render a link when the `href` prop is provided.",name:"LinkComponent",required:!1,type:{name:"ElementType<any>"}},onFocusVisible:{defaultValue:null,description:"Callback fired when the component is focused with a keyboard.\nWe trigger a `onFocus` callback too.",name:"onFocusVisible",required:!1,type:{name:"FocusEventHandler<any>"}},TouchRippleProps:{defaultValue:null,description:"Props applied to the `TouchRipple` element.",name:"TouchRippleProps",required:!1,type:{name:"Partial<TouchRippleProps>"}},touchRippleRef:{defaultValue:null,description:"A ref that points to the `TouchRipple` element.",name:"touchRippleRef",required:!1,type:{name:"Ref<TouchRippleActions>"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Checkbox.tsx#Checkbox"]={docgenInfo:Checkbox_Checkbox.__docgenInfo,name:"Checkbox",path:"src/Checkbox.tsx#Checkbox"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js"),Checkbox_stories_excluded=["mode"];function ComponentControlled(props){var defaultIsChecked=props.defaultIsChecked,_useState=(0,react.useState)(defaultIsChecked),_useState2=(0,slicedToArray.Z)(_useState,2),isChecked=_useState2[0],setIsChecked=_useState2[1];(0,react.useEffect)((function(){return setIsChecked(defaultIsChecked)}),[defaultIsChecked]);var onChange=(0,useConstCallback.useConstCallback)((function(_event,checked){return setIsChecked(checked)}));return(0,jsx_runtime.jsx)(Checkbox_Checkbox,{checked:isChecked,onChange})}function ComponentUncontrolled(props){var defaultIsChecked=props.defaultIsChecked;return(0,jsx_runtime.jsx)(Checkbox_Checkbox,{defaultChecked:defaultIsChecked})}var _getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:(0,defineProperty.Z)({},(0,symToStr.symToStr)({Checkbox:Checkbox_Checkbox}),(function Component(props){var mode=props.mode,rest=(0,objectWithoutProperties.Z)(props,Checkbox_stories_excluded);switch(mode){case"controlled":return(0,jsx_runtime.jsx)(ComponentControlled,(0,objectSpread2.Z)({},rest));case"uncontrolled":return(0,jsx_runtime.jsx)(ComponentUncontrolled,(0,objectSpread2.Z)({},rest))}}))}),meta=_getStoryFactory.meta,Checkbox_stories_getStory=_getStoryFactory.getStory;const Checkbox_stories=meta;var VueControlled=Checkbox_stories_getStory({mode:"controlled",defaultIsChecked:!1}),VueUncontrolled=Checkbox_stories_getStory({mode:"uncontrolled",defaultIsChecked:!1});VueControlled.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "mode": "controlled",\n    "defaultIsChecked": false,\n})'}},VueControlled.parameters),VueUncontrolled.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "mode": "uncontrolled",\n    "defaultIsChecked": false,\n})'}},VueUncontrolled.parameters);var __namedExportsOrder=["VueControlled","VueUncontrolled"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Checkbox.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Checkbox.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/CollapsibleSectionHeader.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueCollapsed:()=>VueCollapsed,VueExpanded:()=>VueExpanded,__namedExportsOrder:()=>__namedExportsOrder,default:()=>CollapsibleSectionHeader_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),react=__webpack_require__("./node_modules/react/index.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),Link=__webpack_require__("./node_modules/@mui/material/Link/Link.js"),ChevronLeft=__webpack_require__("./node_modules/@mui/icons-material/ChevronLeft.js"),IconButton=__webpack_require__("./src/IconButton.tsx"),Icon=__webpack_require__("./src/Icon.tsx"),pxToNumber=__webpack_require__("./src/tools/pxToNumber.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),CollapsibleSectionHeader_IconButton=(0,IconButton.k)((0,Icon.I)({chevronLeft:ChevronLeft.Z})).IconButton,CollapsibleSectionHeader=(0,react.memo)((function(props){var className=props.className,title=props.title,isCollapsed=props.isCollapsed,onToggleIsCollapsed=props.onToggleIsCollapsed,total=props.total,_props$showAllStr=props.showAllStr,showAllStr=void 0===_props$showAllStr?"Show all":_props$showAllStr,_useStyles=useStyles({isCollapsed}),classes=_useStyles.classes,cx=_useStyles.cx;return(0,jsx_runtime.jsxs)("div",{className:cx(classes.root,className),children:[(0,jsx_runtime.jsx)(CollapsibleSectionHeader_IconButton,{className:classes.chevron,size:"large",iconId:"chevronLeft",onClick:onToggleIsCollapsed}),(0,jsx_runtime.jsxs)(TextBase.x,{typo:"section heading",children:[" ",title," "]}),(0,jsx_runtime.jsx)("div",{style:{flex:"1"}}),isCollapsed&&(0,jsx_runtime.jsxs)(Link.Z,{underline:"hover",onClick:onToggleIsCollapsed,className:classes.link,children:[showAllStr,void 0!==total&&(0,jsx_runtime.jsxs)("span",{children:[" (",total,")"]})]})]})})),useStyles=ThemeProvider.IR.withName({CollapsibleSectionHeader}).withParams().create((function(_ref){var theme=_ref.theme,isCollapsed=_ref.isCollapsed;return{root:{display:"flex",alignItems:"center"},chevron:(0,objectSpread2.Z)({paddingLeft:0},isCollapsed?{width:0,paddingLeft:0,paddingRight:0,visibility:"hidden"}:{}),link:{cursor:"pointer",paddingTop:.183*(0,pxToNumber.F)(theme.typography.variants["section heading"].style.lineHeight)}}}));try{CollapsibleSectionHeader.displayName="CollapsibleSectionHeader",CollapsibleSectionHeader.__docgenInfo={description:"",displayName:"CollapsibleSectionHeader",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},isCollapsed:{defaultValue:null,description:"",name:"isCollapsed",required:!0,type:{name:"boolean"}},onToggleIsCollapsed:{defaultValue:null,description:"",name:"onToggleIsCollapsed",required:!0,type:{name:"() => void"}},title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"string"}},total:{defaultValue:null,description:"",name:"total",required:!1,type:{name:"number"}},showAllStr:{defaultValue:null,description:'Default "Show all", provide your own string for internationalization.',name:"showAllStr",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/CollapsibleSectionHeader.tsx#CollapsibleSectionHeader"]={docgenInfo:CollapsibleSectionHeader.__docgenInfo,name:"CollapsibleSectionHeader",path:"src/CollapsibleSectionHeader.tsx#CollapsibleSectionHeader"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),_getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:{CollapsibleSectionHeader},defaultWidth:600}),meta=_getStoryFactory.meta,CollapsibleSectionHeader_stories_getStory=_getStoryFactory.getStory;const CollapsibleSectionHeader_stories=meta;var VueCollapsed=CollapsibleSectionHeader_stories_getStory((0,objectSpread2.Z)({isCollapsed:!0,title:"This is the name of the section",total:123},(0,getStory.K)(["onToggleIsCollapsed"]))),VueExpanded=CollapsibleSectionHeader_stories_getStory((0,objectSpread2.Z)({isCollapsed:!1,title:"This is the name of the section",total:123},(0,getStory.K)(["onToggleIsCollapsed"])));VueCollapsed.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "isCollapsed": true,\n    "title": "This is the name of the section",\n    "total": 123,\n    ...logCallbacks(["onToggleIsCollapsed"]),\n})'}},VueCollapsed.parameters),VueExpanded.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "isCollapsed": false,\n    "title": "This is the name of the section",\n    "total": 123,\n    ...logCallbacks(["onToggleIsCollapsed"]),\n})'}},VueExpanded.parameters);var __namedExportsOrder=["VueCollapsed","VueExpanded"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/CollapsibleSectionHeader.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/CollapsibleSectionHeader.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/DarkModeSwitch.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>DarkModeSwitch_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),react=__webpack_require__("./node_modules/react/index.js"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),lib=__webpack_require__("./src/lib/index.ts"),Brightness4=__webpack_require__("./node_modules/@mui/icons-material/Brightness4.js"),Brightness7=__webpack_require__("./node_modules/@mui/icons-material/Brightness7.js"),Icon=__webpack_require__("./src/Icon.tsx"),IconButton=__webpack_require__("./src/IconButton.tsx"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),DarkModeSwitch_Icon=(0,Icon.I)({darkModeIcon:Brightness4.Z,lightModeIcon:Brightness7.Z}).Icon,DarkModeSwitch_IconButton=(0,IconButton.k)({Icon:DarkModeSwitch_Icon}).IconButton,DarkModeSwitch=(0,react.memo)((function(props){var className=props.className,size=props.size,ariaLabel=props.ariaLabel,_useIsDarkModeEnabled=(0,lib.JW)(),isDarkModeEnabled=_useIsDarkModeEnabled.isDarkModeEnabled,setIsDarkModeEnabled=_useIsDarkModeEnabled.setIsDarkModeEnabled,onClick=(0,useConstCallback.useConstCallback)((function(){setIsDarkModeEnabled(!isDarkModeEnabled)})),_useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;return(0,jsx_runtime.jsx)(DarkModeSwitch_IconButton,{className:cx(classes.root,className),onClick,size,iconId:isDarkModeEnabled?"lightModeIcon":"darkModeIcon","aria-label":null!=ariaLabel?ariaLabel:"Dark mode switch"})})),useStyles=ThemeProvider.IR.withName({DarkModeSwitch}).create((function(_ref){var theme=_ref.theme;return{root:{transition:"transform 500ms",transform:"rotate(".concat(theme.isDarkModeEnabled?180:0,"deg)"),transitionTimingFunction:"cubic-bezier(.34,1.27,1,1)"}}}));try{DarkModeSwitch.displayName="DarkModeSwitch",DarkModeSwitch.__docgenInfo={description:"",displayName:"DarkModeSwitch",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},size:{defaultValue:null,description:"Default: default",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"extra small"'},{value:'"default"'},{value:'"medium"'},{value:'"large"'}]}},ariaLabel:{defaultValue:null,description:"",name:"ariaLabel",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/DarkModeSwitch.tsx#DarkModeSwitch"]={docgenInfo:DarkModeSwitch.__docgenInfo,name:"DarkModeSwitch",path:"src/DarkModeSwitch.tsx#DarkModeSwitch"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),_getStoryFactory=(0,__webpack_require__("./src/stories/getStory.tsx").A)({sectionName:sectionName.j,wrappedComponent:{DarkModeSwitch},argTypes:{size:{options:["extra small","small","default","medium","large"],control:{type:"radio"}}}}),meta=_getStoryFactory.meta,DarkModeSwitch_stories_getStory=_getStoryFactory.getStory;const DarkModeSwitch_stories=meta;var VueDefault=DarkModeSwitch_stories_getStory({size:"default"});VueDefault.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "size": "default",\n})'}},VueDefault.parameters);var __namedExportsOrder=["VueDefault"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/DarkModeSwitch.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/DarkModeSwitch.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Dialog.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueFull:()=>VueFull,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Dialog_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react=__webpack_require__("./node_modules/react/index.js"),Dialog=__webpack_require__("./node_modules/@mui/material/Dialog/Dialog.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),Checkbox=__webpack_require__("./node_modules/@mui/material/Checkbox/Checkbox.js"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),FormControlLabel=__webpack_require__("./node_modules/@mui/material/FormControlLabel/FormControlLabel.js"),assert=__webpack_require__("./node_modules/tsafe/assert.js"),breakpoints=__webpack_require__("./src/lib/breakpoints.ts"),useStateRef=__webpack_require__("./node_modules/powerhooks/useStateRef.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),Dialog_Dialog=(0,react.memo)((function(props){var className=props.className,title=props.title,subtitle=props.subtitle,body=props.body,isOpen=props.isOpen,buttons=props.buttons,onDoShowNextTimeValueChange=props.onDoShowNextTimeValueChange,onClose=props.onClose,_props$doNotShowNextT=props.doNotShowNextTimeText,doNotShowNextTimeText=void 0===_props$doNotShowNextT?"Don't show next time":_props$doNotShowNextT,muiDialogClasses=props.muiDialogClasses,_useStyles=useStyles({classesOverrides:props.classes}),cx=_useStyles.cx,classes=_useStyles.classes,_useState=(0,react.useState)(!1),_useState2=(0,slicedToArray.Z)(_useState,2),isChecked=_useState2[0],setIsChecked=_useState2[1],onChange=(0,useConstCallback.useConstCallback)((function(){var isCheckedNewValue=!isChecked;setIsChecked(isCheckedNewValue),(0,assert.assert)(void 0!==onDoShowNextTimeValueChange),onDoShowNextTimeValueChange(!isCheckedNewValue)})),mountPointRef=(0,useStateRef.useStateRef)(null);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("div",{ref:mountPointRef,about:"Dialog container"}),null!==mountPointRef.current&&(0,jsx_runtime.jsxs)(Dialog.Z,{classes:muiDialogClasses,container:mountPointRef.current,open:isOpen,onClose,"aria-labelledby":"alert-dialog-title","aria-describedby":"alert-dialog-description",PaperComponent:function PaperComponent(_ref){var children=_ref.children;return(0,jsx_runtime.jsx)("div",{className:cx(classes.root,className),children})},children:[void 0!==title&&("string"!=typeof title?title:(0,jsx_runtime.jsx)(TextBase.x,{typo:"object heading",componentProps:{id:"alert-dialog-title"},children:title})),void 0!==subtitle&&("string"!=typeof subtitle?subtitle:(0,jsx_runtime.jsx)(TextBase.x,{className:classes.subtitle,componentProps:{id:"alert-dialog-description"},typo:"body 1",children:subtitle})),void 0!==body&&("string"!=typeof body?body:(0,jsx_runtime.jsx)(TextBase.x,{className:classes.body,htmlComponent:"div",typo:"body 2",children:body})),(0,jsx_runtime.jsxs)("div",{className:classes.buttonWrapper,children:[(0,jsx_runtime.jsx)("div",{className:classes.checkBoxWrapper,children:void 0!==onDoShowNextTimeValueChange&&(0,jsx_runtime.jsx)(FormControlLabel.Z,{control:(0,jsx_runtime.jsx)(Checkbox.Z,{checked:isChecked,onChange,name:"checkedB",color:"primary"}),label:doNotShowNextTimeText})}),buttons]})]})]})})),useStyles=ThemeProvider.IR.withName({Dialog:Dialog_Dialog}).create((function(_ref2){var theme=_ref2.theme;return{root:(0,objectSpread2.Z)((0,objectSpread2.Z)({backgroundColor:theme.colors.useCases.surfaces.surface1,borderRadius:5,padding:theme.spacing(4)},theme.spacing.rightLeft("margin",4)),{},{maxWidth:breakpoints.a.sm}),buttonWrapper:{display:"flex",marginTop:theme.spacing(4),"& .MuiButton-root":{marginLeft:theme.spacing(2)},alignItems:"center"},checkBoxWrapper:{flex:1},subtitle:{marginTop:theme.spacing(3)},body:{marginTop:theme.spacing(2),color:theme.colors.useCases.typography.textSecondary}}}));try{Dialog_Dialog.displayName="Dialog",Dialog_Dialog.__docgenInfo={description:"",displayName:"Dialog",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},title:{defaultValue:null,description:'NOTE: If string, <Text typo="object heading" />',name:"title",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal"}},subtitle:{defaultValue:null,description:'NOTE: If string, <Text typo="body 1" />',name:"subtitle",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal"}},body:{defaultValue:null,description:'NOTE: If string, <Text typo="body 2" />',name:"body",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal"}},buttons:{defaultValue:null,description:"",name:"buttons",required:!0,type:{name:"ReactNode"}},isOpen:{defaultValue:null,description:"",name:"isOpen",required:!0,type:{name:"boolean"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!0,type:{name:"() => void"}},onDoShowNextTimeValueChange:{defaultValue:null,description:"",name:"onDoShowNextTimeValueChange",required:!1,type:{name:"((doShowNextTime: boolean) => void)"}},doNotShowNextTimeText:{defaultValue:null,description:"",name:"doNotShowNextTimeText",required:!1,type:{name:"string"}},classes:{defaultValue:null,description:"",name:"classes",required:!1,type:{name:'Partial<Record<"body" | "subtitle" | "root" | "buttonWrapper" | "checkBoxWrapper", string>>'}},muiDialogClasses:{defaultValue:null,description:"https://mui.com/material-ui/api/dialog/",name:"muiDialogClasses",required:!1,type:{name:"Partial<DialogClasses>"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Dialog.tsx#Dialog"]={docgenInfo:Dialog_Dialog.__docgenInfo,name:"Dialog",path:"src/Dialog.tsx#Dialog"})}catch(__react_docgen_typescript_loader_error){}var theme=__webpack_require__("./src/stories/theme.ts"),sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),_getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:{Dialog:Dialog_Dialog}}),meta=_getStoryFactory.meta,Dialog_stories_getStory=_getStoryFactory.getStory;const Dialog_stories=meta;var VueFull=Dialog_stories_getStory((0,objectSpread2.Z)({title:"Utiliser dans un service",subtitle:"Le chemin du secret a été copié. ",body:"\n    Au moment de lancer un service, convertissez vos secrets en variables \n    d'environnement. Pour cela, allez dans configuration avancée, puis dans \n    l’onglet Vault et collez le chemin du dossier dans le champ prévu à cet effet. \n    Vos clefs valeurs seront disponibles sous forme de variables d'environnement.",buttons:(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(theme.zx,{variant:"secondary",type:"submit",children:"Cancel"}),(0,jsx_runtime.jsx)(theme.zx,{variant:"primary",type:"submit",children:"Ok"})]}),isOpen:!0},(0,getStory.K)(["onClose","onDoNotDisplayAgainValueChange"])));VueFull.parameters=(0,objectSpread2.Z)({storySource:{source:"getStory(props)"}},VueFull.parameters);var __namedExportsOrder=["VueFull"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Dialog.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Dialog.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/DirectoryHeader.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefaultSvg:()=>VueDefaultSvg,VueImg:()=>VueImg,VueWithoutSubtitle:()=>VueWithoutSubtitle,__namedExportsOrder:()=>__namedExportsOrder,default:()=>DirectoryHeader_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),react=__webpack_require__("./node_modules/react/index.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),Icon=__webpack_require__("./src/Icon.tsx"),IconButton=__webpack_require__("./src/IconButton.tsx"),ChevronLeft=__webpack_require__("./node_modules/@mui/icons-material/ChevronLeft.js"),pxToNumber=__webpack_require__("./src/tools/pxToNumber.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),DirectoryHeader_IconButton=(0,IconButton.k)((0,Icon.I)({chevronLeft:ChevronLeft.Z})).IconButton,DirectoryHeader=(0,react.memo)((function(props){var className=props.className,image=props.image,title=props.title,subtitle=props.subtitle,onGoBack=props.onGoBack,_useStyles=useStyles({classesOverrides:props.classes}),classes=_useStyles.classes,cx=_useStyles.cx;return(0,jsx_runtime.jsxs)("div",{className:cx(classes.root,className),children:[(0,jsx_runtime.jsx)("div",{children:(0,jsx_runtime.jsx)(DirectoryHeader_IconButton,{size:"large",iconId:"chevronLeft",onClick:onGoBack})}),(0,jsx_runtime.jsx)("div",{className:classes.imageWrapper,children:image}),(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)(TextBase.x,{typo:"object heading",children:title}),void 0!==subtitle&&(0,jsx_runtime.jsx)(TextBase.x,{typo:"caption",className:classes.subtitle,children:subtitle})]})]})})),useStyles=ThemeProvider.IR.withName({DirectoryHeader}).create((function(_ref){var height,theme=_ref.theme;return{root:{display:"flex",alignItems:"center",borderBottom:"1px solid ".concat(theme.colors.useCases.typography.textTertiary)},imageWrapper:(0,objectSpread2.Z)((0,objectSpread2.Z)({margin:theme.spacing({topBottom:4,rightLeft:3}),marginLeft:theme.spacing(1)},(height=(0,pxToNumber.F)(theme.typography.variants["object heading"].style.lineHeight)+(0,pxToNumber.F)(theme.typography.variants.caption.style.lineHeight)+theme.spacing(2),{width:height,height})),{},{display:"flex",justifyContent:"center",alignItems:"center"}),subtitle:{marginTop:theme.spacing(2),color:theme.colors.useCases.typography.textSecondary,textTransform:"capitalize"}}}));try{DirectoryHeader.displayName="DirectoryHeader",DirectoryHeader.__docgenInfo={description:"",displayName:"DirectoryHeader",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},image:{defaultValue:null,description:"",name:"image",required:!0,type:{name:"ReactNode"}},title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal"}},subtitle:{defaultValue:null,description:"",name:"subtitle",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal"}},onGoBack:{defaultValue:null,description:"",name:"onGoBack",required:!0,type:{name:"() => void"}},classes:{defaultValue:null,description:"",name:"classes",required:!1,type:{name:'Partial<Record<"subtitle" | "root" | "imageWrapper", string>>'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/DirectoryHeader.tsx#DirectoryHeader"]={docgenInfo:DirectoryHeader.__docgenInfo,name:"DirectoryHeader",path:"src/DirectoryHeader.tsx#DirectoryHeader"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),Services=__webpack_require__("./src/stories/assets/svg/Services.svg");const utilitr_namespaceObject=__webpack_require__.p+"50922f7c866392d4c106.png";var Avatar=__webpack_require__("./node_modules/@mui/material/Avatar/Avatar.js"),_getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:{DirectoryHeader},defaultWidth:600}),meta=_getStoryFactory.meta,DirectoryHeader_stories_getStory=_getStoryFactory.getStory;const DirectoryHeader_stories=meta;var ImageSvg=(0,react.memo)((function(){var _useStyles=(0,ThemeProvider.yK)(),css=_useStyles.css,theme=_useStyles.theme;return(0,jsx_runtime.jsx)(Services.r,{className:css({fill:theme.colors.useCases.typography.textPrimary,height:"100%",width:"unset"})})})),VueDefaultSvg=DirectoryHeader_stories_getStory((0,objectSpread2.Z)({image:(0,jsx_runtime.jsx)(ImageSvg,{}),title:"This is the title",subtitle:"This is the subtitle"},(0,getStory.K)(["onGoBack"]))),VueWithoutSubtitle=DirectoryHeader_stories_getStory((0,objectSpread2.Z)({image:(0,jsx_runtime.jsx)(ImageSvg,{}),title:"This is the title"},(0,getStory.K)(["onGoBack"]))),VueImg=DirectoryHeader_stories_getStory((0,objectSpread2.Z)({image:(0,jsx_runtime.jsx)(Avatar.Z,{style:{height:"100%",width:"100%"},src:utilitr_namespaceObject,alt:""}),title:"This is the title",subtitle:"This is the subtitle"},(0,getStory.K)(["onGoBack"])));VueDefaultSvg.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "image": <ImageSvg />,\n    "title": "This is the title",\n    "subtitle": "This is the subtitle",\n    ...logCallbacks(["onGoBack"]),\n})'}},VueDefaultSvg.parameters),VueWithoutSubtitle.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "image": <ImageSvg />,\n    "title": "This is the title",\n    ...logCallbacks(["onGoBack"]),\n})'}},VueWithoutSubtitle.parameters),VueImg.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "image": (\n        <Avatar\n            style={{ "height": "100%", "width": "100%" }}\n            src={imgUrl}\n            alt=""\n        />\n    ),\n    "title": "This is the title",\n    "subtitle": "This is the subtitle",\n    ...logCallbacks(["onGoBack"]),\n})'}},VueImg.parameters);var __namedExportsOrder=["VueDefaultSvg","VueWithoutSubtitle","VueImg"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/DirectoryHeader.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/DirectoryHeader.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/GitHubPicker.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>GitHubPicker_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),toConsumableArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js"),defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react=__webpack_require__("./node_modules/react/index.js"),Popper=__webpack_require__("./node_modules/@mui/material/Popper/Popper.js"),Close=__webpack_require__("./node_modules/@mui/icons-material/Close.js"),Done=__webpack_require__("./node_modules/@mui/icons-material/Done.js"),Autocomplete=__webpack_require__("./node_modules/@mui/material/Autocomplete/Autocomplete.js"),autocompleteClasses=__webpack_require__("./node_modules/@mui/material/Autocomplete/autocompleteClasses.js"),InputBase=__webpack_require__("./node_modules/@mui/material/InputBase/InputBase.js"),Box=__webpack_require__("./node_modules/@mui/material/Box/Box.js"),hooks=__webpack_require__("./node_modules/evt/hooks/index.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),useClickAway=__webpack_require__("./node_modules/powerhooks/useClickAway.js"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),Link=__webpack_require__("./node_modules/@mui/material/Link/Link.js"),same=__webpack_require__("./node_modules/evt/tools/inDepth/same.js"),useRerenderOnStateChange=__webpack_require__("./node_modules/evt/hooks/useRerenderOnStateChange.js"),lib=__webpack_require__("./node_modules/evt/lib/index.js"),useConst=__webpack_require__("./node_modules/powerhooks/useConst.js"),diff=__webpack_require__("./node_modules/evt/tools/reducers/diff.js"),Button=__webpack_require__("./src/Button.tsx"),useStateRef=__webpack_require__("./node_modules/powerhooks/useStateRef.js"),assert=__webpack_require__("./node_modules/tsafe/assert.js"),useNonPostableEvtLike=__webpack_require__("./src/tools/useNonPostableEvtLike.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","disablePortal","anchorEl","open","children"],_excluded2=["onChange","onBlur"],_excluded3=["inputProps"],GitHubPicker_Button=(0,Button.a)().Button,GitHubPicker=(0,react.memo)((function(props){var className=props.className,getTagColor=props.getTagColor,evtActionLike=props.evtAction,_props$texts=props.texts,texts=void 0===_props$texts?{}:_props$texts,onClose_props=props.onClose,tags=props.tags,selectedTags=props.selectedTags,onSelectedTags=props.onSelectedTags,evtAction=(0,useNonPostableEvtLike._)(evtActionLike),_useState=(0,react.useState)(void 0),_useState2=(0,slicedToArray.Z)(_useState,2),anchorEl=_useState2[0],setAnchorEl=_useState2[1];(0,hooks.useEvt)((function(ctx){evtAction.$attach((function(data){return"open"===data.action?[data]:null}),ctx,(function(_ref){var anchorEl=_ref.anchorEl;setAnchorEl(anchorEl)})),evtAction.attach((function(_ref2){return"close"===_ref2.action}),ctx,(function(){return _onClose()}))}),[evtAction]);var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx,theme=_useStyles.theme,_onClose=(0,useConstCallback.useConstCallback)((function(){anchorEl&&anchorEl.focus(),setAnchorEl(void 0),null==onClose_props||onClose_props()})),ref=(0,useClickAway.useClickAway)({onClickAway:_onClose}).ref,evtInputValue=(0,useConst.useConst)((function(){return lib.Evt.create("")})),mountPointRef=(0,useStateRef.useStateRef)(null);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("div",{ref:mountPointRef,about:"GitHubPicker container"}),null!==mountPointRef.current&&(0,jsx_runtime.jsx)(Popper.Z,{className:cx(classes.root,className),container:mountPointRef.current,open:!!anchorEl,anchorEl,placement:"bottom-start",children:(0,jsx_runtime.jsxs)("div",{ref,children:[void 0!==texts.label&&(0,jsx_runtime.jsx)("div",{className:classes.labelWrapper,children:(0,jsx_runtime.jsx)(TextBase.x,{typo:"body 1",children:texts.label})}),(0,jsx_runtime.jsx)(Autocomplete.Z,{open:!0,multiple:!0,isOptionEqualToValue:same.same,onClose:function onClose(_,reason){"escape"===reason&&_onClose()},value:selectedTags.map((function(tag){return{tag,color:getTagColor(tag)}})),onChange:function onChange(event,newValue,reason){if("keydown"!==event.type||"Backspace"!==event.key||"removeOption"!==reason){var _arrDiff=(0,diff.arrDiff)(selectedTags,newValue.map((function(_ref3){return _ref3.tag}))),newTag=(0,slicedToArray.Z)(_arrDiff.added,1)[0],removed=_arrDiff.removed;evtInputValue.state="",onSelectedTags(void 0!==newTag?{tag:newTag,isNewTag:-1===tags.indexOf(newTag),isSelect:!0}:{tag:removed[0],isSelect:!1})}},disableCloseOnSelect:!0,PopperComponent:function PopperComponent(_ref4){var className=_ref4.className,children=(_ref4.disablePortal,_ref4.anchorEl,_ref4.open,_ref4.children),other=(0,objectWithoutProperties.Z)(_ref4,_excluded);return(0,jsx_runtime.jsx)("div",(0,objectSpread2.Z)((0,objectSpread2.Z)({className:cx(classes.autocompletePopperComponent,className)},other),{},{children:((0,assert.assert)("function"!=typeof children),children)}))},renderTags:function renderTags(){return null},noOptionsText:null,renderOption:function renderOption(props,option,_ref5){var selected=_ref5.selected;return(0,jsx_runtime.jsxs)("li",(0,objectSpread2.Z)((0,objectSpread2.Z)({},props),{},{children:[(0,jsx_runtime.jsx)(Box.Z,{component:Done.Z,sx:{width:17,height:17,mr:"5px",ml:"-2px"},style:{visibility:selected?"visible":"hidden"}}),(0,jsx_runtime.jsx)(Box.Z,{component:"span",sx:{width:14,height:14,flexShrink:0,borderRadius:"3px",mr:1,mt:"2px"},style:{backgroundColor:option.color}}),(0,jsx_runtime.jsx)(Box.Z,{sx:{flexGrow:1,"& span":{color:"light"===theme.muiTheme.palette.mode?"#586069":"#8b949e"}},children:option.tag}),(0,jsx_runtime.jsx)(Box.Z,{component:Close.Z,sx:{opacity:.6,width:18,height:18},style:{visibility:selected?"visible":"hidden"}})]}))},options:(0,toConsumableArray.Z)(tags).sort((function(a,b){var getWeight=function getWeight(tag){var i=selectedTags.indexOf(tag);return-1===i?selectedTags.length+tags.indexOf(tag):i};return getWeight(a)-getWeight(b)})).map((function(tag){return{tag,color:getTagColor(tag)}})),getOptionLabel:function getOptionLabel(option){return option.tag},renderInput:function renderInput(_ref6){var _ref6$inputProps=_ref6.inputProps,_onChange=_ref6$inputProps.onChange,inputProps=(_ref6$inputProps.onBlur,(0,objectWithoutProperties.Z)(_ref6$inputProps,_excluded2)),params=(0,objectWithoutProperties.Z)(_ref6,_excluded3);return(0,jsx_runtime.jsx)(InputBase.ZP,{className:classes.input,ref:params.InputProps.ref,inputProps:(0,objectSpread2.Z)((0,objectSpread2.Z)({},inputProps),{},{onChange:function onChange(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return evtInputValue.state=args[0].target.value,null==_onChange?void 0:_onChange.apply(void 0,args)}}),autoFocus:!0,placeholder:"Filter labels"})}}),void 0!==texts.done&&(0,jsx_runtime.jsxs)("div",{className:classes.doneButtonWrapper,children:[(0,jsx_runtime.jsx)(NoOptionText,{evtInputValue,tags,onClick:function onClick(inputValue){return onSelectedTags({tag:inputValue,isSelect:!0,isNewTag:!0})},texts}),(0,jsx_runtime.jsx)("div",{children:" "}),(0,jsx_runtime.jsx)(GitHubPicker_Button,{variant:"secondary",className:classes.doneButton,onClick:_onClose,children:texts.done})]})]})})]})})),useStyles=ThemeProvider.IR.withName({GitHubPicker}).create((function(_ref7){var _autocompletePopperCo,theme=_ref7.theme;return{root:{border:"1px solid ".concat("light"===theme.muiTheme.palette.mode?"#e1e4e8":"#30363d"),boxShadow:"0 8px 24px ".concat("light"===theme.muiTheme.palette.mode?"rgba(149, 157, 165, 0.2)":"rgb(1, 4, 9)"),borderRadius:6,width:300,zIndex:theme.muiTheme.zIndex.modal,fontSize:13,color:"light"===theme.muiTheme.palette.mode?"#24292e":"#c9d1d9",backgroundColor:"light"===theme.muiTheme.palette.mode?"#fff":"#1c2128"},labelWrapper:{borderBottom:"1px solid ".concat("light"===theme.muiTheme.palette.mode?"#eaecef":"#30363d"),padding:"8px 10px"},autocompletePopperComponent:(_autocompletePopperCo={},(0,defineProperty.Z)(_autocompletePopperCo,"& .".concat(autocompleteClasses.Z.paper),{boxShadow:"none",margin:0,color:"inherit",fontSize:13}),(0,defineProperty.Z)(_autocompletePopperCo,"& .".concat(autocompleteClasses.Z.listbox),(0,defineProperty.Z)({backgroundColor:"light"===theme.muiTheme.palette.mode?"#fff":"#1c2128",padding:0},"& .".concat(autocompleteClasses.Z.option),(0,defineProperty.Z)({minHeight:"auto",alignItems:"flex-start",padding:8,borderBottom:"1px solid  ".concat("light"===theme.muiTheme.palette.mode?" #eaecef":"#30363d"),'&[aria-selected="true"]':{backgroundColor:"transparent"}},"&.".concat(autocompleteClasses.Z.focused,", &.").concat(autocompleteClasses.Z.focused,'[aria-selected="true"]'),{backgroundColor:theme.muiTheme.palette.action.hover}))),(0,defineProperty.Z)(_autocompletePopperCo,"&.".concat(autocompleteClasses.Z.popperDisablePortal),{position:"relative"}),_autocompletePopperCo),input:{padding:10,width:"100%",borderBottom:"1px solid ".concat("light"===theme.muiTheme.palette.mode?"#eaecef":"#30363d"),"& input":{borderRadius:4,backgroundColor:"light"===theme.muiTheme.palette.mode?"#fff":"#0d1117",padding:8,transition:theme.muiTheme.transitions.create(["border-color","box-shadow"]),border:"1px solid ".concat("light"===theme.muiTheme.palette.mode?"#eaecef":"#30363d"),fontSize:14,"&:focus":{boxShadow:"0px 0px 0px 3px ".concat("light"===theme.muiTheme.palette.mode?"rgba(3, 102, 214, 0.3)":"rgb(12, 45, 107)"),borderColor:"light"===theme.muiTheme.palette.mode?"#0366d6":"#388bfd"}}},doneButtonWrapper:{display:"flex",justifyContent:"space-between",alignItems:"center"},doneButton:{margin:theme.spacing(2)}}})),_ref8=function(){var NoOptionText=(0,react.memo)((function(props){var evtInputValue=props.evtInputValue,tags=props.tags,_onClick=props.onClick,texts=props.texts;(0,useRerenderOnStateChange.useRerenderOnStateChange)(evtInputValue);var inputValue=evtInputValue.state,classes=useStyles().classes;return""===inputValue||void 0===texts["create tag"]||-1!==tags.indexOf(evtInputValue.state)?null:(0,jsx_runtime.jsx)(Link.Z,{className:classes.root,onClick:function onClick(){return _onClick(inputValue)},children:texts["create tag"]({tag:inputValue})})})),useStyles=ThemeProvider.IR.withName({NoOptionText}).create((function(_ref9){return{root:{cursor:"pointer",paddingLeft:_ref9.theme.spacing(3)}}}));return{NoOptionText}}(),NoOptionText=_ref8.NoOptionText;try{GitHubPicker.displayName="GitHubPicker",GitHubPicker.__docgenInfo={description:"",displayName:"GitHubPicker",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},getTagColor:{defaultValue:null,description:"",name:"getTagColor",required:!0,type:{name:"(tag: string) => string"}},tags:{defaultValue:null,description:"",name:"tags",required:!0,type:{name:"string[]"}},selectedTags:{defaultValue:null,description:"",name:"selectedTags",required:!0,type:{name:"string[]"}},onSelectedTags:{defaultValue:null,description:"",name:"onSelectedTags",required:!0,type:{name:"(props: { tag: string; } & ({ isSelect: true; isNewTag: boolean; } | { isSelect: false; })) => void"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!1,type:{name:"(() => void)"}},evtAction:{defaultValue:null,description:"",name:"evtAction",required:!0,type:{name:'NonPostableEvtLike<{ action: "open"; anchorEl: HTMLElement; } | { action: "close"; }>'}},texts:{defaultValue:null,description:"",name:"texts",required:!1,type:{name:'{ label?: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal; "create tag"?: ((params: { ...; }) => ReactNode); done?: ReactNode; } | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/GitHubPicker.tsx#GitHubPicker"]={docgenInfo:GitHubPicker.__docgenInfo,name:"GitHubPicker",path:"src/GitHubPicker.tsx#GitHubPicker"})}catch(__react_docgen_typescript_loader_error){}var theme=__webpack_require__("./src/stories/theme.ts"),sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js"),i18n=__webpack_require__("./src/stories/i18n.tsx"),_getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:(0,defineProperty.Z)({},(0,symToStr.symToStr)({GitHubPicker}),(function Component(){var evtGitHubPickerAction=(0,useConst.useConst)((function(){return lib.Evt.create()})),_useState=(0,react.useState)(["oauth","sso","datascience","office","docker"]),_useState2=(0,slicedToArray.Z)(_useState,2),tags=_useState2[0],setTags=_useState2[1],_useState3=(0,react.useState)(["oauth","docker"]),_useState4=(0,slicedToArray.Z)(_useState3,2),selectedTags=_useState4[0],setSelectedTags=_useState4[1],buttonRef=(0,useStateRef.useStateRef)(null),onSelectedTags=(0,useConstCallback.useConstCallback)((function(params){params.isSelect&&params.isNewTag&&setTags([params.tag].concat((0,toConsumableArray.Z)(tags))),setSelectedTags(params.isSelect?[].concat((0,toConsumableArray.Z)(selectedTags),[params.tag]):selectedTags.filter((function(tag){return tag!==params.tag})))})),t=(0,i18n.$)({Picker:null}).t;return(0,jsx_runtime.jsxs)("div",{children:[selectedTags.map((function(tag){return(0,jsx_runtime.jsxs)("span",{children:[tag," "]},tag)})),(0,jsx_runtime.jsx)("br",{}),(0,jsx_runtime.jsx)(theme.zx,{ref:buttonRef,onClick:function onClick(){return evtGitHubPickerAction.post({action:"open",anchorEl:((0,assert.assert)(null!==buttonRef.current),buttonRef.current)})},children:"open"}),(0,jsx_runtime.jsx)(GitHubPicker,{tags,selectedTags,onSelectedTags,evtAction:evtGitHubPickerAction,getTagColor,texts:{label:t("github picker label"),"create tag":function createTag(_ref){var tag=_ref.tag;return t("github picker create tag",{tag})},done:t("github picker done")}})]})}))}),meta=_getStoryFactory.meta,GitHubPicker_stories_getStory=_getStoryFactory.getStory;const GitHubPicker_stories=meta;function getTagColor(tag){return function getRandomColor(stringInput){var h=(0,toConsumableArray.Z)(stringInput).reduce((function(acc,_char){return _char.charCodeAt(0)+((acc<<5)-acc)}),0),l=.35,a=95*Math.min(l,1-l)/100,f=function f(n){var k=(n+h/30)%12,color=l-a*Math.max(Math.min(k-3,9-k,1),-1);return Math.round(255*color).toString(16).padStart(2,"0")};return"#".concat(f(0)).concat(f(8)).concat(f(4))}(tag)}var VueDefault=GitHubPicker_stories_getStory({});VueDefault.parameters=(0,objectSpread2.Z)({storySource:{source:"getStory({})"}},VueDefault.parameters);var __namedExportsOrder=["VueDefault"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/GitHubPicker.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/GitHubPicker.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Icon.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Home:()=>Home,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_theme__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/stories/theme.ts"),_sectionName__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/getStory.tsx"),tsafe_assert__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tsafe/assert.js");(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_2__.assert)();var _getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_3__.j,wrappedComponent:{Icon:_theme__WEBPACK_IMPORTED_MODULE_0__.JO},argTypes:{iconId:{options:["tour","services","help","home"],control:{type:"radio"}},size:{options:["extra small","small","default","medium","large"],control:{type:"radio"}}}}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var Home=getStory({iconId:"home",size:"default"});Home.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'getStory({\n    "iconId": "home",\n    "size": "default",\n})'}},Home.parameters);var __namedExportsOrder=["Home"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Icon.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Icon.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/IconButton.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Vue:()=>Vue,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_theme__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/stories/theme.ts"),_sectionName__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/getStory.tsx"),tsafe_assert__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tsafe/assert.js");(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_2__.assert)();var _getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_3__.j,wrappedComponent:{IconButton:_theme__WEBPACK_IMPORTED_MODULE_0__.hU},argTypes:{iconId:{options:["tour","services","help","home"],control:{type:"radio"}}}}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var Vue=getStory((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({iconId:"home"},(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.K)(["onClick"])));Vue.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'getStory({\n    "iconId": "home",\n    ...logCallbacks(["onClick"]),\n})'}},Vue.parameters);var __namedExportsOrder=["Vue"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/IconButton.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/IconButton.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/LanguageSelect.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueNoTitle:()=>VueNoTitle,__namedExportsOrder:()=>__namedExportsOrder,default:()=>LanguageSelect_stories});var defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react=__webpack_require__("./node_modules/react/index.js"),useCallbackFactory=__webpack_require__("./node_modules/powerhooks/useCallbackFactory.js"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),Icon=__webpack_require__("./src/Icon.tsx"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),useDomRect=__webpack_require__("./node_modules/powerhooks/useDomRect.js"),Tooltip=__webpack_require__("./src/Tooltip.tsx"),Button=__webpack_require__("./node_modules/@mui/material/Button/Button.js"),Menu=__webpack_require__("./node_modules/@mui/material/Menu/Menu.js"),MenuItem=__webpack_require__("./node_modules/@mui/material/MenuItem/MenuItem.js"),objectKeys=__webpack_require__("./node_modules/tsafe/objectKeys.js"),Public=__webpack_require__("./node_modules/@mui/icons-material/Public.js"),ExpandMore=__webpack_require__("./node_modules/@mui/icons-material/ExpandMore.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),LanguageSelect_Icon=(0,Icon.I)({public:Public.Z,expandMore:ExpandMore.Z}).Icon;function createLanguageSelect(params){var languagesPrettyPrint=params.languagesPrettyPrint,LanguageSelect=(0,react.memo)((function(props){var className=props.className,_props$doShowIcon=props.doShowIcon,doShowIcon=void 0===_props$doShowIcon||_props$doShowIcon,variant=props.variant,changeLanguageText=props.changeLanguageText,language=props.language,onLanguageChange=props.onLanguageChange,_useDomRect=(0,useDomRect.useDomRect)(),buttonRef=_useDomRect.ref,buttonWidth=_useDomRect.domRect.width,_useStyles=useStyles({buttonWidth,variant}),classes=_useStyles.classes,theme=_useStyles.theme,cx=_useStyles.cx,css=_useStyles.css,_useState=(0,react.useState)(void 0),_useState2=(0,slicedToArray.Z)(_useState,2),languageMenu=_useState2[0],setLanguageMenu=_useState2[1],onClick=(0,useConstCallback.useConstCallback)((function(event){return setLanguageMenu(event.currentTarget)})),onMenuClose=(0,useConstCallback.useConstCallback)((function(){return setLanguageMenu(void 0)})),onMenuItemClickFactory=(0,useCallbackFactory.useCallbackFactory)((function(_ref){var lng=(0,slicedToArray.Z)(_ref,1)[0];onLanguageChange(lng),onMenuClose()}));return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(Tooltip.u,{title:changeLanguageText,enterDelay:300,children:(0,jsx_runtime.jsxs)(Button.Z,{className:cx(classes.button,className),ref:buttonRef,disableRipple:!0,"aria-owns":languageMenu?"language-menu":void 0,"aria-haspopup":"true","aria-label":null!=changeLanguageText?changeLanguageText:"change language",onClick,"data-ga-event-category":"header","data-ga-event-action":"language",children:[doShowIcon&&(0,jsx_runtime.jsx)(LanguageSelect_Icon,{iconId:"public",className:classes.icon,size:function(){switch(variant){case"big":return"default";case"small":return"extra small"}}()}),(0,jsx_runtime.jsx)(TextBase.x,{typo:function(){switch(variant){case"big":return"label 1";case"small":return"body 2"}}(),className:css({marginLeft:theme.spacing(2),textTransform:"capitalize"}),children:languagesPrettyPrint[language]}),"big"===variant&&(0,jsx_runtime.jsx)(LanguageSelect_Icon,{className:classes.icon,iconId:"expandMore"})]})}),(0,jsx_runtime.jsx)(Menu.Z,{id:"language-menu",anchorEl:languageMenu,open:void 0!==languageMenu,className:classes.menu,onClose:onMenuClose,children:(0,objectKeys.objectKeys)(languagesPrettyPrint).sort((function(a,b){return a===language?-1:b===language?1:0})).map((function(supportedLanguage){return(0,jsx_runtime.jsx)(MenuItem.Z,{component:"a","data-no-link":"true",selected:language===supportedLanguage,onClick:onMenuItemClickFactory(supportedLanguage),lang:supportedLanguage,children:languagesPrettyPrint[supportedLanguage]},supportedLanguage)}))})]})})),useStyles=ThemeProvider.IR.withParams().withName({LanguageSelect}).create((function(_ref3){var theme=_ref3.theme,buttonWidth=_ref3.buttonWidth,variant=_ref3.variant;return{button:{padding:function(){switch(variant){case"big":return;case"small":return 0}}(),"&.Mui-focusVisible":{outline:"-webkit-focus-ring-color auto 1px"}},menu:{"& .Mui-selected":{backgroundColor:theme.colors.useCases.surfaces.surface1},"& .MuiPaper-root":{backgroundColor:theme.colors.useCases.surfaces.background,width:function(){switch(variant){case"big":return buttonWidth;case"small":return}}()},"& a":{color:theme.colors.useCases.typography.textPrimary}},icon:{color:theme.colors.useCases.typography.textPrimary}}}));return{LanguageSelect}}try{createLanguageSelect.displayName="createLanguageSelect",createLanguageSelect.__docgenInfo={description:"",displayName:"createLanguageSelect",props:{languagesPrettyPrint:{defaultValue:null,description:'Example { "en": "English", "fr": "Français" }',name:"languagesPrettyPrint",required:!0,type:{name:"Record<Language, string>"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/LanguageSelect.tsx#createLanguageSelect"]={docgenInfo:createLanguageSelect.__docgenInfo,name:"createLanguageSelect",path:"src/LanguageSelect.tsx#createLanguageSelect"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js"),id=__webpack_require__("./node_modules/tsafe/id.js"),LanguageSelect=createLanguageSelect({languagesPrettyPrint:{en:"English",fr:"Français"}}).LanguageSelect;var _getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:(0,defineProperty.Z)({},(0,symToStr.symToStr)({LanguageSelect}),(function Component(props){var _useState=(0,react.useState)("en"),_useState2=(0,slicedToArray.Z)(_useState,2),language=_useState2[0],setLanguage=_useState2[1];return(0,jsx_runtime.jsx)(LanguageSelect,(0,objectSpread2.Z)({language,onLanguageChange:setLanguage},props))})),argTypes:{variant:{options:(0,id.id)(["big","small"]),control:{type:"radio"}}}}),meta=_getStoryFactory.meta,LanguageSelect_stories_getStory=_getStoryFactory.getStory;const LanguageSelect_stories=meta;var VueNoTitle=LanguageSelect_stories_getStory({doShowIcon:!0,changeLanguageText:"Change language",variant:"big"});VueNoTitle.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "doShowIcon": true,\n    "changeLanguageText": "Change language",\n    "variant": "big",\n})'}},VueNoTitle.parameters);var __namedExportsOrder=["VueNoTitle"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/LanguageSelect.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/LanguageSelect.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/LeftBar.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueNoTitle:()=>VueNoTitle,__namedExportsOrder:()=>__namedExportsOrder,default:()=>LeftBar_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react=__webpack_require__("./node_modules/react/index.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),useGlobalState=__webpack_require__("./node_modules/powerhooks/useGlobalState.js"),Divider=__webpack_require__("./node_modules/@mui/material/Divider/Divider.js"),id=__webpack_require__("./node_modules/tsafe/id.js"),objectKeys=__webpack_require__("./node_modules/tsafe/objectKeys.js"),src_Icon=__webpack_require__("./src/Icon.tsx"),ChevronLeft=__webpack_require__("./node_modules/@mui/icons-material/ChevronLeft.js"),useDomRect=__webpack_require__("./node_modules/powerhooks/useDomRect.js"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js"),assert=__webpack_require__("./node_modules/tsafe/assert.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","collapsedWidth","currentItemId","items","reduceText"];function createLeftBar(params){var _ref=null!=params?params:{Icon:(0,id.id)((function(){throw new Error("never")}))},Icon=_ref.Icon,_ref$persistIsPanelOp=_ref.persistIsPanelOpen,persistIsPanelOpen=void 0!==_ref$persistIsPanelOp&&_ref$persistIsPanelOp,_ref$defaultIsPanelOp=_ref.defaultIsPanelOpen,defaultIsPanelOpen=void 0===_ref$defaultIsPanelOp||_ref$defaultIsPanelOp,useIsCollapsed=(0,useGlobalState.createUseGlobalState)({name:"isCollapsed",initialState:!defaultIsPanelOpen,doPersistAcrossReloads:persistIsPanelOpen}).useIsCollapsed;function NonMemoizedNonForwardedLeftBar(props,ref){var theme=(0,ThemeProvider.yK)().theme,className=props.className,_props$collapsedWidth=props.collapsedWidth,collapsedWidth=void 0===_props$collapsedWidth?2*theme.iconSizesInPxByName.large:_props$collapsedWidth,currentItemId=props.currentItemId,items=props.items,_props$reduceText=props.reduceText,reduceText=void 0===_props$reduceText?"reduce":_props$reduceText,rest=(0,objectWithoutProperties.Z)(props,_excluded);(0,assert.assert)();var _useIsCollapsed=useIsCollapsed(),isCollapsed=_useIsCollapsed.isCollapsed,setIsCollapsed=_useIsCollapsed.setIsCollapsed,toggleIsCollapsedLink=(0,react.useMemo)((function(){return(0,id.id)({href:"#",onClick:function onClick(event){event.preventDefault(),setAreTransitionEnabled(!0),setIsCollapsed((function(isCollapsed){return!isCollapsed}))}})}),[]),_useDomRect=(0,useDomRect.useDomRect)(),wrapperRef=_useDomRect.ref,_useDomRect$domRect=_useDomRect.domRect,wrapperWidth=_useDomRect$domRect.width,wrapperHeight=_useDomRect$domRect.height,_useState=(0,react.useState)(!1),_useState2=(0,slicedToArray.Z)(_useState,2),areTransitionEnabled=_useState2[0],setAreTransitionEnabled=_useState2[1],_useStyles=useStyles((0,objectSpread2.Z)((0,objectSpread2.Z)({rootWidth:isCollapsed?collapsedWidth:wrapperWidth},{paddingTopBottomFactor:3,rootHeight:wrapperHeight+2*theme.spacing(3)}),{},{areTransitionEnabled})),classes=_useStyles.classes,cx=_useStyles.cx;return(0,jsx_runtime.jsx)("div",(0,objectSpread2.Z)((0,objectSpread2.Z)({ref},rest),{},{className:cx(classes.root,className),children:(0,jsx_runtime.jsx)("nav",{className:classes.nav,children:(0,jsx_runtime.jsxs)("div",{ref:wrapperRef,className:classes.wrapper,children:[(0,jsx_runtime.jsx)(CustomButton,{isCollapsed,collapsedWidth,isCurrent:void 0,iconId:"chevronLeft",label:reduceText,link:toggleIsCollapsedLink},"toggleIsCollapsed"),(0,objectKeys.objectKeys)(items).map((function(itemId){return(0,jsx_runtime.jsx)(CustomButton,(0,objectSpread2.Z)({className:classes.button,isCollapsed,collapsedWidth,isCurrent:itemId===currentItemId},items[itemId]),itemId)}))]})})}))}var LeftBar=(0,react.memo)((0,react.forwardRef)(NonMemoizedNonForwardedLeftBar));LeftBar.displayName=(0,symToStr.symToStr)({LeftBar});var useStyles=ThemeProvider.IR.withParams().withName({LeftBar}).create((function(_ref2){var theme=_ref2.theme,rootWidth=_ref2.rootWidth,rootHeight=_ref2.rootHeight,paddingTopBottomFactor=_ref2.paddingTopBottomFactor,areTransitionEnabled=_ref2.areTransitionEnabled;return{root:{borderRadius:16,boxShadow:theme.shadows[3],overflow:"auto",backgroundColor:theme.colors.useCases.surfaces.surface1},nav:(0,objectSpread2.Z)((0,objectSpread2.Z)({width:rootWidth,height:rootHeight},theme.spacing.topBottom("padding",paddingTopBottomFactor)),{},{transition:areTransitionEnabled?"width 250ms":void 0,position:"relative",overflow:"hidden"}),wrapper:{position:"absolute"},button:{marginTop:theme.spacing(2)}}})),_ref3=function(){var InternalIcon=(0,src_Icon.I)({chevronLeft:ChevronLeft.Z}).Icon,CustomButton=(0,react.memo)((function(props){var className=props.className,isCollapsed=props.isCollapsed,collapsedWidth=props.collapsedWidth,isCurrent=props.isCurrent,iconId=props.iconId,label=props.label,link=props.link,_props$belowDivider=props.belowDivider,belowDivider=void 0!==_props$belowDivider&&_props$belowDivider,_props$availability=props.availability,availability=void 0===_props$availability?"available":_props$availability,theme=(0,ThemeProvider.yK)().theme,_useDomRect2=(0,useDomRect.useDomRect)(),ref=_useDomRect2.ref,width=_useDomRect2.domRect.width,_useStyles2=useStyles({collapsedWidth:null!=collapsedWidth?collapsedWidth:2*theme.iconSizesInPxByName.large,isCollapsed,isCurrent,width,isDisabled:"greyed"===availability}),classes=_useStyles2.classes,cx=_useStyles2.cx;return"not visible"===availability?null:(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsxs)("a",(0,objectSpread2.Z)((0,objectSpread2.Z)({ref,className:cx(classes.root,className)},link),{},{children:[(0,jsx_runtime.jsxs)("div",{className:classes.iconWrapper,children:[(0,jsx_runtime.jsx)("div",{className:classes.iconHoverBox}),function(){var className=classes.icon;return"chevronLeft"===iconId?(0,jsx_runtime.jsx)(InternalIcon,{iconId:"chevronLeft",className,size:"large"}):(0,jsx_runtime.jsx)(Icon,{iconId,className,size:"large"})}()]}),(0,jsx_runtime.jsx)("div",{className:classes.typoWrapper,children:(0,jsx_runtime.jsx)(TextBase.x,{typo:"label 1",className:classes.typo,children:label})})]})),!1!==belowDivider&&(0,jsx_runtime.jsx)(Divider.Z,{className:classes.divider,variant:"fullWidth",about:"string"!=typeof belowDivider?void 0:belowDivider})]})})),useStyles=ThemeProvider.IR.withParams().withNestedSelectors().withName("".concat((0,symToStr.symToStr)({LeftBar})).concat((0,symToStr.symToStr)({CustomButton}))).create((function(_ref4){var _objectSpread2,offset,theme=_ref4.theme,collapsedWidth=_ref4.collapsedWidth,isCollapsed=_ref4.isCollapsed,isCurrent=_ref4.isCurrent,width=_ref4.width,isDisabled=_ref4.isDisabled,classes=_ref4.classes;return{root:(0,objectSpread2.Z)((0,objectSpread2.Z)({},isDisabled?{pointerEvents:"none"}:{}),{},(_objectSpread2={color:theme.colors.useCases.typography.textPrimary,textDecoration:"none",display:"flex",cursor:"pointer"},(0,defineProperty.Z)(_objectSpread2,["hover","focus"].map((function(name){return"&:".concat(name," .").concat(classes.iconHoverBox)})).join(", "),{backgroundColor:theme.colors.useCases.surfaces.background}),(0,defineProperty.Z)(_objectSpread2,["hover","focus"].map((function(name){return"&:".concat(name," .").concat(classes.typoWrapper)})).join(", "),{backgroundColor:isCollapsed?void 0:theme.colors.useCases.surfaces.background}),(0,defineProperty.Z)(_objectSpread2,[".MuiSvgIcon-root","h6"].map((function(name){return"&".concat(isCurrent?"":":active"," ").concat(name)})).join(", "),{color:theme.colors.useCases.typography.textFocus}),_objectSpread2)),iconWrapper:{width:collapsedWidth,textAlign:"center",position:"relative",color:isDisabled?theme.colors.useCases.typography.textDisabled:void 0},icon:(0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)({position:"relative",zIndex:2},theme.spacing.topBottom("margin",2)),void 0!==isCurrent?{}:{transform:isCollapsed?"rotate(-180deg)":"rotate(0)"}),{},{transition:"transform 250ms"}),iconHoverBox:(0,objectSpread2.Z)((0,objectSpread2.Z)({display:"inline-block",position:"absolute",height:"100%"},(offset=collapsedWidth/8,{left:offset,right:isCollapsed?offset:0})),{},{zIndex:1,borderRadius:"10px ".concat(isCollapsed?"10px 10px":"0 0"," 10px")}),typoWrapper:{paddingRight:theme.spacing(2),flex:1,borderRadius:"0 10px 10px 0",display:"flex",alignItems:"center",marginRight:theme.spacing(5)},typo:{color:isDisabled?theme.colors.useCases.typography.textDisabled:void 0,whiteSpace:"nowrap",marginRight:theme.spacing(2)},divider:{marginTop:theme.spacing(2),borderColor:theme.colors.useCases.typography.textTertiary,width:(isCollapsed?collapsedWidth:width)-2*theme.spacing(2),marginLeft:theme.spacing(2),transition:"width 250ms"}}}));return{CustomButton}}(),CustomButton=_ref3.CustomButton;return{LeftBar}}try{createLeftBar.displayName="createLeftBar",createLeftBar.__docgenInfo={description:"",displayName:"createLeftBar",props:{Icon:{defaultValue:null,description:"",name:"Icon",required:!0,type:{name:"(props: IconProps<IconId>) => ReactElement<any, any> | null"}},persistIsPanelOpen:{defaultValue:null,description:"",name:"persistIsPanelOpen",required:!0,type:{name:"boolean"}},defaultIsPanelOpen:{defaultValue:null,description:"",name:"defaultIsPanelOpen",required:!0,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/LeftBar.tsx#createLeftBar"]={docgenInfo:createLeftBar.__docgenInfo,name:"createLeftBar",path:"src/LeftBar.tsx#createLeftBar"})}catch(__react_docgen_typescript_loader_error){}var theme=__webpack_require__("./src/stories/theme.ts"),sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),LeftBar=createLeftBar({Icon:theme.JO,persistIsPanelOpen:!1}).LeftBar,_getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:{LeftBar}}),meta=_getStoryFactory.meta,LeftBar_stories_getStory=_getStoryFactory.getStory;const LeftBar_stories=meta;var VueNoTitle=LeftBar_stories_getStory({currentItemId:"item2",items:{item1:{iconId:"tour",label:"Item 1",link:{href:"https://example.com"}},item2:{iconId:"services",label:"Item two",link:{href:"#",onClick:function onClick(){return console.log("click item 2")}}},item3:{iconId:"help",label:"Item three",hasDividerBelow:!0,link:{href:"#"},availability:"greyed"},item4:{iconId:"home",label:"The fourth item",link:{href:"#"}}}});VueNoTitle.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "currentItemId": "item2",\n    "items": {\n        "item1": {\n            "iconId": "tour",\n            "label": "Item 1",\n            "link": {\n                "href": "https://example.com",\n            },\n        },\n        "item2": {\n            "iconId": "services",\n            "label": "Item two",\n            "link": {\n                "href": "#",\n                "onClick": () => console.log("click item 2"),\n            },\n        },\n        "item3": {\n            "iconId": "help",\n            "label": "Item three",\n            "hasDividerBelow": true,\n            "link": {\n                "href": "#",\n            },\n            "availability": "greyed",\n        },\n        "item4": {\n            "iconId": "home",\n            "label": "The fourth item",\n            "link": {\n                "href": "#",\n            },\n        },\n    },\n})'}},VueNoTitle.parameters);var __namedExportsOrder=["VueNoTitle"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/LeftBar.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/LeftBar.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Markdown.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueNoTitle:()=>VueNoTitle,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Markdown_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),react=__webpack_require__("./node_modules/react/index.js"),react_markdown=__webpack_require__("./node_modules/react-markdown/lib/react-markdown.js"),react_markdown_default=__webpack_require__.n(react_markdown),Link=__webpack_require__("./node_modules/@mui/material/Link/Link.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),Markdown=(0,react.memo)((function(props){var className=props.className,children=props.children,renderers=(0,react.useMemo)((function(){return{link:function link(props){return(0,jsx_runtime.jsx)(Link.Z,{underline:"hover",href:props.href,children:props.children})}}}),[]);return(0,jsx_runtime.jsx)(react_markdown_default(),{className,renderers,children})}));try{Markdown.displayName="Markdown",Markdown.__docgenInfo={description:"",displayName:"Markdown",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Markdown.tsx#Markdown"]={docgenInfo:Markdown.__docgenInfo,name:"Markdown",path:"src/Markdown.tsx#Markdown"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),_getStoryFactory=(0,__webpack_require__("./src/stories/getStory.tsx").A)({sectionName:sectionName.j,wrappedComponent:{Markdown},defaultWidth:500}),meta=_getStoryFactory.meta,Markdown_stories_getStory=_getStoryFactory.getStory;const Markdown_stories=meta;var VueNoTitle=Markdown_stories_getStory({children:"# This is a title  \nThis is a paragraph with [a link](https://www.example.com)  \n"});VueNoTitle.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "children": `# This is a title  \nThis is a paragraph with [a link](https://www.example.com)  \n`,\n})'}},VueNoTitle.parameters);var __namedExportsOrder=["VueNoTitle"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Markdown.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Markdown.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/PageHeader.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>PageHeader_stories});var CollapseParams,defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react=__webpack_require__("./node_modules/react/index.js"),toConsumableArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),useDomRect=__webpack_require__("./node_modules/powerhooks/useDomRect.js"),useGlobalState=__webpack_require__("./node_modules/powerhooks/useGlobalState.js"),id=__webpack_require__("./node_modules/tsafe/id.js"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),Icon=__webpack_require__("./src/Icon.tsx"),IconButton=__webpack_require__("./src/IconButton.tsx"),CloseSharp=__webpack_require__("./node_modules/@mui/icons-material/CloseSharp.js"),SentimentSatisfied=__webpack_require__("./node_modules/@mui/icons-material/SentimentSatisfied.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),lib=__webpack_require__("./node_modules/evt/lib/index.js"),hooks=__webpack_require__("./node_modules/evt/hooks/index.js"),getScrollableParent=__webpack_require__("./node_modules/powerhooks/getScrollableParent.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","transitionDuration","children"];CollapseParams||(CollapseParams={});var CollapsibleWrapper=(0,react.memo)((function(props){var className=props.className,_props$transitionDura=props.transitionDuration,transitionDuration=void 0===_props$transitionDura?250:_props$transitionDura,children=props.children,rest=(0,objectWithoutProperties.Z)(props,_excluded),_useDomRect=(0,useDomRect.useDomRect)(),childrenWrapperRef=_useDomRect.ref,childrenWrapperHeight=_useDomRect.domRect.height,_useState=(0,react.useState)(!1),_useState2=(0,slicedToArray.Z)(_useState,2),isCollapsedIfDependsOfScroll=_useState2[0],setIsCollapsedIfDependsOfScroll=_useState2[1];(0,hooks.useEvt)((function(ctx){var childrenWrapperElement=childrenWrapperRef.current;if(childrenWrapperElement&&"collapses on scroll"===rest.behavior&&0!==childrenWrapperHeight){var scrollTopThreshold=rest.scrollTopThreshold,scrollElement=(0,getScrollableParent.getScrollableParent)({element:childrenWrapperElement,doReturnElementIfScrollable:!1});lib.Evt.from(ctx,scrollElement,"scroll").toStateful().pipe((function(){return[scrollElement.scrollTop]})).attach((function(scrollTop){return setIsCollapsedIfDependsOfScroll((function(isCollapsed){return isCollapsed?scrollTop+1.3*childrenWrapperHeight>scrollTopThreshold:scrollTop>scrollTopThreshold}))}))}}),[childrenWrapperRef.current].concat((0,toConsumableArray.Z)("collapses on scroll"!==rest.behavior?[null,null]:[rest.scrollTopThreshold,childrenWrapperHeight])));var _useStyles=useStyles({isCollapsed:function(){switch(rest.behavior){case"collapses on scroll":return isCollapsedIfDependsOfScroll;case"controlled":return rest.isCollapsed}}(),childrenWrapperHeight,transitionDuration,classesOverrides:props.classes}),classes=_useStyles.classes,cx=_useStyles.cx;return(0,jsx_runtime.jsx)("div",{className:cx(classes.root,className),children:(0,jsx_runtime.jsxs)("div",{className:classes.inner,ref:childrenWrapperRef,children:[children,(0,jsx_runtime.jsx)("div",{className:classes.bottomDivForSpacing})]})})})),useStyles=ThemeProvider.IR.withName({CollapsibleWrapper}).withParams().create((function(_ref){var childrenWrapperHeight=_ref.childrenWrapperHeight,isCollapsed=_ref.isCollapsed,transitionDuration=_ref.transitionDuration;return{root:{height:isCollapsed?0:childrenWrapperHeight||void 0,opacity:isCollapsed?0:1,transition:["height","padding","margin","opacity"].map((function(prop){return"".concat(prop," ").concat(transitionDuration,"ms")})).join(", "),overflow:"hidden"},inner:{},bottomDivForSpacing:{}}}));try{CollapsibleWrapper.displayName="CollapsibleWrapper",CollapsibleWrapper.__docgenInfo={description:"",displayName:"CollapsibleWrapper",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},transitionDuration:{defaultValue:null,description:"Default 250ms",name:"transitionDuration",required:!1,type:{name:"number"}},classes:{defaultValue:null,description:"",name:"classes",required:!1,type:{name:'Partial<Record<"root" | "inner" | "bottomDivForSpacing", string>>'}},behavior:{defaultValue:null,description:"",name:"behavior",required:!0,type:{name:"enum",value:[{value:'"controlled"'},{value:'"collapses on scroll"'}]}},isCollapsed:{defaultValue:null,description:"",name:"isCollapsed",required:!0,type:{name:"boolean"}},scrollTopThreshold:{defaultValue:null,description:"",name:"scrollTopThreshold",required:!0,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/CollapsibleWrapper.tsx#CollapsibleWrapper"]={docgenInfo:CollapsibleWrapper.__docgenInfo,name:"CollapsibleWrapper",path:"src/CollapsibleWrapper.tsx#CollapsibleWrapper"})}catch(__react_docgen_typescript_loader_error){}var assert=__webpack_require__("./node_modules/tsafe/assert.js"),PageHeader_excluded=["mainIcon","title","helpTitle","helpIcon","helpContent","className","titleCollapseParams","helpCollapseParams","classes"],usePageHeaderClosedHelpers=(0,useGlobalState.createUseGlobalState)({name:"pageHeaderClosedHelpers",initialState:(0,id.id)([]),doPersistAcrossReloads:!1}).usePageHeaderClosedHelpers,LocalIcon=(0,Icon.I)({close:CloseSharp.Z,sentimentSatisfied:SentimentSatisfied.Z}).Icon,PageHeader_IconButton=(0,IconButton.k)({Icon:LocalIcon}).IconButton;function createPageHeader(params){var Icon=(null!=params?params:{Icon:(0,id.id)((function(){throw new Error("never")}))}).Icon;return{PageHeader:(0,react.memo)((0,react.forwardRef)((function(props,ref){var mainIcon=props.mainIcon,title=props.title,helpTitle=props.helpTitle,helpIcon=props.helpIcon,helpContent=props.helpContent,className=props.className,props_titleCollapseParams=props.titleCollapseParams,props_helpCollapseParams=props.helpCollapseParams,props_classes=props.classes,rest=(0,objectWithoutProperties.Z)(props,PageHeader_excluded);(0,assert.assert)();var _useDomRect=(0,useDomRect.useDomRect)(),helperRef=_useDomRect.ref,helperHeight=_useDomRect.domRect.height,_useClosure=function useClosure(){var _usePageHeaderClosedH=usePageHeaderClosedHelpers(),pageHeaderClosedHelpers=_usePageHeaderClosedH.pageHeaderClosedHelpers,setPageHeaderClosedHelpers=_usePageHeaderClosedH.setPageHeaderClosedHelpers;return{isHelpClosed:pageHeaderClosedHelpers.includes(title),closeHelp:(0,useConstCallback.useConstCallback)((function(){return setPageHeaderClosedHelpers([].concat((0,toConsumableArray.Z)(pageHeaderClosedHelpers),[title]))}))}}(),isHelpClosed=_useClosure.isHelpClosed,closeHelp=_useClosure.closeHelp,_useStyles=PageHeader_useStyles({helperHeight,classesOverrides:props_classes}),classes=_useStyles.classes,cx=_useStyles.cx,_useMemo=(0,react.useMemo)((function(){var _titleCollapseParams$,titleCollapseParams=null!=props_titleCollapseParams?props_titleCollapseParams:(0,id.id)({behavior:"controlled",isCollapsed:!1});return titleCollapseParams.classes=(0,objectSpread2.Z)((0,objectSpread2.Z)({},titleCollapseParams.classes),{},{bottomDivForSpacing:cx(classes.titleBottomDivForSpacing,null===(_titleCollapseParams$=titleCollapseParams.classes)||void 0===_titleCollapseParams$?void 0:_titleCollapseParams$.bottomDivForSpacing)}),{titleCollapseParams}}),[props_titleCollapseParams,cx,classes.titleBottomDivForSpacing]),titleCollapseParams=_useMemo.titleCollapseParams,_useMemo2=(0,react.useMemo)((function(){var _helpCollapseParams$c,helpCollapseParams=isHelpClosed?{behavior:"controlled",isCollapsed:!0}:null!=props_helpCollapseParams?props_helpCollapseParams:{behavior:"controlled",isCollapsed:!1};return helpCollapseParams.classes=(0,objectSpread2.Z)((0,objectSpread2.Z)({},titleCollapseParams.classes),{},{bottomDivForSpacing:cx(classes.helpBottomDivForSpacing,null===(_helpCollapseParams$c=helpCollapseParams.classes)||void 0===_helpCollapseParams$c?void 0:_helpCollapseParams$c.bottomDivForSpacing)}),{helpCollapseParams}}),[isHelpClosed,props_helpCollapseParams,cx,classes.helpBottomDivForSpacing]),helpCollapseParams=_useMemo2.helpCollapseParams;return(0,jsx_runtime.jsxs)("div",(0,objectSpread2.Z)((0,objectSpread2.Z)({className:cx(classes.root,className),ref},rest),{},{children:[(0,jsx_runtime.jsx)(CollapsibleWrapper,(0,objectSpread2.Z)((0,objectSpread2.Z)({},titleCollapseParams),{},{children:(0,jsx_runtime.jsxs)(TextBase.x,{typo:"page heading",className:classes.title,children:[mainIcon&&(0,jsx_runtime.jsx)(Icon,{iconId:mainIcon,className:classes.titleIcon,size:"large"}),title]})})),(0,jsx_runtime.jsx)(CollapsibleWrapper,(0,objectSpread2.Z)((0,objectSpread2.Z)({},helpCollapseParams),{},{children:(0,jsx_runtime.jsxs)("div",{ref:helperRef,className:classes.help,children:[helpIcon&&(0,jsx_runtime.jsx)("div",{children:"sentimentSatisfied"===helpIcon?(0,jsx_runtime.jsx)(LocalIcon,{iconId:"sentimentSatisfied",className:classes.helpIcon}):(0,jsx_runtime.jsx)(Icon,{iconId:helpIcon,className:classes.helpIcon})}),(0,jsx_runtime.jsxs)("div",{className:classes.helpMiddle,children:[(0,jsx_runtime.jsx)(TextBase.x,{typo:"navigation label",children:helpTitle}),(0,jsx_runtime.jsx)(TextBase.x,{typo:"body 1",children:helpContent})]}),(0,jsx_runtime.jsx)("div",{children:(0,jsx_runtime.jsx)(PageHeader_IconButton,{iconId:"close",onClick:closeHelp,className:classes.closeButton})})]})}))]}))})))}}var PageHeader_useStyles=ThemeProvider.IR.withParams().create((function(_ref2){var theme=_ref2.theme,helperHeight=_ref2.helperHeight;return{root:{backgroundColor:"inherit"},title:{display:"flex",alignItems:"center"},titleIcon:{marginRight:theme.spacing(3)},help:{display:"flex",backgroundColor:theme.colors.useCases.surfaces.surface2,alignItems:"start",padding:theme.spacing(3),borderRadius:.15*helperHeight},helpMiddle:{flex:1},helpIcon:{marginRight:theme.spacing(3),color:theme.colors.useCases.typography.textFocus},closeButton:{padding:0,marginLeft:theme.spacing(3)},titleBottomDivForSpacing:{height:theme.spacing(4)},helpBottomDivForSpacing:{height:theme.spacing(3)}}}));try{createPageHeader.displayName="createPageHeader",createPageHeader.__docgenInfo={description:"",displayName:"createPageHeader",props:{Icon:{defaultValue:null,description:"",name:"Icon",required:!0,type:{name:"(props: IconProps<IconId>) => ReactElement<any, any> | null"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/PageHeader.tsx#createPageHeader"]={docgenInfo:createPageHeader.__docgenInfo,name:"createPageHeader",path:"src/PageHeader.tsx#createPageHeader"})}catch(__react_docgen_typescript_loader_error){}var theme=__webpack_require__("./src/stories/theme.ts"),sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js"),PageHeader_stories_excluded=["transitionDuration"],PageHeader=createPageHeader({Icon:theme.JO}).PageHeader;var _getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:(0,defineProperty.Z)({},(0,symToStr.symToStr)({PageHeader}),(function Component(props){var transitionDuration=props.transitionDuration,rest=(0,objectWithoutProperties.Z)(props,PageHeader_stories_excluded),scrollableElementRef=(0,react.useRef)();return(0,jsx_runtime.jsxs)("div",{style:{height:500,display:"flex",flexDirection:"column"},children:[(0,jsx_runtime.jsx)(PageHeader,(0,objectSpread2.Z)((0,objectSpread2.Z)({},rest),{},{titleCollapseParams:{behavior:"collapses on scroll",scrollTopThreshold:500,scrollableElementRef,transitionDuration},helpCollapseParams:{behavior:"collapses on scroll",scrollTopThreshold:200,scrollableElementRef,transitionDuration}})),(0,jsx_runtime.jsx)("span",{children:"Scroll below dit to trigger collapse"}),(0,jsx_runtime.jsx)("div",{ref:scrollableElementRef,style:{flex:1,border:"1px solid black",display:"flex",flexWrap:"wrap",overflow:"auto"},children:new Array(300).fill("").map((function(i){return(0,jsx_runtime.jsx)("div",{style:{border:"1px solid black",height:100,flex:"200px",margin:5}},i)}))})]})})),defaultWidth:750}),meta=_getStoryFactory.meta,PageHeader_stories_getStory=_getStoryFactory.getStory;const PageHeader_stories=meta;var VueDefault=PageHeader_stories_getStory({helpContent:"This is the content of the help",helpIcon:"sentimentSatisfied",helpTitle:"This is the help title",mainIcon:"home",title:"This is the title",transitionDuration:250});VueDefault.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "helpContent": "This is the content of the help",\n    "helpIcon": "sentimentSatisfied",\n    "helpTitle": "This is the help title",\n    "mainIcon": "home",\n    "title": "This is the title",\n    "transitionDuration": 250,\n})'}},VueDefault.parameters);var __namedExportsOrder=["VueDefault"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/PageHeader.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/PageHeader.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Picker.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Picker_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),toConsumableArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js"),defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react=__webpack_require__("./node_modules/react/index.js"),Popper=__webpack_require__("./node_modules/@mui/material/Popper/Popper.js"),Close=__webpack_require__("./node_modules/@mui/icons-material/Close.js"),Done=__webpack_require__("./node_modules/@mui/icons-material/Done.js"),Autocomplete=__webpack_require__("./node_modules/@mui/material/Autocomplete/Autocomplete.js"),autocompleteClasses=__webpack_require__("./node_modules/@mui/material/Autocomplete/autocompleteClasses.js"),InputBase=__webpack_require__("./node_modules/@mui/material/InputBase/InputBase.js"),Box=__webpack_require__("./node_modules/@mui/material/Box/Box.js"),hooks=__webpack_require__("./node_modules/evt/hooks/index.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),useClickAway=__webpack_require__("./node_modules/powerhooks/useClickAway.js"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),Link=__webpack_require__("./node_modules/@mui/material/Link/Link.js"),same=__webpack_require__("./node_modules/evt/tools/inDepth/same.js"),useRerenderOnStateChange=__webpack_require__("./node_modules/evt/hooks/useRerenderOnStateChange.js"),lib=__webpack_require__("./node_modules/evt/lib/index.js"),useConst=__webpack_require__("./node_modules/powerhooks/useConst.js"),diff=__webpack_require__("./node_modules/evt/tools/reducers/diff.js"),Button=__webpack_require__("./src/Button.tsx"),useStateRef=__webpack_require__("./node_modules/powerhooks/useStateRef.js"),assert=__webpack_require__("./node_modules/tsafe/assert.js"),useNonPostableEvtLike=__webpack_require__("./src/tools/useNonPostableEvtLike.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","disablePortal","anchorEl","open","children"],_excluded2=["onChange","onBlur"],_excluded3=["inputProps"],Picker_Button=(0,Button.a)().Button,Picker=(0,react.memo)((function(props){var className=props.className,getOptionColor=props.getOptionColor,options=props.options,selectedOptionIds=props.selectedOptionIds,onSelectedOption=props.onSelectedOption,onClose_props=props.onClose,evtActionLike=props.evtAction,_props$texts=props.texts,texts=void 0===_props$texts?{}:_props$texts,evtAction=(0,useNonPostableEvtLike._)(evtActionLike),_useState=(0,react.useState)(void 0),_useState2=(0,slicedToArray.Z)(_useState,2),anchorEl=_useState2[0],setAnchorEl=_useState2[1];(0,hooks.useEvt)((function(ctx){evtAction.$attach((function(data){return"open"===data.action?[data]:null}),ctx,(function(_ref){var anchorEl=_ref.anchorEl;return setAnchorEl(anchorEl)})),evtAction.attach((function(_ref2){return"close"===_ref2.action}),ctx,(function(){return _onClose()}))}),[evtAction]);var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx,theme=_useStyles.theme,_onClose=(0,useConstCallback.useConstCallback)((function(){anchorEl&&anchorEl.focus(),setAnchorEl(void 0),null==onClose_props||onClose_props()})),ref=(0,useClickAway.useClickAway)({onClickAway:_onClose}).ref,evtInputValue=(0,useConst.useConst)((function(){return lib.Evt.create("")})),mountPointRef=(0,useStateRef.useStateRef)(null);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("div",{ref:mountPointRef,about:"Picker container"}),null!==mountPointRef.current&&(0,jsx_runtime.jsx)(Popper.Z,{className:cx(classes.root,className),container:mountPointRef.current,open:!!anchorEl,anchorEl,placement:"bottom-start",children:(0,jsx_runtime.jsxs)("div",{ref,children:[void 0!==texts.label&&(0,jsx_runtime.jsx)("div",{className:classes.labelWrapper,children:(0,jsx_runtime.jsx)(TextBase.x,{typo:"body 1",children:texts.label})}),(0,jsx_runtime.jsx)(Autocomplete.Z,{open:!0,multiple:!0,isOptionEqualToValue:same.same,onClose:function onClose(_,reason){"escape"===reason&&_onClose()},value:selectedOptionIds.map((function(optionId){return{id:optionId,label:(option=options.find((function(_ref3){return _ref3.id===optionId})),(0,assert.assert)(void 0!==option),option.label),color:null==getOptionColor?void 0:getOptionColor(optionId)};var option})),onChange:function onChange(event,newValue,reason){if("keydown"!==event.type||"Backspace"!==event.key||"removeOption"!==reason){var _arrDiff=(0,diff.arrDiff)(selectedOptionIds,newValue.map((function(_ref4){return _ref4.id}))),newlySelectedId=(0,slicedToArray.Z)(_arrDiff.added,1)[0],removed=_arrDiff.removed;evtInputValue.state="",onSelectedOption(void 0!==newlySelectedId?{isSelect:!0,isNewOption:!1,optionId:newlySelectedId}:{isSelect:!1,optionId:removed[0]})}},disableCloseOnSelect:!0,PopperComponent:function PopperComponent(_ref5){var className=_ref5.className,children=(_ref5.disablePortal,_ref5.anchorEl,_ref5.open,_ref5.children),other=(0,objectWithoutProperties.Z)(_ref5,_excluded);return(0,jsx_runtime.jsx)("div",(0,objectSpread2.Z)((0,objectSpread2.Z)({className:cx(classes.autocompletePopperComponent,className)},other),{},{children:((0,assert.assert)("function"!=typeof children),children)}))},renderTags:function renderTags(){return null},noOptionsText:null,renderOption:function renderOption(props,option,_ref6){var selected=_ref6.selected;return(0,jsx_runtime.jsxs)("li",(0,objectSpread2.Z)((0,objectSpread2.Z)({},props),{},{children:[(0,jsx_runtime.jsx)(Box.Z,{component:Done.Z,sx:{width:17,height:17,mr:"5px",ml:"-2px"},style:{visibility:selected?"visible":"hidden"}}),void 0!==option.color&&(0,jsx_runtime.jsx)(Box.Z,{component:"span",sx:{width:14,height:14,flexShrink:0,borderRadius:"3px",mr:1,mt:"2px"},style:{backgroundColor:option.color}}),(0,jsx_runtime.jsx)(Box.Z,{sx:{flexGrow:1,"& span":{color:"light"===theme.muiTheme.palette.mode?"#586069":"#8b949e"}},children:option.label}),(0,jsx_runtime.jsx)(Box.Z,{component:Close.Z,sx:{opacity:.6,width:18,height:18},style:{visibility:selected?"visible":"hidden"}})]}))},options:(0,toConsumableArray.Z)(options).sort((function(a,b){var getWeight=function getWeight(optionId){var i=selectedOptionIds.indexOf(optionId);return-1===i?selectedOptionIds.length+options.map((function(_ref7){return _ref7.id})).indexOf(optionId):i};return getWeight(a.id)-getWeight(b.id)})).map((function(_ref8){var id=_ref8.id;return{id,label:_ref8.label,color:null==getOptionColor?void 0:getOptionColor(id)}})),getOptionLabel:function getOptionLabel(option){return option.label},renderInput:function renderInput(_ref9){var _ref9$inputProps=_ref9.inputProps,_onChange=_ref9$inputProps.onChange,inputProps=(_ref9$inputProps.onBlur,(0,objectWithoutProperties.Z)(_ref9$inputProps,_excluded2)),params=(0,objectWithoutProperties.Z)(_ref9,_excluded3);return(0,jsx_runtime.jsx)(InputBase.ZP,{className:classes.input,ref:params.InputProps.ref,inputProps:(0,objectSpread2.Z)((0,objectSpread2.Z)({},inputProps),{},{onChange:function onChange(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return evtInputValue.state=args[0].target.value,null==_onChange?void 0:_onChange.apply(void 0,args)}}),autoFocus:!0,placeholder:"Filter labels"})}}),void 0!==texts.done&&(0,jsx_runtime.jsxs)("div",{className:classes.doneButtonWrapper,children:[(0,jsx_runtime.jsx)(NoOptionText,{evtInputValue,optionLabels:options.map((function(_ref10){return _ref10.label})),onClick:function onClick(inputValue){return onSelectedOption({isSelect:!0,isNewOption:!0,optionLabel:inputValue})},texts}),(0,jsx_runtime.jsx)("div",{children:" "}),(0,jsx_runtime.jsx)(Picker_Button,{variant:"secondary",className:classes.doneButton,onClick:_onClose,children:texts.done})]})]})})]})})),useStyles=ThemeProvider.IR.withName("Picker").create((function(_ref11){var _autocompletePopperCo,theme=_ref11.theme;return{root:{border:"1px solid ".concat("light"===theme.muiTheme.palette.mode?"#e1e4e8":"#30363d"),boxShadow:"0 8px 24px ".concat("light"===theme.muiTheme.palette.mode?"rgba(149, 157, 165, 0.2)":"rgb(1, 4, 9)"),borderRadius:6,width:300,zIndex:theme.muiTheme.zIndex.modal,fontSize:13,color:"light"===theme.muiTheme.palette.mode?"#24292e":"#c9d1d9",backgroundColor:"light"===theme.muiTheme.palette.mode?"#fff":"#1c2128"},labelWrapper:{borderBottom:"1px solid ".concat("light"===theme.muiTheme.palette.mode?"#eaecef":"#30363d"),padding:"8px 10px"},autocompletePopperComponent:(_autocompletePopperCo={},(0,defineProperty.Z)(_autocompletePopperCo,"& .".concat(autocompleteClasses.Z.paper),{boxShadow:"none",margin:0,color:"inherit",fontSize:13}),(0,defineProperty.Z)(_autocompletePopperCo,"& .".concat(autocompleteClasses.Z.listbox),(0,defineProperty.Z)({backgroundColor:"light"===theme.muiTheme.palette.mode?"#fff":"#1c2128",padding:0},"& .".concat(autocompleteClasses.Z.option),(0,defineProperty.Z)({minHeight:"auto",alignItems:"flex-start",padding:8,borderBottom:"1px solid  ".concat("light"===theme.muiTheme.palette.mode?" #eaecef":"#30363d"),'&[aria-selected="true"]':{backgroundColor:"transparent"}},"&.".concat(autocompleteClasses.Z.focused,", &.").concat(autocompleteClasses.Z.focused,'[aria-selected="true"]'),{backgroundColor:theme.muiTheme.palette.action.hover}))),(0,defineProperty.Z)(_autocompletePopperCo,"&.".concat(autocompleteClasses.Z.popperDisablePortal),{position:"relative"}),_autocompletePopperCo),input:{padding:10,width:"100%",borderBottom:"1px solid ".concat("light"===theme.muiTheme.palette.mode?"#eaecef":"#30363d"),"& input":{borderRadius:4,backgroundColor:"light"===theme.muiTheme.palette.mode?"#fff":"#0d1117",padding:8,transition:theme.muiTheme.transitions.create(["border-color","box-shadow"]),border:"1px solid ".concat("light"===theme.muiTheme.palette.mode?"#eaecef":"#30363d"),fontSize:14,"&:focus":{boxShadow:"0px 0px 0px 3px ".concat("light"===theme.muiTheme.palette.mode?"rgba(3, 102, 214, 0.3)":"rgb(12, 45, 107)"),borderColor:"light"===theme.muiTheme.palette.mode?"#0366d6":"#388bfd"}}},doneButtonWrapper:{display:"flex",justifyContent:"space-between",alignItems:"center"},doneButton:{margin:theme.spacing(2)}}})),_ref12=function(){var NoOptionText=(0,react.memo)((function(props){var evtInputValue=props.evtInputValue,optionLabels=props.optionLabels,_onClick=props.onClick,texts=props.texts;(0,useRerenderOnStateChange.useRerenderOnStateChange)(evtInputValue);var inputValue=evtInputValue.state,classes=useStyles().classes;return""===inputValue||void 0===texts["create option"]||-1!==optionLabels.indexOf(evtInputValue.state)?null:(0,jsx_runtime.jsx)(Link.Z,{className:classes.root,onClick:function onClick(){return _onClick(inputValue)},children:texts["create option"]({optionLabel:inputValue})})})),useStyles=ThemeProvider.IR.withName({NoOptionText}).create((function(_ref13){return{root:{cursor:"pointer",paddingLeft:_ref13.theme.spacing(3)}}}));return{NoOptionText}}(),NoOptionText=_ref12.NoOptionText;try{Picker.displayName="Picker",Picker.__docgenInfo={description:"",displayName:"Picker",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},getOptionColor:{defaultValue:null,description:"If undefined no color",name:"getOptionColor",required:!1,type:{name:"((itemId: string) => string)"}},options:{defaultValue:null,description:"",name:"options",required:!0,type:{name:"{ id: string; label: string; }[]"}},selectedOptionIds:{defaultValue:null,description:"",name:"selectedOptionIds",required:!0,type:{name:"string[]"}},onSelectedOption:{defaultValue:null,description:"",name:"onSelectedOption",required:!0,type:{name:"(props: ({ isSelect: true; } & ({ isNewOption: true; optionLabel: string; } | { isNewOption: false; optionId: string; })) | { isSelect: false; optionId: string; }) => void"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!1,type:{name:"(() => void)"}},evtAction:{defaultValue:null,description:"",name:"evtAction",required:!0,type:{name:'NonPostableEvtLike<{ action: "open"; anchorEl: HTMLElement; } | { action: "close"; }>'}},texts:{defaultValue:null,description:"",name:"texts",required:!1,type:{name:'{ label?: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal; "create option"?: ((params: { ...; }) => ReactNode); done?: ReactNode; } | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Picker.tsx#Picker"]={docgenInfo:Picker.__docgenInfo,name:"Picker",path:"src/Picker.tsx#Picker"})}catch(__react_docgen_typescript_loader_error){}var theme=__webpack_require__("./src/stories/theme.ts"),sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js"),i18n=__webpack_require__("./src/stories/i18n.tsx"),_getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:(0,defineProperty.Z)({},(0,symToStr.symToStr)({Picker}),(function Component(){var evtGitHubPickerAction=(0,useConst.useConst)((function(){return lib.Evt.create()})),_useState=(0,react.useState)(["oauth","sso","datascience","office","docker"].map((function(tag){return{id:tag,label:tag}}))),_useState2=(0,slicedToArray.Z)(_useState,2),options=_useState2[0],setOptions=_useState2[1],_useState3=(0,react.useState)(["oauth","docker"]),_useState4=(0,slicedToArray.Z)(_useState3,2),selectedOptionIds=_useState4[0],setSelectedOptionIds=_useState4[1],buttonRef=(0,useStateRef.useStateRef)(null),onSelectedOption=(0,useConstCallback.useConstCallback)((function(params){params.isSelect&&params.isNewOption&&(setSelectedOptionIds([params.optionLabel].concat((0,toConsumableArray.Z)(selectedOptionIds))),setOptions([].concat((0,toConsumableArray.Z)(options),[{id:params.optionLabel,label:params.optionLabel}]))),setSelectedOptionIds(params.isSelect?[].concat((0,toConsumableArray.Z)(selectedOptionIds),[params.isNewOption?params.optionLabel:params.optionId]):selectedOptionIds.filter((function(id){return id!==params.optionId})))})),t=(0,i18n.$)({Picker}).t;return(0,jsx_runtime.jsxs)("div",{children:[selectedOptionIds.map((function(id){return(0,jsx_runtime.jsxs)("span",{children:[id," "]},id)})),(0,jsx_runtime.jsx)("br",{}),(0,jsx_runtime.jsx)(theme.zx,{ref:buttonRef,onClick:function onClick(){return evtGitHubPickerAction.post({action:"open",anchorEl:((0,assert.assert)(null!==buttonRef.current),buttonRef.current)})},children:"open"}),(0,jsx_runtime.jsx)(Picker,{options,selectedOptionIds,onSelectedOption,evtAction:evtGitHubPickerAction,getOptionColor:getTagColor,texts:{label:t("github picker label"),"create option":function createOption(_ref){var optionLabel=_ref.optionLabel;return t("github picker create tag",{tag:optionLabel})},done:t("github picker done")}})]})}))}),meta=_getStoryFactory.meta,Picker_stories_getStory=_getStoryFactory.getStory;const Picker_stories=meta;function getTagColor(tag){return function getRandomColor(stringInput){var h=(0,toConsumableArray.Z)(stringInput).reduce((function(acc,_char){return _char.charCodeAt(0)+((acc<<5)-acc)}),0),l=.35,a=95*Math.min(l,1-l)/100,f=function f(n){var k=(n+h/30)%12,color=l-a*Math.max(Math.min(k-3,9-k,1),-1);return Math.round(255*color).toString(16).padStart(2,"0")};return"#".concat(f(0)).concat(f(8)).concat(f(4))}(tag)}var VueDefault=Picker_stories_getStory({});VueDefault.parameters=(0,objectSpread2.Z)({storySource:{source:"getStory({})"}},VueDefault.parameters);var __namedExportsOrder=["VueDefault"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Picker.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Picker.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/RangeSlider.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Vue1:()=>Vue1,__namedExportsOrder:()=>__namedExportsOrder,default:()=>RangeSlider_stories});var defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),RangeSlider=__webpack_require__("./src/RangeSlider/SimpleOrRangeSlider.tsx").C,sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),react=__webpack_require__("./node_modules/react/index.js"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");var _getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:(0,defineProperty.Z)({},(0,symToStr.symToStr)({RangeSlider}),(function Component(props){var _useState=(0,react.useState)(props.min),_useState2=(0,slicedToArray.Z)(_useState,2),valueLow=_useState2[0],setValueLow=_useState2[1],_useState3=(0,react.useState)(props.max),_useState4=(0,slicedToArray.Z)(_useState3,2),valueHigh=_useState4[0],setValueHigh=_useState4[1],onValueChange=(0,useConstCallback.useConstCallback)((function(_ref){var extremity=_ref.extremity,value=_ref.value;switch(extremity){case"low":setValueLow(value);break;case"high":setValueHigh(value)}}));return(0,jsx_runtime.jsx)(RangeSlider,(0,objectSpread2.Z)((0,objectSpread2.Z)({},props),{},{valueLow,valueHigh,onValueChange}))}))}),meta=_getStoryFactory.meta,RangeSlider_stories_getStory=_getStoryFactory.getStory;const RangeSlider_stories=meta;var Vue1=RangeSlider_stories_getStory({label:"Random-access memory (RAM)",lowExtremitySemantic:"guaranteed",highExtremitySemantic:"maximum",unit:"Mi",min:900,max:1100,step:1});Vue1.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "label": "Random-access memory (RAM)",\n    "lowExtremitySemantic": "guaranteed",\n    "highExtremitySemantic": "maximum",\n    "unit": "Mi",\n    "min": 900,\n    "max": 1100,\n    "step": 1,\n})'}},Vue1.parameters);var __namedExportsOrder=["Vue1"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/RangeSlider.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/RangeSlider.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/SearchBar.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>SearchBar_stories});var defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react=__webpack_require__("./node_modules/react/index.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),useClickAway=__webpack_require__("./node_modules/powerhooks/useClickAway.js"),hooks=__webpack_require__("./node_modules/evt/hooks/index.js"),Icon=__webpack_require__("./src/Icon.tsx"),IconButton=__webpack_require__("./src/IconButton.tsx"),Search=__webpack_require__("./node_modules/@mui/icons-material/Search.js"),Cancel=__webpack_require__("./node_modules/@mui/icons-material/Cancel.js"),assert=__webpack_require__("./node_modules/tsafe/assert.js"),useMergeRefs=__webpack_require__("./node_modules/powerhooks/useMergeRefs.js"),useNonPostableEvtLike=__webpack_require__("./src/tools/useNonPostableEvtLike.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","onSearchChange","onKeyPress","search","placeholder","evtAction","classes"],SearchBar_Icon=(0,Icon.I)({search:Search.Z,cancel:Cancel.Z}).Icon,SearchBar_IconButton=(0,IconButton.k)({Icon:SearchBar_Icon}).IconButton,SearchBar=(0,react.memo)((0,react.forwardRef)((function(props,forwardedRef){var className=props.className,onSearchChange=props.onSearchChange,onKeyPress=props.onKeyPress,search=props.search,_props$placeholder=props.placeholder,placeholder=void 0===_props$placeholder?"Search":_props$placeholder,evtActionLike=props.evtAction,props_classes=props.classes,evtAction=((0,objectWithoutProperties.Z)(props,_excluded),(0,useNonPostableEvtLike._)(evtActionLike));(0,assert.assert)();var _useState=(0,react.useState)(""!==search),_useState2=(0,slicedToArray.Z)(_useState,2),isActive=_useState2[0],setIsActive=_useState2[1],onClearButtonClick=(0,useConstCallback.useConstCallback)((function(){return onInputKeyDown({key:"Escape"})})),onRootClick=(0,useConstCallback.useConstCallback)((function(){isActive||setIsActive(!0)})),onIconClick=(0,useConstCallback.useConstCallback)((function(){var inputEl=inputRef.current;null!==inputEl&&(inputEl.focus(),inputEl.setSelectionRange(0,search.length))})),onInputChange=(0,useConstCallback.useConstCallback)((function(event){var value=event.target.value;onSearchChange(value)})),inputRef=(0,react.useRef)(null),onInputKeyDown=(0,useConstCallback.useConstCallback)((function(event){var _inputRef$current,key=function(){switch(event.key){case"Escape":case"Enter":return event.key;default:return"irrelevant"}}();if("irrelevant"!==key){switch(null==onKeyPress||onKeyPress(key),key){case"Enter":""===search&&setIsActive(!1);break;case"Escape":onSearchChange(""),setIsActive(!1)}null===(_inputRef$current=inputRef.current)||void 0===_inputRef$current||_inputRef$current.blur()}})),rootRefClickAway=(0,useClickAway.useClickAway)({onClickAway:function onClickAway(){""===search&&setIsActive(!1)}}).ref,rootRef=(0,useMergeRefs.q)([rootRefClickAway,forwardedRef]);(0,hooks.useEvt)((function(ctx){return null==evtAction?void 0:evtAction.attach((function(action){return"CLEAR SEARCH"===action}),ctx,(function(){return onInputKeyDown({key:"Escape"})}))}),[null!=evtAction?evtAction:Object]);var _useStyles=useStyles({isActive,classesOverrides:props_classes}),classes=_useStyles.classes,cx=_useStyles.cx;return(0,jsx_runtime.jsx)("div",{ref:rootRef,className:cx(classes.root,className),onClick:onRootClick,children:(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)(SearchBar_Icon,{iconId:"search",onClick:onIconClick,className:classes.icon}),isActive?(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("input",{ref:inputRef,autoFocus:!0,className:classes.input,type:"text",value:search,onChange:onInputChange,onKeyDown:onInputKeyDown,spellCheck:!1,placeholder}),(0,jsx_runtime.jsx)(SearchBar_IconButton,{iconId:"cancel",size:"small",disabled:""===search,onClick:onClearButtonClick})]}):(0,jsx_runtime.jsx)("span",{className:classes.searchLabel,children:placeholder})]})})}))),useStyles=ThemeProvider.IR.withName({SearchBar}).withParams().create((function(_ref){var theme=_ref.theme,isActive=_ref.isActive;return{root:{borderRadius:8,overflow:"hidden",boxShadow:theme.shadows[1],"& > div":{display:"flex",alignItems:"center",backgroundColor:theme.colors.useCases.surfaces.surface1,cursor:isActive?void 0:"pointer",overflow:"hidden",border:"solid 2px transparent","&:hover":{borderBottomColor:theme.colors.useCases.buttons.actionActive}}},input:(0,objectSpread2.Z)((0,objectSpread2.Z)({flex:1,caretColor:theme.colors.useCases.typography.textFocus},theme.typography.variants["body 1"].style),{},{outline:"none",borderWidth:0,border:"none",backgroundColor:"transparent",color:theme.colors.useCases.typography.textPrimary,"&::placeholder":{color:theme.colors.useCases.typography.textDisabled,opacity:1}}),icon:{margin:"".concat(theme.spacing(2)-2,"px ").concat(theme.spacing(3)-2,"px"),color:isActive?theme.colors.useCases.typography.textFocus:void 0},searchLabel:(0,objectSpread2.Z)((0,objectSpread2.Z)({},theme.muiTheme.typography.button),{},{display:"block",flex:1,color:theme.colors.useCases.typography.textPrimary})}}));try{SearchBar.displayName="SearchBar",SearchBar.__docgenInfo={description:"",displayName:"SearchBar",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},search:{defaultValue:null,description:"",name:"search",required:!0,type:{name:"string"}},onSearchChange:{defaultValue:null,description:"",name:"onSearchChange",required:!0,type:{name:"(search: string) => void"}},onKeyPress:{defaultValue:null,description:"",name:"onKeyPress",required:!1,type:{name:'((key: "Enter" | "Escape") => void)'}},evtAction:{defaultValue:null,description:"",name:"evtAction",required:!1,type:{name:'NonPostableEvtLike<"CLEAR SEARCH">'}},placeholder:{defaultValue:null,description:'Default "Search"',name:"placeholder",required:!1,type:{name:"string"}},classes:{defaultValue:null,description:"",name:"classes",required:!1,type:{name:'Partial<Record<"input" | "icon" | "root" | "searchLabel", string>>'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/SearchBar.tsx#SearchBar"]={docgenInfo:SearchBar.__docgenInfo,name:"SearchBar",path:"src/SearchBar.tsx#SearchBar"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js");var _getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:(0,defineProperty.Z)({},(0,symToStr.symToStr)({SearchBar}),(function Component(props){var _useState=(0,react.useState)(""),_useState2=(0,slicedToArray.Z)(_useState,2),search=_useState2[0],setState=_useState2[1];return(0,jsx_runtime.jsx)(SearchBar,(0,objectSpread2.Z)({search,onSearchChange:setState},props))})),defaultWidth:700}),meta=_getStoryFactory.meta,SearchBar_stories_getStory=_getStoryFactory.getStory;const SearchBar_stories=meta;var VueDefault=SearchBar_stories_getStory((0,objectSpread2.Z)({},(0,getStory.K)(["onKeyPress"])));VueDefault.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    ...logCallbacks(["onKeyPress"]),\n})'}},VueDefault.parameters);var __namedExportsOrder=["VueDefault"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/SearchBar.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/SearchBar.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Slider.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Vue1:()=>Vue1,VueNoSemantic:()=>VueNoSemantic,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Slider_stories});var defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react=__webpack_require__("./node_modules/react/index.js"),SimpleOrRangeSlider=__webpack_require__("./src/RangeSlider/SimpleOrRangeSlider.tsx"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["value","onValueChange","semantic"],Slider=(0,react.memo)((function(props){var value=props.value,onValueChange=props.onValueChange,semantic=props.semantic,rest=(0,objectWithoutProperties.Z)(props,_excluded),onSimpleOrRangeSliderValueChange=(0,useConstCallback.useConstCallback)((function(_ref){var value=_ref.value;return onValueChange(value)}));return(0,jsx_runtime.jsx)(SimpleOrRangeSlider.C,(0,objectSpread2.Z)({highExtremitySemantic:semantic,valueHigh:value,onValueChange:onSimpleOrRangeSliderValueChange},rest))}));try{Slider.displayName="Slider",Slider.__docgenInfo={description:"",displayName:"Slider",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal"}},max:{defaultValue:null,description:"",name:"max",required:!0,type:{name:"number"}},min:{defaultValue:null,description:"",name:"min",required:!0,type:{name:"number"}},step:{defaultValue:null,description:"",name:"step",required:!0,type:{name:"number"}},unit:{defaultValue:null,description:"",name:"unit",required:!0,type:{name:"string"}},extraInfo:{defaultValue:null,description:"",name:"extraInfo",required:!1,type:{name:"string"}},semantic:{defaultValue:null,description:"",name:"semantic",required:!1,type:{name:"string"}},value:{defaultValue:null,description:"",name:"value",required:!0,type:{name:"number"}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!0,type:{name:"(value: number) => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Slider.tsx#Slider"]={docgenInfo:Slider.__docgenInfo,name:"Slider",path:"src/Slider.tsx#Slider"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js");var _getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:(0,defineProperty.Z)({},(0,symToStr.symToStr)({Slider}),(function Component(props){var _useState=(0,react.useState)(props.min),_useState2=(0,slicedToArray.Z)(_useState,2),value=_useState2[0],setValue=_useState2[1];return(0,jsx_runtime.jsx)(Slider,(0,objectSpread2.Z)((0,objectSpread2.Z)({},props),{},{value,onValueChange:setValue}))}))}),meta=_getStoryFactory.meta,Slider_stories_getStory=_getStoryFactory.getStory;const Slider_stories=meta;var Vue1=Slider_stories_getStory({label:"Random-access memory (RAM)",extraInfo:"This is some extra infos",semantic:"maximum",unit:"Mi",min:1,max:200,step:1}),VueNoSemantic=Slider_stories_getStory({label:"Random-access memory (RAM)",unit:"Mi",min:1,max:200,step:1});Vue1.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "label": "Random-access memory (RAM)",\n    "extraInfo": "This is some extra infos",\n    "semantic": "maximum",\n    "unit": "Mi",\n    "min": 1,\n    "max": 200,\n    "step": 1,\n})'}},Vue1.parameters),VueNoSemantic.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "label": "Random-access memory (RAM)",\n    "unit": "Mi",\n    "min": 1,\n    "max": 200,\n    "step": 1,\n})'}},VueNoSemantic.parameters);var __namedExportsOrder=["Vue1","VueNoSemantic"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Slider.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Slider.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Tabs.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueAllTabsVisible:()=>VueAllTabsVisible,VueLarge:()=>VueLarge,VueSmall:()=>VueSmall,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),_Tabs__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/Tabs.tsx"),_sectionName__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/getStory.tsx"),tsafe_symToStr__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tsafe/symToStr.js"),react__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/index.js"),powerhooks__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/powerhooks/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["tabCount"];var _getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_9__.j,defaultWidth:700,wrappedComponent:(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_10__.Z)({},(0,tsafe_symToStr__WEBPACK_IMPORTED_MODULE_2__.symToStr)({Tabs:_Tabs__WEBPACK_IMPORTED_MODULE_0__.m}),(function Component(props){var tabCount=props.tabCount,rest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_6__.Z)(props,_excluded),_useState=(0,react__WEBPACK_IMPORTED_MODULE_3__.useState)((function(){return new Array(tabCount).fill("").map((function(){for(var _len=arguments.length,_ref=new Array(_len),_key=0;_key<_len;_key++)_ref[_key]=arguments[_key];var i=_ref[1];return{id:"tab".concat(i),title:"Tab ".concat(i)}}))})),tabs=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__.Z)(_useState,1)[0],_useState3=(0,react__WEBPACK_IMPORTED_MODULE_3__.useState)("tab5"),_useState4=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__.Z)(_useState3,2),activeTabId=_useState4[0],setActiveTabId=_useState4[1],onRequestChangeActiveTab=(0,powerhooks__WEBPACK_IMPORTED_MODULE_4__.useConstCallback)((function(tabId){return setActiveTabId(tabId)}));return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Tabs__WEBPACK_IMPORTED_MODULE_0__.m,(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({tabs,activeTabId,onRequestChangeActiveTab},rest),{},{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("span",{children:["Tab selected: ",activeTabId]})}))}))}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var VueSmall=getStory({size:"small",maxTabCount:4,tabCount:9}),VueLarge=getStory({size:"big",maxTabCount:4,tabCount:9}),VueAllTabsVisible=getStory({size:"big",maxTabCount:10,tabCount:5});VueSmall.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({storySource:{source:'getStory({\n    "size": "small",\n    "maxTabCount": 4,\n    "tabCount": 9,\n})'}},VueSmall.parameters),VueLarge.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({storySource:{source:'getStory({\n    "size": "big",\n    "maxTabCount": 4,\n    "tabCount": 9,\n})'}},VueLarge.parameters),VueAllTabsVisible.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({storySource:{source:'getStory({\n    "size": "big",\n    "maxTabCount": 10,\n    "tabCount": 5,\n})'}},VueAllTabsVisible.parameters);var __namedExportsOrder=["VueSmall","VueLarge","VueAllTabsVisible"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Tabs.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Tabs.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Tag.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueCustom:()=>VueCustom,VueDefault:()=>VueDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Tag_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),react=__webpack_require__("./node_modules/react/index.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),Tag=(0,react.memo)((function(props){var text=props.text,className=props.className,onClick=props.onClick,_useStyles=useStyles({classesOverrides:props.classes}),classes=_useStyles.classes,cx=_useStyles.cx;return(0,jsx_runtime.jsx)("div",{className:cx(classes.root,className),onClick,children:"string"==typeof text?(0,jsx_runtime.jsx)(TextBase.x,{className:classes.text,typo:"body 3",children:text}):text})})),useStyles=ThemeProvider.IR.withName({Tag}).create((function(_ref){var theme=_ref.theme;return{root:{backgroundColor:theme.colors.palette[theme.isDarkModeEnabled?"light":"dark"].main,padding:theme.spacing({topBottom:1,rightLeft:2}),borderRadius:theme.spacing(3),display:"inline-block",cursor:"pointer"},text:{color:theme.colors.palette[theme.isDarkModeEnabled?"dark":"light"].main}}}));try{Tag.displayName="Tag",Tag.__docgenInfo={description:"",displayName:"Tag",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},classes:{defaultValue:null,description:"",name:"classes",required:!1,type:{name:'Partial<Record<"text" | "root", string>>'}},text:{defaultValue:null,description:"",name:"text",required:!0,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"(() => void)"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Tag.tsx#Tag"]={docgenInfo:Tag.__docgenInfo,name:"Tag",path:"src/Tag.tsx#Tag"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),emotion_css_esm=__webpack_require__("./node_modules/@emotion/css/dist/emotion-css.esm.js"),_getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:{Tag}}),meta=_getStoryFactory.meta,Tag_stories_getStory=_getStoryFactory.getStory;const Tag_stories=meta;var VueDefault=Tag_stories_getStory({text:"Machine learning"}),VueCustom=Tag_stories_getStory({className:(0,emotion_css_esm.iv)({backgroundColor:"pink","& > p":{color:"black"}}),text:"Machine learning"});VueDefault.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "text": "Machine learning",\n})'}},VueDefault.parameters),VueCustom.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "className": css({\n        "backgroundColor": "pink",\n        "& > p": {\n            "color": "black",\n        },\n    }),\n    "text": "Machine learning",\n})'}},VueCustom.parameters);var __namedExportsOrder=["VueDefault","VueCustom"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Tag.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Tag.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/TestSpacing.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_theme__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/stories/theme.ts"),_sectionName__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/getStory.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");var _getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_3__.j,wrappedComponent:{TestSpacing:function TestSpacing(){var theme=(0,_theme__WEBPACK_IMPORTED_MODULE_0__.Fg)();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[1,1.5,2,2.5,3,3.5,4,4.5,5,5.5,6,7,8].map((function(factor){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{style:{fontSize:theme.spacing(factor),width:"1em",height:"1em",backgroundColor:Number.isInteger(factor)&&factor<=6?"blue":"lightblue",margin:20}},factor)}))})}}}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var VueDefault=getStory({});VueDefault.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:"getStory({})"}},VueDefault.parameters);var __namedExportsOrder=["VueDefault"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/TestSpacing.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/TestSpacing.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Text.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Vue1:()=>Vue1,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_theme__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/stories/theme.ts"),_sectionName__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/getStory.tsx"),tsafe_assert__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tsafe/assert.js");(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_2__.assert)();var _getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_3__.j,wrappedComponent:{Text:_theme__WEBPACK_IMPORTED_MODULE_0__.xv},argTypes:{typo:{options:["display heading","page heading","subtitle","section heading","object heading","label 1","label 2","navigation label","body 1","body 2","caption"],control:{type:"radio"}}}}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var Vue1=getStory({typo:"body 1",children:"Lorem ipsum dolor sit amet"});Vue1.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'getStory({\n    "typo": "body 1",\n    "children": "Lorem ipsum dolor sit amet",\n})'}},Vue1.parameters);var __namedExportsOrder=["Vue1"]},"./src/stories/TextField.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,VuePassword:()=>VuePassword,VueTextArea:()=>VueTextArea,VueWithHint:()=>VueWithHint,VueWithHintAndQuestionMark:()=>VueWithHintAndQuestionMark,VueWithSuggestions:()=>VueWithSuggestions,__namedExportsOrder:()=>__namedExportsOrder,default:()=>TextField_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),react=__webpack_require__("./node_modules/react/index.js"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),TextField=__webpack_require__("./node_modules/@mui/material/TextField/TextField.js"),createForOfIteratorHelper=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/createForOfIteratorHelper.js"),memoizee=__webpack_require__("./node_modules/memoizee/index.js"),getBrowser=__webpack_require__.n(memoizee)()((function(){var _step,userAgent=navigator.userAgent,_iterator=(0,createForOfIteratorHelper.Z)(["chrome","safari","firefox"]);try{for(_iterator.s();!(_step=_iterator.n()).done;){var id=_step.value;if(new RegExp(id,"i").test(userAgent))return id}}catch(err){_iterator.e(err)}finally{_iterator.f()}})),InputAdornment=__webpack_require__("./node_modules/@mui/material/InputAdornment/InputAdornment.js"),IconButton=__webpack_require__("./src/IconButton.tsx"),Icon=__webpack_require__("./src/Icon.tsx"),useEffectOnValueChange=__webpack_require__("./node_modules/powerhooks/useEffectOnValueChange.js"),hooks=__webpack_require__("./node_modules/evt/hooks/index.js"),CircularProgress=__webpack_require__("./node_modules/@mui/material/CircularProgress/CircularProgress.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),CircularProgress_CircularProgress=(0,react.memo)((function(props){var className=props.className,_props$size=props.size,size=void 0===_props$size?40:_props$size,_props$color=props.color,color=void 0===_props$color?"primary":_props$color,_useStyles=useStyles({color}),classes=_useStyles.classes,cx=_useStyles.cx;return(0,jsx_runtime.jsx)(CircularProgress.Z,{color:"textPrimary"===color?void 0:color,className:cx(classes.root,className),size})})),useStyles=ThemeProvider.IR.withName({CircularProgress:CircularProgress_CircularProgress}).withParams().create((function(_ref){var theme=_ref.theme;return{root:{color:"textPrimary"!==_ref.color?void 0:theme.colors.useCases.typography.textPrimary}}}));try{CircularProgress_CircularProgress.displayName="CircularProgress",CircularProgress_CircularProgress.__docgenInfo={description:"",displayName:"CircularProgress",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"number"}},color:{defaultValue:null,description:"",name:"color",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"textPrimary"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/CircularProgress.tsx#CircularProgress"]={docgenInfo:CircularProgress_CircularProgress.__docgenInfo,name:"CircularProgress",path:"src/CircularProgress.tsx#CircularProgress"})}catch(__react_docgen_typescript_loader_error){}var Tooltip=__webpack_require__("./src/Tooltip.tsx"),VisibilityOff=__webpack_require__("./node_modules/@mui/icons-material/VisibilityOff.js"),Visibility=__webpack_require__("./node_modules/@mui/icons-material/Visibility.js"),Help=__webpack_require__("./node_modules/@mui/icons-material/Help.js"),useDomRect=__webpack_require__("./node_modules/powerhooks/useDomRect.js"),assert=__webpack_require__("./node_modules/tsafe/assert.js"),Autocomplete=__webpack_require__("./node_modules/@mui/material/Autocomplete/Autocomplete.js"),useNonPostableEvtLike=__webpack_require__("./src/tools/useNonPostableEvtLike.ts"),_excluded=["transformValueBeingTyped","defaultValue","getIsValidValue","doOnlyValidateInputAfterFistFocusLost","onValueBeingTypedChange","onBlur","evtAction","onSubmit","onEscapeKeyDown","onEnterKeyDown","className","type","isCircularProgressShown","helperText","id","name","selectAllTextOnFocus","isSubmitAllowed","inputProps_ref","inputProps_aria-label","inputProps_tabIndex","inputProps_spellCheck","inputProps_autoFocus","inputProps_aria-invalid","InputProps_endAdornment","questionMarkHelperText","doRenderAsTextArea","rows","doIndentOnTab","options","freeSolo"],TextField_Icon=(0,Icon.I)({visibilityOff:VisibilityOff.Z,visibility:Visibility.Z,help:Help.Z}).Icon,TextField_IconButton=(0,IconButton.k)({Icon:TextField_Icon}).IconButton,TextField_TextField=(0,react.memo)((function(props){var transformValueBeingTyped=props.transformValueBeingTyped,_props$defaultValue=props.defaultValue,defaultValue=void 0===_props$defaultValue?"":_props$defaultValue,getIsValidValue=props.getIsValidValue,_props$doOnlyValidate=props.doOnlyValidateInputAfterFistFocusLost,doOnlyValidateInputAfterFistFocusLost=void 0===_props$doOnlyValidate||_props$doOnlyValidate,onValueBeingTypedChange=props.onValueBeingTypedChange,onBlur=props.onBlur,evtActionLike=props.evtAction,onSubmit=props.onSubmit,onEscapeKeyDown=props.onEscapeKeyDown,onEnterKeyDown=props.onEnterKeyDown,className=props.className,_props$type=props.type,type=void 0===_props$type?"text":_props$type,_props$isCircularProg=props.isCircularProgressShown,isCircularProgressShown=void 0!==_props$isCircularProg&&_props$isCircularProg,helperText=props.helperText,htmlId=props.id,name=props.name,selectAllTextOnFocus=props.selectAllTextOnFocus,_props$isSubmitAllowe=props.isSubmitAllowed,isSubmitAllowed=void 0===_props$isSubmitAllowe||_props$isSubmitAllowe,inputProps_ref=props.inputProps_ref,inputProps_ariaLabel=props["inputProps_aria-label"],inputProps_tabIndex=props.inputProps_tabIndex,inputProps_spellCheck=props.inputProps_spellCheck,inputProps_autoFocus=props.inputProps_autoFocus,inputProps_ariaInvalid=props["inputProps_aria-invalid"],InputProps_endAdornment=props.InputProps_endAdornment,questionMarkHelperText=props.questionMarkHelperText,_props$doRenderAsText=props.doRenderAsTextArea,doRenderAsTextArea=void 0!==_props$doRenderAsText&&_props$doRenderAsText,rows=props.rows,_props$doIndentOnTab=props.doIndentOnTab,doIndentOnTab=void 0!==_props$doIndentOnTab&&_props$doIndentOnTab,options=props.options,_props$freeSolo=props.freeSolo,freeSolo=void 0!==_props$freeSolo&&_props$freeSolo,completedPropsRest=(0,objectWithoutProperties.Z)(props,_excluded),evtAction=(0,useNonPostableEvtLike._)(evtActionLike),_useClosure=function useClosure(){var _useState=(0,react.useState)(defaultValue),_useState2=(0,slicedToArray.Z)(_useState,2),value=_useState2[0],setValue=_useState2[1],transformAndSetValue=(0,useConstCallback.useConstCallback)((function(value){var _transformValueBeingT;isValidationEnabled||doOnlyValidateInputAfterFistFocusLost||enableValidation(),setValue(null!==(_transformValueBeingT=null==transformValueBeingTyped?void 0:transformValueBeingTyped(value))&&void 0!==_transformValueBeingT?_transformValueBeingT:value)}));return{value,transformAndSetValue}}(),value=_useClosure.value,transformAndSetValue=_useClosure.transformAndSetValue;(0,useEffectOnValueChange.useEffectOnValueChange)((function(){return transformAndSetValue(defaultValue)}),[defaultValue]);var getIsValidValueResult=(0,react.useMemo)((function(){var _getIsValidValue;return null!==(_getIsValidValue=null==getIsValidValue?void 0:getIsValidValue(value))&&void 0!==_getIsValidValue?_getIsValidValue:{isValidValue:!0}}),[value,null!=getIsValidValue?getIsValidValue:Object]);(0,react.useEffect)((function(){null==onValueBeingTypedChange||onValueBeingTypedChange((0,objectSpread2.Z)({value},getIsValidValueResult))}),[value,getIsValidValueResult.isValidValue,getIsValidValueResult.isValidValue?Object:getIsValidValueResult.message]);var _useReducer=(0,react.useReducer)((function(){return!0}),!1),_useReducer2=(0,slicedToArray.Z)(_useReducer,2),isValidationEnabled=_useReducer2[0],enableValidation=_useReducer2[1];(0,hooks.useEvt)((function(ctx){return null==evtAction?void 0:evtAction.attach(ctx,(function(action){switch(action){case"RESTORE DEFAULT VALUE":return void transformAndSetValue(defaultValue);case"TRIGGER SUBMIT":if(!getIsValidValueResult.isValidValue||!isSubmitAllowed)return;return void(null==onSubmit||onSubmit(value))}}))}),[defaultValue,value,getIsValidValueResult,null!=onSubmit?onSubmit:Object,null!=evtAction?evtAction:Object,transformAndSetValue,isSubmitAllowed]);var hasError=null!=inputProps_ariaInvalid?inputProps_ariaInvalid:!!isValidationEnabled&&!getIsValidValueResult.isValidValue,_useDomRect=(0,useDomRect.useDomRect)(),rootHeight=_useDomRect.domRect.height,ref=_useDomRect.ref,_useStyles=TextField_useStyles({hasError,rootHeight}),classes=_useStyles.classes,cx=_useStyles.cx,_useReducer3=(0,react.useReducer)((function(v){return!v}),!1),_useReducer4=(0,slicedToArray.Z)(_useReducer3,2),isPasswordShown=_useReducer4[0],toggleIsPasswordShown=_useReducer4[1],onKeyDown=(0,useConstCallback.useConstCallback)((function(event){var key=function(){switch(event.key){case"Tab":return doIndentOnTab?event.key:"irrelevant";case"Escape":case"Enter":return event.key;default:return"irrelevant"}}();if("irrelevant"!==key){var preventDefaultAndStopPropagation=function preventDefaultAndStopPropagation(){event.preventDefault(),event.stopPropagation()};switch(key){case"Escape":return void(null==onEscapeKeyDown||onEscapeKeyDown({preventDefaultAndStopPropagation}));case"Enter":return void(null==onEnterKeyDown||onEnterKeyDown({preventDefaultAndStopPropagation}));case"Tab":return document.execCommand("insertText",!1,"    "),void preventDefaultAndStopPropagation()}(0,assert.assert)()}})),InputProps=(0,react.useMemo)((function(){return{endAdornment:(null!=InputProps_endAdornment?InputProps_endAdornment:isCircularProgressShown)?(0,jsx_runtime.jsx)(InputAdornment.Z,{position:"end",children:(0,jsx_runtime.jsx)(CircularProgress_CircularProgress,{color:"textPrimary",size:10})}):"password"===type?(0,jsx_runtime.jsx)(InputAdornment.Z,{position:"end",children:(0,jsx_runtime.jsx)(TextField_IconButton,{iconId:isPasswordShown?"visibilityOff":"visibility",onClick:toggleIsPasswordShown})}):void 0}}),[isPasswordShown,type,InputProps_endAdornment,isCircularProgressShown]),inputProps=(0,react.useMemo)((function(){return(0,objectSpread2.Z)({ref:inputProps_ref,"aria-label":inputProps_ariaLabel,tabIndex:inputProps_tabIndex,spellCheck:inputProps_spellCheck,autoFocus:inputProps_autoFocus},void 0!==inputProps_ariaInvalid?{"aria-invalid":inputProps_ariaInvalid}:hasError?{"aria-invalid":!0}:{})}),[null!=inputProps_ref?inputProps_ref:Object,null!=inputProps_ariaLabel?inputProps_ariaLabel:Object,null!=inputProps_tabIndex?inputProps_tabIndex:Object,null!=inputProps_spellCheck?inputProps_spellCheck:Object,null!=inputProps_autoFocus?inputProps_autoFocus:Object,null!=inputProps_ariaInvalid?inputProps_ariaInvalid:Object,hasError]),onMuiTextfieldBlur=(0,useConstCallback.useConstCallback)((function(){isValidationEnabled||enableValidation(),null==onBlur||onBlur()})),onFocus=(0,useConstCallback.useConstCallback)((function(_ref){var target=_ref.target;selectAllTextOnFocus&&target.setSelectionRange(0,target.value.length)})),onInputChange=(0,useConstCallback.useConstCallback)((function(_,value){return transformAndSetValue(value)})),onChange=(0,useConstCallback.useConstCallback)((function(_ref2){var target=_ref2.target;return transformAndSetValue(target.value)})),helperTextNode=(0,jsx_runtime.jsxs)(TextBase.x,{className:classes.helperText,typo:"caption",htmlComponent:"span",children:[isValidationEnabled&&!getIsValidValueResult.isValidValue&&getIsValidValueResult.message||helperText," ",void 0!==questionMarkHelperText&&(0,jsx_runtime.jsx)(Tooltip.u,{title:questionMarkHelperText,children:(0,jsx_runtime.jsx)(TextField_Icon,{iconId:"help",className:classes.questionMark})})]});return void 0!==options?((0,assert.assert)("text"===type),(0,jsx_runtime.jsx)(Autocomplete.Z,{freeSolo,className:cx(classes.muiAutocomplete,className),inputValue:value,onInputChange,options,id:htmlId,renderInput:function renderInput(params){return(0,jsx_runtime.jsx)(TextField.Z,(0,objectSpread2.Z)((0,objectSpread2.Z)({},params),{},{className:classes.muiTextField,multiline:doRenderAsTextArea,ref,variant:"standard",error:hasError,helperText:helperTextNode,InputProps:(0,objectSpread2.Z)((0,objectSpread2.Z)({},params.InputProps),InputProps),onBlur:onMuiTextfieldBlur,onKeyDown,onFocus,name,inputProps:(0,objectSpread2.Z)((0,objectSpread2.Z)({},inputProps),params.inputProps)},completedPropsRest))}})):(0,jsx_runtime.jsx)(TextField.Z,(0,objectSpread2.Z)({className:cx(classes.muiTextField,className),multiline:doRenderAsTextArea,rows:doRenderAsTextArea?rows:void 0,ref,variant:"standard",type:"password"!==type?type:isPasswordShown?"text":"password",value,error:hasError,helperText:helperTextNode,InputProps,onBlur:onMuiTextfieldBlur,onChange,onKeyDown,onFocus,id:htmlId,name,inputProps},completedPropsRest))})),TextField_useStyles=ThemeProvider.IR.withParams().withName({TextField:TextField_TextField}).create((function(_ref3){var theme=_ref3.theme,hasError=_ref3.hasError,rootHeight=_ref3.rootHeight;return{muiAutocomplete:{minWidth:145},muiTextField:{"& .MuiFormHelperText-root":{position:"absolute",top:rootHeight,visibility:0===rootHeight?"hidden":void 0},"& .MuiFormLabel-root":{color:hasError?theme.colors.useCases.alertSeverity.error.main:theme.colors.useCases.typography.textSecondary},"&:focus":{outline:"unset"},"& input:-webkit-autofill":(0,objectSpread2.Z)({},function(){switch(getBrowser()){case"chrome":case"safari":return{WebkitTextFillColor:theme.colors.useCases.typography[theme.isDarkModeEnabled?"textPrimary":"textSecondary"],WebkitBoxShadow:"0 0 0 1000px ".concat(theme.colors.useCases.surfaces.surface1," inset")};default:return{}}}()),"& .MuiInput-underline:hover:not(.Mui-disabled):before":{borderBottomWidth:1},"& .MuiInput-underline:after":{borderBottomWidth:1}},helperText:{color:hasError?theme.colors.useCases.alertSeverity.error.main:theme.colors.useCases.typography.textDisabled,whiteSpace:"nowrap"},questionMark:(0,objectSpread2.Z)({fontSize:"inherit"},{width:"".concat(1.5,"em"),height:"".concat(1.5,"em")})}}));try{TextField_TextField.displayName="TextField",TextField_TextField.__docgenInfo={description:"",displayName:"TextField",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"string"}},type:{defaultValue:null,description:"Default text",name:"type",required:!1,type:{name:"enum",value:[{value:'"text"'},{value:'"email"'},{value:'"password"'}]}},defaultValue:{defaultValue:null,description:"Will overwrite value when updated",name:"defaultValue",required:!1,type:{name:"string"}},inputProps_ref:{defaultValue:null,description:"",name:"inputProps_ref",required:!1,type:{name:"RefObject<HTMLInputElement>"}},"inputProps_aria-label":{defaultValue:null,description:"",name:"inputProps_aria-label",required:!1,type:{name:"string"}},inputProps_tabIndex:{defaultValue:null,description:"",name:"inputProps_tabIndex",required:!1,type:{name:"number"}},inputProps_spellCheck:{defaultValue:null,description:"",name:"inputProps_spellCheck",required:!1,type:{name:"boolean"}},inputProps_autoFocus:{defaultValue:null,description:"",name:"inputProps_autoFocus",required:!1,type:{name:"boolean"}},doIndentOnTab:{defaultValue:null,description:"",name:"doIndentOnTab",required:!1,type:{name:"boolean"}},"inputProps_aria-invalid":{defaultValue:null,description:"If true, it sets the helper text in red.\nWill be set automatically if getIsValidValue is provided",name:"inputProps_aria-invalid",required:!1,type:{name:"boolean"}},InputProps_endAdornment:{defaultValue:null,description:"",name:"InputProps_endAdornment",required:!1,type:{name:"ReactNode"}},disabled:{defaultValue:null,description:"Only use when getIsValidValue isn't used",name:"disabled",required:!1,type:{name:"boolean"}},onEscapeKeyDown:{defaultValue:null,description:"Return false to e.preventDefault() and e.stopPropagation()",name:"onEscapeKeyDown",required:!1,type:{name:"((params: { preventDefaultAndStopPropagation(): void; }) => void)"}},onEnterKeyDown:{defaultValue:null,description:"",name:"onEnterKeyDown",required:!1,type:{name:"((params: { preventDefaultAndStopPropagation(): void; }) => void)"}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"(() => void)"}},isSubmitAllowed:{defaultValue:null,description:"To prevent onSubmit to be invoked (when data is being updated for example ) default true",name:"isSubmitAllowed",required:!1,type:{name:"boolean"}},evtAction:{defaultValue:null,description:"",name:"evtAction",required:!1,type:{name:'NonPostableEvtLike<"TRIGGER SUBMIT" | "RESTORE DEFAULT VALUE">'}},onSubmit:{defaultValue:null,description:'Submit invoked on evtAction.post("TRIGGER SUBMIT") only if value being typed is valid',name:"onSubmit",required:!1,type:{name:"((value: string) => void)"}},getIsValidValue:{defaultValue:null,description:"",name:"getIsValidValue",required:!1,type:{name:"((value: string) => { isValidValue: true; } | { isValidValue: false; message: ReactNode; })"}},onValueBeingTypedChange:{defaultValue:null,description:"Invoked on first render,\ncalled again if getIsValidValue have been updated and\nthe validity of the current value changes.",name:"onValueBeingTypedChange",required:!1,type:{name:"((params: { value: string; } & ({ isValidValue: true; } | { isValidValue: false; message: ReactNode; })) => void)"}},transformValueBeingTyped:{defaultValue:null,description:"",name:"transformValueBeingTyped",required:!1,type:{name:"((value: string) => string)"}},label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"ReactNode"}},helperText:{defaultValue:null,description:"",name:"helperText",required:!1,type:{name:"ReactNode"}},questionMarkHelperText:{defaultValue:null,description:"",name:"questionMarkHelperText",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal"}},doOnlyValidateInputAfterFistFocusLost:{defaultValue:null,description:"",name:"doOnlyValidateInputAfterFistFocusLost",required:!1,type:{name:"boolean"}},isCircularProgressShown:{defaultValue:null,description:"Default false",name:"isCircularProgressShown",required:!1,type:{name:"boolean"}},selectAllTextOnFocus:{defaultValue:null,description:"",name:"selectAllTextOnFocus",required:!1,type:{name:"boolean"}},doRenderAsTextArea:{defaultValue:null,description:"Default false",name:"doRenderAsTextArea",required:!1,type:{name:"boolean"}},rows:{defaultValue:null,description:"Only applies if doRenderAsTextArea is true",name:"rows",required:!1,type:{name:"number"}},options:{defaultValue:null,description:"NOTE: If length 0 it's assumed loading",name:"options",required:!1,type:{name:"string[]"}},freeSolo:{defaultValue:null,description:"",name:"freeSolo",required:!1,type:{name:"boolean"}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"name"'},{value:'"on"'},{value:'"off"'},{value:'"tel"'},{value:'"url"'},{value:'"email"'},{value:'"language"'},{value:'"honorific-prefix"'},{value:'"given-name"'},{value:'"additional-name"'},{value:'"family-name"'},{value:'"honorific-suffix"'},{value:'"nickname"'},{value:'"username"'},{value:'"new-password"'},{value:'"current-password"'},{value:'"one-time-code"'},{value:'"organization-title"'},{value:'"organization"'},{value:'"street-address"'},{value:'"address-line1"'},{value:'"address-line2"'},{value:'"address-line3"'},{value:'"address-level4"'},{value:'"address-level3"'},{value:'"address-level2"'},{value:'"address-level1"'},{value:'"country"'},{value:'"country-name"'},{value:'"postal-code"'},{value:'"cc-name"'},{value:'"cc-given-name"'},{value:'"cc-additional-name"'},{value:'"cc-family-name"'},{value:'"cc-number"'},{value:'"cc-exp"'},{value:'"cc-exp-month"'},{value:'"cc-exp-year"'},{value:'"cc-csc"'},{value:'"cc-type"'},{value:'"transaction-currency"'},{value:'"transaction-amount"'},{value:'"bday"'},{value:'"bday-day"'},{value:'"bday-month"'},{value:'"bday-year"'},{value:'"sex"'},{value:'"tel-country-code"'},{value:'"tel-national"'},{value:'"tel-area-code"'},{value:'"tel-local"'},{value:'"tel-extension"'},{value:'"impp"'},{value:'"photo"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/TextField.tsx#TextField"]={docgenInfo:TextField_TextField.__docgenInfo,name:"TextField",path:"src/TextField.tsx#TextField"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),_getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:{TextField:TextField_TextField},argTypes:{"inputProps_aria-invalid":{control:{type:"boolean"}}}}),meta=_getStoryFactory.meta,TextField_stories_getStory=_getStoryFactory.getStory;const TextField_stories=meta;var VueDefault=TextField_stories_getStory((0,objectSpread2.Z)({defaultValue:"","inputProps_aria-label":"the aria label",label:"This is the label",getIsValidValue:function getIsValidValue(value){return console.log("getIsValidValue invoked: ",value),value.includes(" ")?{isValidValue:!1,message:"Can't include spaces"}:{isValidValue:!0}},transformValueBeingTyped:function transformValueBeingTyped(value){return console.log("transformValueBeingTyped invoked: ",value),value}},(0,getStory.K)(["onEscapeKeyDown","onEnterKeyDown","onBlur","onSubmit","onValueBeingTypedChange"]))),VuePassword=TextField_stories_getStory((0,objectSpread2.Z)({defaultValue:"","inputProps_aria-label":"password",label:"Password",type:"password",getIsValidValue:function getIsValidValue(value){return console.log("getIsValidValue invoked: ",value),value.includes(" ")?{isValidValue:!1,message:"Can't include spaces"}:{isValidValue:!0}},transformValueBeingTyped:function transformValueBeingTyped(value){return console.log("transformValueBeingTyped invoked: ",value),value}},(0,getStory.K)(["onEscapeKeyDown","onEnterKeyDown","onBlur","onSubmit","onValueBeingTypedChange"]))),VueWithHint=TextField_stories_getStory((0,objectSpread2.Z)({helperText:"This is an helper text",defaultValue:"","inputProps_aria-label":"input with hint",label:"Foo bar",type:"text",getIsValidValue:function getIsValidValue(value){return console.log("getIsValidValue invoked: ",value),value.includes(" ")?{isValidValue:!1,message:"Can't include spaces"}:{isValidValue:!0}},transformValueBeingTyped:function transformValueBeingTyped(value){return console.log("transformValueBeingTyped invoked: ",value),value}},(0,getStory.K)(["onEscapeKeyDown","onEnterKeyDown","onBlur","onSubmit","onValueBeingTypedChange"]))),VueWithHintAndQuestionMark=TextField_stories_getStory((0,objectSpread2.Z)({helperText:"This is an helper text",questionMarkHelperText:"This is an extra helper text",defaultValue:"","inputProps_aria-label":"input with hint",label:"Foo bar",type:"text",getIsValidValue:function getIsValidValue(value){return console.log("getIsValidValue invoked: ",value),value.includes(" ")?{isValidValue:!1,message:"Can't include spaces"}:{isValidValue:!0}},transformValueBeingTyped:function transformValueBeingTyped(value){return console.log("transformValueBeingTyped invoked: ",value),value}},(0,getStory.K)(["onEscapeKeyDown","onEnterKeyDown","onBlur","onSubmit","onValueBeingTypedChange"]))),VueTextArea=TextField_stories_getStory((0,objectSpread2.Z)({multiline:!0,defaultValue:"First line\nSecond line","inputProps_aria-label":"the aria label",label:"This is the label",getIsValidValue:function getIsValidValue(value){return console.log("getIsValidValue invoked: ",value),value.includes(" ")?{isValidValue:!1,message:"Can't include spaces"}:{isValidValue:!0}},transformValueBeingTyped:function transformValueBeingTyped(value){return console.log("transformValueBeingTyped invoked: ",value),value}},(0,getStory.K)(["onEscapeKeyDown","onEnterKeyDown","onBlur","onSubmit","onValueBeingTypedChange"]))),VueWithSuggestions=TextField_stories_getStory((0,objectSpread2.Z)({defaultValue:"",freeSolo:!0,"inputProps_aria-label":"the aria label",label:"This is the label",getIsValidValue:function getIsValidValue(value){return console.log("getIsValidValue invoked: ",value),value.includes(" ")?{isValidValue:!1,message:"Can't include spaces"}:{isValidValue:!0}},transformValueBeingTyped:function transformValueBeingTyped(value){return console.log("transformValueBeingTyped invoked: ",value),value},options:["first","second","third"]},(0,getStory.K)(["onEscapeKeyDown","onEnterKeyDown","onBlur","onSubmit","onValueBeingTypedChange"])));VueDefault.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "defaultValue": "",\n    "inputProps_aria-label": "the aria label",\n    "label": "This is the label",\n    "getIsValidValue": value => {\n        console.log("getIsValidValue invoked: ", value);\n\n        if (value.includes(" ")) {\n            return { "isValidValue": false, "message": "Can\'t include spaces" };\n        }\n\n        return { "isValidValue": true };\n    },\n    "transformValueBeingTyped": value => {\n        console.log("transformValueBeingTyped invoked: ", value);\n        return value;\n    },\n    ...logCallbacks([\n        "onEscapeKeyDown",\n        "onEnterKeyDown",\n        "onBlur",\n        "onSubmit",\n        "onValueBeingTypedChange",\n    ]),\n})'}},VueDefault.parameters),VuePassword.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "defaultValue": "",\n    "inputProps_aria-label": "password",\n    "label": "Password",\n    "type": "password",\n    "getIsValidValue": value => {\n        console.log("getIsValidValue invoked: ", value);\n\n        if (value.includes(" ")) {\n            return { "isValidValue": false, "message": "Can\'t include spaces" };\n        }\n\n        return { "isValidValue": true };\n    },\n    "transformValueBeingTyped": value => {\n        console.log("transformValueBeingTyped invoked: ", value);\n        return value;\n    },\n    ...logCallbacks([\n        "onEscapeKeyDown",\n        "onEnterKeyDown",\n        "onBlur",\n        "onSubmit",\n        "onValueBeingTypedChange",\n    ]),\n})'}},VuePassword.parameters),VueWithHint.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "helperText": "This is an helper text",\n    "defaultValue": "",\n    "inputProps_aria-label": "input with hint",\n    "label": "Foo bar",\n    "type": "text",\n    "getIsValidValue": value => {\n        console.log("getIsValidValue invoked: ", value);\n\n        if (value.includes(" ")) {\n            return { "isValidValue": false, "message": "Can\'t include spaces" };\n        }\n\n        return { "isValidValue": true };\n    },\n    "transformValueBeingTyped": value => {\n        console.log("transformValueBeingTyped invoked: ", value);\n        return value;\n    },\n    ...logCallbacks([\n        "onEscapeKeyDown",\n        "onEnterKeyDown",\n        "onBlur",\n        "onSubmit",\n        "onValueBeingTypedChange",\n    ]),\n})'}},VueWithHint.parameters),VueWithHintAndQuestionMark.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "helperText": "This is an helper text",\n    "questionMarkHelperText": "This is an extra helper text",\n    "defaultValue": "",\n    "inputProps_aria-label": "input with hint",\n    "label": "Foo bar",\n    "type": "text",\n    "getIsValidValue": value => {\n        console.log("getIsValidValue invoked: ", value);\n\n        if (value.includes(" ")) {\n            return { "isValidValue": false, "message": "Can\'t include spaces" };\n        }\n\n        return { "isValidValue": true };\n    },\n    "transformValueBeingTyped": value => {\n        console.log("transformValueBeingTyped invoked: ", value);\n        return value;\n    },\n    ...logCallbacks([\n        "onEscapeKeyDown",\n        "onEnterKeyDown",\n        "onBlur",\n        "onSubmit",\n        "onValueBeingTypedChange",\n    ]),\n})'}},VueWithHintAndQuestionMark.parameters),VueTextArea.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "multiline": true,\n    "defaultValue": "First line\\nSecond line",\n    "inputProps_aria-label": "the aria label",\n    "label": "This is the label",\n    "getIsValidValue": value => {\n        console.log("getIsValidValue invoked: ", value);\n\n        if (value.includes(" ")) {\n            return { "isValidValue": false, "message": "Can\'t include spaces" };\n        }\n\n        return { "isValidValue": true };\n    },\n    "transformValueBeingTyped": value => {\n        console.log("transformValueBeingTyped invoked: ", value);\n        return value;\n    },\n    ...logCallbacks([\n        "onEscapeKeyDown",\n        "onEnterKeyDown",\n        "onBlur",\n        "onSubmit",\n        "onValueBeingTypedChange",\n    ]),\n})'}},VueTextArea.parameters),VueWithSuggestions.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "defaultValue": "",\n    "freeSolo": true,\n    "inputProps_aria-label": "the aria label",\n    "label": "This is the label",\n    "getIsValidValue": value => {\n        console.log("getIsValidValue invoked: ", value);\n\n        if (value.includes(" ")) {\n            return { "isValidValue": false, "message": "Can\'t include spaces" };\n        }\n\n        return { "isValidValue": true };\n    },\n    "transformValueBeingTyped": value => {\n        console.log("transformValueBeingTyped invoked: ", value);\n        return value;\n    },\n    "options": ["first", "second", "third"],\n    ...logCallbacks([\n        "onEscapeKeyDown",\n        "onEnterKeyDown",\n        "onBlur",\n        "onSubmit",\n        "onValueBeingTypedChange",\n    ]),\n})'}},VueWithSuggestions.parameters);var __namedExportsOrder=["VueDefault","VuePassword","VueWithHint","VueWithHintAndQuestionMark","VueTextArea","VueWithSuggestions"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/TextField.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/TextField.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Tooltip.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Vue1:()=>Vue1,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_Tooltip__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/Tooltip.tsx"),_theme__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/theme.ts"),_sectionName__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/stories/getStory.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_2__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_4__.j,wrappedComponent:{Tooltip:_Tooltip__WEBPACK_IMPORTED_MODULE_0__.u}}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var Vue1=getStory({children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_theme__WEBPACK_IMPORTED_MODULE_1__.JO,{iconId:"help"}),title:"This is the title"});Vue1.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({storySource:{source:'getStory({\n    "children": <Icon iconId="help" />,\n    "title": "This is the title",\n})'}},Vue1.parameters);var __namedExportsOrder=["Vue1"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Tooltip.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Tooltip.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./.storybook/preview.js-generated-config-entry.js":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{"use strict";var preview_namespaceObject={};__webpack_require__.r(preview_namespaceObject),__webpack_require__.d(preview_namespaceObject,{__namedExportsOrder:()=>preview_namedExportsOrder,parameters:()=>parameters});var ClientApi=__webpack_require__("./node_modules/@storybook/client-api/dist/esm/ClientApi.js"),esm=__webpack_require__("./node_modules/@storybook/theming/dist/esm/index.js"),darkTheme=(0,esm.create)({base:"dark",appBg:"#2c323f",appContentBg:"#2c323f",barBg:"#2c323f",colorSecondary:"#ff562c",textColor:"#f1f0eb",brandImage:"/onyxiaLogo.png",brandTitle:"Onyxia UI",brandUrl:"https://github.com/garronej/onyxia-ui",fontBase:'"Work Sans","Open Sans", sans-serif',fontCode:"monospace"}),lightTheme=(0,esm.create)({base:"light",appBg:"#f1f0eb",appContentBg:"#f1f0eb",barBg:"#f1f0eb",colorSecondary:"#ff562c",textColor:"#2c323f",textInverseColor:"#f1f0eb",brandImage:"/onyxiaLogo.png",brandTitle:"Onyxia UI",brandUrl:"https://github.com/garronej/onyxia-ui",fontBase:'"Work Sans","Open Sans", sans-serif',fontCode:"monospace"}),objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),blocks=(__webpack_require__("./node_modules/react/index.js"),__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js")),dist=__webpack_require__("./node_modules/storybook-dark-mode/dist/index.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),DocsContainer=function DocsContainer(_ref){var children=_ref.children,context=_ref.context,dark=(0,dist.useDarkMode)();return(0,jsx_runtime.jsx)(blocks.Zu,{context:(0,objectSpread2.Z)((0,objectSpread2.Z)({},context),{},{storyById:function storyById(id){var _storyContext$paramet,storyContext=context.storyById(id);return(0,objectSpread2.Z)((0,objectSpread2.Z)({},storyContext),{},{parameters:(0,objectSpread2.Z)((0,objectSpread2.Z)({},null==storyContext?void 0:storyContext.parameters),{},{docs:(0,objectSpread2.Z)((0,objectSpread2.Z)({},null==storyContext||null===(_storyContext$paramet=storyContext.parameters)||void 0===_storyContext$paramet?void 0:_storyContext$paramet.docs),{},{theme:dark?darkTheme:lightTheme})})})}}),children})};DocsContainer.__docgenInfo={description:"",methods:[],displayName:"DocsContainer"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES[".storybook/DocsContainer.js"]={name:"DocsContainer",docgenInfo:DocsContainer.__docgenInfo,path:".storybook/DocsContainer.js"});var mainServices,parameters={actions:{argTypesRegex:"^on[A-Z].*"},controls:{matchers:{color:/(background|color)$/i,date:/Date$/}},darkMode:{light:lightTheme,dark:darkTheme},docs:{container:DocsContainer},viewport:{viewports:{"1440p":{name:"1440p",styles:{width:"2560px",height:"1440px"}},fullHD:{name:"Full HD",styles:{width:"1920px",height:"1080px"}},macBookProBig:{name:"MacBook Pro Big",styles:{width:"1024px",height:"640px"}},macBookProMedium:{name:"MacBook Pro Medium",styles:{width:"1440px",height:"900px"}},macBookProSmall:{name:"MacBook Pro Small",styles:{width:"1680px",height:"1050px"}},pcINSEE:{name:"PC Agent INSEE",styles:{width:"960px",height:"540px"}},verySmallLandscape:{name:"Very small landscape",styles:{width:"599px",height:"337px"}}}},options:{storySort:function storySort(a,b){return getHardCodedWeight(b[1].kind)-getHardCodedWeight(a[1].kind)}}},getHardCodedWeight=(mainServices=["documentation/Fundamentals/Colors","documentation/Components/Button","documentation/Components/Alert"],{getHardCodedWeight:function getHardCodedWeight(kind){for(var i=0;i<mainServices.length;i++)if(kind.toLowerCase().includes(mainServices[i].toLowerCase()))return mainServices.length-i;return 0}}).getHardCodedWeight,preview_namedExportsOrder=["parameters"];function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.keys(preview_namespaceObject).forEach((function(key){var value=preview_namespaceObject[key];switch(key){case"args":return(0,ClientApi.uc)(value);case"argTypes":return(0,ClientApi.v9)(value);case"decorators":return value.forEach((function(decorator){return(0,ClientApi.$9)(decorator,!1)}));case"loaders":return value.forEach((function(loader){return(0,ClientApi.HZ)(loader,!1)}));case"parameters":return(0,ClientApi.h1)(function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach((function(key){_defineProperty(target,key,source[key])})):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach((function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}))}return target}({},value),!1);case"argTypesEnhancers":return value.forEach((function(enhancer){return(0,ClientApi.My)(enhancer)}));case"argsEnhancers":return value.forEach((function(enhancer){return(0,ClientApi._C)(enhancer)}));case"render":return(0,ClientApi.$P)(value);case"globals":case"globalTypes":var v={};return v[key]=value,(0,ClientApi.h1)(v,!1);case"__namedExportsOrder":case"decorateStory":case"renderToDOM":return null;default:return console.log(key+" was not supported :( !")}}))},"./src/Alert.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{b:()=>Alert});var AlertProps,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_Icon__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/Icon.tsx"),_IconButton__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/IconButton.tsx"),_mui_material_Alert__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/@mui/material/Alert/Alert.js"),_Text_TextBase__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/Text/TextBase.ts"),_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/lib/ThemeProvider.tsx"),_mui_icons_material_CloseSharp__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@mui/icons-material/CloseSharp.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["severity","children","className"];AlertProps||(AlertProps={});var IconButton=(0,_IconButton__WEBPACK_IMPORTED_MODULE_2__.k)((0,_Icon__WEBPACK_IMPORTED_MODULE_1__.I)({closeSharp:_mui_icons_material_CloseSharp__WEBPACK_IMPORTED_MODULE_6__.Z})).IconButton,Alert=(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)((function(props){var severity=props.severity,children=props.children,className=props.className,rest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_7__.Z)(props,_excluded),_useStyles=useStyles({severity,classesOverrides:props.classes}),classes=_useStyles.classes,cx=_useStyles.cx,_useClosure=function useClosure(){var _useReducer=(0,react__WEBPACK_IMPORTED_MODULE_0__.useReducer)((function(){return!0}),!1),_useReducer2=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_8__.Z)(_useReducer,2),isClosed=_useReducer2[0],uncontrolledClose=_useReducer2[1];return{isClosed:"isClosed"in rest?rest.isClosed:isClosed,uncontrolledClose}}(),isClosed=_useClosure.isClosed,uncontrolledClose=_useClosure.uncontrolledClose;return isClosed?null:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_mui_material_Alert__WEBPACK_IMPORTED_MODULE_9__.Z,{className:cx(classes.root,className),severity,classes:{action:classes.action,icon:classes.icon},action:"doDisplayCross"in rest&&rest.doDisplayCross&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(IconButton,{iconId:"closeSharp","aria-label":"close",onClick:"isClosed"in rest?rest.onClose:function(){var _rest$onClose;null===(_rest$onClose=rest.onClose)||void 0===_rest$onClose||_rest$onClose.call(rest),uncontrolledClose()}}),children:"string"==typeof children?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Text_TextBase__WEBPACK_IMPORTED_MODULE_3__.x,{typo:"label 2",children}):children})})),useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_4__.IR.withName({Alert}).withParams().create((function(_ref){var theme=_ref.theme,severity=_ref.severity;return{root:{alignItems:"center",color:theme.colors.useCases.typography.textPrimary,backgroundColor:theme.colors.useCases.alertSeverity[severity].background},icon:{"& svg":{color:theme.colors.useCases.alertSeverity[severity].main}},action:{alignItems:"center",padding:0}}}));try{Alert.displayName="Alert",Alert.__docgenInfo={description:"",displayName:"Alert",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},classes:{defaultValue:null,description:"",name:"classes",required:!1,type:{name:'Partial<Record<"icon" | "action" | "root", string>>'}},severity:{defaultValue:null,description:"",name:"severity",required:!0,type:{name:"enum",value:[{value:'"error"'},{value:'"info"'},{value:'"success"'},{value:'"warning"'}]}},doDisplayCross:{defaultValue:null,description:"",name:"doDisplayCross",required:!0,type:{name:"true"}},isClosed:{defaultValue:null,description:"",name:"isClosed",required:!0,type:{name:"boolean"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!1,type:{name:"(() => void) | (() => void)"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Alert.tsx#Alert"]={docgenInfo:Alert.__docgenInfo,name:"Alert",path:"src/Alert.tsx#Alert"})}catch(__react_docgen_typescript_loader_error){}},"./src/Button.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{a:()=>createButton});var ButtonProps,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/lib/ThemeProvider.tsx"),tsafe_id__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tsafe/id.js"),powerhooks_useGuaranteedMemo__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/powerhooks/useGuaranteedMemo.js"),_mui_material_Button__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/@mui/material/Button/Button.js"),tsafe_capitalize__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/tsafe/capitalize.js"),tsafe__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/tsafe/index.js"),_lib__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./src/lib/index.ts"),_lib_typography__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./src/lib/typography.ts"),_tools_pxToNumber__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./src/tools/pxToNumber.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","variant","disabled","children","startIcon","endIcon","autoFocus","tabIndex","name","htmlId","aria-label"],_excluded2=["type"],_excluded3=["onClick","href","doOpenNewTabIfHref"];function createButton(params){var Icon=(null!=params?params:{Icon:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_2__.id)((function(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.Fragment,{})}))}).Icon,Button=(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)((0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((function(props,ref){var className=props.className,_props$variant=props.variant,variant=void 0===_props$variant?"primary":_props$variant,_props$disabled=props.disabled,disabled=void 0!==_props$disabled&&_props$disabled,children=props.children,startIcon=props.startIcon,endIcon=props.endIcon,_props$autoFocus=props.autoFocus,autoFocus=void 0!==_props$autoFocus&&_props$autoFocus,tabIndex=props.tabIndex,name=props.name,htmlId=props.htmlId,ariaLabel=props["aria-label"],rest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_9__.Z)(props,_excluded),_useStyles=useStyles({variant,disabled}),classes=_useStyles.classes,cx=_useStyles.cx,IconWd=(0,powerhooks_useGuaranteedMemo__WEBPACK_IMPORTED_MODULE_3__.useGuaranteedMemo)((function(){return function(props){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(Icon,{iconId:props.iconId,className:classes.icon,size:"default"})}}),[disabled,classes.icon]);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_mui_material_Button__WEBPACK_IMPORTED_MODULE_10__.Z,(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)({disableFocusRipple:!0,ref,className:cx(classes.root,className),disabled,startIcon:void 0===startIcon?void 0:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(IconWd,{iconId:startIcon}),endIcon:void 0===endIcon?void 0:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(IconWd,{iconId:endIcon}),autoFocus,tabIndex,name,id:htmlId,"aria-label":ariaLabel},function(){if("type"in rest){var type=rest.type,_restRest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_9__.Z)(rest,_excluded2);return(0,tsafe__WEBPACK_IMPORTED_MODULE_5__.assert)(),(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)({type},_restRest)}var onClick=rest.onClick,href=rest.href,_rest$doOpenNewTabIfH=rest.doOpenNewTabIfHref,doOpenNewTabIfHref=void 0===_rest$doOpenNewTabIfH?void 0!==href:_rest$doOpenNewTabIfH,restRest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_9__.Z)(rest,_excluded3);return(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)({onClick,href,target:doOpenNewTabIfHref?"_blank":void 0},restRest)}()),{},{children:"string"==typeof children?(0,tsafe_capitalize__WEBPACK_IMPORTED_MODULE_4__.capitalize)(children):children}))}))),useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__.IR.withName({Button}).withParams().create((function(_ref2){var hoverBackgroundColor,borderWidth,approxHeight,theme=_ref2.theme,variant=_ref2.variant,disabled=_ref2.disabled,textColor=theme.colors.useCases.typography[disabled?"textDisabled":function(){switch(variant){case"primary":return"textFocus";case"secondary":case"ternary":return"textPrimary"}}()],hoverTextColor=function(){switch(theme.isDarkModeEnabled){case!0:return"ternary"===variant?theme.colors.useCases.surfaces.background:theme.colors.palette.dark.main;case!1:switch(variant){case"primary":return theme.colors.palette.dark.main;case"secondary":return theme.colors.palette.light.main;case"ternary":return theme.colors.useCases.surfaces.background}}}();return{root:(hoverBackgroundColor=theme.colors.useCases.buttons[function(){switch(variant){case"primary":return"actionHoverPrimary";case"secondary":case"ternary":return"actionHoverSecondary"}}()],borderWidth=function(){switch(variant){case"primary":case"secondary":return 2;case"ternary":return 0}}(),approxHeight=2*theme.spacing(2)+2*borderWidth+(0,_tools_pxToNumber__WEBPACK_IMPORTED_MODULE_12__.F)(theme.typography.variants[_lib_typography__WEBPACK_IMPORTED_MODULE_7__.Zc].style.lineHeight),(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)({textTransform:"unset",backgroundColor:disabled?theme.colors.useCases.buttons.actionDisabledBackground:function(){switch(variant){case"primary":case"secondary":return"transparent";case"ternary":return theme.colors.useCases.surfaces.background}}(),borderRadius:approxHeight/2,borderWidth,borderStyle:"solid",borderColor:disabled?"transparent":hoverBackgroundColor},theme.spacing.topBottom("padding",2)),theme.spacing.rightLeft("padding",theme.windowInnerWidth>=_lib__WEBPACK_IMPORTED_MODULE_6__.ak.xl?3:4)),{},{"&.MuiButton-text":{color:textColor},"&:hover, &:focus":{backgroundColor:hoverBackgroundColor,"& .MuiSvgIcon-root":{color:hoverTextColor},"&.MuiButton-text":{color:hoverTextColor}}})),icon:{color:textColor}}}));return{Button}}ButtonProps||(ButtonProps={});try{createButton.displayName="createButton",createButton.__docgenInfo={description:"",displayName:"createButton",props:{Icon:{defaultValue:null,description:"",name:"Icon",required:!0,type:{name:"(props: IconProps<IconId>) => ReactElement<any, any> | null"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Button.tsx#createButton"]={docgenInfo:createButton.__docgenInfo,name:"createButton",path:"src/Button.tsx#createButton"})}catch(__react_docgen_typescript_loader_error){}},"./src/ButtonBar.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{c:()=>createButtonBar});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/lib/ThemeProvider.tsx"),powerhooks_useCallbackFactory__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/powerhooks/useCallbackFactory.js"),_ButtonBarButton__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/ButtonBarButton.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/react/jsx-runtime.js");function createButtonBar(params){var Icon=params.Icon,ButtonBarButton=(0,_ButtonBarButton__WEBPACK_IMPORTED_MODULE_3__.q)({Icon}).ButtonBarButton,ButtonBar=(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)((function(props){var className=props.className,buttons=props.buttons,onClick=props.onClick,_useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx,onClickFactory=(0,powerhooks_useCallbackFactory__WEBPACK_IMPORTED_MODULE_2__.useCallbackFactory)((function(_ref){var buttonId=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_5__.Z)(_ref,1)[0];return onClick(buttonId)}));return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div",{className:cx(classes.root,className),children:buttons.map((function(_ref3){var buttonId=_ref3.buttonId,icon=_ref3.icon,isDisabled=_ref3.isDisabled,label=_ref3.label;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(ButtonBarButton,{startIcon:icon,disabled:isDisabled,onClick:onClickFactory(buttonId),children:label},buttonId)}))})})),useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__.IR.withName({ButtonBar}).create((function(_ref4){var theme=_ref4.theme;return{root:{backgroundColor:theme.colors.useCases.surfaces.surface1,boxShadow:theme.shadows[1],borderRadius:8,overflow:"hidden"}}}));return{ButtonBar}}try{createButtonBar.displayName="createButtonBar",createButtonBar.__docgenInfo={description:"",displayName:"createButtonBar",props:{Icon:{defaultValue:null,description:"",name:"Icon",required:!0,type:{name:"(props: IconProps<IconId>) => ReactElement<any, any> | null"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/ButtonBar.tsx#createButtonBar"]={docgenInfo:createButtonBar.__docgenInfo,name:"createButtonBar",path:"src/ButtonBar.tsx#createButtonBar"})}catch(__react_docgen_typescript_loader_error){}},"./src/ButtonBarButton.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{q:()=>createButtonBarButton});var ButtonBarButtonProps,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/lib/ThemeProvider.tsx"),_Button__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/Button.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","startIcon","disabled","children"];function createButtonBarButton(params){var Icon=params.Icon,Button=(0,_Button__WEBPACK_IMPORTED_MODULE_2__.a)({Icon}).Button,ButtonBarButton=(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)((function(props){var className=props.className,startIcon=props.startIcon,disabled=props.disabled,children=props.children,rest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__.Z)(props,_excluded),_useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Button,(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({className:cx(classes.root,className),variant:"secondary",startIcon,disabled},rest),{},{children}))})),useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__.IR.withName({ButtonBarButton}).create((function(_ref){var theme=_ref.theme;return{root:{backgroundColor:"transparent",borderRadius:"unset",borderColor:"transparent",transition:"none","& > *":{transition:"none"},"&:hover.MuiButton-text, &:focus.MuiButton-text":{color:theme.colors.useCases.typography.textPrimary,borderBottomColor:theme.colors.useCases.buttons.actionActive,boxSizing:"border-box",backgroundColor:"unset","& .MuiSvgIcon-root":{color:theme.colors.useCases.typography.textPrimary}},"&:active.MuiButton-text":{color:theme.colors.useCases.typography.textFocus,"& .MuiSvgIcon-root":{color:theme.colors.useCases.typography.textFocus}}}}}));return{ButtonBarButton}}ButtonBarButtonProps||(ButtonBarButtonProps={});try{createButtonBarButton.displayName="createButtonBarButton",createButtonBarButton.__docgenInfo={description:"",displayName:"createButtonBarButton",props:{Icon:{defaultValue:null,description:"",name:"Icon",required:!0,type:{name:"(props: IconProps<IconId>) => ReactElement<any, any> | null"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/ButtonBarButton.tsx#createButtonBarButton"]={docgenInfo:createButtonBarButton.__docgenInfo,name:"createButtonBarButton",path:"src/ButtonBarButton.tsx#createButtonBarButton"})}catch(__react_docgen_typescript_loader_error){}},"./src/Icon.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{I:()=>createIcon});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/lib/ThemeProvider.tsx"),_mui_material_SvgIcon__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@mui/material/SvgIcon/SvgIcon.js"),tsafe_assert__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tsafe/assert.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["iconId","className","size","onClick"];function createIcon(componentByIconId){var useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__.IR.withParams().create((function(_ref){var theme=_ref.theme,size=_ref.size;return{root:{color:"inherit",verticalAlign:"top",fontSize:theme.iconSizesInPxByName[size],width:"1em",height:"1em"}}}));return{Icon:(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)((0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((function(props,ref){var iconId=props.iconId,className=props.className,_props$size=props.size,size=void 0===_props$size?"default":_props$size,onClick=props.onClick,rest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__.Z)(props,_excluded);(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_2__.assert)();var _useStyles=useStyles({size}),classes=_useStyles.classes,cx=_useStyles.cx,Component=componentByIconId[iconId];return function isMuiIcon(Component){return"type"in Component}(Component)?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Component,(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({ref,className:cx(classes.root,className),onClick},rest)):(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_mui_material_SvgIcon__WEBPACK_IMPORTED_MODULE_6__.Z,(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({ref,onClick,className:cx(classes.root,className),component:Component},rest))})))}}try{createIcon.displayName="createIcon",createIcon.__docgenInfo={description:"",displayName:"createIcon",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Icon.tsx#createIcon"]={docgenInfo:createIcon.__docgenInfo,name:"createIcon",path:"src/Icon.tsx#createIcon"})}catch(__react_docgen_typescript_loader_error){}},"./src/IconButton.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{k:()=>createIconButton});var IconButtonProps,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/lib/ThemeProvider.tsx"),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/react/index.js"),_mui_material_IconButton__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@mui/material/IconButton/IconButton.js"),tsafe_id__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tsafe/id.js"),tsafe_assert__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/tsafe/assert.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","iconClassName","iconId","size","disabled","autoFocus","tabIndex","name","id","aria-label"],_excluded2=["onClick","href"],_excluded3=["href","doOpenNewTabIfHref"],_excluded4=["type"];function createIconButton(params){var Icon=(null!=params?params:{Icon:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_2__.id)((function(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment,{})}))}).Icon,IconButton=(0,react__WEBPACK_IMPORTED_MODULE_1__.memo)((0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((function(props,ref){var className=props.className,iconClassName=props.iconClassName,iconId=props.iconId,size=props.size,_props$disabled=props.disabled,disabled=void 0!==_props$disabled&&_props$disabled,_props$autoFocus=props.autoFocus,autoFocus=void 0!==_props$autoFocus&&_props$autoFocus,tabIndex=props.tabIndex,name=props.name,id=props.id,ariaLabel=props["aria-label"],rest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__.Z)(props,_excluded),_useStyles=useStyles({disabled}),classes=_useStyles.classes,cx=_useStyles.cx;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_mui_material_IconButton__WEBPACK_IMPORTED_MODULE_6__.Z,(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__.Z)({ref,className:cx(classes.root,className),disabled,"aria-label":null!=ariaLabel?ariaLabel:void 0,autoFocus,tabIndex,name,id},function(){if("onClick"in rest){var onClick=rest.onClick,href=rest.href,restRest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__.Z)(rest,_excluded2);return(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_3__.assert)(),(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__.Z)({onClick,href},restRest)}if("href"in rest){var _href=rest.href,_rest$doOpenNewTabIfH=rest.doOpenNewTabIfHref,doOpenNewTabIfHref=void 0===_rest$doOpenNewTabIfH||_rest$doOpenNewTabIfH,_restRest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__.Z)(rest,_excluded3);return(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_3__.assert)(),(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__.Z)({href:_href,target:doOpenNewTabIfHref?"_blank":void 0},_restRest)}if("type"in rest){var type=rest.type,_restRest2=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__.Z)(rest,_excluded4);return(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_3__.assert)(),(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__.Z)({type},_restRest2)}}()),{},{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(Icon,{iconId,className:cx(classes.icon,iconClassName),size})}))}))),useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_0__.IR.withName({IconButton}).withParams().create((function(_ref2){var theme=_ref2.theme,disabled=_ref2.disabled;return{root:{padding:theme.spacing(2),"&:hover, &:focus":{backgroundColor:"unset","& svg":{color:theme.colors.useCases.buttons.actionHoverPrimary}}},icon:{color:theme.colors.useCases.typography[disabled?"textDisabled":"textPrimary"]}}}));return{IconButton}}IconButtonProps||(IconButtonProps={});try{createIconButton.displayName="createIconButton",createIconButton.__docgenInfo={description:"",displayName:"createIconButton",props:{Icon:{defaultValue:null,description:"",name:"Icon",required:!0,type:{name:"(props: IconProps<IconId>) => ReactElement<any, any> | null"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/IconButton.tsx#createIconButton"]={docgenInfo:createIconButton.__docgenInfo,name:"createIconButton",path:"src/IconButton.tsx#createIconButton"})}catch(__react_docgen_typescript_loader_error){}},"./src/RangeSlider/SimpleOrRangeSlider.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{C:()=>SimpleOrRangeSlider});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_mui_material_Slider__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./node_modules/@mui/material/Slider/Slider.js"),tsafe_assert__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/tsafe/assert.js"),tsafe_is__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tsafe/is.js"),powerhooks_useConstCallback__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/lib/ThemeProvider.tsx"),_Text_TextBase__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/Text/TextBase.ts"),tsafe_symToStr__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/tsafe/symToStr.js"),tsafe_capitalize__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/tsafe/capitalize.js"),powerhooks_useWithProps__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/powerhooks/useWithProps.js"),powerhooks_useDomRect__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/powerhooks/useDomRect.js"),_Tooltip__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./src/Tooltip.tsx"),_Icon__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./src/Icon.tsx"),_mui_icons_material_Help__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("./node_modules/@mui/icons-material/Help.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./node_modules/react/jsx-runtime.js"),useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_4__.IR.withParams().create((function(_ref){var theme=_ref.theme,isRange=_ref.isRange;return{label:{marginBottom:theme.spacing(3)},helpIcon:{marginLeft:theme.spacing(2),color:theme.colors.useCases.typography.textSecondary,verticalAlign:"text-bottom"},wrapper:{display:"flex",alignItems:"center"},slider:{flex:1,margin:theme.spacing({topBottom:0,rightLeft:4}),marginLeft:isRange?void 0:0,minWidth:150}}})),Icon=(0,_Icon__WEBPACK_IMPORTED_MODULE_11__.I)({help:_mui_icons_material_Help__WEBPACK_IMPORTED_MODULE_13__.Z}).Icon,SimpleOrRangeSlider=(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)((function(props){var className=props.className,label=props.label,min=props.min,max=props.max,step=props.step,unit=props.unit,lowExtremitySemantic=props.lowExtremitySemantic,highExtremitySemantic=props.highExtremitySemantic,extraInfo=props.extraInfo,valueLow=props.valueLow,valueHigh=props.valueHigh,onValueChange=props.onValueChange,classes=useStyles({isRange:void 0!==valueLow}).classes,muiSliderValue=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((function(){return void 0===valueLow?valueHigh:((0,tsafe_assert__WEBPACK_IMPORTED_MODULE_1__.assert)(valueLow<=valueHigh,"RangeSlider error, ".concat((0,tsafe_symToStr__WEBPACK_IMPORTED_MODULE_6__.symToStr)({valueLow})," must always be inferior or equal to ").concat((0,tsafe_symToStr__WEBPACK_IMPORTED_MODULE_6__.symToStr)({valueHigh}))),[valueLow,valueHigh])}),[null!=valueLow?valueLow:Object,valueHigh]),onChange=(0,powerhooks_useConstCallback__WEBPACK_IMPORTED_MODULE_3__.useConstCallback)((function(){for(var _len=arguments.length,_ref2=new Array(_len),_key=0;_key<_len;_key++)_ref2[_key]=arguments[_key];var value=_ref2[1],_ref3=void 0===valueLow?((0,tsafe_assert__WEBPACK_IMPORTED_MODULE_1__.assert)((0,tsafe_is__WEBPACK_IMPORTED_MODULE_2__.is)(value)),[void 0,value]):((0,tsafe_assert__WEBPACK_IMPORTED_MODULE_1__.assert)((0,tsafe_is__WEBPACK_IMPORTED_MODULE_2__.is)(value)),value),_ref4=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_14__.Z)(_ref3,2),newValueLow=_ref4[0],newValueHigh=_ref4[1];void 0!==newValueLow&&newValueLow!==valueLow&&onValueChange({extremity:"low",value:newValueLow}),newValueHigh!==valueHigh&&onValueChange({extremity:"high",value:newValueHigh})})),textComponentProps=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((function(){return{id:"text-".concat(~~(1e6*Math.random()))}}),[]),ValueDisplayWp=(0,powerhooks_useWithProps__WEBPACK_IMPORTED_MODULE_8__.useWithProps)(ValueDisplay,{unit,maxValue:max}),_useDomRect=(0,powerhooks_useDomRect__WEBPACK_IMPORTED_MODULE_9__.useDomRect)(),ref=_useDomRect.ref,width=_useDomRect.domRect.width,marks=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((function(){return width*step/(max-min)>=5}),[width,step,max,min]);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div",{className,ref,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)(_Text_TextBase__WEBPACK_IMPORTED_MODULE_5__.x,{className:classes.label,typo:"label 2",componentProps:textComponentProps,children:[label,void 0!==extraInfo&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_Tooltip__WEBPACK_IMPORTED_MODULE_10__.u,{title:extraInfo,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(Icon,{iconId:"help",size:"extra small",className:classes.helpIcon})})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div",{className:classes.wrapper,children:[void 0!==valueLow&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ValueDisplayWp,{semantic:lowExtremitySemantic,value:valueLow}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_mui_material_Slider__WEBPACK_IMPORTED_MODULE_15__.ZP,{className:classes.slider,value:muiSliderValue,onChange,step,marks,min,max,valueLabelDisplay:"off","aria-labelledby":textComponentProps.id}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ValueDisplayWp,{semantic:highExtremitySemantic,value:valueHigh})]})]})})),_ref5=function(){var ValueDisplay=(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)((function(props){var value=props.value,maxValue=props.maxValue,unit=props.unit,semantic=props.semantic,classes=useStyles({maxText:"".concat(maxValue," ").concat(unit)}).classes;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div",{className:classes.root,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)(_Text_TextBase__WEBPACK_IMPORTED_MODULE_5__.x,{typo:"label 1",className:classes.label,children:[value," ",unit]}),void 0!==semantic&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_Text_TextBase__WEBPACK_IMPORTED_MODULE_5__.x,{className:classes.caption,typo:"caption",children:(0,tsafe_capitalize__WEBPACK_IMPORTED_MODULE_7__.capitalize)(semantic)})]})})})),useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_4__.IR.withName({ValueDisplay}).withParams().create((function(_ref6){var theme=_ref6.theme,maxText=_ref6.maxText;return{root:{display:"flex",alignItems:"center"},caption:{color:theme.colors.useCases.typography.textSecondary},label:{display:"inline-flex",flexDirection:"column",justifyContent:"space-between",alignItems:"flex-start","&::after":{content:'"'.concat(maxText,'_"'),height:0,visibility:"hidden",overflow:"hidden",userSelect:"none",pointerEvents:"none","@media speech":{display:"none"}}}}}));return{ValueDisplay}}(),ValueDisplay=_ref5.ValueDisplay;try{SimpleOrRangeSlider.displayName="SimpleOrRangeSlider",SimpleOrRangeSlider.__docgenInfo={description:"",displayName:"SimpleOrRangeSlider",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal"}},min:{defaultValue:null,description:"",name:"min",required:!0,type:{name:"number"}},max:{defaultValue:null,description:"",name:"max",required:!0,type:{name:"number"}},step:{defaultValue:null,description:"",name:"step",required:!0,type:{name:"number"}},unit:{defaultValue:null,description:"",name:"unit",required:!0,type:{name:"string"}},lowExtremitySemantic:{defaultValue:null,description:"",name:"lowExtremitySemantic",required:!1,type:{name:"string"}},highExtremitySemantic:{defaultValue:null,description:"",name:"highExtremitySemantic",required:!1,type:{name:"string"}},extraInfo:{defaultValue:null,description:"",name:"extraInfo",required:!1,type:{name:"string"}},valueLow:{defaultValue:null,description:"",name:"valueLow",required:!1,type:{name:"number"}},valueHigh:{defaultValue:null,description:"",name:"valueHigh",required:!0,type:{name:"number"}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!0,type:{name:'(params: { extremity: "low" | "high"; value: number; }) => void'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/RangeSlider/SimpleOrRangeSlider.tsx#SimpleOrRangeSlider"]={docgenInfo:SimpleOrRangeSlider.__docgenInfo,name:"SimpleOrRangeSlider",path:"src/RangeSlider/SimpleOrRangeSlider.tsx#SimpleOrRangeSlider"})}catch(__react_docgen_typescript_loader_error){}},"./src/Tabs.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{m:()=>Tabs});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_toConsumableArray_js__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),_Text_TextBase__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/Text/TextBase.ts"),_Icon__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/Icon.tsx"),_mui_icons_material_ChevronLeft__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./node_modules/@mui/icons-material/ChevronLeft.js"),_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/lib/ThemeProvider.tsx"),react__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/index.js"),powerhooks_useCallbackFactory__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/powerhooks/useCallbackFactory.js"),powerhooks_useConstCallback__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),powerhooks__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/powerhooks/index.js"),tsafe_assert__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/tsafe/assert.js"),evt_hooks__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/evt/hooks/index.js"),powerhooks_useStateRef__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/powerhooks/useStateRef.js"),evt__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/evt/lib/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["id"],_excluded2=["onClick","className","size","isDisabled","isSelected","isFirst","isVisible"],_excluded3=["type","direction"],_excluded4=["type","text"],Icon=(0,_Icon__WEBPACK_IMPORTED_MODULE_1__.I)({chevronLeft:_mui_icons_material_ChevronLeft__WEBPACK_IMPORTED_MODULE_12__.Z}).Icon;function Tabs(props){var className=props.className,tabs=props.tabs,activeTabId=props.activeTabId,onRequestChangeActiveTab=props.onRequestChangeActiveTab,maxTabCount=props.maxTabCount,_props$size=props.size,size=void 0===_props$size?"big":_props$size,children=props.children,_useState=(0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(0),_useState2=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_13__.Z)(_useState,2),offset=_useState2[0],setOffset=_useState2[1],_useDomRect=(0,powerhooks__WEBPACK_IMPORTED_MODULE_6__.useDomRect)(),rootRef=_useDomRect.ref,rootWidth=_useDomRect.domRect.width,_useDomRect2=(0,powerhooks__WEBPACK_IMPORTED_MODULE_6__.useDomRect)(),leftArrowRef=_useDomRect2.ref,_useDomRect2$domRect=_useDomRect2.domRect,leftArrowWidth=_useDomRect2$domRect.width,leftArrowHeight=_useDomRect2$domRect.height,tabWidth=(0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)((function(){return tabs.length>maxTabCount?(rootWidth-2*leftArrowWidth)/maxTabCount:rootWidth/tabs.length}),[rootWidth,leftArrowWidth,maxTabCount]),tabsWrapperWidth=(0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)((function(){return tabWidth*tabs.length}),[tabWidth,tabs.length]),_useStyles=useStyles({tabsWrapperWidth,leftArrowWidth,leftArrowHeight,offset,tabWidth,classesOverrides:props.classes}),classes=_useStyles.classes,cx=_useStyles.cx,css=_useStyles.css,areArrowsVisible=tabs.length>maxTabCount,_useState3=(0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(0),_useState4=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_13__.Z)(_useState3,2),firstTabIndex=_useState4[0],setFirstTabIndex=_useState4[1],onArrowClickFactory=(0,powerhooks_useCallbackFactory__WEBPACK_IMPORTED_MODULE_4__.useCallbackFactory)((function(_ref){var direction=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_13__.Z)(_ref,1)[0],delta=function(){switch(direction){case"left":return-1;case"right":return 1}}();setFirstTabIndex(firstTabIndex+delta),setOffset(offset-delta)})),onTabClickFactory=(0,powerhooks_useCallbackFactory__WEBPACK_IMPORTED_MODULE_4__.useCallbackFactory)((function(_ref3){var id=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_13__.Z)(_ref3,1)[0];return onRequestChangeActiveTab(id)})),isLeftArrowDisabled=0===firstTabIndex,isRightArrowDisabled=tabs.length-firstTabIndex===maxTabCount,tabWrapperRef=(0,powerhooks_useStateRef__WEBPACK_IMPORTED_MODULE_9__.useStateRef)(null);(0,evt_hooks__WEBPACK_IMPORTED_MODULE_8__.useEvt)((function(ctx){var element=tabWrapperRef.current;null!==element&&(tabs.length<=maxTabCount||evt__WEBPACK_IMPORTED_MODULE_10__.Evt.from(ctx,element,"wheel").attach((function(wheelEvent){wheelEvent.preventDefault();var direction=wheelEvent.deltaY<0?"left":"right";switch(direction){case"left":if(isLeftArrowDisabled)return;break;case"right":if(isRightArrowDisabled)return}onArrowClickFactory(direction)()})))}),[tabWrapperRef.current,firstTabIndex,offset]);var renderLeftArrow=function renderLeftArrow(leftArrowRef,className){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(CustomButton,{ref:leftArrowRef,type:"arrow",direction:"left",size,isFirst:!1,className:cx(classes.leftArrow,className),isDisabled:isLeftArrowDisabled,isSelected:!1,onClick:onArrowClickFactory("left"),isVisible:!0})};return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)("div",{className:cx(classes.root,className),ref:rootRef,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)("div",{className:classes.top,children:[areArrowsVisible&&renderLeftArrow(),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)("div",{ref:tabWrapperRef,className:classes.tabsWrapper,children:tabs.map((function(_ref5){var id=_ref5.id,rest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_14__.Z)(_ref5,_excluded);return(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_15__.Z)({id,isSelected:id===activeTabId},rest)})).map((function(_ref6,i){var id=_ref6.id,title=_ref6.title,isSelected=_ref6.isSelected;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(CustomButton,{type:"tab",text:title,size,isDisabled:!1,isFirst:0===i,className:cx(classes.tab,css({zIndex:isSelected?maxTabCount+1:maxTabCount-i})),onClick:onTabClickFactory(id),isSelected,isVisible:i>=firstTabIndex&&i<firstTabIndex+maxTabCount},id)}))}),areArrowsVisible&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(CustomButton,{type:"arrow",direction:"right",size,isFirst:!1,className:classes.rightArrow,isDisabled:isRightArrowDisabled,isSelected:!1,onClick:onArrowClickFactory("right"),isVisible:!0})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)("div",{className:classes.content,children})]}),renderLeftArrow(leftArrowRef,css({position:"fixed",visibility:"hidden"}))]})}var _ref7=function(){var useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_2__.IR.withParams().create((function(_ref8){var theme=_ref8.theme,isSelected=_ref8.isSelected,isFirst=_ref8.isFirst,size=_ref8.size,isDisabled=_ref8.isDisabled,arrowDirection=_ref8.arrowDirection,isVisible=_ref8.isVisible;return{root:{backgroundColor:theme.colors.useCases.surfaces[isSelected?"surface1":"surface2"],boxShadow:void 0===arrowDirection&&isVisible?[theme.shadows[4]].concat((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_toConsumableArray_js__WEBPACK_IMPORTED_MODULE_16__.Z)(isSelected||isFirst?[theme.shadows[5]]:[])).join(", "):function(){switch(arrowDirection){case"right":return"inset ".concat(theme.shadows[4]);case"left":return"inset ".concat(theme.shadows[5])}}(),padding:theme.spacing(function(){switch(size){case"big":return{topBottom:3,rightLeft:4};case"small":return{topBottom:2,rightLeft:3}}}()),display:"flex",alignItems:"center",cursor:isDisabled?"default":"pointer"},typo:{fontWeight:isSelected?600:void 0}}}));return{CustomButton:(0,react__WEBPACK_IMPORTED_MODULE_3__.memo)((0,react__WEBPACK_IMPORTED_MODULE_3__.forwardRef)((function(props,ref){var onClick=props.onClick,className=props.className,size=props.size,isDisabled=props.isDisabled,isSelected=props.isSelected,isFirst=props.isFirst,isVisible=props.isVisible,restTmp=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_14__.Z)(props,_excluded2),rest=function(){switch(restTmp.type){case"arrow":restTmp.type,restTmp.direction;return(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_14__.Z)(restTmp,_excluded3);case"tab":restTmp.type,restTmp.text;return(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_14__.Z)(restTmp,_excluded4)}}(),onMouseDown=(0,powerhooks_useConstCallback__WEBPACK_IMPORTED_MODULE_5__.useConstCallback)((function(e){e.preventDefault(),isDisabled||0!==e.button||onClick()}));(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_7__.assert)();var _useStyles2=useStyles({isSelected,isFirst,size,isDisabled,arrowDirection:"arrow"!==props.type?void 0:props.direction,isVisible}),classes=_useStyles2.classes,cx=_useStyles2.cx,css=_useStyles2.css,theme=_useStyles2.theme;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)("div",(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_15__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_15__.Z)({ref,className:cx(classes.root,className),color:"secondary",onMouseDown},rest),{},{children:function(){switch(props.type){case"arrow":return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(Icon,{iconId:"chevronLeft",className:cx(function(){switch(props.direction){case"right":return css({transform:"rotate(180deg)"});case"left":return}}(),css({color:isDisabled?theme.colors.useCases.typography.textDisabled:void 0}))});case"tab":return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_Text_TextBase__WEBPACK_IMPORTED_MODULE_0__.x,{color:isDisabled?"disabled":void 0,typo:function(){switch(size){case"big":return"label 1";case"small":return"body 1"}}(),className:classes.typo,children:props.text})}}()}))})))}}(),CustomButton=_ref7.CustomButton,useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_2__.IR.withParams().withName({Tabs}).create((function(_ref9){var theme=_ref9.theme,tabsWrapperWidth=_ref9.tabsWrapperWidth,leftArrowWidth=_ref9.leftArrowWidth,leftArrowHeight=_ref9.leftArrowHeight,offset=_ref9.offset,tabWidth=_ref9.tabWidth,arrows={top:0,zIndex:1,position:"absolute"};return{root:{backgroundColor:theme.colors.useCases.surfaces.surface1,visibility:0===tabWidth?"hidden":"visible"},top:{overflow:"hidden",position:"relative"},leftArrow:(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_15__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_15__.Z)({},arrows),{},{left:0}),rightArrow:(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_15__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_15__.Z)({},arrows),{},{right:0}),tabsWrapper:{transition:"left 250ms",transitionTimingFunction:"ease",position:"relative",left:offset*tabWidth,transform:"translateX(".concat(leftArrowWidth,"px)"),zIndex:0,width:tabsWrapperWidth,display:"flex"},tab:{flex:1,height:leftArrowHeight||void 0},content:{padding:theme.spacing(4)}}}));try{Tabs.displayName="Tabs",Tabs.__docgenInfo={description:"",displayName:"Tabs",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},classes:{defaultValue:null,description:"",name:"classes",required:!1,type:{name:'Partial<Record<"tab" | "root" | "content" | "top" | "leftArrow" | "rightArrow" | "tabsWrapper", string>>'}},tabs:{defaultValue:null,description:"",name:"tabs",required:!0,type:{name:"Tab<TabId>[]"}},activeTabId:{defaultValue:null,description:"",name:"activeTabId",required:!0,type:{name:"string"}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"big"'},{value:'"small"'}]}},maxTabCount:{defaultValue:null,description:"",name:"maxTabCount",required:!0,type:{name:"number"}},onRequestChangeActiveTab:{defaultValue:null,description:"",name:"onRequestChangeActiveTab",required:!0,type:{name:"(tabId: TabId) => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Tabs.tsx#Tabs"]={docgenInfo:Tabs.__docgenInfo,name:"Tabs",path:"src/Tabs.tsx#Tabs"})}catch(__react_docgen_typescript_loader_error){}},"./src/Text/Text.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{r:()=>createText});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),tsafe_assert__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/tsafe/assert.js"),tss_react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tss-react/esm/index.js"),_excluded=["className","children","typo","color","htmlComponent","componentProps","fixedSize_enabled","fixedSize_content","fixedSize_fontWeight"];function createText(params){var useTheme=params.useTheme,Text=(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)((0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((function(props,ref){var className=props.className,children=props.children,typo=props.typo,_props$color=props.color,color=void 0===_props$color?"primary":_props$color,htmlComponent=props.htmlComponent,_props$componentProps=props.componentProps,componentProps=void 0===_props$componentProps?{}:_props$componentProps,_props$fixedSize_enab=props.fixedSize_enabled,fixedSize_enabled=void 0!==_props$fixedSize_enab&&_props$fixedSize_enab,fixedSize_content=props.fixedSize_content,fixedSize_fontWeight=props.fixedSize_fontWeight,rest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_3__.Z)(props,_excluded);(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_1__.assert)();var theme=useTheme(),_useStyles=useStyles({theme,typo,color,fixedSize_enabled,fixedSize_content,fixedSize_fontWeight,children:"string"==typeof children?children:void 0}),classes=_useStyles.classes,cx=_useStyles.cx;return(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(null!=htmlComponent?htmlComponent:theme.typography.variants[typo].htmlComponent,(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({className:cx(classes.root,className),ref},componentProps),rest),children)}))),useStyles=tss_react__WEBPACK_IMPORTED_MODULE_2__.IR.withParams().withName("Text").create((function(_ref){var theme=_ref.theme,typo=_ref.typo,color=_ref.color,fixedSize_enabled=_ref.fixedSize_enabled,fixedSize_fontWeight=_ref.fixedSize_fontWeight,fixedSize_content=_ref.fixedSize_content,children=_ref.children;return{root:(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},theme.typography.variants[typo].style),{},{color:theme.colors.useCases.typography[function(){switch(color){case"primary":return"textPrimary";case"secondary":return"textSecondary";case"disabled":return"textDisabled";case"focus":return"textFocus"}}()],padding:0,margin:0},fixedSize_enabled?{display:"inline-flex",flexDirection:"column",alignItems:"center",justifyContent:"space-between","&::after":{content:fixedSize_content?'"'.concat(fixedSize_content,'"'):((0,tsafe_assert__WEBPACK_IMPORTED_MODULE_1__.assert)(void 0!==children),'"'.concat(children,'_"')),height:0,visibility:"hidden",overflow:"hidden",userSelect:"none",pointerEvents:"none",fontWeight:fixedSize_fontWeight,"@media speech":{display:"none"}}}:{})}}));return{Text}}try{createText.displayName="createText",createText.__docgenInfo={description:"",displayName:"createText",props:{useTheme:{defaultValue:null,description:"",name:"useTheme",required:!0,type:{name:"() => Theme<{ focus: { main: string; light: string; light2: string; }; dark: { main: string; light: string; greyVariant1: string; greyVariant2: string; greyVariant3: string; greyVariant4: string; }; light: { ...; }; redError: { ...; }; greenSuccess: { ...; }; orangeWarning: { ...; }; blueInfo: { ...; }; }, { ...; },..."}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Text/Text.tsx#createText"]={docgenInfo:createText.__docgenInfo,name:"createText",path:"src/Text/Text.tsx#createText"})}catch(__react_docgen_typescript_loader_error){}},"./src/Text/TextBase.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{x:()=>Text});var _lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/lib/ThemeProvider.tsx");var Text=(0,__webpack_require__("./src/Text/Text.tsx").r)({useTheme:function useTheme(){return(0,_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_0__.yK)().theme}}).Text},"./src/Tooltip.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{u:()=>Tooltip});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_mui_material_Tooltip__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@mui/material/Tooltip/Tooltip.js"),_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/lib/ThemeProvider.tsx"),_Text_TextBase__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/Text/TextBase.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/jsx-runtime.js"),Tooltip=(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)((function(props){var title=props.title,children=props.children,enterDelay=props.enterDelay,classes=useStyles().classes;return void 0===title?children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_mui_material_Tooltip__WEBPACK_IMPORTED_MODULE_4__.Z,{title:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Text_TextBase__WEBPACK_IMPORTED_MODULE_2__.x,{className:classes.root,typo:"caption",children:title}),enterDelay,children})})),useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__.IR.withName({Tooltip}).create((function(_ref){return{root:{color:_ref.theme.colors.palette.light.light}}}));try{Tooltip.displayName="Tooltip",Tooltip.__docgenInfo={description:"",displayName:"Tooltip",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | undefined"}},enterDelay:{defaultValue:null,description:"",name:"enterDelay",required:!1,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Tooltip.tsx#Tooltip"]={docgenInfo:Tooltip.__docgenInfo,name:"Tooltip",path:"src/Tooltip.tsx#Tooltip"})}catch(__react_docgen_typescript_loader_error){}},"./src/lib/SplashScreen.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{zH:()=>createSplashScreen});var slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),regeneratorRuntime=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js"),objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),asyncToGenerator=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js"),react=__webpack_require__("./node_modules/react/index.js"),node_modules_color=__webpack_require__("./node_modules/color/index.js"),color_default=__webpack_require__.n(node_modules_color),hooks=__webpack_require__("./node_modules/evt/hooks/index.js"),useGlobalState=__webpack_require__("./node_modules/powerhooks/useGlobalState.js"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),esm=__webpack_require__("./node_modules/tss-react/esm/index.js"),lib=__webpack_require__("./node_modules/evt/lib/index.js"),id=__webpack_require__("./node_modules/tsafe/id.js"),useGuaranteedMemo=__webpack_require__("./node_modules/powerhooks/useGuaranteedMemo.js"),runExclusive=__webpack_require__("./node_modules/run-exclusive/lib/runExclusive.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),OnyxiaLogo_OnyxiaLogoSvg=null;try{OnyxiaLogo_OnyxiaLogoSvg.displayName="OnyxiaLogoSvg",OnyxiaLogo_OnyxiaLogoSvg.__docgenInfo={description:"",displayName:"OnyxiaLogoSvg",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/assets/svg/OnyxiaLogo.tsx#OnyxiaLogoSvg"]={docgenInfo:OnyxiaLogo_OnyxiaLogoSvg.__docgenInfo,name:"OnyxiaLogoSvg",path:"src/assets/svg/OnyxiaLogo.tsx#OnyxiaLogoSvg"})}catch(__react_docgen_typescript_loader_error){}var _templateObject,useConst=__webpack_require__("./node_modules/powerhooks/useConst.js"),ViewPortAdapter=__webpack_require__("./node_modules/powerhooks/ViewPortAdapter.js"),statefulObservableToStatefulEvt=__webpack_require__("./node_modules/powerhooks/tools/StatefulObservable/statefulObservableToStatefulEvt.js"),fadeOutDuration=700,minimumDisplayDuration=1e3,_ref=function(){var evtDisplayState=lib.Evt.create({count:1,isTransparencyEnabled:!1,prevTime:0,onHiddens:(0,id.id)([])}),_ref2=function(){var $lastDelayedTime,evtLastDelayedTime,getDoUseDelay=($lastDelayedTime=(0,useGlobalState.createUseGlobalState)({name:"lastDelayedTime",initialState:0,doPersistAcrossReloads:!0}).$lastDelayedTime,evtLastDelayedTime=(0,statefulObservableToStatefulEvt.B)({statefulObservable:$lastDelayedTime}),{getDoUseDelay:function getDoUseDelay(){var doUseDelay=Date.now()-evtLastDelayedTime.state>3e4;return doUseDelay&&(evtLastDelayedTime.state=Date.now()),doUseDelay}}).getDoUseDelay,next=runExclusive.build((0,asyncToGenerator.Z)((0,regeneratorRuntime.Z)().mark((function _callee(){return(0,regeneratorRuntime.Z)().wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:if(!getDoUseDelay()){_context.next=3;break}return _context.next=3,new Promise((function(resolve){return setTimeout(resolve,minimumDisplayDuration)}));case 3:evtDisplayState.state=(0,objectSpread2.Z)((0,objectSpread2.Z)({},evtDisplayState.state),{},{prevTime:Date.now()});case 4:case"end":return _context.stop()}}),_callee)}))));function _globalHideSplashScreen(){return(_globalHideSplashScreen=(0,asyncToGenerator.Z)((0,regeneratorRuntime.Z)().mark((function _callee2(){return(0,regeneratorRuntime.Z)().wrap((function _callee2$(_context2){for(;;)switch(_context2.prev=_context2.next){case 0:if(evtDisplayState.state.count=Math.max(evtDisplayState.state.count-1,0),!runExclusive.isRunning(next)){_context2.next=3;break}return _context2.abrupt("return");case 3:next();case 4:case"end":return _context2.stop()}}),_callee2)})))).apply(this,arguments)}return{globalHideSplashScreen:function globalHideSplashScreen(){return _globalHideSplashScreen.apply(this,arguments)}}}(),globalHideSplashScreen=_ref2.globalHideSplashScreen;function useSplashScreenStatusInternal(){(0,hooks.useRerenderOnStateChange)(evtDisplayState);var _useGuaranteedMemo=(0,useGuaranteedMemo.useGuaranteedMemo)((function(){return{isSplashScreenShown:evtDisplayState.state.count>0,isTransparencyEnabled:evtDisplayState.state.isTransparencyEnabled}}),[evtDisplayState.state]);return{isSplashScreenShown:_useGuaranteedMemo.isSplashScreenShown,isTransparencyEnabled:_useGuaranteedMemo.isTransparencyEnabled}}return{useSplashScreen:function useSplashScreen(params){void 0!==(null==params?void 0:params.fadeOutDuration)&&(fadeOutDuration=params.fadeOutDuration),void 0!==(null==params?void 0:params.minimumDisplayDuration)&&(minimumDisplayDuration=params.minimumDisplayDuration);var isUsingSplashScreen=(0,react.useContext)(context);(0,react.useEffect)((function(){var onHidden=(null!=params?params:{}).onHidden;void 0!==onHidden&&(isUsingSplashScreen?evtDisplayState.state.onHiddens.push(onHidden):onHidden())}),[]);var _useClosure=function useClosure(){var countRef=(0,react.useRef)(0),showSplashScreen=(0,useConstCallback.useConstCallback)((function(_ref6){var enableTransparency=_ref6.enableTransparency;countRef.current++,function globalShowSplashScreen(params){evtDisplayState.state={count:evtDisplayState.state.count+1,isTransparencyEnabled:params.enableTransparency,prevTime:Date.now(),onHiddens:[]}}({enableTransparency})}));return{showSplashScreen,hideSplashScreen:(0,useConstCallback.useConstCallback)((0,asyncToGenerator.Z)((0,regeneratorRuntime.Z)().mark((function _callee3(){return(0,regeneratorRuntime.Z)().wrap((function _callee3$(_context3){for(;;)switch(_context3.prev=_context3.next){case 0:if(0!==countRef.current){_context3.next=2;break}return _context3.abrupt("return");case 2:return countRef.current--,_context3.next=5,globalHideSplashScreen();case 5:case"end":return _context3.stop()}}),_callee3)}))))}}(),showSplashScreen=_useClosure.showSplashScreen,hideSplashScreen=_useClosure.hideSplashScreen,_useSplashScreenStatu=useSplashScreenStatusInternal();return{isSplashScreenShown:_useSplashScreenStatu.isSplashScreenShown,isTransparencyEnabled:_useSplashScreenStatu.isTransparencyEnabled,hideRootSplashScreen:globalHideSplashScreen,showSplashScreen,hideSplashScreen}},useSplashScreenStatus:function useSplashScreenStatus(){var _useSplashScreenStatu2=useSplashScreenStatusInternal(),isSplashScreenShown=_useSplashScreenStatu2.isSplashScreenShown,isTransparencyEnabled=_useSplashScreenStatu2.isTransparencyEnabled;return(0,react.useEffect)((function(){var _filter$;if(!isSplashScreenShown){var timer,delayLeft=null!==(_filter$=[fadeOutDuration-(Date.now()-evtDisplayState.state.prevTime)].filter((function(v){return v>0}))[0])&&void 0!==_filter$?_filter$:0;return(0,asyncToGenerator.Z)((0,regeneratorRuntime.Z)().mark((function _callee4(){return(0,regeneratorRuntime.Z)().wrap((function _callee4$(_context4){for(;;)switch(_context4.prev=_context4.next){case 0:return _context4.next=2,new Promise((function(resolve){return timer=setTimeout(resolve,delayLeft)}));case 2:evtDisplayState.state.onHiddens.forEach((function(onHidden){return onHidden()})),evtDisplayState.state.onHiddens=[];case 4:case"end":return _context4.stop()}}),_callee4)})))(),function(){return clearTimeout(timer)}}}),[isSplashScreenShown]),{isSplashScreenShown,isTransparencyEnabled}}}}(),useSplashScreen=_ref.useSplashScreen,useSplashScreenStatus=_ref.useSplashScreenStatus,context=(0,react.createContext)(!1);function createSplashScreen(params){var useTheme=params.useTheme;function SplashScreen(props){var children=props.children,Logo=props.Logo;void 0!==(null==props?void 0:props.fadeOutDuration)&&(fadeOutDuration=props.fadeOutDuration),void 0!==(null==props?void 0:props.minimumDisplayDuration)&&(minimumDisplayDuration=props.minimumDisplayDuration);var _useSplashScreenStatu3=useSplashScreenStatus(),isSplashScreenShown=_useSplashScreenStatu3.isSplashScreenShown,isTransparencyEnabled=_useSplashScreenStatu3.isTransparencyEnabled,defaultOverflow=(0,useConst.useConst)((function(){return document.body.style.overflow}));(0,react.useEffect)((function(){document.body.style.overflow=isSplashScreenShown?"hidden":defaultOverflow}),[isSplashScreenShown]);var _useState=(0,react.useState)(!1),_useState2=(0,slicedToArray.Z)(_useState,2),isFadingOut=_useState2[0],setIsFadingOut=_useState2[1],_useState3=(0,react.useState)(!0),_useState4=(0,slicedToArray.Z)(_useState3,2),isVisible=_useState4[0],setIsVisible=_useState4[1],isViewPortAdapterEnabled=function useClosure(){return{isViewPortAdapterEnabled:void 0!==(0,ViewPortAdapter.useViewPortState)().viewPortState}}().isViewPortAdapterEnabled,classes=useStyles({theme:useTheme(),isVisible,isFadingOut,isTransparencyEnabled,isViewPortAdapterEnabled}).classes;return(0,react.useEffect)((function(){var timer=setTimeout((function(){}),0);return(0,asyncToGenerator.Z)((0,regeneratorRuntime.Z)().mark((function _callee5(){return(0,regeneratorRuntime.Z)().wrap((function _callee5$(_context5){for(;;)switch(_context5.prev=_context5.next){case 0:if(!isSplashScreenShown){_context5.next=5;break}setIsFadingOut(!1),setIsVisible(!0),_context5.next=10;break;case 5:return setIsFadingOut(!0),_context5.next=8,new Promise((function(resolve){return timer=setTimeout(resolve,fadeOutDuration)}));case 8:setIsFadingOut(!1),setIsVisible(!1);case 10:case"end":return _context5.stop()}}),_callee5)})))(),function(){return clearTimeout(timer)}}),[isSplashScreenShown]),(0,jsx_runtime.jsxs)(context.Provider,{value:!0,children:[(0,jsx_runtime.jsx)("div",{className:classes.root,children:(0,jsx_runtime.jsx)(Logo,{})}),children]})}var useStyles=esm.IR.withParams().withName({SplashScreen}).create((function(_ref10){var color,theme=_ref10.theme,isVisible=_ref10.isVisible,isFadingOut=_ref10.isFadingOut,isTransparencyEnabled=_ref10.isTransparencyEnabled;return{root:{width:"100%",height:_ref10.isViewPortAdapterEnabled?"100%":"100vh",position:"fixed",top:0,left:0,zIndex:10,backgroundColor:(color=new(color_default())(theme.colors.useCases.surfaces.background).rgb(),color.alpha(isTransparencyEnabled?.6:color.valpha).string()),backdropFilter:isTransparencyEnabled?"blur(10px)":void 0,display:"flex",alignItems:"center",justifyContent:"center",visibility:isVisible?"visible":"hidden",opacity:isFadingOut?0:1,transition:"opacity ease-in-out ".concat(fadeOutDuration,"ms")}}}));return{SplashScreen}}function createOnyxiaSplashScreenLogo(params){var useTheme=params.useTheme,OnyxiaSplashScreenLogo=memo((function(){var classes=useStyles({theme:useTheme()}).classes;return _jsx(OnyxiaLogoSvg,{className:classes.root})})),useStyles=tss.withParams().withName({OnyxiaSplashScreenLogo}).create((function(_ref11){return{root:{height:"20%",fill:_ref11.theme.colors.useCases.typography.textFocus,"& g":{opacity:0,animation:"".concat(keyframes(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n                            60%, 100% {\n                                opacity: 0;\n                            }\n                            0% {\n                                opacity: 0;\n                            }\n                            40% {\n                                opacity: 1;\n                            }\n                            "])))," 3.5s infinite ease-in-out"),"&:nth-of-type(1)":{animationDelay:".4s"},"&:nth-of-type(2)":{animationDelay:".8s"},"&:nth-of-type(3)":{animationDelay:"1.2s"}}}}}));return{OnyxiaSplashScreenLogo}}try{createSplashScreen.displayName="createSplashScreen",createSplashScreen.__docgenInfo={description:"",displayName:"createSplashScreen",props:{useTheme:{defaultValue:null,description:"",name:"useTheme",required:!0,type:{name:"() => Theme<{ focus: { main: string; light: string; light2: string; }; dark: { main: string; light: string; greyVariant1: string; greyVariant2: string; greyVariant3: string; greyVariant4: string; }; light: { ...; }; redError: { ...; }; greenSuccess: { ...; }; orangeWarning: { ...; }; blueInfo: { ...; }; }, { ...; },..."}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/lib/SplashScreen.tsx#createSplashScreen"]={docgenInfo:createSplashScreen.__docgenInfo,name:"createSplashScreen",path:"src/lib/SplashScreen.tsx#createSplashScreen"})}catch(__react_docgen_typescript_loader_error){}try{createOnyxiaSplashScreenLogo.displayName="createOnyxiaSplashScreenLogo",createOnyxiaSplashScreenLogo.__docgenInfo={description:"You have to create your own version of this component\nyou are expected to size it in percentage.",displayName:"createOnyxiaSplashScreenLogo",props:{useTheme:{defaultValue:null,description:"",name:"useTheme",required:!0,type:{name:"() => Theme<{ focus: { main: string; light: string; light2: string; }; dark: { main: string; light: string; greyVariant1: string; greyVariant2: string; greyVariant3: string; greyVariant4: string; }; light: { ...; }; redError: { ...; }; greenSuccess: { ...; }; orangeWarning: { ...; }; blueInfo: { ...; }; }, { ...; },..."}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/lib/SplashScreen.tsx#createOnyxiaSplashScreenLogo"]={docgenInfo:createOnyxiaSplashScreenLogo.__docgenInfo,name:"createOnyxiaSplashScreenLogo",path:"src/lib/SplashScreen.tsx#createOnyxiaSplashScreenLogo"})}catch(__react_docgen_typescript_loader_error){}try{useSplashScreen.displayName="useSplashScreen",useSplashScreen.__docgenInfo={description:"",displayName:"useSplashScreen",props:{onHidden:{defaultValue:null,description:"",name:"onHidden",required:!1,type:{name:"(() => void)"}},fadeOutDuration:{defaultValue:null,description:"",name:"fadeOutDuration",required:!1,type:{name:"number"}},minimumDisplayDuration:{defaultValue:null,description:"",name:"minimumDisplayDuration",required:!1,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/lib/SplashScreen.tsx#useSplashScreen"]={docgenInfo:useSplashScreen.__docgenInfo,name:"useSplashScreen",path:"src/lib/SplashScreen.tsx#useSplashScreen"})}catch(__react_docgen_typescript_loader_error){}},"./src/lib/ThemeProvider.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{BQ:()=>createThemeProvider,IR:()=>tss,yK:()=>useStyles});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),react=(__webpack_require__("./node_modules/minimal-polyfills/Object.fromEntries.js"),__webpack_require__("./node_modules/react/index.js")),CssBaseline=__webpack_require__("./node_modules/@mui/material/CssBaseline/CssBaseline.js"),ScopedCssBaseline=__webpack_require__("./node_modules/@mui/material/ScopedCssBaseline/ScopedCssBaseline.js"),styles_ThemeProvider=__webpack_require__("./node_modules/@mui/material/styles/ThemeProvider.js"),createMuiStrictModeTheme=__webpack_require__("./node_modules/@mui/material/styles/createMuiStrictModeTheme.js"),styles_createTheme=__webpack_require__("./node_modules/@mui/material/styles/createTheme.js"),powerhooks_useWindowInnerSize=__webpack_require__("./node_modules/powerhooks/useWindowInnerSize.js"),color=__webpack_require__("./src/lib/color.ts"),typography=__webpack_require__("./src/lib/typography.ts"),shadows=["none","0px 6px 10px 0px rgba(0,0,0,0.07)","0px 4px 4px 0px rgba(0,0,0,0.1)","6px 0px 16px 0px rgba(0,0,0,0.15)","4px 0px 10px 0px rgba(0,0,0,0.07)","-4px 0px 10px 0px rgba(0,0,0,0.07)","0px 6px 10px 0px rgba(0,0,0,0.14)","0px 8px 10px -7px rgba(0,0,0,0.07)"],useBrowserFontSizeFactor=__webpack_require__("./node_modules/powerhooks/useBrowserFontSizeFactor.js"),spacing=__webpack_require__("./src/lib/spacing.ts"),esm=__webpack_require__("./node_modules/tss-react/esm/index.js"),icon=__webpack_require__("./src/lib/icon.ts"),lib_SplashScreen=__webpack_require__("./src/lib/SplashScreen.tsx"),ViewPortAdapter=__webpack_require__("./node_modules/powerhooks/ViewPortAdapter.js"),memoizee=__webpack_require__("./node_modules/memoizee/index.js"),memoizee_default=__webpack_require__.n(memoizee),id=__webpack_require__("./node_modules/tsafe/id.js"),breakpoints=__webpack_require__("./src/lib/breakpoints.ts"),capitalize=__webpack_require__("./node_modules/tsafe/capitalize.js"),useGuaranteedMemo=__webpack_require__("./node_modules/powerhooks/useGuaranteedMemo.js"),useIsDarkModeEnabled=__webpack_require__("./src/lib/useIsDarkModeEnabled.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),themeBaseContext=(__webpack_require__("./node_modules/powerhooks/useDomRect.js"),(0,react.createContext)(void 0)),isDarkModeEnabledOverrideContext=(0,react.createContext)(void 0);function useIsThemeProvided(){return void 0!==useContext(themeBaseContext)}var tss=(0,esm.Pe)({useContext:function useContext(){return{theme:function useThemeBase(){var theme=(0,react.useContext)(themeBaseContext);if(void 0===theme)throw new Error("Your app should be wrapped into ThemeProvider");return theme}()}}}).tss,useStyles=tss.create({});function createThemeProvider(params){var _params$palette=params.palette,palette=void 0===_params$palette?color.HT:_params$palette,_params$createColorUs=params.createColorUseCases,createColorUseCases=void 0===_params$createColorUs?color.L7:_params$createColorUs,_params$getTypography=params.getTypographyDesc,getTypographyDesc=void 0===_params$getTypography?typography.$X:_params$getTypography,_params$isReactStrict=params.isReactStrictModeEnabled,isReactStrictModeEnabled=void 0!==_params$isReactStrict&&_params$isReactStrict,_params$spacingConfig=params.spacingConfig,spacingConfig=void 0===_params$spacingConfig?spacing.t:_params$spacingConfig,defaultIsDarkModeEnabled=params.defaultIsDarkModeEnabled,_params$getIconSizeIn=params.getIconSizeInPx,getIconSizeInPx=void 0===_params$getIconSizeIn?icon.W5:_params$getIconSizeIn;void 0!==defaultIsDarkModeEnabled&&(useIsDarkModeEnabled.s.state=defaultIsDarkModeEnabled);var createTheme,_ref=(createTheme=memoizee_default()((function(isDarkModeEnabled,windowInnerWidth,windowInnerHeight,browserFontSizeFactor){var toFinalValue,out,f,muiTheme,typographyDesc=getTypographyDesc({windowInnerWidth,windowInnerHeight,browserFontSizeFactor}),useCases=createColorUseCases({palette,isDarkModeEnabled}),spacing=function spacing(factorOrExplicitNumberOfPx){return spacingConfig({factorOrExplicitNumberOfPx,windowInnerWidth,rootFontSizePx:typographyDesc.rootFontSizePx})};return(0,id.id)((0,objectSpread2.Z)((0,objectSpread2.Z)({colors:{palette,useCases},typography:(0,typography.Gr)({typographyDesc}),isDarkModeEnabled,shadows},(muiTheme=(isReactStrictModeEnabled?createMuiStrictModeTheme.Z:styles_createTheme.Z)({typography:(0,typography.Tn)({typographyDesc}),palette:(0,color.M8)({isDarkModeEnabled,palette,useCases}),spacing,breakpoints:{values:(0,objectSpread2.Z)({xs:0},breakpoints.a)},components:{MuiLink:{defaultProps:{underline:"hover"}}}}),{spacing:(toFinalValue=function toFinalValue(value){return"number"==typeof value?"".concat(spacing(value),"px"):value},out=function out(valueOrObject){if("number"==typeof valueOrObject)return spacing(valueOrObject);var rightLeft=valueOrObject.rightLeft,topBottom=valueOrObject.topBottom;return[topBottom,rightLeft,topBottom,rightLeft].map(toFinalValue).join(" ")},f=function f(params){var axis=params.axis,kind=params.kind,value=params.value,finalValue="number"==typeof value?"".concat(spacing(value),"px"):value;return Object.fromEntries(function(){switch(axis){case"horizontal":return["left","right"];case"vertical":return["top","bottom"]}}().map((function(direction){return["".concat(kind).concat((0,capitalize.capitalize)(direction)),finalValue]})))},out.rightLeft=function(kind,value){return f({axis:"horizontal",kind,value})},out.topBottom=function(kind,value){return f({axis:"vertical",kind,value})},out),muiTheme})),{},{iconSizesInPxByName:(0,icon.X9)({getIconSizeInPx,windowInnerWidth,rootFontSizePx:typographyDesc.rootFontSizePx}),windowInnerWidth}))}),{max:1}),{useTheme:function useTheme(){var isDarkModeEnabled=(0,useIsDarkModeEnabled.J)().isDarkModeEnabled,_useWindowInnerSize=(0,powerhooks_useWindowInnerSize.useWindowInnerSize)(),windowInnerWidth=_useWindowInnerSize.windowInnerWidth,windowInnerHeight=_useWindowInnerSize.windowInnerHeight,browserFontSizeFactor=(0,useBrowserFontSizeFactor.useBrowserFontSizeFactor)().browserFontSizeFactor,isDarkModeEnabledOverride=(0,react.useContext)(isDarkModeEnabledOverrideContext);return createTheme(null!=isDarkModeEnabledOverride?isDarkModeEnabledOverride:isDarkModeEnabled,windowInnerWidth,windowInnerHeight,browserFontSizeFactor)}}),useTheme=_ref.useTheme,SplashScreen=(0,lib_SplashScreen.zH)({useTheme}).SplashScreen,ThemeProvider=function(){function ThemeProviderWithinViewPortAdapter(props){var splashScreen=props.splashScreen,children=props.children,theme=useTheme(),backgroundColor=theme.colors.useCases.surfaces.background;(0,react.useEffect)((function(){for(document.documentElement.style.backgroundColor=backgroundColor;;){var element=document.querySelector("meta[name=theme-color]");if(null===element)break;element.remove()}document.head.insertAdjacentHTML("beforeend",'<meta name="theme-color" content="'.concat(backgroundColor,'">'))}),[backgroundColor]);var isStoryProvider=void 0!==(0,react.useContext)(isDarkModeEnabledOverrideContext),CssBaselineOrScopedCssBaseline=(0,useGuaranteedMemo.useGuaranteedMemo)((function(){return isStoryProvider?function(_ref3){var children=_ref3.children;return(0,jsx_runtime.jsx)(ScopedCssBaseline.Z,{children})}:function(_ref4){var children=_ref4.children;return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(CssBaseline.ZP,{}),children]})}}),[isStoryProvider]),SplashScreenOrId=(0,useGuaranteedMemo.useGuaranteedMemo)((function(){return void 0===splashScreen?function(_ref5){var children=_ref5.children;return(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children})}:function(_ref6){var children=_ref6.children;return(0,jsx_runtime.jsx)(SplashScreen,(0,objectSpread2.Z)((0,objectSpread2.Z)({},splashScreen),{},{children}))}}),[splashScreen]);return(0,jsx_runtime.jsx)(themeBaseContext.Provider,{value:theme,children:(0,jsx_runtime.jsx)(styles_ThemeProvider.Z,{theme:theme.muiTheme,children:(0,jsx_runtime.jsx)(CssBaselineOrScopedCssBaseline,{children:(0,jsx_runtime.jsx)(SplashScreenOrId,{children})})})})}return{ThemeProvider:function ThemeProvider(props){var getViewPortConfig=props.getViewPortConfig,children=props.children,splashScreen=props.splashScreen,ViewPortAdapterOrId=(0,useGuaranteedMemo.useGuaranteedMemo)((function(){return void 0===getViewPortConfig?function(_ref7){var children=_ref7.children;return(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children})}:function(_ref8){var children=_ref8.children;return(0,jsx_runtime.jsx)(ViewPortAdapter.ViewPortAdapter,{getConfig:getViewPortConfig,children})}}),[getViewPortConfig]);return(0,jsx_runtime.jsx)(ViewPortAdapterOrId,{children:(0,jsx_runtime.jsx)(ThemeProviderWithinViewPortAdapter,{splashScreen,children})})}}}().ThemeProvider;var tss=(0,esm.Pe)({useContext:function useContext(){return{theme:useTheme()}}}).tss,useStyles=tss.create({});return{ThemeProvider,useTheme,StoryProvider:function StoryProvider(props){var _props$dark=props.dark,dark=void 0!==_props$dark&&_props$dark,children=props.children;return(0,react.useEffect)((function(){useIsDarkModeEnabled.s.state=dark}),[dark]),(0,jsx_runtime.jsx)(isDarkModeEnabledOverrideContext.Provider,{value:dark,children:(0,jsx_runtime.jsx)(ThemeProvider,{children})})},tss,useStyles}}try{useIsThemeProvided.displayName="useIsThemeProvided",useIsThemeProvided.__docgenInfo={description:"Used internally, do not export globally",displayName:"useIsThemeProvided",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/lib/ThemeProvider.tsx#useIsThemeProvided"]={docgenInfo:useIsThemeProvided.__docgenInfo,name:"useIsThemeProvided",path:"src/lib/ThemeProvider.tsx#useIsThemeProvided"})}catch(__react_docgen_typescript_loader_error){}try{createThemeProvider.displayName="createThemeProvider",createThemeProvider.__docgenInfo={description:"",displayName:"createThemeProvider",props:{isReactStrictModeEnabled:{defaultValue:null,description:"",name:"isReactStrictModeEnabled",required:!1,type:{name:"boolean"}},getTypographyDesc:{defaultValue:null,description:"",name:"getTypographyDesc",required:!1,type:{name:"GetTypographyDesc<CustomTypographyVariantName>"}},palette:{defaultValue:null,description:"",name:"palette",required:!1,type:{name:"{ focus: { main: string; light: string; light2: string; }; dark: { main: string; light: string; greyVariant1: string; greyVariant2: string; greyVariant3: string; greyVariant4: string; }; light: { main: string; ... 4 more ...; greyVariant4: string; }; redError: { ...; }; greenSuccess: { ...; }; orangeWarning: { ...; ..."}},createColorUseCases:{defaultValue:null,description:"",name:"createColorUseCases",required:!1,type:{name:"CreateColorUseCase<Palette, ColorUseCases>"}},spacingConfig:{defaultValue:null,description:"",name:"spacingConfig",required:!1,type:{name:"SpacingConfig"}},defaultIsDarkModeEnabled:{defaultValue:null,description:"",name:"defaultIsDarkModeEnabled",required:!1,type:{name:"boolean"}},getIconSizeInPx:{defaultValue:null,description:"",name:"getIconSizeInPx",required:!1,type:{name:"GetIconSizeInPx"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/lib/ThemeProvider.tsx#createThemeProvider"]={docgenInfo:createThemeProvider.__docgenInfo,name:"createThemeProvider",path:"src/lib/ThemeProvider.tsx#createThemeProvider"})}catch(__react_docgen_typescript_loader_error){}try{useDomRect.displayName="useDomRect",useDomRect.__docgenInfo={description:"",displayName:"useDomRect",props:{ref:{defaultValue:null,description:"",name:"ref",required:!0,type:{name:"RefObject<T>"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/lib/ThemeProvider.tsx#useDomRect"]={docgenInfo:useDomRect.__docgenInfo,name:"useDomRect",path:"src/lib/ThemeProvider.tsx#useDomRect"})}catch(__react_docgen_typescript_loader_error){}try{useWindowInnerSize.displayName="useWindowInnerSize",useWindowInnerSize.__docgenInfo={description:"",displayName:"useWindowInnerSize",props:{isSsrSetup:{defaultValue:null,description:"",name:"isSsrSetup",required:!0,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/lib/ThemeProvider.tsx#useWindowInnerSize"]={docgenInfo:useWindowInnerSize.__docgenInfo,name:"useWindowInnerSize",path:"src/lib/ThemeProvider.tsx#useWindowInnerSize"})}catch(__react_docgen_typescript_loader_error){}try{useStyles.displayName="useStyles",useStyles.__docgenInfo={description:"",displayName:"useStyles",props:{classesOverrides:{defaultValue:null,description:"",name:"classesOverrides",required:!1,type:{name:"Record<string, string>"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/lib/ThemeProvider.tsx#useStyles"]={docgenInfo:useStyles.__docgenInfo,name:"useStyles",path:"src/lib/ThemeProvider.tsx#useStyles"})}catch(__react_docgen_typescript_loader_error){}},"./src/lib/breakpoints.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{a:()=>breakpointsValues});__webpack_require__("./node_modules/powerhooks/ViewPortAdapter.js");var breakpointsValues={sm:600,md:960,lg:1280,xl:1920}},"./src/lib/color.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{L7:()=>createDefaultColorUseCases,M8:()=>createMuiPaletteOptions,HT:()=>defaultPalette});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),node_modules_color=__webpack_require__("./node_modules/color/index.js"),color_default=__webpack_require__.n(node_modules_color);function changeColorOpacity(params){var color=params.color,opacity=params.opacity;return new(color_default())(color).rgb().alpha(opacity).string()}var defaultPalette={focus:{main:"#FF562C",light:"#FF562C",light2:"#FFAD99"},dark:{main:"#2C323F",light:"#373E4F",greyVariant1:"#242C39",greyVariant2:"#5A6270",greyVariant3:"#8A9099",greyVariant4:"#B8BABF"},light:{main:"#F1F0EB",light:"#FDFDFC",greyVariant1:"#E6E6E6",greyVariant2:"#C9C9C9",greyVariant3:"#9E9E9E",greyVariant4:"#747474"},redError:{main:"#CC0B0B",light:"#FEECEB"},greenSuccess:{main:"#29CC2F",light:"#EEFAEE"},orangeWarning:{main:"#FF8800",light:"#FFF5E5"},blueInfo:{main:"#2196F3",light:"#E9F5FE"}};(0,objectSpread2.Z)((0,objectSpread2.Z)({},defaultPalette),{},{focus:{main:"#000091",light:"#9A9AFF",light2:"#E5E5F4"},dark:{main:"#2A2A2A",light:"#383838",greyVariant1:"#161616",greyVariant2:"#9C9C9C",greyVariant3:"#CECECE",greyVariant4:"#E5E5E5"},light:{main:"#F1F0EB",light:"#FDFDFC",greyVariant1:"#E6E6E6",greyVariant2:"#C9C9C9",greyVariant3:"#9E9E9E",greyVariant4:"#747474"}}),(0,objectSpread2.Z)((0,objectSpread2.Z)({},defaultPalette),{},{focus:{main:"#000091",light:"#9A9AFF",light2:"#E5E5F4"},dark:{main:"#2A2A2A",light:"#383838",greyVariant1:"#161616",greyVariant2:"#9C9C9C",greyVariant3:"#CECECE",greyVariant4:"#E5E5E5"},light:{main:"#F7F5F4",light:"#FDFDFC",greyVariant1:"#E6E6E6",greyVariant2:"#C9C9C9",greyVariant3:"#9E9E9E",greyVariant4:"#747474"}}),(0,objectSpread2.Z)((0,objectSpread2.Z)({},defaultPalette),{},{focus:{main:"#067A76",light:"#0AD6CF",light2:"#AEE4E3"},dark:{main:"#2D1C3A",light:"#4A3957",greyVariant1:"#22122E",greyVariant2:"#493E51",greyVariant3:"#918A98",greyVariant4:"#C0B8C6"},light:{main:"#F7F5F4",light:"#FDFDFC",greyVariant1:"#E6E6E6",greyVariant2:"#C9C9C9",greyVariant3:"#9E9E9E",greyVariant4:"#747474"}}),(0,objectSpread2.Z)((0,objectSpread2.Z)({},defaultPalette),{},{focus:{main:"#1F8D49",light:"#4efb8d",light2:"#dffee6"},light:{main:"#F4F6FF",light:"#F6F6F6",greyVariant1:"#E6E6E6",greyVariant2:"#C9C9C9",greyVariant3:"#9E9E9E",greyVariant4:"#747474"}});function createDefaultColorUseCases(params){var isDarkModeEnabled=params.isDarkModeEnabled,palette=params.palette;return{typography:{textPrimary:palette[isDarkModeEnabled?"light":"dark"].main,textSecondary:palette[isDarkModeEnabled?"dark":"light"].greyVariant4,textTertiary:palette[isDarkModeEnabled?"dark":"light"].greyVariant2,textDisabled:palette[isDarkModeEnabled?"dark":"light"].greyVariant2,textFocus:palette.focus[isDarkModeEnabled?"light":"main"]},buttons:{actionHoverPrimary:palette.focus[isDarkModeEnabled?"light2":"main"],actionHoverSecondary:isDarkModeEnabled?palette.light.light:palette.dark.main,actionHoverTernary:palette.light.main,actionSelected:isDarkModeEnabled?palette.dark.light:palette.light.greyVariant1,actionActive:palette.focus[isDarkModeEnabled?"light":"main"],actionDisabled:palette[isDarkModeEnabled?"dark":"light"].greyVariant3,actionDisabledBackground:palette[isDarkModeEnabled?"dark":"light"].greyVariant1},surfaces:{background:palette[isDarkModeEnabled?"dark":"light"].main,surface1:palette[isDarkModeEnabled?"dark":"light"].light,surface2:palette[isDarkModeEnabled?"dark":"light"].greyVariant1},alertSeverity:{error:{main:palette.redError.main,background:isDarkModeEnabled?changeColorOpacity({color:palette.redError.main,opacity:.2}):palette.redError.light},success:{main:palette.greenSuccess.main,background:isDarkModeEnabled?changeColorOpacity({color:palette.greenSuccess.main,opacity:.2}):palette.greenSuccess.light},warning:{main:palette.orangeWarning.main,background:isDarkModeEnabled?changeColorOpacity({color:palette.orangeWarning.main,opacity:.2}):palette.orangeWarning.light},info:{main:palette.blueInfo.main,background:isDarkModeEnabled?changeColorOpacity({color:palette.blueInfo.main,opacity:.2}):palette.blueInfo.light}}}}function createMuiPaletteOptions(params){var isDarkModeEnabled=params.isDarkModeEnabled,palette=params.palette,useCases=params.useCases;return{mode:isDarkModeEnabled?"dark":"light",primary:{main:palette.focus[isDarkModeEnabled?"light":"main"],light:palette.focus.light2},secondary:{main:useCases.typography.textPrimary,light:useCases.typography.textSecondary},error:{light:useCases.alertSeverity.error.background,main:useCases.alertSeverity.error.main,contrastText:useCases.typography.textPrimary},success:{light:useCases.alertSeverity.success.background,main:useCases.alertSeverity.success.main,contrastText:useCases.typography.textPrimary},info:{light:useCases.alertSeverity.info.background,main:useCases.alertSeverity.info.main,contrastText:useCases.typography.textPrimary},warning:{light:useCases.alertSeverity.warning.background,main:useCases.alertSeverity.warning.main,contrastText:useCases.typography.textPrimary},text:{primary:useCases.typography.textPrimary,secondary:useCases.typography.textSecondary,disabled:useCases.typography.textDisabled},divider:useCases.buttons.actionDisabledBackground,background:{paper:useCases.surfaces.surface1,default:useCases.surfaces.background},action:{active:useCases.buttons.actionActive,hover:palette.focus.light,selected:useCases.buttons.actionSelected,disabled:useCases.buttons.actionDisabled,disabledBackground:useCases.buttons.actionDisabledBackground,focus:useCases.typography.textFocus}}}},"./src/lib/icon.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{W5:()=>defaultGetIconSizeInPx,X9:()=>getIconSizesInPxByName});var _breakpoints__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/lib/breakpoints.ts"),iconSizeNames=["extra small","small","default","medium","large"],defaultGetIconSizeInPx=function defaultGetIconSizeInPx(_ref){var sizeName=_ref.sizeName,windowInnerWidth=_ref.windowInnerWidth;return _ref.rootFontSizePx*function(){switch(sizeName){case"extra small":return 1;case"small":return windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_0__.a.lg?1.25:1;case"default":return windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_0__.a.lg?1.5:1.25;case"medium":return windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_0__.a.lg?2:1.25;case"large":return windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_0__.a.xl?2.5:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_0__.a.lg?2:1.5}}()};function getIconSizesInPxByName(params){var getIconSizeInPx=params.getIconSizeInPx,windowInnerWidth=params.windowInnerWidth,rootFontSizePx=params.rootFontSizePx,out={};return iconSizeNames.forEach((function(sizeName){return out[sizeName]=getIconSizeInPx({windowInnerWidth,rootFontSizePx,sizeName})})),out}},"./src/lib/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{$X:()=>_typography__WEBPACK_IMPORTED_MODULE_2__.$X,BQ:()=>_ThemeProvider__WEBPACK_IMPORTED_MODULE_7__.BQ,JW:()=>_useIsDarkModeEnabled__WEBPACK_IMPORTED_MODULE_1__.J,Rz:()=>_typography__WEBPACK_IMPORTED_MODULE_2__.Rz,ak:()=>_breakpoints__WEBPACK_IMPORTED_MODULE_3__.a});__webpack_require__("./src/lib/color.ts");var _useIsDarkModeEnabled__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/lib/useIsDarkModeEnabled.ts"),_typography__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/lib/typography.ts"),_breakpoints__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/lib/breakpoints.ts"),_ThemeProvider__WEBPACK_IMPORTED_MODULE_7__=(__webpack_require__("./src/lib/spacing.ts"),__webpack_require__("./src/lib/icon.ts"),__webpack_require__("./src/lib/SplashScreen.tsx"),__webpack_require__("./src/lib/ThemeProvider.tsx"))},"./src/lib/spacing.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{t:()=>defaultSpacingConfig});var _breakpoints__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/lib/breakpoints.ts"),tsafe_assert__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/tsafe/assert.js"),defaultSpacingConfig=function defaultSpacingConfig(_ref){var factorOrExplicitNumberOfPx=_ref.factorOrExplicitNumberOfPx,windowInnerWidth=_ref.windowInnerWidth,rootFontSizePx=_ref.rootFontSizePx;if("string"==typeof factorOrExplicitNumberOfPx){var match=factorOrExplicitNumberOfPx.match(/^([+-]?([0-9]*[.])?[0-9]+)px$/);return(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_1__.assert)(null!==match,"".concat(factorOrExplicitNumberOfPx," don't match \\d+px")),Number.parseFloat(match[1])}return rootFontSizePx*function callee(factor){if((0,tsafe_assert__WEBPACK_IMPORTED_MODULE_1__.assert)(factor>=0,"factor must be positive"),!Number.isInteger(factor))return(callee(Math.floor(factor))+callee(Math.floor(factor)+1))/2;if(0===factor)return 0;if(factor>6)return(factor-5)*callee(6);if(windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_0__.a.xl)switch(factor){case 1:return.25;case 2:return.5;case 3:return 1;case 4:return 1.5;case 5:return 2;case 6:return 2.5}if(windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_0__.a.lg)switch(factor){case 1:return.25;case 2:return.5;case 3:case 4:return 1;case 5:return 1.5;case 6:return 2}switch(factor){case 1:case 2:return.25;case 3:return.5;case 4:case 5:return 1;case 6:return 1.5}(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_1__.assert)(!1)}(factorOrExplicitNumberOfPx)}},"./src/lib/typography.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{$X:()=>defaultGetTypographyDesc,Gr:()=>getComputedTypography,Rz:()=>powerhooks_ViewPortAdapter__WEBPACK_IMPORTED_MODULE_3__.chromeFontSizesFactors,Tn:()=>createMuiTypographyOptions,Zc:()=>variantNameUsedForMuiButton});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),tsafe_id__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/tsafe/id.js"),_breakpoints__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/lib/breakpoints.ts"),tsafe_objectKeys__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tsafe/objectKeys.js"),powerhooks_ViewPortAdapter__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/powerhooks/ViewPortAdapter.js"),defaultGetTypographyDesc=function defaultGetTypographyDesc(_ref){var windowInnerWidth=_ref.windowInnerWidth;return{fontFamily:"sans-serif",rootFontSizePx:16*_ref.browserFontSizeFactor,variants:{"display heading":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"h1",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)("bold")},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:2.8,lineHeightRem:3.25}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:2.25,lineHeightRem:2.5}:{fontSizeRem:1.75,lineHeightRem:2.5}),"page heading":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"h2",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)("bold")},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:2.25,lineHeightRem:2.5}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:1.75,lineHeightRem:2.25}:{fontSizeRem:1.125,lineHeightRem:1.25}),subtitle:(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"h3",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)("normal")},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:1.75,lineHeightRem:2.25}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:1.5,lineHeightRem:2}:{fontSizeRem:1,lineHeightRem:1.475}),"section heading":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"h4",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)("bold")},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:1.5,lineHeightRem:2}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:1.25,lineHeightRem:1.7}:{fontSizeRem:.875,lineHeightRem:1.28}),"object heading":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"h5",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)(600)},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:1.25,lineHeightRem:1.7}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:1.125,lineHeightRem:1.25}:{fontSizeRem:.875,lineHeightRem:1.28}),"navigation label":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"h5",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)(500)},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:1.25,lineHeightRem:1.7}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:1.125,lineHeightRem:1.25}:{fontSizeRem:.875,lineHeightRem:1.28}),"label 1":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"h6",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)(500)},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:1,lineHeightRem:1.475}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:.875,lineHeightRem:1.28}:{fontSizeRem:.75,lineHeightRem:1}),"label 2":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"h6",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)(500)},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:.875,lineHeightRem:1.28}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:.75,lineHeightRem:1}:{fontSizeRem:.625,lineHeightRem:.69}),"body 1":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"p",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)("normal")},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:1,lineHeightRem:1.475}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:.875,lineHeightRem:1.28}:{fontSizeRem:.75,lineHeightRem:1}),"body 2":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"p",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)("normal")},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:.875,lineHeightRem:1.28}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:.75,lineHeightRem:1}:{fontSizeRem:.625,lineHeightRem:.69}),"body 3":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"p",fontWeight:"normal"},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:.875,lineHeightRem:1.28}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:.75,lineHeightRem:1}:{fontSizeRem:.625,lineHeightRem:.69}),caption:(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"p",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)("normal")},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:.75,lineHeightRem:1}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:.625,lineHeightRem:.69}:{fontSizeRem:.45,lineHeightRem:.75})}}},variantNameUsedForMuiButton="label 1",_ref2=function(){function getTypographyVariantStyleFactory(params){var _params$typographyDes=params.typographyDesc,fontFamily=_params$typographyDes.fontFamily,rootFontSizePx=_params$typographyDes.rootFontSizePx,variants=_params$typographyDes.variants;return{getTypographyVariantStyle:function getTypographyVariantStyle(params){var variantName=params.variantName,_variants$variantName=variants[variantName],fontSizeRem=_variants$variantName.fontSizeRem,lineHeightRem=_variants$variantName.lineHeightRem,fontWeight=_variants$variantName.fontWeight,variantFontFamily=_variants$variantName.fontFamily;return{fontFamily:null!=variantFontFamily?variantFontFamily:fontFamily,fontWeight,fontSize:"".concat(fontSizeRem*rootFontSizePx,"px"),lineHeight:"".concat(lineHeightRem*rootFontSizePx,"px")}}}}return{createMuiTypographyOptions:function createMuiTypographyOptions(params){var typographyDesc=params.typographyDesc,getTypographyVariantStyle=getTypographyVariantStyleFactory({typographyDesc}).getTypographyVariantStyle;return{fontFamily:typographyDesc.fontFamily,fontWeightRegular:"normal",fontWeightMedium:500,h1:getTypographyVariantStyle({variantName:"display heading"}),h2:getTypographyVariantStyle({variantName:"page heading"}),h3:getTypographyVariantStyle({variantName:"subtitle"}),h4:getTypographyVariantStyle({variantName:"section heading"}),h5:getTypographyVariantStyle({variantName:"object heading"}),h6:getTypographyVariantStyle({variantName:"navigation label"}),subtitle1:getTypographyVariantStyle({variantName:"label 1"}),subtitle2:getTypographyVariantStyle({variantName:"body 2"}),body1:getTypographyVariantStyle({variantName:"body 1"}),body2:getTypographyVariantStyle({variantName:"body 2"}),caption:getTypographyVariantStyle({variantName:"caption"}),button:getTypographyVariantStyle({variantName:variantNameUsedForMuiButton})}},getComputedTypography:function getComputedTypography(params){var typographyDesc=params.typographyDesc,getTypographyVariantStyle=getTypographyVariantStyleFactory({typographyDesc}).getTypographyVariantStyle,computedTypography={rootFontSizePx:typographyDesc.rootFontSizePx,fontFamily:typographyDesc.fontFamily,variants:{}};return(0,tsafe_objectKeys__WEBPACK_IMPORTED_MODULE_2__.objectKeys)(typographyDesc.variants).forEach((function(variantName){return computedTypography.variants[variantName]={style:getTypographyVariantStyle({variantName}),htmlComponent:typographyDesc.variants[variantName].htmlComponent}})),computedTypography}}}(),createMuiTypographyOptions=_ref2.createMuiTypographyOptions,getComputedTypography=_ref2.getComputedTypography},"./src/lib/useIsDarkModeEnabled.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{J:()=>useIsDarkModeEnabled,s:()=>evtIsDarkModeEnabled});var powerhooks_useGlobalState__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/powerhooks/useGlobalState.js"),powerhooks_tools_urlSearchParams__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/powerhooks/tools/urlSearchParams.js"),powerhooks_tools_StatefulObservable_statefulObservableToStatefulEvt__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/powerhooks/tools/StatefulObservable/statefulObservableToStatefulEvt.js"),_createUseGlobalState=(0,powerhooks_useGlobalState__WEBPACK_IMPORTED_MODULE_0__.createUseGlobalState)({name:"isDarkModeEnabled",initialState:window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches,doPersistAcrossReloads:!0}),useIsDarkModeEnabled=_createUseGlobalState.useIsDarkModeEnabled,$isDarkModeEnabled=_createUseGlobalState.$isDarkModeEnabled,evtIsDarkModeEnabled=(0,powerhooks_tools_StatefulObservable_statefulObservableToStatefulEvt__WEBPACK_IMPORTED_MODULE_2__.B)({statefulObservable:$isDarkModeEnabled});!function(){var result=(0,powerhooks_tools_urlSearchParams__WEBPACK_IMPORTED_MODULE_1__.retrieveParamFromUrl)({url:window.location.href,name:"theme"});if(result.wasPresent){(0,powerhooks_tools_urlSearchParams__WEBPACK_IMPORTED_MODULE_1__.updateSearchBarUrl)(result.newUrl);var isDarkModeEnabled=function(){switch(result.value){case"dark":return!0;case"light":return!1;default:return}}();void 0!==isDarkModeEnabled&&(evtIsDarkModeEnabled.state=isDarkModeEnabled)}}(),evtIsDarkModeEnabled.attach((function(isDarkModeEnabled){var id="root-color-scheme",_element=document.getElementById(id);null!==_element&&_element.remove();var element=document.createElement("style");element.id=id,element.innerHTML="\n\t\t\t\t:root {\n\t\t\t\t\tcolor-scheme: ".concat(isDarkModeEnabled?"dark":"light","\n\t\t\t\t}\n\t\t"),document.getElementsByTagName("head")[0].appendChild(element)}))},"./src/stories/getStory.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>getStoryFactory,K:()=>logCallbacks});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),tsafe_symToStr__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/tsafe/symToStr.js"),_lib__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/lib/index.ts"),_theme__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/theme.ts"),tsafe_id__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/tsafe/id.js"),tss_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/tss-react/esm/index.js"),tsafe_objectKeys__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/tsafe/objectKeys.js"),powerhooks_useWindowInnerSize__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/powerhooks/useWindowInnerSize.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["darkMode","width","targetWindowInnerWidth","chromeFontSize"];function getStoryFactory(params){var sectionName=params.sectionName,wrappedComponent=params.wrappedComponent,_params$argTypes=params.argTypes,argTypes=void 0===_params$argTypes?{}:_params$argTypes,defaultWidth=params.defaultWidth,Component=Object.entries(wrappedComponent).map((function(_ref){return(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_9__.Z)(_ref,2)[1]}))[0];function ScreenSize(){var windowInnerWidth=(0,powerhooks_useWindowInnerSize__WEBPACK_IMPORTED_MODULE_7__.useWindowInnerSize)().windowInnerWidth,range=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((function(){return windowInnerWidth>=_lib__WEBPACK_IMPORTED_MODULE_2__.ak.xl?"xl-∞":windowInnerWidth>=_lib__WEBPACK_IMPORTED_MODULE_2__.ak.lg?"lg-xl":windowInnerWidth>=_lib__WEBPACK_IMPORTED_MODULE_2__.ak.md?"md-lg":windowInnerWidth>=_lib__WEBPACK_IMPORTED_MODULE_2__.ak.sm?"sm-md":"0-sm"}),[windowInnerWidth]);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1",children:[windowInnerWidth,"px width: ",range]})}var Template=function Template(_ref3){var darkMode=_ref3.darkMode,width=_ref3.width,targetWindowInnerWidth=_ref3.targetWindowInnerWidth,chromeFontSize=_ref3.chromeFontSize,props=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_10__.Z)(_ref3,_excluded),setIsDarkModeEnabled=(0,_lib__WEBPACK_IMPORTED_MODULE_2__.JW)().setIsDarkModeEnabled;(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((function(){setIsDarkModeEnabled(darkMode)}),[darkMode]);var getViewPortConfig=(0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((function(_ref4){var windowInnerWidth=_ref4.windowInnerWidth;return{targetBrowserFontSizeFactor:_lib__WEBPACK_IMPORTED_MODULE_2__.Rz[chromeFontSize],targetWindowInnerWidth:targetWindowInnerWidth||windowInnerWidth}}),[targetWindowInnerWidth,chromeFontSize]),theme=(0,_theme__WEBPACK_IMPORTED_MODULE_3__.Fg)();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(_theme__WEBPACK_IMPORTED_MODULE_3__.f6,{getViewPortConfig,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(tss_react__WEBPACK_IMPORTED_MODULE_5__.nz,{styles:{html:{fontSize:"100% !important"},body:{padding:"0 !important",backgroundColor:"".concat(theme.colors.useCases.surfaces.surface1," !important")}}}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(ScreenSize,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)("div",{style:{width:width||void 0,border:"1px dashed #e8e8e8",display:"inline-block"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(Component,(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)({},props))})]})};return{meta:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_4__.id)({title:"".concat(sectionName,"/").concat((0,tsafe_symToStr__WEBPACK_IMPORTED_MODULE_1__.symToStr)(wrappedComponent)),component:Component,argTypes:(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)({width:{control:{type:"range",min:0,max:1920,step:1}},targetWindowInnerWidth:{control:{type:"range",min:0,max:2560,step:10}},chromeFontSize:{options:(0,tsafe_objectKeys__WEBPACK_IMPORTED_MODULE_6__.objectKeys)(_lib__WEBPACK_IMPORTED_MODULE_2__.Rz),control:{type:"select"}}},argTypes)}),getStory:function getStory(props){var out=Template.bind({});return out.args=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)({darkMode:!1,width:null!=defaultWidth?defaultWidth:0,targetWindowInnerWidth:0,chromeFontSize:"Medium (Recommended)"},props),out}}}function logCallbacks(propertyNames){var out=(0,tsafe_id__WEBPACK_IMPORTED_MODULE_4__.id)({});return propertyNames.forEach((function(propertyName){return out[propertyName]=console.log.bind(console,propertyName)})),out}try{getStoryFactory.displayName="getStoryFactory",getStoryFactory.__docgenInfo={description:"",displayName:"getStoryFactory",props:{sectionName:{defaultValue:null,description:"",name:"sectionName",required:!0,type:{name:"string"}},wrappedComponent:{defaultValue:null,description:"",name:"wrappedComponent",required:!0,type:{name:"Record<string, ReactComponent<Props>>"}},argTypes:{defaultValue:null,description:"https://storybook.js.org/docs/react/essentials/controls",name:"argTypes",required:!1,type:{name:"Partial<Record<keyof Props, ArgType<unknown>>>"}},defaultWidth:{defaultValue:null,description:"",name:"defaultWidth",required:!1,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/getStory.tsx#getStoryFactory"]={docgenInfo:getStoryFactory.__docgenInfo,name:"getStoryFactory",path:"src/stories/getStory.tsx#getStoryFactory"})}catch(__react_docgen_typescript_loader_error){}try{logCallbacks.displayName="logCallbacks",logCallbacks.__docgenInfo={description:"",displayName:"logCallbacks",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/getStory.tsx#logCallbacks"]={docgenInfo:logCallbacks.__docgenInfo,name:"logCallbacks",path:"src/stories/getStory.tsx#logCallbacks"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/i18n.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{$:()=>useTranslation});var i18nifty__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/i18nifty/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/react/jsx-runtime.js"),useTranslation=((0,i18nifty__WEBPACK_IMPORTED_MODULE_0__.mi)()({Picker:null}).i18n,(0,i18nifty__WEBPACK_IMPORTED_MODULE_0__.ww)()({languages:["en","fr"],fallbackLanguage:"en"},{en:{Picker:{"github picker label":"Pick tag","github picker create tag":function githubPickerCreateTag(_ref){var tag=_ref.tag;return'Create the "'.concat(tag,'" tag')},"github picker done":(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:"Done"}),"something else":"ok"}},fr:{Picker:{"github picker label":void 0,"github picker create tag":void 0,"github picker done":void 0,"something else":void 0}}}).useTranslation);try{useTranslation.displayName="useTranslation",useTranslation.__docgenInfo={description:"",displayName:"useTranslation",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/i18n.tsx#useTranslation"]={docgenInfo:useTranslation.__docgenInfo,name:"useTranslation",path:"src/stories/i18n.tsx#useTranslation"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/sectionName.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{j:()=>sectionName});var sectionName="sandbox"},"./src/stories/theme.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{zx:()=>theme_Button,k2:()=>theme_ButtonBar,JO:()=>theme_Icon,hU:()=>theme_IconButton,FR:()=>StoryProvider,xv:()=>theme_Text,f6:()=>ThemeProvider,Fg:()=>useTheme});var _path,objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),lib=__webpack_require__("./src/lib/index.ts"),Icon=__webpack_require__("./src/Icon.tsx"),IconButton=__webpack_require__("./src/IconButton.tsx"),Button=__webpack_require__("./src/Button.tsx"),Text=__webpack_require__("./src/Text/Text.tsx"),ButtonBar=__webpack_require__("./src/ButtonBar.tsx"),react=__webpack_require__("./node_modules/react/index.js"),_excluded=["title","titleId"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function SvgTour(_ref,svgRef){var title=_ref.title,titleId=_ref.titleId,props=_objectWithoutProperties(_ref,_excluded);return react.createElement("svg",_extends({width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",ref:svgRef,"aria-labelledby":titleId},props),title?react.createElement("title",{id:titleId},title):null,_path||(_path=react.createElement("path",{d:"M13.415 4.9872L12.9245 3.9384C12.6547 3.36144 12.0749 2.9928 11.4379 2.9928H5.01837V21.0134H6.98205V12.0312H11.5493L12.203 13.4069C12.3739 13.7659 12.7358 13.9949 13.1337 13.9949H17.914C18.5212 13.9949 19.0137 13.5024 19.0137 12.8952V5.97024C19.0137 5.42736 18.5736 4.9872 18.0307 4.9872H13.415ZM17.0184 11.9688H13.415L12.5131 9.97392H7.01277L6.98157 4.98672H11.5488L12.4195 7.0128H16.9555L17.0184 11.9688Z"})))}var ForwardRef=react.forwardRef(SvgTour);__webpack_require__.p;var Services=__webpack_require__("./src/stories/assets/svg/Services.svg"),Help=__webpack_require__("./node_modules/@mui/icons-material/Help.js"),Home=__webpack_require__("./node_modules/@mui/icons-material/Home.js"),_createThemeProvider=(0,lib.BQ)({isReactStrictModeEnabled:!1,getTypographyDesc:function getTypographyDesc(_ref){var windowInnerWidth=_ref.windowInnerWidth,browserFontSizeFactor=_ref.browserFontSizeFactor,windowInnerHeight=_ref.windowInnerHeight;return(0,objectSpread2.Z)((0,objectSpread2.Z)({},(0,lib.$X)({windowInnerWidth,browserFontSizeFactor,windowInnerHeight})),{},{fontFamily:'"Work Sans", sans-serif'})}}),ThemeProvider=_createThemeProvider.ThemeProvider,StoryProvider=_createThemeProvider.StoryProvider,useTheme=_createThemeProvider.useTheme,theme_Icon=(0,Icon.I)({tour:ForwardRef,services:Services.r,help:Help.Z,home:Home.Z}).Icon,theme_IconButton=(0,IconButton.k)({Icon:theme_Icon}).IconButton,theme_Button=(0,Button.a)({Icon:theme_Icon}).Button,theme_Text=(0,Text.r)({useTheme}).Text,theme_ButtonBar=(0,ButtonBar.c)({Icon:theme_Icon}).ButtonBar},"./src/tools/pxToNumber.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";function pxToNumber(str){return Number.parseFloat(str.split("px")[0])}__webpack_require__.d(__webpack_exports__,{F:()=>pxToNumber})},"./src/tools/useNonPostableEvtLike.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{_:()=>useNonPostableEvtLike});var evt__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/evt/lib/index.js"),powerhooks_useGuaranteedMemo__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/powerhooks/useGuaranteedMemo.js"),evt_hooks__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/evt/hooks/index.js");function useNonPostableEvtLike(evtLike){var evt=(0,powerhooks_useGuaranteedMemo__WEBPACK_IMPORTED_MODULE_1__.useGuaranteedMemo)((function(){return evt__WEBPACK_IMPORTED_MODULE_0__.Evt.create()}),[evtLike]);return(0,evt_hooks__WEBPACK_IMPORTED_MODULE_2__.useEvt)((function(ctx){void 0!==evtLike&&evtLike.attach(ctx,(function(data){return evt.post(data)}))}),[evtLike]),void 0===evtLike?void 0:evt}},"./src/stories sync recursive ^\\.(?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.(ts%7Ctsx))$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./Alert.stories.tsx":"./src/stories/Alert.stories.tsx","./Breadcrump.stories.tsx":"./src/stories/Breadcrump.stories.tsx","./Button.stories.tsx":"./src/stories/Button.stories.tsx","./ButtonBar.stories.tsx":"./src/stories/ButtonBar.stories.tsx","./ButtonBarButton.stories.tsx":"./src/stories/ButtonBarButton.stories.tsx","./Card.stories.tsx":"./src/stories/Card.stories.tsx","./Checkbox.stories.tsx":"./src/stories/Checkbox.stories.tsx","./CollapsibleSectionHeader.stories.tsx":"./src/stories/CollapsibleSectionHeader.stories.tsx","./DarkModeSwitch.stories.tsx":"./src/stories/DarkModeSwitch.stories.tsx","./Dialog.stories.tsx":"./src/stories/Dialog.stories.tsx","./DirectoryHeader.stories.tsx":"./src/stories/DirectoryHeader.stories.tsx","./GitHubPicker.stories.tsx":"./src/stories/GitHubPicker.stories.tsx","./Icon.stories.tsx":"./src/stories/Icon.stories.tsx","./IconButton.stories.tsx":"./src/stories/IconButton.stories.tsx","./LanguageSelect.stories.tsx":"./src/stories/LanguageSelect.stories.tsx","./LeftBar.stories.tsx":"./src/stories/LeftBar.stories.tsx","./Markdown.stories.tsx":"./src/stories/Markdown.stories.tsx","./PageHeader.stories.tsx":"./src/stories/PageHeader.stories.tsx","./Picker.stories.tsx":"./src/stories/Picker.stories.tsx","./RangeSlider.stories.tsx":"./src/stories/RangeSlider.stories.tsx","./SearchBar.stories.tsx":"./src/stories/SearchBar.stories.tsx","./Slider.stories.tsx":"./src/stories/Slider.stories.tsx","./Tabs.stories.tsx":"./src/stories/Tabs.stories.tsx","./Tag.stories.tsx":"./src/stories/Tag.stories.tsx","./TestSpacing.stories.tsx":"./src/stories/TestSpacing.stories.tsx","./Text.stories.ts":"./src/stories/Text.stories.ts","./TextField.stories.tsx":"./src/stories/TextField.stories.tsx","./Tooltip.stories.tsx":"./src/stories/Tooltip.stories.tsx"};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id="./src/stories sync recursive ^\\.(?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.(ts%7Ctsx))$"},"./src/stories sync recursive ^\\.(?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./documentation/Fundamentals/colors.stories.mdx":"./src/stories/documentation/Fundamentals/colors.stories.mdx","./documentation/components/Alert.stories.mdx":"./src/stories/documentation/components/Alert.stories.mdx","./documentation/components/Button.stories.mdx":"./src/stories/documentation/components/Button.stories.mdx","./documentation/components/Checkbox.stories.mdx":"./src/stories/documentation/components/Checkbox.stories.mdx","./documentation/components/NavigationBar.stories.mdx":"./src/stories/documentation/components/NavigationBar.stories.mdx","./documentation/components/Tabs.stories.mdx":"./src/stories/documentation/components/Tabs.stories.mdx","./documentation/components/Textfield.stories.mdx":"./src/stories/documentation/components/Textfield.stories.mdx","./index.stories.mdx":"./src/stories/index.stories.mdx"};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id="./src/stories sync recursive ^\\.(?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},"./storybook-init-framework-entry.js":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__("./node_modules/@storybook/react/dist/esm/client/index.js")},"?4f7e":()=>{},"./generated-stories-entry.cjs":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module=__webpack_require__.nmd(module),(0,__webpack_require__("./node_modules/@storybook/react/dist/esm/client/index.js").configure)([__webpack_require__("./src/stories sync recursive ^\\.(?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$"),__webpack_require__("./src/stories sync recursive ^\\.(?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.(ts%7Ctsx))$")],module,!1)}},__webpack_require__=>{var __webpack_exec__=moduleId=>__webpack_require__(__webpack_require__.s=moduleId);__webpack_require__.O(0,[84],(()=>(__webpack_exec__("./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js"),__webpack_exec__("./node_modules/@storybook/core-client/dist/esm/globals/globals.js"),__webpack_exec__("./storybook-init-framework-entry.js"),__webpack_exec__("./node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/addon-links/preview.js-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js"),__webpack_exec__("./.storybook/preview.js-generated-config-entry.js"),__webpack_exec__("./generated-stories-entry.cjs"))));__webpack_require__.O()}]);
\ No newline at end of file
+(self.webpackChunkonyxia_ui=self.webpackChunkonyxia_ui||[]).push([[179],{"./src/stories/assets/svg/Services.svg":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{r:()=>ForwardRef});var _path,_path2,_path3,_path4,react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_excluded=["title","titleId"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function SvgServices(_ref,svgRef){var title=_ref.title,titleId=_ref.titleId,props=_objectWithoutProperties(_ref,_excluded);return react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg",_extends({width:48,height:48,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",ref:svgRef,"aria-labelledby":titleId},props),title?react__WEBPACK_IMPORTED_MODULE_0__.createElement("title",{id:titleId},title):null,_path||(_path=react__WEBPACK_IMPORTED_MODULE_0__.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M19.3594 2.75998C19.1506 2.54494 18.4993 2.22766 18.1906 2.22766H6.01589C5.44517 2.22766 4.98197 2.40622 4.64021 2.75854C4.44677 2.95774 4.21349 3.5515 4.21349 3.98974L4.15109 20.052C4.15109 20.9073 4.39781 21.1603 4.61573 21.3835L4.64021 21.4085C4.85573 21.6302 5.14085 21.7526 5.44325 21.7526H18.5583C18.8607 21.7526 19.1458 21.6302 19.3613 21.4085C19.5557 21.2078 19.7881 20.9001 19.7881 20.5709V3.59614C19.7871 3.26926 19.5548 2.9611 19.3594 2.75998ZM5.82389 3.85342L18.2079 3.90142V8.21998L5.82389 8.20366V3.85342ZM5.82389 10.0181H18.2079V14.2277H5.82389V10.0181ZM18.1585 20.1811H5.77445L5.82629 16.0334H18.2103L18.1585 20.1811Z"})),_path2||(_path2=react__WEBPACK_IMPORTED_MODULE_0__.createElement("path",{d:"M8.0102 6.83088C8.44867 6.83088 8.80412 6.47543 8.80412 6.03696C8.80412 5.59849 8.44867 5.24304 8.0102 5.24304C7.57173 5.24304 7.21628 5.59849 7.21628 6.03696C7.21628 6.47543 7.57173 6.83088 8.0102 6.83088Z"})),_path3||(_path3=react__WEBPACK_IMPORTED_MODULE_0__.createElement("path",{d:"M8.0102 12.8659C8.44867 12.8659 8.80412 12.5105 8.80412 12.072C8.80412 11.6335 8.44867 11.2781 8.0102 11.2781C7.57173 11.2781 7.21628 11.6335 7.21628 12.072C7.21628 12.5105 7.57173 12.8659 8.0102 12.8659Z"})),_path4||(_path4=react__WEBPACK_IMPORTED_MODULE_0__.createElement("path",{d:"M8.0102 18.7882C8.44867 18.7882 8.80412 18.4327 8.80412 17.9942C8.80412 17.5558 8.44867 17.2003 8.0102 17.2003C7.57173 17.2003 7.21628 17.5558 7.21628 17.9942C7.21628 18.4327 7.57173 18.7882 8.0102 18.7882Z"})))}var ForwardRef=react__WEBPACK_IMPORTED_MODULE_0__.forwardRef(SvgServices);__webpack_require__.p},"./src/stories/documentation/Fundamentals/colors.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__,onyxiaBrandColors:()=>onyxiaBrandColors,orangeFocusColor:()=>orangeFocusColor});__webpack_require__("./node_modules/react/index.js");var _mdx_js_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),storybook_dark_mode__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/storybook-dark-mode/dist/index.js"),_theme__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/stories/theme.ts"),_emotion_css__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@emotion/css/dist/emotion-css.esm.js");function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const layoutProps={};function MDXContent({components,...props}){return(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("wrapper",_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.h_,{title:"Documentation/Fundamentals/Colors",decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_4__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_3__.useDarkMode)(),mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,{mdxType:"Story"}))],mdxType:"Meta"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h1",null,"Colors"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The color system is based on a customizable palette, to which a wide variety of themes can be applied,\nand functional use cases to which the different colors of the palette are attached. Color use cases are designed\nto make something harmonious, ensure accessible text, and distinguish user interface elements and surfaces from one another.\nApplication of the color palette brings a unified and recognizable consistency to a vast array of digital products and interfaces.\nThis consistency is grounded by a set of well-defined rules on how to work with the component library in the context of dark and light themes."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#structure"},"Palette")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#sizes"},"Usecases")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#sizes"},"Themes")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#rules-of-use"},"Rules of use"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Color palette"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The color palette system is based on 3 main colors: Focus, Dark and Light.\nThis system allows a simplification of the use of a dark theme and the variations\nof the system with several themes for a better personification."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Focus color"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The Focus color serves as the primary action color for all experiences of an interface.\nIt is often used to mark the identity of the interface in components, but it is mainly used\nto attract the attention of the user, on clickable elements or active states for example."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Dark and light: the Neutral colors"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Neutral colors are basic colors used in typography, backgrounds, outlines and separators in most components.\nThey are used in particular in non-clickable elements and to represent inactive states.\nBoth colors have tonal variations for display nuances and so improve the prioritization of information in the interface.\nPlaying with a dark and light color makes it possible to display a light mode with dark elements on light surfaces\nand easily switch to a dark mode which inverts the colors and so displays light elements on dark surfaces."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Signal colors"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The signal colors are used solely for notifications, warnings, and status messages if a color differentiation is required.\nThere are 4 types of signal allowing information of different kinds to be given."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Color usecases"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The Design System offers components suitable for two color modes:"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"The clear theme: to be accessible on a light background.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"The dark theme: to be accessible on a dark background."))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The use of the dark theme is particularly recommended to reduce power consumption and reduce eye strain."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("blockquote",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"blockquote"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("strong",{parentName:"p"},"Warning :")," It is not possible to mix the colors of the light theme and those of the dark theme.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The color correspondences between these two themes have been defined according to the uses on the different\ncomponents. They are automatically applied when you install the dark theme on your site."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Theming"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Onyxia brand colors"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Orange, Blue, and White: these are the Onyxia brand colors.\nThe order is immaterial because there is no hierarchy here.\nWhat matters is that the colors support the message you want to convey and that the overall layout is not too colorful."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Onyxia brand colors",mdxType:"Story"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridAutoRows:20,alignItems:"center",gridGap:40})},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.focus.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Exeburant Orange (Focus)"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FF562C"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Midnight Blue (Dark)"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#2C323F"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White snow (Light)"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#F1F0EB")))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",null,"Colors palette"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"For functional applications, the color palette can be extended to include shade ranging from light to dark."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Orange Focus color",mdxType:"Story"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridAutoRows:20,alignItems:"center",gridGap:40})},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.focus.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Orange (Focus) - Main"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FF562C"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.focus.light})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Orange (Focus) - Light"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FFAD99"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.focus.light2})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Orange (Focus) - Light 2"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FF562C"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Main"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#2C323F"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.light})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Light"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#373E4F"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.greyVariant1})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Tones Variant 1"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#242C39"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.greyVariant2})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Tones Variant 2"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#5A6270"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.greyVariant3})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Tones Variant 3"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#8A9099"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.greyVariant4})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Tones Variant 4"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#B8BABF"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Main"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#F1F0EB"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.light})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Light"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FDFDFC"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.greyVariant1})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Tones Variant 1"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#E6E6E6"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.greyVariant2})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Tones Variant 2"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#C9C9C9"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.greyVariant3})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Tones Variant 3"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#9E9E9E"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.greyVariant4})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Tones Variant 4"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#747474")))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Rules of use"))}MDXContent.isMDXComponent=!0;const onyxiaBrandColors=()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridAutoRows:20,alignItems:"center",gridGap:40})},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.focus.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Exeburant Orange (Focus)"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FF562C"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Midnight Blue (Dark)"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#2C323F"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White snow (Light)"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#F1F0EB"));onyxiaBrandColors.storyName="Onyxia brand colors",onyxiaBrandColors.parameters={storySource:{source:'<div className={css({\n  "display": "grid",\n  "gridTemplateColumns": "repeat(3, 1fr)",\n  "gridAutoRows": 20,\n  "alignItems": "center",\n  "gridGap": 40\n})}>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.focus.main\n  })} />\n            <h4 className={css({})}>Exeburant Orange (Focus)</h4>\n            <p className={css({})}>#FF562C</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.dark.main\n  })} />\n            <h4 className={css({})}>Midnight Blue (Dark)</h4>\n            <p className={css({})}>#2C323F</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.light.main\n  })} />\n            <h4 className={css({})}>White snow (Light)</h4>\n            <p className={css({})}>#F1F0EB</p>\n        </div>'}};const orangeFocusColor=()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridAutoRows:20,alignItems:"center",gridGap:40})},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.focus.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Orange (Focus) - Main"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FF562C"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.focus.light})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Orange (Focus) - Light"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FFAD99"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.focus.light2})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Orange (Focus) - Light 2"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FF562C"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Main"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#2C323F"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.light})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Light"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#373E4F"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.greyVariant1})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Tones Variant 1"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#242C39"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.greyVariant2})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Tones Variant 2"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#5A6270"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.greyVariant3})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Tones Variant 3"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#8A9099"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.dark.greyVariant4})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"Blue (Dark) - Tones Variant 4"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#B8BABF"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.main})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Main"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#F1F0EB"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.light})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Light"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#FDFDFC"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.greyVariant1})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Tones Variant 1"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#E6E6E6"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.greyVariant2})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Tones Variant 2"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#C9C9C9"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.greyVariant3})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Tones Variant 3"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#9E9E9E"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({height:40,marginRight:20,backgroundColor:(0,_theme__WEBPACK_IMPORTED_MODULE_4__.Fg)().colors.palette.light.greyVariant4})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h4",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"White (Light) - Tones Variant 4"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({})},"#747474"));orangeFocusColor.storyName="Orange Focus color",orangeFocusColor.parameters={storySource:{source:'<div className={css({\n  "display": "grid",\n  "gridTemplateColumns": "repeat(3, 1fr)",\n  "gridAutoRows": 20,\n  "alignItems": "center",\n  "gridGap": 40\n})}>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.focus.main\n  })} />\n            <h4 className={css({})}>Orange (Focus) - Main</h4>\n            <p className={css({})}>#FF562C</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.focus.light\n  })} />\n            <h4 className={css({})}>Orange (Focus) - Light</h4>\n            <p className={css({})}>#FFAD99</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.focus.light2\n  })} />\n            <h4 className={css({})}>Orange (Focus) - Light 2</h4>\n            <p className={css({})}>#FF562C</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.dark.main\n  })} />\n            <h4 className={css({})}>Blue (Dark) - Main</h4>\n            <p className={css({})}>#2C323F</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.dark.light\n  })} />\n            <h4 className={css({})}>Blue (Dark) - Light</h4>\n            <p className={css({})}>#373E4F</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.dark.greyVariant1\n  })} />\n            <h4 className={css({})}>Blue (Dark) - Tones Variant 1</h4>\n            <p className={css({})}>#242C39</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.dark.greyVariant2\n  })} />\n            <h4 className={css({})}>Blue (Dark) - Tones Variant 2</h4>\n            <p className={css({})}>#5A6270</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.dark.greyVariant3\n  })} />\n            <h4 className={css({})}>Blue (Dark) - Tones Variant 3</h4>\n            <p className={css({})}>#8A9099</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.dark.greyVariant4\n  })} />\n            <h4 className={css({})}>Blue (Dark) - Tones Variant 4</h4>\n            <p className={css({})}>#B8BABF</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.light.main\n  })} />\n            <h4 className={css({})}>White (Light) - Main</h4>\n            <p className={css({})}>#F1F0EB</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.light.light\n  })} />\n            <h4 className={css({})}>White (Light) - Light</h4>\n            <p className={css({})}>#FDFDFC</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.light.greyVariant1\n  })} />\n            <h4 className={css({})}>White (Light) - Tones Variant 1</h4>\n            <p className={css({})}>#E6E6E6</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.light.greyVariant2\n  })} />\n            <h4 className={css({})}>White (Light) - Tones Variant 2</h4>\n            <p className={css({})}>#C9C9C9</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.light.greyVariant3\n  })} />\n            <h4 className={css({})}>White (Light) - Tones Variant 3</h4>\n            <p className={css({})}>#9E9E9E</p>\n            <div className={css({\n    "height": 40,\n    "marginRight": 20,\n    "backgroundColor": useTheme().colors.palette.light.greyVariant4\n  })} />\n            <h4 className={css({})}>White (Light) - Tones Variant 4</h4>\n            <p className={css({})}>#747474</p>\n        </div>'}};const componentMeta={title:"Documentation/Fundamentals/Colors",decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_4__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_3__.useDarkMode)()},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,null))],includeStories:["onyxiaBrandColors","orangeFocusColor"]},mdxStoryNameToKey={"Onyxia brand colors":"onyxiaBrandColors","Orange Focus color":"orangeFocusColor"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.aT,{mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(MDXContent,null))};const __WEBPACK_DEFAULT_EXPORT__=componentMeta,__namedExportsOrder=["onyxiaBrandColors","orangeFocusColor"]},"./src/stories/documentation/components/Alert.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__,errorAlert:()=>errorAlert,infoAlert:()=>infoAlert,successAlert:()=>successAlert,warningAlert:()=>warningAlert});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_theme__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/theme.ts"),_Alert__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/Alert.tsx"),_emotion_css__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@emotion/css/dist/emotion-css.esm.js"),storybook_dark_mode__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/storybook-dark-mode/dist/index.js");function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const layoutProps={};function MDXContent({components,...props}){return(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("wrapper",_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.h_,{title:"Documentation/Components/Alert",component:_Alert__WEBPACK_IMPORTED_MODULE_4__.b,decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_6__.useDarkMode)(),mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,{mdxType:"Story"}))],parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h1",null,"Alert"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"This is a documentation of ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("inlineCode",{parentName:"p"},"<Alert/>")," component.\nAlerts are used to draw the user's attention to information."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#structure"},"Structure")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#types-of-alert"},"Types of alert")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#rules-of-use"},"Rules of use")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#properties"},"Properties"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Structure"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The alert is made up of the following elements:"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"a title - mandatory.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"a pictogram and a color - mandatory.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"a description text - optional.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"a closing cross - optional."))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Alerts are displayed contextually in a page / form, during user interactions with validation messages\n(example: success or error following submission of a form) or during application / system side events\n(example : information, alert, update messages, etc.)."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Types of alert"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"There are 4 types of alert allowing information of different kinds to be given:"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#error-alert"},"Error alert")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#success-alert"},"Success alert")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#information-alert"},"Information alert")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#warning-alert"},"Warning alert"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Error alert"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Used when there are several errors in a form, or fatal errors for the user to report."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Error  Alert",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"error",mdxType:"Alert"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1",mdxType:"Text"},"This is an error")))))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Alert severity="error">\n    <Text typo="body 1">This is an error</Text>\n</Alert>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Success alert"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Used to indicate to the user that an action or task has been completed successfully."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Success Alert",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"success",mdxType:"Alert"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1",mdxType:"Text"},"This is an success")))))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Alert severity="success">\n    <Text typo="body 1">This is an success</Text>\n</Alert>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Information alert"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Use to highlight important information"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Info Alert",mdxType:"Story"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:!1,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"info",mdxType:"Alert"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1",mdxType:"Text"},"This is an info"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:!0,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"info",mdxType:"Alert"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1",mdxType:"Text"},"This is an info"))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Alert severity="info">\n    <Text typo="body 1">This is an info</Text>\n</Alert>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Warning alert"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Use to highlight important information"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Warning Alert",mdxType:"Story"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:!1,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"warning",mdxType:"Alert"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1",mdxType:"Text"},"This is a warning"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:!0,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"warning",mdxType:"Alert"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1",mdxType:"Text"},"This is a warning"))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Alert severity="warning">\n    <Text typo="body 1">This is an info</Text>\n</Alert>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Rules of use"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"The title of the alert should be clear and concise."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"The alert description text should clearly detail the information / problem to the user."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"The tone should be courteous, not to blame the user, but to accompany him.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Properties"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.$4,{of:_Alert__WEBPACK_IMPORTED_MODULE_4__.b,mdxType:"ArgsTable"}))}MDXContent.isMDXComponent=!0;const errorAlert=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"error"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1"},"This is an error"))))));errorAlert.storyName="Error  Alert",errorAlert.parameters={storySource:{source:'[false, true].map(dark => <Fragment key={dark}>\n                <div className={css({\n    "margin": 20\n  })} />\n                <StoryProvider dark={dark}>\n                    <Alert severity="error">\n                        <Text typo="body 1">This is an error</Text>\n                    </Alert>\n                </StoryProvider>\n            </Fragment>)'}};const successAlert=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"success"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1"},"This is an success"))))));successAlert.storyName="Success Alert",successAlert.parameters={storySource:{source:'[false, true].map(dark => <Fragment key={dark}>\n                <div className={css({\n    "margin": 20\n  })} />\n                <StoryProvider dark={dark}>\n                    <Alert severity="success">\n                        <Text typo="body 1">This is an success</Text>\n                    </Alert>\n                </StoryProvider>\n            </Fragment>)'}};const infoAlert=()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:!1},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"info"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1"},"This is an info"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:!0},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"info"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1"},"This is an info"))));infoAlert.storyName="Info Alert",infoAlert.parameters={storySource:{source:'<StoryProvider dark={false}>\n            <Alert severity="info">\n                <Text typo="body 1">This is an info</Text>\n            </Alert>\n        </StoryProvider>\n<div className={css({\n  "margin": 20\n})} />\n<StoryProvider dark={true}>\n            <Alert severity="info">\n                <Text typo="body 1">This is an info</Text>\n            </Alert>\n        </StoryProvider>'}};const warningAlert=()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:!1},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"warning"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1"},"This is a warning"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_5__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:!0},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_Alert__WEBPACK_IMPORTED_MODULE_4__.b,{severity:"warning"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1"},"This is a warning"))));warningAlert.storyName="Warning Alert",warningAlert.parameters={storySource:{source:'<StoryProvider dark={false}>\n            <Alert severity="warning">\n                <Text typo="body 1">This is a warning</Text>\n            </Alert>\n        </StoryProvider>\n<div className={css({\n  "margin": 20\n})} />\n<StoryProvider dark={true}>\n            <Alert severity="warning">\n                <Text typo="body 1">This is a warning</Text>\n            </Alert>\n        </StoryProvider>'}};const componentMeta={title:"Documentation/Components/Alert",parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_6__.useDarkMode)()},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,null))],component:_Alert__WEBPACK_IMPORTED_MODULE_4__.b,includeStories:["errorAlert","successAlert","infoAlert","warningAlert"]},mdxStoryNameToKey={"Error  Alert":"errorAlert","Success Alert":"successAlert","Info Alert":"infoAlert","Warning Alert":"warningAlert"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.aT,{mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(MDXContent,null))};const __WEBPACK_DEFAULT_EXPORT__=componentMeta,__namedExportsOrder=["errorAlert","successAlert","infoAlert","warningAlert"]},"./src/stories/documentation/components/Button.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,buttonWithLeftIcon:()=>buttonWithLeftIcon,buttonWithRightIcon:()=>buttonWithRightIcon,default:()=>__WEBPACK_DEFAULT_EXPORT__,disabledStatus:()=>disabledStatus,primaryButton:()=>primaryButton,secondaryButton:()=>secondaryButton,ternaryButton:()=>ternaryButton});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_theme__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/theme.ts"),_emotion_css__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@emotion/css/dist/emotion-css.esm.js"),storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/storybook-dark-mode/dist/index.js");function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const layoutProps={};function MDXContent({components,...props}){return(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("wrapper",_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.h_,{title:"documentation/Components/Button",component:_theme__WEBPACK_IMPORTED_MODULE_3__.zx,decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__.useDarkMode)(),mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,{mdxType:"Story"}))],parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h1",null,"Button"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"This is a documentation of ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("inlineCode",{parentName:"p"},"<Button/>")," component.\nButtons are elements of interaction with the interface allowing the user to perform an action.\nThey are used to show the user’s choice of options for actions and assign these to a clear hierarchy.\nFor example, a button helps the user to find the most important actions of a page or within a viewport and enables\nthem to perform these actions. The label is used to clearly indicate to the user what action will be triggered.\nButtons allow users to commit a change, complete steps in a task, or make choices."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#structure"},"Structure")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#variations"},"Variations")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#rules-of-use"},"Rules of use")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#properties"},"Properties"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Structure"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The button is made up of the following elements:"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"a label - mandatory.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"a icon, can be modified - optional."))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Variations"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#primary-button"},"Primary button")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#secondary-button"},"Secondary button")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#ternary-button"},"Ternary button")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#disabled-status"},"Disabled status")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#buttons-with-icon"},"Buttons with icon"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Primary button"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The primary button is used for main actions such as submitting a form or redirecting to content that you want to prioritize in the user journey."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Primary button",mdxType:"Story"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",variant:"primary",mdxType:"Button"}," ","Button text"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Button href="#" variant="primary">\n    Button text\n</Button>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"To be efficient and prioritize the actions offered to the user, limit the use of the primary button to 1 per screen\nand never use two primary buttons side by side. You can align a primary button with a secondary or tertiary button."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Secondary button"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The secondary button is used when the action has lower priority than the primary action,\nsuch as canceling, rewinding or resetting values ​​on a form."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Secondary button",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",variant:"secondary",mdxType:"Button"},"Button text"))))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Button href="#" variant="secondary">\n    Button text\n</Button>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Ternary button"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The ternary button is a third level of action, more rare,\nis used for external links or resetting values ​​on a form."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Ternary button",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",variant:"ternary",mdxType:"Button"},"Button text"))))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Button href="#" variant="ternary">\n    Button text\n</Button>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Disabled status"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The inactive state indicates that the user cannot interact with the button.\nIt should be only used very occasionally. For example, when we want to indicate\nto the user that he must take an upstream action."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:" Disabled status",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",disabled:"true",mdxType:"Button"},"Button text"))))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Button href="#" disabled="true">\n    Button text\n</Button>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Button with icon"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"It is possible to add an icon to your button allowing a better understanding of the action.\nTo do this, all you have to do is use the icon's CSS class (",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"p",href:"..."},"See the icons documentation"),")\nTwo variations are possible:"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"with icon to the right"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"with icon to the left")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"⚠️ Single icon, to use a single icon ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"p",href:"..."},"see the icon button documentation")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Button with right icon",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",endIcon:"help",mdxType:"Button"},"Button text"))))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Button href="#" endIcon="help">\n    Button text\n</Button>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Button with left icon",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",startIcon:"help",mdxType:"Button"},"Button text"))))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-tsx"},'<Button href="#" startIcon="help">\n    Button text\n</Button>\n')),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Rules of use"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Use a primary button for the next best action. Remaining calls-to-action should be represented as secondary or text buttons."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Use buttons in consistent locations in the user interface to improve user experience."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Only use one or two primary buttons per viewport, no limits per page."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Button labels must describe the action the button will perform and should include a verb. Use concise, specific, self-explanatory labels."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Button labels should always include a noun if there is any room for interpretation about what the verb operates on."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"You must use the same writing format on all your button labels (Example: 1st letter in uppercase, the rest in lowercase, imperative)."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},'Do not use generic labels like "Ok," especially in the case of an error; errors are never "Ok".'),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Use the button group component when there is a need to combine or lay out multiple buttons, and express different emphasis levels (e.g. one primary button and one secondary button)."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Do not use two primary buttons in a button group."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Do not use a button for a text link or navigation item.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Properties"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.$4,{of:_theme__WEBPACK_IMPORTED_MODULE_3__.zx,mdxType:"ArgsTable"}))}MDXContent.isMDXComponent=!0;const primaryButton=()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",variant:"primary"}," ","Button text"));primaryButton.storyName="Primary button",primaryButton.parameters={storySource:{source:'<div className={css({\n  "margin": 20\n})} />\n<Button href="#" variant="primary">\n                {" "}\n                Button text\n            </Button>'}};const secondaryButton=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",variant:"secondary"},"Button text")))));secondaryButton.storyName="Secondary button",secondaryButton.parameters={storySource:{source:'[false, true].map(dark => <Fragment key={dark}>\n                <div className={css({\n    "margin": 20\n  })} />\n                <StoryProvider dark={dark}>\n                    <Button href="#" variant="secondary">\n                        Button text\n                    </Button>\n                </StoryProvider>\n            </Fragment>)'}};const ternaryButton=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",variant:"ternary"},"Button text")))));ternaryButton.storyName="Ternary button",ternaryButton.parameters={storySource:{source:'[false, true].map(dark => <Fragment key={dark}>\n                <div className={css({\n    "margin": 20\n  })} />\n                <StoryProvider dark={dark}>\n                    <Button href="#" variant="ternary">\n                        Button text\n                    </Button>\n                </StoryProvider>\n            </Fragment>)'}};const disabledStatus=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",disabled:"true"},"Button text")))));disabledStatus.storyName=" Disabled status",disabledStatus.parameters={storySource:{source:'[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}>\n                    <div className={css({\n      "margin": 20\n    })} />\n                    <Button href="#" disabled="true">\n                        Button text\n                    </Button>\n                </StoryProvider>\n            </Fragment>)'}};const buttonWithRightIcon=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",endIcon:"help"},"Button text")))));buttonWithRightIcon.storyName="Button with right icon",buttonWithRightIcon.parameters={storySource:{source:'[false, true].map(dark => <Fragment key={dark}>\n                <div className={css({\n    "margin": 20\n  })} />\n                <StoryProvider dark={dark}>\n                    <Button href="#" endIcon="help">\n                        Button text\n                    </Button>\n                </StoryProvider>\n            </Fragment>)'}};const buttonWithLeftIcon=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",{className:(0,_emotion_css__WEBPACK_IMPORTED_MODULE_4__.iv)({margin:20})}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.zx,{href:"#",startIcon:"help"},"Button text")))));buttonWithLeftIcon.storyName="Button with left icon",buttonWithLeftIcon.parameters={storySource:{source:'[false, true].map(dark => <Fragment key={dark}>\n                <div className={css({\n    "margin": 20\n  })} />\n                <StoryProvider dark={dark}>\n                    <Button href="#" startIcon="help">\n                        Button text\n                    </Button>\n                </StoryProvider>\n            </Fragment>)'}};const componentMeta={title:"documentation/Components/Button",parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__.useDarkMode)()},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,null))],component:_theme__WEBPACK_IMPORTED_MODULE_3__.zx,includeStories:["primaryButton","secondaryButton","ternaryButton","disabledStatus","buttonWithRightIcon","buttonWithLeftIcon"]},mdxStoryNameToKey={"Primary button":"primaryButton","Secondary button":"secondaryButton","Ternary button":"ternaryButton"," Disabled status":"disabledStatus","Button with right icon":"buttonWithRightIcon","Button with left icon":"buttonWithLeftIcon"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.aT,{mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(MDXContent,null))};const __WEBPACK_DEFAULT_EXPORT__=componentMeta,__namedExportsOrder=["primaryButton","secondaryButton","ternaryButton","disabledStatus","buttonWithRightIcon","buttonWithLeftIcon"]},"./src/stories/documentation/components/Checkbox.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__,defaultStory:()=>defaultStory,disabled:()=>disabled,error:()=>error,helpText:()=>helpText});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_theme__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/theme.ts"),storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__=(__webpack_require__("./node_modules/@emotion/css/dist/emotion-css.esm.js"),__webpack_require__("./node_modules/storybook-dark-mode/dist/index.js"));function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const layoutProps={};function MDXContent({components,...props}){return(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("wrapper",_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.h_,{title:"documentation/Components/Checkbox",component:_theme__WEBPACK_IMPORTED_MODULE_3__.Checkbox,decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__.useDarkMode)(),mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,{mdxType:"Story"}))],parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h1",null,"Checkbox"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"This is a documentation of ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("inlineCode",{parentName:"p"},"<Checkbox/>")," component.\nThe checkbox allow the user to select one or more options from a list.\nThey are used to make multiple selections (from 0 to N elements) or to allow a binary choice,\nwhen the user can select or deselect a single option."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#structure"},"Structure")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#sizes"},"States")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#options"},"Options")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#properties"},"Properties"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Structure"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Checkbox is made up of the following elements:"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"a button / box - mandatory."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"a label, associated with the button - mandatory."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"an additional text for the buttons / labels - optional."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"a title, describing the context of the button group - mandatory for groups of boxes."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"an additional description for the legend - optional."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"an error message - required if a change of state is to be notified to the user.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"States"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Default"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Default",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Disabled"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Disabled",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Error"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Option to update"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Error",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Options"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Lists"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Option to update"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Help text"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Help text",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Properties"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.$4,{of:_theme__WEBPACK_IMPORTED_MODULE_3__.Checkbox,mdxType:"ArgsTable"}))}MDXContent.isMDXComponent=!0;const defaultStory=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));defaultStory.storyName="Default",defaultStory.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const disabled=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));disabled.storyName="Disabled",disabled.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const error=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));error.storyName="Error",error.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const helpText=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));helpText.storyName="Help text",helpText.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const componentMeta={title:"documentation/Components/Checkbox",parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__.useDarkMode)()},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,null))],component:_theme__WEBPACK_IMPORTED_MODULE_3__.Checkbox,includeStories:["defaultStory","disabled","error","helpText"]},mdxStoryNameToKey={Default:"defaultStory",Disabled:"disabled",Error:"error","Help text":"helpText"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.aT,{mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(MDXContent,null))};const __WEBPACK_DEFAULT_EXPORT__=componentMeta,__namedExportsOrder=["defaultStory","disabled","error","helpText"]},"./src/stories/documentation/components/NavigationBar.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,activeState:()=>activeState,default:()=>__WEBPACK_DEFAULT_EXPORT__,defaultState:()=>defaultState,disabledState:()=>disabledState,errorState:()=>errorState,helpTextField:()=>helpTextField,longHelpTextField:()=>longHelpTextField,passwordField:()=>passwordField,selectionField:()=>selectionField});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_theme__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/theme.ts"),storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__=(__webpack_require__("./node_modules/@emotion/css/dist/emotion-css.esm.js"),__webpack_require__("./node_modules/storybook-dark-mode/dist/index.js"));function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const ButtonBarButton=(name="ButtonBarButton",function MDXDefaultShortcode(props){return console.warn("Component "+name+" was not imported, exported, or provided by MDXProvider as global scope"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",props)});var name;const layoutProps={};function MDXContent({components,...props}){return(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("wrapper",_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.h_,{title:"documentation/Components/NavigationBar",component:_theme__WEBPACK_IMPORTED_MODULE_3__.k2,decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__.useDarkMode)(),mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,{mdxType:"Story"}))],parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h1",null,"Navigation Bar"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"This is a documentation of ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("inlineCode",{parentName:"p"},"<NavigationBar/>"),' component.\nA navigation bar is a group of related links, or "navigation items",\nthat indicate the action that will be taken or the content that will be revealed\nwhen the item is clicked. Navigation bars are commonly used for several purposes.'),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"First, to direct users to specific content on the current page or to an external page.\nSecond, and similar to tabs, as a control allowing the user to switch between content,\nshowing selected content and hiding other content, often using animated transitions\nto hide and reveal content. And then to finish also to carry out actions or operations\non the content of the page."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#structure"},"Structure")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#states"},"States")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#rules-of-use"},"Rules of use")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#properties"},"Properties"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Structure"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"It consists of the following elements:"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"A navigation bar")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"Menu items (Direct links or drop-down menu)"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"States"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Default state"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Default state",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(ButtonBarButton,{mdxType:"ButtonBarButton"},"hello"))))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Active state"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Active state",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Error state"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Error state",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Disabled state"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Disabled state",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Options"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Field with help text"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"An optional help text can be added to provide additional guidance to the user on how to interact with the component."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Help text field",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Field with a long help text"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"A long help text improve the guidance of help text for the user on how to interact with the component."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Long Help text field",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Selection field"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Selection field provide a choice of options from a list. The selected components\nare typically used in a form to allow users to make the desired selection from the list of options."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Selection field",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Passwords"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"If the information being entered by the user is sensitive, use the password option to protect it."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Password field",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Rules of use"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Keep the same label for fields requesting the same information"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"A help text may accompany this wording to clarify in particular the nature of the expected content.\nIf a precise format is expected, it should be indicated as clearly as possible and given examples."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Information should not be hidden in a tooltip or infobox, if this content is essential to enter the field."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"The eye spontaneously read from bottom to top, display the fields in a vertical list to facilitate reading and optimize ergonomics"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Use a primary button to validate an input field or a form, the secondary button will be used to go back, reset the form or abandon the input."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"The submission of a field must be followed by a message indicating the success or not of the desired action"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Label the form as (optional) when the input is not required."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Avoid the use of placeholder as it can confuse the user. However, if you wish to use, it is necessary\nto respect the proposed color in order to remain accessible, and its content must present information\nnot essential to understanding the field. In no case can it replace a label and it is only to be reserved\nfor secondary input aids.")))}MDXContent.isMDXComponent=!0;const defaultState=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(ButtonBarButton,null,"hello")))));defaultState.storyName="Default state",defaultState.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}>\n                    <ButtonBarButton>hello</ButtonBarButton>\n                </StoryProvider>\n            </Fragment>)"}};const activeState=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));activeState.storyName="Active state",activeState.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const errorState=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));errorState.storyName="Error state",errorState.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const disabledState=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));disabledState.storyName="Disabled state",disabledState.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const helpTextField=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));helpTextField.storyName="Help text field",helpTextField.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const longHelpTextField=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));longHelpTextField.storyName="Long Help text field",longHelpTextField.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const selectionField=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));selectionField.storyName="Selection field",selectionField.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const passwordField=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));passwordField.storyName="Password field",passwordField.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const componentMeta={title:"documentation/Components/NavigationBar",parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__.useDarkMode)()},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,null))],component:_theme__WEBPACK_IMPORTED_MODULE_3__.k2,includeStories:["defaultState","activeState","errorState","disabledState","helpTextField","longHelpTextField","selectionField","passwordField"]},mdxStoryNameToKey={"Default state":"defaultState","Active state":"activeState","Error state":"errorState","Disabled state":"disabledState","Help text field":"helpTextField","Long Help text field":"longHelpTextField","Selection field":"selectionField","Password field":"passwordField"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.aT,{mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(MDXContent,null))};const __WEBPACK_DEFAULT_EXPORT__=componentMeta,__namedExportsOrder=["defaultState","activeState","errorState","disabledState","helpTextField","longHelpTextField","selectionField","passwordField"]},"./src/stories/documentation/components/Tabs.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__,scrolling:()=>scrolling,selectionFollowsFocus:()=>selectionFollowsFocus,tabsLarge:()=>tabsLarge,tabsSmall:()=>tabsSmall});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_theme__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/theme.ts"),_Tabs__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/Tabs.tsx"),storybook_dark_mode__WEBPACK_IMPORTED_MODULE_6__=(__webpack_require__("./node_modules/@emotion/css/dist/emotion-css.esm.js"),__webpack_require__("./node_modules/storybook-dark-mode/dist/index.js"));function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const layoutProps={};function MDXContent({components,...props}){return(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("wrapper",_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.h_,{title:"documentation/Components/Tabs",component:_Tabs__WEBPACK_IMPORTED_MODULE_4__.m,decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_6__.useDarkMode)(),mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,{mdxType:"Story"}))],parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h1",null,"Tabs"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"This is a documentation of ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("inlineCode",{parentName:"p"},"<Tabs/>")," component.\nTabs are used to organize and navigate between related content on the same page.\nTabs ensure that large amounts of content can be organized in a manner that is easier\nto digest for the user. Tabs are arranged in bars of tabs called tab groups, with the tab\nlabel providing the user with an indication of what content will be revealed when the tab is selected."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#structure"},"Structure")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#sizes"},"States")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#sizes"},"Sizes")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#options"},"Options")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#rules-of-use"},"Rules of use")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#properties"},"Properties"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Structure"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Tabs are arranged in bars of tabs called tab groups, with the tab label providing the user\nwith an indication of what content will be revealed when the tab is selected."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"States"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Sizes"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Tabs come in two sizes, large and small. By default, tabs will be large unless the size prop is provided."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Large"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Tabs large",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Small"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Tabs small",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Options"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Scrolling"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"If there are more tabs provided than can fit within the viewport, tabs will scroll.\nThe user may scroll using a native control like a horizontal scroll wheel, or by using the scroll buttons."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Visibility of the scroll buttons can be controlled by the ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("inlineCode",{parentName:"p"},"areArrowsVisible")," prop.\nBy default, scroll buttons will appear automatically if needed. Options are..."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Scrolling",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Selection Follows Focus"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Selection Follows Focus",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Rules of use"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Sort tabs according to user needs, placing the most important first."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Tabs are relevant if the content can be usefully separated into clearly named sections."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Use the tab label to provide a clear and concise description of the content contained in that tab and to help differentiate between the different sections."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Do not use tabs if users need to read the content of all sections."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Do not use for too long content where tabs are difficult to find after reading."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Only one tab should be active at a given time."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Tabs should be positioned in a single, scrollable (if needed) row above the content it relates to."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Pay attention to the maximum number of tabs. consider further splitting the content or using a different navigation component."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Do not use tabs to create a sequence or progression of content that the user is expected to read in a given order."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Do not use tabs for comparing content (e.g. different model specifications)."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Do not use tabs to navigate users to a different page.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Properties"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.$4,{of:_Tabs__WEBPACK_IMPORTED_MODULE_4__.m,mdxType:"ArgsTable"}))}MDXContent.isMDXComponent=!0;const tabsLarge=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));tabsLarge.storyName="Tabs large",tabsLarge.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const tabsSmall=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));tabsSmall.storyName="Tabs small",tabsSmall.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const scrolling=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));scrolling.storyName="Scrolling",scrolling.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const selectionFollowsFocus=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));selectionFollowsFocus.storyName="Selection Follows Focus",selectionFollowsFocus.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const componentMeta={title:"documentation/Components/Tabs",parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_6__.useDarkMode)()},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,null))],component:_Tabs__WEBPACK_IMPORTED_MODULE_4__.m,includeStories:["tabsLarge","tabsSmall","scrolling","selectionFollowsFocus"]},mdxStoryNameToKey={"Tabs large":"tabsLarge","Tabs small":"tabsSmall",Scrolling:"scrolling","Selection Follows Focus":"selectionFollowsFocus"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.aT,{mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(MDXContent,null))};const __WEBPACK_DEFAULT_EXPORT__=componentMeta,__namedExportsOrder=["tabsLarge","tabsSmall","scrolling","selectionFollowsFocus"]},"./src/stories/documentation/components/Textfield.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,activeState:()=>activeState,default:()=>__WEBPACK_DEFAULT_EXPORT__,defaultState:()=>defaultState,disabledState:()=>disabledState,errorState:()=>errorState,helpTextField:()=>helpTextField,longHelpTextField:()=>longHelpTextField,passwordField:()=>passwordField,selectionField:()=>selectionField});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_theme__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/theme.ts"),storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__=(__webpack_require__("./node_modules/@emotion/css/dist/emotion-css.esm.js"),__webpack_require__("./node_modules/storybook-dark-mode/dist/index.js"));function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const layoutProps={};function MDXContent({components,...props}){return(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("wrapper",_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.h_,{title:"documentation/Components/Texfield",component:_theme__WEBPACK_IMPORTED_MODULE_3__.Texfield,decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__.useDarkMode)(),mdxType:"StoryProvider"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,{mdxType:"Story"}))],parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h1",null,"Texfield"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"This is a documentation of ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("inlineCode",{parentName:"p"},"<Textfield/>")," component.\nText fields are used when the user is required to input short form content,\nincluding text, numbers, e-mail addresses, or passwords."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#structure"},"Structure")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#states"},"States")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#options"},"Options")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#rules-of-use"},"Rules of use")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"li",href:"#properties"},"Properties"))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Structure"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"The input field is made up of the following elements:"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"one field - required.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"a label, linked to the field - mandatory.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"an additional description (helptext) - optional.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"one or two icons, which can be modified - optional.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",{parentName:"li"},"an error message - required if a change of state is to be notified to the user."))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"States"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Default state"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Default state",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Active state"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Active state",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Error state"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Error state",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Disabled state"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Disabled state",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Options"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Field with help text"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"An optional help text can be added to provide additional guidance to the user on how to interact with the component."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Help text field",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Field with a long help text"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"A long help text improve the guidance of help text for the user on how to interact with the component."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Long Help text field",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Selection field"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"Selection field provide a choice of options from a list. The selected components\nare typically used in a form to allow users to make the desired selection from the list of options."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Selection field",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h3",null,"Passwords"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"If the information being entered by the user is sensitive, use the password option to protect it."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Xz,{mdxType:"Canvas"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.oG,{name:"Password field",mdxType:"Story"},[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark,mdxType:"Fragment"},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark,mdxType:"StoryProvider"})))))),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Rules of use"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("ul",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Keep the same label for fields requesting the same information"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"A help text may accompany this wording to clarify in particular the nature of the expected content.\nIf a precise format is expected, it should be indicated as clearly as possible and given examples."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Information should not be hidden in a tooltip or infobox, if this content is essential to enter the field."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"The eye spontaneously read from bottom to top, display the fields in a vertical list to facilitate reading and optimize ergonomics"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Use a primary button to validate an input field or a form, the secondary button will be used to go back, reset the form or abandon the input."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"The submission of a field must be followed by a message indicating the success or not of the desired action"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Label the form as (optional) when the input is not required."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("li",{parentName:"ul"},"Avoid the use of placeholder as it can confuse the user. However, if you wish to use, it is necessary\nto respect the proposed color in order to remain accessible, and its content must present information\nnot essential to understanding the field. In no case can it replace a label and it is only to be reserved\nfor secondary input aids.")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("h2",null,"Properties"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.$4,{of:_theme__WEBPACK_IMPORTED_MODULE_3__.Texfield,mdxType:"ArgsTable"}))}MDXContent.isMDXComponent=!0;const defaultState=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));defaultState.storyName="Default state",defaultState.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const activeState=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));activeState.storyName="Active state",activeState.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const errorState=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));errorState.storyName="Error state",errorState.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const disabledState=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));disabledState.storyName="Disabled state",disabledState.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const helpTextField=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));helpTextField.storyName="Help text field",helpTextField.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const longHelpTextField=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));longHelpTextField.storyName="Long Help text field",longHelpTextField.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const selectionField=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));selectionField.storyName="Selection field",selectionField.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const passwordField=()=>[!1,!0].map((dark=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{key:dark},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark}))));passwordField.storyName="Password field",passwordField.parameters={storySource:{source:"[false, true].map(dark => <Fragment key={dark}>\n                <StoryProvider dark={dark}></StoryProvider>\n            </Fragment>)"}};const componentMeta={title:"documentation/Components/Texfield",parameters:{viewMode:"docs",previewTabs:{canvas:{hidden:!0}}},decorators:[Story=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_theme__WEBPACK_IMPORTED_MODULE_3__.FR,{dark:(0,storybook_dark_mode__WEBPACK_IMPORTED_MODULE_5__.useDarkMode)()},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Story,null))],component:_theme__WEBPACK_IMPORTED_MODULE_3__.Texfield,includeStories:["defaultState","activeState","errorState","disabledState","helpTextField","longHelpTextField","selectionField","passwordField"]},mdxStoryNameToKey={"Default state":"defaultState","Active state":"activeState","Error state":"errorState","Disabled state":"disabledState","Help text field":"helpTextField","Long Help text field":"longHelpTextField","Selection field":"selectionField","Password field":"passwordField"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.aT,{mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(MDXContent,null))};const __WEBPACK_DEFAULT_EXPORT__=componentMeta,__namedExportsOrder=["defaultState","activeState","errorState","disabledState","helpTextField","longHelpTextField","selectionField","passwordField"]},"./src/stories/index.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,__page:()=>__page,default:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("./node_modules/react/index.js");var _mdx_js_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js");function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const Meta=(name="Meta",function MDXDefaultShortcode(props){return console.warn("Component "+name+" was not imported, exported, or provided by MDXProvider as global scope"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("div",props)});var name;const layoutProps={};function MDXContent({components,...props}){return(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("wrapper",_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(Meta,{title:"Quick start",mdxType:"Meta"}),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-bash"},"yarn add onyxia-ui @mui/material @emotion/react @emotion/styled tss-react powerhooks\n\n# If you plan on using icons from: https://mui.com/components/material-icons/\nyarn add @mui/icons-material\n")),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"At this stage, the documentation is under the form of a very simple ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"p",href:"https://github.com/garronej/onyxia-ui/tree/main/src/test"},"demo project"),".",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("br",{parentName:"p"}),"\n","The actual theme configuration ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"p",href:"https://github.com/garronej/onyxia-ui/blob/main/src/test/src/theme.ts"},"happens here"),".",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("br",{parentName:"p"}),"\n","If you want to experiment with it you can run the demo app with:"),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("p",null,"NOTE for ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"p",href:"https://storybook.js.org"},"Storybook")," users: As of writing this lines storybook still uses by default emotion 10.",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("br",{parentName:"p"}),"\n","mui and TSS runs emotion 11 so there is ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("a",{parentName:"p",href:"https://github.com/garronej/onyxia-ui/blob/324de62248074582b227e584c53fb2e123f5325f/.storybook/main.js#L31-L32"},"some changes"),"\nto be made to your ",(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("inlineCode",{parentName:"p"},".storybook/main.js")," to make it uses emotion 11."),(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("pre",null,(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)("code",{parentName:"pre",className:"language-bash"},"git clone https://github.com/garronej/onyxia-ui\ncd onyxia-ui\nyarn\nyarn build\nyarn start\n")))}MDXContent.isMDXComponent=!0;const __page=()=>{throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};const componentMeta={title:"Quick start",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.aT,{mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.kt)(MDXContent,null))};const __WEBPACK_DEFAULT_EXPORT__=componentMeta,__namedExportsOrder=["__page"]},"./src/stories/Alert.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueNoTitle:()=>VueNoTitle,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_Alert__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/Alert.tsx"),_theme__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/theme.ts"),_sectionName__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/stories/getStory.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_2__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_4__.j,wrappedComponent:{Alert:_Alert__WEBPACK_IMPORTED_MODULE_0__.b},defaultWidth:500}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var VueNoTitle=getStory({doDisplayCross:!0,severity:"success",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_theme__WEBPACK_IMPORTED_MODULE_1__.xv,{typo:"body 1",children:"This is the text"})});VueNoTitle.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({storySource:{source:'getStory({\n    "doDisplayCross": true,\n    "severity": "success",\n    "children": <Text typo="body 1">This is the text</Text>,\n})'}},VueNoTitle.parameters);var __namedExportsOrder=["VueNoTitle"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Alert.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Alert.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Breadcrumb.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,VueFromRoot:()=>VueFromRoot,VueMinDepth2:()=>VueMinDepth2,VueOtherSeparator:()=>VueOtherSeparator,VueStartFromCwd:()=>VueStartFromCwd,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Breadcrumb_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react=__webpack_require__("./node_modules/react/index.js"),useEffectOnValueChange=__webpack_require__("./node_modules/powerhooks/useEffectOnValueChange.js"),toConsumableArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),hooks=__webpack_require__("./node_modules/evt/hooks/index.js"),lib=__webpack_require__("./node_modules/evt/lib/index.js"),useCallbackFactory=__webpack_require__("./node_modules/powerhooks/useCallbackFactory.js"),assert=__webpack_require__("./node_modules/tsafe/assert.js"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js"),useNonPostableEvtLike=__webpack_require__("./src/tools/useNonPostableEvtLike.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),Breadcrumb=(0,react.memo)((function(props){var _props$minDepth=props.minDepth,minDepth=void 0===_props$minDepth?0:_props$minDepth,_props$isNavigationDi=props.isNavigationDisabled,isNavigationDisabled=void 0!==_props$isNavigationDi&&_props$isNavigationDi,onNavigate=props.onNavigate,className=props.className,evtActionLike=props.evtAction,_props$separatorChar=props.separatorChar,separatorChar=void 0===_props$separatorChar?"/":_props$separatorChar,evtAction=(0,useNonPostableEvtLike._)(evtActionLike),_useState=(0,react.useState)(props.path),_useState2=(0,slicedToArray.Z)(_useState,2),path=_useState2[0],setPath=_useState2[1],_useState3=(0,react.useState)(!1),_useState4=(0,slicedToArray.Z)(_useState3,2),isFocused=_useState4[0],setIsFocused=_useState4[1],_useState5=(0,react.useState)((function(){return lib.Evt.create(props.path)})),evtPropsPath=(0,slicedToArray.Z)(_useState5,1)[0];(0,react.useEffect)((function(){evtPropsPath.state=props.path}),[JSON.stringify(props.path)]),(0,hooks.useEvt)((function(ctx){return evtPropsPath.toStateless(ctx).attach((function(path){setIsFocused(!1),setPath(path)}))}),[evtPropsPath]),(0,hooks.useEvt)((function(ctx){var evtDisplayFeedback=null==evtAction?void 0:evtAction.pipe((function(data){return"DISPLAY COPY FEEDBACK"===data.action?[data.basename]:null}));null==evtDisplayFeedback||evtDisplayFeedback.attach(ctx,(function(basename){setIsFocused(!0),setPath([].concat((0,toConsumableArray.Z)(evtPropsPath.state),(0,toConsumableArray.Z)(basename?[basename]:[])));var scopedCtx=lib.Evt.newCtx(),timer=setTimeout((function(){scopedCtx.done(),setIsFocused(!1),setPath(evtPropsPath.state)}),500);scopedCtx.evtDoneOrAborted.attachOnce((function(){return clearTimeout(timer)})),evtDisplayFeedback.attachOnce(scopedCtx,(function(){return scopedCtx.done()})),evtPropsPath.toStateless(scopedCtx).attachOnce((function(){return scopedCtx.done()})),ctx.evtDoneOrAborted.attachOnce(scopedCtx,(function(){return scopedCtx.done()}))}))}),[evtAction,evtPropsPath]);var onClickFactory=(0,useCallbackFactory.useCallbackFactory)((function(_ref){var _ref2=(0,slicedToArray.Z)(_ref,2),partialPath=_ref2[0];return _ref2[1]?onNavigate({path:partialPath,upCount:path.length-partialPath.length}):(0,assert.assert)(!1)})),partialPaths=(0,react.useMemo)((function(){return function getPartialPaths(params){var path=params.path,isNavigationDisabled=params.isNavigationDisabled,minDepth=params.minDepth;return path.map((function(){for(var _len=arguments.length,_ref4=new Array(_len),_key=0;_key<_len;_key++)_ref4[_key]=arguments[_key];var i=_ref4[1],isLast=i===path.length-1;return{partialPath:(0,toConsumableArray.Z)(path).splice(0,i+1),isLast,isClickable:!isNavigationDisabled&&(!isLast&&i>=minDepth)}}))}({path,minDepth,isNavigationDisabled})}),[JSON.stringify(path),minDepth,isNavigationDisabled]);return(0,jsx_runtime.jsx)("div",{className,children:partialPaths.map((function(_ref3){var isClickable=_ref3.isClickable,isLast=_ref3.isLast,partialPath=_ref3.partialPath;return(0,jsx_runtime.jsx)(Section,{isClickable,isLast,partialPath,isFocused,onClick:onClickFactory(partialPath,isClickable),separatorChar},JSON.stringify(partialPath))}))})}));var _ref5=function(){function Section(props){var partialPath=props.partialPath,isLast=props.isLast,onClick=props.onClick,isFocused=props.isFocused,isClickable=props.isClickable,separatorChar=props.separatorChar,text=(0,react.useMemo)((function(){return"".concat(partialPath.slice(-1)[0]).concat(isLast?"":" ".concat(separatorChar))}),[partialPath,isLast]),classes=useStyles({isClickable,isFocused,isLast}).classes;return(0,jsx_runtime.jsx)(TextBase.x,{typo:"body 1",className:classes.root,componentProps:{onClick:isClickable?onClick:void 0},fixedSize_enabled:!0,fixedSize_fontWeight:500,children:text})}var useStyles=ThemeProvider.IR.withName("".concat((0,symToStr.symToStr)({Breadcrumb})).concat((0,symToStr.symToStr)({Section}))).withParams().create((function(_ref6){var theme=_ref6.theme,isClickable=_ref6.isClickable,isFocused=_ref6.isFocused,isLast=_ref6.isLast;return{root:(0,objectSpread2.Z)((0,objectSpread2.Z)({},isClickable?{cursor:"pointer","&:hover, &:focus":{fontWeight:500,color:theme.colors.useCases.typography.textPrimary},"&:active":{color:theme.colors.useCases.typography.textFocus}}:{}),{},{color:theme.colors.useCases.typography[isFocused?"textFocus":isLast?"textPrimary":"textSecondary"]})}}));return{Section}}(),Section=_ref5.Section;try{Breadcrumb.displayName="Breadcrumb",Breadcrumb.__docgenInfo={description:"",displayName:"Breadcrumb",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},path:{defaultValue:null,description:"",name:"path",required:!0,type:{name:"string[]"}},minDepth:{defaultValue:null,description:"Default: 0",name:"minDepth",required:!1,type:{name:"number"}},isNavigationDisabled:{defaultValue:null,description:"Default false",name:"isNavigationDisabled",required:!1,type:{name:"boolean"}},onNavigate:{defaultValue:null,description:"",name:"onNavigate",required:!0,type:{name:"(params: { path: string[]; upCount: number; }) => void"}},evtAction:{defaultValue:null,description:"",name:"evtAction",required:!1,type:{name:'NonPostableEvtLike<{ action: "DISPLAY COPY FEEDBACK"; basename?: string; }>'}},separatorChar:{defaultValue:null,description:'Default "/", can be for example ">" or "\\\\"',name:"separatorChar",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Breadcrumb.tsx#Breadcrumb"]={docgenInfo:Breadcrumb.__docgenInfo,name:"Breadcrumb",path:"src/Breadcrumb.tsx#Breadcrumb"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx");var _getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:(0,defineProperty.Z)({},(0,symToStr.symToStr)({Breadcrumb}),(function Component(props){var tick=props.tick,minDepth=props.minDepth,path=props.path,onNavigate=props.onNavigate,isNavigationDisabled=props.isNavigationDisabled,separatorChar=props.separatorChar,_useReducer=(0,react.useReducer)((function(index){return index+1}),0),_useReducer2=(0,slicedToArray.Z)(_useReducer,2),index=_useReducer2[0],incrementIndex=_useReducer2[1];(0,useEffectOnValueChange.useEffectOnValueChange)((function(){incrementIndex()}),[tick]);var _useState=(0,react.useState)((function(){return lib.Evt.create()})),evtAction=(0,slicedToArray.Z)(_useState,1)[0];return(0,useEffectOnValueChange.useEffectOnValueChange)((function(){evtAction.post({action:"DISPLAY COPY FEEDBACK",basename:"foo.svg"})}),[evtAction,index]),(0,jsx_runtime.jsx)(Breadcrumb,{isNavigationDisabled,evtAction,minDepth,path,separatorChar,onNavigate})})),argTypes:{tick:{control:{type:"boolean"}}}}),meta=_getStoryFactory.meta,Breadcrumb_stories_getStory=_getStoryFactory.getStory;const Breadcrumb_stories=meta;var VueDefault=Breadcrumb_stories_getStory((0,objectSpread2.Z)({path:["aaa","bbb","cccc","dddd"],isNavigationDisabled:!1,minDepth:0,tick:!0},(0,getStory.K)(["onNavigate"]))),VueOtherSeparator=Breadcrumb_stories_getStory((0,objectSpread2.Z)({path:["aaa","bbb","cccc","dddd"],separatorChar:"/",isNavigationDisabled:!1,minDepth:0,tick:!0},(0,getStory.K)(["onNavigate"]))),VueMinDepth2=Breadcrumb_stories_getStory((0,objectSpread2.Z)({path:["aaa","bbb","cccc","dddd"],separatorChar:"/",isNavigationDisabled:!1,minDepth:2,tick:!0},(0,getStory.K)(["onNavigate"]))),VueFromRoot=Breadcrumb_stories_getStory((0,objectSpread2.Z)({path:["","aaa","bbb","cccc","dddd"],isNavigationDisabled:!1,minDepth:0,tick:!0},(0,getStory.K)(["onNavigate"]))),VueStartFromCwd=Breadcrumb_stories_getStory((0,objectSpread2.Z)({path:[".","aaa","bbb","cccc","dddd"],isNavigationDisabled:!1,minDepth:0,tick:!0},(0,getStory.K)(["onNavigate"])));VueDefault.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "path": ["aaa", "bbb", "cccc", "dddd"],\n    "isNavigationDisabled": false,\n    "minDepth": 0,\n    "tick": true,\n    ...logCallbacks(["onNavigate"]),\n})'}},VueDefault.parameters),VueOtherSeparator.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "path": ["aaa", "bbb", "cccc", "dddd"],\n    "separatorChar": "/",\n    "isNavigationDisabled": false,\n    "minDepth": 0,\n    "tick": true,\n    ...logCallbacks(["onNavigate"]),\n})'}},VueOtherSeparator.parameters),VueMinDepth2.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "path": ["aaa", "bbb", "cccc", "dddd"],\n    "separatorChar": "/",\n    "isNavigationDisabled": false,\n    "minDepth": 2,\n    "tick": true,\n    ...logCallbacks(["onNavigate"]),\n})'}},VueMinDepth2.parameters),VueFromRoot.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "path": ["", "aaa", "bbb", "cccc", "dddd"],\n    "isNavigationDisabled": false,\n    "minDepth": 0,\n    "tick": true,\n    ...logCallbacks(["onNavigate"]),\n})'}},VueFromRoot.parameters),VueStartFromCwd.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "path": [".", "aaa", "bbb", "cccc", "dddd"],\n    "isNavigationDisabled": false,\n    "minDepth": 0,\n    "tick": true,\n    ...logCallbacks(["onNavigate"]),\n})'}},VueStartFromCwd.parameters);var __namedExportsOrder=["VueDefault","VueOtherSeparator","VueMinDepth2","VueFromRoot","VueStartFromCwd"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Breadcrumb.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Breadcrumb.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Button.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueNoIcon:()=>VueNoIcon,VueWithStartIcon:()=>VueWithStartIcon,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_theme__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/stories/theme.ts"),_sectionName__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/getStory.tsx"),_getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_2__.j,argTypes:{variant:{options:["primary","secondary","ternary"],control:{type:"radio"}}},wrappedComponent:{Button:_theme__WEBPACK_IMPORTED_MODULE_0__.zx}}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var VueNoIcon=getStory((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({children:"Default",variant:"primary"},(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.K)(["onClick"]))),VueWithStartIcon=getStory((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({children:"Foo bar",startIcon:"help",variant:"primary"},(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.K)(["onClick"])));VueNoIcon.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'getStory({\n    "children": "Default",\n    "variant": "primary",\n    ...logCallbacks(["onClick"]),\n})'}},VueNoIcon.parameters),VueWithStartIcon.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'getStory({\n    "children": "Foo bar",\n    "startIcon": "help",\n    "variant": "primary",\n    ...logCallbacks(["onClick"]),\n})'}},VueWithStartIcon.parameters);var __namedExportsOrder=["VueNoIcon","VueWithStartIcon"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Button.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Button.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/ButtonBar.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_ButtonBar__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/ButtonBar.tsx"),_sectionName__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/getStory.tsx"),_theme__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/stories/theme.ts"),ButtonBar=(0,_ButtonBar__WEBPACK_IMPORTED_MODULE_0__.c)({Icon:_theme__WEBPACK_IMPORTED_MODULE_2__.JO}).ButtonBar,_getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_3__.j,wrappedComponent:{ButtonBar}}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var VueDefault=getStory((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({buttons:[{buttonId:"btn1",icon:"help",isDisabled:!1,label:"Label 1"},{buttonId:"btn2",icon:"home",isDisabled:!1,label:"Label 2"},{buttonId:"btn3",icon:"services",isDisabled:!0,label:"Label 3"},{buttonId:"btn4",icon:"tour",isDisabled:!1,label:"Label 4"}]},(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.K)(["onClick"])));VueDefault.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'getStory({\n    "buttons": [\n        {\n            "buttonId": "btn1",\n            "icon": "help",\n            "isDisabled": false,\n            "label": "Label 1",\n        },\n        {\n            "buttonId": "btn2",\n            "icon": "home",\n            "isDisabled": false,\n            "label": "Label 2",\n        },\n        {\n            "buttonId": "btn3",\n            "icon": "services",\n            "isDisabled": true,\n            "label": "Label 3",\n        },\n        {\n            "buttonId": "btn4",\n            "icon": "tour",\n            "isDisabled": false,\n            "label": "Label 4",\n        },\n    ] as const,\n    ...logCallbacks(["onClick"]),\n})'}},VueDefault.parameters);var __namedExportsOrder=["VueDefault"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/ButtonBar.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/ButtonBar.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/ButtonBarButton.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_ButtonBarButton__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/ButtonBarButton.tsx"),_sectionName__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/getStory.tsx"),_theme__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/stories/theme.ts"),ButtonBarButton=(0,_ButtonBarButton__WEBPACK_IMPORTED_MODULE_0__.q)({Icon:_theme__WEBPACK_IMPORTED_MODULE_2__.JO}).ButtonBarButton,_getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_3__.j,wrappedComponent:{ButtonBarButton}}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var VueDefault=getStory((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({children:"Click me",disabled:!1,startIcon:"services"},(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.K)(["onClick"])));VueDefault.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'getStory({\n    "children": "Click me",\n    "disabled": false,\n    "startIcon": "services",\n    ...logCallbacks(["onClick"]),\n})'}},VueDefault.parameters);var __namedExportsOrder=["VueDefault"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/ButtonBarButton.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/ButtonBarButton.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Card.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueNoTitle:()=>VueNoTitle,VueWithDivider:()=>VueWithDivider,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Card_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react=__webpack_require__("./node_modules/react/index.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),assert=__webpack_require__("./node_modules/tsafe/assert.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","aboveDivider","children"],Card=(0,react.memo)((0,react.forwardRef)((function(props,ref){var className=props.className,aboveDivider=props.aboveDivider,children=props.children,rest=(0,objectWithoutProperties.Z)(props,_excluded);(0,assert.assert)();var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;return(0,jsx_runtime.jsxs)("div",(0,objectSpread2.Z)((0,objectSpread2.Z)({ref,className:cx(classes.root,className)},rest),{},{children:[void 0!==aboveDivider&&(0,jsx_runtime.jsx)("div",{className:classes.aboveDivider,children:aboveDivider}),(0,jsx_runtime.jsx)("div",{className:classes.belowDivider,children})]}))}))),useStyles=ThemeProvider.IR.withName({Card}).create((function(_ref){var theme=_ref.theme;return{root:{borderRadius:8,boxShadow:theme.shadows[1],backgroundColor:theme.colors.useCases.surfaces.surface1,"&:hover":{boxShadow:theme.shadows[6]},display:"flex",flexDirection:"column"},aboveDivider:{padding:theme.spacing({topBottom:3,rightLeft:4}),borderBottom:"1px solid ".concat(theme.colors.useCases.typography.textTertiary),boxSizing:"border-box"},belowDivider:{padding:theme.spacing(4),paddingTop:theme.spacing(3),flex:1,display:"flex",flexDirection:"column"}}}));try{Card.displayName="Card",Card.__docgenInfo={description:"",displayName:"Card",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},aboveDivider:{defaultValue:null,description:"",name:"aboveDivider",required:!1,type:{name:"ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Card.tsx#Card"]={docgenInfo:Card.__docgenInfo,name:"Card",path:"src/Card.tsx#Card"})}catch(__react_docgen_typescript_loader_error){}var theme=__webpack_require__("./src/stories/theme.ts"),sectionName=__webpack_require__("./src/stories/sectionName.ts"),_getStoryFactory=(0,__webpack_require__("./src/stories/getStory.tsx").A)({sectionName:sectionName.j,wrappedComponent:{Card}}),meta=_getStoryFactory.meta,Card_stories_getStory=_getStoryFactory.getStory;const Card_stories=meta;var VueNoTitle=Card_stories_getStory({children:(0,jsx_runtime.jsx)(theme.xv,{typo:"body 1",children:"I am the body"})}),VueWithDivider=Card_stories_getStory({aboveDivider:(0,jsx_runtime.jsx)(theme.xv,{typo:"object heading",children:"This is the title"}),children:(0,jsx_runtime.jsx)(theme.xv,{typo:"body 1",children:"I am the body"})});VueNoTitle.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "children": <Text typo="body 1">I am the body</Text>,\n})'}},VueNoTitle.parameters),VueWithDivider.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "aboveDivider": <Text typo="object heading">This is the title</Text>,\n    "children": <Text typo="body 1">I am the body</Text>,\n})'}},VueWithDivider.parameters);var __namedExportsOrder=["VueNoTitle","VueWithDivider"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Card.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Card.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Checkbox.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueControlled:()=>VueControlled,VueUncontrolled:()=>VueUncontrolled,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Checkbox_stories});var defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react=__webpack_require__("./node_modules/react/index.js"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),Checkbox=__webpack_require__("./node_modules/@mui/material/Checkbox/Checkbox.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["defaultChecked"],Checkbox_Checkbox=(0,react.memo)((function(props){var props_defaultChecked=props.defaultChecked,rest=(0,objectWithoutProperties.Z)(props,_excluded),defaultChecked=void 0!==rest.checked&&(null!=props_defaultChecked&&props_defaultChecked),_useState=(0,react.useState)(defaultChecked),_useState2=(0,slicedToArray.Z)(_useState,2),isChecked=_useState2[0],setIsChecked=_useState2[1];(0,react.useEffect)((function(){return setIsChecked(defaultChecked)}),[defaultChecked]);var onChange=(0,useConstCallback.useConstCallback)((function(event,checked){var _rest$onChange;setIsChecked(checked),null===(_rest$onChange=rest.onChange)||void 0===_rest$onChange||_rest$onChange.call(rest,event,checked)}));return(0,jsx_runtime.jsx)(Checkbox.Z,(0,objectSpread2.Z)((0,objectSpread2.Z)({},rest),void 0!==rest.checked?{value:rest.checked?"on":"off"}:{checked:isChecked,onChange,value:isChecked?"on":"off"}))}));try{Checkbox_Checkbox.displayName="Checkbox",Checkbox_Checkbox.__docgenInfo={description:"",displayName:"Checkbox",props:{component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:"ElementType<any>"}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null"}},action:{defaultValue:null,description:"A ref for imperative actions.\nIt currently only supports `focusVisible()` action.",name:"action",required:!1,type:{name:"Ref<ButtonBaseActions>"}},centerRipple:{defaultValue:{value:"false"},description:"If `true`, the ripples are centered.\nThey won't start at the cursor interaction position.",name:"centerRipple",required:!1,type:{name:"boolean"}},disableTouchRipple:{defaultValue:{value:"false"},description:"If `true`, the touch ripple effect is disabled.",name:"disableTouchRipple",required:!1,type:{name:"boolean"}},focusRipple:{defaultValue:{value:"false"},description:"If `true`, the base button will have a keyboard focus ripple.",name:"focusRipple",required:!1,type:{name:"boolean"}},focusVisibleClassName:{defaultValue:null,description:"This prop can help identify which element has keyboard focus.\nThe class name will be applied when the element gains the focus through keyboard interaction.\nIt's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).\nThe rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).\nA [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components\nif needed.",name:"focusVisibleClassName",required:!1,type:{name:"string"}},LinkComponent:{defaultValue:{value:"'a'"},description:"The component used to render a link when the `href` prop is provided.",name:"LinkComponent",required:!1,type:{name:"ElementType<any>"}},onFocusVisible:{defaultValue:null,description:"Callback fired when the component is focused with a keyboard.\nWe trigger a `onFocus` callback too.",name:"onFocusVisible",required:!1,type:{name:"FocusEventHandler<any>"}},TouchRippleProps:{defaultValue:null,description:"Props applied to the `TouchRipple` element.",name:"TouchRippleProps",required:!1,type:{name:"Partial<TouchRippleProps>"}},touchRippleRef:{defaultValue:null,description:"A ref that points to the `TouchRipple` element.",name:"touchRippleRef",required:!1,type:{name:"Ref<TouchRippleActions>"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Checkbox.tsx#Checkbox"]={docgenInfo:Checkbox_Checkbox.__docgenInfo,name:"Checkbox",path:"src/Checkbox.tsx#Checkbox"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js"),Checkbox_stories_excluded=["mode"];function ComponentControlled(props){var defaultIsChecked=props.defaultIsChecked,_useState=(0,react.useState)(defaultIsChecked),_useState2=(0,slicedToArray.Z)(_useState,2),isChecked=_useState2[0],setIsChecked=_useState2[1];(0,react.useEffect)((function(){return setIsChecked(defaultIsChecked)}),[defaultIsChecked]);var onChange=(0,useConstCallback.useConstCallback)((function(_event,checked){return setIsChecked(checked)}));return(0,jsx_runtime.jsx)(Checkbox_Checkbox,{checked:isChecked,onChange})}function ComponentUncontrolled(props){var defaultIsChecked=props.defaultIsChecked;return(0,jsx_runtime.jsx)(Checkbox_Checkbox,{defaultChecked:defaultIsChecked})}var _getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:(0,defineProperty.Z)({},(0,symToStr.symToStr)({Checkbox:Checkbox_Checkbox}),(function Component(props){var mode=props.mode,rest=(0,objectWithoutProperties.Z)(props,Checkbox_stories_excluded);switch(mode){case"controlled":return(0,jsx_runtime.jsx)(ComponentControlled,(0,objectSpread2.Z)({},rest));case"uncontrolled":return(0,jsx_runtime.jsx)(ComponentUncontrolled,(0,objectSpread2.Z)({},rest))}}))}),meta=_getStoryFactory.meta,Checkbox_stories_getStory=_getStoryFactory.getStory;const Checkbox_stories=meta;var VueControlled=Checkbox_stories_getStory({mode:"controlled",defaultIsChecked:!1}),VueUncontrolled=Checkbox_stories_getStory({mode:"uncontrolled",defaultIsChecked:!1});VueControlled.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "mode": "controlled",\n    "defaultIsChecked": false,\n})'}},VueControlled.parameters),VueUncontrolled.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "mode": "uncontrolled",\n    "defaultIsChecked": false,\n})'}},VueUncontrolled.parameters);var __namedExportsOrder=["VueControlled","VueUncontrolled"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Checkbox.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Checkbox.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/CollapsibleSectionHeader.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueCollapsed:()=>VueCollapsed,VueExpanded:()=>VueExpanded,__namedExportsOrder:()=>__namedExportsOrder,default:()=>CollapsibleSectionHeader_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),react=__webpack_require__("./node_modules/react/index.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),Link=__webpack_require__("./node_modules/@mui/material/Link/Link.js"),ChevronLeft=__webpack_require__("./node_modules/@mui/icons-material/ChevronLeft.js"),IconButton=__webpack_require__("./src/IconButton.tsx"),Icon=__webpack_require__("./src/Icon.tsx"),pxToNumber=__webpack_require__("./src/tools/pxToNumber.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),CollapsibleSectionHeader_IconButton=(0,IconButton.k)((0,Icon.I)({chevronLeft:ChevronLeft.Z})).IconButton,CollapsibleSectionHeader=(0,react.memo)((function(props){var className=props.className,title=props.title,isCollapsed=props.isCollapsed,onToggleIsCollapsed=props.onToggleIsCollapsed,total=props.total,_props$showAllStr=props.showAllStr,showAllStr=void 0===_props$showAllStr?"Show all":_props$showAllStr,_useStyles=useStyles({isCollapsed}),classes=_useStyles.classes,cx=_useStyles.cx;return(0,jsx_runtime.jsxs)("div",{className:cx(classes.root,className),children:[(0,jsx_runtime.jsx)(CollapsibleSectionHeader_IconButton,{className:classes.chevron,size:"large",iconId:"chevronLeft",onClick:onToggleIsCollapsed}),(0,jsx_runtime.jsxs)(TextBase.x,{typo:"section heading",children:[" ",title," "]}),(0,jsx_runtime.jsx)("div",{style:{flex:"1"}}),isCollapsed&&(0,jsx_runtime.jsxs)(Link.Z,{underline:"hover",onClick:onToggleIsCollapsed,className:classes.link,children:[showAllStr,void 0!==total&&(0,jsx_runtime.jsxs)("span",{children:[" (",total,")"]})]})]})})),useStyles=ThemeProvider.IR.withName({CollapsibleSectionHeader}).withParams().create((function(_ref){var theme=_ref.theme,isCollapsed=_ref.isCollapsed;return{root:{display:"flex",alignItems:"center"},chevron:(0,objectSpread2.Z)({paddingLeft:0},isCollapsed?{width:0,paddingLeft:0,paddingRight:0,visibility:"hidden"}:{}),link:{cursor:"pointer",paddingTop:.183*(0,pxToNumber.F)(theme.typography.variants["section heading"].style.lineHeight)}}}));try{CollapsibleSectionHeader.displayName="CollapsibleSectionHeader",CollapsibleSectionHeader.__docgenInfo={description:"",displayName:"CollapsibleSectionHeader",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},isCollapsed:{defaultValue:null,description:"",name:"isCollapsed",required:!0,type:{name:"boolean"}},onToggleIsCollapsed:{defaultValue:null,description:"",name:"onToggleIsCollapsed",required:!0,type:{name:"() => void"}},title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"string"}},total:{defaultValue:null,description:"",name:"total",required:!1,type:{name:"number"}},showAllStr:{defaultValue:null,description:'Default "Show all", provide your own string for internationalization.',name:"showAllStr",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/CollapsibleSectionHeader.tsx#CollapsibleSectionHeader"]={docgenInfo:CollapsibleSectionHeader.__docgenInfo,name:"CollapsibleSectionHeader",path:"src/CollapsibleSectionHeader.tsx#CollapsibleSectionHeader"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),_getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:{CollapsibleSectionHeader},defaultWidth:600}),meta=_getStoryFactory.meta,CollapsibleSectionHeader_stories_getStory=_getStoryFactory.getStory;const CollapsibleSectionHeader_stories=meta;var VueCollapsed=CollapsibleSectionHeader_stories_getStory((0,objectSpread2.Z)({isCollapsed:!0,title:"This is the name of the section",total:123},(0,getStory.K)(["onToggleIsCollapsed"]))),VueExpanded=CollapsibleSectionHeader_stories_getStory((0,objectSpread2.Z)({isCollapsed:!1,title:"This is the name of the section",total:123},(0,getStory.K)(["onToggleIsCollapsed"])));VueCollapsed.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "isCollapsed": true,\n    "title": "This is the name of the section",\n    "total": 123,\n    ...logCallbacks(["onToggleIsCollapsed"]),\n})'}},VueCollapsed.parameters),VueExpanded.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "isCollapsed": false,\n    "title": "This is the name of the section",\n    "total": 123,\n    ...logCallbacks(["onToggleIsCollapsed"]),\n})'}},VueExpanded.parameters);var __namedExportsOrder=["VueCollapsed","VueExpanded"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/CollapsibleSectionHeader.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/CollapsibleSectionHeader.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/DarkModeSwitch.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>DarkModeSwitch_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),react=__webpack_require__("./node_modules/react/index.js"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),lib=__webpack_require__("./src/lib/index.ts"),Brightness4=__webpack_require__("./node_modules/@mui/icons-material/Brightness4.js"),Brightness7=__webpack_require__("./node_modules/@mui/icons-material/Brightness7.js"),Icon=__webpack_require__("./src/Icon.tsx"),IconButton=__webpack_require__("./src/IconButton.tsx"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),DarkModeSwitch_Icon=(0,Icon.I)({darkModeIcon:Brightness4.Z,lightModeIcon:Brightness7.Z}).Icon,DarkModeSwitch_IconButton=(0,IconButton.k)({Icon:DarkModeSwitch_Icon}).IconButton,DarkModeSwitch=(0,react.memo)((function(props){var className=props.className,size=props.size,ariaLabel=props.ariaLabel,_useIsDarkModeEnabled=(0,lib.JW)(),isDarkModeEnabled=_useIsDarkModeEnabled.isDarkModeEnabled,setIsDarkModeEnabled=_useIsDarkModeEnabled.setIsDarkModeEnabled,onClick=(0,useConstCallback.useConstCallback)((function(){setIsDarkModeEnabled(!isDarkModeEnabled)})),_useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;return(0,jsx_runtime.jsx)(DarkModeSwitch_IconButton,{className:cx(classes.root,className),onClick,size,iconId:isDarkModeEnabled?"lightModeIcon":"darkModeIcon","aria-label":null!=ariaLabel?ariaLabel:"Dark mode switch"})})),useStyles=ThemeProvider.IR.withName({DarkModeSwitch}).create((function(_ref){var theme=_ref.theme;return{root:{transition:"transform 500ms",transform:"rotate(".concat(theme.isDarkModeEnabled?180:0,"deg)"),transitionTimingFunction:"cubic-bezier(.34,1.27,1,1)"}}}));try{DarkModeSwitch.displayName="DarkModeSwitch",DarkModeSwitch.__docgenInfo={description:"",displayName:"DarkModeSwitch",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},size:{defaultValue:null,description:"Default: default",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"extra small"'},{value:'"default"'},{value:'"medium"'},{value:'"large"'}]}},ariaLabel:{defaultValue:null,description:"",name:"ariaLabel",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/DarkModeSwitch.tsx#DarkModeSwitch"]={docgenInfo:DarkModeSwitch.__docgenInfo,name:"DarkModeSwitch",path:"src/DarkModeSwitch.tsx#DarkModeSwitch"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),_getStoryFactory=(0,__webpack_require__("./src/stories/getStory.tsx").A)({sectionName:sectionName.j,wrappedComponent:{DarkModeSwitch},argTypes:{size:{options:["extra small","small","default","medium","large"],control:{type:"radio"}}}}),meta=_getStoryFactory.meta,DarkModeSwitch_stories_getStory=_getStoryFactory.getStory;const DarkModeSwitch_stories=meta;var VueDefault=DarkModeSwitch_stories_getStory({size:"default"});VueDefault.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "size": "default",\n})'}},VueDefault.parameters);var __namedExportsOrder=["VueDefault"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/DarkModeSwitch.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/DarkModeSwitch.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Dialog.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueFull:()=>VueFull,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Dialog_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react=__webpack_require__("./node_modules/react/index.js"),Dialog=__webpack_require__("./node_modules/@mui/material/Dialog/Dialog.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),Checkbox=__webpack_require__("./node_modules/@mui/material/Checkbox/Checkbox.js"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),FormControlLabel=__webpack_require__("./node_modules/@mui/material/FormControlLabel/FormControlLabel.js"),assert=__webpack_require__("./node_modules/tsafe/assert.js"),breakpoints=__webpack_require__("./src/lib/breakpoints.ts"),useStateRef=__webpack_require__("./node_modules/powerhooks/useStateRef.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),Dialog_Dialog=(0,react.memo)((function(props){var className=props.className,title=props.title,subtitle=props.subtitle,body=props.body,isOpen=props.isOpen,buttons=props.buttons,onDoShowNextTimeValueChange=props.onDoShowNextTimeValueChange,onClose=props.onClose,_props$doNotShowNextT=props.doNotShowNextTimeText,doNotShowNextTimeText=void 0===_props$doNotShowNextT?"Don't show next time":_props$doNotShowNextT,muiDialogClasses=props.muiDialogClasses,_useStyles=useStyles({classesOverrides:props.classes}),cx=_useStyles.cx,classes=_useStyles.classes,_useState=(0,react.useState)(!1),_useState2=(0,slicedToArray.Z)(_useState,2),isChecked=_useState2[0],setIsChecked=_useState2[1],onChange=(0,useConstCallback.useConstCallback)((function(){var isCheckedNewValue=!isChecked;setIsChecked(isCheckedNewValue),(0,assert.assert)(void 0!==onDoShowNextTimeValueChange),onDoShowNextTimeValueChange(!isCheckedNewValue)})),mountPointRef=(0,useStateRef.useStateRef)(null);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("div",{ref:mountPointRef,about:"Dialog container"}),null!==mountPointRef.current&&(0,jsx_runtime.jsxs)(Dialog.Z,{classes:muiDialogClasses,container:mountPointRef.current,open:isOpen,onClose,"aria-labelledby":"alert-dialog-title","aria-describedby":"alert-dialog-description",PaperComponent:function PaperComponent(_ref){var children=_ref.children;return(0,jsx_runtime.jsx)("div",{className:cx(classes.root,className),children})},children:[void 0!==title&&("string"!=typeof title?title:(0,jsx_runtime.jsx)(TextBase.x,{typo:"object heading",componentProps:{id:"alert-dialog-title"},children:title})),void 0!==subtitle&&("string"!=typeof subtitle?subtitle:(0,jsx_runtime.jsx)(TextBase.x,{className:classes.subtitle,componentProps:{id:"alert-dialog-description"},typo:"body 1",children:subtitle})),void 0!==body&&("string"!=typeof body?body:(0,jsx_runtime.jsx)(TextBase.x,{className:classes.body,htmlComponent:"div",typo:"body 2",children:body})),(0,jsx_runtime.jsxs)("div",{className:classes.buttonWrapper,children:[(0,jsx_runtime.jsx)("div",{className:classes.checkBoxWrapper,children:void 0!==onDoShowNextTimeValueChange&&(0,jsx_runtime.jsx)(FormControlLabel.Z,{control:(0,jsx_runtime.jsx)(Checkbox.Z,{checked:isChecked,onChange,name:"checkedB",color:"primary"}),label:doNotShowNextTimeText})}),buttons]})]})]})})),useStyles=ThemeProvider.IR.withName({Dialog:Dialog_Dialog}).create((function(_ref2){var theme=_ref2.theme;return{root:(0,objectSpread2.Z)((0,objectSpread2.Z)({backgroundColor:theme.colors.useCases.surfaces.surface1,borderRadius:5,padding:theme.spacing(4)},theme.spacing.rightLeft("margin",4)),{},{maxWidth:breakpoints.a.sm}),buttonWrapper:{display:"flex",marginTop:theme.spacing(4),"& .MuiButton-root":{marginLeft:theme.spacing(2)},alignItems:"center"},checkBoxWrapper:{flex:1},subtitle:{marginTop:theme.spacing(3)},body:{marginTop:theme.spacing(2),color:theme.colors.useCases.typography.textSecondary}}}));try{Dialog_Dialog.displayName="Dialog",Dialog_Dialog.__docgenInfo={description:"",displayName:"Dialog",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},title:{defaultValue:null,description:'NOTE: If string, <Text typo="object heading" />',name:"title",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal"}},subtitle:{defaultValue:null,description:'NOTE: If string, <Text typo="body 1" />',name:"subtitle",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal"}},body:{defaultValue:null,description:'NOTE: If string, <Text typo="body 2" />',name:"body",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal"}},buttons:{defaultValue:null,description:"",name:"buttons",required:!0,type:{name:"ReactNode"}},isOpen:{defaultValue:null,description:"",name:"isOpen",required:!0,type:{name:"boolean"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!0,type:{name:"() => void"}},onDoShowNextTimeValueChange:{defaultValue:null,description:"",name:"onDoShowNextTimeValueChange",required:!1,type:{name:"((doShowNextTime: boolean) => void)"}},doNotShowNextTimeText:{defaultValue:null,description:"",name:"doNotShowNextTimeText",required:!1,type:{name:"string"}},classes:{defaultValue:null,description:"",name:"classes",required:!1,type:{name:'Partial<Record<"body" | "subtitle" | "root" | "buttonWrapper" | "checkBoxWrapper", string>>'}},muiDialogClasses:{defaultValue:null,description:"https://mui.com/material-ui/api/dialog/",name:"muiDialogClasses",required:!1,type:{name:"Partial<DialogClasses>"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Dialog.tsx#Dialog"]={docgenInfo:Dialog_Dialog.__docgenInfo,name:"Dialog",path:"src/Dialog.tsx#Dialog"})}catch(__react_docgen_typescript_loader_error){}var theme=__webpack_require__("./src/stories/theme.ts"),sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),_getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:{Dialog:Dialog_Dialog}}),meta=_getStoryFactory.meta,Dialog_stories_getStory=_getStoryFactory.getStory;const Dialog_stories=meta;var VueFull=Dialog_stories_getStory((0,objectSpread2.Z)({title:"Utiliser dans un service",subtitle:"Le chemin du secret a été copié. ",body:"\n    Au moment de lancer un service, convertissez vos secrets en variables \n    d'environnement. Pour cela, allez dans configuration avancée, puis dans \n    l’onglet Vault et collez le chemin du dossier dans le champ prévu à cet effet. \n    Vos clefs valeurs seront disponibles sous forme de variables d'environnement.",buttons:(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(theme.zx,{variant:"secondary",type:"submit",children:"Cancel"}),(0,jsx_runtime.jsx)(theme.zx,{variant:"primary",type:"submit",children:"Ok"})]}),isOpen:!0},(0,getStory.K)(["onClose","onDoNotDisplayAgainValueChange"])));VueFull.parameters=(0,objectSpread2.Z)({storySource:{source:"getStory(props)"}},VueFull.parameters);var __namedExportsOrder=["VueFull"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Dialog.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Dialog.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/DirectoryHeader.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefaultSvg:()=>VueDefaultSvg,VueImg:()=>VueImg,VueWithoutSubtitle:()=>VueWithoutSubtitle,__namedExportsOrder:()=>__namedExportsOrder,default:()=>DirectoryHeader_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),react=__webpack_require__("./node_modules/react/index.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),Icon=__webpack_require__("./src/Icon.tsx"),IconButton=__webpack_require__("./src/IconButton.tsx"),ChevronLeft=__webpack_require__("./node_modules/@mui/icons-material/ChevronLeft.js"),pxToNumber=__webpack_require__("./src/tools/pxToNumber.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),DirectoryHeader_IconButton=(0,IconButton.k)((0,Icon.I)({chevronLeft:ChevronLeft.Z})).IconButton,DirectoryHeader=(0,react.memo)((function(props){var className=props.className,image=props.image,title=props.title,subtitle=props.subtitle,onGoBack=props.onGoBack,_useStyles=useStyles({classesOverrides:props.classes}),classes=_useStyles.classes,cx=_useStyles.cx;return(0,jsx_runtime.jsxs)("div",{className:cx(classes.root,className),children:[(0,jsx_runtime.jsx)("div",{children:(0,jsx_runtime.jsx)(DirectoryHeader_IconButton,{size:"large",iconId:"chevronLeft",onClick:onGoBack})}),(0,jsx_runtime.jsx)("div",{className:classes.imageWrapper,children:image}),(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)(TextBase.x,{typo:"object heading",children:title}),void 0!==subtitle&&(0,jsx_runtime.jsx)(TextBase.x,{typo:"caption",className:classes.subtitle,children:subtitle})]})]})})),useStyles=ThemeProvider.IR.withName({DirectoryHeader}).create((function(_ref){var height,theme=_ref.theme;return{root:{display:"flex",alignItems:"center",borderBottom:"1px solid ".concat(theme.colors.useCases.typography.textTertiary)},imageWrapper:(0,objectSpread2.Z)((0,objectSpread2.Z)({margin:theme.spacing({topBottom:4,rightLeft:3}),marginLeft:theme.spacing(1)},(height=(0,pxToNumber.F)(theme.typography.variants["object heading"].style.lineHeight)+(0,pxToNumber.F)(theme.typography.variants.caption.style.lineHeight)+theme.spacing(2),{width:height,height})),{},{display:"flex",justifyContent:"center",alignItems:"center"}),subtitle:{marginTop:theme.spacing(2),color:theme.colors.useCases.typography.textSecondary,textTransform:"capitalize"}}}));try{DirectoryHeader.displayName="DirectoryHeader",DirectoryHeader.__docgenInfo={description:"",displayName:"DirectoryHeader",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},image:{defaultValue:null,description:"",name:"image",required:!0,type:{name:"ReactNode"}},title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal"}},subtitle:{defaultValue:null,description:"",name:"subtitle",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal"}},onGoBack:{defaultValue:null,description:"",name:"onGoBack",required:!0,type:{name:"() => void"}},classes:{defaultValue:null,description:"",name:"classes",required:!1,type:{name:'Partial<Record<"subtitle" | "root" | "imageWrapper", string>>'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/DirectoryHeader.tsx#DirectoryHeader"]={docgenInfo:DirectoryHeader.__docgenInfo,name:"DirectoryHeader",path:"src/DirectoryHeader.tsx#DirectoryHeader"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),Services=__webpack_require__("./src/stories/assets/svg/Services.svg");const utilitr_namespaceObject=__webpack_require__.p+"50922f7c866392d4c106.png";var Avatar=__webpack_require__("./node_modules/@mui/material/Avatar/Avatar.js"),_getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:{DirectoryHeader},defaultWidth:600}),meta=_getStoryFactory.meta,DirectoryHeader_stories_getStory=_getStoryFactory.getStory;const DirectoryHeader_stories=meta;var ImageSvg=(0,react.memo)((function(){var _useStyles=(0,ThemeProvider.yK)(),css=_useStyles.css,theme=_useStyles.theme;return(0,jsx_runtime.jsx)(Services.r,{className:css({fill:theme.colors.useCases.typography.textPrimary,height:"100%",width:"unset"})})})),VueDefaultSvg=DirectoryHeader_stories_getStory((0,objectSpread2.Z)({image:(0,jsx_runtime.jsx)(ImageSvg,{}),title:"This is the title",subtitle:"This is the subtitle"},(0,getStory.K)(["onGoBack"]))),VueWithoutSubtitle=DirectoryHeader_stories_getStory((0,objectSpread2.Z)({image:(0,jsx_runtime.jsx)(ImageSvg,{}),title:"This is the title"},(0,getStory.K)(["onGoBack"]))),VueImg=DirectoryHeader_stories_getStory((0,objectSpread2.Z)({image:(0,jsx_runtime.jsx)(Avatar.Z,{style:{height:"100%",width:"100%"},src:utilitr_namespaceObject,alt:""}),title:"This is the title",subtitle:"This is the subtitle"},(0,getStory.K)(["onGoBack"])));VueDefaultSvg.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "image": <ImageSvg />,\n    "title": "This is the title",\n    "subtitle": "This is the subtitle",\n    ...logCallbacks(["onGoBack"]),\n})'}},VueDefaultSvg.parameters),VueWithoutSubtitle.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "image": <ImageSvg />,\n    "title": "This is the title",\n    ...logCallbacks(["onGoBack"]),\n})'}},VueWithoutSubtitle.parameters),VueImg.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "image": (\n        <Avatar\n            style={{ "height": "100%", "width": "100%" }}\n            src={imgUrl}\n            alt=""\n        />\n    ),\n    "title": "This is the title",\n    "subtitle": "This is the subtitle",\n    ...logCallbacks(["onGoBack"]),\n})'}},VueImg.parameters);var __namedExportsOrder=["VueDefaultSvg","VueWithoutSubtitle","VueImg"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/DirectoryHeader.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/DirectoryHeader.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/GitHubPicker.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>GitHubPicker_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),toConsumableArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js"),defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react=__webpack_require__("./node_modules/react/index.js"),Popper=__webpack_require__("./node_modules/@mui/material/Popper/Popper.js"),Close=__webpack_require__("./node_modules/@mui/icons-material/Close.js"),Done=__webpack_require__("./node_modules/@mui/icons-material/Done.js"),Autocomplete=__webpack_require__("./node_modules/@mui/material/Autocomplete/Autocomplete.js"),autocompleteClasses=__webpack_require__("./node_modules/@mui/material/Autocomplete/autocompleteClasses.js"),InputBase=__webpack_require__("./node_modules/@mui/material/InputBase/InputBase.js"),Box=__webpack_require__("./node_modules/@mui/material/Box/Box.js"),hooks=__webpack_require__("./node_modules/evt/hooks/index.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),useClickAway=__webpack_require__("./node_modules/powerhooks/useClickAway.js"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),Link=__webpack_require__("./node_modules/@mui/material/Link/Link.js"),same=__webpack_require__("./node_modules/evt/tools/inDepth/same.js"),useRerenderOnStateChange=__webpack_require__("./node_modules/evt/hooks/useRerenderOnStateChange.js"),lib=__webpack_require__("./node_modules/evt/lib/index.js"),useConst=__webpack_require__("./node_modules/powerhooks/useConst.js"),diff=__webpack_require__("./node_modules/evt/tools/reducers/diff.js"),Button=__webpack_require__("./src/Button.tsx"),useStateRef=__webpack_require__("./node_modules/powerhooks/useStateRef.js"),assert=__webpack_require__("./node_modules/tsafe/assert.js"),useNonPostableEvtLike=__webpack_require__("./src/tools/useNonPostableEvtLike.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","disablePortal","anchorEl","open","children"],_excluded2=["onChange","onBlur"],_excluded3=["inputProps"],GitHubPicker_Button=(0,Button.a)().Button,GitHubPicker=(0,react.memo)((function(props){var className=props.className,getTagColor=props.getTagColor,evtActionLike=props.evtAction,_props$texts=props.texts,texts=void 0===_props$texts?{}:_props$texts,onClose_props=props.onClose,tags=props.tags,selectedTags=props.selectedTags,onSelectedTags=props.onSelectedTags,evtAction=(0,useNonPostableEvtLike._)(evtActionLike),_useState=(0,react.useState)(void 0),_useState2=(0,slicedToArray.Z)(_useState,2),anchorEl=_useState2[0],setAnchorEl=_useState2[1];(0,hooks.useEvt)((function(ctx){evtAction.$attach((function(data){return"open"===data.action?[data]:null}),ctx,(function(_ref){var anchorEl=_ref.anchorEl;setAnchorEl(anchorEl)})),evtAction.attach((function(_ref2){return"close"===_ref2.action}),ctx,(function(){return _onClose()}))}),[evtAction]);var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx,theme=_useStyles.theme,_onClose=(0,useConstCallback.useConstCallback)((function(){anchorEl&&anchorEl.focus(),setAnchorEl(void 0),null==onClose_props||onClose_props()})),ref=(0,useClickAway.useClickAway)({onClickAway:_onClose}).ref,evtInputValue=(0,useConst.useConst)((function(){return lib.Evt.create("")})),mountPointRef=(0,useStateRef.useStateRef)(null);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("div",{ref:mountPointRef,about:"GitHubPicker container"}),null!==mountPointRef.current&&(0,jsx_runtime.jsx)(Popper.Z,{className:cx(classes.root,className),container:mountPointRef.current,open:!!anchorEl,anchorEl,placement:"bottom-start",children:(0,jsx_runtime.jsxs)("div",{ref,children:[void 0!==texts.label&&(0,jsx_runtime.jsx)("div",{className:classes.labelWrapper,children:(0,jsx_runtime.jsx)(TextBase.x,{typo:"body 1",children:texts.label})}),(0,jsx_runtime.jsx)(Autocomplete.Z,{open:!0,multiple:!0,isOptionEqualToValue:same.same,onClose:function onClose(_,reason){"escape"===reason&&_onClose()},value:selectedTags.map((function(tag){return{tag,color:getTagColor(tag)}})),onChange:function onChange(event,newValue,reason){if("keydown"!==event.type||"Backspace"!==event.key||"removeOption"!==reason){var _arrDiff=(0,diff.arrDiff)(selectedTags,newValue.map((function(_ref3){return _ref3.tag}))),newTag=(0,slicedToArray.Z)(_arrDiff.added,1)[0],removed=_arrDiff.removed;evtInputValue.state="",onSelectedTags(void 0!==newTag?{tag:newTag,isNewTag:-1===tags.indexOf(newTag),isSelect:!0}:{tag:removed[0],isSelect:!1})}},disableCloseOnSelect:!0,PopperComponent:function PopperComponent(_ref4){var className=_ref4.className,children=(_ref4.disablePortal,_ref4.anchorEl,_ref4.open,_ref4.children),other=(0,objectWithoutProperties.Z)(_ref4,_excluded);return(0,jsx_runtime.jsx)("div",(0,objectSpread2.Z)((0,objectSpread2.Z)({className:cx(classes.autocompletePopperComponent,className)},other),{},{children:((0,assert.assert)("function"!=typeof children),children)}))},renderTags:function renderTags(){return null},noOptionsText:null,renderOption:function renderOption(props,option,_ref5){var selected=_ref5.selected;return(0,jsx_runtime.jsxs)("li",(0,objectSpread2.Z)((0,objectSpread2.Z)({},props),{},{children:[(0,jsx_runtime.jsx)(Box.Z,{component:Done.Z,sx:{width:17,height:17,mr:"5px",ml:"-2px"},style:{visibility:selected?"visible":"hidden"}}),(0,jsx_runtime.jsx)(Box.Z,{component:"span",sx:{width:14,height:14,flexShrink:0,borderRadius:"3px",mr:1,mt:"2px"},style:{backgroundColor:option.color}}),(0,jsx_runtime.jsx)(Box.Z,{sx:{flexGrow:1,"& span":{color:"light"===theme.muiTheme.palette.mode?"#586069":"#8b949e"}},children:option.tag}),(0,jsx_runtime.jsx)(Box.Z,{component:Close.Z,sx:{opacity:.6,width:18,height:18},style:{visibility:selected?"visible":"hidden"}})]}))},options:(0,toConsumableArray.Z)(tags).sort((function(a,b){var getWeight=function getWeight(tag){var i=selectedTags.indexOf(tag);return-1===i?selectedTags.length+tags.indexOf(tag):i};return getWeight(a)-getWeight(b)})).map((function(tag){return{tag,color:getTagColor(tag)}})),getOptionLabel:function getOptionLabel(option){return option.tag},renderInput:function renderInput(_ref6){var _ref6$inputProps=_ref6.inputProps,_onChange=_ref6$inputProps.onChange,inputProps=(_ref6$inputProps.onBlur,(0,objectWithoutProperties.Z)(_ref6$inputProps,_excluded2)),params=(0,objectWithoutProperties.Z)(_ref6,_excluded3);return(0,jsx_runtime.jsx)(InputBase.ZP,{className:classes.input,ref:params.InputProps.ref,inputProps:(0,objectSpread2.Z)((0,objectSpread2.Z)({},inputProps),{},{onChange:function onChange(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return evtInputValue.state=args[0].target.value,null==_onChange?void 0:_onChange.apply(void 0,args)}}),autoFocus:!0,placeholder:"Filter labels"})}}),void 0!==texts.done&&(0,jsx_runtime.jsxs)("div",{className:classes.doneButtonWrapper,children:[(0,jsx_runtime.jsx)(NoOptionText,{evtInputValue,tags,onClick:function onClick(inputValue){return onSelectedTags({tag:inputValue,isSelect:!0,isNewTag:!0})},texts}),(0,jsx_runtime.jsx)("div",{children:" "}),(0,jsx_runtime.jsx)(GitHubPicker_Button,{variant:"secondary",className:classes.doneButton,onClick:_onClose,children:texts.done})]})]})})]})})),useStyles=ThemeProvider.IR.withName({GitHubPicker}).create((function(_ref7){var _autocompletePopperCo,theme=_ref7.theme;return{root:{border:"1px solid ".concat("light"===theme.muiTheme.palette.mode?"#e1e4e8":"#30363d"),boxShadow:"0 8px 24px ".concat("light"===theme.muiTheme.palette.mode?"rgba(149, 157, 165, 0.2)":"rgb(1, 4, 9)"),borderRadius:6,width:300,zIndex:theme.muiTheme.zIndex.modal,fontSize:13,color:"light"===theme.muiTheme.palette.mode?"#24292e":"#c9d1d9",backgroundColor:"light"===theme.muiTheme.palette.mode?"#fff":"#1c2128"},labelWrapper:{borderBottom:"1px solid ".concat("light"===theme.muiTheme.palette.mode?"#eaecef":"#30363d"),padding:"8px 10px"},autocompletePopperComponent:(_autocompletePopperCo={},(0,defineProperty.Z)(_autocompletePopperCo,"& .".concat(autocompleteClasses.Z.paper),{boxShadow:"none",margin:0,color:"inherit",fontSize:13}),(0,defineProperty.Z)(_autocompletePopperCo,"& .".concat(autocompleteClasses.Z.listbox),(0,defineProperty.Z)({backgroundColor:"light"===theme.muiTheme.palette.mode?"#fff":"#1c2128",padding:0},"& .".concat(autocompleteClasses.Z.option),(0,defineProperty.Z)({minHeight:"auto",alignItems:"flex-start",padding:8,borderBottom:"1px solid  ".concat("light"===theme.muiTheme.palette.mode?" #eaecef":"#30363d"),'&[aria-selected="true"]':{backgroundColor:"transparent"}},"&.".concat(autocompleteClasses.Z.focused,", &.").concat(autocompleteClasses.Z.focused,'[aria-selected="true"]'),{backgroundColor:theme.muiTheme.palette.action.hover}))),(0,defineProperty.Z)(_autocompletePopperCo,"&.".concat(autocompleteClasses.Z.popperDisablePortal),{position:"relative"}),_autocompletePopperCo),input:{padding:10,width:"100%",borderBottom:"1px solid ".concat("light"===theme.muiTheme.palette.mode?"#eaecef":"#30363d"),"& input":{borderRadius:4,backgroundColor:"light"===theme.muiTheme.palette.mode?"#fff":"#0d1117",padding:8,transition:theme.muiTheme.transitions.create(["border-color","box-shadow"]),border:"1px solid ".concat("light"===theme.muiTheme.palette.mode?"#eaecef":"#30363d"),fontSize:14,"&:focus":{boxShadow:"0px 0px 0px 3px ".concat("light"===theme.muiTheme.palette.mode?"rgba(3, 102, 214, 0.3)":"rgb(12, 45, 107)"),borderColor:"light"===theme.muiTheme.palette.mode?"#0366d6":"#388bfd"}}},doneButtonWrapper:{display:"flex",justifyContent:"space-between",alignItems:"center"},doneButton:{margin:theme.spacing(2)}}})),_ref8=function(){var NoOptionText=(0,react.memo)((function(props){var evtInputValue=props.evtInputValue,tags=props.tags,_onClick=props.onClick,texts=props.texts;(0,useRerenderOnStateChange.useRerenderOnStateChange)(evtInputValue);var inputValue=evtInputValue.state,classes=useStyles().classes;return""===inputValue||void 0===texts["create tag"]||-1!==tags.indexOf(evtInputValue.state)?null:(0,jsx_runtime.jsx)(Link.Z,{className:classes.root,onClick:function onClick(){return _onClick(inputValue)},children:texts["create tag"]({tag:inputValue})})})),useStyles=ThemeProvider.IR.withName({NoOptionText}).create((function(_ref9){return{root:{cursor:"pointer",paddingLeft:_ref9.theme.spacing(3)}}}));return{NoOptionText}}(),NoOptionText=_ref8.NoOptionText;try{GitHubPicker.displayName="GitHubPicker",GitHubPicker.__docgenInfo={description:"",displayName:"GitHubPicker",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},getTagColor:{defaultValue:null,description:"",name:"getTagColor",required:!0,type:{name:"(tag: string) => string"}},tags:{defaultValue:null,description:"",name:"tags",required:!0,type:{name:"string[]"}},selectedTags:{defaultValue:null,description:"",name:"selectedTags",required:!0,type:{name:"string[]"}},onSelectedTags:{defaultValue:null,description:"",name:"onSelectedTags",required:!0,type:{name:"(props: { tag: string; } & ({ isSelect: true; isNewTag: boolean; } | { isSelect: false; })) => void"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!1,type:{name:"(() => void)"}},evtAction:{defaultValue:null,description:"",name:"evtAction",required:!0,type:{name:'NonPostableEvtLike<{ action: "open"; anchorEl: HTMLElement; } | { action: "close"; }>'}},texts:{defaultValue:null,description:"",name:"texts",required:!1,type:{name:'{ label?: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal; "create tag"?: ((params: { ...; }) => ReactNode); done?: ReactNode; } | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/GitHubPicker.tsx#GitHubPicker"]={docgenInfo:GitHubPicker.__docgenInfo,name:"GitHubPicker",path:"src/GitHubPicker.tsx#GitHubPicker"})}catch(__react_docgen_typescript_loader_error){}var theme=__webpack_require__("./src/stories/theme.ts"),sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js"),i18n=__webpack_require__("./src/stories/i18n.tsx"),_getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:(0,defineProperty.Z)({},(0,symToStr.symToStr)({GitHubPicker}),(function Component(){var evtGitHubPickerAction=(0,useConst.useConst)((function(){return lib.Evt.create()})),_useState=(0,react.useState)(["oauth","sso","datascience","office","docker"]),_useState2=(0,slicedToArray.Z)(_useState,2),tags=_useState2[0],setTags=_useState2[1],_useState3=(0,react.useState)(["oauth","docker"]),_useState4=(0,slicedToArray.Z)(_useState3,2),selectedTags=_useState4[0],setSelectedTags=_useState4[1],buttonRef=(0,useStateRef.useStateRef)(null),onSelectedTags=(0,useConstCallback.useConstCallback)((function(params){params.isSelect&&params.isNewTag&&setTags([params.tag].concat((0,toConsumableArray.Z)(tags))),setSelectedTags(params.isSelect?[].concat((0,toConsumableArray.Z)(selectedTags),[params.tag]):selectedTags.filter((function(tag){return tag!==params.tag})))})),t=(0,i18n.$)({Picker:null}).t;return(0,jsx_runtime.jsxs)("div",{children:[selectedTags.map((function(tag){return(0,jsx_runtime.jsxs)("span",{children:[tag," "]},tag)})),(0,jsx_runtime.jsx)("br",{}),(0,jsx_runtime.jsx)(theme.zx,{ref:buttonRef,onClick:function onClick(){return evtGitHubPickerAction.post({action:"open",anchorEl:((0,assert.assert)(null!==buttonRef.current),buttonRef.current)})},children:"open"}),(0,jsx_runtime.jsx)(GitHubPicker,{tags,selectedTags,onSelectedTags,evtAction:evtGitHubPickerAction,getTagColor,texts:{label:t("github picker label"),"create tag":function createTag(_ref){var tag=_ref.tag;return t("github picker create tag",{tag})},done:t("github picker done")}})]})}))}),meta=_getStoryFactory.meta,GitHubPicker_stories_getStory=_getStoryFactory.getStory;const GitHubPicker_stories=meta;function getTagColor(tag){return function getRandomColor(stringInput){var h=(0,toConsumableArray.Z)(stringInput).reduce((function(acc,_char){return _char.charCodeAt(0)+((acc<<5)-acc)}),0),l=.35,a=95*Math.min(l,1-l)/100,f=function f(n){var k=(n+h/30)%12,color=l-a*Math.max(Math.min(k-3,9-k,1),-1);return Math.round(255*color).toString(16).padStart(2,"0")};return"#".concat(f(0)).concat(f(8)).concat(f(4))}(tag)}var VueDefault=GitHubPicker_stories_getStory({});VueDefault.parameters=(0,objectSpread2.Z)({storySource:{source:"getStory({})"}},VueDefault.parameters);var __namedExportsOrder=["VueDefault"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/GitHubPicker.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/GitHubPicker.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Icon.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Home:()=>Home,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_theme__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/stories/theme.ts"),_sectionName__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/getStory.tsx"),tsafe_assert__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tsafe/assert.js");(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_2__.assert)();var _getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_3__.j,wrappedComponent:{Icon:_theme__WEBPACK_IMPORTED_MODULE_0__.JO},argTypes:{iconId:{options:["tour","services","help","home"],control:{type:"radio"}},size:{options:["extra small","small","default","medium","large"],control:{type:"radio"}}}}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var Home=getStory({iconId:"home",size:"default"});Home.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'getStory({\n    "iconId": "home",\n    "size": "default",\n})'}},Home.parameters);var __namedExportsOrder=["Home"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Icon.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Icon.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/IconButton.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Vue:()=>Vue,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_theme__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/stories/theme.ts"),_sectionName__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/getStory.tsx"),tsafe_assert__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tsafe/assert.js");(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_2__.assert)();var _getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_3__.j,wrappedComponent:{IconButton:_theme__WEBPACK_IMPORTED_MODULE_0__.hU},argTypes:{iconId:{options:["tour","services","help","home"],control:{type:"radio"}}}}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var Vue=getStory((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({iconId:"home"},(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.K)(["onClick"])));Vue.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'getStory({\n    "iconId": "home",\n    ...logCallbacks(["onClick"]),\n})'}},Vue.parameters);var __namedExportsOrder=["Vue"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/IconButton.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/IconButton.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/LanguageSelect.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueNoTitle:()=>VueNoTitle,__namedExportsOrder:()=>__namedExportsOrder,default:()=>LanguageSelect_stories});var defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react=__webpack_require__("./node_modules/react/index.js"),useCallbackFactory=__webpack_require__("./node_modules/powerhooks/useCallbackFactory.js"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),Icon=__webpack_require__("./src/Icon.tsx"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),useDomRect=__webpack_require__("./node_modules/powerhooks/useDomRect.js"),Tooltip=__webpack_require__("./src/Tooltip.tsx"),Button=__webpack_require__("./node_modules/@mui/material/Button/Button.js"),Menu=__webpack_require__("./node_modules/@mui/material/Menu/Menu.js"),MenuItem=__webpack_require__("./node_modules/@mui/material/MenuItem/MenuItem.js"),objectKeys=__webpack_require__("./node_modules/tsafe/objectKeys.js"),Public=__webpack_require__("./node_modules/@mui/icons-material/Public.js"),ExpandMore=__webpack_require__("./node_modules/@mui/icons-material/ExpandMore.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),LanguageSelect_Icon=(0,Icon.I)({public:Public.Z,expandMore:ExpandMore.Z}).Icon;function createLanguageSelect(params){var languagesPrettyPrint=params.languagesPrettyPrint,LanguageSelect=(0,react.memo)((function(props){var className=props.className,_props$doShowIcon=props.doShowIcon,doShowIcon=void 0===_props$doShowIcon||_props$doShowIcon,variant=props.variant,changeLanguageText=props.changeLanguageText,language=props.language,onLanguageChange=props.onLanguageChange,_useDomRect=(0,useDomRect.useDomRect)(),buttonRef=_useDomRect.ref,buttonWidth=_useDomRect.domRect.width,_useStyles=useStyles({buttonWidth,variant}),classes=_useStyles.classes,theme=_useStyles.theme,cx=_useStyles.cx,css=_useStyles.css,_useState=(0,react.useState)(void 0),_useState2=(0,slicedToArray.Z)(_useState,2),languageMenu=_useState2[0],setLanguageMenu=_useState2[1],onClick=(0,useConstCallback.useConstCallback)((function(event){return setLanguageMenu(event.currentTarget)})),onMenuClose=(0,useConstCallback.useConstCallback)((function(){return setLanguageMenu(void 0)})),onMenuItemClickFactory=(0,useCallbackFactory.useCallbackFactory)((function(_ref){var lng=(0,slicedToArray.Z)(_ref,1)[0];onLanguageChange(lng),onMenuClose()}));return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(Tooltip.u,{title:changeLanguageText,enterDelay:300,children:(0,jsx_runtime.jsxs)(Button.Z,{className:cx(classes.button,className),ref:buttonRef,disableRipple:!0,"aria-owns":languageMenu?"language-menu":void 0,"aria-haspopup":"true","aria-label":null!=changeLanguageText?changeLanguageText:"change language",onClick,"data-ga-event-category":"header","data-ga-event-action":"language",children:[doShowIcon&&(0,jsx_runtime.jsx)(LanguageSelect_Icon,{iconId:"public",className:classes.icon,size:function(){switch(variant){case"big":return"default";case"small":return"extra small"}}()}),(0,jsx_runtime.jsx)(TextBase.x,{typo:function(){switch(variant){case"big":return"label 1";case"small":return"body 2"}}(),className:css({marginLeft:theme.spacing(2),textTransform:"capitalize"}),children:languagesPrettyPrint[language]}),"big"===variant&&(0,jsx_runtime.jsx)(LanguageSelect_Icon,{className:classes.icon,iconId:"expandMore"})]})}),(0,jsx_runtime.jsx)(Menu.Z,{id:"language-menu",anchorEl:languageMenu,open:void 0!==languageMenu,className:classes.menu,onClose:onMenuClose,children:(0,objectKeys.objectKeys)(languagesPrettyPrint).sort((function(a,b){return a===language?-1:b===language?1:0})).map((function(supportedLanguage){return(0,jsx_runtime.jsx)(MenuItem.Z,{component:"a","data-no-link":"true",selected:language===supportedLanguage,onClick:onMenuItemClickFactory(supportedLanguage),lang:supportedLanguage,children:languagesPrettyPrint[supportedLanguage]},supportedLanguage)}))})]})})),useStyles=ThemeProvider.IR.withParams().withName({LanguageSelect}).create((function(_ref3){var theme=_ref3.theme,buttonWidth=_ref3.buttonWidth,variant=_ref3.variant;return{button:{padding:function(){switch(variant){case"big":return;case"small":return 0}}(),"&.Mui-focusVisible":{outline:"-webkit-focus-ring-color auto 1px"}},menu:{"& .Mui-selected":{backgroundColor:theme.colors.useCases.surfaces.surface1},"& .MuiPaper-root":{backgroundColor:theme.colors.useCases.surfaces.background,width:function(){switch(variant){case"big":return buttonWidth;case"small":return}}()},"& a":{color:theme.colors.useCases.typography.textPrimary}},icon:{color:theme.colors.useCases.typography.textPrimary}}}));return{LanguageSelect}}try{createLanguageSelect.displayName="createLanguageSelect",createLanguageSelect.__docgenInfo={description:"",displayName:"createLanguageSelect",props:{languagesPrettyPrint:{defaultValue:null,description:'Example { "en": "English", "fr": "Français" }',name:"languagesPrettyPrint",required:!0,type:{name:"Record<Language, string>"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/LanguageSelect.tsx#createLanguageSelect"]={docgenInfo:createLanguageSelect.__docgenInfo,name:"createLanguageSelect",path:"src/LanguageSelect.tsx#createLanguageSelect"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js"),id=__webpack_require__("./node_modules/tsafe/id.js"),LanguageSelect=createLanguageSelect({languagesPrettyPrint:{en:"English",fr:"Français"}}).LanguageSelect;var _getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:(0,defineProperty.Z)({},(0,symToStr.symToStr)({LanguageSelect}),(function Component(props){var _useState=(0,react.useState)("en"),_useState2=(0,slicedToArray.Z)(_useState,2),language=_useState2[0],setLanguage=_useState2[1];return(0,jsx_runtime.jsx)(LanguageSelect,(0,objectSpread2.Z)({language,onLanguageChange:setLanguage},props))})),argTypes:{variant:{options:(0,id.id)(["big","small"]),control:{type:"radio"}}}}),meta=_getStoryFactory.meta,LanguageSelect_stories_getStory=_getStoryFactory.getStory;const LanguageSelect_stories=meta;var VueNoTitle=LanguageSelect_stories_getStory({doShowIcon:!0,changeLanguageText:"Change language",variant:"big"});VueNoTitle.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "doShowIcon": true,\n    "changeLanguageText": "Change language",\n    "variant": "big",\n})'}},VueNoTitle.parameters);var __namedExportsOrder=["VueNoTitle"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/LanguageSelect.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/LanguageSelect.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/LeftBar.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueNoTitle:()=>VueNoTitle,__namedExportsOrder:()=>__namedExportsOrder,default:()=>LeftBar_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react=__webpack_require__("./node_modules/react/index.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),useGlobalState=__webpack_require__("./node_modules/powerhooks/useGlobalState.js"),Divider=__webpack_require__("./node_modules/@mui/material/Divider/Divider.js"),id=__webpack_require__("./node_modules/tsafe/id.js"),objectKeys=__webpack_require__("./node_modules/tsafe/objectKeys.js"),src_Icon=__webpack_require__("./src/Icon.tsx"),ChevronLeft=__webpack_require__("./node_modules/@mui/icons-material/ChevronLeft.js"),useDomRect=__webpack_require__("./node_modules/powerhooks/useDomRect.js"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js"),assert=__webpack_require__("./node_modules/tsafe/assert.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","collapsedWidth","currentItemId","items","reduceText"];function createLeftBar(params){var _ref=null!=params?params:{Icon:(0,id.id)((function(){throw new Error("never")}))},Icon=_ref.Icon,_ref$persistIsPanelOp=_ref.persistIsPanelOpen,persistIsPanelOpen=void 0!==_ref$persistIsPanelOp&&_ref$persistIsPanelOp,_ref$defaultIsPanelOp=_ref.defaultIsPanelOpen,defaultIsPanelOpen=void 0===_ref$defaultIsPanelOp||_ref$defaultIsPanelOp,useIsCollapsed=(0,useGlobalState.createUseGlobalState)({name:"isCollapsed",initialState:!defaultIsPanelOpen,doPersistAcrossReloads:persistIsPanelOpen}).useIsCollapsed;function NonMemoizedNonForwardedLeftBar(props,ref){var theme=(0,ThemeProvider.yK)().theme,className=props.className,_props$collapsedWidth=props.collapsedWidth,collapsedWidth=void 0===_props$collapsedWidth?2*theme.iconSizesInPxByName.large:_props$collapsedWidth,currentItemId=props.currentItemId,items=props.items,_props$reduceText=props.reduceText,reduceText=void 0===_props$reduceText?"reduce":_props$reduceText,rest=(0,objectWithoutProperties.Z)(props,_excluded);(0,assert.assert)();var _useIsCollapsed=useIsCollapsed(),isCollapsed=_useIsCollapsed.isCollapsed,setIsCollapsed=_useIsCollapsed.setIsCollapsed,toggleIsCollapsedLink=(0,react.useMemo)((function(){return(0,id.id)({href:"#",onClick:function onClick(event){event.preventDefault(),setAreTransitionEnabled(!0),setIsCollapsed((function(isCollapsed){return!isCollapsed}))}})}),[]),_useDomRect=(0,useDomRect.useDomRect)(),wrapperRef=_useDomRect.ref,_useDomRect$domRect=_useDomRect.domRect,wrapperWidth=_useDomRect$domRect.width,wrapperHeight=_useDomRect$domRect.height,_useState=(0,react.useState)(!1),_useState2=(0,slicedToArray.Z)(_useState,2),areTransitionEnabled=_useState2[0],setAreTransitionEnabled=_useState2[1],_useStyles=useStyles((0,objectSpread2.Z)((0,objectSpread2.Z)({rootWidth:isCollapsed?collapsedWidth:wrapperWidth},{paddingTopBottomFactor:3,rootHeight:wrapperHeight+2*theme.spacing(3)}),{},{areTransitionEnabled})),classes=_useStyles.classes,cx=_useStyles.cx;return(0,jsx_runtime.jsx)("div",(0,objectSpread2.Z)((0,objectSpread2.Z)({ref},rest),{},{className:cx(classes.root,className),children:(0,jsx_runtime.jsx)("nav",{className:classes.nav,children:(0,jsx_runtime.jsxs)("div",{ref:wrapperRef,className:classes.wrapper,children:[(0,jsx_runtime.jsx)(CustomButton,{isCollapsed,collapsedWidth,isCurrent:void 0,iconId:"chevronLeft",label:reduceText,link:toggleIsCollapsedLink},"toggleIsCollapsed"),(0,objectKeys.objectKeys)(items).map((function(itemId){return(0,jsx_runtime.jsx)(CustomButton,(0,objectSpread2.Z)({className:classes.button,isCollapsed,collapsedWidth,isCurrent:itemId===currentItemId},items[itemId]),itemId)}))]})})}))}var LeftBar=(0,react.memo)((0,react.forwardRef)(NonMemoizedNonForwardedLeftBar));LeftBar.displayName=(0,symToStr.symToStr)({LeftBar});var useStyles=ThemeProvider.IR.withParams().withName({LeftBar}).create((function(_ref2){var theme=_ref2.theme,rootWidth=_ref2.rootWidth,rootHeight=_ref2.rootHeight,paddingTopBottomFactor=_ref2.paddingTopBottomFactor,areTransitionEnabled=_ref2.areTransitionEnabled;return{root:{borderRadius:16,boxShadow:theme.shadows[3],overflow:"auto",backgroundColor:theme.colors.useCases.surfaces.surface1},nav:(0,objectSpread2.Z)((0,objectSpread2.Z)({width:rootWidth,height:rootHeight},theme.spacing.topBottom("padding",paddingTopBottomFactor)),{},{transition:areTransitionEnabled?"width 250ms":void 0,position:"relative",overflow:"hidden"}),wrapper:{position:"absolute"},button:{marginTop:theme.spacing(2)}}})),_ref3=function(){var InternalIcon=(0,src_Icon.I)({chevronLeft:ChevronLeft.Z}).Icon,CustomButton=(0,react.memo)((function(props){var className=props.className,isCollapsed=props.isCollapsed,collapsedWidth=props.collapsedWidth,isCurrent=props.isCurrent,iconId=props.iconId,label=props.label,link=props.link,_props$belowDivider=props.belowDivider,belowDivider=void 0!==_props$belowDivider&&_props$belowDivider,_props$availability=props.availability,availability=void 0===_props$availability?"available":_props$availability,theme=(0,ThemeProvider.yK)().theme,_useDomRect2=(0,useDomRect.useDomRect)(),ref=_useDomRect2.ref,width=_useDomRect2.domRect.width,_useStyles2=useStyles({collapsedWidth:null!=collapsedWidth?collapsedWidth:2*theme.iconSizesInPxByName.large,isCollapsed,isCurrent,width,isDisabled:"greyed"===availability}),classes=_useStyles2.classes,cx=_useStyles2.cx;return"not visible"===availability?null:(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsxs)("a",(0,objectSpread2.Z)((0,objectSpread2.Z)({ref,className:cx(classes.root,className)},link),{},{children:[(0,jsx_runtime.jsxs)("div",{className:classes.iconWrapper,children:[(0,jsx_runtime.jsx)("div",{className:classes.iconHoverBox}),function(){var className=classes.icon;return"chevronLeft"===iconId?(0,jsx_runtime.jsx)(InternalIcon,{iconId:"chevronLeft",className,size:"large"}):(0,jsx_runtime.jsx)(Icon,{iconId,className,size:"large"})}()]}),(0,jsx_runtime.jsx)("div",{className:classes.typoWrapper,children:(0,jsx_runtime.jsx)(TextBase.x,{typo:"label 1",className:classes.typo,children:label})})]})),!1!==belowDivider&&(0,jsx_runtime.jsx)(Divider.Z,{className:classes.divider,variant:"fullWidth",about:"string"!=typeof belowDivider?void 0:belowDivider})]})})),useStyles=ThemeProvider.IR.withParams().withNestedSelectors().withName("".concat((0,symToStr.symToStr)({LeftBar})).concat((0,symToStr.symToStr)({CustomButton}))).create((function(_ref4){var _objectSpread2,offset,theme=_ref4.theme,collapsedWidth=_ref4.collapsedWidth,isCollapsed=_ref4.isCollapsed,isCurrent=_ref4.isCurrent,width=_ref4.width,isDisabled=_ref4.isDisabled,classes=_ref4.classes;return{root:(0,objectSpread2.Z)((0,objectSpread2.Z)({},isDisabled?{pointerEvents:"none"}:{}),{},(_objectSpread2={color:theme.colors.useCases.typography.textPrimary,textDecoration:"none",display:"flex",cursor:"pointer"},(0,defineProperty.Z)(_objectSpread2,["hover","focus"].map((function(name){return"&:".concat(name," .").concat(classes.iconHoverBox)})).join(", "),{backgroundColor:theme.colors.useCases.surfaces.background}),(0,defineProperty.Z)(_objectSpread2,["hover","focus"].map((function(name){return"&:".concat(name," .").concat(classes.typoWrapper)})).join(", "),{backgroundColor:isCollapsed?void 0:theme.colors.useCases.surfaces.background}),(0,defineProperty.Z)(_objectSpread2,[".MuiSvgIcon-root","h6"].map((function(name){return"&".concat(isCurrent?"":":active"," ").concat(name)})).join(", "),{color:theme.colors.useCases.typography.textFocus}),_objectSpread2)),iconWrapper:{width:collapsedWidth,textAlign:"center",position:"relative",color:isDisabled?theme.colors.useCases.typography.textDisabled:void 0},icon:(0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)({position:"relative",zIndex:2},theme.spacing.topBottom("margin",2)),void 0!==isCurrent?{}:{transform:isCollapsed?"rotate(-180deg)":"rotate(0)"}),{},{transition:"transform 250ms"}),iconHoverBox:(0,objectSpread2.Z)((0,objectSpread2.Z)({display:"inline-block",position:"absolute",height:"100%"},(offset=collapsedWidth/8,{left:offset,right:isCollapsed?offset:0})),{},{zIndex:1,borderRadius:"10px ".concat(isCollapsed?"10px 10px":"0 0"," 10px")}),typoWrapper:{paddingRight:theme.spacing(2),flex:1,borderRadius:"0 10px 10px 0",display:"flex",alignItems:"center",marginRight:theme.spacing(5)},typo:{color:isDisabled?theme.colors.useCases.typography.textDisabled:void 0,whiteSpace:"nowrap",marginRight:theme.spacing(2)},divider:{marginTop:theme.spacing(2),borderColor:theme.colors.useCases.typography.textTertiary,width:(isCollapsed?collapsedWidth:width)-2*theme.spacing(2),marginLeft:theme.spacing(2),transition:"width 250ms"}}}));return{CustomButton}}(),CustomButton=_ref3.CustomButton;return{LeftBar}}try{createLeftBar.displayName="createLeftBar",createLeftBar.__docgenInfo={description:"",displayName:"createLeftBar",props:{Icon:{defaultValue:null,description:"",name:"Icon",required:!0,type:{name:"(props: IconProps<IconId>) => ReactElement<any, any> | null"}},persistIsPanelOpen:{defaultValue:null,description:"",name:"persistIsPanelOpen",required:!0,type:{name:"boolean"}},defaultIsPanelOpen:{defaultValue:null,description:"",name:"defaultIsPanelOpen",required:!0,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/LeftBar.tsx#createLeftBar"]={docgenInfo:createLeftBar.__docgenInfo,name:"createLeftBar",path:"src/LeftBar.tsx#createLeftBar"})}catch(__react_docgen_typescript_loader_error){}var theme=__webpack_require__("./src/stories/theme.ts"),sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),LeftBar=createLeftBar({Icon:theme.JO,persistIsPanelOpen:!1}).LeftBar,_getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:{LeftBar}}),meta=_getStoryFactory.meta,LeftBar_stories_getStory=_getStoryFactory.getStory;const LeftBar_stories=meta;var VueNoTitle=LeftBar_stories_getStory({currentItemId:"item2",items:{item1:{iconId:"tour",label:"Item 1",link:{href:"https://example.com"}},item2:{iconId:"services",label:"Item two",link:{href:"#",onClick:function onClick(){return console.log("click item 2")}}},item3:{iconId:"help",label:"Item three",hasDividerBelow:!0,link:{href:"#"},availability:"greyed"},item4:{iconId:"home",label:"The fourth item",link:{href:"#"}}}});VueNoTitle.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "currentItemId": "item2",\n    "items": {\n        "item1": {\n            "iconId": "tour",\n            "label": "Item 1",\n            "link": {\n                "href": "https://example.com",\n            },\n        },\n        "item2": {\n            "iconId": "services",\n            "label": "Item two",\n            "link": {\n                "href": "#",\n                "onClick": () => console.log("click item 2"),\n            },\n        },\n        "item3": {\n            "iconId": "help",\n            "label": "Item three",\n            "hasDividerBelow": true,\n            "link": {\n                "href": "#",\n            },\n            "availability": "greyed",\n        },\n        "item4": {\n            "iconId": "home",\n            "label": "The fourth item",\n            "link": {\n                "href": "#",\n            },\n        },\n    },\n})'}},VueNoTitle.parameters);var __namedExportsOrder=["VueNoTitle"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/LeftBar.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/LeftBar.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Markdown.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueNoTitle:()=>VueNoTitle,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Markdown_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),react=__webpack_require__("./node_modules/react/index.js"),react_markdown=__webpack_require__("./node_modules/react-markdown/lib/react-markdown.js"),react_markdown_default=__webpack_require__.n(react_markdown),Link=__webpack_require__("./node_modules/@mui/material/Link/Link.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),Markdown=(0,react.memo)((function(props){var className=props.className,children=props.children,renderers=(0,react.useMemo)((function(){return{link:function link(props){return(0,jsx_runtime.jsx)(Link.Z,{underline:"hover",href:props.href,children:props.children})}}}),[]);return(0,jsx_runtime.jsx)(react_markdown_default(),{className,renderers,children})}));try{Markdown.displayName="Markdown",Markdown.__docgenInfo={description:"",displayName:"Markdown",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Markdown.tsx#Markdown"]={docgenInfo:Markdown.__docgenInfo,name:"Markdown",path:"src/Markdown.tsx#Markdown"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),_getStoryFactory=(0,__webpack_require__("./src/stories/getStory.tsx").A)({sectionName:sectionName.j,wrappedComponent:{Markdown},defaultWidth:500}),meta=_getStoryFactory.meta,Markdown_stories_getStory=_getStoryFactory.getStory;const Markdown_stories=meta;var VueNoTitle=Markdown_stories_getStory({children:"# This is a title  \nThis is a paragraph with [a link](https://www.example.com)  \n"});VueNoTitle.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "children": `# This is a title  \nThis is a paragraph with [a link](https://www.example.com)  \n`,\n})'}},VueNoTitle.parameters);var __namedExportsOrder=["VueNoTitle"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Markdown.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Markdown.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/PageHeader.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>PageHeader_stories});var CollapseParams,defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react=__webpack_require__("./node_modules/react/index.js"),toConsumableArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),useDomRect=__webpack_require__("./node_modules/powerhooks/useDomRect.js"),useGlobalState=__webpack_require__("./node_modules/powerhooks/useGlobalState.js"),id=__webpack_require__("./node_modules/tsafe/id.js"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),Icon=__webpack_require__("./src/Icon.tsx"),IconButton=__webpack_require__("./src/IconButton.tsx"),CloseSharp=__webpack_require__("./node_modules/@mui/icons-material/CloseSharp.js"),SentimentSatisfied=__webpack_require__("./node_modules/@mui/icons-material/SentimentSatisfied.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),lib=__webpack_require__("./node_modules/evt/lib/index.js"),hooks=__webpack_require__("./node_modules/evt/hooks/index.js"),getScrollableParent=__webpack_require__("./node_modules/powerhooks/getScrollableParent.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","transitionDuration","children"];CollapseParams||(CollapseParams={});var CollapsibleWrapper=(0,react.memo)((function(props){var className=props.className,_props$transitionDura=props.transitionDuration,transitionDuration=void 0===_props$transitionDura?250:_props$transitionDura,children=props.children,rest=(0,objectWithoutProperties.Z)(props,_excluded),_useDomRect=(0,useDomRect.useDomRect)(),childrenWrapperRef=_useDomRect.ref,childrenWrapperHeight=_useDomRect.domRect.height,_useState=(0,react.useState)(!1),_useState2=(0,slicedToArray.Z)(_useState,2),isCollapsedIfDependsOfScroll=_useState2[0],setIsCollapsedIfDependsOfScroll=_useState2[1];(0,hooks.useEvt)((function(ctx){var childrenWrapperElement=childrenWrapperRef.current;if(childrenWrapperElement&&"collapses on scroll"===rest.behavior&&0!==childrenWrapperHeight){var scrollTopThreshold=rest.scrollTopThreshold,scrollElement=(0,getScrollableParent.getScrollableParent)({element:childrenWrapperElement,doReturnElementIfScrollable:!1});lib.Evt.from(ctx,scrollElement,"scroll").toStateful().pipe((function(){return[scrollElement.scrollTop]})).attach((function(scrollTop){return setIsCollapsedIfDependsOfScroll((function(isCollapsed){return isCollapsed?scrollTop+1.3*childrenWrapperHeight>scrollTopThreshold:scrollTop>scrollTopThreshold}))}))}}),[childrenWrapperRef.current].concat((0,toConsumableArray.Z)("collapses on scroll"!==rest.behavior?[null,null]:[rest.scrollTopThreshold,childrenWrapperHeight])));var _useStyles=useStyles({isCollapsed:function(){switch(rest.behavior){case"collapses on scroll":return isCollapsedIfDependsOfScroll;case"controlled":return rest.isCollapsed}}(),childrenWrapperHeight,transitionDuration,classesOverrides:props.classes}),classes=_useStyles.classes,cx=_useStyles.cx;return(0,jsx_runtime.jsx)("div",{className:cx(classes.root,className),children:(0,jsx_runtime.jsxs)("div",{className:classes.inner,ref:childrenWrapperRef,children:[children,(0,jsx_runtime.jsx)("div",{className:classes.bottomDivForSpacing})]})})})),useStyles=ThemeProvider.IR.withName({CollapsibleWrapper}).withParams().create((function(_ref){var childrenWrapperHeight=_ref.childrenWrapperHeight,isCollapsed=_ref.isCollapsed,transitionDuration=_ref.transitionDuration;return{root:{height:isCollapsed?0:childrenWrapperHeight||void 0,opacity:isCollapsed?0:1,transition:["height","padding","margin","opacity"].map((function(prop){return"".concat(prop," ").concat(transitionDuration,"ms")})).join(", "),overflow:"hidden"},inner:{},bottomDivForSpacing:{}}}));try{CollapsibleWrapper.displayName="CollapsibleWrapper",CollapsibleWrapper.__docgenInfo={description:"",displayName:"CollapsibleWrapper",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},transitionDuration:{defaultValue:null,description:"Default 250ms",name:"transitionDuration",required:!1,type:{name:"number"}},classes:{defaultValue:null,description:"",name:"classes",required:!1,type:{name:'Partial<Record<"root" | "inner" | "bottomDivForSpacing", string>>'}},behavior:{defaultValue:null,description:"",name:"behavior",required:!0,type:{name:"enum",value:[{value:'"controlled"'},{value:'"collapses on scroll"'}]}},isCollapsed:{defaultValue:null,description:"",name:"isCollapsed",required:!0,type:{name:"boolean"}},scrollTopThreshold:{defaultValue:null,description:"",name:"scrollTopThreshold",required:!0,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/CollapsibleWrapper.tsx#CollapsibleWrapper"]={docgenInfo:CollapsibleWrapper.__docgenInfo,name:"CollapsibleWrapper",path:"src/CollapsibleWrapper.tsx#CollapsibleWrapper"})}catch(__react_docgen_typescript_loader_error){}var assert=__webpack_require__("./node_modules/tsafe/assert.js"),PageHeader_excluded=["mainIcon","title","helpTitle","helpIcon","helpContent","className","titleCollapseParams","helpCollapseParams","classes"],usePageHeaderClosedHelpers=(0,useGlobalState.createUseGlobalState)({name:"pageHeaderClosedHelpers",initialState:(0,id.id)([]),doPersistAcrossReloads:!1}).usePageHeaderClosedHelpers,LocalIcon=(0,Icon.I)({close:CloseSharp.Z,sentimentSatisfied:SentimentSatisfied.Z}).Icon,PageHeader_IconButton=(0,IconButton.k)({Icon:LocalIcon}).IconButton;function createPageHeader(params){var Icon=(null!=params?params:{Icon:(0,id.id)((function(){throw new Error("never")}))}).Icon;return{PageHeader:(0,react.memo)((0,react.forwardRef)((function(props,ref){var mainIcon=props.mainIcon,title=props.title,helpTitle=props.helpTitle,helpIcon=props.helpIcon,helpContent=props.helpContent,className=props.className,props_titleCollapseParams=props.titleCollapseParams,props_helpCollapseParams=props.helpCollapseParams,props_classes=props.classes,rest=(0,objectWithoutProperties.Z)(props,PageHeader_excluded);(0,assert.assert)();var _useDomRect=(0,useDomRect.useDomRect)(),helperRef=_useDomRect.ref,helperHeight=_useDomRect.domRect.height,_useClosure=function useClosure(){var _usePageHeaderClosedH=usePageHeaderClosedHelpers(),pageHeaderClosedHelpers=_usePageHeaderClosedH.pageHeaderClosedHelpers,setPageHeaderClosedHelpers=_usePageHeaderClosedH.setPageHeaderClosedHelpers;return{isHelpClosed:pageHeaderClosedHelpers.includes(title),closeHelp:(0,useConstCallback.useConstCallback)((function(){return setPageHeaderClosedHelpers([].concat((0,toConsumableArray.Z)(pageHeaderClosedHelpers),[title]))}))}}(),isHelpClosed=_useClosure.isHelpClosed,closeHelp=_useClosure.closeHelp,_useStyles=PageHeader_useStyles({helperHeight,classesOverrides:props_classes}),classes=_useStyles.classes,cx=_useStyles.cx,_useMemo=(0,react.useMemo)((function(){var _titleCollapseParams$,titleCollapseParams=null!=props_titleCollapseParams?props_titleCollapseParams:(0,id.id)({behavior:"controlled",isCollapsed:!1});return titleCollapseParams.classes=(0,objectSpread2.Z)((0,objectSpread2.Z)({},titleCollapseParams.classes),{},{bottomDivForSpacing:cx(classes.titleBottomDivForSpacing,null===(_titleCollapseParams$=titleCollapseParams.classes)||void 0===_titleCollapseParams$?void 0:_titleCollapseParams$.bottomDivForSpacing)}),{titleCollapseParams}}),[props_titleCollapseParams,cx,classes.titleBottomDivForSpacing]),titleCollapseParams=_useMemo.titleCollapseParams,_useMemo2=(0,react.useMemo)((function(){var _helpCollapseParams$c,helpCollapseParams=isHelpClosed?{behavior:"controlled",isCollapsed:!0}:null!=props_helpCollapseParams?props_helpCollapseParams:{behavior:"controlled",isCollapsed:!1};return helpCollapseParams.classes=(0,objectSpread2.Z)((0,objectSpread2.Z)({},titleCollapseParams.classes),{},{bottomDivForSpacing:cx(classes.helpBottomDivForSpacing,null===(_helpCollapseParams$c=helpCollapseParams.classes)||void 0===_helpCollapseParams$c?void 0:_helpCollapseParams$c.bottomDivForSpacing)}),{helpCollapseParams}}),[isHelpClosed,props_helpCollapseParams,cx,classes.helpBottomDivForSpacing]),helpCollapseParams=_useMemo2.helpCollapseParams;return(0,jsx_runtime.jsxs)("div",(0,objectSpread2.Z)((0,objectSpread2.Z)({className:cx(classes.root,className),ref},rest),{},{children:[(0,jsx_runtime.jsx)(CollapsibleWrapper,(0,objectSpread2.Z)((0,objectSpread2.Z)({},titleCollapseParams),{},{children:(0,jsx_runtime.jsxs)(TextBase.x,{typo:"page heading",className:classes.title,children:[mainIcon&&(0,jsx_runtime.jsx)(Icon,{iconId:mainIcon,className:classes.titleIcon,size:"large"}),title]})})),(0,jsx_runtime.jsx)(CollapsibleWrapper,(0,objectSpread2.Z)((0,objectSpread2.Z)({},helpCollapseParams),{},{children:(0,jsx_runtime.jsxs)("div",{ref:helperRef,className:classes.help,children:[helpIcon&&(0,jsx_runtime.jsx)("div",{children:"sentimentSatisfied"===helpIcon?(0,jsx_runtime.jsx)(LocalIcon,{iconId:"sentimentSatisfied",className:classes.helpIcon}):(0,jsx_runtime.jsx)(Icon,{iconId:helpIcon,className:classes.helpIcon})}),(0,jsx_runtime.jsxs)("div",{className:classes.helpMiddle,children:[(0,jsx_runtime.jsx)(TextBase.x,{typo:"navigation label",children:helpTitle}),(0,jsx_runtime.jsx)(TextBase.x,{typo:"body 1",children:helpContent})]}),(0,jsx_runtime.jsx)("div",{children:(0,jsx_runtime.jsx)(PageHeader_IconButton,{iconId:"close",onClick:closeHelp,className:classes.closeButton})})]})}))]}))})))}}var PageHeader_useStyles=ThemeProvider.IR.withParams().create((function(_ref2){var theme=_ref2.theme,helperHeight=_ref2.helperHeight;return{root:{backgroundColor:"inherit"},title:{display:"flex",alignItems:"center"},titleIcon:{marginRight:theme.spacing(3)},help:{display:"flex",backgroundColor:theme.colors.useCases.surfaces.surface2,alignItems:"start",padding:theme.spacing(3),borderRadius:.15*helperHeight},helpMiddle:{flex:1},helpIcon:{marginRight:theme.spacing(3),color:theme.colors.useCases.typography.textFocus},closeButton:{padding:0,marginLeft:theme.spacing(3)},titleBottomDivForSpacing:{height:theme.spacing(4)},helpBottomDivForSpacing:{height:theme.spacing(3)}}}));try{createPageHeader.displayName="createPageHeader",createPageHeader.__docgenInfo={description:"",displayName:"createPageHeader",props:{Icon:{defaultValue:null,description:"",name:"Icon",required:!0,type:{name:"(props: IconProps<IconId>) => ReactElement<any, any> | null"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/PageHeader.tsx#createPageHeader"]={docgenInfo:createPageHeader.__docgenInfo,name:"createPageHeader",path:"src/PageHeader.tsx#createPageHeader"})}catch(__react_docgen_typescript_loader_error){}var theme=__webpack_require__("./src/stories/theme.ts"),sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js"),PageHeader_stories_excluded=["transitionDuration"],PageHeader=createPageHeader({Icon:theme.JO}).PageHeader;var _getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:(0,defineProperty.Z)({},(0,symToStr.symToStr)({PageHeader}),(function Component(props){var transitionDuration=props.transitionDuration,rest=(0,objectWithoutProperties.Z)(props,PageHeader_stories_excluded),scrollableElementRef=(0,react.useRef)();return(0,jsx_runtime.jsxs)("div",{style:{height:500,display:"flex",flexDirection:"column"},children:[(0,jsx_runtime.jsx)(PageHeader,(0,objectSpread2.Z)((0,objectSpread2.Z)({},rest),{},{titleCollapseParams:{behavior:"collapses on scroll",scrollTopThreshold:500,scrollableElementRef,transitionDuration},helpCollapseParams:{behavior:"collapses on scroll",scrollTopThreshold:200,scrollableElementRef,transitionDuration}})),(0,jsx_runtime.jsx)("span",{children:"Scroll below dit to trigger collapse"}),(0,jsx_runtime.jsx)("div",{ref:scrollableElementRef,style:{flex:1,border:"1px solid black",display:"flex",flexWrap:"wrap",overflow:"auto"},children:new Array(300).fill("").map((function(i){return(0,jsx_runtime.jsx)("div",{style:{border:"1px solid black",height:100,flex:"200px",margin:5}},i)}))})]})})),defaultWidth:750}),meta=_getStoryFactory.meta,PageHeader_stories_getStory=_getStoryFactory.getStory;const PageHeader_stories=meta;var VueDefault=PageHeader_stories_getStory({helpContent:"This is the content of the help",helpIcon:"sentimentSatisfied",helpTitle:"This is the help title",mainIcon:"home",title:"This is the title",transitionDuration:250});VueDefault.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "helpContent": "This is the content of the help",\n    "helpIcon": "sentimentSatisfied",\n    "helpTitle": "This is the help title",\n    "mainIcon": "home",\n    "title": "This is the title",\n    "transitionDuration": 250,\n})'}},VueDefault.parameters);var __namedExportsOrder=["VueDefault"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/PageHeader.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/PageHeader.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Picker.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Picker_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),toConsumableArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js"),defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react=__webpack_require__("./node_modules/react/index.js"),Popper=__webpack_require__("./node_modules/@mui/material/Popper/Popper.js"),Close=__webpack_require__("./node_modules/@mui/icons-material/Close.js"),Done=__webpack_require__("./node_modules/@mui/icons-material/Done.js"),Autocomplete=__webpack_require__("./node_modules/@mui/material/Autocomplete/Autocomplete.js"),autocompleteClasses=__webpack_require__("./node_modules/@mui/material/Autocomplete/autocompleteClasses.js"),InputBase=__webpack_require__("./node_modules/@mui/material/InputBase/InputBase.js"),Box=__webpack_require__("./node_modules/@mui/material/Box/Box.js"),hooks=__webpack_require__("./node_modules/evt/hooks/index.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),useClickAway=__webpack_require__("./node_modules/powerhooks/useClickAway.js"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),Link=__webpack_require__("./node_modules/@mui/material/Link/Link.js"),same=__webpack_require__("./node_modules/evt/tools/inDepth/same.js"),useRerenderOnStateChange=__webpack_require__("./node_modules/evt/hooks/useRerenderOnStateChange.js"),lib=__webpack_require__("./node_modules/evt/lib/index.js"),useConst=__webpack_require__("./node_modules/powerhooks/useConst.js"),diff=__webpack_require__("./node_modules/evt/tools/reducers/diff.js"),Button=__webpack_require__("./src/Button.tsx"),useStateRef=__webpack_require__("./node_modules/powerhooks/useStateRef.js"),assert=__webpack_require__("./node_modules/tsafe/assert.js"),useNonPostableEvtLike=__webpack_require__("./src/tools/useNonPostableEvtLike.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","disablePortal","anchorEl","open","children"],_excluded2=["onChange","onBlur"],_excluded3=["inputProps"],Picker_Button=(0,Button.a)().Button,Picker=(0,react.memo)((function(props){var className=props.className,getOptionColor=props.getOptionColor,options=props.options,selectedOptionIds=props.selectedOptionIds,onSelectedOption=props.onSelectedOption,onClose_props=props.onClose,evtActionLike=props.evtAction,_props$texts=props.texts,texts=void 0===_props$texts?{}:_props$texts,evtAction=(0,useNonPostableEvtLike._)(evtActionLike),_useState=(0,react.useState)(void 0),_useState2=(0,slicedToArray.Z)(_useState,2),anchorEl=_useState2[0],setAnchorEl=_useState2[1];(0,hooks.useEvt)((function(ctx){evtAction.$attach((function(data){return"open"===data.action?[data]:null}),ctx,(function(_ref){var anchorEl=_ref.anchorEl;return setAnchorEl(anchorEl)})),evtAction.attach((function(_ref2){return"close"===_ref2.action}),ctx,(function(){return _onClose()}))}),[evtAction]);var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx,theme=_useStyles.theme,_onClose=(0,useConstCallback.useConstCallback)((function(){anchorEl&&anchorEl.focus(),setAnchorEl(void 0),null==onClose_props||onClose_props()})),ref=(0,useClickAway.useClickAway)({onClickAway:_onClose}).ref,evtInputValue=(0,useConst.useConst)((function(){return lib.Evt.create("")})),mountPointRef=(0,useStateRef.useStateRef)(null);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("div",{ref:mountPointRef,about:"Picker container"}),null!==mountPointRef.current&&(0,jsx_runtime.jsx)(Popper.Z,{className:cx(classes.root,className),container:mountPointRef.current,open:!!anchorEl,anchorEl,placement:"bottom-start",children:(0,jsx_runtime.jsxs)("div",{ref,children:[void 0!==texts.label&&(0,jsx_runtime.jsx)("div",{className:classes.labelWrapper,children:(0,jsx_runtime.jsx)(TextBase.x,{typo:"body 1",children:texts.label})}),(0,jsx_runtime.jsx)(Autocomplete.Z,{open:!0,multiple:!0,isOptionEqualToValue:same.same,onClose:function onClose(_,reason){"escape"===reason&&_onClose()},value:selectedOptionIds.map((function(optionId){return{id:optionId,label:(option=options.find((function(_ref3){return _ref3.id===optionId})),(0,assert.assert)(void 0!==option),option.label),color:null==getOptionColor?void 0:getOptionColor(optionId)};var option})),onChange:function onChange(event,newValue,reason){if("keydown"!==event.type||"Backspace"!==event.key||"removeOption"!==reason){var _arrDiff=(0,diff.arrDiff)(selectedOptionIds,newValue.map((function(_ref4){return _ref4.id}))),newlySelectedId=(0,slicedToArray.Z)(_arrDiff.added,1)[0],removed=_arrDiff.removed;evtInputValue.state="",onSelectedOption(void 0!==newlySelectedId?{isSelect:!0,isNewOption:!1,optionId:newlySelectedId}:{isSelect:!1,optionId:removed[0]})}},disableCloseOnSelect:!0,PopperComponent:function PopperComponent(_ref5){var className=_ref5.className,children=(_ref5.disablePortal,_ref5.anchorEl,_ref5.open,_ref5.children),other=(0,objectWithoutProperties.Z)(_ref5,_excluded);return(0,jsx_runtime.jsx)("div",(0,objectSpread2.Z)((0,objectSpread2.Z)({className:cx(classes.autocompletePopperComponent,className)},other),{},{children:((0,assert.assert)("function"!=typeof children),children)}))},renderTags:function renderTags(){return null},noOptionsText:null,renderOption:function renderOption(props,option,_ref6){var selected=_ref6.selected;return(0,jsx_runtime.jsxs)("li",(0,objectSpread2.Z)((0,objectSpread2.Z)({},props),{},{children:[(0,jsx_runtime.jsx)(Box.Z,{component:Done.Z,sx:{width:17,height:17,mr:"5px",ml:"-2px"},style:{visibility:selected?"visible":"hidden"}}),void 0!==option.color&&(0,jsx_runtime.jsx)(Box.Z,{component:"span",sx:{width:14,height:14,flexShrink:0,borderRadius:"3px",mr:1,mt:"2px"},style:{backgroundColor:option.color}}),(0,jsx_runtime.jsx)(Box.Z,{sx:{flexGrow:1,"& span":{color:"light"===theme.muiTheme.palette.mode?"#586069":"#8b949e"}},children:option.label}),(0,jsx_runtime.jsx)(Box.Z,{component:Close.Z,sx:{opacity:.6,width:18,height:18},style:{visibility:selected?"visible":"hidden"}})]}))},options:(0,toConsumableArray.Z)(options).sort((function(a,b){var getWeight=function getWeight(optionId){var i=selectedOptionIds.indexOf(optionId);return-1===i?selectedOptionIds.length+options.map((function(_ref7){return _ref7.id})).indexOf(optionId):i};return getWeight(a.id)-getWeight(b.id)})).map((function(_ref8){var id=_ref8.id;return{id,label:_ref8.label,color:null==getOptionColor?void 0:getOptionColor(id)}})),getOptionLabel:function getOptionLabel(option){return option.label},renderInput:function renderInput(_ref9){var _ref9$inputProps=_ref9.inputProps,_onChange=_ref9$inputProps.onChange,inputProps=(_ref9$inputProps.onBlur,(0,objectWithoutProperties.Z)(_ref9$inputProps,_excluded2)),params=(0,objectWithoutProperties.Z)(_ref9,_excluded3);return(0,jsx_runtime.jsx)(InputBase.ZP,{className:classes.input,ref:params.InputProps.ref,inputProps:(0,objectSpread2.Z)((0,objectSpread2.Z)({},inputProps),{},{onChange:function onChange(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return evtInputValue.state=args[0].target.value,null==_onChange?void 0:_onChange.apply(void 0,args)}}),autoFocus:!0,placeholder:"Filter labels"})}}),void 0!==texts.done&&(0,jsx_runtime.jsxs)("div",{className:classes.doneButtonWrapper,children:[(0,jsx_runtime.jsx)(NoOptionText,{evtInputValue,optionLabels:options.map((function(_ref10){return _ref10.label})),onClick:function onClick(inputValue){return onSelectedOption({isSelect:!0,isNewOption:!0,optionLabel:inputValue})},texts}),(0,jsx_runtime.jsx)("div",{children:" "}),(0,jsx_runtime.jsx)(Picker_Button,{variant:"secondary",className:classes.doneButton,onClick:_onClose,children:texts.done})]})]})})]})})),useStyles=ThemeProvider.IR.withName("Picker").create((function(_ref11){var _autocompletePopperCo,theme=_ref11.theme;return{root:{border:"1px solid ".concat("light"===theme.muiTheme.palette.mode?"#e1e4e8":"#30363d"),boxShadow:"0 8px 24px ".concat("light"===theme.muiTheme.palette.mode?"rgba(149, 157, 165, 0.2)":"rgb(1, 4, 9)"),borderRadius:6,width:300,zIndex:theme.muiTheme.zIndex.modal,fontSize:13,color:"light"===theme.muiTheme.palette.mode?"#24292e":"#c9d1d9",backgroundColor:"light"===theme.muiTheme.palette.mode?"#fff":"#1c2128"},labelWrapper:{borderBottom:"1px solid ".concat("light"===theme.muiTheme.palette.mode?"#eaecef":"#30363d"),padding:"8px 10px"},autocompletePopperComponent:(_autocompletePopperCo={},(0,defineProperty.Z)(_autocompletePopperCo,"& .".concat(autocompleteClasses.Z.paper),{boxShadow:"none",margin:0,color:"inherit",fontSize:13}),(0,defineProperty.Z)(_autocompletePopperCo,"& .".concat(autocompleteClasses.Z.listbox),(0,defineProperty.Z)({backgroundColor:"light"===theme.muiTheme.palette.mode?"#fff":"#1c2128",padding:0},"& .".concat(autocompleteClasses.Z.option),(0,defineProperty.Z)({minHeight:"auto",alignItems:"flex-start",padding:8,borderBottom:"1px solid  ".concat("light"===theme.muiTheme.palette.mode?" #eaecef":"#30363d"),'&[aria-selected="true"]':{backgroundColor:"transparent"}},"&.".concat(autocompleteClasses.Z.focused,", &.").concat(autocompleteClasses.Z.focused,'[aria-selected="true"]'),{backgroundColor:theme.muiTheme.palette.action.hover}))),(0,defineProperty.Z)(_autocompletePopperCo,"&.".concat(autocompleteClasses.Z.popperDisablePortal),{position:"relative"}),_autocompletePopperCo),input:{padding:10,width:"100%",borderBottom:"1px solid ".concat("light"===theme.muiTheme.palette.mode?"#eaecef":"#30363d"),"& input":{borderRadius:4,backgroundColor:"light"===theme.muiTheme.palette.mode?"#fff":"#0d1117",padding:8,transition:theme.muiTheme.transitions.create(["border-color","box-shadow"]),border:"1px solid ".concat("light"===theme.muiTheme.palette.mode?"#eaecef":"#30363d"),fontSize:14,"&:focus":{boxShadow:"0px 0px 0px 3px ".concat("light"===theme.muiTheme.palette.mode?"rgba(3, 102, 214, 0.3)":"rgb(12, 45, 107)"),borderColor:"light"===theme.muiTheme.palette.mode?"#0366d6":"#388bfd"}}},doneButtonWrapper:{display:"flex",justifyContent:"space-between",alignItems:"center"},doneButton:{margin:theme.spacing(2)}}})),_ref12=function(){var NoOptionText=(0,react.memo)((function(props){var evtInputValue=props.evtInputValue,optionLabels=props.optionLabels,_onClick=props.onClick,texts=props.texts;(0,useRerenderOnStateChange.useRerenderOnStateChange)(evtInputValue);var inputValue=evtInputValue.state,classes=useStyles().classes;return""===inputValue||void 0===texts["create option"]||-1!==optionLabels.indexOf(evtInputValue.state)?null:(0,jsx_runtime.jsx)(Link.Z,{className:classes.root,onClick:function onClick(){return _onClick(inputValue)},children:texts["create option"]({optionLabel:inputValue})})})),useStyles=ThemeProvider.IR.withName({NoOptionText}).create((function(_ref13){return{root:{cursor:"pointer",paddingLeft:_ref13.theme.spacing(3)}}}));return{NoOptionText}}(),NoOptionText=_ref12.NoOptionText;try{Picker.displayName="Picker",Picker.__docgenInfo={description:"",displayName:"Picker",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},getOptionColor:{defaultValue:null,description:"If undefined no color",name:"getOptionColor",required:!1,type:{name:"((itemId: string) => string)"}},options:{defaultValue:null,description:"",name:"options",required:!0,type:{name:"{ id: string; label: string; }[]"}},selectedOptionIds:{defaultValue:null,description:"",name:"selectedOptionIds",required:!0,type:{name:"string[]"}},onSelectedOption:{defaultValue:null,description:"",name:"onSelectedOption",required:!0,type:{name:"(props: ({ isSelect: true; } & ({ isNewOption: true; optionLabel: string; } | { isNewOption: false; optionId: string; })) | { isSelect: false; optionId: string; }) => void"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!1,type:{name:"(() => void)"}},evtAction:{defaultValue:null,description:"",name:"evtAction",required:!0,type:{name:'NonPostableEvtLike<{ action: "open"; anchorEl: HTMLElement; } | { action: "close"; }>'}},texts:{defaultValue:null,description:"",name:"texts",required:!1,type:{name:'{ label?: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal; "create option"?: ((params: { ...; }) => ReactNode); done?: ReactNode; } | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Picker.tsx#Picker"]={docgenInfo:Picker.__docgenInfo,name:"Picker",path:"src/Picker.tsx#Picker"})}catch(__react_docgen_typescript_loader_error){}var theme=__webpack_require__("./src/stories/theme.ts"),sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js"),i18n=__webpack_require__("./src/stories/i18n.tsx"),_getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:(0,defineProperty.Z)({},(0,symToStr.symToStr)({Picker}),(function Component(){var evtGitHubPickerAction=(0,useConst.useConst)((function(){return lib.Evt.create()})),_useState=(0,react.useState)(["oauth","sso","datascience","office","docker"].map((function(tag){return{id:tag,label:tag}}))),_useState2=(0,slicedToArray.Z)(_useState,2),options=_useState2[0],setOptions=_useState2[1],_useState3=(0,react.useState)(["oauth","docker"]),_useState4=(0,slicedToArray.Z)(_useState3,2),selectedOptionIds=_useState4[0],setSelectedOptionIds=_useState4[1],buttonRef=(0,useStateRef.useStateRef)(null),onSelectedOption=(0,useConstCallback.useConstCallback)((function(params){params.isSelect&&params.isNewOption&&(setSelectedOptionIds([params.optionLabel].concat((0,toConsumableArray.Z)(selectedOptionIds))),setOptions([].concat((0,toConsumableArray.Z)(options),[{id:params.optionLabel,label:params.optionLabel}]))),setSelectedOptionIds(params.isSelect?[].concat((0,toConsumableArray.Z)(selectedOptionIds),[params.isNewOption?params.optionLabel:params.optionId]):selectedOptionIds.filter((function(id){return id!==params.optionId})))})),t=(0,i18n.$)({Picker}).t;return(0,jsx_runtime.jsxs)("div",{children:[selectedOptionIds.map((function(id){return(0,jsx_runtime.jsxs)("span",{children:[id," "]},id)})),(0,jsx_runtime.jsx)("br",{}),(0,jsx_runtime.jsx)(theme.zx,{ref:buttonRef,onClick:function onClick(){return evtGitHubPickerAction.post({action:"open",anchorEl:((0,assert.assert)(null!==buttonRef.current),buttonRef.current)})},children:"open"}),(0,jsx_runtime.jsx)(Picker,{options,selectedOptionIds,onSelectedOption,evtAction:evtGitHubPickerAction,getOptionColor:getTagColor,texts:{label:t("github picker label"),"create option":function createOption(_ref){var optionLabel=_ref.optionLabel;return t("github picker create tag",{tag:optionLabel})},done:t("github picker done")}})]})}))}),meta=_getStoryFactory.meta,Picker_stories_getStory=_getStoryFactory.getStory;const Picker_stories=meta;function getTagColor(tag){return function getRandomColor(stringInput){var h=(0,toConsumableArray.Z)(stringInput).reduce((function(acc,_char){return _char.charCodeAt(0)+((acc<<5)-acc)}),0),l=.35,a=95*Math.min(l,1-l)/100,f=function f(n){var k=(n+h/30)%12,color=l-a*Math.max(Math.min(k-3,9-k,1),-1);return Math.round(255*color).toString(16).padStart(2,"0")};return"#".concat(f(0)).concat(f(8)).concat(f(4))}(tag)}var VueDefault=Picker_stories_getStory({});VueDefault.parameters=(0,objectSpread2.Z)({storySource:{source:"getStory({})"}},VueDefault.parameters);var __namedExportsOrder=["VueDefault"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Picker.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Picker.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/RangeSlider.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Vue1:()=>Vue1,__namedExportsOrder:()=>__namedExportsOrder,default:()=>RangeSlider_stories});var defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),RangeSlider=__webpack_require__("./src/RangeSlider/SimpleOrRangeSlider.tsx").C,sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),react=__webpack_require__("./node_modules/react/index.js"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");var _getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:(0,defineProperty.Z)({},(0,symToStr.symToStr)({RangeSlider}),(function Component(props){var _useState=(0,react.useState)(props.min),_useState2=(0,slicedToArray.Z)(_useState,2),valueLow=_useState2[0],setValueLow=_useState2[1],_useState3=(0,react.useState)(props.max),_useState4=(0,slicedToArray.Z)(_useState3,2),valueHigh=_useState4[0],setValueHigh=_useState4[1],onValueChange=(0,useConstCallback.useConstCallback)((function(_ref){var extremity=_ref.extremity,value=_ref.value;switch(extremity){case"low":setValueLow(value);break;case"high":setValueHigh(value)}}));return(0,jsx_runtime.jsx)(RangeSlider,(0,objectSpread2.Z)((0,objectSpread2.Z)({},props),{},{valueLow,valueHigh,onValueChange}))}))}),meta=_getStoryFactory.meta,RangeSlider_stories_getStory=_getStoryFactory.getStory;const RangeSlider_stories=meta;var Vue1=RangeSlider_stories_getStory({label:"Random-access memory (RAM)",lowExtremitySemantic:"guaranteed",highExtremitySemantic:"maximum",unit:"Mi",min:900,max:1100,step:1});Vue1.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "label": "Random-access memory (RAM)",\n    "lowExtremitySemantic": "guaranteed",\n    "highExtremitySemantic": "maximum",\n    "unit": "Mi",\n    "min": 900,\n    "max": 1100,\n    "step": 1,\n})'}},Vue1.parameters);var __namedExportsOrder=["Vue1"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/RangeSlider.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/RangeSlider.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/SearchBar.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>SearchBar_stories});var defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react=__webpack_require__("./node_modules/react/index.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),useClickAway=__webpack_require__("./node_modules/powerhooks/useClickAway.js"),hooks=__webpack_require__("./node_modules/evt/hooks/index.js"),Icon=__webpack_require__("./src/Icon.tsx"),IconButton=__webpack_require__("./src/IconButton.tsx"),Search=__webpack_require__("./node_modules/@mui/icons-material/Search.js"),Cancel=__webpack_require__("./node_modules/@mui/icons-material/Cancel.js"),assert=__webpack_require__("./node_modules/tsafe/assert.js"),useMergeRefs=__webpack_require__("./node_modules/powerhooks/useMergeRefs.js"),useNonPostableEvtLike=__webpack_require__("./src/tools/useNonPostableEvtLike.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","onSearchChange","onKeyPress","search","placeholder","evtAction","classes"],SearchBar_Icon=(0,Icon.I)({search:Search.Z,cancel:Cancel.Z}).Icon,SearchBar_IconButton=(0,IconButton.k)({Icon:SearchBar_Icon}).IconButton,SearchBar=(0,react.memo)((0,react.forwardRef)((function(props,forwardedRef){var className=props.className,onSearchChange=props.onSearchChange,onKeyPress=props.onKeyPress,search=props.search,_props$placeholder=props.placeholder,placeholder=void 0===_props$placeholder?"Search":_props$placeholder,evtActionLike=props.evtAction,props_classes=props.classes,evtAction=((0,objectWithoutProperties.Z)(props,_excluded),(0,useNonPostableEvtLike._)(evtActionLike));(0,assert.assert)();var _useState=(0,react.useState)(""!==search),_useState2=(0,slicedToArray.Z)(_useState,2),isActive=_useState2[0],setIsActive=_useState2[1],onClearButtonClick=(0,useConstCallback.useConstCallback)((function(){return onInputKeyDown({key:"Escape"})})),onRootClick=(0,useConstCallback.useConstCallback)((function(){isActive||setIsActive(!0)})),onIconClick=(0,useConstCallback.useConstCallback)((function(){var inputEl=inputRef.current;null!==inputEl&&(inputEl.focus(),inputEl.setSelectionRange(0,search.length))})),onInputChange=(0,useConstCallback.useConstCallback)((function(event){var value=event.target.value;onSearchChange(value)})),inputRef=(0,react.useRef)(null),onInputKeyDown=(0,useConstCallback.useConstCallback)((function(event){var _inputRef$current,key=function(){switch(event.key){case"Escape":case"Enter":return event.key;default:return"irrelevant"}}();if("irrelevant"!==key){switch(null==onKeyPress||onKeyPress(key),key){case"Enter":""===search&&setIsActive(!1);break;case"Escape":onSearchChange(""),setIsActive(!1)}null===(_inputRef$current=inputRef.current)||void 0===_inputRef$current||_inputRef$current.blur()}})),rootRefClickAway=(0,useClickAway.useClickAway)({onClickAway:function onClickAway(){""===search&&setIsActive(!1)}}).ref,rootRef=(0,useMergeRefs.q)([rootRefClickAway,forwardedRef]);(0,hooks.useEvt)((function(ctx){return null==evtAction?void 0:evtAction.attach((function(action){return"CLEAR SEARCH"===action}),ctx,(function(){return onInputKeyDown({key:"Escape"})}))}),[null!=evtAction?evtAction:Object]);var _useStyles=useStyles({isActive,classesOverrides:props_classes}),classes=_useStyles.classes,cx=_useStyles.cx;return(0,jsx_runtime.jsx)("div",{ref:rootRef,className:cx(classes.root,className),onClick:onRootClick,children:(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)(SearchBar_Icon,{iconId:"search",onClick:onIconClick,className:classes.icon}),isActive?(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("input",{ref:inputRef,autoFocus:!0,className:classes.input,type:"text",value:search,onChange:onInputChange,onKeyDown:onInputKeyDown,spellCheck:!1,placeholder}),(0,jsx_runtime.jsx)(SearchBar_IconButton,{iconId:"cancel",size:"small",disabled:""===search,onClick:onClearButtonClick})]}):(0,jsx_runtime.jsx)("span",{className:classes.searchLabel,children:placeholder})]})})}))),useStyles=ThemeProvider.IR.withName({SearchBar}).withParams().create((function(_ref){var theme=_ref.theme,isActive=_ref.isActive;return{root:{borderRadius:8,overflow:"hidden",boxShadow:theme.shadows[1],"& > div":{display:"flex",alignItems:"center",backgroundColor:theme.colors.useCases.surfaces.surface1,cursor:isActive?void 0:"pointer",overflow:"hidden",border:"solid 2px transparent","&:hover":{borderBottomColor:theme.colors.useCases.buttons.actionActive}}},input:(0,objectSpread2.Z)((0,objectSpread2.Z)({flex:1,caretColor:theme.colors.useCases.typography.textFocus},theme.typography.variants["body 1"].style),{},{outline:"none",borderWidth:0,border:"none",backgroundColor:"transparent",color:theme.colors.useCases.typography.textPrimary,"&::placeholder":{color:theme.colors.useCases.typography.textDisabled,opacity:1}}),icon:{margin:"".concat(theme.spacing(2)-2,"px ").concat(theme.spacing(3)-2,"px"),color:isActive?theme.colors.useCases.typography.textFocus:void 0},searchLabel:(0,objectSpread2.Z)((0,objectSpread2.Z)({},theme.muiTheme.typography.button),{},{display:"block",flex:1,color:theme.colors.useCases.typography.textPrimary})}}));try{SearchBar.displayName="SearchBar",SearchBar.__docgenInfo={description:"",displayName:"SearchBar",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},search:{defaultValue:null,description:"",name:"search",required:!0,type:{name:"string"}},onSearchChange:{defaultValue:null,description:"",name:"onSearchChange",required:!0,type:{name:"(search: string) => void"}},onKeyPress:{defaultValue:null,description:"",name:"onKeyPress",required:!1,type:{name:'((key: "Enter" | "Escape") => void)'}},evtAction:{defaultValue:null,description:"",name:"evtAction",required:!1,type:{name:'NonPostableEvtLike<"CLEAR SEARCH">'}},placeholder:{defaultValue:null,description:'Default "Search"',name:"placeholder",required:!1,type:{name:"string"}},classes:{defaultValue:null,description:"",name:"classes",required:!1,type:{name:'Partial<Record<"input" | "icon" | "root" | "searchLabel", string>>'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/SearchBar.tsx#SearchBar"]={docgenInfo:SearchBar.__docgenInfo,name:"SearchBar",path:"src/SearchBar.tsx#SearchBar"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js");var _getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:(0,defineProperty.Z)({},(0,symToStr.symToStr)({SearchBar}),(function Component(props){var _useState=(0,react.useState)(""),_useState2=(0,slicedToArray.Z)(_useState,2),search=_useState2[0],setState=_useState2[1];return(0,jsx_runtime.jsx)(SearchBar,(0,objectSpread2.Z)({search,onSearchChange:setState},props))})),defaultWidth:700}),meta=_getStoryFactory.meta,SearchBar_stories_getStory=_getStoryFactory.getStory;const SearchBar_stories=meta;var VueDefault=SearchBar_stories_getStory((0,objectSpread2.Z)({},(0,getStory.K)(["onKeyPress"])));VueDefault.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    ...logCallbacks(["onKeyPress"]),\n})'}},VueDefault.parameters);var __namedExportsOrder=["VueDefault"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/SearchBar.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/SearchBar.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Slider.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Vue1:()=>Vue1,VueNoSemantic:()=>VueNoSemantic,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Slider_stories});var defineProperty=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react=__webpack_require__("./node_modules/react/index.js"),SimpleOrRangeSlider=__webpack_require__("./src/RangeSlider/SimpleOrRangeSlider.tsx"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["value","onValueChange","semantic"],Slider=(0,react.memo)((function(props){var value=props.value,onValueChange=props.onValueChange,semantic=props.semantic,rest=(0,objectWithoutProperties.Z)(props,_excluded),onSimpleOrRangeSliderValueChange=(0,useConstCallback.useConstCallback)((function(_ref){var value=_ref.value;return onValueChange(value)}));return(0,jsx_runtime.jsx)(SimpleOrRangeSlider.C,(0,objectSpread2.Z)({highExtremitySemantic:semantic,valueHigh:value,onValueChange:onSimpleOrRangeSliderValueChange},rest))}));try{Slider.displayName="Slider",Slider.__docgenInfo={description:"",displayName:"Slider",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal"}},max:{defaultValue:null,description:"",name:"max",required:!0,type:{name:"number"}},min:{defaultValue:null,description:"",name:"min",required:!0,type:{name:"number"}},step:{defaultValue:null,description:"",name:"step",required:!0,type:{name:"number"}},unit:{defaultValue:null,description:"",name:"unit",required:!0,type:{name:"string"}},extraInfo:{defaultValue:null,description:"",name:"extraInfo",required:!1,type:{name:"string"}},semantic:{defaultValue:null,description:"",name:"semantic",required:!1,type:{name:"string"}},value:{defaultValue:null,description:"",name:"value",required:!0,type:{name:"number"}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!0,type:{name:"(value: number) => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Slider.tsx#Slider"]={docgenInfo:Slider.__docgenInfo,name:"Slider",path:"src/Slider.tsx#Slider"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),symToStr=__webpack_require__("./node_modules/tsafe/symToStr.js");var _getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:(0,defineProperty.Z)({},(0,symToStr.symToStr)({Slider}),(function Component(props){var _useState=(0,react.useState)(props.min),_useState2=(0,slicedToArray.Z)(_useState,2),value=_useState2[0],setValue=_useState2[1];return(0,jsx_runtime.jsx)(Slider,(0,objectSpread2.Z)((0,objectSpread2.Z)({},props),{},{value,onValueChange:setValue}))}))}),meta=_getStoryFactory.meta,Slider_stories_getStory=_getStoryFactory.getStory;const Slider_stories=meta;var Vue1=Slider_stories_getStory({label:"Random-access memory (RAM)",extraInfo:"This is some extra infos",semantic:"maximum",unit:"Mi",min:1,max:200,step:1}),VueNoSemantic=Slider_stories_getStory({label:"Random-access memory (RAM)",unit:"Mi",min:1,max:200,step:1});Vue1.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "label": "Random-access memory (RAM)",\n    "extraInfo": "This is some extra infos",\n    "semantic": "maximum",\n    "unit": "Mi",\n    "min": 1,\n    "max": 200,\n    "step": 1,\n})'}},Vue1.parameters),VueNoSemantic.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "label": "Random-access memory (RAM)",\n    "unit": "Mi",\n    "min": 1,\n    "max": 200,\n    "step": 1,\n})'}},VueNoSemantic.parameters);var __namedExportsOrder=["Vue1","VueNoSemantic"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Slider.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Slider.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Tabs.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueAllTabsVisible:()=>VueAllTabsVisible,VueLarge:()=>VueLarge,VueSmall:()=>VueSmall,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/defineProperty.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),_Tabs__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/Tabs.tsx"),_sectionName__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/getStory.tsx"),tsafe_symToStr__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tsafe/symToStr.js"),react__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/index.js"),powerhooks__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/powerhooks/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["tabCount"];var _getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_9__.j,defaultWidth:700,wrappedComponent:(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_10__.Z)({},(0,tsafe_symToStr__WEBPACK_IMPORTED_MODULE_2__.symToStr)({Tabs:_Tabs__WEBPACK_IMPORTED_MODULE_0__.m}),(function Component(props){var tabCount=props.tabCount,rest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_6__.Z)(props,_excluded),_useState=(0,react__WEBPACK_IMPORTED_MODULE_3__.useState)((function(){return new Array(tabCount).fill("").map((function(){for(var _len=arguments.length,_ref=new Array(_len),_key=0;_key<_len;_key++)_ref[_key]=arguments[_key];var i=_ref[1];return{id:"tab".concat(i),title:"Tab ".concat(i)}}))})),tabs=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__.Z)(_useState,1)[0],_useState3=(0,react__WEBPACK_IMPORTED_MODULE_3__.useState)("tab5"),_useState4=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__.Z)(_useState3,2),activeTabId=_useState4[0],setActiveTabId=_useState4[1],onRequestChangeActiveTab=(0,powerhooks__WEBPACK_IMPORTED_MODULE_4__.useConstCallback)((function(tabId){return setActiveTabId(tabId)}));return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Tabs__WEBPACK_IMPORTED_MODULE_0__.m,(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({tabs,activeTabId,onRequestChangeActiveTab},rest),{},{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("span",{children:["Tab selected: ",activeTabId]})}))}))}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var VueSmall=getStory({size:"small",maxTabCount:4,tabCount:9}),VueLarge=getStory({size:"big",maxTabCount:4,tabCount:9}),VueAllTabsVisible=getStory({size:"big",maxTabCount:10,tabCount:5});VueSmall.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({storySource:{source:'getStory({\n    "size": "small",\n    "maxTabCount": 4,\n    "tabCount": 9,\n})'}},VueSmall.parameters),VueLarge.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({storySource:{source:'getStory({\n    "size": "big",\n    "maxTabCount": 4,\n    "tabCount": 9,\n})'}},VueLarge.parameters),VueAllTabsVisible.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({storySource:{source:'getStory({\n    "size": "big",\n    "maxTabCount": 10,\n    "tabCount": 5,\n})'}},VueAllTabsVisible.parameters);var __namedExportsOrder=["VueSmall","VueLarge","VueAllTabsVisible"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Tabs.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Tabs.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Tag.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueCustom:()=>VueCustom,VueDefault:()=>VueDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Tag_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),react=__webpack_require__("./node_modules/react/index.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),Tag=(0,react.memo)((function(props){var text=props.text,className=props.className,onClick=props.onClick,_useStyles=useStyles({classesOverrides:props.classes}),classes=_useStyles.classes,cx=_useStyles.cx;return(0,jsx_runtime.jsx)("div",{className:cx(classes.root,className),onClick,children:"string"==typeof text?(0,jsx_runtime.jsx)(TextBase.x,{className:classes.text,typo:"body 3",children:text}):text})})),useStyles=ThemeProvider.IR.withName({Tag}).create((function(_ref){var theme=_ref.theme;return{root:{backgroundColor:theme.colors.palette[theme.isDarkModeEnabled?"light":"dark"].main,padding:theme.spacing({topBottom:1,rightLeft:2}),borderRadius:theme.spacing(3),display:"inline-block",cursor:"pointer"},text:{color:theme.colors.palette[theme.isDarkModeEnabled?"dark":"light"].main}}}));try{Tag.displayName="Tag",Tag.__docgenInfo={description:"",displayName:"Tag",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},classes:{defaultValue:null,description:"",name:"classes",required:!1,type:{name:'Partial<Record<"text" | "root", string>>'}},text:{defaultValue:null,description:"",name:"text",required:!0,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"(() => void)"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Tag.tsx#Tag"]={docgenInfo:Tag.__docgenInfo,name:"Tag",path:"src/Tag.tsx#Tag"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),emotion_css_esm=__webpack_require__("./node_modules/@emotion/css/dist/emotion-css.esm.js"),_getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:{Tag}}),meta=_getStoryFactory.meta,Tag_stories_getStory=_getStoryFactory.getStory;const Tag_stories=meta;var VueDefault=Tag_stories_getStory({text:"Machine learning"}),VueCustom=Tag_stories_getStory({className:(0,emotion_css_esm.iv)({backgroundColor:"pink","& > p":{color:"black"}}),text:"Machine learning"});VueDefault.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "text": "Machine learning",\n})'}},VueDefault.parameters),VueCustom.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "className": css({\n        "backgroundColor": "pink",\n        "& > p": {\n            "color": "black",\n        },\n    }),\n    "text": "Machine learning",\n})'}},VueCustom.parameters);var __namedExportsOrder=["VueDefault","VueCustom"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Tag.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Tag.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/TestSpacing.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_theme__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/stories/theme.ts"),_sectionName__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/getStory.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");var _getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_3__.j,wrappedComponent:{TestSpacing:function TestSpacing(){var theme=(0,_theme__WEBPACK_IMPORTED_MODULE_0__.Fg)();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[1,1.5,2,2.5,3,3.5,4,4.5,5,5.5,6,7,8].map((function(factor){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{style:{fontSize:theme.spacing(factor),width:"1em",height:"1em",backgroundColor:Number.isInteger(factor)&&factor<=6?"blue":"lightblue",margin:20}},factor)}))})}}}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var VueDefault=getStory({});VueDefault.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:"getStory({})"}},VueDefault.parameters);var __namedExportsOrder=["VueDefault"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/TestSpacing.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/TestSpacing.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Text.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Vue1:()=>Vue1,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_theme__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/stories/theme.ts"),_sectionName__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/getStory.tsx"),tsafe_assert__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tsafe/assert.js");(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_2__.assert)();var _getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_1__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_3__.j,wrappedComponent:{Text:_theme__WEBPACK_IMPORTED_MODULE_0__.xv},argTypes:{typo:{options:["display heading","page heading","subtitle","section heading","object heading","label 1","label 2","navigation label","body 1","body 2","caption"],control:{type:"radio"}}}}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var Vue1=getStory({typo:"body 1",children:"Lorem ipsum dolor sit amet"});Vue1.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'getStory({\n    "typo": "body 1",\n    "children": "Lorem ipsum dolor sit amet",\n})'}},Vue1.parameters);var __namedExportsOrder=["Vue1"]},"./src/stories/TextField.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{VueDefault:()=>VueDefault,VuePassword:()=>VuePassword,VueTextArea:()=>VueTextArea,VueWithHint:()=>VueWithHint,VueWithHintAndQuestionMark:()=>VueWithHintAndQuestionMark,VueWithSuggestions:()=>VueWithSuggestions,__namedExportsOrder:()=>__namedExportsOrder,default:()=>TextField_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),ThemeProvider=__webpack_require__("./src/lib/ThemeProvider.tsx"),TextBase=__webpack_require__("./src/Text/TextBase.ts"),react=__webpack_require__("./node_modules/react/index.js"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),TextField=__webpack_require__("./node_modules/@mui/material/TextField/TextField.js"),createForOfIteratorHelper=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/createForOfIteratorHelper.js"),memoizee=__webpack_require__("./node_modules/memoizee/index.js"),getBrowser=__webpack_require__.n(memoizee)()((function(){var _step,userAgent=navigator.userAgent,_iterator=(0,createForOfIteratorHelper.Z)(["chrome","safari","firefox"]);try{for(_iterator.s();!(_step=_iterator.n()).done;){var id=_step.value;if(new RegExp(id,"i").test(userAgent))return id}}catch(err){_iterator.e(err)}finally{_iterator.f()}})),InputAdornment=__webpack_require__("./node_modules/@mui/material/InputAdornment/InputAdornment.js"),IconButton=__webpack_require__("./src/IconButton.tsx"),Icon=__webpack_require__("./src/Icon.tsx"),useEffectOnValueChange=__webpack_require__("./node_modules/powerhooks/useEffectOnValueChange.js"),hooks=__webpack_require__("./node_modules/evt/hooks/index.js"),CircularProgress=__webpack_require__("./node_modules/@mui/material/CircularProgress/CircularProgress.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),CircularProgress_CircularProgress=(0,react.memo)((function(props){var className=props.className,_props$size=props.size,size=void 0===_props$size?40:_props$size,_props$color=props.color,color=void 0===_props$color?"primary":_props$color,_useStyles=useStyles({color}),classes=_useStyles.classes,cx=_useStyles.cx;return(0,jsx_runtime.jsx)(CircularProgress.Z,{color:"textPrimary"===color?void 0:color,className:cx(classes.root,className),size})})),useStyles=ThemeProvider.IR.withName({CircularProgress:CircularProgress_CircularProgress}).withParams().create((function(_ref){var theme=_ref.theme;return{root:{color:"textPrimary"!==_ref.color?void 0:theme.colors.useCases.typography.textPrimary}}}));try{CircularProgress_CircularProgress.displayName="CircularProgress",CircularProgress_CircularProgress.__docgenInfo={description:"",displayName:"CircularProgress",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"number"}},color:{defaultValue:null,description:"",name:"color",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"textPrimary"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/CircularProgress.tsx#CircularProgress"]={docgenInfo:CircularProgress_CircularProgress.__docgenInfo,name:"CircularProgress",path:"src/CircularProgress.tsx#CircularProgress"})}catch(__react_docgen_typescript_loader_error){}var Tooltip=__webpack_require__("./src/Tooltip.tsx"),VisibilityOff=__webpack_require__("./node_modules/@mui/icons-material/VisibilityOff.js"),Visibility=__webpack_require__("./node_modules/@mui/icons-material/Visibility.js"),Help=__webpack_require__("./node_modules/@mui/icons-material/Help.js"),useDomRect=__webpack_require__("./node_modules/powerhooks/useDomRect.js"),assert=__webpack_require__("./node_modules/tsafe/assert.js"),Autocomplete=__webpack_require__("./node_modules/@mui/material/Autocomplete/Autocomplete.js"),useNonPostableEvtLike=__webpack_require__("./src/tools/useNonPostableEvtLike.ts"),_excluded=["transformValueBeingTyped","defaultValue","getIsValidValue","doOnlyValidateInputAfterFistFocusLost","onValueBeingTypedChange","onBlur","evtAction","onSubmit","onEscapeKeyDown","onEnterKeyDown","className","type","isCircularProgressShown","helperText","id","name","selectAllTextOnFocus","isSubmitAllowed","inputProps_ref","inputProps_aria-label","inputProps_tabIndex","inputProps_spellCheck","inputProps_autoFocus","inputProps_aria-invalid","InputProps_endAdornment","questionMarkHelperText","doRenderAsTextArea","rows","doIndentOnTab","options","freeSolo"],TextField_Icon=(0,Icon.I)({visibilityOff:VisibilityOff.Z,visibility:Visibility.Z,help:Help.Z}).Icon,TextField_IconButton=(0,IconButton.k)({Icon:TextField_Icon}).IconButton,TextField_TextField=(0,react.memo)((function(props){var transformValueBeingTyped=props.transformValueBeingTyped,_props$defaultValue=props.defaultValue,defaultValue=void 0===_props$defaultValue?"":_props$defaultValue,getIsValidValue=props.getIsValidValue,_props$doOnlyValidate=props.doOnlyValidateInputAfterFistFocusLost,doOnlyValidateInputAfterFistFocusLost=void 0===_props$doOnlyValidate||_props$doOnlyValidate,onValueBeingTypedChange=props.onValueBeingTypedChange,onBlur=props.onBlur,evtActionLike=props.evtAction,onSubmit=props.onSubmit,onEscapeKeyDown=props.onEscapeKeyDown,onEnterKeyDown=props.onEnterKeyDown,className=props.className,_props$type=props.type,type=void 0===_props$type?"text":_props$type,_props$isCircularProg=props.isCircularProgressShown,isCircularProgressShown=void 0!==_props$isCircularProg&&_props$isCircularProg,helperText=props.helperText,htmlId=props.id,name=props.name,selectAllTextOnFocus=props.selectAllTextOnFocus,_props$isSubmitAllowe=props.isSubmitAllowed,isSubmitAllowed=void 0===_props$isSubmitAllowe||_props$isSubmitAllowe,inputProps_ref=props.inputProps_ref,inputProps_ariaLabel=props["inputProps_aria-label"],inputProps_tabIndex=props.inputProps_tabIndex,inputProps_spellCheck=props.inputProps_spellCheck,inputProps_autoFocus=props.inputProps_autoFocus,inputProps_ariaInvalid=props["inputProps_aria-invalid"],InputProps_endAdornment=props.InputProps_endAdornment,questionMarkHelperText=props.questionMarkHelperText,_props$doRenderAsText=props.doRenderAsTextArea,doRenderAsTextArea=void 0!==_props$doRenderAsText&&_props$doRenderAsText,rows=props.rows,_props$doIndentOnTab=props.doIndentOnTab,doIndentOnTab=void 0!==_props$doIndentOnTab&&_props$doIndentOnTab,options=props.options,_props$freeSolo=props.freeSolo,freeSolo=void 0!==_props$freeSolo&&_props$freeSolo,completedPropsRest=(0,objectWithoutProperties.Z)(props,_excluded),evtAction=(0,useNonPostableEvtLike._)(evtActionLike),_useClosure=function useClosure(){var _useState=(0,react.useState)(defaultValue),_useState2=(0,slicedToArray.Z)(_useState,2),value=_useState2[0],setValue=_useState2[1],transformAndSetValue=(0,useConstCallback.useConstCallback)((function(value){var _transformValueBeingT;isValidationEnabled||doOnlyValidateInputAfterFistFocusLost||enableValidation(),setValue(null!==(_transformValueBeingT=null==transformValueBeingTyped?void 0:transformValueBeingTyped(value))&&void 0!==_transformValueBeingT?_transformValueBeingT:value)}));return{value,transformAndSetValue}}(),value=_useClosure.value,transformAndSetValue=_useClosure.transformAndSetValue;(0,useEffectOnValueChange.useEffectOnValueChange)((function(){return transformAndSetValue(defaultValue)}),[defaultValue]);var getIsValidValueResult=(0,react.useMemo)((function(){var _getIsValidValue;return null!==(_getIsValidValue=null==getIsValidValue?void 0:getIsValidValue(value))&&void 0!==_getIsValidValue?_getIsValidValue:{isValidValue:!0}}),[value,null!=getIsValidValue?getIsValidValue:Object]);(0,react.useEffect)((function(){null==onValueBeingTypedChange||onValueBeingTypedChange((0,objectSpread2.Z)({value},getIsValidValueResult))}),[value,getIsValidValueResult.isValidValue,getIsValidValueResult.isValidValue?Object:getIsValidValueResult.message]);var _useReducer=(0,react.useReducer)((function(){return!0}),!1),_useReducer2=(0,slicedToArray.Z)(_useReducer,2),isValidationEnabled=_useReducer2[0],enableValidation=_useReducer2[1];(0,hooks.useEvt)((function(ctx){return null==evtAction?void 0:evtAction.attach(ctx,(function(action){switch(action){case"RESTORE DEFAULT VALUE":return void transformAndSetValue(defaultValue);case"TRIGGER SUBMIT":if(!getIsValidValueResult.isValidValue||!isSubmitAllowed)return;return void(null==onSubmit||onSubmit(value))}}))}),[defaultValue,value,getIsValidValueResult,null!=onSubmit?onSubmit:Object,null!=evtAction?evtAction:Object,transformAndSetValue,isSubmitAllowed]);var hasError=null!=inputProps_ariaInvalid?inputProps_ariaInvalid:!!isValidationEnabled&&!getIsValidValueResult.isValidValue,_useDomRect=(0,useDomRect.useDomRect)(),rootHeight=_useDomRect.domRect.height,ref=_useDomRect.ref,_useStyles=TextField_useStyles({hasError,rootHeight}),classes=_useStyles.classes,cx=_useStyles.cx,_useReducer3=(0,react.useReducer)((function(v){return!v}),!1),_useReducer4=(0,slicedToArray.Z)(_useReducer3,2),isPasswordShown=_useReducer4[0],toggleIsPasswordShown=_useReducer4[1],onKeyDown=(0,useConstCallback.useConstCallback)((function(event){var key=function(){switch(event.key){case"Tab":return doIndentOnTab?event.key:"irrelevant";case"Escape":case"Enter":return event.key;default:return"irrelevant"}}();if("irrelevant"!==key){var preventDefaultAndStopPropagation=function preventDefaultAndStopPropagation(){event.preventDefault(),event.stopPropagation()};switch(key){case"Escape":return void(null==onEscapeKeyDown||onEscapeKeyDown({preventDefaultAndStopPropagation}));case"Enter":return void(null==onEnterKeyDown||onEnterKeyDown({preventDefaultAndStopPropagation}));case"Tab":return document.execCommand("insertText",!1,"    "),void preventDefaultAndStopPropagation()}(0,assert.assert)()}})),InputProps=(0,react.useMemo)((function(){return{endAdornment:(null!=InputProps_endAdornment?InputProps_endAdornment:isCircularProgressShown)?(0,jsx_runtime.jsx)(InputAdornment.Z,{position:"end",children:(0,jsx_runtime.jsx)(CircularProgress_CircularProgress,{color:"textPrimary",size:10})}):"password"===type?(0,jsx_runtime.jsx)(InputAdornment.Z,{position:"end",children:(0,jsx_runtime.jsx)(TextField_IconButton,{iconId:isPasswordShown?"visibilityOff":"visibility",onClick:toggleIsPasswordShown})}):void 0}}),[isPasswordShown,type,InputProps_endAdornment,isCircularProgressShown]),inputProps=(0,react.useMemo)((function(){return(0,objectSpread2.Z)({ref:inputProps_ref,"aria-label":inputProps_ariaLabel,tabIndex:inputProps_tabIndex,spellCheck:inputProps_spellCheck,autoFocus:inputProps_autoFocus},void 0!==inputProps_ariaInvalid?{"aria-invalid":inputProps_ariaInvalid}:hasError?{"aria-invalid":!0}:{})}),[null!=inputProps_ref?inputProps_ref:Object,null!=inputProps_ariaLabel?inputProps_ariaLabel:Object,null!=inputProps_tabIndex?inputProps_tabIndex:Object,null!=inputProps_spellCheck?inputProps_spellCheck:Object,null!=inputProps_autoFocus?inputProps_autoFocus:Object,null!=inputProps_ariaInvalid?inputProps_ariaInvalid:Object,hasError]),onMuiTextfieldBlur=(0,useConstCallback.useConstCallback)((function(){isValidationEnabled||enableValidation(),null==onBlur||onBlur()})),onFocus=(0,useConstCallback.useConstCallback)((function(_ref){var target=_ref.target;selectAllTextOnFocus&&target.setSelectionRange(0,target.value.length)})),onInputChange=(0,useConstCallback.useConstCallback)((function(_,value){return transformAndSetValue(value)})),onChange=(0,useConstCallback.useConstCallback)((function(_ref2){var target=_ref2.target;return transformAndSetValue(target.value)})),helperTextNode=(0,jsx_runtime.jsxs)(TextBase.x,{className:classes.helperText,typo:"caption",htmlComponent:"span",children:[isValidationEnabled&&!getIsValidValueResult.isValidValue&&getIsValidValueResult.message||helperText," ",void 0!==questionMarkHelperText&&(0,jsx_runtime.jsx)(Tooltip.u,{title:questionMarkHelperText,children:(0,jsx_runtime.jsx)(TextField_Icon,{iconId:"help",className:classes.questionMark})})]});return void 0!==options?((0,assert.assert)("text"===type),(0,jsx_runtime.jsx)(Autocomplete.Z,{freeSolo,className:cx(classes.muiAutocomplete,className),inputValue:value,onInputChange,options,id:htmlId,renderInput:function renderInput(params){return(0,jsx_runtime.jsx)(TextField.Z,(0,objectSpread2.Z)((0,objectSpread2.Z)({},params),{},{className:classes.muiTextField,multiline:doRenderAsTextArea,ref,variant:"standard",error:hasError,helperText:helperTextNode,InputProps:(0,objectSpread2.Z)((0,objectSpread2.Z)({},params.InputProps),InputProps),onBlur:onMuiTextfieldBlur,onKeyDown,onFocus,name,inputProps:(0,objectSpread2.Z)((0,objectSpread2.Z)({},inputProps),params.inputProps)},completedPropsRest))}})):(0,jsx_runtime.jsx)(TextField.Z,(0,objectSpread2.Z)({className:cx(classes.muiTextField,className),multiline:doRenderAsTextArea,rows:doRenderAsTextArea?rows:void 0,ref,variant:"standard",type:"password"!==type?type:isPasswordShown?"text":"password",value,error:hasError,helperText:helperTextNode,InputProps,onBlur:onMuiTextfieldBlur,onChange,onKeyDown,onFocus,id:htmlId,name,inputProps},completedPropsRest))})),TextField_useStyles=ThemeProvider.IR.withParams().withName({TextField:TextField_TextField}).create((function(_ref3){var theme=_ref3.theme,hasError=_ref3.hasError,rootHeight=_ref3.rootHeight;return{muiAutocomplete:{minWidth:145},muiTextField:{"& .MuiFormHelperText-root":{position:"absolute",top:rootHeight,visibility:0===rootHeight?"hidden":void 0},"& .MuiFormLabel-root":{color:hasError?theme.colors.useCases.alertSeverity.error.main:theme.colors.useCases.typography.textSecondary},"&:focus":{outline:"unset"},"& input:-webkit-autofill":(0,objectSpread2.Z)({},function(){switch(getBrowser()){case"chrome":case"safari":return{WebkitTextFillColor:theme.colors.useCases.typography[theme.isDarkModeEnabled?"textPrimary":"textSecondary"],WebkitBoxShadow:"0 0 0 1000px ".concat(theme.colors.useCases.surfaces.surface1," inset")};default:return{}}}()),"& .MuiInput-underline:hover:not(.Mui-disabled):before":{borderBottomWidth:1},"& .MuiInput-underline:after":{borderBottomWidth:1}},helperText:{color:hasError?theme.colors.useCases.alertSeverity.error.main:theme.colors.useCases.typography.textDisabled,whiteSpace:"nowrap"},questionMark:(0,objectSpread2.Z)({fontSize:"inherit"},{width:"".concat(1.5,"em"),height:"".concat(1.5,"em")})}}));try{TextField_TextField.displayName="TextField",TextField_TextField.__docgenInfo={description:"",displayName:"TextField",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"string"}},type:{defaultValue:null,description:"Default text",name:"type",required:!1,type:{name:"enum",value:[{value:'"text"'},{value:'"email"'},{value:'"password"'}]}},defaultValue:{defaultValue:null,description:"Will overwrite value when updated",name:"defaultValue",required:!1,type:{name:"string"}},inputProps_ref:{defaultValue:null,description:"",name:"inputProps_ref",required:!1,type:{name:"RefObject<HTMLInputElement>"}},"inputProps_aria-label":{defaultValue:null,description:"",name:"inputProps_aria-label",required:!1,type:{name:"string"}},inputProps_tabIndex:{defaultValue:null,description:"",name:"inputProps_tabIndex",required:!1,type:{name:"number"}},inputProps_spellCheck:{defaultValue:null,description:"",name:"inputProps_spellCheck",required:!1,type:{name:"boolean"}},inputProps_autoFocus:{defaultValue:null,description:"",name:"inputProps_autoFocus",required:!1,type:{name:"boolean"}},doIndentOnTab:{defaultValue:null,description:"",name:"doIndentOnTab",required:!1,type:{name:"boolean"}},"inputProps_aria-invalid":{defaultValue:null,description:"If true, it sets the helper text in red.\nWill be set automatically if getIsValidValue is provided",name:"inputProps_aria-invalid",required:!1,type:{name:"boolean"}},InputProps_endAdornment:{defaultValue:null,description:"",name:"InputProps_endAdornment",required:!1,type:{name:"ReactNode"}},disabled:{defaultValue:null,description:"Only use when getIsValidValue isn't used",name:"disabled",required:!1,type:{name:"boolean"}},onEscapeKeyDown:{defaultValue:null,description:"Return false to e.preventDefault() and e.stopPropagation()",name:"onEscapeKeyDown",required:!1,type:{name:"((params: { preventDefaultAndStopPropagation(): void; }) => void)"}},onEnterKeyDown:{defaultValue:null,description:"",name:"onEnterKeyDown",required:!1,type:{name:"((params: { preventDefaultAndStopPropagation(): void; }) => void)"}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"(() => void)"}},isSubmitAllowed:{defaultValue:null,description:"To prevent onSubmit to be invoked (when data is being updated for example ) default true",name:"isSubmitAllowed",required:!1,type:{name:"boolean"}},evtAction:{defaultValue:null,description:"",name:"evtAction",required:!1,type:{name:'NonPostableEvtLike<"TRIGGER SUBMIT" | "RESTORE DEFAULT VALUE">'}},onSubmit:{defaultValue:null,description:'Submit invoked on evtAction.post("TRIGGER SUBMIT") only if value being typed is valid',name:"onSubmit",required:!1,type:{name:"((value: string) => void)"}},getIsValidValue:{defaultValue:null,description:"",name:"getIsValidValue",required:!1,type:{name:"((value: string) => { isValidValue: true; } | { isValidValue: false; message: ReactNode; })"}},onValueBeingTypedChange:{defaultValue:null,description:"Invoked on first render,\ncalled again if getIsValidValue have been updated and\nthe validity of the current value changes.",name:"onValueBeingTypedChange",required:!1,type:{name:"((params: { value: string; } & ({ isValidValue: true; } | { isValidValue: false; message: ReactNode; })) => void)"}},transformValueBeingTyped:{defaultValue:null,description:"",name:"transformValueBeingTyped",required:!1,type:{name:"((value: string) => string)"}},label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"ReactNode"}},helperText:{defaultValue:null,description:"",name:"helperText",required:!1,type:{name:"ReactNode"}},questionMarkHelperText:{defaultValue:null,description:"",name:"questionMarkHelperText",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal"}},doOnlyValidateInputAfterFistFocusLost:{defaultValue:null,description:"",name:"doOnlyValidateInputAfterFistFocusLost",required:!1,type:{name:"boolean"}},isCircularProgressShown:{defaultValue:null,description:"Default false",name:"isCircularProgressShown",required:!1,type:{name:"boolean"}},selectAllTextOnFocus:{defaultValue:null,description:"",name:"selectAllTextOnFocus",required:!1,type:{name:"boolean"}},doRenderAsTextArea:{defaultValue:null,description:"Default false",name:"doRenderAsTextArea",required:!1,type:{name:"boolean"}},rows:{defaultValue:null,description:"Only applies if doRenderAsTextArea is true",name:"rows",required:!1,type:{name:"number"}},options:{defaultValue:null,description:"NOTE: If length 0 it's assumed loading",name:"options",required:!1,type:{name:"string[]"}},freeSolo:{defaultValue:null,description:"",name:"freeSolo",required:!1,type:{name:"boolean"}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"name"'},{value:'"on"'},{value:'"off"'},{value:'"tel"'},{value:'"url"'},{value:'"email"'},{value:'"language"'},{value:'"honorific-prefix"'},{value:'"given-name"'},{value:'"additional-name"'},{value:'"family-name"'},{value:'"honorific-suffix"'},{value:'"nickname"'},{value:'"username"'},{value:'"new-password"'},{value:'"current-password"'},{value:'"one-time-code"'},{value:'"organization-title"'},{value:'"organization"'},{value:'"street-address"'},{value:'"address-line1"'},{value:'"address-line2"'},{value:'"address-line3"'},{value:'"address-level4"'},{value:'"address-level3"'},{value:'"address-level2"'},{value:'"address-level1"'},{value:'"country"'},{value:'"country-name"'},{value:'"postal-code"'},{value:'"cc-name"'},{value:'"cc-given-name"'},{value:'"cc-additional-name"'},{value:'"cc-family-name"'},{value:'"cc-number"'},{value:'"cc-exp"'},{value:'"cc-exp-month"'},{value:'"cc-exp-year"'},{value:'"cc-csc"'},{value:'"cc-type"'},{value:'"transaction-currency"'},{value:'"transaction-amount"'},{value:'"bday"'},{value:'"bday-day"'},{value:'"bday-month"'},{value:'"bday-year"'},{value:'"sex"'},{value:'"tel-country-code"'},{value:'"tel-national"'},{value:'"tel-area-code"'},{value:'"tel-local"'},{value:'"tel-extension"'},{value:'"impp"'},{value:'"photo"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/TextField.tsx#TextField"]={docgenInfo:TextField_TextField.__docgenInfo,name:"TextField",path:"src/TextField.tsx#TextField"})}catch(__react_docgen_typescript_loader_error){}var sectionName=__webpack_require__("./src/stories/sectionName.ts"),getStory=__webpack_require__("./src/stories/getStory.tsx"),_getStoryFactory=(0,getStory.A)({sectionName:sectionName.j,wrappedComponent:{TextField:TextField_TextField},argTypes:{"inputProps_aria-invalid":{control:{type:"boolean"}}}}),meta=_getStoryFactory.meta,TextField_stories_getStory=_getStoryFactory.getStory;const TextField_stories=meta;var VueDefault=TextField_stories_getStory((0,objectSpread2.Z)({defaultValue:"","inputProps_aria-label":"the aria label",label:"This is the label",getIsValidValue:function getIsValidValue(value){return console.log("getIsValidValue invoked: ",value),value.includes(" ")?{isValidValue:!1,message:"Can't include spaces"}:{isValidValue:!0}},transformValueBeingTyped:function transformValueBeingTyped(value){return console.log("transformValueBeingTyped invoked: ",value),value}},(0,getStory.K)(["onEscapeKeyDown","onEnterKeyDown","onBlur","onSubmit","onValueBeingTypedChange"]))),VuePassword=TextField_stories_getStory((0,objectSpread2.Z)({defaultValue:"","inputProps_aria-label":"password",label:"Password",type:"password",getIsValidValue:function getIsValidValue(value){return console.log("getIsValidValue invoked: ",value),value.includes(" ")?{isValidValue:!1,message:"Can't include spaces"}:{isValidValue:!0}},transformValueBeingTyped:function transformValueBeingTyped(value){return console.log("transformValueBeingTyped invoked: ",value),value}},(0,getStory.K)(["onEscapeKeyDown","onEnterKeyDown","onBlur","onSubmit","onValueBeingTypedChange"]))),VueWithHint=TextField_stories_getStory((0,objectSpread2.Z)({helperText:"This is an helper text",defaultValue:"","inputProps_aria-label":"input with hint",label:"Foo bar",type:"text",getIsValidValue:function getIsValidValue(value){return console.log("getIsValidValue invoked: ",value),value.includes(" ")?{isValidValue:!1,message:"Can't include spaces"}:{isValidValue:!0}},transformValueBeingTyped:function transformValueBeingTyped(value){return console.log("transformValueBeingTyped invoked: ",value),value}},(0,getStory.K)(["onEscapeKeyDown","onEnterKeyDown","onBlur","onSubmit","onValueBeingTypedChange"]))),VueWithHintAndQuestionMark=TextField_stories_getStory((0,objectSpread2.Z)({helperText:"This is an helper text",questionMarkHelperText:"This is an extra helper text",defaultValue:"","inputProps_aria-label":"input with hint",label:"Foo bar",type:"text",getIsValidValue:function getIsValidValue(value){return console.log("getIsValidValue invoked: ",value),value.includes(" ")?{isValidValue:!1,message:"Can't include spaces"}:{isValidValue:!0}},transformValueBeingTyped:function transformValueBeingTyped(value){return console.log("transformValueBeingTyped invoked: ",value),value}},(0,getStory.K)(["onEscapeKeyDown","onEnterKeyDown","onBlur","onSubmit","onValueBeingTypedChange"]))),VueTextArea=TextField_stories_getStory((0,objectSpread2.Z)({multiline:!0,defaultValue:"First line\nSecond line","inputProps_aria-label":"the aria label",label:"This is the label",getIsValidValue:function getIsValidValue(value){return console.log("getIsValidValue invoked: ",value),value.includes(" ")?{isValidValue:!1,message:"Can't include spaces"}:{isValidValue:!0}},transformValueBeingTyped:function transformValueBeingTyped(value){return console.log("transformValueBeingTyped invoked: ",value),value}},(0,getStory.K)(["onEscapeKeyDown","onEnterKeyDown","onBlur","onSubmit","onValueBeingTypedChange"]))),VueWithSuggestions=TextField_stories_getStory((0,objectSpread2.Z)({defaultValue:"",freeSolo:!0,"inputProps_aria-label":"the aria label",label:"This is the label",getIsValidValue:function getIsValidValue(value){return console.log("getIsValidValue invoked: ",value),value.includes(" ")?{isValidValue:!1,message:"Can't include spaces"}:{isValidValue:!0}},transformValueBeingTyped:function transformValueBeingTyped(value){return console.log("transformValueBeingTyped invoked: ",value),value},options:["first","second","third"]},(0,getStory.K)(["onEscapeKeyDown","onEnterKeyDown","onBlur","onSubmit","onValueBeingTypedChange"])));VueDefault.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "defaultValue": "",\n    "inputProps_aria-label": "the aria label",\n    "label": "This is the label",\n    "getIsValidValue": value => {\n        console.log("getIsValidValue invoked: ", value);\n\n        if (value.includes(" ")) {\n            return { "isValidValue": false, "message": "Can\'t include spaces" };\n        }\n\n        return { "isValidValue": true };\n    },\n    "transformValueBeingTyped": value => {\n        console.log("transformValueBeingTyped invoked: ", value);\n        return value;\n    },\n    ...logCallbacks([\n        "onEscapeKeyDown",\n        "onEnterKeyDown",\n        "onBlur",\n        "onSubmit",\n        "onValueBeingTypedChange",\n    ]),\n})'}},VueDefault.parameters),VuePassword.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "defaultValue": "",\n    "inputProps_aria-label": "password",\n    "label": "Password",\n    "type": "password",\n    "getIsValidValue": value => {\n        console.log("getIsValidValue invoked: ", value);\n\n        if (value.includes(" ")) {\n            return { "isValidValue": false, "message": "Can\'t include spaces" };\n        }\n\n        return { "isValidValue": true };\n    },\n    "transformValueBeingTyped": value => {\n        console.log("transformValueBeingTyped invoked: ", value);\n        return value;\n    },\n    ...logCallbacks([\n        "onEscapeKeyDown",\n        "onEnterKeyDown",\n        "onBlur",\n        "onSubmit",\n        "onValueBeingTypedChange",\n    ]),\n})'}},VuePassword.parameters),VueWithHint.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "helperText": "This is an helper text",\n    "defaultValue": "",\n    "inputProps_aria-label": "input with hint",\n    "label": "Foo bar",\n    "type": "text",\n    "getIsValidValue": value => {\n        console.log("getIsValidValue invoked: ", value);\n\n        if (value.includes(" ")) {\n            return { "isValidValue": false, "message": "Can\'t include spaces" };\n        }\n\n        return { "isValidValue": true };\n    },\n    "transformValueBeingTyped": value => {\n        console.log("transformValueBeingTyped invoked: ", value);\n        return value;\n    },\n    ...logCallbacks([\n        "onEscapeKeyDown",\n        "onEnterKeyDown",\n        "onBlur",\n        "onSubmit",\n        "onValueBeingTypedChange",\n    ]),\n})'}},VueWithHint.parameters),VueWithHintAndQuestionMark.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "helperText": "This is an helper text",\n    "questionMarkHelperText": "This is an extra helper text",\n    "defaultValue": "",\n    "inputProps_aria-label": "input with hint",\n    "label": "Foo bar",\n    "type": "text",\n    "getIsValidValue": value => {\n        console.log("getIsValidValue invoked: ", value);\n\n        if (value.includes(" ")) {\n            return { "isValidValue": false, "message": "Can\'t include spaces" };\n        }\n\n        return { "isValidValue": true };\n    },\n    "transformValueBeingTyped": value => {\n        console.log("transformValueBeingTyped invoked: ", value);\n        return value;\n    },\n    ...logCallbacks([\n        "onEscapeKeyDown",\n        "onEnterKeyDown",\n        "onBlur",\n        "onSubmit",\n        "onValueBeingTypedChange",\n    ]),\n})'}},VueWithHintAndQuestionMark.parameters),VueTextArea.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "multiline": true,\n    "defaultValue": "First line\\nSecond line",\n    "inputProps_aria-label": "the aria label",\n    "label": "This is the label",\n    "getIsValidValue": value => {\n        console.log("getIsValidValue invoked: ", value);\n\n        if (value.includes(" ")) {\n            return { "isValidValue": false, "message": "Can\'t include spaces" };\n        }\n\n        return { "isValidValue": true };\n    },\n    "transformValueBeingTyped": value => {\n        console.log("transformValueBeingTyped invoked: ", value);\n        return value;\n    },\n    ...logCallbacks([\n        "onEscapeKeyDown",\n        "onEnterKeyDown",\n        "onBlur",\n        "onSubmit",\n        "onValueBeingTypedChange",\n    ]),\n})'}},VueTextArea.parameters),VueWithSuggestions.parameters=(0,objectSpread2.Z)({storySource:{source:'getStory({\n    "defaultValue": "",\n    "freeSolo": true,\n    "inputProps_aria-label": "the aria label",\n    "label": "This is the label",\n    "getIsValidValue": value => {\n        console.log("getIsValidValue invoked: ", value);\n\n        if (value.includes(" ")) {\n            return { "isValidValue": false, "message": "Can\'t include spaces" };\n        }\n\n        return { "isValidValue": true };\n    },\n    "transformValueBeingTyped": value => {\n        console.log("transformValueBeingTyped invoked: ", value);\n        return value;\n    },\n    "options": ["first", "second", "third"],\n    ...logCallbacks([\n        "onEscapeKeyDown",\n        "onEnterKeyDown",\n        "onBlur",\n        "onSubmit",\n        "onValueBeingTypedChange",\n    ]),\n})'}},VueWithSuggestions.parameters);var __namedExportsOrder=["VueDefault","VuePassword","VueWithHint","VueWithHintAndQuestionMark","VueTextArea","VueWithSuggestions"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/TextField.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/TextField.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Tooltip.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Vue1:()=>Vue1,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_Tooltip__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/Tooltip.tsx"),_theme__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/stories/theme.ts"),_sectionName__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/stories/sectionName.ts"),_getStory__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/stories/getStory.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_getStoryFactory=(0,_getStory__WEBPACK_IMPORTED_MODULE_2__.A)({sectionName:_sectionName__WEBPACK_IMPORTED_MODULE_4__.j,wrappedComponent:{Tooltip:_Tooltip__WEBPACK_IMPORTED_MODULE_0__.u}}),meta=_getStoryFactory.meta,getStory=_getStoryFactory.getStory;const __WEBPACK_DEFAULT_EXPORT__=meta;var Vue1=getStory({children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_theme__WEBPACK_IMPORTED_MODULE_1__.JO,{iconId:"help"}),title:"This is the title"});Vue1.parameters=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({storySource:{source:'getStory({\n    "children": <Icon iconId="help" />,\n    "title": "This is the title",\n})'}},Vue1.parameters);var __namedExportsOrder=["Vue1"];try{Meta.displayName="Meta",Meta.__docgenInfo={description:"Metadata to configure the stories for a component.",displayName:"Meta",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Tooltip.stories.tsx#Meta"]={docgenInfo:Meta.__docgenInfo,name:"Meta",path:"src/stories/Tooltip.stories.tsx#Meta"})}catch(__react_docgen_typescript_loader_error){}},"./.storybook/preview.js-generated-config-entry.js":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{"use strict";var preview_namespaceObject={};__webpack_require__.r(preview_namespaceObject),__webpack_require__.d(preview_namespaceObject,{__namedExportsOrder:()=>preview_namedExportsOrder,parameters:()=>parameters});var ClientApi=__webpack_require__("./node_modules/@storybook/client-api/dist/esm/ClientApi.js"),esm=__webpack_require__("./node_modules/@storybook/theming/dist/esm/index.js"),darkTheme=(0,esm.create)({base:"dark",appBg:"#2c323f",appContentBg:"#2c323f",barBg:"#2c323f",colorSecondary:"#ff562c",textColor:"#f1f0eb",brandImage:"/onyxiaLogo.png",brandTitle:"Onyxia UI",brandUrl:"https://github.com/garronej/onyxia-ui",fontBase:'"Work Sans","Open Sans", sans-serif',fontCode:"monospace"}),lightTheme=(0,esm.create)({base:"light",appBg:"#f1f0eb",appContentBg:"#f1f0eb",barBg:"#f1f0eb",colorSecondary:"#ff562c",textColor:"#2c323f",textInverseColor:"#f1f0eb",brandImage:"/onyxiaLogo.png",brandTitle:"Onyxia UI",brandUrl:"https://github.com/garronej/onyxia-ui",fontBase:'"Work Sans","Open Sans", sans-serif',fontCode:"monospace"}),objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),blocks=(__webpack_require__("./node_modules/react/index.js"),__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js")),dist=__webpack_require__("./node_modules/storybook-dark-mode/dist/index.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),DocsContainer=function DocsContainer(_ref){var children=_ref.children,context=_ref.context,dark=(0,dist.useDarkMode)();return(0,jsx_runtime.jsx)(blocks.Zu,{context:(0,objectSpread2.Z)((0,objectSpread2.Z)({},context),{},{storyById:function storyById(id){var _storyContext$paramet,storyContext=context.storyById(id);return(0,objectSpread2.Z)((0,objectSpread2.Z)({},storyContext),{},{parameters:(0,objectSpread2.Z)((0,objectSpread2.Z)({},null==storyContext?void 0:storyContext.parameters),{},{docs:(0,objectSpread2.Z)((0,objectSpread2.Z)({},null==storyContext||null===(_storyContext$paramet=storyContext.parameters)||void 0===_storyContext$paramet?void 0:_storyContext$paramet.docs),{},{theme:dark?darkTheme:lightTheme})})})}}),children})};DocsContainer.__docgenInfo={description:"",methods:[],displayName:"DocsContainer"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES[".storybook/DocsContainer.js"]={name:"DocsContainer",docgenInfo:DocsContainer.__docgenInfo,path:".storybook/DocsContainer.js"});var mainServices,parameters={actions:{argTypesRegex:"^on[A-Z].*"},controls:{matchers:{color:/(background|color)$/i,date:/Date$/}},darkMode:{light:lightTheme,dark:darkTheme},docs:{container:DocsContainer},viewport:{viewports:{"1440p":{name:"1440p",styles:{width:"2560px",height:"1440px"}},fullHD:{name:"Full HD",styles:{width:"1920px",height:"1080px"}},macBookProBig:{name:"MacBook Pro Big",styles:{width:"1024px",height:"640px"}},macBookProMedium:{name:"MacBook Pro Medium",styles:{width:"1440px",height:"900px"}},macBookProSmall:{name:"MacBook Pro Small",styles:{width:"1680px",height:"1050px"}},pcINSEE:{name:"PC Agent INSEE",styles:{width:"960px",height:"540px"}},verySmallLandscape:{name:"Very small landscape",styles:{width:"599px",height:"337px"}}}},options:{storySort:function storySort(a,b){return getHardCodedWeight(b[1].kind)-getHardCodedWeight(a[1].kind)}}},getHardCodedWeight=(mainServices=["documentation/Fundamentals/Colors","documentation/Components/Button","documentation/Components/Alert"],{getHardCodedWeight:function getHardCodedWeight(kind){for(var i=0;i<mainServices.length;i++)if(kind.toLowerCase().includes(mainServices[i].toLowerCase()))return mainServices.length-i;return 0}}).getHardCodedWeight,preview_namedExportsOrder=["parameters"];function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.keys(preview_namespaceObject).forEach((function(key){var value=preview_namespaceObject[key];switch(key){case"args":return(0,ClientApi.uc)(value);case"argTypes":return(0,ClientApi.v9)(value);case"decorators":return value.forEach((function(decorator){return(0,ClientApi.$9)(decorator,!1)}));case"loaders":return value.forEach((function(loader){return(0,ClientApi.HZ)(loader,!1)}));case"parameters":return(0,ClientApi.h1)(function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach((function(key){_defineProperty(target,key,source[key])})):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach((function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}))}return target}({},value),!1);case"argTypesEnhancers":return value.forEach((function(enhancer){return(0,ClientApi.My)(enhancer)}));case"argsEnhancers":return value.forEach((function(enhancer){return(0,ClientApi._C)(enhancer)}));case"render":return(0,ClientApi.$P)(value);case"globals":case"globalTypes":var v={};return v[key]=value,(0,ClientApi.h1)(v,!1);case"__namedExportsOrder":case"decorateStory":case"renderToDOM":return null;default:return console.log(key+" was not supported :( !")}}))},"./src/Alert.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{b:()=>Alert});var AlertProps,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_Icon__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/Icon.tsx"),_IconButton__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/IconButton.tsx"),_mui_material_Alert__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/@mui/material/Alert/Alert.js"),_Text_TextBase__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/Text/TextBase.ts"),_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/lib/ThemeProvider.tsx"),_mui_icons_material_CloseSharp__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@mui/icons-material/CloseSharp.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["severity","children","className"];AlertProps||(AlertProps={});var IconButton=(0,_IconButton__WEBPACK_IMPORTED_MODULE_2__.k)((0,_Icon__WEBPACK_IMPORTED_MODULE_1__.I)({closeSharp:_mui_icons_material_CloseSharp__WEBPACK_IMPORTED_MODULE_6__.Z})).IconButton,Alert=(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)((function(props){var severity=props.severity,children=props.children,className=props.className,rest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_7__.Z)(props,_excluded),_useStyles=useStyles({severity,classesOverrides:props.classes}),classes=_useStyles.classes,cx=_useStyles.cx,_useClosure=function useClosure(){var _useReducer=(0,react__WEBPACK_IMPORTED_MODULE_0__.useReducer)((function(){return!0}),!1),_useReducer2=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_8__.Z)(_useReducer,2),isClosed=_useReducer2[0],uncontrolledClose=_useReducer2[1];return{isClosed:"isClosed"in rest?rest.isClosed:isClosed,uncontrolledClose}}(),isClosed=_useClosure.isClosed,uncontrolledClose=_useClosure.uncontrolledClose;return isClosed?null:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_mui_material_Alert__WEBPACK_IMPORTED_MODULE_9__.Z,{className:cx(classes.root,className),severity,classes:{action:classes.action,icon:classes.icon},action:"doDisplayCross"in rest&&rest.doDisplayCross&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(IconButton,{iconId:"closeSharp","aria-label":"close",onClick:"isClosed"in rest?rest.onClose:function(){var _rest$onClose;null===(_rest$onClose=rest.onClose)||void 0===_rest$onClose||_rest$onClose.call(rest),uncontrolledClose()}}),children:"string"==typeof children?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Text_TextBase__WEBPACK_IMPORTED_MODULE_3__.x,{typo:"label 2",children}):children})})),useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_4__.IR.withName({Alert}).withParams().create((function(_ref){var theme=_ref.theme,severity=_ref.severity;return{root:{alignItems:"center",color:theme.colors.useCases.typography.textPrimary,backgroundColor:theme.colors.useCases.alertSeverity[severity].background},icon:{"& svg":{color:theme.colors.useCases.alertSeverity[severity].main}},action:{alignItems:"center",padding:0}}}));try{Alert.displayName="Alert",Alert.__docgenInfo={description:"",displayName:"Alert",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},classes:{defaultValue:null,description:"",name:"classes",required:!1,type:{name:'Partial<Record<"icon" | "action" | "root", string>>'}},severity:{defaultValue:null,description:"",name:"severity",required:!0,type:{name:"enum",value:[{value:'"error"'},{value:'"info"'},{value:'"success"'},{value:'"warning"'}]}},doDisplayCross:{defaultValue:null,description:"",name:"doDisplayCross",required:!0,type:{name:"true"}},isClosed:{defaultValue:null,description:"",name:"isClosed",required:!0,type:{name:"boolean"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!1,type:{name:"(() => void) | (() => void)"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Alert.tsx#Alert"]={docgenInfo:Alert.__docgenInfo,name:"Alert",path:"src/Alert.tsx#Alert"})}catch(__react_docgen_typescript_loader_error){}},"./src/Button.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{a:()=>createButton});var ButtonProps,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/lib/ThemeProvider.tsx"),tsafe_id__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tsafe/id.js"),powerhooks_useGuaranteedMemo__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/powerhooks/useGuaranteedMemo.js"),_mui_material_Button__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/@mui/material/Button/Button.js"),tsafe_capitalize__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/tsafe/capitalize.js"),tsafe__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/tsafe/index.js"),_lib__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./src/lib/index.ts"),_lib_typography__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./src/lib/typography.ts"),_tools_pxToNumber__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./src/tools/pxToNumber.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","variant","disabled","children","startIcon","endIcon","autoFocus","tabIndex","name","htmlId","aria-label"],_excluded2=["type"],_excluded3=["onClick","href","doOpenNewTabIfHref"];function createButton(params){var Icon=(null!=params?params:{Icon:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_2__.id)((function(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.Fragment,{})}))}).Icon,Button=(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)((0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((function(props,ref){var className=props.className,_props$variant=props.variant,variant=void 0===_props$variant?"primary":_props$variant,_props$disabled=props.disabled,disabled=void 0!==_props$disabled&&_props$disabled,children=props.children,startIcon=props.startIcon,endIcon=props.endIcon,_props$autoFocus=props.autoFocus,autoFocus=void 0!==_props$autoFocus&&_props$autoFocus,tabIndex=props.tabIndex,name=props.name,htmlId=props.htmlId,ariaLabel=props["aria-label"],rest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_9__.Z)(props,_excluded),_useStyles=useStyles({variant,disabled}),classes=_useStyles.classes,cx=_useStyles.cx,IconWd=(0,powerhooks_useGuaranteedMemo__WEBPACK_IMPORTED_MODULE_3__.useGuaranteedMemo)((function(){return function(props){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(Icon,{iconId:props.iconId,className:classes.icon,size:"default"})}}),[disabled,classes.icon]);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_mui_material_Button__WEBPACK_IMPORTED_MODULE_10__.Z,(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)({disableFocusRipple:!0,ref,className:cx(classes.root,className),disabled,startIcon:void 0===startIcon?void 0:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(IconWd,{iconId:startIcon}),endIcon:void 0===endIcon?void 0:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(IconWd,{iconId:endIcon}),autoFocus,tabIndex,name,id:htmlId,"aria-label":ariaLabel},function(){if("type"in rest){var type=rest.type,_restRest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_9__.Z)(rest,_excluded2);return(0,tsafe__WEBPACK_IMPORTED_MODULE_5__.assert)(),(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)({type},_restRest)}var onClick=rest.onClick,href=rest.href,_rest$doOpenNewTabIfH=rest.doOpenNewTabIfHref,doOpenNewTabIfHref=void 0===_rest$doOpenNewTabIfH?void 0!==href:_rest$doOpenNewTabIfH,restRest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_9__.Z)(rest,_excluded3);return(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)({onClick,href,target:doOpenNewTabIfHref?"_blank":void 0},restRest)}()),{},{children:"string"==typeof children?(0,tsafe_capitalize__WEBPACK_IMPORTED_MODULE_4__.capitalize)(children):children}))}))),useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__.IR.withName({Button}).withParams().create((function(_ref2){var hoverBackgroundColor,borderWidth,approxHeight,theme=_ref2.theme,variant=_ref2.variant,disabled=_ref2.disabled,textColor=theme.colors.useCases.typography[disabled?"textDisabled":function(){switch(variant){case"primary":return"textFocus";case"secondary":case"ternary":return"textPrimary"}}()],hoverTextColor=function(){switch(theme.isDarkModeEnabled){case!0:return"ternary"===variant?theme.colors.useCases.surfaces.background:theme.colors.palette.dark.main;case!1:switch(variant){case"primary":return theme.colors.palette.dark.main;case"secondary":return theme.colors.palette.light.main;case"ternary":return theme.colors.useCases.surfaces.background}}}();return{root:(hoverBackgroundColor=theme.colors.useCases.buttons[function(){switch(variant){case"primary":return"actionHoverPrimary";case"secondary":case"ternary":return"actionHoverSecondary"}}()],borderWidth=function(){switch(variant){case"primary":case"secondary":return 2;case"ternary":return 0}}(),approxHeight=2*theme.spacing(2)+2*borderWidth+(0,_tools_pxToNumber__WEBPACK_IMPORTED_MODULE_12__.F)(theme.typography.variants[_lib_typography__WEBPACK_IMPORTED_MODULE_7__.Zc].style.lineHeight),(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)({textTransform:"unset",backgroundColor:disabled?theme.colors.useCases.buttons.actionDisabledBackground:function(){switch(variant){case"primary":case"secondary":return"transparent";case"ternary":return theme.colors.useCases.surfaces.background}}(),borderRadius:approxHeight/2,borderWidth,borderStyle:"solid",borderColor:disabled?"transparent":hoverBackgroundColor},theme.spacing.topBottom("padding",2)),theme.spacing.rightLeft("padding",theme.windowInnerWidth>=_lib__WEBPACK_IMPORTED_MODULE_6__.ak.xl?3:4)),{},{"&.MuiButton-text":{color:textColor},"&:hover, &:focus":{backgroundColor:hoverBackgroundColor,"& .MuiSvgIcon-root":{color:hoverTextColor},"&.MuiButton-text":{color:hoverTextColor}}})),icon:{color:textColor}}}));return{Button}}ButtonProps||(ButtonProps={});try{createButton.displayName="createButton",createButton.__docgenInfo={description:"",displayName:"createButton",props:{Icon:{defaultValue:null,description:"",name:"Icon",required:!0,type:{name:"(props: IconProps<IconId>) => ReactElement<any, any> | null"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Button.tsx#createButton"]={docgenInfo:createButton.__docgenInfo,name:"createButton",path:"src/Button.tsx#createButton"})}catch(__react_docgen_typescript_loader_error){}},"./src/ButtonBar.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{c:()=>createButtonBar});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/lib/ThemeProvider.tsx"),powerhooks_useCallbackFactory__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/powerhooks/useCallbackFactory.js"),_ButtonBarButton__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/ButtonBarButton.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/react/jsx-runtime.js");function createButtonBar(params){var Icon=params.Icon,ButtonBarButton=(0,_ButtonBarButton__WEBPACK_IMPORTED_MODULE_3__.q)({Icon}).ButtonBarButton,ButtonBar=(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)((function(props){var className=props.className,buttons=props.buttons,onClick=props.onClick,_useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx,onClickFactory=(0,powerhooks_useCallbackFactory__WEBPACK_IMPORTED_MODULE_2__.useCallbackFactory)((function(_ref){var buttonId=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_5__.Z)(_ref,1)[0];return onClick(buttonId)}));return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div",{className:cx(classes.root,className),children:buttons.map((function(_ref3){var buttonId=_ref3.buttonId,icon=_ref3.icon,isDisabled=_ref3.isDisabled,label=_ref3.label;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(ButtonBarButton,{startIcon:icon,disabled:isDisabled,onClick:onClickFactory(buttonId),children:label},buttonId)}))})})),useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__.IR.withName({ButtonBar}).create((function(_ref4){var theme=_ref4.theme;return{root:{backgroundColor:theme.colors.useCases.surfaces.surface1,boxShadow:theme.shadows[1],borderRadius:8,overflow:"hidden"}}}));return{ButtonBar}}try{createButtonBar.displayName="createButtonBar",createButtonBar.__docgenInfo={description:"",displayName:"createButtonBar",props:{Icon:{defaultValue:null,description:"",name:"Icon",required:!0,type:{name:"(props: IconProps<IconId>) => ReactElement<any, any> | null"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/ButtonBar.tsx#createButtonBar"]={docgenInfo:createButtonBar.__docgenInfo,name:"createButtonBar",path:"src/ButtonBar.tsx#createButtonBar"})}catch(__react_docgen_typescript_loader_error){}},"./src/ButtonBarButton.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{q:()=>createButtonBarButton});var ButtonBarButtonProps,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/lib/ThemeProvider.tsx"),_Button__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/Button.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","startIcon","disabled","children"];function createButtonBarButton(params){var Icon=params.Icon,Button=(0,_Button__WEBPACK_IMPORTED_MODULE_2__.a)({Icon}).Button,ButtonBarButton=(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)((function(props){var className=props.className,startIcon=props.startIcon,disabled=props.disabled,children=props.children,rest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__.Z)(props,_excluded),_useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Button,(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({className:cx(classes.root,className),variant:"secondary",startIcon,disabled},rest),{},{children}))})),useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__.IR.withName({ButtonBarButton}).create((function(_ref){var theme=_ref.theme;return{root:{backgroundColor:"transparent",borderRadius:"unset",borderColor:"transparent",transition:"none","& > *":{transition:"none"},"&:hover.MuiButton-text, &:focus.MuiButton-text":{color:theme.colors.useCases.typography.textPrimary,borderBottomColor:theme.colors.useCases.buttons.actionActive,boxSizing:"border-box",backgroundColor:"unset","& .MuiSvgIcon-root":{color:theme.colors.useCases.typography.textPrimary}},"&:active.MuiButton-text":{color:theme.colors.useCases.typography.textFocus,"& .MuiSvgIcon-root":{color:theme.colors.useCases.typography.textFocus}}}}}));return{ButtonBarButton}}ButtonBarButtonProps||(ButtonBarButtonProps={});try{createButtonBarButton.displayName="createButtonBarButton",createButtonBarButton.__docgenInfo={description:"",displayName:"createButtonBarButton",props:{Icon:{defaultValue:null,description:"",name:"Icon",required:!0,type:{name:"(props: IconProps<IconId>) => ReactElement<any, any> | null"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/ButtonBarButton.tsx#createButtonBarButton"]={docgenInfo:createButtonBarButton.__docgenInfo,name:"createButtonBarButton",path:"src/ButtonBarButton.tsx#createButtonBarButton"})}catch(__react_docgen_typescript_loader_error){}},"./src/Icon.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{I:()=>createIcon});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/lib/ThemeProvider.tsx"),_mui_material_SvgIcon__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@mui/material/SvgIcon/SvgIcon.js"),tsafe_assert__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tsafe/assert.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["iconId","className","size","onClick"];function createIcon(componentByIconId){var useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__.IR.withParams().create((function(_ref){var theme=_ref.theme,size=_ref.size;return{root:{color:"inherit",verticalAlign:"top",fontSize:theme.iconSizesInPxByName[size],width:"1em",height:"1em"}}}));return{Icon:(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)((0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((function(props,ref){var iconId=props.iconId,className=props.className,_props$size=props.size,size=void 0===_props$size?"default":_props$size,onClick=props.onClick,rest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__.Z)(props,_excluded);(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_2__.assert)();var _useStyles=useStyles({size}),classes=_useStyles.classes,cx=_useStyles.cx,Component=componentByIconId[iconId];return function isMuiIcon(Component){return"type"in Component}(Component)?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Component,(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({ref,className:cx(classes.root,className),onClick},rest)):(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_mui_material_SvgIcon__WEBPACK_IMPORTED_MODULE_6__.Z,(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({ref,onClick,className:cx(classes.root,className),component:Component},rest))})))}}try{createIcon.displayName="createIcon",createIcon.__docgenInfo={description:"",displayName:"createIcon",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Icon.tsx#createIcon"]={docgenInfo:createIcon.__docgenInfo,name:"createIcon",path:"src/Icon.tsx#createIcon"})}catch(__react_docgen_typescript_loader_error){}},"./src/IconButton.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{k:()=>createIconButton});var IconButtonProps,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/lib/ThemeProvider.tsx"),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/react/index.js"),_mui_material_IconButton__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@mui/material/IconButton/IconButton.js"),tsafe_id__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tsafe/id.js"),tsafe_assert__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/tsafe/assert.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","iconClassName","iconId","size","disabled","autoFocus","tabIndex","name","id","aria-label"],_excluded2=["onClick","href"],_excluded3=["href","doOpenNewTabIfHref"],_excluded4=["type"];function createIconButton(params){var Icon=(null!=params?params:{Icon:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_2__.id)((function(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment,{})}))}).Icon,IconButton=(0,react__WEBPACK_IMPORTED_MODULE_1__.memo)((0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((function(props,ref){var className=props.className,iconClassName=props.iconClassName,iconId=props.iconId,size=props.size,_props$disabled=props.disabled,disabled=void 0!==_props$disabled&&_props$disabled,_props$autoFocus=props.autoFocus,autoFocus=void 0!==_props$autoFocus&&_props$autoFocus,tabIndex=props.tabIndex,name=props.name,id=props.id,ariaLabel=props["aria-label"],rest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__.Z)(props,_excluded),_useStyles=useStyles({disabled}),classes=_useStyles.classes,cx=_useStyles.cx;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_mui_material_IconButton__WEBPACK_IMPORTED_MODULE_6__.Z,(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__.Z)({ref,className:cx(classes.root,className),disabled,"aria-label":null!=ariaLabel?ariaLabel:void 0,autoFocus,tabIndex,name,id},function(){if("onClick"in rest){var onClick=rest.onClick,href=rest.href,restRest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__.Z)(rest,_excluded2);return(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_3__.assert)(),(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__.Z)({onClick,href},restRest)}if("href"in rest){var _href=rest.href,_rest$doOpenNewTabIfH=rest.doOpenNewTabIfHref,doOpenNewTabIfHref=void 0===_rest$doOpenNewTabIfH||_rest$doOpenNewTabIfH,_restRest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__.Z)(rest,_excluded3);return(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_3__.assert)(),(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__.Z)({href:_href,target:doOpenNewTabIfHref?"_blank":void 0},_restRest)}if("type"in rest){var type=rest.type,_restRest2=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__.Z)(rest,_excluded4);return(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_3__.assert)(),(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__.Z)({type},_restRest2)}}()),{},{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(Icon,{iconId,className:cx(classes.icon,iconClassName),size})}))}))),useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_0__.IR.withName({IconButton}).withParams().create((function(_ref2){var theme=_ref2.theme,disabled=_ref2.disabled;return{root:{padding:theme.spacing(2),"&:hover, &:focus":{backgroundColor:"unset","& svg":{color:theme.colors.useCases.buttons.actionHoverPrimary}}},icon:{color:theme.colors.useCases.typography[disabled?"textDisabled":"textPrimary"]}}}));return{IconButton}}IconButtonProps||(IconButtonProps={});try{createIconButton.displayName="createIconButton",createIconButton.__docgenInfo={description:"",displayName:"createIconButton",props:{Icon:{defaultValue:null,description:"",name:"Icon",required:!0,type:{name:"(props: IconProps<IconId>) => ReactElement<any, any> | null"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/IconButton.tsx#createIconButton"]={docgenInfo:createIconButton.__docgenInfo,name:"createIconButton",path:"src/IconButton.tsx#createIconButton"})}catch(__react_docgen_typescript_loader_error){}},"./src/RangeSlider/SimpleOrRangeSlider.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{C:()=>SimpleOrRangeSlider});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_mui_material_Slider__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./node_modules/@mui/material/Slider/Slider.js"),tsafe_assert__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/tsafe/assert.js"),tsafe_is__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tsafe/is.js"),powerhooks_useConstCallback__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/lib/ThemeProvider.tsx"),_Text_TextBase__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/Text/TextBase.ts"),tsafe_symToStr__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/tsafe/symToStr.js"),tsafe_capitalize__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/tsafe/capitalize.js"),powerhooks_useWithProps__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/powerhooks/useWithProps.js"),powerhooks_useDomRect__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/powerhooks/useDomRect.js"),_Tooltip__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./src/Tooltip.tsx"),_Icon__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./src/Icon.tsx"),_mui_icons_material_Help__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("./node_modules/@mui/icons-material/Help.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./node_modules/react/jsx-runtime.js"),useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_4__.IR.withParams().create((function(_ref){var theme=_ref.theme,isRange=_ref.isRange;return{label:{marginBottom:theme.spacing(3)},helpIcon:{marginLeft:theme.spacing(2),color:theme.colors.useCases.typography.textSecondary,verticalAlign:"text-bottom"},wrapper:{display:"flex",alignItems:"center"},slider:{flex:1,margin:theme.spacing({topBottom:0,rightLeft:4}),marginLeft:isRange?void 0:0,minWidth:150}}})),Icon=(0,_Icon__WEBPACK_IMPORTED_MODULE_11__.I)({help:_mui_icons_material_Help__WEBPACK_IMPORTED_MODULE_13__.Z}).Icon,SimpleOrRangeSlider=(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)((function(props){var className=props.className,label=props.label,min=props.min,max=props.max,step=props.step,unit=props.unit,lowExtremitySemantic=props.lowExtremitySemantic,highExtremitySemantic=props.highExtremitySemantic,extraInfo=props.extraInfo,valueLow=props.valueLow,valueHigh=props.valueHigh,onValueChange=props.onValueChange,classes=useStyles({isRange:void 0!==valueLow}).classes,muiSliderValue=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((function(){return void 0===valueLow?valueHigh:((0,tsafe_assert__WEBPACK_IMPORTED_MODULE_1__.assert)(valueLow<=valueHigh,"RangeSlider error, ".concat((0,tsafe_symToStr__WEBPACK_IMPORTED_MODULE_6__.symToStr)({valueLow})," must always be inferior or equal to ").concat((0,tsafe_symToStr__WEBPACK_IMPORTED_MODULE_6__.symToStr)({valueHigh}))),[valueLow,valueHigh])}),[null!=valueLow?valueLow:Object,valueHigh]),onChange=(0,powerhooks_useConstCallback__WEBPACK_IMPORTED_MODULE_3__.useConstCallback)((function(){for(var _len=arguments.length,_ref2=new Array(_len),_key=0;_key<_len;_key++)_ref2[_key]=arguments[_key];var value=_ref2[1],_ref3=void 0===valueLow?((0,tsafe_assert__WEBPACK_IMPORTED_MODULE_1__.assert)((0,tsafe_is__WEBPACK_IMPORTED_MODULE_2__.is)(value)),[void 0,value]):((0,tsafe_assert__WEBPACK_IMPORTED_MODULE_1__.assert)((0,tsafe_is__WEBPACK_IMPORTED_MODULE_2__.is)(value)),value),_ref4=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_14__.Z)(_ref3,2),newValueLow=_ref4[0],newValueHigh=_ref4[1];void 0!==newValueLow&&newValueLow!==valueLow&&onValueChange({extremity:"low",value:newValueLow}),newValueHigh!==valueHigh&&onValueChange({extremity:"high",value:newValueHigh})})),textComponentProps=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((function(){return{id:"text-".concat(~~(1e6*Math.random()))}}),[]),ValueDisplayWp=(0,powerhooks_useWithProps__WEBPACK_IMPORTED_MODULE_8__.useWithProps)(ValueDisplay,{unit,maxValue:max}),_useDomRect=(0,powerhooks_useDomRect__WEBPACK_IMPORTED_MODULE_9__.useDomRect)(),ref=_useDomRect.ref,width=_useDomRect.domRect.width,marks=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((function(){return width*step/(max-min)>=5}),[width,step,max,min]);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div",{className,ref,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)(_Text_TextBase__WEBPACK_IMPORTED_MODULE_5__.x,{className:classes.label,typo:"label 2",componentProps:textComponentProps,children:[label,void 0!==extraInfo&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_Tooltip__WEBPACK_IMPORTED_MODULE_10__.u,{title:extraInfo,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(Icon,{iconId:"help",size:"extra small",className:classes.helpIcon})})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div",{className:classes.wrapper,children:[void 0!==valueLow&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ValueDisplayWp,{semantic:lowExtremitySemantic,value:valueLow}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_mui_material_Slider__WEBPACK_IMPORTED_MODULE_15__.ZP,{className:classes.slider,value:muiSliderValue,onChange,step,marks,min,max,valueLabelDisplay:"off","aria-labelledby":textComponentProps.id}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ValueDisplayWp,{semantic:highExtremitySemantic,value:valueHigh})]})]})})),_ref5=function(){var ValueDisplay=(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)((function(props){var value=props.value,maxValue=props.maxValue,unit=props.unit,semantic=props.semantic,classes=useStyles({maxText:"".concat(maxValue," ").concat(unit)}).classes;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div",{className:classes.root,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)(_Text_TextBase__WEBPACK_IMPORTED_MODULE_5__.x,{typo:"label 1",className:classes.label,children:[value," ",unit]}),void 0!==semantic&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_Text_TextBase__WEBPACK_IMPORTED_MODULE_5__.x,{className:classes.caption,typo:"caption",children:(0,tsafe_capitalize__WEBPACK_IMPORTED_MODULE_7__.capitalize)(semantic)})]})})})),useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_4__.IR.withName({ValueDisplay}).withParams().create((function(_ref6){var theme=_ref6.theme,maxText=_ref6.maxText;return{root:{display:"flex",alignItems:"center"},caption:{color:theme.colors.useCases.typography.textSecondary},label:{display:"inline-flex",flexDirection:"column",justifyContent:"space-between",alignItems:"flex-start","&::after":{content:'"'.concat(maxText,'_"'),height:0,visibility:"hidden",overflow:"hidden",userSelect:"none",pointerEvents:"none","@media speech":{display:"none"}}}}}));return{ValueDisplay}}(),ValueDisplay=_ref5.ValueDisplay;try{SimpleOrRangeSlider.displayName="SimpleOrRangeSlider",SimpleOrRangeSlider.__docgenInfo={description:"",displayName:"SimpleOrRangeSlider",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal"}},min:{defaultValue:null,description:"",name:"min",required:!0,type:{name:"number"}},max:{defaultValue:null,description:"",name:"max",required:!0,type:{name:"number"}},step:{defaultValue:null,description:"",name:"step",required:!0,type:{name:"number"}},unit:{defaultValue:null,description:"",name:"unit",required:!0,type:{name:"string"}},lowExtremitySemantic:{defaultValue:null,description:"",name:"lowExtremitySemantic",required:!1,type:{name:"string"}},highExtremitySemantic:{defaultValue:null,description:"",name:"highExtremitySemantic",required:!1,type:{name:"string"}},extraInfo:{defaultValue:null,description:"",name:"extraInfo",required:!1,type:{name:"string"}},valueLow:{defaultValue:null,description:"",name:"valueLow",required:!1,type:{name:"number"}},valueHigh:{defaultValue:null,description:"",name:"valueHigh",required:!0,type:{name:"number"}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!0,type:{name:'(params: { extremity: "low" | "high"; value: number; }) => void'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/RangeSlider/SimpleOrRangeSlider.tsx#SimpleOrRangeSlider"]={docgenInfo:SimpleOrRangeSlider.__docgenInfo,name:"SimpleOrRangeSlider",path:"src/RangeSlider/SimpleOrRangeSlider.tsx#SimpleOrRangeSlider"})}catch(__react_docgen_typescript_loader_error){}},"./src/Tabs.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{m:()=>Tabs});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_toConsumableArray_js__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),_Text_TextBase__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/Text/TextBase.ts"),_Icon__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/Icon.tsx"),_mui_icons_material_ChevronLeft__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./node_modules/@mui/icons-material/ChevronLeft.js"),_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/lib/ThemeProvider.tsx"),react__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/index.js"),powerhooks_useCallbackFactory__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/powerhooks/useCallbackFactory.js"),powerhooks_useConstCallback__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),powerhooks__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/powerhooks/index.js"),tsafe_assert__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/tsafe/assert.js"),evt_hooks__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/evt/hooks/index.js"),powerhooks_useStateRef__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/powerhooks/useStateRef.js"),evt__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/evt/lib/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["id"],_excluded2=["onClick","className","size","isDisabled","isSelected","isFirst","isVisible"],_excluded3=["type","direction"],_excluded4=["type","text"],Icon=(0,_Icon__WEBPACK_IMPORTED_MODULE_1__.I)({chevronLeft:_mui_icons_material_ChevronLeft__WEBPACK_IMPORTED_MODULE_12__.Z}).Icon;function Tabs(props){var className=props.className,tabs=props.tabs,activeTabId=props.activeTabId,onRequestChangeActiveTab=props.onRequestChangeActiveTab,maxTabCount=props.maxTabCount,_props$size=props.size,size=void 0===_props$size?"big":_props$size,children=props.children,_useState=(0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(0),_useState2=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_13__.Z)(_useState,2),offset=_useState2[0],setOffset=_useState2[1],_useDomRect=(0,powerhooks__WEBPACK_IMPORTED_MODULE_6__.useDomRect)(),rootRef=_useDomRect.ref,rootWidth=_useDomRect.domRect.width,_useDomRect2=(0,powerhooks__WEBPACK_IMPORTED_MODULE_6__.useDomRect)(),leftArrowRef=_useDomRect2.ref,_useDomRect2$domRect=_useDomRect2.domRect,leftArrowWidth=_useDomRect2$domRect.width,leftArrowHeight=_useDomRect2$domRect.height,tabWidth=(0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)((function(){return tabs.length>maxTabCount?(rootWidth-2*leftArrowWidth)/maxTabCount:rootWidth/tabs.length}),[rootWidth,leftArrowWidth,maxTabCount]),tabsWrapperWidth=(0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)((function(){return tabWidth*tabs.length}),[tabWidth,tabs.length]),_useStyles=useStyles({tabsWrapperWidth,leftArrowWidth,leftArrowHeight,offset,tabWidth,classesOverrides:props.classes}),classes=_useStyles.classes,cx=_useStyles.cx,css=_useStyles.css,areArrowsVisible=tabs.length>maxTabCount,_useState3=(0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(0),_useState4=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_13__.Z)(_useState3,2),firstTabIndex=_useState4[0],setFirstTabIndex=_useState4[1],onArrowClickFactory=(0,powerhooks_useCallbackFactory__WEBPACK_IMPORTED_MODULE_4__.useCallbackFactory)((function(_ref){var direction=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_13__.Z)(_ref,1)[0],delta=function(){switch(direction){case"left":return-1;case"right":return 1}}();setFirstTabIndex(firstTabIndex+delta),setOffset(offset-delta)})),onTabClickFactory=(0,powerhooks_useCallbackFactory__WEBPACK_IMPORTED_MODULE_4__.useCallbackFactory)((function(_ref3){var id=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_13__.Z)(_ref3,1)[0];return onRequestChangeActiveTab(id)})),isLeftArrowDisabled=0===firstTabIndex,isRightArrowDisabled=tabs.length-firstTabIndex===maxTabCount,tabWrapperRef=(0,powerhooks_useStateRef__WEBPACK_IMPORTED_MODULE_9__.useStateRef)(null);(0,evt_hooks__WEBPACK_IMPORTED_MODULE_8__.useEvt)((function(ctx){var element=tabWrapperRef.current;null!==element&&(tabs.length<=maxTabCount||evt__WEBPACK_IMPORTED_MODULE_10__.Evt.from(ctx,element,"wheel").attach((function(wheelEvent){wheelEvent.preventDefault();var direction=wheelEvent.deltaY<0?"left":"right";switch(direction){case"left":if(isLeftArrowDisabled)return;break;case"right":if(isRightArrowDisabled)return}onArrowClickFactory(direction)()})))}),[tabWrapperRef.current,firstTabIndex,offset]);var renderLeftArrow=function renderLeftArrow(leftArrowRef,className){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(CustomButton,{ref:leftArrowRef,type:"arrow",direction:"left",size,isFirst:!1,className:cx(classes.leftArrow,className),isDisabled:isLeftArrowDisabled,isSelected:!1,onClick:onArrowClickFactory("left"),isVisible:!0})};return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)("div",{className:cx(classes.root,className),ref:rootRef,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)("div",{className:classes.top,children:[areArrowsVisible&&renderLeftArrow(),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)("div",{ref:tabWrapperRef,className:classes.tabsWrapper,children:tabs.map((function(_ref5){var id=_ref5.id,rest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_14__.Z)(_ref5,_excluded);return(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_15__.Z)({id,isSelected:id===activeTabId},rest)})).map((function(_ref6,i){var id=_ref6.id,title=_ref6.title,isSelected=_ref6.isSelected;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(CustomButton,{type:"tab",text:title,size,isDisabled:!1,isFirst:0===i,className:cx(classes.tab,css({zIndex:isSelected?maxTabCount+1:maxTabCount-i})),onClick:onTabClickFactory(id),isSelected,isVisible:i>=firstTabIndex&&i<firstTabIndex+maxTabCount},id)}))}),areArrowsVisible&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(CustomButton,{type:"arrow",direction:"right",size,isFirst:!1,className:classes.rightArrow,isDisabled:isRightArrowDisabled,isSelected:!1,onClick:onArrowClickFactory("right"),isVisible:!0})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)("div",{className:classes.content,children})]}),renderLeftArrow(leftArrowRef,css({position:"fixed",visibility:"hidden"}))]})}var _ref7=function(){var useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_2__.IR.withParams().create((function(_ref8){var theme=_ref8.theme,isSelected=_ref8.isSelected,isFirst=_ref8.isFirst,size=_ref8.size,isDisabled=_ref8.isDisabled,arrowDirection=_ref8.arrowDirection,isVisible=_ref8.isVisible;return{root:{backgroundColor:theme.colors.useCases.surfaces[isSelected?"surface1":"surface2"],boxShadow:void 0===arrowDirection&&isVisible?[theme.shadows[4]].concat((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_toConsumableArray_js__WEBPACK_IMPORTED_MODULE_16__.Z)(isSelected||isFirst?[theme.shadows[5]]:[])).join(", "):function(){switch(arrowDirection){case"right":return"inset ".concat(theme.shadows[4]);case"left":return"inset ".concat(theme.shadows[5])}}(),padding:theme.spacing(function(){switch(size){case"big":return{topBottom:3,rightLeft:4};case"small":return{topBottom:2,rightLeft:3}}}()),display:"flex",alignItems:"center",cursor:isDisabled?"default":"pointer"},typo:{fontWeight:isSelected?600:void 0}}}));return{CustomButton:(0,react__WEBPACK_IMPORTED_MODULE_3__.memo)((0,react__WEBPACK_IMPORTED_MODULE_3__.forwardRef)((function(props,ref){var onClick=props.onClick,className=props.className,size=props.size,isDisabled=props.isDisabled,isSelected=props.isSelected,isFirst=props.isFirst,isVisible=props.isVisible,restTmp=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_14__.Z)(props,_excluded2),rest=function(){switch(restTmp.type){case"arrow":restTmp.type,restTmp.direction;return(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_14__.Z)(restTmp,_excluded3);case"tab":restTmp.type,restTmp.text;return(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_14__.Z)(restTmp,_excluded4)}}(),onMouseDown=(0,powerhooks_useConstCallback__WEBPACK_IMPORTED_MODULE_5__.useConstCallback)((function(e){e.preventDefault(),isDisabled||0!==e.button||onClick()}));(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_7__.assert)();var _useStyles2=useStyles({isSelected,isFirst,size,isDisabled,arrowDirection:"arrow"!==props.type?void 0:props.direction,isVisible}),classes=_useStyles2.classes,cx=_useStyles2.cx,css=_useStyles2.css,theme=_useStyles2.theme;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)("div",(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_15__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_15__.Z)({ref,className:cx(classes.root,className),color:"secondary",onMouseDown},rest),{},{children:function(){switch(props.type){case"arrow":return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(Icon,{iconId:"chevronLeft",className:cx(function(){switch(props.direction){case"right":return css({transform:"rotate(180deg)"});case"left":return}}(),css({color:isDisabled?theme.colors.useCases.typography.textDisabled:void 0}))});case"tab":return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_Text_TextBase__WEBPACK_IMPORTED_MODULE_0__.x,{color:isDisabled?"disabled":void 0,typo:function(){switch(size){case"big":return"label 1";case"small":return"body 1"}}(),className:classes.typo,children:props.text})}}()}))})))}}(),CustomButton=_ref7.CustomButton,useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_2__.IR.withParams().withName({Tabs}).create((function(_ref9){var theme=_ref9.theme,tabsWrapperWidth=_ref9.tabsWrapperWidth,leftArrowWidth=_ref9.leftArrowWidth,leftArrowHeight=_ref9.leftArrowHeight,offset=_ref9.offset,tabWidth=_ref9.tabWidth,arrows={top:0,zIndex:1,position:"absolute"};return{root:{backgroundColor:theme.colors.useCases.surfaces.surface1,visibility:0===tabWidth?"hidden":"visible"},top:{overflow:"hidden",position:"relative"},leftArrow:(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_15__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_15__.Z)({},arrows),{},{left:0}),rightArrow:(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_15__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_15__.Z)({},arrows),{},{right:0}),tabsWrapper:{transition:"left 250ms",transitionTimingFunction:"ease",position:"relative",left:offset*tabWidth,transform:"translateX(".concat(leftArrowWidth,"px)"),zIndex:0,width:tabsWrapperWidth,display:"flex"},tab:{flex:1,height:leftArrowHeight||void 0},content:{padding:theme.spacing(4)}}}));try{Tabs.displayName="Tabs",Tabs.__docgenInfo={description:"",displayName:"Tabs",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},classes:{defaultValue:null,description:"",name:"classes",required:!1,type:{name:'Partial<Record<"tab" | "root" | "content" | "top" | "leftArrow" | "rightArrow" | "tabsWrapper", string>>'}},tabs:{defaultValue:null,description:"",name:"tabs",required:!0,type:{name:"Tab<TabId>[]"}},activeTabId:{defaultValue:null,description:"",name:"activeTabId",required:!0,type:{name:"string"}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"big"'},{value:'"small"'}]}},maxTabCount:{defaultValue:null,description:"",name:"maxTabCount",required:!0,type:{name:"number"}},onRequestChangeActiveTab:{defaultValue:null,description:"",name:"onRequestChangeActiveTab",required:!0,type:{name:"(tabId: TabId) => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Tabs.tsx#Tabs"]={docgenInfo:Tabs.__docgenInfo,name:"Tabs",path:"src/Tabs.tsx#Tabs"})}catch(__react_docgen_typescript_loader_error){}},"./src/Text/Text.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{r:()=>createText});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),tsafe_assert__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/tsafe/assert.js"),tss_react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tss-react/esm/index.js"),_excluded=["className","children","typo","color","htmlComponent","componentProps","fixedSize_enabled","fixedSize_content","fixedSize_fontWeight"];function createText(params){var useTheme=params.useTheme,Text=(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)((0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((function(props,ref){var className=props.className,children=props.children,typo=props.typo,_props$color=props.color,color=void 0===_props$color?"primary":_props$color,htmlComponent=props.htmlComponent,_props$componentProps=props.componentProps,componentProps=void 0===_props$componentProps?{}:_props$componentProps,_props$fixedSize_enab=props.fixedSize_enabled,fixedSize_enabled=void 0!==_props$fixedSize_enab&&_props$fixedSize_enab,fixedSize_content=props.fixedSize_content,fixedSize_fontWeight=props.fixedSize_fontWeight,rest=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_3__.Z)(props,_excluded);(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_1__.assert)();var theme=useTheme(),_useStyles=useStyles({theme,typo,color,fixedSize_enabled,fixedSize_content,fixedSize_fontWeight,children:"string"==typeof children?children:void 0}),classes=_useStyles.classes,cx=_useStyles.cx;return(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(null!=htmlComponent?htmlComponent:theme.typography.variants[typo].htmlComponent,(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({className:cx(classes.root,className),ref},componentProps),rest),children)}))),useStyles=tss_react__WEBPACK_IMPORTED_MODULE_2__.IR.withParams().withName("Text").create((function(_ref){var theme=_ref.theme,typo=_ref.typo,color=_ref.color,fixedSize_enabled=_ref.fixedSize_enabled,fixedSize_fontWeight=_ref.fixedSize_fontWeight,fixedSize_content=_ref.fixedSize_content,children=_ref.children;return{root:(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},theme.typography.variants[typo].style),{},{color:theme.colors.useCases.typography[function(){switch(color){case"primary":return"textPrimary";case"secondary":return"textSecondary";case"disabled":return"textDisabled";case"focus":return"textFocus"}}()],padding:0,margin:0},fixedSize_enabled?{display:"inline-flex",flexDirection:"column",alignItems:"center",justifyContent:"space-between","&::after":{content:fixedSize_content?'"'.concat(fixedSize_content,'"'):((0,tsafe_assert__WEBPACK_IMPORTED_MODULE_1__.assert)(void 0!==children),'"'.concat(children,'_"')),height:0,visibility:"hidden",overflow:"hidden",userSelect:"none",pointerEvents:"none",fontWeight:fixedSize_fontWeight,"@media speech":{display:"none"}}}:{})}}));return{Text}}try{createText.displayName="createText",createText.__docgenInfo={description:"",displayName:"createText",props:{useTheme:{defaultValue:null,description:"",name:"useTheme",required:!0,type:{name:"() => Theme<{ focus: { main: string; light: string; light2: string; }; dark: { main: string; light: string; greyVariant1: string; greyVariant2: string; greyVariant3: string; greyVariant4: string; }; light: { ...; }; redError: { ...; }; greenSuccess: { ...; }; orangeWarning: { ...; }; blueInfo: { ...; }; }, { ...; },..."}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Text/Text.tsx#createText"]={docgenInfo:createText.__docgenInfo,name:"createText",path:"src/Text/Text.tsx#createText"})}catch(__react_docgen_typescript_loader_error){}},"./src/Text/TextBase.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{x:()=>Text});var _lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/lib/ThemeProvider.tsx");var Text=(0,__webpack_require__("./src/Text/Text.tsx").r)({useTheme:function useTheme(){return(0,_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_0__.yK)().theme}}).Text},"./src/Tooltip.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{u:()=>Tooltip});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_mui_material_Tooltip__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@mui/material/Tooltip/Tooltip.js"),_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/lib/ThemeProvider.tsx"),_Text_TextBase__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/Text/TextBase.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/jsx-runtime.js"),Tooltip=(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)((function(props){var title=props.title,children=props.children,enterDelay=props.enterDelay,classes=useStyles().classes;return void 0===title?children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_mui_material_Tooltip__WEBPACK_IMPORTED_MODULE_4__.Z,{title:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Text_TextBase__WEBPACK_IMPORTED_MODULE_2__.x,{className:classes.root,typo:"caption",children:title}),enterDelay,children})})),useStyles=_lib_ThemeProvider__WEBPACK_IMPORTED_MODULE_1__.IR.withName({Tooltip}).create((function(_ref){return{root:{color:_ref.theme.colors.palette.light.light}}}));try{Tooltip.displayName="Tooltip",Tooltip.__docgenInfo={description:"",displayName:"Tooltip",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | undefined"}},enterDelay:{defaultValue:null,description:"",name:"enterDelay",required:!1,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Tooltip.tsx#Tooltip"]={docgenInfo:Tooltip.__docgenInfo,name:"Tooltip",path:"src/Tooltip.tsx#Tooltip"})}catch(__react_docgen_typescript_loader_error){}},"./src/lib/SplashScreen.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{zH:()=>createSplashScreen});var slicedToArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),regeneratorRuntime=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js"),objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),asyncToGenerator=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js"),react=__webpack_require__("./node_modules/react/index.js"),node_modules_color=__webpack_require__("./node_modules/color/index.js"),color_default=__webpack_require__.n(node_modules_color),hooks=__webpack_require__("./node_modules/evt/hooks/index.js"),useGlobalState=__webpack_require__("./node_modules/powerhooks/useGlobalState.js"),useConstCallback=__webpack_require__("./node_modules/powerhooks/useConstCallback.js"),esm=__webpack_require__("./node_modules/tss-react/esm/index.js"),lib=__webpack_require__("./node_modules/evt/lib/index.js"),id=__webpack_require__("./node_modules/tsafe/id.js"),useGuaranteedMemo=__webpack_require__("./node_modules/powerhooks/useGuaranteedMemo.js"),runExclusive=__webpack_require__("./node_modules/run-exclusive/lib/runExclusive.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),OnyxiaLogo_OnyxiaLogoSvg=null;try{OnyxiaLogo_OnyxiaLogoSvg.displayName="OnyxiaLogoSvg",OnyxiaLogo_OnyxiaLogoSvg.__docgenInfo={description:"",displayName:"OnyxiaLogoSvg",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/assets/svg/OnyxiaLogo.tsx#OnyxiaLogoSvg"]={docgenInfo:OnyxiaLogo_OnyxiaLogoSvg.__docgenInfo,name:"OnyxiaLogoSvg",path:"src/assets/svg/OnyxiaLogo.tsx#OnyxiaLogoSvg"})}catch(__react_docgen_typescript_loader_error){}var _templateObject,useConst=__webpack_require__("./node_modules/powerhooks/useConst.js"),ViewPortAdapter=__webpack_require__("./node_modules/powerhooks/ViewPortAdapter.js"),statefulObservableToStatefulEvt=__webpack_require__("./node_modules/powerhooks/tools/StatefulObservable/statefulObservableToStatefulEvt.js"),fadeOutDuration=700,minimumDisplayDuration=1e3,_ref=function(){var evtDisplayState=lib.Evt.create({count:1,isTransparencyEnabled:!1,prevTime:0,onHiddens:(0,id.id)([])}),_ref2=function(){var $lastDelayedTime,evtLastDelayedTime,getDoUseDelay=($lastDelayedTime=(0,useGlobalState.createUseGlobalState)({name:"lastDelayedTime",initialState:0,doPersistAcrossReloads:!0}).$lastDelayedTime,evtLastDelayedTime=(0,statefulObservableToStatefulEvt.B)({statefulObservable:$lastDelayedTime}),{getDoUseDelay:function getDoUseDelay(){var doUseDelay=Date.now()-evtLastDelayedTime.state>3e4;return doUseDelay&&(evtLastDelayedTime.state=Date.now()),doUseDelay}}).getDoUseDelay,next=runExclusive.build((0,asyncToGenerator.Z)((0,regeneratorRuntime.Z)().mark((function _callee(){return(0,regeneratorRuntime.Z)().wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:if(!getDoUseDelay()){_context.next=3;break}return _context.next=3,new Promise((function(resolve){return setTimeout(resolve,minimumDisplayDuration)}));case 3:evtDisplayState.state=(0,objectSpread2.Z)((0,objectSpread2.Z)({},evtDisplayState.state),{},{prevTime:Date.now()});case 4:case"end":return _context.stop()}}),_callee)}))));function _globalHideSplashScreen(){return(_globalHideSplashScreen=(0,asyncToGenerator.Z)((0,regeneratorRuntime.Z)().mark((function _callee2(){return(0,regeneratorRuntime.Z)().wrap((function _callee2$(_context2){for(;;)switch(_context2.prev=_context2.next){case 0:if(evtDisplayState.state.count=Math.max(evtDisplayState.state.count-1,0),!runExclusive.isRunning(next)){_context2.next=3;break}return _context2.abrupt("return");case 3:next();case 4:case"end":return _context2.stop()}}),_callee2)})))).apply(this,arguments)}return{globalHideSplashScreen:function globalHideSplashScreen(){return _globalHideSplashScreen.apply(this,arguments)}}}(),globalHideSplashScreen=_ref2.globalHideSplashScreen;function useSplashScreenStatusInternal(){(0,hooks.useRerenderOnStateChange)(evtDisplayState);var _useGuaranteedMemo=(0,useGuaranteedMemo.useGuaranteedMemo)((function(){return{isSplashScreenShown:evtDisplayState.state.count>0,isTransparencyEnabled:evtDisplayState.state.isTransparencyEnabled}}),[evtDisplayState.state]);return{isSplashScreenShown:_useGuaranteedMemo.isSplashScreenShown,isTransparencyEnabled:_useGuaranteedMemo.isTransparencyEnabled}}return{useSplashScreen:function useSplashScreen(params){void 0!==(null==params?void 0:params.fadeOutDuration)&&(fadeOutDuration=params.fadeOutDuration),void 0!==(null==params?void 0:params.minimumDisplayDuration)&&(minimumDisplayDuration=params.minimumDisplayDuration);var isUsingSplashScreen=(0,react.useContext)(context);(0,react.useEffect)((function(){var onHidden=(null!=params?params:{}).onHidden;void 0!==onHidden&&(isUsingSplashScreen?evtDisplayState.state.onHiddens.push(onHidden):onHidden())}),[]);var _useClosure=function useClosure(){var countRef=(0,react.useRef)(0),showSplashScreen=(0,useConstCallback.useConstCallback)((function(_ref6){var enableTransparency=_ref6.enableTransparency;countRef.current++,function globalShowSplashScreen(params){evtDisplayState.state={count:evtDisplayState.state.count+1,isTransparencyEnabled:params.enableTransparency,prevTime:Date.now(),onHiddens:[]}}({enableTransparency})}));return{showSplashScreen,hideSplashScreen:(0,useConstCallback.useConstCallback)((0,asyncToGenerator.Z)((0,regeneratorRuntime.Z)().mark((function _callee3(){return(0,regeneratorRuntime.Z)().wrap((function _callee3$(_context3){for(;;)switch(_context3.prev=_context3.next){case 0:if(0!==countRef.current){_context3.next=2;break}return _context3.abrupt("return");case 2:return countRef.current--,_context3.next=5,globalHideSplashScreen();case 5:case"end":return _context3.stop()}}),_callee3)}))))}}(),showSplashScreen=_useClosure.showSplashScreen,hideSplashScreen=_useClosure.hideSplashScreen,_useSplashScreenStatu=useSplashScreenStatusInternal();return{isSplashScreenShown:_useSplashScreenStatu.isSplashScreenShown,isTransparencyEnabled:_useSplashScreenStatu.isTransparencyEnabled,hideRootSplashScreen:globalHideSplashScreen,showSplashScreen,hideSplashScreen}},useSplashScreenStatus:function useSplashScreenStatus(){var _useSplashScreenStatu2=useSplashScreenStatusInternal(),isSplashScreenShown=_useSplashScreenStatu2.isSplashScreenShown,isTransparencyEnabled=_useSplashScreenStatu2.isTransparencyEnabled;return(0,react.useEffect)((function(){var _filter$;if(!isSplashScreenShown){var timer,delayLeft=null!==(_filter$=[fadeOutDuration-(Date.now()-evtDisplayState.state.prevTime)].filter((function(v){return v>0}))[0])&&void 0!==_filter$?_filter$:0;return(0,asyncToGenerator.Z)((0,regeneratorRuntime.Z)().mark((function _callee4(){return(0,regeneratorRuntime.Z)().wrap((function _callee4$(_context4){for(;;)switch(_context4.prev=_context4.next){case 0:return _context4.next=2,new Promise((function(resolve){return timer=setTimeout(resolve,delayLeft)}));case 2:evtDisplayState.state.onHiddens.forEach((function(onHidden){return onHidden()})),evtDisplayState.state.onHiddens=[];case 4:case"end":return _context4.stop()}}),_callee4)})))(),function(){return clearTimeout(timer)}}}),[isSplashScreenShown]),{isSplashScreenShown,isTransparencyEnabled}}}}(),useSplashScreen=_ref.useSplashScreen,useSplashScreenStatus=_ref.useSplashScreenStatus,context=(0,react.createContext)(!1);function createSplashScreen(params){var useTheme=params.useTheme;function SplashScreen(props){var children=props.children,Logo=props.Logo;void 0!==(null==props?void 0:props.fadeOutDuration)&&(fadeOutDuration=props.fadeOutDuration),void 0!==(null==props?void 0:props.minimumDisplayDuration)&&(minimumDisplayDuration=props.minimumDisplayDuration);var _useSplashScreenStatu3=useSplashScreenStatus(),isSplashScreenShown=_useSplashScreenStatu3.isSplashScreenShown,isTransparencyEnabled=_useSplashScreenStatu3.isTransparencyEnabled,defaultOverflow=(0,useConst.useConst)((function(){return document.body.style.overflow}));(0,react.useEffect)((function(){document.body.style.overflow=isSplashScreenShown?"hidden":defaultOverflow}),[isSplashScreenShown]);var _useState=(0,react.useState)(!1),_useState2=(0,slicedToArray.Z)(_useState,2),isFadingOut=_useState2[0],setIsFadingOut=_useState2[1],_useState3=(0,react.useState)(!0),_useState4=(0,slicedToArray.Z)(_useState3,2),isVisible=_useState4[0],setIsVisible=_useState4[1],isViewPortAdapterEnabled=function useClosure(){return{isViewPortAdapterEnabled:void 0!==(0,ViewPortAdapter.useViewPortState)().viewPortState}}().isViewPortAdapterEnabled,classes=useStyles({theme:useTheme(),isVisible,isFadingOut,isTransparencyEnabled,isViewPortAdapterEnabled}).classes;return(0,react.useEffect)((function(){var timer=setTimeout((function(){}),0);return(0,asyncToGenerator.Z)((0,regeneratorRuntime.Z)().mark((function _callee5(){return(0,regeneratorRuntime.Z)().wrap((function _callee5$(_context5){for(;;)switch(_context5.prev=_context5.next){case 0:if(!isSplashScreenShown){_context5.next=5;break}setIsFadingOut(!1),setIsVisible(!0),_context5.next=10;break;case 5:return setIsFadingOut(!0),_context5.next=8,new Promise((function(resolve){return timer=setTimeout(resolve,fadeOutDuration)}));case 8:setIsFadingOut(!1),setIsVisible(!1);case 10:case"end":return _context5.stop()}}),_callee5)})))(),function(){return clearTimeout(timer)}}),[isSplashScreenShown]),(0,jsx_runtime.jsxs)(context.Provider,{value:!0,children:[(0,jsx_runtime.jsx)("div",{className:classes.root,children:(0,jsx_runtime.jsx)(Logo,{})}),children]})}var useStyles=esm.IR.withParams().withName({SplashScreen}).create((function(_ref10){var color,theme=_ref10.theme,isVisible=_ref10.isVisible,isFadingOut=_ref10.isFadingOut,isTransparencyEnabled=_ref10.isTransparencyEnabled;return{root:{width:"100%",height:_ref10.isViewPortAdapterEnabled?"100%":"100vh",position:"fixed",top:0,left:0,zIndex:10,backgroundColor:(color=new(color_default())(theme.colors.useCases.surfaces.background).rgb(),color.alpha(isTransparencyEnabled?.6:color.valpha).string()),backdropFilter:isTransparencyEnabled?"blur(10px)":void 0,display:"flex",alignItems:"center",justifyContent:"center",visibility:isVisible?"visible":"hidden",opacity:isFadingOut?0:1,transition:"opacity ease-in-out ".concat(fadeOutDuration,"ms")}}}));return{SplashScreen}}function createOnyxiaSplashScreenLogo(params){var useTheme=params.useTheme,OnyxiaSplashScreenLogo=memo((function(){var classes=useStyles({theme:useTheme()}).classes;return _jsx(OnyxiaLogoSvg,{className:classes.root})})),useStyles=tss.withParams().withName({OnyxiaSplashScreenLogo}).create((function(_ref11){return{root:{height:"20%",fill:_ref11.theme.colors.useCases.typography.textFocus,"& g":{opacity:0,animation:"".concat(keyframes(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n                            60%, 100% {\n                                opacity: 0;\n                            }\n                            0% {\n                                opacity: 0;\n                            }\n                            40% {\n                                opacity: 1;\n                            }\n                            "])))," 3.5s infinite ease-in-out"),"&:nth-of-type(1)":{animationDelay:".4s"},"&:nth-of-type(2)":{animationDelay:".8s"},"&:nth-of-type(3)":{animationDelay:"1.2s"}}}}}));return{OnyxiaSplashScreenLogo}}try{createSplashScreen.displayName="createSplashScreen",createSplashScreen.__docgenInfo={description:"",displayName:"createSplashScreen",props:{useTheme:{defaultValue:null,description:"",name:"useTheme",required:!0,type:{name:"() => Theme<{ focus: { main: string; light: string; light2: string; }; dark: { main: string; light: string; greyVariant1: string; greyVariant2: string; greyVariant3: string; greyVariant4: string; }; light: { ...; }; redError: { ...; }; greenSuccess: { ...; }; orangeWarning: { ...; }; blueInfo: { ...; }; }, { ...; },..."}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/lib/SplashScreen.tsx#createSplashScreen"]={docgenInfo:createSplashScreen.__docgenInfo,name:"createSplashScreen",path:"src/lib/SplashScreen.tsx#createSplashScreen"})}catch(__react_docgen_typescript_loader_error){}try{createOnyxiaSplashScreenLogo.displayName="createOnyxiaSplashScreenLogo",createOnyxiaSplashScreenLogo.__docgenInfo={description:"You have to create your own version of this component\nyou are expected to size it in percentage.",displayName:"createOnyxiaSplashScreenLogo",props:{useTheme:{defaultValue:null,description:"",name:"useTheme",required:!0,type:{name:"() => Theme<{ focus: { main: string; light: string; light2: string; }; dark: { main: string; light: string; greyVariant1: string; greyVariant2: string; greyVariant3: string; greyVariant4: string; }; light: { ...; }; redError: { ...; }; greenSuccess: { ...; }; orangeWarning: { ...; }; blueInfo: { ...; }; }, { ...; },..."}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/lib/SplashScreen.tsx#createOnyxiaSplashScreenLogo"]={docgenInfo:createOnyxiaSplashScreenLogo.__docgenInfo,name:"createOnyxiaSplashScreenLogo",path:"src/lib/SplashScreen.tsx#createOnyxiaSplashScreenLogo"})}catch(__react_docgen_typescript_loader_error){}try{useSplashScreen.displayName="useSplashScreen",useSplashScreen.__docgenInfo={description:"",displayName:"useSplashScreen",props:{onHidden:{defaultValue:null,description:"",name:"onHidden",required:!1,type:{name:"(() => void)"}},fadeOutDuration:{defaultValue:null,description:"",name:"fadeOutDuration",required:!1,type:{name:"number"}},minimumDisplayDuration:{defaultValue:null,description:"",name:"minimumDisplayDuration",required:!1,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/lib/SplashScreen.tsx#useSplashScreen"]={docgenInfo:useSplashScreen.__docgenInfo,name:"useSplashScreen",path:"src/lib/SplashScreen.tsx#useSplashScreen"})}catch(__react_docgen_typescript_loader_error){}},"./src/lib/ThemeProvider.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{BQ:()=>createThemeProvider,IR:()=>tss,yK:()=>useStyles});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),react=(__webpack_require__("./node_modules/minimal-polyfills/Object.fromEntries.js"),__webpack_require__("./node_modules/react/index.js")),CssBaseline=__webpack_require__("./node_modules/@mui/material/CssBaseline/CssBaseline.js"),ScopedCssBaseline=__webpack_require__("./node_modules/@mui/material/ScopedCssBaseline/ScopedCssBaseline.js"),styles_ThemeProvider=__webpack_require__("./node_modules/@mui/material/styles/ThemeProvider.js"),createMuiStrictModeTheme=__webpack_require__("./node_modules/@mui/material/styles/createMuiStrictModeTheme.js"),styles_createTheme=__webpack_require__("./node_modules/@mui/material/styles/createTheme.js"),powerhooks_useWindowInnerSize=__webpack_require__("./node_modules/powerhooks/useWindowInnerSize.js"),color=__webpack_require__("./src/lib/color.ts"),typography=__webpack_require__("./src/lib/typography.ts"),shadows=["none","0px 6px 10px 0px rgba(0,0,0,0.07)","0px 4px 4px 0px rgba(0,0,0,0.1)","6px 0px 16px 0px rgba(0,0,0,0.15)","4px 0px 10px 0px rgba(0,0,0,0.07)","-4px 0px 10px 0px rgba(0,0,0,0.07)","0px 6px 10px 0px rgba(0,0,0,0.14)","0px 8px 10px -7px rgba(0,0,0,0.07)"],useBrowserFontSizeFactor=__webpack_require__("./node_modules/powerhooks/useBrowserFontSizeFactor.js"),spacing=__webpack_require__("./src/lib/spacing.ts"),esm=__webpack_require__("./node_modules/tss-react/esm/index.js"),icon=__webpack_require__("./src/lib/icon.ts"),lib_SplashScreen=__webpack_require__("./src/lib/SplashScreen.tsx"),ViewPortAdapter=__webpack_require__("./node_modules/powerhooks/ViewPortAdapter.js"),memoizee=__webpack_require__("./node_modules/memoizee/index.js"),memoizee_default=__webpack_require__.n(memoizee),id=__webpack_require__("./node_modules/tsafe/id.js"),breakpoints=__webpack_require__("./src/lib/breakpoints.ts"),capitalize=__webpack_require__("./node_modules/tsafe/capitalize.js"),useGuaranteedMemo=__webpack_require__("./node_modules/powerhooks/useGuaranteedMemo.js"),useIsDarkModeEnabled=__webpack_require__("./src/lib/useIsDarkModeEnabled.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),themeBaseContext=(__webpack_require__("./node_modules/powerhooks/useDomRect.js"),(0,react.createContext)(void 0)),isDarkModeEnabledOverrideContext=(0,react.createContext)(void 0);function useIsThemeProvided(){return void 0!==useContext(themeBaseContext)}var tss=(0,esm.Pe)({useContext:function useContext(){return{theme:function useThemeBase(){var theme=(0,react.useContext)(themeBaseContext);if(void 0===theme)throw new Error("Your app should be wrapped into ThemeProvider");return theme}()}}}).tss,useStyles=tss.create({});function createThemeProvider(params){var _params$palette=params.palette,palette=void 0===_params$palette?color.HT:_params$palette,_params$createColorUs=params.createColorUseCases,createColorUseCases=void 0===_params$createColorUs?color.L7:_params$createColorUs,_params$getTypography=params.getTypographyDesc,getTypographyDesc=void 0===_params$getTypography?typography.$X:_params$getTypography,_params$isReactStrict=params.isReactStrictModeEnabled,isReactStrictModeEnabled=void 0!==_params$isReactStrict&&_params$isReactStrict,_params$spacingConfig=params.spacingConfig,spacingConfig=void 0===_params$spacingConfig?spacing.t:_params$spacingConfig,defaultIsDarkModeEnabled=params.defaultIsDarkModeEnabled,_params$getIconSizeIn=params.getIconSizeInPx,getIconSizeInPx=void 0===_params$getIconSizeIn?icon.W5:_params$getIconSizeIn;void 0!==defaultIsDarkModeEnabled&&(useIsDarkModeEnabled.s.state=defaultIsDarkModeEnabled);var createTheme,_ref=(createTheme=memoizee_default()((function(isDarkModeEnabled,windowInnerWidth,windowInnerHeight,browserFontSizeFactor){var toFinalValue,out,f,muiTheme,typographyDesc=getTypographyDesc({windowInnerWidth,windowInnerHeight,browserFontSizeFactor}),useCases=createColorUseCases({palette,isDarkModeEnabled}),spacing=function spacing(factorOrExplicitNumberOfPx){return spacingConfig({factorOrExplicitNumberOfPx,windowInnerWidth,rootFontSizePx:typographyDesc.rootFontSizePx})};return(0,id.id)((0,objectSpread2.Z)((0,objectSpread2.Z)({colors:{palette,useCases},typography:(0,typography.Gr)({typographyDesc}),isDarkModeEnabled,shadows},(muiTheme=(isReactStrictModeEnabled?createMuiStrictModeTheme.Z:styles_createTheme.Z)({typography:(0,typography.Tn)({typographyDesc}),palette:(0,color.M8)({isDarkModeEnabled,palette,useCases}),spacing,breakpoints:{values:(0,objectSpread2.Z)({xs:0},breakpoints.a)},components:{MuiLink:{defaultProps:{underline:"hover"}}}}),{spacing:(toFinalValue=function toFinalValue(value){return"number"==typeof value?"".concat(spacing(value),"px"):value},out=function out(valueOrObject){if("number"==typeof valueOrObject)return spacing(valueOrObject);var rightLeft=valueOrObject.rightLeft,topBottom=valueOrObject.topBottom;return[topBottom,rightLeft,topBottom,rightLeft].map(toFinalValue).join(" ")},f=function f(params){var axis=params.axis,kind=params.kind,value=params.value,finalValue="number"==typeof value?"".concat(spacing(value),"px"):value;return Object.fromEntries(function(){switch(axis){case"horizontal":return["left","right"];case"vertical":return["top","bottom"]}}().map((function(direction){return["".concat(kind).concat((0,capitalize.capitalize)(direction)),finalValue]})))},out.rightLeft=function(kind,value){return f({axis:"horizontal",kind,value})},out.topBottom=function(kind,value){return f({axis:"vertical",kind,value})},out),muiTheme})),{},{iconSizesInPxByName:(0,icon.X9)({getIconSizeInPx,windowInnerWidth,rootFontSizePx:typographyDesc.rootFontSizePx}),windowInnerWidth}))}),{max:1}),{useTheme:function useTheme(){var isDarkModeEnabled=(0,useIsDarkModeEnabled.J)().isDarkModeEnabled,_useWindowInnerSize=(0,powerhooks_useWindowInnerSize.useWindowInnerSize)(),windowInnerWidth=_useWindowInnerSize.windowInnerWidth,windowInnerHeight=_useWindowInnerSize.windowInnerHeight,browserFontSizeFactor=(0,useBrowserFontSizeFactor.useBrowserFontSizeFactor)().browserFontSizeFactor,isDarkModeEnabledOverride=(0,react.useContext)(isDarkModeEnabledOverrideContext);return createTheme(null!=isDarkModeEnabledOverride?isDarkModeEnabledOverride:isDarkModeEnabled,windowInnerWidth,windowInnerHeight,browserFontSizeFactor)}}),useTheme=_ref.useTheme,SplashScreen=(0,lib_SplashScreen.zH)({useTheme}).SplashScreen,ThemeProvider=function(){function ThemeProviderWithinViewPortAdapter(props){var splashScreen=props.splashScreen,children=props.children,theme=useTheme(),backgroundColor=theme.colors.useCases.surfaces.background;(0,react.useEffect)((function(){for(document.documentElement.style.backgroundColor=backgroundColor;;){var element=document.querySelector("meta[name=theme-color]");if(null===element)break;element.remove()}document.head.insertAdjacentHTML("beforeend",'<meta name="theme-color" content="'.concat(backgroundColor,'">'))}),[backgroundColor]);var isStoryProvider=void 0!==(0,react.useContext)(isDarkModeEnabledOverrideContext),CssBaselineOrScopedCssBaseline=(0,useGuaranteedMemo.useGuaranteedMemo)((function(){return isStoryProvider?function(_ref3){var children=_ref3.children;return(0,jsx_runtime.jsx)(ScopedCssBaseline.Z,{children})}:function(_ref4){var children=_ref4.children;return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(CssBaseline.ZP,{}),children]})}}),[isStoryProvider]),SplashScreenOrId=(0,useGuaranteedMemo.useGuaranteedMemo)((function(){return void 0===splashScreen?function(_ref5){var children=_ref5.children;return(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children})}:function(_ref6){var children=_ref6.children;return(0,jsx_runtime.jsx)(SplashScreen,(0,objectSpread2.Z)((0,objectSpread2.Z)({},splashScreen),{},{children}))}}),[splashScreen]);return(0,jsx_runtime.jsx)(themeBaseContext.Provider,{value:theme,children:(0,jsx_runtime.jsx)(styles_ThemeProvider.Z,{theme:theme.muiTheme,children:(0,jsx_runtime.jsx)(CssBaselineOrScopedCssBaseline,{children:(0,jsx_runtime.jsx)(SplashScreenOrId,{children})})})})}return{ThemeProvider:function ThemeProvider(props){var getViewPortConfig=props.getViewPortConfig,children=props.children,splashScreen=props.splashScreen,ViewPortAdapterOrId=(0,useGuaranteedMemo.useGuaranteedMemo)((function(){return void 0===getViewPortConfig?function(_ref7){var children=_ref7.children;return(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children})}:function(_ref8){var children=_ref8.children;return(0,jsx_runtime.jsx)(ViewPortAdapter.ViewPortAdapter,{getConfig:getViewPortConfig,children})}}),[getViewPortConfig]);return(0,jsx_runtime.jsx)(ViewPortAdapterOrId,{children:(0,jsx_runtime.jsx)(ThemeProviderWithinViewPortAdapter,{splashScreen,children})})}}}().ThemeProvider;var tss=(0,esm.Pe)({useContext:function useContext(){return{theme:useTheme()}}}).tss,useStyles=tss.create({});return{ThemeProvider,useTheme,StoryProvider:function StoryProvider(props){var _props$dark=props.dark,dark=void 0!==_props$dark&&_props$dark,children=props.children;return(0,react.useEffect)((function(){useIsDarkModeEnabled.s.state=dark}),[dark]),(0,jsx_runtime.jsx)(isDarkModeEnabledOverrideContext.Provider,{value:dark,children:(0,jsx_runtime.jsx)(ThemeProvider,{children})})},tss,useStyles}}try{useIsThemeProvided.displayName="useIsThemeProvided",useIsThemeProvided.__docgenInfo={description:"Used internally, do not export globally",displayName:"useIsThemeProvided",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/lib/ThemeProvider.tsx#useIsThemeProvided"]={docgenInfo:useIsThemeProvided.__docgenInfo,name:"useIsThemeProvided",path:"src/lib/ThemeProvider.tsx#useIsThemeProvided"})}catch(__react_docgen_typescript_loader_error){}try{createThemeProvider.displayName="createThemeProvider",createThemeProvider.__docgenInfo={description:"",displayName:"createThemeProvider",props:{isReactStrictModeEnabled:{defaultValue:null,description:"",name:"isReactStrictModeEnabled",required:!1,type:{name:"boolean"}},getTypographyDesc:{defaultValue:null,description:"",name:"getTypographyDesc",required:!1,type:{name:"GetTypographyDesc<CustomTypographyVariantName>"}},palette:{defaultValue:null,description:"",name:"palette",required:!1,type:{name:"{ focus: { main: string; light: string; light2: string; }; dark: { main: string; light: string; greyVariant1: string; greyVariant2: string; greyVariant3: string; greyVariant4: string; }; light: { main: string; ... 4 more ...; greyVariant4: string; }; redError: { ...; }; greenSuccess: { ...; }; orangeWarning: { ...; ..."}},createColorUseCases:{defaultValue:null,description:"",name:"createColorUseCases",required:!1,type:{name:"CreateColorUseCase<Palette, ColorUseCases>"}},spacingConfig:{defaultValue:null,description:"",name:"spacingConfig",required:!1,type:{name:"SpacingConfig"}},defaultIsDarkModeEnabled:{defaultValue:null,description:"",name:"defaultIsDarkModeEnabled",required:!1,type:{name:"boolean"}},getIconSizeInPx:{defaultValue:null,description:"",name:"getIconSizeInPx",required:!1,type:{name:"GetIconSizeInPx"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/lib/ThemeProvider.tsx#createThemeProvider"]={docgenInfo:createThemeProvider.__docgenInfo,name:"createThemeProvider",path:"src/lib/ThemeProvider.tsx#createThemeProvider"})}catch(__react_docgen_typescript_loader_error){}try{useDomRect.displayName="useDomRect",useDomRect.__docgenInfo={description:"",displayName:"useDomRect",props:{ref:{defaultValue:null,description:"",name:"ref",required:!0,type:{name:"RefObject<T>"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/lib/ThemeProvider.tsx#useDomRect"]={docgenInfo:useDomRect.__docgenInfo,name:"useDomRect",path:"src/lib/ThemeProvider.tsx#useDomRect"})}catch(__react_docgen_typescript_loader_error){}try{useWindowInnerSize.displayName="useWindowInnerSize",useWindowInnerSize.__docgenInfo={description:"",displayName:"useWindowInnerSize",props:{isSsrSetup:{defaultValue:null,description:"",name:"isSsrSetup",required:!0,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/lib/ThemeProvider.tsx#useWindowInnerSize"]={docgenInfo:useWindowInnerSize.__docgenInfo,name:"useWindowInnerSize",path:"src/lib/ThemeProvider.tsx#useWindowInnerSize"})}catch(__react_docgen_typescript_loader_error){}try{useStyles.displayName="useStyles",useStyles.__docgenInfo={description:"",displayName:"useStyles",props:{classesOverrides:{defaultValue:null,description:"",name:"classesOverrides",required:!1,type:{name:"Record<string, string>"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/lib/ThemeProvider.tsx#useStyles"]={docgenInfo:useStyles.__docgenInfo,name:"useStyles",path:"src/lib/ThemeProvider.tsx#useStyles"})}catch(__react_docgen_typescript_loader_error){}},"./src/lib/breakpoints.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{a:()=>breakpointsValues});__webpack_require__("./node_modules/powerhooks/ViewPortAdapter.js");var breakpointsValues={sm:600,md:960,lg:1280,xl:1920}},"./src/lib/color.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{L7:()=>createDefaultColorUseCases,M8:()=>createMuiPaletteOptions,HT:()=>defaultPalette});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),node_modules_color=__webpack_require__("./node_modules/color/index.js"),color_default=__webpack_require__.n(node_modules_color);function changeColorOpacity(params){var color=params.color,opacity=params.opacity;return new(color_default())(color).rgb().alpha(opacity).string()}var defaultPalette={focus:{main:"#FF562C",light:"#FF562C",light2:"#FFAD99"},dark:{main:"#2C323F",light:"#373E4F",greyVariant1:"#242C39",greyVariant2:"#5A6270",greyVariant3:"#8A9099",greyVariant4:"#B8BABF"},light:{main:"#F1F0EB",light:"#FDFDFC",greyVariant1:"#E6E6E6",greyVariant2:"#C9C9C9",greyVariant3:"#9E9E9E",greyVariant4:"#747474"},redError:{main:"#CC0B0B",light:"#FEECEB"},greenSuccess:{main:"#29CC2F",light:"#EEFAEE"},orangeWarning:{main:"#FF8800",light:"#FFF5E5"},blueInfo:{main:"#2196F3",light:"#E9F5FE"}};(0,objectSpread2.Z)((0,objectSpread2.Z)({},defaultPalette),{},{focus:{main:"#000091",light:"#9A9AFF",light2:"#E5E5F4"},dark:{main:"#2A2A2A",light:"#383838",greyVariant1:"#161616",greyVariant2:"#9C9C9C",greyVariant3:"#CECECE",greyVariant4:"#E5E5E5"},light:{main:"#F1F0EB",light:"#FDFDFC",greyVariant1:"#E6E6E6",greyVariant2:"#C9C9C9",greyVariant3:"#9E9E9E",greyVariant4:"#747474"}}),(0,objectSpread2.Z)((0,objectSpread2.Z)({},defaultPalette),{},{focus:{main:"#000091",light:"#9A9AFF",light2:"#E5E5F4"},dark:{main:"#2A2A2A",light:"#383838",greyVariant1:"#161616",greyVariant2:"#9C9C9C",greyVariant3:"#CECECE",greyVariant4:"#E5E5E5"},light:{main:"#F7F5F4",light:"#FDFDFC",greyVariant1:"#E6E6E6",greyVariant2:"#C9C9C9",greyVariant3:"#9E9E9E",greyVariant4:"#747474"}}),(0,objectSpread2.Z)((0,objectSpread2.Z)({},defaultPalette),{},{focus:{main:"#067A76",light:"#0AD6CF",light2:"#AEE4E3"},dark:{main:"#2D1C3A",light:"#4A3957",greyVariant1:"#22122E",greyVariant2:"#493E51",greyVariant3:"#918A98",greyVariant4:"#C0B8C6"},light:{main:"#F7F5F4",light:"#FDFDFC",greyVariant1:"#E6E6E6",greyVariant2:"#C9C9C9",greyVariant3:"#9E9E9E",greyVariant4:"#747474"}}),(0,objectSpread2.Z)((0,objectSpread2.Z)({},defaultPalette),{},{focus:{main:"#1F8D49",light:"#4efb8d",light2:"#dffee6"},light:{main:"#F4F6FF",light:"#F6F6F6",greyVariant1:"#E6E6E6",greyVariant2:"#C9C9C9",greyVariant3:"#9E9E9E",greyVariant4:"#747474"}});function createDefaultColorUseCases(params){var isDarkModeEnabled=params.isDarkModeEnabled,palette=params.palette;return{typography:{textPrimary:palette[isDarkModeEnabled?"light":"dark"].main,textSecondary:palette[isDarkModeEnabled?"dark":"light"].greyVariant4,textTertiary:palette[isDarkModeEnabled?"dark":"light"].greyVariant2,textDisabled:palette[isDarkModeEnabled?"dark":"light"].greyVariant2,textFocus:palette.focus[isDarkModeEnabled?"light":"main"]},buttons:{actionHoverPrimary:palette.focus[isDarkModeEnabled?"light2":"main"],actionHoverSecondary:isDarkModeEnabled?palette.light.light:palette.dark.main,actionHoverTernary:palette.light.main,actionSelected:isDarkModeEnabled?palette.dark.light:palette.light.greyVariant1,actionActive:palette.focus[isDarkModeEnabled?"light":"main"],actionDisabled:palette[isDarkModeEnabled?"dark":"light"].greyVariant3,actionDisabledBackground:palette[isDarkModeEnabled?"dark":"light"].greyVariant1},surfaces:{background:palette[isDarkModeEnabled?"dark":"light"].main,surface1:palette[isDarkModeEnabled?"dark":"light"].light,surface2:palette[isDarkModeEnabled?"dark":"light"].greyVariant1},alertSeverity:{error:{main:palette.redError.main,background:isDarkModeEnabled?changeColorOpacity({color:palette.redError.main,opacity:.2}):palette.redError.light},success:{main:palette.greenSuccess.main,background:isDarkModeEnabled?changeColorOpacity({color:palette.greenSuccess.main,opacity:.2}):palette.greenSuccess.light},warning:{main:palette.orangeWarning.main,background:isDarkModeEnabled?changeColorOpacity({color:palette.orangeWarning.main,opacity:.2}):palette.orangeWarning.light},info:{main:palette.blueInfo.main,background:isDarkModeEnabled?changeColorOpacity({color:palette.blueInfo.main,opacity:.2}):palette.blueInfo.light}}}}function createMuiPaletteOptions(params){var isDarkModeEnabled=params.isDarkModeEnabled,palette=params.palette,useCases=params.useCases;return{mode:isDarkModeEnabled?"dark":"light",primary:{main:palette.focus[isDarkModeEnabled?"light":"main"],light:palette.focus.light2},secondary:{main:useCases.typography.textPrimary,light:useCases.typography.textSecondary},error:{light:useCases.alertSeverity.error.background,main:useCases.alertSeverity.error.main,contrastText:useCases.typography.textPrimary},success:{light:useCases.alertSeverity.success.background,main:useCases.alertSeverity.success.main,contrastText:useCases.typography.textPrimary},info:{light:useCases.alertSeverity.info.background,main:useCases.alertSeverity.info.main,contrastText:useCases.typography.textPrimary},warning:{light:useCases.alertSeverity.warning.background,main:useCases.alertSeverity.warning.main,contrastText:useCases.typography.textPrimary},text:{primary:useCases.typography.textPrimary,secondary:useCases.typography.textSecondary,disabled:useCases.typography.textDisabled},divider:useCases.buttons.actionDisabledBackground,background:{paper:useCases.surfaces.surface1,default:useCases.surfaces.background},action:{active:useCases.buttons.actionActive,hover:palette.focus.light,selected:useCases.buttons.actionSelected,disabled:useCases.buttons.actionDisabled,disabledBackground:useCases.buttons.actionDisabledBackground,focus:useCases.typography.textFocus}}}},"./src/lib/icon.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{W5:()=>defaultGetIconSizeInPx,X9:()=>getIconSizesInPxByName});var _breakpoints__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/lib/breakpoints.ts"),iconSizeNames=["extra small","small","default","medium","large"],defaultGetIconSizeInPx=function defaultGetIconSizeInPx(_ref){var sizeName=_ref.sizeName,windowInnerWidth=_ref.windowInnerWidth;return _ref.rootFontSizePx*function(){switch(sizeName){case"extra small":return 1;case"small":return windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_0__.a.lg?1.25:1;case"default":return windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_0__.a.lg?1.5:1.25;case"medium":return windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_0__.a.lg?2:1.25;case"large":return windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_0__.a.xl?2.5:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_0__.a.lg?2:1.5}}()};function getIconSizesInPxByName(params){var getIconSizeInPx=params.getIconSizeInPx,windowInnerWidth=params.windowInnerWidth,rootFontSizePx=params.rootFontSizePx,out={};return iconSizeNames.forEach((function(sizeName){return out[sizeName]=getIconSizeInPx({windowInnerWidth,rootFontSizePx,sizeName})})),out}},"./src/lib/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{$X:()=>_typography__WEBPACK_IMPORTED_MODULE_2__.$X,BQ:()=>_ThemeProvider__WEBPACK_IMPORTED_MODULE_7__.BQ,JW:()=>_useIsDarkModeEnabled__WEBPACK_IMPORTED_MODULE_1__.J,Rz:()=>_typography__WEBPACK_IMPORTED_MODULE_2__.Rz,ak:()=>_breakpoints__WEBPACK_IMPORTED_MODULE_3__.a});__webpack_require__("./src/lib/color.ts");var _useIsDarkModeEnabled__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/lib/useIsDarkModeEnabled.ts"),_typography__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/lib/typography.ts"),_breakpoints__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/lib/breakpoints.ts"),_ThemeProvider__WEBPACK_IMPORTED_MODULE_7__=(__webpack_require__("./src/lib/spacing.ts"),__webpack_require__("./src/lib/icon.ts"),__webpack_require__("./src/lib/SplashScreen.tsx"),__webpack_require__("./src/lib/ThemeProvider.tsx"))},"./src/lib/spacing.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{t:()=>defaultSpacingConfig});var _breakpoints__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/lib/breakpoints.ts"),tsafe_assert__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/tsafe/assert.js"),defaultSpacingConfig=function defaultSpacingConfig(_ref){var factorOrExplicitNumberOfPx=_ref.factorOrExplicitNumberOfPx,windowInnerWidth=_ref.windowInnerWidth,rootFontSizePx=_ref.rootFontSizePx;if("string"==typeof factorOrExplicitNumberOfPx){var match=factorOrExplicitNumberOfPx.match(/^([+-]?([0-9]*[.])?[0-9]+)px$/);return(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_1__.assert)(null!==match,"".concat(factorOrExplicitNumberOfPx," don't match \\d+px")),Number.parseFloat(match[1])}return rootFontSizePx*function callee(factor){if((0,tsafe_assert__WEBPACK_IMPORTED_MODULE_1__.assert)(factor>=0,"factor must be positive"),!Number.isInteger(factor))return(callee(Math.floor(factor))+callee(Math.floor(factor)+1))/2;if(0===factor)return 0;if(factor>6)return(factor-5)*callee(6);if(windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_0__.a.xl)switch(factor){case 1:return.25;case 2:return.5;case 3:return 1;case 4:return 1.5;case 5:return 2;case 6:return 2.5}if(windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_0__.a.lg)switch(factor){case 1:return.25;case 2:return.5;case 3:case 4:return 1;case 5:return 1.5;case 6:return 2}switch(factor){case 1:case 2:return.25;case 3:return.5;case 4:case 5:return 1;case 6:return 1.5}(0,tsafe_assert__WEBPACK_IMPORTED_MODULE_1__.assert)(!1)}(factorOrExplicitNumberOfPx)}},"./src/lib/typography.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{$X:()=>defaultGetTypographyDesc,Gr:()=>getComputedTypography,Rz:()=>powerhooks_ViewPortAdapter__WEBPACK_IMPORTED_MODULE_3__.chromeFontSizesFactors,Tn:()=>createMuiTypographyOptions,Zc:()=>variantNameUsedForMuiButton});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),tsafe_id__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/tsafe/id.js"),_breakpoints__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/lib/breakpoints.ts"),tsafe_objectKeys__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/tsafe/objectKeys.js"),powerhooks_ViewPortAdapter__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/powerhooks/ViewPortAdapter.js"),defaultGetTypographyDesc=function defaultGetTypographyDesc(_ref){var windowInnerWidth=_ref.windowInnerWidth;return{fontFamily:"sans-serif",rootFontSizePx:16*_ref.browserFontSizeFactor,variants:{"display heading":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"h1",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)("bold")},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:2.8,lineHeightRem:3.25}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:2.25,lineHeightRem:2.5}:{fontSizeRem:1.75,lineHeightRem:2.5}),"page heading":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"h2",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)("bold")},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:2.25,lineHeightRem:2.5}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:1.75,lineHeightRem:2.25}:{fontSizeRem:1.125,lineHeightRem:1.25}),subtitle:(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"h3",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)("normal")},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:1.75,lineHeightRem:2.25}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:1.5,lineHeightRem:2}:{fontSizeRem:1,lineHeightRem:1.475}),"section heading":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"h4",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)("bold")},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:1.5,lineHeightRem:2}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:1.25,lineHeightRem:1.7}:{fontSizeRem:.875,lineHeightRem:1.28}),"object heading":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"h5",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)(600)},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:1.25,lineHeightRem:1.7}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:1.125,lineHeightRem:1.25}:{fontSizeRem:.875,lineHeightRem:1.28}),"navigation label":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"h5",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)(500)},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:1.25,lineHeightRem:1.7}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:1.125,lineHeightRem:1.25}:{fontSizeRem:.875,lineHeightRem:1.28}),"label 1":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"h6",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)(500)},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:1,lineHeightRem:1.475}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:.875,lineHeightRem:1.28}:{fontSizeRem:.75,lineHeightRem:1}),"label 2":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"h6",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)(500)},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:.875,lineHeightRem:1.28}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:.75,lineHeightRem:1}:{fontSizeRem:.625,lineHeightRem:.69}),"body 1":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"p",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)("normal")},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:1,lineHeightRem:1.475}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:.875,lineHeightRem:1.28}:{fontSizeRem:.75,lineHeightRem:1}),"body 2":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"p",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)("normal")},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:.875,lineHeightRem:1.28}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:.75,lineHeightRem:1}:{fontSizeRem:.625,lineHeightRem:.69}),"body 3":(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"p",fontWeight:"normal"},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:.875,lineHeightRem:1.28}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:.75,lineHeightRem:1}:{fontSizeRem:.625,lineHeightRem:.69}),caption:(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({htmlComponent:"p",fontWeight:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_0__.id)("normal")},windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.xl?{fontSizeRem:.75,lineHeightRem:1}:windowInnerWidth>=_breakpoints__WEBPACK_IMPORTED_MODULE_1__.a.lg?{fontSizeRem:.625,lineHeightRem:.69}:{fontSizeRem:.45,lineHeightRem:.75})}}},variantNameUsedForMuiButton="label 1",_ref2=function(){function getTypographyVariantStyleFactory(params){var _params$typographyDes=params.typographyDesc,fontFamily=_params$typographyDes.fontFamily,rootFontSizePx=_params$typographyDes.rootFontSizePx,variants=_params$typographyDes.variants;return{getTypographyVariantStyle:function getTypographyVariantStyle(params){var variantName=params.variantName,_variants$variantName=variants[variantName],fontSizeRem=_variants$variantName.fontSizeRem,lineHeightRem=_variants$variantName.lineHeightRem,fontWeight=_variants$variantName.fontWeight,variantFontFamily=_variants$variantName.fontFamily;return{fontFamily:null!=variantFontFamily?variantFontFamily:fontFamily,fontWeight,fontSize:"".concat(fontSizeRem*rootFontSizePx,"px"),lineHeight:"".concat(lineHeightRem*rootFontSizePx,"px")}}}}return{createMuiTypographyOptions:function createMuiTypographyOptions(params){var typographyDesc=params.typographyDesc,getTypographyVariantStyle=getTypographyVariantStyleFactory({typographyDesc}).getTypographyVariantStyle;return{fontFamily:typographyDesc.fontFamily,fontWeightRegular:"normal",fontWeightMedium:500,h1:getTypographyVariantStyle({variantName:"display heading"}),h2:getTypographyVariantStyle({variantName:"page heading"}),h3:getTypographyVariantStyle({variantName:"subtitle"}),h4:getTypographyVariantStyle({variantName:"section heading"}),h5:getTypographyVariantStyle({variantName:"object heading"}),h6:getTypographyVariantStyle({variantName:"navigation label"}),subtitle1:getTypographyVariantStyle({variantName:"label 1"}),subtitle2:getTypographyVariantStyle({variantName:"body 2"}),body1:getTypographyVariantStyle({variantName:"body 1"}),body2:getTypographyVariantStyle({variantName:"body 2"}),caption:getTypographyVariantStyle({variantName:"caption"}),button:getTypographyVariantStyle({variantName:variantNameUsedForMuiButton})}},getComputedTypography:function getComputedTypography(params){var typographyDesc=params.typographyDesc,getTypographyVariantStyle=getTypographyVariantStyleFactory({typographyDesc}).getTypographyVariantStyle,computedTypography={rootFontSizePx:typographyDesc.rootFontSizePx,fontFamily:typographyDesc.fontFamily,variants:{}};return(0,tsafe_objectKeys__WEBPACK_IMPORTED_MODULE_2__.objectKeys)(typographyDesc.variants).forEach((function(variantName){return computedTypography.variants[variantName]={style:getTypographyVariantStyle({variantName}),htmlComponent:typographyDesc.variants[variantName].htmlComponent}})),computedTypography}}}(),createMuiTypographyOptions=_ref2.createMuiTypographyOptions,getComputedTypography=_ref2.getComputedTypography},"./src/lib/useIsDarkModeEnabled.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{J:()=>useIsDarkModeEnabled,s:()=>evtIsDarkModeEnabled});var powerhooks_useGlobalState__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/powerhooks/useGlobalState.js"),powerhooks_tools_urlSearchParams__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/powerhooks/tools/urlSearchParams.js"),powerhooks_tools_StatefulObservable_statefulObservableToStatefulEvt__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/powerhooks/tools/StatefulObservable/statefulObservableToStatefulEvt.js"),_createUseGlobalState=(0,powerhooks_useGlobalState__WEBPACK_IMPORTED_MODULE_0__.createUseGlobalState)({name:"isDarkModeEnabled",initialState:window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches,doPersistAcrossReloads:!0}),useIsDarkModeEnabled=_createUseGlobalState.useIsDarkModeEnabled,$isDarkModeEnabled=_createUseGlobalState.$isDarkModeEnabled,evtIsDarkModeEnabled=(0,powerhooks_tools_StatefulObservable_statefulObservableToStatefulEvt__WEBPACK_IMPORTED_MODULE_2__.B)({statefulObservable:$isDarkModeEnabled});!function(){var result=(0,powerhooks_tools_urlSearchParams__WEBPACK_IMPORTED_MODULE_1__.retrieveParamFromUrl)({url:window.location.href,name:"theme"});if(result.wasPresent){(0,powerhooks_tools_urlSearchParams__WEBPACK_IMPORTED_MODULE_1__.updateSearchBarUrl)(result.newUrl);var isDarkModeEnabled=function(){switch(result.value){case"dark":return!0;case"light":return!1;default:return}}();void 0!==isDarkModeEnabled&&(evtIsDarkModeEnabled.state=isDarkModeEnabled)}}(),evtIsDarkModeEnabled.attach((function(isDarkModeEnabled){var id="root-color-scheme",_element=document.getElementById(id);null!==_element&&_element.remove();var element=document.createElement("style");element.id=id,element.innerHTML="\n\t\t\t\t:root {\n\t\t\t\t\tcolor-scheme: ".concat(isDarkModeEnabled?"dark":"light","\n\t\t\t\t}\n\t\t"),document.getElementsByTagName("head")[0].appendChild(element)}))},"./src/stories/getStory.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>getStoryFactory,K:()=>logCallbacks});var _home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),tsafe_symToStr__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/tsafe/symToStr.js"),_lib__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/lib/index.ts"),_theme__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/theme.ts"),tsafe_id__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/tsafe/id.js"),tss_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/tss-react/esm/index.js"),tsafe_objectKeys__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/tsafe/objectKeys.js"),powerhooks_useWindowInnerSize__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/powerhooks/useWindowInnerSize.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["darkMode","width","targetWindowInnerWidth","chromeFontSize"];function getStoryFactory(params){var sectionName=params.sectionName,wrappedComponent=params.wrappedComponent,_params$argTypes=params.argTypes,argTypes=void 0===_params$argTypes?{}:_params$argTypes,defaultWidth=params.defaultWidth,Component=Object.entries(wrappedComponent).map((function(_ref){return(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_9__.Z)(_ref,2)[1]}))[0];function ScreenSize(){var windowInnerWidth=(0,powerhooks_useWindowInnerSize__WEBPACK_IMPORTED_MODULE_7__.useWindowInnerSize)().windowInnerWidth,range=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((function(){return windowInnerWidth>=_lib__WEBPACK_IMPORTED_MODULE_2__.ak.xl?"xl-∞":windowInnerWidth>=_lib__WEBPACK_IMPORTED_MODULE_2__.ak.lg?"lg-xl":windowInnerWidth>=_lib__WEBPACK_IMPORTED_MODULE_2__.ak.md?"md-lg":windowInnerWidth>=_lib__WEBPACK_IMPORTED_MODULE_2__.ak.sm?"sm-md":"0-sm"}),[windowInnerWidth]);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(_theme__WEBPACK_IMPORTED_MODULE_3__.xv,{typo:"body 1",children:[windowInnerWidth,"px width: ",range]})}var Template=function Template(_ref3){var darkMode=_ref3.darkMode,width=_ref3.width,targetWindowInnerWidth=_ref3.targetWindowInnerWidth,chromeFontSize=_ref3.chromeFontSize,props=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_10__.Z)(_ref3,_excluded),setIsDarkModeEnabled=(0,_lib__WEBPACK_IMPORTED_MODULE_2__.JW)().setIsDarkModeEnabled;(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((function(){setIsDarkModeEnabled(darkMode)}),[darkMode]);var getViewPortConfig=(0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((function(_ref4){var windowInnerWidth=_ref4.windowInnerWidth;return{targetBrowserFontSizeFactor:_lib__WEBPACK_IMPORTED_MODULE_2__.Rz[chromeFontSize],targetWindowInnerWidth:targetWindowInnerWidth||windowInnerWidth}}),[targetWindowInnerWidth,chromeFontSize]),theme=(0,_theme__WEBPACK_IMPORTED_MODULE_3__.Fg)();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(_theme__WEBPACK_IMPORTED_MODULE_3__.f6,{getViewPortConfig,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(tss_react__WEBPACK_IMPORTED_MODULE_5__.nz,{styles:{html:{fontSize:"100% !important"},body:{padding:"0 !important",backgroundColor:"".concat(theme.colors.useCases.surfaces.surface1," !important")}}}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(ScreenSize,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)("div",{style:{width:width||void 0,border:"1px dashed #e8e8e8",display:"inline-block"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(Component,(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)({},props))})]})};return{meta:(0,tsafe_id__WEBPACK_IMPORTED_MODULE_4__.id)({title:"".concat(sectionName,"/").concat((0,tsafe_symToStr__WEBPACK_IMPORTED_MODULE_1__.symToStr)(wrappedComponent)),component:Component,argTypes:(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)({width:{control:{type:"range",min:0,max:1920,step:1}},targetWindowInnerWidth:{control:{type:"range",min:0,max:2560,step:10}},chromeFontSize:{options:(0,tsafe_objectKeys__WEBPACK_IMPORTED_MODULE_6__.objectKeys)(_lib__WEBPACK_IMPORTED_MODULE_2__.Rz),control:{type:"select"}}},argTypes)}),getStory:function getStory(props){var out=Template.bind({});return out.args=(0,_home_runner_work_onyxia_ui_onyxia_ui_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__.Z)({darkMode:!1,width:null!=defaultWidth?defaultWidth:0,targetWindowInnerWidth:0,chromeFontSize:"Medium (Recommended)"},props),out}}}function logCallbacks(propertyNames){var out=(0,tsafe_id__WEBPACK_IMPORTED_MODULE_4__.id)({});return propertyNames.forEach((function(propertyName){return out[propertyName]=console.log.bind(console,propertyName)})),out}try{getStoryFactory.displayName="getStoryFactory",getStoryFactory.__docgenInfo={description:"",displayName:"getStoryFactory",props:{sectionName:{defaultValue:null,description:"",name:"sectionName",required:!0,type:{name:"string"}},wrappedComponent:{defaultValue:null,description:"",name:"wrappedComponent",required:!0,type:{name:"Record<string, ReactComponent<Props>>"}},argTypes:{defaultValue:null,description:"https://storybook.js.org/docs/react/essentials/controls",name:"argTypes",required:!1,type:{name:"Partial<Record<keyof Props, ArgType<unknown>>>"}},defaultWidth:{defaultValue:null,description:"",name:"defaultWidth",required:!1,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/getStory.tsx#getStoryFactory"]={docgenInfo:getStoryFactory.__docgenInfo,name:"getStoryFactory",path:"src/stories/getStory.tsx#getStoryFactory"})}catch(__react_docgen_typescript_loader_error){}try{logCallbacks.displayName="logCallbacks",logCallbacks.__docgenInfo={description:"",displayName:"logCallbacks",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/getStory.tsx#logCallbacks"]={docgenInfo:logCallbacks.__docgenInfo,name:"logCallbacks",path:"src/stories/getStory.tsx#logCallbacks"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/i18n.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{$:()=>useTranslation});var i18nifty__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/i18nifty/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/react/jsx-runtime.js"),useTranslation=((0,i18nifty__WEBPACK_IMPORTED_MODULE_0__.mi)()({Picker:null}).i18n,(0,i18nifty__WEBPACK_IMPORTED_MODULE_0__.ww)()({languages:["en","fr"],fallbackLanguage:"en"},{en:{Picker:{"github picker label":"Pick tag","github picker create tag":function githubPickerCreateTag(_ref){var tag=_ref.tag;return'Create the "'.concat(tag,'" tag')},"github picker done":(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:"Done"}),"something else":"ok"}},fr:{Picker:{"github picker label":void 0,"github picker create tag":void 0,"github picker done":void 0,"something else":void 0}}}).useTranslation);try{useTranslation.displayName="useTranslation",useTranslation.__docgenInfo={description:"",displayName:"useTranslation",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/i18n.tsx#useTranslation"]={docgenInfo:useTranslation.__docgenInfo,name:"useTranslation",path:"src/stories/i18n.tsx#useTranslation"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/sectionName.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{j:()=>sectionName});var sectionName="sandbox"},"./src/stories/theme.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{zx:()=>theme_Button,k2:()=>theme_ButtonBar,JO:()=>theme_Icon,hU:()=>theme_IconButton,FR:()=>StoryProvider,xv:()=>theme_Text,f6:()=>ThemeProvider,Fg:()=>useTheme});var _path,objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),lib=__webpack_require__("./src/lib/index.ts"),Icon=__webpack_require__("./src/Icon.tsx"),IconButton=__webpack_require__("./src/IconButton.tsx"),Button=__webpack_require__("./src/Button.tsx"),Text=__webpack_require__("./src/Text/Text.tsx"),ButtonBar=__webpack_require__("./src/ButtonBar.tsx"),react=__webpack_require__("./node_modules/react/index.js"),_excluded=["title","titleId"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function SvgTour(_ref,svgRef){var title=_ref.title,titleId=_ref.titleId,props=_objectWithoutProperties(_ref,_excluded);return react.createElement("svg",_extends({width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",ref:svgRef,"aria-labelledby":titleId},props),title?react.createElement("title",{id:titleId},title):null,_path||(_path=react.createElement("path",{d:"M13.415 4.9872L12.9245 3.9384C12.6547 3.36144 12.0749 2.9928 11.4379 2.9928H5.01837V21.0134H6.98205V12.0312H11.5493L12.203 13.4069C12.3739 13.7659 12.7358 13.9949 13.1337 13.9949H17.914C18.5212 13.9949 19.0137 13.5024 19.0137 12.8952V5.97024C19.0137 5.42736 18.5736 4.9872 18.0307 4.9872H13.415ZM17.0184 11.9688H13.415L12.5131 9.97392H7.01277L6.98157 4.98672H11.5488L12.4195 7.0128H16.9555L17.0184 11.9688Z"})))}var ForwardRef=react.forwardRef(SvgTour);__webpack_require__.p;var Services=__webpack_require__("./src/stories/assets/svg/Services.svg"),Help=__webpack_require__("./node_modules/@mui/icons-material/Help.js"),Home=__webpack_require__("./node_modules/@mui/icons-material/Home.js"),_createThemeProvider=(0,lib.BQ)({isReactStrictModeEnabled:!1,getTypographyDesc:function getTypographyDesc(_ref){var windowInnerWidth=_ref.windowInnerWidth,browserFontSizeFactor=_ref.browserFontSizeFactor,windowInnerHeight=_ref.windowInnerHeight;return(0,objectSpread2.Z)((0,objectSpread2.Z)({},(0,lib.$X)({windowInnerWidth,browserFontSizeFactor,windowInnerHeight})),{},{fontFamily:'"Work Sans", sans-serif'})}}),ThemeProvider=_createThemeProvider.ThemeProvider,StoryProvider=_createThemeProvider.StoryProvider,useTheme=_createThemeProvider.useTheme,theme_Icon=(0,Icon.I)({tour:ForwardRef,services:Services.r,help:Help.Z,home:Home.Z}).Icon,theme_IconButton=(0,IconButton.k)({Icon:theme_Icon}).IconButton,theme_Button=(0,Button.a)({Icon:theme_Icon}).Button,theme_Text=(0,Text.r)({useTheme}).Text,theme_ButtonBar=(0,ButtonBar.c)({Icon:theme_Icon}).ButtonBar},"./src/tools/pxToNumber.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";function pxToNumber(str){return Number.parseFloat(str.split("px")[0])}__webpack_require__.d(__webpack_exports__,{F:()=>pxToNumber})},"./src/tools/useNonPostableEvtLike.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{_:()=>useNonPostableEvtLike});var evt__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/evt/lib/index.js"),powerhooks_useGuaranteedMemo__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/powerhooks/useGuaranteedMemo.js"),evt_hooks__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/evt/hooks/index.js");function useNonPostableEvtLike(evtLike){var evt=(0,powerhooks_useGuaranteedMemo__WEBPACK_IMPORTED_MODULE_1__.useGuaranteedMemo)((function(){return evt__WEBPACK_IMPORTED_MODULE_0__.Evt.create()}),[evtLike]);return(0,evt_hooks__WEBPACK_IMPORTED_MODULE_2__.useEvt)((function(ctx){void 0!==evtLike&&evtLike.attach(ctx,(function(data){return evt.post(data)}))}),[evtLike]),void 0===evtLike?void 0:evt}},"./src/stories sync recursive ^\\.(?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.(ts%7Ctsx))$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./Alert.stories.tsx":"./src/stories/Alert.stories.tsx","./Breadcrumb.stories.tsx":"./src/stories/Breadcrumb.stories.tsx","./Button.stories.tsx":"./src/stories/Button.stories.tsx","./ButtonBar.stories.tsx":"./src/stories/ButtonBar.stories.tsx","./ButtonBarButton.stories.tsx":"./src/stories/ButtonBarButton.stories.tsx","./Card.stories.tsx":"./src/stories/Card.stories.tsx","./Checkbox.stories.tsx":"./src/stories/Checkbox.stories.tsx","./CollapsibleSectionHeader.stories.tsx":"./src/stories/CollapsibleSectionHeader.stories.tsx","./DarkModeSwitch.stories.tsx":"./src/stories/DarkModeSwitch.stories.tsx","./Dialog.stories.tsx":"./src/stories/Dialog.stories.tsx","./DirectoryHeader.stories.tsx":"./src/stories/DirectoryHeader.stories.tsx","./GitHubPicker.stories.tsx":"./src/stories/GitHubPicker.stories.tsx","./Icon.stories.tsx":"./src/stories/Icon.stories.tsx","./IconButton.stories.tsx":"./src/stories/IconButton.stories.tsx","./LanguageSelect.stories.tsx":"./src/stories/LanguageSelect.stories.tsx","./LeftBar.stories.tsx":"./src/stories/LeftBar.stories.tsx","./Markdown.stories.tsx":"./src/stories/Markdown.stories.tsx","./PageHeader.stories.tsx":"./src/stories/PageHeader.stories.tsx","./Picker.stories.tsx":"./src/stories/Picker.stories.tsx","./RangeSlider.stories.tsx":"./src/stories/RangeSlider.stories.tsx","./SearchBar.stories.tsx":"./src/stories/SearchBar.stories.tsx","./Slider.stories.tsx":"./src/stories/Slider.stories.tsx","./Tabs.stories.tsx":"./src/stories/Tabs.stories.tsx","./Tag.stories.tsx":"./src/stories/Tag.stories.tsx","./TestSpacing.stories.tsx":"./src/stories/TestSpacing.stories.tsx","./Text.stories.ts":"./src/stories/Text.stories.ts","./TextField.stories.tsx":"./src/stories/TextField.stories.tsx","./Tooltip.stories.tsx":"./src/stories/Tooltip.stories.tsx"};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id="./src/stories sync recursive ^\\.(?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.(ts%7Ctsx))$"},"./src/stories sync recursive ^\\.(?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./documentation/Fundamentals/colors.stories.mdx":"./src/stories/documentation/Fundamentals/colors.stories.mdx","./documentation/components/Alert.stories.mdx":"./src/stories/documentation/components/Alert.stories.mdx","./documentation/components/Button.stories.mdx":"./src/stories/documentation/components/Button.stories.mdx","./documentation/components/Checkbox.stories.mdx":"./src/stories/documentation/components/Checkbox.stories.mdx","./documentation/components/NavigationBar.stories.mdx":"./src/stories/documentation/components/NavigationBar.stories.mdx","./documentation/components/Tabs.stories.mdx":"./src/stories/documentation/components/Tabs.stories.mdx","./documentation/components/Textfield.stories.mdx":"./src/stories/documentation/components/Textfield.stories.mdx","./index.stories.mdx":"./src/stories/index.stories.mdx"};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id="./src/stories sync recursive ^\\.(?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},"./storybook-init-framework-entry.js":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__("./node_modules/@storybook/react/dist/esm/client/index.js")},"?4f7e":()=>{},"./generated-stories-entry.cjs":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module=__webpack_require__.nmd(module),(0,__webpack_require__("./node_modules/@storybook/react/dist/esm/client/index.js").configure)([__webpack_require__("./src/stories sync recursive ^\\.(?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$"),__webpack_require__("./src/stories sync recursive ^\\.(?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.(ts%7Ctsx))$")],module,!1)}},__webpack_require__=>{var __webpack_exec__=moduleId=>__webpack_require__(__webpack_require__.s=moduleId);__webpack_require__.O(0,[84],(()=>(__webpack_exec__("./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js"),__webpack_exec__("./node_modules/@storybook/core-client/dist/esm/globals/globals.js"),__webpack_exec__("./storybook-init-framework-entry.js"),__webpack_exec__("./node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/addon-links/preview.js-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js"),__webpack_exec__("./.storybook/preview.js-generated-config-entry.js"),__webpack_exec__("./generated-stories-entry.cjs"))));__webpack_require__.O()}]);
\ No newline at end of file
diff --git a/project.json b/project.json
index 10e6a874..98090483 100644
--- a/project.json
+++ b/project.json
@@ -1 +1 @@
-{"generatedAt":1693223782660,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"CRA","packageName":"react-scripts","version":"5.0.1"},"packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.9","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.9"},"@storybook/addons":{"version":"6.5.9"},"@storybook/builder-webpack5":{"version":"6.5.9"},"@storybook/manager-webpack5":{"version":"6.5.9"},"@storybook/node-logger":{"version":"6.5.9"},"@storybook/preset-create-react-app":{"version":"4.1.2"},"@storybook/react":{"version":"6.5.9"},"@storybook/theming":{"version":"6.5.9"},"eslint-plugin-storybook":{"version":"0.5.13"}},"framework":{"name":"react"},"addons":{"@storybook/addon-links":{"version":"6.5.9"},"@storybook/addon-essentials":{"version":"6.5.9"},"@storybook-create-react-app":{"version":null},"storybook-dark-mode":{"version":"1.1.0"}}}
+{"generatedAt":1693490815170,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"CRA","packageName":"react-scripts","version":"5.0.1"},"packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.9","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.9"},"@storybook/addons":{"version":"6.5.9"},"@storybook/builder-webpack5":{"version":"6.5.9"},"@storybook/manager-webpack5":{"version":"6.5.9"},"@storybook/node-logger":{"version":"6.5.9"},"@storybook/preset-create-react-app":{"version":"4.1.2"},"@storybook/react":{"version":"6.5.9"},"@storybook/theming":{"version":"6.5.9"},"eslint-plugin-storybook":{"version":"0.5.13"}},"framework":{"name":"react"},"addons":{"@storybook/addon-links":{"version":"6.5.9"},"@storybook/addon-essentials":{"version":"6.5.9"},"@storybook-create-react-app":{"version":null},"storybook-dark-mode":{"version":"1.1.0"}}}