From 6ea118f503663b03f95602a24adc7f6002c38039 Mon Sep 17 00:00:00 2001 From: Rashid Suleymanov Date: Thu, 9 Apr 2026 15:45:15 +0500 Subject: [PATCH] feat(storybook): add component and foundation stories --- storybook/source/.storybook/manager.js | 32 +- storybook/source/.storybook/preview.js | 215 +- storybook/source/components/Card.js | 72 + storybook/source/components/Checkbox.js | 40 + storybook/source/components/ContextMenu.js | 60 + storybook/source/components/Header.js | 57 + storybook/source/components/IconButton.js | 66 + storybook/source/components/InfoBlock.js | 35 + storybook/source/components/LinkButton.js | 18 + storybook/source/components/Loader.js | 37 + storybook/source/components/ModalWindow.js | 293 ++ storybook/source/components/PanelButton.js | 63 + storybook/source/components/PreviewControl.js | 62 + storybook/source/components/Radio.js | 30 + storybook/source/components/Scroll.js | 141 + storybook/source/components/Slider.js | 80 + storybook/source/components/SplitButton.js | 87 + storybook/source/components/Switch.js | 25 + storybook/source/components/Tabs.js | 41 + storybook/source/components/TextArea.js | 108 + storybook/source/components/TextField.js | 107 + storybook/source/components/Tooltip.js | 18 + .../source/components/shared/pluginTheme.ts | 43 + storybook/source/components/theme-utils.js | 111 + storybook/source/data/cards.ts | 171 + storybook/source/data/checkbox.ts | 462 +++ storybook/source/data/dialog-buttons.ts | 3258 +++++++++++++++++ storybook/source/data/icon-buttons.ts | 1000 +++++ storybook/source/data/icon-svgs.ts | 41 + storybook/source/data/info-block.ts | 97 + storybook/source/data/link-buttons.ts | 258 ++ storybook/source/data/panel-buttons.ts | 1124 ++++++ storybook/source/data/panel.ts | 111 + storybook/source/data/radio.ts | 395 ++ .../source/data/reference-theme-colors.ts | 192 + storybook/source/data/scroll.ts | 198 + storybook/source/data/slider.ts | 125 + storybook/source/data/switches.ts | 102 + storybook/source/data/tabs.ts | 75 + storybook/source/data/text-area.ts | 151 + storybook/source/data/text-field.ts | 166 + storybook/source/data/theme-tokens.ts | 50 + storybook/source/data/typography.ts | 139 + .../stories/components/Cards.stories.js | 213 ++ .../stories/components/Checkbox.stories.js | 145 + .../stories/components/ContextMenu.stories.js | 219 ++ .../DialogButtonsPrimary.stories.js | 316 ++ .../DialogButtonsSecondary.stories.js | 315 ++ .../stories/components/Header.stories.js | 61 + .../stories/components/IconButtons.stories.js | 220 ++ .../stories/components/InfoBlock.stories.js | 136 + .../stories/components/LinkButtons.stories.js | 88 + .../stories/components/Loader.stories.js | 82 + .../stories/components/ModalWindow.stories.js | 171 + .../components/PanelButtons.stories.js | 218 ++ .../components/PreviewControls.stories.js | 174 + .../stories/components/Radio.stories.js | 139 + .../stories/components/Scroll.stories.js | 287 ++ .../stories/components/Slider.stories.js | 163 + .../SplitButtonsDropdown.stories.js | 159 + .../SplitButtonsIconLeft.stories.js | 136 + .../components/SplitButtonsTabs.stories.js | 136 + .../stories/components/Switches.stories.js | 116 + .../source/stories/components/Tabs.stories.js | 145 + .../stories/components/TextArea.stories.js | 172 + .../stories/components/TextField.stories.js | 259 ++ .../stories/components/Tooltip.stories.js | 41 + .../stories/foundations/Colors.stories.js | 455 +++ .../stories/foundations/Icons.stories.js | 83 + .../stories/foundations/Typography.stories.js | 175 + storybook/source/styles/cards.css | 13 + storybook/source/styles/checkbox.css | 15 + storybook/source/styles/common-controls.css | 18 + storybook/source/styles/dialog-button.css | 28 + storybook/source/styles/manager.css | 26 + storybook/source/styles/plugin-buttons.css | 43 + storybook/source/styles/preview.css | 290 ++ storybook/source/styles/radio.css | 18 + storybook/source/styles/textarea.css | 24 + .../static/assets/Cards.stories-H_KY1O8E.js | 133 + .../assets/Checkbox.stories-DFvCkgPP.js | 78 + ...CvSgaFz3.js => Color-FRDS63T2-Qm5bW5d4.js} | 2 +- .../static/assets/Colors.stories-rQ7Q-hFW.js | 124 + .../assets/ContextMenu.stories-C550WoUl.js | 126 + .../DialogButtonsPrimary.stories-UfH9kkhS.js | 141 + ...DialogButtonsSecondary.stories-B06GAowc.js | 140 + ...x.js => DocsRenderer-LL677BLK-BKqUrJM_.js} | 8 +- storybook/static/assets/Header-D2BDzFwA.js | 14 + .../static/assets/Header.stories-Bpjh8rah.js | 29 + .../assets/IconButtons.stories-ThZx5UJ6.js | 189 + .../static/assets/Icons.stories-Bkqwk1IY.js | 72 + .../assets/InfoBlock.stories-C737cNEY.js | 125 + .../assets/LinkButtons.stories-CWnL9o1m.js | 45 + .../static/assets/Loader.stories-Wu8QxO3T.js | 51 + .../assets/ModalWindow.stories-C8D3NSUk.js | 88 + .../assets/PanelButtons.stories-DdNpWdK_.js | 166 + .../PreviewControls.stories-CUmA5ook.js | 127 + .../static/assets/Radio.stories-CumHEb3o.js | 74 + .../static/assets/Scroll.stories-Dq4Wwl6Z.js | 98 + .../static/assets/Slider.stories-DM-7D2v4.js | 63 + .../static/assets/SplitButton-Bq4l2hJH.js | 20 + .../SplitButtonsDropdown.stories-BvWeee5D.js | 134 + .../SplitButtonsIconLeft.stories-Dr4wDcvI.js | 114 + .../SplitButtonsTabs.stories-CXQRjRm_.js | 114 + .../assets/Switches.stories-BfGUao-L.js | 49 + .../static/assets/Tabs.stories-suHzVPGv.js | 68 + .../assets/TextArea.stories-HtLcKLcL.js | 111 + .../assets/TextField.stories-CNWuOQ51.js | 144 + .../static/assets/Tooltip.stories-CprkHbDd.js | 9 + .../assets/Typography.stories-Ceegr84L.js | 149 + ...M9.js => WithTooltip-65CFNBJE-DKdOiCBU.js} | 2 +- ...DK6VewjT.js => chunk-3LY4VQVK-DyJr4LVG.js} | 2 +- ...ocB0pi6q.js => chunk-RD3KTAHR-0PUE-gja.js} | 2 +- ...nts-DTTvQz4L.js => components-DW-5dJuS.js} | 10 +- ...mPvu.js => formatter-EIJCOSYU-CVNaCVyv.js} | 2 +- ...{iframe-DIiqmCNx.js => iframe-B3N_zEeP.js} | 6 +- storybook/static/assets/iframe-kvNOWOmU.css | 1 + ...=> syntaxhighlighter-OH4MV7E3-DFku4BmC.js} | 2 +- .../static/assets/theme-utils-B-KYefhh.js | 1 + ...heming-DzOc7WGW.js => theming-DLWRz99i.js} | 2 +- storybook/static/iframe.html | 5 +- storybook/static/index.html | 2 + storybook/static/index.json | 2 +- storybook/static/project.json | 2 +- .../sb-addons/storybook-2/manager-bundle.css | 1 + .../sb-addons/storybook-2/manager-bundle.js | 2 +- 126 files changed, 18039 insertions(+), 65 deletions(-) create mode 100644 storybook/source/components/Card.js create mode 100644 storybook/source/components/Checkbox.js create mode 100644 storybook/source/components/ContextMenu.js create mode 100644 storybook/source/components/Header.js create mode 100644 storybook/source/components/IconButton.js create mode 100644 storybook/source/components/InfoBlock.js create mode 100644 storybook/source/components/LinkButton.js create mode 100644 storybook/source/components/Loader.js create mode 100644 storybook/source/components/ModalWindow.js create mode 100644 storybook/source/components/PanelButton.js create mode 100644 storybook/source/components/PreviewControl.js create mode 100644 storybook/source/components/Radio.js create mode 100644 storybook/source/components/Scroll.js create mode 100644 storybook/source/components/Slider.js create mode 100644 storybook/source/components/SplitButton.js create mode 100644 storybook/source/components/Switch.js create mode 100644 storybook/source/components/Tabs.js create mode 100644 storybook/source/components/TextArea.js create mode 100644 storybook/source/components/TextField.js create mode 100644 storybook/source/components/Tooltip.js create mode 100644 storybook/source/components/shared/pluginTheme.ts create mode 100644 storybook/source/components/theme-utils.js create mode 100644 storybook/source/data/cards.ts create mode 100644 storybook/source/data/checkbox.ts create mode 100644 storybook/source/data/dialog-buttons.ts create mode 100644 storybook/source/data/icon-buttons.ts create mode 100644 storybook/source/data/icon-svgs.ts create mode 100644 storybook/source/data/info-block.ts create mode 100644 storybook/source/data/link-buttons.ts create mode 100644 storybook/source/data/panel-buttons.ts create mode 100644 storybook/source/data/panel.ts create mode 100644 storybook/source/data/radio.ts create mode 100644 storybook/source/data/reference-theme-colors.ts create mode 100644 storybook/source/data/scroll.ts create mode 100644 storybook/source/data/slider.ts create mode 100644 storybook/source/data/switches.ts create mode 100644 storybook/source/data/tabs.ts create mode 100644 storybook/source/data/text-area.ts create mode 100644 storybook/source/data/text-field.ts create mode 100644 storybook/source/data/theme-tokens.ts create mode 100644 storybook/source/data/typography.ts create mode 100644 storybook/source/stories/components/Cards.stories.js create mode 100644 storybook/source/stories/components/Checkbox.stories.js create mode 100644 storybook/source/stories/components/ContextMenu.stories.js create mode 100644 storybook/source/stories/components/DialogButtonsPrimary.stories.js create mode 100644 storybook/source/stories/components/DialogButtonsSecondary.stories.js create mode 100644 storybook/source/stories/components/Header.stories.js create mode 100644 storybook/source/stories/components/IconButtons.stories.js create mode 100644 storybook/source/stories/components/InfoBlock.stories.js create mode 100644 storybook/source/stories/components/LinkButtons.stories.js create mode 100644 storybook/source/stories/components/Loader.stories.js create mode 100644 storybook/source/stories/components/ModalWindow.stories.js create mode 100644 storybook/source/stories/components/PanelButtons.stories.js create mode 100644 storybook/source/stories/components/PreviewControls.stories.js create mode 100644 storybook/source/stories/components/Radio.stories.js create mode 100644 storybook/source/stories/components/Scroll.stories.js create mode 100644 storybook/source/stories/components/Slider.stories.js create mode 100644 storybook/source/stories/components/SplitButtonsDropdown.stories.js create mode 100644 storybook/source/stories/components/SplitButtonsIconLeft.stories.js create mode 100644 storybook/source/stories/components/SplitButtonsTabs.stories.js create mode 100644 storybook/source/stories/components/Switches.stories.js create mode 100644 storybook/source/stories/components/Tabs.stories.js create mode 100644 storybook/source/stories/components/TextArea.stories.js create mode 100644 storybook/source/stories/components/TextField.stories.js create mode 100644 storybook/source/stories/components/Tooltip.stories.js create mode 100644 storybook/source/stories/foundations/Colors.stories.js create mode 100644 storybook/source/stories/foundations/Icons.stories.js create mode 100644 storybook/source/stories/foundations/Typography.stories.js create mode 100644 storybook/source/styles/cards.css create mode 100644 storybook/source/styles/checkbox.css create mode 100644 storybook/source/styles/common-controls.css create mode 100644 storybook/source/styles/dialog-button.css create mode 100644 storybook/source/styles/manager.css create mode 100644 storybook/source/styles/plugin-buttons.css create mode 100644 storybook/source/styles/preview.css create mode 100644 storybook/source/styles/radio.css create mode 100644 storybook/source/styles/textarea.css create mode 100644 storybook/static/assets/Cards.stories-H_KY1O8E.js create mode 100644 storybook/static/assets/Checkbox.stories-DFvCkgPP.js rename storybook/static/assets/{Color-FRDS63T2-CvSgaFz3.js => Color-FRDS63T2-Qm5bW5d4.js} (99%) create mode 100644 storybook/static/assets/Colors.stories-rQ7Q-hFW.js create mode 100644 storybook/static/assets/ContextMenu.stories-C550WoUl.js create mode 100644 storybook/static/assets/DialogButtonsPrimary.stories-UfH9kkhS.js create mode 100644 storybook/static/assets/DialogButtonsSecondary.stories-B06GAowc.js rename storybook/static/assets/{DocsRenderer-LL677BLK-D2xToRfx.js => DocsRenderer-LL677BLK-BKqUrJM_.js} (80%) create mode 100644 storybook/static/assets/Header-D2BDzFwA.js create mode 100644 storybook/static/assets/Header.stories-Bpjh8rah.js create mode 100644 storybook/static/assets/IconButtons.stories-ThZx5UJ6.js create mode 100644 storybook/static/assets/Icons.stories-Bkqwk1IY.js create mode 100644 storybook/static/assets/InfoBlock.stories-C737cNEY.js create mode 100644 storybook/static/assets/LinkButtons.stories-CWnL9o1m.js create mode 100644 storybook/static/assets/Loader.stories-Wu8QxO3T.js create mode 100644 storybook/static/assets/ModalWindow.stories-C8D3NSUk.js create mode 100644 storybook/static/assets/PanelButtons.stories-DdNpWdK_.js create mode 100644 storybook/static/assets/PreviewControls.stories-CUmA5ook.js create mode 100644 storybook/static/assets/Radio.stories-CumHEb3o.js create mode 100644 storybook/static/assets/Scroll.stories-Dq4Wwl6Z.js create mode 100644 storybook/static/assets/Slider.stories-DM-7D2v4.js create mode 100644 storybook/static/assets/SplitButton-Bq4l2hJH.js create mode 100644 storybook/static/assets/SplitButtonsDropdown.stories-BvWeee5D.js create mode 100644 storybook/static/assets/SplitButtonsIconLeft.stories-Dr4wDcvI.js create mode 100644 storybook/static/assets/SplitButtonsTabs.stories-CXQRjRm_.js create mode 100644 storybook/static/assets/Switches.stories-BfGUao-L.js create mode 100644 storybook/static/assets/Tabs.stories-suHzVPGv.js create mode 100644 storybook/static/assets/TextArea.stories-HtLcKLcL.js create mode 100644 storybook/static/assets/TextField.stories-CNWuOQ51.js create mode 100644 storybook/static/assets/Tooltip.stories-CprkHbDd.js create mode 100644 storybook/static/assets/Typography.stories-Ceegr84L.js rename storybook/static/assets/{WithTooltip-65CFNBJE-BwYBYwM9.js => WithTooltip-65CFNBJE-DKdOiCBU.js} (99%) rename storybook/static/assets/{chunk-3LY4VQVK-DK6VewjT.js => chunk-3LY4VQVK-DyJr4LVG.js} (98%) rename storybook/static/assets/{chunk-RD3KTAHR-ocB0pi6q.js => chunk-RD3KTAHR-0PUE-gja.js} (99%) rename storybook/static/assets/{components-DTTvQz4L.js => components-DW-5dJuS.js} (74%) rename storybook/static/assets/{formatter-EIJCOSYU-B024mPvu.js => formatter-EIJCOSYU-CVNaCVyv.js} (51%) rename storybook/static/assets/{iframe-DIiqmCNx.js => iframe-B3N_zEeP.js} (95%) create mode 100644 storybook/static/assets/iframe-kvNOWOmU.css rename storybook/static/assets/{syntaxhighlighter-OH4MV7E3-D4h-bfW0.js => syntaxhighlighter-OH4MV7E3-DFku4BmC.js} (99%) create mode 100644 storybook/static/assets/theme-utils-B-KYefhh.js rename storybook/static/assets/{theming-DzOc7WGW.js => theming-DLWRz99i.js} (99%) create mode 100644 storybook/static/sb-addons/storybook-2/manager-bundle.css diff --git a/storybook/source/.storybook/manager.js b/storybook/source/.storybook/manager.js index 48287ace0a..931da1c309 100644 --- a/storybook/source/.storybook/manager.js +++ b/storybook/source/.storybook/manager.js @@ -1,10 +1,32 @@ import { addons } from 'storybook/manager-api'; -import { themes } from 'storybook/theming'; +import { create } from 'storybook/theming/create'; +import '../styles/manager.css'; + +const onlyofficeTheme = create({ + base: 'dark', + colorPrimary: '#4D9DFF', + colorSecondary: '#4D9DFF', + appBg: '#1E1E1E', + appContentBg: '#252525', + appBorderColor: 'rgba(255, 255, 255, 0.12)', + appBorderRadius: 10, + barBg: '#1E1E1E', + barTextColor: '#A0A0A0', + barSelectedColor: '#4D9DFF', + barHoverColor: '#E0E0E0', + textColor: '#DEDEDE', + textInverseColor: '#1E1E1E', + inputBg: '#333333', + inputBorder: '#555555', + inputTextColor: '#DEDEDE', + brandTitle: 'ONLYOFFICE Plugin UI', + brandUrl: 'https://www.onlyoffice.com/', + brandTarget: '_self', +}); addons.setConfig({ - theme: { - ...themes.normal, - brandImage: './logo.svg', - brandUrl: 'https://onlyoffice.github.io/', + theme: onlyofficeTheme, + sidebar: { + showRoots: false, }, }); diff --git a/storybook/source/.storybook/preview.js b/storybook/source/.storybook/preview.js index ea0675680d..6ad6f85dad 100644 --- a/storybook/source/.storybook/preview.js +++ b/storybook/source/.storybook/preview.js @@ -1,55 +1,198 @@ +import '../styles/preview.css'; +import '../styles/dialog-button.css'; +import '../styles/plugin-buttons.css'; +import '../styles/cards.css'; +import '../styles/checkbox.css'; +import '../styles/radio.css'; +import '../styles/common-controls.css'; +import '../styles/textarea.css'; + +const themeTokens = { + 'Light': { + pageBg: '#FFFFFF', + pageSurface: '#F7F7F7', + pageSurfaceAlt: '#F9F9F9', + pageBorder: '#DFDFDF', + pageFg: 'rgba(0, 0, 0, 0.80)', + pageMuted: 'rgba(0, 0, 0, 0.60)', + }, + 'Light Classic': { + pageBg: '#FFFFFF', + pageSurface: '#F1F1F1', + pageSurfaceAlt: '#D8DADC', + pageBorder: '#CBCBCB', + pageFg: '#444444', + pageMuted: '#A5A5A5', + }, + 'Modern Light': { + pageBg: '#FFFFFF', + pageSurface: '#F3F3F3', + pageSurfaceAlt: '#F9F9F9', + pageBorder: '#E1E1E1', + pageFg: '#383838', + pageMuted: undefined, + }, + 'Modern Dark': { + pageBg: '#404040', + pageSurface: '#404040', + pageSurfaceAlt: '#585858', + pageBorder: '#686868', + pageFg: '#E8E8E8', + pageMuted: 'rgba(232, 232, 232, 0.70)', + }, + 'Dark': { + pageBg: '#333333', + pageSurface: '#333333', + pageSurfaceAlt: '#555555', + pageBorder: '#666666', + pageFg: 'rgba(255, 255, 255, 0.80)', + pageMuted: 'rgba(255, 255, 255, 0.60)', + }, + 'Dark Contrast': { + pageBg: '#1E1E1E', + pageSurface: '#1E1E1E', + pageSurfaceAlt: '#424242', + pageBorder: '#696969', + pageFg: '#E8E8E8', + pageMuted: '#B8B8B8', + }, +}; + +const THEME_ALIASES = { + light: 'Light', + lightclassic: 'Light Classic', + modernlight: 'Modern Light', + moderndark: 'Modern Dark', + dark: 'Dark', + darkcontrast: 'Dark Contrast', +}; + +function normalizeThemeName(rawTheme) { + if (!rawTheme) return 'Light'; + const cleaned = decodeURIComponent(String(rawTheme)).replace(/^!/, '').trim(); + const compact = cleaned.replace(/[\s_-]+/g, '').toLowerCase(); + return THEME_ALIASES[compact] ?? 'Light'; +} + /** @type { import('@storybook/html-vite').Preview } */ const preview = { -/* globalTypes: { + globalTypes: { theme: { - description: 'Theme switcher', - defaultValue: 'light', + name: 'Theme', + description: 'Global plugin UI theme', + defaultValue: 'Light', toolbar: { - title: 'Theme', + icon: 'paintbrush', items: [ - { value: 'light', icon: 'sun', title: 'light' }, - { value: 'dark', icon: 'moon', title: 'dark' } + 'Light', + 'Light Classic', + 'Dark', + 'Dark Contrast', + 'Modern Light', + 'Modern Dark', ], dynamicTitle: true, }, }, - },*/ + }, parameters: { + backgrounds: { disable: true }, + options: { + storySort: { + order: [ + 'Foundations', + ['Typography', 'Colors', 'Icons'], + 'Components', + [ + 'Buttons', + ['Dialog Buttons', 'Panel Buttons', 'Icon Buttons', 'Link Buttons', 'Split Buttons'], + 'Form', + ['Checkbox', 'Radio', 'Switches', 'Slider', 'Text Field', 'Text Area'], + 'Data Display', + ['Cards', 'Info Block', 'Tabs'], + 'Layout', + ['Header', 'Modal Window', 'Scroll'], + 'Feedback', + ['Loader', 'Tooltip'], + 'Actions', + ['Context Menu', 'Preview Controls'], + ], + '*', + ], + }, + }, + docs: { + toc: true, + story: { inline: true }, + canvas: { withToolbar: true }, + }, controls: { + expanded: true, matchers: { - color: /(background|color)$/i, - date: /Date$/i, + color: /(background|color)$/i, + date: /Date$/i, }, }, }, -}; -export const decorators = [ - (storyFn, context) => { - const theme = context.globals.theme || 'light'; - - // Apply the theme as a data attribute - document.documentElement.setAttribute('data-theme', theme); - - // Set window.Asc.plugin.theme for OnlyOffice plugin compatibility - if (!window.Asc) { - window.Asc = {}; - } - if (!window.Asc.plugin) { - window.Asc.plugin = {}; - } - window.Asc.plugin.theme = { - type: theme - }; - - return storyFn(); - }, -]; - -const link = document.createElement('link'); -link.rel = 'stylesheet'; -link.href = 'https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css'; -document.head.appendChild(link); + decorators: [ + (storyFn, context) => { + const theme = normalizeThemeName(context.globals.theme); + const tokens = themeTokens[theme] || themeTokens['Light']; + const isDark = theme === 'Dark' || theme === 'Dark Contrast' || theme === 'Modern Dark'; + const isDocs = context.viewMode === 'docs'; + + const pageBg = tokens.pageBg; + const pageFg = tokens.pageFg; + const pageSurface = tokens.pageSurface; + const pageSurfaceAlt = tokens.pageSurfaceAlt; + const pageBorder = tokens.pageBorder; + const pageMuted = tokens.pageMuted ?? (isDark ? 'rgba(255, 255, 255, 0.60)' : 'rgba(0, 0, 0, 0.60)'); + const pageAccent = isDark ? '#4D9DFF' : '#0B6DFF'; + + const root = document.documentElement; + root.style.setProperty('--page-bg', pageBg); + root.style.setProperty('--page-fg', pageFg); + root.style.setProperty('--page-border', pageBorder); + root.style.setProperty('--page-surface', pageSurface); + root.style.setProperty('--page-surface-alt', pageSurfaceAlt); + root.style.setProperty('--page-muted', pageMuted); + root.style.setProperty('--page-accent', pageAccent); + root.dataset.pluginTheme = theme.replace(/\s+/g, '-').toLowerCase(); + + // OnlyOffice plugin theme compatibility + if (!window.Asc) window.Asc = {}; + if (!window.Asc.plugin) window.Asc.plugin = {}; + window.Asc.plugin.theme = { type: theme }; + + const wrapper = document.createElement('div'); + wrapper.style.cssText = [ + `background-color:${pageBg}`, + `color:${pageFg}`, + `padding:${isDocs ? '0' : '20px'}`, + 'min-height:0', + 'width:100%', + `--page-bg:${pageBg}`, + `--page-fg:${pageFg}`, + `--page-border:${pageBorder}`, + `--page-surface:${pageSurface}`, + `--page-surface-alt:${pageSurfaceAlt}`, + `--page-muted:${pageMuted}`, + `--page-accent:${pageAccent}`, + ].join(';'); + + const storyEl = storyFn(); + if (typeof storyEl === 'string') { + wrapper.innerHTML = storyEl; + } else if (storyEl instanceof Node) { + wrapper.appendChild(storyEl); + } else { + wrapper.textContent = String(storyEl ?? ''); + } + return wrapper; + }, + ], +}; export default preview; diff --git a/storybook/source/components/Card.js b/storybook/source/components/Card.js new file mode 100644 index 0000000000..37c67363b0 --- /dev/null +++ b/storybook/source/components/Card.js @@ -0,0 +1,72 @@ +import { resolveTheme } from './theme-utils.js'; +import { cardsByTheme } from '../data/cards.ts'; + +const CHEVRON_DOWN = (color) => ``; +const CHEVRON_UP = (color) => ``; + +const DEFAULT_TITLE = "His English teacher says that he is a good pupil and a great student who always participates in class discussions and finishes his work carefully"; +const DEFAULT_TAGS = ["His", "Her", "Label", "Label", "Label", "Label"]; + +export function Card({ + type = 'close', + state = 'default', + theme, + minWidth = 236, + title = DEFAULT_TITLE, + helperText = 'Text here', + actionLabel = 'Button', + tags = DEFAULT_TAGS, +} = {}) { + const resolved = resolveTheme(theme); + const tokens = cardsByTheme[resolved] ?? cardsByTheme['Light']; + const isModern = resolved.startsWith('Modern'); + const isHover = state === 'hover'; + const isExpanded = type !== 'close'; + + const fontSize = isModern ? 12 : 11; + + const containerBg = (type === 'close' && isHover) ? tokens.closeHoverBackground : tokens.background; + + const containerStyle = [ + `width:${minWidth}px`, `min-width:${minWidth}px`, `padding:6px`, + `border-radius:${tokens.radius}px`, `border:1px solid ${tokens.border}`, + `background:${containerBg}`, `display:inline-flex`, + `flex-direction:${type === 'close' ? 'row' : 'column'}`, + `align-items:${type === 'close' ? 'center' : 'flex-start'}`, + `justify-content:center`, `gap:${type === 'close' ? 4 : 10}px`, + `box-sizing:border-box`, + ].join(';'); + + const textStyle = `flex:1 1 0;min-width:0;font-size:${fontSize}px;font-family:Arial,Helvetica,sans-serif;font-weight:400;line-height:12px;letter-spacing:${isModern ? 0.24 : 0.22}px;color:${tokens.textColor};${isExpanded ? 'display:block;white-space:normal;overflow-wrap:anywhere;' : 'overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;'}`; + + const chevron = isExpanded ? CHEVRON_UP(tokens.iconColor) : CHEVRON_DOWN(tokens.iconColor); + + const titleRow = `
+
${title}
+ ${chevron} +
`; + + let expandedContent = ''; + if (type === 'openWithButton') { + const chips = tags.map(tag => `
${tag}
`).join(''); + const actionBg = isHover ? tokens.actionPrimaryHoverBackground : tokens.actionPrimaryBackground; + expandedContent = ` +
${chips}
+
+ +
`; + } else if (type === 'openWithText') { + const actionBg = isHover ? tokens.actionSecondaryHoverBackground : tokens.actionSecondaryBackground; + expandedContent = ` +
${helperText}
+
+ +
`; + } + + return `
${titleRow}${expandedContent}
`; +} diff --git a/storybook/source/components/Checkbox.js b/storybook/source/components/Checkbox.js new file mode 100644 index 0000000000..9b5ca264fb --- /dev/null +++ b/storybook/source/components/Checkbox.js @@ -0,0 +1,40 @@ +import { checkboxTokens, resolveCheckboxTheme } from '../data/checkbox.ts'; + +const CHECK_PATH = 'M2.75 6.94995L5.75 9.74995L11.25 4.25005'; + +/** + * Checkbox — HTML-rendering version + * @param {object} props + * @param {string} [props.label] + * @param {'no'|'yes'|'partial'} [props.selected] + * @param {'default'|'hover'|'disabled'} [props.state] + * @param {string} [props.theme] + * @param {boolean} [props.truncate] - Truncate long label with ellipsis instead of wrapping + */ +export function Checkbox({ label = 'Text', selected = 'no', state = 'default', theme = 'Light', truncate = false } = {}) { + const resolvedTheme = resolveCheckboxTheme(theme); + const token = checkboxTokens[resolvedTheme][state][selected]; + const isDisabled = state === 'disabled'; + const fontSize = resolvedTheme.startsWith('Modern') ? 12 : 11; + const letterSpacing = resolvedTheme.startsWith('Modern') ? 0.24 : 0.22; + + const checkMark = selected === 'yes' && token.markColor + ? `` + : ''; + const partialMark = selected === 'partial' && token.markColor + ? `` + : ''; + + return ``; +} diff --git a/storybook/source/components/ContextMenu.js b/storybook/source/components/ContextMenu.js new file mode 100644 index 0000000000..2892809e5f --- /dev/null +++ b/storybook/source/components/ContextMenu.js @@ -0,0 +1,60 @@ +import { getTokens } from './theme-utils.js'; + +const ICON_SVG = (color) => ``; +const SUBMENU_SVG = (color) => ``; + +const PRESSED_BG = { + 'Light': '#CBCBCB', 'Light Classic': '#7D858C', 'Dark': '#666666', + 'Dark Contrast': '#666666', 'Modern Light': '#DCE7FA', 'Modern Dark': '#375478', +}; + +const DEFAULT_ITEMS = [ + { id: '1', label: 'Menu item', type: 'iconLeft' }, + { id: '2', label: 'Menu item', type: 'iconsBoth' }, + { id: '3', label: 'Menu item', type: 'noIcon' }, + { id: '4', label: 'Menu item', type: 'iconLeft', disabled: true }, +]; + +export function ContextMenu({ + items = DEFAULT_ITEMS, + theme, + isHoveredIndex = -1, + isClickedIndex = -1, + defaultOpenId, +} = {}) { + const tokens = getTokens(theme); + const isModern = tokens.isModern; + const pressedBg = PRESSED_BG[tokens.theme] ?? tokens.surfaceAlt; + + const fontSize = isModern ? 12 : 11; + + const itemsHtml = items.map((item, index) => { + const hasSubmenu = Boolean(item.items && item.items.length > 0); + const isSubmenuOpen = defaultOpenId === item.id; + const isItemHovered = isHoveredIndex === index || isSubmenuOpen; + const isItemPressed = isClickedIndex === index; + const iconColor = item.disabled ? tokens.muted : tokens.fg; + const bg = item.disabled ? 'transparent' + : isItemPressed ? pressedBg + : isItemHovered ? tokens.surfaceAlt + : 'transparent'; + + const showRightIcon = item.type === 'iconsBoth' || hasSubmenu; + const padding = item.type === 'noIcon' ? '5px 20px' : '3px 10px'; + + const submenuHtml = (hasSubmenu && isSubmenuOpen) + ? `
${ContextMenu({ items: item.items, theme })}
` + : ''; + + return `
+ + ${submenuHtml} +
`; + }).join(''); + + return `
${itemsHtml}
`; +} diff --git a/storybook/source/components/Header.js b/storybook/source/components/Header.js new file mode 100644 index 0000000000..9ff7a00109 --- /dev/null +++ b/storybook/source/components/Header.js @@ -0,0 +1,57 @@ +import { resolveTheme } from './theme-utils.js'; + +const HEADER_TOKENS = { + 'Light': { bg: '#F7F7F7', text: 'rgba(0, 0, 0, 0.80)', panelDivider: '#E0E0E0', windowDivider: '#E0E0E0' }, + 'Light Classic':{ bg: '#F1F1F1', text: '#444444', panelDivider: '#D8DADC', windowDivider: '#D8DADC' }, + 'Dark': { bg: '#404040', text: 'rgba(255, 255, 255, 0.80)', panelDivider: '#555555', windowDivider: '#555555' }, + 'Dark Contrast':{ bg: '#2A2A2A', text: '#E8E8E8', panelDivider: '#424242', windowDivider: '#555555' }, + 'Modern Light': { bg: '#FFFFFF', text: '#383838', panelDivider: '#EAEAEA', windowDivider: '#EAEAEA' }, + 'Modern Dark': { bg: '#404040', text: '#F3F3F3', panelDivider: '#585858', windowDivider: '#585858', windowWeight: 400 }, +}; + +const CLOSE_SVG = (color) => ``; + +const COLLAPSE_SVG = (color) => ``; + +/** + * Header — HTML-rendering version + * @param {object} props + * @param {string} [props.title] + * @param {number} [props.width] + * @param {'panel'|'window'} [props.variant] + * @param {string} [props.theme] + */ +export function Header({ title = 'Title', width = 261, variant = 'panel', theme } = {}) { + const resolved = resolveTheme(theme); + const tokens = HEADER_TOKENS[resolved] ?? HEADER_TOKENS['Light']; + const isModern = resolved.startsWith('Modern'); + const isPanel = variant === 'panel'; + const isWindow = variant === 'window'; + const divider = isPanel ? tokens.panelDivider : tokens.windowDivider; + const titleWeight = isWindow ? (tokens.windowWeight ?? 700) : 700; + const height = isPanel ? 44 : 34; + const padding = isPanel ? '11px 12px 12px' : '7px 12px'; + const justify = isPanel ? 'space-between' : 'center'; + const closeSize = (isModern && isPanel) ? 24 : 20; + + const collapseBtn = (isPanel && isModern) + ? `` + : ''; + + const placeholder = isWindow ? `` : ''; + + return `
+
+ ${placeholder} +
${title}
+
+ ${collapseBtn} + +
+
+
`; +} diff --git a/storybook/source/components/IconButton.js b/storybook/source/components/IconButton.js new file mode 100644 index 0000000000..f3b5e82b5b --- /dev/null +++ b/storybook/source/components/IconButton.js @@ -0,0 +1,66 @@ +import { resolveTheme } from './theme-utils.js'; +import iconButtonsData from '../data/icon-buttons.ts'; + +const HIGHLIGHT_SVG = (color) => ``; + + +const TYPE_KEY = { outline: 'Outline', solid: 'Solid', rightExpander: 'RightExpander' }; +const STATE_KEY = { default: 'Default', hover: 'Hover', pressed: 'Pressed' }; + +function containerToStyle(container) { + if (!container) return ''; + const skip = new Set(['display', 'justifyContent', 'alignItems', 'gap', 'overflow', 'flexDirection']); + return Object.entries(container) + .filter(([k]) => !skip.has(k)) + .map(([k, v]) => { + const prop = k.replace(/([A-Z])/g, '-$1').toLowerCase(); + if (prop === 'border-radius') return `${prop}:${v}px`; + if (prop === 'outline-offset') return `${prop}:${v}px`; + if (prop === 'width') return `width:${v}px`; + if (prop === 'height') return `height:${v}px`; + if (prop === 'padding') return `padding:${v}px`; + return `${prop}:${v}`; + }) + .join(';'); +} + +export function IconButton({ type = 'outline', state = 'default', theme } = {}) { + const resolved = resolveTheme(theme); + const themeData = iconButtonsData[resolved] ?? iconButtonsData['Light']; + const typeData = themeData[TYPE_KEY[type]] ?? themeData['Outline']; + const token = typeData[STATE_KEY[state]] ?? typeData['Default'] ?? {}; + const container = token.container ?? {}; + const iconColor = token.iconColor ?? 'rgba(0,0,0,0.8)'; + + const borderRadiusCss = container.borderRadius != null + ? `border-radius:${container.borderRadius}px` + : [ + container.borderTopLeftRadius != null ? `border-top-left-radius:${container.borderTopLeftRadius}px` : '', + container.borderTopRightRadius != null ? `border-top-right-radius:${container.borderTopRightRadius}px` : '', + container.borderBottomRightRadius != null ? `border-bottom-right-radius:${container.borderBottomRightRadius}px` : '', + container.borderBottomLeftRadius != null ? `border-bottom-left-radius:${container.borderBottomLeftRadius}px` : '', + ].filter(Boolean).join(';'); + + const containerStyle = [ + `width:${container.width ?? 24}px`, + `height:${container.height ?? 24}px`, + `box-sizing:border-box`, + `display:inline-flex`, + `align-items:center`, + `justify-content:center`, + `border:none`, + `outline:none`, + `cursor:pointer`, + container.background ? `background:${container.background}` : 'background:transparent', + borderRadiusCss, + container.outline ? `outline:${container.outline}` : '', + container.outlineOffset != null ? `outline-offset:${container.outlineOffset}px` : '', + ].filter(Boolean).join(';'); + + // Mirror the reference SvgIcon wrapper: span with fixed 20×20 size and flex-shrink:0 + // so the icon is never squished inside the flex button regardless of padding. + const iconSpanStyle = 'width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0;'; + const icon = ``; + + return ``; +} diff --git a/storybook/source/components/InfoBlock.js b/storybook/source/components/InfoBlock.js new file mode 100644 index 0000000000..91d116fa02 --- /dev/null +++ b/storybook/source/components/InfoBlock.js @@ -0,0 +1,35 @@ +import { infoBlockTokens } from '../data/info-block.ts'; +import { resolveTheme } from './theme-utils.js'; + +const ALERT_SVG = (bg, mark) => ``; + +const CLOSE_MIN_SVG = (color) => ``; + +/** + * InfoBlock — HTML-rendering version + */ +export function InfoBlock({ title = 'Title', description = 'Description', showTitle = true, showDescription = true, iconMode = 'left', theme } = {}) { + const resolved = resolveTheme(theme); + const tokens = infoBlockTokens[resolved] ?? infoBlockTokens['Light']; + const showLeftIcon = showTitle && (iconMode === 'left' || iconMode === 'both'); + const showRightIcon = showTitle && (iconMode === 'right' || iconMode === 'both'); + + const titleRow = showTitle ? `
+ ${showLeftIcon ? ALERT_SVG(tokens.alertBackground, tokens.alertMark) : ''} + ${title} + ${showRightIcon ? `` : ''} +
` : ''; + + const descRow = showDescription ? `
${description}
` : ''; + + const gap = (showTitle && showDescription) ? 4 : 0; + + return `
+ ${titleRow}${descRow} +
`; +} diff --git a/storybook/source/components/LinkButton.js b/storybook/source/components/LinkButton.js new file mode 100644 index 0000000000..494d793cce --- /dev/null +++ b/storybook/source/components/LinkButton.js @@ -0,0 +1,18 @@ +import linkButtonsData from '../data/link-buttons.ts'; + +/** + * LinkButton — HTML-rendering version + */ +export function LinkButton({ label = 'Show advanced settings', state = 'default', theme = 'Light' } = {}) { + const themeEntry = linkButtonsData[theme] ?? linkButtonsData['Light']; + const stateKey = state === 'hover' ? 'Hover' : 'Default'; + const token = themeEntry[stateKey] ?? themeEntry['Default'] ?? {}; + const text = token.text ?? {}; + const underlineColor = token.underlineColor ?? text.color ?? 'rgba(0,0,0,0.8)'; + const lh = typeof text.lineHeight === 'number' ? `${text.lineHeight}px` : text.lineHeight ?? '16px'; + + return ``; +} diff --git a/storybook/source/components/Loader.js b/storybook/source/components/Loader.js new file mode 100644 index 0000000000..bb66a23f74 --- /dev/null +++ b/storybook/source/components/Loader.js @@ -0,0 +1,37 @@ +import { getTokens } from './theme-utils.js'; + +/** + * Loader — HTML-rendering version + * @param {object} props + * @param {'S'|'M'} [props.size] + * @param {string} [props.label] + * @param {boolean} [props.overlay] + * @param {string} [props.theme] + */ +export function Loader({ size = 'S', label = 'Loading...', overlay = false, theme } = {}) { + const tokens = getTokens(theme); + const spinnerSize = size === 'M' ? 28 : 20; + const fontSize = size === 'M' ? 15 : tokens.isModern ? 12 : 11; + const lineHeight = size === 'M' ? 20 : 16; + const gap = size === 'M' ? 12 : 8; + const letterSpacing = size === 'M' ? 0.3 : tokens.isModern ? 0.24 : 0.22; + + const fg = overlay ? '#FFFFFF' : tokens.fg; + const borderColor = overlay ? 'rgba(255,255,255,0.25)' : tokens.border; + + const overlayBg = { + 'Light': 'rgba(68, 68, 68, 0.95)', + 'Light Classic': '#000000a6', + 'Modern Light': '#383838', + 'Modern Dark': '#343434', + 'Dark Contrast': 'rgba(18, 18, 18, 0.95)', + 'Dark': 'rgba(24, 24, 24, 0.95)', + }; + + const bg = overlay ? (overlayBg[tokens.theme] ?? 'rgba(68,68,68,0.95)') : 'transparent'; + + return `
+ + ${label} +
`; +} diff --git a/storybook/source/components/ModalWindow.js b/storybook/source/components/ModalWindow.js new file mode 100644 index 0000000000..04eb5a65b4 --- /dev/null +++ b/storybook/source/components/ModalWindow.js @@ -0,0 +1,293 @@ +import { Header } from './Header.js'; +import { resolveTheme } from './theme-utils.js'; + +const modalTokensByTheme = { + 'Light': { + frameBg: '#FFFFFF', + frameBorder: '#E0E0E0', + contentBg: '#FFFFFF', + contentText: 'rgba(0, 0, 0, 0.60)', + notificationText: 'rgba(0, 0, 0, 0.80)', + divider: '#E0E0E0', + }, + 'Light Classic': { + frameBg: '#FFFFFF', + frameBorder: '#D8DADC', + contentBg: '#FFFFFF', + contentText: '#A5A5A5', + notificationText: '#444444', + divider: '#D8DADC', + }, + 'Dark': { + frameBg: '#333333', + frameBorder: '#555555', + contentBg: '#333333', + contentText: 'rgba(255, 255, 255, 0.60)', + notificationText: 'rgba(255, 255, 255, 0.80)', + divider: '#555555', + }, + 'Dark Contrast': { + frameBg: '#1E1E1E', + frameBorder: '#424242', + contentBg: '#1E1E1E', + contentText: '#B8B8B8', + notificationText: '#E8E8E8', + divider: '#424242', + }, + 'Modern Light': { + frameBg: '#FFFFFF', + frameBorder: '#EAEAEA', + contentBg: '#FFFFFF', + contentText: '#383838', + notificationText: '#383838', + divider: '#EAEAEA', + }, + 'Modern Dark': { + frameBg: '#404040', + frameBorder: '#585858', + contentBg: '#404040', + contentText: '#F3F3F3', + notificationText: '#F3F3F3', + divider: '#585858', + }, +}; + +const primaryButtonByTheme = { + 'Light': { + bg: '#444444', + text: '#FFFFFF', + hoverBg: '#333333', + pressedBg: '#1F1F1F', + radius: 1, + size: 22, + px: 32, + letterSpacing: 0.22, + fontSize: 11, + }, + 'Light Classic': { + bg: '#7D858C', + text: '#FFFFFF', + hoverBg: '#666D73', + pressedBg: '#666D73', + radius: 1, + size: 22, + px: 32, + letterSpacing: 0.22, + fontSize: 11, + }, + 'Dark': { + bg: '#DDDDDD', + text: '#333333', + hoverBg: '#FCFCFC', + pressedBg: '#FCFCFC', + radius: 1, + size: 22, + px: 32, + letterSpacing: 0.22, + fontSize: 11, + }, + 'Dark Contrast': { + bg: '#E6E6E6', + text: '#121212', + hoverBg: '#A6A6A6', + pressedBg: '#A6A6A6', + radius: 1, + size: 22, + px: 32, + letterSpacing: 0.22, + fontSize: 11, + }, + 'Modern Light': { + bg: '#4473CA', + text: '#FFFFFF', + hoverBg: '#2A5BB9', + pressedBg: '#1D4FAF', + pressedBorder: '#2A5BB9', + radius: 4, + size: 24, + minWidth: 48, + px: 12, + letterSpacing: 0.24, + fontSize: 12, + }, + 'Modern Dark': { + bg: '#4A7BE0', + text: '#FFFFFF', + hoverBg: '#366CDA', + pressedBg: '#2D66CC', + pressedBorder: '#4A7BE0', + radius: 4, + size: 24, + minWidth: 48, + px: 12, + letterSpacing: 0.24, + fontSize: 12, + }, +}; + +const secondaryButtonByTheme = { + 'Light': { + bg: '#FFFFFF', + text: 'rgba(0, 0, 0, 0.80)', + border: '#C0C0C0', + hoverBg: '#E0E0E0', + pressedBg: '#CBCBCB', + radius: 1, + size: 22, + px: 32, + letterSpacing: 0.22, + fontSize: 11, + }, + 'Light Classic': { + bg: '#FFFFFF', + text: '#444444', + border: '#CFCFCF', + hoverBg: '#D8DADC', + pressedBg: '#7D858C', + radius: 1, + size: 22, + px: 32, + letterSpacing: 0.22, + fontSize: 11, + }, + 'Dark': { + bg: '#333333', + text: 'rgba(255, 255, 255, 0.80)', + border: '#666666', + hoverBg: '#555555', + pressedBg: '#606060', + radius: 1, + size: 22, + px: 32, + letterSpacing: 0.22, + fontSize: 11, + }, + 'Dark Contrast': { + bg: '#1E1E1E', + text: '#E8E8E8', + border: '#696969', + hoverBg: '#424242', + pressedBg: '#666666', + radius: 1, + size: 22, + px: 32, + letterSpacing: 0.22, + fontSize: 11, + }, + 'Modern Light': { + bg: '#FFFFFF', + text: '#383838', + border: '#E1E1E1', + hoverBg: '#F9F9F9', + pressedBg: '#EAEAEA', + pressedBorder: '#2A5BB9', + radius: 4, + size: 24, + minWidth: 48, + px: 12, + letterSpacing: 0.24, + fontSize: 12, + }, + 'Modern Dark': { + bg: '#404040', + text: '#F3F3F3', + border: '#686868', + hoverBg: '#585858', + pressedBg: '#686868', + pressedBorder: '#4A7BE0', + radius: 4, + size: 24, + minWidth: 48, + px: 12, + letterSpacing: 0.24, + fontSize: 12, + }, +}; + +const sizeToWidth = { S: 350, M: 610, L: 1380 }; +const sizeToContentHeight = { S: 206, M: 206, L: 423 }; + +const frameRadiusByTheme = { + 'Light': 2, + 'Light Classic': 2, + 'Dark': 2, + 'Dark Contrast': 2, + 'Modern Light': 4, + 'Modern Dark': 4, +}; + +const WARNING_SVG = ``; + +/** + * ModalWindow — HTML-rendering dialog shell + * @param {object} props + * @param {string} [props.title] + * @param {string} [props.contentLabel] + * @param {string} [props.notificationText] + * @param {string} [props.primaryLabel] + * @param {string} [props.secondaryLabel] + * @param {'S'|'M'|'L'} [props.size] + * @param {boolean} [props.notification] + * @param {'auto'|'single'|'double'} [props.footerMode] + * @param {string} [props.theme] + */ +export function ModalWindow({ + title = 'Title', + contentLabel = 'Content', + notificationText = 'Text\nText', + primaryLabel = 'Button', + secondaryLabel = 'Button', + size = 'M', + notification = false, + footerMode = 'auto', + theme, +} = {}) { + const resolved = resolveTheme(theme); + const tokens = modalTokensByTheme[resolved] ?? modalTokensByTheme['Light']; + const isModern = resolved.startsWith('Modern'); + const resolvedFooter = footerMode === 'auto' ? (size === 'L' ? 'double' : 'single') : footerMode; + const sizeWidth = sizeToWidth[size] ?? sizeToWidth['M']; + const frameRadius = frameRadiusByTheme[resolved] ?? 2; + const primaryBtn = primaryButtonByTheme[resolved] ?? primaryButtonByTheme['Light']; + const secondaryBtn = secondaryButtonByTheme[resolved] ?? secondaryButtonByTheme['Light']; + const fontSize = isModern ? 12 : 11; + const letterSpacing = isModern ? 0.24 : 0.22; + const footerPaddingY = isModern ? 12 : 16; + + const headerHtml = Header({ title, width: sizeWidth, variant: 'window', theme: resolved }); + + const contentAreaHtml = notification + ? `
+ ${WARNING_SVG} +
${notificationText}
+
` + : `
${contentLabel}
`; + + const primaryBtnBorder = primaryBtn.border ? `1px solid ${primaryBtn.border}` : '1px solid transparent'; + const primaryBtnPressedBorder = primaryBtn.pressedBorder ? `1px solid ${primaryBtn.pressedBorder}` : primaryBtnBorder; + const primaryBtnHtml = ``; + + const secondaryBtnBorder = secondaryBtn.border ? `1px solid ${secondaryBtn.border}` : '1px solid transparent'; + const secondaryBtnPressedBorder = secondaryBtn.pressedBorder ? `1px solid ${secondaryBtn.pressedBorder}` : secondaryBtnBorder; + const secondaryBtnHtml = ``; + + const footerButtons = resolvedFooter === 'double' + ? `${primaryBtnHtml}${secondaryBtnHtml}` + : primaryBtnHtml; + + return `
+ ${headerHtml} +
+ ${contentAreaHtml} +
+
+
+
+ ${footerButtons} +
+
+
`; +} diff --git a/storybook/source/components/PanelButton.js b/storybook/source/components/PanelButton.js new file mode 100644 index 0000000000..9b22440f10 --- /dev/null +++ b/storybook/source/components/PanelButton.js @@ -0,0 +1,63 @@ +import panelButtons from '../data/panel-buttons.ts'; +import { resolveTheme } from './theme-utils.js'; + +const STATE_KEY = { default: 'Default', hover: 'Hover', pressed: 'Pressed', disabled: 'Disabled', loader: 'Loader' }; + +const SPINNER_SVG = (color, size) => ` + + +`; + +/** + * PanelButton — renders HTML string for the given visual state. + * Interactivity (hover/press transitions) is handled in the story layer. + */ +export function PanelButton({ label = 'Button', size = 24, state = 'default', theme = 'Light', scale = false } = {}) { + const resolved = resolveTheme(theme); + const themeEntry = panelButtons[resolved] ?? panelButtons['Light']; + const sizeEntry = themeEntry[String(size)] ?? themeEntry['24']; + const token = sizeEntry?.[STATE_KEY[state]] ?? sizeEntry?.['Default'] ?? {}; + + const container = token.container ?? {}; + const text = token.text ?? {}; + const spinnerColor = token.spinnerColor ?? text.color ?? 'rgba(0,0,0,0.8)'; + const isLoader = state === 'loader'; + const isDisabled = state === 'disabled'; + const spinnerSize = size === 30 ? 20 : 16; + + const stateClass = state === 'hover' ? 'ui-panel-button--hover' + : state === 'pressed' ? 'ui-panel-button--pressed' + : state === 'disabled' ? 'ui-panel-button--disabled' + : state === 'loader' ? 'ui-panel-button--loader' : ''; + + const containerStyle = [ + `height:${container.height ?? size}px`, + `padding:0 ${container.paddingRight ?? 32}px`, + `background:${container.background ?? 'white'}`, + `outline:${container.outline ?? '1px #C0C0C0 solid'}`, + `outline-offset:${container.outlineOffset ?? -1}px`, + `border-radius:${container.borderRadius ?? 1}px`, + 'display:inline-flex', 'align-items:center', 'justify-content:center', + 'box-sizing:border-box', 'border:none', + `width:${scale ? '100%' : 'fit-content'}`, + `cursor:${isDisabled || isLoader ? 'not-allowed' : 'pointer'}`, + ].join(';'); + + const textStyle = [ + `color:${text.color ?? 'rgba(0,0,0,0.8)'}`, + `font-size:${text.fontSize ?? 11}px`, + 'font-family:Arial,Helvetica,sans-serif', + `font-weight:${text.fontWeight ?? 700}`, + `line-height:${text.lineHeight ?? 16}px`, + `letter-spacing:${text.letterSpacing ?? 0.22}px`, + 'display:inline-flex', 'align-items:center', 'justify-content:center', + 'width:100%', 'white-space:nowrap', + ].join(';'); + + const inner = isLoader + ? `` + : `${label}`; + + const disabledAttr = isDisabled || isLoader ? ` disabled aria-busy="${isLoader}"` : ''; + return ``; +} diff --git a/storybook/source/components/PreviewControl.js b/storybook/source/components/PreviewControl.js new file mode 100644 index 0000000000..0cf799cb27 --- /dev/null +++ b/storybook/source/components/PreviewControl.js @@ -0,0 +1,62 @@ +import { resolveTheme } from './theme-utils.js'; + +const PREVIEW_THEMES = { + 'Light': { bg: 'rgba(0, 0, 0, 0.80)', fg: '#FFFFFF', shadow: '0px 4px 10px rgba(0, 0, 0, 0.10)' }, + 'Light Classic':{ bg: '#444444', fg: '#FFFFFF', shadow: '0px 4px 10px rgba(0, 0, 0, 0.10)' }, + 'Dark': { bg: 'rgba(255, 255, 255, 0.80)',fg: '#444444', shadow: '0px 4px 10px rgba(0, 0, 0, 0.40)' }, + 'Dark Contrast':{ bg: '#E8E8E8', fg: '#2A2A2A', shadow: '0px 4px 10px rgba(0, 0, 0, 0.40)' }, + 'Modern Light': { bg: '#383838', fg: '#FFFFFF', shadow: '0px 4px 10px rgba(0, 0, 0, 0.10)' }, + 'Modern Dark': { bg: '#EAEAEA', fg: '#222222', shadow: '0px 4px 10px rgba(0, 0, 0, 0.10)' }, +}; + +const ARROW_PATH = { + back: 'M8 12L17.5 2L16.5 1L6 12L16.5 23L17.5 22L8 12Z', + next: 'M16 12L6.5 22L7.5 23L18 12L7.5 1L6.5 2L16 12Z', +}; + +export function PreviewControl({ direction = 'back', state = 'default', theme, isDisabled = false } = {}) { + const resolved = resolveTheme(theme); + const resolvedTheme = PREVIEW_THEMES[resolved] ?? PREVIEW_THEMES['Light']; + + const isHover = state === 'hover'; + const isPressed = state === 'pressed'; + const disabled = isDisabled || state === 'disabled'; + + const shadow = isPressed ? '0px 2px 6px rgba(0, 0, 0, 0.30)' + : isHover ? '0px 6px 12px rgba(0, 0, 0, 0.18)' + : resolvedTheme.shadow; + + const transform = isPressed ? 'translateY(0.5px)' : 'none'; + const opacity = disabled ? '0.45' : '1'; + + const path = ARROW_PATH[direction] ?? ARROW_PATH.back; + + return ``; +} diff --git a/storybook/source/components/Radio.js b/storybook/source/components/Radio.js new file mode 100644 index 0000000000..1a856c45d7 --- /dev/null +++ b/storybook/source/components/Radio.js @@ -0,0 +1,30 @@ +import { radioTokens, resolveRadioTheme } from '../data/radio.ts'; + +/** + * Radio — HTML-rendering version + * @param {object} props + * @param {string} [props.label] + * @param {'no'|'yes'} [props.selected] + * @param {'default'|'hover'|'disabled'} [props.state] + * @param {string} [props.theme] + */ +export function Radio({ label = 'Text', selected = 'no', state = 'default', theme = 'Light' } = {}) { + const resolvedTheme = resolveRadioTheme(theme); + const token = radioTokens[resolvedTheme][state][selected]; + const isDisabled = state === 'disabled'; + + const dot = selected === 'yes' && token.dotFill + ? `` + : ''; + + return ``; +} diff --git a/storybook/source/components/Scroll.js b/storybook/source/components/Scroll.js new file mode 100644 index 0000000000..110626d174 --- /dev/null +++ b/storybook/source/components/Scroll.js @@ -0,0 +1,141 @@ +import { scrollByTheme, scrollSizePixels } from '../data/scroll.ts'; +import { resolveTheme } from './theme-utils.js'; + +const ARROW_UP_SVG = (color) => + ``; + +const ARROW_DOWN_SVG = (color) => + ``; + +function notchLines(notchColor, notchWidth) { + return Array.from({ length: 7 }, () => + `` + ).join(''); +} + +/** + * Scroll — HTML string generator for a scrollbar component. + * + * @param {object} [opts] + * @param {'vertical'|'horizontal'} [opts.orientation='vertical'] + * @param {'XS'|'S'|'M'} [opts.size='M'] + * @param {'withButtons'|'withoutButtons'} [opts.type='withoutButtons'] + * @param {'default'|'hover'|'pressed'} [opts.state='default'] + * @param {number} [opts.length=167] - total rendered length in px + * @param {number} [opts.viewportSize=100] - visible viewport size + * @param {number} [opts.contentSize=200] - full scrollable content size + * @param {number} [opts.scrollValue=0] - current scroll position (0..contentSize-viewportSize) + * @param {string} [opts.theme] + * @returns {string} HTML string + */ +export function Scroll({ + orientation = 'vertical', + size = 'M', + type = 'withoutButtons', + state = 'default', + length = 167, + viewportSize = 100, + contentSize = 200, + scrollValue = 0, + theme, +} = {}) { + const resolved = resolveTheme(theme); + const themeTokens = scrollByTheme[resolved] ?? scrollByTheme['Light']; + const tokens = themeTokens[state] ?? themeTokens['default']; + + const isHorizontal = orientation === 'horizontal'; + const showButtons = type === 'withButtons'; + const effectiveSize = showButtons ? 'M' : size; + const metrics = scrollSizePixels[effectiveSize]; + const liftTokens = tokens.lift[effectiveSize]; + const buttonTokens = tokens.button; + + const totalLength = Math.max(48, length); + const trackLength = Math.max( + 24, + totalLength - (showButtons ? metrics.button * 2 + metrics.gap * 2 : 0), + ); + + const viewport = Math.max(1, viewportSize); + const content = Math.max(viewport, contentSize); + const maxValue = Math.max(0, content - viewport); + + const thumbRaw = Math.round((viewport / content) * trackLength); + const thumbMin = effectiveSize === 'XS' ? 18 : 24; + const thumbLength = Math.max(Math.min(thumbMin, trackLength), Math.min(thumbRaw, trackLength)); + const travel = Math.max(0, trackLength - thumbLength); + const clampedValue = Math.max(0, Math.min(scrollValue, maxValue)); + const thumbPosition = travel === 0 || maxValue === 0 ? 0 : (clampedValue / maxValue) * travel; + const thumbCrossOffset = Math.floor((metrics.frameCross - metrics.railInner) / 2); + + // Track container style + const trackW = isHorizontal ? trackLength : metrics.frameCross; + const trackH = isHorizontal ? metrics.frameCross : trackLength; + const trackStyle = `position:relative;width:${trackW}px;height:${trackH}px;box-sizing:border-box;`; + + // Thumb style + const thumbLeft = isHorizontal ? thumbPosition : thumbCrossOffset; + const thumbTop = isHorizontal ? thumbCrossOffset : thumbPosition; + const thumbW = isHorizontal ? thumbLength : metrics.railInner; + const thumbH = isHorizontal ? metrics.railInner : thumbLength; + const thumbStyle = [ + 'position:absolute', + `left:${thumbLeft}px`, + `top:${thumbTop}px`, + `width:${thumbW}px`, + `height:${thumbH}px`, + `background:${liftTokens.bg}`, + `border:1px solid ${liftTokens.border}`, + `border-radius:${metrics.radius}px`, + 'box-sizing:border-box', + 'display:inline-flex', + 'align-items:center', + 'justify-content:center', + ].join(';'); + + const notchHtml = metrics.hasNotching + ? isHorizontal + ? `
${ + Array.from({ length: 7 }, () => + `` + ).join('') + }
` + : `
${notchLines(liftTokens.notch, metrics.notch)}
` + : ''; + + const trackHtml = `
${notchHtml}
`; + + // Button style + const buttonStyle = [ + `width:${metrics.button}px`, + `height:${metrics.button}px`, + `border:1px solid ${buttonTokens.border}`, + 'border-radius:1px', + `background:${buttonTokens.bg}`, + 'display:inline-flex', + 'align-items:center', + 'justify-content:center', + 'box-sizing:border-box', + 'cursor:pointer', + 'padding:0', + ].join(';'); + + const btnBefore = showButtons + ? `` + : ''; + const btnAfter = showButtons + ? `` + : ''; + + // Root container + const rootStyle = [ + 'display:inline-flex', + `flex-direction:${isHorizontal ? 'row' : 'column'}`, + `gap:${metrics.gap}px`, + 'align-items:center', + 'justify-content:flex-start', + 'user-select:none', + ].join(';'); + + return `
${btnBefore}${trackHtml}${btnAfter}
`; +} diff --git a/storybook/source/components/Slider.js b/storybook/source/components/Slider.js new file mode 100644 index 0000000000..106978025e --- /dev/null +++ b/storybook/source/components/Slider.js @@ -0,0 +1,80 @@ +import { sliderTokens } from '../data/slider.ts'; +import { resolveTheme } from './theme-utils.js'; + +/** + * Slider — HTML-rendering version + * + * @param {object} opts + * @param {number} [opts.value] + * @param {number} [opts.min] + * @param {number} [opts.max] + * @param {string} [opts.label] + * @param {boolean} [opts.showValue] + * @param {boolean} [opts.disabled] + * @param {string} [opts.theme] + * @param {number} [opts.width] + */ +export function Slider({ + value = 40, + min = 0, + max = 100, + label = '', + showValue = false, + disabled = false, + theme = 'Light', + width = 220, +} = {}) { + const resolved = resolveTheme(theme); + const t = sliderTokens[resolved] ?? sliderTokens['Light']; + + const clampedValue = Math.max(min, Math.min(max, value)); + const pct = max === min ? 0 : Math.round(((clampedValue - min) / (max - min)) * 100); + + const disabledOpacity = disabled ? 0.5 : 1; + + const trackStyle = [ + `width:${width}px`, + `height:4px`, + `border-radius:2px`, + `background:linear-gradient(to right, ${t.onTrack} ${pct}%, ${t.offTrack} ${pct}%)`, + `position:relative`, + `display:flex`, + `align-items:center`, + ].join(';'); + + const thumbShadow = t.thumb.shadow ? `;box-shadow:${t.thumb.shadow}` : ''; + + const thumbStyle = [ + `width:${t.thumb.size}px`, + `height:${t.thumb.size}px`, + `border-radius:50%`, + `background:${t.thumb.fill}`, + `border:${t.thumb.strokeWidth}px solid ${t.thumb.stroke}`, + `position:absolute`, + `left:calc(${pct}% - ${t.thumb.size / 2}px)`, + `cursor:${disabled ? 'not-allowed' : 'pointer'}`, + `box-sizing:border-box`, + ].join(';') + thumbShadow; + + const labelHtml = label + ? `
${label}
` + : ''; + + const valueHtml = showValue + ? `${clampedValue}` + : ''; + + const trackAndThumb = `
+
+
+
+
`; + + return `
+ ${labelHtml} +
+ ${trackAndThumb} + ${valueHtml} +
+
`; +} diff --git a/storybook/source/components/SplitButton.js b/storybook/source/components/SplitButton.js new file mode 100644 index 0000000000..a30c134e11 --- /dev/null +++ b/storybook/source/components/SplitButton.js @@ -0,0 +1,87 @@ +import { getTokens } from './theme-utils.js'; + +const CHEVRON_SVG = (color) => ``; +const ICON_SVG = (color) => ``; + +const PRESSED_BG = { + 'Light': '#CBCBCB', 'Light Classic': '#7D858C', 'Dark': '#666666', + 'Dark Contrast': '#666666', 'Modern Light': '#DCE7FA', 'Modern Dark': '#375478', +}; + +export function SplitButton({ + label = 'Button', + state = 'default', + type = 'dropDown', + theme, + isOpen = false, + items = [ + { id: '1', label: 'Option 1' }, { id: '2', label: 'Option 2' }, + { id: '3', label: 'Option 3' }, { id: '4', label: 'Disabled option', disabled: true } + ], +} = {}) { + const tokens = getTokens(theme); + const resolved = tokens.theme; + const isModern = tokens.isModern; + const radius = isModern ? 4 : 1; + const isDisabled = state === 'disabled'; + const isHover = state === 'hover'; + const isPressed = state === 'pressed'; + + const defaultBg = tokens.bg; + const hoverBg = tokens.surfaceAlt; + const pressedBg = PRESSED_BG[resolved] ?? tokens.surfaceAlt; + + const pressedText = (resolved === 'Light Classic' || resolved === 'Modern Dark') ? '#FFFFFF' : tokens.fg; + const iconDefaultColor = (type === 'iconLeft' && resolved === 'Modern Dark') ? '#F3F3F3' : tokens.fg; + + const fontSize = isModern ? 12 : 11; + const commonStyle = [ + `height:24px`, `border:none`, `outline:none`, + `font-family:Arial,Helvetica,sans-serif`, `font-size:${fontSize}px`, + `line-height:16px`, `letter-spacing:${isModern ? 0.24 : 0.22}px`, + `cursor:${isDisabled ? 'not-allowed' : 'pointer'}`, `box-sizing:border-box`, + `white-space:nowrap`, `display:inline-flex`, `align-items:center`, `justify-content:center`, + ].join(';'); + + const opacity = isDisabled ? 'opacity:0.6;' : ''; + + if (type === 'dropDown') { + // Label button always stays at defaultBg; only the chevron changes state + const iconBg = isOpen ? pressedBg : isHover ? hoverBg : defaultBg; + const iconColor = (isOpen || isPressed) ? pressedText : tokens.fg; + const dropdownHtml = isOpen ? ` +
+ ${items.map(item => ``).join('')} +
` : ''; + + return `
+
+ + +
+ ${dropdownHtml} +
`; + } + + if (type === 'iconLeft') { + const bg = isPressed ? pressedBg : isHover ? hoverBg : defaultBg; + const color = isDisabled ? tokens.muted : isPressed ? pressedText : iconDefaultColor; + return `
+
+ +
+
`; + } + + // tabs type — single pill button, no separator or chevron + const bg = isPressed ? pressedBg : isHover ? hoverBg : defaultBg; + const color = isDisabled ? tokens.muted : isPressed ? pressedText : tokens.fg; + const tabsBorder = (isModern && isPressed) ? 'transparent' : tokens.border; + return `
+
+ +
+
`; +} diff --git a/storybook/source/components/Switch.js b/storybook/source/components/Switch.js new file mode 100644 index 0000000000..1b9fea6f87 --- /dev/null +++ b/storybook/source/components/Switch.js @@ -0,0 +1,25 @@ +import { switchTokens } from '../data/switches.ts'; +import { resolveTheme } from './theme-utils.js'; + +/** + * Switch — HTML-rendering version + * @param {object} props + * @param {boolean} [props.checked] + * @param {'default'|'hover'|'disabled'} [props.state] + * @param {string} [props.theme] + */ +export function Switch({ checked = false, state = 'default', theme = 'Light' } = {}) { + const resolvedTheme = resolveTheme(theme); + const isDisabled = state === 'disabled'; + const stateTokens = switchTokens[resolvedTheme]?.[state] ?? switchTokens['Light']?.['default']; + const token = checked ? stateTokens.on : stateTokens.off; + + const justifyContent = checked ? 'flex-end' : 'flex-start'; + const opacity = token.opacity ?? 1; + + return ``; +} diff --git a/storybook/source/components/Tabs.js b/storybook/source/components/Tabs.js new file mode 100644 index 0000000000..df60145289 --- /dev/null +++ b/storybook/source/components/Tabs.js @@ -0,0 +1,41 @@ +import { tabsByTheme } from '../data/tabs.ts'; +import { resolveTheme } from './theme-utils.js'; + +const COPY_SVG = (color) => ``; + +/** + * Tabs — HTML-rendering version + * @param {object} props + * @param {Array<{id:string, label:string}>} [props.items] + * @param {string} [props.activeId] + * @param {string} [props.hoveredId] + * @param {boolean} [props.withIcon] + * @param {string} [props.theme] + * @param {boolean} [props.scaled] + */ +export function Tabs({ items = [{ id: 'paragraph', label: 'Paragraph' }, { id: 'table', label: 'Table' }, { id: 'style', label: 'Style' }], activeId = 'paragraph', hoveredId, withIcon = false, theme, scaled = false } = {}) { + const resolved = resolveTheme(theme); + const tokens = tabsByTheme[resolved] ?? tabsByTheme['Light']; + const isModern = resolved.startsWith('Modern'); + + const tabs = items.map((item) => { + const isActive = item.id === activeId; + const isHovered = item.id === hoveredId; + const bg = isHovered ? tokens.hoverBg : isActive ? tokens.selectedBg : tokens.unselectedBg; + const borderBottom = isActive ? 'none' : `1px solid ${tokens.border}`; + const contentHeight = isModern && isActive ? 37 : 40; + + const indicator = (isModern && isActive) + ? `` + : ''; + + const iconHtml = withIcon ? COPY_SVG(tokens.text) : ''; + + return ``; + }).join(''); + + return `
${tabs}
`; +} diff --git a/storybook/source/components/TextArea.js b/storybook/source/components/TextArea.js new file mode 100644 index 0000000000..142f633523 --- /dev/null +++ b/storybook/source/components/TextArea.js @@ -0,0 +1,108 @@ +import { textAreaTokens } from '../data/text-area.ts'; +import { resolveTheme } from './theme-utils.js'; + +const SAMPLE_TEXT = `The 10 most undervalued stocks from our Best Companies to Own list as of Feb. 28, 2023, were: +Comcast CMCSA — a leading global media and technology company with businesses in cable, entertainment, and theme parks. +Taiwan Semiconductor Manufacturing TSM — the world's largest dedicated semiconductor foundry serving major chip designers. +Roche Holding RHHBY — a global pioneer in pharmaceuticals and diagnostics focused on oncology and rare diseases. +Walt Disney DIS — a diversified entertainment company spanning film, television, streaming, and theme park experiences. +Equifax EFX — one of the three major credit reporting agencies providing data analytics and risk solutions worldwide. +TransUnion TRU — a global information and insights company helping businesses manage risk and consumers manage credit. +International Flavors & Fragrances IFF — a leading creator of flavors, fragrances, and specialty ingredients. +Zimmer Biomet ZBH — a global medical device company specializing in musculoskeletal healthcare and reconstructive products. +Kenvue KVUE — a consumer health company spun off from Johnson & Johnson managing iconic personal care brands. +Anheuser-Busch InBev BUD — the world's largest brewer with a portfolio of over 500 beer brands sold globally. +Booking Holdings BKNG — the world's leading provider of online travel and related services across 220+ countries. +Stellantis STLA — a multinational automotive manufacturer formed from the merger of PSA Group and Fiat Chrysler. +Medtronic MDT — a global leader in medical devices, therapies, and services for chronic disease management.`; + +const COPY_SVG = (color) => ``; + +/** + * TextArea — HTML-rendering version + * + * @param {object} opts + * @param {string} [opts.label] + * @param {string} [opts.caption] + * @param {string} [opts.value] + * @param {'default'|'disabled'|'scroll'|'no-scroll'} [opts.state] + * @param {number} [opts.width] + * @param {number} [opts.height] + * @param {boolean} [opts.showLabel] + * @param {boolean} [opts.showCaption] + * @param {boolean} [opts.showCopyButton] + * @param {string} [opts.theme] + */ +export function TextArea({ + label = 'Title', + caption = 'Caption', + value = SAMPLE_TEXT, + state = 'default', + width = 236, + height = 188, + showLabel = true, + showCaption = true, + showCopyButton = true, + theme = 'Light', +} = {}) { + const resolved = resolveTheme(theme); + const t = textAreaTokens[resolved] ?? textAreaTokens['Light']; + + const isDisabled = state === 'disabled'; + const forceScroll = state === 'scroll'; + const forceNoScroll = state === 'no-scroll'; + + const copyButtonSize = t.copyIconStyle === 'modern' ? 24 : 20; + + const headerHtml = (showLabel || showCopyButton) + ? `
+ ${showLabel ? `` : ''} + ${showCopyButton ? `` : ''} +
` + : ''; + + const overflow = isDisabled || forceNoScroll ? 'hidden' : forceScroll ? 'scroll' : 'auto'; + const whiteSpace = forceScroll ? 'pre' : 'pre-wrap'; + const paddingRight = forceNoScroll || isDisabled ? '0' : '3px'; + const paddingBottom = forceNoScroll || isDisabled ? '0' : '4px'; + + const textareaStyle = [ + `width:100%`, + `height:100%`, + `border:none`, + `outline:none`, + `resize:none`, + `background:transparent`, + `color:${isDisabled ? t.disabledTextColor : t.textColor}`, + `font-family:Arial,Helvetica,sans-serif`, + `font-size:${t.textTypography.fontSize}px`, + `line-height:${t.textTypography.lineHeight}px`, + `letter-spacing:${t.textTypography.letterSpacing}px`, + `padding-top:0`, + `padding-left:0`, + `padding-right:${paddingRight}`, + `padding-bottom:${paddingBottom}`, + `margin:0`, + `overflow:${overflow}`, + `white-space:${whiteSpace}`, + `word-break:break-word`, + `box-sizing:border-box`, + `scrollbar-color:${t.scrollThumb} ${t.scrollTrack}`, + `scrollbar-width:thin`, + isDisabled ? `pointer-events:none` : '', + ].filter(Boolean).join(';'); + + const captionHtml = showCaption + ? `${caption}` + : ''; + + const gap = showCaption ? 2 : 4; + + return `
+ ${headerHtml} +
+ +
+ ${captionHtml} +
`; +} diff --git a/storybook/source/components/TextField.js b/storybook/source/components/TextField.js new file mode 100644 index 0000000000..52ab1db8c2 --- /dev/null +++ b/storybook/source/components/TextField.js @@ -0,0 +1,107 @@ +import { textFieldTokens } from '../data/text-field.ts'; +import { resolveTheme } from './theme-utils.js'; + +/** + * TextField — HTML-rendering version + * + * @param {object} opts + * @param {string} [opts.placeholder] + * @param {string} [opts.value] + * @param {string} [opts.label] + * @param {string} [opts.caption] + * @param {string} [opts.errorText] + * @param {'default'|'hover'|'focused'|'typing'|'filled'|'error'|'disabled'} [opts.state] + * @param {'default'|'hidden'} [opts.placeholderState] + * @param {boolean} [opts.withIconRight] + * @param {string} [opts.theme] + * @param {number} [opts.width] + */ +export function TextField({ + placeholder = 'Enter text', + value = '', + label = '', + caption = '', + errorText = 'Error text', + state = 'default', + placeholderState = 'default', + withIconRight = false, + theme = 'Light', + width = 165, +} = {}) { + const resolved = resolveTheme(theme); + const t = textFieldTokens[resolved] ?? textFieldTokens['Light']; + + const isDisabled = state === 'disabled'; + const isError = state === 'error'; + const isHover = state === 'hover'; + const isFocused = state === 'focused' || state === 'typing'; + + const borderColor = isError + ? t.errorBorder + : (isHover || isFocused) + ? (t.hoverBorder ?? t.focusBorder) + : t.border; + + const showPlaceholder = placeholderState !== 'hidden'; + + // For focused state we show a visual focus ring via box-shadow + const boxShadow = isFocused + ? `0 0 0 2px ${(t.focusBorder ?? t.hoverBorder)}33` + : 'none'; + + const inputStyle = [ + `flex:1`, + `min-width:0`, + `border:none`, + `outline:none`, + `background:transparent`, + `color:${isDisabled ? t.disabledTextColor : t.valueColor}`, + `font-size:${t.typography.fontSize}px`, + `font-family:Arial,Helvetica,sans-serif`, + `line-height:${t.typography.lineHeight}px`, + `letter-spacing:${t.typography.letterSpacing}px`, + `padding:0`, + `height:20px`, + ].join(';'); + + const wrapStyle = [ + `height:24px`, + `display:flex`, + `align-items:center`, + `gap:8px`, + `padding:0 8px`, + `border-radius:${t.radius}px`, + `border:1px solid ${borderColor}`, + `background:${isDisabled ? t.disabledBackground : t.background}`, + `opacity:${isDisabled ? t.disabledOpacity : 1}`, + `box-sizing:border-box`, + ].join(';'); + + const labelHtml = label + ? `` + : ''; + + // Caption: show errorText when in error state, otherwise show caption + const captionText = isError ? errorText : caption; + const captionHtml = captionText + ? `
${captionText}
` + : ''; + + // Optional trailing icon — chevron icon SVG inline + const iconHtml = withIconRight + ? `
+ + + +
` + : ''; + + return `
+ ${labelHtml} +
+ + ${iconHtml} +
+ ${captionHtml} +
`; +} diff --git a/storybook/source/components/Tooltip.js b/storybook/source/components/Tooltip.js new file mode 100644 index 0000000000..efff9bba28 --- /dev/null +++ b/storybook/source/components/Tooltip.js @@ -0,0 +1,18 @@ +import { getTokens } from './theme-utils.js'; + +/** + * Tooltip — HTML-rendering version + */ +export function Tooltip({ text = 'Texts', theme } = {}) { + const tokens = getTokens(theme); + const isModern = tokens.isModern; + const isDark = tokens.isDark; + const fontSize = isModern ? 12 : 10; + const lineHeight = isModern ? '16px' : '12px'; + const letterSpacing = isModern ? 0.24 : 0.2; + const boxShadow = isDark + ? '0px 4px 10px rgba(0, 0, 0, 0.25)' + : '0px 4px 10px rgba(0, 0, 0, 0.10)'; + + return `
${text}
`; +} diff --git a/storybook/source/components/shared/pluginTheme.ts b/storybook/source/components/shared/pluginTheme.ts new file mode 100644 index 0000000000..f1bbb4aa5d --- /dev/null +++ b/storybook/source/components/shared/pluginTheme.ts @@ -0,0 +1,43 @@ +import { themeTokens } from "../../data/theme-tokens.ts"; + +export type PluginTheme = keyof typeof themeTokens; + +const THEME_ALIASES: Record = { + light: "Light", + lightclassic: "Light Classic", + modernlight: "Modern Light", + moderndark: "Modern Dark", + dark: "Dark", + darkcontrast: "Dark Contrast", +}; + +export const resolveComponentTheme = (theme?: string): PluginTheme => { + if (!theme) return "Light"; + const compact = theme.replace(/[\s_-]+/g, "").toLowerCase(); + return THEME_ALIASES[compact] ?? "Light"; +}; + +export const pressedBgByTheme: Record = { + Light: "#CBCBCB", + "Light Classic": "#7D858C", + Dark: "#666666", + "Dark Contrast": "#666666", + "Modern Light": "#DCE7FA", + "Modern Dark": "#375478", +}; + +export const getComponentSurface = (theme?: string) => { + const resolved = resolveComponentTheme(theme); + const tokens = themeTokens[resolved]; + + return { + theme: resolved, + bg: tokens.pageBg, + surface: tokens.pageSurface, + surfaceAlt: tokens.pageSurfaceAlt, + border: tokens.pageBorder, + fg: tokens.pageFg, + muted: tokens.pageMuted ?? tokens.pageFg, + accent: resolved === "Dark" || resolved === "Dark Contrast" || resolved === "Modern Dark" ? "#4D9DFF" : "#0B6DFF", + }; +}; diff --git a/storybook/source/components/theme-utils.js b/storybook/source/components/theme-utils.js new file mode 100644 index 0000000000..b0e1849ff1 --- /dev/null +++ b/storybook/source/components/theme-utils.js @@ -0,0 +1,111 @@ +/** + * Theme utilities for HTML-based components + * Mirrors the functionality of editors-storybook/src/components/shared/pluginTheme.ts + */ + +export const themeTokens = { + 'Light': { + pageBg: '#FFFFFF', pageSurface: '#F7F7F7', pageSurfaceAlt: '#F9F9F9', + pageBorder: '#DFDFDF', pageFg: 'rgba(0, 0, 0, 0.80)', pageMuted: 'rgba(0, 0, 0, 0.60)', + }, + 'Light Classic': { + pageBg: '#FFFFFF', pageSurface: '#F1F1F1', pageSurfaceAlt: '#D8DADC', + pageBorder: '#CBCBCB', pageFg: '#444444', pageMuted: '#A5A5A5', + }, + 'Modern Light': { + pageBg: '#FFFFFF', pageSurface: '#F3F3F3', pageSurfaceAlt: '#F9F9F9', + pageBorder: '#E1E1E1', pageFg: '#383838', pageMuted: undefined, + }, + 'Modern Dark': { + pageBg: '#404040', pageSurface: '#404040', pageSurfaceAlt: '#585858', + pageBorder: '#686868', pageFg: '#E8E8E8', pageMuted: 'rgba(232, 232, 232, 0.70)', + }, + 'Dark': { + pageBg: '#333333', pageSurface: '#333333', pageSurfaceAlt: '#555555', + pageBorder: '#666666', pageFg: 'rgba(255, 255, 255, 0.80)', pageMuted: 'rgba(255, 255, 255, 0.60)', + }, + 'Dark Contrast': { + pageBg: '#1E1E1E', pageSurface: '#1E1E1E', pageSurfaceAlt: '#424242', + pageBorder: '#696969', pageFg: '#E8E8E8', pageMuted: '#B8B8B8', + }, +}; + +const THEME_ALIASES = { + light: 'Light', lightclassic: 'Light Classic', modernlight: 'Modern Light', + moderndark: 'Modern Dark', dark: 'Dark', darkcontrast: 'Dark Contrast', +}; + +export function resolveTheme(theme) { + if (!theme) return 'Light'; + const cleaned = decodeURIComponent(String(theme)).replace(/^!/, '').trim(); + const compact = cleaned.replace(/[\s_-]+/g, '').toLowerCase(); + return THEME_ALIASES[compact] ?? 'Light'; +} + +export function getTokens(theme) { + const resolved = resolveTheme(theme); + const tokens = themeTokens[resolved]; + return { + theme: resolved, + bg: tokens.pageBg, + surface: tokens.pageSurface, + surfaceAlt: tokens.pageSurfaceAlt, + border: tokens.pageBorder, + fg: tokens.pageFg, + muted: tokens.pageMuted ?? tokens.pageFg, + accent: (resolved === 'Dark' || resolved === 'Dark Contrast' || resolved === 'Modern Dark') ? '#4D9DFF' : '#0B6DFF', + isDark: resolved === 'Dark' || resolved === 'Dark Contrast' || resolved === 'Modern Dark', + isModern: resolved.startsWith('Modern'), + }; +} + +/** Convert a camelCase style key to kebab-case CSS property */ +export function styleStr(obj) { + return Object.entries(obj) + .filter(([, v]) => v != null && v !== '') + .map(([k, v]) => `${k.replace(/([A-Z])/g, '-$1').toLowerCase()}:${v}`) + .join(';'); +} + +export const pluginThemeOptions = ['Light', 'Light Classic', 'Dark', 'Dark Contrast', 'Modern Light', 'Modern Dark']; + +// Story theme utilities + +/** Resolve story-level theme: if argsTheme is 'Auto' or undefined, use globalTheme */ +export function resolveStoryTheme(argsTheme, globalTheme) { + if (argsTheme && argsTheme !== 'Auto') return resolveTheme(argsTheme); + return resolveTheme(globalTheme); +} + +/** + * Create an interactive DOM wrapper that re-renders HTML string on hover/press. + * @param {function(state: string): string} renderFn - returns HTML string for given state ('default'|'hover'|'pressed') + * @param {object} [opts] + * @param {boolean} [opts.disabled] - skip event listeners + * @param {string} [opts.forcedState] - if set, render this state statically (no listeners) + * @returns {HTMLElement} + */ +export function makeInteractive(renderFn, { disabled = false, forcedState } = {}) { + const el = document.createElement('div'); + el.style.display = 'contents'; + + if (forcedState !== undefined || disabled) { + el.innerHTML = renderFn(forcedState ?? 'default'); + return el; + } + + let hovered = false; + let pressed = false; + + const update = () => { + el.innerHTML = renderFn(pressed ? 'pressed' : hovered ? 'hover' : 'default'); + }; + + el.addEventListener('mouseenter', () => { hovered = true; update(); }); + el.addEventListener('mouseleave', () => { hovered = false; pressed = false; update(); }); + el.addEventListener('mousedown', () => { pressed = true; update(); }); + el.addEventListener('mouseup', () => { pressed = false; update(); }); + + update(); + return el; +} diff --git a/storybook/source/data/cards.ts b/storybook/source/data/cards.ts new file mode 100644 index 0000000000..67b8fa8993 --- /dev/null +++ b/storybook/source/data/cards.ts @@ -0,0 +1,171 @@ +export const cardThemeOptions = [ + "Light", + "Light Classic", + "Modern Light", + "Modern Dark", + "Dark", + "Dark Contrast", +] as const; + +export type CardTheme = (typeof cardThemeOptions)[number]; +export type CardType = "close" | "openWithButton" | "openWithText"; +export type CardState = "default" | "hover"; + +type CardThemeTokens = { + background: string; + border: string; + radius: number; + closeHoverBackground: string; + textColor: string; + subTextColor: string; + iconColor: string; + chipBackground: string; + chipBorder: string; + chipTextColor: string; + actionHeight: number; + actionPrimaryBackground: string; + actionPrimaryHoverBackground: string; + actionPrimaryTextColor: string; + actionSecondaryBackground: string; + actionSecondaryHoverBackground: string; + actionSecondaryBorder: string; + actionSecondaryTextColor: string; +}; + +export const cardsByTheme: Record = { + Light: { + background: "#FFFFFF", + border: "#C0C0C0", + radius: 2, + closeHoverBackground: "#E0E0E0", + textColor: "rgba(0, 0, 0, 0.80)", + subTextColor: "rgba(0, 0, 0, 0.40)", + iconColor: "rgba(0, 0, 0, 0.80)", + chipBackground: "#FFFFFF", + chipBorder: "#C0C0C0", + chipTextColor: "rgba(0, 0, 0, 0.80)", + actionHeight: 22, + actionPrimaryBackground: "#444444", + actionPrimaryHoverBackground: "#1C1C1C", + actionPrimaryTextColor: "#FFFFFF", + actionSecondaryBackground: "#FFFFFF", + actionSecondaryHoverBackground: "#E0E0E0", + actionSecondaryBorder: "#C0C0C0", + actionSecondaryTextColor: "rgba(0, 0, 0, 0.80)", + }, + "Light Classic": { + background: "#FFFFFF", + border: "#CFCFCF", + radius: 2, + closeHoverBackground: "#D8DADC", + textColor: "#444444", + subTextColor: "#A5A5A5", + iconColor: "#444444", + chipBackground: "#FFFFFF", + chipBorder: "#CFCFCF", + chipTextColor: "#444444", + actionHeight: 22, + actionPrimaryBackground: "#7D858C", + actionPrimaryHoverBackground: "#666D73", + actionPrimaryTextColor: "#FFFFFF", + actionSecondaryBackground: "#FFFFFF", + actionSecondaryHoverBackground: "#FFFFFF", + actionSecondaryBorder: "#CFCFCF", + actionSecondaryTextColor: "#444444", + }, + "Modern Light": { + background: "#FFFFFF", + border: "#E1E1E1", + radius: 4, + closeHoverBackground: "#F9F9F9", + textColor: "#383838", + subTextColor: "rgba(0, 0, 0, 0.60)", + iconColor: "#383838", + chipBackground: "#FFFFFF", + chipBorder: "#E1E1E1", + chipTextColor: "#383838", + actionHeight: 24, + actionPrimaryBackground: "#4473CA", + actionPrimaryHoverBackground: "#2A5BB9", + actionPrimaryTextColor: "#FFFFFF", + actionSecondaryBackground: "#FFFFFF", + actionSecondaryHoverBackground: "#F9F9F9", + actionSecondaryBorder: "#E1E1E1", + actionSecondaryTextColor: "#383838", + }, + "Modern Dark": { + background: "#404040", + border: "#686868", + radius: 4, + closeHoverBackground: "#585858", + textColor: "#F3F3F3", + subTextColor: "#969696", + iconColor: "#F3F3F3", + chipBackground: "#404040", + chipBorder: "#686868", + chipTextColor: "#F3F3F3", + actionHeight: 24, + actionPrimaryBackground: "#4A7BE0", + actionPrimaryHoverBackground: "#366CDA", + actionPrimaryTextColor: "#FFFFFF", + actionSecondaryBackground: "#404040", + actionSecondaryHoverBackground: "#585858", + actionSecondaryBorder: "#686868", + actionSecondaryTextColor: "#F3F3F3", + }, + Dark: { + background: "#333333", + border: "#666666", + radius: 2, + closeHoverBackground: "#555555", + textColor: "rgba(255, 255, 255, 0.80)", + subTextColor: "rgba(255, 255, 255, 0.40)", + iconColor: "rgba(255, 255, 255, 0.80)", + chipBackground: "#333333", + chipBorder: "#666666", + chipTextColor: "rgba(255, 255, 255, 0.80)", + actionHeight: 22, + actionPrimaryBackground: "#DDDDDD", + actionPrimaryHoverBackground: "#FCFCFC", + actionPrimaryTextColor: "#333333", + actionSecondaryBackground: "#333333", + actionSecondaryHoverBackground: "#555555", + actionSecondaryBorder: "#666666", + actionSecondaryTextColor: "rgba(255, 255, 255, 0.80)", + }, + "Dark Contrast": { + background: "#1E1E1E", + border: "#696969", + radius: 2, + closeHoverBackground: "#424242", + textColor: "#E8E8E8", + subTextColor: "#B8B8B8", + iconColor: "#E8E8E8", + chipBackground: "#1E1E1E", + chipBorder: "#696969", + chipTextColor: "#E8E8E8", + actionHeight: 22, + actionPrimaryBackground: "#E6E6E6", + actionPrimaryHoverBackground: "#A6A6A6", + actionPrimaryTextColor: "#121212", + actionSecondaryBackground: "#1E1E1E", + actionSecondaryHoverBackground: "#424242", + actionSecondaryBorder: "#696969", + actionSecondaryTextColor: "#E8E8E8", + }, +}; + +const THEME_ALIASES: Record = { + light: "Light", + lightclassic: "Light Classic", + modernlight: "Modern Light", + moderndark: "Modern Dark", + dark: "Dark", + darkcontrast: "Dark Contrast", +}; + +export const resolveCardTheme = (theme?: string): CardTheme => { + if (!theme) return "Light"; + const compact = theme.replace(/[\s_-]+/g, "").toLowerCase(); + return THEME_ALIASES[compact] ?? "Light"; +}; diff --git a/storybook/source/data/checkbox.ts b/storybook/source/data/checkbox.ts new file mode 100644 index 0000000000..646f39ee3a --- /dev/null +++ b/storybook/source/data/checkbox.ts @@ -0,0 +1,462 @@ +export const checkboxThemeOptions = [ + "Light", + "Light Classic", + "Modern Light", + "Modern Dark", + "Dark", + "Dark Contrast", +] as const; + +export const checkboxStates = ["default", "hover", "disabled"] as const; +export const checkboxSelections = ["no", "yes", "partial"] as const; + +export type CheckboxTheme = (typeof checkboxThemeOptions)[number]; +export type CheckboxState = (typeof checkboxStates)[number]; +export type CheckboxSelection = (typeof checkboxSelections)[number]; + +type CheckboxToken = { + boxFill: string; + boxStroke: string; + boxRadius: number; + markColor?: string; + markOpacity?: number; + textColor: string; +}; + +export const checkboxTokens: Record>> = { + "Light": { + default: { + no: { + boxFill: "white", + boxStroke: "#C0C0C0", + boxRadius: 1.5, + textColor: "rgba(0, 0, 0, 0.80)", + }, + yes: { + boxFill: "white", + boxStroke: "#C0C0C0", + boxRadius: 1.5, + markColor: "black", + markOpacity: 0.8, + textColor: "rgba(0, 0, 0, 0.80)", + }, + partial: { + boxFill: "white", + boxStroke: "#C0C0C0", + boxRadius: 1.5, + markColor: "black", + markOpacity: 0.8, + textColor: "rgba(0, 0, 0, 0.80)", + }, + }, + hover: { + no: { + boxFill: "white", + boxStroke: "#848484", + boxRadius: 1.5, + textColor: "rgba(0, 0, 0, 0.80)", + }, + yes: { + boxFill: "white", + boxStroke: "#848484", + boxRadius: 1.5, + markColor: "black", + markOpacity: 0.8, + textColor: "rgba(0, 0, 0, 0.80)", + }, + partial: { + boxFill: "white", + boxStroke: "#848484", + boxRadius: 1.5, + markColor: "black", + markOpacity: 0.8, + textColor: "rgba(0, 0, 0, 0.80)", + }, + }, + disabled: { + no: { + boxFill: "#F7F7F7", + boxStroke: "#E0E0E0", + boxRadius: 2.5, + textColor: "rgba(0, 0, 0, 0.40)", + }, + yes: { + boxFill: "#F7F7F7", + boxStroke: "#E0E0E0", + boxRadius: 2.5, + markColor: "black", + markOpacity: 0.5, + textColor: "rgba(0, 0, 0, 0.40)", + }, + partial: { + boxFill: "#F7F7F7", + boxStroke: "#E0E0E0", + boxRadius: 2.5, + markColor: "black", + markOpacity: 0.5, + textColor: "rgba(0, 0, 0, 0.40)", + }, + }, + }, + "Light Classic": { + default: { + no: { + boxFill: "white", + boxStroke: "#CFCFCF", + boxRadius: 1.5, + textColor: "#444444", + }, + yes: { + boxFill: "white", + boxStroke: "#CFCFCF", + boxRadius: 1.5, + markColor: "#444444", + textColor: "#444444", + }, + partial: { + boxFill: "white", + boxStroke: "#CFCFCF", + boxRadius: 1.5, + markColor: "#444444", + textColor: "#444444", + }, + }, + hover: { + no: { + boxFill: "white", + boxStroke: "#848484", + boxRadius: 1.5, + textColor: "#444444", + }, + yes: { + boxFill: "white", + boxStroke: "#848484", + boxRadius: 1.5, + markColor: "#444444", + textColor: "#444444", + }, + partial: { + boxFill: "white", + boxStroke: "#848484", + boxRadius: 1.5, + markColor: "#444444", + textColor: "#444444", + }, + }, + disabled: { + no: { + boxFill: "#F1F1F1", + boxStroke: "#D8DADC", + boxRadius: 2.5, + textColor: "#A5A5A5", + }, + yes: { + boxFill: "#F1F1F1", + boxStroke: "#D8DADC", + boxRadius: 2.5, + markColor: "#A5A5A5", + textColor: "#A5A5A5", + }, + partial: { + boxFill: "#F1F1F1", + boxStroke: "#D8DADC", + boxRadius: 2.5, + markColor: "#A5A5A5", + textColor: "#A5A5A5", + }, + }, + }, + "Modern Light": { + default: { + no: { + boxFill: "white", + boxStroke: "#7F7F7F", + boxRadius: 1.5, + textColor: "#383838", + }, + yes: { + boxFill: "white", + boxStroke: "#7F7F7F", + boxRadius: 1.5, + markColor: "#383838", + textColor: "#383838", + }, + partial: { + boxFill: "white", + boxStroke: "#7F7F7F", + boxRadius: 1.5, + markColor: "#383838", + textColor: "#383838", + }, + }, + hover: { + no: { + boxFill: "#F3F3F3", + boxStroke: "#969696", + boxRadius: 1.5, + textColor: "#383838", + }, + yes: { + boxFill: "#F3F3F3", + boxStroke: "#969696", + boxRadius: 1.5, + markColor: "#383838", + textColor: "#383838", + }, + partial: { + boxFill: "#F3F3F3", + boxStroke: "#969696", + boxRadius: 1.5, + markColor: "#383838", + textColor: "#383838", + }, + }, + disabled: { + no: { + boxFill: "#F9F9F9", + boxStroke: "#969696", + boxRadius: 1.5, + textColor: "#383838", + }, + yes: { + boxFill: "#F9F9F9", + boxStroke: "#969696", + boxRadius: 1.5, + markColor: "white", + textColor: "#383838", + }, + partial: { + boxFill: "#F9F9F9", + boxStroke: "#969696", + boxRadius: 1.5, + markColor: "white", + textColor: "#383838", + }, + }, + }, + "Modern Dark": { + default: { + no: { + boxFill: "#404040", + boxStroke: "#969696", + boxRadius: 1.5, + textColor: "#F3F3F3", + }, + yes: { + boxFill: "#404040", + boxStroke: "#969696", + boxRadius: 1.5, + markColor: "#EAEAEA", + textColor: "#F3F3F3", + }, + partial: { + boxFill: "#404040", + boxStroke: "#969696", + boxRadius: 1.5, + markColor: "#EAEAEA", + textColor: "#F3F3F3", + }, + }, + hover: { + no: { + boxFill: "#585858", + boxStroke: "#969696", + boxRadius: 1.5, + textColor: "#F3F3F3", + }, + yes: { + boxFill: "#585858", + boxStroke: "#969696", + boxRadius: 1.5, + markColor: "#EAEAEA", + textColor: "#F3F3F3", + }, + partial: { + boxFill: "#585858", + boxStroke: "#969696", + boxRadius: 1.5, + markColor: "#EAEAEA", + textColor: "#F3F3F3", + }, + }, + disabled: { + no: { + boxFill: "#404040", + boxStroke: "#969696", + boxRadius: 1.5, + textColor: "#F3F3F3", + }, + yes: { + boxFill: "#404040", + boxStroke: "#969696", + boxRadius: 1.5, + markColor: "#EAEAEA", + textColor: "#F3F3F3", + }, + partial: { + boxFill: "#404040", + boxStroke: "#969696", + boxRadius: 1.5, + markColor: "#EAEAEA", + textColor: "#F3F3F3", + }, + }, + }, + "Dark": { + default: { + no: { + boxFill: "#333333", + boxStroke: "#666666", + boxRadius: 1.5, + textColor: "rgba(255, 255, 255, 0.80)", + }, + yes: { + boxFill: "#333333", + boxStroke: "#666666", + boxRadius: 1.5, + markColor: "white", + markOpacity: 0.8, + textColor: "rgba(255, 255, 255, 0.80)", + }, + partial: { + boxFill: "#333333", + boxStroke: "#666666", + boxRadius: 1.5, + markColor: "white", + markOpacity: 0.8, + textColor: "rgba(255, 255, 255, 0.80)", + }, + }, + hover: { + no: { + boxFill: "#333333", + boxStroke: "#CCCCCC", + boxRadius: 1.5, + textColor: "rgba(255, 255, 255, 0.80)", + }, + yes: { + boxFill: "#333333", + boxStroke: "#CCCCCC", + boxRadius: 1.5, + markColor: "white", + markOpacity: 0.8, + textColor: "rgba(255, 255, 255, 0.80)", + }, + partial: { + boxFill: "#333333", + boxStroke: "#CCCCCC", + boxRadius: 1.5, + markColor: "white", + markOpacity: 0.8, + textColor: "rgba(255, 255, 255, 0.80)", + }, + }, + disabled: { + no: { + boxFill: "#404040", + boxStroke: "#555555", + boxRadius: 2.5, + textColor: "rgba(255, 255, 255, 0.40)", + }, + yes: { + boxFill: "#404040", + boxStroke: "#555555", + boxRadius: 2.5, + markColor: "white", + markOpacity: 0.5, + textColor: "rgba(255, 255, 255, 0.40)", + }, + partial: { + boxFill: "#404040", + boxStroke: "#555555", + boxRadius: 2.5, + markColor: "white", + markOpacity: 0.5, + textColor: "rgba(255, 255, 255, 0.40)", + }, + }, + }, + "Dark Contrast": { + default: { + no: { + boxFill: "#1E1E1E", + boxStroke: "#696969", + boxRadius: 1.5, + textColor: "#E8E8E8", + }, + yes: { + boxFill: "#1E1E1E", + boxStroke: "#696969", + boxRadius: 1.5, + markColor: "#E8E8E8", + textColor: "#E8E8E8", + }, + partial: { + boxFill: "#1E1E1E", + boxStroke: "#696969", + boxRadius: 1.5, + markColor: "#E8E8E8", + textColor: "#E8E8E8", + }, + }, + hover: { + no: { + boxFill: "#1E1E1E", + boxStroke: "#B8B8B8", + boxRadius: 1.5, + textColor: "#E8E8E8", + }, + yes: { + boxFill: "#1E1E1E", + boxStroke: "#B8B8B8", + boxRadius: 1.5, + markColor: "#E8E8E8", + textColor: "#E8E8E8", + }, + partial: { + boxFill: "#1E1E1E", + boxStroke: "#B8B8B8", + boxRadius: 1.5, + markColor: "#E8E8E8", + textColor: "#E8E8E8", + }, + }, + disabled: { + no: { + boxFill: "#2A2A2A", + boxStroke: "#424242", + boxRadius: 2.5, + textColor: "rgba(232, 232, 232, 0.45)", + }, + yes: { + boxFill: "#2A2A2A", + boxStroke: "#424242", + boxRadius: 2.5, + markColor: "#8A8A8A", + textColor: "rgba(232, 232, 232, 0.45)", + }, + partial: { + boxFill: "#2A2A2A", + boxStroke: "#424242", + boxRadius: 2.5, + markColor: "#8A8A8A", + textColor: "rgba(232, 232, 232, 0.45)", + }, + }, + }, +}; + +const THEME_ALIASES: Record = { + light: "Light", + lightclassic: "Light Classic", + modernlight: "Modern Light", + moderndark: "Modern Dark", + dark: "Dark", + darkcontrast: "Dark Contrast", +}; + +export const resolveCheckboxTheme = (theme?: string): CheckboxTheme => { + if (!theme) return "Light"; + const compact = theme.replace(/[\s_-]+/g, "").toLowerCase(); + return THEME_ALIASES[compact] ?? "Light"; +}; diff --git a/storybook/source/data/dialog-buttons.ts b/storybook/source/data/dialog-buttons.ts new file mode 100644 index 0000000000..c92162a130 --- /dev/null +++ b/storybook/source/data/dialog-buttons.ts @@ -0,0 +1,3258 @@ +const data = { + "Light": { + "Secondary": { + "24": { + "Hover": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#E0E0E0", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #C0C0C0 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "rgba(0, 0, 0, 0.80)", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#CBCBCB", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #C0C0C0 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "rgba(0, 0, 0, 0.80)", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "width": 118, + "height": 24, + "paddingLeft": 32, + "paddingRight": 32, + "paddingTop": 11, + "paddingBottom": 11, + "background": "#EFEFEF", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #C0C0C0 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": {} + }, + "Disabled": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#EFEFEF", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #C0C0C0 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "rgba(0, 0, 0, 0.40)", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Default": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "white", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #C0C0C0 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "rgba(0, 0, 0, 0.80)", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + } + }, + "22": { + "Hover": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#E0E0E0", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #C0C0C0 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "rgba(0, 0, 0, 0.80)", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#CBCBCB", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #C0C0C0 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "rgba(0, 0, 0, 0.80)", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "width": 118, + "height": 22, + "paddingLeft": 32, + "paddingRight": 32, + "paddingTop": 11, + "paddingBottom": 11, + "background": "#EFEFEF", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #C0C0C0 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": {} + }, + "Disabled": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#EFEFEF", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #C0C0C0 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "rgba(0, 0, 0, 0.40)", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Default": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "white", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #C0C0C0 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "rgba(0, 0, 0, 0.80)", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + } + } + }, + "Primary": { + "24": { + "Default": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#444444", + "overflow": "hidden", + "borderRadius": 1, + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "white", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Hover": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#1C1C1C", + "overflow": "hidden", + "borderRadius": 1, + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "white", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#1C1C1C", + "overflow": "hidden", + "borderRadius": 1, + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "white", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "height": 24, + "paddingLeft": 32, + "paddingRight": 32, + "paddingTop": 11, + "paddingBottom": 11, + "background": "rgba(0, 0, 0, 0.50)", + "overflow": "hidden", + "borderRadius": 1, + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": {} + }, + "Disabled": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "rgba(0, 0, 0, 0.50)", + "overflow": "hidden", + "borderRadius": 1, + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "opacity": 0.6, + "textAlign": "center", + "color": "white", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + } + }, + "22": { + "Default": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#444444", + "overflow": "hidden", + "borderRadius": 1, + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "white", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Hover": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#1C1C1C", + "overflow": "hidden", + "borderRadius": 1, + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "white", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#1C1C1C", + "overflow": "hidden", + "borderRadius": 1, + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "white", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "height": 22, + "paddingLeft": 32, + "paddingRight": 32, + "paddingTop": 11, + "paddingBottom": 11, + "background": "rgba(0, 0, 0, 0.50)", + "overflow": "hidden", + "borderRadius": 1, + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": {} + }, + "Disabled": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "rgba(0, 0, 0, 0.50)", + "overflow": "hidden", + "borderRadius": 1, + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "opacity": 0.6, + "textAlign": "center", + "color": "white", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + } + } + } + }, + "Light Classic": { + "Primary": { + "24": { + "Default": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#7D858C", + "overflow": "hidden", + "borderRadius": 1, + "justifyContent": "center", + "alignItems": "center", + "gap": 10, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "white", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Hover": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#666D73", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "white", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#666D73", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "white", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "height": 24, + "paddingLeft": 32, + "paddingRight": 32, + "paddingTop": 11, + "paddingBottom": 11, + "background": "#A5A5A5", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": {} + }, + "Disabled": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#A5A5A5", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "opacity": 0.6, + "textAlign": "center", + "color": "white", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + } + }, + "22": { + "Default": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#A5A5A5", + "overflow": "hidden", + "borderRadius": 1, + "justifyContent": "center", + "alignItems": "center", + "gap": 10, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "white", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Hover": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#666D73", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "white", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#666D73", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "white", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "height": 22, + "paddingLeft": 32, + "paddingRight": 32, + "paddingTop": 11, + "paddingBottom": 11, + "background": "#A5A5A5", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": {} + }, + "Disabled": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#A5A5A5", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "opacity": 0.6, + "textAlign": "center", + "color": "white", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + } + } + }, + "Secondary": { + "24": { + "Hover": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#D8DADC", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #CFCFCF solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "#444444", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#A5A5A5", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #CFCFCF solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "white", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "width": 118, + "height": 24, + "paddingLeft": 32, + "paddingRight": 32, + "paddingTop": 11, + "paddingBottom": 11, + "background": "#F1F1F1", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #CFCFCF solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": {} + }, + "Disabled": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#F1F1F1", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #CFCFCF solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "#A5A5A5", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Default": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "white", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #CFCFCF solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "#444444", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + } + }, + "22": { + "Hover": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#D8DADC", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #CFCFCF solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "#444444", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#A5A5A5", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #CFCFCF solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "white", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "width": 118, + "height": 22, + "paddingLeft": 32, + "paddingRight": 32, + "paddingTop": 11, + "paddingBottom": 11, + "background": "#F1F1F1", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #CFCFCF solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": {} + }, + "Disabled": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#F1F1F1", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #CFCFCF solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "#A5A5A5", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Default": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "white", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #CFCFCF solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "#444444", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + } + } + } + }, + "Dark": { + "Primary": { + "24": { + "Default": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#DDDDDD", + "overflow": "hidden", + "borderRadius": 1, + "justifyContent": "center", + "alignItems": "center", + "gap": 10, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#333333", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Hover": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#FCFCFC", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "#333333", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#FCFCFC", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "#333333", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "height": 24, + "paddingLeft": 32, + "paddingRight": 32, + "paddingTop": 11, + "paddingBottom": 11, + "background": "rgba(255, 255, 255, 0.50)", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": {} + }, + "Disabled": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "rgba(255, 255, 255, 0.50)", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "opacity": 0.6, + "textAlign": "center", + "color": "#333333", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + } + }, + "22": { + "Default": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#DDDDDD", + "overflow": "hidden", + "borderRadius": 1, + "justifyContent": "center", + "alignItems": "center", + "gap": 10, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#333333", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Hover": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#FCFCFC", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "#333333", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#FCFCFC", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "#333333", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "height": 22, + "paddingLeft": 32, + "paddingRight": 32, + "paddingTop": 11, + "paddingBottom": 11, + "background": "rgba(255, 255, 255, 0.50)", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": {} + }, + "Disabled": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "rgba(255, 255, 255, 0.50)", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "opacity": 0.6, + "textAlign": "center", + "color": "#333333", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + } + } + }, + "Secondary": { + "24": { + "Hover": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#555555", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #666666 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "rgba(255, 255, 255, 0.80)", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#606060", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #666666 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "rgba(255, 255, 255, 0.80)", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "width": 118, + "height": 24, + "paddingLeft": 32, + "paddingRight": 32, + "paddingTop": 11, + "paddingBottom": 11, + "background": "#505050", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #666666 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": {} + }, + "Disabled": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#505050", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #666666 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "rgba(255, 255, 255, 0.40)", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Default": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#333333", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #666666 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "rgba(255, 255, 255, 0.80)", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + } + }, + "22": { + "Hover": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#555555", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #666666 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "rgba(255, 255, 255, 0.80)", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#606060", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #666666 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "rgba(255, 255, 255, 0.80)", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "width": 118, + "height": 22, + "paddingLeft": 32, + "paddingRight": 32, + "paddingTop": 11, + "paddingBottom": 11, + "background": "#505050", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #666666 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": {} + }, + "Disabled": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#505050", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #666666 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "rgba(255, 255, 255, 0.40)", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Default": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#333333", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #666666 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "rgba(255, 255, 255, 0.80)", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + } + } + } + }, + "Dark Contrast": { + "Primary": { + "24": { + "Default": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#E6E6E6", + "overflow": "hidden", + "borderRadius": 1, + "justifyContent": "center", + "alignItems": "center", + "gap": 10, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#121212", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Hover": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#A6A6A6", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "#121212", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#A6A6A6", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "#121212", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "height": 24, + "paddingLeft": 32, + "paddingRight": 32, + "paddingTop": 11, + "paddingBottom": 11, + "background": "#888888", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": {} + }, + "Disabled": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#888888", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "opacity": 0.6, + "textAlign": "center", + "color": "#121212", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + } + }, + "22": { + "Default": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#E6E6E6", + "overflow": "hidden", + "borderRadius": 1, + "justifyContent": "center", + "alignItems": "center", + "gap": 10, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#121212", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Hover": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#A6A6A6", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "#121212", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#A6A6A6", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "#121212", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "height": 22, + "paddingLeft": 32, + "paddingRight": 32, + "paddingTop": 11, + "paddingBottom": 11, + "background": "#888888", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": {} + }, + "Disabled": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#888888", + "overflow": "hidden", + "borderRadius": 1, + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "opacity": 0.6, + "textAlign": "center", + "color": "#121212", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + } + } + }, + "Secondary": { + "24": { + "Hover": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#424242", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #696969 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "#E8E8E8", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#666666", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #696969 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "#E8E8E8", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "width": 118, + "height": 24, + "paddingLeft": 32, + "paddingRight": 32, + "paddingTop": 11, + "paddingBottom": 11, + "background": "#2A2A2A", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #696969 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": {} + }, + "Disabled": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#2A2A2A", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #696969 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "opacity": 0.4, + "textAlign": "center", + "color": "#E8E8E8", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Default": { + "container": { + "height": 24, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#1E1E1E", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #696969 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#E8E8E8", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + } + }, + "22": { + "Hover": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#424242", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #696969 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "#E8E8E8", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#666666", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #696969 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "#E8E8E8", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "width": 118, + "height": 22, + "paddingLeft": 32, + "paddingRight": 32, + "paddingTop": 11, + "paddingBottom": 11, + "background": "#2A2A2A", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #696969 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": {} + }, + "Disabled": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#2A2A2A", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #696969 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "opacity": 0.4, + "textAlign": "center", + "color": "#E8E8E8", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + }, + "Default": { + "container": { + "height": 22, + "paddingTop": 11, + "paddingBottom": 13, + "paddingLeft": 32, + "paddingRight": 32, + "background": "#1E1E1E", + "overflow": "hidden", + "borderRadius": 1, + "outline": "1px #696969 solid", + "outlineOffset": "-1px", + "flexDirection": "column", + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "color": "#E8E8E8", + "fontSize": 11, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.22, + "wordWrap": "break-word" + } + } + } + } + }, + "Modern Light": { + "Secondary": { + "24": { + "Default": { + "container": { + "height": 24, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "white", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #E1E1E1 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#383838", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Hover": { + "container": { + "height": 24, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#F9F9F9", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #E1E1E1 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#383838", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 24, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#EAEAEA", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #2A5BB9 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#383838", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Disabled": { + "container": { + "height": 24, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "white", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #E1E1E1 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "opacity": 0.4, + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#383838", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "height": 24, + "minWidth": 53, + "width": 118, + "paddingLeft": 12, + "paddingRight": 12, + "background": "white", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #E1E1E1 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": {} + } + }, + "22": { + "Default": { + "container": { + "height": 22, + "minWidth": 53, + "paddingLeft": 12, + "paddingRight": 12, + "background": "white", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #E1E1E1 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#383838", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Hover": { + "container": { + "height": 22, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#F9F9F9", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #E1E1E1 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#383838", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 22, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#EAEAEA", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #2A5BB9 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#383838", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Disabled": { + "container": { + "height": 22, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "white", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #E1E1E1 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "opacity": 0.4, + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#383838", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "height": 22, + "minWidth": 48, + "width": 118, + "paddingLeft": 12, + "paddingRight": 12, + "background": "white", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #E1E1E1 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": {} + } + } + }, + "Primary": { + "24": { + "Default": { + "container": { + "height": 24, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#4473CA", + "overflow": "hidden", + "borderRadius": 4, + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "white", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Hover": { + "container": { + "height": 24, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#2A5BB9", + "overflow": "hidden", + "borderRadius": 4, + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "white", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 24, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#1D4FAF", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #2A5BB9 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "white", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Disabled": { + "container": { + "height": 24, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#DCE7FA", + "overflow": "hidden", + "borderRadius": 4, + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "white", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "height": 24, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "white", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #E1E1E1 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": {} + } + }, + "22": { + "Default": { + "container": { + "height": 22, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#4473CA", + "overflow": "hidden", + "borderRadius": 4, + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "white", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Hover": { + "container": { + "height": 22, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#2A5BB9", + "overflow": "hidden", + "borderRadius": 4, + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "white", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 22, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#1D4FAF", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #2A5BB9 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "white", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Disabled": { + "container": { + "height": 22, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#DCE7FA", + "overflow": "hidden", + "borderRadius": 4, + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "white", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "height": 22, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "white", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #E1E1E1 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": {} + } + } + } + } + , + "Modern Dark": { + "Secondary": { + "24": { + "Default": { + "container": { + "height": 24, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#404040", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #686868 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#F3F3F3", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Hover": { + "container": { + "height": 24, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#585858", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #686868 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#F3F3F3", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 24, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#686868", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #4A7BE0 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#F3F3F3", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Disabled": { + "container": { + "height": 24, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#343434", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #404040 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "opacity": 0.4, + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#F3F3F3", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "height": 24, + "minWidth": 53, + "width": 118, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#404040", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #686868 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": {} + } + }, + "22": { + "Default": { + "container": { + "height": 22, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#404040", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #686868 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#F3F3F3", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Hover": { + "container": { + "height": 22, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#585858", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #686868 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#F3F3F3", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 22, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#686868", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #4A7BE0 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#F3F3F3", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Disabled": { + "container": { + "height": 22, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#343434", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #404040 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "opacity": 0.4, + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#F3F3F3", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "height": 22, + "minWidth": 48, + "width": 118, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#404040", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #686868 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": {} + } + } + }, + "Primary": { + "24": { + "Default": { + "container": { + "height": 24, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#4A7BE0", + "overflow": "hidden", + "borderRadius": 4, + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "white", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Hover": { + "container": { + "height": 24, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#366CDA", + "overflow": "hidden", + "borderRadius": 4, + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "white", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 24, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#2A5BB9", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #4A7BE0 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "white", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Disabled": { + "container": { + "height": 24, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#375478", + "overflow": "hidden", + "borderRadius": 4, + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "opacity": 0.4, + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#F3F3F3", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "height": 24, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#404040", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #686868 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": {} + } + }, + "22": { + "Default": { + "container": { + "height": 22, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#4A7BE0", + "overflow": "hidden", + "borderRadius": 4, + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "white", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Hover": { + "container": { + "height": 22, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#366CDA", + "overflow": "hidden", + "borderRadius": 4, + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "white", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Pressed": { + "container": { + "height": 22, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#2A5BB9", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #4A7BE0 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "white", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Disabled": { + "container": { + "height": 22, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#375478", + "overflow": "hidden", + "borderRadius": 4, + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": { + "opacity": 0.4, + "textAlign": "center", + "justifyContent": "center", + "display": "flex", + "flexDirection": "column", + "color": "#F3F3F3", + "fontSize": 12, + "fontFamily": "Arial", + "fontWeight": "700", + "lineHeight": 16, + "letterSpacing": 0.24, + "wordWrap": "break-word" + } + }, + "Loader": { + "container": { + "height": 22, + "minWidth": 48, + "paddingLeft": 12, + "paddingRight": 12, + "background": "#404040", + "overflow": "hidden", + "borderRadius": 4, + "outline": "1px #686868 solid", + "outlineOffset": "-1px", + "justifyContent": "center", + "alignItems": "center", + "display": "inline-flex" + }, + "text": {} + } + } + } + } +} as const; + +export default data; diff --git a/storybook/source/data/icon-buttons.ts b/storybook/source/data/icon-buttons.ts new file mode 100644 index 0000000000..7d17157413 --- /dev/null +++ b/storybook/source/data/icon-buttons.ts @@ -0,0 +1,1000 @@ +const iconButtons = { + 'Light': { + 'Outline': { + 'Default': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': 'white', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #C0C0C0 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(0, 0, 0, 0.8)', + 'direction': 'down' + }, + 'Hover': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#E0E0E0', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #C0C0C0 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(0, 0, 0, 0.8)', + 'direction': 'down' + }, + 'Pressed': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#CBCBCB', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #C0C0C0 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(0, 0, 0, 0.8)', + 'direction': 'down' + } + }, + 'Solid': { + 'Default': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': 'white', + 'overflow': 'hidden', + 'borderRadius': 1, + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(0, 0, 0, 0.8)', + 'direction': 'down' + }, + 'Hover': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#E0E0E0', + 'overflow': 'hidden', + 'borderRadius': 1, + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(0, 0, 0, 0.8)', + 'direction': 'down' + }, + 'Pressed': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#CBCBCB', + 'overflow': 'hidden', + 'borderRadius': 1, + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(0, 0, 0, 0.8)', + 'direction': 'down' + } + }, + 'RightExpander': { + 'Default': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': 'white', + 'overflow': 'hidden', + 'borderTopRightRadius': 1, + 'borderBottomRightRadius': 1, + 'outline': '1px #C0C0C0 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(0, 0, 0, 0.8)', + 'direction': 'down' + }, + 'Hover': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#E0E0E0', + 'overflow': 'hidden', + 'borderTopRightRadius': 1, + 'borderBottomRightRadius': 1, + 'outline': '1px #C0C0C0 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(0, 0, 0, 0.8)', + 'direction': 'down' + }, + 'Pressed': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#CBCBCB', + 'overflow': 'hidden', + 'borderTopRightRadius': 1, + 'borderBottomRightRadius': 1, + 'outline': '1px #C0C0C0 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(0, 0, 0, 0.8)', + 'direction': 'up' + } + } + }, + 'Light Classic': { + 'Outline': { + 'Default': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': 'white', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #CFCFCF solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#444444', + 'direction': 'down' + }, + 'Hover': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#D8DADC', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #CFCFCF solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#444444', + 'direction': 'down' + }, + 'Pressed': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#7D858C', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #CFCFCF solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'white', + 'direction': 'down' + } + }, + 'RightExpander': { + 'Default': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': 'white', + 'overflow': 'hidden', + 'borderTopRightRadius': 1, + 'borderBottomRightRadius': 1, + 'outline': '1px #CFCFCF solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#444444', + 'direction': 'down' + }, + 'Hover': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#D8DADC', + 'overflow': 'hidden', + 'borderTopRightRadius': 1, + 'borderBottomRightRadius': 1, + 'outline': '1px #CFCFCF solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#444444', + 'direction': 'down' + }, + 'Pressed': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#7D858C', + 'overflow': 'hidden', + 'borderTopRightRadius': 1, + 'borderBottomRightRadius': 1, + 'outline': '1px #CFCFCF solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'white', + 'direction': 'up' + } + }, + 'Solid': { + 'Default': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': 'white', + 'overflow': 'hidden', + 'borderRadius': 1, + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#444444', + 'direction': 'down' + }, + 'Hover': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#D8DADC', + 'overflow': 'hidden', + 'borderRadius': 1, + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#444444', + 'direction': 'down' + }, + 'Pressed': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#7D858C', + 'overflow': 'hidden', + 'borderRadius': 1, + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'white', + 'direction': 'down' + } + } + }, + 'Dark': { + 'Outline': { + 'Default': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#333333', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #666666 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(255, 255, 255, 0.8)', + 'direction': 'down' + }, + 'Hover': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#555555', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #666666 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(255, 255, 255, 0.8)', + 'direction': 'down' + }, + 'Pressed': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#606060', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #666666 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(255, 255, 255, 0.8)', + 'direction': 'down' + } + }, + 'RightExpander': { + 'Default': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#333333', + 'overflow': 'hidden', + 'borderTopRightRadius': 1, + 'borderBottomRightRadius': 1, + 'outline': '1px #666666 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(255, 255, 255, 0.8)', + 'direction': 'down' + }, + 'Hover': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#555555', + 'overflow': 'hidden', + 'borderTopRightRadius': 1, + 'borderBottomRightRadius': 1, + 'outline': '1px #666666 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(255, 255, 255, 0.8)', + 'direction': 'down' + }, + 'Pressed': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#606060', + 'overflow': 'hidden', + 'borderTopRightRadius': 1, + 'borderBottomRightRadius': 1, + 'outline': '1px #666666 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(255, 255, 255, 0.8)', + 'direction': 'up' + } + }, + 'Solid': { + 'Default': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#333333', + 'overflow': 'hidden', + 'borderRadius': 1, + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(255, 255, 255, 0.8)', + 'direction': 'down' + }, + 'Hover': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#555555', + 'overflow': 'hidden', + 'borderRadius': 1, + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(255, 255, 255, 0.8)', + 'direction': 'down' + }, + 'Pressed': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#606060', + 'overflow': 'hidden', + 'borderRadius': 1, + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(255, 255, 255, 0.8)', + 'direction': 'down' + } + } + }, + 'Dark Contrast': { + 'Outline': { + 'Default': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#1E1E1E', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #696969 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#E8E8E8', + 'direction': 'down' + }, + 'Hover': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#424242', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #696969 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#E8E8E8', + 'direction': 'down' + }, + 'Pressed': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#666666', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #696969 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#E8E8E8', + 'direction': 'down' + } + }, + 'RightExpander': { + 'Default': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#1E1E1E', + 'overflow': 'hidden', + 'borderTopRightRadius': 1, + 'borderBottomRightRadius': 1, + 'outline': '1px #696969 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#E8E8E8', + 'direction': 'down' + }, + 'Hover': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#424242', + 'overflow': 'hidden', + 'borderTopRightRadius': 1, + 'borderBottomRightRadius': 1, + 'outline': '1px #696969 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#E8E8E8', + 'direction': 'down' + }, + 'Pressed': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#666666', + 'overflow': 'hidden', + 'borderTopRightRadius': 1, + 'borderBottomRightRadius': 1, + 'outline': '1px #696969 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#E8E8E8', + 'direction': 'up' + } + }, + 'Solid': { + 'Default': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#1E1E1E', + 'overflow': 'hidden', + 'borderRadius': 1, + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#E8E8E8', + 'direction': 'down' + }, + 'Hover': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#424242', + 'overflow': 'hidden', + 'borderRadius': 1, + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#E8E8E8', + 'direction': 'down' + }, + 'Pressed': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#666666', + 'overflow': 'hidden', + 'borderRadius': 1, + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#E8E8E8', + 'direction': 'down' + } + } + }, + 'Modern Light': { + 'Outline': { + 'Default': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': 'white', + 'overflow': 'hidden', + 'borderRadius': 4, + 'outline': '1px #E1E1E1 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#383838', + 'direction': 'down' + }, + 'Hover': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#F9F9F9', + 'overflow': 'hidden', + 'borderRadius': 4, + 'outline': '1px #E1E1E1 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#383838', + 'direction': 'down' + }, + 'Pressed': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#EAEAEA', + 'overflow': 'hidden', + 'borderRadius': 4, + 'outline': '1px #E1E1E1 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#383838', + 'direction': 'down' + } + }, + 'Solid': { + 'Default': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': 'white', + 'overflow': 'hidden', + 'borderRadius': 4, + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#383838', + 'direction': 'down' + }, + 'Hover': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#F9F9F9', + 'overflow': 'hidden', + 'borderRadius': 4, + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#383838', + 'direction': 'down' + }, + 'Pressed': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#EAEAEA', + 'overflow': 'hidden', + 'borderRadius': 4, + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#383838', + 'direction': 'down' + } + }, + 'RightExpander': { + 'Default': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': 'white', + 'overflow': 'hidden', + 'borderRadius': 4, + 'outline': '1px #E1E1E1 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(0, 0, 0, 0.8)', + 'direction': 'down' + }, + 'Hover': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#F9F9F9', + 'overflow': 'hidden', + 'borderRadius': 4, + 'outline': '1px #E1E1E1 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(0, 0, 0, 0.8)', + 'direction': 'down' + }, + 'Pressed': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#EAEAEA', + 'overflow': 'hidden', + 'borderRadius': 4, + 'outline': '1px #E1E1E1 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': 'rgba(0, 0, 0, 0.8)', + 'direction': 'up' + } + } + }, + 'Modern Dark': { + 'Outline': { + 'Default': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#404040', + 'overflow': 'hidden', + 'borderRadius': 4, + 'outline': '1px #686868 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#EAEAEA', + 'direction': 'down' + }, + 'Hover': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#585858', + 'overflow': 'hidden', + 'borderRadius': 4, + 'outline': '1px #404040 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#EAEAEA', + 'direction': 'down' + }, + 'Pressed': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#686868', + 'overflow': 'hidden', + 'borderRadius': 4, + 'outline': '1px #404040 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#EAEAEA', + 'direction': 'down' + } + }, + 'Solid': { + 'Default': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#404040', + 'overflow': 'hidden', + 'borderRadius': 4, + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#EAEAEA', + 'direction': 'down' + }, + 'Hover': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#585858', + 'overflow': 'hidden', + 'borderRadius': 4, + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#EAEAEA', + 'direction': 'down' + }, + 'Pressed': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#686868', + 'overflow': 'hidden', + 'borderRadius': 4, + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#EAEAEA', + 'direction': 'down' + } + }, + 'RightExpander': { + 'Default': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#404040', + 'overflow': 'hidden', + 'borderRadius': 4, + 'outline': '1px #686868 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#EAEAEA', + 'direction': 'down' + }, + 'Hover': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#585858', + 'overflow': 'hidden', + 'borderRadius': 4, + 'outline': '1px #404040 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#EAEAEA', + 'direction': 'down' + }, + 'Pressed': { + 'container': { + 'width': 24, + 'height': 24, + 'padding': 8, + 'background': '#686868', + 'overflow': 'hidden', + 'borderRadius': 4, + 'outline': '1px #404040 solid', + 'outlineOffset': '-1px', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 4, + 'display': 'inline-flex' + }, + 'iconColor': '#EAEAEA', + 'direction': 'up' + } + } + } +} as const; + +export default iconButtons; diff --git a/storybook/source/data/icon-svgs.ts b/storybook/source/data/icon-svgs.ts new file mode 100644 index 0000000000..fd3efaa7b5 --- /dev/null +++ b/storybook/source/data/icon-svgs.ts @@ -0,0 +1,41 @@ +export const iconSvgs = { + ".25 / btn-highlight": " ", + ".35 / btn-highlight": " ", + "common / big / btn-highlight": " ", + "common / btn-highlight": " ", + "common / btn-fontcolor": " ", + ".25 / btn-fontcolor": " ", + ".35 / btn-fontcolor": " ", + "common / big / btn-fontcolor": " ", + ".25 / btn-paracolor": " ", + ".35 / btn-paracolor": " ", + "common / big / btn-paracolor": " ", + ".25 / bold": " ", + ".35 / bold": " ", + "common / big / btn-bold": " ", + "common / chevron": " ", + "Chevron": " ", + "Chevron (2)": " ", + "common / chevron (2)": " ", + "delete": " ", + "common / btn-bold": " ", + "common / btn-paracolor": " ", + "common / btn-embed": " ", + "common / btn-copy": " ", + "common / btn-arrow-bottom": " ", + "common / btn-arrow-top": " ", + "common / btn-more-vertical": " ", + "common / btn-more": " ", + "common / btn-close": " ", + "common / down 20x20": " ", + "common / up 20x20": " ", + "Window icon / info": " ", + "Window icon / alert": " ", + "common / close min": " ", + "Window icon / success": " ", + "common / close min (2)": " ", + "common / chevron (3)": " ", + "common / check": " ", +} as const; + +export type IconSvgName = keyof typeof iconSvgs; diff --git a/storybook/source/data/info-block.ts b/storybook/source/data/info-block.ts new file mode 100644 index 0000000000..81f0d813b3 --- /dev/null +++ b/storybook/source/data/info-block.ts @@ -0,0 +1,97 @@ +import { type PluginTheme } from "../components/shared/pluginTheme.ts"; + +type InfoBlockTypography = { + fontSize: number; + lineHeight: number; + letterSpacing: number; + fontWeight: number; +}; + +export type InfoBlockTokens = { + background: string; + border: string; + radius: number; + titleColor: string; + descriptionColor: string; + closeColor: string; + alertBackground: string; + alertMark: string; + titleTypography: InfoBlockTypography; + descriptionTypography: InfoBlockTypography; +}; + +export const infoBlockTokens: Record = { + Light: { + background: "#FFFFFF", + border: "#C0C0C0", + radius: 1, + titleColor: "rgba(0, 0, 0, 0.8)", + descriptionColor: "rgba(0, 0, 0, 0.6)", + closeColor: "rgba(0, 0, 0, 0.8)", + alertBackground: "#F62211", + alertMark: "#FFFFFF", + titleTypography: { fontSize: 11, lineHeight: 16, letterSpacing: 0.22, fontWeight: 700 }, + descriptionTypography: { fontSize: 11, lineHeight: 14, letterSpacing: 0.22, fontWeight: 400 }, + }, + "Light Classic": { + background: "#FFFFFF", + border: "#CFCFCF", + radius: 1, + titleColor: "#444444", + descriptionColor: "#A5A5A5", + closeColor: "#444444", + alertBackground: "#D9534F", + alertMark: "#FFFFFF", + titleTypography: { fontSize: 11, lineHeight: 16, letterSpacing: 0.22, fontWeight: 700 }, + descriptionTypography: { fontSize: 11, lineHeight: 14, letterSpacing: 0.22, fontWeight: 400 }, + }, + Dark: { + background: "#333333", + border: "#666666", + radius: 1, + titleColor: "rgba(255, 255, 255, 0.8)", + descriptionColor: "rgba(255, 255, 255, 0.6)", + closeColor: "rgba(255, 255, 255, 0.8)", + alertBackground: "#F62211", + alertMark: "rgba(255, 255, 255, 0.8)", + titleTypography: { fontSize: 11, lineHeight: 16, letterSpacing: 0.22, fontWeight: 700 }, + descriptionTypography: { fontSize: 11, lineHeight: 14, letterSpacing: 0.22, fontWeight: 400 }, + }, + "Dark Contrast": { + background: "#1E1E1E", + border: "#696969", + radius: 1, + titleColor: "#E8E8E8", + descriptionColor: "#B8B8B8", + closeColor: "#E8E8E8", + alertBackground: "#F62211", + alertMark: "#E8E8E8", + titleTypography: { fontSize: 11, lineHeight: 16, letterSpacing: 0.22, fontWeight: 700 }, + descriptionTypography: { fontSize: 11, lineHeight: 14, letterSpacing: 0.22, fontWeight: 400 }, + }, + "Modern Light": { + background: "#FFFFFF", + border: "#E1E1E1", + radius: 4, + titleColor: "#383838", + descriptionColor: "rgba(0, 0, 0, 0.6)", + closeColor: "#383838", + alertBackground: "rgba(242, 61, 61, 0.8)", + alertMark: "#FFFFFF", + titleTypography: { fontSize: 12, lineHeight: 20, letterSpacing: 0.24, fontWeight: 500 }, + descriptionTypography: { fontSize: 12, lineHeight: 16, letterSpacing: 0.24, fontWeight: 400 }, + }, + "Modern Dark": { + background: "#404040", + border: "#686868", + radius: 4, + titleColor: "#F3F3F3", + descriptionColor: "#969696", + closeColor: "#EAEAEA", + alertBackground: "rgba(242, 61, 61, 0.8)", + alertMark: "#222222", + titleTypography: { fontSize: 12, lineHeight: 20, letterSpacing: 0.24, fontWeight: 500 }, + descriptionTypography: { fontSize: 12, lineHeight: 16, letterSpacing: 0.24, fontWeight: 400 }, + }, +}; + diff --git a/storybook/source/data/link-buttons.ts b/storybook/source/data/link-buttons.ts new file mode 100644 index 0000000000..4fe9d4744c --- /dev/null +++ b/storybook/source/data/link-buttons.ts @@ -0,0 +1,258 @@ +const linkButtons = { + 'Light': { + 'Default': { + 'container': { + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'flex-start', + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'justifyContent': 'center', + 'display': 'flex', + 'flexDirection': 'column', + 'color': 'rgba(0, 0, 0, 0.80)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '400', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + }, + 'underlineColor': 'rgba(0, 0, 0, 0.8)' + }, + 'Hover': { + 'container': { + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'flex-start', + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'justifyContent': 'center', + 'display': 'flex', + 'flexDirection': 'column', + 'color': 'rgba(0, 0, 0, 0.60)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '400', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + }, + 'underlineColor': 'rgba(0, 0, 0, 0.6)' + } + }, + 'Light Classic': { + 'Default': { + 'container': { + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'flex-start', + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'justifyContent': 'center', + 'display': 'flex', + 'flexDirection': 'column', + 'color': '#444444', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '400', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + }, + 'underlineColor': '#444444' + }, + 'Hover': { + 'container': { + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'flex-start', + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'justifyContent': 'center', + 'display': 'flex', + 'flexDirection': 'column', + 'color': '#A5A5A5', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '400', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + }, + 'underlineColor': '#A5A5A5' + } + }, + 'Dark': { + 'Default': { + 'container': { + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'flex-start', + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'justifyContent': 'center', + 'display': 'flex', + 'flexDirection': 'column', + 'color': 'rgba(255, 255, 255, 0.80)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '400', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + }, + 'underlineColor': 'rgba(255, 255, 255, 0.8)' + }, + 'Hover': { + 'container': { + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'flex-start', + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'justifyContent': 'center', + 'display': 'flex', + 'flexDirection': 'column', + 'color': 'rgba(255, 255, 255, 0.60)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '400', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + }, + 'underlineColor': 'rgba(255, 255, 255, 0.6)' + } + }, + 'Dark Contrast': { + 'Default': { + 'container': { + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'flex-start', + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'justifyContent': 'center', + 'display': 'flex', + 'flexDirection': 'column', + 'color': '#E8E8E8', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '400', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + }, + 'underlineColor': '#E8E8E8' + }, + 'Hover': { + 'container': { + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'flex-start', + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'justifyContent': 'center', + 'display': 'flex', + 'flexDirection': 'column', + 'color': '#B8B8B8', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '400', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + }, + 'underlineColor': '#B8B8B8' + } + }, + 'Modern Light': { + 'Default': { + 'container': { + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'flex-start', + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'justifyContent': 'center', + 'display': 'flex', + 'flexDirection': 'column', + 'color': '#383838', + 'fontSize': 12, + 'fontFamily': 'Arial', + 'fontWeight': '400', + 'lineHeight': 16, + 'letterSpacing': 0.24, + 'wordWrap': 'break-word' + }, + 'underlineColor': '#383838' + }, + 'Hover': { + 'container': { + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'flex-start', + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'justifyContent': 'center', + 'display': 'flex', + 'flexDirection': 'column', + 'color': 'rgba(0, 0, 0, 0.60)', + 'fontSize': 12, + 'fontFamily': 'Arial', + 'fontWeight': '400', + 'lineHeight': 16, + 'letterSpacing': 0.24, + 'wordWrap': 'break-word' + }, + 'underlineColor': 'rgba(0, 0, 0, 0.6)' + } + }, + 'Modern Dark': { + 'Default': { + 'container': { + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'flex-start', + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'justifyContent': 'center', + 'display': 'flex', + 'flexDirection': 'column', + 'color': '#F3F3F3', + 'fontSize': 12, + 'fontFamily': 'Arial', + 'fontWeight': '400', + 'lineHeight': 16, + 'letterSpacing': 0.24, + 'wordWrap': 'break-word' + }, + 'underlineColor': '#F3F3F3' + } + } +} as const; + +export default linkButtons; diff --git a/storybook/source/data/panel-buttons.ts b/storybook/source/data/panel-buttons.ts new file mode 100644 index 0000000000..153ca1173d --- /dev/null +++ b/storybook/source/data/panel-buttons.ts @@ -0,0 +1,1124 @@ +const panelButtons = { + 'Light': { + '30': { + 'Default': { + 'container': { + 'height': 30, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': 'white', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #C0C0C0 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'rgba(0, 0, 0, 0.80)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Hover': { + 'container': { + 'height': 30, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#E0E0E0', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #C0C0C0 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'rgba(0, 0, 0, 0.80)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Pressed': { + 'container': { + 'height': 30, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#CBCBCB', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #C0C0C0 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'rgba(0, 0, 0, 0.80)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Disabled': { + 'container': { + 'height': 30, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#EFEFEF', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #C0C0C0 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'rgba(0, 0, 0, 0.40)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Loader': { + 'container': { + 'height': 30, + 'paddingLeft': 32, + 'paddingRight': 32, + 'paddingTop': 11, + 'paddingBottom': 11, + 'background': '#EFEFEF', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #C0C0C0 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': {}, + 'spinnerColor': 'rgba(0, 0, 0, 0.80)' + } + }, + '24': { + 'Default': { + 'container': { + 'height': 24, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': 'white', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #C0C0C0 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'rgba(0, 0, 0, 0.80)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Hover': { + 'container': { + 'height': 24, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#E0E0E0', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #C0C0C0 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'rgba(0, 0, 0, 0.80)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Pressed': { + 'container': { + 'height': 24, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#CBCBCB', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #C0C0C0 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'rgba(0, 0, 0, 0.80)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Disabled': { + 'container': { + 'height': 24, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#EFEFEF', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #C0C0C0 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'rgba(0, 0, 0, 0.40)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Loader': { + 'container': { + 'height': 24, + 'paddingLeft': 32, + 'paddingRight': 32, + 'paddingTop': 11, + 'paddingBottom': 11, + 'background': '#EFEFEF', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #C0C0C0 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': {}, + 'spinnerColor': 'rgba(0, 0, 0, 0.80)' + } + } + }, + 'Light Classic': { + '30': { + 'Default': { + 'container': { + 'height': 30, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': 'white', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #CFCFCF solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': '#444444', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Hover': { + 'container': { + 'height': 30, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#D8DADC', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #CFCFCF solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': '#444444', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Pressed': { + 'container': { + 'height': 30, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#7D858C', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #CFCFCF solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'white', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Disabled': { + 'container': { + 'height': 30, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#F1F1F1', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #CFCFCF solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': '#A5A5A5', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Loader': { + 'container': { + 'height': 30, + 'paddingLeft': 32, + 'paddingRight': 32, + 'paddingTop': 11, + 'paddingBottom': 11, + 'background': '#F1F1F1', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #CFCFCF solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': {}, + 'spinnerColor': '#444444' + } + }, + '24': { + 'Default': { + 'container': { + 'height': 24, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': 'white', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #CFCFCF solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': '#444444', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Hover': { + 'container': { + 'height': 24, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#D8DADC', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #CFCFCF solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': '#444444', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Pressed': { + 'container': { + 'height': 24, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#7D858C', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #CFCFCF solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'white', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Disabled': { + 'container': { + 'height': 24, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#F1F1F1', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #CFCFCF solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': '#A5A5A5', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Loader': { + 'container': { + 'height': 24, + 'paddingLeft': 32, + 'paddingRight': 32, + 'paddingTop': 11, + 'paddingBottom': 11, + 'background': '#F1F1F1', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #CFCFCF solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': {}, + 'spinnerColor': '#444444' + } + } + }, + 'Dark': { + '30': { + 'Default': { + 'container': { + 'height': 30, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#333333', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #666666 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'rgba(255, 255, 255, 0.80)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Hover': { + 'container': { + 'height': 30, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#555555', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #666666 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'rgba(255, 255, 255, 0.80)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Pressed': { + 'container': { + 'height': 30, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#606060', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #666666 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'rgba(255, 255, 255, 0.80)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Disabled': { + 'container': { + 'height': 30, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#505050', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #666666 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'rgba(255, 255, 255, 0.40)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Loader': { + 'container': { + 'height': 30, + 'paddingLeft': 32, + 'paddingRight': 32, + 'paddingTop': 11, + 'paddingBottom': 11, + 'background': '#505050', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #666666 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': {}, + 'spinnerColor': 'rgba(255, 255, 255, 0.80)' + } + }, + '24': { + 'Default': { + 'container': { + 'height': 24, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#333333', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #666666 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'rgba(255, 255, 255, 0.80)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Hover': { + 'container': { + 'height': 24, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#555555', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #666666 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'rgba(255, 255, 255, 0.80)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Pressed': { + 'container': { + 'height': 24, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#606060', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #666666 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'rgba(255, 255, 255, 0.80)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Disabled': { + 'container': { + 'height': 24, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#505050', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #666666 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'rgba(255, 255, 255, 0.40)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Loader': { + 'container': { + 'height': 24, + 'paddingLeft': 32, + 'paddingRight': 32, + 'paddingTop': 11, + 'paddingBottom': 11, + 'background': '#505050', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #666666 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': {}, + 'spinnerColor': 'rgba(255, 255, 255, 0.80)' + } + } + }, + 'Dark Contrast': { + '30': { + 'Default': { + 'container': { + 'height': 30, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#1E1E1E', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #696969 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': '#E8E8E8', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Hover': { + 'container': { + 'height': 30, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#424242', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #696969 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': '#E8E8E8', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Pressed': { + 'container': { + 'height': 30, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#666666', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #696969 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': '#E8E8E8', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Disabled': { + 'container': { + 'height': 30, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#2A2A2A', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #696969 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'rgba(0, 0, 0, 0.20)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Loader': { + 'container': { + 'height': 30, + 'paddingLeft': 32, + 'paddingRight': 32, + 'paddingTop': 11, + 'paddingBottom': 11, + 'background': '#2A2A2A', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #696969 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': {}, + 'spinnerColor': '#E8E8E8' + } + }, + '24': { + 'Default': { + 'container': { + 'height': 24, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#1E1E1E', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #696969 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': '#E8E8E8', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Hover': { + 'container': { + 'height': 24, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#424242', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #696969 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': '#E8E8E8', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Pressed': { + 'container': { + 'height': 24, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#666666', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #696969 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': '#E8E8E8', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Disabled': { + 'container': { + 'height': 24, + 'paddingTop': 11, + 'paddingBottom': 13, + 'paddingLeft': 32, + 'paddingRight': 32, + 'background': '#2A2A2A', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #696969 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': { + 'textAlign': 'center', + 'color': 'rgba(0, 0, 0, 0.20)', + 'fontSize': 11, + 'fontFamily': 'Arial', + 'fontWeight': '700', + 'lineHeight': 16, + 'letterSpacing': 0.22, + 'wordWrap': 'break-word' + } + }, + 'Loader': { + 'container': { + 'height': 24, + 'paddingLeft': 32, + 'paddingRight': 32, + 'paddingTop': 11, + 'paddingBottom': 11, + 'background': '#2A2A2A', + 'overflow': 'hidden', + 'borderRadius': 1, + 'outline': '1px #696969 solid', + 'outlineOffset': '-1px', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'alignItems': 'center', + 'gap': 8, + 'display': 'inline-flex' + }, + 'text': {}, + 'spinnerColor': '#E8E8E8' + } + } + } +} as const; + +export default panelButtons; diff --git a/storybook/source/data/panel.ts b/storybook/source/data/panel.ts new file mode 100644 index 0000000000..5e3215ad8c --- /dev/null +++ b/storybook/source/data/panel.ts @@ -0,0 +1,111 @@ +export type PanelTheme = + | "Light" + | "Light Classic" + | "Dark" + | "Dark Contrast" + | "Modern Light" + | "Modern Dark"; + +export type PanelSizePreset = "Basic" | "Wide"; + +export type PanelThemeTokens = { + surface: string; + headerSurface: string; + border: string; + title: string; + body: string; + link: string; +}; + +export const panelBaseMetrics = { + heights: { + panel: 646, + header: 44, + }, + paddings: { + headerX: 12, + contentY: 12, + contentX: 12, + }, +} as const; + +export const panelSizeMetrics: Record< + PanelTheme, + Record +> = { + Light: { + Basic: { width: 260, height: 646 }, + Wide: { width: 555, height: 646 }, + }, + "Light Classic": { + Basic: { width: 260, height: 646 }, + Wide: { width: 555, height: 646 }, + }, + Dark: { + Basic: { width: 260, height: 646 }, + Wide: { width: 555, height: 646 }, + }, + "Dark Contrast": { + Basic: { width: 260, height: 646 }, + Wide: { width: 555, height: 646 }, + }, + "Modern Light": { + Basic: { width: 257, height: 808 }, + Wide: { width: 553, height: 808 }, + }, + "Modern Dark": { + Basic: { width: 257, height: 808 }, + Wide: { width: 553, height: 808 }, + }, +}; + +export const panelThemeTokens: Record = { + Light: { + surface: "#F7F7F7", + headerSurface: "#F7F7F7", + border: "#CBCBCB", + title: "rgba(0, 0, 0, 0.80)", + body: "rgba(0, 0, 0, 0.80)", + link: "rgba(0, 0, 0, 0.80)", + }, + "Light Classic": { + surface: "#F1F1F1", + headerSurface: "#F1F1F1", + border: "#CBCBCB", + title: "#444444", + body: "#444444", + link: "#444444", + }, + Dark: { + surface: "#404040", + headerSurface: "#404040", + border: "#616161", + title: "rgba(255, 255, 255, 0.80)", + body: "rgba(255, 255, 255, 0.80)", + link: "rgba(255, 255, 255, 0.80)", + }, + "Dark Contrast": { + surface: "#2A2A2A", + headerSurface: "#2A2A2A", + border: "#616161", + title: "#E8E8E8", + body: "#E8E8E8", + link: "#E8E8E8", + }, + "Modern Light": { + surface: "#FFFFFF", + headerSurface: "#FFFFFF", + border: "#EAEAEA", + title: "#383838", + body: "#383838", + link: "#383838", + }, + "Modern Dark": { + surface: "#404040", + headerSurface: "#404040", + border: "#585858", + title: "#F3F3F3", + body: "#F3F3F3", + link: "#F3F3F3", + }, +}; diff --git a/storybook/source/data/radio.ts b/storybook/source/data/radio.ts new file mode 100644 index 0000000000..36fc8fa15e --- /dev/null +++ b/storybook/source/data/radio.ts @@ -0,0 +1,395 @@ +export const radioThemeOptions = [ + "Light", + "Light Classic", + "Modern Light", + "Modern Dark", + "Dark", + "Dark Contrast", +] as const; + +export const radioStates = ["default", "hover", "disabled"] as const; +export const radioSelections = ["no", "yes"] as const; + +export type RadioTheme = (typeof radioThemeOptions)[number]; +export type RadioState = (typeof radioStates)[number]; +export type RadioSelection = (typeof radioSelections)[number]; + +type RadioToken = { + outerFill: string; + outerStroke: string; + dotFill?: string; + dotOpacity?: number; + textColor: string; + fontSize: number; + lineHeight: number; + letterSpacing: number; +}; + +export const radioTokens: Record>> = { + "Light": { + default: { + no: { + outerFill: "white", + outerStroke: "#C0C0C0", + textColor: "rgba(0, 0, 0, 0.80)", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + yes: { + outerFill: "white", + outerStroke: "#C0C0C0", + dotFill: "black", + dotOpacity: 0.8, + textColor: "rgba(0, 0, 0, 0.80)", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + }, + hover: { + no: { + outerFill: "white", + outerStroke: "#848484", + textColor: "rgba(0, 0, 0, 0.80)", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + yes: { + outerFill: "white", + outerStroke: "#848484", + dotFill: "black", + dotOpacity: 0.8, + textColor: "rgba(0, 0, 0, 0.80)", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + }, + disabled: { + no: { + outerFill: "#F7F7F7", + outerStroke: "#E0E0E0", + textColor: "rgba(0, 0, 0, 0.40)", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + yes: { + outerFill: "#F7F7F7", + outerStroke: "#E0E0E0", + dotFill: "black", + dotOpacity: 0.5, + textColor: "rgba(0, 0, 0, 0.40)", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + }, + }, + "Light Classic": { + default: { + no: { + outerFill: "white", + outerStroke: "#CFCFCF", + textColor: "#444444", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + yes: { + outerFill: "white", + outerStroke: "#CFCFCF", + dotFill: "#444444", + textColor: "#444444", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + }, + hover: { + no: { + outerFill: "white", + outerStroke: "#848484", + textColor: "#444444", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + yes: { + outerFill: "white", + outerStroke: "#848484", + dotFill: "#444444", + textColor: "#444444", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + }, + disabled: { + no: { + outerFill: "#F1F1F1", + outerStroke: "#D8DADC", + textColor: "#A5A5A5", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + yes: { + outerFill: "#F1F1F1", + outerStroke: "#D8DADC", + dotFill: "#A5A5A5", + textColor: "#A5A5A5", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + }, + }, + "Modern Light": { + default: { + no: { + outerFill: "#FFFFFF", + outerStroke: "#7F7F7F", + textColor: "#383838", + fontSize: 12, + lineHeight: 16, + letterSpacing: 0.24, + }, + yes: { + outerFill: "#FFFFFF", + outerStroke: "#7F7F7F", + dotFill: "#383838", + textColor: "#383838", + fontSize: 12, + lineHeight: 16, + letterSpacing: 0.24, + }, + }, + hover: { + no: { + outerFill: "#F3F3F3", + outerStroke: "#969696", + textColor: "#383838", + fontSize: 12, + lineHeight: 16, + letterSpacing: 0.24, + }, + yes: { + outerFill: "#F3F3F3", + outerStroke: "#969696", + dotFill: "#383838", + textColor: "#383838", + fontSize: 12, + lineHeight: 16, + letterSpacing: 0.24, + }, + }, + disabled: { + no: { + outerFill: "white", + outerStroke: "#969696", + textColor: "#383838", + fontSize: 12, + lineHeight: 16, + letterSpacing: 0.24, + }, + yes: { + outerFill: "#F3F3F3", + outerStroke: "#969696", + dotFill: "white", + textColor: "#383838", + fontSize: 12, + lineHeight: 16, + letterSpacing: 0.24, + }, + }, + }, + "Modern Dark": { + default: { + no: { + outerFill: "#404040", + outerStroke: "#969696", + textColor: "#F3F3F3", + fontSize: 12, + lineHeight: 16, + letterSpacing: 0.24, + }, + yes: { + outerFill: "#404040", + outerStroke: "#969696", + dotFill: "#EAEAEA", + textColor: "#F3F3F3", + fontSize: 12, + lineHeight: 16, + letterSpacing: 0.24, + }, + }, + hover: { + no: { + outerFill: "#585858", + outerStroke: "#969696", + textColor: "#F3F3F3", + fontSize: 12, + lineHeight: 16, + letterSpacing: 0.24, + }, + yes: { + outerFill: "#585858", + outerStroke: "#969696", + dotFill: "#EAEAEA", + textColor: "#F3F3F3", + fontSize: 12, + lineHeight: 16, + letterSpacing: 0.24, + }, + }, + disabled: { + no: { + outerFill: "#404040", + outerStroke: "#969696", + textColor: "#F3F3F3", + fontSize: 12, + lineHeight: 16, + letterSpacing: 0.24, + }, + yes: { + outerFill: "#4A7BE0", + outerStroke: "#4A7BE0", + dotFill: "#404040", + textColor: "#F3F3F3", + fontSize: 12, + lineHeight: 16, + letterSpacing: 0.24, + }, + }, + }, + "Dark": { + default: { + no: { + outerFill: "#333333", + outerStroke: "#666666", + textColor: "rgba(255, 255, 255, 0.80)", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + yes: { + outerFill: "#333333", + outerStroke: "#666666", + dotFill: "white", + dotOpacity: 0.8, + textColor: "rgba(255, 255, 255, 0.80)", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + }, + hover: { + no: { + outerFill: "#333333", + outerStroke: "#CCCCCC", + textColor: "rgba(255, 255, 255, 0.80)", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + yes: { + outerFill: "#333333", + outerStroke: "#CCCCCC", + dotFill: "white", + dotOpacity: 0.8, + textColor: "rgba(255, 255, 255, 0.80)", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + }, + disabled: { + no: { + outerFill: "#404040", + outerStroke: "#555555", + textColor: "rgba(255, 255, 255, 0.40)", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + yes: { + outerFill: "#404040", + outerStroke: "#555555", + dotFill: "white", + dotOpacity: 0.5, + textColor: "rgba(255, 255, 255, 0.40)", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + }, + }, + "Dark Contrast": { + default: { + no: { + outerFill: "#1E1E1E", + outerStroke: "#696969", + textColor: "#E8E8E8", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + yes: { + outerFill: "#1E1E1E", + outerStroke: "#696969", + dotFill: "#E8E8E8", + textColor: "#E8E8E8", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + }, + hover: { + no: { + outerFill: "#1E1E1E", + outerStroke: "#B8B8B8", + textColor: "#E8E8E8", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + yes: { + outerFill: "#1E1E1E", + outerStroke: "#B8B8B8", + dotFill: "#E8E8E8", + textColor: "#E8E8E8", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + }, + disabled: { + no: { + outerFill: "#2A2A2A", + outerStroke: "#424242", + textColor: "rgba(232, 232, 232, 0.45)", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + yes: { + outerFill: "#2A2A2A", + outerStroke: "#424242", + dotFill: "#8A8A8A", + textColor: "rgba(232, 232, 232, 0.45)", + fontSize: 11, + lineHeight: 16, + letterSpacing: 0.22, + }, + }, + }, +}; + +const radioThemeSet = new Set(radioThemeOptions); + +export const resolveRadioTheme = (theme: string): RadioTheme => { + return radioThemeSet.has(theme) ? (theme as RadioTheme) : "Light"; +}; diff --git a/storybook/source/data/reference-theme-colors.ts b/storybook/source/data/reference-theme-colors.ts new file mode 100644 index 0000000000..2705f95224 --- /dev/null +++ b/storybook/source/data/reference-theme-colors.ts @@ -0,0 +1,192 @@ +export const referenceThemeColors = { + "Light Classic": { + "--background-accent-button": "#446995", + "--background-alt-key-hint": "#FFD938", + "--background-contrast-popover": "#444444", + "--background-loader": "rgba(0, 0, 0, 0.65)", + "--background-normal": "#FFFFFF", + "--background-notification-badge": "#FFD112", + "--background-notification-popover": "#FCFED7", + "--background-primary-dialog-button": "#7D858C", + "--background-scrim": "rgba(0, 0, 0, 0.20)", + "--background-tab-underline": "#444444", + "--background-toolbar": "#F1F1F1", + "--background-toolbar-additional": "#F1F1F1", + "--border-color-shading": "rgba(0, 0, 0, 0.20)", + "--border-control-focus": "#848484", + "--border-divider": "#CBCBCB", + "--border-error": "#D9534F", + "--border-preview-hover": "#E0E0E0", + "--border-preview-select": "#848484", + "--border-regular-control": "#CFCFCF", + "--border-toolbar": "#CBCBCB", + "--border-toolbar-button-hover": "#D8DADC", + "--canvas-background": "#E2E2E2", + "--canvas-cell-border": "rgba(0, 0, 0, 0.10)", + "--canvas-cell-freeze": "#AAAAAA", + "--canvas-cell-title-border": "#D5D5D5", + "--canvas-cell-title-border-hover": "#AFAFAF", + "--canvas-cell-title-border-selected": "#929292", + "--canvas-cell-title-divider": "#888888", + "--canvas-cell-title-hover": "#DFDFDF", + "--canvas-cell-title-selected": "#C1C1C1", + "--canvas-content-background": "#FFFFFF", + "--canvas-dark-cell-title": "#444444", + "--canvas-dark-cell-title--divider": "#0F0F0F", + "--canvas-dark-cell-title-border": "#3D3D3D", + "--canvas-dark-cell-title-border-hover": "#5C5C5C", + "--canvas-dark-cell-title-border-selected": "#0F0F0F", + "--canvas-dark-cell-title-hover": "#666666", + "--canvas-dark-cell-title-selected": "#111111", + "--canvas-high-contrast": "#000000", + "--canvas-high-contrast-disabled": "#82878F", + "--canvas-page-border": "#BBBEC2", + "--canvas-ruler-background": "#FFFFFF", + "--canvas-ruler-border": "#CBCBCB", + "--canvas-ruler-handle-border": "#555555", + "--canvas-ruler-handle-border-disabled": "#A9AFB5", + "--canvas-ruler-margins-background": "#D6D6D6", + "--canvas-ruler-mark": "#585B5E", + "--canvas-scroll-arrow": "#ADADAD", + "--canvas-scroll-arrow-hover": "#F1F1F1", + "--canvas-scroll-arrow-pressed": "#F1F1F1", + "--canvas-scroll-thumb": "#F1F1F1", + "--canvas-scroll-thumb-border": "#CFCFCF", + "--canvas-scroll-thumb-border-hover": "#CFCFCF", + "--canvas-scroll-thumb-border-pressed": "#ADADAD", + "--canvas-scroll-thumb-hover": "#CFCFCF", + "--canvas-scroll-thumb-pressed": "#ADADAD", + "--canvas-scroll-thumb-target": "#CFCFCF", + "--canvas-scroll-thumb-target-hover": "#F1F1F1", + "--canvas-scroll-thumb-target-pressed": "#F1F1F1", + "--canvas-select-all-icon": "#82878F", + "--highlight-accent-button-hover": "#375478", + "--highlight-accent-button-pressed": "#293F59", + "--highlight-button-hover": "#D8DADC", + "--highlight-button-pressed": "#7D858C", + "--highlight-button-pressed-hover": "#7D858C", + "--highlight-header-button-hover": "rgba(255, 255, 255, 0.20)", + "--highlight-header-button-pressed": "rgba(255, 255, 255, 0.25)", + "--highlight-primary-dialog-button-hover": "#666D73", + "--highlight-text-select": "#3494FB", + "--icon-contrast-popover": "#FFFFFF", + "--icon-error": "#D9534F", + "--icon-inverse": "#FFFFFF", + "--icon-normal": "#444444", + "--icon-normal-pressed": "#FFFFFF", + "--icon-notification-badge": "#000000", + "--icon-success": "#009900", + "--icon-toolbar-header": "#FFFFFF", + "--text-alt-key-hint": "rgba(0, 0, 0, 0.80)", + "--text-contrast-background": "#FFFFFF", + "--text-inverse": "#FFFFFF", + "--text-link": "#445799", + "--text-link-active": "#445799", + "--text-link-hover": "#445799", + "--text-link-visited": "#445799", + "--text-normal": "#444444", + "--text-normal-pressed": "rgba(0, 0, 0, 0.80)", + "--text-secondary": "#A5A5A5", + "--text-tertiary": "#A5A5A5", + "--text-toolbar-header": "#FFFFFF", + "--toolbar-header-document": "#446995", + "--toolbar-header-presentation": "#AA5252", + "--toolbar-header-spreadsheet": "#40865C" + }, + "Light": { + "--background-accent-button": "#446995", + "--background-alt-key-hint": "#FFD938", + "--background-contrast-popover": "#444444", + "--background-loader": "rgba(68, 68, 68, 0.95)", + "--background-normal": "#FFFFFF", + "--background-notification-badge": "#FFD112", + "--background-notification-popover": "#FCFED7", + "--background-primary-dialog-button": "#444444", + "--background-scrim": "rgba(0, 0, 0, 0.20)", + "--background-toolbar": "#F7F7F7", + "--background-toolbar-additional": "#EFEFEF", + "--border-color-shading": "rgba(0, 0, 0, 0.15)", + "--border-control-focus": "#848484", + "--border-divider": "#DFDFDF", + "--border-error": "#F62211", + "--border-preview-hover": "#BABABA", + "--border-preview-select": "#888888", + "--border-regular-control": "#C0C0C0", + "--border-toolbar": "#CBCBCB", + "--border-toolbar-button-hover": "#E0E0E0", + "--canvas-background": "#EEEEEE", + "--canvas-cell-border": "rgba(0, 0, 0, 0.10)", + "--canvas-cell-freeze": "#AAAAAA", + "--canvas-cell-title-border": "#D8D8D8", + "--canvas-cell-title-border-hover": "#C9C9C9", + "--canvas-cell-title-border-selected": "#BBBBBB", + "--canvas-cell-title-divider": "#888888", + "--canvas-cell-title-hover": "#DFDFDF", + "--canvas-cell-title-selected": "#CFCFCF", + "--canvas-content-background": "#FFFFFF", + "--canvas-dark-cell-title": "#444444", + "--canvas-dark-cell-title-border": "#3D3D3D", + "--canvas-dark-cell-title-border-hover": "#5C5C5C", + "--canvas-dark-cell-title-border-selected": "#0F0F0F", + "--canvas-dark-cell-title-divider": "#0F0F0F", + "--canvas-dark-cell-title-hover": "#666666", + "--canvas-dark-cell-title-selected": "#111111", + "--canvas-high-contrast": "#000000", + "--canvas-high-contrast-disabled": "#999999", + "--canvas-page-border": "#CCCCCC", + "--canvas-ruler-background": "#FFFFFF", + "--canvas-ruler-border": "#CBCBCB", + "--canvas-ruler-handle-border": "#555555", + "--canvas-ruler-handle-border-disabled": "#AAAAAA", + "--canvas-ruler-margins-background": "#D9D9D9", + "--canvas-ruler-mark": "#555555", + "--canvas-scroll-arrow": "#ADADAD", + "--canvas-scroll-arrow-hover": "#F7F7F7", + "--canvas-scroll-arrow-pressed": "#F7F7F7", + "--canvas-scroll-thumb": "#F7F7F7", + "--canvas-scroll-thumb-border": "#CBCBCB", + "--canvas-scroll-thumb-border-hover": "#CBCBCB", + "--canvas-scroll-thumb-border-pressed": "#ADADAD", + "--canvas-scroll-thumb-hover": "#CBCBCB", + "--canvas-scroll-thumb-pressed": "#ADADAD", + "--canvas-scroll-thumb-target": "#C0C0C0", + "--canvas-scroll-thumb-target-hover": "#F7F7F7", + "--canvas-scroll-thumb-target-pressed": "#F7F7F7", + "--canvas-select-all-icon": "#999999", + "--highlight-accent-button-hover": "#375478", + "--highlight-accent-button-pressed": "#293F59", + "--highlight-button-hover": "#E0E0E0", + "--highlight-button-pressed": "#CBCBCB", + "--highlight-button-pressed-hover": "#BABABA", + "--highlight-header-button-hover": "rgba(255, 255, 255, 0.15)", + "--highlight-header-button-pressed": "rgba(255, 255, 255, 0.25)", + "--highlight-primary-dialog-button-hover": "#1C1C1C", + "--highlight-text-select": "#3494FB", + "--icon-contrast-popover": "#FFFFFF", + "--icon-error": "#F62211", + "--icon-inverse": "#FFFFFF", + "--icon-normal": "rgba(0, 0, 0, 0.80)", + "--icon-normal-pressed": "#000000", + "--icon-notification-badge": "#000000", + "--icon-success": "#009900", + "--icon-toolbar-header": "#FFFFFF", + "--text-alt-key-hint": "rgba(0, 0, 0, 0.80)", + "--text-contrast-background": "#FFFFFF", + "--text-inverse": "#FFFFFF", + "--text-link": "#445799", + "--text-link-active": "#445799", + "--text-link-hover": "#445799", + "--text-link-visited": "#445799", + "--text-normal": "rgba(0, 0, 0, 0.80)", + "--text-normal-pressed": "rgba(0, 0, 0, 0.80)", + "--text-secondary": "rgba(0, 0, 0, 0.60)", + "--text-tertiary": "rgba(0, 0, 0, 0.40)", + "--text-toolbar-header": "#FFFFFF", + "--toolbar-header-document": "#446995", + "--toolbar-header-presentation": "#AA5252", + "--toolbar-header-spreadsheet": "#40865C" + } +} as const; + + +export type ReferenceThemeName = keyof typeof referenceThemeColors; diff --git a/storybook/source/data/scroll.ts b/storybook/source/data/scroll.ts new file mode 100644 index 0000000000..9232d585ef --- /dev/null +++ b/storybook/source/data/scroll.ts @@ -0,0 +1,198 @@ +import type { PluginTheme } from "../components/shared/pluginTheme.ts"; + +export type ScrollVisualState = "default" | "hover" | "pressed"; +export type ScrollSize = "XS" | "S" | "M"; + +export type ScrollLiftTokens = { + bg: string; + border: string; + notch: string; +}; + +export type ScrollStateTokens = { + lift: Record; + button: { + bg: string; + border: string; + arrow: string; + }; +}; + +type ScrollThemeTokens = Record; + +export const scrollByTheme: Record = { + Light: { + default: { + lift: { + M: { bg: "#F7F7F7", border: "rgba(224, 224, 224, 0.93)", notch: "rgba(224, 224, 224, 0.93)" }, + S: { bg: "#F7F7F7", border: "#E0E0E0", notch: "rgba(224, 224, 224, 0.93)" }, + XS: { bg: "rgba(224, 224, 224, 0.93)", border: "rgba(224, 224, 224, 0.93)", notch: "rgba(224, 224, 224, 0.93)" }, + }, + button: { bg: "#F7F7F7", border: "rgba(224, 224, 224, 0.93)", arrow: "#ADADAD" }, + }, + hover: { + lift: { + M: { bg: "#C0C0C0", border: "#CBCBCB", notch: "#F7F7F7" }, + S: { bg: "#C0C0C0", border: "#CBCBCB", notch: "#F7F7F7" }, + XS: { bg: "#CBCBCB", border: "#CBCBCB", notch: "#CBCBCB" }, + }, + button: { bg: "#C0C0C0", border: "rgba(224, 224, 224, 0.93)", arrow: "#F7F7F7" }, + }, + pressed: { + lift: { + M: { bg: "#ADADAD", border: "#ADADAD", notch: "#F7F7F7" }, + S: { bg: "#ADADAD", border: "#ADADAD", notch: "#F7F7F7" }, + XS: { bg: "#ADADAD", border: "#ADADAD", notch: "#ADADAD" }, + }, + button: { bg: "#ADADAD", border: "#ADADAD", arrow: "#F7F7F7" }, + }, + }, + "Light Classic": { + default: { + lift: { + M: { bg: "#F1F1F1", border: "#CFCFCF", notch: "#CBCBCB" }, + S: { bg: "#F1F1F1", border: "#CFCFCF", notch: "#CBCBCB" }, + XS: { bg: "#CFCFCF", border: "#CFCFCF", notch: "#CFCFCF" }, + }, + button: { bg: "#F1F1F1", border: "#CFCFCF", arrow: "#ADADAD" }, + }, + hover: { + lift: { + M: { bg: "#CFCFCF", border: "#CBCBCB", notch: "#F1F1F1" }, + S: { bg: "#CFCFCF", border: "#CBCBCB", notch: "#F1F1F1" }, + XS: { bg: "#CFCFCF", border: "#CFCFCF", notch: "#CFCFCF" }, + }, + button: { bg: "#CFCFCF", border: "#CFCFCF", arrow: "#F1F1F1" }, + }, + pressed: { + lift: { + M: { bg: "#ADADAD", border: "#ADADAD", notch: "#F1F1F1" }, + S: { bg: "#ADADAD", border: "#ADADAD", notch: "#F1F1F1" }, + XS: { bg: "#ADADAD", border: "#ADADAD", notch: "#ADADAD" }, + }, + button: { bg: "#ADADAD", border: "#ADADAD", arrow: "#F1F1F1" }, + }, + }, + Dark: { + default: { + lift: { + M: { bg: "#404040", border: "#616161", notch: "#616161" }, + S: { bg: "#404040", border: "#616161", notch: "#616161" }, + XS: { bg: "#616161", border: "#616161", notch: "#616161" }, + }, + button: { bg: "#404040", border: "#616161", arrow: "#ADADAD" }, + }, + hover: { + lift: { + M: { bg: "#666666", border: "#616161", notch: "#404040" }, + S: { bg: "#666666", border: "#616161", notch: "#404040" }, + XS: { bg: "#999999", border: "#999999", notch: "#999999" }, + }, + button: { bg: "#666666", border: "#616161", arrow: "#404040" }, + }, + pressed: { + lift: { + M: { bg: "#ADADAD", border: "#999999", notch: "#404040" }, + S: { bg: "#ADADAD", border: "#999999", notch: "#404040" }, + XS: { bg: "#ADADAD", border: "#ADADAD", notch: "#ADADAD" }, + }, + button: { bg: "#ADADAD", border: "#999999", arrow: "#404040" }, + }, + }, + "Dark Contrast": { + default: { + lift: { + M: { bg: "#2A2A2A", border: "#616161", notch: "#616161" }, + S: { bg: "#2A2A2A", border: "#616161", notch: "#616161" }, + XS: { bg: "#616161", border: "#616161", notch: "#616161" }, + }, + button: { bg: "#2A2A2A", border: "#616161", arrow: "#4D4D4D" }, + }, + hover: { + lift: { + M: { bg: "#696969", border: "#616161", notch: "#2A2A2A" }, + S: { bg: "#696969", border: "#616161", notch: "#2A2A2A" }, + XS: { bg: "#424242", border: "#424242", notch: "#424242" }, + }, + button: { bg: "#696969", border: "#616161", arrow: "#2A2A2A" }, + }, + pressed: { + lift: { + M: { bg: "#4D4D4D", border: "#7D7D7D", notch: "#2A2A2A" }, + S: { bg: "#4D4D4D", border: "#7D7D7D", notch: "#2A2A2A" }, + XS: { bg: "#4D4D4D", border: "#4D4D4D", notch: "#4D4D4D" }, + }, + button: { bg: "#4D4D4D", border: "#7D7D7D", arrow: "#2A2A2A" }, + }, + }, + "Modern Light": { + default: { + lift: { + M: { bg: "#F7F7F7", border: "#E1E1E1", notch: "#E1E1E1" }, + S: { bg: "#F7F7F7", border: "#E1E1E1", notch: "#E1E1E1" }, + XS: { bg: "#F7F7F7", border: "#F7F7F7", notch: "#F7F7F7" }, + }, + button: { bg: "#F7F7F7", border: "#E1E1E1", arrow: "#969696" }, + }, + hover: { + lift: { + M: { bg: "#C0C0C0", border: "#E1E1E1", notch: "#F7F7F7" }, + S: { bg: "#C0C0C0", border: "#E1E1E1", notch: "#F7F7F7" }, + XS: { bg: "#C0C0C0", border: "#C0C0C0", notch: "#C0C0C0" }, + }, + button: { bg: "#C0C0C0", border: "#E1E1E1", arrow: "#F7F7F7" }, + }, + pressed: { + lift: { + M: { bg: "#ADADAD", border: "#ADADAD", notch: "#F7F7F7" }, + S: { bg: "#ADADAD", border: "#ADADAD", notch: "#F7F7F7" }, + XS: { bg: "#ADADAD", border: "#ADADAD", notch: "#ADADAD" }, + }, + button: { bg: "#ADADAD", border: "#ADADAD", arrow: "#ADADAD" }, + }, + }, + "Modern Dark": { + default: { + lift: { + M: { bg: "#404040", border: "#686868", notch: "#686868" }, + S: { bg: "#404040", border: "#686868", notch: "#686868" }, + XS: { bg: "#686868", border: "#686868", notch: "#686868" }, + }, + button: { bg: "#404040", border: "#686868", arrow: "#969696" }, + }, + hover: { + lift: { + M: { bg: "#686868", border: "#686868", notch: "#404040" }, + S: { bg: "#686868", border: "#686868", notch: "#404040" }, + XS: { bg: "#686868", border: "#686868", notch: "#686868" }, + }, + button: { bg: "#686868", border: "#686868", arrow: "#404040" }, + }, + pressed: { + lift: { + M: { bg: "#686868", border: "#686868", notch: "#404040" }, + S: { bg: "#686868", border: "#686868", notch: "#404040" }, + XS: { bg: "#686868", border: "#686868", notch: "#686868" }, + }, + button: { bg: "#686868", border: "#686868", arrow: "#404040" }, + }, + }, +}; + +export const scrollSizePixels: Record< + ScrollSize, + { + railOuter: number; + railInner: number; + notch: number; + radius: number; + frameCross: number; + button: number; + gap: number; + hasNotching: boolean; + } +> = { + M: { railOuter: 13, railInner: 13, notch: 5, radius: 1, frameCross: 13, button: 13, gap: 1, hasNotching: true }, + S: { railOuter: 8, railInner: 8, notch: 3, radius: 1, frameCross: 8, button: 13, gap: 1, hasNotching: true }, + XS: { railOuter: 9, railInner: 5, notch: 0, radius: 20, frameCross: 8, button: 13, gap: 1, hasNotching: false }, +}; diff --git a/storybook/source/data/slider.ts b/storybook/source/data/slider.ts new file mode 100644 index 0000000000..1c145860c0 --- /dev/null +++ b/storybook/source/data/slider.ts @@ -0,0 +1,125 @@ +import { type PluginTheme } from "../components/shared/pluginTheme.ts"; + +type SliderThumb = { + size: number; + fill: string; + stroke: string; + strokeWidth: number; + shadow?: string; +}; + +type SliderLabel = { + color: string; + fontSize: number; + lineHeight: number; + letterSpacing: number; +}; + +type SliderThemeTokens = { + offTrack: string; + onTrack: string; + thumb: SliderThumb; + label: SliderLabel; +}; + +export const sliderTokens: Record = { + Light: { + offTrack: "#C0C0C0", + onTrack: "rgba(0, 0, 0, 0.80)", + thumb: { + size: 12, + fill: "#FFFFFF", + stroke: "rgba(0, 0, 0, 0.80)", + strokeWidth: 1, + }, + label: { + color: "rgba(0, 0, 0, 0.80)", + fontSize: 11, + lineHeight: 14, + letterSpacing: 0.22, + }, + }, + "Light Classic": { + offTrack: "#CFCFCF", + onTrack: "#444444", + thumb: { + size: 12, + fill: "#FFFFFF", + stroke: "rgba(0, 0, 0, 0.80)", + strokeWidth: 1, + }, + label: { + color: "#444444", + fontSize: 11, + lineHeight: 14, + letterSpacing: 0.22, + }, + }, + Dark: { + offTrack: "#666666", + onTrack: "rgba(255, 255, 255, 0.80)", + thumb: { + size: 12, + fill: "#333333", + stroke: "#FFFFFF", + strokeWidth: 1, + }, + label: { + color: "rgba(255, 255, 255, 0.80)", + fontSize: 11, + lineHeight: 14, + letterSpacing: 0.22, + }, + }, + "Dark Contrast": { + offTrack: "#696969", + onTrack: "#E8E8E8", + thumb: { + size: 12, + fill: "#1E1E1E", + stroke: "#FFFFFF", + strokeWidth: 1, + }, + label: { + color: "#E8E8E8", + fontSize: 11, + lineHeight: 14, + letterSpacing: 0.22, + }, + }, + "Modern Light": { + offTrack: "#E1E1E1", + onTrack: "#4473CA", + thumb: { + size: 18, + fill: "#4473CA", + stroke: "#FFFFFF", + strokeWidth: 3, + shadow: "0 4px 12px rgba(0, 32, 51, 0.10), 0 8px 100px rgba(0, 32, 51, 0.14)", + }, + label: { + color: "#383838", + fontSize: 12, + lineHeight: 16, + letterSpacing: 0.24, + }, + }, + "Modern Dark": { + offTrack: "#686868", + onTrack: "#4A7BE0", + thumb: { + size: 18, + fill: "#4A7BE0", + stroke: "#FFFFFF", + strokeWidth: 3, + shadow: "0 4px 12px rgba(0, 32, 51, 0.10), 0 8px 100px rgba(0, 32, 51, 0.14)", + }, + label: { + color: "#F3F3F3", + fontSize: 12, + lineHeight: 16, + letterSpacing: 0.24, + }, + }, +}; + diff --git a/storybook/source/data/switches.ts b/storybook/source/data/switches.ts new file mode 100644 index 0000000000..2ee011409c --- /dev/null +++ b/storybook/source/data/switches.ts @@ -0,0 +1,102 @@ +import { type PluginTheme } from "../components/shared/pluginTheme.ts"; + +type SwitchVisual = { + track: string; + trackBorder?: string; + thumb: string; + opacity?: number; +}; + +type SwitchStateTokens = { + off: SwitchVisual; + on: SwitchVisual; +}; + +export type SwitchState = "default" | "hover" | "disabled"; + +export const switchTokens: Record> = { + Light: { + default: { + off: { track: "#C0C0C0", thumb: "#FFFFFF" }, + on: { track: "rgba(0, 0, 0, 0.80)", thumb: "#FFFFFF" }, + }, + hover: { + off: { track: "#C0C0C0", thumb: "#FFFFFF" }, + on: { track: "rgba(0, 0, 0, 0.80)", thumb: "#FFFFFF" }, + }, + disabled: { + off: { track: "#EFEFEF", thumb: "#FFFFFF" }, + on: { track: "rgba(0, 0, 0, 0.50)", thumb: "#FFFFFF" }, + }, + }, + "Light Classic": { + default: { + off: { track: "#CFCFCF", thumb: "#FFFFFF" }, + on: { track: "#444444", thumb: "#FFFFFF" }, + }, + hover: { + off: { track: "#CFCFCF", thumb: "#FFFFFF" }, + on: { track: "#444444", thumb: "#FFFFFF" }, + }, + disabled: { + off: { track: "#F1F1F1", thumb: "#FFFFFF" }, + on: { track: "#A5A5A5", thumb: "#FFFFFF" }, + }, + }, + Dark: { + default: { + off: { track: "#666666", thumb: "#333333" }, + on: { track: "rgba(255, 255, 255, 0.80)", thumb: "#333333" }, + }, + hover: { + off: { track: "#666666", thumb: "#333333" }, + on: { track: "rgba(255, 255, 255, 0.80)", thumb: "#333333" }, + }, + disabled: { + off: { track: "#505050", thumb: "#333333" }, + on: { track: "rgba(255, 255, 255, 0.50)", thumb: "#333333" }, + }, + }, + "Dark Contrast": { + default: { + off: { track: "#696969", thumb: "#1E1E1E" }, + on: { track: "#E8E8E8", thumb: "#1E1E1E" }, + }, + hover: { + off: { track: "#696969", thumb: "#1E1E1E" }, + on: { track: "#E8E8E8", thumb: "#1E1E1E" }, + }, + disabled: { + off: { track: "#2A2A2A", thumb: "#1E1E1E" }, + on: { track: "#888888", thumb: "#1E1E1E" }, + }, + }, + "Modern Light": { + default: { + off: { track: "#FFFFFF", trackBorder: "#7F7F7F", thumb: "#7F7F7F" }, + on: { track: "#4473CA", thumb: "#FFFFFF" }, + }, + hover: { + off: { track: "#FFFFFF", trackBorder: "#7F7F7F", thumb: "#7F7F7F" }, + on: { track: "#4473CA", thumb: "#FFFFFF" }, + }, + disabled: { + off: { track: "#FFFFFF", trackBorder: "#7F7F7F", thumb: "#7F7F7F", opacity: 0.4 }, + on: { track: "#4473CA", thumb: "#FFFFFF", opacity: 0.4 }, + }, + }, + "Modern Dark": { + default: { + off: { track: "#404040", trackBorder: "#969696", thumb: "#969696" }, + on: { track: "#4A7BE0", thumb: "#404040" }, + }, + hover: { + off: { track: "#404040", trackBorder: "#969696", thumb: "#969696" }, + on: { track: "#4A7BE0", thumb: "#404040" }, + }, + disabled: { + off: { track: "#404040", trackBorder: "#969696", thumb: "#969696", opacity: 0.4 }, + on: { track: "#4A7BE0", thumb: "#404040", opacity: 0.4 }, + }, + }, +}; diff --git a/storybook/source/data/tabs.ts b/storybook/source/data/tabs.ts new file mode 100644 index 0000000000..482b14dab3 --- /dev/null +++ b/storybook/source/data/tabs.ts @@ -0,0 +1,75 @@ +import type { PluginTheme } from "../components/shared/pluginTheme.ts"; + +type TabsTypography = { + fontSize: number; + fontWeight: number; + lineHeight: number; + letterSpacing: number; +}; + +export type TabsThemeTokens = { + border: string; + text: string; + unselectedBg: string; + selectedBg: string; + hoverBg: string; + typography: TabsTypography; + indicatorColor?: string; + indicatorHeight?: number; +}; + +export const tabsByTheme: Record = { + Light: { + border: "#C0C0C0", + text: "rgba(0, 0, 0, 0.8)", + unselectedBg: "#EFEFEF", + selectedBg: "#F7F7F7", + hoverBg: "#F9F9F9", + typography: { fontSize: 11, fontWeight: 400, lineHeight: 16, letterSpacing: 0.22 }, + }, + "Light Classic": { + border: "#CFCFCF", + text: "#444444", + unselectedBg: "#F1F1F1", + selectedBg: "#F1F1F1", + hoverBg: "#D8DADC", + typography: { fontSize: 11, fontWeight: 400, lineHeight: 16, letterSpacing: 0.22 }, + }, + Dark: { + border: "#666666", + text: "rgba(255, 255, 255, 0.8)", + unselectedBg: "#505050", + selectedBg: "#404040", + hoverBg: "#555555", + typography: { fontSize: 11, fontWeight: 400, lineHeight: 16, letterSpacing: 0.22 }, + }, + "Dark Contrast": { + border: "#696969", + text: "#E8E8E8", + unselectedBg: "#2A2A2A", + selectedBg: "#2A2A2A", + hoverBg: "#424242", + typography: { fontSize: 11, fontWeight: 400, lineHeight: 16, letterSpacing: 0.22 }, + }, + "Modern Light": { + border: "#EAEAEA", + text: "#383838", + unselectedBg: "#F3F3F3", + selectedBg: "#FFFFFF", + hoverBg: "#F9F9F9", + typography: { fontSize: 12, fontWeight: 500, lineHeight: 20, letterSpacing: 0.24 }, + indicatorColor: "#4473CA", + indicatorHeight: 3, + }, + "Modern Dark": { + border: "#585858", + text: "#F3F3F3", + unselectedBg: "#222222", + selectedBg: "#404040", + hoverBg: "#585858", + typography: { fontSize: 12, fontWeight: 500, lineHeight: 20, letterSpacing: 0.24 }, + indicatorColor: "#4A7BE0", + indicatorHeight: 3, + }, +}; + diff --git a/storybook/source/data/text-area.ts b/storybook/source/data/text-area.ts new file mode 100644 index 0000000000..048de68825 --- /dev/null +++ b/storybook/source/data/text-area.ts @@ -0,0 +1,151 @@ +import { type PluginTheme } from "../components/shared/pluginTheme.ts"; + +type TextAreaTypography = { + fontSize: number; + lineHeight: number; + letterSpacing: number; +}; + +export type TextAreaTokens = { + background: string; + border: string; + hoverBorder: string; + disabledBackground: string; + disabledOpacity: number; + textColor: string; + disabledTextColor: string; + textTypography: TextAreaTypography; + labelColor: string; + labelWeight: number; + labelTypography: TextAreaTypography; + captionColor: string; + captionTypography: TextAreaTypography; + copyIconColor: string; + copyIconStyle: "classic" | "modern"; + scrollTrack: string; + scrollThumb: string; + radius: number; +}; + +export const textAreaTokens: Record = { + Light: { + background: "#FFFFFF", + border: "#C0C0C0", + hoverBorder: "#848484", + disabledBackground: "#EFEFEF", + disabledOpacity: 0.5, + textColor: "rgba(0, 0, 0, 0.8)", + disabledTextColor: "rgba(0, 0, 0, 0.8)", + textTypography: { fontSize: 11, lineHeight: 14, letterSpacing: 0.22 }, + labelColor: "rgba(0, 0, 0, 0.8)", + labelWeight: 700, + labelTypography: { fontSize: 11, lineHeight: 16, letterSpacing: 0.22 }, + captionColor: "rgba(0, 0, 0, 0.4)", + captionTypography: { fontSize: 10, lineHeight: 12, letterSpacing: 0.2 }, + copyIconColor: "rgba(0, 0, 0, 0.8)", + copyIconStyle: "classic", + scrollTrack: "transparent", + scrollThumb: "#E0E0E0", + radius: 2, + }, + "Light Classic": { + background: "#FFFFFF", + border: "#CFCFCF", + hoverBorder: "#848484", + disabledBackground: "#F1F1F1", + disabledOpacity: 0.5, + textColor: "#444444", + disabledTextColor: "#444444", + textTypography: { fontSize: 11, lineHeight: 14, letterSpacing: 0.22 }, + labelColor: "#444444", + labelWeight: 700, + labelTypography: { fontSize: 11, lineHeight: 16, letterSpacing: 0.22 }, + captionColor: "#A5A5A5", + captionTypography: { fontSize: 10, lineHeight: 12, letterSpacing: 0.2 }, + copyIconColor: "#444444", + copyIconStyle: "classic", + scrollTrack: "transparent", + scrollThumb: "#CFCFCF", + radius: 2, + }, + Dark: { + background: "#333333", + border: "#666666", + hoverBorder: "#CCCCCC", + disabledBackground: "#505050", + disabledOpacity: 0.5, + textColor: "rgba(255, 255, 255, 0.8)", + disabledTextColor: "rgba(255, 255, 255, 0.8)", + textTypography: { fontSize: 11, lineHeight: 14, letterSpacing: 0.22 }, + labelColor: "rgba(255, 255, 255, 0.8)", + labelWeight: 700, + labelTypography: { fontSize: 11, lineHeight: 16, letterSpacing: 0.22 }, + captionColor: "rgba(255, 255, 255, 0.4)", + captionTypography: { fontSize: 10, lineHeight: 12, letterSpacing: 0.2 }, + copyIconColor: "rgba(255, 255, 255, 0.8)", + copyIconStyle: "classic", + scrollTrack: "transparent", + scrollThumb: "#616161", + radius: 2, + }, + "Dark Contrast": { + background: "#1E1E1E", + border: "#696969", + hoverBorder: "#B8B8B8", + disabledBackground: "#2A2A2A", + disabledOpacity: 0.5, + textColor: "#E8E8E8", + disabledTextColor: "#E8E8E8", + textTypography: { fontSize: 11, lineHeight: 14, letterSpacing: 0.22 }, + labelColor: "#E8E8E8", + labelWeight: 700, + labelTypography: { fontSize: 11, lineHeight: 16, letterSpacing: 0.22 }, + captionColor: "#B8B8B8", + captionTypography: { fontSize: 10, lineHeight: 12, letterSpacing: 0.2 }, + copyIconColor: "#E8E8E8", + copyIconStyle: "classic", + scrollTrack: "transparent", + scrollThumb: "#616161", + radius: 2, + }, + "Modern Light": { + background: "#FFFFFF", + border: "#E1E1E1", + hoverBorder: "#4473CA", + disabledBackground: "#F3F3F3", + disabledOpacity: 1, + textColor: "#383838", + disabledTextColor: "rgba(0, 0, 0, 0.2)", + textTypography: { fontSize: 12, lineHeight: 16, letterSpacing: 0.24 }, + labelColor: "#383838", + labelWeight: 400, + labelTypography: { fontSize: 12, lineHeight: 16, letterSpacing: 0.24 }, + captionColor: "rgba(0, 0, 0, 0.2)", + captionTypography: { fontSize: 10, lineHeight: 12, letterSpacing: 0.2 }, + copyIconColor: "#383838", + copyIconStyle: "modern", + scrollTrack: "transparent", + scrollThumb: "#E1E1E1", + radius: 2, + }, + "Modern Dark": { + background: "#404040", + border: "#686868", + hoverBorder: "#4A7BE0", + disabledBackground: "#2A2A2A", + disabledOpacity: 1, + textColor: "#F3F3F3", + disabledTextColor: "rgba(243, 243, 243, 0.4)", + textTypography: { fontSize: 12, lineHeight: 16, letterSpacing: 0.24 }, + labelColor: "#F3F3F3", + labelWeight: 400, + labelTypography: { fontSize: 12, lineHeight: 16, letterSpacing: 0.24 }, + captionColor: "rgba(243, 243, 243, 0.4)", + captionTypography: { fontSize: 10, lineHeight: 12, letterSpacing: 0.2 }, + copyIconColor: "#EAEAEA", + copyIconStyle: "modern", + scrollTrack: "transparent", + scrollThumb: "#686868", + radius: 2, + }, +}; diff --git a/storybook/source/data/text-field.ts b/storybook/source/data/text-field.ts new file mode 100644 index 0000000000..b629baec16 --- /dev/null +++ b/storybook/source/data/text-field.ts @@ -0,0 +1,166 @@ +import { type PluginTheme } from "../components/shared/pluginTheme.ts"; + +type TextFieldTypography = { + fontSize: number; + lineHeight: number; + letterSpacing: number; +}; + +export type TextFieldTokens = { + radius: number; + background: string; + border: string; + hoverBorder: string; + focusBorder: string; + errorBorder: string; + disabledBackground: string; + disabledOpacity: number; + titleColor: string; + titleWeight: number; + captionColor: string; + errorTextColor: string; + placeholderColor: string; + valueColor: string; + disabledTextColor: string; + cursorColor: string; + iconColor: string; + hiddenDotColor: string; + typography: TextFieldTypography; + captionTypography: TextFieldTypography; +}; + +export const textFieldTokens: Record = { + Light: { + radius: 1, + background: "#FFFFFF", + border: "#C0C0C0", + hoverBorder: "#848484", + focusBorder: "#848484", + errorBorder: "#F62211", + disabledBackground: "#EFEFEF", + disabledOpacity: 0.5, + titleColor: "rgba(0, 0, 0, 0.80)", + titleWeight: 700, + captionColor: "rgba(0, 0, 0, 0.40)", + errorTextColor: "#F62211", + placeholderColor: "rgba(0, 0, 0, 0.40)", + valueColor: "rgba(0, 0, 0, 0.80)", + disabledTextColor: "rgba(0, 0, 0, 0.80)", + cursorColor: "rgba(0, 0, 0, 0.80)", + iconColor: "rgba(0, 0, 0, 0.80)", + hiddenDotColor: "rgba(0, 0, 0, 0.80)", + typography: { fontSize: 11, lineHeight: 16, letterSpacing: 0.22 }, + captionTypography: { fontSize: 10, lineHeight: 12, letterSpacing: 0.2 }, + }, + "Light Classic": { + radius: 1, + background: "#FFFFFF", + border: "#CFCFCF", + hoverBorder: "#848484", + focusBorder: "#848484", + errorBorder: "#D9534F", + disabledBackground: "#F1F1F1", + disabledOpacity: 0.5, + titleColor: "#444444", + titleWeight: 700, + captionColor: "#A5A5A5", + errorTextColor: "#D9534F", + placeholderColor: "#A5A5A5", + valueColor: "#444444", + disabledTextColor: "#444444", + cursorColor: "#444444", + iconColor: "#444444", + hiddenDotColor: "#444444", + typography: { fontSize: 11, lineHeight: 16, letterSpacing: 0.22 }, + captionTypography: { fontSize: 10, lineHeight: 12, letterSpacing: 0.2 }, + }, + Dark: { + radius: 1, + background: "#333333", + border: "#666666", + hoverBorder: "#CCCCCC", + focusBorder: "#CCCCCC", + errorBorder: "#F62211", + disabledBackground: "#505050", + disabledOpacity: 0.5, + titleColor: "rgba(255, 255, 255, 0.80)", + titleWeight: 700, + captionColor: "rgba(255, 255, 255, 0.40)", + errorTextColor: "#F62211", + placeholderColor: "rgba(255, 255, 255, 0.40)", + valueColor: "rgba(255, 255, 255, 0.80)", + disabledTextColor: "rgba(255, 255, 255, 0.80)", + cursorColor: "rgba(255, 255, 255, 0.80)", + iconColor: "rgba(255, 255, 255, 0.80)", + hiddenDotColor: "rgba(255, 255, 255, 0.80)", + typography: { fontSize: 11, lineHeight: 16, letterSpacing: 0.22 }, + captionTypography: { fontSize: 10, lineHeight: 12, letterSpacing: 0.2 }, + }, + "Dark Contrast": { + radius: 1, + background: "#1E1E1E", + border: "#696969", + hoverBorder: "#B8B8B8", + focusBorder: "#B8B8B8", + errorBorder: "#F62211", + disabledBackground: "#2A2A2A", + disabledOpacity: 0.5, + titleColor: "#E8E8E8", + titleWeight: 700, + captionColor: "rgba(232, 232, 232, 0.50)", + errorTextColor: "#F62211", + placeholderColor: "rgba(232, 232, 232, 0.55)", + valueColor: "#E8E8E8", + disabledTextColor: "#E8E8E8", + cursorColor: "#E8E8E8", + iconColor: "#E8E8E8", + hiddenDotColor: "#E8E8E8", + typography: { fontSize: 11, lineHeight: 16, letterSpacing: 0.22 }, + captionTypography: { fontSize: 10, lineHeight: 12, letterSpacing: 0.2 }, + }, + "Modern Light": { + radius: 4, + background: "#FFFFFF", + border: "#E1E1E1", + hoverBorder: "#4473CA", + focusBorder: "#4473CA", + errorBorder: "rgba(242, 61, 61, 0.80)", + disabledBackground: "#F3F3F3", + disabledOpacity: 1, + titleColor: "#383838", + titleWeight: 400, + captionColor: "rgba(0, 0, 0, 0.20)", + errorTextColor: "rgba(242, 61, 61, 0.80)", + placeholderColor: "rgba(0, 0, 0, 0.20)", + valueColor: "#383838", + disabledTextColor: "rgba(0, 0, 0, 0.20)", + cursorColor: "#383838", + iconColor: "#383838", + hiddenDotColor: "#383838", + typography: { fontSize: 12, lineHeight: 16, letterSpacing: 0.24 }, + captionTypography: { fontSize: 10, lineHeight: 12, letterSpacing: 0.2 }, + }, + "Modern Dark": { + radius: 4, + background: "#404040", + border: "#686868", + hoverBorder: "#4A7BE0", + focusBorder: "#4A7BE0", + errorBorder: "rgba(242, 61, 61, 0.80)", + disabledBackground: "#222222", + disabledOpacity: 1, + titleColor: "#F3F3F3", + titleWeight: 400, + captionColor: "rgba(243, 243, 243, 0.40)", + errorTextColor: "rgba(242, 61, 61, 0.80)", + placeholderColor: "rgba(243, 243, 243, 0.40)", + valueColor: "#F3F3F3", + disabledTextColor: "rgba(243, 243, 243, 0.40)", + cursorColor: "#F3F3F3", + iconColor: "#EAEAEA", + hiddenDotColor: "#F3F3F3", + typography: { fontSize: 12, lineHeight: 16, letterSpacing: 0.24 }, + captionTypography: { fontSize: 10, lineHeight: 12, letterSpacing: 0.2 }, + }, +}; + diff --git a/storybook/source/data/theme-tokens.ts b/storybook/source/data/theme-tokens.ts new file mode 100644 index 0000000000..210b416627 --- /dev/null +++ b/storybook/source/data/theme-tokens.ts @@ -0,0 +1,50 @@ +export const themeTokens = { + "Light": { + pageBg: '#FFFFFF', + pageSurface: '#F7F7F7', + pageSurfaceAlt: '#F9F9F9', + pageBorder: '#DFDFDF', + pageFg: 'rgba(0, 0, 0, 0.80)', + pageMuted: 'rgba(0, 0, 0, 0.60)', + }, + "Light Classic": { + pageBg: '#FFFFFF', + pageSurface: '#F1F1F1', + pageSurfaceAlt: '#D8DADC', + pageBorder: '#CBCBCB', + pageFg: '#444444', + pageMuted: '#A5A5A5', + }, + "Modern Light": { + pageBg: '#FFFFFF', + pageSurface: '#F3F3F3', + pageSurfaceAlt: '#F9F9F9', + pageBorder: '#E1E1E1', + pageFg: '#383838', + pageMuted: undefined, + }, + "Modern Dark": { + pageBg: '#404040', + pageSurface: '#404040', + pageSurfaceAlt: '#585858', + pageBorder: '#686868', + pageFg: '#E8E8E8', + pageMuted: 'rgba(232, 232, 232, 0.70)', + }, + "Dark": { + pageBg: '#333333', + pageSurface: '#333333', + pageSurfaceAlt: '#555555', + pageBorder: '#666666', + pageFg: 'rgba(255, 255, 255, 0.80)', + pageMuted: 'rgba(255, 255, 255, 0.60)', + }, + "Dark Contrast": { + pageBg: '#1E1E1E', + pageSurface: '#1E1E1E', + pageSurfaceAlt: '#424242', + pageBorder: '#696969', + pageFg: '#E8E8E8', + pageMuted: '#B8B8B8', + }, +} as const; diff --git a/storybook/source/data/typography.ts b/storybook/source/data/typography.ts new file mode 100644 index 0000000000..f5ffb98f4a --- /dev/null +++ b/storybook/source/data/typography.ts @@ -0,0 +1,139 @@ +export type TypographyToken = { + id: string; + role: "Head1" | "Head2" | "Head3" | "Head4" | "Body" | "Caption"; + sizeLabel: string; + weightLabel: "Regular" | "Medium" | "Bold"; + fontFamily: string; + fontSize: number; + fontWeight: number; + lineHeight: number; + letterSpacing: number; +}; + +export const typographyTokens: TypographyToken[] = [ + { + id: "head1-regular", + role: "Head1", + sizeLabel: "15/20", + weightLabel: "Regular", + fontFamily: "Segoe UI", + fontSize: 15, + fontWeight: 400, + lineHeight: 20, + letterSpacing: 0.3, + }, + { + id: "head1-bold", + role: "Head1", + sizeLabel: "14/20", + weightLabel: "Bold", + fontFamily: "Segoe UI", + fontSize: 14, + fontWeight: 700, + lineHeight: 20, + letterSpacing: 0.28, + }, + { + id: "head2-bold", + role: "Head2", + sizeLabel: "14/16", + weightLabel: "Bold", + fontFamily: "Segoe UI", + fontSize: 14, + fontWeight: 700, + lineHeight: 20, + letterSpacing: 0.28, + }, + { + id: "head3-medium", + role: "Head3", + sizeLabel: "12/16", + weightLabel: "Medium", + fontFamily: "Arial", + fontSize: 12, + fontWeight: 500, + lineHeight: 20, + letterSpacing: 0.24, + }, + { + id: "head3-regular", + role: "Head3", + sizeLabel: "12/16", + weightLabel: "Regular", + fontFamily: "Arial", + fontSize: 12, + fontWeight: 400, + lineHeight: 16, + letterSpacing: 0.24, + }, + { + id: "head4-bold", + role: "Head4", + sizeLabel: "11/16", + weightLabel: "Bold", + fontFamily: "Segoe UI", + fontSize: 11, + fontWeight: 700, + lineHeight: 16, + letterSpacing: 0.22, + }, + { + id: "body-regular-16", + role: "Body", + sizeLabel: "11/16", + weightLabel: "Regular", + fontFamily: "Segoe UI", + fontSize: 11, + fontWeight: 400, + lineHeight: 16, + letterSpacing: 0.22, + }, + { + id: "body-regular-14", + role: "Body", + sizeLabel: "11/14", + weightLabel: "Regular", + fontFamily: "Segoe UI", + fontSize: 11, + fontWeight: 400, + lineHeight: 14, + letterSpacing: 0.22, + }, + { + id: "caption-regular-11", + role: "Caption", + sizeLabel: "11/12", + weightLabel: "Regular", + fontFamily: "Segoe UI", + fontSize: 11, + fontWeight: 400, + lineHeight: 12, + letterSpacing: 0.22, + }, + { + id: "caption-regular-10", + role: "Caption", + sizeLabel: "10/14", + weightLabel: "Regular", + fontFamily: "Segoe UI", + fontSize: 10, + fontWeight: 400, + lineHeight: 12, + letterSpacing: 0.2, + }, +]; + +export const typographyContentExample = { + light: { + titleColor: "#333333", + bodyColor: "#333333", + captionColor: "#A3A9AE", + background: "#FFFFFF", + }, + dark: { + titleColor: "rgba(255, 255, 255, 0.8)", + bodyColor: "rgba(255, 255, 255, 0.8)", + captionColor: "rgba(255, 255, 255, 0.6)", + background: "#333333", + }, +} as const; diff --git a/storybook/source/stories/components/Cards.stories.js b/storybook/source/stories/components/Cards.stories.js new file mode 100644 index 0000000000..e7ef3e622f --- /dev/null +++ b/storybook/source/stories/components/Cards.stories.js @@ -0,0 +1,213 @@ +import { Card } from '../../components/Card.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +const DEFAULT_TITLE = + 'His English teacher says that he is a good pupil and a great student who always participates in class discussions and finishes his work carefully'; +const DEFAULT_TAGS = ['His', 'Her', 'Label', 'Label', 'Label', 'Label']; + +export default { + title: 'Components/Data Display/Cards', + tags: ['autodocs'], + args: { + state: 'default', + interactive: true, + stretch: false, + minWidth: 236, + themeMode: 'Auto', + openType: 'openWithButton', + startExpanded: false, + title: DEFAULT_TITLE, + helperText: 'Text here', + actionLabel: 'Button', + tags: DEFAULT_TAGS, + }, + argTypes: { + openType: { + control: 'select', + options: ['openWithButton', 'openWithText'], + description: 'Expanded layout: tags + action button, or helper text + action button', + }, + startExpanded: { + control: 'boolean', + description: 'Open the card on first render', + }, + state: { + control: 'select', + options: ['default', 'hover'], + description: 'Static visual state used when interactive mode is off', + }, + interactive: { + control: 'boolean', + description: 'Allow hover and expand/collapse interaction in the canvas', + }, + stretch: { control: 'boolean', description: 'Let the card fill the available row width' }, + minWidth: { control: { type: 'number' }, description: 'Minimum card width' }, + maxWidth: { control: { type: 'number' }, description: 'Maximum card width' }, + title: { control: 'text', description: 'Main title shown in collapsed and expanded states' }, + helperText: { control: 'text', description: 'Helper copy used in the text-based expanded variant' }, + actionLabel: { control: 'text', description: 'Label for the action button inside the expanded card' }, + tags: { control: 'object', description: 'Tag pills used in the tags-and-button expanded variant' }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + }, + theme: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: + 'Collapsible information cards with a compact closed state and two expanded patterns: helper text or tag list plus action button.', + }, + }, + }, +}; + +function attachCardInteractivity(el) { + // Chips + el.querySelectorAll('[data-chip="true"]').forEach((chip) => { + const restBg = chip.dataset.restBg; + const hoverBg = chip.dataset.hoverBg; + chip.addEventListener('mouseenter', () => { chip.style.background = hoverBg; }); + chip.addEventListener('mouseleave', () => { chip.style.background = restBg; }); + }); + + // Action button + const btn = el.querySelector('button[data-btn-type]'); + if (btn) { + const restBg = btn.dataset.restBg; + const hoverBg = btn.dataset.hoverBg; + let hovered = false; + let pressTimer = null; + let pressStart = 0; + + btn.addEventListener('mouseenter', () => { + hovered = true; + if (!pressTimer) btn.style.background = hoverBg; + }); + btn.addEventListener('mouseleave', () => { + hovered = false; + if (!pressTimer) btn.style.background = restBg; + }); + btn.addEventListener('mousedown', () => { + pressStart = Date.now(); + if (pressTimer) { clearTimeout(pressTimer); pressTimer = null; } + btn.style.background = hoverBg; // use hover as pressed (no separate pressed token) + }); + btn.addEventListener('mouseup', () => { + const elapsed = Date.now() - pressStart; + const delay = Math.max(0, 150 - elapsed); + pressTimer = setTimeout(() => { + pressTimer = null; + btn.style.background = hovered ? hoverBg : restBg; + }, delay); + }); + } +} + +/** Interactive card that toggles between close and openType on title-row click. */ +function makeInteractiveCard({ title, helperText, actionLabel, tags, stretch, minWidth, openType, startExpanded, theme }) { + const el = document.createElement('div'); + el.style.display = 'contents'; + + let isOpen = Boolean(startExpanded); + const expandedType = openType || 'openWithButton'; + + const update = () => { + const type = isOpen ? expandedType : 'close'; + el.innerHTML = Card({ type, state: 'default', title, helperText, actionLabel, tags, minWidth: stretch ? undefined : minWidth, theme }); + if (stretch) { + const card = el.querySelector('.ui-card'); + if (card) card.style.width = '100%'; + } + const titleRow = el.querySelector('.ui-card > div'); + if (titleRow) { + titleRow.style.cursor = 'pointer'; + titleRow.addEventListener('click', () => { + isOpen = !isOpen; + update(); + }); + } + attachCardInteractivity(el); + }; + + update(); + return el; +} + +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveCard({ ...args, theme }); + }, +}; + +export const CloseVariant = { + args: { openType: 'openWithButton', startExpanded: false, interactive: false }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Card({ ...args, type: 'close', theme }); + }, + parameters: { + docs: { + description: { + story: 'Collapsed card state with title preview only.', + }, + }, + }, +}; + +export const OpenWithTagsAndButton = { + args: { openType: 'openWithButton', startExpanded: true, interactive: false }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Card({ ...args, type: 'openWithButton', theme }); + }, + parameters: { + docs: { + description: { + story: 'Expanded card with tags and a single action button.', + }, + }, + }, +}; + +export const OpenWithTextAndButton = { + args: { openType: 'openWithText', startExpanded: true, interactive: false }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Card({ ...args, type: 'openWithText', theme }); + }, + parameters: { + docs: { + description: { + story: 'Expanded card with helper copy and a single action button.', + }, + }, + }, +}; + +export const StretchLayout = { + args: { stretch: true, interactive: false }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const { title, helperText, actionLabel, tags } = args; + const narrow = Card({ type: 'close', title, helperText, actionLabel, tags, minWidth: 236, theme }); + const wide = Card({ type: 'close', title, helperText, actionLabel, tags, minWidth: 236, theme }); + return `
+
${narrow}
+
${wide.replace('width:236px', 'width:100%')}
+
`; + }, + parameters: { + docs: { + description: { + story: 'Compare the same card in narrow and wide containers.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/Checkbox.stories.js b/storybook/source/stories/components/Checkbox.stories.js new file mode 100644 index 0000000000..ed99c005ee --- /dev/null +++ b/storybook/source/stories/components/Checkbox.stories.js @@ -0,0 +1,145 @@ +import { Checkbox } from '../../components/Checkbox.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +export default { + title: 'Components/Form/Checkbox', + tags: ['autodocs'], + args: { + label: 'Checkbox', + selected: 'no', + state: 'default', + interactive: true, + isHovered: false, + truncate: false, + themeMode: 'Auto', + }, + argTypes: { + label: { control: 'text', description: 'Visible checkbox label' }, + selected: { + control: 'select', + options: ['no', 'yes', 'partial'], + description: 'Unchecked, checked, or indeterminate state', + }, + state: { + control: 'select', + options: ['default', 'hover', 'disabled'], + description: 'Rendered visual state', + }, + interactive: { + control: 'boolean', + description: 'Allow hover and toggle behavior directly in the canvas', + }, + isHovered: { + control: 'boolean', + description: 'Force hover appearance for review', + }, + truncate: { + control: 'boolean', + description: 'Truncate long label with ellipsis instead of wrapping', + }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + table: { defaultValue: { summary: 'Auto' } }, + }, + theme: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: + 'Checkbox control for independent on/off selections, including checked, indeterminate, and disabled states.', + }, + }, + }, +}; + +const CYCLE = { no: 'yes', yes: 'partial', partial: 'no' }; + +/** Build an interactive checkbox element that responds to hover and click. */ +function makeCheckbox({ label, selected: initialSelected, state, interactive, isHovered, truncate, theme }) { + const isDisabled = state === 'disabled'; + + if (!interactive || isDisabled) { + const el = document.createElement('div'); + el.style.display = 'contents'; + const effectiveState = isDisabled ? 'disabled' : (isHovered ? 'hover' : state); + el.innerHTML = Checkbox({ label, selected: initialSelected, state: effectiveState, theme, truncate }); + return el; + } + + const el = document.createElement('div'); + el.style.display = 'contents'; + let currentSelected = initialSelected; + let hovered = false; + + const update = () => { + el.innerHTML = Checkbox({ + label, + selected: currentSelected, + state: hovered ? 'hover' : 'default', + theme, + truncate, + }); + }; + + el.addEventListener('mouseenter', () => { hovered = true; update(); }); + el.addEventListener('mouseleave', () => { hovered = false; update(); }); + el.addEventListener('click', () => { currentSelected = CYCLE[currentSelected]; update(); }); + + update(); + return el; +} + +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeCheckbox({ ...args, theme }); + }, +}; + +export const Checked = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeCheckbox({ ...args, label: 'Selected', selected: 'yes', state: 'default', interactive: true, theme }); + }, + parameters: { + docs: { + description: { + story: 'Interactive checked-state demo for an active standalone selection.', + }, + }, + }, +}; + +export const Disabled = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeCheckbox({ label: 'Disabled', selected: 'no', state: 'disabled', interactive: false, isHovered: false, truncate: false, theme }); + }, + parameters: { + docs: { + description: { + story: 'Disabled checkbox that preserves layout without allowing selection changes.', + }, + }, + }, +}; + +export const Indeterminate = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeCheckbox({ ...args, label: 'Indeterminate', selected: 'partial', state: 'default', interactive: true, theme }); + }, + parameters: { + docs: { + description: { + story: 'Interactive indeterminate-state demo for partial selection in grouped lists.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/ContextMenu.stories.js b/storybook/source/stories/components/ContextMenu.stories.js new file mode 100644 index 0000000000..a542e669ee --- /dev/null +++ b/storybook/source/stories/components/ContextMenu.stories.js @@ -0,0 +1,219 @@ +import { ContextMenu } from '../../components/ContextMenu.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +const mixedItems = [ + { id: '1', label: 'Menu item', type: 'iconLeft' }, + { id: '2', label: 'Menu item', type: 'iconsBoth' }, + { id: '3', label: 'Menu item', type: 'noIcon' }, + { id: '4', label: 'Disabled item', type: 'iconLeft', disabled: true }, +]; + +const iconLeftItems = [ + { id: '1', label: 'Menu item', type: 'iconLeft' }, + { id: '2', label: 'Another item', type: 'iconLeft' }, + { id: '3', label: 'Disabled item', type: 'iconLeft', disabled: true }, +]; + +const iconsBothItems = [ + { id: '1', label: 'Menu item', type: 'iconsBoth' }, + { id: '2', label: 'Submenu item', type: 'iconsBoth' }, + { id: '3', label: 'Disabled item', type: 'iconsBoth', disabled: true }, +]; + +const noIconItems = [ + { id: '1', label: 'Menu item', type: 'noIcon' }, + { id: '2', label: 'Another item', type: 'noIcon' }, + { id: '3', label: 'Disabled item', type: 'noIcon', disabled: true }, +]; + +const submenuItems = [ + { id: '1', label: 'Menu item', type: 'iconLeft' }, + { + id: '2', + label: 'Has submenu', + type: 'iconLeft', + items: [ + { id: '2-1', label: 'Submenu item 1', type: 'iconLeft' }, + { id: '2-2', label: 'Submenu item 2', type: 'iconLeft' }, + { id: '2-3', label: 'Disabled', type: 'iconLeft', disabled: true }, + ], + }, + { id: '3', label: 'Menu item', type: 'noIcon' }, + { id: '4', label: 'Disabled item', type: 'iconLeft', disabled: true }, +]; + +export default { + title: 'Components/Actions/Context Menu', + tags: ['autodocs'], + args: { + items: mixedItems, + interactive: true, + isHoveredIndex: undefined, + isClickedIndex: undefined, + themeMode: 'Auto', + }, + argTypes: { + items: { control: 'object', description: 'Menu items' }, + interactive: { control: 'boolean', description: 'Enable real hover/press in canvas' }, + isHoveredIndex: { + control: { type: 'number', min: 0 }, + description: 'Force-hover item by index (0-based) for docs preview', + }, + isClickedIndex: { + control: { type: 'number', min: 0 }, + description: 'Force-pressed item by index (0-based) for docs preview', + }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + table: { defaultValue: { summary: 'Auto' } }, + }, + theme: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: + 'Context menu for compact action lists. Includes plain items, left-icon items, submenu-style dual-icon items, and disabled rows.', + }, + }, + }, +}; + +function makeInteractiveMenu({ items, theme }) { + const el = document.createElement('div'); + el.style.display = 'contents'; + + let hoveredIndex = -1; + let openSubmenuId = null; + + const update = () => { + el.innerHTML = ContextMenu({ items, theme, isHoveredIndex: hoveredIndex, isClickedIndex: -1, defaultOpenId: openSubmenuId }); + + // Attach listeners to top-level item wrappers (direct children of the menu div) + const menu = el.querySelector('div[style*="min-width:180px"]'); + if (!menu) return; + const itemDivs = Array.from(menu.children); + itemDivs.forEach((itemDiv, index) => { + const item = items[index]; + if (!item || item.disabled) return; + const hasSubmenu = Boolean(item.items && item.items.length > 0); + + if (hasSubmenu) { + itemDiv.addEventListener('mouseenter', () => { + hoveredIndex = index; + openSubmenuId = item.id; + update(); + }); + itemDiv.addEventListener('mouseleave', () => { + hoveredIndex = -1; + openSubmenuId = null; + update(); + }); + } else { + const btn = itemDiv.querySelector('button'); + if (!btn) return; + btn.addEventListener('mouseenter', () => { + hoveredIndex = index; + openSubmenuId = null; + update(); + }); + btn.addEventListener('mouseleave', () => { + hoveredIndex = -1; + update(); + }); + } + }); + }; + + update(); + return el; +} + +export const Default = { + args: { items: submenuItems, interactive: true }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveMenu({ items: args.items, theme }); + }, +}; + +export const IconLeftItems = { + args: { items: iconLeftItems }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveMenu({ items: args.items, theme }); + }, + parameters: { + docs: { + description: { + story: 'Context menu with icon-left items only.', + }, + }, + }, +}; + +export const IconsBothItems = { + args: { items: iconsBothItems }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveMenu({ items: args.items, theme }); + }, +}; + +export const NoIconItems = { + args: { items: noIconItems }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveMenu({ items: args.items, theme }); + }, +}; + +export const HoveredItem = { + args: { items: mixedItems, isHoveredIndex: 0, interactive: false }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return ContextMenu({ items: args.items, theme, isHoveredIndex: args.isHoveredIndex ?? 0, isClickedIndex: -1 }); + }, + parameters: { + docs: { + description: { + story: 'Force-hover on the first item. Switch theme via toolbar to preview all themes.', + }, + }, + }, +}; + +export const PressedItem = { + args: { items: mixedItems, isClickedIndex: 0, interactive: false }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return ContextMenu({ items: args.items, theme, isHoveredIndex: -1, isClickedIndex: args.isClickedIndex ?? 0 }); + }, + parameters: { + docs: { + description: { + story: 'Force-pressed on the first item. Switch theme via toolbar to preview all themes.', + }, + }, + }, +}; + +export const WithSubmenu = { + args: { items: submenuItems, interactive: false }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return ContextMenu({ items: args.items, theme, defaultOpenId: '2', isHoveredIndex: -1, isClickedIndex: -1 }); + }, + parameters: { + docs: { + description: { + story: 'Submenu expanded on «Has submenu» item. Switch theme in toolbar to preview across themes.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/DialogButtonsPrimary.stories.js b/storybook/source/stories/components/DialogButtonsPrimary.stories.js new file mode 100644 index 0000000000..e5492a95df --- /dev/null +++ b/storybook/source/stories/components/DialogButtonsPrimary.stories.js @@ -0,0 +1,316 @@ +import { resolveStoryTheme, pluginThemeOptions, makeInteractive } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +// ─── Design tokens ────────────────────────────────────────────────────────── + +const PRIMARY_TOKENS = { + 'Light': { + default: { bg: '#444444', text: '#FFFFFF', outline: 'none' }, + hover: { bg: '#1C1C1C', text: '#FFFFFF', outline: 'none' }, + pressed: { bg: '#1C1C1C', text: '#FFFFFF', outline: 'none' }, + disabled: { bg: 'rgba(0,0,0,0.50)', text: 'rgba(255,255,255,0.60)', outline: 'none' }, + loader: { bg: 'rgba(0,0,0,0.50)', text: '#FFFFFF', outline: 'none' }, + }, + 'Light Classic': { + default: { bg: '#7D858C', text: '#FFFFFF', outline: 'none' }, + hover: { bg: '#666D73', text: '#FFFFFF', outline: 'none' }, + pressed: { bg: '#666D73', text: '#FFFFFF', outline: 'none' }, + disabled: { bg: '#A5A5A5', text: 'rgba(255,255,255,0.60)', outline: 'none' }, + loader: { bg: '#A5A5A5', text: '#FFFFFF', outline: 'none' }, + }, + 'Dark': { + default: { bg: '#DDDDDD', text: '#333333', outline: 'none' }, + hover: { bg: '#FCFCFC', text: '#333333', outline: 'none' }, + pressed: { bg: '#FCFCFC', text: '#333333', outline: 'none' }, + disabled: { bg: 'rgba(255,255,255,0.50)', text: 'rgba(51,51,51,0.60)', outline: 'none' }, + loader: { bg: 'rgba(255,255,255,0.50)', text: '#333333', outline: 'none' }, + }, + 'Dark Contrast': { + default: { bg: '#E6E6E6', text: '#121212', outline: 'none' }, + hover: { bg: '#A6A6A6', text: '#121212', outline: 'none' }, + pressed: { bg: '#A6A6A6', text: '#121212', outline: 'none' }, + disabled: { bg: '#888888', text: 'rgba(18,18,18,0.60)', outline: 'none' }, + loader: { bg: '#888888', text: '#121212', outline: 'none' }, + }, + 'Modern Light': { + default: { bg: '#4473CA', text: '#FFFFFF', outline: 'none' }, + hover: { bg: '#2A5BB9', text: '#FFFFFF', outline: 'none' }, + pressed: { bg: '#1D4FAF', text: '#FFFFFF', outline: '1px solid #2A5BB9' }, + disabled: { bg: '#BFD0F5', text: 'rgba(255,255,255,0.70)', outline: 'none' }, + loader: { bg: '#BFD0F5', text: '#FFFFFF', outline: 'none' }, + }, + 'Modern Dark': { + default: { bg: '#4A7BE0', text: '#E8E8E8', outline: 'none' }, + hover: { bg: '#366CDA', text: '#E8E8E8', outline: 'none' }, + pressed: { bg: '#2A5BB9', text: '#E8E8E8', outline: '1px solid #4A7BE0' }, + disabled: { bg: '#375478', text: 'rgba(232,232,232,0.30)', outline: 'none' }, + loader: { bg: '#375478', text: '#E8E8E8', outline: 'none' }, + }, +}; + +// ─── Spinner SVG ───────────────────────────────────────────────────────────── + +const spinnerSvg = (color) => + ``; + +// ─── Render helper ──────────────────────────────────────────────────────────── + +function renderDialogButton({ label = 'Button', size = 24, state = 'default', scale = false, theme = 'Light' }) { + const map = PRIMARY_TOKENS; + const tk = (map[theme] ?? map['Light'])[state] ?? (map[theme] ?? map['Light'])['default']; + + const isLoader = state === 'loader'; + const isDisabled = state === 'disabled'; + const cursor = isLoader || isDisabled ? 'not-allowed' : 'pointer'; + const width = scale ? '100%' : 'auto'; + const isModern = theme.startsWith('Modern'); + const radius = isModern ? 4 : 1; + const fontSize = isModern ? 12 : 11; + const letterSpacing = isModern ? 0.24 : 0.22; + + const btnStyle = [ + `height:${size}px`, + `min-width:${isModern ? 48 : 80}px`, + `padding:0 ${isModern ? 12 : 32}px`, + `background:${tk.bg}`, + `border:none`, + `border-radius:${radius}px`, + `outline:${tk.outline}`, + `outline-offset:-1px`, + `display:inline-flex`, + `align-items:center`, + `justify-content:center`, + `box-sizing:border-box`, + `cursor:${cursor}`, + `width:${width}`, + ].join(';'); + + const textStyle = [ + `color:${tk.text}`, + `font-size:${fontSize}px`, + `font-family:Arial,Helvetica,sans-serif`, + `font-weight:700`, + `line-height:16px`, + `letter-spacing:${letterSpacing}px`, + `white-space:nowrap`, + `user-select:none`, + ].join(';'); + + const inner = isLoader + ? `` + : `${label}`; + + return ``; +} + +// ─── Wrapper helper ─────────────────────────────────────────────────────────── + +function Wrapper(children, isScale = false) { + return `
${children}
`; +} + +// ─── Meta ───────────────────────────────────────────────────────────────────── + +export default { + title: 'Components/Buttons/Dialog Buttons/Primary', + tags: ['autodocs'], + args: { + label: 'Button', + size: 24, + interactive: true, + isHovered: false, + isClicked: false, + isDisabled: false, + isLoading: false, + themeMode: 'Auto', + }, + argTypes: { + label: { + control: 'text', + description: 'Visible action label', + }, + size: { + control: 'select', + options: [22, 24], + description: 'Compact or regular dialog button height', + table: { defaultValue: { summary: '24' } }, + }, + interactive: { + control: 'boolean', + description: 'Allow the story to react to hover and click in the canvas', + table: { defaultValue: { summary: 'true' } }, + }, + isHovered: { + control: 'boolean', + description: 'Force hover appearance for visual review', + }, + isClicked: { + control: 'boolean', + description: 'Force pressed appearance for visual review', + }, + isDisabled: { + control: 'boolean', + description: 'Show the disabled state', + }, + isLoading: { + control: 'boolean', + description: 'Replace the label with the loading indicator', + }, + minWidth: { + control: 'text', + description: 'Override minimum button width (e.g. "120px")', + }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + table: { defaultValue: { summary: 'Auto' } }, + }, + theme: { table: { disable: true } }, + variant: { table: { disable: true } }, + scale: { table: { disable: true } }, + state: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: + 'Primary dialog action button for the main confirm action in modal footers and compact plugin flows.', + }, + }, + }, +}; + +// ─── Stories ────────────────────────────────────────────────────────────────── + +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const state = args.isDisabled ? 'disabled' : args.isLoading ? 'loader' : 'default'; + + return makeInteractive( + (hoverState) => renderDialogButton({ + label: args.label, + variant: 'primary', + size: args.size, + state: state !== 'default' ? state : hoverState, + theme, + }), + { disabled: state !== 'default' } + ); + }, +}; + +export const Hovered = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Wrapper( + renderDialogButton({ label: 'Button', size: 22, state: 'hover', theme }) + + renderDialogButton({ label: 'Button', size: 24, state: 'hover', theme }) + ); + }, + parameters: { + docs: { + description: { + story: 'Hover state for both sizes. Move the pointer over the buttons in the canvas for the live effect.', + }, + }, + }, +}; + +export const Clicked = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + + const makeClickDemo = (size) => { + const wrapper = document.createElement('div'); + wrapper.style.display = 'inline-block'; + + let pressTimer = null; + + const render = (state) => { + wrapper.innerHTML = renderDialogButton({ label: 'Button', size, state, theme }); + }; + + wrapper.addEventListener('mousedown', () => { + render('pressed'); + clearTimeout(pressTimer); + pressTimer = setTimeout(() => render('default'), 180); + }); + + render('default'); + return wrapper; + }; + + const container = document.createElement('div'); + container.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:16px;align-items:center;'; + container.appendChild(makeClickDemo(22)); + container.appendChild(makeClickDemo(24)); + return container; + }, + parameters: { + docs: { + description: { + story: 'Pressed-state demo. Click a button to preview the active press moment.', + }, + }, + }, +}; + +export const Disabled = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Wrapper( + renderDialogButton({ label: 'Button', size: 22, state: 'disabled', theme }) + + renderDialogButton({ label: 'Button', size: 24, state: 'disabled', theme }) + ); + }, + parameters: { + docs: { + description: { + story: 'Disabled buttons keep layout but should not invite interaction.', + }, + }, + }, +}; + +export const Loading = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return `` + + Wrapper( + renderDialogButton({ label: 'Button', size: 22, state: 'loader', theme }) + + renderDialogButton({ label: 'Button', size: 24, state: 'loader', theme }) + ); + }, + parameters: { + docs: { + description: { + story: 'Loading state while the action is in progress.', + }, + }, + }, +}; + +export const Scale = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Wrapper( + renderDialogButton({ label: 'Button', size: 22, state: 'default', scale: true, theme }) + + renderDialogButton({ label: 'Button', size: 24, state: 'default', scale: true, theme }), + true + ); + }, + parameters: { + docs: { + description: { + story: 'Full-width layout variant for dense footers or narrow dialog flows.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/DialogButtonsSecondary.stories.js b/storybook/source/stories/components/DialogButtonsSecondary.stories.js new file mode 100644 index 0000000000..1b587493d6 --- /dev/null +++ b/storybook/source/stories/components/DialogButtonsSecondary.stories.js @@ -0,0 +1,315 @@ +import { resolveStoryTheme, pluginThemeOptions, makeInteractive } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +// ─── Design tokens ────────────────────────────────────────────────────────── + +const SECONDARY_TOKENS = { + 'Light': { + default: { bg: '#FFFFFF', text: 'rgba(0,0,0,0.80)', outline: '1px solid #C0C0C0' }, + hover: { bg: '#E0E0E0', text: 'rgba(0,0,0,0.80)', outline: '1px solid #C0C0C0' }, + pressed: { bg: '#CBCBCB', text: 'rgba(0,0,0,0.80)', outline: '1px solid #C0C0C0' }, + disabled: { bg: '#EFEFEF', text: 'rgba(0,0,0,0.40)', outline: '1px solid #C0C0C0' }, + loader: { bg: '#EFEFEF', text: 'rgba(0,0,0,0.80)', outline: '1px solid #C0C0C0' }, + }, + 'Light Classic': { + default: { bg: '#FFFFFF', text: '#444444', outline: '1px solid #CFCFCF' }, + hover: { bg: '#D8DADC', text: '#444444', outline: '1px solid #CFCFCF' }, + pressed: { bg: '#7D858C', text: '#FFFFFF', outline: '1px solid #CFCFCF' }, + disabled: { bg: '#F1F1F1', text: '#A5A5A5', outline: '1px solid #CFCFCF' }, + loader: { bg: '#F1F1F1', text: '#444444', outline: '1px solid #CFCFCF' }, + }, + 'Dark': { + default: { bg: '#333333', text: 'rgba(255,255,255,0.80)', outline: '1px solid #666666' }, + hover: { bg: '#555555', text: 'rgba(255,255,255,0.80)', outline: '1px solid #666666' }, + pressed: { bg: '#606060', text: 'rgba(255,255,255,0.80)', outline: '1px solid #666666' }, + disabled: { bg: '#505050', text: 'rgba(255,255,255,0.40)', outline: '1px solid #666666' }, + loader: { bg: '#505050', text: 'rgba(255,255,255,0.80)', outline: '1px solid #666666' }, + }, + 'Dark Contrast': { + default: { bg: '#1E1E1E', text: '#E8E8E8', outline: '1px solid #696969' }, + hover: { bg: '#424242', text: '#E8E8E8', outline: '1px solid #696969' }, + pressed: { bg: '#666666', text: '#E8E8E8', outline: '1px solid #696969' }, + disabled: { bg: '#2A2A2A', text: 'rgba(0,0,0,0.20)', outline: '1px solid #696969' }, + loader: { bg: '#2A2A2A', text: '#E8E8E8', outline: '1px solid #696969' }, + }, + 'Modern Light': { + default: { bg: '#FFFFFF', text: '#383838', outline: '1px solid #E1E1E1' }, + hover: { bg: '#F9F9F9', text: '#383838', outline: '1px solid #E1E1E1' }, + pressed: { bg: '#EAEAEA', text: '#383838', outline: '1px solid #2A5BB9' }, + disabled: { bg: '#FFFFFF', text: 'rgba(56,56,56,0.40)', outline: '1px solid #E1E1E1' }, + loader: { bg: '#F3F3F3', text: '#383838', outline: '1px solid #E1E1E1' }, + }, + 'Modern Dark': { + default: { bg: '#404040', text: '#E8E8E8', outline: '1px solid #686868' }, + hover: { bg: '#585858', text: '#E8E8E8', outline: '1px solid #686868' }, + pressed: { bg: '#686868', text: '#E8E8E8', outline: '1px solid #4A7BE0' }, + disabled: { bg: '#343434', text: 'rgba(232,232,232,0.30)', outline: '1px solid #686868' }, + loader: { bg: '#343434', text: '#E8E8E8', outline: '1px solid #686868' }, + }, +}; + +// ─── Spinner SVG ───────────────────────────────────────────────────────────── + +const spinnerSvg = (color) => + ``; + +// ─── Render helper ──────────────────────────────────────────────────────────── + +function renderDialogButton({ label = 'Button', size = 24, state = 'default', scale = false, theme = 'Light' }) { + const map = SECONDARY_TOKENS; + const tk = (map[theme] ?? map['Light'])[state] ?? (map[theme] ?? map['Light'])['default']; + + const isLoader = state === 'loader'; + const isDisabled = state === 'disabled'; + const cursor = isLoader || isDisabled ? 'not-allowed' : 'pointer'; + const width = scale ? '100%' : 'auto'; + const isModern = theme.startsWith('Modern'); + const radius = isModern ? 4 : 1; + const fontSize = isModern ? 12 : 11; + const letterSpacing = isModern ? 0.24 : 0.22; + + const btnStyle = [ + `height:${size}px`, + `min-width:${isModern ? 48 : 80}px`, + `padding:0 ${isModern ? 12 : 32}px`, + `background:${tk.bg}`, + `border:none`, + `border-radius:${radius}px`, + `outline:${tk.outline}`, + `outline-offset:-1px`, + `display:inline-flex`, + `align-items:center`, + `justify-content:center`, + `box-sizing:border-box`, + `cursor:${cursor}`, + `width:${width}`, + ].join(';'); + + const textStyle = [ + `color:${tk.text}`, + `font-size:${fontSize}px`, + `font-family:Arial,Helvetica,sans-serif`, + `font-weight:700`, + `line-height:16px`, + `letter-spacing:${letterSpacing}px`, + `white-space:nowrap`, + `user-select:none`, + ].join(';'); + + const inner = isLoader + ? `` + : `${label}`; + + return ``; +} + +// ─── Wrapper helper ─────────────────────────────────────────────────────────── + +function Wrapper(children, isScale = false) { + return `
${children}
`; +} + +// ─── Meta ───────────────────────────────────────────────────────────────────── + +export default { + title: 'Components/Buttons/Dialog Buttons/Secondary', + tags: ['autodocs'], + args: { + label: 'Button', + size: 24, + interactive: true, + isHovered: false, + isClicked: false, + isDisabled: false, + isLoading: false, + themeMode: 'Auto', + }, + argTypes: { + label: { + control: 'text', + description: 'Visible action label', + }, + size: { + control: 'select', + options: [22, 24], + description: 'Compact or regular dialog button height', + table: { defaultValue: { summary: '24' } }, + }, + interactive: { + control: 'boolean', + description: 'Allow the story to react to hover and click in the canvas', + table: { defaultValue: { summary: 'true' } }, + }, + isHovered: { + control: 'boolean', + description: 'Force hover appearance for visual review', + }, + isClicked: { + control: 'boolean', + description: 'Force pressed appearance for visual review', + }, + isDisabled: { + control: 'boolean', + description: 'Show the disabled state', + }, + isLoading: { + control: 'boolean', + description: 'Replace the label with the loading indicator', + }, + minWidth: { + control: 'text', + description: 'Override minimum button width (e.g. "120px")', + }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + table: { defaultValue: { summary: 'Auto' } }, + }, + theme: { table: { disable: true } }, + variant: { table: { disable: true } }, + scale: { table: { disable: true } }, + state: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: + 'Secondary dialog action button for cancel, back, or less prominent actions in modal footers and compact plugin flows.', + }, + }, + }, +}; + +// ─── Stories ────────────────────────────────────────────────────────────────── + +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const state = args.isDisabled ? 'disabled' : args.isLoading ? 'loader' : 'default'; + + return makeInteractive( + (hoverState) => renderDialogButton({ + label: args.label, + size: args.size, + state: state !== 'default' ? state : hoverState, + theme, + }), + { disabled: state !== 'default' } + ); + }, +}; + +export const Hovered = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Wrapper( + renderDialogButton({ label: 'Button', size: 22, state: 'hover', theme }) + + renderDialogButton({ label: 'Button', size: 24, state: 'hover', theme }) + ); + }, + parameters: { + docs: { + description: { + story: 'Hover state for both sizes. Move the pointer over the buttons in the canvas for the live effect.', + }, + }, + }, +}; + +export const Clicked = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + + const makeClickDemo = (size) => { + const wrapper = document.createElement('div'); + wrapper.style.display = 'inline-block'; + + let pressTimer = null; + + const render = (state) => { + wrapper.innerHTML = renderDialogButton({ label: 'Button', size, state, theme }); + }; + + wrapper.addEventListener('mousedown', () => { + render('pressed'); + clearTimeout(pressTimer); + pressTimer = setTimeout(() => render('default'), 180); + }); + + render('default'); + return wrapper; + }; + + const container = document.createElement('div'); + container.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:16px;align-items:center;'; + container.appendChild(makeClickDemo(22)); + container.appendChild(makeClickDemo(24)); + return container; + }, + parameters: { + docs: { + description: { + story: 'Pressed-state demo. Click a button to preview the active press moment.', + }, + }, + }, +}; + +export const Disabled = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Wrapper( + renderDialogButton({ label: 'Button', size: 22, state: 'disabled', theme }) + + renderDialogButton({ label: 'Button', size: 24, state: 'disabled', theme }) + ); + }, + parameters: { + docs: { + description: { + story: 'Disabled buttons keep layout but should not invite interaction.', + }, + }, + }, +}; + +export const Loading = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return `` + + Wrapper( + renderDialogButton({ label: 'Button', size: 22, state: 'loader', theme }) + + renderDialogButton({ label: 'Button', size: 24, state: 'loader', theme }) + ); + }, + parameters: { + docs: { + description: { + story: 'Loading state while the action is in progress.', + }, + }, + }, +}; + +export const Scale = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Wrapper( + renderDialogButton({ label: 'Button', size: 22, state: 'default', scale: true, theme }) + + renderDialogButton({ label: 'Button', size: 24, state: 'default', scale: true, theme }), + true + ); + }, + parameters: { + docs: { + description: { + story: 'Full-width layout variant for dense footers or narrow dialog flows.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/Header.stories.js b/storybook/source/stories/components/Header.stories.js new file mode 100644 index 0000000000..6708a3e37f --- /dev/null +++ b/storybook/source/stories/components/Header.stories.js @@ -0,0 +1,61 @@ +import { Header } from '../../components/Header.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +export default { + title: 'Components/Layout/Header', + tags: ['autodocs'], + args: { + title: 'Title', + tags: ['autodocs'], + width: 261, + variant: 'panel', + themeMode: 'Auto', + }, + argTypes: { + title: { control: 'text', description: 'Visible header title' }, + width: { control: 'number', description: 'Rendered header width' }, + variant: { + control: 'select', + options: ['panel', 'window'], + description: 'Panel header or standalone window header layout', + }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + }, + theme: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: 'Header shell used at the top of plugin panels and standalone windows.', + }, + }, + }, +}; + +export const Default = { + name: 'Panel', + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Header({ title: args.title, width: args.width, variant: 'panel', theme }); + }, +}; + +export const Window = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Header({ title: args.title, width: args.width, variant: 'window', theme }); + }, + parameters: { + docs: { + description: { + story: 'Standalone window-style header with different chrome treatment.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/IconButtons.stories.js b/storybook/source/stories/components/IconButtons.stories.js new file mode 100644 index 0000000000..9e6f2c2ef4 --- /dev/null +++ b/storybook/source/stories/components/IconButtons.stories.js @@ -0,0 +1,220 @@ +import { IconButton } from '../../components/IconButton.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +export default { + title: 'Components/Buttons/Icon Buttons', + tags: ['autodocs'], + args: { + type: 'outline', + interactive: true, + isHovered: false, + isClicked: false, + themeMode: 'Auto', + }, + argTypes: { + type: { + control: 'select', + options: ['outline', 'solid', 'rightExpander'], + description: 'Visual style and icon-button role', + table: { defaultValue: { summary: 'outline' } }, + }, + interactive: { + control: 'boolean', + description: 'Allow hover and click feedback directly in the canvas', + table: { defaultValue: { summary: 'true' } }, + }, + isHovered: { + control: 'boolean', + description: 'Force hover appearance for visual review', + }, + isClicked: { + control: 'boolean', + description: 'Force pressed appearance for visual review', + }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + table: { defaultValue: { summary: 'Auto' } }, + }, + theme: { table: { disable: true } }, + state: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: + 'Compact icon-only actions for panel chrome and small utility controls. Includes outline, solid, and right-expander variants.', + }, + }, + }, +}; + +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const state = args.isClicked ? 'pressed' : args.isHovered ? 'hover' : 'default'; + + if (!args.interactive) { + return IconButton({ type: args.type, state, theme }); + } + + const el = document.createElement('div'); + el.style.display = 'contents'; + + let hovered = false; + let pressed = false; + + const update = () => { + const s = pressed ? 'pressed' : hovered ? 'hover' : 'default'; + el.innerHTML = IconButton({ type: args.type, state: s, theme }); + }; + + el.addEventListener('mouseenter', () => { hovered = true; update(); }); + el.addEventListener('mouseleave', () => { hovered = false; pressed = false; update(); }); + el.addEventListener('mousedown', () => { pressed = true; update(); }); + el.addEventListener('mouseup', () => { pressed = false; update(); }); + + update(); + return el; + }, +}; + +export const OutlineButtons = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return IconButton({ type: 'outline', state: 'default', theme }); + }, + parameters: { + docs: { + description: { + story: 'Outline icon action for low-emphasis utility controls.', + }, + }, + }, +}; + +export const SolidButtons = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return IconButton({ type: 'solid', state: 'default', theme }); + }, + parameters: { + docs: { + description: { + story: 'Solid icon action with stronger emphasis.', + }, + }, + }, +}; + + +export const RightExpanderButtons = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return IconButton({ type: 'rightExpander', state: 'default', theme }); + }, + parameters: { + docs: { + description: { + story: 'Chevron-style expander used for disclosure and nested sections.', + }, + }, + }, +}; + +export const SolidHoveredButtons = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return IconButton({ type: 'solid', state: 'hover', theme }); + }, + parameters: { + docs: { + description: { + story: 'Solid button in forced hover state for visual review.', + }, + }, + }, +}; + +export const SolidClickedButtons = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return IconButton({ type: 'solid', state: 'pressed', theme }); + }, + parameters: { + docs: { + description: { + story: 'Solid button in forced pressed state for visual review.', + }, + }, + }, +}; + +export const HoveredButtons = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + + const el = document.createElement('div'); + el.style.display = 'contents'; + + let hovered = false; + + const update = () => { + el.innerHTML = IconButton({ type: 'rightExpander', state: hovered ? 'hover' : 'default', theme }); + }; + + el.addEventListener('mouseenter', () => { hovered = true; update(); }); + el.addEventListener('mouseleave', () => { hovered = false; update(); }); + + update(); + return el; + }, + parameters: { + docs: { + description: { + story: 'Interactive hover demo for the icon-only control. Move the pointer over the button in the canvas.', + }, + }, + }, +}; + +export const ClickedButtons = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + + const el = document.createElement('div'); + el.style.display = 'contents'; + + let pressed = false; + let timer = null; + + const update = () => { + el.innerHTML = IconButton({ type: 'rightExpander', state: pressed ? 'pressed' : 'default', theme }); + }; + + el.addEventListener('click', () => { + if (timer) clearTimeout(timer); + pressed = true; + update(); + timer = setTimeout(() => { + pressed = false; + update(); + timer = null; + }, 180); + }); + + update(); + return el; + }, + parameters: { + docs: { + description: { + story: 'Pressed-state demo for the right-expander variant.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/InfoBlock.stories.js b/storybook/source/stories/components/InfoBlock.stories.js new file mode 100644 index 0000000000..aa448460a8 --- /dev/null +++ b/storybook/source/stories/components/InfoBlock.stories.js @@ -0,0 +1,136 @@ +import { InfoBlock } from '../../components/InfoBlock.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +export default { + title: 'Components/Data Display/Info Block', + tags: ['autodocs'], + args: { + title: 'Title', + description: 'Description', + showTitle: true, + showDescription: true, + iconMode: 'left', + themeMode: 'Auto', + }, + argTypes: { + title: { control: 'text', description: 'Main heading text' }, + description: { control: 'text', description: 'Supporting descriptive copy' }, + showTitle: { control: 'boolean', description: 'Show the title row' }, + showDescription: { control: 'boolean', description: 'Show the description row' }, + iconMode: { + control: 'select', + options: ['none', 'left', 'right', 'both'], + description: 'Icon placement around the title row', + }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + table: { defaultValue: { summary: 'Auto' } }, + }, + theme: { table: { disable: true } }, + onClose: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: + 'Compact informational block for notices, inline explanations, and dismissible helper content.', + }, + }, + }, +}; + +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return InfoBlock({ ...args, theme }); + }, +}; + +export const WithoutIcon = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return InfoBlock({ ...args, iconMode: 'none', theme }); + }, + parameters: { + docs: { + description: { + story: 'Plain informational block without icons.', + }, + }, + }, +}; + +export const IconRight = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return InfoBlock({ ...args, iconMode: 'right', showTitle: true, showDescription: true, theme }); + }, + parameters: { + docs: { + description: { + story: 'Variant with a dismiss or action icon on the right.', + }, + }, + }, +}; + +export const IconLeft = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return InfoBlock({ ...args, iconMode: 'left', showTitle: true, showDescription: true, theme }); + }, + parameters: { + docs: { + description: { + story: 'Variant with an informational icon on the left.', + }, + }, + }, +}; + +export const IconBoth = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return InfoBlock({ ...args, iconMode: 'both', showDescription: false, theme }); + }, + parameters: { + docs: { + description: { + story: 'Title row with icons on both sides.', + }, + }, + }, +}; + +export const TitleOnly = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return InfoBlock({ ...args, showTitle: true, showDescription: false, iconMode: 'none', theme }); + }, + parameters: { + docs: { + description: { + story: 'Title-only informational block.', + }, + }, + }, +}; + +export const DescriptionOnly = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return InfoBlock({ ...args, showTitle: false, showDescription: true, iconMode: 'none', theme }); + }, + parameters: { + docs: { + description: { + story: 'Description-only helper text block.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/LinkButtons.stories.js b/storybook/source/stories/components/LinkButtons.stories.js new file mode 100644 index 0000000000..c184dea5d8 --- /dev/null +++ b/storybook/source/stories/components/LinkButtons.stories.js @@ -0,0 +1,88 @@ +import { LinkButton } from '../../components/LinkButton.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +export default { + title: 'Components/Buttons/Link Buttons', + tags: ['autodocs'], + args: { + label: 'Show advanced settings', + state: 'default', + interactive: true, + isHovered: false, + themeMode: 'Auto', + }, + argTypes: { + label: { + control: 'text', + description: 'Visible link-style action label', + }, + interactive: { + control: 'boolean', + description: 'Allow hover feedback directly in the canvas', + table: { defaultValue: { summary: 'true' } }, + }, + isHovered: { + control: 'boolean', + description: 'Force hover appearance for visual review', + }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + table: { defaultValue: { summary: 'Auto' } }, + }, + theme: { table: { disable: true } }, + state: { table: { disable: true } }, + }, + parameters: { + docs: { + story: { inline: true }, + description: { + component: + 'Text-only action styled like a link. Useful for secondary inline actions inside settings and informational blocks.', + }, + }, + }, +}; + +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + + if (!args.interactive) { + const state = args.isHovered ? 'hover' : 'default'; + return LinkButton({ label: args.label, state, theme }); + } + + const el = document.createElement('div'); + el.style.display = 'contents'; + + const render = (state) => { + el.innerHTML = LinkButton({ label: args.label, state, theme }); + }; + + el.addEventListener('mouseenter', () => render('hover')); + el.addEventListener('mouseleave', () => render('default')); + + render(args.isHovered ? 'hover' : 'default'); + return el; + }, +}; + +export const HoveredButtons = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return LinkButton({ label: args.label || 'Show advanced settings', state: 'hover', theme }); + }, + parameters: { + docs: { + description: { + story: + 'Interactive hover demo for the inline link-action style. Move the pointer over the link in the canvas.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/Loader.stories.js b/storybook/source/stories/components/Loader.stories.js new file mode 100644 index 0000000000..a60ffcad52 --- /dev/null +++ b/storybook/source/stories/components/Loader.stories.js @@ -0,0 +1,82 @@ +import { Loader } from '../../components/Loader.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +export default { + title: 'Components/Feedback/Loader', + tags: ['autodocs'], + args: { + size: 'S', + label: 'Loading...', + overlay: false, + themeMode: 'Auto', + }, + argTypes: { + size: { + control: 'select', + options: ['S', 'M'], + description: 'Compact or regular loader size', + }, + label: { + control: 'text', + description: 'Visible loading message', + }, + overlay: { + control: 'boolean', + description: 'Use the blocking overlay presentation', + }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + }, + theme: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: 'Loader for inline busy states and blocking overlay states.', + }, + }, + }, +}; + +export const Default = { + name: 'S', + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Loader({ size: 'S', label: args.label, overlay: false, theme }); + }, +}; + +export const Medium = { + name: 'M', + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Loader({ size: 'M', label: args.label, overlay: false, theme }); + }, + parameters: { + docs: { + description: { + story: 'Regular inline loader size.', + }, + }, + }, +}; + +export const OverlayLoader = { + name: 'Loader With Background', + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Loader({ size: 'M', label: 'Loading...', overlay: true, theme }); + }, + parameters: { + docs: { + description: { + story: 'Blocking overlay loader for modal or full-surface waiting states.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/ModalWindow.stories.js b/storybook/source/stories/components/ModalWindow.stories.js new file mode 100644 index 0000000000..b714939112 --- /dev/null +++ b/storybook/source/stories/components/ModalWindow.stories.js @@ -0,0 +1,171 @@ +import { ModalWindow } from '../../components/ModalWindow.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; + +function makeInteractiveModalWindow(args, theme) { + const wrapper = document.createElement('div'); + wrapper.style.cssText = 'padding:24px;display:inline-block;'; + wrapper.innerHTML = ModalWindow({ ...args, theme }); + + wrapper.querySelectorAll('button[data-role]').forEach((btn) => { + const restBg = btn.dataset.restBg; + const hoverBg = btn.dataset.hoverBg; + const pressedBg = btn.dataset.pressedBg; + const restBorder = btn.dataset.restBorder; + const pressedBorder = btn.dataset.pressedBorder; + + let hovered = false; + let pressTimer = null; + let pressStart = 0; + + btn.addEventListener('mouseenter', () => { + hovered = true; + if (!pressTimer) btn.style.background = hoverBg; + }); + btn.addEventListener('mouseleave', () => { + hovered = false; + if (!pressTimer) { + btn.style.background = restBg; + btn.style.border = restBorder; + } + }); + btn.addEventListener('mousedown', () => { + pressStart = Date.now(); + if (pressTimer) { clearTimeout(pressTimer); pressTimer = null; } + btn.style.background = pressedBg; + btn.style.border = pressedBorder; + }); + btn.addEventListener('mouseup', () => { + const elapsed = Date.now() - pressStart; + const delay = Math.max(0, 150 - elapsed); + pressTimer = setTimeout(() => { + pressTimer = null; + btn.style.background = hovered ? hoverBg : restBg; + btn.style.border = restBorder; + }, delay); + }); + }); + + return wrapper; +} + +export default { + title: 'Components/Layout/Modal Window', + tags: ['autodocs'], + args: { + title: 'Title', + tags: ['autodocs'], + contentLabel: 'Content', + notificationText: 'Text\nText', + primaryLabel: 'Button', + secondaryLabel: 'Button', + size: 'M', + notification: false, + footerMode: 'auto', + themeMode: 'Auto', + }, + argTypes: { + title: { control: 'text', description: 'Main dialog title' }, + contentLabel: { control: 'text', description: 'Placeholder copy for the main content area' }, + notificationText: { control: 'text', description: 'Inline warning or notification message' }, + primaryLabel: { control: 'text', description: 'Primary footer action label' }, + secondaryLabel: { control: 'text', description: 'Secondary footer action label' }, + size: { control: 'select', options: ['S', 'M', 'L'], description: 'Modal width preset' }, + notification: { control: 'boolean', description: 'Show the notification block above the footer' }, + footerMode: { + control: 'select', + options: ['auto', 'single', 'double'], + description: 'One-button or two-button footer layout', + }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...pluginThemeOptions], + description: 'Auto = current Storybook toolbar theme', + }, + theme: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: + 'Dialog window shell with size presets, optional notification block, and single or double action footers.', + }, + }, + }, +}; + +export const Default = { + args: { + size: 'M', + notification: false, + footerMode: 'single', + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveModalWindow(args, theme); + }, + parameters: { + docs: { + description: { + story: 'Medium modal preset for standard confirmation and settings flows.', + }, + }, + }, +}; + +export const Small = { + args: { + size: 'S', + notification: false, + footerMode: 'single', + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveModalWindow(args, theme); + }, + parameters: { + docs: { + description: { + story: 'Small modal for short confirmations and compact messages.', + }, + }, + }, +}; + +export const Large = { + args: { + size: 'L', + notification: false, + footerMode: 'double', + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveModalWindow(args, theme); + }, + parameters: { + docs: { + description: { + story: 'Large modal for richer content and double-action layouts.', + }, + }, + }, +}; + +export const WithNotification = { + args: { + size: 'S', + notification: true, + footerMode: 'single', + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveModalWindow(args, theme); + }, + parameters: { + docs: { + description: { + story: 'Modal with an inline warning or explanatory notification block.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/PanelButtons.stories.js b/storybook/source/stories/components/PanelButtons.stories.js new file mode 100644 index 0000000000..7225e1c96e --- /dev/null +++ b/storybook/source/stories/components/PanelButtons.stories.js @@ -0,0 +1,218 @@ +import { PanelButton } from '../../components/PanelButton.js'; +import { resolveStoryTheme, pluginThemeOptions, makeInteractive } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +export default { + title: 'Components/Buttons/Panel Buttons', + tags: ['autodocs'], + args: { + label: 'Button', + size: 24, + interactive: true, + isHovered: false, + isClicked: false, + isDisabled: false, + isLoading: false, + scale: false, + themeMode: 'Auto', + }, + argTypes: { + label: { control: 'text', description: 'Visible action label' }, + size: { + control: 'select', options: [24, 30], + description: 'Default or larger panel button height', + table: { defaultValue: { summary: '24' } }, + }, + interactive: { + control: 'boolean', + description: 'Allow hover and click feedback directly in the canvas', + table: { defaultValue: { summary: 'true' } }, + }, + isHovered: { control: 'boolean', description: 'Force hover appearance for visual review' }, + isClicked: { control: 'boolean', description: 'Force pressed appearance for visual review' }, + isDisabled: { control: 'boolean', description: 'Show the disabled state' }, + isLoading: { control: 'boolean', description: 'Show the loading indicator instead of the normal label' }, + scale: { control: 'boolean', description: 'Stretch the button to fill the available row' }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + table: { defaultValue: { summary: 'Auto' } }, + }, + theme: { table: { disable: true } }, + state: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: 'Panel action buttons used inside plugin side panels. Includes compact and larger heights plus hover, pressed, disabled, loading, and stretched states.', + }, + }, + }, +}; + +function resolveDisplayState(args, hovered, pressed) { + if (args.isLoading) return 'loader'; + if (args.isDisabled) return 'disabled'; + if (args.isClicked) return 'pressed'; + if (args.isHovered) return 'hover'; + if (args.interactive !== false) { + if (pressed) return 'pressed'; + if (hovered) return 'hover'; + } + return 'default'; +} + +function renderInteractive(args, theme) { + const isStatic = args.interactive === false || args.isDisabled || args.isLoading; + + if (isStatic) { + const state = args.isLoading ? 'loader' : args.isDisabled ? 'disabled' : args.isClicked ? 'pressed' : args.isHovered ? 'hover' : 'default'; + return PanelButton({ label: args.label, size: args.size, state, theme, scale: args.scale }); + } + + let hovered = false; + let pressed = false; + const el = document.createElement('div'); + el.style.display = 'contents'; + + const update = () => { + el.innerHTML = PanelButton({ label: args.label, size: args.size, state: resolveDisplayState(args, hovered, pressed), theme, scale: args.scale }); + }; + + el.addEventListener('mouseenter', () => { hovered = true; update(); }); + el.addEventListener('mouseleave', () => { hovered = false; pressed = false; update(); }); + el.addEventListener('mousedown', () => { pressed = true; update(); }); + el.addEventListener('mouseup', () => { pressed = false; update(); }); + + update(); + return el; +} + +function Wrapper(children, isScale = false) { + return `
${children}
`; +} + +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return renderInteractive(args, theme); + }, +}; + +export const HoveredButtons = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const el = document.createElement('div'); + el.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:16px;align-items:center;'; + // These are interactive — hover works natively in the canvas + const make = (size) => { + const w = document.createElement('div'); + w.style.display = 'contents'; + let hovered = false, pressed = false; + const update = () => { w.innerHTML = PanelButton({ label: args.label ?? 'Button', size, state: pressed ? 'pressed' : hovered ? 'hover' : 'default', theme }); }; + w.addEventListener('mouseenter', () => { hovered = true; update(); }); + w.addEventListener('mouseleave', () => { hovered = false; pressed = false; update(); }); + w.addEventListener('mousedown', () => { pressed = true; update(); }); + w.addEventListener('mouseup', () => { pressed = false; update(); }); + update(); + return w; + }; + el.appendChild(make(24)); + el.appendChild(make(30)); + return el; + }, + parameters: { + docs: { + description: { + story: 'Interactive hover demo for both panel button sizes. Move the pointer over each button in the canvas.', + }, + }, + }, +}; + +export const ClickedButtons = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const el = document.createElement('div'); + el.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:16px;align-items:center;'; + + [24, 30].forEach(size => { + const w = document.createElement('div'); + w.style.display = 'contents'; + let pressed = false; + let timer = null; + const update = () => { w.innerHTML = PanelButton({ label: args.label ?? 'Button', size, state: pressed ? 'pressed' : 'default', theme }); }; + w.addEventListener('click', () => { + if (timer) clearTimeout(timer); + pressed = true; update(); + timer = setTimeout(() => { pressed = false; update(); }, 180); + }); + update(); + el.appendChild(w); + }); + + return el; + }, + parameters: { + docs: { + description: { + story: 'Pressed-state demo. Click the buttons to preview the active press moment.', + }, + }, + }, +}; + +export const DisabledButtons = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Wrapper( + PanelButton({ label: args.label ?? 'Button', size: 24, state: 'disabled', theme }) + + PanelButton({ label: args.label ?? 'Button', size: 30, state: 'disabled', theme }) + ); + }, + parameters: { + docs: { + description: { + story: 'Disabled panel actions that keep layout without inviting interaction.', + }, + }, + }, +}; + +export const IsLoadingButtons = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Wrapper( + PanelButton({ label: args.label ?? 'Button', size: 24, state: 'loader', theme }) + + PanelButton({ label: args.label ?? 'Button', size: 30, state: 'loader', theme }) + ); + }, + parameters: { + docs: { + description: { + story: 'Loading state for long-running panel actions.', + }, + }, + }, +}; + +export const ScaleButtons = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Wrapper( + PanelButton({ label: args.label ?? 'Scale Small', size: 24, state: 'default', theme, scale: true }) + + PanelButton({ label: args.label ?? 'Scale Normal', size: 30, state: 'default', theme, scale: true }), + true + ); + }, + parameters: { + docs: { + description: { + story: 'Full-width layout variant for dense side-panel flows.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/PreviewControls.stories.js b/storybook/source/stories/components/PreviewControls.stories.js new file mode 100644 index 0000000000..c3d654f0fa --- /dev/null +++ b/storybook/source/stories/components/PreviewControls.stories.js @@ -0,0 +1,174 @@ +import { PreviewControl } from '../../components/PreviewControl.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +export default { + title: 'Components/Actions/Preview Controls', + tags: ['autodocs'], + args: { + direction: 'back', + interactive: true, + isHovered: false, + isClicked: false, + isDisabled: false, + themeMode: 'Auto', + }, + argTypes: { + direction: { + control: 'select', + options: ['back', 'next'], + description: 'Arrow direction', + table: { defaultValue: { summary: 'back' } }, + }, + interactive: { + control: 'boolean', + description: 'Allow hover and click feedback directly in the canvas', + table: { defaultValue: { summary: 'true' } }, + }, + isHovered: { + control: 'boolean', + description: 'Force hover appearance for visual review', + }, + isClicked: { + control: 'boolean', + description: 'Force pressed appearance for visual review', + }, + isDisabled: { + control: 'boolean', + description: 'Render in disabled state', + table: { defaultValue: { summary: 'false' } }, + }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + table: { defaultValue: { summary: 'Auto' } }, + }, + theme: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: + 'Circular arrow button used for navigating forward and backward in a preview carousel. Theme-aware with shadow-based state feedback.', + }, + }, + }, +}; + +/** Make a single interactive PreviewControl DOM element. */ +function makeInteractiveControl({ direction, theme, isDisabled, args }) { + if (isDisabled) { + const el = document.createElement('div'); + el.style.display = 'contents'; + el.innerHTML = PreviewControl({ direction, state: 'disabled', theme, isDisabled: true }); + return el; + } + + const el = document.createElement('div'); + el.style.display = 'contents'; + + if (!args.interactive) { + const state = args.isClicked ? 'pressed' : args.isHovered ? 'hover' : 'default'; + el.innerHTML = PreviewControl({ direction, state, theme }); + return el; + } + + let hovered = false; + let pressed = false; + + const update = () => { + const state = pressed ? 'pressed' : hovered ? 'hover' : 'default'; + el.innerHTML = PreviewControl({ direction, state, theme }); + }; + + el.addEventListener('mouseenter', () => { hovered = true; update(); }); + el.addEventListener('mouseleave', () => { hovered = false; pressed = false; update(); }); + el.addEventListener('mousedown', () => { pressed = true; update(); }); + el.addEventListener('mouseup', () => { pressed = false; update(); }); + + update(); + return el; +} + +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const wrapper = document.createElement('div'); + wrapper.style.display = 'flex'; + wrapper.style.gap = '40px'; + wrapper.style.alignItems = 'center'; + + wrapper.appendChild(makeInteractiveControl({ direction: 'back', theme, isDisabled: args.isDisabled, args })); + wrapper.appendChild(makeInteractiveControl({ direction: 'next', theme, isDisabled: args.isDisabled, args })); + + return wrapper; + }, + parameters: { + docs: { + description: { + story: 'Back and next preview controls side by side. Hover or click to see state transitions.', + }, + }, + }, +}; + +export const Back = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveControl({ direction: 'back', theme, isDisabled: args.isDisabled, args }); + }, + parameters: { + docs: { + description: { + story: 'Back (previous) preview control in isolation.', + }, + }, + }, +}; + +export const Next = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveControl({ direction: 'next', theme, isDisabled: args.isDisabled, args }); + }, + parameters: { + docs: { + description: { + story: 'Next preview control in isolation.', + }, + }, + }, +}; + +export const Disabled = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const wrapper = document.createElement('div'); + wrapper.style.display = 'flex'; + wrapper.style.gap = '40px'; + wrapper.style.alignItems = 'center'; + + const back = document.createElement('div'); + back.style.display = 'contents'; + back.innerHTML = PreviewControl({ direction: 'back', state: 'disabled', theme, isDisabled: true }); + + const next = document.createElement('div'); + next.style.display = 'contents'; + next.innerHTML = PreviewControl({ direction: 'next', state: 'disabled', theme, isDisabled: true }); + + wrapper.appendChild(back); + wrapper.appendChild(next); + return wrapper; + }, + args: { isDisabled: true }, + parameters: { + docs: { + description: { + story: 'Both preview controls in the disabled state.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/Radio.stories.js b/storybook/source/stories/components/Radio.stories.js new file mode 100644 index 0000000000..cec66d143f --- /dev/null +++ b/storybook/source/stories/components/Radio.stories.js @@ -0,0 +1,139 @@ +import { Radio } from '../../components/Radio.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +export default { + title: 'Components/Form/Radio', + tags: ['autodocs'], + args: { + label: 'Default radio button', + selected: 'no', + state: 'default', + interactive: true, + themeMode: 'Auto', + }, + argTypes: { + label: { control: 'text', description: 'Visible radio label' }, + selected: { + control: 'select', + options: ['no', 'yes'], + description: 'Unchecked or selected state', + }, + state: { + control: 'select', + options: ['default', 'hover', 'disabled'], + description: 'Rendered visual state', + }, + interactive: { + control: 'boolean', + description: 'Allow hover and selection behavior directly in the canvas', + table: { defaultValue: { summary: 'true' } }, + }, + isHovered: { + control: 'boolean', + description: 'Force hover appearance for review', + }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + table: { defaultValue: { summary: 'Auto' } }, + }, + theme: { table: { disable: true } }, + onChange: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: + 'Radio control for mutually exclusive choices. Use it inside groups where one option should stay selected.', + }, + }, + }, +}; + +/** Build an interactive radio element that responds to hover and click. */ +function makeRadio({ label, selected: initialSelected, state, interactive, isHovered, theme }) { + const isDisabled = state === 'disabled'; + const initialVal = typeof initialSelected === 'boolean' ? (initialSelected ? 'yes' : 'no') : (initialSelected || 'no'); + + if (!interactive || isDisabled) { + const el = document.createElement('div'); + el.style.display = 'contents'; + const effectiveState = isDisabled ? 'disabled' : (isHovered ? 'hover' : state); + el.innerHTML = Radio({ label, selected: initialVal, state: effectiveState, theme }); + return el; + } + + const el = document.createElement('div'); + el.style.display = 'contents'; + let currentSelected = initialVal; + let hovered = false; + + const update = () => { + el.innerHTML = Radio({ + label, + selected: currentSelected, + state: hovered ? 'hover' : 'default', + theme, + }); + }; + + el.addEventListener('mouseenter', () => { hovered = true; update(); }); + el.addEventListener('mouseleave', () => { hovered = false; update(); }); + el.addEventListener('click', () => { currentSelected = 'yes'; update(); }); + + update(); + return el; +} + +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeRadio({ ...args, theme }); + }, +}; + +export const Checked = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeRadio({ ...args, label: 'Checked radio button', selected: 'yes', state: 'default', interactive: true, theme }); + }, + parameters: { + docs: { + description: { + story: 'Selected radio option inside a choice group.', + }, + }, + }, +}; + +export const Hovered = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeRadio({ ...args, label: 'Hovered radio button', selected: 'no', state: 'default', interactive: true, theme }); + }, + parameters: { + docs: { + description: { + story: 'Interactive hover demo for an unselected radio option. Move the pointer over the control in the canvas.', + }, + }, + }, +}; + +export const Disabled = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeRadio({ label: 'Disabled', selected: 'no', state: 'disabled', interactive: false, theme }); + }, + parameters: { + docs: { + description: { + story: 'Disabled radio option that remains visible but unavailable.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/Scroll.stories.js b/storybook/source/stories/components/Scroll.stories.js new file mode 100644 index 0000000000..ae26cfe9e0 --- /dev/null +++ b/storybook/source/stories/components/Scroll.stories.js @@ -0,0 +1,287 @@ +import { Scroll } from '../../components/Scroll.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; +import { scrollByTheme, scrollSizePixels } from '../../data/scroll.ts'; + +const THEMES = pluginThemeOptions; + +export default { + title: 'Components/Layout/Scroll', + tags: ['autodocs'], + args: { + orientation: 'vertical', + size: 'M', + type: 'withButtons', + state: 'default', + length: 167, + interactive: true, + isHovered: false, + isPressed: false, + viewportSize: 160, + contentSize: 520, + step: 24, + themeMode: 'Auto', + }, + argTypes: { + orientation: { + control: 'select', + options: ['vertical', 'horizontal'], + description: 'Vertical or horizontal scrollbar layout', + }, + size: { + control: 'select', + options: ['XS', 'S', 'M'], + description: 'Scrollbar thickness preset', + }, + type: { + control: 'select', + options: ['withButtons', 'withoutButtons'], + description: 'Scrollbar with arrow buttons or without them', + }, + state: { + control: 'select', + options: ['default', 'hover', 'pressed'], + description: 'Static visual state used when interactive mode is off', + }, + length: { control: 'number', description: 'Rendered scrollbar length in px' }, + viewportSize: { control: 'number', description: 'Visible viewport size used to compute the thumb ratio' }, + contentSize: { control: 'number', description: 'Scrollable content size used to compute the thumb ratio' }, + step: { control: 'number', description: 'Scroll increment for arrow buttons and keyboard input' }, + interactive: { + control: 'boolean', + description: 'Allow hover, drag, click, wheel, and arrow-button interaction in the canvas', + }, + isHovered: { control: 'boolean', description: 'Force hover appearance for review' }, + isPressed: { control: 'boolean', description: 'Force pressed appearance for review' }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + table: { defaultValue: { summary: 'Auto' } }, + }, + theme: { table: { disable: true } }, + value: { table: { disable: true } }, + defaultValue: { table: { disable: true } }, + onValueChange: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: + 'Scrollbar variants for panel and canvas-like areas. Includes with-buttons and without-buttons styles, multiple thicknesses, and an interactive demo with dragging and wheel input.', + }, + }, + }, +}; + +/** + * Interactive scrollbar: drag thumb, click arrow buttons, mouse-wheel. + * Updates thumb position and visual states (hover/pressed) entirely in-place + * without any full re-render, so interactions are smooth and uninterrupted. + */ +function makeInteractiveScroll(args, theme) { + const orientation = args.orientation ?? 'vertical'; + const size = args.size ?? 'M'; + const type = args.type ?? 'withButtons'; + const totalLength = Math.max(48, args.length ?? 167); + const viewportSize = args.viewportSize ?? 160; + const contentSize = args.contentSize ?? 520; + const step = args.step ?? 24; + const isHorizontal = orientation === 'horizontal'; + const showButtons = type === 'withButtons'; + const effectiveSize = showButtons ? 'M' : size; + + const themeTokens = scrollByTheme[theme] ?? scrollByTheme['Light']; + const metrics = scrollSizePixels[effectiveSize]; + const trackLength = Math.max(24, totalLength - (showButtons ? metrics.button * 2 + metrics.gap * 2 : 0)); + + const viewport = Math.max(1, viewportSize); + const content = Math.max(viewport, contentSize); + const maxValue = Math.max(0, content - viewport); + const thumbRaw = Math.round((viewport / content) * trackLength); + const thumbMin = effectiveSize === 'XS' ? 18 : 24; + const thumbLength = Math.max(Math.min(thumbMin, trackLength), Math.min(thumbRaw, trackLength)); + const travel = Math.max(0, trackLength - thumbLength); + + let scrollValue = 0; + + const el = document.createElement('div'); + el.style.display = 'contents'; + el.innerHTML = Scroll({ ...args, theme, scrollValue, state: 'default' }); + + const root = el.firstElementChild; + if (!root) return el; + + const buttons = [...root.querySelectorAll('button')]; + const trackContainer = root.querySelector('div'); + const thumb = trackContainer ? trackContainer.firstElementChild : null; + if (!thumb) return el; + + const updatePosition = () => { + const clamped = Math.max(0, Math.min(scrollValue, maxValue)); + const pos = travel === 0 || maxValue === 0 ? 0 : (clamped / maxValue) * travel; + thumb.style[isHorizontal ? 'left' : 'top'] = `${pos}px`; + root.setAttribute('aria-valuenow', String(Math.round(clamped))); + }; + + const applyThumbState = (state) => { + const t = (themeTokens[state] ?? themeTokens['default']).lift[effectiveSize]; + thumb.style.background = t.bg; + thumb.style.borderColor = t.border; + thumb.querySelectorAll('span').forEach(s => { s.style.background = t.notch; }); + }; + + const applyButtonState = (btn, state) => { + const t = (themeTokens[state] ?? themeTokens['default']).button; + btn.style.background = t.bg; + btn.style.borderColor = t.border; + const path = btn.querySelector('path'); + if (path) path.setAttribute('fill', t.arrow); + }; + + // Thumb drag + thumb.style.cursor = 'grab'; + let isDragging = false, dragStart = 0, dragStartValue = 0; + + thumb.addEventListener('mouseenter', () => { if (!isDragging) applyThumbState('hover'); }); + thumb.addEventListener('mouseleave', () => { if (!isDragging) applyThumbState('default'); }); + thumb.addEventListener('mousedown', (e) => { + isDragging = true; + dragStart = isHorizontal ? e.clientX : e.clientY; + dragStartValue = scrollValue; + applyThumbState('pressed'); + thumb.style.cursor = 'grabbing'; + e.preventDefault(); + + const onMove = (e) => { + const delta = (isHorizontal ? e.clientX : e.clientY) - dragStart; + if (travel > 0 && maxValue > 0) + scrollValue = Math.max(0, Math.min(maxValue, dragStartValue + (delta / travel) * maxValue)); + updatePosition(); + }; + const onUp = () => { + isDragging = false; + applyThumbState('hover'); + thumb.style.cursor = 'grab'; + window.removeEventListener('mousemove', onMove); + window.removeEventListener('mouseup', onUp); + }; + window.addEventListener('mousemove', onMove); + window.addEventListener('mouseup', onUp); + }); + + // Arrow buttons + if (buttons.length >= 2) { + const setupBtn = (btn, dir) => { + btn.addEventListener('mouseenter', () => applyButtonState(btn, 'hover')); + btn.addEventListener('mouseleave', () => applyButtonState(btn, 'default')); + btn.addEventListener('mousedown', () => applyButtonState(btn, 'pressed')); + btn.addEventListener('mouseup', () => applyButtonState(btn, 'hover')); + btn.addEventListener('click', () => { + scrollValue = Math.max(0, Math.min(maxValue, scrollValue + dir * step)); + updatePosition(); + }); + }; + setupBtn(buttons[0], -1); + setupBtn(buttons[1], +1); + } + + // Wheel + root.addEventListener('wheel', (e) => { + e.preventDefault(); + const delta = isHorizontal ? (e.deltaX || e.deltaY) : e.deltaY; + scrollValue = Math.max(0, Math.min(maxValue, scrollValue + (delta > 0 ? step : -step))); + updatePosition(); + }, { passive: false }); + + return el; +} + +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveScroll(args, theme); + }, +}; + +export const WithButtonsM = { + name: 'WithBtn M', + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveScroll({ ...args, orientation: 'vertical', type: 'withButtons', size: 'M' }, theme); + }, + parameters: { + docs: { + description: { + story: 'Medium scrollbar with arrow buttons.', + }, + }, + }, +}; + +export const WithoutButtonsM = { + name: 'WithoutBtn M', + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveScroll({ ...args, orientation: 'vertical', type: 'withoutButtons', size: 'M' }, theme); + }, + parameters: { + docs: { + description: { + story: 'Medium scrollbar without arrow buttons.', + }, + }, + }, +}; + +export const WithoutButtonsS = { + name: 'WithoutBtn S', + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveScroll({ ...args, orientation: 'vertical', type: 'withoutButtons', size: 'S' }, theme); + }, + parameters: { + docs: { + description: { + story: 'Slim scrollbar without arrow buttons.', + }, + }, + }, +}; + +export const WithoutButtonsXS = { + name: 'WithoutBtn XS', + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveScroll({ ...args, orientation: 'vertical', type: 'withoutButtons', size: 'XS' }, theme); + }, + parameters: { + docs: { + description: { + story: 'Extra-slim scrollbar for dense layouts.', + }, + }, + }, +}; + +export const Horizontal = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveScroll({ + ...args, + orientation: 'horizontal', + type: 'withButtons', + size: 'M', + length: 240, + viewportSize: 180, + contentSize: 500, + }, theme); + }, + parameters: { + docs: { + description: { + story: 'Horizontal scrollbar variant with arrow buttons.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/Slider.stories.js b/storybook/source/stories/components/Slider.stories.js new file mode 100644 index 0000000000..777c4d0910 --- /dev/null +++ b/storybook/source/stories/components/Slider.stories.js @@ -0,0 +1,163 @@ +import { Slider } from '../../components/Slider.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +export default { + title: 'Components/Form/Slider', + tags: ['autodocs'], + args: { + value: 40, + min: 0, + max: 100, + showValue: false, + disabled: false, + themeMode: 'Auto', + }, + argTypes: { + value: { + control: { type: 'range', min: 0, max: 100, step: 1 }, + description: 'Current slider value', + }, + min: { control: 'number', description: 'Minimum allowed value' }, + max: { control: 'number', description: 'Maximum allowed value' }, + step: { control: 'number', description: 'Step increment between values' }, + showValue: { control: 'boolean', description: 'Show the numeric value on the right' }, + disabled: { control: 'boolean', description: 'Show the disabled state' }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + table: { defaultValue: { summary: 'Auto' } }, + }, + theme: { table: { disable: true } }, + onChange: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: + 'Single-value slider for compact numeric adjustment with optional inline value display.', + }, + }, + }, +}; + +/** + * Build an interactive DOM wrapper that lets the user drag/click the thumb + * visually by updating only the track gradient and thumb position in-place. + * Re-rendering the full HTML during drag destroys the and breaks dragging. + */ +function makeInteractiveSlider(args, theme) { + const el = document.createElement('div'); + el.style.display = 'contents'; + + const min = args.min ?? 0; + const max = args.max ?? 100; + let value = args.value ?? 40; + + // Initial render only — no re-render during drag + el.innerHTML = Slider({ ...args, theme, value }); + + const wrapper = el.firstElementChild; + if (!wrapper) return el; + + // Structure: wrapper(col) > [labelDiv?] + flexRow(flex) > posWrapper(rel,h:20) > trackEl(grad) > thumbEl + // Use direct child traversal to avoid fragile multi-level CSS selectors. + const flexRow = [...wrapper.children].find(c => c.style.display === 'flex') ?? wrapper.lastElementChild; + const posWrapper = flexRow ? flexRow.children[0] : null; + const trackEl = posWrapper ? posWrapper.children[0] : null; + const thumbEl = trackEl ? trackEl.children[0] : null; + + if (!posWrapper) return el; + + const rangeInput = document.createElement('input'); + rangeInput.type = 'range'; + rangeInput.min = String(min); + rangeInput.max = String(max); + rangeInput.step = String(args.step ?? 1); + rangeInput.value = String(value); + + Object.assign(rangeInput.style, { + position: 'absolute', + inset: '0', + width: '100%', + height: '100%', + opacity: '0', + cursor: args.disabled ? 'not-allowed' : 'pointer', + margin: '0', + padding: '0', + }); + + if (args.disabled) rangeInput.disabled = true; + + posWrapper.appendChild(rangeInput); + + rangeInput.addEventListener('input', (e) => { + value = Number(e.target.value); + const pct = max === min ? 0 : Math.round(((value - min) / (max - min)) * 100); + + if (trackEl) { + const m = trackEl.style.background.match(/linear-gradient\(to right,\s*(.+?)\s+\d+%,\s*(.+?)\s+\d+%\)/); + if (m) { + trackEl.style.background = `linear-gradient(to right, ${m[1]} ${pct}%, ${m[2]} ${pct}%)`; + } + } + if (thumbEl) { + const halfSize = parseFloat(thumbEl.style.width) / 2; + thumbEl.style.left = `calc(${pct}% - ${halfSize}px)`; + } + }); + + return el; +} + +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveSlider(args, theme); + }, +}; + +export const WithValue = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveSlider({ ...args, showValue: true }, theme); + }, + parameters: { + docs: { + description: { + story: 'Slider with the current numeric value shown inline.', + }, + }, + }, +}; + +export const Min = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Slider({ ...args, value: args.min ?? 0, theme }); + }, + parameters: { + docs: { + description: { + story: 'Slider positioned at the minimum value.', + }, + }, + }, +}; + +export const Max = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Slider({ ...args, value: args.max ?? 100, theme }); + }, + parameters: { + docs: { + description: { + story: 'Slider positioned at the maximum value.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/SplitButtonsDropdown.stories.js b/storybook/source/stories/components/SplitButtonsDropdown.stories.js new file mode 100644 index 0000000000..6b12d28366 --- /dev/null +++ b/storybook/source/stories/components/SplitButtonsDropdown.stories.js @@ -0,0 +1,159 @@ +import { SplitButton } from '../../components/SplitButton.js'; +import { resolveStoryTheme, pluginThemeOptions, getTokens } from '../../components/theme-utils.js'; + +const PRESSED_BG = { + 'Light': '#CBCBCB', 'Light Classic': '#7D858C', 'Dark': '#666666', + 'Dark Contrast': '#666666', 'Modern Light': '#DCE7FA', 'Modern Dark': '#375478', +}; + +const THEMES = pluginThemeOptions; + +const defaultItems = [ + { id: '1', label: 'Option 1' }, + { id: '2', label: 'Option 2' }, + { id: '3', label: 'Option 3' }, + { id: '4', label: 'Disabled option', disabled: true }, +]; + +export default { + title: 'Components/Buttons/Split Buttons/Drop Down', + tags: ['autodocs'], + args: { + label: 'Button', + state: 'default', + type: 'dropDown', + interactive: true, + themeMode: 'Auto', + }, + argTypes: { + label: { control: 'text', description: 'Visible split-button label' }, + interactive: { + control: 'boolean', + description: 'Allow hover and press feedback directly in the canvas', + }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + }, + type: { table: { disable: true } }, + state: { table: { disable: true } }, + items: { table: { disable: true } }, + isOpen: { table: { disable: true } }, + onItemSelect: { table: { disable: true } }, + theme: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: + 'Split button with a dropdown affordance. Clicking the chevron opens a plain context-menu-style list of options.', + }, + }, + }, +}; + +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const tokens = getTokens(theme); + const pressedBg = PRESSED_BG[tokens.theme] ?? tokens.surfaceAlt; + + const wrapper = document.createElement('div'); + wrapper.style.paddingBottom = '120px'; + + const el = document.createElement('div'); + el.style.display = 'contents'; + + let currentLabel = args.label ?? 'Button'; + let open = false; + let outsideClickHandler = null; + + const update = () => { + if (outsideClickHandler) { + document.removeEventListener('click', outsideClickHandler, true); + outsideClickHandler = null; + } + el.innerHTML = SplitButton({ label: currentLabel, type: 'dropDown', state: 'default', isOpen: open, items: defaultItems, theme }); + + // Dropdown item hover/pressed + click + if (open) { + const dropdownContainer = el.querySelector('div[style*="position:absolute"]'); + if (dropdownContainer) { + dropdownContainer.querySelectorAll('button').forEach((btn) => { + const item = defaultItems.find((i) => i.label === btn.textContent?.trim()); + if (!item || item.disabled) return; + btn.addEventListener('mouseenter', () => { btn.style.background = tokens.surfaceAlt; }); + btn.addEventListener('mouseleave', () => { btn.style.background = 'transparent'; }); + btn.addEventListener('mousedown', () => { btn.style.background = pressedBg; }); + btn.addEventListener('mouseup', () => { btn.style.background = tokens.surfaceAlt; }); + btn.addEventListener('click', () => { + currentLabel = item.label; + open = false; + update(); + }); + }); + } + } + + if (open) { + outsideClickHandler = (e) => { + if (!wrapper.contains(e.target)) { + open = false; + update(); + } + }; + // Use capture so it fires before the chevron's own click handler + document.addEventListener('click', outsideClickHandler, true); + } + + const chevronBtn = el.querySelector('button[aria-label="Open menu"]'); + if (chevronBtn) { + const chevronRestBg = open ? pressedBg : tokens.bg; + chevronBtn.addEventListener('click', () => { open = !open; update(); }); + chevronBtn.addEventListener('mouseenter', () => { chevronBtn.style.background = tokens.surfaceAlt; }); + // Restore to the actual rest background (not '' which leaves it transparent) + chevronBtn.addEventListener('mouseleave', () => { chevronBtn.style.background = chevronRestBg; }); + chevronBtn.addEventListener('mousedown', () => { chevronBtn.style.background = pressedBg; }); + chevronBtn.addEventListener('mouseup', () => { chevronBtn.style.background = tokens.surfaceAlt; }); + } + }; + + update(); + wrapper.appendChild(el); + return wrapper; + }, +}; + +export const Open = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const wrapper = document.createElement('div'); + wrapper.style.paddingBottom = '120px'; + wrapper.innerHTML = SplitButton({ label: args.label, type: 'dropDown', state: 'default', isOpen: true, items: defaultItems, theme }); + return wrapper; + }, + args: { isOpen: true }, + parameters: { + docs: { + description: { + story: 'Dropdown in the open state. Switch the toolbar theme to preview across themes.', + }, + }, + }, +}; + +export const Disabled = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return SplitButton({ label: args.label, type: 'dropDown', state: 'disabled', isOpen: false, items: defaultItems, theme }); + }, + parameters: { + docs: { + description: { + story: 'Disabled dropdown split button.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/SplitButtonsIconLeft.stories.js b/storybook/source/stories/components/SplitButtonsIconLeft.stories.js new file mode 100644 index 0000000000..15192dd2db --- /dev/null +++ b/storybook/source/stories/components/SplitButtonsIconLeft.stories.js @@ -0,0 +1,136 @@ +import { SplitButton } from '../../components/SplitButton.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +export default { + title: 'Components/Buttons/Split Buttons/Icon Left', + tags: ['autodocs'], + args: { + label: 'Button', + state: 'default', + type: 'iconLeft', + interactive: true, + themeMode: 'Auto', + }, + argTypes: { + label: { control: 'text', description: 'Visible split-button label' }, + interactive: { + control: 'boolean', + description: 'Allow hover and press feedback directly in the canvas', + }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + }, + type: { table: { disable: true } }, + state: { table: { disable: true } }, + theme: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: 'Split button with a leading icon section, used when the action needs a stronger visual cue.', + }, + }, + }, +}; + +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + + const el = document.createElement('div'); + el.style.display = 'contents'; + + let hovered = false; + let pressed = false; + + const update = () => { + const state = pressed ? 'pressed' : hovered ? 'hover' : 'default'; + el.innerHTML = SplitButton({ label: args.label, type: 'iconLeft', state, theme }); + }; + + el.addEventListener('mouseenter', () => { hovered = true; update(); }); + el.addEventListener('mouseleave', () => { hovered = false; pressed = false; update(); }); + el.addEventListener('mousedown', () => { pressed = true; update(); }); + el.addEventListener('mouseup', () => { pressed = false; update(); }); + + update(); + return el; + }, +}; + +export const Hovered = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + + const el = document.createElement('div'); + el.style.display = 'contents'; + + let hovered = false; + + const update = () => { + el.innerHTML = SplitButton({ label: args.label, type: 'iconLeft', state: hovered ? 'hover' : 'default', theme }); + }; + + el.addEventListener('mouseenter', () => { hovered = true; update(); }); + el.addEventListener('mouseleave', () => { hovered = false; update(); }); + + update(); + return el; + }, + parameters: { + docs: { + description: { + story: 'Interactive hover demo for the icon-left split button. Move the pointer over the control in the canvas.', + }, + }, + }, +}; + +export const Pressed = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + + const el = document.createElement('div'); + el.style.display = 'contents'; + + let toggled = false; + + const update = () => { + el.innerHTML = SplitButton({ label: args.label, type: 'iconLeft', state: toggled ? 'pressed' : 'default', theme }); + }; + + el.addEventListener('click', () => { + toggled = !toggled; + update(); + }); + + update(); + return el; + }, + parameters: { + docs: { + description: { + story: 'Pressed-state demo toggled by clicking the control.', + }, + }, + }, +}; + +export const Disabled = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return SplitButton({ label: args.label, type: 'iconLeft', state: 'disabled', theme }); + }, + parameters: { + docs: { + description: { + story: 'Disabled icon-left split button.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/SplitButtonsTabs.stories.js b/storybook/source/stories/components/SplitButtonsTabs.stories.js new file mode 100644 index 0000000000..8f7c4cd9c1 --- /dev/null +++ b/storybook/source/stories/components/SplitButtonsTabs.stories.js @@ -0,0 +1,136 @@ +import { SplitButton } from '../../components/SplitButton.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +export default { + title: 'Components/Buttons/Split Buttons/Tabs', + tags: ['autodocs'], + args: { + label: 'Label', + state: 'default', + type: 'tabs', + interactive: true, + themeMode: 'Auto', + }, + argTypes: { + label: { control: 'text', description: 'Visible tab-style label' }, + interactive: { + control: 'boolean', + description: 'Allow hover and press feedback directly in the canvas', + }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + }, + type: { table: { disable: true } }, + state: { table: { disable: true } }, + theme: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: 'Split-button tab style used for compact segmented or tab-like actions.', + }, + }, + }, +}; + +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + + const el = document.createElement('div'); + el.style.display = 'contents'; + + let hovered = false; + let pressed = false; + + const update = () => { + const state = pressed ? 'pressed' : hovered ? 'hover' : 'default'; + el.innerHTML = SplitButton({ label: args.label, type: 'tabs', state, theme }); + }; + + el.addEventListener('mouseenter', () => { hovered = true; update(); }); + el.addEventListener('mouseleave', () => { hovered = false; pressed = false; update(); }); + el.addEventListener('mousedown', () => { pressed = true; update(); }); + el.addEventListener('mouseup', () => { pressed = false; update(); }); + + update(); + return el; + }, +}; + +export const Hovered = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + + const el = document.createElement('div'); + el.style.display = 'contents'; + + let hovered = false; + + const update = () => { + el.innerHTML = SplitButton({ label: args.label, type: 'tabs', state: hovered ? 'hover' : 'default', theme }); + }; + + el.addEventListener('mouseenter', () => { hovered = true; update(); }); + el.addEventListener('mouseleave', () => { hovered = false; update(); }); + + update(); + return el; + }, + parameters: { + docs: { + description: { + story: 'Interactive hover demo for the tab-style split button. Move the pointer over the control in the canvas.', + }, + }, + }, +}; + +export const Pressed = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + + const el = document.createElement('div'); + el.style.display = 'contents'; + + let toggled = false; + + const update = () => { + el.innerHTML = SplitButton({ label: args.label, type: 'tabs', state: toggled ? 'pressed' : 'default', theme }); + }; + + el.addEventListener('click', () => { + toggled = !toggled; + update(); + }); + + update(); + return el; + }, + parameters: { + docs: { + description: { + story: 'Pressed-state demo toggled by clicking the control.', + }, + }, + }, +}; + +export const Disabled = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return SplitButton({ label: args.label, type: 'tabs', state: 'disabled', theme }); + }, + parameters: { + docs: { + description: { + story: 'Disabled tab-style split button.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/Switches.stories.js b/storybook/source/stories/components/Switches.stories.js new file mode 100644 index 0000000000..2811b5c3c5 --- /dev/null +++ b/storybook/source/stories/components/Switches.stories.js @@ -0,0 +1,116 @@ +import { Switch } from '../../components/Switch.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +export default { + title: 'Components/Form/Switches', + tags: ['autodocs'], + args: { + checked: false, + state: 'default', + interactive: true, + themeMode: 'Auto', + }, + argTypes: { + checked: { + control: 'boolean', + description: 'Current on/off value', + }, + state: { + control: 'select', + options: ['default', 'hover', 'disabled'], + description: 'Rendered visual state', + }, + interactive: { + control: 'boolean', + description: 'Allow hover and toggle behavior directly in the canvas', + }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + table: { defaultValue: { summary: 'Auto' } }, + }, + theme: { table: { disable: true } }, + onChange: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: 'Switch control with on/off values and state variants.', + }, + }, + }, +}; + +/** Build an interactive switch element that responds to hover and click. */ +function makeSwitch({ checked: initialChecked, state, interactive, theme }) { + const isDisabled = state === 'disabled'; + + if (!interactive || isDisabled) { + const el = document.createElement('div'); + el.style.display = 'contents'; + el.innerHTML = Switch({ checked: initialChecked, state: isDisabled ? 'disabled' : state, theme }); + return el; + } + + const el = document.createElement('div'); + el.style.display = 'contents'; + let currentChecked = Boolean(initialChecked); + let hovered = false; + + const update = () => { + el.innerHTML = Switch({ + checked: currentChecked, + state: hovered ? 'hover' : 'default', + theme, + }); + }; + + el.addEventListener('mouseenter', () => { hovered = true; update(); }); + el.addEventListener('mouseleave', () => { hovered = false; update(); }); + el.addEventListener('click', () => { currentChecked = !currentChecked; update(); }); + + update(); + return el; +} + +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeSwitch({ ...args, theme }); + }, +}; + +export const HoveredSwitch = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeSwitch({ ...args, state: 'default', interactive: true, theme }); + }, + parameters: { + docs: { + description: { + story: 'Interactive hover demo for the switch. Move the pointer over the control in the canvas.', + }, + }, + }, +}; + +export const DisabledSwitches = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const el = document.createElement('div'); + el.style.display = 'contents'; + el.innerHTML = Switch({ checked: Boolean(args.checked), state: 'disabled', theme }); + return el; + }, + parameters: { + docs: { + description: { + story: 'Fixed disabled reference state for the switch.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/Tabs.stories.js b/storybook/source/stories/components/Tabs.stories.js new file mode 100644 index 0000000000..828a4ca66c --- /dev/null +++ b/storybook/source/stories/components/Tabs.stories.js @@ -0,0 +1,145 @@ +import { Tabs } from '../../components/Tabs.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; +import { tabsByTheme } from '../../data/tabs.ts'; + +const THEMES = pluginThemeOptions; + +const defaultItems = [ + { id: 'paragraph', label: 'Paragraph' }, + { id: 'table', label: 'Table' }, + { id: 'style', label: 'Style' }, +]; + +export default { + title: 'Components/Data Display/Tabs', + tags: ['autodocs'], + args: { + items: defaultItems, + activeId: 'paragraph', + state: 'default', + hoveredId: 'table', + interactive: true, + withIcon: false, + scaled: false, + themeMode: 'Auto', + }, + argTypes: { + activeId: { control: 'text', description: 'Currently selected tab id' }, + state: { + control: 'select', + options: ['default', 'hover'], + description: 'Rendered visual state used for reference-only tab styling', + }, + hoveredId: { + control: 'text', + description: 'Tab id used when the hover state is forced for reference', + }, + interactive: { + control: 'boolean', + description: 'Allow hover and selection changes in the canvas', + }, + withIcon: { control: 'boolean', description: 'Show leading icons in the tab labels' }, + scaled: { control: 'boolean', description: 'Stretch tabs to fill the full container width' }, + items: { control: 'object', description: 'Tab definitions with ids and labels' }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + table: { defaultValue: { summary: 'Auto' } }, + }, + theme: { table: { disable: true } }, + onChange: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: + 'Horizontal tabs for compact mode switching inside panels and dialogs, with optional icons and live hover behavior.', + }, + }, + }, +}; + +function makeInteractiveTabs({ items, activeId: initialActiveId, withIcon, scaled, theme }) { + const el = document.createElement('div'); + el.style.display = 'contents'; + let activeId = initialActiveId ?? 'paragraph'; + + // theme is already resolved by resolveStoryTheme before being passed here + const tokens = tabsByTheme[theme] ?? tabsByTheme['Light']; + + const render = () => { + el.innerHTML = Tabs({ items, activeId, withIcon, scaled, theme }); + const tabButtons = el.querySelectorAll('button[role="tab"]'); + tabButtons.forEach((btn, index) => { + const item = items[index]; + if (!item) return; + + // Capture the at-rest background from the rendered HTML so mouseleave can restore it + const restBg = btn.style.background; + + // Hover: update only this button's background — no DOM rebuild, so clicks aren't broken + btn.addEventListener('mouseenter', () => { btn.style.background = tokens.hoverBg; }); + btn.addEventListener('mouseleave', () => { btn.style.background = restBg; }); + // Click: change active tab and re-render (only here is full re-render needed) + btn.addEventListener('click', () => { activeId = item.id; render(); }); + }); + }; + + render(); + return el; +} + +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const items = args.items ?? defaultItems; + return makeInteractiveTabs({ ...args, items, theme }); + }, +}; + +export const IconTabs = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const items = args.items ?? defaultItems; + return makeInteractiveTabs({ ...args, items, withIcon: true, theme }); + }, + parameters: { + docs: { + description: { + story: 'Tabs with leading icons for richer navigation labels.', + }, + }, + }, +}; + +export const HoveredTabs = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const items = args.items ?? defaultItems; + return makeInteractiveTabs({ ...args, items, activeId: 'paragraph', theme }); + }, + parameters: { + docs: { + description: { + story: 'Interactive hover demo where a non-selected tab can be highlighted. Move the pointer over another tab in the canvas.', + }, + }, + }, +}; + +export const HoveredSelected = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const items = args.items ?? defaultItems; + return makeInteractiveTabs({ ...args, items, activeId: 'paragraph', theme }); + }, + parameters: { + docs: { + description: { + story: 'Interactive hover demo when the selected tab is also under the pointer. Move the pointer over the active tab in the canvas.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/TextArea.stories.js b/storybook/source/stories/components/TextArea.stories.js new file mode 100644 index 0000000000..dbaab7ccc1 --- /dev/null +++ b/storybook/source/stories/components/TextArea.stories.js @@ -0,0 +1,172 @@ +import { TextArea } from '../../components/TextArea.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +// Copy button hover/pressed backgrounds match icon-button ghost style per theme +const COPY_HOVER_BG = { + 'Light': '#E0E0E0', + 'Light Classic': '#D8DADC', + 'Dark': '#555555', + 'Dark Contrast': '#424242', + 'Modern Light': '#F9F9F9', + 'Modern Dark': '#585858', +}; + +const COPY_PRESSED_BG = { + 'Light': '#CBCBCB', + 'Light Classic': '#7D858C', + 'Dark': '#606060', + 'Dark Contrast': '#666666', + 'Modern Light': '#EAEAEA', + 'Modern Dark': '#686868', +}; + +/** Wrap TextArea HTML and attach hover/pressed states to the copy button. */ +function makeInteractiveTextArea(html, theme) { + const wrapper = document.createElement('div'); + wrapper.style.display = 'contents'; + wrapper.innerHTML = html; + + const copyBtn = wrapper.querySelector('button[aria-label="Copy text"]'); + if (!copyBtn || copyBtn.disabled) return wrapper; + + const isModern = theme.startsWith('Modern'); + copyBtn.style.borderRadius = isModern ? '4px' : '2px'; + + const hoverBg = COPY_HOVER_BG[theme] ?? '#E0E0E0'; + const pressedBg = COPY_PRESSED_BG[theme] ?? '#CBCBCB'; + + copyBtn.addEventListener('mouseenter', () => { copyBtn.style.background = hoverBg; }); + copyBtn.addEventListener('mouseleave', () => { copyBtn.style.background = 'transparent'; }); + copyBtn.addEventListener('mousedown', () => { copyBtn.style.background = pressedBg; }); + copyBtn.addEventListener('mouseup', () => { copyBtn.style.background = hoverBg; }); + + return wrapper; +} + +export default { + title: 'Components/Form/Text Area', + tags: ['autodocs'], + args: { + label: 'Title', + caption: 'Caption', + state: 'no-scroll', + width: 236, + height: 188, + showLabel: true, + showCaption: true, + showCopyButton: true, + themeMode: 'Auto', + }, + argTypes: { + label: { control: 'text', description: 'Label above the text area' }, + caption: { control: 'text', description: 'Supporting text below the field' }, + value: { control: 'text', description: 'Current controlled text value' }, + state: { + control: 'select', + options: ['default', 'disabled', 'scroll', 'no-scroll'], + description: 'Rendered visual state', + }, + width: { control: 'number', description: 'Outer component width' }, + height: { control: 'number', description: 'Visible text area height' }, + showLabel: { control: 'boolean', description: 'Show the label row' }, + showCaption: { control: 'boolean', description: 'Show the caption below the field' }, + showCopyButton: { control: 'boolean', description: 'Show the copy action button' }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + table: { defaultValue: { summary: 'Auto' } }, + }, + theme: { table: { disable: true } }, + onChange: { table: { disable: true } }, + onCopy: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: + 'Multi-line text field with optional copy action, caption, and themed scroll treatment for longer content.', + }, + }, + }, +}; + +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveTextArea(TextArea({ ...args, theme }), theme); + }, +}; + +export const ScrollArea = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveTextArea(TextArea({ ...args, state: 'scroll', theme }), theme); + }, + parameters: { + docs: { + description: { + story: 'Fixed scroll reference state for longer content.', + }, + }, + }, +}; + +export const NoScrollArea = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveTextArea(TextArea({ ...args, state: 'no-scroll', theme }), theme); + }, + parameters: { + docs: { + description: { + story: 'Fixed no-scroll reference state without visible scrollbar treatment.', + }, + }, + }, +}; + +export const DisabledArea = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return TextArea({ ...args, state: 'disabled', theme }); + }, + parameters: { + docs: { + description: { + story: 'Fixed disabled reference state that preserves layout without accepting input.', + }, + }, + }, +}; + +export const NoCaption = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveTextArea(TextArea({ ...args, showCaption: false, theme }), theme); + }, + parameters: { + docs: { + description: { + story: 'Variant without supporting caption text.', + }, + }, + }, +}; + +export const NoCopyButton = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return TextArea({ ...args, showCopyButton: false, theme }); + }, + parameters: { + docs: { + description: { + story: 'Variant without the copy action button.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/TextField.stories.js b/storybook/source/stories/components/TextField.stories.js new file mode 100644 index 0000000000..aa9833e0ca --- /dev/null +++ b/storybook/source/stories/components/TextField.stories.js @@ -0,0 +1,259 @@ +import { TextField } from '../../components/TextField.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +export default { + title: 'Components/Form/Text Field', + tags: ['autodocs'], + args: { + label: 'Title', + caption: 'Caption', + errorText: 'Error text', + placeholder: 'Line input', + value: '', + state: 'default', + placeholderState: 'default', + withIconRight: false, + interactive: true, + isHovered: false, + themeMode: 'Auto', + }, + argTypes: { + label: { control: 'text', description: 'Label above the field' }, + caption: { control: 'text', description: 'Supporting text below the field' }, + errorText: { control: 'text', description: 'Validation message for the error state' }, + placeholder: { control: 'text', description: 'Placeholder text shown inside the field' }, + value: { control: 'text', description: 'Current controlled input value' }, + state: { + control: 'select', + options: ['default', 'hover', 'focused', 'typing', 'filled', 'error', 'disabled'], + description: 'Rendered visual state of the field', + }, + placeholderState: { + control: 'select', + options: ['default', 'hidden'], + description: 'Show the placeholder normally or hide it for a denser layout', + }, + withIconRight: { control: 'boolean', description: 'Show the trailing icon button' }, + interactive: { + control: 'boolean', + description: 'Allow hover/focus behavior directly in the canvas', + }, + isHovered: { control: 'boolean', description: 'Force hover appearance for review' }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + table: { defaultValue: { summary: 'Auto' } }, + }, + theme: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: + 'Single-line input with label, caption, error messaging, optional trailing icon, and theme-aware control states.', + }, + }, + }, +}; + +/** + * Build an interactive DOM wrapper that tracks focus/blur/hover on the real + * element and re-renders the HTML string on each state change. + */ +function makeInteractiveTextField(args, theme) { + const el = document.createElement('div'); + el.style.display = 'contents'; + + let isFocused = false; + let isHovered = false; + let value = args.value ?? ''; + // Prevents spurious blur/focus events fired by the browser when innerHTML + // replacement removes the focused from the DOM mid-update. + let inUpdate = false; + + const update = (restoreFocus = false) => { + inUpdate = true; + + const state = args.state === 'disabled' + ? 'disabled' + : args.isHovered || isHovered + ? 'hover' + : isFocused + ? 'focused' + : value + ? 'filled' + : 'default'; + + el.innerHTML = TextField({ ...args, theme, state, value }); + + const input = el.querySelector('input'); + inUpdate = false; + + if (!input) return; + input.value = value; + + // Restore focus to the newly rendered input without triggering another update + if (restoreFocus) setTimeout(() => { input.focus(); }, 0); + + input.addEventListener('focus', () => { + if (inUpdate || isFocused) return; + isFocused = true; + update(true); + }); + input.addEventListener('blur', () => { + if (inUpdate || !isFocused) return; + isFocused = false; + update(false); + }); + input.addEventListener('input', (e) => { value = e.target.value; }); + input.addEventListener('mouseenter', () => { + if (inUpdate || isHovered || isFocused) return; + isHovered = true; + update(false); + }); + input.addEventListener('mouseleave', () => { + if (inUpdate || !isHovered) return; + isHovered = false; + update(false); + }); + }; + + update(false); + return el; +} + +// --------------------------------------------------------------------------- +// Default — interactive field with real hover/focus/blur behavior +// --------------------------------------------------------------------------- +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + if (args.interactive === false) { + return TextField({ ...args, theme }); + } + return makeInteractiveTextField(args, theme); + }, +}; + +// --------------------------------------------------------------------------- +// HoveredField — fixed hover reference state +// --------------------------------------------------------------------------- +export const HoveredField = { + args: { + state: 'hover', + isHovered: true, + interactive: false, + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return TextField({ ...args, theme }); + }, + parameters: { + docs: { + description: { + story: 'Fixed hover reference state for the single-line field.', + }, + }, + }, +}; + +// --------------------------------------------------------------------------- +// FocusedField — fixed focused reference state +// --------------------------------------------------------------------------- +export const FocusedField = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return TextField({ ...args, label: 'Focused field', state: 'focused', interactive: false, theme }); + }, + parameters: { + docs: { + description: { + story: 'Fixed focused reference state used when the field is ready for typing.', + }, + }, + }, +}; + +// --------------------------------------------------------------------------- +// ErrorField — fixed error reference state +// --------------------------------------------------------------------------- +export const ErrorField = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return TextField({ ...args, label: 'Field with error', state: 'error', interactive: false, theme }); + }, + parameters: { + docs: { + description: { + story: 'Fixed error reference state with validation messaging and error border.', + }, + }, + }, +}; + +// --------------------------------------------------------------------------- +// DisabledField — fixed disabled reference state +// --------------------------------------------------------------------------- +export const DisabledField = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return TextField({ ...args, label: 'Disabled field', state: 'disabled', interactive: false, theme }); + }, + parameters: { + docs: { + description: { + story: 'Fixed disabled reference state that preserves layout but removes interaction.', + }, + }, + }, +}; + +// --------------------------------------------------------------------------- +// IconRightField — field with trailing icon +// --------------------------------------------------------------------------- +export const IconRightField = { + args: { + withIconRight: true, + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return TextField({ ...args, label: 'Icon right field', withIconRight: true, theme }); + }, + parameters: { + docs: { + description: { + story: 'Field with a trailing icon action.', + }, + }, + }, +}; + +// --------------------------------------------------------------------------- +// HiddenPlaceholderField — placeholder hidden for denser layouts +// --------------------------------------------------------------------------- +export const HiddenPlaceholderField = { + args: { + placeholderState: 'hidden', + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + if (args.interactive === false) { + return TextField({ ...args, label: 'Hidden placeholder', placeholderState: 'hidden', theme }); + } + return makeInteractiveTextField( + { ...args, label: 'Hidden placeholder', placeholderState: 'hidden' }, + theme, + ); + }, + parameters: { + docs: { + description: { + story: 'Variant with hidden placeholder treatment for denser layouts.', + }, + }, + }, +}; diff --git a/storybook/source/stories/components/Tooltip.stories.js b/storybook/source/stories/components/Tooltip.stories.js new file mode 100644 index 0000000000..1701c5affe --- /dev/null +++ b/storybook/source/stories/components/Tooltip.stories.js @@ -0,0 +1,41 @@ +import { Tooltip } from '../../components/Tooltip.js'; +import { resolveStoryTheme, pluginThemeOptions } from '../../components/theme-utils.js'; + +const THEMES = pluginThemeOptions; + +export default { + title: 'Components/Feedback/Tooltip', + tags: ['autodocs'], + args: { + text: 'Texts', + themeMode: 'Auto', + }, + argTypes: { + text: { + control: 'text', + description: 'Tooltip text', + }, + themeMode: { + name: 'theme', + control: 'select', + options: ['Auto', ...THEMES], + description: 'Auto = current Storybook toolbar theme', + }, + theme: { table: { disable: true } }, + }, + parameters: { + docs: { + description: { + component: + 'Compact tooltip for short helper text near controls and icon buttons. Use it for hints, not for long explanatory copy.', + }, + }, + }, +}; + +export const Default = { + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Tooltip({ text: args.text, theme }); + }, +}; diff --git a/storybook/source/stories/foundations/Colors.stories.js b/storybook/source/stories/foundations/Colors.stories.js new file mode 100644 index 0000000000..9cfa7df81c --- /dev/null +++ b/storybook/source/stories/foundations/Colors.stories.js @@ -0,0 +1,455 @@ +export default { + title: 'Foundations/Colors', + parameters: { + docs: { + description: { + component: + 'Semantic color tokens for all 6 plugin themes. Use the tabs to switch between themes. Click any swatch to copy its value.', + }, + }, + }, +}; + +// ─── Token data for all 6 themes ───────────────────────────────────────────── + +const TOOLBAR_HEADER = [ + { name: 'Document', value: '#446995', desc: 'Document editor toolbar' }, + { name: 'Spreadsheet', value: '#40865C', desc: 'Spreadsheet editor toolbar' }, + { name: 'Presentation', value: '#BE664F', desc: 'Presentation editor toolbar' }, + { name: 'Forms', value: '#AA5252', desc: 'Forms editor toolbar' }, +]; + +const colorPalette = { + Light: { + Background: [ + { name: 'Normal', value: '#FFFFFF', desc: 'Content area, buttons' }, + { name: 'Toolbar', value: '#F7F7F7', desc: 'Left panel, toolbar' }, + { name: 'Toolbar Additional', value: '#EFEFEF', desc: 'Inactive tabs' }, + { name: 'Primary Dialog Button', value: '#444444', desc: 'Dialog buttons, tab underline' }, + { name: 'Loader', value: 'rgba(68, 68, 68, 0.95)', desc: 'Loader overlay' }, + { name: 'Scrim', value: 'rgba(0, 0, 0, 0.20)', desc: 'Modal backdrop' }, + { name: 'Notification Popover', value: '#FCFED7', desc: 'Notification popups' }, + ], + Highlight: [ + { name: 'Button Hover', value: '#E0E0E0', desc: 'Hover state' }, + { name: 'Button Pressed', value: '#CBCBCB', desc: 'Pressed state' }, + { name: 'Button Pressed Hover', value: '#BABABA', desc: 'After press' }, + { name: 'Primary Dialog Button Hover', value: '#1C1C1C', desc: 'Dialog button hover' }, + ], + Border: [ + { name: 'Toolbar', value: '#CBCBCB', desc: 'Toolbar divider, panel' }, + { name: 'Regular Control', value: '#C0C0C0', desc: 'Input border' }, + { name: 'Control Focus', value: '#848484', desc: 'Active input border' }, + { name: 'Error', value: '#F62211', desc: 'Error input border' }, + ], + Text: [ + { name: 'Normal', value: 'rgba(0, 0, 0, 0.80)', desc: 'Primary text' }, + { name: 'Secondary', value: 'rgba(0, 0, 0, 0.60)', desc: 'Secondary text' }, + { name: 'Tertiary', value: 'rgba(0, 0, 0, 0.40)', desc: 'Tertiary text' }, + { name: 'Inverse', value: '#FFFFFF', desc: 'Text on dark backgrounds' }, + { name: 'Error', value: '#F62211', desc: 'Error text' }, + ], + Icon: [ + { name: 'Normal', value: 'rgba(0, 0, 0, 0.80)', desc: 'Primary icons' }, + { name: 'Inverse', value: '#FFFFFF', desc: 'Icons on dark backgrounds' }, + { name: 'Tertiary', value: 'rgba(0, 0, 0, 0.50)', desc: 'Secondary icons' }, + ], + Scroll: [ + { name: 'Thumb', value: '#F7F7F7', desc: 'Scrollbar thumb' }, + { name: 'Thumb Hover', value: '#CBCBCB', desc: 'Scrollbar thumb hover' }, + { name: 'Thumb Pressed', value: '#ADADAD', desc: 'Scrollbar thumb pressed' }, + { name: 'Thumb Border', value: '#CBCBCB', desc: 'Scrollbar thumb border' }, + { name: 'Arrow', value: '#ADADAD', desc: 'Scroll arrow' }, + { name: 'Arrow Hover', value: '#F7F7F7', desc: 'Scroll arrow hover & pressed' }, + ], + 'Toolbar Header': TOOLBAR_HEADER, + }, + + 'Light Classic': { + Background: [ + { name: 'Normal', value: '#FFFFFF', desc: 'Content area, buttons' }, + { name: 'Toolbar', value: '#F1F1F1', desc: 'Left panel, toolbar' }, + { name: 'Toolbar Additional', value: '#F1F1F1', desc: 'Inactive tabs' }, + { name: 'Primary Dialog Button', value: '#7D858C', desc: 'Dialog buttons, tab underline' }, + { name: 'Loader', value: 'rgba(0, 0, 0, 0.65)', desc: 'Loader overlay' }, + { name: 'Scrim', value: 'rgba(0, 0, 0, 0.20)', desc: 'Modal backdrop' }, + { name: 'Notification Popover', value: '#FCFED7', desc: 'Notification popups' }, + ], + Highlight: [ + { name: 'Button Hover', value: '#D8DADC', desc: 'Hover state' }, + { name: 'Button Pressed', value: '#7D858C', desc: 'Pressed state' }, + { name: 'Button Pressed Hover', value: '#7D858C', desc: 'After press' }, + { name: 'Primary Dialog Button Hover', value: '#666D73', desc: 'Dialog button hover' }, + ], + Border: [ + { name: 'Toolbar', value: '#CBCBCB', desc: 'Toolbar divider, panel' }, + { name: 'Regular Control', value: '#CFCFCF', desc: 'Input border' }, + { name: 'Control Focus', value: '#848484', desc: 'Active input border' }, + { name: 'Error', value: '#D9534F', desc: 'Error input border' }, + ], + Text: [ + { name: 'Normal', value: '#444444', desc: 'Primary text' }, + { name: 'Secondary', value: '#A5A5A5', desc: 'Secondary text' }, + { name: 'Tertiary', value: '#A5A5A5', desc: 'Tertiary text' }, + { name: 'Inverse', value: '#FFFFFF', desc: 'Text on dark backgrounds' }, + { name: 'Error', value: '#D9534F', desc: 'Error text' }, + ], + Icon: [ + { name: 'Normal', value: '#444444', desc: 'Primary icons' }, + { name: 'Inverse', value: '#FFFFFF', desc: 'Icons on dark backgrounds' }, + { name: 'Tertiary', value: '#A5A5A5', desc: 'Secondary icons' }, + ], + Scroll: [ + { name: 'Thumb', value: '#F1F1F1', desc: 'Scrollbar thumb' }, + { name: 'Thumb Hover', value: '#CFCFCF', desc: 'Scrollbar thumb hover' }, + { name: 'Thumb Pressed', value: '#ADADAD', desc: 'Scrollbar thumb pressed' }, + { name: 'Thumb Border', value: '#CFCFCF', desc: 'Scrollbar thumb border' }, + { name: 'Arrow', value: '#ADADAD', desc: 'Scroll arrow' }, + { name: 'Arrow Hover', value: '#F1F1F1', desc: 'Scroll arrow hover & pressed' }, + ], + 'Toolbar Header': TOOLBAR_HEADER, + }, + + 'Modern Light': { + Background: [ + { name: 'Normal', value: '#FFFFFF', desc: 'Content area, buttons' }, + { name: 'Toolbar', value: '#FFFFFF', desc: 'Left panel, toolbar' }, + { name: 'Toolbar Additional', value: '#F3F3F3', desc: 'Inactive tabs' }, + { name: 'Primary Dialog Button', value: '#4473CA', desc: 'Dialog buttons, tab underline' }, + { name: 'Loader', value: 'rgba(56, 56, 56, 0.95)', desc: 'Loader overlay' }, + { name: 'Scrim', value: 'rgba(0, 0, 0, 0.20)', desc: 'Modal backdrop' }, + { name: 'Notification Popover', value: '#FCFED7', desc: 'Notification popups' }, + ], + Highlight: [ + { name: 'Button Hover', value: '#F9F9F9', desc: 'Hover state' }, + { name: 'Button Pressed', value: '#EAEAEA', desc: 'Pressed state' }, + { name: 'Button Pressed Hover', value: '#DCE7FA', desc: 'After press' }, + { name: 'Primary Dialog Button Hover', value: '#2A5BB9', desc: 'Dialog button hover' }, + ], + Border: [ + { name: 'Toolbar', value: '#E1E1E1', desc: 'Toolbar divider, panel' }, + { name: 'Regular Control', value: '#E1E1E1', desc: 'Input border' }, + { name: 'Control Focus', value: '#4473CA', desc: 'Active input border' }, + { name: 'Error', value: '#F62211', desc: 'Error input border' }, + ], + Text: [ + { name: 'Normal', value: '#383838', desc: 'Primary text' }, + { name: 'Secondary', value: 'rgba(56, 56, 56, 0.60)', desc: 'Secondary text' }, + { name: 'Tertiary', value: 'rgba(56, 56, 56, 0.40)', desc: 'Tertiary text' }, + { name: 'Inverse', value: '#FFFFFF', desc: 'Text on dark backgrounds' }, + { name: 'Error', value: '#F62211', desc: 'Error text' }, + ], + Icon: [ + { name: 'Normal', value: '#383838', desc: 'Primary icons' }, + { name: 'Inverse', value: '#FFFFFF', desc: 'Icons on dark backgrounds' }, + { name: 'Tertiary', value: 'rgba(56, 56, 56, 0.50)', desc: 'Secondary icons' }, + ], + Scroll: [ + { name: 'Thumb', value: '#F3F3F3', desc: 'Scrollbar thumb' }, + { name: 'Thumb Hover', value: '#E1E1E1', desc: 'Scrollbar thumb hover' }, + { name: 'Thumb Pressed', value: '#C8C8C8', desc: 'Scrollbar thumb pressed' }, + { name: 'Thumb Border', value: '#E1E1E1', desc: 'Scrollbar thumb border' }, + { name: 'Arrow', value: '#C8C8C8', desc: 'Scroll arrow' }, + { name: 'Arrow Hover', value: '#F3F3F3', desc: 'Scroll arrow hover & pressed' }, + ], + 'Toolbar Header': TOOLBAR_HEADER, + }, + + 'Modern Dark': { + Background: [ + { name: 'Normal', value: '#404040', desc: 'Content area, buttons' }, + { name: 'Toolbar', value: '#404040', desc: 'Left panel, toolbar' }, + { name: 'Toolbar Additional', value: '#303030', desc: 'Inactive tabs' }, + { name: 'Primary Dialog Button', value: '#4A7BE0', desc: 'Dialog buttons, tab underline' }, + { name: 'Loader', value: 'rgba(64, 64, 64, 0.95)', desc: 'Loader overlay' }, + { name: 'Scrim', value: 'rgba(0, 0, 0, 0.40)', desc: 'Modal backdrop' }, + { name: 'Notification Popover', value: '#3A3A3A', desc: 'Notification popups' }, + ], + Highlight: [ + { name: 'Button Hover', value: '#585858', desc: 'Hover state' }, + { name: 'Button Pressed', value: '#686868', desc: 'Pressed state' }, + { name: 'Button Pressed Hover', value: '#375478', desc: 'After press' }, + { name: 'Primary Dialog Button Hover', value: '#366CDA', desc: 'Dialog button hover' }, + ], + Border: [ + { name: 'Toolbar', value: '#686868', desc: 'Toolbar divider, panel' }, + { name: 'Regular Control', value: '#686868', desc: 'Input border' }, + { name: 'Control Focus', value: '#4A7BE0', desc: 'Active input border' }, + { name: 'Error', value: '#FF6B6B', desc: 'Error input border' }, + ], + Text: [ + { name: 'Normal', value: '#F3F3F3', desc: 'Primary text' }, + { name: 'Secondary', value: 'rgba(243, 243, 243, 0.70)', desc: 'Secondary text' }, + { name: 'Tertiary', value: 'rgba(243, 243, 243, 0.50)', desc: 'Tertiary text' }, + { name: 'Inverse', value: '#404040', desc: 'Text on light backgrounds' }, + { name: 'Error', value: '#FF6B6B', desc: 'Error text' }, + ], + Icon: [ + { name: 'Normal', value: '#F3F3F3', desc: 'Primary icons' }, + { name: 'Inverse', value: '#404040', desc: 'Icons on light backgrounds' }, + { name: 'Tertiary', value: 'rgba(243, 243, 243, 0.50)', desc: 'Secondary icons' }, + ], + Scroll: [ + { name: 'Thumb', value: '#585858', desc: 'Scrollbar thumb' }, + { name: 'Thumb Hover', value: '#686868', desc: 'Scrollbar thumb hover' }, + { name: 'Thumb Pressed', value: '#787878', desc: 'Scrollbar thumb pressed' }, + { name: 'Thumb Border', value: '#686868', desc: 'Scrollbar thumb border' }, + { name: 'Arrow', value: '#686868', desc: 'Scroll arrow' }, + { name: 'Arrow Hover', value: '#585858', desc: 'Scroll arrow hover & pressed' }, + ], + 'Toolbar Header': TOOLBAR_HEADER, + }, + + Dark: { + Background: [ + { name: 'Normal', value: '#333333', desc: 'Content area, buttons' }, + { name: 'Toolbar', value: '#333333', desc: 'Left panel, toolbar' }, + { name: 'Toolbar Additional', value: '#2A2A2A', desc: 'Inactive tabs' }, + { name: 'Primary Dialog Button', value: '#DDDDDD', desc: 'Dialog buttons, tab underline' }, + { name: 'Loader', value: 'rgba(51, 51, 51, 0.95)', desc: 'Loader overlay' }, + { name: 'Scrim', value: 'rgba(0, 0, 0, 0.40)', desc: 'Modal backdrop' }, + { name: 'Notification Popover', value: '#2F2F2F', desc: 'Notification popups' }, + ], + Highlight: [ + { name: 'Button Hover', value: '#555555', desc: 'Hover state' }, + { name: 'Button Pressed', value: '#666666', desc: 'Pressed state' }, + { name: 'Button Pressed Hover', value: '#606060', desc: 'After press' }, + { name: 'Primary Dialog Button Hover', value: '#FCFCFC', desc: 'Dialog button hover' }, + ], + Border: [ + { name: 'Toolbar', value: '#666666', desc: 'Toolbar divider, panel' }, + { name: 'Regular Control', value: '#666666', desc: 'Input border' }, + { name: 'Control Focus', value: '#AAAAAA', desc: 'Active input border' }, + { name: 'Error', value: '#FF6B6B', desc: 'Error input border' }, + ], + Text: [ + { name: 'Normal', value: 'rgba(255, 255, 255, 0.80)', desc: 'Primary text' }, + { name: 'Secondary', value: 'rgba(255, 255, 255, 0.60)', desc: 'Secondary text' }, + { name: 'Tertiary', value: 'rgba(255, 255, 255, 0.40)', desc: 'Tertiary text' }, + { name: 'Inverse', value: '#333333', desc: 'Text on light backgrounds' }, + { name: 'Error', value: '#FF6B6B', desc: 'Error text' }, + ], + Icon: [ + { name: 'Normal', value: 'rgba(255, 255, 255, 0.80)', desc: 'Primary icons' }, + { name: 'Inverse', value: '#333333', desc: 'Icons on light backgrounds' }, + { name: 'Tertiary', value: 'rgba(255, 255, 255, 0.50)', desc: 'Secondary icons' }, + ], + Scroll: [ + { name: 'Thumb', value: '#333333', desc: 'Scrollbar thumb' }, + { name: 'Thumb Hover', value: '#555555', desc: 'Scrollbar thumb hover' }, + { name: 'Thumb Pressed', value: '#666666', desc: 'Scrollbar thumb pressed' }, + { name: 'Thumb Border', value: '#666666', desc: 'Scrollbar thumb border' }, + { name: 'Arrow', value: '#ADADAD', desc: 'Scroll arrow' }, + { name: 'Arrow Hover', value: '#333333', desc: 'Scroll arrow hover & pressed' }, + ], + 'Toolbar Header': TOOLBAR_HEADER, + }, + + 'Dark Contrast': { + Background: [ + { name: 'Normal', value: '#1E1E1E', desc: 'Content area, buttons' }, + { name: 'Toolbar', value: '#1E1E1E', desc: 'Left panel, toolbar' }, + { name: 'Toolbar Additional', value: '#141414', desc: 'Inactive tabs' }, + { name: 'Primary Dialog Button', value: '#E6E6E6', desc: 'Dialog buttons, tab underline' }, + { name: 'Loader', value: 'rgba(30, 30, 30, 0.95)', desc: 'Loader overlay' }, + { name: 'Scrim', value: 'rgba(0, 0, 0, 0.50)', desc: 'Modal backdrop' }, + { name: 'Notification Popover', value: '#1A1A1A', desc: 'Notification popups' }, + ], + Highlight: [ + { name: 'Button Hover', value: '#424242', desc: 'Hover state' }, + { name: 'Button Pressed', value: '#666666', desc: 'Pressed state' }, + { name: 'Button Pressed Hover', value: '#555555', desc: 'After press' }, + { name: 'Primary Dialog Button Hover', value: '#A6A6A6', desc: 'Dialog button hover' }, + ], + Border: [ + { name: 'Toolbar', value: '#696969', desc: 'Toolbar divider, panel' }, + { name: 'Regular Control', value: '#696969', desc: 'Input border' }, + { name: 'Control Focus', value: '#B8B8B8', desc: 'Active input border' }, + { name: 'Error', value: '#FF6B6B', desc: 'Error input border' }, + ], + Text: [ + { name: 'Normal', value: '#E8E8E8', desc: 'Primary text' }, + { name: 'Secondary', value: '#B8B8B8', desc: 'Secondary text' }, + { name: 'Tertiary', value: 'rgba(232, 232, 232, 0.50)', desc: 'Tertiary text' }, + { name: 'Inverse', value: '#1E1E1E', desc: 'Text on light backgrounds' }, + { name: 'Error', value: '#FF6B6B', desc: 'Error text' }, + ], + Icon: [ + { name: 'Normal', value: '#E8E8E8', desc: 'Primary icons' }, + { name: 'Inverse', value: '#1E1E1E', desc: 'Icons on light backgrounds' }, + { name: 'Tertiary', value: '#B8B8B8', desc: 'Secondary icons' }, + ], + Scroll: [ + { name: 'Thumb', value: '#1E1E1E', desc: 'Scrollbar thumb' }, + { name: 'Thumb Hover', value: '#424242', desc: 'Scrollbar thumb hover' }, + { name: 'Thumb Pressed', value: '#666666', desc: 'Scrollbar thumb pressed' }, + { name: 'Thumb Border', value: '#696969', desc: 'Scrollbar thumb border' }, + { name: 'Arrow', value: '#B8B8B8', desc: 'Scroll arrow' }, + { name: 'Arrow Hover', value: '#1E1E1E', desc: 'Scroll arrow hover & pressed' }, + ], + 'Toolbar Header': TOOLBAR_HEADER, + }, +}; + +const themeNames = Object.keys(colorPalette); +const groupNames = ['Background', 'Highlight', 'Border', 'Text', 'Icon', 'Scroll', 'Toolbar Header']; + +// ─── Story ──────────────────────────────────────────────────────────────────── + +export const Palette = { + name: 'Palette', + render: (args, context) => { + const globalTheme = context.globals.theme || 'Light'; + const initialTab = themeNames.includes(globalTheme) ? globalTheme : 'Light'; + + const root = document.createElement('div'); + root.style.fontFamily = 'Arial, sans-serif'; + + // ── Tab bar ────────────────────────────────────────────────────────────── + const tabBar = document.createElement('div'); + tabBar.style.cssText = [ + 'display:flex', 'flex-wrap:wrap', 'gap:0', + 'margin-bottom:28px', + 'border-bottom:2px solid var(--page-border)', + ].join(';'); + + themeNames.forEach(name => { + const btn = document.createElement('button'); + btn.type = 'button'; + btn.textContent = name; + btn.dataset.tab = name; + const active = name === initialTab; + btn.style.cssText = [ + 'padding:8px 18px', 'border:none', 'outline:none', + 'background:transparent', 'cursor:pointer', + `color:${active ? 'var(--page-fg)' : 'var(--page-muted)'}`, + 'font-size:13px', `font-weight:${active ? 700 : 400}`, + 'margin-bottom:-2px', + `border-bottom:${active ? '2px solid var(--page-fg)' : '2px solid transparent'}`, + ].join(';'); + tabBar.appendChild(btn); + }); + root.appendChild(tabBar); + + // ── Panels ──────────────────────────────────────────────────────────────── + const panels = {}; + + themeNames.forEach(themeName => { + const theme = colorPalette[themeName]; + const panel = document.createElement('div'); + panel.dataset.panel = themeName; + if (themeName !== initialTab) panel.hidden = true; + + groupNames.forEach(groupName => { + const tokens = theme[groupName]; + if (!tokens?.length) return; + + // Section header + const section = document.createElement('div'); + section.style.marginBottom = '32px'; + + const heading = document.createElement('div'); + heading.textContent = groupName; + heading.style.cssText = [ + 'font-size:11px', 'font-weight:700', 'letter-spacing:0.8px', + 'text-transform:uppercase', 'color:var(--page-muted)', + 'margin-bottom:12px', 'padding-bottom:8px', + 'border-bottom:1px solid var(--page-border)', + ].join(';'); + section.appendChild(heading); + + // Card grid + const grid = document.createElement('div'); + grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:8px;'; + + tokens.forEach(token => { + const card = document.createElement('div'); + card.style.cssText = [ + 'border:1px solid var(--page-border)', 'border-radius:8px', + 'overflow:hidden', 'cursor:pointer', + 'transition:box-shadow 0.12s,transform 0.12s', + ].join(';'); + card.title = `Click to copy ${token.value}`; + + // Swatch + const swatch = document.createElement('div'); + swatch.style.cssText = [ + `background:${token.value}`, + 'height:56px', + 'border-bottom:1px solid rgba(128,128,128,0.15)', + ].join(';'); + card.appendChild(swatch); + + // Info + const info = document.createElement('div'); + info.style.cssText = 'padding:8px 10px;background:var(--page-bg);'; + info.innerHTML = ` +
${token.name}
+
${token.desc}
+
${token.value}
+ `; + card.appendChild(info); + + // Hover + card.addEventListener('mouseenter', () => { + card.style.boxShadow = '0 4px 12px rgba(0,0,0,0.12)'; + card.style.transform = 'translateY(-1px)'; + }); + card.addEventListener('mouseleave', () => { + card.style.boxShadow = ''; + card.style.transform = ''; + }); + + // Click → copy + card.addEventListener('click', () => { + navigator.clipboard?.writeText(token.value).catch(() => {}); + const nameEl = info.querySelector('.t-name'); + const orig = nameEl.textContent; + nameEl.style.color = 'var(--page-accent)'; + nameEl.textContent = 'Copied!'; + setTimeout(() => { + nameEl.style.color = ''; + nameEl.textContent = orig; + }, 1200); + }); + + grid.appendChild(card); + }); + + section.appendChild(grid); + panel.appendChild(section); + }); + + panels[themeName] = panel; + root.appendChild(panel); + }); + + // ── Tab switching ───────────────────────────────────────────────────────── + tabBar.addEventListener('click', e => { + const btn = e.target.closest('button[data-tab]'); + if (!btn) return; + const selected = btn.dataset.tab; + + tabBar.querySelectorAll('button[data-tab]').forEach(b => { + const active = b.dataset.tab === selected; + b.style.color = active ? 'var(--page-fg)' : 'var(--page-muted)'; + b.style.fontWeight = active ? '700' : '400'; + b.style.borderBottom = active ? '2px solid var(--page-fg)' : '2px solid transparent'; + }); + + Object.entries(panels).forEach(([name, panel]) => { + panel.hidden = name !== selected; + }); + }); + + return root; + }, + parameters: { + docs: { + description: { + story: + 'All semantic color tokens grouped by category. Use the tabs to switch between themes — the active tab defaults to the current toolbar theme.', + }, + }, + }, +}; diff --git a/storybook/source/stories/foundations/Icons.stories.js b/storybook/source/stories/foundations/Icons.stories.js new file mode 100644 index 0000000000..361eda7483 --- /dev/null +++ b/storybook/source/stories/foundations/Icons.stories.js @@ -0,0 +1,83 @@ +import { iconSvgs } from '../../data/icon-svgs.ts'; + +export default { + title: 'Foundations/Icons', + tags: ['!dev'], + parameters: { + docs: { + description: { + component: 'Icon catalog used by components across the kit.', + }, + }, + }, +}; + +const iconEntries = Object.keys(iconSvgs) + .sort((a, b) => a.localeCompare(b)) + .map((name) => ({ name, svg: iconSvgs[name] })); + +function iconCard(name, svg) { + return `
+ ${svg} + ${name} +
`; +} + +export const Catalog = { + name: 'Catalog', + render: (args, context) => { + const theme = context.globals.theme || 'Light'; + const isDark = theme === 'Dark' || theme === 'Modern Dark' || theme === 'Dark Contrast'; + const svgFilter = isDark ? 'invert(1)' : 'none'; + return `
+
+ Total icons: ${iconEntries.length} +
+
+ ${iconEntries.map(({ name, svg }) => { + const themedSvg = svg.replace( + /(]*)>/, + `$1 style="display:block;filter:${svgFilter};">` + ); + return iconCard(name, themedSvg); + }).join('')} +
+
`; + }, + parameters: { + docs: { + description: { + story: 'All available icons sorted alphabetically. Switch themes using the toolbar to preview icon appearance on dark backgrounds.', + }, + }, + }, +}; diff --git a/storybook/source/stories/foundations/Typography.stories.js b/storybook/source/stories/foundations/Typography.stories.js new file mode 100644 index 0000000000..e44dccc83a --- /dev/null +++ b/storybook/source/stories/foundations/Typography.stories.js @@ -0,0 +1,175 @@ +export default { + title: 'Foundations/Typography', + parameters: { + docs: { + description: { + component: + 'Typography scale used across all plugin UI components. Primary font is Arial. Styles are grouped by role: headings, body, captions.', + }, + }, + }, +}; + +// ─── Text style definitions ─────────────────────────────────────────────────── + +const textStyles = [ + { name: 'Head1', size: 15, lineHeight: 20, weight: 400, weightName: 'Regular', letterSpacing: 0.30 }, + { name: 'Head1', size: 14, lineHeight: 20, weight: 700, weightName: 'Bold', letterSpacing: 0.28 }, + { name: 'Head2', size: 14, lineHeight: 16, weight: 700, weightName: 'Bold', letterSpacing: 0.28 }, + { name: 'Head3', size: 12, lineHeight: 16, weight: 500, weightName: 'Medium', letterSpacing: 0.24 }, + { name: 'Head3', size: 12, lineHeight: 16, weight: 400, weightName: 'Regular', letterSpacing: 0.24 }, + { name: 'Head4', size: 11, lineHeight: 16, weight: 700, weightName: 'Bold', letterSpacing: 0.22 }, + { name: 'Body', size: 11, lineHeight: 16, weight: 400, weightName: 'Regular', letterSpacing: 0.22 }, + { name: 'Body', size: 11, lineHeight: 14, weight: 400, weightName: 'Regular', letterSpacing: 0.22 }, + { name: 'Caption', size: 11, lineHeight: 12, weight: 400, weightName: 'Regular', letterSpacing: 0.22 }, + { name: 'Caption', size: 10, lineHeight: 12, weight: 400, weightName: 'Regular', letterSpacing: 0.20 }, +]; + +// ─── Stories ────────────────────────────────────────────────────────────────── + +export const TextStyles = { + name: 'Text Styles', + render: () => { + const root = document.createElement('div'); + root.style.fontFamily = 'Arial, Helvetica, sans-serif'; + + // ── Font specimen ── + const specimen = document.createElement('div'); + specimen.style.cssText = [ + 'padding:28px 32px', 'border-radius:12px', + 'background:var(--page-surface)', + 'border:1px solid var(--page-border)', + 'display:flex', 'align-items:center', 'gap:40px', + 'margin-bottom:32px', + ].join(';'); + specimen.innerHTML = ` +
+
Arial
+
+ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
+ 1234567890 '?"!"(%)[#]{@}/&\<-+÷×=>®©₽$€£¥¢:;,.* +
+
+
Aa
+ `; + root.appendChild(specimen); + + // ── Table header ── + const table = document.createElement('div'); + table.style.cssText = 'border:1px solid var(--page-border);border-radius:12px;overflow:hidden;'; + + const header = document.createElement('div'); + header.style.cssText = [ + 'display:grid', 'grid-template-columns:80px 64px 80px 1fr', + 'padding:8px 20px', + 'background:var(--page-surface)', + 'border-bottom:1px solid var(--page-border)', + 'gap:16px', + ].join(';'); + header.innerHTML = ` +
Style
+
Size/LH
+
Weight
+
Sample
+ `; + table.appendChild(header); + + textStyles.forEach((s, i) => { + const rowBg = i % 2 === 0 ? 'var(--page-bg)' : 'var(--page-surface)'; + const row = document.createElement('div'); + row.style.cssText = [ + 'display:grid', 'grid-template-columns:80px 64px 80px 1fr', + 'align-items:center', 'padding:10px 20px', 'gap:16px', + `background:${rowBg}`, + i < textStyles.length - 1 ? 'border-bottom:1px solid var(--page-border)' : '', + ].join(';'); + + row.innerHTML = ` +
${s.name}
+
${s.size}/${s.lineHeight}
+
${s.weightName}
+
+ Lorem ipsum dolor sit amet +
+ `; + table.appendChild(row); + }); + + root.appendChild(table); + return root; + }, + parameters: { + docs: { + description: { + story: 'Full type scale — style name, size / line-height, weight, and live sample.', + }, + }, + }, +}; + +export const ContentExample = { + name: 'Content Example', + render: (args, context) => { + const isDark = ['Dark', 'Dark Contrast', 'Modern Dark'].includes(context.globals.theme); + + const card = (bg, nav, header, caption, body, smallCaption, isLight) => ` +
+
Navigation
+
+
Header
+
Caption caption. Caption caption
+
+
+
Text block text block. Text block text block.
Text block text block. Text block text block.
+
Caption caption. Caption caption
+
+
+ `; + + const lightCard = card( + 'var(--page-bg)', + 'var(--page-fg)', 'var(--page-fg)', 'var(--page-muted)', + 'var(--page-fg)', 'var(--page-muted)', + true + ); + + const darkCard = card( + '#333333', + 'rgba(255,255,255,0.80)', 'rgba(255,255,255,0.80)', 'rgba(255,255,255,0.60)', + 'rgba(255,255,255,0.80)', 'rgba(255,255,255,0.60)', + false + ); + + return `
+ ${lightCard} + ${darkCard} +
`; + }, + parameters: { + docs: { + description: { + story: 'Typography in context — left panel on a light background and a dark background.', + }, + }, + }, +}; + +export const Links = { + name: 'Links', + render: () => { + return `
+
Pseudolink (dashed underline)
+
+
Show advanced settings
+
+
+
`; + }, + parameters: { + docs: { + description: { + story: 'Pseudolink style — plain text with a dashed 1px underline, no color change.', + }, + }, + }, +}; diff --git a/storybook/source/styles/cards.css b/storybook/source/styles/cards.css new file mode 100644 index 0000000000..17fa635be0 --- /dev/null +++ b/storybook/source/styles/cards.css @@ -0,0 +1,13 @@ +.ui-card, +.ui-card * { + box-sizing: border-box; +} + +.ui-card button { + appearance: none; + -webkit-appearance: none; + font-family: Arial, Helvetica, sans-serif; + margin: 0; + padding: 0; + outline: none; +} diff --git a/storybook/source/styles/checkbox.css b/storybook/source/styles/checkbox.css new file mode 100644 index 0000000000..fb89ee7ec6 --- /dev/null +++ b/storybook/source/styles/checkbox.css @@ -0,0 +1,15 @@ +.ui-checkbox { + all: unset; + box-sizing: border-box; + cursor: pointer; + font-family: Arial, Helvetica, sans-serif; + line-height: 1; +} + +.ui-checkbox * { + box-sizing: border-box; +} + +.ui-checkbox--disabled { + cursor: default; +} diff --git a/storybook/source/styles/common-controls.css b/storybook/source/styles/common-controls.css new file mode 100644 index 0000000000..9459374ac9 --- /dev/null +++ b/storybook/source/styles/common-controls.css @@ -0,0 +1,18 @@ +.ui-loader-spinner { + animation: ui-loader-spin 0.9s linear infinite; +} + +@keyframes ui-loader-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.ui-switch { + cursor: pointer; + transition: all 120ms ease; + display: inline-flex; + align-items: center; + border: none; + padding: 1px; + box-sizing: border-box; +} diff --git a/storybook/source/styles/dialog-button.css b/storybook/source/styles/dialog-button.css new file mode 100644 index 0000000000..5cbd77a51f --- /dev/null +++ b/storybook/source/styles/dialog-button.css @@ -0,0 +1,28 @@ +.ui-dialog-button { + border: none; + padding: 0; + background: transparent; + font-family: Arial, Helvetica, sans-serif; + transition: filter 120ms ease, transform 120ms ease; +} + +.ui-dialog-button--hover { + filter: brightness(1.03); +} + +.ui-dialog-button--pressed { + filter: brightness(0.9); + transform: translateY(0.5px); +} + +.ui-dialog-button__spinner { + display: inline-flex; + align-items: center; + justify-content: center; + animation: ui-dialog-spin 0.9s linear infinite; +} + +@keyframes ui-dialog-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} diff --git a/storybook/source/styles/manager.css b/storybook/source/styles/manager.css new file mode 100644 index 0000000000..57e637bebf --- /dev/null +++ b/storybook/source/styles/manager.css @@ -0,0 +1,26 @@ +.sidebar-header { + display: flex; + align-items: center; + gap: 10px; + min-height: 28px; + padding: 2px 0; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 20px; + letter-spacing: 0.28px; + color: #DEDEDE; +} + +.sidebar-header::before { + content: ""; + flex: 0 0 24px; + width: 24px; + height: 24px; + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJtSURBVFhH1VZBjtowFOUIHCFSY9RdZzc2G3KD6Q1qqjjqbuYGsJsWUHOEHIFVMerGArqfI1iKUYHpIkeg+k7IJE4ayCSo7ZOewIn93rP9beh0/kfQzc6h671PN3uhCd/FzjL7tQ5tHBsey3kIoI85rjHOGxvc7MXwx/MHU6cWqJBdunm+p+u9LBhcTlk7iDZe7cZ0fYhKBF9LHaSyTq5kbBC0D0EuCDT0w0LnazMJ0nCPmzKCFaB09VdCCCp+vs9uBdUPix3bphiufw1SYxPw8ko1UW2chT+3uq0U50qfqMuv6Sm3nSlHYsaRnHEU+Nyy0iB16gSMV4cRHG2YzJT3xrMlikD7kdvFq/pkPOXoaPIliIRVqS7YjPHkO7qBsYlxXneBnmb8TXxDQqPQoYQgdkqfK9h4mcVwFV+5VZMpcIGeOtMl8gsvqinS9BnUMk4Ik9KDH/lba8JRYHaoItRJYihKl/lPXKLoy8L2Py9778xJpEEmvAfixcFNqEPao/Hc6pq+BSRBaCtB6hgDlIud0CM+fEL79UHstFZASzEyP2mWImSYKkaEYuSY0iVi6+G4upf2HYgWjUzaYrKw9Y2XGOc0Q4/Ik6bG1iUPipEoZ2wwO2jyDd2UF2xsLB+crmK391uPSFOnVPOcedkg+QlbUCdfF/YACPurjb3+uJYeI7Kzo9jasn5gvjzDKGQ4gJkCdc3UMFYuiWCMpPjlNwKCKA+Ptqx66RrRJZFy8UhSp/pEhB8xbTMILPVFxiYaB3GxCN3+nalbG4qRgWI4f0Sr6Oq+l/35qIPzBXs7v4qxCQgSV76eKdxw9ff3X8Fv4fQIQ6aJCpoAAAAASUVORK5CYII=") center / 24px 24px no-repeat; +} + +.sidebar-header img, +.sidebar-header svg { + display: none; +} diff --git a/storybook/source/styles/plugin-buttons.css b/storybook/source/styles/plugin-buttons.css new file mode 100644 index 0000000000..91dc40b516 --- /dev/null +++ b/storybook/source/styles/plugin-buttons.css @@ -0,0 +1,43 @@ +.ui-panel-button, +.ui-icon-button, +.ui-link-button { + font-family: Arial, Helvetica, sans-serif; + margin: 0; +} + +.ui-panel-button, +.ui-icon-button { + padding: 0; + background: transparent; + transition: filter 120ms ease, transform 120ms ease; +} + +.ui-link-button { + all: unset; + box-sizing: border-box; + appearance: none; + border: none; + background: transparent; + padding: 0; + text-align: left; + display: inline-block; + min-height: 0; + cursor: pointer; +} + +.ui-panel-button__spinner { + width: var(--spinner-size, 16px); + height: var(--spinner-size, 16px); + display: inline-block; + animation: ui-plugin-spin 0.9s linear infinite; +} + +.ui-panel-button--pressed, +.ui-icon-button--pressed { + transform: translateY(0.5px); +} + +@keyframes ui-plugin-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} diff --git a/storybook/source/styles/preview.css b/storybook/source/styles/preview.css new file mode 100644 index 0000000000..33440c1834 --- /dev/null +++ b/storybook/source/styles/preview.css @@ -0,0 +1,290 @@ +:root { + --page-bg: #ffffff; + --page-fg: rgba(0, 0, 0, 0.8); + --page-border: rgba(0, 0, 0, 0.1); + --page-surface: #f7f7f7; + --page-surface-alt: #efefef; + --page-muted: rgba(0, 0, 0, 0.6); + --page-accent: #0b6dff; +} + +body { + margin: 0; + padding: 0; + font-family: Arial, Helvetica, sans-serif; + background: var(--page-bg); + color: var(--page-fg); +} + +#storybook-root { + padding: 0; + margin: 0; +} + +.sb-show-main.sb-main-padded { + padding: 0 !important; +} + +.sbdocs, +.sbdocs-wrapper, +.sbdocs-content { + background: var(--page-bg) !important; + color: var(--page-fg) !important; +} + +.sbdocs .docs-story, +.sbdocs .sb-story, +.sbdocs .sb-story > div, +.sbdocs .docs-story > div { + min-height: 0 !important; + height: auto !important; + max-height: none !important; +} + +.sbdocs .sb-story > div, +.sbdocs .docs-story > div, +.sbdocs .sb-story > div > div, +.sbdocs .docs-story > div > div { + display: block !important; + align-items: flex-start !important; + justify-content: flex-start !important; +} + +.sbdocs .docs-story { + padding: 12px !important; +} + +.sbdocs .sb-story, +.sbdocs .docs-story > div { + margin: 0 !important; + padding: 0 !important; +} + +.sbdocs h1, +.sbdocs h2, +.sbdocs h3, +.sbdocs h4, +.sbdocs h5, +.sbdocs h6, +.sbdocs p, +.sbdocs li, +.sbdocs td, +.sbdocs th, +.sbdocs label, +.sbdocs code, +.sbdocs strong { + color: var(--page-fg) !important; +} + +.sbdocs small, +.sbdocs .sbdocs-hint, +.sbdocs [class*="subtitle"], +.sbdocs [class*="description"] { + color: var(--page-muted) !important; +} + +.sbdocs .sbdocs-preview { + background: var(--page-bg) !important; + border-color: var(--page-border) !important; +} + +.sbdocs .docs-story, +.sbdocs .sb-story, +.sbdocs .docs-story > div, +.sbdocs .sb-story > div { + background: transparent !important; + border-color: var(--page-border) !important; +} + +.sbdocs .docblock-argstable, +.sbdocs .docblock-argstable table, +.sbdocs .docblock-argstable-head, +.sbdocs .docblock-argstable-body { + background: var(--page-surface) !important; + color: var(--page-fg) !important; +} + +.sbdocs .docblock-argstable-head tr, +.sbdocs .docblock-argstable-head th { + background: var(--page-surface) !important; + color: var(--page-fg) !important; +} + +.sbdocs .docblock-argstable-body tr:nth-child(odd) td { + background: var(--page-bg) !important; +} + +.sbdocs .docblock-argstable-body tr:nth-child(even) td { + background: var(--page-surface-alt) !important; +} + +.sbdocs .docblock-argstable, +.sbdocs .docblock-argstable table, +.sbdocs .docblock-argstable-body tr, +.sbdocs .docblock-argstable-head tr, +.sbdocs .docblock-argstable-body td, +.sbdocs .docblock-argstable-head th { + border-color: var(--page-border) !important; +} + +.sbdocs .docblock-argstable code, +.sbdocs .docblock-argstable pre, +.sbdocs .docblock-argstable .token { + color: var(--page-fg) !important; + background: transparent !important; +} + +.sbdocs table th, +.sbdocs table td, +.sbdocs table td *, +.sbdocs table th * { + color: var(--page-fg) !important; +} + +.sbdocs table td:nth-child(2) small, +.sbdocs table td:nth-child(2) [class*="hint"], +.sbdocs table td:nth-child(2) [class*="secondary"] { + color: var(--page-muted) !important; +} + +.sbdocs table td:nth-child(3), +.sbdocs table td:nth-child(3) * { + color: var(--page-fg) !important; + opacity: 1 !important; +} + +/* Reset Storybook-injected white backgrounds on type/default badge spans */ +.sbdocs .docblock-argstable-body td:nth-child(2) span, +.sbdocs .docblock-argstable-body td:nth-child(3) span { + background-color: transparent !important; +} + +.sbdocs table td code, +.sbdocs table td pre, +.sbdocs table td [class*="code"] { + color: var(--page-fg) !important; + background: var(--page-surface-alt) !important; + border: 1px solid var(--page-border) !important; + border-radius: 4px !important; +} + +.sbdocs :not(pre) > code { + color: var(--page-fg) !important; + background: var(--page-surface-alt) !important; + border: 1px solid var(--page-border) !important; + border-radius: 4px !important; +} + +.sbdocs [class*="description"] code, +.sbdocs [class*="description"] code * { + color: var(--page-fg) !important; +} + +.sbdocs .docblock-argstable input:not([type="checkbox"]), +.sbdocs .docblock-argstable select, +.sbdocs .docblock-argstable textarea { + background: var(--page-bg) !important; + color: var(--page-fg) !important; + border-color: var(--page-border) !important; +} + +.sbdocs .docblock-argstable button { + background: rgba(0, 0, 0, 0.07) !important; + color: var(--page-fg) !important; + border-color: var(--page-border) !important; +} + +.sbdocs .docblock-argstable input::placeholder, +.sbdocs .docblock-argstable textarea::placeholder { + color: var(--page-muted) !important; +} + +/* ── Per-theme text colour overrides ───────────────────────────────────────── + Our manager uses base:'dark', so Storybook injects white text into the preview + frame. var(--page-fg) is set correctly by the decorator, but Storybook's own + CSS may win in the cascade. Using the data-plugin-theme attribute (set by the + decorator on ) gives us selectors Storybook cannot override. */ + +html[data-plugin-theme="light"] .sbdocs, +html[data-plugin-theme="light-classic"] .sbdocs, +html[data-plugin-theme="modern-light"] .sbdocs { + color: var(--page-fg) !important; +} + +html[data-plugin-theme="light"] .sbdocs table th, +html[data-plugin-theme="light"] .sbdocs table td, +html[data-plugin-theme="light"] .sbdocs table td *, +html[data-plugin-theme="light"] .sbdocs table th *, +html[data-plugin-theme="light-classic"] .sbdocs table th, +html[data-plugin-theme="light-classic"] .sbdocs table td, +html[data-plugin-theme="light-classic"] .sbdocs table td *, +html[data-plugin-theme="light-classic"] .sbdocs table th *, +html[data-plugin-theme="modern-light"] .sbdocs table th, +html[data-plugin-theme="modern-light"] .sbdocs table td, +html[data-plugin-theme="modern-light"] .sbdocs table td *, +html[data-plugin-theme="modern-light"] .sbdocs table th * { + color: var(--page-fg) !important; +} + +html[data-plugin-theme="dark"] .sbdocs table th, +html[data-plugin-theme="dark"] .sbdocs table td, +html[data-plugin-theme="dark"] .sbdocs table td *, +html[data-plugin-theme="dark"] .sbdocs table th *, +html[data-plugin-theme="dark-contrast"] .sbdocs table th, +html[data-plugin-theme="dark-contrast"] .sbdocs table td, +html[data-plugin-theme="dark-contrast"] .sbdocs table td *, +html[data-plugin-theme="dark-contrast"] .sbdocs table th *, +html[data-plugin-theme="modern-dark"] .sbdocs table th, +html[data-plugin-theme="modern-dark"] .sbdocs table td, +html[data-plugin-theme="modern-dark"] .sbdocs table td *, +html[data-plugin-theme="modern-dark"] .sbdocs table th * { + color: var(--page-fg) !important; +} + +/* Storybook boolean switch: keep native shape, but tune contrast for dark docs pages. */ +html[data-plugin-theme="dark"] .sbdocs .docblock-argstable label:has(input[type="checkbox"][role="switch"]), +html[data-plugin-theme="dark-contrast"] .sbdocs .docblock-argstable label:has(input[type="checkbox"][role="switch"]), +html[data-plugin-theme="modern-dark"] .sbdocs .docblock-argstable label:has(input[type="checkbox"][role="switch"]) { + background: rgba(255, 255, 255, 0.12) !important; + box-shadow: inset 0 0 0 1px var(--page-border) !important; +} + +html[data-plugin-theme="dark"] .sbdocs .docblock-argstable label:has(input[type="checkbox"][role="switch"]) span, +html[data-plugin-theme="dark-contrast"] .sbdocs .docblock-argstable label:has(input[type="checkbox"][role="switch"]) span, +html[data-plugin-theme="modern-dark"] .sbdocs .docblock-argstable label:has(input[type="checkbox"][role="switch"]) span { + color: rgba(255, 255, 255, 0.62) !important; +} + +html[data-plugin-theme="dark"] .sbdocs .docblock-argstable label:has(input[type="checkbox"][role="switch"]) input:checked ~ span:last-of-type, +html[data-plugin-theme="dark"] .sbdocs .docblock-argstable label:has(input[type="checkbox"][role="switch"]) input:not(:checked) ~ span:first-of-type, +html[data-plugin-theme="dark-contrast"] .sbdocs .docblock-argstable label:has(input[type="checkbox"][role="switch"]) input:checked ~ span:last-of-type, +html[data-plugin-theme="dark-contrast"] .sbdocs .docblock-argstable label:has(input[type="checkbox"][role="switch"]) input:not(:checked) ~ span:first-of-type, +html[data-plugin-theme="modern-dark"] .sbdocs .docblock-argstable label:has(input[type="checkbox"][role="switch"]) input:checked ~ span:last-of-type, +html[data-plugin-theme="modern-dark"] .sbdocs .docblock-argstable label:has(input[type="checkbox"][role="switch"]) input:not(:checked) ~ span:first-of-type { + background: rgba(255, 255, 255, 0.94) !important; + color: #1e1e1e !important; + box-shadow: none !important; +} + +.sbdocs .docblock-code-toggle, +.sbdocs .docblock-code-toggle > button { + background: var(--page-bg) !important; + color: var(--page-fg) !important; + border-color: var(--page-border) !important; +} + +.sbdocs .toc-wrapper, +.sbdocs .toc-wrapper a, +.sbdocs .table-of-contents, +.sbdocs .table-of-contents a, +.sbdocs [class*="toc"] a { + color: var(--page-fg) !important; +} + +.sbdocs .toc-wrapper a:hover, +.sbdocs .table-of-contents a:hover, +.sbdocs [class*="toc"] a:hover, +.sbdocs .toc-wrapper a[aria-current="true"], +.sbdocs .table-of-contents a[aria-current="true"] { + color: var(--page-accent) !important; +} diff --git a/storybook/source/styles/radio.css b/storybook/source/styles/radio.css new file mode 100644 index 0000000000..da50375341 --- /dev/null +++ b/storybook/source/styles/radio.css @@ -0,0 +1,18 @@ +.ui-radio { + all: unset; + box-sizing: border-box; + cursor: pointer; + user-select: none; +} + +.ui-radio svg { + display: block; +} + +.ui-radio:not(.ui-radio--disabled):active { + transform: translateY(0.5px); +} + +.ui-radio--disabled { + cursor: default; +} diff --git a/storybook/source/styles/textarea.css b/storybook/source/styles/textarea.css new file mode 100644 index 0000000000..e9deb7bd37 --- /dev/null +++ b/storybook/source/styles/textarea.css @@ -0,0 +1,24 @@ +.ui-textarea { + box-sizing: border-box; + font-family: Arial, Helvetica, sans-serif; + resize: vertical; +} + +.ui-textarea::-webkit-scrollbar { + width: 4px; +} + +.ui-textarea::-webkit-scrollbar-track { + background: transparent; +} + +.ui-textarea::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.2); + border-radius: 2px; +} + +html[data-plugin-theme="dark"] .ui-textarea::-webkit-scrollbar-thumb, +html[data-plugin-theme="dark-contrast"] .ui-textarea::-webkit-scrollbar-thumb, +html[data-plugin-theme="modern-dark"] .ui-textarea::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.2); +} diff --git a/storybook/static/assets/Cards.stories-H_KY1O8E.js b/storybook/static/assets/Cards.stories-H_KY1O8E.js new file mode 100644 index 0000000000..caa73cddb2 --- /dev/null +++ b/storybook/static/assets/Cards.stories-H_KY1O8E.js @@ -0,0 +1,133 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r,o as i}from"./theme-utils-B-KYefhh.js";var a,o=e((()=>{a={Light:{background:`#FFFFFF`,border:`#C0C0C0`,radius:2,closeHoverBackground:`#E0E0E0`,textColor:`rgba(0, 0, 0, 0.80)`,subTextColor:`rgba(0, 0, 0, 0.40)`,iconColor:`rgba(0, 0, 0, 0.80)`,chipBackground:`#FFFFFF`,chipBorder:`#C0C0C0`,chipTextColor:`rgba(0, 0, 0, 0.80)`,actionHeight:22,actionPrimaryBackground:`#444444`,actionPrimaryHoverBackground:`#1C1C1C`,actionPrimaryTextColor:`#FFFFFF`,actionSecondaryBackground:`#FFFFFF`,actionSecondaryHoverBackground:`#E0E0E0`,actionSecondaryBorder:`#C0C0C0`,actionSecondaryTextColor:`rgba(0, 0, 0, 0.80)`},"Light Classic":{background:`#FFFFFF`,border:`#CFCFCF`,radius:2,closeHoverBackground:`#D8DADC`,textColor:`#444444`,subTextColor:`#A5A5A5`,iconColor:`#444444`,chipBackground:`#FFFFFF`,chipBorder:`#CFCFCF`,chipTextColor:`#444444`,actionHeight:22,actionPrimaryBackground:`#7D858C`,actionPrimaryHoverBackground:`#666D73`,actionPrimaryTextColor:`#FFFFFF`,actionSecondaryBackground:`#FFFFFF`,actionSecondaryHoverBackground:`#FFFFFF`,actionSecondaryBorder:`#CFCFCF`,actionSecondaryTextColor:`#444444`},"Modern Light":{background:`#FFFFFF`,border:`#E1E1E1`,radius:4,closeHoverBackground:`#F9F9F9`,textColor:`#383838`,subTextColor:`rgba(0, 0, 0, 0.60)`,iconColor:`#383838`,chipBackground:`#FFFFFF`,chipBorder:`#E1E1E1`,chipTextColor:`#383838`,actionHeight:24,actionPrimaryBackground:`#4473CA`,actionPrimaryHoverBackground:`#2A5BB9`,actionPrimaryTextColor:`#FFFFFF`,actionSecondaryBackground:`#FFFFFF`,actionSecondaryHoverBackground:`#F9F9F9`,actionSecondaryBorder:`#E1E1E1`,actionSecondaryTextColor:`#383838`},"Modern Dark":{background:`#404040`,border:`#686868`,radius:4,closeHoverBackground:`#585858`,textColor:`#F3F3F3`,subTextColor:`#969696`,iconColor:`#F3F3F3`,chipBackground:`#404040`,chipBorder:`#686868`,chipTextColor:`#F3F3F3`,actionHeight:24,actionPrimaryBackground:`#4A7BE0`,actionPrimaryHoverBackground:`#366CDA`,actionPrimaryTextColor:`#FFFFFF`,actionSecondaryBackground:`#404040`,actionSecondaryHoverBackground:`#585858`,actionSecondaryBorder:`#686868`,actionSecondaryTextColor:`#F3F3F3`},Dark:{background:`#333333`,border:`#666666`,radius:2,closeHoverBackground:`#555555`,textColor:`rgba(255, 255, 255, 0.80)`,subTextColor:`rgba(255, 255, 255, 0.40)`,iconColor:`rgba(255, 255, 255, 0.80)`,chipBackground:`#333333`,chipBorder:`#666666`,chipTextColor:`rgba(255, 255, 255, 0.80)`,actionHeight:22,actionPrimaryBackground:`#DDDDDD`,actionPrimaryHoverBackground:`#FCFCFC`,actionPrimaryTextColor:`#333333`,actionSecondaryBackground:`#333333`,actionSecondaryHoverBackground:`#555555`,actionSecondaryBorder:`#666666`,actionSecondaryTextColor:`rgba(255, 255, 255, 0.80)`},"Dark Contrast":{background:`#1E1E1E`,border:`#696969`,radius:2,closeHoverBackground:`#424242`,textColor:`#E8E8E8`,subTextColor:`#B8B8B8`,iconColor:`#E8E8E8`,chipBackground:`#1E1E1E`,chipBorder:`#696969`,chipTextColor:`#E8E8E8`,actionHeight:22,actionPrimaryBackground:`#E6E6E6`,actionPrimaryHoverBackground:`#A6A6A6`,actionPrimaryTextColor:`#121212`,actionSecondaryBackground:`#1E1E1E`,actionSecondaryHoverBackground:`#424242`,actionSecondaryBorder:`#696969`,actionSecondaryTextColor:`#E8E8E8`}}}));function s({type:e=`close`,state:t=`default`,theme:n,minWidth:r=236,title:o=u,helperText:s=`Text here`,actionLabel:f=`Button`,tags:p=d}={}){let m=i(n),h=a[m]??a.Light,g=m.startsWith(`Modern`),_=t===`hover`,v=e!==`close`,y=g?12:11,b=e===`close`&&_?h.closeHoverBackground:h.background,x=[`width:${r}px`,`min-width:${r}px`,`padding:6px`,`border-radius:${h.radius}px`,`border:1px solid ${h.border}`,`background:${b}`,`display:inline-flex`,`flex-direction:${e===`close`?`row`:`column`}`,`align-items:${e===`close`?`center`:`flex-start`}`,`justify-content:center`,`gap:${e===`close`?4:10}px`,`box-sizing:border-box`].join(`;`),S=`flex:1 1 0;min-width:0;font-size:${y}px;font-family:Arial,Helvetica,sans-serif;font-weight:400;line-height:12px;letter-spacing:${g?.24:.22}px;color:${h.textColor};${v?`display:block;white-space:normal;overflow-wrap:anywhere;`:`overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;`}`,C=v?l(h.iconColor):c(h.iconColor),w=`
+
${o}
+ ${C} +
`,T=``;if(e===`openWithButton`){let e=p.map(e=>`
${e}
`).join(``),t=_?h.actionPrimaryHoverBackground:h.actionPrimaryBackground;T=` +
${e}
+
+ +
`}else if(e===`openWithText`){let e=_?h.actionSecondaryHoverBackground:h.actionSecondaryBackground;T=` +
${s}
+
+ +
`}return`
${w}${T}
`}var c,l,u,d,f=e((()=>{r(),o(),c=e=>``,l=e=>``,u=`His English teacher says that he is a good pupil and a great student who always participates in class discussions and finishes his work carefully`,d=[`His`,`Her`,`Label`,`Label`,`Label`,`Label`]}));function p(e){e.querySelectorAll(`[data-chip="true"]`).forEach(e=>{let t=e.dataset.restBg,n=e.dataset.hoverBg;e.addEventListener(`mouseenter`,()=>{e.style.background=n}),e.addEventListener(`mouseleave`,()=>{e.style.background=t})});let t=e.querySelector(`button[data-btn-type]`);if(t){let e=t.dataset.restBg,n=t.dataset.hoverBg,r=!1,i=null,a=0;t.addEventListener(`mouseenter`,()=>{r=!0,i||(t.style.background=n)}),t.addEventListener(`mouseleave`,()=>{r=!1,i||(t.style.background=e)}),t.addEventListener(`mousedown`,()=>{a=Date.now(),i&&=(clearTimeout(i),null),t.style.background=n}),t.addEventListener(`mouseup`,()=>{let o=Date.now()-a,s=Math.max(0,150-o);i=setTimeout(()=>{i=null,t.style.background=r?n:e},s)})}}function m({title:e,helperText:t,actionLabel:n,tags:r,stretch:i,minWidth:a,openType:o,startExpanded:c,theme:l}){let u=document.createElement(`div`);u.style.display=`contents`;let d=!!c,f=o||`openWithButton`,m=()=>{if(u.innerHTML=s({type:d?f:`close`,state:`default`,title:e,helperText:t,actionLabel:n,tags:r,minWidth:i?void 0:a,theme:l}),i){let e=u.querySelector(`.ui-card`);e&&(e.style.width=`100%`)}let o=u.querySelector(`.ui-card > div`);o&&(o.style.cursor=`pointer`,o.addEventListener(`click`,()=>{d=!d,m()})),p(u)};return m(),u}var h,g,_,v,y,b,x,S,C,w;e((()=>{f(),r(),h=n,g=`His English teacher says that he is a good pupil and a great student who always participates in class discussions and finishes his work carefully`,_=[`His`,`Her`,`Label`,`Label`,`Label`,`Label`],v={title:`Components/Data Display/Cards`,tags:[`autodocs`],args:{state:`default`,interactive:!0,stretch:!1,minWidth:236,themeMode:`Auto`,openType:`openWithButton`,startExpanded:!1,title:g,helperText:`Text here`,actionLabel:`Button`,tags:_},argTypes:{openType:{control:`select`,options:[`openWithButton`,`openWithText`],description:`Expanded layout: tags + action button, or helper text + action button`},startExpanded:{control:`boolean`,description:`Open the card on first render`},state:{control:`select`,options:[`default`,`hover`],description:`Static visual state used when interactive mode is off`},interactive:{control:`boolean`,description:`Allow hover and expand/collapse interaction in the canvas`},stretch:{control:`boolean`,description:`Let the card fill the available row width`},minWidth:{control:{type:`number`},description:`Minimum card width`},maxWidth:{control:{type:`number`},description:`Maximum card width`},title:{control:`text`,description:`Main title shown in collapsed and expanded states`},helperText:{control:`text`,description:`Helper copy used in the text-based expanded variant`},actionLabel:{control:`text`,description:`Label for the action button inside the expanded card`},tags:{control:`object`,description:`Tag pills used in the tags-and-button expanded variant`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...h],description:`Auto = current Storybook toolbar theme`},theme:{table:{disable:!0}}},parameters:{docs:{description:{component:`Collapsible information cards with a compact closed state and two expanded patterns: helper text or tag list plus action button.`}}}},y={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return m({...e,theme:r})}},b={args:{openType:`openWithButton`,startExpanded:!1,interactive:!1},render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return s({...e,type:`close`,theme:r})},parameters:{docs:{description:{story:`Collapsed card state with title preview only.`}}}},x={args:{openType:`openWithButton`,startExpanded:!0,interactive:!1},render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return s({...e,type:`openWithButton`,theme:r})},parameters:{docs:{description:{story:`Expanded card with tags and a single action button.`}}}},S={args:{openType:`openWithText`,startExpanded:!0,interactive:!1},render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return s({...e,type:`openWithText`,theme:r})},parameters:{docs:{description:{story:`Expanded card with helper copy and a single action button.`}}}},C={args:{stretch:!0,interactive:!1},render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),{title:i,helperText:a,actionLabel:o,tags:c}=e;return`
+
${s({type:`close`,title:i,helperText:a,actionLabel:o,tags:c,minWidth:236,theme:r})}
+
${s({type:`close`,title:i,helperText:a,actionLabel:o,tags:c,minWidth:236,theme:r}).replace(`width:236px`,`width:100%`)}
+
`},parameters:{docs:{description:{story:`Compare the same card in narrow and wide containers.`}}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveCard({ + ...args, + theme + }); + } +}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{ + args: { + openType: 'openWithButton', + startExpanded: false, + interactive: false + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Card({ + ...args, + type: 'close', + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Collapsed card state with title preview only.' + } + } + } +}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{ + args: { + openType: 'openWithButton', + startExpanded: true, + interactive: false + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Card({ + ...args, + type: 'openWithButton', + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Expanded card with tags and a single action button.' + } + } + } +}`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{ + args: { + openType: 'openWithText', + startExpanded: true, + interactive: false + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Card({ + ...args, + type: 'openWithText', + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Expanded card with helper copy and a single action button.' + } + } + } +}`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{ + args: { + stretch: true, + interactive: false + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const { + title, + helperText, + actionLabel, + tags + } = args; + const narrow = Card({ + type: 'close', + title, + helperText, + actionLabel, + tags, + minWidth: 236, + theme + }); + const wide = Card({ + type: 'close', + title, + helperText, + actionLabel, + tags, + minWidth: 236, + theme + }); + return \`
+
\${narrow}
+
\${wide.replace('width:236px', 'width:100%')}
+
\`; + }, + parameters: { + docs: { + description: { + story: 'Compare the same card in narrow and wide containers.' + } + } + } +}`,...C.parameters?.docs?.source}}},w=[`Default`,`CloseVariant`,`OpenWithTagsAndButton`,`OpenWithTextAndButton`,`StretchLayout`]}))();export{b as CloseVariant,y as Default,x as OpenWithTagsAndButton,S as OpenWithTextAndButton,C as StretchLayout,w as __namedExportsOrder,v as default}; \ No newline at end of file diff --git a/storybook/static/assets/Checkbox.stories-DFvCkgPP.js b/storybook/static/assets/Checkbox.stories-DFvCkgPP.js new file mode 100644 index 0000000000..9959897cb9 --- /dev/null +++ b/storybook/static/assets/Checkbox.stories-DFvCkgPP.js @@ -0,0 +1,78 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r}from"./theme-utils-B-KYefhh.js";var i,a,o,s=e((()=>{i={Light:{default:{no:{boxFill:`white`,boxStroke:`#C0C0C0`,boxRadius:1.5,textColor:`rgba(0, 0, 0, 0.80)`},yes:{boxFill:`white`,boxStroke:`#C0C0C0`,boxRadius:1.5,markColor:`black`,markOpacity:.8,textColor:`rgba(0, 0, 0, 0.80)`},partial:{boxFill:`white`,boxStroke:`#C0C0C0`,boxRadius:1.5,markColor:`black`,markOpacity:.8,textColor:`rgba(0, 0, 0, 0.80)`}},hover:{no:{boxFill:`white`,boxStroke:`#848484`,boxRadius:1.5,textColor:`rgba(0, 0, 0, 0.80)`},yes:{boxFill:`white`,boxStroke:`#848484`,boxRadius:1.5,markColor:`black`,markOpacity:.8,textColor:`rgba(0, 0, 0, 0.80)`},partial:{boxFill:`white`,boxStroke:`#848484`,boxRadius:1.5,markColor:`black`,markOpacity:.8,textColor:`rgba(0, 0, 0, 0.80)`}},disabled:{no:{boxFill:`#F7F7F7`,boxStroke:`#E0E0E0`,boxRadius:2.5,textColor:`rgba(0, 0, 0, 0.40)`},yes:{boxFill:`#F7F7F7`,boxStroke:`#E0E0E0`,boxRadius:2.5,markColor:`black`,markOpacity:.5,textColor:`rgba(0, 0, 0, 0.40)`},partial:{boxFill:`#F7F7F7`,boxStroke:`#E0E0E0`,boxRadius:2.5,markColor:`black`,markOpacity:.5,textColor:`rgba(0, 0, 0, 0.40)`}}},"Light Classic":{default:{no:{boxFill:`white`,boxStroke:`#CFCFCF`,boxRadius:1.5,textColor:`#444444`},yes:{boxFill:`white`,boxStroke:`#CFCFCF`,boxRadius:1.5,markColor:`#444444`,textColor:`#444444`},partial:{boxFill:`white`,boxStroke:`#CFCFCF`,boxRadius:1.5,markColor:`#444444`,textColor:`#444444`}},hover:{no:{boxFill:`white`,boxStroke:`#848484`,boxRadius:1.5,textColor:`#444444`},yes:{boxFill:`white`,boxStroke:`#848484`,boxRadius:1.5,markColor:`#444444`,textColor:`#444444`},partial:{boxFill:`white`,boxStroke:`#848484`,boxRadius:1.5,markColor:`#444444`,textColor:`#444444`}},disabled:{no:{boxFill:`#F1F1F1`,boxStroke:`#D8DADC`,boxRadius:2.5,textColor:`#A5A5A5`},yes:{boxFill:`#F1F1F1`,boxStroke:`#D8DADC`,boxRadius:2.5,markColor:`#A5A5A5`,textColor:`#A5A5A5`},partial:{boxFill:`#F1F1F1`,boxStroke:`#D8DADC`,boxRadius:2.5,markColor:`#A5A5A5`,textColor:`#A5A5A5`}}},"Modern Light":{default:{no:{boxFill:`white`,boxStroke:`#7F7F7F`,boxRadius:1.5,textColor:`#383838`},yes:{boxFill:`white`,boxStroke:`#7F7F7F`,boxRadius:1.5,markColor:`#383838`,textColor:`#383838`},partial:{boxFill:`white`,boxStroke:`#7F7F7F`,boxRadius:1.5,markColor:`#383838`,textColor:`#383838`}},hover:{no:{boxFill:`#F3F3F3`,boxStroke:`#969696`,boxRadius:1.5,textColor:`#383838`},yes:{boxFill:`#F3F3F3`,boxStroke:`#969696`,boxRadius:1.5,markColor:`#383838`,textColor:`#383838`},partial:{boxFill:`#F3F3F3`,boxStroke:`#969696`,boxRadius:1.5,markColor:`#383838`,textColor:`#383838`}},disabled:{no:{boxFill:`#F9F9F9`,boxStroke:`#969696`,boxRadius:1.5,textColor:`#383838`},yes:{boxFill:`#F9F9F9`,boxStroke:`#969696`,boxRadius:1.5,markColor:`white`,textColor:`#383838`},partial:{boxFill:`#F9F9F9`,boxStroke:`#969696`,boxRadius:1.5,markColor:`white`,textColor:`#383838`}}},"Modern Dark":{default:{no:{boxFill:`#404040`,boxStroke:`#969696`,boxRadius:1.5,textColor:`#F3F3F3`},yes:{boxFill:`#404040`,boxStroke:`#969696`,boxRadius:1.5,markColor:`#EAEAEA`,textColor:`#F3F3F3`},partial:{boxFill:`#404040`,boxStroke:`#969696`,boxRadius:1.5,markColor:`#EAEAEA`,textColor:`#F3F3F3`}},hover:{no:{boxFill:`#585858`,boxStroke:`#969696`,boxRadius:1.5,textColor:`#F3F3F3`},yes:{boxFill:`#585858`,boxStroke:`#969696`,boxRadius:1.5,markColor:`#EAEAEA`,textColor:`#F3F3F3`},partial:{boxFill:`#585858`,boxStroke:`#969696`,boxRadius:1.5,markColor:`#EAEAEA`,textColor:`#F3F3F3`}},disabled:{no:{boxFill:`#404040`,boxStroke:`#969696`,boxRadius:1.5,textColor:`#F3F3F3`},yes:{boxFill:`#404040`,boxStroke:`#969696`,boxRadius:1.5,markColor:`#EAEAEA`,textColor:`#F3F3F3`},partial:{boxFill:`#404040`,boxStroke:`#969696`,boxRadius:1.5,markColor:`#EAEAEA`,textColor:`#F3F3F3`}}},Dark:{default:{no:{boxFill:`#333333`,boxStroke:`#666666`,boxRadius:1.5,textColor:`rgba(255, 255, 255, 0.80)`},yes:{boxFill:`#333333`,boxStroke:`#666666`,boxRadius:1.5,markColor:`white`,markOpacity:.8,textColor:`rgba(255, 255, 255, 0.80)`},partial:{boxFill:`#333333`,boxStroke:`#666666`,boxRadius:1.5,markColor:`white`,markOpacity:.8,textColor:`rgba(255, 255, 255, 0.80)`}},hover:{no:{boxFill:`#333333`,boxStroke:`#CCCCCC`,boxRadius:1.5,textColor:`rgba(255, 255, 255, 0.80)`},yes:{boxFill:`#333333`,boxStroke:`#CCCCCC`,boxRadius:1.5,markColor:`white`,markOpacity:.8,textColor:`rgba(255, 255, 255, 0.80)`},partial:{boxFill:`#333333`,boxStroke:`#CCCCCC`,boxRadius:1.5,markColor:`white`,markOpacity:.8,textColor:`rgba(255, 255, 255, 0.80)`}},disabled:{no:{boxFill:`#404040`,boxStroke:`#555555`,boxRadius:2.5,textColor:`rgba(255, 255, 255, 0.40)`},yes:{boxFill:`#404040`,boxStroke:`#555555`,boxRadius:2.5,markColor:`white`,markOpacity:.5,textColor:`rgba(255, 255, 255, 0.40)`},partial:{boxFill:`#404040`,boxStroke:`#555555`,boxRadius:2.5,markColor:`white`,markOpacity:.5,textColor:`rgba(255, 255, 255, 0.40)`}}},"Dark Contrast":{default:{no:{boxFill:`#1E1E1E`,boxStroke:`#696969`,boxRadius:1.5,textColor:`#E8E8E8`},yes:{boxFill:`#1E1E1E`,boxStroke:`#696969`,boxRadius:1.5,markColor:`#E8E8E8`,textColor:`#E8E8E8`},partial:{boxFill:`#1E1E1E`,boxStroke:`#696969`,boxRadius:1.5,markColor:`#E8E8E8`,textColor:`#E8E8E8`}},hover:{no:{boxFill:`#1E1E1E`,boxStroke:`#B8B8B8`,boxRadius:1.5,textColor:`#E8E8E8`},yes:{boxFill:`#1E1E1E`,boxStroke:`#B8B8B8`,boxRadius:1.5,markColor:`#E8E8E8`,textColor:`#E8E8E8`},partial:{boxFill:`#1E1E1E`,boxStroke:`#B8B8B8`,boxRadius:1.5,markColor:`#E8E8E8`,textColor:`#E8E8E8`}},disabled:{no:{boxFill:`#2A2A2A`,boxStroke:`#424242`,boxRadius:2.5,textColor:`rgba(232, 232, 232, 0.45)`},yes:{boxFill:`#2A2A2A`,boxStroke:`#424242`,boxRadius:2.5,markColor:`#8A8A8A`,textColor:`rgba(232, 232, 232, 0.45)`},partial:{boxFill:`#2A2A2A`,boxStroke:`#424242`,boxRadius:2.5,markColor:`#8A8A8A`,textColor:`rgba(232, 232, 232, 0.45)`}}}},a={light:`Light`,lightclassic:`Light Classic`,modernlight:`Modern Light`,moderndark:`Modern Dark`,dark:`Dark`,darkcontrast:`Dark Contrast`},o=e=>e?a[e.replace(/[\s_-]+/g,``).toLowerCase()]??`Light`:`Light`}));function c({label:e=`Text`,selected:t=`no`,state:n=`default`,theme:r=`Light`,truncate:a=!1}={}){let s=o(r),c=i[s][n][t],u=n===`disabled`,d=s.startsWith(`Modern`)?12:11,f=s.startsWith(`Modern`)?.24:.22,p=t===`yes`&&c.markColor?``:``,m=t===`partial`&&c.markColor?``:``;return``}var l,u=e((()=>{s(),l=`M2.75 6.94995L5.75 9.74995L11.25 4.25005`}));function d({label:e,selected:t,state:n,interactive:r,isHovered:i,truncate:a,theme:o}){let s=n===`disabled`;if(!r||s){let r=document.createElement(`div`);return r.style.display=`contents`,r.innerHTML=c({label:e,selected:t,state:s?`disabled`:i?`hover`:n,theme:o,truncate:a}),r}let l=document.createElement(`div`);l.style.display=`contents`;let u=t,d=!1,f=()=>{l.innerHTML=c({label:e,selected:u,state:d?`hover`:`default`,theme:o,truncate:a})};return l.addEventListener(`mouseenter`,()=>{d=!0,f()}),l.addEventListener(`mouseleave`,()=>{d=!1,f()}),l.addEventListener(`click`,()=>{u=m[u],f()}),f(),l}var f,p,m,h,g,_,v,y;e((()=>{u(),r(),f=n,p={title:`Components/Form/Checkbox`,tags:[`autodocs`],args:{label:`Checkbox`,selected:`no`,state:`default`,interactive:!0,isHovered:!1,truncate:!1,themeMode:`Auto`},argTypes:{label:{control:`text`,description:`Visible checkbox label`},selected:{control:`select`,options:[`no`,`yes`,`partial`],description:`Unchecked, checked, or indeterminate state`},state:{control:`select`,options:[`default`,`hover`,`disabled`],description:`Rendered visual state`},interactive:{control:`boolean`,description:`Allow hover and toggle behavior directly in the canvas`},isHovered:{control:`boolean`,description:`Force hover appearance for review`},truncate:{control:`boolean`,description:`Truncate long label with ellipsis instead of wrapping`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...f],description:`Auto = current Storybook toolbar theme`,table:{defaultValue:{summary:`Auto`}}},theme:{table:{disable:!0}}},parameters:{docs:{description:{component:`Checkbox control for independent on/off selections, including checked, indeterminate, and disabled states.`}}}},m={no:`yes`,yes:`partial`,partial:`no`},h={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return d({...e,theme:r})}},g={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return d({...e,label:`Selected`,selected:`yes`,state:`default`,interactive:!0,theme:r})},parameters:{docs:{description:{story:`Interactive checked-state demo for an active standalone selection.`}}}},_={render:(e,n)=>d({label:`Disabled`,selected:`no`,state:`disabled`,interactive:!1,isHovered:!1,truncate:!1,theme:t(e.themeMode,n.globals.theme)}),parameters:{docs:{description:{story:`Disabled checkbox that preserves layout without allowing selection changes.`}}}},v={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return d({...e,label:`Indeterminate`,selected:`partial`,state:`default`,interactive:!0,theme:r})},parameters:{docs:{description:{story:`Interactive indeterminate-state demo for partial selection in grouped lists.`}}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeCheckbox({ + ...args, + theme + }); + } +}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeCheckbox({ + ...args, + label: 'Selected', + selected: 'yes', + state: 'default', + interactive: true, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Interactive checked-state demo for an active standalone selection.' + } + } + } +}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeCheckbox({ + label: 'Disabled', + selected: 'no', + state: 'disabled', + interactive: false, + isHovered: false, + truncate: false, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Disabled checkbox that preserves layout without allowing selection changes.' + } + } + } +}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeCheckbox({ + ...args, + label: 'Indeterminate', + selected: 'partial', + state: 'default', + interactive: true, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Interactive indeterminate-state demo for partial selection in grouped lists.' + } + } + } +}`,...v.parameters?.docs?.source}}},y=[`Default`,`Checked`,`Disabled`,`Indeterminate`]}))();export{g as Checked,h as Default,_ as Disabled,v as Indeterminate,y as __namedExportsOrder,p as default}; \ No newline at end of file diff --git a/storybook/static/assets/Color-FRDS63T2-CvSgaFz3.js b/storybook/static/assets/Color-FRDS63T2-Qm5bW5d4.js similarity index 99% rename from storybook/static/assets/Color-FRDS63T2-CvSgaFz3.js rename to storybook/static/assets/Color-FRDS63T2-Qm5bW5d4.js index 91ae0373bd..8024a215fa 100644 --- a/storybook/static/assets/Color-FRDS63T2-CvSgaFz3.js +++ b/storybook/static/assets/Color-FRDS63T2-Qm5bW5d4.js @@ -1 +1 @@ -import{a as e,n as t}from"./chunk-BneVvdWh.js";import{n,r,t as i}from"./iframe-DIiqmCNx.js";import{t as a}from"./react-B_0iYUWB.js";import{r as o,t as s}from"./chunk-CYSK6WYR-C0tTbXjk.js";import{a as c,c as l}from"./theming-DzOc7WGW.js";import{F as u,H as d,d as f,n as p,o as m,x as h}from"./components-DTTvQz4L.js";function ee(e,t,{signal:n,edges:r}={}){let i,a=null,o=r!=null&&r.includes(`leading`),s=r==null||r.includes(`trailing`),c=()=>{a!==null&&(e.apply(i,a),i=void 0,a=null)},l=()=>{s&&c(),p()},u=null,d=()=>{u!=null&&clearTimeout(u),u=setTimeout(()=>{u=null,l()},t)},f=()=>{u!==null&&(clearTimeout(u),u=null)},p=()=>{f(),i=void 0,a=null},m=()=>{c()},h=function(...e){if(n?.aborted)return;i=this,a=e;let t=u==null;d(),o&&t&&c()};return h.schedule=d,h.cancel=p,h.flush=m,n?.addEventListener(`abort`,p,{once:!0}),h}function te(e,...t){return g(e,w,...t)}function g(e,t,...n){let r=function(...r){let i=0,a=n.slice().map(e=>e===t?r[i++]:e),o=r.slice(i);return e.apply(this,a.concat(o))};return e.prototype&&(r.prototype=Object.create(e.prototype)),r}function ne(e,...t){return re(e,T,...t)}function re(e,t,...n){let r=function(...r){let i=n.filter(e=>e===t).length,a=Math.max(r.length-i,0),o=r.slice(0,a),s=a,c=n.slice().map(e=>e===t?r[s++]:e);return e.apply(this,o.concat(c))};return e.prototype&&(r.prototype=Object.create(e.prototype)),r}function _(){return(_=Object.assign||function(e){for(var t=1;t=0||(i[n]=e[n]);return i}function y(e){var t=(0,x.useRef)(e),n=(0,x.useRef)(function(e){t.current&&t.current(e)});return t.current=e,n.current}function ie(e,t,n){var r=y(n),i=(0,x.useState)(function(){return e.toHsva(t)}),a=i[0],o=i[1],s=(0,x.useRef)({color:t,hsva:a});return(0,x.useEffect)(function(){if(!e.equal(t,s.current.color)){var n=e.toHsva(t);s.current={hsva:n,color:t},o(n)}},[t,e]),(0,x.useEffect)(function(){var t;H(a,s.current.hsva)||e.equal(t=e.fromHsva(a),s.current.color)||(s.current={hsva:a,color:t},r(t))},[a,e,r]),[a,(0,x.useCallback)(function(e){o(function(t){return Object.assign({},t,e)})},[])]}var b,x,ae,S,oe,C,w,T,E,D,O,se,ce,k,A,j,M,le,ue,N,de,fe,pe,me,P,F,I,L,he,R,ge,z,B,V,H,U,_e,ve,ye,be,W,G,xe,Se,Ce,we,K,Te,Ee,De,Oe,ke,Ae,je,Me,q,Ne,Pe,Fe,J,Y,Ie,Le,Re,X,ze,Be,Z,Ve,He,Ue,We,Q,Ge,Ke,$,qe,Je,Ye;t((()=>{o(),r(),b=e(a(),1),h(),d(),x=e(a(),1),c(),ae=i({"../../../node_modules/color-name/index.js"(e,t){t.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}}}),S=i({"../../../node_modules/color-convert/conversions.js"(e,t){var n=ae(),r={};for(let e of Object.keys(n))r[n[e]]=e;var i={rgb:{channels:3,labels:`rgb`},hsl:{channels:3,labels:`hsl`},hsv:{channels:3,labels:`hsv`},hwb:{channels:3,labels:`hwb`},cmyk:{channels:4,labels:`cmyk`},xyz:{channels:3,labels:`xyz`},lab:{channels:3,labels:`lab`},lch:{channels:3,labels:`lch`},hex:{channels:1,labels:[`hex`]},keyword:{channels:1,labels:[`keyword`]},ansi16:{channels:1,labels:[`ansi16`]},ansi256:{channels:1,labels:[`ansi256`]},hcg:{channels:3,labels:[`h`,`c`,`g`]},apple:{channels:3,labels:[`r16`,`g16`,`b16`]},gray:{channels:1,labels:[`gray`]}};t.exports=i;for(let e of Object.keys(i)){if(!(`channels`in i[e]))throw Error(`missing channels property: `+e);if(!(`labels`in i[e]))throw Error(`missing channel labels property: `+e);if(i[e].labels.length!==i[e].channels)throw Error(`channel and label counts mismatch: `+e);let{channels:t,labels:n}=i[e];delete i[e].channels,delete i[e].labels,Object.defineProperty(i[e],`channels`,{value:t}),Object.defineProperty(i[e],`labels`,{value:n})}i.rgb.hsl=function(e){let t=e[0]/255,n=e[1]/255,r=e[2]/255,i=Math.min(t,n,r),a=Math.max(t,n,r),o=a-i,s,c;a===i?s=0:t===a?s=(n-r)/o:n===a?s=2+(r-t)/o:r===a&&(s=4+(t-n)/o),s=Math.min(s*60,360),s<0&&(s+=360);let l=(i+a)/2;return c=a===i?0:l<=.5?o/(a+i):o/(2-a-i),[s,c*100,l*100]},i.rgb.hsv=function(e){let t,n,r,i,a,o=e[0]/255,s=e[1]/255,c=e[2]/255,l=Math.max(o,s,c),u=l-Math.min(o,s,c),d=function(e){return(l-e)/6/u+1/2};return u===0?(i=0,a=0):(a=u/l,t=d(o),n=d(s),r=d(c),o===l?i=r-n:s===l?i=1/3+t-r:c===l&&(i=2/3+n-t),i<0?i+=1:i>1&&--i),[i*360,a*100,l*100]},i.rgb.hwb=function(e){let t=e[0],n=e[1],r=e[2],a=i.rgb.hsl(e)[0],o=1/255*Math.min(t,Math.min(n,r));return r=1-1/255*Math.max(t,Math.max(n,r)),[a,o*100,r*100]},i.rgb.cmyk=function(e){let t=e[0]/255,n=e[1]/255,r=e[2]/255,i=Math.min(1-t,1-n,1-r),a=(1-t-i)/(1-i)||0,o=(1-n-i)/(1-i)||0,s=(1-r-i)/(1-i)||0;return[a*100,o*100,s*100,i*100]};function a(e,t){return(e[0]-t[0])**2+(e[1]-t[1])**2+(e[2]-t[2])**2}i.rgb.keyword=function(e){let t=r[e];if(t)return t;let i=1/0,o;for(let t of Object.keys(n)){let r=n[t],s=a(e,r);s.04045?((t+.055)/1.055)**2.4:t/12.92,n=n>.04045?((n+.055)/1.055)**2.4:n/12.92,r=r>.04045?((r+.055)/1.055)**2.4:r/12.92;let i=t*.4124+n*.3576+r*.1805,a=t*.2126+n*.7152+r*.0722,o=t*.0193+n*.1192+r*.9505;return[i*100,a*100,o*100]},i.rgb.lab=function(e){let t=i.rgb.xyz(e),n=t[0],r=t[1],a=t[2];return n/=95.047,r/=100,a/=108.883,n=n>.008856?n**(1/3):7.787*n+16/116,r=r>.008856?r**(1/3):7.787*r+16/116,a=a>.008856?a**(1/3):7.787*a+16/116,[116*r-16,500*(n-r),200*(r-a)]},i.hsl.rgb=function(e){let t=e[0]/360,n=e[1]/100,r=e[2]/100,i,a,o;if(n===0)return o=r*255,[o,o,o];i=r<.5?r*(1+n):r+n-r*n;let s=2*r-i,c=[0,0,0];for(let e=0;e<3;e++)a=t+1/3*-(e-1),a<0&&a++,a>1&&a--,o=6*a<1?s+(i-s)*6*a:2*a<1?i:3*a<2?s+(i-s)*(2/3-a)*6:s,c[e]=o*255;return c},i.hsl.hsv=function(e){let t=e[0],n=e[1]/100,r=e[2]/100,i=n,a=Math.max(r,.01);r*=2,n*=r<=1?r:2-r,i*=a<=1?a:2-a;let o=(r+n)/2;return[t,(r===0?2*i/(a+i):2*n/(r+n))*100,o*100]},i.hsv.rgb=function(e){let t=e[0]/60,n=e[1]/100,r=e[2]/100,i=Math.floor(t)%6,a=t-Math.floor(t),o=255*r*(1-n),s=255*r*(1-n*a),c=255*r*(1-n*(1-a));switch(r*=255,i){case 0:return[r,c,o];case 1:return[s,r,o];case 2:return[o,r,c];case 3:return[o,s,r];case 4:return[c,o,r];case 5:return[r,o,s]}},i.hsv.hsl=function(e){let t=e[0],n=e[1]/100,r=e[2]/100,i=Math.max(r,.01),a,o;o=(2-n)*r;let s=(2-n)*i;return a=n*i,a/=s<=1?s:2-s,a||=0,o/=2,[t,a*100,o*100]},i.hwb.rgb=function(e){let t=e[0]/360,n=e[1]/100,r=e[2]/100,i=n+r,a;i>1&&(n/=i,r/=i);let o=Math.floor(6*t),s=1-r;a=6*t-o,o&1&&(a=1-a);let c=n+a*(s-n),l,u,d;switch(o){default:case 6:case 0:l=s,u=c,d=n;break;case 1:l=c,u=s,d=n;break;case 2:l=n,u=s,d=c;break;case 3:l=n,u=c,d=s;break;case 4:l=c,u=n,d=s;break;case 5:l=s,u=n,d=c;break}return[l*255,u*255,d*255]},i.cmyk.rgb=function(e){let t=e[0]/100,n=e[1]/100,r=e[2]/100,i=e[3]/100,a=1-Math.min(1,t*(1-i)+i),o=1-Math.min(1,n*(1-i)+i),s=1-Math.min(1,r*(1-i)+i);return[a*255,o*255,s*255]},i.xyz.rgb=function(e){let t=e[0]/100,n=e[1]/100,r=e[2]/100,i,a,o;return i=t*3.2406+n*-1.5372+r*-.4986,a=t*-.9689+n*1.8758+r*.0415,o=t*.0557+n*-.204+r*1.057,i=i>.0031308?1.055*i**(1/2.4)-.055:i*12.92,a=a>.0031308?1.055*a**(1/2.4)-.055:a*12.92,o=o>.0031308?1.055*o**(1/2.4)-.055:o*12.92,i=Math.min(Math.max(0,i),1),a=Math.min(Math.max(0,a),1),o=Math.min(Math.max(0,o),1),[i*255,a*255,o*255]},i.xyz.lab=function(e){let t=e[0],n=e[1],r=e[2];return t/=95.047,n/=100,r/=108.883,t=t>.008856?t**(1/3):7.787*t+16/116,n=n>.008856?n**(1/3):7.787*n+16/116,r=r>.008856?r**(1/3):7.787*r+16/116,[116*n-16,500*(t-n),200*(n-r)]},i.lab.xyz=function(e){let t=e[0],n=e[1],r=e[2],i,a,o;a=(t+16)/116,i=n/500+a,o=a-r/200;let s=a**3,c=i**3,l=o**3;return a=s>.008856?s:(a-16/116)/7.787,i=c>.008856?c:(i-16/116)/7.787,o=l>.008856?l:(o-16/116)/7.787,i*=95.047,a*=100,o*=108.883,[i,a,o]},i.lab.lch=function(e){let t=e[0],n=e[1],r=e[2],i;return i=Math.atan2(r,n)*360/2/Math.PI,i<0&&(i+=360),[t,Math.sqrt(n*n+r*r),i]},i.lch.lab=function(e){let t=e[0],n=e[1],r=e[2]/360*2*Math.PI;return[t,n*Math.cos(r),n*Math.sin(r)]},i.rgb.ansi16=function(e,t=null){let[n,r,a]=e,o=t===null?i.rgb.hsv(e)[2]:t;if(o=Math.round(o/50),o===0)return 30;let s=30+(Math.round(a/255)<<2|Math.round(r/255)<<1|Math.round(n/255));return o===2&&(s+=60),s},i.hsv.ansi16=function(e){return i.rgb.ansi16(i.hsv.rgb(e),e[2])},i.rgb.ansi256=function(e){let t=e[0],n=e[1],r=e[2];return t===n&&n===r?t<8?16:t>248?231:Math.round((t-8)/247*24)+232:16+36*Math.round(t/255*5)+6*Math.round(n/255*5)+Math.round(r/255*5)},i.ansi16.rgb=function(e){let t=e%10;if(t===0||t===7)return e>50&&(t+=3.5),t=t/10.5*255,[t,t,t];let n=(~~(e>50)+1)*.5;return[(t&1)*n*255,(t>>1&1)*n*255,(t>>2&1)*n*255]},i.ansi256.rgb=function(e){if(e>=232){let t=(e-232)*10+8;return[t,t,t]}e-=16;let t;return[Math.floor(e/36)/5*255,Math.floor((t=e%36)/6)/5*255,t%6/5*255]},i.rgb.hex=function(e){let t=(((Math.round(e[0])&255)<<16)+((Math.round(e[1])&255)<<8)+(Math.round(e[2])&255)).toString(16).toUpperCase();return`000000`.substring(t.length)+t},i.hex.rgb=function(e){let t=e.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!t)return[0,0,0];let n=t[0];t[0].length===3&&(n=n.split(``).map(e=>e+e).join(``));let r=parseInt(n,16);return[r>>16&255,r>>8&255,r&255]},i.rgb.hcg=function(e){let t=e[0]/255,n=e[1]/255,r=e[2]/255,i=Math.max(Math.max(t,n),r),a=Math.min(Math.min(t,n),r),o=i-a,s,c;return s=o<1?a/(1-o):0,c=o<=0?0:i===t?(n-r)/o%6:i===n?2+(r-t)/o:4+(t-n)/o,c/=6,c%=1,[c*360,o*100,s*100]},i.hsl.hcg=function(e){let t=e[1]/100,n=e[2]/100,r=n<.5?2*t*n:2*t*(1-n),i=0;return r<1&&(i=(n-.5*r)/(1-r)),[e[0],r*100,i*100]},i.hsv.hcg=function(e){let t=e[1]/100,n=e[2]/100,r=t*n,i=0;return r<1&&(i=(n-r)/(1-r)),[e[0],r*100,i*100]},i.hcg.rgb=function(e){let t=e[0]/360,n=e[1]/100,r=e[2]/100;if(n===0)return[r*255,r*255,r*255];let i=[0,0,0],a=t%1*6,o=a%1,s=1-o,c=0;switch(Math.floor(a)){case 0:i[0]=1,i[1]=o,i[2]=0;break;case 1:i[0]=s,i[1]=1,i[2]=0;break;case 2:i[0]=0,i[1]=1,i[2]=o;break;case 3:i[0]=0,i[1]=s,i[2]=1;break;case 4:i[0]=o,i[1]=0,i[2]=1;break;default:i[0]=1,i[1]=0,i[2]=s}return c=(1-n)*r,[(n*i[0]+c)*255,(n*i[1]+c)*255,(n*i[2]+c)*255]},i.hcg.hsv=function(e){let t=e[1]/100,n=t+e[2]/100*(1-t),r=0;return n>0&&(r=t/n),[e[0],r*100,n*100]},i.hcg.hsl=function(e){let t=e[1]/100,n=e[2]/100*(1-t)+.5*t,r=0;return n>0&&n<.5?r=t/(2*n):n>=.5&&n<1&&(r=t/(2*(1-n))),[e[0],r*100,n*100]},i.hcg.hwb=function(e){let t=e[1]/100,n=t+e[2]/100*(1-t);return[e[0],(n-t)*100,(1-n)*100]},i.hwb.hcg=function(e){let t=e[1]/100,n=1-e[2]/100,r=n-t,i=0;return r<1&&(i=(n-r)/(1-r)),[e[0],r*100,i*100]},i.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]},i.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]},i.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]},i.gray.hsl=function(e){return[0,0,e[0]]},i.gray.hsv=i.gray.hsl,i.gray.hwb=function(e){return[0,100,e[0]]},i.gray.cmyk=function(e){return[0,0,0,e[0]]},i.gray.lab=function(e){return[e[0],0,0]},i.gray.hex=function(e){let t=Math.round(e[0]/100*255)&255,n=((t<<16)+(t<<8)+t).toString(16).toUpperCase();return`000000`.substring(n.length)+n},i.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]}}}),oe=i({"../../../node_modules/color-convert/route.js"(e,t){var n=S();function r(){let e={},t=Object.keys(n);for(let n=t.length,r=0;r1&&(t=n),e(t))};return`conversion`in e&&(t.conversion=e.conversion),t}function s(e){let t=function(...t){let n=t[0];if(n==null)return n;n.length>1&&(t=n);let r=e(t);if(typeof r==`object`)for(let e=r.length,t=0;t{i[e]={},Object.defineProperty(i[e],`channels`,{value:n[e].channels}),Object.defineProperty(i[e],`labels`,{value:n[e].labels});let t=r(e);Object.keys(t).forEach(n=>{let r=t[n];i[e][n]=s(r),i[e][n].raw=o(r)})}),t.exports=i}})(),1),w=Symbol(`partial.placeholder`),te.placeholder=w,T=Symbol(`partialRight.placeholder`),ne.placeholder=T,E=function(e,t,n){return t===void 0&&(t=0),n===void 0&&(n=1),e>n?n:e0:e.buttons>0)&&i.current?a(se(i.current,e,s.current)):n(!1)},t=function(){return n(!1)};function n(n){var r=c.current,a=O(i.current),o=n?a.addEventListener:a.removeEventListener;o(r?`touchmove`:`mousemove`,e),o(r?`touchend`:`mouseup`,t)}return[function(e){var t=e.nativeEvent,r=i.current;if(r&&(ce(t),!(function(e,t){return t&&!D(e)})(t,c.current)&&r)){if(D(t)){c.current=!0;var o=t.changedTouches||[];o.length&&(s.current=o[0].identifier)}r.focus(),a(se(r,t,s.current)),n(!0)}},function(e){var t=e.which||e.keyCode;t<37||t>40||(e.preventDefault(),o({left:t===39?.05:t===37?-.05:0,top:t===40?.05:t===38?-.05:0}))},n]},[o,a]),u=l[0],d=l[1],f=l[2];return(0,x.useEffect)(function(){return f},[f]),x.createElement(`div`,_({},r,{onTouchStart:u,onMouseDown:u,className:`react-colorful__interactive`,ref:i,onKeyDown:d,tabIndex:0,role:`slider`}))}),A=function(e){return e.filter(Boolean).join(` `)},j=function(e){var t=e.color,n=e.left,r=e.top,i=r===void 0?.5:r,a=A([`react-colorful__pointer`,e.className]);return x.createElement(`div`,{className:a,style:{top:100*i+`%`,left:100*n+`%`}},x.createElement(`div`,{className:`react-colorful__pointer-fill`,style:{backgroundColor:t}}))},M=function(e,t,n){return t===void 0&&(t=0),n===void 0&&(n=10**t),Math.round(n*e)/n},le={grad:.9,turn:360,rad:360/(2*Math.PI)},ue=function(e){return z(N(e))},N=function(e){return e[0]===`#`&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:e.length===4?M(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:e.length===8?M(parseInt(e.substring(6,8),16)/255,2):1}},de=function(e,t){return t===void 0&&(t=`deg`),Number(e)*(le[t]||1)},fe=function(e){var t=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?pe({h:de(t[1],t[2]),s:Number(t[3]),l:Number(t[4]),a:t[5]===void 0?1:Number(t[5])/(t[6]?100:1)}):{h:0,s:0,v:0,a:1}},pe=function(e){var t=e.s,n=e.l;return{h:e.h,s:(t*=(n<50?n:100-n)/100)>0?2*t/(n+t)*100:0,v:n+t,a:e.a}},me=function(e){return ge(L(e))},P=function(e){var t=e.s,n=e.v,r=e.a,i=(200-t)*n/100;return{h:M(e.h),s:M(i>0&&i<200?t*n/100/(i<=100?i:200-i)*100:0),l:M(i/2),a:M(r,2)}},F=function(e){var t=P(e);return`hsl(`+t.h+`, `+t.s+`%, `+t.l+`%)`},I=function(e){var t=P(e);return`hsla(`+t.h+`, `+t.s+`%, `+t.l+`%, `+t.a+`)`},L=function(e){var t=e.h,n=e.s,r=e.v,i=e.a;t=t/360*6,n/=100,r/=100;var a=Math.floor(t),o=r*(1-n),s=r*(1-(t-a)*n),c=r*(1-(1-t+a)*n),l=a%6;return{r:M(255*[r,s,o,o,c,r][l]),g:M(255*[c,r,r,s,o,o][l]),b:M(255*[o,o,c,r,r,s][l]),a:M(i,2)}},he=function(e){var t=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?z({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:t[7]===void 0?1:Number(t[7])/(t[8]?100:1)}):{h:0,s:0,v:0,a:1}},R=function(e){var t=e.toString(16);return t.length<2?`0`+t:t},ge=function(e){var t=e.r,n=e.g,r=e.b,i=e.a,a=i<1?R(M(255*i)):``;return`#`+R(t)+R(n)+R(r)+a},z=function(e){var t=e.r,n=e.g,r=e.b,i=e.a,a=Math.max(t,n,r),o=a-Math.min(t,n,r),s=o?a===t?(n-r)/o:a===n?2+(r-t)/o:4+(t-n)/o:0;return{h:M(60*(s<0?s+6:s)),s:M(a?o/a*100:0),v:M(a/255*100),a:i}},B=x.memo(function(e){var t=e.hue,n=e.onChange,r=A([`react-colorful__hue`,e.className]);return x.createElement(`div`,{className:r},x.createElement(k,{onMove:function(e){n({h:360*e.left})},onKey:function(e){n({h:E(t+360*e.left,0,360)})},"aria-label":`Hue`,"aria-valuenow":M(t),"aria-valuemax":`360`,"aria-valuemin":`0`},x.createElement(j,{className:`react-colorful__hue-pointer`,left:t/360,color:F({h:t,s:100,v:100,a:1})})))}),V=x.memo(function(e){var t=e.hsva,n=e.onChange,r={backgroundColor:F({h:t.h,s:100,v:100,a:1})};return x.createElement(`div`,{className:`react-colorful__saturation`,style:r},x.createElement(k,{onMove:function(e){n({s:100*e.left,v:100-100*e.top})},onKey:function(e){n({s:E(t.s+100*e.left,0,100),v:E(t.v-100*e.top,0,100)})},"aria-label":`Color`,"aria-valuetext":`Saturation `+M(t.s)+`%, Brightness `+M(t.v)+`%`},x.createElement(j,{className:`react-colorful__saturation-pointer`,top:1-t.v/100,left:t.s/100,color:F(t)})))}),H=function(e,t){if(e===t)return!0;for(var n in e)if(e[n]!==t[n])return!1;return!0},U=function(e,t){return e.replace(/\s/g,``)===t.replace(/\s/g,``)},_e=function(e,t){return e.toLowerCase()===t.toLowerCase()||H(N(e),N(t))},ye=typeof window<`u`?x.useLayoutEffect:x.useEffect,be=function(){return ve||(typeof __webpack_nonce__<`u`?__webpack_nonce__:void 0)},W=new Map,G=function(e){ye(function(){var t=e.current?e.current.ownerDocument:document;if(t!==void 0&&!W.has(t)){var n=t.createElement(`style`);n.innerHTML=`.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`,W.set(t,n);var r=be();r&&n.setAttribute(`nonce`,r),t.head.appendChild(n)}},[])},xe=function(e){var t=e.className,n=e.colorModel,r=e.color,i=r===void 0?n.defaultColor:r,a=e.onChange,o=v(e,[`className`,`colorModel`,`color`,`onChange`]),s=(0,x.useRef)(null);G(s);var c=ie(n,i,a),l=c[0],u=c[1],d=A([`react-colorful`,t]);return x.createElement(`div`,_({},o,{ref:s,className:d}),x.createElement(V,{hsva:l,onChange:u}),x.createElement(B,{hue:l.h,onChange:u,className:`react-colorful__last-control`}))},Se={defaultColor:`000`,toHsva:ue,fromHsva:function(e){return me({h:e.h,s:e.s,v:e.v,a:1})},equal:_e},Ce=function(e){return x.createElement(xe,_({},e,{colorModel:Se}))},we=function(e){var t=e.className,n=e.hsva,r=e.onChange,i={backgroundImage:`linear-gradient(90deg, `+I(Object.assign({},n,{a:0}))+`, `+I(Object.assign({},n,{a:1}))+`)`},a=A([`react-colorful__alpha`,t]),o=M(100*n.a);return x.createElement(`div`,{className:a},x.createElement(`div`,{className:`react-colorful__alpha-gradient`,style:i}),x.createElement(k,{onMove:function(e){r({a:e.left})},onKey:function(e){r({a:E(n.a+e.left)})},"aria-label":`Alpha`,"aria-valuetext":o+`%`,"aria-valuenow":o,"aria-valuemin":`0`,"aria-valuemax":`100`},x.createElement(j,{className:`react-colorful__alpha-pointer`,left:n.a,color:I(n)})))},K=function(e){var t=e.className,n=e.colorModel,r=e.color,i=r===void 0?n.defaultColor:r,a=e.onChange,o=v(e,[`className`,`colorModel`,`color`,`onChange`]),s=(0,x.useRef)(null);G(s);var c=ie(n,i,a),l=c[0],u=c[1],d=A([`react-colorful`,t]);return x.createElement(`div`,_({},o,{ref:s,className:d}),x.createElement(V,{hsva:l,onChange:u}),x.createElement(B,{hue:l.h,onChange:u}),x.createElement(we,{hsva:l,onChange:u,className:`react-colorful__last-control`}))},Te={defaultColor:`hsla(0, 0%, 0%, 1)`,toHsva:fe,fromHsva:I,equal:U},Ee=function(e){return x.createElement(K,_({},e,{colorModel:Te}))},De={defaultColor:`rgba(0, 0, 0, 1)`,toHsva:he,fromHsva:function(e){var t=L(e);return`rgba(`+t.r+`, `+t.g+`, `+t.b+`, `+t.a+`)`},equal:U},Oe=function(e){return x.createElement(K,_({},e,{colorModel:De}))},ke=l.div({position:`relative`,maxWidth:250}),Ae=l.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:`4px 4px 0 0`},".react-colorful__hue":{boxShadow:`inset 0 0 0 1px rgb(0 0 0 / 5%)`},".react-colorful__last-control":{borderRadius:`0 0 4px 4px`}}),je=l.div({display:`grid`,gridTemplateColumns:`repeat(9, 16px)`,gap:6,padding:3,marginTop:5,width:200}),Me=e=>`url('data:image/svg+xml;charset=utf-8,')`,q=l(p)(({value:e,selected:t,theme:n})=>({width:16,height:16,boxShadow:t?`${n.appBorderColor} 0 0 0 1px inset, ${n.textMutedColor}50 0 0 0 4px`:`${n.appBorderColor} 0 0 0 1px inset`,border:`none`,borderRadius:n.appBorderRadius,"&, &:hover":{background:`unset`,backgroundColor:`unset`,backgroundImage:`linear-gradient(${e}, ${e}), ${Me(n.base===`dark`)}`}})),Ne=l(m.Input)(({theme:e})=>({width:`100%`,paddingLeft:30,paddingRight:30,boxSizing:`border-box`,fontFamily:e.typography.fonts.base,'[aria-readonly="true"] > &':{background:e.base===`light`?e.color.lighter:`transparent`}})),Pe=l(q)(({disabled:e})=>({position:`absolute`,top:4,left:4,zIndex:1,cursor:e?`not-allowed`:`pointer`})),Fe=l(p)(({theme:e})=>({position:`absolute`,zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:`border-box`,cursor:`pointer`,color:e.input.color})),J=(e=>(e.RGB=`rgb`,e.HSL=`hsl`,e.HEX=`hex`,e))(J||{}),Y=Object.values(J),Ie=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,Le=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,Re=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,X=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,ze=/^\s*#?([0-9a-f]{3})\s*$/i,Be={hex:Ce,rgb:Oe,hsl:Ee},Z={hex:`transparent`,rgb:`rgba(0, 0, 0, 0)`,hsl:`hsla(0, 0%, 0%, 0)`},Ve=e=>{let t=e?.match(Ie);if(!t)return[0,0,0,1];let[,n,r,i,a=1]=t;return[n,r,i,a].map(Number)},He=e=>{let[t,n,r,i]=Ve(e),[a,o,s]=C.default.rgb.hsl([t,n,r])||[0,0,0];return{valid:!0,value:e,keyword:C.default.rgb.keyword([t,n,r]),colorSpace:`rgb`,rgb:e,hsl:`hsla(${a}, ${o}%, ${s}%, ${i})`,hex:`#${C.default.rgb.hex([t,n,r]).toLowerCase()}`}},Ue=e=>{let[t,n,r,i]=Ve(e),[a,o,s]=C.default.hsl.rgb([t,n,r])||[0,0,0];return{valid:!0,value:e,keyword:C.default.hsl.keyword([t,n,r]),colorSpace:`hsl`,rgb:`rgba(${a}, ${o}, ${s}, ${i})`,hsl:e,hex:`#${C.default.hsl.hex([t,n,r]).toLowerCase()}`}},We=e=>{let t=e.replace(`#`,``),n=C.default.keyword.rgb(t)||C.default.hex.rgb(t),r=C.default.rgb.hsl(n),i=e;/[^#a-f0-9]/i.test(e)?i=t:X.test(e)&&(i=`#${t}`);let a=!0;if(i.startsWith(`#`))a=X.test(i);else try{C.default.keyword.hex(i)}catch{a=!1}return{valid:a,value:i,keyword:C.default.rgb.keyword(n),colorSpace:`hex`,rgb:`rgba(${n[0]}, ${n[1]}, ${n[2]}, 1)`,hsl:`hsla(${r[0]}, ${r[1]}%, ${r[2]}%, 1)`,hex:i}},Q=e=>{if(e)return Le.test(e)?He(e):Re.test(e)?Ue(e):We(e)},Ge=(e,t,n)=>{if(!e||!t?.valid)return Z[n];if(n!==`hex`)return t?.[n]||Z[n];if(!t.hex.startsWith(`#`))try{return`#${C.default.keyword.hex(t.hex)}`}catch{return Z.hex}let r=t.hex.match(ze);if(!r)return X.test(t.hex)?t.hex:Z.hex;let[i,a,o]=r[1].split(``);return`#${i}${i}${a}${a}${o}${o}`},Ke=(e,t)=>{let[n,r]=(0,b.useState)(e||``),[i,a]=(0,b.useState)(()=>Q(n)),[o,s]=(0,b.useState)(i?.colorSpace||`hex`);return(0,b.useEffect)(()=>{let t=e||``,n=Q(t);r(t),a(n),s(n?.colorSpace||`hex`)},[e]),{value:n,realValue:(0,b.useMemo)(()=>Ge(n,i,o).toLowerCase(),[n,i,o]),updateValue:(0,b.useCallback)(e=>{let n=Q(e),i=n?.value||e||``;r(i),i===``&&(a(void 0),t(void 0)),n&&(a(n),s(n.colorSpace),t(n.value))},[t]),color:i,colorSpace:o,cycleColorSpace:(0,b.useCallback)(()=>{let e=Y[(Y.indexOf(o)+1)%Y.length];s(e);let n=i?.[e]||``;r(n),t(n)},[i,o,t])}},$=e=>e.replace(/\s*/,``).toLowerCase(),qe=(e,t,n)=>{let[r,i]=(0,b.useState)(t?.valid?[t]:[]);(0,b.useEffect)(()=>{t===void 0&&i([])},[t]);let a=(0,b.useMemo)(()=>(e||[]).map(e=>typeof e==`string`?Q(e):e.title?{...Q(e.color),keyword:e.title}:Q(e.color)).concat(r).filter(Boolean).slice(-27),[e,r]);return{presets:a,addPreset:(0,b.useCallback)(e=>{e?.valid&&(a.some(t=>t&&t[n]&&$(t[n]||``)===$(e[n]||``))||i(t=>t.concat(e)))},[n,a])}},Je=({name:e,value:t,onChange:n,onFocus:r,onBlur:i,presetColors:a,startOpen:o=!1,argType:c})=>{let{value:l,realValue:d,updateValue:p,color:m,colorSpace:h,cycleColorSpace:te}=Ke(t,(0,b.useCallback)(ee(n,200),[n])),{presets:g,addPreset:ne}=qe(a??[],m,h),re=Be[h],_=!!c?.table?.readonly,v=s(e);return b.createElement(ke,null,b.createElement(`label`,{htmlFor:v,className:`sb-sr-only`},e),b.createElement(Ne,{id:v,value:l,onChange:e=>p(e.target.value),onFocus:e=>e.target.select(),readOnly:_,placeholder:`Choose color...`}),b.createElement(f,{ariaLabel:`Color picker`,defaultVisible:o,visible:_?!1:void 0,onVisibleChange:()=>m&&ne(m),popover:b.createElement(Ae,null,b.createElement(re,{color:d===`transparent`?`#000000`:d,onChange:p,onFocus:r,onBlur:i}),g.length>0&&b.createElement(je,null,g.map((e,t)=>b.createElement(q,{key:`${e?.value||t}-${t}`,variant:`ghost`,padding:`small`,size:`small`,ariaLabel:`Pick this color`,tooltip:e?.keyword||e?.value||``,value:e?.value||``,selected:!!(m&&e&&e[h]&&$(e[h]||``)===$(m[h])),onClick:()=>e&&p(e.value||``)}))))},b.createElement(Pe,{variant:`ghost`,padding:`small`,size:`small`,ariaLabel:`Open color picker`,value:d,style:{margin:4},disabled:_})),l?b.createElement(Fe,{variant:`ghost`,padding:`small`,size:`small`,ariaLabel:`Cycle through color spaces`,disabled:_,onClick:_?void 0:te},b.createElement(u,null)):null)},Ye=Je}))();export{Je as ColorControl,Ye as default}; \ No newline at end of file +import{a as e,n as t}from"./chunk-BneVvdWh.js";import{n,r,t as i}from"./iframe-B3N_zEeP.js";import{t as a}from"./react-B_0iYUWB.js";import{r as o,t as s}from"./chunk-CYSK6WYR-C0tTbXjk.js";import{a as c,c as l}from"./theming-DLWRz99i.js";import{F as u,H as d,d as f,n as p,o as m,x as h}from"./components-DW-5dJuS.js";function ee(e,t,{signal:n,edges:r}={}){let i,a=null,o=r!=null&&r.includes(`leading`),s=r==null||r.includes(`trailing`),c=()=>{a!==null&&(e.apply(i,a),i=void 0,a=null)},l=()=>{s&&c(),p()},u=null,d=()=>{u!=null&&clearTimeout(u),u=setTimeout(()=>{u=null,l()},t)},f=()=>{u!==null&&(clearTimeout(u),u=null)},p=()=>{f(),i=void 0,a=null},m=()=>{c()},h=function(...e){if(n?.aborted)return;i=this,a=e;let t=u==null;d(),o&&t&&c()};return h.schedule=d,h.cancel=p,h.flush=m,n?.addEventListener(`abort`,p,{once:!0}),h}function te(e,...t){return g(e,w,...t)}function g(e,t,...n){let r=function(...r){let i=0,a=n.slice().map(e=>e===t?r[i++]:e),o=r.slice(i);return e.apply(this,a.concat(o))};return e.prototype&&(r.prototype=Object.create(e.prototype)),r}function ne(e,...t){return re(e,T,...t)}function re(e,t,...n){let r=function(...r){let i=n.filter(e=>e===t).length,a=Math.max(r.length-i,0),o=r.slice(0,a),s=a,c=n.slice().map(e=>e===t?r[s++]:e);return e.apply(this,o.concat(c))};return e.prototype&&(r.prototype=Object.create(e.prototype)),r}function _(){return(_=Object.assign||function(e){for(var t=1;t=0||(i[n]=e[n]);return i}function y(e){var t=(0,x.useRef)(e),n=(0,x.useRef)(function(e){t.current&&t.current(e)});return t.current=e,n.current}function ie(e,t,n){var r=y(n),i=(0,x.useState)(function(){return e.toHsva(t)}),a=i[0],o=i[1],s=(0,x.useRef)({color:t,hsva:a});return(0,x.useEffect)(function(){if(!e.equal(t,s.current.color)){var n=e.toHsva(t);s.current={hsva:n,color:t},o(n)}},[t,e]),(0,x.useEffect)(function(){var t;H(a,s.current.hsva)||e.equal(t=e.fromHsva(a),s.current.color)||(s.current={hsva:a,color:t},r(t))},[a,e,r]),[a,(0,x.useCallback)(function(e){o(function(t){return Object.assign({},t,e)})},[])]}var b,x,ae,S,oe,C,w,T,E,D,O,se,ce,k,A,j,M,le,ue,N,de,fe,pe,me,P,F,I,L,he,R,ge,z,B,V,H,U,_e,ve,ye,be,W,G,xe,Se,Ce,we,K,Te,Ee,De,Oe,ke,Ae,je,Me,q,Ne,Pe,Fe,J,Y,Ie,Le,Re,X,ze,Be,Z,Ve,He,Ue,We,Q,Ge,Ke,$,qe,Je,Ye;t((()=>{o(),r(),b=e(a(),1),h(),d(),x=e(a(),1),c(),ae=i({"../../../node_modules/color-name/index.js"(e,t){t.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}}}),S=i({"../../../node_modules/color-convert/conversions.js"(e,t){var n=ae(),r={};for(let e of Object.keys(n))r[n[e]]=e;var i={rgb:{channels:3,labels:`rgb`},hsl:{channels:3,labels:`hsl`},hsv:{channels:3,labels:`hsv`},hwb:{channels:3,labels:`hwb`},cmyk:{channels:4,labels:`cmyk`},xyz:{channels:3,labels:`xyz`},lab:{channels:3,labels:`lab`},lch:{channels:3,labels:`lch`},hex:{channels:1,labels:[`hex`]},keyword:{channels:1,labels:[`keyword`]},ansi16:{channels:1,labels:[`ansi16`]},ansi256:{channels:1,labels:[`ansi256`]},hcg:{channels:3,labels:[`h`,`c`,`g`]},apple:{channels:3,labels:[`r16`,`g16`,`b16`]},gray:{channels:1,labels:[`gray`]}};t.exports=i;for(let e of Object.keys(i)){if(!(`channels`in i[e]))throw Error(`missing channels property: `+e);if(!(`labels`in i[e]))throw Error(`missing channel labels property: `+e);if(i[e].labels.length!==i[e].channels)throw Error(`channel and label counts mismatch: `+e);let{channels:t,labels:n}=i[e];delete i[e].channels,delete i[e].labels,Object.defineProperty(i[e],`channels`,{value:t}),Object.defineProperty(i[e],`labels`,{value:n})}i.rgb.hsl=function(e){let t=e[0]/255,n=e[1]/255,r=e[2]/255,i=Math.min(t,n,r),a=Math.max(t,n,r),o=a-i,s,c;a===i?s=0:t===a?s=(n-r)/o:n===a?s=2+(r-t)/o:r===a&&(s=4+(t-n)/o),s=Math.min(s*60,360),s<0&&(s+=360);let l=(i+a)/2;return c=a===i?0:l<=.5?o/(a+i):o/(2-a-i),[s,c*100,l*100]},i.rgb.hsv=function(e){let t,n,r,i,a,o=e[0]/255,s=e[1]/255,c=e[2]/255,l=Math.max(o,s,c),u=l-Math.min(o,s,c),d=function(e){return(l-e)/6/u+1/2};return u===0?(i=0,a=0):(a=u/l,t=d(o),n=d(s),r=d(c),o===l?i=r-n:s===l?i=1/3+t-r:c===l&&(i=2/3+n-t),i<0?i+=1:i>1&&--i),[i*360,a*100,l*100]},i.rgb.hwb=function(e){let t=e[0],n=e[1],r=e[2],a=i.rgb.hsl(e)[0],o=1/255*Math.min(t,Math.min(n,r));return r=1-1/255*Math.max(t,Math.max(n,r)),[a,o*100,r*100]},i.rgb.cmyk=function(e){let t=e[0]/255,n=e[1]/255,r=e[2]/255,i=Math.min(1-t,1-n,1-r),a=(1-t-i)/(1-i)||0,o=(1-n-i)/(1-i)||0,s=(1-r-i)/(1-i)||0;return[a*100,o*100,s*100,i*100]};function a(e,t){return(e[0]-t[0])**2+(e[1]-t[1])**2+(e[2]-t[2])**2}i.rgb.keyword=function(e){let t=r[e];if(t)return t;let i=1/0,o;for(let t of Object.keys(n)){let r=n[t],s=a(e,r);s.04045?((t+.055)/1.055)**2.4:t/12.92,n=n>.04045?((n+.055)/1.055)**2.4:n/12.92,r=r>.04045?((r+.055)/1.055)**2.4:r/12.92;let i=t*.4124+n*.3576+r*.1805,a=t*.2126+n*.7152+r*.0722,o=t*.0193+n*.1192+r*.9505;return[i*100,a*100,o*100]},i.rgb.lab=function(e){let t=i.rgb.xyz(e),n=t[0],r=t[1],a=t[2];return n/=95.047,r/=100,a/=108.883,n=n>.008856?n**(1/3):7.787*n+16/116,r=r>.008856?r**(1/3):7.787*r+16/116,a=a>.008856?a**(1/3):7.787*a+16/116,[116*r-16,500*(n-r),200*(r-a)]},i.hsl.rgb=function(e){let t=e[0]/360,n=e[1]/100,r=e[2]/100,i,a,o;if(n===0)return o=r*255,[o,o,o];i=r<.5?r*(1+n):r+n-r*n;let s=2*r-i,c=[0,0,0];for(let e=0;e<3;e++)a=t+1/3*-(e-1),a<0&&a++,a>1&&a--,o=6*a<1?s+(i-s)*6*a:2*a<1?i:3*a<2?s+(i-s)*(2/3-a)*6:s,c[e]=o*255;return c},i.hsl.hsv=function(e){let t=e[0],n=e[1]/100,r=e[2]/100,i=n,a=Math.max(r,.01);r*=2,n*=r<=1?r:2-r,i*=a<=1?a:2-a;let o=(r+n)/2;return[t,(r===0?2*i/(a+i):2*n/(r+n))*100,o*100]},i.hsv.rgb=function(e){let t=e[0]/60,n=e[1]/100,r=e[2]/100,i=Math.floor(t)%6,a=t-Math.floor(t),o=255*r*(1-n),s=255*r*(1-n*a),c=255*r*(1-n*(1-a));switch(r*=255,i){case 0:return[r,c,o];case 1:return[s,r,o];case 2:return[o,r,c];case 3:return[o,s,r];case 4:return[c,o,r];case 5:return[r,o,s]}},i.hsv.hsl=function(e){let t=e[0],n=e[1]/100,r=e[2]/100,i=Math.max(r,.01),a,o;o=(2-n)*r;let s=(2-n)*i;return a=n*i,a/=s<=1?s:2-s,a||=0,o/=2,[t,a*100,o*100]},i.hwb.rgb=function(e){let t=e[0]/360,n=e[1]/100,r=e[2]/100,i=n+r,a;i>1&&(n/=i,r/=i);let o=Math.floor(6*t),s=1-r;a=6*t-o,o&1&&(a=1-a);let c=n+a*(s-n),l,u,d;switch(o){default:case 6:case 0:l=s,u=c,d=n;break;case 1:l=c,u=s,d=n;break;case 2:l=n,u=s,d=c;break;case 3:l=n,u=c,d=s;break;case 4:l=c,u=n,d=s;break;case 5:l=s,u=n,d=c;break}return[l*255,u*255,d*255]},i.cmyk.rgb=function(e){let t=e[0]/100,n=e[1]/100,r=e[2]/100,i=e[3]/100,a=1-Math.min(1,t*(1-i)+i),o=1-Math.min(1,n*(1-i)+i),s=1-Math.min(1,r*(1-i)+i);return[a*255,o*255,s*255]},i.xyz.rgb=function(e){let t=e[0]/100,n=e[1]/100,r=e[2]/100,i,a,o;return i=t*3.2406+n*-1.5372+r*-.4986,a=t*-.9689+n*1.8758+r*.0415,o=t*.0557+n*-.204+r*1.057,i=i>.0031308?1.055*i**(1/2.4)-.055:i*12.92,a=a>.0031308?1.055*a**(1/2.4)-.055:a*12.92,o=o>.0031308?1.055*o**(1/2.4)-.055:o*12.92,i=Math.min(Math.max(0,i),1),a=Math.min(Math.max(0,a),1),o=Math.min(Math.max(0,o),1),[i*255,a*255,o*255]},i.xyz.lab=function(e){let t=e[0],n=e[1],r=e[2];return t/=95.047,n/=100,r/=108.883,t=t>.008856?t**(1/3):7.787*t+16/116,n=n>.008856?n**(1/3):7.787*n+16/116,r=r>.008856?r**(1/3):7.787*r+16/116,[116*n-16,500*(t-n),200*(n-r)]},i.lab.xyz=function(e){let t=e[0],n=e[1],r=e[2],i,a,o;a=(t+16)/116,i=n/500+a,o=a-r/200;let s=a**3,c=i**3,l=o**3;return a=s>.008856?s:(a-16/116)/7.787,i=c>.008856?c:(i-16/116)/7.787,o=l>.008856?l:(o-16/116)/7.787,i*=95.047,a*=100,o*=108.883,[i,a,o]},i.lab.lch=function(e){let t=e[0],n=e[1],r=e[2],i;return i=Math.atan2(r,n)*360/2/Math.PI,i<0&&(i+=360),[t,Math.sqrt(n*n+r*r),i]},i.lch.lab=function(e){let t=e[0],n=e[1],r=e[2]/360*2*Math.PI;return[t,n*Math.cos(r),n*Math.sin(r)]},i.rgb.ansi16=function(e,t=null){let[n,r,a]=e,o=t===null?i.rgb.hsv(e)[2]:t;if(o=Math.round(o/50),o===0)return 30;let s=30+(Math.round(a/255)<<2|Math.round(r/255)<<1|Math.round(n/255));return o===2&&(s+=60),s},i.hsv.ansi16=function(e){return i.rgb.ansi16(i.hsv.rgb(e),e[2])},i.rgb.ansi256=function(e){let t=e[0],n=e[1],r=e[2];return t===n&&n===r?t<8?16:t>248?231:Math.round((t-8)/247*24)+232:16+36*Math.round(t/255*5)+6*Math.round(n/255*5)+Math.round(r/255*5)},i.ansi16.rgb=function(e){let t=e%10;if(t===0||t===7)return e>50&&(t+=3.5),t=t/10.5*255,[t,t,t];let n=(~~(e>50)+1)*.5;return[(t&1)*n*255,(t>>1&1)*n*255,(t>>2&1)*n*255]},i.ansi256.rgb=function(e){if(e>=232){let t=(e-232)*10+8;return[t,t,t]}e-=16;let t;return[Math.floor(e/36)/5*255,Math.floor((t=e%36)/6)/5*255,t%6/5*255]},i.rgb.hex=function(e){let t=(((Math.round(e[0])&255)<<16)+((Math.round(e[1])&255)<<8)+(Math.round(e[2])&255)).toString(16).toUpperCase();return`000000`.substring(t.length)+t},i.hex.rgb=function(e){let t=e.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!t)return[0,0,0];let n=t[0];t[0].length===3&&(n=n.split(``).map(e=>e+e).join(``));let r=parseInt(n,16);return[r>>16&255,r>>8&255,r&255]},i.rgb.hcg=function(e){let t=e[0]/255,n=e[1]/255,r=e[2]/255,i=Math.max(Math.max(t,n),r),a=Math.min(Math.min(t,n),r),o=i-a,s,c;return s=o<1?a/(1-o):0,c=o<=0?0:i===t?(n-r)/o%6:i===n?2+(r-t)/o:4+(t-n)/o,c/=6,c%=1,[c*360,o*100,s*100]},i.hsl.hcg=function(e){let t=e[1]/100,n=e[2]/100,r=n<.5?2*t*n:2*t*(1-n),i=0;return r<1&&(i=(n-.5*r)/(1-r)),[e[0],r*100,i*100]},i.hsv.hcg=function(e){let t=e[1]/100,n=e[2]/100,r=t*n,i=0;return r<1&&(i=(n-r)/(1-r)),[e[0],r*100,i*100]},i.hcg.rgb=function(e){let t=e[0]/360,n=e[1]/100,r=e[2]/100;if(n===0)return[r*255,r*255,r*255];let i=[0,0,0],a=t%1*6,o=a%1,s=1-o,c=0;switch(Math.floor(a)){case 0:i[0]=1,i[1]=o,i[2]=0;break;case 1:i[0]=s,i[1]=1,i[2]=0;break;case 2:i[0]=0,i[1]=1,i[2]=o;break;case 3:i[0]=0,i[1]=s,i[2]=1;break;case 4:i[0]=o,i[1]=0,i[2]=1;break;default:i[0]=1,i[1]=0,i[2]=s}return c=(1-n)*r,[(n*i[0]+c)*255,(n*i[1]+c)*255,(n*i[2]+c)*255]},i.hcg.hsv=function(e){let t=e[1]/100,n=t+e[2]/100*(1-t),r=0;return n>0&&(r=t/n),[e[0],r*100,n*100]},i.hcg.hsl=function(e){let t=e[1]/100,n=e[2]/100*(1-t)+.5*t,r=0;return n>0&&n<.5?r=t/(2*n):n>=.5&&n<1&&(r=t/(2*(1-n))),[e[0],r*100,n*100]},i.hcg.hwb=function(e){let t=e[1]/100,n=t+e[2]/100*(1-t);return[e[0],(n-t)*100,(1-n)*100]},i.hwb.hcg=function(e){let t=e[1]/100,n=1-e[2]/100,r=n-t,i=0;return r<1&&(i=(n-r)/(1-r)),[e[0],r*100,i*100]},i.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]},i.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]},i.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]},i.gray.hsl=function(e){return[0,0,e[0]]},i.gray.hsv=i.gray.hsl,i.gray.hwb=function(e){return[0,100,e[0]]},i.gray.cmyk=function(e){return[0,0,0,e[0]]},i.gray.lab=function(e){return[e[0],0,0]},i.gray.hex=function(e){let t=Math.round(e[0]/100*255)&255,n=((t<<16)+(t<<8)+t).toString(16).toUpperCase();return`000000`.substring(n.length)+n},i.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]}}}),oe=i({"../../../node_modules/color-convert/route.js"(e,t){var n=S();function r(){let e={},t=Object.keys(n);for(let n=t.length,r=0;r1&&(t=n),e(t))};return`conversion`in e&&(t.conversion=e.conversion),t}function s(e){let t=function(...t){let n=t[0];if(n==null)return n;n.length>1&&(t=n);let r=e(t);if(typeof r==`object`)for(let e=r.length,t=0;t{i[e]={},Object.defineProperty(i[e],`channels`,{value:n[e].channels}),Object.defineProperty(i[e],`labels`,{value:n[e].labels});let t=r(e);Object.keys(t).forEach(n=>{let r=t[n];i[e][n]=s(r),i[e][n].raw=o(r)})}),t.exports=i}})(),1),w=Symbol(`partial.placeholder`),te.placeholder=w,T=Symbol(`partialRight.placeholder`),ne.placeholder=T,E=function(e,t,n){return t===void 0&&(t=0),n===void 0&&(n=1),e>n?n:e0:e.buttons>0)&&i.current?a(se(i.current,e,s.current)):n(!1)},t=function(){return n(!1)};function n(n){var r=c.current,a=O(i.current),o=n?a.addEventListener:a.removeEventListener;o(r?`touchmove`:`mousemove`,e),o(r?`touchend`:`mouseup`,t)}return[function(e){var t=e.nativeEvent,r=i.current;if(r&&(ce(t),!(function(e,t){return t&&!D(e)})(t,c.current)&&r)){if(D(t)){c.current=!0;var o=t.changedTouches||[];o.length&&(s.current=o[0].identifier)}r.focus(),a(se(r,t,s.current)),n(!0)}},function(e){var t=e.which||e.keyCode;t<37||t>40||(e.preventDefault(),o({left:t===39?.05:t===37?-.05:0,top:t===40?.05:t===38?-.05:0}))},n]},[o,a]),u=l[0],d=l[1],f=l[2];return(0,x.useEffect)(function(){return f},[f]),x.createElement(`div`,_({},r,{onTouchStart:u,onMouseDown:u,className:`react-colorful__interactive`,ref:i,onKeyDown:d,tabIndex:0,role:`slider`}))}),A=function(e){return e.filter(Boolean).join(` `)},j=function(e){var t=e.color,n=e.left,r=e.top,i=r===void 0?.5:r,a=A([`react-colorful__pointer`,e.className]);return x.createElement(`div`,{className:a,style:{top:100*i+`%`,left:100*n+`%`}},x.createElement(`div`,{className:`react-colorful__pointer-fill`,style:{backgroundColor:t}}))},M=function(e,t,n){return t===void 0&&(t=0),n===void 0&&(n=10**t),Math.round(n*e)/n},le={grad:.9,turn:360,rad:360/(2*Math.PI)},ue=function(e){return z(N(e))},N=function(e){return e[0]===`#`&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:e.length===4?M(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:e.length===8?M(parseInt(e.substring(6,8),16)/255,2):1}},de=function(e,t){return t===void 0&&(t=`deg`),Number(e)*(le[t]||1)},fe=function(e){var t=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?pe({h:de(t[1],t[2]),s:Number(t[3]),l:Number(t[4]),a:t[5]===void 0?1:Number(t[5])/(t[6]?100:1)}):{h:0,s:0,v:0,a:1}},pe=function(e){var t=e.s,n=e.l;return{h:e.h,s:(t*=(n<50?n:100-n)/100)>0?2*t/(n+t)*100:0,v:n+t,a:e.a}},me=function(e){return ge(L(e))},P=function(e){var t=e.s,n=e.v,r=e.a,i=(200-t)*n/100;return{h:M(e.h),s:M(i>0&&i<200?t*n/100/(i<=100?i:200-i)*100:0),l:M(i/2),a:M(r,2)}},F=function(e){var t=P(e);return`hsl(`+t.h+`, `+t.s+`%, `+t.l+`%)`},I=function(e){var t=P(e);return`hsla(`+t.h+`, `+t.s+`%, `+t.l+`%, `+t.a+`)`},L=function(e){var t=e.h,n=e.s,r=e.v,i=e.a;t=t/360*6,n/=100,r/=100;var a=Math.floor(t),o=r*(1-n),s=r*(1-(t-a)*n),c=r*(1-(1-t+a)*n),l=a%6;return{r:M(255*[r,s,o,o,c,r][l]),g:M(255*[c,r,r,s,o,o][l]),b:M(255*[o,o,c,r,r,s][l]),a:M(i,2)}},he=function(e){var t=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?z({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:t[7]===void 0?1:Number(t[7])/(t[8]?100:1)}):{h:0,s:0,v:0,a:1}},R=function(e){var t=e.toString(16);return t.length<2?`0`+t:t},ge=function(e){var t=e.r,n=e.g,r=e.b,i=e.a,a=i<1?R(M(255*i)):``;return`#`+R(t)+R(n)+R(r)+a},z=function(e){var t=e.r,n=e.g,r=e.b,i=e.a,a=Math.max(t,n,r),o=a-Math.min(t,n,r),s=o?a===t?(n-r)/o:a===n?2+(r-t)/o:4+(t-n)/o:0;return{h:M(60*(s<0?s+6:s)),s:M(a?o/a*100:0),v:M(a/255*100),a:i}},B=x.memo(function(e){var t=e.hue,n=e.onChange,r=A([`react-colorful__hue`,e.className]);return x.createElement(`div`,{className:r},x.createElement(k,{onMove:function(e){n({h:360*e.left})},onKey:function(e){n({h:E(t+360*e.left,0,360)})},"aria-label":`Hue`,"aria-valuenow":M(t),"aria-valuemax":`360`,"aria-valuemin":`0`},x.createElement(j,{className:`react-colorful__hue-pointer`,left:t/360,color:F({h:t,s:100,v:100,a:1})})))}),V=x.memo(function(e){var t=e.hsva,n=e.onChange,r={backgroundColor:F({h:t.h,s:100,v:100,a:1})};return x.createElement(`div`,{className:`react-colorful__saturation`,style:r},x.createElement(k,{onMove:function(e){n({s:100*e.left,v:100-100*e.top})},onKey:function(e){n({s:E(t.s+100*e.left,0,100),v:E(t.v-100*e.top,0,100)})},"aria-label":`Color`,"aria-valuetext":`Saturation `+M(t.s)+`%, Brightness `+M(t.v)+`%`},x.createElement(j,{className:`react-colorful__saturation-pointer`,top:1-t.v/100,left:t.s/100,color:F(t)})))}),H=function(e,t){if(e===t)return!0;for(var n in e)if(e[n]!==t[n])return!1;return!0},U=function(e,t){return e.replace(/\s/g,``)===t.replace(/\s/g,``)},_e=function(e,t){return e.toLowerCase()===t.toLowerCase()||H(N(e),N(t))},ye=typeof window<`u`?x.useLayoutEffect:x.useEffect,be=function(){return ve||(typeof __webpack_nonce__<`u`?__webpack_nonce__:void 0)},W=new Map,G=function(e){ye(function(){var t=e.current?e.current.ownerDocument:document;if(t!==void 0&&!W.has(t)){var n=t.createElement(`style`);n.innerHTML=`.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`,W.set(t,n);var r=be();r&&n.setAttribute(`nonce`,r),t.head.appendChild(n)}},[])},xe=function(e){var t=e.className,n=e.colorModel,r=e.color,i=r===void 0?n.defaultColor:r,a=e.onChange,o=v(e,[`className`,`colorModel`,`color`,`onChange`]),s=(0,x.useRef)(null);G(s);var c=ie(n,i,a),l=c[0],u=c[1],d=A([`react-colorful`,t]);return x.createElement(`div`,_({},o,{ref:s,className:d}),x.createElement(V,{hsva:l,onChange:u}),x.createElement(B,{hue:l.h,onChange:u,className:`react-colorful__last-control`}))},Se={defaultColor:`000`,toHsva:ue,fromHsva:function(e){return me({h:e.h,s:e.s,v:e.v,a:1})},equal:_e},Ce=function(e){return x.createElement(xe,_({},e,{colorModel:Se}))},we=function(e){var t=e.className,n=e.hsva,r=e.onChange,i={backgroundImage:`linear-gradient(90deg, `+I(Object.assign({},n,{a:0}))+`, `+I(Object.assign({},n,{a:1}))+`)`},a=A([`react-colorful__alpha`,t]),o=M(100*n.a);return x.createElement(`div`,{className:a},x.createElement(`div`,{className:`react-colorful__alpha-gradient`,style:i}),x.createElement(k,{onMove:function(e){r({a:e.left})},onKey:function(e){r({a:E(n.a+e.left)})},"aria-label":`Alpha`,"aria-valuetext":o+`%`,"aria-valuenow":o,"aria-valuemin":`0`,"aria-valuemax":`100`},x.createElement(j,{className:`react-colorful__alpha-pointer`,left:n.a,color:I(n)})))},K=function(e){var t=e.className,n=e.colorModel,r=e.color,i=r===void 0?n.defaultColor:r,a=e.onChange,o=v(e,[`className`,`colorModel`,`color`,`onChange`]),s=(0,x.useRef)(null);G(s);var c=ie(n,i,a),l=c[0],u=c[1],d=A([`react-colorful`,t]);return x.createElement(`div`,_({},o,{ref:s,className:d}),x.createElement(V,{hsva:l,onChange:u}),x.createElement(B,{hue:l.h,onChange:u}),x.createElement(we,{hsva:l,onChange:u,className:`react-colorful__last-control`}))},Te={defaultColor:`hsla(0, 0%, 0%, 1)`,toHsva:fe,fromHsva:I,equal:U},Ee=function(e){return x.createElement(K,_({},e,{colorModel:Te}))},De={defaultColor:`rgba(0, 0, 0, 1)`,toHsva:he,fromHsva:function(e){var t=L(e);return`rgba(`+t.r+`, `+t.g+`, `+t.b+`, `+t.a+`)`},equal:U},Oe=function(e){return x.createElement(K,_({},e,{colorModel:De}))},ke=l.div({position:`relative`,maxWidth:250}),Ae=l.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:`4px 4px 0 0`},".react-colorful__hue":{boxShadow:`inset 0 0 0 1px rgb(0 0 0 / 5%)`},".react-colorful__last-control":{borderRadius:`0 0 4px 4px`}}),je=l.div({display:`grid`,gridTemplateColumns:`repeat(9, 16px)`,gap:6,padding:3,marginTop:5,width:200}),Me=e=>`url('data:image/svg+xml;charset=utf-8,')`,q=l(p)(({value:e,selected:t,theme:n})=>({width:16,height:16,boxShadow:t?`${n.appBorderColor} 0 0 0 1px inset, ${n.textMutedColor}50 0 0 0 4px`:`${n.appBorderColor} 0 0 0 1px inset`,border:`none`,borderRadius:n.appBorderRadius,"&, &:hover":{background:`unset`,backgroundColor:`unset`,backgroundImage:`linear-gradient(${e}, ${e}), ${Me(n.base===`dark`)}`}})),Ne=l(m.Input)(({theme:e})=>({width:`100%`,paddingLeft:30,paddingRight:30,boxSizing:`border-box`,fontFamily:e.typography.fonts.base,'[aria-readonly="true"] > &':{background:e.base===`light`?e.color.lighter:`transparent`}})),Pe=l(q)(({disabled:e})=>({position:`absolute`,top:4,left:4,zIndex:1,cursor:e?`not-allowed`:`pointer`})),Fe=l(p)(({theme:e})=>({position:`absolute`,zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:`border-box`,cursor:`pointer`,color:e.input.color})),J=(e=>(e.RGB=`rgb`,e.HSL=`hsl`,e.HEX=`hex`,e))(J||{}),Y=Object.values(J),Ie=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,Le=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,Re=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,X=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,ze=/^\s*#?([0-9a-f]{3})\s*$/i,Be={hex:Ce,rgb:Oe,hsl:Ee},Z={hex:`transparent`,rgb:`rgba(0, 0, 0, 0)`,hsl:`hsla(0, 0%, 0%, 0)`},Ve=e=>{let t=e?.match(Ie);if(!t)return[0,0,0,1];let[,n,r,i,a=1]=t;return[n,r,i,a].map(Number)},He=e=>{let[t,n,r,i]=Ve(e),[a,o,s]=C.default.rgb.hsl([t,n,r])||[0,0,0];return{valid:!0,value:e,keyword:C.default.rgb.keyword([t,n,r]),colorSpace:`rgb`,rgb:e,hsl:`hsla(${a}, ${o}%, ${s}%, ${i})`,hex:`#${C.default.rgb.hex([t,n,r]).toLowerCase()}`}},Ue=e=>{let[t,n,r,i]=Ve(e),[a,o,s]=C.default.hsl.rgb([t,n,r])||[0,0,0];return{valid:!0,value:e,keyword:C.default.hsl.keyword([t,n,r]),colorSpace:`hsl`,rgb:`rgba(${a}, ${o}, ${s}, ${i})`,hsl:e,hex:`#${C.default.hsl.hex([t,n,r]).toLowerCase()}`}},We=e=>{let t=e.replace(`#`,``),n=C.default.keyword.rgb(t)||C.default.hex.rgb(t),r=C.default.rgb.hsl(n),i=e;/[^#a-f0-9]/i.test(e)?i=t:X.test(e)&&(i=`#${t}`);let a=!0;if(i.startsWith(`#`))a=X.test(i);else try{C.default.keyword.hex(i)}catch{a=!1}return{valid:a,value:i,keyword:C.default.rgb.keyword(n),colorSpace:`hex`,rgb:`rgba(${n[0]}, ${n[1]}, ${n[2]}, 1)`,hsl:`hsla(${r[0]}, ${r[1]}%, ${r[2]}%, 1)`,hex:i}},Q=e=>{if(e)return Le.test(e)?He(e):Re.test(e)?Ue(e):We(e)},Ge=(e,t,n)=>{if(!e||!t?.valid)return Z[n];if(n!==`hex`)return t?.[n]||Z[n];if(!t.hex.startsWith(`#`))try{return`#${C.default.keyword.hex(t.hex)}`}catch{return Z.hex}let r=t.hex.match(ze);if(!r)return X.test(t.hex)?t.hex:Z.hex;let[i,a,o]=r[1].split(``);return`#${i}${i}${a}${a}${o}${o}`},Ke=(e,t)=>{let[n,r]=(0,b.useState)(e||``),[i,a]=(0,b.useState)(()=>Q(n)),[o,s]=(0,b.useState)(i?.colorSpace||`hex`);return(0,b.useEffect)(()=>{let t=e||``,n=Q(t);r(t),a(n),s(n?.colorSpace||`hex`)},[e]),{value:n,realValue:(0,b.useMemo)(()=>Ge(n,i,o).toLowerCase(),[n,i,o]),updateValue:(0,b.useCallback)(e=>{let n=Q(e),i=n?.value||e||``;r(i),i===``&&(a(void 0),t(void 0)),n&&(a(n),s(n.colorSpace),t(n.value))},[t]),color:i,colorSpace:o,cycleColorSpace:(0,b.useCallback)(()=>{let e=Y[(Y.indexOf(o)+1)%Y.length];s(e);let n=i?.[e]||``;r(n),t(n)},[i,o,t])}},$=e=>e.replace(/\s*/,``).toLowerCase(),qe=(e,t,n)=>{let[r,i]=(0,b.useState)(t?.valid?[t]:[]);(0,b.useEffect)(()=>{t===void 0&&i([])},[t]);let a=(0,b.useMemo)(()=>(e||[]).map(e=>typeof e==`string`?Q(e):e.title?{...Q(e.color),keyword:e.title}:Q(e.color)).concat(r).filter(Boolean).slice(-27),[e,r]);return{presets:a,addPreset:(0,b.useCallback)(e=>{e?.valid&&(a.some(t=>t&&t[n]&&$(t[n]||``)===$(e[n]||``))||i(t=>t.concat(e)))},[n,a])}},Je=({name:e,value:t,onChange:n,onFocus:r,onBlur:i,presetColors:a,startOpen:o=!1,argType:c})=>{let{value:l,realValue:d,updateValue:p,color:m,colorSpace:h,cycleColorSpace:te}=Ke(t,(0,b.useCallback)(ee(n,200),[n])),{presets:g,addPreset:ne}=qe(a??[],m,h),re=Be[h],_=!!c?.table?.readonly,v=s(e);return b.createElement(ke,null,b.createElement(`label`,{htmlFor:v,className:`sb-sr-only`},e),b.createElement(Ne,{id:v,value:l,onChange:e=>p(e.target.value),onFocus:e=>e.target.select(),readOnly:_,placeholder:`Choose color...`}),b.createElement(f,{ariaLabel:`Color picker`,defaultVisible:o,visible:_?!1:void 0,onVisibleChange:()=>m&&ne(m),popover:b.createElement(Ae,null,b.createElement(re,{color:d===`transparent`?`#000000`:d,onChange:p,onFocus:r,onBlur:i}),g.length>0&&b.createElement(je,null,g.map((e,t)=>b.createElement(q,{key:`${e?.value||t}-${t}`,variant:`ghost`,padding:`small`,size:`small`,ariaLabel:`Pick this color`,tooltip:e?.keyword||e?.value||``,value:e?.value||``,selected:!!(m&&e&&e[h]&&$(e[h]||``)===$(m[h])),onClick:()=>e&&p(e.value||``)}))))},b.createElement(Pe,{variant:`ghost`,padding:`small`,size:`small`,ariaLabel:`Open color picker`,value:d,style:{margin:4},disabled:_})),l?b.createElement(Fe,{variant:`ghost`,padding:`small`,size:`small`,ariaLabel:`Cycle through color spaces`,disabled:_,onClick:_?void 0:te},b.createElement(u,null)):null)},Ye=Je}))();export{Je as ColorControl,Ye as default}; \ No newline at end of file diff --git a/storybook/static/assets/Colors.stories-rQ7Q-hFW.js b/storybook/static/assets/Colors.stories-rQ7Q-hFW.js new file mode 100644 index 0000000000..36fc0fff22 --- /dev/null +++ b/storybook/static/assets/Colors.stories-rQ7Q-hFW.js @@ -0,0 +1,124 @@ +import{n as e}from"./chunk-BneVvdWh.js";var t,n,r,i,a,o,s;e((()=>{t={title:`Foundations/Colors`,parameters:{docs:{description:{component:`Semantic color tokens for all 6 plugin themes. Use the tabs to switch between themes. Click any swatch to copy its value.`}}}},n=[{name:`Document`,value:`#446995`,desc:`Document editor toolbar`},{name:`Spreadsheet`,value:`#40865C`,desc:`Spreadsheet editor toolbar`},{name:`Presentation`,value:`#BE664F`,desc:`Presentation editor toolbar`},{name:`Forms`,value:`#AA5252`,desc:`Forms editor toolbar`}],r={Light:{Background:[{name:`Normal`,value:`#FFFFFF`,desc:`Content area, buttons`},{name:`Toolbar`,value:`#F7F7F7`,desc:`Left panel, toolbar`},{name:`Toolbar Additional`,value:`#EFEFEF`,desc:`Inactive tabs`},{name:`Primary Dialog Button`,value:`#444444`,desc:`Dialog buttons, tab underline`},{name:`Loader`,value:`rgba(68, 68, 68, 0.95)`,desc:`Loader overlay`},{name:`Scrim`,value:`rgba(0, 0, 0, 0.20)`,desc:`Modal backdrop`},{name:`Notification Popover`,value:`#FCFED7`,desc:`Notification popups`}],Highlight:[{name:`Button Hover`,value:`#E0E0E0`,desc:`Hover state`},{name:`Button Pressed`,value:`#CBCBCB`,desc:`Pressed state`},{name:`Button Pressed Hover`,value:`#BABABA`,desc:`After press`},{name:`Primary Dialog Button Hover`,value:`#1C1C1C`,desc:`Dialog button hover`}],Border:[{name:`Toolbar`,value:`#CBCBCB`,desc:`Toolbar divider, panel`},{name:`Regular Control`,value:`#C0C0C0`,desc:`Input border`},{name:`Control Focus`,value:`#848484`,desc:`Active input border`},{name:`Error`,value:`#F62211`,desc:`Error input border`}],Text:[{name:`Normal`,value:`rgba(0, 0, 0, 0.80)`,desc:`Primary text`},{name:`Secondary`,value:`rgba(0, 0, 0, 0.60)`,desc:`Secondary text`},{name:`Tertiary`,value:`rgba(0, 0, 0, 0.40)`,desc:`Tertiary text`},{name:`Inverse`,value:`#FFFFFF`,desc:`Text on dark backgrounds`},{name:`Error`,value:`#F62211`,desc:`Error text`}],Icon:[{name:`Normal`,value:`rgba(0, 0, 0, 0.80)`,desc:`Primary icons`},{name:`Inverse`,value:`#FFFFFF`,desc:`Icons on dark backgrounds`},{name:`Tertiary`,value:`rgba(0, 0, 0, 0.50)`,desc:`Secondary icons`}],Scroll:[{name:`Thumb`,value:`#F7F7F7`,desc:`Scrollbar thumb`},{name:`Thumb Hover`,value:`#CBCBCB`,desc:`Scrollbar thumb hover`},{name:`Thumb Pressed`,value:`#ADADAD`,desc:`Scrollbar thumb pressed`},{name:`Thumb Border`,value:`#CBCBCB`,desc:`Scrollbar thumb border`},{name:`Arrow`,value:`#ADADAD`,desc:`Scroll arrow`},{name:`Arrow Hover`,value:`#F7F7F7`,desc:`Scroll arrow hover & pressed`}],"Toolbar Header":n},"Light Classic":{Background:[{name:`Normal`,value:`#FFFFFF`,desc:`Content area, buttons`},{name:`Toolbar`,value:`#F1F1F1`,desc:`Left panel, toolbar`},{name:`Toolbar Additional`,value:`#F1F1F1`,desc:`Inactive tabs`},{name:`Primary Dialog Button`,value:`#7D858C`,desc:`Dialog buttons, tab underline`},{name:`Loader`,value:`rgba(0, 0, 0, 0.65)`,desc:`Loader overlay`},{name:`Scrim`,value:`rgba(0, 0, 0, 0.20)`,desc:`Modal backdrop`},{name:`Notification Popover`,value:`#FCFED7`,desc:`Notification popups`}],Highlight:[{name:`Button Hover`,value:`#D8DADC`,desc:`Hover state`},{name:`Button Pressed`,value:`#7D858C`,desc:`Pressed state`},{name:`Button Pressed Hover`,value:`#7D858C`,desc:`After press`},{name:`Primary Dialog Button Hover`,value:`#666D73`,desc:`Dialog button hover`}],Border:[{name:`Toolbar`,value:`#CBCBCB`,desc:`Toolbar divider, panel`},{name:`Regular Control`,value:`#CFCFCF`,desc:`Input border`},{name:`Control Focus`,value:`#848484`,desc:`Active input border`},{name:`Error`,value:`#D9534F`,desc:`Error input border`}],Text:[{name:`Normal`,value:`#444444`,desc:`Primary text`},{name:`Secondary`,value:`#A5A5A5`,desc:`Secondary text`},{name:`Tertiary`,value:`#A5A5A5`,desc:`Tertiary text`},{name:`Inverse`,value:`#FFFFFF`,desc:`Text on dark backgrounds`},{name:`Error`,value:`#D9534F`,desc:`Error text`}],Icon:[{name:`Normal`,value:`#444444`,desc:`Primary icons`},{name:`Inverse`,value:`#FFFFFF`,desc:`Icons on dark backgrounds`},{name:`Tertiary`,value:`#A5A5A5`,desc:`Secondary icons`}],Scroll:[{name:`Thumb`,value:`#F1F1F1`,desc:`Scrollbar thumb`},{name:`Thumb Hover`,value:`#CFCFCF`,desc:`Scrollbar thumb hover`},{name:`Thumb Pressed`,value:`#ADADAD`,desc:`Scrollbar thumb pressed`},{name:`Thumb Border`,value:`#CFCFCF`,desc:`Scrollbar thumb border`},{name:`Arrow`,value:`#ADADAD`,desc:`Scroll arrow`},{name:`Arrow Hover`,value:`#F1F1F1`,desc:`Scroll arrow hover & pressed`}],"Toolbar Header":n},"Modern Light":{Background:[{name:`Normal`,value:`#FFFFFF`,desc:`Content area, buttons`},{name:`Toolbar`,value:`#FFFFFF`,desc:`Left panel, toolbar`},{name:`Toolbar Additional`,value:`#F3F3F3`,desc:`Inactive tabs`},{name:`Primary Dialog Button`,value:`#4473CA`,desc:`Dialog buttons, tab underline`},{name:`Loader`,value:`rgba(56, 56, 56, 0.95)`,desc:`Loader overlay`},{name:`Scrim`,value:`rgba(0, 0, 0, 0.20)`,desc:`Modal backdrop`},{name:`Notification Popover`,value:`#FCFED7`,desc:`Notification popups`}],Highlight:[{name:`Button Hover`,value:`#F9F9F9`,desc:`Hover state`},{name:`Button Pressed`,value:`#EAEAEA`,desc:`Pressed state`},{name:`Button Pressed Hover`,value:`#DCE7FA`,desc:`After press`},{name:`Primary Dialog Button Hover`,value:`#2A5BB9`,desc:`Dialog button hover`}],Border:[{name:`Toolbar`,value:`#E1E1E1`,desc:`Toolbar divider, panel`},{name:`Regular Control`,value:`#E1E1E1`,desc:`Input border`},{name:`Control Focus`,value:`#4473CA`,desc:`Active input border`},{name:`Error`,value:`#F62211`,desc:`Error input border`}],Text:[{name:`Normal`,value:`#383838`,desc:`Primary text`},{name:`Secondary`,value:`rgba(56, 56, 56, 0.60)`,desc:`Secondary text`},{name:`Tertiary`,value:`rgba(56, 56, 56, 0.40)`,desc:`Tertiary text`},{name:`Inverse`,value:`#FFFFFF`,desc:`Text on dark backgrounds`},{name:`Error`,value:`#F62211`,desc:`Error text`}],Icon:[{name:`Normal`,value:`#383838`,desc:`Primary icons`},{name:`Inverse`,value:`#FFFFFF`,desc:`Icons on dark backgrounds`},{name:`Tertiary`,value:`rgba(56, 56, 56, 0.50)`,desc:`Secondary icons`}],Scroll:[{name:`Thumb`,value:`#F3F3F3`,desc:`Scrollbar thumb`},{name:`Thumb Hover`,value:`#E1E1E1`,desc:`Scrollbar thumb hover`},{name:`Thumb Pressed`,value:`#C8C8C8`,desc:`Scrollbar thumb pressed`},{name:`Thumb Border`,value:`#E1E1E1`,desc:`Scrollbar thumb border`},{name:`Arrow`,value:`#C8C8C8`,desc:`Scroll arrow`},{name:`Arrow Hover`,value:`#F3F3F3`,desc:`Scroll arrow hover & pressed`}],"Toolbar Header":n},"Modern Dark":{Background:[{name:`Normal`,value:`#404040`,desc:`Content area, buttons`},{name:`Toolbar`,value:`#404040`,desc:`Left panel, toolbar`},{name:`Toolbar Additional`,value:`#303030`,desc:`Inactive tabs`},{name:`Primary Dialog Button`,value:`#4A7BE0`,desc:`Dialog buttons, tab underline`},{name:`Loader`,value:`rgba(64, 64, 64, 0.95)`,desc:`Loader overlay`},{name:`Scrim`,value:`rgba(0, 0, 0, 0.40)`,desc:`Modal backdrop`},{name:`Notification Popover`,value:`#3A3A3A`,desc:`Notification popups`}],Highlight:[{name:`Button Hover`,value:`#585858`,desc:`Hover state`},{name:`Button Pressed`,value:`#686868`,desc:`Pressed state`},{name:`Button Pressed Hover`,value:`#375478`,desc:`After press`},{name:`Primary Dialog Button Hover`,value:`#366CDA`,desc:`Dialog button hover`}],Border:[{name:`Toolbar`,value:`#686868`,desc:`Toolbar divider, panel`},{name:`Regular Control`,value:`#686868`,desc:`Input border`},{name:`Control Focus`,value:`#4A7BE0`,desc:`Active input border`},{name:`Error`,value:`#FF6B6B`,desc:`Error input border`}],Text:[{name:`Normal`,value:`#F3F3F3`,desc:`Primary text`},{name:`Secondary`,value:`rgba(243, 243, 243, 0.70)`,desc:`Secondary text`},{name:`Tertiary`,value:`rgba(243, 243, 243, 0.50)`,desc:`Tertiary text`},{name:`Inverse`,value:`#404040`,desc:`Text on light backgrounds`},{name:`Error`,value:`#FF6B6B`,desc:`Error text`}],Icon:[{name:`Normal`,value:`#F3F3F3`,desc:`Primary icons`},{name:`Inverse`,value:`#404040`,desc:`Icons on light backgrounds`},{name:`Tertiary`,value:`rgba(243, 243, 243, 0.50)`,desc:`Secondary icons`}],Scroll:[{name:`Thumb`,value:`#585858`,desc:`Scrollbar thumb`},{name:`Thumb Hover`,value:`#686868`,desc:`Scrollbar thumb hover`},{name:`Thumb Pressed`,value:`#787878`,desc:`Scrollbar thumb pressed`},{name:`Thumb Border`,value:`#686868`,desc:`Scrollbar thumb border`},{name:`Arrow`,value:`#686868`,desc:`Scroll arrow`},{name:`Arrow Hover`,value:`#585858`,desc:`Scroll arrow hover & pressed`}],"Toolbar Header":n},Dark:{Background:[{name:`Normal`,value:`#333333`,desc:`Content area, buttons`},{name:`Toolbar`,value:`#333333`,desc:`Left panel, toolbar`},{name:`Toolbar Additional`,value:`#2A2A2A`,desc:`Inactive tabs`},{name:`Primary Dialog Button`,value:`#DDDDDD`,desc:`Dialog buttons, tab underline`},{name:`Loader`,value:`rgba(51, 51, 51, 0.95)`,desc:`Loader overlay`},{name:`Scrim`,value:`rgba(0, 0, 0, 0.40)`,desc:`Modal backdrop`},{name:`Notification Popover`,value:`#2F2F2F`,desc:`Notification popups`}],Highlight:[{name:`Button Hover`,value:`#555555`,desc:`Hover state`},{name:`Button Pressed`,value:`#666666`,desc:`Pressed state`},{name:`Button Pressed Hover`,value:`#606060`,desc:`After press`},{name:`Primary Dialog Button Hover`,value:`#FCFCFC`,desc:`Dialog button hover`}],Border:[{name:`Toolbar`,value:`#666666`,desc:`Toolbar divider, panel`},{name:`Regular Control`,value:`#666666`,desc:`Input border`},{name:`Control Focus`,value:`#AAAAAA`,desc:`Active input border`},{name:`Error`,value:`#FF6B6B`,desc:`Error input border`}],Text:[{name:`Normal`,value:`rgba(255, 255, 255, 0.80)`,desc:`Primary text`},{name:`Secondary`,value:`rgba(255, 255, 255, 0.60)`,desc:`Secondary text`},{name:`Tertiary`,value:`rgba(255, 255, 255, 0.40)`,desc:`Tertiary text`},{name:`Inverse`,value:`#333333`,desc:`Text on light backgrounds`},{name:`Error`,value:`#FF6B6B`,desc:`Error text`}],Icon:[{name:`Normal`,value:`rgba(255, 255, 255, 0.80)`,desc:`Primary icons`},{name:`Inverse`,value:`#333333`,desc:`Icons on light backgrounds`},{name:`Tertiary`,value:`rgba(255, 255, 255, 0.50)`,desc:`Secondary icons`}],Scroll:[{name:`Thumb`,value:`#333333`,desc:`Scrollbar thumb`},{name:`Thumb Hover`,value:`#555555`,desc:`Scrollbar thumb hover`},{name:`Thumb Pressed`,value:`#666666`,desc:`Scrollbar thumb pressed`},{name:`Thumb Border`,value:`#666666`,desc:`Scrollbar thumb border`},{name:`Arrow`,value:`#ADADAD`,desc:`Scroll arrow`},{name:`Arrow Hover`,value:`#333333`,desc:`Scroll arrow hover & pressed`}],"Toolbar Header":n},"Dark Contrast":{Background:[{name:`Normal`,value:`#1E1E1E`,desc:`Content area, buttons`},{name:`Toolbar`,value:`#1E1E1E`,desc:`Left panel, toolbar`},{name:`Toolbar Additional`,value:`#141414`,desc:`Inactive tabs`},{name:`Primary Dialog Button`,value:`#E6E6E6`,desc:`Dialog buttons, tab underline`},{name:`Loader`,value:`rgba(30, 30, 30, 0.95)`,desc:`Loader overlay`},{name:`Scrim`,value:`rgba(0, 0, 0, 0.50)`,desc:`Modal backdrop`},{name:`Notification Popover`,value:`#1A1A1A`,desc:`Notification popups`}],Highlight:[{name:`Button Hover`,value:`#424242`,desc:`Hover state`},{name:`Button Pressed`,value:`#666666`,desc:`Pressed state`},{name:`Button Pressed Hover`,value:`#555555`,desc:`After press`},{name:`Primary Dialog Button Hover`,value:`#A6A6A6`,desc:`Dialog button hover`}],Border:[{name:`Toolbar`,value:`#696969`,desc:`Toolbar divider, panel`},{name:`Regular Control`,value:`#696969`,desc:`Input border`},{name:`Control Focus`,value:`#B8B8B8`,desc:`Active input border`},{name:`Error`,value:`#FF6B6B`,desc:`Error input border`}],Text:[{name:`Normal`,value:`#E8E8E8`,desc:`Primary text`},{name:`Secondary`,value:`#B8B8B8`,desc:`Secondary text`},{name:`Tertiary`,value:`rgba(232, 232, 232, 0.50)`,desc:`Tertiary text`},{name:`Inverse`,value:`#1E1E1E`,desc:`Text on light backgrounds`},{name:`Error`,value:`#FF6B6B`,desc:`Error text`}],Icon:[{name:`Normal`,value:`#E8E8E8`,desc:`Primary icons`},{name:`Inverse`,value:`#1E1E1E`,desc:`Icons on light backgrounds`},{name:`Tertiary`,value:`#B8B8B8`,desc:`Secondary icons`}],Scroll:[{name:`Thumb`,value:`#1E1E1E`,desc:`Scrollbar thumb`},{name:`Thumb Hover`,value:`#424242`,desc:`Scrollbar thumb hover`},{name:`Thumb Pressed`,value:`#666666`,desc:`Scrollbar thumb pressed`},{name:`Thumb Border`,value:`#696969`,desc:`Scrollbar thumb border`},{name:`Arrow`,value:`#B8B8B8`,desc:`Scroll arrow`},{name:`Arrow Hover`,value:`#1E1E1E`,desc:`Scroll arrow hover & pressed`}],"Toolbar Header":n}},i=Object.keys(r),a=[`Background`,`Highlight`,`Border`,`Text`,`Icon`,`Scroll`,`Toolbar Header`],o={name:`Palette`,render:(e,t)=>{let n=t.globals.theme||`Light`,o=i.includes(n)?n:`Light`,s=document.createElement(`div`);s.style.fontFamily=`Arial, sans-serif`;let c=document.createElement(`div`);c.style.cssText=[`display:flex`,`flex-wrap:wrap`,`gap:0`,`margin-bottom:28px`,`border-bottom:2px solid var(--page-border)`].join(`;`),i.forEach(e=>{let t=document.createElement(`button`);t.type=`button`,t.textContent=e,t.dataset.tab=e;let n=e===o;t.style.cssText=[`padding:8px 18px`,`border:none`,`outline:none`,`background:transparent`,`cursor:pointer`,`color:${n?`var(--page-fg)`:`var(--page-muted)`}`,`font-size:13px`,`font-weight:${n?700:400}`,`margin-bottom:-2px`,`border-bottom:${n?`2px solid var(--page-fg)`:`2px solid transparent`}`].join(`;`),c.appendChild(t)}),s.appendChild(c);let l={};return i.forEach(e=>{let t=r[e],n=document.createElement(`div`);n.dataset.panel=e,e!==o&&(n.hidden=!0),a.forEach(e=>{let r=t[e];if(!r?.length)return;let i=document.createElement(`div`);i.style.marginBottom=`32px`;let a=document.createElement(`div`);a.textContent=e,a.style.cssText=[`font-size:11px`,`font-weight:700`,`letter-spacing:0.8px`,`text-transform:uppercase`,`color:var(--page-muted)`,`margin-bottom:12px`,`padding-bottom:8px`,`border-bottom:1px solid var(--page-border)`].join(`;`),i.appendChild(a);let o=document.createElement(`div`);o.style.cssText=`display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:8px;`,r.forEach(e=>{let t=document.createElement(`div`);t.style.cssText=[`border:1px solid var(--page-border)`,`border-radius:8px`,`overflow:hidden`,`cursor:pointer`,`transition:box-shadow 0.12s,transform 0.12s`].join(`;`),t.title=`Click to copy ${e.value}`;let n=document.createElement(`div`);n.style.cssText=[`background:${e.value}`,`height:56px`,`border-bottom:1px solid rgba(128,128,128,0.15)`].join(`;`),t.appendChild(n);let r=document.createElement(`div`);r.style.cssText=`padding:8px 10px;background:var(--page-bg);`,r.innerHTML=` +
${e.name}
+
${e.desc}
+
${e.value}
+ `,t.appendChild(r),t.addEventListener(`mouseenter`,()=>{t.style.boxShadow=`0 4px 12px rgba(0,0,0,0.12)`,t.style.transform=`translateY(-1px)`}),t.addEventListener(`mouseleave`,()=>{t.style.boxShadow=``,t.style.transform=``}),t.addEventListener(`click`,()=>{navigator.clipboard?.writeText(e.value).catch(()=>{});let t=r.querySelector(`.t-name`),n=t.textContent;t.style.color=`var(--page-accent)`,t.textContent=`Copied!`,setTimeout(()=>{t.style.color=``,t.textContent=n},1200)}),o.appendChild(t)}),i.appendChild(o),n.appendChild(i)}),l[e]=n,s.appendChild(n)}),c.addEventListener(`click`,e=>{let t=e.target.closest(`button[data-tab]`);if(!t)return;let n=t.dataset.tab;c.querySelectorAll(`button[data-tab]`).forEach(e=>{let t=e.dataset.tab===n;e.style.color=t?`var(--page-fg)`:`var(--page-muted)`,e.style.fontWeight=t?`700`:`400`,e.style.borderBottom=t?`2px solid var(--page-fg)`:`2px solid transparent`}),Object.entries(l).forEach(([e,t])=>{t.hidden=e!==n})}),s},parameters:{docs:{description:{story:`All semantic color tokens grouped by category. Use the tabs to switch between themes — the active tab defaults to the current toolbar theme.`}}}},o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{ + name: 'Palette', + render: (args, context) => { + const globalTheme = context.globals.theme || 'Light'; + const initialTab = themeNames.includes(globalTheme) ? globalTheme : 'Light'; + const root = document.createElement('div'); + root.style.fontFamily = 'Arial, sans-serif'; + + // ── Tab bar ────────────────────────────────────────────────────────────── + const tabBar = document.createElement('div'); + tabBar.style.cssText = ['display:flex', 'flex-wrap:wrap', 'gap:0', 'margin-bottom:28px', 'border-bottom:2px solid var(--page-border)'].join(';'); + themeNames.forEach(name => { + const btn = document.createElement('button'); + btn.type = 'button'; + btn.textContent = name; + btn.dataset.tab = name; + const active = name === initialTab; + btn.style.cssText = ['padding:8px 18px', 'border:none', 'outline:none', 'background:transparent', 'cursor:pointer', \`color:\${active ? 'var(--page-fg)' : 'var(--page-muted)'}\`, 'font-size:13px', \`font-weight:\${active ? 700 : 400}\`, 'margin-bottom:-2px', \`border-bottom:\${active ? '2px solid var(--page-fg)' : '2px solid transparent'}\`].join(';'); + tabBar.appendChild(btn); + }); + root.appendChild(tabBar); + + // ── Panels ──────────────────────────────────────────────────────────────── + const panels = {}; + themeNames.forEach(themeName => { + const theme = colorPalette[themeName]; + const panel = document.createElement('div'); + panel.dataset.panel = themeName; + if (themeName !== initialTab) panel.hidden = true; + groupNames.forEach(groupName => { + const tokens = theme[groupName]; + if (!tokens?.length) return; + + // Section header + const section = document.createElement('div'); + section.style.marginBottom = '32px'; + const heading = document.createElement('div'); + heading.textContent = groupName; + heading.style.cssText = ['font-size:11px', 'font-weight:700', 'letter-spacing:0.8px', 'text-transform:uppercase', 'color:var(--page-muted)', 'margin-bottom:12px', 'padding-bottom:8px', 'border-bottom:1px solid var(--page-border)'].join(';'); + section.appendChild(heading); + + // Card grid + const grid = document.createElement('div'); + grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:8px;'; + tokens.forEach(token => { + const card = document.createElement('div'); + card.style.cssText = ['border:1px solid var(--page-border)', 'border-radius:8px', 'overflow:hidden', 'cursor:pointer', 'transition:box-shadow 0.12s,transform 0.12s'].join(';'); + card.title = \`Click to copy \${token.value}\`; + + // Swatch + const swatch = document.createElement('div'); + swatch.style.cssText = [\`background:\${token.value}\`, 'height:56px', 'border-bottom:1px solid rgba(128,128,128,0.15)'].join(';'); + card.appendChild(swatch); + + // Info + const info = document.createElement('div'); + info.style.cssText = 'padding:8px 10px;background:var(--page-bg);'; + info.innerHTML = \` +
\${token.name}
+
\${token.desc}
+
\${token.value}
+ \`; + card.appendChild(info); + + // Hover + card.addEventListener('mouseenter', () => { + card.style.boxShadow = '0 4px 12px rgba(0,0,0,0.12)'; + card.style.transform = 'translateY(-1px)'; + }); + card.addEventListener('mouseleave', () => { + card.style.boxShadow = ''; + card.style.transform = ''; + }); + + // Click → copy + card.addEventListener('click', () => { + navigator.clipboard?.writeText(token.value).catch(() => {}); + const nameEl = info.querySelector('.t-name'); + const orig = nameEl.textContent; + nameEl.style.color = 'var(--page-accent)'; + nameEl.textContent = 'Copied!'; + setTimeout(() => { + nameEl.style.color = ''; + nameEl.textContent = orig; + }, 1200); + }); + grid.appendChild(card); + }); + section.appendChild(grid); + panel.appendChild(section); + }); + panels[themeName] = panel; + root.appendChild(panel); + }); + + // ── Tab switching ───────────────────────────────────────────────────────── + tabBar.addEventListener('click', e => { + const btn = e.target.closest('button[data-tab]'); + if (!btn) return; + const selected = btn.dataset.tab; + tabBar.querySelectorAll('button[data-tab]').forEach(b => { + const active = b.dataset.tab === selected; + b.style.color = active ? 'var(--page-fg)' : 'var(--page-muted)'; + b.style.fontWeight = active ? '700' : '400'; + b.style.borderBottom = active ? '2px solid var(--page-fg)' : '2px solid transparent'; + }); + Object.entries(panels).forEach(([name, panel]) => { + panel.hidden = name !== selected; + }); + }); + return root; + }, + parameters: { + docs: { + description: { + story: 'All semantic color tokens grouped by category. Use the tabs to switch between themes — the active tab defaults to the current toolbar theme.' + } + } + } +}`,...o.parameters?.docs?.source}}},s=[`Palette`]}))();export{o as Palette,s as __namedExportsOrder,t as default}; \ No newline at end of file diff --git a/storybook/static/assets/ContextMenu.stories-C550WoUl.js b/storybook/static/assets/ContextMenu.stories-C550WoUl.js new file mode 100644 index 0000000000..3e7e70c77a --- /dev/null +++ b/storybook/static/assets/ContextMenu.stories-C550WoUl.js @@ -0,0 +1,126 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r,t as i}from"./theme-utils-B-KYefhh.js";function a({items:e=l,theme:t,isHoveredIndex:n=-1,isClickedIndex:r=-1,defaultOpenId:u}={}){let d=i(t),f=d.isModern,p=c[d.theme]??d.surfaceAlt,m=f?12:11,h=e.map((e,i)=>{let c=!!(e.items&&e.items.length>0),l=u===e.id,h=n===i||l,g=r===i,_=e.disabled?d.muted:d.fg,v=e.disabled?`transparent`:g?p:h?d.surfaceAlt:`transparent`,y=e.type===`iconsBoth`||c,b=e.type===`noIcon`?`5px 20px`:`3px 10px`,x=c&&l?`
${a({items:e.items,theme:t})}
`:``;return`
+ + ${x} +
`}).join(``);return`
${h}
`}var o,s,c,l,u=e((()=>{r(),o=e=>``,s=e=>``,c={Light:`#CBCBCB`,"Light Classic":`#7D858C`,Dark:`#666666`,"Dark Contrast":`#666666`,"Modern Light":`#DCE7FA`,"Modern Dark":`#375478`},l=[{id:`1`,label:`Menu item`,type:`iconLeft`},{id:`2`,label:`Menu item`,type:`iconsBoth`},{id:`3`,label:`Menu item`,type:`noIcon`},{id:`4`,label:`Menu item`,type:`iconLeft`,disabled:!0}]}));function d({items:e,theme:t}){let n=document.createElement(`div`);n.style.display=`contents`;let r=-1,i=null,o=()=>{n.innerHTML=a({items:e,theme:t,isHoveredIndex:r,isClickedIndex:-1,defaultOpenId:i});let s=n.querySelector(`div[style*="min-width:180px"]`);s&&Array.from(s.children).forEach((t,n)=>{let a=e[n];if(!(!a||a.disabled))if(a.items&&a.items.length>0)t.addEventListener(`mouseenter`,()=>{r=n,i=a.id,o()}),t.addEventListener(`mouseleave`,()=>{r=-1,i=null,o()});else{let e=t.querySelector(`button`);if(!e)return;e.addEventListener(`mouseenter`,()=>{r=n,i=null,o()}),e.addEventListener(`mouseleave`,()=>{r=-1,o()})}})};return o(),n}var f,p,m,h,g,_,v,y,b,x,S,C,w,T,E;e((()=>{u(),r(),f=n,p=[{id:`1`,label:`Menu item`,type:`iconLeft`},{id:`2`,label:`Menu item`,type:`iconsBoth`},{id:`3`,label:`Menu item`,type:`noIcon`},{id:`4`,label:`Disabled item`,type:`iconLeft`,disabled:!0}],m=[{id:`1`,label:`Menu item`,type:`iconLeft`},{id:`2`,label:`Another item`,type:`iconLeft`},{id:`3`,label:`Disabled item`,type:`iconLeft`,disabled:!0}],h=[{id:`1`,label:`Menu item`,type:`iconsBoth`},{id:`2`,label:`Submenu item`,type:`iconsBoth`},{id:`3`,label:`Disabled item`,type:`iconsBoth`,disabled:!0}],g=[{id:`1`,label:`Menu item`,type:`noIcon`},{id:`2`,label:`Another item`,type:`noIcon`},{id:`3`,label:`Disabled item`,type:`noIcon`,disabled:!0}],_=[{id:`1`,label:`Menu item`,type:`iconLeft`},{id:`2`,label:`Has submenu`,type:`iconLeft`,items:[{id:`2-1`,label:`Submenu item 1`,type:`iconLeft`},{id:`2-2`,label:`Submenu item 2`,type:`iconLeft`},{id:`2-3`,label:`Disabled`,type:`iconLeft`,disabled:!0}]},{id:`3`,label:`Menu item`,type:`noIcon`},{id:`4`,label:`Disabled item`,type:`iconLeft`,disabled:!0}],v={title:`Components/Actions/Context Menu`,tags:[`autodocs`],args:{items:p,interactive:!0,isHoveredIndex:void 0,isClickedIndex:void 0,themeMode:`Auto`},argTypes:{items:{control:`object`,description:`Menu items`},interactive:{control:`boolean`,description:`Enable real hover/press in canvas`},isHoveredIndex:{control:{type:`number`,min:0},description:`Force-hover item by index (0-based) for docs preview`},isClickedIndex:{control:{type:`number`,min:0},description:`Force-pressed item by index (0-based) for docs preview`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...f],description:`Auto = current Storybook toolbar theme`,table:{defaultValue:{summary:`Auto`}}},theme:{table:{disable:!0}}},parameters:{docs:{description:{component:`Context menu for compact action lists. Includes plain items, left-icon items, submenu-style dual-icon items, and disabled rows.`}}}},y={args:{items:_,interactive:!0},render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return d({items:e.items,theme:r})}},b={args:{items:m},render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return d({items:e.items,theme:r})},parameters:{docs:{description:{story:`Context menu with icon-left items only.`}}}},x={args:{items:h},render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return d({items:e.items,theme:r})}},S={args:{items:g},render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return d({items:e.items,theme:r})}},C={args:{items:p,isHoveredIndex:0,interactive:!1},render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return a({items:e.items,theme:r,isHoveredIndex:e.isHoveredIndex??0,isClickedIndex:-1})},parameters:{docs:{description:{story:`Force-hover on the first item. Switch theme via toolbar to preview all themes.`}}}},w={args:{items:p,isClickedIndex:0,interactive:!1},render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return a({items:e.items,theme:r,isHoveredIndex:-1,isClickedIndex:e.isClickedIndex??0})},parameters:{docs:{description:{story:`Force-pressed on the first item. Switch theme via toolbar to preview all themes.`}}}},T={args:{items:_,interactive:!1},render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return a({items:e.items,theme:r,defaultOpenId:`2`,isHoveredIndex:-1,isClickedIndex:-1})},parameters:{docs:{description:{story:`Submenu expanded on «Has submenu» item. Switch theme in toolbar to preview across themes.`}}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{ + args: { + items: submenuItems, + interactive: true + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveMenu({ + items: args.items, + theme + }); + } +}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{ + args: { + items: iconLeftItems + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveMenu({ + items: args.items, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Context menu with icon-left items only.' + } + } + } +}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{ + args: { + items: iconsBothItems + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveMenu({ + items: args.items, + theme + }); + } +}`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{ + args: { + items: noIconItems + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveMenu({ + items: args.items, + theme + }); + } +}`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{ + args: { + items: mixedItems, + isHoveredIndex: 0, + interactive: false + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return ContextMenu({ + items: args.items, + theme, + isHoveredIndex: args.isHoveredIndex ?? 0, + isClickedIndex: -1 + }); + }, + parameters: { + docs: { + description: { + story: 'Force-hover on the first item. Switch theme via toolbar to preview all themes.' + } + } + } +}`,...C.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{ + args: { + items: mixedItems, + isClickedIndex: 0, + interactive: false + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return ContextMenu({ + items: args.items, + theme, + isHoveredIndex: -1, + isClickedIndex: args.isClickedIndex ?? 0 + }); + }, + parameters: { + docs: { + description: { + story: 'Force-pressed on the first item. Switch theme via toolbar to preview all themes.' + } + } + } +}`,...w.parameters?.docs?.source}}},T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{ + args: { + items: submenuItems, + interactive: false + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return ContextMenu({ + items: args.items, + theme, + defaultOpenId: '2', + isHoveredIndex: -1, + isClickedIndex: -1 + }); + }, + parameters: { + docs: { + description: { + story: 'Submenu expanded on «Has submenu» item. Switch theme in toolbar to preview across themes.' + } + } + } +}`,...T.parameters?.docs?.source}}},E=[`Default`,`IconLeftItems`,`IconsBothItems`,`NoIconItems`,`HoveredItem`,`PressedItem`,`WithSubmenu`]}))();export{y as Default,C as HoveredItem,b as IconLeftItems,x as IconsBothItems,S as NoIconItems,w as PressedItem,T as WithSubmenu,E as __namedExportsOrder,v as default}; \ No newline at end of file diff --git a/storybook/static/assets/DialogButtonsPrimary.stories-UfH9kkhS.js b/storybook/static/assets/DialogButtonsPrimary.stories-UfH9kkhS.js new file mode 100644 index 0000000000..f43cdd04fb --- /dev/null +++ b/storybook/static/assets/DialogButtonsPrimary.stories-UfH9kkhS.js @@ -0,0 +1,141 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r,r as i}from"./theme-utils-B-KYefhh.js";function a({label:e=`Button`,size:t=24,state:n=`default`,scale:r=!1,theme:i=`Light`}){let a=c,o=(a[i]??a.Light)[n]??(a[i]??a.Light).default,s=n===`loader`,u=n===`disabled`,d=s||u?`not-allowed`:`pointer`,f=r?`100%`:`auto`,p=i.startsWith(`Modern`),m=p?4:1,h=p?12:11,g=p?.24:.22,_=[`height:${t}px`,`min-width:${p?48:80}px`,`padding:0 ${p?12:32}px`,`background:${o.bg}`,`border:none`,`border-radius:${m}px`,`outline:${o.outline}`,`outline-offset:-1px`,`display:inline-flex`,`align-items:center`,`justify-content:center`,`box-sizing:border-box`,`cursor:${d}`,`width:${f}`].join(`;`),v=[`color:${o.text}`,`font-size:${h}px`,`font-family:Arial,Helvetica,sans-serif`,`font-weight:700`,`line-height:16px`,`letter-spacing:${g}px`,`white-space:nowrap`,`user-select:none`].join(`;`),y=s?``:`${e}`;return``}function o(e,t=!1){return`
${e}
`}var s,c,l,u,d,f,p,m,h,g,_;e((()=>{r(),s=n,c={Light:{default:{bg:`#444444`,text:`#FFFFFF`,outline:`none`},hover:{bg:`#1C1C1C`,text:`#FFFFFF`,outline:`none`},pressed:{bg:`#1C1C1C`,text:`#FFFFFF`,outline:`none`},disabled:{bg:`rgba(0,0,0,0.50)`,text:`rgba(255,255,255,0.60)`,outline:`none`},loader:{bg:`rgba(0,0,0,0.50)`,text:`#FFFFFF`,outline:`none`}},"Light Classic":{default:{bg:`#7D858C`,text:`#FFFFFF`,outline:`none`},hover:{bg:`#666D73`,text:`#FFFFFF`,outline:`none`},pressed:{bg:`#666D73`,text:`#FFFFFF`,outline:`none`},disabled:{bg:`#A5A5A5`,text:`rgba(255,255,255,0.60)`,outline:`none`},loader:{bg:`#A5A5A5`,text:`#FFFFFF`,outline:`none`}},Dark:{default:{bg:`#DDDDDD`,text:`#333333`,outline:`none`},hover:{bg:`#FCFCFC`,text:`#333333`,outline:`none`},pressed:{bg:`#FCFCFC`,text:`#333333`,outline:`none`},disabled:{bg:`rgba(255,255,255,0.50)`,text:`rgba(51,51,51,0.60)`,outline:`none`},loader:{bg:`rgba(255,255,255,0.50)`,text:`#333333`,outline:`none`}},"Dark Contrast":{default:{bg:`#E6E6E6`,text:`#121212`,outline:`none`},hover:{bg:`#A6A6A6`,text:`#121212`,outline:`none`},pressed:{bg:`#A6A6A6`,text:`#121212`,outline:`none`},disabled:{bg:`#888888`,text:`rgba(18,18,18,0.60)`,outline:`none`},loader:{bg:`#888888`,text:`#121212`,outline:`none`}},"Modern Light":{default:{bg:`#4473CA`,text:`#FFFFFF`,outline:`none`},hover:{bg:`#2A5BB9`,text:`#FFFFFF`,outline:`none`},pressed:{bg:`#1D4FAF`,text:`#FFFFFF`,outline:`1px solid #2A5BB9`},disabled:{bg:`#BFD0F5`,text:`rgba(255,255,255,0.70)`,outline:`none`},loader:{bg:`#BFD0F5`,text:`#FFFFFF`,outline:`none`}},"Modern Dark":{default:{bg:`#4A7BE0`,text:`#E8E8E8`,outline:`none`},hover:{bg:`#366CDA`,text:`#E8E8E8`,outline:`none`},pressed:{bg:`#2A5BB9`,text:`#E8E8E8`,outline:`1px solid #4A7BE0`},disabled:{bg:`#375478`,text:`rgba(232,232,232,0.30)`,outline:`none`},loader:{bg:`#375478`,text:`#E8E8E8`,outline:`none`}}},l=e=>``,u={title:`Components/Buttons/Dialog Buttons/Primary`,tags:[`autodocs`],args:{label:`Button`,size:24,interactive:!0,isHovered:!1,isClicked:!1,isDisabled:!1,isLoading:!1,themeMode:`Auto`},argTypes:{label:{control:`text`,description:`Visible action label`},size:{control:`select`,options:[22,24],description:`Compact or regular dialog button height`,table:{defaultValue:{summary:`24`}}},interactive:{control:`boolean`,description:`Allow the story to react to hover and click in the canvas`,table:{defaultValue:{summary:`true`}}},isHovered:{control:`boolean`,description:`Force hover appearance for visual review`},isClicked:{control:`boolean`,description:`Force pressed appearance for visual review`},isDisabled:{control:`boolean`,description:`Show the disabled state`},isLoading:{control:`boolean`,description:`Replace the label with the loading indicator`},minWidth:{control:`text`,description:`Override minimum button width (e.g. "120px")`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...s],description:`Auto = current Storybook toolbar theme`,table:{defaultValue:{summary:`Auto`}}},theme:{table:{disable:!0}},variant:{table:{disable:!0}},scale:{table:{disable:!0}},state:{table:{disable:!0}}},parameters:{docs:{description:{component:`Primary dialog action button for the main confirm action in modal footers and compact plugin flows.`}}}},d={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),o=e.isDisabled?`disabled`:e.isLoading?`loader`:`default`;return i(t=>a({label:e.label,variant:`primary`,size:e.size,state:o===`default`?t:o,theme:r}),{disabled:o!==`default`})}},f={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return o(a({label:`Button`,size:22,state:`hover`,theme:r})+a({label:`Button`,size:24,state:`hover`,theme:r}))},parameters:{docs:{description:{story:`Hover state for both sizes. Move the pointer over the buttons in the canvas for the live effect.`}}}},p={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=e=>{let t=document.createElement(`div`);t.style.display=`inline-block`;let n=null,i=n=>{t.innerHTML=a({label:`Button`,size:e,state:n,theme:r})};return t.addEventListener(`mousedown`,()=>{i(`pressed`),clearTimeout(n),n=setTimeout(()=>i(`default`),180)}),i(`default`),t},o=document.createElement(`div`);return o.style.cssText=`display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:16px;align-items:center;`,o.appendChild(i(22)),o.appendChild(i(24)),o},parameters:{docs:{description:{story:`Pressed-state demo. Click a button to preview the active press moment.`}}}},m={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return o(a({label:`Button`,size:22,state:`disabled`,theme:r})+a({label:`Button`,size:24,state:`disabled`,theme:r}))},parameters:{docs:{description:{story:`Disabled buttons keep layout but should not invite interaction.`}}}},h={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return``+o(a({label:`Button`,size:22,state:`loader`,theme:r})+a({label:`Button`,size:24,state:`loader`,theme:r}))},parameters:{docs:{description:{story:`Loading state while the action is in progress.`}}}},g={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return o(a({label:`Button`,size:22,state:`default`,scale:!0,theme:r})+a({label:`Button`,size:24,state:`default`,scale:!0,theme:r}),!0)},parameters:{docs:{description:{story:`Full-width layout variant for dense footers or narrow dialog flows.`}}}},d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const state = args.isDisabled ? 'disabled' : args.isLoading ? 'loader' : 'default'; + return makeInteractive(hoverState => renderDialogButton({ + label: args.label, + variant: 'primary', + size: args.size, + state: state !== 'default' ? state : hoverState, + theme + }), { + disabled: state !== 'default' + }); + } +}`,...d.parameters?.docs?.source}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Wrapper(renderDialogButton({ + label: 'Button', + size: 22, + state: 'hover', + theme + }) + renderDialogButton({ + label: 'Button', + size: 24, + state: 'hover', + theme + })); + }, + parameters: { + docs: { + description: { + story: 'Hover state for both sizes. Move the pointer over the buttons in the canvas for the live effect.' + } + } + } +}`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const makeClickDemo = size => { + const wrapper = document.createElement('div'); + wrapper.style.display = 'inline-block'; + let pressTimer = null; + const render = state => { + wrapper.innerHTML = renderDialogButton({ + label: 'Button', + size, + state, + theme + }); + }; + wrapper.addEventListener('mousedown', () => { + render('pressed'); + clearTimeout(pressTimer); + pressTimer = setTimeout(() => render('default'), 180); + }); + render('default'); + return wrapper; + }; + const container = document.createElement('div'); + container.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:16px;align-items:center;'; + container.appendChild(makeClickDemo(22)); + container.appendChild(makeClickDemo(24)); + return container; + }, + parameters: { + docs: { + description: { + story: 'Pressed-state demo. Click a button to preview the active press moment.' + } + } + } +}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Wrapper(renderDialogButton({ + label: 'Button', + size: 22, + state: 'disabled', + theme + }) + renderDialogButton({ + label: 'Button', + size: 24, + state: 'disabled', + theme + })); + }, + parameters: { + docs: { + description: { + story: 'Disabled buttons keep layout but should not invite interaction.' + } + } + } +}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return \`\` + Wrapper(renderDialogButton({ + label: 'Button', + size: 22, + state: 'loader', + theme + }) + renderDialogButton({ + label: 'Button', + size: 24, + state: 'loader', + theme + })); + }, + parameters: { + docs: { + description: { + story: 'Loading state while the action is in progress.' + } + } + } +}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Wrapper(renderDialogButton({ + label: 'Button', + size: 22, + state: 'default', + scale: true, + theme + }) + renderDialogButton({ + label: 'Button', + size: 24, + state: 'default', + scale: true, + theme + }), true); + }, + parameters: { + docs: { + description: { + story: 'Full-width layout variant for dense footers or narrow dialog flows.' + } + } + } +}`,...g.parameters?.docs?.source}}},_=[`Default`,`Hovered`,`Clicked`,`Disabled`,`Loading`,`Scale`]}))();export{p as Clicked,d as Default,m as Disabled,f as Hovered,h as Loading,g as Scale,_ as __namedExportsOrder,u as default}; \ No newline at end of file diff --git a/storybook/static/assets/DialogButtonsSecondary.stories-B06GAowc.js b/storybook/static/assets/DialogButtonsSecondary.stories-B06GAowc.js new file mode 100644 index 0000000000..267544f700 --- /dev/null +++ b/storybook/static/assets/DialogButtonsSecondary.stories-B06GAowc.js @@ -0,0 +1,140 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r,r as i}from"./theme-utils-B-KYefhh.js";function a({label:e=`Button`,size:t=24,state:n=`default`,scale:r=!1,theme:i=`Light`}){let a=c,o=(a[i]??a.Light)[n]??(a[i]??a.Light).default,s=n===`loader`,u=n===`disabled`,d=s||u?`not-allowed`:`pointer`,f=r?`100%`:`auto`,p=i.startsWith(`Modern`),m=p?4:1,h=p?12:11,g=p?.24:.22,_=[`height:${t}px`,`min-width:${p?48:80}px`,`padding:0 ${p?12:32}px`,`background:${o.bg}`,`border:none`,`border-radius:${m}px`,`outline:${o.outline}`,`outline-offset:-1px`,`display:inline-flex`,`align-items:center`,`justify-content:center`,`box-sizing:border-box`,`cursor:${d}`,`width:${f}`].join(`;`),v=[`color:${o.text}`,`font-size:${h}px`,`font-family:Arial,Helvetica,sans-serif`,`font-weight:700`,`line-height:16px`,`letter-spacing:${g}px`,`white-space:nowrap`,`user-select:none`].join(`;`),y=s?``:`${e}`;return``}function o(e,t=!1){return`
${e}
`}var s,c,l,u,d,f,p,m,h,g,_;e((()=>{r(),s=n,c={Light:{default:{bg:`#FFFFFF`,text:`rgba(0,0,0,0.80)`,outline:`1px solid #C0C0C0`},hover:{bg:`#E0E0E0`,text:`rgba(0,0,0,0.80)`,outline:`1px solid #C0C0C0`},pressed:{bg:`#CBCBCB`,text:`rgba(0,0,0,0.80)`,outline:`1px solid #C0C0C0`},disabled:{bg:`#EFEFEF`,text:`rgba(0,0,0,0.40)`,outline:`1px solid #C0C0C0`},loader:{bg:`#EFEFEF`,text:`rgba(0,0,0,0.80)`,outline:`1px solid #C0C0C0`}},"Light Classic":{default:{bg:`#FFFFFF`,text:`#444444`,outline:`1px solid #CFCFCF`},hover:{bg:`#D8DADC`,text:`#444444`,outline:`1px solid #CFCFCF`},pressed:{bg:`#7D858C`,text:`#FFFFFF`,outline:`1px solid #CFCFCF`},disabled:{bg:`#F1F1F1`,text:`#A5A5A5`,outline:`1px solid #CFCFCF`},loader:{bg:`#F1F1F1`,text:`#444444`,outline:`1px solid #CFCFCF`}},Dark:{default:{bg:`#333333`,text:`rgba(255,255,255,0.80)`,outline:`1px solid #666666`},hover:{bg:`#555555`,text:`rgba(255,255,255,0.80)`,outline:`1px solid #666666`},pressed:{bg:`#606060`,text:`rgba(255,255,255,0.80)`,outline:`1px solid #666666`},disabled:{bg:`#505050`,text:`rgba(255,255,255,0.40)`,outline:`1px solid #666666`},loader:{bg:`#505050`,text:`rgba(255,255,255,0.80)`,outline:`1px solid #666666`}},"Dark Contrast":{default:{bg:`#1E1E1E`,text:`#E8E8E8`,outline:`1px solid #696969`},hover:{bg:`#424242`,text:`#E8E8E8`,outline:`1px solid #696969`},pressed:{bg:`#666666`,text:`#E8E8E8`,outline:`1px solid #696969`},disabled:{bg:`#2A2A2A`,text:`rgba(0,0,0,0.20)`,outline:`1px solid #696969`},loader:{bg:`#2A2A2A`,text:`#E8E8E8`,outline:`1px solid #696969`}},"Modern Light":{default:{bg:`#FFFFFF`,text:`#383838`,outline:`1px solid #E1E1E1`},hover:{bg:`#F9F9F9`,text:`#383838`,outline:`1px solid #E1E1E1`},pressed:{bg:`#EAEAEA`,text:`#383838`,outline:`1px solid #2A5BB9`},disabled:{bg:`#FFFFFF`,text:`rgba(56,56,56,0.40)`,outline:`1px solid #E1E1E1`},loader:{bg:`#F3F3F3`,text:`#383838`,outline:`1px solid #E1E1E1`}},"Modern Dark":{default:{bg:`#404040`,text:`#E8E8E8`,outline:`1px solid #686868`},hover:{bg:`#585858`,text:`#E8E8E8`,outline:`1px solid #686868`},pressed:{bg:`#686868`,text:`#E8E8E8`,outline:`1px solid #4A7BE0`},disabled:{bg:`#343434`,text:`rgba(232,232,232,0.30)`,outline:`1px solid #686868`},loader:{bg:`#343434`,text:`#E8E8E8`,outline:`1px solid #686868`}}},l=e=>``,u={title:`Components/Buttons/Dialog Buttons/Secondary`,tags:[`autodocs`],args:{label:`Button`,size:24,interactive:!0,isHovered:!1,isClicked:!1,isDisabled:!1,isLoading:!1,themeMode:`Auto`},argTypes:{label:{control:`text`,description:`Visible action label`},size:{control:`select`,options:[22,24],description:`Compact or regular dialog button height`,table:{defaultValue:{summary:`24`}}},interactive:{control:`boolean`,description:`Allow the story to react to hover and click in the canvas`,table:{defaultValue:{summary:`true`}}},isHovered:{control:`boolean`,description:`Force hover appearance for visual review`},isClicked:{control:`boolean`,description:`Force pressed appearance for visual review`},isDisabled:{control:`boolean`,description:`Show the disabled state`},isLoading:{control:`boolean`,description:`Replace the label with the loading indicator`},minWidth:{control:`text`,description:`Override minimum button width (e.g. "120px")`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...s],description:`Auto = current Storybook toolbar theme`,table:{defaultValue:{summary:`Auto`}}},theme:{table:{disable:!0}},variant:{table:{disable:!0}},scale:{table:{disable:!0}},state:{table:{disable:!0}}},parameters:{docs:{description:{component:`Secondary dialog action button for cancel, back, or less prominent actions in modal footers and compact plugin flows.`}}}},d={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),o=e.isDisabled?`disabled`:e.isLoading?`loader`:`default`;return i(t=>a({label:e.label,size:e.size,state:o===`default`?t:o,theme:r}),{disabled:o!==`default`})}},f={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return o(a({label:`Button`,size:22,state:`hover`,theme:r})+a({label:`Button`,size:24,state:`hover`,theme:r}))},parameters:{docs:{description:{story:`Hover state for both sizes. Move the pointer over the buttons in the canvas for the live effect.`}}}},p={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=e=>{let t=document.createElement(`div`);t.style.display=`inline-block`;let n=null,i=n=>{t.innerHTML=a({label:`Button`,size:e,state:n,theme:r})};return t.addEventListener(`mousedown`,()=>{i(`pressed`),clearTimeout(n),n=setTimeout(()=>i(`default`),180)}),i(`default`),t},o=document.createElement(`div`);return o.style.cssText=`display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:16px;align-items:center;`,o.appendChild(i(22)),o.appendChild(i(24)),o},parameters:{docs:{description:{story:`Pressed-state demo. Click a button to preview the active press moment.`}}}},m={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return o(a({label:`Button`,size:22,state:`disabled`,theme:r})+a({label:`Button`,size:24,state:`disabled`,theme:r}))},parameters:{docs:{description:{story:`Disabled buttons keep layout but should not invite interaction.`}}}},h={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return``+o(a({label:`Button`,size:22,state:`loader`,theme:r})+a({label:`Button`,size:24,state:`loader`,theme:r}))},parameters:{docs:{description:{story:`Loading state while the action is in progress.`}}}},g={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return o(a({label:`Button`,size:22,state:`default`,scale:!0,theme:r})+a({label:`Button`,size:24,state:`default`,scale:!0,theme:r}),!0)},parameters:{docs:{description:{story:`Full-width layout variant for dense footers or narrow dialog flows.`}}}},d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const state = args.isDisabled ? 'disabled' : args.isLoading ? 'loader' : 'default'; + return makeInteractive(hoverState => renderDialogButton({ + label: args.label, + size: args.size, + state: state !== 'default' ? state : hoverState, + theme + }), { + disabled: state !== 'default' + }); + } +}`,...d.parameters?.docs?.source}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Wrapper(renderDialogButton({ + label: 'Button', + size: 22, + state: 'hover', + theme + }) + renderDialogButton({ + label: 'Button', + size: 24, + state: 'hover', + theme + })); + }, + parameters: { + docs: { + description: { + story: 'Hover state for both sizes. Move the pointer over the buttons in the canvas for the live effect.' + } + } + } +}`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const makeClickDemo = size => { + const wrapper = document.createElement('div'); + wrapper.style.display = 'inline-block'; + let pressTimer = null; + const render = state => { + wrapper.innerHTML = renderDialogButton({ + label: 'Button', + size, + state, + theme + }); + }; + wrapper.addEventListener('mousedown', () => { + render('pressed'); + clearTimeout(pressTimer); + pressTimer = setTimeout(() => render('default'), 180); + }); + render('default'); + return wrapper; + }; + const container = document.createElement('div'); + container.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:16px;align-items:center;'; + container.appendChild(makeClickDemo(22)); + container.appendChild(makeClickDemo(24)); + return container; + }, + parameters: { + docs: { + description: { + story: 'Pressed-state demo. Click a button to preview the active press moment.' + } + } + } +}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Wrapper(renderDialogButton({ + label: 'Button', + size: 22, + state: 'disabled', + theme + }) + renderDialogButton({ + label: 'Button', + size: 24, + state: 'disabled', + theme + })); + }, + parameters: { + docs: { + description: { + story: 'Disabled buttons keep layout but should not invite interaction.' + } + } + } +}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return \`\` + Wrapper(renderDialogButton({ + label: 'Button', + size: 22, + state: 'loader', + theme + }) + renderDialogButton({ + label: 'Button', + size: 24, + state: 'loader', + theme + })); + }, + parameters: { + docs: { + description: { + story: 'Loading state while the action is in progress.' + } + } + } +}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Wrapper(renderDialogButton({ + label: 'Button', + size: 22, + state: 'default', + scale: true, + theme + }) + renderDialogButton({ + label: 'Button', + size: 24, + state: 'default', + scale: true, + theme + }), true); + }, + parameters: { + docs: { + description: { + story: 'Full-width layout variant for dense footers or narrow dialog flows.' + } + } + } +}`,...g.parameters?.docs?.source}}},_=[`Default`,`Hovered`,`Clicked`,`Disabled`,`Loading`,`Scale`]}))();export{p as Clicked,d as Default,m as Disabled,f as Hovered,h as Loading,g as Scale,_ as __namedExportsOrder,u as default}; \ No newline at end of file diff --git a/storybook/static/assets/DocsRenderer-LL677BLK-D2xToRfx.js b/storybook/static/assets/DocsRenderer-LL677BLK-BKqUrJM_.js similarity index 80% rename from storybook/static/assets/DocsRenderer-LL677BLK-D2xToRfx.js rename to storybook/static/assets/DocsRenderer-LL677BLK-BKqUrJM_.js index 0e452942b7..7699170563 100644 --- a/storybook/static/assets/DocsRenderer-LL677BLK-D2xToRfx.js +++ b/storybook/static/assets/DocsRenderer-LL677BLK-BKqUrJM_.js @@ -1,5 +1,5 @@ -const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./Color-FRDS63T2-CvSgaFz3.js","./chunk-BneVvdWh.js","./iframe-DIiqmCNx.js","./preload-helper-CV6hqhE5.js","./chunk-CYSK6WYR-C0tTbXjk.js","./components-DTTvQz4L.js","./chunk-242VQQM5-CsveGrTV.js","./react-B_0iYUWB.js","./chunk-RD3KTAHR-ocB0pi6q.js","./theming-DzOc7WGW.js","./chunk-3LY4VQVK-DK6VewjT.js","./react-CMQ2J9Vz.js"])))=>i.map(i=>d[i]); -import{a as e,n as t,t as n}from"./chunk-BneVvdWh.js";import{n as r,t as i}from"./preload-helper-CV6hqhE5.js";import{a,i as o,l as s,o as c,u as l}from"./iframe-DIiqmCNx.js";import{t as u}from"./react-B_0iYUWB.js";import{r as d,t as f}from"./react-CMQ2J9Vz.js";import{n as p,r as m,t as h}from"./chunk-CYSK6WYR-C0tTbXjk.js";import{a as g,c as _,h as v,i as y,n as b,r as x,t as S,u as ee}from"./theming-DzOc7WGW.js";import{r as te}from"./chunk-242VQQM5-CsveGrTV.js";import{A as C,B as ne,C as re,D as ie,E as ae,F as oe,H as se,I as ce,L as le,M as ue,N as w,O as T,P as de,R as fe,S as pe,T as me,V as he,_ as E,a as ge,c as _e,d as ve,f as ye,g as be,h as xe,i as Se,j as Ce,k as we,l as Te,m as Ee,n as De,o as Oe,p as ke,r as Ae,s as je,t as Me,u as Ne,v as Pe,w as Fe,x as Ie,y as Le,z as Re}from"./components-DTTvQz4L.js";var ze=n((e=>{function t(e,t){var n=e.length;e.push(t);a:for(;0>>1,a=e[r];if(0>>1;ri(c,n))li(u,c)?(e[r]=u,e[l]=n,r=l):(e[r]=c,e[s]=n,r=s);else if(li(u,n))e[r]=u,e[l]=n,r=l;else break a}}return t}function i(e,t){var n=e.sortIndex-t.sortIndex;return n===0?e.id-t.id:n}if(e.unstable_now=void 0,typeof performance==`object`&&typeof performance.now==`function`){var a=performance;e.unstable_now=function(){return a.now()}}else{var o=Date,s=o.now();e.unstable_now=function(){return o.now()-s}}var c=[],l=[],u=1,d=null,f=3,p=!1,m=!1,h=!1,g=!1,_=typeof setTimeout==`function`?setTimeout:null,v=typeof clearTimeout==`function`?clearTimeout:null,y=typeof setImmediate<`u`?setImmediate:null;function b(e){for(var i=n(l);i!==null;){if(i.callback===null)r(l);else if(i.startTime<=e)r(l),i.sortIndex=i.expirationTime,t(c,i);else break;i=n(l)}}function x(e){if(h=!1,b(e),!m)if(n(c)!==null)m=!0,S||(S=!0,ie());else{var t=n(l);t!==null&&se(x,t.startTime-e)}}var S=!1,ee=-1,te=5,C=-1;function ne(){return g?!0:!(e.unstable_now()-Ct&&ne());){var o=d.callback;if(typeof o==`function`){d.callback=null,f=d.priorityLevel;var s=o(d.expirationTime<=t);if(t=e.unstable_now(),typeof s==`function`){d.callback=s,b(t),i=!0;break b}d===n(c)&&r(c),b(t)}else r(c);d=n(c)}if(d!==null)i=!0;else{var u=n(l);u!==null&&se(x,u.startTime-t),i=!1}}break a}finally{d=null,f=a,p=!1}i=void 0}}finally{i?ie():S=!1}}}var ie;if(typeof y==`function`)ie=function(){y(re)};else if(typeof MessageChannel<`u`){var ae=new MessageChannel,oe=ae.port2;ae.port1.onmessage=re,ie=function(){oe.postMessage(null)}}else ie=function(){_(re,0)};function se(t,n){ee=_(function(){t(e.unstable_now())},n)}e.unstable_IdlePriority=5,e.unstable_ImmediatePriority=1,e.unstable_LowPriority=4,e.unstable_NormalPriority=3,e.unstable_Profiling=null,e.unstable_UserBlockingPriority=2,e.unstable_cancelCallback=function(e){e.callback=null},e.unstable_forceFrameRate=function(e){0>e||125o?(r.sortIndex=a,t(l,r),n(c)===null&&r===n(l)&&(h?(v(ee),ee=-1):h=!0,se(x,a-o))):(r.sortIndex=s,t(c,r),m||p||(m=!0,S||(S=!0,ie()))),r},e.unstable_shouldYield=ne,e.unstable_wrapCallback=function(e){var t=f;return function(){var n=f;f=t;try{return e.apply(this,arguments)}finally{f=n}}}})),Be=n(((e,t)=>{t.exports=ze()})),Ve=n((e=>{var t=Be(),n=u(),r=te();function i(e){var t=`https://react.dev/errors/`+e;if(1pe||(e.current=fe[pe],fe[pe]=null,pe--)}function E(e,t){pe++,fe[pe]=e.current,e.current=t}var ge=me(null),_e=me(null),ve=me(null),ye=me(null);function be(e,t){switch(E(ve,t),E(_e,e),E(ge,null),t.nodeType){case 9:case 11:e=(e=t.documentElement)&&(e=e.namespaceURI)?Vd(e):0;break;default:if(e=t.tagName,t=t.namespaceURI)t=Vd(t),e=Hd(t,e);else switch(e){case`svg`:e=1;break;case`math`:e=2;break;default:e=0}}he(ge),E(ge,e)}function xe(){he(ge),he(_e),he(ve)}function Se(e){e.memoizedState!==null&&E(ye,e);var t=ge.current,n=Hd(t,e.type);t!==n&&(E(_e,e),E(ge,n))}function Ce(e){_e.current===e&&(he(ge),he(_e)),ye.current===e&&(he(ye),Qf._currentValue=de)}var we,Te;function Ee(e){if(we===void 0)try{throw Error()}catch(e){var t=e.stack.trim().match(/\n( *(at )?)/);we=t&&t[1]||``,Te=-1i.map(i=>d[i]); +import{a as e,n as t,t as n}from"./chunk-BneVvdWh.js";import{n as r,t as i}from"./preload-helper-CV6hqhE5.js";import{a,i as o,l as s,o as c,u as l}from"./iframe-B3N_zEeP.js";import{t as u}from"./react-B_0iYUWB.js";import{r as d,t as f}from"./react-CMQ2J9Vz.js";import{n as p,r as m,t as h}from"./chunk-CYSK6WYR-C0tTbXjk.js";import{a as g,c as _,h as v,i as y,n as b,r as x,t as S,u as ee}from"./theming-DLWRz99i.js";import{r as te}from"./chunk-242VQQM5-CsveGrTV.js";import{A as C,B as ne,C as re,D as ie,E as ae,F as oe,H as se,I as ce,L as le,M as ue,N as w,O as T,P as de,R as fe,S as pe,T as me,V as he,_ as E,a as ge,c as _e,d as ve,f as ye,g as be,h as xe,i as Se,j as Ce,k as we,l as Te,m as Ee,n as De,o as Oe,p as ke,r as Ae,s as je,t as Me,u as Ne,v as Pe,w as Fe,x as Ie,y as Le,z as Re}from"./components-DW-5dJuS.js";var ze=n((e=>{function t(e,t){var n=e.length;e.push(t);a:for(;0>>1,a=e[r];if(0>>1;ri(c,n))li(u,c)?(e[r]=u,e[l]=n,r=l):(e[r]=c,e[s]=n,r=s);else if(li(u,n))e[r]=u,e[l]=n,r=l;else break a}}return t}function i(e,t){var n=e.sortIndex-t.sortIndex;return n===0?e.id-t.id:n}if(e.unstable_now=void 0,typeof performance==`object`&&typeof performance.now==`function`){var a=performance;e.unstable_now=function(){return a.now()}}else{var o=Date,s=o.now();e.unstable_now=function(){return o.now()-s}}var c=[],l=[],u=1,d=null,f=3,p=!1,m=!1,h=!1,g=!1,_=typeof setTimeout==`function`?setTimeout:null,v=typeof clearTimeout==`function`?clearTimeout:null,y=typeof setImmediate<`u`?setImmediate:null;function b(e){for(var i=n(l);i!==null;){if(i.callback===null)r(l);else if(i.startTime<=e)r(l),i.sortIndex=i.expirationTime,t(c,i);else break;i=n(l)}}function x(e){if(h=!1,b(e),!m)if(n(c)!==null)m=!0,S||(S=!0,ie());else{var t=n(l);t!==null&&se(x,t.startTime-e)}}var S=!1,ee=-1,te=5,C=-1;function ne(){return g?!0:!(e.unstable_now()-Ct&&ne());){var o=d.callback;if(typeof o==`function`){d.callback=null,f=d.priorityLevel;var s=o(d.expirationTime<=t);if(t=e.unstable_now(),typeof s==`function`){d.callback=s,b(t),i=!0;break b}d===n(c)&&r(c),b(t)}else r(c);d=n(c)}if(d!==null)i=!0;else{var u=n(l);u!==null&&se(x,u.startTime-t),i=!1}}break a}finally{d=null,f=a,p=!1}i=void 0}}finally{i?ie():S=!1}}}var ie;if(typeof y==`function`)ie=function(){y(re)};else if(typeof MessageChannel<`u`){var ae=new MessageChannel,oe=ae.port2;ae.port1.onmessage=re,ie=function(){oe.postMessage(null)}}else ie=function(){_(re,0)};function se(t,n){ee=_(function(){t(e.unstable_now())},n)}e.unstable_IdlePriority=5,e.unstable_ImmediatePriority=1,e.unstable_LowPriority=4,e.unstable_NormalPriority=3,e.unstable_Profiling=null,e.unstable_UserBlockingPriority=2,e.unstable_cancelCallback=function(e){e.callback=null},e.unstable_forceFrameRate=function(e){0>e||125o?(r.sortIndex=a,t(l,r),n(c)===null&&r===n(l)&&(h?(v(ee),ee=-1):h=!0,se(x,a-o))):(r.sortIndex=s,t(c,r),m||p||(m=!0,S||(S=!0,ie()))),r},e.unstable_shouldYield=ne,e.unstable_wrapCallback=function(e){var t=f;return function(){var n=f;f=t;try{return e.apply(this,arguments)}finally{f=n}}}})),Be=n(((e,t)=>{t.exports=ze()})),Ve=n((e=>{var t=Be(),n=u(),r=te();function i(e){var t=`https://react.dev/errors/`+e;if(1pe||(e.current=fe[pe],fe[pe]=null,pe--)}function E(e,t){pe++,fe[pe]=e.current,e.current=t}var ge=me(null),_e=me(null),ve=me(null),ye=me(null);function be(e,t){switch(E(ve,t),E(_e,e),E(ge,null),t.nodeType){case 9:case 11:e=(e=t.documentElement)&&(e=e.namespaceURI)?Vd(e):0;break;default:if(e=t.tagName,t=t.namespaceURI)t=Vd(t),e=Hd(t,e);else switch(e){case`svg`:e=1;break;case`math`:e=2;break;default:e=0}}he(ge),E(ge,e)}function xe(){he(ge),he(_e),he(ve)}function Se(e){e.memoizedState!==null&&E(ye,e);var t=ge.current,n=Hd(t,e.type);t!==n&&(E(_e,e),E(ge,n))}function Ce(e){_e.current===e&&(he(ge),he(_e)),ye.current===e&&(he(ye),Qf._currentValue=de)}var we,Te;function Ee(e){if(we===void 0)try{throw Error()}catch(e){var t=e.stack.trim().match(/\n( *(at )?)/);we=t&&t[1]||``,Te=-1)`:-1({width:`${e+t.toString().length*2+3}ch`,textAlign:`right`,flexShrink:0})),Qc=_.div(({readOnly:e})=>({display:`flex`,alignItems:`center`,width:`100%`,opacity:e?.5:1})),$c=({name:e,value:t,onChange:n,min:r=0,max:i=100,step:a=1,onBlur:o,onFocus:s,argType:c})=>{let l=e=>{n(Hs(e.target.value))},u=t!==void 0,d=(0,Xi.useMemo)(()=>ur(a),[a]),f=!!c?.table?.readonly,p=h(e);return Xi.createElement(Qc,{readOnly:f},Xi.createElement(`label`,{htmlFor:p,className:`sb-sr-only`},e),Xi.createElement(Xc,null,r),Xi.createElement(Yc,{id:p,type:`range`,disabled:f,onChange:l,name:e,min:r,max:i,step:a,onFocus:s,onBlur:o,value:t??r}),Xi.createElement(Zc,{numberOFDecimalsPlaces:d,max:i},u?t.toFixed(d):`--`,` / `,i))},el=_.label({display:`flex`}),tl=_.div(({isMaxed:e})=>({marginLeft:`0.75rem`,paddingTop:`0.35rem`,color:e?`red`:void 0})),nl=({name:e,value:t,onChange:n,onFocus:r,onBlur:i,maxLength:a,argType:o})=>{let s=e=>{n(e.target.value)},c=!!o?.table?.readonly,[l,u]=(0,Zi.useState)(!1),d=(0,Zi.useCallback)(()=>{n(``),u(!0)},[u]);if(t===void 0)return Zi.createElement(De,{ariaLabel:!1,variant:`outline`,size:`medium`,disabled:c,id:p(e),onClick:d},`Set string`);let f=typeof t==`string`;return Zi.createElement(el,null,Zi.createElement(Oe.Textarea,{id:h(e),maxLength:a,onChange:s,disabled:c,size:`flex`,placeholder:`Edit string...`,autoFocus:l,valid:f?void 0:`error`,name:e,value:f?t:``,onFocus:r,onBlur:i}),a&&Zi.createElement(tl,{isMaxed:t?.length===a},t?.length??0,` / `,a))},rl=_(Oe.Input)({padding:10}),il=({onChange:e,name:t,accept:n=`image/*`,value:r,argType:i})=>{let a=(0,Qi.useRef)(null),o=i?.control?.readOnly;function s(t){t.target.files&&(e(Array.from(t.target.files).map(e=>URL.createObjectURL(e))),dr(r||[]))}(0,Qi.useEffect)(()=>{r==null&&a.current&&(a.current.value=``)},[r,t]);let c=h(t);return Qi.createElement(Qi.Fragment,null,Qi.createElement(`label`,{htmlFor:c,className:`sb-sr-only`},t),Qi.createElement(rl,{ref:a,id:c,type:`file`,name:t,multiple:!0,disabled:o,onChange:s,accept:n,size:`flex`}))},al=(0,A.lazy)(()=>i(()=>import(`./Color-FRDS63T2-CvSgaFz3.js`),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10]),import.meta.url)),ol=e=>A.createElement(A.Suspense,{fallback:A.createElement(`div`,null)},A.createElement(al,{...e})),sl={array:Jc,object:Jc,boolean:Ns,color:ol,date:Bs,number:Ws,check:pc,"inline-check":pc,radio:pc,"inline-radio":pc,select:pc,"multi-select":pc,range:$c,text:nl,file:il},cl=()=>k.createElement(k.Fragment,null,`-`),ll=({row:e,arg:t,updateArgs:n,isHovered:r})=>{let{key:i,control:a}=e,[o,s]=(0,k.useState)(!1),[c,l]=(0,k.useState)({value:t});(0,k.useEffect)(()=>{o||l({value:t})},[o,t]);let u=(0,k.useCallback)(e=>(l({value:e}),n({[i]:e}),e),[n,i]),d=(0,k.useCallback)(()=>s(!1),[]),f=(0,k.useCallback)(()=>s(!0),[]);if(!a||a.disable){let t=a?.disable!==!0&&e?.type?.name!==`function`;return r&&t?k.createElement(Te,{href:`https://storybook.js.org/docs/essentials/controls?ref=ui`,target:`_blank`,withArrow:!0},`Setup controls`):k.createElement(cl,null)}let p={name:i,argType:e,value:c.value,onChange:u,onBlur:d,onFocus:f},m=sl[a.type]||cl;return k.createElement(m,{...p,...a,controlType:a.type})},ul=_.table(({theme:e})=>({"&&":{borderCollapse:`collapse`,borderSpacing:0,border:`none`,tr:{border:`none !important`,background:`none`},"td, th":{padding:0,border:`none`,width:`auto!important`},marginTop:0,marginBottom:0,"th:first-of-type, td:first-of-type":{paddingLeft:0},"th:last-of-type, td:last-of-type":{paddingRight:0},td:{paddingTop:0,paddingBottom:4,"&:not(:first-of-type)":{paddingLeft:10,paddingRight:0}},tbody:{boxShadow:`none`,border:`none`},code:Pe({theme:e}),div:{span:{fontWeight:`bold`}},"& code":{margin:0,display:`inline-block`,fontSize:e.typography.size.s1}}})),H=({tags:e})=>{let t=(e.params||[]).filter(e=>e.description),n=t.length!==0,r=e.deprecated!=null,i=e.returns!=null&&e.returns.description!=null;return!n&&!i&&!r?null:$i.createElement($i.Fragment,null,$i.createElement(ul,null,$i.createElement(`tbody`,null,r&&$i.createElement(`tr`,{key:`deprecated`},$i.createElement(`td`,{colSpan:2},$i.createElement(`strong`,null,`Deprecated`),`: `,e.deprecated?.toString())),n&&t.map(e=>$i.createElement(`tr`,{key:e.name},$i.createElement(`td`,null,$i.createElement(`code`,null,e.name)),$i.createElement(`td`,null,e.description))),i&&$i.createElement(`tr`,{key:`returns`},$i.createElement(`td`,null,$i.createElement(`code`,null,`Returns`)),$i.createElement(`td`,null,e.returns?.description)))))},dl=8,fl=_.div(({isExpanded:e})=>({display:`flex`,flexDirection:e?`column`:`row`,flexWrap:`wrap`,alignItems:`flex-start`,marginBottom:`-4px`,minWidth:100})),pl=_.details({display:`flex`,flexDirection:`column`,summary:{order:2},"summary::-webkit-details-marker":{display:`none`},"summary::marker":{content:`none`}}),ml=_.div({display:`flex`,flexDirection:`column`,flexWrap:`wrap`,alignItems:`flex-start`}),hl=_.span(Pe,({theme:e,simple:t=!1})=>({flex:`0 0 auto`,fontFamily:e.typography.fonts.mono,fontSize:e.typography.size.s1,wordBreak:`break-word`,whiteSpace:`normal`,maxWidth:`100%`,margin:0,marginRight:`4px`,marginBottom:`4px`,paddingTop:`2px`,paddingBottom:`2px`,lineHeight:`13px`,...t&&{background:`transparent`,border:`0 none`,paddingLeft:0}})),gl=_.summary(({theme:e})=>({fontFamily:e.typography.fonts.mono,color:e.color.secondary,cursor:`pointer`,lineHeight:`normal`,margin:`0 0 4px`,padding:`1px 6px`,background:`none`,border:`none`})),_l=_.button(Pe,({theme:e})=>({fontFamily:e.typography.fonts.mono,color:e.color.secondary,fontSize:e.typography.size.s1,margin:0,whiteSpace:`nowrap`,display:`flex`,alignItems:`center`,cursor:`pointer`,"&:hover":{border:e.base===`light`?`1px solid hsl(0 0 0 / 0.15)`:`1px solid hsl(0 0 100 / 0.15)`},"&:focus-visible":{outline:`2px solid ${e.color.secondary}`,outlineOffset:`2px`}})),vl=_.div(({theme:e})=>({minWidth:200,maxWidth:800,paddingRight:16,fontFamily:e.typography.fonts.mono,fontSize:e.typography.size.s1,boxSizing:`content-box`,"& code":{padding:`0 !important`}})),yl=_(C)({marginLeft:4}),bl=_(we)({marginLeft:4}),xl=()=>F.createElement(`span`,null,`-`),Sl=({text:e,simple:t})=>F.createElement(hl,{simple:t},e),Cl=e=>e?fr(e.split(`|`).map(e=>e.trim())):[e],wl=e=>e.slice(0,dl).map(e=>F.createElement(Sl,{key:e,text:e===``?`""`:e})),Tl=e=>e.slice(dl).map(e=>F.createElement(Sl,{key:e,text:e===``?`""`:e})),El=({value:e,initialExpandedArgs:t})=>{let{summary:n,detail:r}=e,[i,a]=(0,F.useState)(!1),[o,s]=(0,F.useState)(t||!1);if(n==null)return null;let c=typeof n.toString==`function`?n.toString():n;if(r==null){if(/[(){}[\]<>]/.test(c))return F.createElement(Sl,{text:c});let e=Cl(c),t=e.length;return t>dl?F.createElement(fl,{isExpanded:o},wl(e),F.createElement(pl,{open:o,onToggle:e=>s(e.currentTarget.open)},F.createElement(ml,null,Tl(e)),F.createElement(gl,{role:`button`},o?`Show less...`:`Show ${t-dl} more...`))):F.createElement(fl,null,wl(e))}return F.createElement(ve,{ariaLabel:`Arg value details`,placement:`bottom`,visible:i,onVisibleChange:e=>{a(e)},hasCloseButton:!0,popover:F.createElement(vl,null,F.createElement(ke,{language:`jsx`,format:!1},r))},F.createElement(_l,{className:`sbdocs-expandable`},F.createElement(`span`,null,c),i?F.createElement(yl,null):F.createElement(bl,null)))},Dl=({value:e,initialExpandedArgs:t})=>e==null?F.createElement(xl,null):F.createElement(El,{value:e,initialExpandedArgs:t}),Ol=_.span({fontWeight:`bold`}),kl=_.span(({theme:e})=>({color:e.color.negative,fontFamily:e.typography.fonts.mono,cursor:`help`})),Al=_.div(({theme:e})=>({"&&":{p:{margin:`0 0 10px 0`},a:{color:e.color.secondary}},code:{...Pe({theme:e}),fontSize:12,fontFamily:e.typography.fonts.mono},"& code":{margin:0,display:`inline-block`},"& pre > code":{whiteSpace:`pre-wrap`}})),jl=_.div(({theme:e,hasDescription:t})=>({color:e.base===`light`?fn(.1,e.color.defaultText):fn(.2,e.color.defaultText),marginTop:t?4:0})),Ml=_.div(({theme:e,hasDescription:t})=>({color:e.base===`light`?fn(.1,e.color.defaultText):fn(.2,e.color.defaultText),marginTop:t?12:0,marginBottom:12})),Nl=_.td(({expandable:e})=>({paddingLeft:e?`40px !important`:`20px !important`})),Pl=e=>e&&{summary:typeof e==`string`?e:e.name},Fl=e=>{let[t,n]=(0,Vi.useState)(!1),{row:r,updateArgs:i,compact:a,expandable:o,initialExpandedArgs:s}=e,{name:c,description:l}=r,u=r.table||{},d=u.type||Pl(r.type),f=u.defaultValue||r.defaultValue,p=r.type?.required,m=l!=null&&l!==``;return Vi.createElement(`tr`,{onMouseEnter:()=>n(!0),onMouseLeave:()=>n(!1)},Vi.createElement(Nl,{expandable:o??!1},Vi.createElement(Ol,null,c),p?Vi.createElement(kl,{title:`Required`},`*`):null),a?null:Vi.createElement(`td`,null,m&&Vi.createElement(Al,null,Vi.createElement(As,null,l)),u.jsDocTags==null?Vi.createElement(jl,{hasDescription:m},Vi.createElement(Dl,{value:d,initialExpandedArgs:s})):Vi.createElement(Vi.Fragment,null,Vi.createElement(Ml,{hasDescription:m},Vi.createElement(Dl,{value:d,initialExpandedArgs:s})),Vi.createElement(H,{tags:u.jsDocTags}))),a?null:Vi.createElement(`td`,null,Vi.createElement(Dl,{value:f,initialExpandedArgs:s})),i?Vi.createElement(`td`,null,Vi.createElement(ll,{...e,isHovered:t})):null)},Il=_.div(({inAddonPanel:e,theme:t})=>({height:e?`100%`:`auto`,display:`flex`,border:e?`none`:`1px solid ${t.appBorderColor}`,borderRadius:e?0:t.appBorderRadius,padding:e?0:40,alignItems:`center`,justifyContent:`center`,flexDirection:`column`,gap:15,background:t.background.content})),Ll=_.div(({theme:e})=>({display:`flex`,fontSize:e.typography.size.s2-1,gap:25})),Rl=({inAddonPanel:e})=>{let[t,n]=(0,ea.useState)(!0);return(0,ea.useEffect)(()=>{let e=setTimeout(()=>{n(!1)},100);return()=>clearTimeout(e)},[]),t?null:ea.createElement(Il,{inAddonPanel:e},ea.createElement(Se,{title:e?`Interactive story playground`:`Args table with interactive controls couldn't be auto-generated`,description:ea.createElement(ea.Fragment,null,`Controls give you an easy to use interface to test your components. Set your story args and you'll see controls appearing here automatically.`),footer:ea.createElement(Ll,null,e&&ea.createElement(ea.Fragment,null,ea.createElement(Te,{href:`https://storybook.js.org/docs/essentials/controls?ref=ui`,target:`_blank`,withArrow:!0},ea.createElement(ue,null),` Read docs`)),!e&&ea.createElement(Te,{href:`https://storybook.js.org/docs/essentials/controls?ref=ui`,target:`_blank`,withArrow:!0},ea.createElement(ue,null),` Learn how to set that up`))}))},zl=_(ie)(({theme:e})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:e.base===`light`?fn(.25,e.color.defaultText):fn(.3,e.color.defaultText),border:`none`,display:`inline-block`})),Bl=_(T)(({theme:e})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:e.base===`light`?fn(.25,e.color.defaultText):fn(.3,e.color.defaultText),border:`none`,display:`inline-block`})),Vl=_.span(({theme:e})=>({display:`flex`,lineHeight:`20px`,alignItems:`center`})),U=_.td(({theme:e})=>({position:`relative`,letterSpacing:`0.35em`,textTransform:`uppercase`,fontWeight:e.typography.weight.bold,fontSize:e.typography.size.s1-1,color:e.base===`light`?fn(.4,e.color.defaultText):fn(.6,e.color.defaultText),background:`${e.background.app} !important`,"& ~ td":{background:`${e.background.app} !important`}})),W=_.td(({theme:e})=>({position:`relative`,fontWeight:e.typography.weight.bold,fontSize:e.typography.size.s2-1,background:e.background.app})),G=_.td({position:`relative`}),K=_.tr(({theme:e})=>({"&:hover > td":{backgroundColor:`${ln(.005,e.background.app)} !important`,boxShadow:`${e.color.mediumlight} 0 - 1px 0 0 inset`,cursor:`row-resize`}})),q=_.button({background:`none`,border:`none`,padding:`0`,font:`inherit`,position:`absolute`,top:0,bottom:0,left:0,right:0,height:`100%`,width:`100%`,color:`transparent`,cursor:`row-resize !important`}),Hl=({level:e=`section`,label:t,children:n,initialExpanded:r=!0,colSpan:i=3})=>{let[a,o]=(0,ta.useState)(r),s=e===`subsection`?W:U,c=n?.length||0,l=e===`subsection`?`${c} item${c===1?``:`s`}`:``,u=`${a?`Hide`:`Show`} ${e===`subsection`?c:t} item${c===1?``:`s`}`;return ta.createElement(ta.Fragment,null,ta.createElement(K,{title:u},ta.createElement(s,{colSpan:1},ta.createElement(q,{onClick:e=>o(!a),tabIndex:0},u),ta.createElement(Vl,null,a?ta.createElement(zl,null):ta.createElement(Bl,null),t)),ta.createElement(G,{colSpan:i-1},ta.createElement(q,{onClick:e=>o(!a),tabIndex:-1,style:{outline:`none`}},u),a?null:l)),a?n:null)},Ul=_.div(({theme:e})=>({width:`100%`,borderSpacing:0,color:e.color.defaultText})),Wl=_.div(({theme:e})=>({display:`flex`,borderBottom:`1px solid ${e.appBorderColor}`,"&:last-child":{borderBottom:0}})),Gl=_.div(({position:e,theme:t})=>{let n={display:`flex`,flexDirection:`column`,gap:5,padding:`10px 15px`,alignItems:`flex-start`};switch(e){case`first`:return{...n,width:`25%`,paddingLeft:20};case`second`:return{...n,width:`35%`};case`third`:return{...n,width:`15%`};case`last`:return{...n,width:`25%`,paddingRight:20}}}),J=_.div(({theme:e,width:t,height:n})=>({animation:`${e.animation.glow} 1.5s ease-in-out infinite`,background:e.appBorderColor,width:t||`100%`,height:n||16,borderRadius:3})),Kl=()=>I.createElement(Ul,null,I.createElement(Wl,null,I.createElement(Gl,{position:`first`},I.createElement(J,{width:`60%`})),I.createElement(Gl,{position:`second`},I.createElement(J,{width:`30%`})),I.createElement(Gl,{position:`third`},I.createElement(J,{width:`60%`})),I.createElement(Gl,{position:`last`},I.createElement(J,{width:`60%`}))),I.createElement(Wl,null,I.createElement(Gl,{position:`first`},I.createElement(J,{width:`60%`})),I.createElement(Gl,{position:`second`},I.createElement(J,{width:`80%`}),I.createElement(J,{width:`30%`})),I.createElement(Gl,{position:`third`},I.createElement(J,{width:`60%`})),I.createElement(Gl,{position:`last`},I.createElement(J,{width:`60%`}))),I.createElement(Wl,null,I.createElement(Gl,{position:`first`},I.createElement(J,{width:`60%`})),I.createElement(Gl,{position:`second`},I.createElement(J,{width:`80%`}),I.createElement(J,{width:`30%`})),I.createElement(Gl,{position:`third`},I.createElement(J,{width:`60%`})),I.createElement(Gl,{position:`last`},I.createElement(J,{width:`60%`}))),I.createElement(Wl,null,I.createElement(Gl,{position:`first`},I.createElement(J,{width:`60%`})),I.createElement(Gl,{position:`second`},I.createElement(J,{width:`80%`}),I.createElement(J,{width:`30%`})),I.createElement(Gl,{position:`third`},I.createElement(J,{width:`60%`})),I.createElement(Gl,{position:`last`},I.createElement(J,{width:`60%`})))),ql=_.table(({theme:e,compact:t,inAddonPanel:n,inTabPanel:r})=>({"&&":{borderSpacing:0,color:e.color.defaultText,"td, th":{padding:0,border:`none`,verticalAlign:`top`,textOverflow:`ellipsis`},fontSize:e.typography.size.s2-1,lineHeight:`19px`,textAlign:`left`,width:`100%`,marginTop:n?0:25,marginBottom:n?0:40,"thead th:first-of-type, td:first-of-type":{width:`25%`},"th:first-of-type, td:first-of-type":{paddingLeft:20},"th:nth-of-type(2), td:nth-of-type(2)":{...t?null:{width:`35%`}},"td:nth-of-type(3)":{...t?null:{width:`15%`}},"th:last-of-type, td:last-of-type":{paddingRight:20,...t?null:{width:`25%`}},th:{color:e.textMutedColor,paddingTop:10,paddingBottom:10,paddingLeft:15,paddingRight:15},td:{paddingTop:`10px`,paddingBottom:`10px`,"&:not(:first-of-type)":{paddingLeft:15,paddingRight:15},"&:last-of-type":{paddingRight:20}},marginInline:n||r?0:1,paddingInline:r?3:0,tbody:{...n?null:{filter:e.base===`light`?`drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.10))`:`drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.20))`},"> tr > *":{background:e.background.content,borderTop:`1px solid ${e.appBorderColor}`},...n?null:{"> tr:first-of-type > *":{borderBlockStart:`1px solid ${e.appBorderColor}`},"> tr:last-of-type > *":{borderBlockEnd:`1px solid ${e.appBorderColor}`},"> tr > *:first-of-type":{borderInlineStart:`1px solid ${e.appBorderColor}`},"> tr > *:last-of-type":{borderInlineEnd:`1px solid ${e.appBorderColor}`},"> tr:first-of-type > td:first-of-type":{borderTopLeftRadius:e.appBorderRadius},"> tr:first-of-type > td:last-of-type":{borderTopRightRadius:e.appBorderRadius},"> tr:last-of-type > td:first-of-type":{borderBottomLeftRadius:e.appBorderRadius},"> tr:last-of-type > td:last-of-type":{borderBottomRightRadius:e.appBorderRadius}}}}})),Jl=_.div({position:`relative`}),Yl=_.div({position:`absolute`,right:22,top:10}),Xl=_(De)({margin:`-4px -12px -4px 0`}),Zl={alpha:(e,t)=>(e.name??``).localeCompare(t.name??``),requiredFirst:(e,t)=>!!t.type?.required-+!!e.type?.required||(e.name??``).localeCompare(t.name??``),none:null},Ql=(e,t)=>{let n={ungrouped:[],ungroupedSubsections:{},sections:{}};if(!e)return n;Object.entries(e).forEach(([e,t])=>{let{category:r,subcategory:i}=t?.table||{};if(r){let a=n.sections[r]||{ungrouped:[],subsections:{}};if(!i)a.ungrouped.push({key:e,...t});else{let n=a.subsections[i]||[];n.push({key:e,...t}),a.subsections[i]=n}n.sections[r]=a}else if(i){let r=n.ungroupedSubsections[i]||[];r.push({key:e,...t}),n.ungroupedSubsections[i]=r}else n.ungrouped.push({key:e,...t})});let r=Zl[t],i=e=>r?Object.keys(e).reduce((t,n)=>({...t,[n]:e[n].sort(r)}),{}):e;return{ungrouped:r?n.ungrouped.sort(r):n.ungrouped,ungroupedSubsections:i(n.ungroupedSubsections),sections:Object.keys(n.sections).reduce((e,t)=>({...e,[t]:{ungrouped:r?n.sections[t].ungrouped.sort(r):n.sections[t].ungrouped,subsections:i(n.sections[t].subsections)}}),{})}},$l=(e,t,n)=>{try{return Fe(e,t,n)}catch(e){return Ga.warn(e.message),!1}},eu=e=>{let{updateArgs:t,resetArgs:n,compact:r,inAddonPanel:i,inTabPanel:a,initialExpandedArgs:o,sort:s=`none`,isLoading:c}=e;if(`error`in e){let{error:t}=e;return O.createElement(mn,null,t,`\xA0`,O.createElement(Te,{href:`http://storybook.js.org/docs/?ref=ui`,target:`_blank`,withArrow:!0},O.createElement(ue,null),` Read the docs`))}if(c)return O.createElement(Kl,null);let{rows:l,args:u,globals:d}=`rows`in e?e:{rows:void 0,args:void 0,globals:void 0},f=Ql(kn(l||{},e=>!e?.table?.disable&&$l(e,u||{},d||{})),s),p=f.ungrouped.length===0,m=Object.entries(f.sections).length===0,h=Object.entries(f.ungroupedSubsections).length===0;if(p&&m&&h)return O.createElement(Rl,{inAddonPanel:i});let g=1;t&&(g+=1),r||(g+=2);let _=Object.keys(f.sections).length>0,v={updateArgs:t,compact:r,inAddonPanel:i,initialExpandedArgs:o};return O.createElement(ye,null,O.createElement(Jl,null,t&&!c&&n&&O.createElement(Yl,null,O.createElement(Xl,{variant:`ghost`,padding:`small`,onClick:()=>n(),ariaLabel:`Reset controls`},O.createElement(fe,null))),O.createElement(ql,{compact:r,inAddonPanel:i,inTabPanel:a,className:`docblock-argstable sb-unstyled`},O.createElement(`thead`,{className:`docblock-argstable-head`},O.createElement(`tr`,null,O.createElement(`th`,null,O.createElement(`span`,null,`Name`)),r?null:O.createElement(`th`,null,O.createElement(`span`,null,`Description`)),r?null:O.createElement(`th`,null,O.createElement(`span`,null,`Default`)),t?O.createElement(`th`,null,O.createElement(`span`,null,`Control`)):null)),O.createElement(`tbody`,{className:`docblock-argstable-body`},f.ungrouped.map(e=>O.createElement(Fl,{key:e.key,row:e,arg:u&&u[e.key],...v})),Object.entries(f.ungroupedSubsections).map(([e,t])=>O.createElement(Hl,{key:e,label:e,level:`subsection`,colSpan:g},t.map(e=>O.createElement(Fl,{key:e.key,row:e,arg:u&&u[e.key],expandable:_,...v})))),Object.entries(f.sections).map(([e,t])=>O.createElement(Hl,{key:e,label:e,level:`section`,colSpan:g},t.ungrouped.map(e=>O.createElement(Fl,{key:e.key,row:e,arg:u&&u[e.key],...v})),Object.entries(t.subsections).map(([e,t])=>O.createElement(Hl,{key:e,label:e,level:`subsection`,colSpan:g},t.map(e=>O.createElement(Fl,{key:e.key,row:e,arg:u&&u[e.key],expandable:_,...v}))))))))))},tu=e=>`& :where(${e}:not(.sb-anchor, .sb-unstyled, .sb-unstyled ${e}))`,nu=600,ru=_.h1(({theme:e})=>({...re({theme:e}),color:e.color.defaultText,fontSize:e.typography.size.m3,fontWeight:e.typography.weight.bold,lineHeight:`32px`,[`@media (min-width: ${nu}px)`]:{fontSize:e.typography.size.l1,lineHeight:`36px`,marginBottom:`16px`}})),iu=_.h2(({theme:e})=>({...re({theme:e}),fontWeight:e.typography.weight.regular,fontSize:e.typography.size.s3,lineHeight:`20px`,borderBottom:`none`,marginBottom:15,[`@media (min-width: ${nu}px)`]:{fontSize:e.typography.size.m1,lineHeight:`28px`,marginBottom:24},color:fn(.25,e.color.defaultText)})),au=_.div(({theme:e})=>{let t={fontFamily:e.typography.fonts.base,fontSize:e.typography.size.s3,margin:0,WebkitFontSmoothing:`antialiased`,MozOsxFontSmoothing:`grayscale`,WebkitTapHighlightColor:`rgba(0, 0, 0, 0)`,WebkitOverflowScrolling:`touch`},n={margin:`20px 0 8px`,padding:0,cursor:`text`,position:`relative`,color:e.color.defaultText,"&:first-of-type":{marginTop:0,paddingTop:0},"&:hover a.anchor":{textDecoration:`none`},"& code":{fontSize:`inherit`}},r={lineHeight:1,margin:`0 2px`,padding:`3px 5px`,whiteSpace:`nowrap`,borderRadius:3,fontSize:e.typography.size.s2-1,border:e.base===`light`?`1px solid ${e.color.mediumlight}`:`1px solid ${e.color.darker}`,color:e.base===`light`?fn(.1,e.color.defaultText):fn(.3,e.color.defaultText),backgroundColor:e.base===`light`?e.color.lighter:e.color.border};return{maxWidth:1e3,width:`100%`,minWidth:0,[tu(`a`)]:{...t,fontSize:`inherit`,lineHeight:`24px`,color:e.color.secondary,textDecoration:`underline`,textDecorationThickness:`0.03125rem`,textUnderlineOffset:`0.11em`,"&.absent":{color:`#cc0000`},"&.anchor":{display:`block`,paddingLeft:30,marginLeft:-30,cursor:`pointer`,position:`absolute`,top:0,left:0,bottom:0,textDecoration:`none`},"&.anchor:hover, &.anchor:focus":{textDecoration:`underline`}},[tu(`blockquote`)]:{...t,margin:`16px 0`,borderLeft:`4px solid ${e.color.medium}`,padding:`0 15px`,color:e.color.dark,"& > :first-of-type":{marginTop:0},"& > :last-child":{marginBottom:0}},[tu(`div`)]:t,[tu(`dl`)]:{...t,margin:`16px 0`,padding:0,"& dt":{fontSize:`14px`,fontWeight:`bold`,fontStyle:`italic`,padding:0,margin:`16px 0 4px`},"& dt:first-of-type":{padding:0},"& dt > :first-of-type":{marginTop:0},"& dt > :last-child":{marginBottom:0},"& dd":{margin:`0 0 16px`,padding:`0 15px`},"& dd > :first-of-type":{marginTop:0},"& dd > :last-child":{marginBottom:0}},[tu(`h1`)]:{...t,...n,fontSize:`${e.typography.size.l1}px`,fontWeight:e.typography.weight.bold},[tu(`h2`)]:{...t,...n,fontSize:`${e.typography.size.m2}px`,paddingBottom:4,borderBottom:`1px solid ${e.appBorderColor}`},[tu(`h3`)]:{...t,...n,fontSize:`${e.typography.size.m1}px`,fontWeight:e.typography.weight.bold},[tu(`h4`)]:{...t,...n,fontSize:`${e.typography.size.s3}px`},[tu(`h5`)]:{...t,...n,fontSize:`${e.typography.size.s2}px`},[tu(`h6`)]:{...t,...n,fontSize:`${e.typography.size.s2}px`,color:e.color.dark},[tu(`hr`)]:{border:`0 none`,borderTop:`1px solid ${e.appBorderColor}`,height:4,padding:0},[tu(`img`)]:{maxWidth:`100%`},[tu(`li`)]:{...t,fontSize:e.typography.size.s2,color:e.color.defaultText,lineHeight:`24px`,"& + li":{marginTop:`.25em`},"& ul, & ol":{marginTop:`.25em`,marginBottom:0},"& code":r},[tu(`ol`)]:{...t,margin:`16px 0`,paddingLeft:30,"& :first-of-type":{marginTop:0},"& :last-child":{marginBottom:0}},[tu(`p`)]:{...t,margin:`16px 0`,fontSize:e.typography.size.s2,lineHeight:`24px`,color:e.color.defaultText,"& code":r},[tu(`pre`)]:{...t,fontFamily:e.typography.fonts.mono,WebkitFontSmoothing:`antialiased`,MozOsxFontSmoothing:`grayscale`,lineHeight:`18px`,padding:`11px 1rem`,whiteSpace:`pre-wrap`,color:`inherit`,borderRadius:3,margin:`1rem 0`,"&:not(.prismjs)":{background:`transparent`,border:`none`,borderRadius:0,padding:0,margin:0},"& pre, &.prismjs":{padding:15,margin:0,whiteSpace:`pre-wrap`,color:`inherit`,fontSize:`13px`,lineHeight:`19px`,code:{color:`inherit`,fontSize:`inherit`}},"& code":{whiteSpace:`pre`},"& code, & tt":{border:`none`}},[tu(`span`)]:{...t,"&.frame":{display:`block`,overflow:`hidden`,"& > span":{border:`1px solid ${e.color.medium}`,display:`block`,float:`left`,overflow:`hidden`,margin:`13px 0 0`,padding:7,width:`auto`},"& span img":{display:`block`,float:`left`},"& span span":{clear:`both`,color:e.color.darkest,display:`block`,padding:`5px 0 0`}},"&.align-center":{display:`block`,overflow:`hidden`,clear:`both`,"& > span":{display:`block`,overflow:`hidden`,margin:`13px auto 0`,textAlign:`center`},"& span img":{margin:`0 auto`,textAlign:`center`}},"&.align-right":{display:`block`,overflow:`hidden`,clear:`both`,"& > span":{display:`block`,overflow:`hidden`,margin:`13px 0 0`,textAlign:`right`},"& span img":{margin:0,textAlign:`right`}},"&.float-left":{display:`block`,marginRight:13,overflow:`hidden`,float:`left`,"& span":{margin:`13px 0 0`}},"&.float-right":{display:`block`,marginLeft:13,overflow:`hidden`,float:`right`,"& > span":{display:`block`,overflow:`hidden`,margin:`13px auto 0`,textAlign:`right`}}},[tu(`table`)]:{...t,margin:`16px 0`,fontSize:e.typography.size.s2,lineHeight:`24px`,padding:0,borderCollapse:`collapse`,"& tr":{borderTop:`1px solid ${e.appBorderColor}`,backgroundColor:e.appContentBg,margin:0,padding:0},"& tr:nth-of-type(2n)":{backgroundColor:e.base===`dark`?e.color.darker:e.color.lighter},"& tr th":{fontWeight:`bold`,color:e.color.defaultText,border:`1px solid ${e.appBorderColor}`,margin:0,padding:`6px 13px`},"& tr td":{border:`1px solid ${e.appBorderColor}`,color:e.color.defaultText,margin:0,padding:`6px 13px`},"& tr th :first-of-type, & tr td :first-of-type":{marginTop:0},"& tr th :last-child, & tr td :last-child":{marginBottom:0}},[tu(`ul`)]:{...t,margin:`16px 0`,paddingLeft:30,"& :first-of-type":{marginTop:0},"& :last-child":{marginBottom:0},listStyle:`disc`}}}),ou=_.div(({theme:e})=>({background:e.background.content,display:`flex`,flexDirection:`row-reverse`,justifyContent:`center`,padding:`4rem 20px`,minHeight:`100vh`,boxSizing:`border-box`,gap:`3rem`,[`@media (min-width: ${nu}px)`]:{}})),su=({children:e,toc:t})=>na.createElement(ou,{className:`sbdocs sbdocs-wrapper`},t,na.createElement(au,{className:`sbdocs sbdocs-content`},e)),{logger:cu}=__STORYBOOK_MODULE_CLIENT_LOGGER__,lu=typeof document<`u`?ra.useLayoutEffect:()=>{},uu={prefix:String(Math.round(Math.random()*1e10)),current:0},du=aa.createContext(uu),fu=aa.createContext(!1),typeof window<`u`&&window.document&&window.document.createElement,pu=new WeakMap,mu=typeof aa.useId==`function`?hr:mr,hu=!!(typeof window<`u`&&window.document&&window.document.createElement),gu=new Map,typeof FinalizationRegistry<`u`&&(_u=new FinalizationRegistry(e=>{gu.delete(e)})),vu=null,yu=Dr(function(){return Er(/^Mac/i)}),bu=Dr(function(){return Er(/^iPad/i)||yu()&&navigator.maxTouchPoints>1}),xu=Dr(function(){return Tr(/AppleWebKit/i)&&!Su()}),Su=Dr(function(){return Tr(/Chrome/i)}),Cu=Dr(function(){return Tr(/Firefox/i)}),(0,oa.createContext)({isNative:!0,open:Ar,useHref:e=>e}),Or.isOpening=!1,wu=new Map,Tu=new Set,typeof document<`u`&&(document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,jr):jr()),sa.useInsertionEffect,typeof document<`u`&&window.visualViewport,typeof Element<`u`&&`checkVisibility`in Element.prototype,Eu=[`input:not([disabled]):not([type=hidden])`,`select:not([disabled])`,`textarea:not([disabled])`,`button:not([disabled])`,`a[href]`,`area[href]`,`summary`,`iframe`,`object`,`embed`,`audio[controls]`,`video[controls]`,`[contenteditable]:not([contenteditable^="false"])`,`permission`],Eu.join(`:not([hidden]),`)+``,Eu.push(`[tabindex]:not([tabindex="-1"]):not([disabled])`),Eu.join(`:not([hidden]):not([tabindex="-1"]),`),typeof document<`u`&&(ca.useInsertionEffect??ca.useLayoutEffect),globalThis&&globalThis.__DOCS_CONTEXT__===void 0&&(globalThis.__DOCS_CONTEXT__=(0,la.createContext)(null),globalThis.__DOCS_CONTEXT__.displayName=`DocsContext`),Du=globalThis?globalThis.__DOCS_CONTEXT__:(0,la.createContext)(null),Ou=Symbol(`mdxWrappedBlock`),ku=fa.createContext(null),Au=(e,t)=>{let n=r=>{let i=fa.useContext(ku),a=d()[e];if(i?.has(e)||a===n)return fa.createElement(t,{...r});if(a){let t=new Set(i??[]);return t.add(e),fa.createElement(ku.Provider,{value:t},fa.createElement(a,{...r}))}return fa.createElement(t,{...r})};return n.displayName=e,n[Ou]=!0,n},ju=(e,t)=>{let{of:n,meta:r}=e;if(`of`in e&&n===void 0)throw Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");return r&&t.referenceMeta(r,!1),t.resolveOf(n||`story`,[`story`]).story.id},Mu=(e,t,n)=>{let{parameters:r={}}=t||{},{docs:i={}}=r,a=i.story||{};return i.disable?null:e.inline??a.inline??!1?{story:t,inline:!0,height:e.height??a.height,autoplay:e.autoplay??a.autoplay??!1,forceInitialArgs:!!e.__forceInitialArgs,primary:!!e.__primary,renderStoryToElement:n.renderStoryToElement}:{story:t,inline:!1,height:e.height??a.height??a.iframeHeight??`100px`,primary:!!e.__primary}},Nu=(e={__forceInitialArgs:!1,__primary:!1})=>{let t=(0,ua.useContext)(Du),n=Mr(ju(e,t),t);if(!n)return ua.createElement(Gu,null);let r=Mu(e,n,t);return r?ua.createElement(Wu,{...r}):null},Pu=Au(`Story`,Nu),Fu=e=>({borderRadius:e.appBorderRadius,background:e.background.content,boxShadow:e.base===`light`?`rgba(0, 0, 0, 0.10) 0 1px 3px 0`:`rgba(0, 0, 0, 0.20) 0 2px 5px 0`,border:`1px solid ${e.appBorderColor}`}),Iu=(e,t={})=>{let[n,r]=(globalThis.PREVIEW_URL||`iframe.html`).split(`?`),i=new URLSearchParams(r||``);return Object.entries(t).forEach(([e,t])=>{i.set(e,t)}),i.set(`id`,e),`${n}?${i.toString()}`},{window:Lu}=globalThis,Ru=class extends ma.Component{constructor(){super(...arguments),this.iframe=null}componentDidMount(){let{id:e}=this.props;this.iframe=Lu.document.getElementById(e)}shouldComponentUpdate(e){let{scale:t}=e;return t!==this.props.scale&&this.setIframeBodyStyle({width:`${t*100}%`,height:`${t*100}%`,transform:`scale(${1/t})`,transformOrigin:`top left`}),!1}setIframeBodyStyle(e){return Object.assign(this.iframe.contentDocument.body.style,e)}render(){let{id:e,title:t,src:n,allowFullScreen:r,scale:i,...a}=this.props;return ma.createElement(`iframe`,{id:e,title:t,src:n,...r?{allow:`fullscreen`}:{},loading:`lazy`,...a})}},zu=(0,ha.createContext)({scale:1}),Bu=({story:e,primary:t})=>`story--${e.id}${t?`--primary`:``}`,Vu=e=>{let t=(0,pa.useRef)(),[n,r]=(0,pa.useState)(!0),[i,a]=(0,pa.useState)(),{story:o,height:s,autoplay:c,forceInitialArgs:l,renderStoryToElement:u}=e;return(0,pa.useEffect)(()=>{if(!(o&&t.current))return()=>{};let e=t.current,n=u(o,e,{showMain:()=>{},showError:({title:e,description:t})=>a(Error(`${e} - ${t}`)),showException:e=>a(e)},{autoplay:c,forceInitialArgs:l});return r(!1),()=>{Promise.resolve().then(()=>n())}},[c,u,o]),i?pa.createElement(`pre`,null,pa.createElement(ge,{error:i})):pa.createElement(pa.Fragment,null,s?pa.createElement(`style`,null,`#${Bu(e)} { min-height: ${s}; transform: translateZ(0); overflow: auto }`):null,n&&pa.createElement(Gu,null),pa.createElement(`div`,{ref:t,id:`${Bu(e)}-inner`,"data-name":o.name}))},Hu=({story:e,height:t=`500px`})=>pa.createElement(`div`,{style:{width:`100%`,height:t}},pa.createElement(zu.Consumer,null,({scale:t})=>pa.createElement(Ru,{key:`iframe`,id:`iframe--${e.id}`,title:e.name,src:Iu(e.id,{viewMode:`story`}),allowFullScreen:!0,scale:t,style:{width:`100%`,height:`100%`,border:`0 none`}}))),Uu=_.strong(({theme:e})=>({color:e.color.orange})),Wu=e=>{let{inline:t,story:n}=e;return t&&!e.autoplay&&n.usesMount?pa.createElement(Uu,null,`This story mounts inside of play. Set`,` `,pa.createElement(`a`,{href:`https://storybook.js.org/docs/api/doc-blocks/doc-block-story?ref=ui#autoplay`},`autoplay`),` `,`to true to view this story.`):pa.createElement(`div`,{id:Bu(e),className:`sb-story sb-unstyled`,"data-story-block":`true`},t?pa.createElement(Vu,{...e}):pa.createElement(Hu,{...e}))},Gu=()=>pa.createElement(Ne,null),Ku=_(be)({position:`absolute`,left:0,right:0,top:0,transition:`transform .2s linear`,display:`flex`,alignItems:`center`}),Y=_.div({display:`flex`,alignItems:`center`,gap:4}),qu=_.div(({theme:e})=>({width:14,height:14,borderRadius:2,margin:`0 7px`,backgroundColor:e.appBorderColor,animation:`${e.animation.glow} 1.5s ease-in-out infinite`})),Ju=({isLoading:e,storyId:t,zoom:n,resetZoom:r,...i})=>ga.createElement(Ku,{innerStyle:{gap:4,paddingInline:7,justifyContent:`space-between`},...i},ga.createElement(Y,{key:`left`},e?[1,2,3].map(e=>ga.createElement(qu,{key:e})):ga.createElement(ga.Fragment,null,ga.createElement(De,{padding:`small`,variant:`ghost`,key:`zoomin`,onClick:e=>{e.preventDefault(),n(.8)},ariaLabel:`Zoom in`},ga.createElement(Re,null)),ga.createElement(De,{padding:`small`,variant:`ghost`,key:`zoomout`,onClick:e=>{e.preventDefault(),n(1.25)},ariaLabel:`Zoom out`},ga.createElement(ne,null)),ga.createElement(De,{padding:`small`,variant:`ghost`,key:`zoomreset`,onClick:e=>{e.preventDefault(),r()},ariaLabel:`Reset zoom`},ga.createElement(he,null)))),e?ga.createElement(Y,{key:`right`},ga.createElement(qu,null)):t&&ga.createElement(Y,{key:`right`},ga.createElement(De,{asChild:!0,padding:`small`,variant:`ghost`,key:`opener`,ariaLabel:`Open canvas in new tab`},ga.createElement(`a`,{href:Iu(t),target:`_blank`,rel:`noopener noreferrer`},ga.createElement(ce,null))))),Yu=_.div(({isColumn:e,columns:t,layout:n})=>({display:e||!t?`block`:`flex`,position:`relative`,flexWrap:`wrap`,overflow:`auto`,flexDirection:e?`column`:`row`,"& .innerZoomElementWrapper > *":e?{width:n===`fullscreen`?`100%`:`calc(100% - 20px)`,display:`block`}:{maxWidth:n===`fullscreen`?`100%`:`calc(100% - 20px)`,display:`inline-block`}}),({layout:e=`padded`,inline:t})=>e===`centered`||e===`padded`?{padding:t?`32px 22px`:`0px`,"& .innerZoomElementWrapper > *":{width:`auto`,border:`8px solid transparent!important`}}:{},({layout:e=`padded`,inline:t})=>e===`centered`&&t?{display:`flex`,justifyContent:`center`,justifyItems:`center`,alignContent:`center`,alignItems:`center`}:{},({columns:e})=>e&&e>1?{".innerZoomElementWrapper > *":{minWidth:`calc(100% / ${e} - 20px)`}}:{}),Xu=_(Me)({marginTop:-40,marginBottom:40}),Zu=_(yn)(({theme:e})=>({margin:0,borderTopLeftRadius:0,borderTopRightRadius:0,borderBottomLeftRadius:e.appBorderRadius,borderBottomRightRadius:e.appBorderRadius,border:`none`,background:e.base===`light`?`rgba(0, 0, 0, 0.85)`:cn(.05,e.background.content),color:e.color.lightest,button:{background:e.base===`light`?`rgba(0, 0, 0, 0.85)`:cn(.05,e.background.content)}})),Qu=_.div(({theme:e})=>({position:`relative`,overflow:`hidden`,margin:`25px 0 40px`,...Fu(e),"h3 + &":{marginTop:`16px`}}),({withToolbar:e})=>e&&{paddingTop:40}),$u=_(Ju)({position:`absolute`,top:0,left:0,right:0,height:40}),ed=2e3,td=({isLoading:e,isColumn:t,columns:n,children:r,withSource:a,withToolbar:o=!1,isExpanded:s=!1,additionalActions:c,className:l,layout:u=`padded`,inline:d=!1,...f})=>{let[p,m]=(0,L.useState)(s),[h,g]=(0,L.useState)(null),[_,v]=(0,L.useState)(1),y=(0,L.useMemo)(()=>c?[...c]:[],[c]),b=br(),x=[l,`sbdocs`,`sbdocs-preview`,`sb-unstyled`],S=(0,L.useContext)(Du),ee=(0,L.useCallback)(async e=>{let{createCopyToClipboardFunction:t}=await i(async()=>{let{createCopyToClipboardFunction:e}=await import(`./components-DTTvQz4L.js`).then(e=>(e.x(),e.b));return{createCopyToClipboardFunction:e}},__vite__mapDeps([5,1,2,3,6,7,8,9,10]),import.meta.url);await t()(e)},[]),te=(0,L.useCallback)(async()=>{try{await ee(a?.code??``),g(`Copied!`)}catch(e){cu.error(e),g(`Copy error!`)}globalThis.window.setTimeout(()=>g(null),ed)},[ee,a?.code]),C=Pr(r),ne=!!(a&&a.error),re=!!(a&&!a.error);return L.createElement(L.Fragment,null,L.createElement(Qu,{withSource:a,withToolbar:o,...f,className:x.join(` `)},o&&L.createElement($u,{isLoading:e,border:!0,zoom:e=>v(_*e),resetZoom:()=>v(1),storyId:!e&&C?ju(C,S):void 0}),L.createElement(zu.Provider,{value:{scale:_}},L.createElement(Yu,{isColumn:t||!Array.isArray(r),columns:n,layout:u,inline:d,className:`docs-story`},L.createElement(E.Element,{centered:u===`centered`,scale:d?_:1},Array.isArray(r)?r.map((e,t)=>L.createElement(`div`,{key:t},e)):L.createElement(`div`,null,r)))),re&&p&&L.createElement(`div`,{id:b},L.createElement(Zu,{...a,dark:!0,copyable:!1}))),(a||y.length>0)&&L.createElement(Xu,{className:`sbdocs sbdocs-preview-actions`,innerStyle:{paddingInline:0}},ne&&L.createElement(De,{ariaLabel:!1,disabled:!0,variant:`ghost`,className:`docblock-code-toggle docblock-code-toggle--disabled`},L.createElement(oe,null),` No code available`),re&&L.createElement(L.Fragment,null,L.createElement(xe,{ariaLabel:!1,pressed:p,"aria-expanded":p,"aria-controls":b,onClick:()=>m(!p),variant:`ghost`,className:`docblock-code-toggle${p?` docblock-code-toggle--expanded`:``}`},L.createElement(oe,null),` `,p?`Hide code`:`Show code`),L.createElement(De,{ariaLabel:!1,variant:`ghost`,onClick:te},L.createElement(Ce,null),` `,h??`Copy code`)),y.map(({title:e,className:t,onClick:n,disabled:r},i)=>L.createElement(De,{key:i,className:t,onClick:n,disabled:!!r,variant:`ghost`},e))))},_(td)(()=>({".docs-story":{paddingTop:32,paddingBottom:40}})),nd=_(Ee)({height:`fit-content`}),rd=({tabs:e,...t})=>{let n=Object.entries(e);if(n.length===1)return _a.createElement(eu,{...n[0][1],...t});let r=n.map(([e,n],r)=>({id:`prop_table_div_${e}`,title:e,children:()=>{let i=r===0?t:{sort:t.sort};return _a.createElement(eu,{inTabPanel:!0,key:`prop_table_${e}`,...n,...i})}}));return _a.createElement(nd,{tabs:r})},_.div(({theme:e})=>({marginRight:30,fontSize:`${e.typography.size.s1}px`,color:e.base===`light`?fn(.4,e.color.defaultText):fn(.6,e.color.defaultText)})),_.div({overflow:`hidden`,whiteSpace:`nowrap`,textOverflow:`ellipsis`}),_.div({display:`flex`,flexDirection:`row`,alignItems:`baseline`,"&:not(:last-child)":{marginBottom:`1rem`}}),_.div(re,({theme:e})=>({...Fu(e),margin:`25px 0 40px`,padding:`30px 20px`})),_.div(({theme:e})=>({fontWeight:e.typography.weight.bold,color:e.color.defaultText})),_.div(({theme:e})=>({color:fn(.3,e.color.defaultText)})),_.div({flex:`0 0 30%`,lineHeight:`20px`,marginTop:5}),_.div(({theme:e})=>({flex:1,textAlign:`center`,fontFamily:e.typography.fonts.mono,fontSize:e.typography.size.s1,lineHeight:1,overflow:`hidden`,color:fn(.3,e.color.defaultText),"> div":{display:`inline-block`,overflow:`hidden`,maxWidth:`100%`,textOverflow:`ellipsis`},span:{display:`block`,marginTop:2}})),_.div({display:`flex`,flexDirection:`row`}),_.div(({background:e})=>({position:`relative`,flex:1,"&::before":{position:`absolute`,top:0,left:0,width:`100%`,height:`100%`,background:e,content:`""`}})),_.div(({theme:e})=>({...Fu(e),display:`flex`,flexDirection:`row`,height:50,marginBottom:5,overflow:`hidden`,backgroundColor:`white`,backgroundImage:`repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,backgroundClip:`padding-box`})),_.div({display:`flex`,flexDirection:`column`,flex:1,position:`relative`,marginBottom:30}),_.div({flex:1,display:`flex`,flexDirection:`row`}),_.div({display:`flex`,alignItems:`flex-start`}),_.div({flex:`0 0 30%`}),_.div({flex:1}),_.div(({theme:e})=>({display:`flex`,flexDirection:`row`,alignItems:`center`,paddingBottom:20,fontWeight:e.typography.weight.bold,color:fn(.3,e.color.defaultText)})),_.div(({theme:e})=>({fontSize:e.typography.size.s2,lineHeight:`20px`,display:`flex`,flexDirection:`column`})),_.div(({theme:e})=>({fontFamily:e.typography.fonts.base,fontSize:e.typography.size.s1,color:e.color.defaultText,marginLeft:10,lineHeight:1.2,display:`-webkit-box`,overflow:`hidden`,wordBreak:`break-word`,textOverflow:`ellipsis`,WebkitLineClamp:2,WebkitBoxOrient:`vertical`})),_.div(({theme:e})=>({...Fu(e),overflow:`hidden`,height:40,width:40,display:`flex`,alignItems:`center`,justifyContent:`center`,flex:`none`,"> img, > svg":{width:20,height:20}})),_.div({display:`inline-flex`,flexDirection:`row`,alignItems:`center`,width:`100%`}),_.div({display:`grid`,gridTemplateColumns:`repeat(auto-fill, minmax(140px, 1fr))`,gridGap:`8px 16px`,gridAutoFlow:`row dense`,gridAutoRows:50}),{NAVIGATE_URL:id}=__STORYBOOK_MODULE_CORE_EVENTS__,ad={tocSelector:`.js-toc`,tocElement:null,contentSelector:`.js-toc-content`,contentElement:null,headingSelector:`h1, h2, h3`,ignoreSelector:`.js-toc-ignore`,hasInnerContainers:!1,linkClass:`toc-link`,extraLinkClasses:``,activeLinkClass:`is-active-link`,listClass:`toc-list`,extraListClasses:``,isCollapsedClass:`is-collapsed`,collapsibleClass:`is-collapsible`,listItemClass:`toc-list-item`,activeListItemClass:`is-active-li`,collapseDepth:0,scrollSmooth:!0,scrollSmoothDuration:420,scrollSmoothOffset:0,scrollEndCallback:function(e){},headingsOffset:1,enableUrlHashUpdateOnScroll:!1,scrollHandlerType:`auto`,scrollHandlerTimeout:50,throttleTimeout:50,positionFixedSelector:null,positionFixedClass:`is-position-fixed`,fixedSidebarOffset:`auto`,includeHtml:!1,includeTitleTags:!1,onClick:function(e){},orderedList:!0,scrollContainer:null,skipRendering:!1,headingLabelCallback:!1,ignoreHiddenElements:!1,headingObjectCallback:null,basePath:``,disableTocScrollSync:!1,tocScrollingWrapper:null,tocScrollOffset:30,bottomModeThreshold:30},X={},dd=Object.prototype.hasOwnProperty,fd={destroy:Vr,init:Br,refresh:Hr},pd=_.aside(()=>({width:`10rem`,"@media (max-width: 768px)":{display:`none`}})),md=_.nav(({theme:e})=>({position:`fixed`,bottom:0,top:0,width:`10rem`,paddingTop:`4rem`,paddingBottom:`2rem`,overflowY:`auto`,fontFamily:e.typography.fonts.base,fontSize:e.typography.size.s2,WebkitFontSmoothing:`antialiased`,MozOsxFontSmoothing:`grayscale`,WebkitTapHighlightColor:`rgba(0, 0, 0, 0)`,WebkitOverflowScrolling:`touch`,"& *":{boxSizing:`border-box`},"& > .toc-wrapper > .toc-list":{paddingLeft:0,borderLeft:`solid 2px ${e.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${e.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${e.color.mediumlight}`}}},"& .toc-list-item":{position:`relative`,listStyleType:`none`,marginLeft:20,paddingTop:3,paddingBottom:3},"& .toc-list-item::before":{content:`""`,position:`absolute`,height:`100%`,top:0,left:0,transform:`translateX(calc(-2px - 20px))`,borderLeft:`solid 2px ${e.color.mediumdark}`,opacity:0,transition:`opacity 0.2s`},"& .toc-list-item.is-active-li::before":{opacity:1},"& .toc-list-item > a":{color:e.color.defaultText,textDecoration:`none`},"& .toc-list-item.is-active-li > a":{fontWeight:600,color:e.color.secondary,textDecoration:`none`}})),hd=_.p(({theme:e})=>({fontWeight:600,fontSize:`0.875em`,color:e.color.defaultText,textTransform:`uppercase`,marginBottom:10})),gd=({headingId:e,title:t})=>typeof t==`string`||!t?va.createElement(hd,{as:`h2`,id:e,className:t?``:`sb-sr-only`},t||`Table of contents`):va.createElement(`div`,{id:e},t),_d=({title:e,disable:t,headingSelector:n,contentsSelector:r,ignoreSelector:i,unsafeTocbotOptions:a,channel:o,className:s})=>{(0,va.useEffect)(()=>{if(t)return()=>{};let e={tocSelector:`.toc-wrapper`,contentSelector:r??`.sbdocs-content`,headingSelector:n??`h3`,ignoreSelector:i??`.docs-story *, .skip-toc`,headingsOffset:40,scrollSmoothOffset:-40,orderedList:!1,onClick:e=>{if(e.preventDefault(),e.currentTarget instanceof HTMLAnchorElement){let[,t]=e.currentTarget.href.split(`#`);t&&o.emit(id,`#${t}`)}},...a},s=setTimeout(()=>fd.init(e),100);return()=>{clearTimeout(s),fd.destroy()}},[o,t,i,r,n,a]);let c=`table-of-contents`;return va.createElement(pd,{className:s},t?null:va.createElement(md,{"aria-labelledby":c},va.createElement(gd,{headingId:c,title:e}),va.createElement(`div`,{className:`toc-wrapper`})))},vd=e=>`anchor--${e}`,yd=({storyId:e,children:t})=>ya.createElement(`div`,{id:vd(e),className:`sb-anchor`},t),{filterArgTypes:bd}=__STORYBOOK_MODULE_PREVIEW_API__,Z=(e,t)=>(0,xa.useContext)(Du).resolveOf(e,t),xd=e=>e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``),Sd=e=>{if(e)return typeof e==`string`?e.includes(`-`)?xd(e):e:e.__docgenInfo&&e.__docgenInfo.displayName?e.__docgenInfo.displayName:e.name},Cd=e=>{let{of:t}=e;if(`of`in e&&t===void 0)throw Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let{argTypes:n,parameters:r,component:i,subcomponents:a}=Zr(Z(t||`meta`)),o=r?.docs?.argTypes||{},s=e.include??o.include,c=e.exclude??o.exclude,l=e.sort??o.sort,u=bd(n,s,c);if(!(a&&Object.keys(a||{}).length>0))return ba.createElement(eu,{rows:u,sort:l});let d=Sd(i)||`Main`,f=Object.fromEntries(Object.entries(a||{}).map(([e,t])=>[e,{rows:bd(Xr(t,r),s,c),sort:l}])),p={[d]:{rows:u,sort:l},...f};return ba.createElement(rd,{tabs:p,sort:l})},Au(`ArgTypes`,Cd),wd=Object.create,Td=Object.defineProperty,Ed=Object.getOwnPropertyDescriptor,Dd=Object.getOwnPropertyNames,Od=Object.getPrototypeOf,kd=Object.prototype.hasOwnProperty,Q=(e,t)=>function(){return t||(0,e[Dd(e)[0]])((t={exports:{}}).exports,t),t.exports},Ad=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(let i of Dd(t))!kd.call(e,i)&&i!==n&&Td(e,i,{get:()=>t[i],enumerable:!(r=Ed(t,i))||r.enumerable});return e},jd=(e,t,n)=>(n=e==null?{}:wd(Od(e)),Ad(t||!e||!e.__esModule?Td(n,`default`,{value:e,enumerable:!0}):n,e)),Md=[`bubbles`,`cancelBubble`,`cancelable`,`composed`,`currentTarget`,`defaultPrevented`,`eventPhase`,`isTrusted`,`returnValue`,`srcElement`,`target`,`timeStamp`,`type`],$=[`detail`],Nd=Q({"node_modules/.pnpm/es-object-atoms@1.1.1/node_modules/es-object-atoms/index.js"(e,t){t.exports=Object}}),Pd=Q({"node_modules/.pnpm/es-errors@1.3.0/node_modules/es-errors/index.js"(e,t){t.exports=Error}}),Fd=Q({"node_modules/.pnpm/es-errors@1.3.0/node_modules/es-errors/eval.js"(e,t){t.exports=EvalError}}),Id=Q({"node_modules/.pnpm/es-errors@1.3.0/node_modules/es-errors/range.js"(e,t){t.exports=RangeError}}),Ld=Q({"node_modules/.pnpm/es-errors@1.3.0/node_modules/es-errors/ref.js"(e,t){t.exports=ReferenceError}}),Rd=Q({"node_modules/.pnpm/es-errors@1.3.0/node_modules/es-errors/syntax.js"(e,t){t.exports=SyntaxError}}),zd=Q({"node_modules/.pnpm/es-errors@1.3.0/node_modules/es-errors/type.js"(e,t){t.exports=TypeError}}),Bd=Q({"node_modules/.pnpm/es-errors@1.3.0/node_modules/es-errors/uri.js"(e,t){t.exports=URIError}}),Vd=Q({"node_modules/.pnpm/math-intrinsics@1.1.0/node_modules/math-intrinsics/abs.js"(e,t){t.exports=Math.abs}}),Hd=Q({"node_modules/.pnpm/math-intrinsics@1.1.0/node_modules/math-intrinsics/floor.js"(e,t){t.exports=Math.floor}}),Ud=Q({"node_modules/.pnpm/math-intrinsics@1.1.0/node_modules/math-intrinsics/max.js"(e,t){t.exports=Math.max}}),Wd=Q({"node_modules/.pnpm/math-intrinsics@1.1.0/node_modules/math-intrinsics/min.js"(e,t){t.exports=Math.min}}),Gd=Q({"node_modules/.pnpm/math-intrinsics@1.1.0/node_modules/math-intrinsics/pow.js"(e,t){t.exports=Math.pow}}),Kd=Q({"node_modules/.pnpm/math-intrinsics@1.1.0/node_modules/math-intrinsics/round.js"(e,t){t.exports=Math.round}}),qd=Q({"node_modules/.pnpm/math-intrinsics@1.1.0/node_modules/math-intrinsics/isNaN.js"(e,t){t.exports=Number.isNaN||function(e){return e!==e}}}),Jd=Q({"node_modules/.pnpm/math-intrinsics@1.1.0/node_modules/math-intrinsics/sign.js"(e,t){var n=qd();t.exports=function(e){return n(e)||e===0?e:e<0?-1:1}}}),Yd=Q({"node_modules/.pnpm/gopd@1.2.0/node_modules/gopd/gOPD.js"(e,t){t.exports=Object.getOwnPropertyDescriptor}}),Xd=Q({"node_modules/.pnpm/gopd@1.2.0/node_modules/gopd/index.js"(e,t){var n=Yd();if(n)try{n([],`length`)}catch{n=null}t.exports=n}}),Zd=Q({"node_modules/.pnpm/es-define-property@1.0.1/node_modules/es-define-property/index.js"(e,t){var n=Object.defineProperty||!1;if(n)try{n({},`a`,{value:1})}catch{n=!1}t.exports=n}}),Qd=Q({"node_modules/.pnpm/has-symbols@1.1.0/node_modules/has-symbols/shams.js"(e,t){t.exports=function(){if(typeof Symbol!=`function`||typeof Object.getOwnPropertySymbols!=`function`)return!1;if(typeof Symbol.iterator==`symbol`)return!0;var e={},t=Symbol(`test`),n=Object(t);if(typeof t==`string`||Object.prototype.toString.call(t)!==`[object Symbol]`||Object.prototype.toString.call(n)!==`[object Symbol]`)return!1;var r=42;for(var i in e[t]=r,e)return!1;if(typeof Object.keys==`function`&&Object.keys(e).length!==0||typeof Object.getOwnPropertyNames==`function`&&Object.getOwnPropertyNames(e).length!==0)return!1;var a=Object.getOwnPropertySymbols(e);if(a.length!==1||a[0]!==t||!Object.prototype.propertyIsEnumerable.call(e,t))return!1;if(typeof Object.getOwnPropertyDescriptor==`function`){var o=Object.getOwnPropertyDescriptor(e,t);if(o.value!==r||o.enumerable!==!0)return!1}return!0}}}),$d=Q({"node_modules/.pnpm/has-symbols@1.1.0/node_modules/has-symbols/index.js"(e,t){var n=typeof Symbol<`u`&&Symbol,r=Qd();t.exports=function(){return typeof n!=`function`||typeof Symbol!=`function`||typeof n(`foo`)!=`symbol`||typeof Symbol(`bar`)!=`symbol`?!1:r()}}}),ef=Q({"node_modules/.pnpm/get-proto@1.0.1/node_modules/get-proto/Reflect.getPrototypeOf.js"(e,t){t.exports=typeof Reflect<`u`&&Reflect.getPrototypeOf||null}}),tf=Q({"node_modules/.pnpm/get-proto@1.0.1/node_modules/get-proto/Object.getPrototypeOf.js"(e,t){t.exports=Nd().getPrototypeOf||null}}),nf=Q({"node_modules/.pnpm/function-bind@1.1.2/node_modules/function-bind/implementation.js"(e,t){var n=`Function.prototype.bind called on incompatible `,r=Object.prototype.toString,i=Math.max,a=`[object Function]`,o=function(e,t){for(var n=[],r=0;r`u`||!C?n:C(Uint8Array),ce={__proto__:null,"%AggregateError%":typeof AggregateError>`u`?n:AggregateError,"%Array%":Array,"%ArrayBuffer%":typeof ArrayBuffer>`u`?n:ArrayBuffer,"%ArrayIteratorPrototype%":te&&C?C([][Symbol.iterator]()):n,"%AsyncFromSyncIteratorPrototype%":n,"%AsyncFunction%":oe,"%AsyncGenerator%":oe,"%AsyncGeneratorFunction%":oe,"%AsyncIteratorPrototype%":oe,"%Atomics%":typeof Atomics>`u`?n:Atomics,"%BigInt%":typeof BigInt>`u`?n:BigInt,"%BigInt64Array%":typeof BigInt64Array>`u`?n:BigInt64Array,"%BigUint64Array%":typeof BigUint64Array>`u`?n:BigUint64Array,"%Boolean%":Boolean,"%DataView%":typeof DataView>`u`?n:DataView,"%Date%":Date,"%decodeURI%":decodeURI,"%decodeURIComponent%":decodeURIComponent,"%encodeURI%":encodeURI,"%encodeURIComponent%":encodeURIComponent,"%Error%":i,"%eval%":eval,"%EvalError%":a,"%Float16Array%":typeof Float16Array>`u`?n:Float16Array,"%Float32Array%":typeof Float32Array>`u`?n:Float32Array,"%Float64Array%":typeof Float64Array>`u`?n:Float64Array,"%FinalizationRegistry%":typeof FinalizationRegistry>`u`?n:FinalizationRegistry,"%Function%":v,"%GeneratorFunction%":oe,"%Int8Array%":typeof Int8Array>`u`?n:Int8Array,"%Int16Array%":typeof Int16Array>`u`?n:Int16Array,"%Int32Array%":typeof Int32Array>`u`?n:Int32Array,"%isFinite%":isFinite,"%isNaN%":isNaN,"%IteratorPrototype%":te&&C?C(C([][Symbol.iterator]())):n,"%JSON%":typeof JSON==`object`?JSON:n,"%Map%":typeof Map>`u`?n:Map,"%MapIteratorPrototype%":typeof Map>`u`||!te||!C?n:C(new Map()[Symbol.iterator]()),"%Math%":Math,"%Number%":Number,"%Object%":r,"%Object.getOwnPropertyDescriptor%":b,"%parseFloat%":parseFloat,"%parseInt%":parseInt,"%Promise%":typeof Promise>`u`?n:Promise,"%Proxy%":typeof Proxy>`u`?n:Proxy,"%RangeError%":o,"%ReferenceError%":s,"%Reflect%":typeof Reflect>`u`?n:Reflect,"%RegExp%":RegExp,"%Set%":typeof Set>`u`?n:Set,"%SetIteratorPrototype%":typeof Set>`u`||!te||!C?n:C(new Set()[Symbol.iterator]()),"%SharedArrayBuffer%":typeof SharedArrayBuffer>`u`?n:SharedArrayBuffer,"%String%":String,"%StringIteratorPrototype%":te&&C?C(``[Symbol.iterator]()):n,"%Symbol%":te?Symbol:n,"%SyntaxError%":c,"%ThrowTypeError%":ee,"%TypedArray%":se,"%TypeError%":l,"%Uint8Array%":typeof Uint8Array>`u`?n:Uint8Array,"%Uint8ClampedArray%":typeof Uint8ClampedArray>`u`?n:Uint8ClampedArray,"%Uint16Array%":typeof Uint16Array>`u`?n:Uint16Array,"%Uint32Array%":typeof Uint32Array>`u`?n:Uint32Array,"%URIError%":u,"%WeakMap%":typeof WeakMap>`u`?n:WeakMap,"%WeakRef%":typeof WeakRef>`u`?n:WeakRef,"%WeakSet%":typeof WeakSet>`u`?n:WeakSet,"%Function.prototype.call%":ae,"%Function.prototype.apply%":ie,"%Object.defineProperty%":x,"%Object.getPrototypeOf%":ne,"%Math.abs%":d,"%Math.floor%":f,"%Math.max%":p,"%Math.min%":m,"%Math.pow%":h,"%Math.round%":g,"%Math.sign%":_,"%Reflect.getPrototypeOf%":re};if(C)try{null.error}catch(e){le=C(C(e)),ce[`%Error.prototype%`]=le}var le,ue=function e(t){var n;if(t===`%AsyncFunction%`)n=y(`async function () {}`);else if(t===`%GeneratorFunction%`)n=y(`function* () {}`);else if(t===`%AsyncGeneratorFunction%`)n=y(`async function* () {}`);else if(t===`%AsyncGenerator%`){var r=e(`%AsyncGeneratorFunction%`);r&&(n=r.prototype)}else if(t===`%AsyncIteratorPrototype%`){var i=e(`%AsyncGenerator%`);i&&C&&(n=C(i.prototype))}return ce[t]=n,n},w={__proto__:null,"%ArrayBufferPrototype%":[`ArrayBuffer`,`prototype`],"%ArrayPrototype%":[`Array`,`prototype`],"%ArrayProto_entries%":[`Array`,`prototype`,`entries`],"%ArrayProto_forEach%":[`Array`,`prototype`,`forEach`],"%ArrayProto_keys%":[`Array`,`prototype`,`keys`],"%ArrayProto_values%":[`Array`,`prototype`,`values`],"%AsyncFunctionPrototype%":[`AsyncFunction`,`prototype`],"%AsyncGenerator%":[`AsyncGeneratorFunction`,`prototype`],"%AsyncGeneratorPrototype%":[`AsyncGeneratorFunction`,`prototype`,`prototype`],"%BooleanPrototype%":[`Boolean`,`prototype`],"%DataViewPrototype%":[`DataView`,`prototype`],"%DatePrototype%":[`Date`,`prototype`],"%ErrorPrototype%":[`Error`,`prototype`],"%EvalErrorPrototype%":[`EvalError`,`prototype`],"%Float32ArrayPrototype%":[`Float32Array`,`prototype`],"%Float64ArrayPrototype%":[`Float64Array`,`prototype`],"%FunctionPrototype%":[`Function`,`prototype`],"%Generator%":[`GeneratorFunction`,`prototype`],"%GeneratorPrototype%":[`GeneratorFunction`,`prototype`,`prototype`],"%Int8ArrayPrototype%":[`Int8Array`,`prototype`],"%Int16ArrayPrototype%":[`Int16Array`,`prototype`],"%Int32ArrayPrototype%":[`Int32Array`,`prototype`],"%JSONParse%":[`JSON`,`parse`],"%JSONStringify%":[`JSON`,`stringify`],"%MapPrototype%":[`Map`,`prototype`],"%NumberPrototype%":[`Number`,`prototype`],"%ObjectPrototype%":[`Object`,`prototype`],"%ObjProto_toString%":[`Object`,`prototype`,`toString`],"%ObjProto_valueOf%":[`Object`,`prototype`,`valueOf`],"%PromisePrototype%":[`Promise`,`prototype`],"%PromiseProto_then%":[`Promise`,`prototype`,`then`],"%Promise_all%":[`Promise`,`all`],"%Promise_reject%":[`Promise`,`reject`],"%Promise_resolve%":[`Promise`,`resolve`],"%RangeErrorPrototype%":[`RangeError`,`prototype`],"%ReferenceErrorPrototype%":[`ReferenceError`,`prototype`],"%RegExpPrototype%":[`RegExp`,`prototype`],"%SetPrototype%":[`Set`,`prototype`],"%SharedArrayBufferPrototype%":[`SharedArrayBuffer`,`prototype`],"%StringPrototype%":[`String`,`prototype`],"%SymbolPrototype%":[`Symbol`,`prototype`],"%SyntaxErrorPrototype%":[`SyntaxError`,`prototype`],"%TypedArrayPrototype%":[`TypedArray`,`prototype`],"%TypeErrorPrototype%":[`TypeError`,`prototype`],"%Uint8ArrayPrototype%":[`Uint8Array`,`prototype`],"%Uint8ClampedArrayPrototype%":[`Uint8ClampedArray`,`prototype`],"%Uint16ArrayPrototype%":[`Uint16Array`,`prototype`],"%Uint32ArrayPrototype%":[`Uint32Array`,`prototype`],"%URIErrorPrototype%":[`URIError`,`prototype`],"%WeakMapPrototype%":[`WeakMap`,`prototype`],"%WeakSetPrototype%":[`WeakSet`,`prototype`]},T=rf(),de=ff(),fe=T.call(ae,Array.prototype.concat),pe=T.call(ie,Array.prototype.splice),me=T.call(ae,String.prototype.replace),he=T.call(ae,String.prototype.slice),E=T.call(ae,RegExp.prototype.exec),ge=/[^%.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|%$))/g,_e=/\\(\\)?/g,ve=function(e){var t=he(e,0,1),n=he(e,-1);if(t===`%`&&n!==`%`)throw new c("invalid intrinsic syntax, expected closing `%`");if(n===`%`&&t!==`%`)throw new c("invalid intrinsic syntax, expected opening `%`");var r=[];return me(e,ge,function(e,t,n,i){r[r.length]=n?me(i,_e,`$1`):t||e}),r},ye=function(e,t){var n=e,r;if(de(w,n)&&(r=w[n],n=`%`+r[0]+`%`),de(ce,n)){var i=ce[n];if(i===oe&&(i=ue(n)),typeof i>`u`&&!t)throw new l(`intrinsic `+e+` exists, but is not available. Please file an issue!`);return{alias:r,name:n,value:i}}throw new c(`intrinsic `+e+` does not exist!`)};t.exports=function(e,t){if(typeof e!=`string`||e.length===0)throw new l(`intrinsic name must be a non-empty string`);if(arguments.length>1&&typeof t!=`boolean`)throw new l(`"allowMissing" argument must be a boolean`);if(E(/^%?[^%]*%?$/,e)===null)throw new c("`%` may not be present anywhere but at the beginning and end of the intrinsic name");var n=ve(e),r=n.length>0?n[0]:``,i=ye(`%`+r+`%`,t),a=i.name,o=i.value,s=!1,u=i.alias;u&&(r=u[0],pe(n,fe([0,1],u)));for(var d=1,f=!0;d=n.length){var g=b(o,p);f=!!g,o=f&&`get`in g&&!(`originalValue`in g.get)?g.get:o[p]}else f=de(o,p),o=o[p];f&&!s&&(ce[a]=o)}}return o}}}),mf=Q({"node_modules/.pnpm/call-bound@1.0.4/node_modules/call-bound/index.js"(e,t){var n=pf(),r=lf(),i=r([n(`%String.prototype.indexOf%`)]);t.exports=function(e,t){var a=n(e,!!t);return typeof a==`function`&&i(e,`.prototype.`)>-1?r([a]):a}}}),hf=Q({"node_modules/.pnpm/has-tostringtag@1.0.2/node_modules/has-tostringtag/shams.js"(e,t){var n=Qd();t.exports=function(){return n()&&!!Symbol.toStringTag}}}),gf=Q({"node_modules/.pnpm/is-regex@1.2.1/node_modules/is-regex/index.js"(e,t){var n=mf(),r=hf()(),i=ff(),a=Xd(),o;r?(s=n(`RegExp.prototype.exec`),c={},l=function(){throw c},u={toString:l,valueOf:l},typeof Symbol.toPrimitive==`symbol`&&(u[Symbol.toPrimitive]=l),o=function(e){if(!e||typeof e!=`object`)return!1;var t=a(e,`lastIndex`);if(!(t&&i(t,`value`)))return!1;try{s(e,u)}catch(e){return e===c}}):(d=n(`Object.prototype.toString`),f=`[object RegExp]`,o=function(e){return!e||typeof e!=`object`&&typeof e!=`function`?!1:d(e)===f});var s,c,l,u,d,f;t.exports=o}}),_f=Q({"node_modules/.pnpm/is-function@1.0.2/node_modules/is-function/index.js"(e,t){t.exports=r;var n=Object.prototype.toString;function r(e){if(!e)return!1;var t=n.call(e);return t===`[object Function]`||typeof e==`function`&&t!==`[object RegExp]`||typeof window<`u`&&(e===window.setTimeout||e===window.alert||e===window.confirm||e===window.prompt)}}}),vf=Q({"node_modules/.pnpm/safe-regex-test@1.1.0/node_modules/safe-regex-test/index.js"(e,t){var n=mf(),r=gf(),i=n(`RegExp.prototype.exec`),a=zd();t.exports=function(e){if(!r(e))throw new a("`regex` must be a RegExp");return function(t){return i(e,t)!==null}}}}),yf=Q({"node_modules/.pnpm/is-symbol@1.1.1/node_modules/is-symbol/index.js"(e,t){var n=mf(),r=n(`Object.prototype.toString`),i=$d()(),a=vf();i?(o=n(`Symbol.prototype.toString`),s=a(/^Symbol\(.*\)$/),c=function(e){return typeof e.valueOf()==`symbol`?s(o(e)):!1},t.exports=function(e){if(typeof e==`symbol`)return!0;if(!e||typeof e!=`object`||r(e)!==`[object Symbol]`)return!1;try{return c(e)}catch{return!1}}):t.exports=function(e){return!1};var o,s,c}}),bf=jd(gf()),xf=jd(_f()),Sf=jd(yf()),Cf=typeof global==`object`&&global&&global.Object===Object&&global,wf=typeof self==`object`&&self&&self.Object===Object&&self,Tf=Cf||wf||Function(`return this`)(),Ef=Tf.Symbol,Df=Object.prototype,Of=Df.hasOwnProperty,kf=Df.toString,Af=Ef?Ef.toStringTag:void 0,jf=ei,Mf=Object.prototype.toString,Nf=ti,Pf=`[object Null]`,Ff=`[object Undefined]`,If=Ef?Ef.toStringTag:void 0,Lf=ni,Rf=Ef?Ef.prototype:void 0,Rf&&Rf.toString,zf=ri,Bf=`[object AsyncFunction]`,Vf=`[object Function]`,Hf=`[object GeneratorFunction]`,Uf=`[object Proxy]`,Wf=ii,Gf=Tf[`__core-js_shared__`],Kf=(function(){var e=/[^.]+$/.exec(Gf&&Gf.keys&&Gf.keys.IE_PROTO||``);return e?`Symbol(src)_1.`+e:``})(),qf=ai,Jf=Function.prototype.toString,Yf=oi,Xf=/[\\^$.*+?()[\]{}|]/g,Zf=/^\[object .+?Constructor\]$/,Qf=Function.prototype,$f=Object.prototype,ep=Qf.toString,tp=$f.hasOwnProperty,np=RegExp(`^`+ep.call(tp).replace(Xf,`\\$&`).replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,`$1.*?`)+`$`),rp=si,ip=ci,ap=li,op=ui,sp=ap(Object,`create`),cp=di,lp=fi,up=`__lodash_hash_undefined__`,dp=Object.prototype.hasOwnProperty,fp=pi,pp=Object.prototype.hasOwnProperty,mp=mi,hp=`__lodash_hash_undefined__`,gp=hi,gi.prototype.clear=cp,gi.prototype.delete=lp,gi.prototype.get=fp,gi.prototype.has=mp,gi.prototype.set=gp,_p=gi,vp=_i,yp=vi,bp=Array.prototype.splice,xp=yi,Sp=bi,Cp=xi,wp=Si,Ci.prototype.clear=vp,Ci.prototype.delete=xp,Ci.prototype.get=Sp,Ci.prototype.has=Cp,Ci.prototype.set=wp,Tp=Ci,Ep=ap(Tf,`Map`),Dp=wi,Op=Ti,kp=Ei,Ap=Di,jp=Oi,Mp=ki,Np=Ai,ji.prototype.clear=Dp,ji.prototype.delete=Ap,ji.prototype.get=jp,ji.prototype.has=Mp,ji.prototype.set=Np,Pp=ji,Fp=`Expected a function`,Mi.Cache=Pp,Ip=Mi,Lp=500,Rp=Ni,zp=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,Bp=/\\(\\)?/g,Rp(function(e){var t=[];return e.charCodeAt(0)===46&&t.push(``),e.replace(zp,function(e,n,r,i){t.push(r?i.replace(Bp,`$1`):n||e)}),t}),Vp=$r,Hp=/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?Z$/,Up=function(e){let t,n,r,i;return function(a,o){try{if(a===``)return i=[],t=new Map([[o,`[]`]]),n=new Map,r=[],o;let s=n.get(this)||this;for(;r.length&&s!==r[0];)r.shift(),i.pop();if(typeof o==`boolean`)return o;if(o===void 0)return e.allowUndefined?`_undefined_`:void 0;if(o===null)return null;if(typeof o==`number`)return o===-1/0?`_-Infinity_`:o===1/0?`_Infinity_`:Number.isNaN(o)?`_NaN_`:o;if(typeof o==`bigint`)return`_bigint_${o.toString()}`;if(typeof o==`string`)return Hp.test(o)?e.allowDate?`_date_${o}`:void 0:o;if((0,bf.default)(o))return e.allowRegExp?`_regexp_${o.flags}|${o.source}`:void 0;if((0,xf.default)(o))return;if((0,Sf.default)(o)){if(!e.allowSymbol)return;let t=Symbol.keyFor(o);return t===void 0?`_symbol_${o.toString().slice(7,-1)}`:`_gsymbol_${t}`}if(r.length>=e.maxDepth)return Array.isArray(o)?`[Array(${o.length})]`:`[Object]`;if(o===this)return`_duplicate_${JSON.stringify(i)}`;if(o instanceof Error&&e.allowError)return{__isConvertedError__:!0,errorProperties:{...o.cause?{cause:o.cause}:{},...o,name:o.name,message:o.message,stack:o.stack,"_constructor-name_":o.constructor.name}};if(o?.constructor?.name&&o.constructor.name!==`Object`&&!Array.isArray(o)){let e=t.get(o);if(!e){let e={__isClassInstance__:!0,__className__:o.constructor.name,...Object.getOwnPropertyNames(o).reduce((e,t)=>{try{e[t]=o[t]}catch{}return e},{})};return i.push(a),r.unshift(e),t.set(o,JSON.stringify(i)),o!==e&&n.set(o,e),e}return`_duplicate_${e}`}let c=t.get(o);if(!c){let e=Array.isArray(o)?o:Pi(o);return i.push(a),r.unshift(e),t.set(o,JSON.stringify(i)),o!==e&&n.set(o,e),e}return`_duplicate_${c}`}catch{return}}},Wp={maxDepth:10,space:void 0,allowRegExp:!0,allowDate:!0,allowError:!0,allowUndefined:!0,allowSymbol:!0},Gp=(e,t={})=>{let n={...Wp,...t};return JSON.stringify(Pi(e),Up(n),t.space)},Kp=(0,wa.createContext)({sources:{}}),qp=`--unknown--`,Jp=({children:e,channel:t})=>{let[n,r]=(0,wa.useState)({});return(0,wa.useEffect)(()=>{let e=(e,t=null,n=!1)=>{let{id:i,args:a=void 0,source:o,format:s}=typeof e==`string`?{id:e,source:t,format:n}:e,c=a?Fi(a):qp;r(e=>({...e,[i]:{...e[i],[c]:{code:o||``,format:s}}}))};return t.on(s,e),()=>t.off(s,e)},[]),wa.createElement(Kp.Provider,{value:{sources:n}},e)},Yp=(e,t,n)=>{let{sources:r}=n,i=r?.[e];return i?.[Fi(t)]||i?.[`--unknown--`]||{code:``}},Xp=({snippet:e,storyContext:t,typeFromProps:n,transformFromProps:r})=>{let i=t.parameters??{},{__isArgsStory:a}=i,o=i.docs?.source||{},s=n||o.type||l.AUTO,c=s===l.DYNAMIC||s===l.AUTO&&e&&a?e:o.originalSource||``,u=r??o.transform,d=u?Ii(c,u,t):c;return o.code===void 0?d:o.code},Zp=(e,t,n)=>{let{of:r}=e,i=(0,Ca.useMemo)(()=>{if(r)return t.resolveOf(r,[`story`]).story;try{return t.storyById()}catch{}},[t,r]),a=i?t.getStoryContext(i):{},o=e.__forceInitialArgs?a.initialArgs:a.unmappedArgs,s=i?Yp(i.id,o,n):null,c=Xp({snippet:s?s.code:``,storyContext:{...a,args:o},typeFromProps:e.type,transformFromProps:e.transform});if(`of`in e&&r===void 0)throw Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let l=i?.parameters?.docs?.source||{},u=e.format,d=e.language??l.language??`jsx`,f=e.dark??l.dark??!1;return!e.code&&!i?{error:`Oh no! The source is not available.`}:e.code?{code:e.code,format:u,language:d,dark:f}:(u=s?.format??!0,{code:c,format:u,language:d,dark:f})},Qp=e=>{let t=(0,Ca.useContext)(Kp),n=Zp(e,(0,Ca.useContext)(Du),t);return Ca.createElement(yn,{...n})},Au(`Source`,Qp),$p=e=>{let t=(0,Sa.useContext)(Du),n=(0,Sa.useContext)(Kp),{of:r,source:i}=e;if(`of`in e&&r===void 0)throw Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let{story:a}=Z(r||`story`,[`story`]),o=Zp({...i,...r&&{of:r}},t,n),s=e.layout??a.parameters.layout??a.parameters.docs?.canvas?.layout??`padded`,c=e.withToolbar??a.parameters.docs?.canvas?.withToolbar??!1,l=e.additionalActions??a.parameters.docs?.canvas?.additionalActions,u=e.sourceState??a.parameters.docs?.canvas?.sourceState??`hidden`,d=e.className??a.parameters.docs?.canvas?.className,f=e.story?.inline??a.parameters?.docs?.story?.inline??!1;return Sa.createElement(td,{withSource:u===`none`?void 0:o,isExpanded:u===`shown`,withToolbar:c,additionalActions:l,className:d,layout:s,inline:f},Sa.createElement(Pu,{of:r||a.moduleExport,meta:e.meta,...e.story}))},em=Au(`Canvas`,$p),{filterArgTypes:tm}=__STORYBOOK_MODULE_PREVIEW_API__,{RESET_STORY_ARGS:nm,STORY_ARGS_UPDATED:rm,UPDATE_STORY_ARGS:im}=__STORYBOOK_MODULE_CORE_EVENTS__,am=(e,t)=>{let n=om(e,t);if(!n)throw Error(`No result when story was defined`);return n},om=(e,t)=>{let n=e?t.getStoryContext(e):{args:{}},{id:r}=e||{id:`none`},[i,a]=(0,Da.useState)(n.args);(0,Da.useEffect)(()=>{let e=e=>{e.storyId===r&&a(e.args)};return t.channel.on(rm,e),()=>t.channel.off(rm,e)},[r,t.channel]);let o=(0,Da.useCallback)(e=>t.channel.emit(im,{storyId:r,updatedArgs:e}),[r,t.channel]),s=(0,Da.useCallback)(e=>t.channel.emit(nm,{storyId:r,argNames:e}),[r,t.channel]);return e&&[i,o,s]},{GLOBALS_UPDATED:sm}=__STORYBOOK_MODULE_CORE_EVENTS__,cm=(e,t)=>{let[n,r]=(0,Oa.useState)(t.getStoryContext(e).globals);return(0,Oa.useEffect)(()=>{let e=e=>{r(e.globals)};return t.channel.on(sm,e),()=>t.channel.off(sm,e)},[t.channel]),[n]},{Tag:lm}=__STORYBOOK_MODULE_PREVIEW_API__,um=()=>(0,ka.useContext)(Du).componentStories().find(e=>e.tags.includes(lm.AUTODOCS)),dm=e=>{let{of:t}=e,n=(0,Ea.useContext)(Du),r=um(),i=t?n.resolveOf(t,[`story`]).story:r;if(!i)return null;let{parameters:a,argTypes:o,component:s,subcomponents:c}=i,l=a.docs?.controls||{},u=e.include??l.include,d=e.exclude??l.exclude,f=e.sort??l.sort,[p,m,h]=am(i,n),[g]=cm(i,n),_=tm(o,u,d);if(!(c&&Object.keys(c||{}).length>0))return Object.keys(_).length>0||Object.keys(p).length>0?Ea.createElement(eu,{rows:_,sort:f,args:p,globals:g,updateArgs:m,resetArgs:h}):null;let v=Sd(s)||`Story`,y=Object.fromEntries(Object.entries(c||{}).map(([e,t])=>[e,{rows:tm(Li(t,a),u,d),sort:f}])),b={[v]:{rows:_,sort:f},...y};return Ea.createElement(rd,{tabs:b,sort:f,args:p,globals:g,updateArgs:m,resetArgs:h})},fm=Au(`Controls`,dm),{NAVIGATE_URL:pm}=__STORYBOOK_MODULE_CORE_EVENTS__,{document:mm}=globalThis,hm=({className:e,children:t,...n})=>{if(typeof e!=`string`&&(typeof t!=`string`||!t.match(/[\n\r]/g)))return Ma.createElement(Ae,null,t);let r=e&&e.split(`-`);return Ma.createElement(yn,{language:r&&r[1]||`text`,format:!1,code:t,...n})},gm=Le.a,_m=({hash:e,children:t})=>{let n=(0,Ma.useContext)(Du);return Ma.createElement(gm,{href:e,target:`_self`,onClick:t=>{let r=e.substring(1);mm.getElementById(r)&&Ri(n,e)}},t)},vm=e=>{let{href:t,target:n,children:r,...i}=e,a=(0,Ma.useContext)(Du);return!t||n===`_blank`||/^https?:\/\//.test(t)?Ma.createElement(gm,{...e}):t.startsWith(`#`)?Ma.createElement(_m,{hash:t},r):Ma.createElement(gm,{href:t,onClick:e=>{e.button===0&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey&&(e.preventDefault(),Ri(a,e.currentTarget.getAttribute(`href`)||``))},target:n,...i},r)},ym=[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`],bm=ym.reduce((e,t)=>({...e,[t]:_(t)({"& svg":{position:`relative`,top:`-0.1em`,visibility:`hidden`},"&:hover svg":{visibility:`visible`}})}),{}),xm=_.a(()=>({float:`left`,lineHeight:`inherit`,paddingRight:`10px`,marginLeft:`-24px`,color:`inherit`})),Sm=({as:e,id:t,children:n,...r})=>{let i=(0,Ma.useContext)(Du),a=bm[e],o=`#${t}`;return Ma.createElement(a,{id:t,...r},Ma.createElement(xm,{"aria-hidden":`true`,href:o,tabIndex:-1,target:`_self`,onClick:e=>{mm.getElementById(t)&&Ri(i,o)}},Ma.createElement(de,null)),n)},Cm=e=>{let{as:t,id:n,children:r,...i}=e;if(n)return Ma.createElement(Sm,{as:t,id:n,...i},r);let a=t,{as:o,...s}=e;return Ma.createElement(a,{...pe(s,t)})},wm=ym.reduce((e,t)=>({...e,[t]:e=>Ma.createElement(Cm,{as:t,...e})}),{}),Tm=e=>{if(!e.children)return null;if(typeof e.children!=`string`)throw Error(o`The Markdown block only accepts children as a single string, but children were of type: '${typeof e.children}' + ${ln(.02,e.input.background)} 100%)`,borderRadius:6,boxShadow:`${e.base==`dark`?`hsl(0 0 100 / 0.4)`:`hsl(0 0 0 / 0.44)`} 0 0 0 1px inset`,cursor:i?`not-allowed`:`pointer`,height:6,width:`100%`},o={borderColor:Ct(e.color.secondary,.4)},s={width:16,height:16,borderRadius:50,cursor:i?`not-allowed`:`grab`,background:e.input.background,border:`1px solid ${e.base==`dark`?`hsl(0 0 100 / 0.4)`:`hsl(0 0 0 / 0.44)`}`,boxShadow:e.base===`light`?`0 1px 3px 0px ${Ct(e.appBorderColor,.2)}`:`unset`,transition:`all 150ms ease-out`},c={background:`${cn(.05,e.input.background)}`,transform:`scale3d(1.1, 1.1, 1.1) translateY(-1px)`,transition:`all 50ms ease-out`},l={background:`${e.input.background}`,transform:`scale3d(1, 1, 1) translateY(0px)`},u={borderColor:e.color.secondary,boxShadow:e.base===`light`?`0 0px 5px 0px ${e.color.secondary}`:`unset`};return{appearance:`none`,backgroundColor:`transparent`,width:`100%`,"&::-webkit-slider-runnable-track":a,"&::-moz-range-track":a,"&::-ms-track":{...a,color:`transparent`},"&::-moz-range-thumb":{...s,"&:hover":c,"&:active":l},"&::-webkit-slider-thumb":{...s,marginTop:`-6px`,appearance:`none`,"&:hover":c,"&:active":l},"&::-ms-thumb":{...s,marginTop:0,"&:hover":c,"&:active":l},"&:focus":{outline:`none`,"&::-webkit-slider-runnable-track":o,"&::-moz-range-track":o,"&::-ms-track":o,"&::-webkit-slider-thumb":u,"&::-moz-range-thumb":u,"&::-ms-thumb":u},"&::-ms-fill-lower":{borderRadius:6},"&::-ms-fill-upper":{borderRadius:6},"@supports (-ms-ime-align:auto)":{"input[type=range]":{margin:`0`}}}}),Xc=_.span({paddingLeft:5,paddingRight:5,fontSize:12,whiteSpace:`nowrap`,fontFeatureSettings:`tnum`,fontVariantNumeric:`tabular-nums`}),Zc=_(Xc)(({numberOFDecimalsPlaces:e,max:t})=>({width:`${e+t.toString().length*2+3}ch`,textAlign:`right`,flexShrink:0})),Qc=_.div(({readOnly:e})=>({display:`flex`,alignItems:`center`,width:`100%`,opacity:e?.5:1})),$c=({name:e,value:t,onChange:n,min:r=0,max:i=100,step:a=1,onBlur:o,onFocus:s,argType:c})=>{let l=e=>{n(Hs(e.target.value))},u=t!==void 0,d=(0,Xi.useMemo)(()=>ur(a),[a]),f=!!c?.table?.readonly,p=h(e);return Xi.createElement(Qc,{readOnly:f},Xi.createElement(`label`,{htmlFor:p,className:`sb-sr-only`},e),Xi.createElement(Xc,null,r),Xi.createElement(Yc,{id:p,type:`range`,disabled:f,onChange:l,name:e,min:r,max:i,step:a,onFocus:s,onBlur:o,value:t??r}),Xi.createElement(Zc,{numberOFDecimalsPlaces:d,max:i},u?t.toFixed(d):`--`,` / `,i))},el=_.label({display:`flex`}),tl=_.div(({isMaxed:e})=>({marginLeft:`0.75rem`,paddingTop:`0.35rem`,color:e?`red`:void 0})),nl=({name:e,value:t,onChange:n,onFocus:r,onBlur:i,maxLength:a,argType:o})=>{let s=e=>{n(e.target.value)},c=!!o?.table?.readonly,[l,u]=(0,Zi.useState)(!1),d=(0,Zi.useCallback)(()=>{n(``),u(!0)},[u]);if(t===void 0)return Zi.createElement(De,{ariaLabel:!1,variant:`outline`,size:`medium`,disabled:c,id:p(e),onClick:d},`Set string`);let f=typeof t==`string`;return Zi.createElement(el,null,Zi.createElement(Oe.Textarea,{id:h(e),maxLength:a,onChange:s,disabled:c,size:`flex`,placeholder:`Edit string...`,autoFocus:l,valid:f?void 0:`error`,name:e,value:f?t:``,onFocus:r,onBlur:i}),a&&Zi.createElement(tl,{isMaxed:t?.length===a},t?.length??0,` / `,a))},rl=_(Oe.Input)({padding:10}),il=({onChange:e,name:t,accept:n=`image/*`,value:r,argType:i})=>{let a=(0,Qi.useRef)(null),o=i?.control?.readOnly;function s(t){t.target.files&&(e(Array.from(t.target.files).map(e=>URL.createObjectURL(e))),dr(r||[]))}(0,Qi.useEffect)(()=>{r==null&&a.current&&(a.current.value=``)},[r,t]);let c=h(t);return Qi.createElement(Qi.Fragment,null,Qi.createElement(`label`,{htmlFor:c,className:`sb-sr-only`},t),Qi.createElement(rl,{ref:a,id:c,type:`file`,name:t,multiple:!0,disabled:o,onChange:s,accept:n,size:`flex`}))},al=(0,A.lazy)(()=>i(()=>import(`./Color-FRDS63T2-Qm5bW5d4.js`),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10,11]),import.meta.url)),ol=e=>A.createElement(A.Suspense,{fallback:A.createElement(`div`,null)},A.createElement(al,{...e})),sl={array:Jc,object:Jc,boolean:Ns,color:ol,date:Bs,number:Ws,check:pc,"inline-check":pc,radio:pc,"inline-radio":pc,select:pc,"multi-select":pc,range:$c,text:nl,file:il},cl=()=>k.createElement(k.Fragment,null,`-`),ll=({row:e,arg:t,updateArgs:n,isHovered:r})=>{let{key:i,control:a}=e,[o,s]=(0,k.useState)(!1),[c,l]=(0,k.useState)({value:t});(0,k.useEffect)(()=>{o||l({value:t})},[o,t]);let u=(0,k.useCallback)(e=>(l({value:e}),n({[i]:e}),e),[n,i]),d=(0,k.useCallback)(()=>s(!1),[]),f=(0,k.useCallback)(()=>s(!0),[]);if(!a||a.disable){let t=a?.disable!==!0&&e?.type?.name!==`function`;return r&&t?k.createElement(Te,{href:`https://storybook.js.org/docs/essentials/controls?ref=ui`,target:`_blank`,withArrow:!0},`Setup controls`):k.createElement(cl,null)}let p={name:i,argType:e,value:c.value,onChange:u,onBlur:d,onFocus:f},m=sl[a.type]||cl;return k.createElement(m,{...p,...a,controlType:a.type})},ul=_.table(({theme:e})=>({"&&":{borderCollapse:`collapse`,borderSpacing:0,border:`none`,tr:{border:`none !important`,background:`none`},"td, th":{padding:0,border:`none`,width:`auto!important`},marginTop:0,marginBottom:0,"th:first-of-type, td:first-of-type":{paddingLeft:0},"th:last-of-type, td:last-of-type":{paddingRight:0},td:{paddingTop:0,paddingBottom:4,"&:not(:first-of-type)":{paddingLeft:10,paddingRight:0}},tbody:{boxShadow:`none`,border:`none`},code:Pe({theme:e}),div:{span:{fontWeight:`bold`}},"& code":{margin:0,display:`inline-block`,fontSize:e.typography.size.s1}}})),H=({tags:e})=>{let t=(e.params||[]).filter(e=>e.description),n=t.length!==0,r=e.deprecated!=null,i=e.returns!=null&&e.returns.description!=null;return!n&&!i&&!r?null:$i.createElement($i.Fragment,null,$i.createElement(ul,null,$i.createElement(`tbody`,null,r&&$i.createElement(`tr`,{key:`deprecated`},$i.createElement(`td`,{colSpan:2},$i.createElement(`strong`,null,`Deprecated`),`: `,e.deprecated?.toString())),n&&t.map(e=>$i.createElement(`tr`,{key:e.name},$i.createElement(`td`,null,$i.createElement(`code`,null,e.name)),$i.createElement(`td`,null,e.description))),i&&$i.createElement(`tr`,{key:`returns`},$i.createElement(`td`,null,$i.createElement(`code`,null,`Returns`)),$i.createElement(`td`,null,e.returns?.description)))))},dl=8,fl=_.div(({isExpanded:e})=>({display:`flex`,flexDirection:e?`column`:`row`,flexWrap:`wrap`,alignItems:`flex-start`,marginBottom:`-4px`,minWidth:100})),pl=_.details({display:`flex`,flexDirection:`column`,summary:{order:2},"summary::-webkit-details-marker":{display:`none`},"summary::marker":{content:`none`}}),ml=_.div({display:`flex`,flexDirection:`column`,flexWrap:`wrap`,alignItems:`flex-start`}),hl=_.span(Pe,({theme:e,simple:t=!1})=>({flex:`0 0 auto`,fontFamily:e.typography.fonts.mono,fontSize:e.typography.size.s1,wordBreak:`break-word`,whiteSpace:`normal`,maxWidth:`100%`,margin:0,marginRight:`4px`,marginBottom:`4px`,paddingTop:`2px`,paddingBottom:`2px`,lineHeight:`13px`,...t&&{background:`transparent`,border:`0 none`,paddingLeft:0}})),gl=_.summary(({theme:e})=>({fontFamily:e.typography.fonts.mono,color:e.color.secondary,cursor:`pointer`,lineHeight:`normal`,margin:`0 0 4px`,padding:`1px 6px`,background:`none`,border:`none`})),_l=_.button(Pe,({theme:e})=>({fontFamily:e.typography.fonts.mono,color:e.color.secondary,fontSize:e.typography.size.s1,margin:0,whiteSpace:`nowrap`,display:`flex`,alignItems:`center`,cursor:`pointer`,"&:hover":{border:e.base===`light`?`1px solid hsl(0 0 0 / 0.15)`:`1px solid hsl(0 0 100 / 0.15)`},"&:focus-visible":{outline:`2px solid ${e.color.secondary}`,outlineOffset:`2px`}})),vl=_.div(({theme:e})=>({minWidth:200,maxWidth:800,paddingRight:16,fontFamily:e.typography.fonts.mono,fontSize:e.typography.size.s1,boxSizing:`content-box`,"& code":{padding:`0 !important`}})),yl=_(C)({marginLeft:4}),bl=_(we)({marginLeft:4}),xl=()=>F.createElement(`span`,null,`-`),Sl=({text:e,simple:t})=>F.createElement(hl,{simple:t},e),Cl=e=>e?fr(e.split(`|`).map(e=>e.trim())):[e],wl=e=>e.slice(0,dl).map(e=>F.createElement(Sl,{key:e,text:e===``?`""`:e})),Tl=e=>e.slice(dl).map(e=>F.createElement(Sl,{key:e,text:e===``?`""`:e})),El=({value:e,initialExpandedArgs:t})=>{let{summary:n,detail:r}=e,[i,a]=(0,F.useState)(!1),[o,s]=(0,F.useState)(t||!1);if(n==null)return null;let c=typeof n.toString==`function`?n.toString():n;if(r==null){if(/[(){}[\]<>]/.test(c))return F.createElement(Sl,{text:c});let e=Cl(c),t=e.length;return t>dl?F.createElement(fl,{isExpanded:o},wl(e),F.createElement(pl,{open:o,onToggle:e=>s(e.currentTarget.open)},F.createElement(ml,null,Tl(e)),F.createElement(gl,{role:`button`},o?`Show less...`:`Show ${t-dl} more...`))):F.createElement(fl,null,wl(e))}return F.createElement(ve,{ariaLabel:`Arg value details`,placement:`bottom`,visible:i,onVisibleChange:e=>{a(e)},hasCloseButton:!0,popover:F.createElement(vl,null,F.createElement(ke,{language:`jsx`,format:!1},r))},F.createElement(_l,{className:`sbdocs-expandable`},F.createElement(`span`,null,c),i?F.createElement(yl,null):F.createElement(bl,null)))},Dl=({value:e,initialExpandedArgs:t})=>e==null?F.createElement(xl,null):F.createElement(El,{value:e,initialExpandedArgs:t}),Ol=_.span({fontWeight:`bold`}),kl=_.span(({theme:e})=>({color:e.color.negative,fontFamily:e.typography.fonts.mono,cursor:`help`})),Al=_.div(({theme:e})=>({"&&":{p:{margin:`0 0 10px 0`},a:{color:e.color.secondary}},code:{...Pe({theme:e}),fontSize:12,fontFamily:e.typography.fonts.mono},"& code":{margin:0,display:`inline-block`},"& pre > code":{whiteSpace:`pre-wrap`}})),jl=_.div(({theme:e,hasDescription:t})=>({color:e.base===`light`?fn(.1,e.color.defaultText):fn(.2,e.color.defaultText),marginTop:t?4:0})),Ml=_.div(({theme:e,hasDescription:t})=>({color:e.base===`light`?fn(.1,e.color.defaultText):fn(.2,e.color.defaultText),marginTop:t?12:0,marginBottom:12})),Nl=_.td(({expandable:e})=>({paddingLeft:e?`40px !important`:`20px !important`})),Pl=e=>e&&{summary:typeof e==`string`?e:e.name},Fl=e=>{let[t,n]=(0,Vi.useState)(!1),{row:r,updateArgs:i,compact:a,expandable:o,initialExpandedArgs:s}=e,{name:c,description:l}=r,u=r.table||{},d=u.type||Pl(r.type),f=u.defaultValue||r.defaultValue,p=r.type?.required,m=l!=null&&l!==``;return Vi.createElement(`tr`,{onMouseEnter:()=>n(!0),onMouseLeave:()=>n(!1)},Vi.createElement(Nl,{expandable:o??!1},Vi.createElement(Ol,null,c),p?Vi.createElement(kl,{title:`Required`},`*`):null),a?null:Vi.createElement(`td`,null,m&&Vi.createElement(Al,null,Vi.createElement(As,null,l)),u.jsDocTags==null?Vi.createElement(jl,{hasDescription:m},Vi.createElement(Dl,{value:d,initialExpandedArgs:s})):Vi.createElement(Vi.Fragment,null,Vi.createElement(Ml,{hasDescription:m},Vi.createElement(Dl,{value:d,initialExpandedArgs:s})),Vi.createElement(H,{tags:u.jsDocTags}))),a?null:Vi.createElement(`td`,null,Vi.createElement(Dl,{value:f,initialExpandedArgs:s})),i?Vi.createElement(`td`,null,Vi.createElement(ll,{...e,isHovered:t})):null)},Il=_.div(({inAddonPanel:e,theme:t})=>({height:e?`100%`:`auto`,display:`flex`,border:e?`none`:`1px solid ${t.appBorderColor}`,borderRadius:e?0:t.appBorderRadius,padding:e?0:40,alignItems:`center`,justifyContent:`center`,flexDirection:`column`,gap:15,background:t.background.content})),Ll=_.div(({theme:e})=>({display:`flex`,fontSize:e.typography.size.s2-1,gap:25})),Rl=({inAddonPanel:e})=>{let[t,n]=(0,ea.useState)(!0);return(0,ea.useEffect)(()=>{let e=setTimeout(()=>{n(!1)},100);return()=>clearTimeout(e)},[]),t?null:ea.createElement(Il,{inAddonPanel:e},ea.createElement(Se,{title:e?`Interactive story playground`:`Args table with interactive controls couldn't be auto-generated`,description:ea.createElement(ea.Fragment,null,`Controls give you an easy to use interface to test your components. Set your story args and you'll see controls appearing here automatically.`),footer:ea.createElement(Ll,null,e&&ea.createElement(ea.Fragment,null,ea.createElement(Te,{href:`https://storybook.js.org/docs/essentials/controls?ref=ui`,target:`_blank`,withArrow:!0},ea.createElement(ue,null),` Read docs`)),!e&&ea.createElement(Te,{href:`https://storybook.js.org/docs/essentials/controls?ref=ui`,target:`_blank`,withArrow:!0},ea.createElement(ue,null),` Learn how to set that up`))}))},zl=_(ie)(({theme:e})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:e.base===`light`?fn(.25,e.color.defaultText):fn(.3,e.color.defaultText),border:`none`,display:`inline-block`})),Bl=_(T)(({theme:e})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:e.base===`light`?fn(.25,e.color.defaultText):fn(.3,e.color.defaultText),border:`none`,display:`inline-block`})),Vl=_.span(({theme:e})=>({display:`flex`,lineHeight:`20px`,alignItems:`center`})),U=_.td(({theme:e})=>({position:`relative`,letterSpacing:`0.35em`,textTransform:`uppercase`,fontWeight:e.typography.weight.bold,fontSize:e.typography.size.s1-1,color:e.base===`light`?fn(.4,e.color.defaultText):fn(.6,e.color.defaultText),background:`${e.background.app} !important`,"& ~ td":{background:`${e.background.app} !important`}})),W=_.td(({theme:e})=>({position:`relative`,fontWeight:e.typography.weight.bold,fontSize:e.typography.size.s2-1,background:e.background.app})),G=_.td({position:`relative`}),K=_.tr(({theme:e})=>({"&:hover > td":{backgroundColor:`${ln(.005,e.background.app)} !important`,boxShadow:`${e.color.mediumlight} 0 - 1px 0 0 inset`,cursor:`row-resize`}})),q=_.button({background:`none`,border:`none`,padding:`0`,font:`inherit`,position:`absolute`,top:0,bottom:0,left:0,right:0,height:`100%`,width:`100%`,color:`transparent`,cursor:`row-resize !important`}),Hl=({level:e=`section`,label:t,children:n,initialExpanded:r=!0,colSpan:i=3})=>{let[a,o]=(0,ta.useState)(r),s=e===`subsection`?W:U,c=n?.length||0,l=e===`subsection`?`${c} item${c===1?``:`s`}`:``,u=`${a?`Hide`:`Show`} ${e===`subsection`?c:t} item${c===1?``:`s`}`;return ta.createElement(ta.Fragment,null,ta.createElement(K,{title:u},ta.createElement(s,{colSpan:1},ta.createElement(q,{onClick:e=>o(!a),tabIndex:0},u),ta.createElement(Vl,null,a?ta.createElement(zl,null):ta.createElement(Bl,null),t)),ta.createElement(G,{colSpan:i-1},ta.createElement(q,{onClick:e=>o(!a),tabIndex:-1,style:{outline:`none`}},u),a?null:l)),a?n:null)},Ul=_.div(({theme:e})=>({width:`100%`,borderSpacing:0,color:e.color.defaultText})),Wl=_.div(({theme:e})=>({display:`flex`,borderBottom:`1px solid ${e.appBorderColor}`,"&:last-child":{borderBottom:0}})),Gl=_.div(({position:e,theme:t})=>{let n={display:`flex`,flexDirection:`column`,gap:5,padding:`10px 15px`,alignItems:`flex-start`};switch(e){case`first`:return{...n,width:`25%`,paddingLeft:20};case`second`:return{...n,width:`35%`};case`third`:return{...n,width:`15%`};case`last`:return{...n,width:`25%`,paddingRight:20}}}),J=_.div(({theme:e,width:t,height:n})=>({animation:`${e.animation.glow} 1.5s ease-in-out infinite`,background:e.appBorderColor,width:t||`100%`,height:n||16,borderRadius:3})),Kl=()=>I.createElement(Ul,null,I.createElement(Wl,null,I.createElement(Gl,{position:`first`},I.createElement(J,{width:`60%`})),I.createElement(Gl,{position:`second`},I.createElement(J,{width:`30%`})),I.createElement(Gl,{position:`third`},I.createElement(J,{width:`60%`})),I.createElement(Gl,{position:`last`},I.createElement(J,{width:`60%`}))),I.createElement(Wl,null,I.createElement(Gl,{position:`first`},I.createElement(J,{width:`60%`})),I.createElement(Gl,{position:`second`},I.createElement(J,{width:`80%`}),I.createElement(J,{width:`30%`})),I.createElement(Gl,{position:`third`},I.createElement(J,{width:`60%`})),I.createElement(Gl,{position:`last`},I.createElement(J,{width:`60%`}))),I.createElement(Wl,null,I.createElement(Gl,{position:`first`},I.createElement(J,{width:`60%`})),I.createElement(Gl,{position:`second`},I.createElement(J,{width:`80%`}),I.createElement(J,{width:`30%`})),I.createElement(Gl,{position:`third`},I.createElement(J,{width:`60%`})),I.createElement(Gl,{position:`last`},I.createElement(J,{width:`60%`}))),I.createElement(Wl,null,I.createElement(Gl,{position:`first`},I.createElement(J,{width:`60%`})),I.createElement(Gl,{position:`second`},I.createElement(J,{width:`80%`}),I.createElement(J,{width:`30%`})),I.createElement(Gl,{position:`third`},I.createElement(J,{width:`60%`})),I.createElement(Gl,{position:`last`},I.createElement(J,{width:`60%`})))),ql=_.table(({theme:e,compact:t,inAddonPanel:n,inTabPanel:r})=>({"&&":{borderSpacing:0,color:e.color.defaultText,"td, th":{padding:0,border:`none`,verticalAlign:`top`,textOverflow:`ellipsis`},fontSize:e.typography.size.s2-1,lineHeight:`19px`,textAlign:`left`,width:`100%`,marginTop:n?0:25,marginBottom:n?0:40,"thead th:first-of-type, td:first-of-type":{width:`25%`},"th:first-of-type, td:first-of-type":{paddingLeft:20},"th:nth-of-type(2), td:nth-of-type(2)":{...t?null:{width:`35%`}},"td:nth-of-type(3)":{...t?null:{width:`15%`}},"th:last-of-type, td:last-of-type":{paddingRight:20,...t?null:{width:`25%`}},th:{color:e.textMutedColor,paddingTop:10,paddingBottom:10,paddingLeft:15,paddingRight:15},td:{paddingTop:`10px`,paddingBottom:`10px`,"&:not(:first-of-type)":{paddingLeft:15,paddingRight:15},"&:last-of-type":{paddingRight:20}},marginInline:n||r?0:1,paddingInline:r?3:0,tbody:{...n?null:{filter:e.base===`light`?`drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.10))`:`drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.20))`},"> tr > *":{background:e.background.content,borderTop:`1px solid ${e.appBorderColor}`},...n?null:{"> tr:first-of-type > *":{borderBlockStart:`1px solid ${e.appBorderColor}`},"> tr:last-of-type > *":{borderBlockEnd:`1px solid ${e.appBorderColor}`},"> tr > *:first-of-type":{borderInlineStart:`1px solid ${e.appBorderColor}`},"> tr > *:last-of-type":{borderInlineEnd:`1px solid ${e.appBorderColor}`},"> tr:first-of-type > td:first-of-type":{borderTopLeftRadius:e.appBorderRadius},"> tr:first-of-type > td:last-of-type":{borderTopRightRadius:e.appBorderRadius},"> tr:last-of-type > td:first-of-type":{borderBottomLeftRadius:e.appBorderRadius},"> tr:last-of-type > td:last-of-type":{borderBottomRightRadius:e.appBorderRadius}}}}})),Jl=_.div({position:`relative`}),Yl=_.div({position:`absolute`,right:22,top:10}),Xl=_(De)({margin:`-4px -12px -4px 0`}),Zl={alpha:(e,t)=>(e.name??``).localeCompare(t.name??``),requiredFirst:(e,t)=>!!t.type?.required-+!!e.type?.required||(e.name??``).localeCompare(t.name??``),none:null},Ql=(e,t)=>{let n={ungrouped:[],ungroupedSubsections:{},sections:{}};if(!e)return n;Object.entries(e).forEach(([e,t])=>{let{category:r,subcategory:i}=t?.table||{};if(r){let a=n.sections[r]||{ungrouped:[],subsections:{}};if(!i)a.ungrouped.push({key:e,...t});else{let n=a.subsections[i]||[];n.push({key:e,...t}),a.subsections[i]=n}n.sections[r]=a}else if(i){let r=n.ungroupedSubsections[i]||[];r.push({key:e,...t}),n.ungroupedSubsections[i]=r}else n.ungrouped.push({key:e,...t})});let r=Zl[t],i=e=>r?Object.keys(e).reduce((t,n)=>({...t,[n]:e[n].sort(r)}),{}):e;return{ungrouped:r?n.ungrouped.sort(r):n.ungrouped,ungroupedSubsections:i(n.ungroupedSubsections),sections:Object.keys(n.sections).reduce((e,t)=>({...e,[t]:{ungrouped:r?n.sections[t].ungrouped.sort(r):n.sections[t].ungrouped,subsections:i(n.sections[t].subsections)}}),{})}},$l=(e,t,n)=>{try{return Fe(e,t,n)}catch(e){return Ga.warn(e.message),!1}},eu=e=>{let{updateArgs:t,resetArgs:n,compact:r,inAddonPanel:i,inTabPanel:a,initialExpandedArgs:o,sort:s=`none`,isLoading:c}=e;if(`error`in e){let{error:t}=e;return O.createElement(mn,null,t,`\xA0`,O.createElement(Te,{href:`http://storybook.js.org/docs/?ref=ui`,target:`_blank`,withArrow:!0},O.createElement(ue,null),` Read the docs`))}if(c)return O.createElement(Kl,null);let{rows:l,args:u,globals:d}=`rows`in e?e:{rows:void 0,args:void 0,globals:void 0},f=Ql(kn(l||{},e=>!e?.table?.disable&&$l(e,u||{},d||{})),s),p=f.ungrouped.length===0,m=Object.entries(f.sections).length===0,h=Object.entries(f.ungroupedSubsections).length===0;if(p&&m&&h)return O.createElement(Rl,{inAddonPanel:i});let g=1;t&&(g+=1),r||(g+=2);let _=Object.keys(f.sections).length>0,v={updateArgs:t,compact:r,inAddonPanel:i,initialExpandedArgs:o};return O.createElement(ye,null,O.createElement(Jl,null,t&&!c&&n&&O.createElement(Yl,null,O.createElement(Xl,{variant:`ghost`,padding:`small`,onClick:()=>n(),ariaLabel:`Reset controls`},O.createElement(fe,null))),O.createElement(ql,{compact:r,inAddonPanel:i,inTabPanel:a,className:`docblock-argstable sb-unstyled`},O.createElement(`thead`,{className:`docblock-argstable-head`},O.createElement(`tr`,null,O.createElement(`th`,null,O.createElement(`span`,null,`Name`)),r?null:O.createElement(`th`,null,O.createElement(`span`,null,`Description`)),r?null:O.createElement(`th`,null,O.createElement(`span`,null,`Default`)),t?O.createElement(`th`,null,O.createElement(`span`,null,`Control`)):null)),O.createElement(`tbody`,{className:`docblock-argstable-body`},f.ungrouped.map(e=>O.createElement(Fl,{key:e.key,row:e,arg:u&&u[e.key],...v})),Object.entries(f.ungroupedSubsections).map(([e,t])=>O.createElement(Hl,{key:e,label:e,level:`subsection`,colSpan:g},t.map(e=>O.createElement(Fl,{key:e.key,row:e,arg:u&&u[e.key],expandable:_,...v})))),Object.entries(f.sections).map(([e,t])=>O.createElement(Hl,{key:e,label:e,level:`section`,colSpan:g},t.ungrouped.map(e=>O.createElement(Fl,{key:e.key,row:e,arg:u&&u[e.key],...v})),Object.entries(t.subsections).map(([e,t])=>O.createElement(Hl,{key:e,label:e,level:`subsection`,colSpan:g},t.map(e=>O.createElement(Fl,{key:e.key,row:e,arg:u&&u[e.key],expandable:_,...v}))))))))))},tu=e=>`& :where(${e}:not(.sb-anchor, .sb-unstyled, .sb-unstyled ${e}))`,nu=600,ru=_.h1(({theme:e})=>({...re({theme:e}),color:e.color.defaultText,fontSize:e.typography.size.m3,fontWeight:e.typography.weight.bold,lineHeight:`32px`,[`@media (min-width: ${nu}px)`]:{fontSize:e.typography.size.l1,lineHeight:`36px`,marginBottom:`16px`}})),iu=_.h2(({theme:e})=>({...re({theme:e}),fontWeight:e.typography.weight.regular,fontSize:e.typography.size.s3,lineHeight:`20px`,borderBottom:`none`,marginBottom:15,[`@media (min-width: ${nu}px)`]:{fontSize:e.typography.size.m1,lineHeight:`28px`,marginBottom:24},color:fn(.25,e.color.defaultText)})),au=_.div(({theme:e})=>{let t={fontFamily:e.typography.fonts.base,fontSize:e.typography.size.s3,margin:0,WebkitFontSmoothing:`antialiased`,MozOsxFontSmoothing:`grayscale`,WebkitTapHighlightColor:`rgba(0, 0, 0, 0)`,WebkitOverflowScrolling:`touch`},n={margin:`20px 0 8px`,padding:0,cursor:`text`,position:`relative`,color:e.color.defaultText,"&:first-of-type":{marginTop:0,paddingTop:0},"&:hover a.anchor":{textDecoration:`none`},"& code":{fontSize:`inherit`}},r={lineHeight:1,margin:`0 2px`,padding:`3px 5px`,whiteSpace:`nowrap`,borderRadius:3,fontSize:e.typography.size.s2-1,border:e.base===`light`?`1px solid ${e.color.mediumlight}`:`1px solid ${e.color.darker}`,color:e.base===`light`?fn(.1,e.color.defaultText):fn(.3,e.color.defaultText),backgroundColor:e.base===`light`?e.color.lighter:e.color.border};return{maxWidth:1e3,width:`100%`,minWidth:0,[tu(`a`)]:{...t,fontSize:`inherit`,lineHeight:`24px`,color:e.color.secondary,textDecoration:`underline`,textDecorationThickness:`0.03125rem`,textUnderlineOffset:`0.11em`,"&.absent":{color:`#cc0000`},"&.anchor":{display:`block`,paddingLeft:30,marginLeft:-30,cursor:`pointer`,position:`absolute`,top:0,left:0,bottom:0,textDecoration:`none`},"&.anchor:hover, &.anchor:focus":{textDecoration:`underline`}},[tu(`blockquote`)]:{...t,margin:`16px 0`,borderLeft:`4px solid ${e.color.medium}`,padding:`0 15px`,color:e.color.dark,"& > :first-of-type":{marginTop:0},"& > :last-child":{marginBottom:0}},[tu(`div`)]:t,[tu(`dl`)]:{...t,margin:`16px 0`,padding:0,"& dt":{fontSize:`14px`,fontWeight:`bold`,fontStyle:`italic`,padding:0,margin:`16px 0 4px`},"& dt:first-of-type":{padding:0},"& dt > :first-of-type":{marginTop:0},"& dt > :last-child":{marginBottom:0},"& dd":{margin:`0 0 16px`,padding:`0 15px`},"& dd > :first-of-type":{marginTop:0},"& dd > :last-child":{marginBottom:0}},[tu(`h1`)]:{...t,...n,fontSize:`${e.typography.size.l1}px`,fontWeight:e.typography.weight.bold},[tu(`h2`)]:{...t,...n,fontSize:`${e.typography.size.m2}px`,paddingBottom:4,borderBottom:`1px solid ${e.appBorderColor}`},[tu(`h3`)]:{...t,...n,fontSize:`${e.typography.size.m1}px`,fontWeight:e.typography.weight.bold},[tu(`h4`)]:{...t,...n,fontSize:`${e.typography.size.s3}px`},[tu(`h5`)]:{...t,...n,fontSize:`${e.typography.size.s2}px`},[tu(`h6`)]:{...t,...n,fontSize:`${e.typography.size.s2}px`,color:e.color.dark},[tu(`hr`)]:{border:`0 none`,borderTop:`1px solid ${e.appBorderColor}`,height:4,padding:0},[tu(`img`)]:{maxWidth:`100%`},[tu(`li`)]:{...t,fontSize:e.typography.size.s2,color:e.color.defaultText,lineHeight:`24px`,"& + li":{marginTop:`.25em`},"& ul, & ol":{marginTop:`.25em`,marginBottom:0},"& code":r},[tu(`ol`)]:{...t,margin:`16px 0`,paddingLeft:30,"& :first-of-type":{marginTop:0},"& :last-child":{marginBottom:0}},[tu(`p`)]:{...t,margin:`16px 0`,fontSize:e.typography.size.s2,lineHeight:`24px`,color:e.color.defaultText,"& code":r},[tu(`pre`)]:{...t,fontFamily:e.typography.fonts.mono,WebkitFontSmoothing:`antialiased`,MozOsxFontSmoothing:`grayscale`,lineHeight:`18px`,padding:`11px 1rem`,whiteSpace:`pre-wrap`,color:`inherit`,borderRadius:3,margin:`1rem 0`,"&:not(.prismjs)":{background:`transparent`,border:`none`,borderRadius:0,padding:0,margin:0},"& pre, &.prismjs":{padding:15,margin:0,whiteSpace:`pre-wrap`,color:`inherit`,fontSize:`13px`,lineHeight:`19px`,code:{color:`inherit`,fontSize:`inherit`}},"& code":{whiteSpace:`pre`},"& code, & tt":{border:`none`}},[tu(`span`)]:{...t,"&.frame":{display:`block`,overflow:`hidden`,"& > span":{border:`1px solid ${e.color.medium}`,display:`block`,float:`left`,overflow:`hidden`,margin:`13px 0 0`,padding:7,width:`auto`},"& span img":{display:`block`,float:`left`},"& span span":{clear:`both`,color:e.color.darkest,display:`block`,padding:`5px 0 0`}},"&.align-center":{display:`block`,overflow:`hidden`,clear:`both`,"& > span":{display:`block`,overflow:`hidden`,margin:`13px auto 0`,textAlign:`center`},"& span img":{margin:`0 auto`,textAlign:`center`}},"&.align-right":{display:`block`,overflow:`hidden`,clear:`both`,"& > span":{display:`block`,overflow:`hidden`,margin:`13px 0 0`,textAlign:`right`},"& span img":{margin:0,textAlign:`right`}},"&.float-left":{display:`block`,marginRight:13,overflow:`hidden`,float:`left`,"& span":{margin:`13px 0 0`}},"&.float-right":{display:`block`,marginLeft:13,overflow:`hidden`,float:`right`,"& > span":{display:`block`,overflow:`hidden`,margin:`13px auto 0`,textAlign:`right`}}},[tu(`table`)]:{...t,margin:`16px 0`,fontSize:e.typography.size.s2,lineHeight:`24px`,padding:0,borderCollapse:`collapse`,"& tr":{borderTop:`1px solid ${e.appBorderColor}`,backgroundColor:e.appContentBg,margin:0,padding:0},"& tr:nth-of-type(2n)":{backgroundColor:e.base===`dark`?e.color.darker:e.color.lighter},"& tr th":{fontWeight:`bold`,color:e.color.defaultText,border:`1px solid ${e.appBorderColor}`,margin:0,padding:`6px 13px`},"& tr td":{border:`1px solid ${e.appBorderColor}`,color:e.color.defaultText,margin:0,padding:`6px 13px`},"& tr th :first-of-type, & tr td :first-of-type":{marginTop:0},"& tr th :last-child, & tr td :last-child":{marginBottom:0}},[tu(`ul`)]:{...t,margin:`16px 0`,paddingLeft:30,"& :first-of-type":{marginTop:0},"& :last-child":{marginBottom:0},listStyle:`disc`}}}),ou=_.div(({theme:e})=>({background:e.background.content,display:`flex`,flexDirection:`row-reverse`,justifyContent:`center`,padding:`4rem 20px`,minHeight:`100vh`,boxSizing:`border-box`,gap:`3rem`,[`@media (min-width: ${nu}px)`]:{}})),su=({children:e,toc:t})=>na.createElement(ou,{className:`sbdocs sbdocs-wrapper`},t,na.createElement(au,{className:`sbdocs sbdocs-content`},e)),{logger:cu}=__STORYBOOK_MODULE_CLIENT_LOGGER__,lu=typeof document<`u`?ra.useLayoutEffect:()=>{},uu={prefix:String(Math.round(Math.random()*1e10)),current:0},du=aa.createContext(uu),fu=aa.createContext(!1),typeof window<`u`&&window.document&&window.document.createElement,pu=new WeakMap,mu=typeof aa.useId==`function`?hr:mr,hu=!!(typeof window<`u`&&window.document&&window.document.createElement),gu=new Map,typeof FinalizationRegistry<`u`&&(_u=new FinalizationRegistry(e=>{gu.delete(e)})),vu=null,yu=Dr(function(){return Er(/^Mac/i)}),bu=Dr(function(){return Er(/^iPad/i)||yu()&&navigator.maxTouchPoints>1}),xu=Dr(function(){return Tr(/AppleWebKit/i)&&!Su()}),Su=Dr(function(){return Tr(/Chrome/i)}),Cu=Dr(function(){return Tr(/Firefox/i)}),(0,oa.createContext)({isNative:!0,open:Ar,useHref:e=>e}),Or.isOpening=!1,wu=new Map,Tu=new Set,typeof document<`u`&&(document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,jr):jr()),sa.useInsertionEffect,typeof document<`u`&&window.visualViewport,typeof Element<`u`&&`checkVisibility`in Element.prototype,Eu=[`input:not([disabled]):not([type=hidden])`,`select:not([disabled])`,`textarea:not([disabled])`,`button:not([disabled])`,`a[href]`,`area[href]`,`summary`,`iframe`,`object`,`embed`,`audio[controls]`,`video[controls]`,`[contenteditable]:not([contenteditable^="false"])`,`permission`],Eu.join(`:not([hidden]),`)+``,Eu.push(`[tabindex]:not([tabindex="-1"]):not([disabled])`),Eu.join(`:not([hidden]):not([tabindex="-1"]),`),typeof document<`u`&&(ca.useInsertionEffect??ca.useLayoutEffect),globalThis&&globalThis.__DOCS_CONTEXT__===void 0&&(globalThis.__DOCS_CONTEXT__=(0,la.createContext)(null),globalThis.__DOCS_CONTEXT__.displayName=`DocsContext`),Du=globalThis?globalThis.__DOCS_CONTEXT__:(0,la.createContext)(null),Ou=Symbol(`mdxWrappedBlock`),ku=fa.createContext(null),Au=(e,t)=>{let n=r=>{let i=fa.useContext(ku),a=d()[e];if(i?.has(e)||a===n)return fa.createElement(t,{...r});if(a){let t=new Set(i??[]);return t.add(e),fa.createElement(ku.Provider,{value:t},fa.createElement(a,{...r}))}return fa.createElement(t,{...r})};return n.displayName=e,n[Ou]=!0,n},ju=(e,t)=>{let{of:n,meta:r}=e;if(`of`in e&&n===void 0)throw Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");return r&&t.referenceMeta(r,!1),t.resolveOf(n||`story`,[`story`]).story.id},Mu=(e,t,n)=>{let{parameters:r={}}=t||{},{docs:i={}}=r,a=i.story||{};return i.disable?null:e.inline??a.inline??!1?{story:t,inline:!0,height:e.height??a.height,autoplay:e.autoplay??a.autoplay??!1,forceInitialArgs:!!e.__forceInitialArgs,primary:!!e.__primary,renderStoryToElement:n.renderStoryToElement}:{story:t,inline:!1,height:e.height??a.height??a.iframeHeight??`100px`,primary:!!e.__primary}},Nu=(e={__forceInitialArgs:!1,__primary:!1})=>{let t=(0,ua.useContext)(Du),n=Mr(ju(e,t),t);if(!n)return ua.createElement(Gu,null);let r=Mu(e,n,t);return r?ua.createElement(Wu,{...r}):null},Pu=Au(`Story`,Nu),Fu=e=>({borderRadius:e.appBorderRadius,background:e.background.content,boxShadow:e.base===`light`?`rgba(0, 0, 0, 0.10) 0 1px 3px 0`:`rgba(0, 0, 0, 0.20) 0 2px 5px 0`,border:`1px solid ${e.appBorderColor}`}),Iu=(e,t={})=>{let[n,r]=(globalThis.PREVIEW_URL||`iframe.html`).split(`?`),i=new URLSearchParams(r||``);return Object.entries(t).forEach(([e,t])=>{i.set(e,t)}),i.set(`id`,e),`${n}?${i.toString()}`},{window:Lu}=globalThis,Ru=class extends ma.Component{constructor(){super(...arguments),this.iframe=null}componentDidMount(){let{id:e}=this.props;this.iframe=Lu.document.getElementById(e)}shouldComponentUpdate(e){let{scale:t}=e;return t!==this.props.scale&&this.setIframeBodyStyle({width:`${t*100}%`,height:`${t*100}%`,transform:`scale(${1/t})`,transformOrigin:`top left`}),!1}setIframeBodyStyle(e){return Object.assign(this.iframe.contentDocument.body.style,e)}render(){let{id:e,title:t,src:n,allowFullScreen:r,scale:i,...a}=this.props;return ma.createElement(`iframe`,{id:e,title:t,src:n,...r?{allow:`fullscreen`}:{},loading:`lazy`,...a})}},zu=(0,ha.createContext)({scale:1}),Bu=({story:e,primary:t})=>`story--${e.id}${t?`--primary`:``}`,Vu=e=>{let t=(0,pa.useRef)(),[n,r]=(0,pa.useState)(!0),[i,a]=(0,pa.useState)(),{story:o,height:s,autoplay:c,forceInitialArgs:l,renderStoryToElement:u}=e;return(0,pa.useEffect)(()=>{if(!(o&&t.current))return()=>{};let e=t.current,n=u(o,e,{showMain:()=>{},showError:({title:e,description:t})=>a(Error(`${e} - ${t}`)),showException:e=>a(e)},{autoplay:c,forceInitialArgs:l});return r(!1),()=>{Promise.resolve().then(()=>n())}},[c,u,o]),i?pa.createElement(`pre`,null,pa.createElement(ge,{error:i})):pa.createElement(pa.Fragment,null,s?pa.createElement(`style`,null,`#${Bu(e)} { min-height: ${s}; transform: translateZ(0); overflow: auto }`):null,n&&pa.createElement(Gu,null),pa.createElement(`div`,{ref:t,id:`${Bu(e)}-inner`,"data-name":o.name}))},Hu=({story:e,height:t=`500px`})=>pa.createElement(`div`,{style:{width:`100%`,height:t}},pa.createElement(zu.Consumer,null,({scale:t})=>pa.createElement(Ru,{key:`iframe`,id:`iframe--${e.id}`,title:e.name,src:Iu(e.id,{viewMode:`story`}),allowFullScreen:!0,scale:t,style:{width:`100%`,height:`100%`,border:`0 none`}}))),Uu=_.strong(({theme:e})=>({color:e.color.orange})),Wu=e=>{let{inline:t,story:n}=e;return t&&!e.autoplay&&n.usesMount?pa.createElement(Uu,null,`This story mounts inside of play. Set`,` `,pa.createElement(`a`,{href:`https://storybook.js.org/docs/api/doc-blocks/doc-block-story?ref=ui#autoplay`},`autoplay`),` `,`to true to view this story.`):pa.createElement(`div`,{id:Bu(e),className:`sb-story sb-unstyled`,"data-story-block":`true`},t?pa.createElement(Vu,{...e}):pa.createElement(Hu,{...e}))},Gu=()=>pa.createElement(Ne,null),Ku=_(be)({position:`absolute`,left:0,right:0,top:0,transition:`transform .2s linear`,display:`flex`,alignItems:`center`}),Y=_.div({display:`flex`,alignItems:`center`,gap:4}),qu=_.div(({theme:e})=>({width:14,height:14,borderRadius:2,margin:`0 7px`,backgroundColor:e.appBorderColor,animation:`${e.animation.glow} 1.5s ease-in-out infinite`})),Ju=({isLoading:e,storyId:t,zoom:n,resetZoom:r,...i})=>ga.createElement(Ku,{innerStyle:{gap:4,paddingInline:7,justifyContent:`space-between`},...i},ga.createElement(Y,{key:`left`},e?[1,2,3].map(e=>ga.createElement(qu,{key:e})):ga.createElement(ga.Fragment,null,ga.createElement(De,{padding:`small`,variant:`ghost`,key:`zoomin`,onClick:e=>{e.preventDefault(),n(.8)},ariaLabel:`Zoom in`},ga.createElement(Re,null)),ga.createElement(De,{padding:`small`,variant:`ghost`,key:`zoomout`,onClick:e=>{e.preventDefault(),n(1.25)},ariaLabel:`Zoom out`},ga.createElement(ne,null)),ga.createElement(De,{padding:`small`,variant:`ghost`,key:`zoomreset`,onClick:e=>{e.preventDefault(),r()},ariaLabel:`Reset zoom`},ga.createElement(he,null)))),e?ga.createElement(Y,{key:`right`},ga.createElement(qu,null)):t&&ga.createElement(Y,{key:`right`},ga.createElement(De,{asChild:!0,padding:`small`,variant:`ghost`,key:`opener`,ariaLabel:`Open canvas in new tab`},ga.createElement(`a`,{href:Iu(t),target:`_blank`,rel:`noopener noreferrer`},ga.createElement(ce,null))))),Yu=_.div(({isColumn:e,columns:t,layout:n})=>({display:e||!t?`block`:`flex`,position:`relative`,flexWrap:`wrap`,overflow:`auto`,flexDirection:e?`column`:`row`,"& .innerZoomElementWrapper > *":e?{width:n===`fullscreen`?`100%`:`calc(100% - 20px)`,display:`block`}:{maxWidth:n===`fullscreen`?`100%`:`calc(100% - 20px)`,display:`inline-block`}}),({layout:e=`padded`,inline:t})=>e===`centered`||e===`padded`?{padding:t?`32px 22px`:`0px`,"& .innerZoomElementWrapper > *":{width:`auto`,border:`8px solid transparent!important`}}:{},({layout:e=`padded`,inline:t})=>e===`centered`&&t?{display:`flex`,justifyContent:`center`,justifyItems:`center`,alignContent:`center`,alignItems:`center`}:{},({columns:e})=>e&&e>1?{".innerZoomElementWrapper > *":{minWidth:`calc(100% / ${e} - 20px)`}}:{}),Xu=_(Me)({marginTop:-40,marginBottom:40}),Zu=_(yn)(({theme:e})=>({margin:0,borderTopLeftRadius:0,borderTopRightRadius:0,borderBottomLeftRadius:e.appBorderRadius,borderBottomRightRadius:e.appBorderRadius,border:`none`,background:e.base===`light`?`rgba(0, 0, 0, 0.85)`:cn(.05,e.background.content),color:e.color.lightest,button:{background:e.base===`light`?`rgba(0, 0, 0, 0.85)`:cn(.05,e.background.content)}})),Qu=_.div(({theme:e})=>({position:`relative`,overflow:`hidden`,margin:`25px 0 40px`,...Fu(e),"h3 + &":{marginTop:`16px`}}),({withToolbar:e})=>e&&{paddingTop:40}),$u=_(Ju)({position:`absolute`,top:0,left:0,right:0,height:40}),ed=2e3,td=({isLoading:e,isColumn:t,columns:n,children:r,withSource:a,withToolbar:o=!1,isExpanded:s=!1,additionalActions:c,className:l,layout:u=`padded`,inline:d=!1,...f})=>{let[p,m]=(0,L.useState)(s),[h,g]=(0,L.useState)(null),[_,v]=(0,L.useState)(1),y=(0,L.useMemo)(()=>c?[...c]:[],[c]),b=br(),x=[l,`sbdocs`,`sbdocs-preview`,`sb-unstyled`],S=(0,L.useContext)(Du),ee=(0,L.useCallback)(async e=>{let{createCopyToClipboardFunction:t}=await i(async()=>{let{createCopyToClipboardFunction:e}=await import(`./components-DW-5dJuS.js`).then(e=>(e.x(),e.b));return{createCopyToClipboardFunction:e}},__vite__mapDeps([6,1,2,3,4,7,8,9,10,11]),import.meta.url);await t()(e)},[]),te=(0,L.useCallback)(async()=>{try{await ee(a?.code??``),g(`Copied!`)}catch(e){cu.error(e),g(`Copy error!`)}globalThis.window.setTimeout(()=>g(null),ed)},[ee,a?.code]),C=Pr(r),ne=!!(a&&a.error),re=!!(a&&!a.error);return L.createElement(L.Fragment,null,L.createElement(Qu,{withSource:a,withToolbar:o,...f,className:x.join(` `)},o&&L.createElement($u,{isLoading:e,border:!0,zoom:e=>v(_*e),resetZoom:()=>v(1),storyId:!e&&C?ju(C,S):void 0}),L.createElement(zu.Provider,{value:{scale:_}},L.createElement(Yu,{isColumn:t||!Array.isArray(r),columns:n,layout:u,inline:d,className:`docs-story`},L.createElement(E.Element,{centered:u===`centered`,scale:d?_:1},Array.isArray(r)?r.map((e,t)=>L.createElement(`div`,{key:t},e)):L.createElement(`div`,null,r)))),re&&p&&L.createElement(`div`,{id:b},L.createElement(Zu,{...a,dark:!0,copyable:!1}))),(a||y.length>0)&&L.createElement(Xu,{className:`sbdocs sbdocs-preview-actions`,innerStyle:{paddingInline:0}},ne&&L.createElement(De,{ariaLabel:!1,disabled:!0,variant:`ghost`,className:`docblock-code-toggle docblock-code-toggle--disabled`},L.createElement(oe,null),` No code available`),re&&L.createElement(L.Fragment,null,L.createElement(xe,{ariaLabel:!1,pressed:p,"aria-expanded":p,"aria-controls":b,onClick:()=>m(!p),variant:`ghost`,className:`docblock-code-toggle${p?` docblock-code-toggle--expanded`:``}`},L.createElement(oe,null),` `,p?`Hide code`:`Show code`),L.createElement(De,{ariaLabel:!1,variant:`ghost`,onClick:te},L.createElement(Ce,null),` `,h??`Copy code`)),y.map(({title:e,className:t,onClick:n,disabled:r},i)=>L.createElement(De,{key:i,className:t,onClick:n,disabled:!!r,variant:`ghost`},e))))},_(td)(()=>({".docs-story":{paddingTop:32,paddingBottom:40}})),nd=_(Ee)({height:`fit-content`}),rd=({tabs:e,...t})=>{let n=Object.entries(e);if(n.length===1)return _a.createElement(eu,{...n[0][1],...t});let r=n.map(([e,n],r)=>({id:`prop_table_div_${e}`,title:e,children:()=>{let i=r===0?t:{sort:t.sort};return _a.createElement(eu,{inTabPanel:!0,key:`prop_table_${e}`,...n,...i})}}));return _a.createElement(nd,{tabs:r})},_.div(({theme:e})=>({marginRight:30,fontSize:`${e.typography.size.s1}px`,color:e.base===`light`?fn(.4,e.color.defaultText):fn(.6,e.color.defaultText)})),_.div({overflow:`hidden`,whiteSpace:`nowrap`,textOverflow:`ellipsis`}),_.div({display:`flex`,flexDirection:`row`,alignItems:`baseline`,"&:not(:last-child)":{marginBottom:`1rem`}}),_.div(re,({theme:e})=>({...Fu(e),margin:`25px 0 40px`,padding:`30px 20px`})),_.div(({theme:e})=>({fontWeight:e.typography.weight.bold,color:e.color.defaultText})),_.div(({theme:e})=>({color:fn(.3,e.color.defaultText)})),_.div({flex:`0 0 30%`,lineHeight:`20px`,marginTop:5}),_.div(({theme:e})=>({flex:1,textAlign:`center`,fontFamily:e.typography.fonts.mono,fontSize:e.typography.size.s1,lineHeight:1,overflow:`hidden`,color:fn(.3,e.color.defaultText),"> div":{display:`inline-block`,overflow:`hidden`,maxWidth:`100%`,textOverflow:`ellipsis`},span:{display:`block`,marginTop:2}})),_.div({display:`flex`,flexDirection:`row`}),_.div(({background:e})=>({position:`relative`,flex:1,"&::before":{position:`absolute`,top:0,left:0,width:`100%`,height:`100%`,background:e,content:`""`}})),_.div(({theme:e})=>({...Fu(e),display:`flex`,flexDirection:`row`,height:50,marginBottom:5,overflow:`hidden`,backgroundColor:`white`,backgroundImage:`repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,backgroundClip:`padding-box`})),_.div({display:`flex`,flexDirection:`column`,flex:1,position:`relative`,marginBottom:30}),_.div({flex:1,display:`flex`,flexDirection:`row`}),_.div({display:`flex`,alignItems:`flex-start`}),_.div({flex:`0 0 30%`}),_.div({flex:1}),_.div(({theme:e})=>({display:`flex`,flexDirection:`row`,alignItems:`center`,paddingBottom:20,fontWeight:e.typography.weight.bold,color:fn(.3,e.color.defaultText)})),_.div(({theme:e})=>({fontSize:e.typography.size.s2,lineHeight:`20px`,display:`flex`,flexDirection:`column`})),_.div(({theme:e})=>({fontFamily:e.typography.fonts.base,fontSize:e.typography.size.s1,color:e.color.defaultText,marginLeft:10,lineHeight:1.2,display:`-webkit-box`,overflow:`hidden`,wordBreak:`break-word`,textOverflow:`ellipsis`,WebkitLineClamp:2,WebkitBoxOrient:`vertical`})),_.div(({theme:e})=>({...Fu(e),overflow:`hidden`,height:40,width:40,display:`flex`,alignItems:`center`,justifyContent:`center`,flex:`none`,"> img, > svg":{width:20,height:20}})),_.div({display:`inline-flex`,flexDirection:`row`,alignItems:`center`,width:`100%`}),_.div({display:`grid`,gridTemplateColumns:`repeat(auto-fill, minmax(140px, 1fr))`,gridGap:`8px 16px`,gridAutoFlow:`row dense`,gridAutoRows:50}),{NAVIGATE_URL:id}=__STORYBOOK_MODULE_CORE_EVENTS__,ad={tocSelector:`.js-toc`,tocElement:null,contentSelector:`.js-toc-content`,contentElement:null,headingSelector:`h1, h2, h3`,ignoreSelector:`.js-toc-ignore`,hasInnerContainers:!1,linkClass:`toc-link`,extraLinkClasses:``,activeLinkClass:`is-active-link`,listClass:`toc-list`,extraListClasses:``,isCollapsedClass:`is-collapsed`,collapsibleClass:`is-collapsible`,listItemClass:`toc-list-item`,activeListItemClass:`is-active-li`,collapseDepth:0,scrollSmooth:!0,scrollSmoothDuration:420,scrollSmoothOffset:0,scrollEndCallback:function(e){},headingsOffset:1,enableUrlHashUpdateOnScroll:!1,scrollHandlerType:`auto`,scrollHandlerTimeout:50,throttleTimeout:50,positionFixedSelector:null,positionFixedClass:`is-position-fixed`,fixedSidebarOffset:`auto`,includeHtml:!1,includeTitleTags:!1,onClick:function(e){},orderedList:!0,scrollContainer:null,skipRendering:!1,headingLabelCallback:!1,ignoreHiddenElements:!1,headingObjectCallback:null,basePath:``,disableTocScrollSync:!1,tocScrollingWrapper:null,tocScrollOffset:30,bottomModeThreshold:30},X={},dd=Object.prototype.hasOwnProperty,fd={destroy:Vr,init:Br,refresh:Hr},pd=_.aside(()=>({width:`10rem`,"@media (max-width: 768px)":{display:`none`}})),md=_.nav(({theme:e})=>({position:`fixed`,bottom:0,top:0,width:`10rem`,paddingTop:`4rem`,paddingBottom:`2rem`,overflowY:`auto`,fontFamily:e.typography.fonts.base,fontSize:e.typography.size.s2,WebkitFontSmoothing:`antialiased`,MozOsxFontSmoothing:`grayscale`,WebkitTapHighlightColor:`rgba(0, 0, 0, 0)`,WebkitOverflowScrolling:`touch`,"& *":{boxSizing:`border-box`},"& > .toc-wrapper > .toc-list":{paddingLeft:0,borderLeft:`solid 2px ${e.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${e.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${e.color.mediumlight}`}}},"& .toc-list-item":{position:`relative`,listStyleType:`none`,marginLeft:20,paddingTop:3,paddingBottom:3},"& .toc-list-item::before":{content:`""`,position:`absolute`,height:`100%`,top:0,left:0,transform:`translateX(calc(-2px - 20px))`,borderLeft:`solid 2px ${e.color.mediumdark}`,opacity:0,transition:`opacity 0.2s`},"& .toc-list-item.is-active-li::before":{opacity:1},"& .toc-list-item > a":{color:e.color.defaultText,textDecoration:`none`},"& .toc-list-item.is-active-li > a":{fontWeight:600,color:e.color.secondary,textDecoration:`none`}})),hd=_.p(({theme:e})=>({fontWeight:600,fontSize:`0.875em`,color:e.color.defaultText,textTransform:`uppercase`,marginBottom:10})),gd=({headingId:e,title:t})=>typeof t==`string`||!t?va.createElement(hd,{as:`h2`,id:e,className:t?``:`sb-sr-only`},t||`Table of contents`):va.createElement(`div`,{id:e},t),_d=({title:e,disable:t,headingSelector:n,contentsSelector:r,ignoreSelector:i,unsafeTocbotOptions:a,channel:o,className:s})=>{(0,va.useEffect)(()=>{if(t)return()=>{};let e={tocSelector:`.toc-wrapper`,contentSelector:r??`.sbdocs-content`,headingSelector:n??`h3`,ignoreSelector:i??`.docs-story *, .skip-toc`,headingsOffset:40,scrollSmoothOffset:-40,orderedList:!1,onClick:e=>{if(e.preventDefault(),e.currentTarget instanceof HTMLAnchorElement){let[,t]=e.currentTarget.href.split(`#`);t&&o.emit(id,`#${t}`)}},...a},s=setTimeout(()=>fd.init(e),100);return()=>{clearTimeout(s),fd.destroy()}},[o,t,i,r,n,a]);let c=`table-of-contents`;return va.createElement(pd,{className:s},t?null:va.createElement(md,{"aria-labelledby":c},va.createElement(gd,{headingId:c,title:e}),va.createElement(`div`,{className:`toc-wrapper`})))},vd=e=>`anchor--${e}`,yd=({storyId:e,children:t})=>ya.createElement(`div`,{id:vd(e),className:`sb-anchor`},t),{filterArgTypes:bd}=__STORYBOOK_MODULE_PREVIEW_API__,Z=(e,t)=>(0,xa.useContext)(Du).resolveOf(e,t),xd=e=>e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``),Sd=e=>{if(e)return typeof e==`string`?e.includes(`-`)?xd(e):e:e.__docgenInfo&&e.__docgenInfo.displayName?e.__docgenInfo.displayName:e.name},Cd=e=>{let{of:t}=e;if(`of`in e&&t===void 0)throw Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let{argTypes:n,parameters:r,component:i,subcomponents:a}=Zr(Z(t||`meta`)),o=r?.docs?.argTypes||{},s=e.include??o.include,c=e.exclude??o.exclude,l=e.sort??o.sort,u=bd(n,s,c);if(!(a&&Object.keys(a||{}).length>0))return ba.createElement(eu,{rows:u,sort:l});let d=Sd(i)||`Main`,f=Object.fromEntries(Object.entries(a||{}).map(([e,t])=>[e,{rows:bd(Xr(t,r),s,c),sort:l}])),p={[d]:{rows:u,sort:l},...f};return ba.createElement(rd,{tabs:p,sort:l})},Au(`ArgTypes`,Cd),wd=Object.create,Td=Object.defineProperty,Ed=Object.getOwnPropertyDescriptor,Dd=Object.getOwnPropertyNames,Od=Object.getPrototypeOf,kd=Object.prototype.hasOwnProperty,Q=(e,t)=>function(){return t||(0,e[Dd(e)[0]])((t={exports:{}}).exports,t),t.exports},Ad=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(let i of Dd(t))!kd.call(e,i)&&i!==n&&Td(e,i,{get:()=>t[i],enumerable:!(r=Ed(t,i))||r.enumerable});return e},jd=(e,t,n)=>(n=e==null?{}:wd(Od(e)),Ad(t||!e||!e.__esModule?Td(n,`default`,{value:e,enumerable:!0}):n,e)),Md=[`bubbles`,`cancelBubble`,`cancelable`,`composed`,`currentTarget`,`defaultPrevented`,`eventPhase`,`isTrusted`,`returnValue`,`srcElement`,`target`,`timeStamp`,`type`],$=[`detail`],Nd=Q({"node_modules/.pnpm/es-object-atoms@1.1.1/node_modules/es-object-atoms/index.js"(e,t){t.exports=Object}}),Pd=Q({"node_modules/.pnpm/es-errors@1.3.0/node_modules/es-errors/index.js"(e,t){t.exports=Error}}),Fd=Q({"node_modules/.pnpm/es-errors@1.3.0/node_modules/es-errors/eval.js"(e,t){t.exports=EvalError}}),Id=Q({"node_modules/.pnpm/es-errors@1.3.0/node_modules/es-errors/range.js"(e,t){t.exports=RangeError}}),Ld=Q({"node_modules/.pnpm/es-errors@1.3.0/node_modules/es-errors/ref.js"(e,t){t.exports=ReferenceError}}),Rd=Q({"node_modules/.pnpm/es-errors@1.3.0/node_modules/es-errors/syntax.js"(e,t){t.exports=SyntaxError}}),zd=Q({"node_modules/.pnpm/es-errors@1.3.0/node_modules/es-errors/type.js"(e,t){t.exports=TypeError}}),Bd=Q({"node_modules/.pnpm/es-errors@1.3.0/node_modules/es-errors/uri.js"(e,t){t.exports=URIError}}),Vd=Q({"node_modules/.pnpm/math-intrinsics@1.1.0/node_modules/math-intrinsics/abs.js"(e,t){t.exports=Math.abs}}),Hd=Q({"node_modules/.pnpm/math-intrinsics@1.1.0/node_modules/math-intrinsics/floor.js"(e,t){t.exports=Math.floor}}),Ud=Q({"node_modules/.pnpm/math-intrinsics@1.1.0/node_modules/math-intrinsics/max.js"(e,t){t.exports=Math.max}}),Wd=Q({"node_modules/.pnpm/math-intrinsics@1.1.0/node_modules/math-intrinsics/min.js"(e,t){t.exports=Math.min}}),Gd=Q({"node_modules/.pnpm/math-intrinsics@1.1.0/node_modules/math-intrinsics/pow.js"(e,t){t.exports=Math.pow}}),Kd=Q({"node_modules/.pnpm/math-intrinsics@1.1.0/node_modules/math-intrinsics/round.js"(e,t){t.exports=Math.round}}),qd=Q({"node_modules/.pnpm/math-intrinsics@1.1.0/node_modules/math-intrinsics/isNaN.js"(e,t){t.exports=Number.isNaN||function(e){return e!==e}}}),Jd=Q({"node_modules/.pnpm/math-intrinsics@1.1.0/node_modules/math-intrinsics/sign.js"(e,t){var n=qd();t.exports=function(e){return n(e)||e===0?e:e<0?-1:1}}}),Yd=Q({"node_modules/.pnpm/gopd@1.2.0/node_modules/gopd/gOPD.js"(e,t){t.exports=Object.getOwnPropertyDescriptor}}),Xd=Q({"node_modules/.pnpm/gopd@1.2.0/node_modules/gopd/index.js"(e,t){var n=Yd();if(n)try{n([],`length`)}catch{n=null}t.exports=n}}),Zd=Q({"node_modules/.pnpm/es-define-property@1.0.1/node_modules/es-define-property/index.js"(e,t){var n=Object.defineProperty||!1;if(n)try{n({},`a`,{value:1})}catch{n=!1}t.exports=n}}),Qd=Q({"node_modules/.pnpm/has-symbols@1.1.0/node_modules/has-symbols/shams.js"(e,t){t.exports=function(){if(typeof Symbol!=`function`||typeof Object.getOwnPropertySymbols!=`function`)return!1;if(typeof Symbol.iterator==`symbol`)return!0;var e={},t=Symbol(`test`),n=Object(t);if(typeof t==`string`||Object.prototype.toString.call(t)!==`[object Symbol]`||Object.prototype.toString.call(n)!==`[object Symbol]`)return!1;var r=42;for(var i in e[t]=r,e)return!1;if(typeof Object.keys==`function`&&Object.keys(e).length!==0||typeof Object.getOwnPropertyNames==`function`&&Object.getOwnPropertyNames(e).length!==0)return!1;var a=Object.getOwnPropertySymbols(e);if(a.length!==1||a[0]!==t||!Object.prototype.propertyIsEnumerable.call(e,t))return!1;if(typeof Object.getOwnPropertyDescriptor==`function`){var o=Object.getOwnPropertyDescriptor(e,t);if(o.value!==r||o.enumerable!==!0)return!1}return!0}}}),$d=Q({"node_modules/.pnpm/has-symbols@1.1.0/node_modules/has-symbols/index.js"(e,t){var n=typeof Symbol<`u`&&Symbol,r=Qd();t.exports=function(){return typeof n!=`function`||typeof Symbol!=`function`||typeof n(`foo`)!=`symbol`||typeof Symbol(`bar`)!=`symbol`?!1:r()}}}),ef=Q({"node_modules/.pnpm/get-proto@1.0.1/node_modules/get-proto/Reflect.getPrototypeOf.js"(e,t){t.exports=typeof Reflect<`u`&&Reflect.getPrototypeOf||null}}),tf=Q({"node_modules/.pnpm/get-proto@1.0.1/node_modules/get-proto/Object.getPrototypeOf.js"(e,t){t.exports=Nd().getPrototypeOf||null}}),nf=Q({"node_modules/.pnpm/function-bind@1.1.2/node_modules/function-bind/implementation.js"(e,t){var n=`Function.prototype.bind called on incompatible `,r=Object.prototype.toString,i=Math.max,a=`[object Function]`,o=function(e,t){for(var n=[],r=0;r`u`||!C?n:C(Uint8Array),ce={__proto__:null,"%AggregateError%":typeof AggregateError>`u`?n:AggregateError,"%Array%":Array,"%ArrayBuffer%":typeof ArrayBuffer>`u`?n:ArrayBuffer,"%ArrayIteratorPrototype%":te&&C?C([][Symbol.iterator]()):n,"%AsyncFromSyncIteratorPrototype%":n,"%AsyncFunction%":oe,"%AsyncGenerator%":oe,"%AsyncGeneratorFunction%":oe,"%AsyncIteratorPrototype%":oe,"%Atomics%":typeof Atomics>`u`?n:Atomics,"%BigInt%":typeof BigInt>`u`?n:BigInt,"%BigInt64Array%":typeof BigInt64Array>`u`?n:BigInt64Array,"%BigUint64Array%":typeof BigUint64Array>`u`?n:BigUint64Array,"%Boolean%":Boolean,"%DataView%":typeof DataView>`u`?n:DataView,"%Date%":Date,"%decodeURI%":decodeURI,"%decodeURIComponent%":decodeURIComponent,"%encodeURI%":encodeURI,"%encodeURIComponent%":encodeURIComponent,"%Error%":i,"%eval%":eval,"%EvalError%":a,"%Float16Array%":typeof Float16Array>`u`?n:Float16Array,"%Float32Array%":typeof Float32Array>`u`?n:Float32Array,"%Float64Array%":typeof Float64Array>`u`?n:Float64Array,"%FinalizationRegistry%":typeof FinalizationRegistry>`u`?n:FinalizationRegistry,"%Function%":v,"%GeneratorFunction%":oe,"%Int8Array%":typeof Int8Array>`u`?n:Int8Array,"%Int16Array%":typeof Int16Array>`u`?n:Int16Array,"%Int32Array%":typeof Int32Array>`u`?n:Int32Array,"%isFinite%":isFinite,"%isNaN%":isNaN,"%IteratorPrototype%":te&&C?C(C([][Symbol.iterator]())):n,"%JSON%":typeof JSON==`object`?JSON:n,"%Map%":typeof Map>`u`?n:Map,"%MapIteratorPrototype%":typeof Map>`u`||!te||!C?n:C(new Map()[Symbol.iterator]()),"%Math%":Math,"%Number%":Number,"%Object%":r,"%Object.getOwnPropertyDescriptor%":b,"%parseFloat%":parseFloat,"%parseInt%":parseInt,"%Promise%":typeof Promise>`u`?n:Promise,"%Proxy%":typeof Proxy>`u`?n:Proxy,"%RangeError%":o,"%ReferenceError%":s,"%Reflect%":typeof Reflect>`u`?n:Reflect,"%RegExp%":RegExp,"%Set%":typeof Set>`u`?n:Set,"%SetIteratorPrototype%":typeof Set>`u`||!te||!C?n:C(new Set()[Symbol.iterator]()),"%SharedArrayBuffer%":typeof SharedArrayBuffer>`u`?n:SharedArrayBuffer,"%String%":String,"%StringIteratorPrototype%":te&&C?C(``[Symbol.iterator]()):n,"%Symbol%":te?Symbol:n,"%SyntaxError%":c,"%ThrowTypeError%":ee,"%TypedArray%":se,"%TypeError%":l,"%Uint8Array%":typeof Uint8Array>`u`?n:Uint8Array,"%Uint8ClampedArray%":typeof Uint8ClampedArray>`u`?n:Uint8ClampedArray,"%Uint16Array%":typeof Uint16Array>`u`?n:Uint16Array,"%Uint32Array%":typeof Uint32Array>`u`?n:Uint32Array,"%URIError%":u,"%WeakMap%":typeof WeakMap>`u`?n:WeakMap,"%WeakRef%":typeof WeakRef>`u`?n:WeakRef,"%WeakSet%":typeof WeakSet>`u`?n:WeakSet,"%Function.prototype.call%":ae,"%Function.prototype.apply%":ie,"%Object.defineProperty%":x,"%Object.getPrototypeOf%":ne,"%Math.abs%":d,"%Math.floor%":f,"%Math.max%":p,"%Math.min%":m,"%Math.pow%":h,"%Math.round%":g,"%Math.sign%":_,"%Reflect.getPrototypeOf%":re};if(C)try{null.error}catch(e){le=C(C(e)),ce[`%Error.prototype%`]=le}var le,ue=function e(t){var n;if(t===`%AsyncFunction%`)n=y(`async function () {}`);else if(t===`%GeneratorFunction%`)n=y(`function* () {}`);else if(t===`%AsyncGeneratorFunction%`)n=y(`async function* () {}`);else if(t===`%AsyncGenerator%`){var r=e(`%AsyncGeneratorFunction%`);r&&(n=r.prototype)}else if(t===`%AsyncIteratorPrototype%`){var i=e(`%AsyncGenerator%`);i&&C&&(n=C(i.prototype))}return ce[t]=n,n},w={__proto__:null,"%ArrayBufferPrototype%":[`ArrayBuffer`,`prototype`],"%ArrayPrototype%":[`Array`,`prototype`],"%ArrayProto_entries%":[`Array`,`prototype`,`entries`],"%ArrayProto_forEach%":[`Array`,`prototype`,`forEach`],"%ArrayProto_keys%":[`Array`,`prototype`,`keys`],"%ArrayProto_values%":[`Array`,`prototype`,`values`],"%AsyncFunctionPrototype%":[`AsyncFunction`,`prototype`],"%AsyncGenerator%":[`AsyncGeneratorFunction`,`prototype`],"%AsyncGeneratorPrototype%":[`AsyncGeneratorFunction`,`prototype`,`prototype`],"%BooleanPrototype%":[`Boolean`,`prototype`],"%DataViewPrototype%":[`DataView`,`prototype`],"%DatePrototype%":[`Date`,`prototype`],"%ErrorPrototype%":[`Error`,`prototype`],"%EvalErrorPrototype%":[`EvalError`,`prototype`],"%Float32ArrayPrototype%":[`Float32Array`,`prototype`],"%Float64ArrayPrototype%":[`Float64Array`,`prototype`],"%FunctionPrototype%":[`Function`,`prototype`],"%Generator%":[`GeneratorFunction`,`prototype`],"%GeneratorPrototype%":[`GeneratorFunction`,`prototype`,`prototype`],"%Int8ArrayPrototype%":[`Int8Array`,`prototype`],"%Int16ArrayPrototype%":[`Int16Array`,`prototype`],"%Int32ArrayPrototype%":[`Int32Array`,`prototype`],"%JSONParse%":[`JSON`,`parse`],"%JSONStringify%":[`JSON`,`stringify`],"%MapPrototype%":[`Map`,`prototype`],"%NumberPrototype%":[`Number`,`prototype`],"%ObjectPrototype%":[`Object`,`prototype`],"%ObjProto_toString%":[`Object`,`prototype`,`toString`],"%ObjProto_valueOf%":[`Object`,`prototype`,`valueOf`],"%PromisePrototype%":[`Promise`,`prototype`],"%PromiseProto_then%":[`Promise`,`prototype`,`then`],"%Promise_all%":[`Promise`,`all`],"%Promise_reject%":[`Promise`,`reject`],"%Promise_resolve%":[`Promise`,`resolve`],"%RangeErrorPrototype%":[`RangeError`,`prototype`],"%ReferenceErrorPrototype%":[`ReferenceError`,`prototype`],"%RegExpPrototype%":[`RegExp`,`prototype`],"%SetPrototype%":[`Set`,`prototype`],"%SharedArrayBufferPrototype%":[`SharedArrayBuffer`,`prototype`],"%StringPrototype%":[`String`,`prototype`],"%SymbolPrototype%":[`Symbol`,`prototype`],"%SyntaxErrorPrototype%":[`SyntaxError`,`prototype`],"%TypedArrayPrototype%":[`TypedArray`,`prototype`],"%TypeErrorPrototype%":[`TypeError`,`prototype`],"%Uint8ArrayPrototype%":[`Uint8Array`,`prototype`],"%Uint8ClampedArrayPrototype%":[`Uint8ClampedArray`,`prototype`],"%Uint16ArrayPrototype%":[`Uint16Array`,`prototype`],"%Uint32ArrayPrototype%":[`Uint32Array`,`prototype`],"%URIErrorPrototype%":[`URIError`,`prototype`],"%WeakMapPrototype%":[`WeakMap`,`prototype`],"%WeakSetPrototype%":[`WeakSet`,`prototype`]},T=rf(),de=ff(),fe=T.call(ae,Array.prototype.concat),pe=T.call(ie,Array.prototype.splice),me=T.call(ae,String.prototype.replace),he=T.call(ae,String.prototype.slice),E=T.call(ae,RegExp.prototype.exec),ge=/[^%.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|%$))/g,_e=/\\(\\)?/g,ve=function(e){var t=he(e,0,1),n=he(e,-1);if(t===`%`&&n!==`%`)throw new c("invalid intrinsic syntax, expected closing `%`");if(n===`%`&&t!==`%`)throw new c("invalid intrinsic syntax, expected opening `%`");var r=[];return me(e,ge,function(e,t,n,i){r[r.length]=n?me(i,_e,`$1`):t||e}),r},ye=function(e,t){var n=e,r;if(de(w,n)&&(r=w[n],n=`%`+r[0]+`%`),de(ce,n)){var i=ce[n];if(i===oe&&(i=ue(n)),typeof i>`u`&&!t)throw new l(`intrinsic `+e+` exists, but is not available. Please file an issue!`);return{alias:r,name:n,value:i}}throw new c(`intrinsic `+e+` does not exist!`)};t.exports=function(e,t){if(typeof e!=`string`||e.length===0)throw new l(`intrinsic name must be a non-empty string`);if(arguments.length>1&&typeof t!=`boolean`)throw new l(`"allowMissing" argument must be a boolean`);if(E(/^%?[^%]*%?$/,e)===null)throw new c("`%` may not be present anywhere but at the beginning and end of the intrinsic name");var n=ve(e),r=n.length>0?n[0]:``,i=ye(`%`+r+`%`,t),a=i.name,o=i.value,s=!1,u=i.alias;u&&(r=u[0],pe(n,fe([0,1],u)));for(var d=1,f=!0;d=n.length){var g=b(o,p);f=!!g,o=f&&`get`in g&&!(`originalValue`in g.get)?g.get:o[p]}else f=de(o,p),o=o[p];f&&!s&&(ce[a]=o)}}return o}}}),mf=Q({"node_modules/.pnpm/call-bound@1.0.4/node_modules/call-bound/index.js"(e,t){var n=pf(),r=lf(),i=r([n(`%String.prototype.indexOf%`)]);t.exports=function(e,t){var a=n(e,!!t);return typeof a==`function`&&i(e,`.prototype.`)>-1?r([a]):a}}}),hf=Q({"node_modules/.pnpm/has-tostringtag@1.0.2/node_modules/has-tostringtag/shams.js"(e,t){var n=Qd();t.exports=function(){return n()&&!!Symbol.toStringTag}}}),gf=Q({"node_modules/.pnpm/is-regex@1.2.1/node_modules/is-regex/index.js"(e,t){var n=mf(),r=hf()(),i=ff(),a=Xd(),o;r?(s=n(`RegExp.prototype.exec`),c={},l=function(){throw c},u={toString:l,valueOf:l},typeof Symbol.toPrimitive==`symbol`&&(u[Symbol.toPrimitive]=l),o=function(e){if(!e||typeof e!=`object`)return!1;var t=a(e,`lastIndex`);if(!(t&&i(t,`value`)))return!1;try{s(e,u)}catch(e){return e===c}}):(d=n(`Object.prototype.toString`),f=`[object RegExp]`,o=function(e){return!e||typeof e!=`object`&&typeof e!=`function`?!1:d(e)===f});var s,c,l,u,d,f;t.exports=o}}),_f=Q({"node_modules/.pnpm/is-function@1.0.2/node_modules/is-function/index.js"(e,t){t.exports=r;var n=Object.prototype.toString;function r(e){if(!e)return!1;var t=n.call(e);return t===`[object Function]`||typeof e==`function`&&t!==`[object RegExp]`||typeof window<`u`&&(e===window.setTimeout||e===window.alert||e===window.confirm||e===window.prompt)}}}),vf=Q({"node_modules/.pnpm/safe-regex-test@1.1.0/node_modules/safe-regex-test/index.js"(e,t){var n=mf(),r=gf(),i=n(`RegExp.prototype.exec`),a=zd();t.exports=function(e){if(!r(e))throw new a("`regex` must be a RegExp");return function(t){return i(e,t)!==null}}}}),yf=Q({"node_modules/.pnpm/is-symbol@1.1.1/node_modules/is-symbol/index.js"(e,t){var n=mf(),r=n(`Object.prototype.toString`),i=$d()(),a=vf();i?(o=n(`Symbol.prototype.toString`),s=a(/^Symbol\(.*\)$/),c=function(e){return typeof e.valueOf()==`symbol`?s(o(e)):!1},t.exports=function(e){if(typeof e==`symbol`)return!0;if(!e||typeof e!=`object`||r(e)!==`[object Symbol]`)return!1;try{return c(e)}catch{return!1}}):t.exports=function(e){return!1};var o,s,c}}),bf=jd(gf()),xf=jd(_f()),Sf=jd(yf()),Cf=typeof global==`object`&&global&&global.Object===Object&&global,wf=typeof self==`object`&&self&&self.Object===Object&&self,Tf=Cf||wf||Function(`return this`)(),Ef=Tf.Symbol,Df=Object.prototype,Of=Df.hasOwnProperty,kf=Df.toString,Af=Ef?Ef.toStringTag:void 0,jf=ei,Mf=Object.prototype.toString,Nf=ti,Pf=`[object Null]`,Ff=`[object Undefined]`,If=Ef?Ef.toStringTag:void 0,Lf=ni,Rf=Ef?Ef.prototype:void 0,Rf&&Rf.toString,zf=ri,Bf=`[object AsyncFunction]`,Vf=`[object Function]`,Hf=`[object GeneratorFunction]`,Uf=`[object Proxy]`,Wf=ii,Gf=Tf[`__core-js_shared__`],Kf=(function(){var e=/[^.]+$/.exec(Gf&&Gf.keys&&Gf.keys.IE_PROTO||``);return e?`Symbol(src)_1.`+e:``})(),qf=ai,Jf=Function.prototype.toString,Yf=oi,Xf=/[\\^$.*+?()[\]{}|]/g,Zf=/^\[object .+?Constructor\]$/,Qf=Function.prototype,$f=Object.prototype,ep=Qf.toString,tp=$f.hasOwnProperty,np=RegExp(`^`+ep.call(tp).replace(Xf,`\\$&`).replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,`$1.*?`)+`$`),rp=si,ip=ci,ap=li,op=ui,sp=ap(Object,`create`),cp=di,lp=fi,up=`__lodash_hash_undefined__`,dp=Object.prototype.hasOwnProperty,fp=pi,pp=Object.prototype.hasOwnProperty,mp=mi,hp=`__lodash_hash_undefined__`,gp=hi,gi.prototype.clear=cp,gi.prototype.delete=lp,gi.prototype.get=fp,gi.prototype.has=mp,gi.prototype.set=gp,_p=gi,vp=_i,yp=vi,bp=Array.prototype.splice,xp=yi,Sp=bi,Cp=xi,wp=Si,Ci.prototype.clear=vp,Ci.prototype.delete=xp,Ci.prototype.get=Sp,Ci.prototype.has=Cp,Ci.prototype.set=wp,Tp=Ci,Ep=ap(Tf,`Map`),Dp=wi,Op=Ti,kp=Ei,Ap=Di,jp=Oi,Mp=ki,Np=Ai,ji.prototype.clear=Dp,ji.prototype.delete=Ap,ji.prototype.get=jp,ji.prototype.has=Mp,ji.prototype.set=Np,Pp=ji,Fp=`Expected a function`,Mi.Cache=Pp,Ip=Mi,Lp=500,Rp=Ni,zp=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,Bp=/\\(\\)?/g,Rp(function(e){var t=[];return e.charCodeAt(0)===46&&t.push(``),e.replace(zp,function(e,n,r,i){t.push(r?i.replace(Bp,`$1`):n||e)}),t}),Vp=$r,Hp=/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?Z$/,Up=function(e){let t,n,r,i;return function(a,o){try{if(a===``)return i=[],t=new Map([[o,`[]`]]),n=new Map,r=[],o;let s=n.get(this)||this;for(;r.length&&s!==r[0];)r.shift(),i.pop();if(typeof o==`boolean`)return o;if(o===void 0)return e.allowUndefined?`_undefined_`:void 0;if(o===null)return null;if(typeof o==`number`)return o===-1/0?`_-Infinity_`:o===1/0?`_Infinity_`:Number.isNaN(o)?`_NaN_`:o;if(typeof o==`bigint`)return`_bigint_${o.toString()}`;if(typeof o==`string`)return Hp.test(o)?e.allowDate?`_date_${o}`:void 0:o;if((0,bf.default)(o))return e.allowRegExp?`_regexp_${o.flags}|${o.source}`:void 0;if((0,xf.default)(o))return;if((0,Sf.default)(o)){if(!e.allowSymbol)return;let t=Symbol.keyFor(o);return t===void 0?`_symbol_${o.toString().slice(7,-1)}`:`_gsymbol_${t}`}if(r.length>=e.maxDepth)return Array.isArray(o)?`[Array(${o.length})]`:`[Object]`;if(o===this)return`_duplicate_${JSON.stringify(i)}`;if(o instanceof Error&&e.allowError)return{__isConvertedError__:!0,errorProperties:{...o.cause?{cause:o.cause}:{},...o,name:o.name,message:o.message,stack:o.stack,"_constructor-name_":o.constructor.name}};if(o?.constructor?.name&&o.constructor.name!==`Object`&&!Array.isArray(o)){let e=t.get(o);if(!e){let e={__isClassInstance__:!0,__className__:o.constructor.name,...Object.getOwnPropertyNames(o).reduce((e,t)=>{try{e[t]=o[t]}catch{}return e},{})};return i.push(a),r.unshift(e),t.set(o,JSON.stringify(i)),o!==e&&n.set(o,e),e}return`_duplicate_${e}`}let c=t.get(o);if(!c){let e=Array.isArray(o)?o:Pi(o);return i.push(a),r.unshift(e),t.set(o,JSON.stringify(i)),o!==e&&n.set(o,e),e}return`_duplicate_${c}`}catch{return}}},Wp={maxDepth:10,space:void 0,allowRegExp:!0,allowDate:!0,allowError:!0,allowUndefined:!0,allowSymbol:!0},Gp=(e,t={})=>{let n={...Wp,...t};return JSON.stringify(Pi(e),Up(n),t.space)},Kp=(0,wa.createContext)({sources:{}}),qp=`--unknown--`,Jp=({children:e,channel:t})=>{let[n,r]=(0,wa.useState)({});return(0,wa.useEffect)(()=>{let e=(e,t=null,n=!1)=>{let{id:i,args:a=void 0,source:o,format:s}=typeof e==`string`?{id:e,source:t,format:n}:e,c=a?Fi(a):qp;r(e=>({...e,[i]:{...e[i],[c]:{code:o||``,format:s}}}))};return t.on(s,e),()=>t.off(s,e)},[]),wa.createElement(Kp.Provider,{value:{sources:n}},e)},Yp=(e,t,n)=>{let{sources:r}=n,i=r?.[e];return i?.[Fi(t)]||i?.[`--unknown--`]||{code:``}},Xp=({snippet:e,storyContext:t,typeFromProps:n,transformFromProps:r})=>{let i=t.parameters??{},{__isArgsStory:a}=i,o=i.docs?.source||{},s=n||o.type||l.AUTO,c=s===l.DYNAMIC||s===l.AUTO&&e&&a?e:o.originalSource||``,u=r??o.transform,d=u?Ii(c,u,t):c;return o.code===void 0?d:o.code},Zp=(e,t,n)=>{let{of:r}=e,i=(0,Ca.useMemo)(()=>{if(r)return t.resolveOf(r,[`story`]).story;try{return t.storyById()}catch{}},[t,r]),a=i?t.getStoryContext(i):{},o=e.__forceInitialArgs?a.initialArgs:a.unmappedArgs,s=i?Yp(i.id,o,n):null,c=Xp({snippet:s?s.code:``,storyContext:{...a,args:o},typeFromProps:e.type,transformFromProps:e.transform});if(`of`in e&&r===void 0)throw Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let l=i?.parameters?.docs?.source||{},u=e.format,d=e.language??l.language??`jsx`,f=e.dark??l.dark??!1;return!e.code&&!i?{error:`Oh no! The source is not available.`}:e.code?{code:e.code,format:u,language:d,dark:f}:(u=s?.format??!0,{code:c,format:u,language:d,dark:f})},Qp=e=>{let t=(0,Ca.useContext)(Kp),n=Zp(e,(0,Ca.useContext)(Du),t);return Ca.createElement(yn,{...n})},Au(`Source`,Qp),$p=e=>{let t=(0,Sa.useContext)(Du),n=(0,Sa.useContext)(Kp),{of:r,source:i}=e;if(`of`in e&&r===void 0)throw Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let{story:a}=Z(r||`story`,[`story`]),o=Zp({...i,...r&&{of:r}},t,n),s=e.layout??a.parameters.layout??a.parameters.docs?.canvas?.layout??`padded`,c=e.withToolbar??a.parameters.docs?.canvas?.withToolbar??!1,l=e.additionalActions??a.parameters.docs?.canvas?.additionalActions,u=e.sourceState??a.parameters.docs?.canvas?.sourceState??`hidden`,d=e.className??a.parameters.docs?.canvas?.className,f=e.story?.inline??a.parameters?.docs?.story?.inline??!1;return Sa.createElement(td,{withSource:u===`none`?void 0:o,isExpanded:u===`shown`,withToolbar:c,additionalActions:l,className:d,layout:s,inline:f},Sa.createElement(Pu,{of:r||a.moduleExport,meta:e.meta,...e.story}))},em=Au(`Canvas`,$p),{filterArgTypes:tm}=__STORYBOOK_MODULE_PREVIEW_API__,{RESET_STORY_ARGS:nm,STORY_ARGS_UPDATED:rm,UPDATE_STORY_ARGS:im}=__STORYBOOK_MODULE_CORE_EVENTS__,am=(e,t)=>{let n=om(e,t);if(!n)throw Error(`No result when story was defined`);return n},om=(e,t)=>{let n=e?t.getStoryContext(e):{args:{}},{id:r}=e||{id:`none`},[i,a]=(0,Da.useState)(n.args);(0,Da.useEffect)(()=>{let e=e=>{e.storyId===r&&a(e.args)};return t.channel.on(rm,e),()=>t.channel.off(rm,e)},[r,t.channel]);let o=(0,Da.useCallback)(e=>t.channel.emit(im,{storyId:r,updatedArgs:e}),[r,t.channel]),s=(0,Da.useCallback)(e=>t.channel.emit(nm,{storyId:r,argNames:e}),[r,t.channel]);return e&&[i,o,s]},{GLOBALS_UPDATED:sm}=__STORYBOOK_MODULE_CORE_EVENTS__,cm=(e,t)=>{let[n,r]=(0,Oa.useState)(t.getStoryContext(e).globals);return(0,Oa.useEffect)(()=>{let e=e=>{r(e.globals)};return t.channel.on(sm,e),()=>t.channel.off(sm,e)},[t.channel]),[n]},{Tag:lm}=__STORYBOOK_MODULE_PREVIEW_API__,um=()=>(0,ka.useContext)(Du).componentStories().find(e=>e.tags.includes(lm.AUTODOCS)),dm=e=>{let{of:t}=e,n=(0,Ea.useContext)(Du),r=um(),i=t?n.resolveOf(t,[`story`]).story:r;if(!i)return null;let{parameters:a,argTypes:o,component:s,subcomponents:c}=i,l=a.docs?.controls||{},u=e.include??l.include,d=e.exclude??l.exclude,f=e.sort??l.sort,[p,m,h]=am(i,n),[g]=cm(i,n),_=tm(o,u,d);if(!(c&&Object.keys(c||{}).length>0))return Object.keys(_).length>0||Object.keys(p).length>0?Ea.createElement(eu,{rows:_,sort:f,args:p,globals:g,updateArgs:m,resetArgs:h}):null;let v=Sd(s)||`Story`,y=Object.fromEntries(Object.entries(c||{}).map(([e,t])=>[e,{rows:tm(Li(t,a),u,d),sort:f}])),b={[v]:{rows:_,sort:f},...y};return Ea.createElement(rd,{tabs:b,sort:f,args:p,globals:g,updateArgs:m,resetArgs:h})},fm=Au(`Controls`,dm),{NAVIGATE_URL:pm}=__STORYBOOK_MODULE_CORE_EVENTS__,{document:mm}=globalThis,hm=({className:e,children:t,...n})=>{if(typeof e!=`string`&&(typeof t!=`string`||!t.match(/[\n\r]/g)))return Ma.createElement(Ae,null,t);let r=e&&e.split(`-`);return Ma.createElement(yn,{language:r&&r[1]||`text`,format:!1,code:t,...n})},gm=Le.a,_m=({hash:e,children:t})=>{let n=(0,Ma.useContext)(Du);return Ma.createElement(gm,{href:e,target:`_self`,onClick:t=>{let r=e.substring(1);mm.getElementById(r)&&Ri(n,e)}},t)},vm=e=>{let{href:t,target:n,children:r,...i}=e,a=(0,Ma.useContext)(Du);return!t||n===`_blank`||/^https?:\/\//.test(t)?Ma.createElement(gm,{...e}):t.startsWith(`#`)?Ma.createElement(_m,{hash:t},r):Ma.createElement(gm,{href:t,onClick:e=>{e.button===0&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey&&(e.preventDefault(),Ri(a,e.currentTarget.getAttribute(`href`)||``))},target:n,...i},r)},ym=[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`],bm=ym.reduce((e,t)=>({...e,[t]:_(t)({"& svg":{position:`relative`,top:`-0.1em`,visibility:`hidden`},"&:hover svg":{visibility:`visible`}})}),{}),xm=_.a(()=>({float:`left`,lineHeight:`inherit`,paddingRight:`10px`,marginLeft:`-24px`,color:`inherit`})),Sm=({as:e,id:t,children:n,...r})=>{let i=(0,Ma.useContext)(Du),a=bm[e],o=`#${t}`;return Ma.createElement(a,{id:t,...r},Ma.createElement(xm,{"aria-hidden":`true`,href:o,tabIndex:-1,target:`_self`,onClick:e=>{mm.getElementById(t)&&Ri(i,o)}},Ma.createElement(de,null)),n)},Cm=e=>{let{as:t,id:n,children:r,...i}=e;if(n)return Ma.createElement(Sm,{as:t,id:n,...i},r);let a=t,{as:o,...s}=e;return Ma.createElement(a,{...pe(s,t)})},wm=ym.reduce((e,t)=>({...e,[t]:e=>Ma.createElement(Cm,{as:t,...e})}),{}),Tm=e=>{if(!e.children)return null;if(typeof e.children!=`string`)throw Error(o`The Markdown block only accepts children as a single string, but children were of type: '${typeof e.children}' This is often caused by not wrapping the child in a template string. This is invalid: @@ -46,4 +46,4 @@ Error generating stack: `+e.message+` A paragraph \`} - `);return ja.createElement(As,{...e,options:{forceBlock:!0,overrides:{code:hm,a:vm,...wm,...e?.options?.overrides},...e?.options}})},Em=Au(`Markdown`,Tm),Dm=(e=>(e.INFO=`info`,e.NOTES=`notes`,e.DOCGEN=`docgen`,e.AUTO=`auto`,e))(Dm||{}),Om=e=>{switch(e.type){case`story`:return e.story.parameters.docs?.description?.story||null;case`meta`:{let{parameters:t,component:n}=e.preparedMeta;return t.docs?.description?.component||t.docs?.extractComponentDescription?.(n,{component:n,parameters:t})||null}case`component`:{let{component:t,projectAnnotations:{parameters:n}}=e;return n?.docs?.extractComponentDescription?.(t,{component:t,parameters:n})||null}default:throw Error(`Unrecognized module type resolved from 'useOf', got: ${e.type}`)}},km=e=>{let{of:t}=e;if(`of`in e&&t===void 0)throw Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let n=Om(Z(t||`meta`));return n?Aa.createElement(Em,null,n):null},Am=Au(`Description`,km),{document:jm,window:Mm}=globalThis,Nm=({context:e,theme:t,children:n})=>{let r;try{r=e.resolveOf(`meta`,[`meta`]).preparedMeta.parameters?.docs?.toc}catch{r=e?.projectAnnotations?.parameters?.docs?.toc}return(0,Pa.useEffect)(()=>{let e;try{if(e=new URL(Mm.parent.location.toString()),e.hash){let t=jm.getElementById(decodeURIComponent(e.hash.substring(1)));t&&setTimeout(()=>{Yr(t)},200)}}catch{}}),Pa.createElement(Du.Provider,{value:e},Pa.createElement(Jp,{channel:e.channel},Pa.createElement(S,{theme:x(t)},Pa.createElement(su,{toc:r?Pa.createElement(_d,{className:`sbdocs sbdocs-toc--custom`,channel:e.channel,...r}):null},n))))},Pm=/[\0-\x1F!-,\.\/:-@\[-\^`\{-\xA9\xAB-\xB4\xB6-\xB9\xBB-\xBF\xD7\xF7\u02C2-\u02C5\u02D2-\u02DF\u02E5-\u02EB\u02ED\u02EF-\u02FF\u0375\u0378\u0379\u037E\u0380-\u0385\u0387\u038B\u038D\u03A2\u03F6\u0482\u0530\u0557\u0558\u055A-\u055F\u0589-\u0590\u05BE\u05C0\u05C3\u05C6\u05C8-\u05CF\u05EB-\u05EE\u05F3-\u060F\u061B-\u061F\u066A-\u066D\u06D4\u06DD\u06DE\u06E9\u06FD\u06FE\u0700-\u070F\u074B\u074C\u07B2-\u07BF\u07F6-\u07F9\u07FB\u07FC\u07FE\u07FF\u082E-\u083F\u085C-\u085F\u086B-\u089F\u08B5\u08C8-\u08D2\u08E2\u0964\u0965\u0970\u0984\u098D\u098E\u0991\u0992\u09A9\u09B1\u09B3-\u09B5\u09BA\u09BB\u09C5\u09C6\u09C9\u09CA\u09CF-\u09D6\u09D8-\u09DB\u09DE\u09E4\u09E5\u09F2-\u09FB\u09FD\u09FF\u0A00\u0A04\u0A0B-\u0A0E\u0A11\u0A12\u0A29\u0A31\u0A34\u0A37\u0A3A\u0A3B\u0A3D\u0A43-\u0A46\u0A49\u0A4A\u0A4E-\u0A50\u0A52-\u0A58\u0A5D\u0A5F-\u0A65\u0A76-\u0A80\u0A84\u0A8E\u0A92\u0AA9\u0AB1\u0AB4\u0ABA\u0ABB\u0AC6\u0ACA\u0ACE\u0ACF\u0AD1-\u0ADF\u0AE4\u0AE5\u0AF0-\u0AF8\u0B00\u0B04\u0B0D\u0B0E\u0B11\u0B12\u0B29\u0B31\u0B34\u0B3A\u0B3B\u0B45\u0B46\u0B49\u0B4A\u0B4E-\u0B54\u0B58-\u0B5B\u0B5E\u0B64\u0B65\u0B70\u0B72-\u0B81\u0B84\u0B8B-\u0B8D\u0B91\u0B96-\u0B98\u0B9B\u0B9D\u0BA0-\u0BA2\u0BA5-\u0BA7\u0BAB-\u0BAD\u0BBA-\u0BBD\u0BC3-\u0BC5\u0BC9\u0BCE\u0BCF\u0BD1-\u0BD6\u0BD8-\u0BE5\u0BF0-\u0BFF\u0C0D\u0C11\u0C29\u0C3A-\u0C3C\u0C45\u0C49\u0C4E-\u0C54\u0C57\u0C5B-\u0C5F\u0C64\u0C65\u0C70-\u0C7F\u0C84\u0C8D\u0C91\u0CA9\u0CB4\u0CBA\u0CBB\u0CC5\u0CC9\u0CCE-\u0CD4\u0CD7-\u0CDD\u0CDF\u0CE4\u0CE5\u0CF0\u0CF3-\u0CFF\u0D0D\u0D11\u0D45\u0D49\u0D4F-\u0D53\u0D58-\u0D5E\u0D64\u0D65\u0D70-\u0D79\u0D80\u0D84\u0D97-\u0D99\u0DB2\u0DBC\u0DBE\u0DBF\u0DC7-\u0DC9\u0DCB-\u0DCE\u0DD5\u0DD7\u0DE0-\u0DE5\u0DF0\u0DF1\u0DF4-\u0E00\u0E3B-\u0E3F\u0E4F\u0E5A-\u0E80\u0E83\u0E85\u0E8B\u0EA4\u0EA6\u0EBE\u0EBF\u0EC5\u0EC7\u0ECE\u0ECF\u0EDA\u0EDB\u0EE0-\u0EFF\u0F01-\u0F17\u0F1A-\u0F1F\u0F2A-\u0F34\u0F36\u0F38\u0F3A-\u0F3D\u0F48\u0F6D-\u0F70\u0F85\u0F98\u0FBD-\u0FC5\u0FC7-\u0FFF\u104A-\u104F\u109E\u109F\u10C6\u10C8-\u10CC\u10CE\u10CF\u10FB\u1249\u124E\u124F\u1257\u1259\u125E\u125F\u1289\u128E\u128F\u12B1\u12B6\u12B7\u12BF\u12C1\u12C6\u12C7\u12D7\u1311\u1316\u1317\u135B\u135C\u1360-\u137F\u1390-\u139F\u13F6\u13F7\u13FE-\u1400\u166D\u166E\u1680\u169B-\u169F\u16EB-\u16ED\u16F9-\u16FF\u170D\u1715-\u171F\u1735-\u173F\u1754-\u175F\u176D\u1771\u1774-\u177F\u17D4-\u17D6\u17D8-\u17DB\u17DE\u17DF\u17EA-\u180A\u180E\u180F\u181A-\u181F\u1879-\u187F\u18AB-\u18AF\u18F6-\u18FF\u191F\u192C-\u192F\u193C-\u1945\u196E\u196F\u1975-\u197F\u19AC-\u19AF\u19CA-\u19CF\u19DA-\u19FF\u1A1C-\u1A1F\u1A5F\u1A7D\u1A7E\u1A8A-\u1A8F\u1A9A-\u1AA6\u1AA8-\u1AAF\u1AC1-\u1AFF\u1B4C-\u1B4F\u1B5A-\u1B6A\u1B74-\u1B7F\u1BF4-\u1BFF\u1C38-\u1C3F\u1C4A-\u1C4C\u1C7E\u1C7F\u1C89-\u1C8F\u1CBB\u1CBC\u1CC0-\u1CCF\u1CD3\u1CFB-\u1CFF\u1DFA\u1F16\u1F17\u1F1E\u1F1F\u1F46\u1F47\u1F4E\u1F4F\u1F58\u1F5A\u1F5C\u1F5E\u1F7E\u1F7F\u1FB5\u1FBD\u1FBF-\u1FC1\u1FC5\u1FCD-\u1FCF\u1FD4\u1FD5\u1FDC-\u1FDF\u1FED-\u1FF1\u1FF5\u1FFD-\u203E\u2041-\u2053\u2055-\u2070\u2072-\u207E\u2080-\u208F\u209D-\u20CF\u20F1-\u2101\u2103-\u2106\u2108\u2109\u2114\u2116-\u2118\u211E-\u2123\u2125\u2127\u2129\u212E\u213A\u213B\u2140-\u2144\u214A-\u214D\u214F-\u215F\u2189-\u24B5\u24EA-\u2BFF\u2C2F\u2C5F\u2CE5-\u2CEA\u2CF4-\u2CFF\u2D26\u2D28-\u2D2C\u2D2E\u2D2F\u2D68-\u2D6E\u2D70-\u2D7E\u2D97-\u2D9F\u2DA7\u2DAF\u2DB7\u2DBF\u2DC7\u2DCF\u2DD7\u2DDF\u2E00-\u2E2E\u2E30-\u3004\u3008-\u3020\u3030\u3036\u3037\u303D-\u3040\u3097\u3098\u309B\u309C\u30A0\u30FB\u3100-\u3104\u3130\u318F-\u319F\u31C0-\u31EF\u3200-\u33FF\u4DC0-\u4DFF\u9FFD-\u9FFF\uA48D-\uA4CF\uA4FE\uA4FF\uA60D-\uA60F\uA62C-\uA63F\uA673\uA67E\uA6F2-\uA716\uA720\uA721\uA789\uA78A\uA7C0\uA7C1\uA7CB-\uA7F4\uA828-\uA82B\uA82D-\uA83F\uA874-\uA87F\uA8C6-\uA8CF\uA8DA-\uA8DF\uA8F8-\uA8FA\uA8FC\uA92E\uA92F\uA954-\uA95F\uA97D-\uA97F\uA9C1-\uA9CE\uA9DA-\uA9DF\uA9FF\uAA37-\uAA3F\uAA4E\uAA4F\uAA5A-\uAA5F\uAA77-\uAA79\uAAC3-\uAADA\uAADE\uAADF\uAAF0\uAAF1\uAAF7-\uAB00\uAB07\uAB08\uAB0F\uAB10\uAB17-\uAB1F\uAB27\uAB2F\uAB5B\uAB6A-\uAB6F\uABEB\uABEE\uABEF\uABFA-\uABFF\uD7A4-\uD7AF\uD7C7-\uD7CA\uD7FC-\uD7FF\uE000-\uF8FF\uFA6E\uFA6F\uFADA-\uFAFF\uFB07-\uFB12\uFB18-\uFB1C\uFB29\uFB37\uFB3D\uFB3F\uFB42\uFB45\uFBB2-\uFBD2\uFD3E-\uFD4F\uFD90\uFD91\uFDC8-\uFDEF\uFDFC-\uFDFF\uFE10-\uFE1F\uFE30-\uFE32\uFE35-\uFE4C\uFE50-\uFE6F\uFE75\uFEFD-\uFF0F\uFF1A-\uFF20\uFF3B-\uFF3E\uFF40\uFF5B-\uFF65\uFFBF-\uFFC1\uFFC8\uFFC9\uFFD0\uFFD1\uFFD8\uFFD9\uFFDD-\uFFFF]|\uD800[\uDC0C\uDC27\uDC3B\uDC3E\uDC4E\uDC4F\uDC5E-\uDC7F\uDCFB-\uDD3F\uDD75-\uDDFC\uDDFE-\uDE7F\uDE9D-\uDE9F\uDED1-\uDEDF\uDEE1-\uDEFF\uDF20-\uDF2C\uDF4B-\uDF4F\uDF7B-\uDF7F\uDF9E\uDF9F\uDFC4-\uDFC7\uDFD0\uDFD6-\uDFFF]|\uD801[\uDC9E\uDC9F\uDCAA-\uDCAF\uDCD4-\uDCD7\uDCFC-\uDCFF\uDD28-\uDD2F\uDD64-\uDDFF\uDF37-\uDF3F\uDF56-\uDF5F\uDF68-\uDFFF]|\uD802[\uDC06\uDC07\uDC09\uDC36\uDC39-\uDC3B\uDC3D\uDC3E\uDC56-\uDC5F\uDC77-\uDC7F\uDC9F-\uDCDF\uDCF3\uDCF6-\uDCFF\uDD16-\uDD1F\uDD3A-\uDD7F\uDDB8-\uDDBD\uDDC0-\uDDFF\uDE04\uDE07-\uDE0B\uDE14\uDE18\uDE36\uDE37\uDE3B-\uDE3E\uDE40-\uDE5F\uDE7D-\uDE7F\uDE9D-\uDEBF\uDEC8\uDEE7-\uDEFF\uDF36-\uDF3F\uDF56-\uDF5F\uDF73-\uDF7F\uDF92-\uDFFF]|\uD803[\uDC49-\uDC7F\uDCB3-\uDCBF\uDCF3-\uDCFF\uDD28-\uDD2F\uDD3A-\uDE7F\uDEAA\uDEAD-\uDEAF\uDEB2-\uDEFF\uDF1D-\uDF26\uDF28-\uDF2F\uDF51-\uDFAF\uDFC5-\uDFDF\uDFF7-\uDFFF]|\uD804[\uDC47-\uDC65\uDC70-\uDC7E\uDCBB-\uDCCF\uDCE9-\uDCEF\uDCFA-\uDCFF\uDD35\uDD40-\uDD43\uDD48-\uDD4F\uDD74\uDD75\uDD77-\uDD7F\uDDC5-\uDDC8\uDDCD\uDDDB\uDDDD-\uDDFF\uDE12\uDE38-\uDE3D\uDE3F-\uDE7F\uDE87\uDE89\uDE8E\uDE9E\uDEA9-\uDEAF\uDEEB-\uDEEF\uDEFA-\uDEFF\uDF04\uDF0D\uDF0E\uDF11\uDF12\uDF29\uDF31\uDF34\uDF3A\uDF45\uDF46\uDF49\uDF4A\uDF4E\uDF4F\uDF51-\uDF56\uDF58-\uDF5C\uDF64\uDF65\uDF6D-\uDF6F\uDF75-\uDFFF]|\uD805[\uDC4B-\uDC4F\uDC5A-\uDC5D\uDC62-\uDC7F\uDCC6\uDCC8-\uDCCF\uDCDA-\uDD7F\uDDB6\uDDB7\uDDC1-\uDDD7\uDDDE-\uDDFF\uDE41-\uDE43\uDE45-\uDE4F\uDE5A-\uDE7F\uDEB9-\uDEBF\uDECA-\uDEFF\uDF1B\uDF1C\uDF2C-\uDF2F\uDF3A-\uDFFF]|\uD806[\uDC3B-\uDC9F\uDCEA-\uDCFE\uDD07\uDD08\uDD0A\uDD0B\uDD14\uDD17\uDD36\uDD39\uDD3A\uDD44-\uDD4F\uDD5A-\uDD9F\uDDA8\uDDA9\uDDD8\uDDD9\uDDE2\uDDE5-\uDDFF\uDE3F-\uDE46\uDE48-\uDE4F\uDE9A-\uDE9C\uDE9E-\uDEBF\uDEF9-\uDFFF]|\uD807[\uDC09\uDC37\uDC41-\uDC4F\uDC5A-\uDC71\uDC90\uDC91\uDCA8\uDCB7-\uDCFF\uDD07\uDD0A\uDD37-\uDD39\uDD3B\uDD3E\uDD48-\uDD4F\uDD5A-\uDD5F\uDD66\uDD69\uDD8F\uDD92\uDD99-\uDD9F\uDDAA-\uDEDF\uDEF7-\uDFAF\uDFB1-\uDFFF]|\uD808[\uDF9A-\uDFFF]|\uD809[\uDC6F-\uDC7F\uDD44-\uDFFF]|[\uD80A\uD80B\uD80E-\uD810\uD812-\uD819\uD824-\uD82B\uD82D\uD82E\uD830-\uD833\uD837\uD839\uD83D\uD83F\uD87B-\uD87D\uD87F\uD885-\uDB3F\uDB41-\uDBFF][\uDC00-\uDFFF]|\uD80D[\uDC2F-\uDFFF]|\uD811[\uDE47-\uDFFF]|\uD81A[\uDE39-\uDE3F\uDE5F\uDE6A-\uDECF\uDEEE\uDEEF\uDEF5-\uDEFF\uDF37-\uDF3F\uDF44-\uDF4F\uDF5A-\uDF62\uDF78-\uDF7C\uDF90-\uDFFF]|\uD81B[\uDC00-\uDE3F\uDE80-\uDEFF\uDF4B-\uDF4E\uDF88-\uDF8E\uDFA0-\uDFDF\uDFE2\uDFE5-\uDFEF\uDFF2-\uDFFF]|\uD821[\uDFF8-\uDFFF]|\uD823[\uDCD6-\uDCFF\uDD09-\uDFFF]|\uD82C[\uDD1F-\uDD4F\uDD53-\uDD63\uDD68-\uDD6F\uDEFC-\uDFFF]|\uD82F[\uDC6B-\uDC6F\uDC7D-\uDC7F\uDC89-\uDC8F\uDC9A-\uDC9C\uDC9F-\uDFFF]|\uD834[\uDC00-\uDD64\uDD6A-\uDD6C\uDD73-\uDD7A\uDD83\uDD84\uDD8C-\uDDA9\uDDAE-\uDE41\uDE45-\uDFFF]|\uD835[\uDC55\uDC9D\uDCA0\uDCA1\uDCA3\uDCA4\uDCA7\uDCA8\uDCAD\uDCBA\uDCBC\uDCC4\uDD06\uDD0B\uDD0C\uDD15\uDD1D\uDD3A\uDD3F\uDD45\uDD47-\uDD49\uDD51\uDEA6\uDEA7\uDEC1\uDEDB\uDEFB\uDF15\uDF35\uDF4F\uDF6F\uDF89\uDFA9\uDFC3\uDFCC\uDFCD]|\uD836[\uDC00-\uDDFF\uDE37-\uDE3A\uDE6D-\uDE74\uDE76-\uDE83\uDE85-\uDE9A\uDEA0\uDEB0-\uDFFF]|\uD838[\uDC07\uDC19\uDC1A\uDC22\uDC25\uDC2B-\uDCFF\uDD2D-\uDD2F\uDD3E\uDD3F\uDD4A-\uDD4D\uDD4F-\uDEBF\uDEFA-\uDFFF]|\uD83A[\uDCC5-\uDCCF\uDCD7-\uDCFF\uDD4C-\uDD4F\uDD5A-\uDFFF]|\uD83B[\uDC00-\uDDFF\uDE04\uDE20\uDE23\uDE25\uDE26\uDE28\uDE33\uDE38\uDE3A\uDE3C-\uDE41\uDE43-\uDE46\uDE48\uDE4A\uDE4C\uDE50\uDE53\uDE55\uDE56\uDE58\uDE5A\uDE5C\uDE5E\uDE60\uDE63\uDE65\uDE66\uDE6B\uDE73\uDE78\uDE7D\uDE7F\uDE8A\uDE9C-\uDEA0\uDEA4\uDEAA\uDEBC-\uDFFF]|\uD83C[\uDC00-\uDD2F\uDD4A-\uDD4F\uDD6A-\uDD6F\uDD8A-\uDFFF]|\uD83E[\uDC00-\uDFEF\uDFFA-\uDFFF]|\uD869[\uDEDE-\uDEFF]|\uD86D[\uDF35-\uDF3F]|\uD86E[\uDC1E\uDC1F]|\uD873[\uDEA2-\uDEAF]|\uD87A[\uDFE1-\uDFFF]|\uD87E[\uDE1E-\uDFFF]|\uD884[\uDF4B-\uDFFF]|\uDB40[\uDC00-\uDCFF\uDDF0-\uDFFF]/g,Fm=Object.hasOwnProperty,Im=class{constructor(){this.occurrences,this.reset()}slug(e,t){let n=this,r=zi(e,t===!0),i=r;for(;Fm.call(n.occurrences,r);)n.occurrences[i]++,r=i+`-`+n.occurrences[i];return n.occurrences[r]=0,r}reset(){this.occurrences=Object.create(null)}},Lm=new Im,Rm=({children:e,disableAnchor:t,...n})=>{if(t||typeof e!=`string`)return za.createElement(je,null,e);let r=Lm.slug(e.toLowerCase());return za.createElement(Cm,{as:`h2`,id:r,...n},e)},zm=Au(`Heading`,Rm),Bm=({children:e,disableAnchor:t})=>{if(t||typeof e!=`string`)return Ra.createElement(_e,null,e);let n=Lm.slug(e.toLowerCase());return Ra.createElement(Cm,{as:`h3`,id:n},e)},Vm=Au(`Subheading`,Bm),Hm=({of:e,expanded:t=!0,withToolbar:n=!1,__forceInitialArgs:r=!1,__primary:i=!1})=>{let{story:a}=Z(e||`story`,[`story`]),o=a.parameters.docs?.canvas?.withToolbar??n;return La.createElement(yd,{storyId:i?`primary--${a.id}`:a.id},t&&La.createElement(La.Fragment,null,La.createElement(Vm,null,a.name),La.createElement(Am,{of:e})),La.createElement(em,{of:e,withToolbar:o,story:{__forceInitialArgs:r,__primary:i},source:{__forceInitialArgs:r}}))},Um=Au(`DocsStory`,Hm),Wm=()=>{let e=um();return e?Ia.createElement(Um,{of:e.moduleExport,expanded:!1,__primary:!0,withToolbar:!0}):null},Gm=Au(`Primary`,Wm),{Tag:Km}=__STORYBOOK_MODULE_PREVIEW_API__,qm=_(zm)(({theme:e})=>({fontSize:`${e.typography.size.s2-1}px`,fontWeight:e.typography.weight.bold,lineHeight:`16px`,letterSpacing:`0.35em`,textTransform:`uppercase`,color:e.textMutedColor,border:0,marginBottom:`12px`,"&:first-of-type":{marginTop:`56px`}})),Jm=({title:e=`Stories`,includePrimary:t=!0})=>{let{componentStories:n,projectAnnotations:r,getStoryContext:i}=(0,Ba.useContext)(Du),a=n(),{stories:{filter:o}={filter:void 0}}=r.parameters?.docs||{};return o&&(a=a.filter(e=>o(e,i(e)))),a.some(e=>e.tags?.includes(Km.AUTODOCS))&&(a=a.filter(e=>e.tags?.includes(Km.AUTODOCS)&&!e.usesMount)),t||(a=a.slice(1)),!a||a.length===0?null:Ba.createElement(Ba.Fragment,null,typeof e==`string`?Ba.createElement(qm,null,e):e,a.map(e=>e&&Ba.createElement(Um,{key:e.id,of:e.moduleExport,expanded:!0,__forceInitialArgs:!0})))},Ym=Au(`Stories`,Jm),{deprecate:Xm}=__STORYBOOK_MODULE_CLIENT_LOGGER__,Zm=`https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#subtitle-block-and-parameterscomponentsubtitle`,Qm=e=>{let{of:t,children:n}=e;if(`of`in e&&t===void 0)throw Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let r;try{r=Z(t||`meta`,[`meta`]).preparedMeta}catch(e){if(n&&!e.message.includes(`did you forget to use ?`))throw e}let{componentSubtitle:i,docs:a}=r?.parameters||{};i&&Xm(`Using 'parameters.componentSubtitle' property to subtitle stories is deprecated. See ${Zm}`);let o=n||a?.subtitle||i;return o?Va.createElement(iu,{className:`sbdocs-subtitle sb-unstyled`},o):null},$m=Au(`Subtitle`,Qm),eh=/\s*\/\s*/,th=e=>{let t=e.trim().split(eh);return t?.[t?.length-1]||e},nh=e=>{let{children:t,of:n}=e;if(`of`in e&&n===void 0)throw Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let r;try{r=Z(n||`meta`,[`meta`]).preparedMeta}catch(e){if(t&&e instanceof Error&&!e.message.includes(`did you forget to use ?`))throw e}let i=t||th(r?.title||``);return i?Ha.createElement(ru,{className:`sbdocs-title sb-unstyled`},i):null},rh=Au(`Title`,nh),ih=()=>{let{stories:e}=Z(`meta`,[`meta`]).csfFile,t=Object.keys(e).length===1;return Fa.createElement(Fa.Fragment,null,Fa.createElement(rh,null),Fa.createElement($m,null),Fa.createElement(Am,{of:`meta`}),t?Fa.createElement(Am,{of:`story`}):null,Fa.createElement(Gm,null),Fa.createElement(fm,null),t?null:Fa.createElement(Ym,null))},{composeConfigs:ah}=__STORYBOOK_MODULE_PREVIEW_API__,{Channel:oh}=__STORYBOOK_MODULE_CHANNELS__,{Preview:sh,composeConfigs:ch}=__STORYBOOK_MODULE_PREVIEW_API__,{DocsContext:lh}=__STORYBOOK_MODULE_PREVIEW_API__,uh=e=>Ua.createElement(`div`,{...e,className:`sb-unstyled`}),Au(`Unstyled`,uh),dh=({children:e})=>Wa.createElement(`div`,{style:{fontFamily:`sans-serif`}},e),Au(`Wrapper`,dh)})),ph,mh,hh,gh,_h=t((()=>{ph=e(u(),1),Ze(),fh(),r(),mh={code:hm,a:vm,...wm},hh=class extends ph.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){let{showException:t}=this.props;t(e)}render(){let{hasError:e}=this.state,{children:t}=this.props;return e?null:ph.createElement(ph.Fragment,null,t)}},gh=class{constructor(){this.render=async(e,t,n)=>{let r={...mh,...t?.components},a=Bi;return new Promise((o,s)=>{i(async()=>{let{MDXProvider:e}=await import(`./react-CMQ2J9Vz.js`).then(e=>(e.t(),e.n));return{MDXProvider:e}},__vite__mapDeps([11,1,7]),import.meta.url).then(({MDXProvider:i})=>Je(ph.createElement(hh,{showException:s,key:Math.random()},ph.createElement(i,{components:r},ph.createElement(a,{context:e,docsParameter:t}))),n)).then(()=>o())})},this.unmount=e=>{Ye(e)}}}}));t((()=>{_h()}))();export{gh as DocsRenderer}; \ No newline at end of file + `);return ja.createElement(As,{...e,options:{forceBlock:!0,overrides:{code:hm,a:vm,...wm,...e?.options?.overrides},...e?.options}})},Em=Au(`Markdown`,Tm),Dm=(e=>(e.INFO=`info`,e.NOTES=`notes`,e.DOCGEN=`docgen`,e.AUTO=`auto`,e))(Dm||{}),Om=e=>{switch(e.type){case`story`:return e.story.parameters.docs?.description?.story||null;case`meta`:{let{parameters:t,component:n}=e.preparedMeta;return t.docs?.description?.component||t.docs?.extractComponentDescription?.(n,{component:n,parameters:t})||null}case`component`:{let{component:t,projectAnnotations:{parameters:n}}=e;return n?.docs?.extractComponentDescription?.(t,{component:t,parameters:n})||null}default:throw Error(`Unrecognized module type resolved from 'useOf', got: ${e.type}`)}},km=e=>{let{of:t}=e;if(`of`in e&&t===void 0)throw Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let n=Om(Z(t||`meta`));return n?Aa.createElement(Em,null,n):null},Am=Au(`Description`,km),{document:jm,window:Mm}=globalThis,Nm=({context:e,theme:t,children:n})=>{let r;try{r=e.resolveOf(`meta`,[`meta`]).preparedMeta.parameters?.docs?.toc}catch{r=e?.projectAnnotations?.parameters?.docs?.toc}return(0,Pa.useEffect)(()=>{let e;try{if(e=new URL(Mm.parent.location.toString()),e.hash){let t=jm.getElementById(decodeURIComponent(e.hash.substring(1)));t&&setTimeout(()=>{Yr(t)},200)}}catch{}}),Pa.createElement(Du.Provider,{value:e},Pa.createElement(Jp,{channel:e.channel},Pa.createElement(S,{theme:x(t)},Pa.createElement(su,{toc:r?Pa.createElement(_d,{className:`sbdocs sbdocs-toc--custom`,channel:e.channel,...r}):null},n))))},Pm=/[\0-\x1F!-,\.\/:-@\[-\^`\{-\xA9\xAB-\xB4\xB6-\xB9\xBB-\xBF\xD7\xF7\u02C2-\u02C5\u02D2-\u02DF\u02E5-\u02EB\u02ED\u02EF-\u02FF\u0375\u0378\u0379\u037E\u0380-\u0385\u0387\u038B\u038D\u03A2\u03F6\u0482\u0530\u0557\u0558\u055A-\u055F\u0589-\u0590\u05BE\u05C0\u05C3\u05C6\u05C8-\u05CF\u05EB-\u05EE\u05F3-\u060F\u061B-\u061F\u066A-\u066D\u06D4\u06DD\u06DE\u06E9\u06FD\u06FE\u0700-\u070F\u074B\u074C\u07B2-\u07BF\u07F6-\u07F9\u07FB\u07FC\u07FE\u07FF\u082E-\u083F\u085C-\u085F\u086B-\u089F\u08B5\u08C8-\u08D2\u08E2\u0964\u0965\u0970\u0984\u098D\u098E\u0991\u0992\u09A9\u09B1\u09B3-\u09B5\u09BA\u09BB\u09C5\u09C6\u09C9\u09CA\u09CF-\u09D6\u09D8-\u09DB\u09DE\u09E4\u09E5\u09F2-\u09FB\u09FD\u09FF\u0A00\u0A04\u0A0B-\u0A0E\u0A11\u0A12\u0A29\u0A31\u0A34\u0A37\u0A3A\u0A3B\u0A3D\u0A43-\u0A46\u0A49\u0A4A\u0A4E-\u0A50\u0A52-\u0A58\u0A5D\u0A5F-\u0A65\u0A76-\u0A80\u0A84\u0A8E\u0A92\u0AA9\u0AB1\u0AB4\u0ABA\u0ABB\u0AC6\u0ACA\u0ACE\u0ACF\u0AD1-\u0ADF\u0AE4\u0AE5\u0AF0-\u0AF8\u0B00\u0B04\u0B0D\u0B0E\u0B11\u0B12\u0B29\u0B31\u0B34\u0B3A\u0B3B\u0B45\u0B46\u0B49\u0B4A\u0B4E-\u0B54\u0B58-\u0B5B\u0B5E\u0B64\u0B65\u0B70\u0B72-\u0B81\u0B84\u0B8B-\u0B8D\u0B91\u0B96-\u0B98\u0B9B\u0B9D\u0BA0-\u0BA2\u0BA5-\u0BA7\u0BAB-\u0BAD\u0BBA-\u0BBD\u0BC3-\u0BC5\u0BC9\u0BCE\u0BCF\u0BD1-\u0BD6\u0BD8-\u0BE5\u0BF0-\u0BFF\u0C0D\u0C11\u0C29\u0C3A-\u0C3C\u0C45\u0C49\u0C4E-\u0C54\u0C57\u0C5B-\u0C5F\u0C64\u0C65\u0C70-\u0C7F\u0C84\u0C8D\u0C91\u0CA9\u0CB4\u0CBA\u0CBB\u0CC5\u0CC9\u0CCE-\u0CD4\u0CD7-\u0CDD\u0CDF\u0CE4\u0CE5\u0CF0\u0CF3-\u0CFF\u0D0D\u0D11\u0D45\u0D49\u0D4F-\u0D53\u0D58-\u0D5E\u0D64\u0D65\u0D70-\u0D79\u0D80\u0D84\u0D97-\u0D99\u0DB2\u0DBC\u0DBE\u0DBF\u0DC7-\u0DC9\u0DCB-\u0DCE\u0DD5\u0DD7\u0DE0-\u0DE5\u0DF0\u0DF1\u0DF4-\u0E00\u0E3B-\u0E3F\u0E4F\u0E5A-\u0E80\u0E83\u0E85\u0E8B\u0EA4\u0EA6\u0EBE\u0EBF\u0EC5\u0EC7\u0ECE\u0ECF\u0EDA\u0EDB\u0EE0-\u0EFF\u0F01-\u0F17\u0F1A-\u0F1F\u0F2A-\u0F34\u0F36\u0F38\u0F3A-\u0F3D\u0F48\u0F6D-\u0F70\u0F85\u0F98\u0FBD-\u0FC5\u0FC7-\u0FFF\u104A-\u104F\u109E\u109F\u10C6\u10C8-\u10CC\u10CE\u10CF\u10FB\u1249\u124E\u124F\u1257\u1259\u125E\u125F\u1289\u128E\u128F\u12B1\u12B6\u12B7\u12BF\u12C1\u12C6\u12C7\u12D7\u1311\u1316\u1317\u135B\u135C\u1360-\u137F\u1390-\u139F\u13F6\u13F7\u13FE-\u1400\u166D\u166E\u1680\u169B-\u169F\u16EB-\u16ED\u16F9-\u16FF\u170D\u1715-\u171F\u1735-\u173F\u1754-\u175F\u176D\u1771\u1774-\u177F\u17D4-\u17D6\u17D8-\u17DB\u17DE\u17DF\u17EA-\u180A\u180E\u180F\u181A-\u181F\u1879-\u187F\u18AB-\u18AF\u18F6-\u18FF\u191F\u192C-\u192F\u193C-\u1945\u196E\u196F\u1975-\u197F\u19AC-\u19AF\u19CA-\u19CF\u19DA-\u19FF\u1A1C-\u1A1F\u1A5F\u1A7D\u1A7E\u1A8A-\u1A8F\u1A9A-\u1AA6\u1AA8-\u1AAF\u1AC1-\u1AFF\u1B4C-\u1B4F\u1B5A-\u1B6A\u1B74-\u1B7F\u1BF4-\u1BFF\u1C38-\u1C3F\u1C4A-\u1C4C\u1C7E\u1C7F\u1C89-\u1C8F\u1CBB\u1CBC\u1CC0-\u1CCF\u1CD3\u1CFB-\u1CFF\u1DFA\u1F16\u1F17\u1F1E\u1F1F\u1F46\u1F47\u1F4E\u1F4F\u1F58\u1F5A\u1F5C\u1F5E\u1F7E\u1F7F\u1FB5\u1FBD\u1FBF-\u1FC1\u1FC5\u1FCD-\u1FCF\u1FD4\u1FD5\u1FDC-\u1FDF\u1FED-\u1FF1\u1FF5\u1FFD-\u203E\u2041-\u2053\u2055-\u2070\u2072-\u207E\u2080-\u208F\u209D-\u20CF\u20F1-\u2101\u2103-\u2106\u2108\u2109\u2114\u2116-\u2118\u211E-\u2123\u2125\u2127\u2129\u212E\u213A\u213B\u2140-\u2144\u214A-\u214D\u214F-\u215F\u2189-\u24B5\u24EA-\u2BFF\u2C2F\u2C5F\u2CE5-\u2CEA\u2CF4-\u2CFF\u2D26\u2D28-\u2D2C\u2D2E\u2D2F\u2D68-\u2D6E\u2D70-\u2D7E\u2D97-\u2D9F\u2DA7\u2DAF\u2DB7\u2DBF\u2DC7\u2DCF\u2DD7\u2DDF\u2E00-\u2E2E\u2E30-\u3004\u3008-\u3020\u3030\u3036\u3037\u303D-\u3040\u3097\u3098\u309B\u309C\u30A0\u30FB\u3100-\u3104\u3130\u318F-\u319F\u31C0-\u31EF\u3200-\u33FF\u4DC0-\u4DFF\u9FFD-\u9FFF\uA48D-\uA4CF\uA4FE\uA4FF\uA60D-\uA60F\uA62C-\uA63F\uA673\uA67E\uA6F2-\uA716\uA720\uA721\uA789\uA78A\uA7C0\uA7C1\uA7CB-\uA7F4\uA828-\uA82B\uA82D-\uA83F\uA874-\uA87F\uA8C6-\uA8CF\uA8DA-\uA8DF\uA8F8-\uA8FA\uA8FC\uA92E\uA92F\uA954-\uA95F\uA97D-\uA97F\uA9C1-\uA9CE\uA9DA-\uA9DF\uA9FF\uAA37-\uAA3F\uAA4E\uAA4F\uAA5A-\uAA5F\uAA77-\uAA79\uAAC3-\uAADA\uAADE\uAADF\uAAF0\uAAF1\uAAF7-\uAB00\uAB07\uAB08\uAB0F\uAB10\uAB17-\uAB1F\uAB27\uAB2F\uAB5B\uAB6A-\uAB6F\uABEB\uABEE\uABEF\uABFA-\uABFF\uD7A4-\uD7AF\uD7C7-\uD7CA\uD7FC-\uD7FF\uE000-\uF8FF\uFA6E\uFA6F\uFADA-\uFAFF\uFB07-\uFB12\uFB18-\uFB1C\uFB29\uFB37\uFB3D\uFB3F\uFB42\uFB45\uFBB2-\uFBD2\uFD3E-\uFD4F\uFD90\uFD91\uFDC8-\uFDEF\uFDFC-\uFDFF\uFE10-\uFE1F\uFE30-\uFE32\uFE35-\uFE4C\uFE50-\uFE6F\uFE75\uFEFD-\uFF0F\uFF1A-\uFF20\uFF3B-\uFF3E\uFF40\uFF5B-\uFF65\uFFBF-\uFFC1\uFFC8\uFFC9\uFFD0\uFFD1\uFFD8\uFFD9\uFFDD-\uFFFF]|\uD800[\uDC0C\uDC27\uDC3B\uDC3E\uDC4E\uDC4F\uDC5E-\uDC7F\uDCFB-\uDD3F\uDD75-\uDDFC\uDDFE-\uDE7F\uDE9D-\uDE9F\uDED1-\uDEDF\uDEE1-\uDEFF\uDF20-\uDF2C\uDF4B-\uDF4F\uDF7B-\uDF7F\uDF9E\uDF9F\uDFC4-\uDFC7\uDFD0\uDFD6-\uDFFF]|\uD801[\uDC9E\uDC9F\uDCAA-\uDCAF\uDCD4-\uDCD7\uDCFC-\uDCFF\uDD28-\uDD2F\uDD64-\uDDFF\uDF37-\uDF3F\uDF56-\uDF5F\uDF68-\uDFFF]|\uD802[\uDC06\uDC07\uDC09\uDC36\uDC39-\uDC3B\uDC3D\uDC3E\uDC56-\uDC5F\uDC77-\uDC7F\uDC9F-\uDCDF\uDCF3\uDCF6-\uDCFF\uDD16-\uDD1F\uDD3A-\uDD7F\uDDB8-\uDDBD\uDDC0-\uDDFF\uDE04\uDE07-\uDE0B\uDE14\uDE18\uDE36\uDE37\uDE3B-\uDE3E\uDE40-\uDE5F\uDE7D-\uDE7F\uDE9D-\uDEBF\uDEC8\uDEE7-\uDEFF\uDF36-\uDF3F\uDF56-\uDF5F\uDF73-\uDF7F\uDF92-\uDFFF]|\uD803[\uDC49-\uDC7F\uDCB3-\uDCBF\uDCF3-\uDCFF\uDD28-\uDD2F\uDD3A-\uDE7F\uDEAA\uDEAD-\uDEAF\uDEB2-\uDEFF\uDF1D-\uDF26\uDF28-\uDF2F\uDF51-\uDFAF\uDFC5-\uDFDF\uDFF7-\uDFFF]|\uD804[\uDC47-\uDC65\uDC70-\uDC7E\uDCBB-\uDCCF\uDCE9-\uDCEF\uDCFA-\uDCFF\uDD35\uDD40-\uDD43\uDD48-\uDD4F\uDD74\uDD75\uDD77-\uDD7F\uDDC5-\uDDC8\uDDCD\uDDDB\uDDDD-\uDDFF\uDE12\uDE38-\uDE3D\uDE3F-\uDE7F\uDE87\uDE89\uDE8E\uDE9E\uDEA9-\uDEAF\uDEEB-\uDEEF\uDEFA-\uDEFF\uDF04\uDF0D\uDF0E\uDF11\uDF12\uDF29\uDF31\uDF34\uDF3A\uDF45\uDF46\uDF49\uDF4A\uDF4E\uDF4F\uDF51-\uDF56\uDF58-\uDF5C\uDF64\uDF65\uDF6D-\uDF6F\uDF75-\uDFFF]|\uD805[\uDC4B-\uDC4F\uDC5A-\uDC5D\uDC62-\uDC7F\uDCC6\uDCC8-\uDCCF\uDCDA-\uDD7F\uDDB6\uDDB7\uDDC1-\uDDD7\uDDDE-\uDDFF\uDE41-\uDE43\uDE45-\uDE4F\uDE5A-\uDE7F\uDEB9-\uDEBF\uDECA-\uDEFF\uDF1B\uDF1C\uDF2C-\uDF2F\uDF3A-\uDFFF]|\uD806[\uDC3B-\uDC9F\uDCEA-\uDCFE\uDD07\uDD08\uDD0A\uDD0B\uDD14\uDD17\uDD36\uDD39\uDD3A\uDD44-\uDD4F\uDD5A-\uDD9F\uDDA8\uDDA9\uDDD8\uDDD9\uDDE2\uDDE5-\uDDFF\uDE3F-\uDE46\uDE48-\uDE4F\uDE9A-\uDE9C\uDE9E-\uDEBF\uDEF9-\uDFFF]|\uD807[\uDC09\uDC37\uDC41-\uDC4F\uDC5A-\uDC71\uDC90\uDC91\uDCA8\uDCB7-\uDCFF\uDD07\uDD0A\uDD37-\uDD39\uDD3B\uDD3E\uDD48-\uDD4F\uDD5A-\uDD5F\uDD66\uDD69\uDD8F\uDD92\uDD99-\uDD9F\uDDAA-\uDEDF\uDEF7-\uDFAF\uDFB1-\uDFFF]|\uD808[\uDF9A-\uDFFF]|\uD809[\uDC6F-\uDC7F\uDD44-\uDFFF]|[\uD80A\uD80B\uD80E-\uD810\uD812-\uD819\uD824-\uD82B\uD82D\uD82E\uD830-\uD833\uD837\uD839\uD83D\uD83F\uD87B-\uD87D\uD87F\uD885-\uDB3F\uDB41-\uDBFF][\uDC00-\uDFFF]|\uD80D[\uDC2F-\uDFFF]|\uD811[\uDE47-\uDFFF]|\uD81A[\uDE39-\uDE3F\uDE5F\uDE6A-\uDECF\uDEEE\uDEEF\uDEF5-\uDEFF\uDF37-\uDF3F\uDF44-\uDF4F\uDF5A-\uDF62\uDF78-\uDF7C\uDF90-\uDFFF]|\uD81B[\uDC00-\uDE3F\uDE80-\uDEFF\uDF4B-\uDF4E\uDF88-\uDF8E\uDFA0-\uDFDF\uDFE2\uDFE5-\uDFEF\uDFF2-\uDFFF]|\uD821[\uDFF8-\uDFFF]|\uD823[\uDCD6-\uDCFF\uDD09-\uDFFF]|\uD82C[\uDD1F-\uDD4F\uDD53-\uDD63\uDD68-\uDD6F\uDEFC-\uDFFF]|\uD82F[\uDC6B-\uDC6F\uDC7D-\uDC7F\uDC89-\uDC8F\uDC9A-\uDC9C\uDC9F-\uDFFF]|\uD834[\uDC00-\uDD64\uDD6A-\uDD6C\uDD73-\uDD7A\uDD83\uDD84\uDD8C-\uDDA9\uDDAE-\uDE41\uDE45-\uDFFF]|\uD835[\uDC55\uDC9D\uDCA0\uDCA1\uDCA3\uDCA4\uDCA7\uDCA8\uDCAD\uDCBA\uDCBC\uDCC4\uDD06\uDD0B\uDD0C\uDD15\uDD1D\uDD3A\uDD3F\uDD45\uDD47-\uDD49\uDD51\uDEA6\uDEA7\uDEC1\uDEDB\uDEFB\uDF15\uDF35\uDF4F\uDF6F\uDF89\uDFA9\uDFC3\uDFCC\uDFCD]|\uD836[\uDC00-\uDDFF\uDE37-\uDE3A\uDE6D-\uDE74\uDE76-\uDE83\uDE85-\uDE9A\uDEA0\uDEB0-\uDFFF]|\uD838[\uDC07\uDC19\uDC1A\uDC22\uDC25\uDC2B-\uDCFF\uDD2D-\uDD2F\uDD3E\uDD3F\uDD4A-\uDD4D\uDD4F-\uDEBF\uDEFA-\uDFFF]|\uD83A[\uDCC5-\uDCCF\uDCD7-\uDCFF\uDD4C-\uDD4F\uDD5A-\uDFFF]|\uD83B[\uDC00-\uDDFF\uDE04\uDE20\uDE23\uDE25\uDE26\uDE28\uDE33\uDE38\uDE3A\uDE3C-\uDE41\uDE43-\uDE46\uDE48\uDE4A\uDE4C\uDE50\uDE53\uDE55\uDE56\uDE58\uDE5A\uDE5C\uDE5E\uDE60\uDE63\uDE65\uDE66\uDE6B\uDE73\uDE78\uDE7D\uDE7F\uDE8A\uDE9C-\uDEA0\uDEA4\uDEAA\uDEBC-\uDFFF]|\uD83C[\uDC00-\uDD2F\uDD4A-\uDD4F\uDD6A-\uDD6F\uDD8A-\uDFFF]|\uD83E[\uDC00-\uDFEF\uDFFA-\uDFFF]|\uD869[\uDEDE-\uDEFF]|\uD86D[\uDF35-\uDF3F]|\uD86E[\uDC1E\uDC1F]|\uD873[\uDEA2-\uDEAF]|\uD87A[\uDFE1-\uDFFF]|\uD87E[\uDE1E-\uDFFF]|\uD884[\uDF4B-\uDFFF]|\uDB40[\uDC00-\uDCFF\uDDF0-\uDFFF]/g,Fm=Object.hasOwnProperty,Im=class{constructor(){this.occurrences,this.reset()}slug(e,t){let n=this,r=zi(e,t===!0),i=r;for(;Fm.call(n.occurrences,r);)n.occurrences[i]++,r=i+`-`+n.occurrences[i];return n.occurrences[r]=0,r}reset(){this.occurrences=Object.create(null)}},Lm=new Im,Rm=({children:e,disableAnchor:t,...n})=>{if(t||typeof e!=`string`)return za.createElement(je,null,e);let r=Lm.slug(e.toLowerCase());return za.createElement(Cm,{as:`h2`,id:r,...n},e)},zm=Au(`Heading`,Rm),Bm=({children:e,disableAnchor:t})=>{if(t||typeof e!=`string`)return Ra.createElement(_e,null,e);let n=Lm.slug(e.toLowerCase());return Ra.createElement(Cm,{as:`h3`,id:n},e)},Vm=Au(`Subheading`,Bm),Hm=({of:e,expanded:t=!0,withToolbar:n=!1,__forceInitialArgs:r=!1,__primary:i=!1})=>{let{story:a}=Z(e||`story`,[`story`]),o=a.parameters.docs?.canvas?.withToolbar??n;return La.createElement(yd,{storyId:i?`primary--${a.id}`:a.id},t&&La.createElement(La.Fragment,null,La.createElement(Vm,null,a.name),La.createElement(Am,{of:e})),La.createElement(em,{of:e,withToolbar:o,story:{__forceInitialArgs:r,__primary:i},source:{__forceInitialArgs:r}}))},Um=Au(`DocsStory`,Hm),Wm=()=>{let e=um();return e?Ia.createElement(Um,{of:e.moduleExport,expanded:!1,__primary:!0,withToolbar:!0}):null},Gm=Au(`Primary`,Wm),{Tag:Km}=__STORYBOOK_MODULE_PREVIEW_API__,qm=_(zm)(({theme:e})=>({fontSize:`${e.typography.size.s2-1}px`,fontWeight:e.typography.weight.bold,lineHeight:`16px`,letterSpacing:`0.35em`,textTransform:`uppercase`,color:e.textMutedColor,border:0,marginBottom:`12px`,"&:first-of-type":{marginTop:`56px`}})),Jm=({title:e=`Stories`,includePrimary:t=!0})=>{let{componentStories:n,projectAnnotations:r,getStoryContext:i}=(0,Ba.useContext)(Du),a=n(),{stories:{filter:o}={filter:void 0}}=r.parameters?.docs||{};return o&&(a=a.filter(e=>o(e,i(e)))),a.some(e=>e.tags?.includes(Km.AUTODOCS))&&(a=a.filter(e=>e.tags?.includes(Km.AUTODOCS)&&!e.usesMount)),t||(a=a.slice(1)),!a||a.length===0?null:Ba.createElement(Ba.Fragment,null,typeof e==`string`?Ba.createElement(qm,null,e):e,a.map(e=>e&&Ba.createElement(Um,{key:e.id,of:e.moduleExport,expanded:!0,__forceInitialArgs:!0})))},Ym=Au(`Stories`,Jm),{deprecate:Xm}=__STORYBOOK_MODULE_CLIENT_LOGGER__,Zm=`https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#subtitle-block-and-parameterscomponentsubtitle`,Qm=e=>{let{of:t,children:n}=e;if(`of`in e&&t===void 0)throw Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let r;try{r=Z(t||`meta`,[`meta`]).preparedMeta}catch(e){if(n&&!e.message.includes(`did you forget to use ?`))throw e}let{componentSubtitle:i,docs:a}=r?.parameters||{};i&&Xm(`Using 'parameters.componentSubtitle' property to subtitle stories is deprecated. See ${Zm}`);let o=n||a?.subtitle||i;return o?Va.createElement(iu,{className:`sbdocs-subtitle sb-unstyled`},o):null},$m=Au(`Subtitle`,Qm),eh=/\s*\/\s*/,th=e=>{let t=e.trim().split(eh);return t?.[t?.length-1]||e},nh=e=>{let{children:t,of:n}=e;if(`of`in e&&n===void 0)throw Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let r;try{r=Z(n||`meta`,[`meta`]).preparedMeta}catch(e){if(t&&e instanceof Error&&!e.message.includes(`did you forget to use ?`))throw e}let i=t||th(r?.title||``);return i?Ha.createElement(ru,{className:`sbdocs-title sb-unstyled`},i):null},rh=Au(`Title`,nh),ih=()=>{let{stories:e}=Z(`meta`,[`meta`]).csfFile,t=Object.keys(e).length===1;return Fa.createElement(Fa.Fragment,null,Fa.createElement(rh,null),Fa.createElement($m,null),Fa.createElement(Am,{of:`meta`}),t?Fa.createElement(Am,{of:`story`}):null,Fa.createElement(Gm,null),Fa.createElement(fm,null),t?null:Fa.createElement(Ym,null))},{composeConfigs:ah}=__STORYBOOK_MODULE_PREVIEW_API__,{Channel:oh}=__STORYBOOK_MODULE_CHANNELS__,{Preview:sh,composeConfigs:ch}=__STORYBOOK_MODULE_PREVIEW_API__,{DocsContext:lh}=__STORYBOOK_MODULE_PREVIEW_API__,uh=e=>Ua.createElement(`div`,{...e,className:`sb-unstyled`}),Au(`Unstyled`,uh),dh=({children:e})=>Wa.createElement(`div`,{style:{fontFamily:`sans-serif`}},e),Au(`Wrapper`,dh)})),ph,mh,hh,gh,_h=t((()=>{ph=e(u(),1),Ze(),fh(),r(),mh={code:hm,a:vm,...wm},hh=class extends ph.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){let{showException:t}=this.props;t(e)}render(){let{hasError:e}=this.state,{children:t}=this.props;return e?null:ph.createElement(ph.Fragment,null,t)}},gh=class{constructor(){this.render=async(e,t,n)=>{let r={...mh,...t?.components},a=Bi;return new Promise((o,s)=>{i(async()=>{let{MDXProvider:e}=await import(`./react-CMQ2J9Vz.js`).then(e=>(e.t(),e.n));return{MDXProvider:e}},__vite__mapDeps([12,1,8]),import.meta.url).then(({MDXProvider:i})=>Je(ph.createElement(hh,{showException:s,key:Math.random()},ph.createElement(i,{components:r},ph.createElement(a,{context:e,docsParameter:t}))),n)).then(()=>o())})},this.unmount=e=>{Ye(e)}}}}));t((()=>{_h()}))();export{gh as DocsRenderer}; \ No newline at end of file diff --git a/storybook/static/assets/Header-D2BDzFwA.js b/storybook/static/assets/Header-D2BDzFwA.js new file mode 100644 index 0000000000..ca045fb880 --- /dev/null +++ b/storybook/static/assets/Header-D2BDzFwA.js @@ -0,0 +1,14 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{n as t,o as n}from"./theme-utils-B-KYefhh.js";function r({title:e=`Title`,width:t=261,variant:r=`panel`,theme:s}={}){let c=n(s),l=i[c]??i.Light,u=c.startsWith(`Modern`),d=r===`panel`,f=r===`window`,p=d?l.panelDivider:l.windowDivider,m=f?l.windowWeight??700:700,h=d?44:34,g=d?`11px 12px 12px`:`7px 12px`,_=d?`space-between`:`center`,v=u&&d?24:20,y=d&&u?``:``,b=f?``:``;return`
+
+ ${b} +
${e}
+
+ ${y} + +
+
+
`}var i,a,o,s=e((()=>{t(),i={Light:{bg:`#F7F7F7`,text:`rgba(0, 0, 0, 0.80)`,panelDivider:`#E0E0E0`,windowDivider:`#E0E0E0`},"Light Classic":{bg:`#F1F1F1`,text:`#444444`,panelDivider:`#D8DADC`,windowDivider:`#D8DADC`},Dark:{bg:`#404040`,text:`rgba(255, 255, 255, 0.80)`,panelDivider:`#555555`,windowDivider:`#555555`},"Dark Contrast":{bg:`#2A2A2A`,text:`#E8E8E8`,panelDivider:`#424242`,windowDivider:`#555555`},"Modern Light":{bg:`#FFFFFF`,text:`#383838`,panelDivider:`#EAEAEA`,windowDivider:`#EAEAEA`},"Modern Dark":{bg:`#404040`,text:`#F3F3F3`,panelDivider:`#585858`,windowDivider:`#585858`,windowWeight:400}},a=e=>``,o=e=>``}));export{s as n,r as t}; \ No newline at end of file diff --git a/storybook/static/assets/Header.stories-Bpjh8rah.js b/storybook/static/assets/Header.stories-Bpjh8rah.js new file mode 100644 index 0000000000..385e1a61cd --- /dev/null +++ b/storybook/static/assets/Header.stories-Bpjh8rah.js @@ -0,0 +1,29 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r}from"./theme-utils-B-KYefhh.js";import{n as i,t as a}from"./Header-D2BDzFwA.js";var o,s,c,l,u;e((()=>{i(),r(),o=n,s={title:`Components/Layout/Header`,tags:[`autodocs`],args:{title:`Title`,tags:[`autodocs`],width:261,variant:`panel`,themeMode:`Auto`},argTypes:{title:{control:`text`,description:`Visible header title`},width:{control:`number`,description:`Rendered header width`},variant:{control:`select`,options:[`panel`,`window`],description:`Panel header or standalone window header layout`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...o],description:`Auto = current Storybook toolbar theme`},theme:{table:{disable:!0}}},parameters:{docs:{description:{component:`Header shell used at the top of plugin panels and standalone windows.`}}}},c={name:`Panel`,render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return a({title:e.title,width:e.width,variant:`panel`,theme:r})}},l={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return a({title:e.title,width:e.width,variant:`window`,theme:r})},parameters:{docs:{description:{story:`Standalone window-style header with different chrome treatment.`}}}},c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{ + name: 'Panel', + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Header({ + title: args.title, + width: args.width, + variant: 'panel', + theme + }); + } +}`,...c.parameters?.docs?.source}}},l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Header({ + title: args.title, + width: args.width, + variant: 'window', + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Standalone window-style header with different chrome treatment.' + } + } + } +}`,...l.parameters?.docs?.source}}},u=[`Default`,`Window`]}))();export{c as Default,l as Window,u as __namedExportsOrder,s as default}; \ No newline at end of file diff --git a/storybook/static/assets/IconButtons.stories-ThZx5UJ6.js b/storybook/static/assets/IconButtons.stories-ThZx5UJ6.js new file mode 100644 index 0000000000..df70b50b48 --- /dev/null +++ b/storybook/static/assets/IconButtons.stories-ThZx5UJ6.js @@ -0,0 +1,189 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r,o as i}from"./theme-utils-B-KYefhh.js";var a,o=e((()=>{a={Light:{Outline:{Default:{container:{width:24,height:24,padding:8,background:`white`,overflow:`hidden`,borderRadius:1,outline:`1px #C0C0C0 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(0, 0, 0, 0.8)`,direction:`down`},Hover:{container:{width:24,height:24,padding:8,background:`#E0E0E0`,overflow:`hidden`,borderRadius:1,outline:`1px #C0C0C0 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(0, 0, 0, 0.8)`,direction:`down`},Pressed:{container:{width:24,height:24,padding:8,background:`#CBCBCB`,overflow:`hidden`,borderRadius:1,outline:`1px #C0C0C0 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(0, 0, 0, 0.8)`,direction:`down`}},Solid:{Default:{container:{width:24,height:24,padding:8,background:`white`,overflow:`hidden`,borderRadius:1,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(0, 0, 0, 0.8)`,direction:`down`},Hover:{container:{width:24,height:24,padding:8,background:`#E0E0E0`,overflow:`hidden`,borderRadius:1,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(0, 0, 0, 0.8)`,direction:`down`},Pressed:{container:{width:24,height:24,padding:8,background:`#CBCBCB`,overflow:`hidden`,borderRadius:1,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(0, 0, 0, 0.8)`,direction:`down`}},RightExpander:{Default:{container:{width:24,height:24,padding:8,background:`white`,overflow:`hidden`,borderTopRightRadius:1,borderBottomRightRadius:1,outline:`1px #C0C0C0 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(0, 0, 0, 0.8)`,direction:`down`},Hover:{container:{width:24,height:24,padding:8,background:`#E0E0E0`,overflow:`hidden`,borderTopRightRadius:1,borderBottomRightRadius:1,outline:`1px #C0C0C0 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(0, 0, 0, 0.8)`,direction:`down`},Pressed:{container:{width:24,height:24,padding:8,background:`#CBCBCB`,overflow:`hidden`,borderTopRightRadius:1,borderBottomRightRadius:1,outline:`1px #C0C0C0 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(0, 0, 0, 0.8)`,direction:`up`}}},"Light Classic":{Outline:{Default:{container:{width:24,height:24,padding:8,background:`white`,overflow:`hidden`,borderRadius:1,outline:`1px #CFCFCF solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#444444`,direction:`down`},Hover:{container:{width:24,height:24,padding:8,background:`#D8DADC`,overflow:`hidden`,borderRadius:1,outline:`1px #CFCFCF solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#444444`,direction:`down`},Pressed:{container:{width:24,height:24,padding:8,background:`#7D858C`,overflow:`hidden`,borderRadius:1,outline:`1px #CFCFCF solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`white`,direction:`down`}},RightExpander:{Default:{container:{width:24,height:24,padding:8,background:`white`,overflow:`hidden`,borderTopRightRadius:1,borderBottomRightRadius:1,outline:`1px #CFCFCF solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#444444`,direction:`down`},Hover:{container:{width:24,height:24,padding:8,background:`#D8DADC`,overflow:`hidden`,borderTopRightRadius:1,borderBottomRightRadius:1,outline:`1px #CFCFCF solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#444444`,direction:`down`},Pressed:{container:{width:24,height:24,padding:8,background:`#7D858C`,overflow:`hidden`,borderTopRightRadius:1,borderBottomRightRadius:1,outline:`1px #CFCFCF solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`white`,direction:`up`}},Solid:{Default:{container:{width:24,height:24,padding:8,background:`white`,overflow:`hidden`,borderRadius:1,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#444444`,direction:`down`},Hover:{container:{width:24,height:24,padding:8,background:`#D8DADC`,overflow:`hidden`,borderRadius:1,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#444444`,direction:`down`},Pressed:{container:{width:24,height:24,padding:8,background:`#7D858C`,overflow:`hidden`,borderRadius:1,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`white`,direction:`down`}}},Dark:{Outline:{Default:{container:{width:24,height:24,padding:8,background:`#333333`,overflow:`hidden`,borderRadius:1,outline:`1px #666666 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(255, 255, 255, 0.8)`,direction:`down`},Hover:{container:{width:24,height:24,padding:8,background:`#555555`,overflow:`hidden`,borderRadius:1,outline:`1px #666666 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(255, 255, 255, 0.8)`,direction:`down`},Pressed:{container:{width:24,height:24,padding:8,background:`#606060`,overflow:`hidden`,borderRadius:1,outline:`1px #666666 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(255, 255, 255, 0.8)`,direction:`down`}},RightExpander:{Default:{container:{width:24,height:24,padding:8,background:`#333333`,overflow:`hidden`,borderTopRightRadius:1,borderBottomRightRadius:1,outline:`1px #666666 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(255, 255, 255, 0.8)`,direction:`down`},Hover:{container:{width:24,height:24,padding:8,background:`#555555`,overflow:`hidden`,borderTopRightRadius:1,borderBottomRightRadius:1,outline:`1px #666666 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(255, 255, 255, 0.8)`,direction:`down`},Pressed:{container:{width:24,height:24,padding:8,background:`#606060`,overflow:`hidden`,borderTopRightRadius:1,borderBottomRightRadius:1,outline:`1px #666666 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(255, 255, 255, 0.8)`,direction:`up`}},Solid:{Default:{container:{width:24,height:24,padding:8,background:`#333333`,overflow:`hidden`,borderRadius:1,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(255, 255, 255, 0.8)`,direction:`down`},Hover:{container:{width:24,height:24,padding:8,background:`#555555`,overflow:`hidden`,borderRadius:1,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(255, 255, 255, 0.8)`,direction:`down`},Pressed:{container:{width:24,height:24,padding:8,background:`#606060`,overflow:`hidden`,borderRadius:1,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(255, 255, 255, 0.8)`,direction:`down`}}},"Dark Contrast":{Outline:{Default:{container:{width:24,height:24,padding:8,background:`#1E1E1E`,overflow:`hidden`,borderRadius:1,outline:`1px #696969 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#E8E8E8`,direction:`down`},Hover:{container:{width:24,height:24,padding:8,background:`#424242`,overflow:`hidden`,borderRadius:1,outline:`1px #696969 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#E8E8E8`,direction:`down`},Pressed:{container:{width:24,height:24,padding:8,background:`#666666`,overflow:`hidden`,borderRadius:1,outline:`1px #696969 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#E8E8E8`,direction:`down`}},RightExpander:{Default:{container:{width:24,height:24,padding:8,background:`#1E1E1E`,overflow:`hidden`,borderTopRightRadius:1,borderBottomRightRadius:1,outline:`1px #696969 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#E8E8E8`,direction:`down`},Hover:{container:{width:24,height:24,padding:8,background:`#424242`,overflow:`hidden`,borderTopRightRadius:1,borderBottomRightRadius:1,outline:`1px #696969 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#E8E8E8`,direction:`down`},Pressed:{container:{width:24,height:24,padding:8,background:`#666666`,overflow:`hidden`,borderTopRightRadius:1,borderBottomRightRadius:1,outline:`1px #696969 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#E8E8E8`,direction:`up`}},Solid:{Default:{container:{width:24,height:24,padding:8,background:`#1E1E1E`,overflow:`hidden`,borderRadius:1,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#E8E8E8`,direction:`down`},Hover:{container:{width:24,height:24,padding:8,background:`#424242`,overflow:`hidden`,borderRadius:1,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#E8E8E8`,direction:`down`},Pressed:{container:{width:24,height:24,padding:8,background:`#666666`,overflow:`hidden`,borderRadius:1,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#E8E8E8`,direction:`down`}}},"Modern Light":{Outline:{Default:{container:{width:24,height:24,padding:8,background:`white`,overflow:`hidden`,borderRadius:4,outline:`1px #E1E1E1 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#383838`,direction:`down`},Hover:{container:{width:24,height:24,padding:8,background:`#F9F9F9`,overflow:`hidden`,borderRadius:4,outline:`1px #E1E1E1 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#383838`,direction:`down`},Pressed:{container:{width:24,height:24,padding:8,background:`#EAEAEA`,overflow:`hidden`,borderRadius:4,outline:`1px #E1E1E1 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#383838`,direction:`down`}},Solid:{Default:{container:{width:24,height:24,padding:8,background:`white`,overflow:`hidden`,borderRadius:4,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#383838`,direction:`down`},Hover:{container:{width:24,height:24,padding:8,background:`#F9F9F9`,overflow:`hidden`,borderRadius:4,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#383838`,direction:`down`},Pressed:{container:{width:24,height:24,padding:8,background:`#EAEAEA`,overflow:`hidden`,borderRadius:4,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#383838`,direction:`down`}},RightExpander:{Default:{container:{width:24,height:24,padding:8,background:`white`,overflow:`hidden`,borderRadius:4,outline:`1px #E1E1E1 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(0, 0, 0, 0.8)`,direction:`down`},Hover:{container:{width:24,height:24,padding:8,background:`#F9F9F9`,overflow:`hidden`,borderRadius:4,outline:`1px #E1E1E1 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(0, 0, 0, 0.8)`,direction:`down`},Pressed:{container:{width:24,height:24,padding:8,background:`#EAEAEA`,overflow:`hidden`,borderRadius:4,outline:`1px #E1E1E1 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`rgba(0, 0, 0, 0.8)`,direction:`up`}}},"Modern Dark":{Outline:{Default:{container:{width:24,height:24,padding:8,background:`#404040`,overflow:`hidden`,borderRadius:4,outline:`1px #686868 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#EAEAEA`,direction:`down`},Hover:{container:{width:24,height:24,padding:8,background:`#585858`,overflow:`hidden`,borderRadius:4,outline:`1px #404040 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#EAEAEA`,direction:`down`},Pressed:{container:{width:24,height:24,padding:8,background:`#686868`,overflow:`hidden`,borderRadius:4,outline:`1px #404040 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#EAEAEA`,direction:`down`}},Solid:{Default:{container:{width:24,height:24,padding:8,background:`#404040`,overflow:`hidden`,borderRadius:4,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#EAEAEA`,direction:`down`},Hover:{container:{width:24,height:24,padding:8,background:`#585858`,overflow:`hidden`,borderRadius:4,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#EAEAEA`,direction:`down`},Pressed:{container:{width:24,height:24,padding:8,background:`#686868`,overflow:`hidden`,borderRadius:4,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#EAEAEA`,direction:`down`}},RightExpander:{Default:{container:{width:24,height:24,padding:8,background:`#404040`,overflow:`hidden`,borderRadius:4,outline:`1px #686868 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#EAEAEA`,direction:`down`},Hover:{container:{width:24,height:24,padding:8,background:`#585858`,overflow:`hidden`,borderRadius:4,outline:`1px #404040 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#EAEAEA`,direction:`down`},Pressed:{container:{width:24,height:24,padding:8,background:`#686868`,overflow:`hidden`,borderRadius:4,outline:`1px #404040 solid`,outlineOffset:`-1px`,justifyContent:`center`,alignItems:`center`,gap:4,display:`inline-flex`},iconColor:`#EAEAEA`,direction:`up`}}}}}));function s({type:e=`outline`,state:t=`default`,theme:n}={}){let r=a[i(n)]??a.Light,o=r[l[e]]??r.Outline,s=o[u[t]]??o.Default??{},d=s.container??{},f=s.iconColor??`rgba(0,0,0,0.8)`,p=d.borderRadius==null?[d.borderTopLeftRadius==null?``:`border-top-left-radius:${d.borderTopLeftRadius}px`,d.borderTopRightRadius==null?``:`border-top-right-radius:${d.borderTopRightRadius}px`,d.borderBottomRightRadius==null?``:`border-bottom-right-radius:${d.borderBottomRightRadius}px`,d.borderBottomLeftRadius==null?``:`border-bottom-left-radius:${d.borderBottomLeftRadius}px`].filter(Boolean).join(`;`):`border-radius:${d.borderRadius}px`;return``}var c,l,u,d=e((()=>{r(),o(),c=e=>``,l={outline:`Outline`,solid:`Solid`,rightExpander:`RightExpander`},u={default:`Default`,hover:`Hover`,pressed:`Pressed`}})),f,p,m,h,g,_,v,y,b,x,S;e((()=>{d(),r(),f=n,p={title:`Components/Buttons/Icon Buttons`,tags:[`autodocs`],args:{type:`outline`,interactive:!0,isHovered:!1,isClicked:!1,themeMode:`Auto`},argTypes:{type:{control:`select`,options:[`outline`,`solid`,`rightExpander`],description:`Visual style and icon-button role`,table:{defaultValue:{summary:`outline`}}},interactive:{control:`boolean`,description:`Allow hover and click feedback directly in the canvas`,table:{defaultValue:{summary:`true`}}},isHovered:{control:`boolean`,description:`Force hover appearance for visual review`},isClicked:{control:`boolean`,description:`Force pressed appearance for visual review`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...f],description:`Auto = current Storybook toolbar theme`,table:{defaultValue:{summary:`Auto`}}},theme:{table:{disable:!0}},state:{table:{disable:!0}}},parameters:{docs:{description:{component:`Compact icon-only actions for panel chrome and small utility controls. Includes outline, solid, and right-expander variants.`}}}},m={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=e.isClicked?`pressed`:e.isHovered?`hover`:`default`;if(!e.interactive)return s({type:e.type,state:i,theme:r});let a=document.createElement(`div`);a.style.display=`contents`;let o=!1,c=!1,l=()=>{let t=c?`pressed`:o?`hover`:`default`;a.innerHTML=s({type:e.type,state:t,theme:r})};return a.addEventListener(`mouseenter`,()=>{o=!0,l()}),a.addEventListener(`mouseleave`,()=>{o=!1,c=!1,l()}),a.addEventListener(`mousedown`,()=>{c=!0,l()}),a.addEventListener(`mouseup`,()=>{c=!1,l()}),l(),a}},h={render:(e,n)=>s({type:`outline`,state:`default`,theme:t(e.themeMode,n.globals.theme)}),parameters:{docs:{description:{story:`Outline icon action for low-emphasis utility controls.`}}}},g={render:(e,n)=>s({type:`solid`,state:`default`,theme:t(e.themeMode,n.globals.theme)}),parameters:{docs:{description:{story:`Solid icon action with stronger emphasis.`}}}},_={render:(e,n)=>s({type:`rightExpander`,state:`default`,theme:t(e.themeMode,n.globals.theme)}),parameters:{docs:{description:{story:`Chevron-style expander used for disclosure and nested sections.`}}}},v={render:(e,n)=>s({type:`solid`,state:`hover`,theme:t(e.themeMode,n.globals.theme)}),parameters:{docs:{description:{story:`Solid button in forced hover state for visual review.`}}}},y={render:(e,n)=>s({type:`solid`,state:`pressed`,theme:t(e.themeMode,n.globals.theme)}),parameters:{docs:{description:{story:`Solid button in forced pressed state for visual review.`}}}},b={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=document.createElement(`div`);i.style.display=`contents`;let a=!1,o=()=>{i.innerHTML=s({type:`rightExpander`,state:a?`hover`:`default`,theme:r})};return i.addEventListener(`mouseenter`,()=>{a=!0,o()}),i.addEventListener(`mouseleave`,()=>{a=!1,o()}),o(),i},parameters:{docs:{description:{story:`Interactive hover demo for the icon-only control. Move the pointer over the button in the canvas.`}}}},x={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=document.createElement(`div`);i.style.display=`contents`;let a=!1,o=null,c=()=>{i.innerHTML=s({type:`rightExpander`,state:a?`pressed`:`default`,theme:r})};return i.addEventListener(`click`,()=>{o&&clearTimeout(o),a=!0,c(),o=setTimeout(()=>{a=!1,c(),o=null},180)}),c(),i},parameters:{docs:{description:{story:`Pressed-state demo for the right-expander variant.`}}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const state = args.isClicked ? 'pressed' : args.isHovered ? 'hover' : 'default'; + if (!args.interactive) { + return IconButton({ + type: args.type, + state, + theme + }); + } + const el = document.createElement('div'); + el.style.display = 'contents'; + let hovered = false; + let pressed = false; + const update = () => { + const s = pressed ? 'pressed' : hovered ? 'hover' : 'default'; + el.innerHTML = IconButton({ + type: args.type, + state: s, + theme + }); + }; + el.addEventListener('mouseenter', () => { + hovered = true; + update(); + }); + el.addEventListener('mouseleave', () => { + hovered = false; + pressed = false; + update(); + }); + el.addEventListener('mousedown', () => { + pressed = true; + update(); + }); + el.addEventListener('mouseup', () => { + pressed = false; + update(); + }); + update(); + return el; + } +}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return IconButton({ + type: 'outline', + state: 'default', + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Outline icon action for low-emphasis utility controls.' + } + } + } +}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return IconButton({ + type: 'solid', + state: 'default', + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Solid icon action with stronger emphasis.' + } + } + } +}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return IconButton({ + type: 'rightExpander', + state: 'default', + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Chevron-style expander used for disclosure and nested sections.' + } + } + } +}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return IconButton({ + type: 'solid', + state: 'hover', + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Solid button in forced hover state for visual review.' + } + } + } +}`,...v.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return IconButton({ + type: 'solid', + state: 'pressed', + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Solid button in forced pressed state for visual review.' + } + } + } +}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const el = document.createElement('div'); + el.style.display = 'contents'; + let hovered = false; + const update = () => { + el.innerHTML = IconButton({ + type: 'rightExpander', + state: hovered ? 'hover' : 'default', + theme + }); + }; + el.addEventListener('mouseenter', () => { + hovered = true; + update(); + }); + el.addEventListener('mouseleave', () => { + hovered = false; + update(); + }); + update(); + return el; + }, + parameters: { + docs: { + description: { + story: 'Interactive hover demo for the icon-only control. Move the pointer over the button in the canvas.' + } + } + } +}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const el = document.createElement('div'); + el.style.display = 'contents'; + let pressed = false; + let timer = null; + const update = () => { + el.innerHTML = IconButton({ + type: 'rightExpander', + state: pressed ? 'pressed' : 'default', + theme + }); + }; + el.addEventListener('click', () => { + if (timer) clearTimeout(timer); + pressed = true; + update(); + timer = setTimeout(() => { + pressed = false; + update(); + timer = null; + }, 180); + }); + update(); + return el; + }, + parameters: { + docs: { + description: { + story: 'Pressed-state demo for the right-expander variant.' + } + } + } +}`,...x.parameters?.docs?.source}}},S=[`Default`,`OutlineButtons`,`SolidButtons`,`RightExpanderButtons`,`SolidHoveredButtons`,`SolidClickedButtons`,`HoveredButtons`,`ClickedButtons`]}))();export{x as ClickedButtons,m as Default,b as HoveredButtons,h as OutlineButtons,_ as RightExpanderButtons,g as SolidButtons,y as SolidClickedButtons,v as SolidHoveredButtons,S as __namedExportsOrder,p as default}; \ No newline at end of file diff --git a/storybook/static/assets/Icons.stories-Bkqwk1IY.js b/storybook/static/assets/Icons.stories-Bkqwk1IY.js new file mode 100644 index 0000000000..9912b07439 --- /dev/null +++ b/storybook/static/assets/Icons.stories-Bkqwk1IY.js @@ -0,0 +1,72 @@ +import{n as e}from"./chunk-BneVvdWh.js";var t,n=e((()=>{t={".25 / btn-highlight":` `,".35 / btn-highlight":` `,"common / big / btn-highlight":` `,"common / btn-highlight":` `,"common / btn-fontcolor":` `,".25 / btn-fontcolor":` `,".35 / btn-fontcolor":` `,"common / big / btn-fontcolor":` `,".25 / btn-paracolor":` `,".35 / btn-paracolor":` `,"common / big / btn-paracolor":` `,".25 / bold":` `,".35 / bold":` `,"common / big / btn-bold":` `,"common / chevron":` `,Chevron:` `,"Chevron (2)":` `,"common / chevron (2)":` `,delete:` `,"common / btn-bold":` `,"common / btn-paracolor":` `,"common / btn-embed":` `,"common / btn-copy":` `,"common / btn-arrow-bottom":` `,"common / btn-arrow-top":` `,"common / btn-more-vertical":` `,"common / btn-more":` `,"common / btn-close":` `,"common / down 20x20":` `,"common / up 20x20":` `,"Window icon / info":` `,"Window icon / alert":` `,"common / close min":` `,"Window icon / success":` `,"common / close min (2)":` `,"common / chevron (3)":` `,"common / check":` `}}));function r(e,t){return`
+ ${t} + ${e} +
`}var i,a,o,s;e((()=>{n(),i={title:`Foundations/Icons`,tags:[`!dev`],parameters:{docs:{description:{component:`Icon catalog used by components across the kit.`}}}},a=Object.keys(t).sort((e,t)=>e.localeCompare(t)).map(e=>({name:e,svg:t[e]})),o={name:`Catalog`,render:(e,t)=>{let n=t.globals.theme||`Light`,i=n===`Dark`||n===`Modern Dark`||n===`Dark Contrast`?`invert(1)`:`none`;return`
+
+ Total icons: ${a.length} +
+
+ ${a.map(({name:e,svg:t})=>r(e,t.replace(/(]*)>/,`$1 style="display:block;filter:${i};">`))).join(``)} +
+
`},parameters:{docs:{description:{story:`All available icons sorted alphabetically. Switch themes using the toolbar to preview icon appearance on dark backgrounds.`}}}},o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{ + name: 'Catalog', + render: (args, context) => { + const theme = context.globals.theme || 'Light'; + const isDark = theme === 'Dark' || theme === 'Modern Dark' || theme === 'Dark Contrast'; + const svgFilter = isDark ? 'invert(1)' : 'none'; + return \`
+
+ Total icons: \${iconEntries.length} +
+
+ \${iconEntries.map(({ + name, + svg + }) => { + const themedSvg = svg.replace(/(]*)>/, \`$1 style="display:block;filter:\${svgFilter};">\`); + return iconCard(name, themedSvg); + }).join('')} +
+
\`; + }, + parameters: { + docs: { + description: { + story: 'All available icons sorted alphabetically. Switch themes using the toolbar to preview icon appearance on dark backgrounds.' + } + } + } +}`,...o.parameters?.docs?.source}}},s=[`Catalog`]}))();export{o as Catalog,s as __namedExportsOrder,i as default}; \ No newline at end of file diff --git a/storybook/static/assets/InfoBlock.stories-C737cNEY.js b/storybook/static/assets/InfoBlock.stories-C737cNEY.js new file mode 100644 index 0000000000..4a55871d46 --- /dev/null +++ b/storybook/static/assets/InfoBlock.stories-C737cNEY.js @@ -0,0 +1,125 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r,o as i}from"./theme-utils-B-KYefhh.js";var a,o=e((()=>{a={Light:{background:`#FFFFFF`,border:`#C0C0C0`,radius:1,titleColor:`rgba(0, 0, 0, 0.8)`,descriptionColor:`rgba(0, 0, 0, 0.6)`,closeColor:`rgba(0, 0, 0, 0.8)`,alertBackground:`#F62211`,alertMark:`#FFFFFF`,titleTypography:{fontSize:11,lineHeight:16,letterSpacing:.22,fontWeight:700},descriptionTypography:{fontSize:11,lineHeight:14,letterSpacing:.22,fontWeight:400}},"Light Classic":{background:`#FFFFFF`,border:`#CFCFCF`,radius:1,titleColor:`#444444`,descriptionColor:`#A5A5A5`,closeColor:`#444444`,alertBackground:`#D9534F`,alertMark:`#FFFFFF`,titleTypography:{fontSize:11,lineHeight:16,letterSpacing:.22,fontWeight:700},descriptionTypography:{fontSize:11,lineHeight:14,letterSpacing:.22,fontWeight:400}},Dark:{background:`#333333`,border:`#666666`,radius:1,titleColor:`rgba(255, 255, 255, 0.8)`,descriptionColor:`rgba(255, 255, 255, 0.6)`,closeColor:`rgba(255, 255, 255, 0.8)`,alertBackground:`#F62211`,alertMark:`rgba(255, 255, 255, 0.8)`,titleTypography:{fontSize:11,lineHeight:16,letterSpacing:.22,fontWeight:700},descriptionTypography:{fontSize:11,lineHeight:14,letterSpacing:.22,fontWeight:400}},"Dark Contrast":{background:`#1E1E1E`,border:`#696969`,radius:1,titleColor:`#E8E8E8`,descriptionColor:`#B8B8B8`,closeColor:`#E8E8E8`,alertBackground:`#F62211`,alertMark:`#E8E8E8`,titleTypography:{fontSize:11,lineHeight:16,letterSpacing:.22,fontWeight:700},descriptionTypography:{fontSize:11,lineHeight:14,letterSpacing:.22,fontWeight:400}},"Modern Light":{background:`#FFFFFF`,border:`#E1E1E1`,radius:4,titleColor:`#383838`,descriptionColor:`rgba(0, 0, 0, 0.6)`,closeColor:`#383838`,alertBackground:`rgba(242, 61, 61, 0.8)`,alertMark:`#FFFFFF`,titleTypography:{fontSize:12,lineHeight:20,letterSpacing:.24,fontWeight:500},descriptionTypography:{fontSize:12,lineHeight:16,letterSpacing:.24,fontWeight:400}},"Modern Dark":{background:`#404040`,border:`#686868`,radius:4,titleColor:`#F3F3F3`,descriptionColor:`#969696`,closeColor:`#EAEAEA`,alertBackground:`rgba(242, 61, 61, 0.8)`,alertMark:`#222222`,titleTypography:{fontSize:12,lineHeight:20,letterSpacing:.24,fontWeight:500},descriptionTypography:{fontSize:12,lineHeight:16,letterSpacing:.24,fontWeight:400}}}}));function s({title:e=`Title`,description:t=`Description`,showTitle:n=!0,showDescription:r=!0,iconMode:o=`left`,theme:s}={}){let u=a[i(s)]??a.Light,d=n&&(o===`left`||o===`both`),f=n&&(o===`right`||o===`both`),p=n?`
+ ${d?c(u.alertBackground,u.alertMark):``} + ${e} + ${f?``:``} +
`:``,m=r?`
${t}
`:``,h=n&&r?4:0;return`
+ ${p}${m} +
`}var c,l,u=e((()=>{o(),r(),c=(e,t)=>``,l=e=>``})),d,f,p,m,h,g,_,v,y,b;e((()=>{u(),r(),d=n,f={title:`Components/Data Display/Info Block`,tags:[`autodocs`],args:{title:`Title`,description:`Description`,showTitle:!0,showDescription:!0,iconMode:`left`,themeMode:`Auto`},argTypes:{title:{control:`text`,description:`Main heading text`},description:{control:`text`,description:`Supporting descriptive copy`},showTitle:{control:`boolean`,description:`Show the title row`},showDescription:{control:`boolean`,description:`Show the description row`},iconMode:{control:`select`,options:[`none`,`left`,`right`,`both`],description:`Icon placement around the title row`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...d],description:`Auto = current Storybook toolbar theme`,table:{defaultValue:{summary:`Auto`}}},theme:{table:{disable:!0}},onClose:{table:{disable:!0}}},parameters:{docs:{description:{component:`Compact informational block for notices, inline explanations, and dismissible helper content.`}}}},p={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return s({...e,theme:r})}},m={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return s({...e,iconMode:`none`,theme:r})},parameters:{docs:{description:{story:`Plain informational block without icons.`}}}},h={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return s({...e,iconMode:`right`,showTitle:!0,showDescription:!0,theme:r})},parameters:{docs:{description:{story:`Variant with a dismiss or action icon on the right.`}}}},g={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return s({...e,iconMode:`left`,showTitle:!0,showDescription:!0,theme:r})},parameters:{docs:{description:{story:`Variant with an informational icon on the left.`}}}},_={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return s({...e,iconMode:`both`,showDescription:!1,theme:r})},parameters:{docs:{description:{story:`Title row with icons on both sides.`}}}},v={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return s({...e,showTitle:!0,showDescription:!1,iconMode:`none`,theme:r})},parameters:{docs:{description:{story:`Title-only informational block.`}}}},y={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return s({...e,showTitle:!1,showDescription:!0,iconMode:`none`,theme:r})},parameters:{docs:{description:{story:`Description-only helper text block.`}}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return InfoBlock({ + ...args, + theme + }); + } +}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return InfoBlock({ + ...args, + iconMode: 'none', + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Plain informational block without icons.' + } + } + } +}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return InfoBlock({ + ...args, + iconMode: 'right', + showTitle: true, + showDescription: true, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Variant with a dismiss or action icon on the right.' + } + } + } +}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return InfoBlock({ + ...args, + iconMode: 'left', + showTitle: true, + showDescription: true, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Variant with an informational icon on the left.' + } + } + } +}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return InfoBlock({ + ...args, + iconMode: 'both', + showDescription: false, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Title row with icons on both sides.' + } + } + } +}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return InfoBlock({ + ...args, + showTitle: true, + showDescription: false, + iconMode: 'none', + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Title-only informational block.' + } + } + } +}`,...v.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return InfoBlock({ + ...args, + showTitle: false, + showDescription: true, + iconMode: 'none', + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Description-only helper text block.' + } + } + } +}`,...y.parameters?.docs?.source}}},b=[`Default`,`WithoutIcon`,`IconRight`,`IconLeft`,`IconBoth`,`TitleOnly`,`DescriptionOnly`]}))();export{p as Default,y as DescriptionOnly,_ as IconBoth,g as IconLeft,h as IconRight,v as TitleOnly,m as WithoutIcon,b as __namedExportsOrder,f as default}; \ No newline at end of file diff --git a/storybook/static/assets/LinkButtons.stories-CWnL9o1m.js b/storybook/static/assets/LinkButtons.stories-CWnL9o1m.js new file mode 100644 index 0000000000..f9ecedfb6f --- /dev/null +++ b/storybook/static/assets/LinkButtons.stories-CWnL9o1m.js @@ -0,0 +1,45 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r}from"./theme-utils-B-KYefhh.js";var i,a=e((()=>{i={Light:{Default:{container:{flexDirection:`column`,justifyContent:`center`,alignItems:`flex-start`,display:`inline-flex`},text:{textAlign:`center`,justifyContent:`center`,display:`flex`,flexDirection:`column`,color:`rgba(0, 0, 0, 0.80)`,fontSize:11,fontFamily:`Arial`,fontWeight:`400`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`},underlineColor:`rgba(0, 0, 0, 0.8)`},Hover:{container:{flexDirection:`column`,justifyContent:`center`,alignItems:`flex-start`,display:`inline-flex`},text:{textAlign:`center`,justifyContent:`center`,display:`flex`,flexDirection:`column`,color:`rgba(0, 0, 0, 0.60)`,fontSize:11,fontFamily:`Arial`,fontWeight:`400`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`},underlineColor:`rgba(0, 0, 0, 0.6)`}},"Light Classic":{Default:{container:{flexDirection:`column`,justifyContent:`center`,alignItems:`flex-start`,display:`inline-flex`},text:{textAlign:`center`,justifyContent:`center`,display:`flex`,flexDirection:`column`,color:`#444444`,fontSize:11,fontFamily:`Arial`,fontWeight:`400`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`},underlineColor:`#444444`},Hover:{container:{flexDirection:`column`,justifyContent:`center`,alignItems:`flex-start`,display:`inline-flex`},text:{textAlign:`center`,justifyContent:`center`,display:`flex`,flexDirection:`column`,color:`#A5A5A5`,fontSize:11,fontFamily:`Arial`,fontWeight:`400`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`},underlineColor:`#A5A5A5`}},Dark:{Default:{container:{flexDirection:`column`,justifyContent:`center`,alignItems:`flex-start`,display:`inline-flex`},text:{textAlign:`center`,justifyContent:`center`,display:`flex`,flexDirection:`column`,color:`rgba(255, 255, 255, 0.80)`,fontSize:11,fontFamily:`Arial`,fontWeight:`400`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`},underlineColor:`rgba(255, 255, 255, 0.8)`},Hover:{container:{flexDirection:`column`,justifyContent:`center`,alignItems:`flex-start`,display:`inline-flex`},text:{textAlign:`center`,justifyContent:`center`,display:`flex`,flexDirection:`column`,color:`rgba(255, 255, 255, 0.60)`,fontSize:11,fontFamily:`Arial`,fontWeight:`400`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`},underlineColor:`rgba(255, 255, 255, 0.6)`}},"Dark Contrast":{Default:{container:{flexDirection:`column`,justifyContent:`center`,alignItems:`flex-start`,display:`inline-flex`},text:{textAlign:`center`,justifyContent:`center`,display:`flex`,flexDirection:`column`,color:`#E8E8E8`,fontSize:11,fontFamily:`Arial`,fontWeight:`400`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`},underlineColor:`#E8E8E8`},Hover:{container:{flexDirection:`column`,justifyContent:`center`,alignItems:`flex-start`,display:`inline-flex`},text:{textAlign:`center`,justifyContent:`center`,display:`flex`,flexDirection:`column`,color:`#B8B8B8`,fontSize:11,fontFamily:`Arial`,fontWeight:`400`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`},underlineColor:`#B8B8B8`}},"Modern Light":{Default:{container:{flexDirection:`column`,justifyContent:`center`,alignItems:`flex-start`,display:`inline-flex`},text:{textAlign:`center`,justifyContent:`center`,display:`flex`,flexDirection:`column`,color:`#383838`,fontSize:12,fontFamily:`Arial`,fontWeight:`400`,lineHeight:16,letterSpacing:.24,wordWrap:`break-word`},underlineColor:`#383838`},Hover:{container:{flexDirection:`column`,justifyContent:`center`,alignItems:`flex-start`,display:`inline-flex`},text:{textAlign:`center`,justifyContent:`center`,display:`flex`,flexDirection:`column`,color:`rgba(0, 0, 0, 0.60)`,fontSize:12,fontFamily:`Arial`,fontWeight:`400`,lineHeight:16,letterSpacing:.24,wordWrap:`break-word`},underlineColor:`rgba(0, 0, 0, 0.6)`}},"Modern Dark":{Default:{container:{flexDirection:`column`,justifyContent:`center`,alignItems:`flex-start`,display:`inline-flex`},text:{textAlign:`center`,justifyContent:`center`,display:`flex`,flexDirection:`column`,color:`#F3F3F3`,fontSize:12,fontFamily:`Arial`,fontWeight:`400`,lineHeight:16,letterSpacing:.24,wordWrap:`break-word`},underlineColor:`#F3F3F3`}}}}));function o({label:e=`Show advanced settings`,state:t=`default`,theme:n=`Light`}={}){let r=i[n]??i.Light,a=r[t===`hover`?`Hover`:`Default`]??r.Default??{},o=a.text??{},s=a.underlineColor??o.color??`rgba(0,0,0,0.8)`,c=typeof o.lineHeight==`number`?`${o.lineHeight}px`:o.lineHeight??`16px`;return``}var s=e((()=>{a()})),c,l,u,d,f;e((()=>{s(),r(),c=n,l={title:`Components/Buttons/Link Buttons`,tags:[`autodocs`],args:{label:`Show advanced settings`,state:`default`,interactive:!0,isHovered:!1,themeMode:`Auto`},argTypes:{label:{control:`text`,description:`Visible link-style action label`},interactive:{control:`boolean`,description:`Allow hover feedback directly in the canvas`,table:{defaultValue:{summary:`true`}}},isHovered:{control:`boolean`,description:`Force hover appearance for visual review`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...c],description:`Auto = current Storybook toolbar theme`,table:{defaultValue:{summary:`Auto`}}},theme:{table:{disable:!0}},state:{table:{disable:!0}}},parameters:{docs:{story:{inline:!0},description:{component:`Text-only action styled like a link. Useful for secondary inline actions inside settings and informational blocks.`}}}},u={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);if(!e.interactive){let t=e.isHovered?`hover`:`default`;return o({label:e.label,state:t,theme:r})}let i=document.createElement(`div`);i.style.display=`contents`;let a=t=>{i.innerHTML=o({label:e.label,state:t,theme:r})};return i.addEventListener(`mouseenter`,()=>a(`hover`)),i.addEventListener(`mouseleave`,()=>a(`default`)),a(e.isHovered?`hover`:`default`),i}},d={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return o({label:e.label||`Show advanced settings`,state:`hover`,theme:r})},parameters:{docs:{description:{story:`Interactive hover demo for the inline link-action style. Move the pointer over the link in the canvas.`}}}},u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + if (!args.interactive) { + const state = args.isHovered ? 'hover' : 'default'; + return LinkButton({ + label: args.label, + state, + theme + }); + } + const el = document.createElement('div'); + el.style.display = 'contents'; + const render = state => { + el.innerHTML = LinkButton({ + label: args.label, + state, + theme + }); + }; + el.addEventListener('mouseenter', () => render('hover')); + el.addEventListener('mouseleave', () => render('default')); + render(args.isHovered ? 'hover' : 'default'); + return el; + } +}`,...u.parameters?.docs?.source}}},d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return LinkButton({ + label: args.label || 'Show advanced settings', + state: 'hover', + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Interactive hover demo for the inline link-action style. Move the pointer over the link in the canvas.' + } + } + } +}`,...d.parameters?.docs?.source}}},f=[`Default`,`HoveredButtons`]}))();export{u as Default,d as HoveredButtons,f as __namedExportsOrder,l as default}; \ No newline at end of file diff --git a/storybook/static/assets/Loader.stories-Wu8QxO3T.js b/storybook/static/assets/Loader.stories-Wu8QxO3T.js new file mode 100644 index 0000000000..c404d0bd62 --- /dev/null +++ b/storybook/static/assets/Loader.stories-Wu8QxO3T.js @@ -0,0 +1,51 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r,t as i}from"./theme-utils-B-KYefhh.js";function a({size:e=`S`,label:t=`Loading...`,overlay:n=!1,theme:r}={}){let a=i(r),o=e===`M`?28:20,s=e===`M`?15:a.isModern?12:11,c=e===`M`?20:16,l=e===`M`?12:8,u=e===`M`?.3:a.isModern?.24:.22,d=n?`#FFFFFF`:a.fg,f=n?`rgba(255,255,255,0.25)`:a.border,p=n?{Light:`rgba(68, 68, 68, 0.95)`,"Light Classic":`#000000a6`,"Modern Light":`#383838`,"Modern Dark":`#343434`,"Dark Contrast":`rgba(18, 18, 18, 0.95)`,Dark:`rgba(24, 24, 24, 0.95)`}[a.theme]??`rgba(68,68,68,0.95)`:`transparent`;return`
+ + ${t} +
`}var o=e((()=>{r()})),s,c,l,u,d,f;e((()=>{o(),r(),s=n,c={title:`Components/Feedback/Loader`,tags:[`autodocs`],args:{size:`S`,label:`Loading...`,overlay:!1,themeMode:`Auto`},argTypes:{size:{control:`select`,options:[`S`,`M`],description:`Compact or regular loader size`},label:{control:`text`,description:`Visible loading message`},overlay:{control:`boolean`,description:`Use the blocking overlay presentation`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...s],description:`Auto = current Storybook toolbar theme`},theme:{table:{disable:!0}}},parameters:{docs:{description:{component:`Loader for inline busy states and blocking overlay states.`}}}},l={name:`S`,render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return a({size:`S`,label:e.label,overlay:!1,theme:r})}},u={name:`M`,render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return a({size:`M`,label:e.label,overlay:!1,theme:r})},parameters:{docs:{description:{story:`Regular inline loader size.`}}}},d={name:`Loader With Background`,render:(e,n)=>a({size:`M`,label:`Loading...`,overlay:!0,theme:t(e.themeMode,n.globals.theme)}),parameters:{docs:{description:{story:`Blocking overlay loader for modal or full-surface waiting states.`}}}},l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{ + name: 'S', + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Loader({ + size: 'S', + label: args.label, + overlay: false, + theme + }); + } +}`,...l.parameters?.docs?.source}}},u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{ + name: 'M', + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Loader({ + size: 'M', + label: args.label, + overlay: false, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Regular inline loader size.' + } + } + } +}`,...u.parameters?.docs?.source}}},d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{ + name: 'Loader With Background', + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Loader({ + size: 'M', + label: 'Loading...', + overlay: true, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Blocking overlay loader for modal or full-surface waiting states.' + } + } + } +}`,...d.parameters?.docs?.source}}},f=[`Default`,`Medium`,`OverlayLoader`]}))();export{l as Default,u as Medium,d as OverlayLoader,f as __namedExportsOrder,c as default}; \ No newline at end of file diff --git a/storybook/static/assets/ModalWindow.stories-C8D3NSUk.js b/storybook/static/assets/ModalWindow.stories-C8D3NSUk.js new file mode 100644 index 0000000000..7fe6e8d1a9 --- /dev/null +++ b/storybook/static/assets/ModalWindow.stories-C8D3NSUk.js @@ -0,0 +1,88 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r,o as i}from"./theme-utils-B-KYefhh.js";import{n as a,t as o}from"./Header-D2BDzFwA.js";function s({title:e=`Title`,contentLabel:t=`Content`,notificationText:n=`Text +Text`,primaryLabel:r=`Button`,secondaryLabel:a=`Button`,size:s=`M`,notification:h=!1,footerMode:g=`auto`,theme:_}={}){let v=i(_),y=c[v]??c.Light,b=v.startsWith(`Modern`),x=g===`auto`?s===`L`?`double`:`single`:g,S=d[s]??d.M,C=p[v]??2,w=l[v]??l.Light,T=u[v]??u.Light,E=b?12:11,D=b?.24:.22,O=b?12:16,k=o({title:e,width:S,variant:`window`,theme:v}),A=h?`
+ ${m} +
${n}
+
`:`
${t}
`,j=w.border?`1px solid ${w.border}`:`1px solid transparent`,M=w.pressedBorder?`1px solid ${w.pressedBorder}`:j,N=``,P=T.border?`1px solid ${T.border}`:`1px solid transparent`,F=T.pressedBorder?`1px solid ${T.pressedBorder}`:P,I=``,L=x===`double`?`${N}${I}`:N;return`
+ ${k} +
+ ${A} +
+
+
+
+ ${L} +
+
+
`}var c,l,u,d,f,p,m,h=e((()=>{a(),r(),c={Light:{frameBg:`#FFFFFF`,frameBorder:`#E0E0E0`,contentBg:`#FFFFFF`,contentText:`rgba(0, 0, 0, 0.60)`,notificationText:`rgba(0, 0, 0, 0.80)`,divider:`#E0E0E0`},"Light Classic":{frameBg:`#FFFFFF`,frameBorder:`#D8DADC`,contentBg:`#FFFFFF`,contentText:`#A5A5A5`,notificationText:`#444444`,divider:`#D8DADC`},Dark:{frameBg:`#333333`,frameBorder:`#555555`,contentBg:`#333333`,contentText:`rgba(255, 255, 255, 0.60)`,notificationText:`rgba(255, 255, 255, 0.80)`,divider:`#555555`},"Dark Contrast":{frameBg:`#1E1E1E`,frameBorder:`#424242`,contentBg:`#1E1E1E`,contentText:`#B8B8B8`,notificationText:`#E8E8E8`,divider:`#424242`},"Modern Light":{frameBg:`#FFFFFF`,frameBorder:`#EAEAEA`,contentBg:`#FFFFFF`,contentText:`#383838`,notificationText:`#383838`,divider:`#EAEAEA`},"Modern Dark":{frameBg:`#404040`,frameBorder:`#585858`,contentBg:`#404040`,contentText:`#F3F3F3`,notificationText:`#F3F3F3`,divider:`#585858`}},l={Light:{bg:`#444444`,text:`#FFFFFF`,hoverBg:`#333333`,pressedBg:`#1F1F1F`,radius:1,size:22,px:32,letterSpacing:.22,fontSize:11},"Light Classic":{bg:`#7D858C`,text:`#FFFFFF`,hoverBg:`#666D73`,pressedBg:`#666D73`,radius:1,size:22,px:32,letterSpacing:.22,fontSize:11},Dark:{bg:`#DDDDDD`,text:`#333333`,hoverBg:`#FCFCFC`,pressedBg:`#FCFCFC`,radius:1,size:22,px:32,letterSpacing:.22,fontSize:11},"Dark Contrast":{bg:`#E6E6E6`,text:`#121212`,hoverBg:`#A6A6A6`,pressedBg:`#A6A6A6`,radius:1,size:22,px:32,letterSpacing:.22,fontSize:11},"Modern Light":{bg:`#4473CA`,text:`#FFFFFF`,hoverBg:`#2A5BB9`,pressedBg:`#1D4FAF`,pressedBorder:`#2A5BB9`,radius:4,size:24,minWidth:48,px:12,letterSpacing:.24,fontSize:12},"Modern Dark":{bg:`#4A7BE0`,text:`#FFFFFF`,hoverBg:`#366CDA`,pressedBg:`#2D66CC`,pressedBorder:`#4A7BE0`,radius:4,size:24,minWidth:48,px:12,letterSpacing:.24,fontSize:12}},u={Light:{bg:`#FFFFFF`,text:`rgba(0, 0, 0, 0.80)`,border:`#C0C0C0`,hoverBg:`#E0E0E0`,pressedBg:`#CBCBCB`,radius:1,size:22,px:32,letterSpacing:.22,fontSize:11},"Light Classic":{bg:`#FFFFFF`,text:`#444444`,border:`#CFCFCF`,hoverBg:`#D8DADC`,pressedBg:`#7D858C`,radius:1,size:22,px:32,letterSpacing:.22,fontSize:11},Dark:{bg:`#333333`,text:`rgba(255, 255, 255, 0.80)`,border:`#666666`,hoverBg:`#555555`,pressedBg:`#606060`,radius:1,size:22,px:32,letterSpacing:.22,fontSize:11},"Dark Contrast":{bg:`#1E1E1E`,text:`#E8E8E8`,border:`#696969`,hoverBg:`#424242`,pressedBg:`#666666`,radius:1,size:22,px:32,letterSpacing:.22,fontSize:11},"Modern Light":{bg:`#FFFFFF`,text:`#383838`,border:`#E1E1E1`,hoverBg:`#F9F9F9`,pressedBg:`#EAEAEA`,pressedBorder:`#2A5BB9`,radius:4,size:24,minWidth:48,px:12,letterSpacing:.24,fontSize:12},"Modern Dark":{bg:`#404040`,text:`#F3F3F3`,border:`#686868`,hoverBg:`#585858`,pressedBg:`#686868`,pressedBorder:`#4A7BE0`,radius:4,size:24,minWidth:48,px:12,letterSpacing:.24,fontSize:12}},d={S:350,M:610,L:1380},f={S:206,M:206,L:423},p={Light:2,"Light Classic":2,Dark:2,"Dark Contrast":2,"Modern Light":4,"Modern Dark":4},m=``}));function g(e,t){let n=document.createElement(`div`);return n.style.cssText=`padding:24px;display:inline-block;`,n.innerHTML=s({...e,theme:t}),n.querySelectorAll(`button[data-role]`).forEach(e=>{let t=e.dataset.restBg,n=e.dataset.hoverBg,r=e.dataset.pressedBg,i=e.dataset.restBorder,a=e.dataset.pressedBorder,o=!1,s=null,c=0;e.addEventListener(`mouseenter`,()=>{o=!0,s||(e.style.background=n)}),e.addEventListener(`mouseleave`,()=>{o=!1,s||(e.style.background=t,e.style.border=i)}),e.addEventListener(`mousedown`,()=>{c=Date.now(),s&&=(clearTimeout(s),null),e.style.background=r,e.style.border=a}),e.addEventListener(`mouseup`,()=>{let r=Date.now()-c,a=Math.max(0,150-r);s=setTimeout(()=>{s=null,e.style.background=o?n:t,e.style.border=i},a)})}),n}var _,v,y,b,x,S;e((()=>{h(),r(),_={title:`Components/Layout/Modal Window`,tags:[`autodocs`],args:{title:`Title`,tags:[`autodocs`],contentLabel:`Content`,notificationText:`Text +Text`,primaryLabel:`Button`,secondaryLabel:`Button`,size:`M`,notification:!1,footerMode:`auto`,themeMode:`Auto`},argTypes:{title:{control:`text`,description:`Main dialog title`},contentLabel:{control:`text`,description:`Placeholder copy for the main content area`},notificationText:{control:`text`,description:`Inline warning or notification message`},primaryLabel:{control:`text`,description:`Primary footer action label`},secondaryLabel:{control:`text`,description:`Secondary footer action label`},size:{control:`select`,options:[`S`,`M`,`L`],description:`Modal width preset`},notification:{control:`boolean`,description:`Show the notification block above the footer`},footerMode:{control:`select`,options:[`auto`,`single`,`double`],description:`One-button or two-button footer layout`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...n],description:`Auto = current Storybook toolbar theme`},theme:{table:{disable:!0}}},parameters:{docs:{description:{component:`Dialog window shell with size presets, optional notification block, and single or double action footers.`}}}},v={args:{size:`M`,notification:!1,footerMode:`single`},render:(e,n)=>g(e,t(e.themeMode,n.globals.theme)),parameters:{docs:{description:{story:`Medium modal preset for standard confirmation and settings flows.`}}}},y={args:{size:`S`,notification:!1,footerMode:`single`},render:(e,n)=>g(e,t(e.themeMode,n.globals.theme)),parameters:{docs:{description:{story:`Small modal for short confirmations and compact messages.`}}}},b={args:{size:`L`,notification:!1,footerMode:`double`},render:(e,n)=>g(e,t(e.themeMode,n.globals.theme)),parameters:{docs:{description:{story:`Large modal for richer content and double-action layouts.`}}}},x={args:{size:`S`,notification:!0,footerMode:`single`},render:(e,n)=>g(e,t(e.themeMode,n.globals.theme)),parameters:{docs:{description:{story:`Modal with an inline warning or explanatory notification block.`}}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{ + args: { + size: 'M', + notification: false, + footerMode: 'single' + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveModalWindow(args, theme); + }, + parameters: { + docs: { + description: { + story: 'Medium modal preset for standard confirmation and settings flows.' + } + } + } +}`,...v.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{ + args: { + size: 'S', + notification: false, + footerMode: 'single' + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveModalWindow(args, theme); + }, + parameters: { + docs: { + description: { + story: 'Small modal for short confirmations and compact messages.' + } + } + } +}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{ + args: { + size: 'L', + notification: false, + footerMode: 'double' + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveModalWindow(args, theme); + }, + parameters: { + docs: { + description: { + story: 'Large modal for richer content and double-action layouts.' + } + } + } +}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{ + args: { + size: 'S', + notification: true, + footerMode: 'single' + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveModalWindow(args, theme); + }, + parameters: { + docs: { + description: { + story: 'Modal with an inline warning or explanatory notification block.' + } + } + } +}`,...x.parameters?.docs?.source}}},S=[`Default`,`Small`,`Large`,`WithNotification`]}))();export{v as Default,b as Large,y as Small,x as WithNotification,S as __namedExportsOrder,_ as default}; \ No newline at end of file diff --git a/storybook/static/assets/PanelButtons.stories-DdNpWdK_.js b/storybook/static/assets/PanelButtons.stories-DdNpWdK_.js new file mode 100644 index 0000000000..92a95f61ee --- /dev/null +++ b/storybook/static/assets/PanelButtons.stories-DdNpWdK_.js @@ -0,0 +1,166 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r,o as i}from"./theme-utils-B-KYefhh.js";var a,o=e((()=>{a={Light:{30:{Default:{container:{height:30,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`white`,overflow:`hidden`,borderRadius:1,outline:`1px #C0C0C0 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`rgba(0, 0, 0, 0.80)`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Hover:{container:{height:30,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#E0E0E0`,overflow:`hidden`,borderRadius:1,outline:`1px #C0C0C0 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`rgba(0, 0, 0, 0.80)`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Pressed:{container:{height:30,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#CBCBCB`,overflow:`hidden`,borderRadius:1,outline:`1px #C0C0C0 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`rgba(0, 0, 0, 0.80)`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Disabled:{container:{height:30,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#EFEFEF`,overflow:`hidden`,borderRadius:1,outline:`1px #C0C0C0 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`rgba(0, 0, 0, 0.40)`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Loader:{container:{height:30,paddingLeft:32,paddingRight:32,paddingTop:11,paddingBottom:11,background:`#EFEFEF`,overflow:`hidden`,borderRadius:1,outline:`1px #C0C0C0 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{},spinnerColor:`rgba(0, 0, 0, 0.80)`}},24:{Default:{container:{height:24,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`white`,overflow:`hidden`,borderRadius:1,outline:`1px #C0C0C0 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`rgba(0, 0, 0, 0.80)`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Hover:{container:{height:24,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#E0E0E0`,overflow:`hidden`,borderRadius:1,outline:`1px #C0C0C0 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`rgba(0, 0, 0, 0.80)`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Pressed:{container:{height:24,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#CBCBCB`,overflow:`hidden`,borderRadius:1,outline:`1px #C0C0C0 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`rgba(0, 0, 0, 0.80)`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Disabled:{container:{height:24,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#EFEFEF`,overflow:`hidden`,borderRadius:1,outline:`1px #C0C0C0 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`rgba(0, 0, 0, 0.40)`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Loader:{container:{height:24,paddingLeft:32,paddingRight:32,paddingTop:11,paddingBottom:11,background:`#EFEFEF`,overflow:`hidden`,borderRadius:1,outline:`1px #C0C0C0 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{},spinnerColor:`rgba(0, 0, 0, 0.80)`}}},"Light Classic":{30:{Default:{container:{height:30,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`white`,overflow:`hidden`,borderRadius:1,outline:`1px #CFCFCF solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`#444444`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Hover:{container:{height:30,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#D8DADC`,overflow:`hidden`,borderRadius:1,outline:`1px #CFCFCF solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`#444444`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Pressed:{container:{height:30,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#7D858C`,overflow:`hidden`,borderRadius:1,outline:`1px #CFCFCF solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`white`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Disabled:{container:{height:30,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#F1F1F1`,overflow:`hidden`,borderRadius:1,outline:`1px #CFCFCF solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`#A5A5A5`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Loader:{container:{height:30,paddingLeft:32,paddingRight:32,paddingTop:11,paddingBottom:11,background:`#F1F1F1`,overflow:`hidden`,borderRadius:1,outline:`1px #CFCFCF solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{},spinnerColor:`#444444`}},24:{Default:{container:{height:24,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`white`,overflow:`hidden`,borderRadius:1,outline:`1px #CFCFCF solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`#444444`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Hover:{container:{height:24,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#D8DADC`,overflow:`hidden`,borderRadius:1,outline:`1px #CFCFCF solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`#444444`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Pressed:{container:{height:24,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#7D858C`,overflow:`hidden`,borderRadius:1,outline:`1px #CFCFCF solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`white`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Disabled:{container:{height:24,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#F1F1F1`,overflow:`hidden`,borderRadius:1,outline:`1px #CFCFCF solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`#A5A5A5`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Loader:{container:{height:24,paddingLeft:32,paddingRight:32,paddingTop:11,paddingBottom:11,background:`#F1F1F1`,overflow:`hidden`,borderRadius:1,outline:`1px #CFCFCF solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{},spinnerColor:`#444444`}}},Dark:{30:{Default:{container:{height:30,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#333333`,overflow:`hidden`,borderRadius:1,outline:`1px #666666 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`rgba(255, 255, 255, 0.80)`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Hover:{container:{height:30,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#555555`,overflow:`hidden`,borderRadius:1,outline:`1px #666666 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`rgba(255, 255, 255, 0.80)`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Pressed:{container:{height:30,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#606060`,overflow:`hidden`,borderRadius:1,outline:`1px #666666 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`rgba(255, 255, 255, 0.80)`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Disabled:{container:{height:30,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#505050`,overflow:`hidden`,borderRadius:1,outline:`1px #666666 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`rgba(255, 255, 255, 0.40)`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Loader:{container:{height:30,paddingLeft:32,paddingRight:32,paddingTop:11,paddingBottom:11,background:`#505050`,overflow:`hidden`,borderRadius:1,outline:`1px #666666 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{},spinnerColor:`rgba(255, 255, 255, 0.80)`}},24:{Default:{container:{height:24,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#333333`,overflow:`hidden`,borderRadius:1,outline:`1px #666666 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`rgba(255, 255, 255, 0.80)`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Hover:{container:{height:24,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#555555`,overflow:`hidden`,borderRadius:1,outline:`1px #666666 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`rgba(255, 255, 255, 0.80)`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Pressed:{container:{height:24,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#606060`,overflow:`hidden`,borderRadius:1,outline:`1px #666666 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`rgba(255, 255, 255, 0.80)`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Disabled:{container:{height:24,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#505050`,overflow:`hidden`,borderRadius:1,outline:`1px #666666 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`rgba(255, 255, 255, 0.40)`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Loader:{container:{height:24,paddingLeft:32,paddingRight:32,paddingTop:11,paddingBottom:11,background:`#505050`,overflow:`hidden`,borderRadius:1,outline:`1px #666666 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{},spinnerColor:`rgba(255, 255, 255, 0.80)`}}},"Dark Contrast":{30:{Default:{container:{height:30,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#1E1E1E`,overflow:`hidden`,borderRadius:1,outline:`1px #696969 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`#E8E8E8`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Hover:{container:{height:30,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#424242`,overflow:`hidden`,borderRadius:1,outline:`1px #696969 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`#E8E8E8`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Pressed:{container:{height:30,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#666666`,overflow:`hidden`,borderRadius:1,outline:`1px #696969 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`#E8E8E8`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Disabled:{container:{height:30,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#2A2A2A`,overflow:`hidden`,borderRadius:1,outline:`1px #696969 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`rgba(0, 0, 0, 0.20)`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Loader:{container:{height:30,paddingLeft:32,paddingRight:32,paddingTop:11,paddingBottom:11,background:`#2A2A2A`,overflow:`hidden`,borderRadius:1,outline:`1px #696969 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{},spinnerColor:`#E8E8E8`}},24:{Default:{container:{height:24,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#1E1E1E`,overflow:`hidden`,borderRadius:1,outline:`1px #696969 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`#E8E8E8`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Hover:{container:{height:24,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#424242`,overflow:`hidden`,borderRadius:1,outline:`1px #696969 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`#E8E8E8`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Pressed:{container:{height:24,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#666666`,overflow:`hidden`,borderRadius:1,outline:`1px #696969 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`#E8E8E8`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Disabled:{container:{height:24,paddingTop:11,paddingBottom:13,paddingLeft:32,paddingRight:32,background:`#2A2A2A`,overflow:`hidden`,borderRadius:1,outline:`1px #696969 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{textAlign:`center`,color:`rgba(0, 0, 0, 0.20)`,fontSize:11,fontFamily:`Arial`,fontWeight:`700`,lineHeight:16,letterSpacing:.22,wordWrap:`break-word`}},Loader:{container:{height:24,paddingLeft:32,paddingRight:32,paddingTop:11,paddingBottom:11,background:`#2A2A2A`,overflow:`hidden`,borderRadius:1,outline:`1px #696969 solid`,outlineOffset:`-1px`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:8,display:`inline-flex`},text:{},spinnerColor:`#E8E8E8`}}}}}));function s({label:e=`Button`,size:t=24,state:n=`default`,theme:r=`Light`,scale:o=!1}={}){let s=a[i(r)]??a.Light,u=s[String(t)]??s[24],d=u?.[c[n]]??u?.Default??{},f=d.container??{},p=d.text??{},m=d.spinnerColor??p.color??`rgba(0,0,0,0.8)`,h=n===`loader`,g=n===`disabled`,_=t===30?20:16,v=n===`hover`?`ui-panel-button--hover`:n===`pressed`?`ui-panel-button--pressed`:n===`disabled`?`ui-panel-button--disabled`:n===`loader`?`ui-panel-button--loader`:``,y=[`height:${f.height??t}px`,`padding:0 ${f.paddingRight??32}px`,`background:${f.background??`white`}`,`outline:${f.outline??`1px #C0C0C0 solid`}`,`outline-offset:${f.outlineOffset??-1}px`,`border-radius:${f.borderRadius??1}px`,`display:inline-flex`,`align-items:center`,`justify-content:center`,`box-sizing:border-box`,`border:none`,`width:${o?`100%`:`fit-content`}`,`cursor:${g||h?`not-allowed`:`pointer`}`].join(`;`),b=[`color:${p.color??`rgba(0,0,0,0.8)`}`,`font-size:${p.fontSize??11}px`,`font-family:Arial,Helvetica,sans-serif`,`font-weight:${p.fontWeight??700}`,`line-height:${p.lineHeight??16}px`,`letter-spacing:${p.letterSpacing??.22}px`,`display:inline-flex`,`align-items:center`,`justify-content:center`,`width:100%`,`white-space:nowrap`].join(`;`),x=h?``:`${e}`,S=g||h?` disabled aria-busy="${h}"`:``;return``}var c,l,u=e((()=>{o(),r(),c={default:`Default`,hover:`Hover`,pressed:`Pressed`,disabled:`Disabled`,loader:`Loader`},l=(e,t)=>` + + +`}));function d(e,t,n){if(e.isLoading)return`loader`;if(e.isDisabled)return`disabled`;if(e.isClicked)return`pressed`;if(e.isHovered)return`hover`;if(e.interactive!==!1){if(n)return`pressed`;if(t)return`hover`}return`default`}function f(e,t){if(e.interactive===!1||e.isDisabled||e.isLoading){let n=e.isLoading?`loader`:e.isDisabled?`disabled`:e.isClicked?`pressed`:e.isHovered?`hover`:`default`;return s({label:e.label,size:e.size,state:n,theme:t,scale:e.scale})}let n=!1,r=!1,i=document.createElement(`div`);i.style.display=`contents`;let a=()=>{i.innerHTML=s({label:e.label,size:e.size,state:d(e,n,r),theme:t,scale:e.scale})};return i.addEventListener(`mouseenter`,()=>{n=!0,a()}),i.addEventListener(`mouseleave`,()=>{n=!1,r=!1,a()}),i.addEventListener(`mousedown`,()=>{r=!0,a()}),i.addEventListener(`mouseup`,()=>{r=!1,a()}),a(),i}function p(e,t=!1){return`
${e}
`}var m,h,g,_,v,y,b,x,S;e((()=>{u(),r(),m=n,h={title:`Components/Buttons/Panel Buttons`,tags:[`autodocs`],args:{label:`Button`,size:24,interactive:!0,isHovered:!1,isClicked:!1,isDisabled:!1,isLoading:!1,scale:!1,themeMode:`Auto`},argTypes:{label:{control:`text`,description:`Visible action label`},size:{control:`select`,options:[24,30],description:`Default or larger panel button height`,table:{defaultValue:{summary:`24`}}},interactive:{control:`boolean`,description:`Allow hover and click feedback directly in the canvas`,table:{defaultValue:{summary:`true`}}},isHovered:{control:`boolean`,description:`Force hover appearance for visual review`},isClicked:{control:`boolean`,description:`Force pressed appearance for visual review`},isDisabled:{control:`boolean`,description:`Show the disabled state`},isLoading:{control:`boolean`,description:`Show the loading indicator instead of the normal label`},scale:{control:`boolean`,description:`Stretch the button to fill the available row`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...m],description:`Auto = current Storybook toolbar theme`,table:{defaultValue:{summary:`Auto`}}},theme:{table:{disable:!0}},state:{table:{disable:!0}}},parameters:{docs:{description:{component:`Panel action buttons used inside plugin side panels. Includes compact and larger heights plus hover, pressed, disabled, loading, and stretched states.`}}}},g={render:(e,n)=>f(e,t(e.themeMode,n.globals.theme))},_={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=document.createElement(`div`);i.style.cssText=`display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:16px;align-items:center;`;let a=t=>{let n=document.createElement(`div`);n.style.display=`contents`;let i=!1,a=!1,o=()=>{n.innerHTML=s({label:e.label??`Button`,size:t,state:a?`pressed`:i?`hover`:`default`,theme:r})};return n.addEventListener(`mouseenter`,()=>{i=!0,o()}),n.addEventListener(`mouseleave`,()=>{i=!1,a=!1,o()}),n.addEventListener(`mousedown`,()=>{a=!0,o()}),n.addEventListener(`mouseup`,()=>{a=!1,o()}),o(),n};return i.appendChild(a(24)),i.appendChild(a(30)),i},parameters:{docs:{description:{story:`Interactive hover demo for both panel button sizes. Move the pointer over each button in the canvas.`}}}},v={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=document.createElement(`div`);return i.style.cssText=`display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:16px;align-items:center;`,[24,30].forEach(t=>{let n=document.createElement(`div`);n.style.display=`contents`;let a=!1,o=null,c=()=>{n.innerHTML=s({label:e.label??`Button`,size:t,state:a?`pressed`:`default`,theme:r})};n.addEventListener(`click`,()=>{o&&clearTimeout(o),a=!0,c(),o=setTimeout(()=>{a=!1,c()},180)}),c(),i.appendChild(n)}),i},parameters:{docs:{description:{story:`Pressed-state demo. Click the buttons to preview the active press moment.`}}}},y={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return p(s({label:e.label??`Button`,size:24,state:`disabled`,theme:r})+s({label:e.label??`Button`,size:30,state:`disabled`,theme:r}))},parameters:{docs:{description:{story:`Disabled panel actions that keep layout without inviting interaction.`}}}},b={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return p(s({label:e.label??`Button`,size:24,state:`loader`,theme:r})+s({label:e.label??`Button`,size:30,state:`loader`,theme:r}))},parameters:{docs:{description:{story:`Loading state for long-running panel actions.`}}}},x={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return p(s({label:e.label??`Scale Small`,size:24,state:`default`,theme:r,scale:!0})+s({label:e.label??`Scale Normal`,size:30,state:`default`,theme:r,scale:!0}),!0)},parameters:{docs:{description:{story:`Full-width layout variant for dense side-panel flows.`}}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return renderInteractive(args, theme); + } +}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const el = document.createElement('div'); + el.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:16px;align-items:center;'; + // These are interactive — hover works natively in the canvas + const make = size => { + const w = document.createElement('div'); + w.style.display = 'contents'; + let hovered = false, + pressed = false; + const update = () => { + w.innerHTML = PanelButton({ + label: args.label ?? 'Button', + size, + state: pressed ? 'pressed' : hovered ? 'hover' : 'default', + theme + }); + }; + w.addEventListener('mouseenter', () => { + hovered = true; + update(); + }); + w.addEventListener('mouseleave', () => { + hovered = false; + pressed = false; + update(); + }); + w.addEventListener('mousedown', () => { + pressed = true; + update(); + }); + w.addEventListener('mouseup', () => { + pressed = false; + update(); + }); + update(); + return w; + }; + el.appendChild(make(24)); + el.appendChild(make(30)); + return el; + }, + parameters: { + docs: { + description: { + story: 'Interactive hover demo for both panel button sizes. Move the pointer over each button in the canvas.' + } + } + } +}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const el = document.createElement('div'); + el.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:16px;align-items:center;'; + [24, 30].forEach(size => { + const w = document.createElement('div'); + w.style.display = 'contents'; + let pressed = false; + let timer = null; + const update = () => { + w.innerHTML = PanelButton({ + label: args.label ?? 'Button', + size, + state: pressed ? 'pressed' : 'default', + theme + }); + }; + w.addEventListener('click', () => { + if (timer) clearTimeout(timer); + pressed = true; + update(); + timer = setTimeout(() => { + pressed = false; + update(); + }, 180); + }); + update(); + el.appendChild(w); + }); + return el; + }, + parameters: { + docs: { + description: { + story: 'Pressed-state demo. Click the buttons to preview the active press moment.' + } + } + } +}`,...v.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Wrapper(PanelButton({ + label: args.label ?? 'Button', + size: 24, + state: 'disabled', + theme + }) + PanelButton({ + label: args.label ?? 'Button', + size: 30, + state: 'disabled', + theme + })); + }, + parameters: { + docs: { + description: { + story: 'Disabled panel actions that keep layout without inviting interaction.' + } + } + } +}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Wrapper(PanelButton({ + label: args.label ?? 'Button', + size: 24, + state: 'loader', + theme + }) + PanelButton({ + label: args.label ?? 'Button', + size: 30, + state: 'loader', + theme + })); + }, + parameters: { + docs: { + description: { + story: 'Loading state for long-running panel actions.' + } + } + } +}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Wrapper(PanelButton({ + label: args.label ?? 'Scale Small', + size: 24, + state: 'default', + theme, + scale: true + }) + PanelButton({ + label: args.label ?? 'Scale Normal', + size: 30, + state: 'default', + theme, + scale: true + }), true); + }, + parameters: { + docs: { + description: { + story: 'Full-width layout variant for dense side-panel flows.' + } + } + } +}`,...x.parameters?.docs?.source}}},S=[`Default`,`HoveredButtons`,`ClickedButtons`,`DisabledButtons`,`IsLoadingButtons`,`ScaleButtons`]}))();export{v as ClickedButtons,g as Default,y as DisabledButtons,_ as HoveredButtons,b as IsLoadingButtons,x as ScaleButtons,S as __namedExportsOrder,h as default}; \ No newline at end of file diff --git a/storybook/static/assets/PreviewControls.stories-CUmA5ook.js b/storybook/static/assets/PreviewControls.stories-CUmA5ook.js new file mode 100644 index 0000000000..6e4a129881 --- /dev/null +++ b/storybook/static/assets/PreviewControls.stories-CUmA5ook.js @@ -0,0 +1,127 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r,o as i}from"./theme-utils-B-KYefhh.js";function a({direction:e=`back`,state:t=`default`,theme:n,isDisabled:r=!1}={}){let a=o[i(n)]??o.Light,c=t===`hover`,l=t===`pressed`,u=r||t===`disabled`,d=l?`0px 2px 6px rgba(0, 0, 0, 0.30)`:c?`0px 6px 12px rgba(0, 0, 0, 0.18)`:a.shadow,f=l?`translateY(0.5px)`:`none`,p=u?`0.45`:`1`,m=s[e]??s.back;return``}var o,s,c=e((()=>{r(),o={Light:{bg:`rgba(0, 0, 0, 0.80)`,fg:`#FFFFFF`,shadow:`0px 4px 10px rgba(0, 0, 0, 0.10)`},"Light Classic":{bg:`#444444`,fg:`#FFFFFF`,shadow:`0px 4px 10px rgba(0, 0, 0, 0.10)`},Dark:{bg:`rgba(255, 255, 255, 0.80)`,fg:`#444444`,shadow:`0px 4px 10px rgba(0, 0, 0, 0.40)`},"Dark Contrast":{bg:`#E8E8E8`,fg:`#2A2A2A`,shadow:`0px 4px 10px rgba(0, 0, 0, 0.40)`},"Modern Light":{bg:`#383838`,fg:`#FFFFFF`,shadow:`0px 4px 10px rgba(0, 0, 0, 0.10)`},"Modern Dark":{bg:`#EAEAEA`,fg:`#222222`,shadow:`0px 4px 10px rgba(0, 0, 0, 0.10)`}},s={back:`M8 12L17.5 2L16.5 1L6 12L16.5 23L17.5 22L8 12Z`,next:`M16 12L6.5 22L7.5 23L18 12L7.5 1L6.5 2L16 12Z`}}));function l({direction:e,theme:t,isDisabled:n,args:r}){if(n){let n=document.createElement(`div`);return n.style.display=`contents`,n.innerHTML=a({direction:e,state:`disabled`,theme:t,isDisabled:!0}),n}let i=document.createElement(`div`);if(i.style.display=`contents`,!r.interactive)return i.innerHTML=a({direction:e,state:r.isClicked?`pressed`:r.isHovered?`hover`:`default`,theme:t}),i;let o=!1,s=!1,c=()=>{i.innerHTML=a({direction:e,state:s?`pressed`:o?`hover`:`default`,theme:t})};return i.addEventListener(`mouseenter`,()=>{o=!0,c()}),i.addEventListener(`mouseleave`,()=>{o=!1,s=!1,c()}),i.addEventListener(`mousedown`,()=>{s=!0,c()}),i.addEventListener(`mouseup`,()=>{s=!1,c()}),c(),i}var u,d,f,p,m,h,g;e((()=>{c(),r(),u=n,d={title:`Components/Actions/Preview Controls`,tags:[`autodocs`],args:{direction:`back`,interactive:!0,isHovered:!1,isClicked:!1,isDisabled:!1,themeMode:`Auto`},argTypes:{direction:{control:`select`,options:[`back`,`next`],description:`Arrow direction`,table:{defaultValue:{summary:`back`}}},interactive:{control:`boolean`,description:`Allow hover and click feedback directly in the canvas`,table:{defaultValue:{summary:`true`}}},isHovered:{control:`boolean`,description:`Force hover appearance for visual review`},isClicked:{control:`boolean`,description:`Force pressed appearance for visual review`},isDisabled:{control:`boolean`,description:`Render in disabled state`,table:{defaultValue:{summary:`false`}}},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...u],description:`Auto = current Storybook toolbar theme`,table:{defaultValue:{summary:`Auto`}}},theme:{table:{disable:!0}}},parameters:{docs:{description:{component:`Circular arrow button used for navigating forward and backward in a preview carousel. Theme-aware with shadow-based state feedback.`}}}},f={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=document.createElement(`div`);return i.style.display=`flex`,i.style.gap=`40px`,i.style.alignItems=`center`,i.appendChild(l({direction:`back`,theme:r,isDisabled:e.isDisabled,args:e})),i.appendChild(l({direction:`next`,theme:r,isDisabled:e.isDisabled,args:e})),i},parameters:{docs:{description:{story:`Back and next preview controls side by side. Hover or click to see state transitions.`}}}},p={render:(e,n)=>l({direction:`back`,theme:t(e.themeMode,n.globals.theme),isDisabled:e.isDisabled,args:e}),parameters:{docs:{description:{story:`Back (previous) preview control in isolation.`}}}},m={render:(e,n)=>l({direction:`next`,theme:t(e.themeMode,n.globals.theme),isDisabled:e.isDisabled,args:e}),parameters:{docs:{description:{story:`Next preview control in isolation.`}}}},h={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=document.createElement(`div`);i.style.display=`flex`,i.style.gap=`40px`,i.style.alignItems=`center`;let o=document.createElement(`div`);o.style.display=`contents`,o.innerHTML=a({direction:`back`,state:`disabled`,theme:r,isDisabled:!0});let s=document.createElement(`div`);return s.style.display=`contents`,s.innerHTML=a({direction:`next`,state:`disabled`,theme:r,isDisabled:!0}),i.appendChild(o),i.appendChild(s),i},args:{isDisabled:!0},parameters:{docs:{description:{story:`Both preview controls in the disabled state.`}}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const wrapper = document.createElement('div'); + wrapper.style.display = 'flex'; + wrapper.style.gap = '40px'; + wrapper.style.alignItems = 'center'; + wrapper.appendChild(makeInteractiveControl({ + direction: 'back', + theme, + isDisabled: args.isDisabled, + args + })); + wrapper.appendChild(makeInteractiveControl({ + direction: 'next', + theme, + isDisabled: args.isDisabled, + args + })); + return wrapper; + }, + parameters: { + docs: { + description: { + story: 'Back and next preview controls side by side. Hover or click to see state transitions.' + } + } + } +}`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveControl({ + direction: 'back', + theme, + isDisabled: args.isDisabled, + args + }); + }, + parameters: { + docs: { + description: { + story: 'Back (previous) preview control in isolation.' + } + } + } +}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveControl({ + direction: 'next', + theme, + isDisabled: args.isDisabled, + args + }); + }, + parameters: { + docs: { + description: { + story: 'Next preview control in isolation.' + } + } + } +}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const wrapper = document.createElement('div'); + wrapper.style.display = 'flex'; + wrapper.style.gap = '40px'; + wrapper.style.alignItems = 'center'; + const back = document.createElement('div'); + back.style.display = 'contents'; + back.innerHTML = PreviewControl({ + direction: 'back', + state: 'disabled', + theme, + isDisabled: true + }); + const next = document.createElement('div'); + next.style.display = 'contents'; + next.innerHTML = PreviewControl({ + direction: 'next', + state: 'disabled', + theme, + isDisabled: true + }); + wrapper.appendChild(back); + wrapper.appendChild(next); + return wrapper; + }, + args: { + isDisabled: true + }, + parameters: { + docs: { + description: { + story: 'Both preview controls in the disabled state.' + } + } + } +}`,...h.parameters?.docs?.source}}},g=[`Default`,`Back`,`Next`,`Disabled`]}))();export{p as Back,f as Default,h as Disabled,m as Next,g as __namedExportsOrder,d as default}; \ No newline at end of file diff --git a/storybook/static/assets/Radio.stories-CumHEb3o.js b/storybook/static/assets/Radio.stories-CumHEb3o.js new file mode 100644 index 0000000000..3b964e7a6d --- /dev/null +++ b/storybook/static/assets/Radio.stories-CumHEb3o.js @@ -0,0 +1,74 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r}from"./theme-utils-B-KYefhh.js";var i,a,o,s,c=e((()=>{i=[`Light`,`Light Classic`,`Modern Light`,`Modern Dark`,`Dark`,`Dark Contrast`],a={Light:{default:{no:{outerFill:`white`,outerStroke:`#C0C0C0`,textColor:`rgba(0, 0, 0, 0.80)`,fontSize:11,lineHeight:16,letterSpacing:.22},yes:{outerFill:`white`,outerStroke:`#C0C0C0`,dotFill:`black`,dotOpacity:.8,textColor:`rgba(0, 0, 0, 0.80)`,fontSize:11,lineHeight:16,letterSpacing:.22}},hover:{no:{outerFill:`white`,outerStroke:`#848484`,textColor:`rgba(0, 0, 0, 0.80)`,fontSize:11,lineHeight:16,letterSpacing:.22},yes:{outerFill:`white`,outerStroke:`#848484`,dotFill:`black`,dotOpacity:.8,textColor:`rgba(0, 0, 0, 0.80)`,fontSize:11,lineHeight:16,letterSpacing:.22}},disabled:{no:{outerFill:`#F7F7F7`,outerStroke:`#E0E0E0`,textColor:`rgba(0, 0, 0, 0.40)`,fontSize:11,lineHeight:16,letterSpacing:.22},yes:{outerFill:`#F7F7F7`,outerStroke:`#E0E0E0`,dotFill:`black`,dotOpacity:.5,textColor:`rgba(0, 0, 0, 0.40)`,fontSize:11,lineHeight:16,letterSpacing:.22}}},"Light Classic":{default:{no:{outerFill:`white`,outerStroke:`#CFCFCF`,textColor:`#444444`,fontSize:11,lineHeight:16,letterSpacing:.22},yes:{outerFill:`white`,outerStroke:`#CFCFCF`,dotFill:`#444444`,textColor:`#444444`,fontSize:11,lineHeight:16,letterSpacing:.22}},hover:{no:{outerFill:`white`,outerStroke:`#848484`,textColor:`#444444`,fontSize:11,lineHeight:16,letterSpacing:.22},yes:{outerFill:`white`,outerStroke:`#848484`,dotFill:`#444444`,textColor:`#444444`,fontSize:11,lineHeight:16,letterSpacing:.22}},disabled:{no:{outerFill:`#F1F1F1`,outerStroke:`#D8DADC`,textColor:`#A5A5A5`,fontSize:11,lineHeight:16,letterSpacing:.22},yes:{outerFill:`#F1F1F1`,outerStroke:`#D8DADC`,dotFill:`#A5A5A5`,textColor:`#A5A5A5`,fontSize:11,lineHeight:16,letterSpacing:.22}}},"Modern Light":{default:{no:{outerFill:`#FFFFFF`,outerStroke:`#7F7F7F`,textColor:`#383838`,fontSize:12,lineHeight:16,letterSpacing:.24},yes:{outerFill:`#FFFFFF`,outerStroke:`#7F7F7F`,dotFill:`#383838`,textColor:`#383838`,fontSize:12,lineHeight:16,letterSpacing:.24}},hover:{no:{outerFill:`#F3F3F3`,outerStroke:`#969696`,textColor:`#383838`,fontSize:12,lineHeight:16,letterSpacing:.24},yes:{outerFill:`#F3F3F3`,outerStroke:`#969696`,dotFill:`#383838`,textColor:`#383838`,fontSize:12,lineHeight:16,letterSpacing:.24}},disabled:{no:{outerFill:`white`,outerStroke:`#969696`,textColor:`#383838`,fontSize:12,lineHeight:16,letterSpacing:.24},yes:{outerFill:`#F3F3F3`,outerStroke:`#969696`,dotFill:`white`,textColor:`#383838`,fontSize:12,lineHeight:16,letterSpacing:.24}}},"Modern Dark":{default:{no:{outerFill:`#404040`,outerStroke:`#969696`,textColor:`#F3F3F3`,fontSize:12,lineHeight:16,letterSpacing:.24},yes:{outerFill:`#404040`,outerStroke:`#969696`,dotFill:`#EAEAEA`,textColor:`#F3F3F3`,fontSize:12,lineHeight:16,letterSpacing:.24}},hover:{no:{outerFill:`#585858`,outerStroke:`#969696`,textColor:`#F3F3F3`,fontSize:12,lineHeight:16,letterSpacing:.24},yes:{outerFill:`#585858`,outerStroke:`#969696`,dotFill:`#EAEAEA`,textColor:`#F3F3F3`,fontSize:12,lineHeight:16,letterSpacing:.24}},disabled:{no:{outerFill:`#404040`,outerStroke:`#969696`,textColor:`#F3F3F3`,fontSize:12,lineHeight:16,letterSpacing:.24},yes:{outerFill:`#4A7BE0`,outerStroke:`#4A7BE0`,dotFill:`#404040`,textColor:`#F3F3F3`,fontSize:12,lineHeight:16,letterSpacing:.24}}},Dark:{default:{no:{outerFill:`#333333`,outerStroke:`#666666`,textColor:`rgba(255, 255, 255, 0.80)`,fontSize:11,lineHeight:16,letterSpacing:.22},yes:{outerFill:`#333333`,outerStroke:`#666666`,dotFill:`white`,dotOpacity:.8,textColor:`rgba(255, 255, 255, 0.80)`,fontSize:11,lineHeight:16,letterSpacing:.22}},hover:{no:{outerFill:`#333333`,outerStroke:`#CCCCCC`,textColor:`rgba(255, 255, 255, 0.80)`,fontSize:11,lineHeight:16,letterSpacing:.22},yes:{outerFill:`#333333`,outerStroke:`#CCCCCC`,dotFill:`white`,dotOpacity:.8,textColor:`rgba(255, 255, 255, 0.80)`,fontSize:11,lineHeight:16,letterSpacing:.22}},disabled:{no:{outerFill:`#404040`,outerStroke:`#555555`,textColor:`rgba(255, 255, 255, 0.40)`,fontSize:11,lineHeight:16,letterSpacing:.22},yes:{outerFill:`#404040`,outerStroke:`#555555`,dotFill:`white`,dotOpacity:.5,textColor:`rgba(255, 255, 255, 0.40)`,fontSize:11,lineHeight:16,letterSpacing:.22}}},"Dark Contrast":{default:{no:{outerFill:`#1E1E1E`,outerStroke:`#696969`,textColor:`#E8E8E8`,fontSize:11,lineHeight:16,letterSpacing:.22},yes:{outerFill:`#1E1E1E`,outerStroke:`#696969`,dotFill:`#E8E8E8`,textColor:`#E8E8E8`,fontSize:11,lineHeight:16,letterSpacing:.22}},hover:{no:{outerFill:`#1E1E1E`,outerStroke:`#B8B8B8`,textColor:`#E8E8E8`,fontSize:11,lineHeight:16,letterSpacing:.22},yes:{outerFill:`#1E1E1E`,outerStroke:`#B8B8B8`,dotFill:`#E8E8E8`,textColor:`#E8E8E8`,fontSize:11,lineHeight:16,letterSpacing:.22}},disabled:{no:{outerFill:`#2A2A2A`,outerStroke:`#424242`,textColor:`rgba(232, 232, 232, 0.45)`,fontSize:11,lineHeight:16,letterSpacing:.22},yes:{outerFill:`#2A2A2A`,outerStroke:`#424242`,dotFill:`#8A8A8A`,textColor:`rgba(232, 232, 232, 0.45)`,fontSize:11,lineHeight:16,letterSpacing:.22}}}},o=new Set(i),s=e=>o.has(e)?e:`Light`}));function l({label:e=`Text`,selected:t=`no`,state:n=`default`,theme:r=`Light`}={}){let i=a[s(r)][n][t],o=n===`disabled`,c=t===`yes`&&i.dotFill?``:``;return``}var u=e((()=>{c()}));function d({label:e,selected:t,state:n,interactive:r,isHovered:i,theme:a}){let o=n===`disabled`,s=typeof t==`boolean`?t?`yes`:`no`:t||`no`;if(!r||o){let t=document.createElement(`div`);return t.style.display=`contents`,t.innerHTML=l({label:e,selected:s,state:o?`disabled`:i?`hover`:n,theme:a}),t}let c=document.createElement(`div`);c.style.display=`contents`;let u=s,d=!1,f=()=>{c.innerHTML=l({label:e,selected:u,state:d?`hover`:`default`,theme:a})};return c.addEventListener(`mouseenter`,()=>{d=!0,f()}),c.addEventListener(`mouseleave`,()=>{d=!1,f()}),c.addEventListener(`click`,()=>{u=`yes`,f()}),f(),c}var f,p,m,h,g,_,v;e((()=>{u(),r(),f=n,p={title:`Components/Form/Radio`,tags:[`autodocs`],args:{label:`Default radio button`,selected:`no`,state:`default`,interactive:!0,themeMode:`Auto`},argTypes:{label:{control:`text`,description:`Visible radio label`},selected:{control:`select`,options:[`no`,`yes`],description:`Unchecked or selected state`},state:{control:`select`,options:[`default`,`hover`,`disabled`],description:`Rendered visual state`},interactive:{control:`boolean`,description:`Allow hover and selection behavior directly in the canvas`,table:{defaultValue:{summary:`true`}}},isHovered:{control:`boolean`,description:`Force hover appearance for review`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...f],description:`Auto = current Storybook toolbar theme`,table:{defaultValue:{summary:`Auto`}}},theme:{table:{disable:!0}},onChange:{table:{disable:!0}}},parameters:{docs:{description:{component:`Radio control for mutually exclusive choices. Use it inside groups where one option should stay selected.`}}}},m={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return d({...e,theme:r})}},h={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return d({...e,label:`Checked radio button`,selected:`yes`,state:`default`,interactive:!0,theme:r})},parameters:{docs:{description:{story:`Selected radio option inside a choice group.`}}}},g={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return d({...e,label:`Hovered radio button`,selected:`no`,state:`default`,interactive:!0,theme:r})},parameters:{docs:{description:{story:`Interactive hover demo for an unselected radio option. Move the pointer over the control in the canvas.`}}}},_={render:(e,n)=>d({label:`Disabled`,selected:`no`,state:`disabled`,interactive:!1,theme:t(e.themeMode,n.globals.theme)}),parameters:{docs:{description:{story:`Disabled radio option that remains visible but unavailable.`}}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeRadio({ + ...args, + theme + }); + } +}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeRadio({ + ...args, + label: 'Checked radio button', + selected: 'yes', + state: 'default', + interactive: true, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Selected radio option inside a choice group.' + } + } + } +}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeRadio({ + ...args, + label: 'Hovered radio button', + selected: 'no', + state: 'default', + interactive: true, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Interactive hover demo for an unselected radio option. Move the pointer over the control in the canvas.' + } + } + } +}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeRadio({ + label: 'Disabled', + selected: 'no', + state: 'disabled', + interactive: false, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Disabled radio option that remains visible but unavailable.' + } + } + } +}`,..._.parameters?.docs?.source}}},v=[`Default`,`Checked`,`Hovered`,`Disabled`]}))();export{h as Checked,m as Default,_ as Disabled,g as Hovered,v as __namedExportsOrder,p as default}; \ No newline at end of file diff --git a/storybook/static/assets/Scroll.stories-Dq4Wwl6Z.js b/storybook/static/assets/Scroll.stories-Dq4Wwl6Z.js new file mode 100644 index 0000000000..664e11814e --- /dev/null +++ b/storybook/static/assets/Scroll.stories-Dq4Wwl6Z.js @@ -0,0 +1,98 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r,o as i}from"./theme-utils-B-KYefhh.js";var a,o,s=e((()=>{a={Light:{default:{lift:{M:{bg:`#F7F7F7`,border:`rgba(224, 224, 224, 0.93)`,notch:`rgba(224, 224, 224, 0.93)`},S:{bg:`#F7F7F7`,border:`#E0E0E0`,notch:`rgba(224, 224, 224, 0.93)`},XS:{bg:`rgba(224, 224, 224, 0.93)`,border:`rgba(224, 224, 224, 0.93)`,notch:`rgba(224, 224, 224, 0.93)`}},button:{bg:`#F7F7F7`,border:`rgba(224, 224, 224, 0.93)`,arrow:`#ADADAD`}},hover:{lift:{M:{bg:`#C0C0C0`,border:`#CBCBCB`,notch:`#F7F7F7`},S:{bg:`#C0C0C0`,border:`#CBCBCB`,notch:`#F7F7F7`},XS:{bg:`#CBCBCB`,border:`#CBCBCB`,notch:`#CBCBCB`}},button:{bg:`#C0C0C0`,border:`rgba(224, 224, 224, 0.93)`,arrow:`#F7F7F7`}},pressed:{lift:{M:{bg:`#ADADAD`,border:`#ADADAD`,notch:`#F7F7F7`},S:{bg:`#ADADAD`,border:`#ADADAD`,notch:`#F7F7F7`},XS:{bg:`#ADADAD`,border:`#ADADAD`,notch:`#ADADAD`}},button:{bg:`#ADADAD`,border:`#ADADAD`,arrow:`#F7F7F7`}}},"Light Classic":{default:{lift:{M:{bg:`#F1F1F1`,border:`#CFCFCF`,notch:`#CBCBCB`},S:{bg:`#F1F1F1`,border:`#CFCFCF`,notch:`#CBCBCB`},XS:{bg:`#CFCFCF`,border:`#CFCFCF`,notch:`#CFCFCF`}},button:{bg:`#F1F1F1`,border:`#CFCFCF`,arrow:`#ADADAD`}},hover:{lift:{M:{bg:`#CFCFCF`,border:`#CBCBCB`,notch:`#F1F1F1`},S:{bg:`#CFCFCF`,border:`#CBCBCB`,notch:`#F1F1F1`},XS:{bg:`#CFCFCF`,border:`#CFCFCF`,notch:`#CFCFCF`}},button:{bg:`#CFCFCF`,border:`#CFCFCF`,arrow:`#F1F1F1`}},pressed:{lift:{M:{bg:`#ADADAD`,border:`#ADADAD`,notch:`#F1F1F1`},S:{bg:`#ADADAD`,border:`#ADADAD`,notch:`#F1F1F1`},XS:{bg:`#ADADAD`,border:`#ADADAD`,notch:`#ADADAD`}},button:{bg:`#ADADAD`,border:`#ADADAD`,arrow:`#F1F1F1`}}},Dark:{default:{lift:{M:{bg:`#404040`,border:`#616161`,notch:`#616161`},S:{bg:`#404040`,border:`#616161`,notch:`#616161`},XS:{bg:`#616161`,border:`#616161`,notch:`#616161`}},button:{bg:`#404040`,border:`#616161`,arrow:`#ADADAD`}},hover:{lift:{M:{bg:`#666666`,border:`#616161`,notch:`#404040`},S:{bg:`#666666`,border:`#616161`,notch:`#404040`},XS:{bg:`#999999`,border:`#999999`,notch:`#999999`}},button:{bg:`#666666`,border:`#616161`,arrow:`#404040`}},pressed:{lift:{M:{bg:`#ADADAD`,border:`#999999`,notch:`#404040`},S:{bg:`#ADADAD`,border:`#999999`,notch:`#404040`},XS:{bg:`#ADADAD`,border:`#ADADAD`,notch:`#ADADAD`}},button:{bg:`#ADADAD`,border:`#999999`,arrow:`#404040`}}},"Dark Contrast":{default:{lift:{M:{bg:`#2A2A2A`,border:`#616161`,notch:`#616161`},S:{bg:`#2A2A2A`,border:`#616161`,notch:`#616161`},XS:{bg:`#616161`,border:`#616161`,notch:`#616161`}},button:{bg:`#2A2A2A`,border:`#616161`,arrow:`#4D4D4D`}},hover:{lift:{M:{bg:`#696969`,border:`#616161`,notch:`#2A2A2A`},S:{bg:`#696969`,border:`#616161`,notch:`#2A2A2A`},XS:{bg:`#424242`,border:`#424242`,notch:`#424242`}},button:{bg:`#696969`,border:`#616161`,arrow:`#2A2A2A`}},pressed:{lift:{M:{bg:`#4D4D4D`,border:`#7D7D7D`,notch:`#2A2A2A`},S:{bg:`#4D4D4D`,border:`#7D7D7D`,notch:`#2A2A2A`},XS:{bg:`#4D4D4D`,border:`#4D4D4D`,notch:`#4D4D4D`}},button:{bg:`#4D4D4D`,border:`#7D7D7D`,arrow:`#2A2A2A`}}},"Modern Light":{default:{lift:{M:{bg:`#F7F7F7`,border:`#E1E1E1`,notch:`#E1E1E1`},S:{bg:`#F7F7F7`,border:`#E1E1E1`,notch:`#E1E1E1`},XS:{bg:`#F7F7F7`,border:`#F7F7F7`,notch:`#F7F7F7`}},button:{bg:`#F7F7F7`,border:`#E1E1E1`,arrow:`#969696`}},hover:{lift:{M:{bg:`#C0C0C0`,border:`#E1E1E1`,notch:`#F7F7F7`},S:{bg:`#C0C0C0`,border:`#E1E1E1`,notch:`#F7F7F7`},XS:{bg:`#C0C0C0`,border:`#C0C0C0`,notch:`#C0C0C0`}},button:{bg:`#C0C0C0`,border:`#E1E1E1`,arrow:`#F7F7F7`}},pressed:{lift:{M:{bg:`#ADADAD`,border:`#ADADAD`,notch:`#F7F7F7`},S:{bg:`#ADADAD`,border:`#ADADAD`,notch:`#F7F7F7`},XS:{bg:`#ADADAD`,border:`#ADADAD`,notch:`#ADADAD`}},button:{bg:`#ADADAD`,border:`#ADADAD`,arrow:`#ADADAD`}}},"Modern Dark":{default:{lift:{M:{bg:`#404040`,border:`#686868`,notch:`#686868`},S:{bg:`#404040`,border:`#686868`,notch:`#686868`},XS:{bg:`#686868`,border:`#686868`,notch:`#686868`}},button:{bg:`#404040`,border:`#686868`,arrow:`#969696`}},hover:{lift:{M:{bg:`#686868`,border:`#686868`,notch:`#404040`},S:{bg:`#686868`,border:`#686868`,notch:`#404040`},XS:{bg:`#686868`,border:`#686868`,notch:`#686868`}},button:{bg:`#686868`,border:`#686868`,arrow:`#404040`}},pressed:{lift:{M:{bg:`#686868`,border:`#686868`,notch:`#404040`},S:{bg:`#686868`,border:`#686868`,notch:`#404040`},XS:{bg:`#686868`,border:`#686868`,notch:`#686868`}},button:{bg:`#686868`,border:`#686868`,arrow:`#404040`}}}},o={M:{railOuter:13,railInner:13,notch:5,radius:1,frameCross:13,button:13,gap:1,hasNotching:!0},S:{railOuter:8,railInner:8,notch:3,radius:1,frameCross:8,button:13,gap:1,hasNotching:!0},XS:{railOuter:9,railInner:5,notch:0,radius:20,frameCross:8,button:13,gap:1,hasNotching:!1}}}));function c(e,t){return Array.from({length:7},()=>``).join(``)}function l({orientation:e=`vertical`,size:t=`M`,type:n=`withoutButtons`,state:r=`default`,length:s=167,viewportSize:l=100,contentSize:f=200,scrollValue:p=0,theme:m}={}){let h=a[i(m)]??a.Light,g=h[r]??h.default,_=e===`horizontal`,v=n===`withButtons`,y=v?`M`:t,b=o[y],x=g.lift[y],S=g.button,C=Math.max(24,Math.max(48,s)-(v?b.button*2+b.gap*2:0)),w=Math.max(1,l),T=Math.max(w,f),E=Math.max(0,T-w),D=Math.round(w/T*C),O=Math.max(Math.min(y===`XS`?18:24,C),Math.min(D,C)),k=Math.max(0,C-O),A=Math.max(0,Math.min(p,E)),j=k===0||E===0?0:A/E*k,M=Math.floor((b.frameCross-b.railInner)/2),N=`position:relative;width:${_?C:b.frameCross}px;height:${_?b.frameCross:C}px;box-sizing:border-box;`,P=_?j:M,F=_?M:j,I=_?O:b.railInner,L=_?b.railInner:O,R=`
${b.hasNotching?_?`
${Array.from({length:7},()=>``).join(``)}
`:`
${c(x.notch,b.notch)}
`:``}
`,z=[`width:${b.button}px`,`height:${b.button}px`,`border:1px solid ${S.border}`,`border-radius:1px`,`background:${S.bg}`,`display:inline-flex`,`align-items:center`,`justify-content:center`,`box-sizing:border-box`,`cursor:pointer`,`padding:0`].join(`;`),B=v?``:``,V=v?``:``,H=[`display:inline-flex`,`flex-direction:${_?`row`:`column`}`,`gap:${b.gap}px`,`align-items:center`,`justify-content:flex-start`,`user-select:none`].join(`;`);return`
${B}${R}${V}
`}var u,d,f=e((()=>{s(),r(),u=e=>``,d=e=>``}));function p(e,t){let n=e.orientation??`vertical`,r=e.size??`M`,i=e.type??`withButtons`,s=Math.max(48,e.length??167),c=e.viewportSize??160,u=e.contentSize??520,d=e.step??24,f=n===`horizontal`,p=i===`withButtons`,m=p?`M`:r,h=a[t]??a.Light,g=o[m],_=Math.max(24,s-(p?g.button*2+g.gap*2:0)),v=Math.max(1,c),y=Math.max(v,u),b=Math.max(0,y-v),x=Math.round(v/y*_),S=Math.max(0,_-Math.max(Math.min(m===`XS`?18:24,_),Math.min(x,_))),C=0,w=document.createElement(`div`);w.style.display=`contents`,w.innerHTML=l({...e,theme:t,scrollValue:C,state:`default`});let T=w.firstElementChild;if(!T)return w;let E=[...T.querySelectorAll(`button`)],D=T.querySelector(`div`),O=D?D.firstElementChild:null;if(!O)return w;let k=()=>{let e=Math.max(0,Math.min(C,b)),t=S===0||b===0?0:e/b*S;O.style[f?`left`:`top`]=`${t}px`,T.setAttribute(`aria-valuenow`,String(Math.round(e)))},A=e=>{let t=(h[e]??h.default).lift[m];O.style.background=t.bg,O.style.borderColor=t.border,O.querySelectorAll(`span`).forEach(e=>{e.style.background=t.notch})},j=(e,t)=>{let n=(h[t]??h.default).button;e.style.background=n.bg,e.style.borderColor=n.border;let r=e.querySelector(`path`);r&&r.setAttribute(`fill`,n.arrow)};O.style.cursor=`grab`;let M=!1,N=0,P=0;if(O.addEventListener(`mouseenter`,()=>{M||A(`hover`)}),O.addEventListener(`mouseleave`,()=>{M||A(`default`)}),O.addEventListener(`mousedown`,e=>{M=!0,N=f?e.clientX:e.clientY,P=C,A(`pressed`),O.style.cursor=`grabbing`,e.preventDefault();let t=e=>{let t=(f?e.clientX:e.clientY)-N;S>0&&b>0&&(C=Math.max(0,Math.min(b,P+t/S*b))),k()},n=()=>{M=!1,A(`hover`),O.style.cursor=`grab`,window.removeEventListener(`mousemove`,t),window.removeEventListener(`mouseup`,n)};window.addEventListener(`mousemove`,t),window.addEventListener(`mouseup`,n)}),E.length>=2){let e=(e,t)=>{e.addEventListener(`mouseenter`,()=>j(e,`hover`)),e.addEventListener(`mouseleave`,()=>j(e,`default`)),e.addEventListener(`mousedown`,()=>j(e,`pressed`)),e.addEventListener(`mouseup`,()=>j(e,`hover`)),e.addEventListener(`click`,()=>{C=Math.max(0,Math.min(b,C+t*d)),k()})};e(E[0],-1),e(E[1],1)}return T.addEventListener(`wheel`,e=>{e.preventDefault();let t=f&&e.deltaX||e.deltaY;C=Math.max(0,Math.min(b,C+(t>0?d:-d))),k()},{passive:!1}),w}var m,h,g,_,v,y,b,x,S;e((()=>{f(),r(),s(),m=n,h={title:`Components/Layout/Scroll`,tags:[`autodocs`],args:{orientation:`vertical`,size:`M`,type:`withButtons`,state:`default`,length:167,interactive:!0,isHovered:!1,isPressed:!1,viewportSize:160,contentSize:520,step:24,themeMode:`Auto`},argTypes:{orientation:{control:`select`,options:[`vertical`,`horizontal`],description:`Vertical or horizontal scrollbar layout`},size:{control:`select`,options:[`XS`,`S`,`M`],description:`Scrollbar thickness preset`},type:{control:`select`,options:[`withButtons`,`withoutButtons`],description:`Scrollbar with arrow buttons or without them`},state:{control:`select`,options:[`default`,`hover`,`pressed`],description:`Static visual state used when interactive mode is off`},length:{control:`number`,description:`Rendered scrollbar length in px`},viewportSize:{control:`number`,description:`Visible viewport size used to compute the thumb ratio`},contentSize:{control:`number`,description:`Scrollable content size used to compute the thumb ratio`},step:{control:`number`,description:`Scroll increment for arrow buttons and keyboard input`},interactive:{control:`boolean`,description:`Allow hover, drag, click, wheel, and arrow-button interaction in the canvas`},isHovered:{control:`boolean`,description:`Force hover appearance for review`},isPressed:{control:`boolean`,description:`Force pressed appearance for review`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...m],description:`Auto = current Storybook toolbar theme`,table:{defaultValue:{summary:`Auto`}}},theme:{table:{disable:!0}},value:{table:{disable:!0}},defaultValue:{table:{disable:!0}},onValueChange:{table:{disable:!0}}},parameters:{docs:{description:{component:`Scrollbar variants for panel and canvas-like areas. Includes with-buttons and without-buttons styles, multiple thicknesses, and an interactive demo with dragging and wheel input.`}}}},g={render:(e,n)=>p(e,t(e.themeMode,n.globals.theme))},_={name:`WithBtn M`,render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return p({...e,orientation:`vertical`,type:`withButtons`,size:`M`},r)},parameters:{docs:{description:{story:`Medium scrollbar with arrow buttons.`}}}},v={name:`WithoutBtn M`,render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return p({...e,orientation:`vertical`,type:`withoutButtons`,size:`M`},r)},parameters:{docs:{description:{story:`Medium scrollbar without arrow buttons.`}}}},y={name:`WithoutBtn S`,render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return p({...e,orientation:`vertical`,type:`withoutButtons`,size:`S`},r)},parameters:{docs:{description:{story:`Slim scrollbar without arrow buttons.`}}}},b={name:`WithoutBtn XS`,render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return p({...e,orientation:`vertical`,type:`withoutButtons`,size:`XS`},r)},parameters:{docs:{description:{story:`Extra-slim scrollbar for dense layouts.`}}}},x={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return p({...e,orientation:`horizontal`,type:`withButtons`,size:`M`,length:240,viewportSize:180,contentSize:500},r)},parameters:{docs:{description:{story:`Horizontal scrollbar variant with arrow buttons.`}}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveScroll(args, theme); + } +}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{ + name: 'WithBtn M', + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveScroll({ + ...args, + orientation: 'vertical', + type: 'withButtons', + size: 'M' + }, theme); + }, + parameters: { + docs: { + description: { + story: 'Medium scrollbar with arrow buttons.' + } + } + } +}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{ + name: 'WithoutBtn M', + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveScroll({ + ...args, + orientation: 'vertical', + type: 'withoutButtons', + size: 'M' + }, theme); + }, + parameters: { + docs: { + description: { + story: 'Medium scrollbar without arrow buttons.' + } + } + } +}`,...v.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{ + name: 'WithoutBtn S', + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveScroll({ + ...args, + orientation: 'vertical', + type: 'withoutButtons', + size: 'S' + }, theme); + }, + parameters: { + docs: { + description: { + story: 'Slim scrollbar without arrow buttons.' + } + } + } +}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{ + name: 'WithoutBtn XS', + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveScroll({ + ...args, + orientation: 'vertical', + type: 'withoutButtons', + size: 'XS' + }, theme); + }, + parameters: { + docs: { + description: { + story: 'Extra-slim scrollbar for dense layouts.' + } + } + } +}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveScroll({ + ...args, + orientation: 'horizontal', + type: 'withButtons', + size: 'M', + length: 240, + viewportSize: 180, + contentSize: 500 + }, theme); + }, + parameters: { + docs: { + description: { + story: 'Horizontal scrollbar variant with arrow buttons.' + } + } + } +}`,...x.parameters?.docs?.source}}},S=[`Default`,`WithButtonsM`,`WithoutButtonsM`,`WithoutButtonsS`,`WithoutButtonsXS`,`Horizontal`]}))();export{g as Default,x as Horizontal,_ as WithButtonsM,v as WithoutButtonsM,y as WithoutButtonsS,b as WithoutButtonsXS,S as __namedExportsOrder,h as default}; \ No newline at end of file diff --git a/storybook/static/assets/Slider.stories-DM-7D2v4.js b/storybook/static/assets/Slider.stories-DM-7D2v4.js new file mode 100644 index 0000000000..18d573b48e --- /dev/null +++ b/storybook/static/assets/Slider.stories-DM-7D2v4.js @@ -0,0 +1,63 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r,o as i}from"./theme-utils-B-KYefhh.js";var a,o=e((()=>{a={Light:{offTrack:`#C0C0C0`,onTrack:`rgba(0, 0, 0, 0.80)`,thumb:{size:12,fill:`#FFFFFF`,stroke:`rgba(0, 0, 0, 0.80)`,strokeWidth:1},label:{color:`rgba(0, 0, 0, 0.80)`,fontSize:11,lineHeight:14,letterSpacing:.22}},"Light Classic":{offTrack:`#CFCFCF`,onTrack:`#444444`,thumb:{size:12,fill:`#FFFFFF`,stroke:`rgba(0, 0, 0, 0.80)`,strokeWidth:1},label:{color:`#444444`,fontSize:11,lineHeight:14,letterSpacing:.22}},Dark:{offTrack:`#666666`,onTrack:`rgba(255, 255, 255, 0.80)`,thumb:{size:12,fill:`#333333`,stroke:`#FFFFFF`,strokeWidth:1},label:{color:`rgba(255, 255, 255, 0.80)`,fontSize:11,lineHeight:14,letterSpacing:.22}},"Dark Contrast":{offTrack:`#696969`,onTrack:`#E8E8E8`,thumb:{size:12,fill:`#1E1E1E`,stroke:`#FFFFFF`,strokeWidth:1},label:{color:`#E8E8E8`,fontSize:11,lineHeight:14,letterSpacing:.22}},"Modern Light":{offTrack:`#E1E1E1`,onTrack:`#4473CA`,thumb:{size:18,fill:`#4473CA`,stroke:`#FFFFFF`,strokeWidth:3,shadow:`0 4px 12px rgba(0, 32, 51, 0.10), 0 8px 100px rgba(0, 32, 51, 0.14)`},label:{color:`#383838`,fontSize:12,lineHeight:16,letterSpacing:.24}},"Modern Dark":{offTrack:`#686868`,onTrack:`#4A7BE0`,thumb:{size:18,fill:`#4A7BE0`,stroke:`#FFFFFF`,strokeWidth:3,shadow:`0 4px 12px rgba(0, 32, 51, 0.10), 0 8px 100px rgba(0, 32, 51, 0.14)`},label:{color:`#F3F3F3`,fontSize:12,lineHeight:16,letterSpacing:.24}}}}));function s({value:e=40,min:t=0,max:n=100,label:r=``,showValue:o=!1,disabled:s=!1,theme:c=`Light`,width:l=220}={}){let u=a[i(c)]??a.Light,d=Math.max(t,Math.min(n,e)),f=n===t?0:Math.round((d-t)/(n-t)*100),p=s?.5:1,m=[`width:${l}px`,`height:4px`,`border-radius:2px`,`background:linear-gradient(to right, ${u.onTrack} ${f}%, ${u.offTrack} ${f}%)`,`position:relative`,`display:flex`,`align-items:center`].join(`;`),h=u.thumb.shadow?`;box-shadow:${u.thumb.shadow}`:``,g=[`width:${u.thumb.size}px`,`height:${u.thumb.size}px`,`border-radius:50%`,`background:${u.thumb.fill}`,`border:${u.thumb.strokeWidth}px solid ${u.thumb.stroke}`,`position:absolute`,`left:calc(${f}% - ${u.thumb.size/2}px)`,`cursor:${s?`not-allowed`:`pointer`}`,`box-sizing:border-box`].join(`;`)+h,_=r?`
${r}
`:``,v=o?`${d}`:``;return`
+ ${_} +
+ ${`
+
+
+
+
`} + ${v} +
+
`}var c=e((()=>{o(),r()}));function l(e,t){let n=document.createElement(`div`);n.style.display=`contents`;let r=e.min??0,i=e.max??100,a=e.value??40;n.innerHTML=s({...e,theme:t,value:a});let o=n.firstElementChild;if(!o)return n;let c=[...o.children].find(e=>e.style.display===`flex`)??o.lastElementChild,l=c?c.children[0]:null,u=l?l.children[0]:null,d=u?u.children[0]:null;if(!l)return n;let f=document.createElement(`input`);return f.type=`range`,f.min=String(r),f.max=String(i),f.step=String(e.step??1),f.value=String(a),Object.assign(f.style,{position:`absolute`,inset:`0`,width:`100%`,height:`100%`,opacity:`0`,cursor:e.disabled?`not-allowed`:`pointer`,margin:`0`,padding:`0`}),e.disabled&&(f.disabled=!0),l.appendChild(f),f.addEventListener(`input`,e=>{a=Number(e.target.value);let t=i===r?0:Math.round((a-r)/(i-r)*100);if(u){let e=u.style.background.match(/linear-gradient\(to right,\s*(.+?)\s+\d+%,\s*(.+?)\s+\d+%\)/);e&&(u.style.background=`linear-gradient(to right, ${e[1]} ${t}%, ${e[2]} ${t}%)`)}if(d){let e=parseFloat(d.style.width)/2;d.style.left=`calc(${t}% - ${e}px)`}}),n}var u,d,f,p,m,h,g;e((()=>{c(),r(),u=n,d={title:`Components/Form/Slider`,tags:[`autodocs`],args:{value:40,min:0,max:100,showValue:!1,disabled:!1,themeMode:`Auto`},argTypes:{value:{control:{type:`range`,min:0,max:100,step:1},description:`Current slider value`},min:{control:`number`,description:`Minimum allowed value`},max:{control:`number`,description:`Maximum allowed value`},step:{control:`number`,description:`Step increment between values`},showValue:{control:`boolean`,description:`Show the numeric value on the right`},disabled:{control:`boolean`,description:`Show the disabled state`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...u],description:`Auto = current Storybook toolbar theme`,table:{defaultValue:{summary:`Auto`}}},theme:{table:{disable:!0}},onChange:{table:{disable:!0}}},parameters:{docs:{description:{component:`Single-value slider for compact numeric adjustment with optional inline value display.`}}}},f={render:(e,n)=>l(e,t(e.themeMode,n.globals.theme))},p={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return l({...e,showValue:!0},r)},parameters:{docs:{description:{story:`Slider with the current numeric value shown inline.`}}}},m={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return s({...e,value:e.min??0,theme:r})},parameters:{docs:{description:{story:`Slider positioned at the minimum value.`}}}},h={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return s({...e,value:e.max??100,theme:r})},parameters:{docs:{description:{story:`Slider positioned at the maximum value.`}}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveSlider(args, theme); + } +}`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveSlider({ + ...args, + showValue: true + }, theme); + }, + parameters: { + docs: { + description: { + story: 'Slider with the current numeric value shown inline.' + } + } + } +}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Slider({ + ...args, + value: args.min ?? 0, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Slider positioned at the minimum value.' + } + } + } +}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Slider({ + ...args, + value: args.max ?? 100, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Slider positioned at the maximum value.' + } + } + } +}`,...h.parameters?.docs?.source}}},g=[`Default`,`WithValue`,`Min`,`Max`]}))();export{f as Default,h as Max,m as Min,p as WithValue,g as __namedExportsOrder,d as default}; \ No newline at end of file diff --git a/storybook/static/assets/SplitButton-Bq4l2hJH.js b/storybook/static/assets/SplitButton-Bq4l2hJH.js new file mode 100644 index 0000000000..fd80b9f94b --- /dev/null +++ b/storybook/static/assets/SplitButton-Bq4l2hJH.js @@ -0,0 +1,20 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{n as t,t as n}from"./theme-utils-B-KYefhh.js";function r({label:e=`Button`,state:t=`default`,type:r=`dropDown`,theme:s,isOpen:c=!1,items:l=[{id:`1`,label:`Option 1`},{id:`2`,label:`Option 2`},{id:`3`,label:`Option 3`},{id:`4`,label:`Disabled option`,disabled:!0}]}={}){let u=n(s),d=u.theme,f=u.isModern,p=f?4:1,m=t===`disabled`,h=t===`hover`,g=t===`pressed`,_=u.bg,v=u.surfaceAlt,y=o[d]??u.surfaceAlt,b=d===`Light Classic`||d===`Modern Dark`?`#FFFFFF`:u.fg,x=r===`iconLeft`&&d===`Modern Dark`?`#F3F3F3`:u.fg,S=f?12:11,C=[`height:24px`,`border:none`,`outline:none`,`font-family:Arial,Helvetica,sans-serif`,`font-size:${S}px`,`line-height:16px`,`letter-spacing:${f?.24:.22}px`,`cursor:${m?`not-allowed`:`pointer`}`,`box-sizing:border-box`,`white-space:nowrap`,`display:inline-flex`,`align-items:center`,`justify-content:center`].join(`;`),w=m?`opacity:0.6;`:``;if(r===`dropDown`){let t=c?y:h?v:_,n=c||g?b:u.fg,r=c?` +
+ ${l.map(e=>``).join(``)} +
`:``;return`
+
+ + +
+ ${r} +
`}if(r===`iconLeft`){let t=g?y:h?v:_,n=m?u.muted:g?b:x;return`
+
+ +
+
`}let T=g?y:h?v:_,E=m?u.muted:g?b:u.fg;return`
+
+ +
+
`}var i,a,o,s=e((()=>{t(),i=e=>``,a=e=>``,o={Light:`#CBCBCB`,"Light Classic":`#7D858C`,Dark:`#666666`,"Dark Contrast":`#666666`,"Modern Light":`#DCE7FA`,"Modern Dark":`#375478`}}));export{s as n,r as t}; \ No newline at end of file diff --git a/storybook/static/assets/SplitButtonsDropdown.stories-BvWeee5D.js b/storybook/static/assets/SplitButtonsDropdown.stories-BvWeee5D.js new file mode 100644 index 0000000000..ca5327a55c --- /dev/null +++ b/storybook/static/assets/SplitButtonsDropdown.stories-BvWeee5D.js @@ -0,0 +1,134 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r,t as i}from"./theme-utils-B-KYefhh.js";import{n as a,t as o}from"./SplitButton-Bq4l2hJH.js";var s,c,l,u,d,f,p,m;e((()=>{a(),r(),s={Light:`#CBCBCB`,"Light Classic":`#7D858C`,Dark:`#666666`,"Dark Contrast":`#666666`,"Modern Light":`#DCE7FA`,"Modern Dark":`#375478`},c=n,l=[{id:`1`,label:`Option 1`},{id:`2`,label:`Option 2`},{id:`3`,label:`Option 3`},{id:`4`,label:`Disabled option`,disabled:!0}],u={title:`Components/Buttons/Split Buttons/Drop Down`,tags:[`autodocs`],args:{label:`Button`,state:`default`,type:`dropDown`,interactive:!0,themeMode:`Auto`},argTypes:{label:{control:`text`,description:`Visible split-button label`},interactive:{control:`boolean`,description:`Allow hover and press feedback directly in the canvas`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...c],description:`Auto = current Storybook toolbar theme`},type:{table:{disable:!0}},state:{table:{disable:!0}},items:{table:{disable:!0}},isOpen:{table:{disable:!0}},onItemSelect:{table:{disable:!0}},theme:{table:{disable:!0}}},parameters:{docs:{description:{component:`Split button with a dropdown affordance. Clicking the chevron opens a plain context-menu-style list of options.`}}}},d={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),a=i(r),c=s[a.theme]??a.surfaceAlt,u=document.createElement(`div`);u.style.paddingBottom=`120px`;let d=document.createElement(`div`);d.style.display=`contents`;let f=e.label??`Button`,p=!1,m=null,h=()=>{if(m&&=(document.removeEventListener(`click`,m,!0),null),d.innerHTML=o({label:f,type:`dropDown`,state:`default`,isOpen:p,items:l,theme:r}),p){let e=d.querySelector(`div[style*="position:absolute"]`);e&&e.querySelectorAll(`button`).forEach(e=>{let t=l.find(t=>t.label===e.textContent?.trim());!t||t.disabled||(e.addEventListener(`mouseenter`,()=>{e.style.background=a.surfaceAlt}),e.addEventListener(`mouseleave`,()=>{e.style.background=`transparent`}),e.addEventListener(`mousedown`,()=>{e.style.background=c}),e.addEventListener(`mouseup`,()=>{e.style.background=a.surfaceAlt}),e.addEventListener(`click`,()=>{f=t.label,p=!1,h()}))})}p&&(m=e=>{u.contains(e.target)||(p=!1,h())},document.addEventListener(`click`,m,!0));let e=d.querySelector(`button[aria-label="Open menu"]`);if(e){let t=p?c:a.bg;e.addEventListener(`click`,()=>{p=!p,h()}),e.addEventListener(`mouseenter`,()=>{e.style.background=a.surfaceAlt}),e.addEventListener(`mouseleave`,()=>{e.style.background=t}),e.addEventListener(`mousedown`,()=>{e.style.background=c}),e.addEventListener(`mouseup`,()=>{e.style.background=a.surfaceAlt})}};return h(),u.appendChild(d),u}},f={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=document.createElement(`div`);return i.style.paddingBottom=`120px`,i.innerHTML=o({label:e.label,type:`dropDown`,state:`default`,isOpen:!0,items:l,theme:r}),i},args:{isOpen:!0},parameters:{docs:{description:{story:`Dropdown in the open state. Switch the toolbar theme to preview across themes.`}}}},p={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return o({label:e.label,type:`dropDown`,state:`disabled`,isOpen:!1,items:l,theme:r})},parameters:{docs:{description:{story:`Disabled dropdown split button.`}}}},d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const tokens = getTokens(theme); + const pressedBg = PRESSED_BG[tokens.theme] ?? tokens.surfaceAlt; + const wrapper = document.createElement('div'); + wrapper.style.paddingBottom = '120px'; + const el = document.createElement('div'); + el.style.display = 'contents'; + let currentLabel = args.label ?? 'Button'; + let open = false; + let outsideClickHandler = null; + const update = () => { + if (outsideClickHandler) { + document.removeEventListener('click', outsideClickHandler, true); + outsideClickHandler = null; + } + el.innerHTML = SplitButton({ + label: currentLabel, + type: 'dropDown', + state: 'default', + isOpen: open, + items: defaultItems, + theme + }); + + // Dropdown item hover/pressed + click + if (open) { + const dropdownContainer = el.querySelector('div[style*="position:absolute"]'); + if (dropdownContainer) { + dropdownContainer.querySelectorAll('button').forEach(btn => { + const item = defaultItems.find(i => i.label === btn.textContent?.trim()); + if (!item || item.disabled) return; + btn.addEventListener('mouseenter', () => { + btn.style.background = tokens.surfaceAlt; + }); + btn.addEventListener('mouseleave', () => { + btn.style.background = 'transparent'; + }); + btn.addEventListener('mousedown', () => { + btn.style.background = pressedBg; + }); + btn.addEventListener('mouseup', () => { + btn.style.background = tokens.surfaceAlt; + }); + btn.addEventListener('click', () => { + currentLabel = item.label; + open = false; + update(); + }); + }); + } + } + if (open) { + outsideClickHandler = e => { + if (!wrapper.contains(e.target)) { + open = false; + update(); + } + }; + // Use capture so it fires before the chevron's own click handler + document.addEventListener('click', outsideClickHandler, true); + } + const chevronBtn = el.querySelector('button[aria-label="Open menu"]'); + if (chevronBtn) { + const chevronRestBg = open ? pressedBg : tokens.bg; + chevronBtn.addEventListener('click', () => { + open = !open; + update(); + }); + chevronBtn.addEventListener('mouseenter', () => { + chevronBtn.style.background = tokens.surfaceAlt; + }); + // Restore to the actual rest background (not '' which leaves it transparent) + chevronBtn.addEventListener('mouseleave', () => { + chevronBtn.style.background = chevronRestBg; + }); + chevronBtn.addEventListener('mousedown', () => { + chevronBtn.style.background = pressedBg; + }); + chevronBtn.addEventListener('mouseup', () => { + chevronBtn.style.background = tokens.surfaceAlt; + }); + } + }; + update(); + wrapper.appendChild(el); + return wrapper; + } +}`,...d.parameters?.docs?.source}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const wrapper = document.createElement('div'); + wrapper.style.paddingBottom = '120px'; + wrapper.innerHTML = SplitButton({ + label: args.label, + type: 'dropDown', + state: 'default', + isOpen: true, + items: defaultItems, + theme + }); + return wrapper; + }, + args: { + isOpen: true + }, + parameters: { + docs: { + description: { + story: 'Dropdown in the open state. Switch the toolbar theme to preview across themes.' + } + } + } +}`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return SplitButton({ + label: args.label, + type: 'dropDown', + state: 'disabled', + isOpen: false, + items: defaultItems, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Disabled dropdown split button.' + } + } + } +}`,...p.parameters?.docs?.source}}},m=[`Default`,`Open`,`Disabled`]}))();export{d as Default,p as Disabled,f as Open,m as __namedExportsOrder,u as default}; \ No newline at end of file diff --git a/storybook/static/assets/SplitButtonsIconLeft.stories-Dr4wDcvI.js b/storybook/static/assets/SplitButtonsIconLeft.stories-Dr4wDcvI.js new file mode 100644 index 0000000000..154edebc91 --- /dev/null +++ b/storybook/static/assets/SplitButtonsIconLeft.stories-Dr4wDcvI.js @@ -0,0 +1,114 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r}from"./theme-utils-B-KYefhh.js";import{n as i,t as a}from"./SplitButton-Bq4l2hJH.js";var o,s,c,l,u,d,f;e((()=>{i(),r(),o=n,s={title:`Components/Buttons/Split Buttons/Icon Left`,tags:[`autodocs`],args:{label:`Button`,state:`default`,type:`iconLeft`,interactive:!0,themeMode:`Auto`},argTypes:{label:{control:`text`,description:`Visible split-button label`},interactive:{control:`boolean`,description:`Allow hover and press feedback directly in the canvas`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...o],description:`Auto = current Storybook toolbar theme`},type:{table:{disable:!0}},state:{table:{disable:!0}},theme:{table:{disable:!0}}},parameters:{docs:{description:{component:`Split button with a leading icon section, used when the action needs a stronger visual cue.`}}}},c={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=document.createElement(`div`);i.style.display=`contents`;let o=!1,s=!1,c=()=>{let t=s?`pressed`:o?`hover`:`default`;i.innerHTML=a({label:e.label,type:`iconLeft`,state:t,theme:r})};return i.addEventListener(`mouseenter`,()=>{o=!0,c()}),i.addEventListener(`mouseleave`,()=>{o=!1,s=!1,c()}),i.addEventListener(`mousedown`,()=>{s=!0,c()}),i.addEventListener(`mouseup`,()=>{s=!1,c()}),c(),i}},l={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=document.createElement(`div`);i.style.display=`contents`;let o=!1,s=()=>{i.innerHTML=a({label:e.label,type:`iconLeft`,state:o?`hover`:`default`,theme:r})};return i.addEventListener(`mouseenter`,()=>{o=!0,s()}),i.addEventListener(`mouseleave`,()=>{o=!1,s()}),s(),i},parameters:{docs:{description:{story:`Interactive hover demo for the icon-left split button. Move the pointer over the control in the canvas.`}}}},u={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=document.createElement(`div`);i.style.display=`contents`;let o=!1,s=()=>{i.innerHTML=a({label:e.label,type:`iconLeft`,state:o?`pressed`:`default`,theme:r})};return i.addEventListener(`click`,()=>{o=!o,s()}),s(),i},parameters:{docs:{description:{story:`Pressed-state demo toggled by clicking the control.`}}}},d={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return a({label:e.label,type:`iconLeft`,state:`disabled`,theme:r})},parameters:{docs:{description:{story:`Disabled icon-left split button.`}}}},c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const el = document.createElement('div'); + el.style.display = 'contents'; + let hovered = false; + let pressed = false; + const update = () => { + const state = pressed ? 'pressed' : hovered ? 'hover' : 'default'; + el.innerHTML = SplitButton({ + label: args.label, + type: 'iconLeft', + state, + theme + }); + }; + el.addEventListener('mouseenter', () => { + hovered = true; + update(); + }); + el.addEventListener('mouseleave', () => { + hovered = false; + pressed = false; + update(); + }); + el.addEventListener('mousedown', () => { + pressed = true; + update(); + }); + el.addEventListener('mouseup', () => { + pressed = false; + update(); + }); + update(); + return el; + } +}`,...c.parameters?.docs?.source}}},l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const el = document.createElement('div'); + el.style.display = 'contents'; + let hovered = false; + const update = () => { + el.innerHTML = SplitButton({ + label: args.label, + type: 'iconLeft', + state: hovered ? 'hover' : 'default', + theme + }); + }; + el.addEventListener('mouseenter', () => { + hovered = true; + update(); + }); + el.addEventListener('mouseleave', () => { + hovered = false; + update(); + }); + update(); + return el; + }, + parameters: { + docs: { + description: { + story: 'Interactive hover demo for the icon-left split button. Move the pointer over the control in the canvas.' + } + } + } +}`,...l.parameters?.docs?.source}}},u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const el = document.createElement('div'); + el.style.display = 'contents'; + let toggled = false; + const update = () => { + el.innerHTML = SplitButton({ + label: args.label, + type: 'iconLeft', + state: toggled ? 'pressed' : 'default', + theme + }); + }; + el.addEventListener('click', () => { + toggled = !toggled; + update(); + }); + update(); + return el; + }, + parameters: { + docs: { + description: { + story: 'Pressed-state demo toggled by clicking the control.' + } + } + } +}`,...u.parameters?.docs?.source}}},d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return SplitButton({ + label: args.label, + type: 'iconLeft', + state: 'disabled', + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Disabled icon-left split button.' + } + } + } +}`,...d.parameters?.docs?.source}}},f=[`Default`,`Hovered`,`Pressed`,`Disabled`]}))();export{c as Default,d as Disabled,l as Hovered,u as Pressed,f as __namedExportsOrder,s as default}; \ No newline at end of file diff --git a/storybook/static/assets/SplitButtonsTabs.stories-CXQRjRm_.js b/storybook/static/assets/SplitButtonsTabs.stories-CXQRjRm_.js new file mode 100644 index 0000000000..8b4468764d --- /dev/null +++ b/storybook/static/assets/SplitButtonsTabs.stories-CXQRjRm_.js @@ -0,0 +1,114 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r}from"./theme-utils-B-KYefhh.js";import{n as i,t as a}from"./SplitButton-Bq4l2hJH.js";var o,s,c,l,u,d,f;e((()=>{i(),r(),o=n,s={title:`Components/Buttons/Split Buttons/Tabs`,tags:[`autodocs`],args:{label:`Label`,state:`default`,type:`tabs`,interactive:!0,themeMode:`Auto`},argTypes:{label:{control:`text`,description:`Visible tab-style label`},interactive:{control:`boolean`,description:`Allow hover and press feedback directly in the canvas`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...o],description:`Auto = current Storybook toolbar theme`},type:{table:{disable:!0}},state:{table:{disable:!0}},theme:{table:{disable:!0}}},parameters:{docs:{description:{component:`Split-button tab style used for compact segmented or tab-like actions.`}}}},c={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=document.createElement(`div`);i.style.display=`contents`;let o=!1,s=!1,c=()=>{let t=s?`pressed`:o?`hover`:`default`;i.innerHTML=a({label:e.label,type:`tabs`,state:t,theme:r})};return i.addEventListener(`mouseenter`,()=>{o=!0,c()}),i.addEventListener(`mouseleave`,()=>{o=!1,s=!1,c()}),i.addEventListener(`mousedown`,()=>{s=!0,c()}),i.addEventListener(`mouseup`,()=>{s=!1,c()}),c(),i}},l={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=document.createElement(`div`);i.style.display=`contents`;let o=!1,s=()=>{i.innerHTML=a({label:e.label,type:`tabs`,state:o?`hover`:`default`,theme:r})};return i.addEventListener(`mouseenter`,()=>{o=!0,s()}),i.addEventListener(`mouseleave`,()=>{o=!1,s()}),s(),i},parameters:{docs:{description:{story:`Interactive hover demo for the tab-style split button. Move the pointer over the control in the canvas.`}}}},u={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=document.createElement(`div`);i.style.display=`contents`;let o=!1,s=()=>{i.innerHTML=a({label:e.label,type:`tabs`,state:o?`pressed`:`default`,theme:r})};return i.addEventListener(`click`,()=>{o=!o,s()}),s(),i},parameters:{docs:{description:{story:`Pressed-state demo toggled by clicking the control.`}}}},d={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return a({label:e.label,type:`tabs`,state:`disabled`,theme:r})},parameters:{docs:{description:{story:`Disabled tab-style split button.`}}}},c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const el = document.createElement('div'); + el.style.display = 'contents'; + let hovered = false; + let pressed = false; + const update = () => { + const state = pressed ? 'pressed' : hovered ? 'hover' : 'default'; + el.innerHTML = SplitButton({ + label: args.label, + type: 'tabs', + state, + theme + }); + }; + el.addEventListener('mouseenter', () => { + hovered = true; + update(); + }); + el.addEventListener('mouseleave', () => { + hovered = false; + pressed = false; + update(); + }); + el.addEventListener('mousedown', () => { + pressed = true; + update(); + }); + el.addEventListener('mouseup', () => { + pressed = false; + update(); + }); + update(); + return el; + } +}`,...c.parameters?.docs?.source}}},l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const el = document.createElement('div'); + el.style.display = 'contents'; + let hovered = false; + const update = () => { + el.innerHTML = SplitButton({ + label: args.label, + type: 'tabs', + state: hovered ? 'hover' : 'default', + theme + }); + }; + el.addEventListener('mouseenter', () => { + hovered = true; + update(); + }); + el.addEventListener('mouseleave', () => { + hovered = false; + update(); + }); + update(); + return el; + }, + parameters: { + docs: { + description: { + story: 'Interactive hover demo for the tab-style split button. Move the pointer over the control in the canvas.' + } + } + } +}`,...l.parameters?.docs?.source}}},u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const el = document.createElement('div'); + el.style.display = 'contents'; + let toggled = false; + const update = () => { + el.innerHTML = SplitButton({ + label: args.label, + type: 'tabs', + state: toggled ? 'pressed' : 'default', + theme + }); + }; + el.addEventListener('click', () => { + toggled = !toggled; + update(); + }); + update(); + return el; + }, + parameters: { + docs: { + description: { + story: 'Pressed-state demo toggled by clicking the control.' + } + } + } +}`,...u.parameters?.docs?.source}}},d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return SplitButton({ + label: args.label, + type: 'tabs', + state: 'disabled', + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Disabled tab-style split button.' + } + } + } +}`,...d.parameters?.docs?.source}}},f=[`Default`,`Hovered`,`Pressed`,`Disabled`]}))();export{c as Default,d as Disabled,l as Hovered,u as Pressed,f as __namedExportsOrder,s as default}; \ No newline at end of file diff --git a/storybook/static/assets/Switches.stories-BfGUao-L.js b/storybook/static/assets/Switches.stories-BfGUao-L.js new file mode 100644 index 0000000000..183df00acb --- /dev/null +++ b/storybook/static/assets/Switches.stories-BfGUao-L.js @@ -0,0 +1,49 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r,o as i}from"./theme-utils-B-KYefhh.js";var a,o=e((()=>{a={Light:{default:{off:{track:`#C0C0C0`,thumb:`#FFFFFF`},on:{track:`rgba(0, 0, 0, 0.80)`,thumb:`#FFFFFF`}},hover:{off:{track:`#C0C0C0`,thumb:`#FFFFFF`},on:{track:`rgba(0, 0, 0, 0.80)`,thumb:`#FFFFFF`}},disabled:{off:{track:`#EFEFEF`,thumb:`#FFFFFF`},on:{track:`rgba(0, 0, 0, 0.50)`,thumb:`#FFFFFF`}}},"Light Classic":{default:{off:{track:`#CFCFCF`,thumb:`#FFFFFF`},on:{track:`#444444`,thumb:`#FFFFFF`}},hover:{off:{track:`#CFCFCF`,thumb:`#FFFFFF`},on:{track:`#444444`,thumb:`#FFFFFF`}},disabled:{off:{track:`#F1F1F1`,thumb:`#FFFFFF`},on:{track:`#A5A5A5`,thumb:`#FFFFFF`}}},Dark:{default:{off:{track:`#666666`,thumb:`#333333`},on:{track:`rgba(255, 255, 255, 0.80)`,thumb:`#333333`}},hover:{off:{track:`#666666`,thumb:`#333333`},on:{track:`rgba(255, 255, 255, 0.80)`,thumb:`#333333`}},disabled:{off:{track:`#505050`,thumb:`#333333`},on:{track:`rgba(255, 255, 255, 0.50)`,thumb:`#333333`}}},"Dark Contrast":{default:{off:{track:`#696969`,thumb:`#1E1E1E`},on:{track:`#E8E8E8`,thumb:`#1E1E1E`}},hover:{off:{track:`#696969`,thumb:`#1E1E1E`},on:{track:`#E8E8E8`,thumb:`#1E1E1E`}},disabled:{off:{track:`#2A2A2A`,thumb:`#1E1E1E`},on:{track:`#888888`,thumb:`#1E1E1E`}}},"Modern Light":{default:{off:{track:`#FFFFFF`,trackBorder:`#7F7F7F`,thumb:`#7F7F7F`},on:{track:`#4473CA`,thumb:`#FFFFFF`}},hover:{off:{track:`#FFFFFF`,trackBorder:`#7F7F7F`,thumb:`#7F7F7F`},on:{track:`#4473CA`,thumb:`#FFFFFF`}},disabled:{off:{track:`#FFFFFF`,trackBorder:`#7F7F7F`,thumb:`#7F7F7F`,opacity:.4},on:{track:`#4473CA`,thumb:`#FFFFFF`,opacity:.4}}},"Modern Dark":{default:{off:{track:`#404040`,trackBorder:`#969696`,thumb:`#969696`},on:{track:`#4A7BE0`,thumb:`#404040`}},hover:{off:{track:`#404040`,trackBorder:`#969696`,thumb:`#969696`},on:{track:`#4A7BE0`,thumb:`#404040`}},disabled:{off:{track:`#404040`,trackBorder:`#969696`,thumb:`#969696`,opacity:.4},on:{track:`#4A7BE0`,thumb:`#404040`,opacity:.4}}}}}));function s({checked:e=!1,state:t=`default`,theme:n=`Light`}={}){let r=i(n),o=t===`disabled`,s=a[r]?.[t]??a.Light?.default,c=e?s.on:s.off,l=e?`flex-end`:`flex-start`,u=c.opacity??1;return``}var c=e((()=>{o(),r()}));function l({checked:e,state:t,interactive:n,theme:r}){let i=t===`disabled`;if(!n||i){let n=document.createElement(`div`);return n.style.display=`contents`,n.innerHTML=s({checked:e,state:i?`disabled`:t,theme:r}),n}let a=document.createElement(`div`);a.style.display=`contents`;let o=!!e,c=!1,l=()=>{a.innerHTML=s({checked:o,state:c?`hover`:`default`,theme:r})};return a.addEventListener(`mouseenter`,()=>{c=!0,l()}),a.addEventListener(`mouseleave`,()=>{c=!1,l()}),a.addEventListener(`click`,()=>{o=!o,l()}),l(),a}var u,d,f,p,m,h;e((()=>{c(),r(),u=n,d={title:`Components/Form/Switches`,tags:[`autodocs`],args:{checked:!1,state:`default`,interactive:!0,themeMode:`Auto`},argTypes:{checked:{control:`boolean`,description:`Current on/off value`},state:{control:`select`,options:[`default`,`hover`,`disabled`],description:`Rendered visual state`},interactive:{control:`boolean`,description:`Allow hover and toggle behavior directly in the canvas`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...u],description:`Auto = current Storybook toolbar theme`,table:{defaultValue:{summary:`Auto`}}},theme:{table:{disable:!0}},onChange:{table:{disable:!0}}},parameters:{docs:{description:{component:`Switch control with on/off values and state variants.`}}}},f={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return l({...e,theme:r})}},p={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return l({...e,state:`default`,interactive:!0,theme:r})},parameters:{docs:{description:{story:`Interactive hover demo for the switch. Move the pointer over the control in the canvas.`}}}},m={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=document.createElement(`div`);return i.style.display=`contents`,i.innerHTML=s({checked:!!e.checked,state:`disabled`,theme:r}),i},parameters:{docs:{description:{story:`Fixed disabled reference state for the switch.`}}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeSwitch({ + ...args, + theme + }); + } +}`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeSwitch({ + ...args, + state: 'default', + interactive: true, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Interactive hover demo for the switch. Move the pointer over the control in the canvas.' + } + } + } +}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const el = document.createElement('div'); + el.style.display = 'contents'; + el.innerHTML = Switch({ + checked: Boolean(args.checked), + state: 'disabled', + theme + }); + return el; + }, + parameters: { + docs: { + description: { + story: 'Fixed disabled reference state for the switch.' + } + } + } +}`,...m.parameters?.docs?.source}}},h=[`Default`,`HoveredSwitch`,`DisabledSwitches`]}))();export{f as Default,m as DisabledSwitches,p as HoveredSwitch,h as __namedExportsOrder,d as default}; \ No newline at end of file diff --git a/storybook/static/assets/Tabs.stories-suHzVPGv.js b/storybook/static/assets/Tabs.stories-suHzVPGv.js new file mode 100644 index 0000000000..4e3bcb9378 --- /dev/null +++ b/storybook/static/assets/Tabs.stories-suHzVPGv.js @@ -0,0 +1,68 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r,o as i}from"./theme-utils-B-KYefhh.js";var a,o=e((()=>{a={Light:{border:`#C0C0C0`,text:`rgba(0, 0, 0, 0.8)`,unselectedBg:`#EFEFEF`,selectedBg:`#F7F7F7`,hoverBg:`#F9F9F9`,typography:{fontSize:11,fontWeight:400,lineHeight:16,letterSpacing:.22}},"Light Classic":{border:`#CFCFCF`,text:`#444444`,unselectedBg:`#F1F1F1`,selectedBg:`#F1F1F1`,hoverBg:`#D8DADC`,typography:{fontSize:11,fontWeight:400,lineHeight:16,letterSpacing:.22}},Dark:{border:`#666666`,text:`rgba(255, 255, 255, 0.8)`,unselectedBg:`#505050`,selectedBg:`#404040`,hoverBg:`#555555`,typography:{fontSize:11,fontWeight:400,lineHeight:16,letterSpacing:.22}},"Dark Contrast":{border:`#696969`,text:`#E8E8E8`,unselectedBg:`#2A2A2A`,selectedBg:`#2A2A2A`,hoverBg:`#424242`,typography:{fontSize:11,fontWeight:400,lineHeight:16,letterSpacing:.22}},"Modern Light":{border:`#EAEAEA`,text:`#383838`,unselectedBg:`#F3F3F3`,selectedBg:`#FFFFFF`,hoverBg:`#F9F9F9`,typography:{fontSize:12,fontWeight:500,lineHeight:20,letterSpacing:.24},indicatorColor:`#4473CA`,indicatorHeight:3},"Modern Dark":{border:`#585858`,text:`#F3F3F3`,unselectedBg:`#222222`,selectedBg:`#404040`,hoverBg:`#585858`,typography:{fontSize:12,fontWeight:500,lineHeight:20,letterSpacing:.24},indicatorColor:`#4A7BE0`,indicatorHeight:3}}}));function s({items:e=[{id:`paragraph`,label:`Paragraph`},{id:`table`,label:`Table`},{id:`style`,label:`Style`}],activeId:t=`paragraph`,hoveredId:n,withIcon:r=!1,theme:o,scaled:s=!1}={}){let l=i(o),u=a[l]??a.Light,d=l.startsWith(`Modern`),f=e.map(e=>{let i=e.id===t,a=e.id===n?u.hoverBg:i?u.selectedBg:u.unselectedBg,o=i?`none`:`1px solid ${u.border}`,l=d&&i?37:40,f=d&&i?``:``,p=r?c(u.text):``;return``}).join(``);return`
${f}
`}var c,l=e((()=>{o(),r(),c=e=>``}));function u({items:e,activeId:t,withIcon:n,scaled:r,theme:i}){let o=document.createElement(`div`);o.style.display=`contents`;let c=t??`paragraph`,l=a[i]??a.Light,u=()=>{o.innerHTML=s({items:e,activeId:c,withIcon:n,scaled:r,theme:i}),o.querySelectorAll(`button[role="tab"]`).forEach((t,n)=>{let r=e[n];if(!r)return;let i=t.style.background;t.addEventListener(`mouseenter`,()=>{t.style.background=l.hoverBg}),t.addEventListener(`mouseleave`,()=>{t.style.background=i}),t.addEventListener(`click`,()=>{c=r.id,u()})})};return u(),o}var d,f,p,m,h,g,_,v;e((()=>{l(),r(),o(),d=n,f=[{id:`paragraph`,label:`Paragraph`},{id:`table`,label:`Table`},{id:`style`,label:`Style`}],p={title:`Components/Data Display/Tabs`,tags:[`autodocs`],args:{items:f,activeId:`paragraph`,state:`default`,hoveredId:`table`,interactive:!0,withIcon:!1,scaled:!1,themeMode:`Auto`},argTypes:{activeId:{control:`text`,description:`Currently selected tab id`},state:{control:`select`,options:[`default`,`hover`],description:`Rendered visual state used for reference-only tab styling`},hoveredId:{control:`text`,description:`Tab id used when the hover state is forced for reference`},interactive:{control:`boolean`,description:`Allow hover and selection changes in the canvas`},withIcon:{control:`boolean`,description:`Show leading icons in the tab labels`},scaled:{control:`boolean`,description:`Stretch tabs to fill the full container width`},items:{control:`object`,description:`Tab definitions with ids and labels`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...d],description:`Auto = current Storybook toolbar theme`,table:{defaultValue:{summary:`Auto`}}},theme:{table:{disable:!0}},onChange:{table:{disable:!0}}},parameters:{docs:{description:{component:`Horizontal tabs for compact mode switching inside panels and dialogs, with optional icons and live hover behavior.`}}}},m={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=e.items??f;return u({...e,items:i,theme:r})}},h={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=e.items??f;return u({...e,items:i,withIcon:!0,theme:r})},parameters:{docs:{description:{story:`Tabs with leading icons for richer navigation labels.`}}}},g={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=e.items??f;return u({...e,items:i,activeId:`paragraph`,theme:r})},parameters:{docs:{description:{story:`Interactive hover demo where a non-selected tab can be highlighted. Move the pointer over another tab in the canvas.`}}}},_={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme),i=e.items??f;return u({...e,items:i,activeId:`paragraph`,theme:r})},parameters:{docs:{description:{story:`Interactive hover demo when the selected tab is also under the pointer. Move the pointer over the active tab in the canvas.`}}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const items = args.items ?? defaultItems; + return makeInteractiveTabs({ + ...args, + items, + theme + }); + } +}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const items = args.items ?? defaultItems; + return makeInteractiveTabs({ + ...args, + items, + withIcon: true, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Tabs with leading icons for richer navigation labels.' + } + } + } +}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const items = args.items ?? defaultItems; + return makeInteractiveTabs({ + ...args, + items, + activeId: 'paragraph', + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Interactive hover demo where a non-selected tab can be highlighted. Move the pointer over another tab in the canvas.' + } + } + } +}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + const items = args.items ?? defaultItems; + return makeInteractiveTabs({ + ...args, + items, + activeId: 'paragraph', + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Interactive hover demo when the selected tab is also under the pointer. Move the pointer over the active tab in the canvas.' + } + } + } +}`,..._.parameters?.docs?.source}}},v=[`Default`,`IconTabs`,`HoveredTabs`,`HoveredSelected`]}))();export{m as Default,_ as HoveredSelected,g as HoveredTabs,h as IconTabs,v as __namedExportsOrder,p as default}; \ No newline at end of file diff --git a/storybook/static/assets/TextArea.stories-HtLcKLcL.js b/storybook/static/assets/TextArea.stories-HtLcKLcL.js new file mode 100644 index 0000000000..650cd3505b --- /dev/null +++ b/storybook/static/assets/TextArea.stories-HtLcKLcL.js @@ -0,0 +1,111 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r,o as i}from"./theme-utils-B-KYefhh.js";var a,o=e((()=>{a={Light:{background:`#FFFFFF`,border:`#C0C0C0`,hoverBorder:`#848484`,disabledBackground:`#EFEFEF`,disabledOpacity:.5,textColor:`rgba(0, 0, 0, 0.8)`,disabledTextColor:`rgba(0, 0, 0, 0.8)`,textTypography:{fontSize:11,lineHeight:14,letterSpacing:.22},labelColor:`rgba(0, 0, 0, 0.8)`,labelWeight:700,labelTypography:{fontSize:11,lineHeight:16,letterSpacing:.22},captionColor:`rgba(0, 0, 0, 0.4)`,captionTypography:{fontSize:10,lineHeight:12,letterSpacing:.2},copyIconColor:`rgba(0, 0, 0, 0.8)`,copyIconStyle:`classic`,scrollTrack:`transparent`,scrollThumb:`#E0E0E0`,radius:2},"Light Classic":{background:`#FFFFFF`,border:`#CFCFCF`,hoverBorder:`#848484`,disabledBackground:`#F1F1F1`,disabledOpacity:.5,textColor:`#444444`,disabledTextColor:`#444444`,textTypography:{fontSize:11,lineHeight:14,letterSpacing:.22},labelColor:`#444444`,labelWeight:700,labelTypography:{fontSize:11,lineHeight:16,letterSpacing:.22},captionColor:`#A5A5A5`,captionTypography:{fontSize:10,lineHeight:12,letterSpacing:.2},copyIconColor:`#444444`,copyIconStyle:`classic`,scrollTrack:`transparent`,scrollThumb:`#CFCFCF`,radius:2},Dark:{background:`#333333`,border:`#666666`,hoverBorder:`#CCCCCC`,disabledBackground:`#505050`,disabledOpacity:.5,textColor:`rgba(255, 255, 255, 0.8)`,disabledTextColor:`rgba(255, 255, 255, 0.8)`,textTypography:{fontSize:11,lineHeight:14,letterSpacing:.22},labelColor:`rgba(255, 255, 255, 0.8)`,labelWeight:700,labelTypography:{fontSize:11,lineHeight:16,letterSpacing:.22},captionColor:`rgba(255, 255, 255, 0.4)`,captionTypography:{fontSize:10,lineHeight:12,letterSpacing:.2},copyIconColor:`rgba(255, 255, 255, 0.8)`,copyIconStyle:`classic`,scrollTrack:`transparent`,scrollThumb:`#616161`,radius:2},"Dark Contrast":{background:`#1E1E1E`,border:`#696969`,hoverBorder:`#B8B8B8`,disabledBackground:`#2A2A2A`,disabledOpacity:.5,textColor:`#E8E8E8`,disabledTextColor:`#E8E8E8`,textTypography:{fontSize:11,lineHeight:14,letterSpacing:.22},labelColor:`#E8E8E8`,labelWeight:700,labelTypography:{fontSize:11,lineHeight:16,letterSpacing:.22},captionColor:`#B8B8B8`,captionTypography:{fontSize:10,lineHeight:12,letterSpacing:.2},copyIconColor:`#E8E8E8`,copyIconStyle:`classic`,scrollTrack:`transparent`,scrollThumb:`#616161`,radius:2},"Modern Light":{background:`#FFFFFF`,border:`#E1E1E1`,hoverBorder:`#4473CA`,disabledBackground:`#F3F3F3`,disabledOpacity:1,textColor:`#383838`,disabledTextColor:`rgba(0, 0, 0, 0.2)`,textTypography:{fontSize:12,lineHeight:16,letterSpacing:.24},labelColor:`#383838`,labelWeight:400,labelTypography:{fontSize:12,lineHeight:16,letterSpacing:.24},captionColor:`rgba(0, 0, 0, 0.2)`,captionTypography:{fontSize:10,lineHeight:12,letterSpacing:.2},copyIconColor:`#383838`,copyIconStyle:`modern`,scrollTrack:`transparent`,scrollThumb:`#E1E1E1`,radius:2},"Modern Dark":{background:`#404040`,border:`#686868`,hoverBorder:`#4A7BE0`,disabledBackground:`#2A2A2A`,disabledOpacity:1,textColor:`#F3F3F3`,disabledTextColor:`rgba(243, 243, 243, 0.4)`,textTypography:{fontSize:12,lineHeight:16,letterSpacing:.24},labelColor:`#F3F3F3`,labelWeight:400,labelTypography:{fontSize:12,lineHeight:16,letterSpacing:.24},captionColor:`rgba(243, 243, 243, 0.4)`,captionTypography:{fontSize:10,lineHeight:12,letterSpacing:.2},copyIconColor:`#EAEAEA`,copyIconStyle:`modern`,scrollTrack:`transparent`,scrollThumb:`#686868`,radius:2}}}));function s({label:e=`Title`,caption:t=`Caption`,value:n=c,state:r=`default`,width:o=236,height:s=188,showLabel:u=!0,showCaption:d=!0,showCopyButton:f=!0,theme:p=`Light`}={}){let m=a[i(p)]??a.Light,h=r===`disabled`,g=r===`scroll`,_=r===`no-scroll`,v=m.copyIconStyle===`modern`?24:20,y=u||f?`
+ ${u?``:``} + ${f?``:``} +
`:``,b=h||_?`hidden`:g?`scroll`:`auto`,x=g?`pre`:`pre-wrap`,S=_||h?`0`:`3px`,C=_||h?`0`:`4px`,w=[`width:100%`,`height:100%`,`border:none`,`outline:none`,`resize:none`,`background:transparent`,`color:${h?m.disabledTextColor:m.textColor}`,`font-family:Arial,Helvetica,sans-serif`,`font-size:${m.textTypography.fontSize}px`,`line-height:${m.textTypography.lineHeight}px`,`letter-spacing:${m.textTypography.letterSpacing}px`,`padding-top:0`,`padding-left:0`,`padding-right:${S}`,`padding-bottom:${C}`,`margin:0`,`overflow:${b}`,`white-space:${x}`,`word-break:break-word`,`box-sizing:border-box`,`scrollbar-color:${m.scrollThumb} ${m.scrollTrack}`,`scrollbar-width:thin`,h?`pointer-events:none`:``].filter(Boolean).join(`;`),T=d?`${t}`:``;return`
+ ${y} +
+ +
+ ${T} +
`}var c,l,u=e((()=>{o(),r(),c=`The 10 most undervalued stocks from our Best Companies to Own list as of Feb. 28, 2023, were: +Comcast CMCSA — a leading global media and technology company with businesses in cable, entertainment, and theme parks. +Taiwan Semiconductor Manufacturing TSM — the world's largest dedicated semiconductor foundry serving major chip designers. +Roche Holding RHHBY — a global pioneer in pharmaceuticals and diagnostics focused on oncology and rare diseases. +Walt Disney DIS — a diversified entertainment company spanning film, television, streaming, and theme park experiences. +Equifax EFX — one of the three major credit reporting agencies providing data analytics and risk solutions worldwide. +TransUnion TRU — a global information and insights company helping businesses manage risk and consumers manage credit. +International Flavors & Fragrances IFF — a leading creator of flavors, fragrances, and specialty ingredients. +Zimmer Biomet ZBH — a global medical device company specializing in musculoskeletal healthcare and reconstructive products. +Kenvue KVUE — a consumer health company spun off from Johnson & Johnson managing iconic personal care brands. +Anheuser-Busch InBev BUD — the world's largest brewer with a portfolio of over 500 beer brands sold globally. +Booking Holdings BKNG — the world's leading provider of online travel and related services across 220+ countries. +Stellantis STLA — a multinational automotive manufacturer formed from the merger of PSA Group and Fiat Chrysler. +Medtronic MDT — a global leader in medical devices, therapies, and services for chronic disease management.`,l=e=>``}));function d(e,t){let n=document.createElement(`div`);n.style.display=`contents`,n.innerHTML=e;let r=n.querySelector(`button[aria-label="Copy text"]`);if(!r||r.disabled)return n;let i=t.startsWith(`Modern`);r.style.borderRadius=i?`4px`:`2px`;let a=p[t]??`#E0E0E0`,o=m[t]??`#CBCBCB`;return r.addEventListener(`mouseenter`,()=>{r.style.background=a}),r.addEventListener(`mouseleave`,()=>{r.style.background=`transparent`}),r.addEventListener(`mousedown`,()=>{r.style.background=o}),r.addEventListener(`mouseup`,()=>{r.style.background=a}),n}var f,p,m,h,g,_,v,y,b,x,S;e((()=>{u(),r(),f=n,p={Light:`#E0E0E0`,"Light Classic":`#D8DADC`,Dark:`#555555`,"Dark Contrast":`#424242`,"Modern Light":`#F9F9F9`,"Modern Dark":`#585858`},m={Light:`#CBCBCB`,"Light Classic":`#7D858C`,Dark:`#606060`,"Dark Contrast":`#666666`,"Modern Light":`#EAEAEA`,"Modern Dark":`#686868`},h={title:`Components/Form/Text Area`,tags:[`autodocs`],args:{label:`Title`,caption:`Caption`,state:`no-scroll`,width:236,height:188,showLabel:!0,showCaption:!0,showCopyButton:!0,themeMode:`Auto`},argTypes:{label:{control:`text`,description:`Label above the text area`},caption:{control:`text`,description:`Supporting text below the field`},value:{control:`text`,description:`Current controlled text value`},state:{control:`select`,options:[`default`,`disabled`,`scroll`,`no-scroll`],description:`Rendered visual state`},width:{control:`number`,description:`Outer component width`},height:{control:`number`,description:`Visible text area height`},showLabel:{control:`boolean`,description:`Show the label row`},showCaption:{control:`boolean`,description:`Show the caption below the field`},showCopyButton:{control:`boolean`,description:`Show the copy action button`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...f],description:`Auto = current Storybook toolbar theme`,table:{defaultValue:{summary:`Auto`}}},theme:{table:{disable:!0}},onChange:{table:{disable:!0}},onCopy:{table:{disable:!0}}},parameters:{docs:{description:{component:`Multi-line text field with optional copy action, caption, and themed scroll treatment for longer content.`}}}},g={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return d(s({...e,theme:r}),r)}},_={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return d(s({...e,state:`scroll`,theme:r}),r)},parameters:{docs:{description:{story:`Fixed scroll reference state for longer content.`}}}},v={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return d(s({...e,state:`no-scroll`,theme:r}),r)},parameters:{docs:{description:{story:`Fixed no-scroll reference state without visible scrollbar treatment.`}}}},y={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return s({...e,state:`disabled`,theme:r})},parameters:{docs:{description:{story:`Fixed disabled reference state that preserves layout without accepting input.`}}}},b={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return d(s({...e,showCaption:!1,theme:r}),r)},parameters:{docs:{description:{story:`Variant without supporting caption text.`}}}},x={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return s({...e,showCopyButton:!1,theme:r})},parameters:{docs:{description:{story:`Variant without the copy action button.`}}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveTextArea(TextArea({ + ...args, + theme + }), theme); + } +}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveTextArea(TextArea({ + ...args, + state: 'scroll', + theme + }), theme); + }, + parameters: { + docs: { + description: { + story: 'Fixed scroll reference state for longer content.' + } + } + } +}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveTextArea(TextArea({ + ...args, + state: 'no-scroll', + theme + }), theme); + }, + parameters: { + docs: { + description: { + story: 'Fixed no-scroll reference state without visible scrollbar treatment.' + } + } + } +}`,...v.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return TextArea({ + ...args, + state: 'disabled', + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Fixed disabled reference state that preserves layout without accepting input.' + } + } + } +}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return makeInteractiveTextArea(TextArea({ + ...args, + showCaption: false, + theme + }), theme); + }, + parameters: { + docs: { + description: { + story: 'Variant without supporting caption text.' + } + } + } +}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return TextArea({ + ...args, + showCopyButton: false, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Variant without the copy action button.' + } + } + } +}`,...x.parameters?.docs?.source}}},S=[`Default`,`ScrollArea`,`NoScrollArea`,`DisabledArea`,`NoCaption`,`NoCopyButton`]}))();export{g as Default,y as DisabledArea,b as NoCaption,x as NoCopyButton,v as NoScrollArea,_ as ScrollArea,S as __namedExportsOrder,h as default}; \ No newline at end of file diff --git a/storybook/static/assets/TextField.stories-CNWuOQ51.js b/storybook/static/assets/TextField.stories-CNWuOQ51.js new file mode 100644 index 0000000000..54243464bb --- /dev/null +++ b/storybook/static/assets/TextField.stories-CNWuOQ51.js @@ -0,0 +1,144 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r,o as i}from"./theme-utils-B-KYefhh.js";var a,o=e((()=>{a={Light:{radius:1,background:`#FFFFFF`,border:`#C0C0C0`,hoverBorder:`#848484`,focusBorder:`#848484`,errorBorder:`#F62211`,disabledBackground:`#EFEFEF`,disabledOpacity:.5,titleColor:`rgba(0, 0, 0, 0.80)`,titleWeight:700,captionColor:`rgba(0, 0, 0, 0.40)`,errorTextColor:`#F62211`,placeholderColor:`rgba(0, 0, 0, 0.40)`,valueColor:`rgba(0, 0, 0, 0.80)`,disabledTextColor:`rgba(0, 0, 0, 0.80)`,cursorColor:`rgba(0, 0, 0, 0.80)`,iconColor:`rgba(0, 0, 0, 0.80)`,hiddenDotColor:`rgba(0, 0, 0, 0.80)`,typography:{fontSize:11,lineHeight:16,letterSpacing:.22},captionTypography:{fontSize:10,lineHeight:12,letterSpacing:.2}},"Light Classic":{radius:1,background:`#FFFFFF`,border:`#CFCFCF`,hoverBorder:`#848484`,focusBorder:`#848484`,errorBorder:`#D9534F`,disabledBackground:`#F1F1F1`,disabledOpacity:.5,titleColor:`#444444`,titleWeight:700,captionColor:`#A5A5A5`,errorTextColor:`#D9534F`,placeholderColor:`#A5A5A5`,valueColor:`#444444`,disabledTextColor:`#444444`,cursorColor:`#444444`,iconColor:`#444444`,hiddenDotColor:`#444444`,typography:{fontSize:11,lineHeight:16,letterSpacing:.22},captionTypography:{fontSize:10,lineHeight:12,letterSpacing:.2}},Dark:{radius:1,background:`#333333`,border:`#666666`,hoverBorder:`#CCCCCC`,focusBorder:`#CCCCCC`,errorBorder:`#F62211`,disabledBackground:`#505050`,disabledOpacity:.5,titleColor:`rgba(255, 255, 255, 0.80)`,titleWeight:700,captionColor:`rgba(255, 255, 255, 0.40)`,errorTextColor:`#F62211`,placeholderColor:`rgba(255, 255, 255, 0.40)`,valueColor:`rgba(255, 255, 255, 0.80)`,disabledTextColor:`rgba(255, 255, 255, 0.80)`,cursorColor:`rgba(255, 255, 255, 0.80)`,iconColor:`rgba(255, 255, 255, 0.80)`,hiddenDotColor:`rgba(255, 255, 255, 0.80)`,typography:{fontSize:11,lineHeight:16,letterSpacing:.22},captionTypography:{fontSize:10,lineHeight:12,letterSpacing:.2}},"Dark Contrast":{radius:1,background:`#1E1E1E`,border:`#696969`,hoverBorder:`#B8B8B8`,focusBorder:`#B8B8B8`,errorBorder:`#F62211`,disabledBackground:`#2A2A2A`,disabledOpacity:.5,titleColor:`#E8E8E8`,titleWeight:700,captionColor:`rgba(232, 232, 232, 0.50)`,errorTextColor:`#F62211`,placeholderColor:`rgba(232, 232, 232, 0.55)`,valueColor:`#E8E8E8`,disabledTextColor:`#E8E8E8`,cursorColor:`#E8E8E8`,iconColor:`#E8E8E8`,hiddenDotColor:`#E8E8E8`,typography:{fontSize:11,lineHeight:16,letterSpacing:.22},captionTypography:{fontSize:10,lineHeight:12,letterSpacing:.2}},"Modern Light":{radius:4,background:`#FFFFFF`,border:`#E1E1E1`,hoverBorder:`#4473CA`,focusBorder:`#4473CA`,errorBorder:`rgba(242, 61, 61, 0.80)`,disabledBackground:`#F3F3F3`,disabledOpacity:1,titleColor:`#383838`,titleWeight:400,captionColor:`rgba(0, 0, 0, 0.20)`,errorTextColor:`rgba(242, 61, 61, 0.80)`,placeholderColor:`rgba(0, 0, 0, 0.20)`,valueColor:`#383838`,disabledTextColor:`rgba(0, 0, 0, 0.20)`,cursorColor:`#383838`,iconColor:`#383838`,hiddenDotColor:`#383838`,typography:{fontSize:12,lineHeight:16,letterSpacing:.24},captionTypography:{fontSize:10,lineHeight:12,letterSpacing:.2}},"Modern Dark":{radius:4,background:`#404040`,border:`#686868`,hoverBorder:`#4A7BE0`,focusBorder:`#4A7BE0`,errorBorder:`rgba(242, 61, 61, 0.80)`,disabledBackground:`#222222`,disabledOpacity:1,titleColor:`#F3F3F3`,titleWeight:400,captionColor:`rgba(243, 243, 243, 0.40)`,errorTextColor:`rgba(242, 61, 61, 0.80)`,placeholderColor:`rgba(243, 243, 243, 0.40)`,valueColor:`#F3F3F3`,disabledTextColor:`rgba(243, 243, 243, 0.40)`,cursorColor:`#F3F3F3`,iconColor:`#EAEAEA`,hiddenDotColor:`#F3F3F3`,typography:{fontSize:12,lineHeight:16,letterSpacing:.24},captionTypography:{fontSize:10,lineHeight:12,letterSpacing:.2}}}}));function s({placeholder:e=`Enter text`,value:t=``,label:n=``,caption:r=``,errorText:o=`Error text`,state:s=`default`,placeholderState:c=`default`,withIconRight:l=!1,theme:u=`Light`,width:d=165}={}){let f=a[i(u)]??a.Light,p=s===`disabled`,m=s===`error`,h=s===`hover`,g=s===`focused`||s===`typing`,_=m?f.errorBorder:h||g?f.hoverBorder??f.focusBorder:f.border,v=c!==`hidden`;g&&`${f.focusBorder??f.hoverBorder}`;let y=[`flex:1`,`min-width:0`,`border:none`,`outline:none`,`background:transparent`,`color:${p?f.disabledTextColor:f.valueColor}`,`font-size:${f.typography.fontSize}px`,`font-family:Arial,Helvetica,sans-serif`,`line-height:${f.typography.lineHeight}px`,`letter-spacing:${f.typography.letterSpacing}px`,`padding:0`,`height:20px`].join(`;`),b=[`height:24px`,`display:flex`,`align-items:center`,`gap:8px`,`padding:0 8px`,`border-radius:${f.radius}px`,`border:1px solid ${_}`,`background:${p?f.disabledBackground:f.background}`,`opacity:${p?f.disabledOpacity:1}`,`box-sizing:border-box`].join(`;`),x=n?``:``,S=m?o:r,C=S?`
${S}
`:``,w=l?`
+ + + +
`:``;return`
+ ${x} +
+ + ${w} +
+ ${C} +
`}var c=e((()=>{o(),r()}));function l(e,t){let n=document.createElement(`div`);n.style.display=`contents`;let r=!1,i=!1,a=e.value??``,o=!1,c=(l=!1)=>{o=!0;let u=e.state===`disabled`?`disabled`:e.isHovered||i?`hover`:r?`focused`:a?`filled`:`default`;n.innerHTML=s({...e,theme:t,state:u,value:a});let d=n.querySelector(`input`);o=!1,d&&(d.value=a,l&&setTimeout(()=>{d.focus()},0),d.addEventListener(`focus`,()=>{o||r||(r=!0,c(!0))}),d.addEventListener(`blur`,()=>{o||!r||(r=!1,c(!1))}),d.addEventListener(`input`,e=>{a=e.target.value}),d.addEventListener(`mouseenter`,()=>{o||i||r||(i=!0,c(!1))}),d.addEventListener(`mouseleave`,()=>{o||!i||(i=!1,c(!1))}))};return c(!1),n}var u,d,f,p,m,h,g,_,v,y;e((()=>{c(),r(),u=n,d={title:`Components/Form/Text Field`,tags:[`autodocs`],args:{label:`Title`,caption:`Caption`,errorText:`Error text`,placeholder:`Line input`,value:``,state:`default`,placeholderState:`default`,withIconRight:!1,interactive:!0,isHovered:!1,themeMode:`Auto`},argTypes:{label:{control:`text`,description:`Label above the field`},caption:{control:`text`,description:`Supporting text below the field`},errorText:{control:`text`,description:`Validation message for the error state`},placeholder:{control:`text`,description:`Placeholder text shown inside the field`},value:{control:`text`,description:`Current controlled input value`},state:{control:`select`,options:[`default`,`hover`,`focused`,`typing`,`filled`,`error`,`disabled`],description:`Rendered visual state of the field`},placeholderState:{control:`select`,options:[`default`,`hidden`],description:`Show the placeholder normally or hide it for a denser layout`},withIconRight:{control:`boolean`,description:`Show the trailing icon button`},interactive:{control:`boolean`,description:`Allow hover/focus behavior directly in the canvas`},isHovered:{control:`boolean`,description:`Force hover appearance for review`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...u],description:`Auto = current Storybook toolbar theme`,table:{defaultValue:{summary:`Auto`}}},theme:{table:{disable:!0}}},parameters:{docs:{description:{component:`Single-line input with label, caption, error messaging, optional trailing icon, and theme-aware control states.`}}}},f={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return e.interactive===!1?s({...e,theme:r}):l(e,r)}},p={args:{state:`hover`,isHovered:!0,interactive:!1},render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return s({...e,theme:r})},parameters:{docs:{description:{story:`Fixed hover reference state for the single-line field.`}}}},m={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return s({...e,label:`Focused field`,state:`focused`,interactive:!1,theme:r})},parameters:{docs:{description:{story:`Fixed focused reference state used when the field is ready for typing.`}}}},h={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return s({...e,label:`Field with error`,state:`error`,interactive:!1,theme:r})},parameters:{docs:{description:{story:`Fixed error reference state with validation messaging and error border.`}}}},g={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return s({...e,label:`Disabled field`,state:`disabled`,interactive:!1,theme:r})},parameters:{docs:{description:{story:`Fixed disabled reference state that preserves layout but removes interaction.`}}}},_={args:{withIconRight:!0},render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return s({...e,label:`Icon right field`,withIconRight:!0,theme:r})},parameters:{docs:{description:{story:`Field with a trailing icon action.`}}}},v={args:{placeholderState:`hidden`},render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return e.interactive===!1?s({...e,label:`Hidden placeholder`,placeholderState:`hidden`,theme:r}):l({...e,label:`Hidden placeholder`,placeholderState:`hidden`},r)},parameters:{docs:{description:{story:`Variant with hidden placeholder treatment for denser layouts.`}}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + if (args.interactive === false) { + return TextField({ + ...args, + theme + }); + } + return makeInteractiveTextField(args, theme); + } +}`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{ + args: { + state: 'hover', + isHovered: true, + interactive: false + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return TextField({ + ...args, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Fixed hover reference state for the single-line field.' + } + } + } +}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return TextField({ + ...args, + label: 'Focused field', + state: 'focused', + interactive: false, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Fixed focused reference state used when the field is ready for typing.' + } + } + } +}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return TextField({ + ...args, + label: 'Field with error', + state: 'error', + interactive: false, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Fixed error reference state with validation messaging and error border.' + } + } + } +}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return TextField({ + ...args, + label: 'Disabled field', + state: 'disabled', + interactive: false, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Fixed disabled reference state that preserves layout but removes interaction.' + } + } + } +}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{ + args: { + withIconRight: true + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return TextField({ + ...args, + label: 'Icon right field', + withIconRight: true, + theme + }); + }, + parameters: { + docs: { + description: { + story: 'Field with a trailing icon action.' + } + } + } +}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{ + args: { + placeholderState: 'hidden' + }, + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + if (args.interactive === false) { + return TextField({ + ...args, + label: 'Hidden placeholder', + placeholderState: 'hidden', + theme + }); + } + return makeInteractiveTextField({ + ...args, + label: 'Hidden placeholder', + placeholderState: 'hidden' + }, theme); + }, + parameters: { + docs: { + description: { + story: 'Variant with hidden placeholder treatment for denser layouts.' + } + } + } +}`,...v.parameters?.docs?.source}}},y=[`Default`,`HoveredField`,`FocusedField`,`ErrorField`,`DisabledField`,`IconRightField`,`HiddenPlaceholderField`]}))();export{f as Default,g as DisabledField,h as ErrorField,m as FocusedField,v as HiddenPlaceholderField,p as HoveredField,_ as IconRightField,y as __namedExportsOrder,d as default}; \ No newline at end of file diff --git a/storybook/static/assets/Tooltip.stories-CprkHbDd.js b/storybook/static/assets/Tooltip.stories-CprkHbDd.js new file mode 100644 index 0000000000..4fbe46fce8 --- /dev/null +++ b/storybook/static/assets/Tooltip.stories-CprkHbDd.js @@ -0,0 +1,9 @@ +import{n as e}from"./chunk-BneVvdWh.js";import{a as t,i as n,n as r,t as i}from"./theme-utils-B-KYefhh.js";function a({text:e=`Texts`,theme:t}={}){let n=i(t),r=n.isModern,a=n.isDark,o=r?12:10,s=r?`16px`:`12px`,c=r?.24:.2,l=a?`0px 4px 10px rgba(0, 0, 0, 0.25)`:`0px 4px 10px rgba(0, 0, 0, 0.10)`;return`
${e}
`}var o=e((()=>{r()})),s,c,l,u;e((()=>{o(),r(),s=n,c={title:`Components/Feedback/Tooltip`,tags:[`autodocs`],args:{text:`Texts`,themeMode:`Auto`},argTypes:{text:{control:`text`,description:`Tooltip text`},themeMode:{name:`theme`,control:`select`,options:[`Auto`,...s],description:`Auto = current Storybook toolbar theme`},theme:{table:{disable:!0}}},parameters:{docs:{description:{component:`Compact tooltip for short helper text near controls and icon buttons. Use it for hints, not for long explanatory copy.`}}}},l={render:(e,n)=>{let r=t(e.themeMode,n.globals.theme);return a({text:e.text,theme:r})}},l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{ + render: (args, context) => { + const theme = resolveStoryTheme(args.themeMode, context.globals.theme); + return Tooltip({ + text: args.text, + theme + }); + } +}`,...l.parameters?.docs?.source}}},u=[`Default`]}))();export{l as Default,u as __namedExportsOrder,c as default}; \ No newline at end of file diff --git a/storybook/static/assets/Typography.stories-Ceegr84L.js b/storybook/static/assets/Typography.stories-Ceegr84L.js new file mode 100644 index 0000000000..6cfdcd1a56 --- /dev/null +++ b/storybook/static/assets/Typography.stories-Ceegr84L.js @@ -0,0 +1,149 @@ +import{n as e}from"./chunk-BneVvdWh.js";var t,n,r,i,a,o;e((()=>{t={title:`Foundations/Typography`,parameters:{docs:{description:{component:`Typography scale used across all plugin UI components. Primary font is Arial. Styles are grouped by role: headings, body, captions.`}}}},n=[{name:`Head1`,size:15,lineHeight:20,weight:400,weightName:`Regular`,letterSpacing:.3},{name:`Head1`,size:14,lineHeight:20,weight:700,weightName:`Bold`,letterSpacing:.28},{name:`Head2`,size:14,lineHeight:16,weight:700,weightName:`Bold`,letterSpacing:.28},{name:`Head3`,size:12,lineHeight:16,weight:500,weightName:`Medium`,letterSpacing:.24},{name:`Head3`,size:12,lineHeight:16,weight:400,weightName:`Regular`,letterSpacing:.24},{name:`Head4`,size:11,lineHeight:16,weight:700,weightName:`Bold`,letterSpacing:.22},{name:`Body`,size:11,lineHeight:16,weight:400,weightName:`Regular`,letterSpacing:.22},{name:`Body`,size:11,lineHeight:14,weight:400,weightName:`Regular`,letterSpacing:.22},{name:`Caption`,size:11,lineHeight:12,weight:400,weightName:`Regular`,letterSpacing:.22},{name:`Caption`,size:10,lineHeight:12,weight:400,weightName:`Regular`,letterSpacing:.2}],r={name:`Text Styles`,render:()=>{let e=document.createElement(`div`);e.style.fontFamily=`Arial, Helvetica, sans-serif`;let t=document.createElement(`div`);t.style.cssText=[`padding:28px 32px`,`border-radius:12px`,`background:var(--page-surface)`,`border:1px solid var(--page-border)`,`display:flex`,`align-items:center`,`gap:40px`,`margin-bottom:32px`].join(`;`),t.innerHTML=` +
+
Arial
+
+ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
+ 1234567890 '?"!"(%)[#]{@}/&<-+÷×=>®©₽$€£¥¢:;,.* +
+
+
Aa
+ `,e.appendChild(t);let r=document.createElement(`div`);r.style.cssText=`border:1px solid var(--page-border);border-radius:12px;overflow:hidden;`;let i=document.createElement(`div`);return i.style.cssText=[`display:grid`,`grid-template-columns:80px 64px 80px 1fr`,`padding:8px 20px`,`background:var(--page-surface)`,`border-bottom:1px solid var(--page-border)`,`gap:16px`].join(`;`),i.innerHTML=` +
Style
+
Size/LH
+
Weight
+
Sample
+ `,r.appendChild(i),n.forEach((e,t)=>{let i=t%2==0?`var(--page-bg)`:`var(--page-surface)`,a=document.createElement(`div`);a.style.cssText=[`display:grid`,`grid-template-columns:80px 64px 80px 1fr`,`align-items:center`,`padding:10px 20px`,`gap:16px`,`background:${i}`,t${e.name} +
${e.size}/${e.lineHeight}
+
${e.weightName}
+
+ Lorem ipsum dolor sit amet +
+ `,r.appendChild(a)}),e.appendChild(r),e},parameters:{docs:{description:{story:`Full type scale — style name, size / line-height, weight, and live sample.`}}}},i={name:`Content Example`,render:(e,t)=>{[`Dark`,`Dark Contrast`,`Modern Dark`].includes(t.globals.theme);let n=(e,t,n,r,i,a,o)=>` +
+
Navigation
+
+
Header
+
Caption caption. Caption caption
+
+
+
Text block text block. Text block text block.
Text block text block. Text block text block.
+
Caption caption. Caption caption
+
+
+ `;return`
+ ${n(`var(--page-bg)`,`var(--page-fg)`,`var(--page-fg)`,`var(--page-muted)`,`var(--page-fg)`,`var(--page-muted)`,!0)} + ${n(`#333333`,`rgba(255,255,255,0.80)`,`rgba(255,255,255,0.80)`,`rgba(255,255,255,0.60)`,`rgba(255,255,255,0.80)`,`rgba(255,255,255,0.60)`,!1)} +
`},parameters:{docs:{description:{story:`Typography in context — left panel on a light background and a dark background.`}}}},a={name:`Links`,render:()=>`
+
Pseudolink (dashed underline)
+
+
Show advanced settings
+
+
+
`,parameters:{docs:{description:{story:`Pseudolink style — plain text with a dashed 1px underline, no color change.`}}}},r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{ + name: 'Text Styles', + render: () => { + const root = document.createElement('div'); + root.style.fontFamily = 'Arial, Helvetica, sans-serif'; + + // ── Font specimen ── + const specimen = document.createElement('div'); + specimen.style.cssText = ['padding:28px 32px', 'border-radius:12px', 'background:var(--page-surface)', 'border:1px solid var(--page-border)', 'display:flex', 'align-items:center', 'gap:40px', 'margin-bottom:32px'].join(';'); + specimen.innerHTML = \` +
+
Arial
+
+ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
+ 1234567890 '?"!"(%)[#]{@}/&\\<-+÷×=>®©₽$€£¥¢:;,.* +
+
+
Aa
+ \`; + root.appendChild(specimen); + + // ── Table header ── + const table = document.createElement('div'); + table.style.cssText = 'border:1px solid var(--page-border);border-radius:12px;overflow:hidden;'; + const header = document.createElement('div'); + header.style.cssText = ['display:grid', 'grid-template-columns:80px 64px 80px 1fr', 'padding:8px 20px', 'background:var(--page-surface)', 'border-bottom:1px solid var(--page-border)', 'gap:16px'].join(';'); + header.innerHTML = \` +
Style
+
Size/LH
+
Weight
+
Sample
+ \`; + table.appendChild(header); + textStyles.forEach((s, i) => { + const rowBg = i % 2 === 0 ? 'var(--page-bg)' : 'var(--page-surface)'; + const row = document.createElement('div'); + row.style.cssText = ['display:grid', 'grid-template-columns:80px 64px 80px 1fr', 'align-items:center', 'padding:10px 20px', 'gap:16px', \`background:\${rowBg}\`, i < textStyles.length - 1 ? 'border-bottom:1px solid var(--page-border)' : ''].join(';'); + row.innerHTML = \` +
\${s.name}
+
\${s.size}/\${s.lineHeight}
+
\${s.weightName}
+
+ Lorem ipsum dolor sit amet +
+ \`; + table.appendChild(row); + }); + root.appendChild(table); + return root; + }, + parameters: { + docs: { + description: { + story: 'Full type scale — style name, size / line-height, weight, and live sample.' + } + } + } +}`,...r.parameters?.docs?.source}}},i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{ + name: 'Content Example', + render: (args, context) => { + const isDark = ['Dark', 'Dark Contrast', 'Modern Dark'].includes(context.globals.theme); + const card = (bg, nav, header, caption, body, smallCaption, isLight) => \` +
+
Navigation
+
+
Header
+
Caption caption. Caption caption
+
+
+
Text block text block. Text block text block.
Text block text block. Text block text block.
+
Caption caption. Caption caption
+
+
+ \`; + const lightCard = card('var(--page-bg)', 'var(--page-fg)', 'var(--page-fg)', 'var(--page-muted)', 'var(--page-fg)', 'var(--page-muted)', true); + const darkCard = card('#333333', 'rgba(255,255,255,0.80)', 'rgba(255,255,255,0.80)', 'rgba(255,255,255,0.60)', 'rgba(255,255,255,0.80)', 'rgba(255,255,255,0.60)', false); + return \`
+ \${lightCard} + \${darkCard} +
\`; + }, + parameters: { + docs: { + description: { + story: 'Typography in context — left panel on a light background and a dark background.' + } + } + } +}`,...i.parameters?.docs?.source}}},a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{ + name: 'Links', + render: () => { + return \`
+
Pseudolink (dashed underline)
+
+
Show advanced settings
+
+
+
\`; + }, + parameters: { + docs: { + description: { + story: 'Pseudolink style — plain text with a dashed 1px underline, no color change.' + } + } + } +}`,...a.parameters?.docs?.source}}},o=[`TextStyles`,`ContentExample`,`Links`]}))();export{i as ContentExample,a as Links,r as TextStyles,o as __namedExportsOrder,t as default}; \ No newline at end of file diff --git a/storybook/static/assets/WithTooltip-65CFNBJE-BwYBYwM9.js b/storybook/static/assets/WithTooltip-65CFNBJE-DKdOiCBU.js similarity index 99% rename from storybook/static/assets/WithTooltip-65CFNBJE-BwYBYwM9.js rename to storybook/static/assets/WithTooltip-65CFNBJE-DKdOiCBU.js index 969af9fbcb..a1dda7ac5c 100644 --- a/storybook/static/assets/WithTooltip-65CFNBJE-BwYBYwM9.js +++ b/storybook/static/assets/WithTooltip-65CFNBJE-DKdOiCBU.js @@ -1,4 +1,4 @@ -import{a as e,n as t}from"./chunk-BneVvdWh.js";import{d as n,h as r,m as i}from"./iframe-DIiqmCNx.js";import{t as a}from"./react-B_0iYUWB.js";import{C as o,S as s,a as c,c as l,m as u}from"./theming-DzOc7WGW.js";import{i as d,r as f}from"./chunk-3LY4VQVK-DK6VewjT.js";import{n as p,r as m,t as h}from"./chunk-242VQQM5-CsveGrTV.js";function g(e){return e?(e.nodeName||``).toLowerCase():null}function _(e){if(e==null)return window;if(e.toString()!==`[object Window]`){var t=e.ownerDocument;return t&&t.defaultView||window}return e}function v(e){return e instanceof _(e).Element||e instanceof Element}function y(e){return e instanceof _(e).HTMLElement||e instanceof HTMLElement}function b(e){return typeof ShadowRoot>`u`?!1:e instanceof _(e).ShadowRoot||e instanceof ShadowRoot}function x(e){var t=e.state;Object.keys(t.elements).forEach(function(e){var n=t.styles[e]||{},r=t.attributes[e]||{},i=t.elements[e];!y(i)||!g(i)||(Object.assign(i.style,n),Object.keys(r).forEach(function(e){var t=r[e];t===!1?i.removeAttribute(e):i.setAttribute(e,t===!0?``:t)}))})}function S(e){var t=e.state,n={popper:{position:t.options.strategy,left:`0`,top:`0`,margin:`0`},arrow:{position:`absolute`},reference:{}};return Object.assign(t.elements.popper.style,n.popper),t.styles=n,t.elements.arrow&&Object.assign(t.elements.arrow.style,n.arrow),function(){Object.keys(t.elements).forEach(function(e){var r=t.elements[e],i=t.attributes[e]||{},a=Object.keys(t.styles.hasOwnProperty(e)?t.styles[e]:n[e]).reduce(function(e,t){return e[t]=``,e},{});!y(r)||!g(r)||(Object.assign(r.style,a),Object.keys(i).forEach(function(e){r.removeAttribute(e)}))})}}function C(e){return e.split(`-`)[0]}function w(){var e=navigator.userAgentData;return e!=null&&e.brands&&Array.isArray(e.brands)?e.brands.map(function(e){return e.brand+`/`+e.version}).join(` `):navigator.userAgent}function T(){return!/^((?!chrome|android).)*safari/i.test(w())}function E(e,t,n){t===void 0&&(t=!1),n===void 0&&(n=!1);var r=e.getBoundingClientRect(),i=1,a=1;t&&y(e)&&(i=e.offsetWidth>0&&Z(r.width)/e.offsetWidth||1,a=e.offsetHeight>0&&Z(r.height)/e.offsetHeight||1);var o=(v(e)?_(e):window).visualViewport,s=!T()&&n,c=(r.left+(s&&o?o.offsetLeft:0))/i,l=(r.top+(s&&o?o.offsetTop:0))/a,u=r.width/i,d=r.height/a;return{width:u,height:d,top:l,right:c+u,bottom:l+d,left:c,x:c,y:l}}function D(e){var t=E(e),n=e.offsetWidth,r=e.offsetHeight;return Math.abs(t.width-n)<=1&&(n=t.width),Math.abs(t.height-r)<=1&&(r=t.height),{x:e.offsetLeft,y:e.offsetTop,width:n,height:r}}function O(e,t){var n=t.getRootNode&&t.getRootNode();if(e.contains(t))return!0;if(n&&b(n)){var r=t;do{if(r&&e.isSameNode(r))return!0;r=r.parentNode||r.host}while(r)}return!1}function k(e){return _(e).getComputedStyle(e)}function A(e){return[`table`,`td`,`th`].indexOf(g(e))>=0}function j(e){return((v(e)?e.ownerDocument:e.document)||window.document).documentElement}function M(e){return g(e)===`html`?e:e.assignedSlot||e.parentNode||(b(e)?e.host:null)||j(e)}function N(e){return!y(e)||k(e).position===`fixed`?null:e.offsetParent}function P(e){var t=/firefox/i.test(w());if(/Trident/i.test(w())&&y(e)&&k(e).position===`fixed`)return null;var n=M(e);for(b(n)&&(n=n.host);y(n)&&[`html`,`body`].indexOf(g(n))<0;){var r=k(n);if(r.transform!==`none`||r.perspective!==`none`||r.contain===`paint`||[`transform`,`perspective`].indexOf(r.willChange)!==-1||t&&r.willChange===`filter`||t&&r.filter&&r.filter!==`none`)return n;n=n.parentNode}return null}function F(e){for(var t=_(e),n=N(e);n&&A(n)&&k(n).position===`static`;)n=N(n);return n&&(g(n)===`html`||g(n)===`body`&&k(n).position===`static`)?t:n||P(e)||t}function ee(e){return[`top`,`bottom`].indexOf(e)>=0?`x`:`y`}function I(e,t,n){return X(e,gt(t,n))}function te(e,t,n){var r=I(e,t,n);return r>n?n:r}function ne(){return{top:0,right:0,bottom:0,left:0}}function re(e){return Object.assign({},ne(),e)}function ie(e,t){return t.reduce(function(t,n){return t[n]=e,t},{})}function ae(e){var t,n=e.state,r=e.name,i=e.options,a=n.elements.arrow,o=n.modifiersData.popperOffsets,s=C(n.placement),c=ee(s),l=[J,q].indexOf(s)>=0?`height`:`width`;if(!(!a||!o)){var u=_t(i.padding,n),d=D(a),f=c===`y`?G:J,p=c===`y`?K:q,m=n.rects.reference[l]+n.rects.reference[c]-o[c]-n.rects.popper[l],h=o[c]-n.rects.reference[c],g=F(a),_=g?c===`y`?g.clientHeight||0:g.clientWidth||0:0,v=m/2-h/2,y=u[f],b=_-d[l]-u[p],x=_/2-d[l]/2+v,S=I(y,x,b),w=c;n.modifiersData[r]=(t={},t[w]=S,t.centerOffset=S-x,t)}}function oe(e){var t=e.state,n=e.options.element,r=n===void 0?`[data-popper-arrow]`:n;r!=null&&(typeof r==`string`&&(r=t.elements.popper.querySelector(r),!r)||O(t.elements.popper,r)&&(t.elements.arrow=r))}function L(e){return e.split(`-`)[1]}function se(e,t){var n=e.x,r=e.y,i=t.devicePixelRatio||1;return{x:Z(n*i)/i||0,y:Z(r*i)/i||0}}function ce(e){var t,n=e.popper,r=e.popperRect,i=e.placement,a=e.variation,o=e.offsets,s=e.position,c=e.gpuAcceleration,l=e.adaptive,u=e.roundOffsets,d=e.isFixed,f=o.x,p=f===void 0?0:f,m=o.y,h=m===void 0?0:m,g=typeof u==`function`?u({x:p,y:h}):{x:p,y:h};p=g.x,h=g.y;var v=o.hasOwnProperty(`x`),y=o.hasOwnProperty(`y`),b=J,x=G,S=window;if(l){var C=F(n),w=`clientHeight`,T=`clientWidth`;if(C===_(n)&&(C=j(n),k(C).position!==`static`&&s===`absolute`&&(w=`scrollHeight`,T=`scrollWidth`)),C=C,i===G||(i===J||i===q)&&a===st){x=K;var E=d&&C===S&&S.visualViewport?S.visualViewport.height:C[w];h-=E-r.height,h*=c?1:-1}if(i===J||(i===G||i===K)&&a===st){b=q;var D=d&&C===S&&S.visualViewport?S.visualViewport.width:C[T];p-=D-r.width,p*=c?1:-1}}var O=Object.assign({position:s},l&&yt),A=u===!0?se({x:p,y:h},_(n)):{x:p,y:h};if(p=A.x,h=A.y,c){var M;return Object.assign({},O,(M={},M[x]=y?`0`:``,M[b]=v?`0`:``,M.transform=(S.devicePixelRatio||1)<=1?`translate(`+p+`px, `+h+`px)`:`translate3d(`+p+`px, `+h+`px, 0)`,M))}return Object.assign({},O,(t={},t[x]=y?h+`px`:``,t[b]=v?p+`px`:``,t.transform=``,t))}function le(e){var t=e.state,n=e.options,r=n.gpuAcceleration,i=r===void 0?!0:r,a=n.adaptive,o=a===void 0?!0:a,s=n.roundOffsets,c=s===void 0?!0:s,l={placement:C(t.placement),variation:L(t.placement),popper:t.elements.popper,popperRect:t.rects.popper,gpuAcceleration:i,isFixed:t.options.strategy===`fixed`};t.modifiersData.popperOffsets!=null&&(t.styles.popper=Object.assign({},t.styles.popper,ce(Object.assign({},l,{offsets:t.modifiersData.popperOffsets,position:t.options.strategy,adaptive:o,roundOffsets:c})))),t.modifiersData.arrow!=null&&(t.styles.arrow=Object.assign({},t.styles.arrow,ce(Object.assign({},l,{offsets:t.modifiersData.arrow,position:`absolute`,adaptive:!1,roundOffsets:c})))),t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-placement":t.placement})}function ue(e){var t=e.state,n=e.instance,r=e.options,i=r.scroll,a=i===void 0?!0:i,o=r.resize,s=o===void 0?!0:o,c=_(t.elements.popper),l=[].concat(t.scrollParents.reference,t.scrollParents.popper);return a&&l.forEach(function(e){e.addEventListener(`scroll`,n.update,xt)}),s&&c.addEventListener(`resize`,n.update,xt),function(){a&&l.forEach(function(e){e.removeEventListener(`scroll`,n.update,xt)}),s&&c.removeEventListener(`resize`,n.update,xt)}}function R(e){return e.replace(/left|right|bottom|top/g,function(e){return Ct[e]})}function de(e){return e.replace(/start|end/g,function(e){return wt[e]})}function z(e){var t=_(e);return{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function fe(e){return E(j(e)).left+z(e).scrollLeft}function pe(e,t){var n=_(e),r=j(e),i=n.visualViewport,a=r.clientWidth,o=r.clientHeight,s=0,c=0;if(i){a=i.width,o=i.height;var l=T();(l||!l&&t===`fixed`)&&(s=i.offsetLeft,c=i.offsetTop)}return{width:a,height:o,x:s+fe(e),y:c}}function me(e){var t=j(e),n=z(e),r=e.ownerDocument?.body,i=X(t.scrollWidth,t.clientWidth,r?r.scrollWidth:0,r?r.clientWidth:0),a=X(t.scrollHeight,t.clientHeight,r?r.scrollHeight:0,r?r.clientHeight:0),o=-n.scrollLeft+fe(e),s=-n.scrollTop;return k(r||t).direction===`rtl`&&(o+=X(t.clientWidth,r?r.clientWidth:0)-i),{width:i,height:a,x:o,y:s}}function he(e){var t=k(e),n=t.overflow,r=t.overflowX,i=t.overflowY;return/auto|scroll|overlay|hidden/.test(n+i+r)}function ge(e){return[`html`,`body`,`#document`].indexOf(g(e))>=0?e.ownerDocument.body:y(e)&&he(e)?e:ge(M(e))}function B(e,t){t===void 0&&(t=[]);var n=ge(e),r=n===e.ownerDocument?.body,i=_(n),a=r?[i].concat(i.visualViewport||[],he(n)?n:[]):n,o=t.concat(a);return r?o:o.concat(B(M(a)))}function _e(e){return Object.assign({},e,{left:e.x,top:e.y,right:e.x+e.width,bottom:e.y+e.height})}function ve(e,t){var n=E(e,!1,t===`fixed`);return n.top+=e.clientTop,n.left+=e.clientLeft,n.bottom=n.top+e.clientHeight,n.right=n.left+e.clientWidth,n.width=e.clientWidth,n.height=e.clientHeight,n.x=n.left,n.y=n.top,n}function ye(e,t,n){return t===lt?_e(pe(e,n)):v(t)?ve(t,n):_e(me(j(e)))}function be(e){var t=B(M(e)),n=[`absolute`,`fixed`].indexOf(k(e).position)>=0&&y(e)?F(e):e;return v(n)?t.filter(function(e){return v(e)&&O(e,n)&&g(e)!==`body`}):[]}function V(e,t,n,r){var i=t===`clippingParents`?be(e):[].concat(t),a=[].concat(i,[n]),o=a[0],s=a.reduce(function(t,n){var i=ye(e,n,r);return t.top=X(i.top,t.top),t.right=gt(i.right,t.right),t.bottom=gt(i.bottom,t.bottom),t.left=X(i.left,t.left),t},ye(e,o,r));return s.width=s.right-s.left,s.height=s.bottom-s.top,s.x=s.left,s.y=s.top,s}function H(e){var t=e.reference,n=e.element,r=e.placement,i=r?C(r):null,a=r?L(r):null,o=t.x+t.width/2-n.width/2,s=t.y+t.height/2-n.height/2,c;switch(i){case G:c={x:o,y:t.y-n.height};break;case K:c={x:o,y:t.y+t.height};break;case q:c={x:t.x+t.width,y:s};break;case J:c={x:t.x-n.width,y:s};break;default:c={x:t.x,y:t.y}}var l=i?ee(i):null;if(l!=null){var u=l===`y`?`height`:`width`;switch(a){case Y:c[l]=c[l]-(t[u]/2-n[u]/2);break;case st:c[l]=c[l]+(t[u]/2-n[u]/2);break;default:}}return c}function xe(e,t){t===void 0&&(t={});var n=t,r=n.placement,i=r===void 0?e.placement:r,a=n.strategy,o=a===void 0?e.strategy:a,s=n.boundary,c=s===void 0?ct:s,l=n.rootBoundary,u=l===void 0?lt:l,d=n.elementContext,f=d===void 0?ut:d,p=n.altBoundary,m=p===void 0?!1:p,h=n.padding,g=h===void 0?0:h,_=re(typeof g==`number`?ie(g,ot):g),y=f===ut?dt:ut,b=e.rects.popper,x=e.elements[m?y:f],S=V(v(x)?x:x.contextElement||j(e.elements.popper),c,u,o),C=E(e.elements.reference),w=H({reference:C,element:b,strategy:`absolute`,placement:i}),T=_e(Object.assign({},b,w)),D=f===ut?T:C,O={top:S.top-D.top+_.top,bottom:D.bottom-S.bottom+_.bottom,left:S.left-D.left+_.left,right:D.right-S.right+_.right},k=e.modifiersData.offset;if(f===ut&&k){var A=k[i];Object.keys(O).forEach(function(e){var t=[q,K].indexOf(e)>=0?1:-1,n=[G,K].indexOf(e)>=0?`y`:`x`;O[e]+=A[n]*t})}return O}function Se(e,t){t===void 0&&(t={});var n=t,r=n.placement,i=n.boundary,a=n.rootBoundary,o=n.padding,s=n.flipVariations,c=n.allowedAutoPlacements,l=c===void 0?pt:c,u=L(r),d=u?s?ft:ft.filter(function(e){return L(e)===u}):ot,f=d.filter(function(e){return l.indexOf(e)>=0});f.length===0&&(f=d);var p=f.reduce(function(t,n){return t[n]=xe(e,{placement:n,boundary:i,rootBoundary:a,padding:o})[C(n)],t},{});return Object.keys(p).sort(function(e,t){return p[e]-p[t]})}function Ce(e){if(C(e)===at)return[];var t=R(e);return[de(e),t,de(t)]}function we(e){var t=e.state,n=e.options,r=e.name;if(!t.modifiersData[r]._skip){for(var i=n.mainAxis,a=i===void 0?!0:i,o=n.altAxis,s=o===void 0?!0:o,c=n.fallbackPlacements,l=n.padding,u=n.boundary,d=n.rootBoundary,f=n.altBoundary,p=n.flipVariations,m=p===void 0?!0:p,h=n.allowedAutoPlacements,g=t.options.placement,_=C(g)===g,v=c||(_||!m?[R(g)]:Ce(g)),y=[g].concat(v).reduce(function(e,n){return e.concat(C(n)===at?Se(t,{placement:n,boundary:u,rootBoundary:d,padding:l,flipVariations:m,allowedAutoPlacements:h}):n)},[]),b=t.rects.reference,x=t.rects.popper,S=new Map,w=!0,T=y[0],E=0;E=0,j=A?`width`:`height`,M=xe(t,{placement:D,boundary:u,rootBoundary:d,altBoundary:f,padding:l}),N=A?k?q:J:k?K:G;b[j]>x[j]&&(N=R(N));var P=R(N),F=[];if(a&&F.push(M[O]<=0),s&&F.push(M[N]<=0,M[P]<=0),F.every(function(e){return e})){T=D,w=!1;break}S.set(D,F)}if(w)for(var ee=m?3:1,I=function(e){var t=y.find(function(t){var n=S.get(t);if(n)return n.slice(0,e).every(function(e){return e})});if(t)return T=t,`break`},te=ee;te>0&&I(te)!==`break`;te--);t.placement!==T&&(t.modifiersData[r]._skip=!0,t.placement=T,t.reset=!0)}}function Te(e,t,n){return n===void 0&&(n={x:0,y:0}),{top:e.top-t.height-n.y,right:e.right-t.width+n.x,bottom:e.bottom-t.height+n.y,left:e.left-t.width-n.x}}function Ee(e){return[G,q,K,J].some(function(t){return e[t]>=0})}function De(e){var t=e.state,n=e.name,r=t.rects.reference,i=t.rects.popper,a=t.modifiersData.preventOverflow,o=xe(t,{elementContext:`reference`}),s=xe(t,{altBoundary:!0}),c=Te(o,r),l=Te(s,i,a),u=Ee(c),d=Ee(l);t.modifiersData[n]={referenceClippingOffsets:c,popperEscapeOffsets:l,isReferenceHidden:u,hasPopperEscaped:d},t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-reference-hidden":u,"data-popper-escaped":d})}function Oe(e,t,n){var r=C(e),i=[J,G].indexOf(r)>=0?-1:1,a=typeof n==`function`?n(Object.assign({},t,{placement:e})):n,o=a[0],s=a[1];return o||=0,s=(s||0)*i,[J,q].indexOf(r)>=0?{x:s,y:o}:{x:o,y:s}}function ke(e){var t=e.state,n=e.options,r=e.name,i=n.offset,a=i===void 0?[0,0]:i,o=pt.reduce(function(e,n){return e[n]=Oe(n,t.rects,a),e},{}),s=o[t.placement],c=s.x,l=s.y;t.modifiersData.popperOffsets!=null&&(t.modifiersData.popperOffsets.x+=c,t.modifiersData.popperOffsets.y+=l),t.modifiersData[r]=o}function Ae(e){var t=e.state,n=e.name;t.modifiersData[n]=H({reference:t.rects.reference,element:t.rects.popper,strategy:`absolute`,placement:t.placement})}function je(e){return e===`x`?`y`:`x`}function Me(e){var t=e.state,n=e.options,r=e.name,i=n.mainAxis,a=i===void 0?!0:i,o=n.altAxis,s=o===void 0?!1:o,c=n.boundary,l=n.rootBoundary,u=n.altBoundary,d=n.padding,f=n.tether,p=f===void 0?!0:f,m=n.tetherOffset,h=m===void 0?0:m,g=xe(t,{boundary:c,rootBoundary:l,padding:d,altBoundary:u}),_=C(t.placement),v=L(t.placement),y=!v,b=ee(_),x=je(b),S=t.modifiersData.popperOffsets,w=t.rects.reference,T=t.rects.popper,E=typeof h==`function`?h(Object.assign({},t.rects,{placement:t.placement})):h,O=typeof E==`number`?{mainAxis:E,altAxis:E}:Object.assign({mainAxis:0,altAxis:0},E),k=t.modifiersData.offset?t.modifiersData.offset[t.placement]:null,A={x:0,y:0};if(S){if(a){var j=b===`y`?G:J,M=b===`y`?K:q,N=b===`y`?`height`:`width`,P=S[b],re=P+g[j],ie=P-g[M],ae=p?-T[N]/2:0,oe=v===Y?w[N]:T[N],se=v===Y?-T[N]:-w[N],ce=t.elements.arrow,le=p&&ce?D(ce):{width:0,height:0},ue=t.modifiersData[`arrow#persistent`]?t.modifiersData[`arrow#persistent`].padding:ne(),R=ue[j],de=ue[M],z=I(0,w[N],le[N]),fe=y?w[N]/2-ae-z-R-O.mainAxis:oe-z-R-O.mainAxis,pe=y?-w[N]/2+ae+z+de+O.mainAxis:se+z+de+O.mainAxis,me=t.elements.arrow&&F(t.elements.arrow),he=me?b===`y`?me.clientTop||0:me.clientLeft||0:0,ge=k?.[b]??0,B=P+fe-ge-he,_e=P+pe-ge,ve=I(p?gt(re,B):re,P,p?X(ie,_e):ie);S[b]=ve,A[b]=ve-P}if(s){var ye=b===`x`?G:J,be=b===`x`?K:q,V=S[x],H=x===`y`?`height`:`width`,Se=V+g[ye],Ce=V-g[be],we=[G,J].indexOf(_)!==-1,Te=k?.[x]??0,Ee=we?Se:V-w[H]-T[H]-Te+O.altAxis,De=we?V+w[H]+T[H]-Te-O.altAxis:Ce,Oe=p&&we?te(Ee,V,De):I(p?Ee:Se,V,p?De:Ce);S[x]=Oe,A[x]=Oe-V}t.modifiersData[r]=A}}function Ne(e){return{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}}function Pe(e){return e===_(e)||!y(e)?z(e):Ne(e)}function Fe(e){var t=e.getBoundingClientRect(),n=Z(t.width)/e.offsetWidth||1,r=Z(t.height)/e.offsetHeight||1;return n!==1||r!==1}function Ie(e,t,n){n===void 0&&(n=!1);var r=y(t),i=y(t)&&Fe(t),a=j(t),o=E(e,i,n),s={scrollLeft:0,scrollTop:0},c={x:0,y:0};return(r||!r&&!n)&&((g(t)!==`body`||he(a))&&(s=Pe(t)),y(t)?(c=E(t,!0),c.x+=t.clientLeft,c.y+=t.clientTop):a&&(c.x=fe(a))),{x:o.left+s.scrollLeft-c.x,y:o.top+s.scrollTop-c.y,width:o.width,height:o.height}}function Le(e){var t=new Map,n=new Set,r=[];e.forEach(function(e){t.set(e.name,e)});function i(e){n.add(e.name),[].concat(e.requires||[],e.requiresIfExists||[]).forEach(function(e){if(!n.has(e)){var r=t.get(e);r&&i(r)}}),r.push(e)}return e.forEach(function(e){n.has(e.name)||i(e)}),r}function Re(e){var t=Le(e);return mt.reduce(function(e,n){return e.concat(t.filter(function(e){return e.phase===n}))},[])}function ze(e){var t;return function(){return t||=new Promise(function(n){Promise.resolve().then(function(){t=void 0,n(e())})}),t}}function Be(e){var t=e.reduce(function(e,t){var n=e[t.name];return e[t.name]=n?Object.assign({},n,t,{options:Object.assign({},n.options,t.options),data:Object.assign({},n.data,t.data)}):t,e},{});return Object.keys(t).map(function(e){return t[e]})}function Ve(){return![...arguments].some(function(e){return!(e&&typeof e.getBoundingClientRect==`function`)})}function He(e){e===void 0&&(e={});var t=e,n=t.defaultModifiers,r=n===void 0?[]:n,i=t.defaultOptions,a=i===void 0?At:i;return function(e,t,n){n===void 0&&(n=a);var i={placement:`bottom`,orderedModifiers:[],options:Object.assign({},At,a),modifiersData:{},elements:{reference:e,popper:t},attributes:{},styles:{}},o=[],s=!1,c={state:i,setOptions:function(n){var o=typeof n==`function`?n(i.options):n;u(),i.options=Object.assign({},a,i.options,o),i.scrollParents={reference:v(e)?B(e):e.contextElement?B(e.contextElement):[],popper:B(t)};var s=Re(Be([].concat(r,i.options.modifiers)));return i.orderedModifiers=s.filter(function(e){return e.enabled}),l(),c.update()},forceUpdate:function(){if(!s){var e=i.elements,t=e.reference,n=e.popper;if(Ve(t,n)){i.rects={reference:Ie(t,F(n),i.options.strategy===`fixed`),popper:D(n)},i.reset=!1,i.placement=i.options.placement,i.orderedModifiers.forEach(function(e){return i.modifiersData[e.name]=Object.assign({},e.data)});for(var r=0;r{p(),o(),f(),r(),U=e(a(),1),qe=e(m(),1),W=e(a(),1),a(),Je=e(a(),1),Ye=e(a(),1),Xe=e(a(),1),Ze=e(m(),1),a(),c(),Qe=n({"../../node_modules/react-fast-compare/index.js"(e,t){var n=typeof Element<`u`,r=typeof Map==`function`,i=typeof Set==`function`,a=typeof ArrayBuffer==`function`&&!!ArrayBuffer.isView;function o(e,t){if(e===t)return!0;if(e&&t&&typeof e==`object`&&typeof t==`object`){if(e.constructor!==t.constructor)return!1;var s,c,l;if(Array.isArray(e)){if(s=e.length,s!=t.length)return!1;for(c=s;c--!==0;)if(!o(e[c],t[c]))return!1;return!0}var u;if(r&&e instanceof Map&&t instanceof Map){if(e.size!==t.size)return!1;for(u=e.entries();!(c=u.next()).done;)if(!t.has(c.value[0]))return!1;for(u=e.entries();!(c=u.next()).done;)if(!o(c.value[1],t.get(c.value[0])))return!1;return!0}if(i&&e instanceof Set&&t instanceof Set){if(e.size!==t.size)return!1;for(u=e.entries();!(c=u.next()).done;)if(!t.has(c.value[0]))return!1;return!0}if(a&&ArrayBuffer.isView(e)&&ArrayBuffer.isView(t)){if(s=e.length,s!=t.length)return!1;for(c=s;c--!==0;)if(e[c]!==t[c])return!1;return!0}if(e.constructor===RegExp)return e.source===t.source&&e.flags===t.flags;if(e.valueOf!==Object.prototype.valueOf&&typeof e.valueOf==`function`&&typeof t.valueOf==`function`)return e.valueOf()===t.valueOf();if(e.toString!==Object.prototype.toString&&typeof e.toString==`function`&&typeof t.toString==`function`)return e.toString()===t.toString();if(l=Object.keys(e),s=l.length,s!==Object.keys(t).length)return!1;for(c=s;c--!==0;)if(!Object.prototype.hasOwnProperty.call(t,l[c]))return!1;if(n&&e instanceof Element)return!1;for(c=s;c--!==0;)if(!((l[c]===`_owner`||l[c]===`__v`||l[c]===`__o`)&&e.$$typeof)&&!o(e[l[c]],t[l[c]]))return!1;return!0}return e!==e&&t!==t}t.exports=function(e,t){try{return o(e,t)}catch(e){if((e.message||``).match(/stack|recursion/i))return console.warn(`react-fast-compare cannot handle circular refs`),!1;throw e}}}}),$e=n({"../../node_modules/warning/warning.js"(e,t){var n=!1,r=function(){};n&&(i=function(e,t){var n=arguments.length;t=Array(n>1?n-1:0);for(var r=1;r2?r-2:0);for(var a=2;at.split(`-`)[0]===e?n:r),$=8,Bt=l.div({position:`absolute`,borderStyle:`solid`},({placement:e})=>{let t=0,n=0;switch(!0){case e.startsWith(`left`)||e.startsWith(`right`):n=8;break;case e.startsWith(`top`)||e.startsWith(`bottom`):t=8;break;default:}return{transform:`translate3d(${t}px, ${n}px, 0px)`}},({theme:e,color:t,placement:n})=>({bottom:`${Q(`top`,n,`${$*-1}px`,`auto`)}`,top:`${Q(`bottom`,n,`${$*-1}px`,`auto`)}`,right:`${Q(`left`,n,`${$*-1}px`,`auto`)}`,left:`${Q(`right`,n,`${$*-1}px`,`auto`)}`,borderBottomWidth:`${Q(`top`,n,`0`,$)}px`,borderTopWidth:`${Q(`bottom`,n,`0`,$)}px`,borderRightWidth:`${Q(`left`,n,`0`,$)}px`,borderLeftWidth:`${Q(`right`,n,`0`,$)}px`,borderTopColor:Q(`top`,n,e.color[t]||t||e.base===`light`?u(e.background.app):e.background.app,`transparent`),borderBottomColor:Q(`bottom`,n,e.color[t]||t||e.base===`light`?u(e.background.app):e.background.app,`transparent`),borderLeftColor:Q(`left`,n,e.color[t]||t||e.base===`light`?u(e.background.app):e.background.app,`transparent`),borderRightColor:Q(`right`,n,e.color[t]||t||e.base===`light`?u(e.background.app):e.background.app,`transparent`)})),Vt=l.div(({hidden:e})=>({display:e?`none`:`inline-block`,zIndex:2147483647,colorScheme:`light dark`}),({theme:e,color:t,hasChrome:n})=>n?{background:t&&e.color[t]||t||e.base===`light`?u(e.background.app):e.background.app,filter:` +import{a as e,n as t}from"./chunk-BneVvdWh.js";import{d as n,h as r,m as i}from"./iframe-B3N_zEeP.js";import{t as a}from"./react-B_0iYUWB.js";import{C as o,S as s,a as c,c as l,m as u}from"./theming-DLWRz99i.js";import{i as d,r as f}from"./chunk-3LY4VQVK-DyJr4LVG.js";import{n as p,r as m,t as h}from"./chunk-242VQQM5-CsveGrTV.js";function g(e){return e?(e.nodeName||``).toLowerCase():null}function _(e){if(e==null)return window;if(e.toString()!==`[object Window]`){var t=e.ownerDocument;return t&&t.defaultView||window}return e}function v(e){return e instanceof _(e).Element||e instanceof Element}function y(e){return e instanceof _(e).HTMLElement||e instanceof HTMLElement}function b(e){return typeof ShadowRoot>`u`?!1:e instanceof _(e).ShadowRoot||e instanceof ShadowRoot}function x(e){var t=e.state;Object.keys(t.elements).forEach(function(e){var n=t.styles[e]||{},r=t.attributes[e]||{},i=t.elements[e];!y(i)||!g(i)||(Object.assign(i.style,n),Object.keys(r).forEach(function(e){var t=r[e];t===!1?i.removeAttribute(e):i.setAttribute(e,t===!0?``:t)}))})}function S(e){var t=e.state,n={popper:{position:t.options.strategy,left:`0`,top:`0`,margin:`0`},arrow:{position:`absolute`},reference:{}};return Object.assign(t.elements.popper.style,n.popper),t.styles=n,t.elements.arrow&&Object.assign(t.elements.arrow.style,n.arrow),function(){Object.keys(t.elements).forEach(function(e){var r=t.elements[e],i=t.attributes[e]||{},a=Object.keys(t.styles.hasOwnProperty(e)?t.styles[e]:n[e]).reduce(function(e,t){return e[t]=``,e},{});!y(r)||!g(r)||(Object.assign(r.style,a),Object.keys(i).forEach(function(e){r.removeAttribute(e)}))})}}function C(e){return e.split(`-`)[0]}function w(){var e=navigator.userAgentData;return e!=null&&e.brands&&Array.isArray(e.brands)?e.brands.map(function(e){return e.brand+`/`+e.version}).join(` `):navigator.userAgent}function T(){return!/^((?!chrome|android).)*safari/i.test(w())}function E(e,t,n){t===void 0&&(t=!1),n===void 0&&(n=!1);var r=e.getBoundingClientRect(),i=1,a=1;t&&y(e)&&(i=e.offsetWidth>0&&Z(r.width)/e.offsetWidth||1,a=e.offsetHeight>0&&Z(r.height)/e.offsetHeight||1);var o=(v(e)?_(e):window).visualViewport,s=!T()&&n,c=(r.left+(s&&o?o.offsetLeft:0))/i,l=(r.top+(s&&o?o.offsetTop:0))/a,u=r.width/i,d=r.height/a;return{width:u,height:d,top:l,right:c+u,bottom:l+d,left:c,x:c,y:l}}function D(e){var t=E(e),n=e.offsetWidth,r=e.offsetHeight;return Math.abs(t.width-n)<=1&&(n=t.width),Math.abs(t.height-r)<=1&&(r=t.height),{x:e.offsetLeft,y:e.offsetTop,width:n,height:r}}function O(e,t){var n=t.getRootNode&&t.getRootNode();if(e.contains(t))return!0;if(n&&b(n)){var r=t;do{if(r&&e.isSameNode(r))return!0;r=r.parentNode||r.host}while(r)}return!1}function k(e){return _(e).getComputedStyle(e)}function A(e){return[`table`,`td`,`th`].indexOf(g(e))>=0}function j(e){return((v(e)?e.ownerDocument:e.document)||window.document).documentElement}function M(e){return g(e)===`html`?e:e.assignedSlot||e.parentNode||(b(e)?e.host:null)||j(e)}function N(e){return!y(e)||k(e).position===`fixed`?null:e.offsetParent}function P(e){var t=/firefox/i.test(w());if(/Trident/i.test(w())&&y(e)&&k(e).position===`fixed`)return null;var n=M(e);for(b(n)&&(n=n.host);y(n)&&[`html`,`body`].indexOf(g(n))<0;){var r=k(n);if(r.transform!==`none`||r.perspective!==`none`||r.contain===`paint`||[`transform`,`perspective`].indexOf(r.willChange)!==-1||t&&r.willChange===`filter`||t&&r.filter&&r.filter!==`none`)return n;n=n.parentNode}return null}function F(e){for(var t=_(e),n=N(e);n&&A(n)&&k(n).position===`static`;)n=N(n);return n&&(g(n)===`html`||g(n)===`body`&&k(n).position===`static`)?t:n||P(e)||t}function ee(e){return[`top`,`bottom`].indexOf(e)>=0?`x`:`y`}function I(e,t,n){return X(e,gt(t,n))}function te(e,t,n){var r=I(e,t,n);return r>n?n:r}function ne(){return{top:0,right:0,bottom:0,left:0}}function re(e){return Object.assign({},ne(),e)}function ie(e,t){return t.reduce(function(t,n){return t[n]=e,t},{})}function ae(e){var t,n=e.state,r=e.name,i=e.options,a=n.elements.arrow,o=n.modifiersData.popperOffsets,s=C(n.placement),c=ee(s),l=[J,q].indexOf(s)>=0?`height`:`width`;if(!(!a||!o)){var u=_t(i.padding,n),d=D(a),f=c===`y`?G:J,p=c===`y`?K:q,m=n.rects.reference[l]+n.rects.reference[c]-o[c]-n.rects.popper[l],h=o[c]-n.rects.reference[c],g=F(a),_=g?c===`y`?g.clientHeight||0:g.clientWidth||0:0,v=m/2-h/2,y=u[f],b=_-d[l]-u[p],x=_/2-d[l]/2+v,S=I(y,x,b),w=c;n.modifiersData[r]=(t={},t[w]=S,t.centerOffset=S-x,t)}}function oe(e){var t=e.state,n=e.options.element,r=n===void 0?`[data-popper-arrow]`:n;r!=null&&(typeof r==`string`&&(r=t.elements.popper.querySelector(r),!r)||O(t.elements.popper,r)&&(t.elements.arrow=r))}function L(e){return e.split(`-`)[1]}function se(e,t){var n=e.x,r=e.y,i=t.devicePixelRatio||1;return{x:Z(n*i)/i||0,y:Z(r*i)/i||0}}function ce(e){var t,n=e.popper,r=e.popperRect,i=e.placement,a=e.variation,o=e.offsets,s=e.position,c=e.gpuAcceleration,l=e.adaptive,u=e.roundOffsets,d=e.isFixed,f=o.x,p=f===void 0?0:f,m=o.y,h=m===void 0?0:m,g=typeof u==`function`?u({x:p,y:h}):{x:p,y:h};p=g.x,h=g.y;var v=o.hasOwnProperty(`x`),y=o.hasOwnProperty(`y`),b=J,x=G,S=window;if(l){var C=F(n),w=`clientHeight`,T=`clientWidth`;if(C===_(n)&&(C=j(n),k(C).position!==`static`&&s===`absolute`&&(w=`scrollHeight`,T=`scrollWidth`)),C=C,i===G||(i===J||i===q)&&a===st){x=K;var E=d&&C===S&&S.visualViewport?S.visualViewport.height:C[w];h-=E-r.height,h*=c?1:-1}if(i===J||(i===G||i===K)&&a===st){b=q;var D=d&&C===S&&S.visualViewport?S.visualViewport.width:C[T];p-=D-r.width,p*=c?1:-1}}var O=Object.assign({position:s},l&&yt),A=u===!0?se({x:p,y:h},_(n)):{x:p,y:h};if(p=A.x,h=A.y,c){var M;return Object.assign({},O,(M={},M[x]=y?`0`:``,M[b]=v?`0`:``,M.transform=(S.devicePixelRatio||1)<=1?`translate(`+p+`px, `+h+`px)`:`translate3d(`+p+`px, `+h+`px, 0)`,M))}return Object.assign({},O,(t={},t[x]=y?h+`px`:``,t[b]=v?p+`px`:``,t.transform=``,t))}function le(e){var t=e.state,n=e.options,r=n.gpuAcceleration,i=r===void 0?!0:r,a=n.adaptive,o=a===void 0?!0:a,s=n.roundOffsets,c=s===void 0?!0:s,l={placement:C(t.placement),variation:L(t.placement),popper:t.elements.popper,popperRect:t.rects.popper,gpuAcceleration:i,isFixed:t.options.strategy===`fixed`};t.modifiersData.popperOffsets!=null&&(t.styles.popper=Object.assign({},t.styles.popper,ce(Object.assign({},l,{offsets:t.modifiersData.popperOffsets,position:t.options.strategy,adaptive:o,roundOffsets:c})))),t.modifiersData.arrow!=null&&(t.styles.arrow=Object.assign({},t.styles.arrow,ce(Object.assign({},l,{offsets:t.modifiersData.arrow,position:`absolute`,adaptive:!1,roundOffsets:c})))),t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-placement":t.placement})}function ue(e){var t=e.state,n=e.instance,r=e.options,i=r.scroll,a=i===void 0?!0:i,o=r.resize,s=o===void 0?!0:o,c=_(t.elements.popper),l=[].concat(t.scrollParents.reference,t.scrollParents.popper);return a&&l.forEach(function(e){e.addEventListener(`scroll`,n.update,xt)}),s&&c.addEventListener(`resize`,n.update,xt),function(){a&&l.forEach(function(e){e.removeEventListener(`scroll`,n.update,xt)}),s&&c.removeEventListener(`resize`,n.update,xt)}}function R(e){return e.replace(/left|right|bottom|top/g,function(e){return Ct[e]})}function de(e){return e.replace(/start|end/g,function(e){return wt[e]})}function z(e){var t=_(e);return{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function fe(e){return E(j(e)).left+z(e).scrollLeft}function pe(e,t){var n=_(e),r=j(e),i=n.visualViewport,a=r.clientWidth,o=r.clientHeight,s=0,c=0;if(i){a=i.width,o=i.height;var l=T();(l||!l&&t===`fixed`)&&(s=i.offsetLeft,c=i.offsetTop)}return{width:a,height:o,x:s+fe(e),y:c}}function me(e){var t=j(e),n=z(e),r=e.ownerDocument?.body,i=X(t.scrollWidth,t.clientWidth,r?r.scrollWidth:0,r?r.clientWidth:0),a=X(t.scrollHeight,t.clientHeight,r?r.scrollHeight:0,r?r.clientHeight:0),o=-n.scrollLeft+fe(e),s=-n.scrollTop;return k(r||t).direction===`rtl`&&(o+=X(t.clientWidth,r?r.clientWidth:0)-i),{width:i,height:a,x:o,y:s}}function he(e){var t=k(e),n=t.overflow,r=t.overflowX,i=t.overflowY;return/auto|scroll|overlay|hidden/.test(n+i+r)}function ge(e){return[`html`,`body`,`#document`].indexOf(g(e))>=0?e.ownerDocument.body:y(e)&&he(e)?e:ge(M(e))}function B(e,t){t===void 0&&(t=[]);var n=ge(e),r=n===e.ownerDocument?.body,i=_(n),a=r?[i].concat(i.visualViewport||[],he(n)?n:[]):n,o=t.concat(a);return r?o:o.concat(B(M(a)))}function _e(e){return Object.assign({},e,{left:e.x,top:e.y,right:e.x+e.width,bottom:e.y+e.height})}function ve(e,t){var n=E(e,!1,t===`fixed`);return n.top+=e.clientTop,n.left+=e.clientLeft,n.bottom=n.top+e.clientHeight,n.right=n.left+e.clientWidth,n.width=e.clientWidth,n.height=e.clientHeight,n.x=n.left,n.y=n.top,n}function ye(e,t,n){return t===lt?_e(pe(e,n)):v(t)?ve(t,n):_e(me(j(e)))}function be(e){var t=B(M(e)),n=[`absolute`,`fixed`].indexOf(k(e).position)>=0&&y(e)?F(e):e;return v(n)?t.filter(function(e){return v(e)&&O(e,n)&&g(e)!==`body`}):[]}function V(e,t,n,r){var i=t===`clippingParents`?be(e):[].concat(t),a=[].concat(i,[n]),o=a[0],s=a.reduce(function(t,n){var i=ye(e,n,r);return t.top=X(i.top,t.top),t.right=gt(i.right,t.right),t.bottom=gt(i.bottom,t.bottom),t.left=X(i.left,t.left),t},ye(e,o,r));return s.width=s.right-s.left,s.height=s.bottom-s.top,s.x=s.left,s.y=s.top,s}function H(e){var t=e.reference,n=e.element,r=e.placement,i=r?C(r):null,a=r?L(r):null,o=t.x+t.width/2-n.width/2,s=t.y+t.height/2-n.height/2,c;switch(i){case G:c={x:o,y:t.y-n.height};break;case K:c={x:o,y:t.y+t.height};break;case q:c={x:t.x+t.width,y:s};break;case J:c={x:t.x-n.width,y:s};break;default:c={x:t.x,y:t.y}}var l=i?ee(i):null;if(l!=null){var u=l===`y`?`height`:`width`;switch(a){case Y:c[l]=c[l]-(t[u]/2-n[u]/2);break;case st:c[l]=c[l]+(t[u]/2-n[u]/2);break;default:}}return c}function xe(e,t){t===void 0&&(t={});var n=t,r=n.placement,i=r===void 0?e.placement:r,a=n.strategy,o=a===void 0?e.strategy:a,s=n.boundary,c=s===void 0?ct:s,l=n.rootBoundary,u=l===void 0?lt:l,d=n.elementContext,f=d===void 0?ut:d,p=n.altBoundary,m=p===void 0?!1:p,h=n.padding,g=h===void 0?0:h,_=re(typeof g==`number`?ie(g,ot):g),y=f===ut?dt:ut,b=e.rects.popper,x=e.elements[m?y:f],S=V(v(x)?x:x.contextElement||j(e.elements.popper),c,u,o),C=E(e.elements.reference),w=H({reference:C,element:b,strategy:`absolute`,placement:i}),T=_e(Object.assign({},b,w)),D=f===ut?T:C,O={top:S.top-D.top+_.top,bottom:D.bottom-S.bottom+_.bottom,left:S.left-D.left+_.left,right:D.right-S.right+_.right},k=e.modifiersData.offset;if(f===ut&&k){var A=k[i];Object.keys(O).forEach(function(e){var t=[q,K].indexOf(e)>=0?1:-1,n=[G,K].indexOf(e)>=0?`y`:`x`;O[e]+=A[n]*t})}return O}function Se(e,t){t===void 0&&(t={});var n=t,r=n.placement,i=n.boundary,a=n.rootBoundary,o=n.padding,s=n.flipVariations,c=n.allowedAutoPlacements,l=c===void 0?pt:c,u=L(r),d=u?s?ft:ft.filter(function(e){return L(e)===u}):ot,f=d.filter(function(e){return l.indexOf(e)>=0});f.length===0&&(f=d);var p=f.reduce(function(t,n){return t[n]=xe(e,{placement:n,boundary:i,rootBoundary:a,padding:o})[C(n)],t},{});return Object.keys(p).sort(function(e,t){return p[e]-p[t]})}function Ce(e){if(C(e)===at)return[];var t=R(e);return[de(e),t,de(t)]}function we(e){var t=e.state,n=e.options,r=e.name;if(!t.modifiersData[r]._skip){for(var i=n.mainAxis,a=i===void 0?!0:i,o=n.altAxis,s=o===void 0?!0:o,c=n.fallbackPlacements,l=n.padding,u=n.boundary,d=n.rootBoundary,f=n.altBoundary,p=n.flipVariations,m=p===void 0?!0:p,h=n.allowedAutoPlacements,g=t.options.placement,_=C(g)===g,v=c||(_||!m?[R(g)]:Ce(g)),y=[g].concat(v).reduce(function(e,n){return e.concat(C(n)===at?Se(t,{placement:n,boundary:u,rootBoundary:d,padding:l,flipVariations:m,allowedAutoPlacements:h}):n)},[]),b=t.rects.reference,x=t.rects.popper,S=new Map,w=!0,T=y[0],E=0;E=0,j=A?`width`:`height`,M=xe(t,{placement:D,boundary:u,rootBoundary:d,altBoundary:f,padding:l}),N=A?k?q:J:k?K:G;b[j]>x[j]&&(N=R(N));var P=R(N),F=[];if(a&&F.push(M[O]<=0),s&&F.push(M[N]<=0,M[P]<=0),F.every(function(e){return e})){T=D,w=!1;break}S.set(D,F)}if(w)for(var ee=m?3:1,I=function(e){var t=y.find(function(t){var n=S.get(t);if(n)return n.slice(0,e).every(function(e){return e})});if(t)return T=t,`break`},te=ee;te>0&&I(te)!==`break`;te--);t.placement!==T&&(t.modifiersData[r]._skip=!0,t.placement=T,t.reset=!0)}}function Te(e,t,n){return n===void 0&&(n={x:0,y:0}),{top:e.top-t.height-n.y,right:e.right-t.width+n.x,bottom:e.bottom-t.height+n.y,left:e.left-t.width-n.x}}function Ee(e){return[G,q,K,J].some(function(t){return e[t]>=0})}function De(e){var t=e.state,n=e.name,r=t.rects.reference,i=t.rects.popper,a=t.modifiersData.preventOverflow,o=xe(t,{elementContext:`reference`}),s=xe(t,{altBoundary:!0}),c=Te(o,r),l=Te(s,i,a),u=Ee(c),d=Ee(l);t.modifiersData[n]={referenceClippingOffsets:c,popperEscapeOffsets:l,isReferenceHidden:u,hasPopperEscaped:d},t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-reference-hidden":u,"data-popper-escaped":d})}function Oe(e,t,n){var r=C(e),i=[J,G].indexOf(r)>=0?-1:1,a=typeof n==`function`?n(Object.assign({},t,{placement:e})):n,o=a[0],s=a[1];return o||=0,s=(s||0)*i,[J,q].indexOf(r)>=0?{x:s,y:o}:{x:o,y:s}}function ke(e){var t=e.state,n=e.options,r=e.name,i=n.offset,a=i===void 0?[0,0]:i,o=pt.reduce(function(e,n){return e[n]=Oe(n,t.rects,a),e},{}),s=o[t.placement],c=s.x,l=s.y;t.modifiersData.popperOffsets!=null&&(t.modifiersData.popperOffsets.x+=c,t.modifiersData.popperOffsets.y+=l),t.modifiersData[r]=o}function Ae(e){var t=e.state,n=e.name;t.modifiersData[n]=H({reference:t.rects.reference,element:t.rects.popper,strategy:`absolute`,placement:t.placement})}function je(e){return e===`x`?`y`:`x`}function Me(e){var t=e.state,n=e.options,r=e.name,i=n.mainAxis,a=i===void 0?!0:i,o=n.altAxis,s=o===void 0?!1:o,c=n.boundary,l=n.rootBoundary,u=n.altBoundary,d=n.padding,f=n.tether,p=f===void 0?!0:f,m=n.tetherOffset,h=m===void 0?0:m,g=xe(t,{boundary:c,rootBoundary:l,padding:d,altBoundary:u}),_=C(t.placement),v=L(t.placement),y=!v,b=ee(_),x=je(b),S=t.modifiersData.popperOffsets,w=t.rects.reference,T=t.rects.popper,E=typeof h==`function`?h(Object.assign({},t.rects,{placement:t.placement})):h,O=typeof E==`number`?{mainAxis:E,altAxis:E}:Object.assign({mainAxis:0,altAxis:0},E),k=t.modifiersData.offset?t.modifiersData.offset[t.placement]:null,A={x:0,y:0};if(S){if(a){var j=b===`y`?G:J,M=b===`y`?K:q,N=b===`y`?`height`:`width`,P=S[b],re=P+g[j],ie=P-g[M],ae=p?-T[N]/2:0,oe=v===Y?w[N]:T[N],se=v===Y?-T[N]:-w[N],ce=t.elements.arrow,le=p&&ce?D(ce):{width:0,height:0},ue=t.modifiersData[`arrow#persistent`]?t.modifiersData[`arrow#persistent`].padding:ne(),R=ue[j],de=ue[M],z=I(0,w[N],le[N]),fe=y?w[N]/2-ae-z-R-O.mainAxis:oe-z-R-O.mainAxis,pe=y?-w[N]/2+ae+z+de+O.mainAxis:se+z+de+O.mainAxis,me=t.elements.arrow&&F(t.elements.arrow),he=me?b===`y`?me.clientTop||0:me.clientLeft||0:0,ge=k?.[b]??0,B=P+fe-ge-he,_e=P+pe-ge,ve=I(p?gt(re,B):re,P,p?X(ie,_e):ie);S[b]=ve,A[b]=ve-P}if(s){var ye=b===`x`?G:J,be=b===`x`?K:q,V=S[x],H=x===`y`?`height`:`width`,Se=V+g[ye],Ce=V-g[be],we=[G,J].indexOf(_)!==-1,Te=k?.[x]??0,Ee=we?Se:V-w[H]-T[H]-Te+O.altAxis,De=we?V+w[H]+T[H]-Te-O.altAxis:Ce,Oe=p&&we?te(Ee,V,De):I(p?Ee:Se,V,p?De:Ce);S[x]=Oe,A[x]=Oe-V}t.modifiersData[r]=A}}function Ne(e){return{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}}function Pe(e){return e===_(e)||!y(e)?z(e):Ne(e)}function Fe(e){var t=e.getBoundingClientRect(),n=Z(t.width)/e.offsetWidth||1,r=Z(t.height)/e.offsetHeight||1;return n!==1||r!==1}function Ie(e,t,n){n===void 0&&(n=!1);var r=y(t),i=y(t)&&Fe(t),a=j(t),o=E(e,i,n),s={scrollLeft:0,scrollTop:0},c={x:0,y:0};return(r||!r&&!n)&&((g(t)!==`body`||he(a))&&(s=Pe(t)),y(t)?(c=E(t,!0),c.x+=t.clientLeft,c.y+=t.clientTop):a&&(c.x=fe(a))),{x:o.left+s.scrollLeft-c.x,y:o.top+s.scrollTop-c.y,width:o.width,height:o.height}}function Le(e){var t=new Map,n=new Set,r=[];e.forEach(function(e){t.set(e.name,e)});function i(e){n.add(e.name),[].concat(e.requires||[],e.requiresIfExists||[]).forEach(function(e){if(!n.has(e)){var r=t.get(e);r&&i(r)}}),r.push(e)}return e.forEach(function(e){n.has(e.name)||i(e)}),r}function Re(e){var t=Le(e);return mt.reduce(function(e,n){return e.concat(t.filter(function(e){return e.phase===n}))},[])}function ze(e){var t;return function(){return t||=new Promise(function(n){Promise.resolve().then(function(){t=void 0,n(e())})}),t}}function Be(e){var t=e.reduce(function(e,t){var n=e[t.name];return e[t.name]=n?Object.assign({},n,t,{options:Object.assign({},n.options,t.options),data:Object.assign({},n.data,t.data)}):t,e},{});return Object.keys(t).map(function(e){return t[e]})}function Ve(){return![...arguments].some(function(e){return!(e&&typeof e.getBoundingClientRect==`function`)})}function He(e){e===void 0&&(e={});var t=e,n=t.defaultModifiers,r=n===void 0?[]:n,i=t.defaultOptions,a=i===void 0?At:i;return function(e,t,n){n===void 0&&(n=a);var i={placement:`bottom`,orderedModifiers:[],options:Object.assign({},At,a),modifiersData:{},elements:{reference:e,popper:t},attributes:{},styles:{}},o=[],s=!1,c={state:i,setOptions:function(n){var o=typeof n==`function`?n(i.options):n;u(),i.options=Object.assign({},a,i.options,o),i.scrollParents={reference:v(e)?B(e):e.contextElement?B(e.contextElement):[],popper:B(t)};var s=Re(Be([].concat(r,i.options.modifiers)));return i.orderedModifiers=s.filter(function(e){return e.enabled}),l(),c.update()},forceUpdate:function(){if(!s){var e=i.elements,t=e.reference,n=e.popper;if(Ve(t,n)){i.rects={reference:Ie(t,F(n),i.options.strategy===`fixed`),popper:D(n)},i.reset=!1,i.placement=i.options.placement,i.orderedModifiers.forEach(function(e){return i.modifiersData[e.name]=Object.assign({},e.data)});for(var r=0;r{p(),o(),f(),r(),U=e(a(),1),qe=e(m(),1),W=e(a(),1),a(),Je=e(a(),1),Ye=e(a(),1),Xe=e(a(),1),Ze=e(m(),1),a(),c(),Qe=n({"../../node_modules/react-fast-compare/index.js"(e,t){var n=typeof Element<`u`,r=typeof Map==`function`,i=typeof Set==`function`,a=typeof ArrayBuffer==`function`&&!!ArrayBuffer.isView;function o(e,t){if(e===t)return!0;if(e&&t&&typeof e==`object`&&typeof t==`object`){if(e.constructor!==t.constructor)return!1;var s,c,l;if(Array.isArray(e)){if(s=e.length,s!=t.length)return!1;for(c=s;c--!==0;)if(!o(e[c],t[c]))return!1;return!0}var u;if(r&&e instanceof Map&&t instanceof Map){if(e.size!==t.size)return!1;for(u=e.entries();!(c=u.next()).done;)if(!t.has(c.value[0]))return!1;for(u=e.entries();!(c=u.next()).done;)if(!o(c.value[1],t.get(c.value[0])))return!1;return!0}if(i&&e instanceof Set&&t instanceof Set){if(e.size!==t.size)return!1;for(u=e.entries();!(c=u.next()).done;)if(!t.has(c.value[0]))return!1;return!0}if(a&&ArrayBuffer.isView(e)&&ArrayBuffer.isView(t)){if(s=e.length,s!=t.length)return!1;for(c=s;c--!==0;)if(e[c]!==t[c])return!1;return!0}if(e.constructor===RegExp)return e.source===t.source&&e.flags===t.flags;if(e.valueOf!==Object.prototype.valueOf&&typeof e.valueOf==`function`&&typeof t.valueOf==`function`)return e.valueOf()===t.valueOf();if(e.toString!==Object.prototype.toString&&typeof e.toString==`function`&&typeof t.toString==`function`)return e.toString()===t.toString();if(l=Object.keys(e),s=l.length,s!==Object.keys(t).length)return!1;for(c=s;c--!==0;)if(!Object.prototype.hasOwnProperty.call(t,l[c]))return!1;if(n&&e instanceof Element)return!1;for(c=s;c--!==0;)if(!((l[c]===`_owner`||l[c]===`__v`||l[c]===`__o`)&&e.$$typeof)&&!o(e[l[c]],t[l[c]]))return!1;return!0}return e!==e&&t!==t}t.exports=function(e,t){try{return o(e,t)}catch(e){if((e.message||``).match(/stack|recursion/i))return console.warn(`react-fast-compare cannot handle circular refs`),!1;throw e}}}}),$e=n({"../../node_modules/warning/warning.js"(e,t){var n=!1,r=function(){};n&&(i=function(e,t){var n=arguments.length;t=Array(n>1?n-1:0);for(var r=1;r2?r-2:0);for(var a=2;at.split(`-`)[0]===e?n:r),$=8,Bt=l.div({position:`absolute`,borderStyle:`solid`},({placement:e})=>{let t=0,n=0;switch(!0){case e.startsWith(`left`)||e.startsWith(`right`):n=8;break;case e.startsWith(`top`)||e.startsWith(`bottom`):t=8;break;default:}return{transform:`translate3d(${t}px, ${n}px, 0px)`}},({theme:e,color:t,placement:n})=>({bottom:`${Q(`top`,n,`${$*-1}px`,`auto`)}`,top:`${Q(`bottom`,n,`${$*-1}px`,`auto`)}`,right:`${Q(`left`,n,`${$*-1}px`,`auto`)}`,left:`${Q(`right`,n,`${$*-1}px`,`auto`)}`,borderBottomWidth:`${Q(`top`,n,`0`,$)}px`,borderTopWidth:`${Q(`bottom`,n,`0`,$)}px`,borderRightWidth:`${Q(`left`,n,`0`,$)}px`,borderLeftWidth:`${Q(`right`,n,`0`,$)}px`,borderTopColor:Q(`top`,n,e.color[t]||t||e.base===`light`?u(e.background.app):e.background.app,`transparent`),borderBottomColor:Q(`bottom`,n,e.color[t]||t||e.base===`light`?u(e.background.app):e.background.app,`transparent`),borderLeftColor:Q(`left`,n,e.color[t]||t||e.base===`light`?u(e.background.app):e.background.app,`transparent`),borderRightColor:Q(`right`,n,e.color[t]||t||e.base===`light`?u(e.background.app):e.background.app,`transparent`)})),Vt=l.div(({hidden:e})=>({display:e?`none`:`inline-block`,zIndex:2147483647,colorScheme:`light dark`}),({theme:e,color:t,hasChrome:n})=>n?{background:t&&e.color[t]||t||e.base===`light`?u(e.background.app):e.background.app,filter:` drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)) `,borderRadius:e.appBorderRadius+2,fontSize:e.typography.size.s1}:{}),Ht=U.forwardRef(({placement:e=`top`,hasChrome:t=!0,children:n,arrowProps:r={},tooltipRef:i,color:a,withArrows:o,...s},c)=>U.createElement(Vt,{"data-testid":`tooltip`,hasChrome:t,ref:c,...s,color:a},t&&o&&U.createElement(Bt,{placement:e,...r,color:a}),n)),Ht.displayName=`Tooltip`,Ut=l.div` diff --git a/storybook/static/assets/chunk-3LY4VQVK-DK6VewjT.js b/storybook/static/assets/chunk-3LY4VQVK-DyJr4LVG.js similarity index 98% rename from storybook/static/assets/chunk-3LY4VQVK-DK6VewjT.js rename to storybook/static/assets/chunk-3LY4VQVK-DyJr4LVG.js index 801cd13bd6..8dcc134032 100644 --- a/storybook/static/assets/chunk-3LY4VQVK-DK6VewjT.js +++ b/storybook/static/assets/chunk-3LY4VQVK-DyJr4LVG.js @@ -1,4 +1,4 @@ -import{n as e}from"./chunk-BneVvdWh.js";import{d as t,h as n,p as r}from"./iframe-DIiqmCNx.js";var i,a=e((()=>{n(),i=t({"../../node_modules/memoizerific/memoizerific.js"(e,t){(function(n){if(typeof e==`object`&&typeof t<`u`)t.exports=n();else if(typeof define==`function`&&define.amd)define([],n);else{var r=typeof window<`u`?window:typeof global<`u`?global:typeof self<`u`?self:this;r.memoizerific=n()}})(function(){return(function e(t,n,i){function a(s,c){if(!n[s]){if(!t[s]){var l=typeof r==`function`&&r;if(!c&&l)return l(s,!0);if(o)return o(s,!0);var u=Error(`Cannot find module '`+s+`'`);throw u.code=`MODULE_NOT_FOUND`,u}var d=n[s]={exports:{}};t[s][0].call(d.exports,function(e){var n=t[s][1][e];return a(n||e)},d,d.exports,e,t,n,i)}return n[s].exports}for(var o=typeof r==`function`&&r,s=0;s=0)return this.lastItem=this.list[t],this.list[t].val},r.prototype.set=function(e,t){var n;return this.lastItem&&this.isEqual(this.lastItem.key,e)?(this.lastItem.val=t,this):(n=this.indexOf(e),n>=0?(this.lastItem=this.list[n],this.list[n].val=t,this):(this.lastItem={key:e,val:t},this.list.push(this.lastItem),this.size++,this))},r.prototype.delete=function(e){var t;if(this.lastItem&&this.isEqual(this.lastItem.key,e)&&(this.lastItem=void 0),t=this.indexOf(e),t>=0)return this.size--,this.list.splice(t,1)[0]},r.prototype.has=function(e){var t;return this.lastItem&&this.isEqual(this.lastItem.key,e)?!0:(t=this.indexOf(e),t>=0?(this.lastItem=this.list[t],!0):!1)},r.prototype.forEach=function(e,t){var n;for(n=0;n0&&(f[d]={cacheItem:c,arg:arguments[d]},p?i(n,f):n.push(f),n.length>e&&a(n.shift())),s.wasMemoized=p,s.numArgs=d+1,u};return s.limit=e,s.wasMemoized=!1,s.cache=t,s.lru=n,s}};function i(e,t){var n=e.length,r=t.length,i,a,s;for(a=0;a=0&&(n=e[i],r=n.cacheItem.get(n.arg),!r||!r.size);i--)n.cacheItem.delete(n.arg)}function o(e,t){return e===t||e!==e&&t!==t}},{"map-or-similar":1}]},{},[3])(3)})}})}));function o(e){var t=[...arguments].slice(1),n=Array.from(typeof e==`string`?[e]:e);n[n.length-1]=n[n.length-1].replace(/\r?\n([\t ]*)$/,``);var r=n.reduce(function(e,t){var n=t.match(/\n([\t ]+|(?!\s).)/g);return n?e.concat(n.map(function(e){return e.match(/[\t ]/g)?.length??0})):e},[]);if(r.length){var i=RegExp(` +import{n as e}from"./chunk-BneVvdWh.js";import{d as t,h as n,p as r}from"./iframe-B3N_zEeP.js";var i,a=e((()=>{n(),i=t({"../../node_modules/memoizerific/memoizerific.js"(e,t){(function(n){if(typeof e==`object`&&typeof t<`u`)t.exports=n();else if(typeof define==`function`&&define.amd)define([],n);else{var r=typeof window<`u`?window:typeof global<`u`?global:typeof self<`u`?self:this;r.memoizerific=n()}})(function(){return(function e(t,n,i){function a(s,c){if(!n[s]){if(!t[s]){var l=typeof r==`function`&&r;if(!c&&l)return l(s,!0);if(o)return o(s,!0);var u=Error(`Cannot find module '`+s+`'`);throw u.code=`MODULE_NOT_FOUND`,u}var d=n[s]={exports:{}};t[s][0].call(d.exports,function(e){var n=t[s][1][e];return a(n||e)},d,d.exports,e,t,n,i)}return n[s].exports}for(var o=typeof r==`function`&&r,s=0;s=0)return this.lastItem=this.list[t],this.list[t].val},r.prototype.set=function(e,t){var n;return this.lastItem&&this.isEqual(this.lastItem.key,e)?(this.lastItem.val=t,this):(n=this.indexOf(e),n>=0?(this.lastItem=this.list[n],this.list[n].val=t,this):(this.lastItem={key:e,val:t},this.list.push(this.lastItem),this.size++,this))},r.prototype.delete=function(e){var t;if(this.lastItem&&this.isEqual(this.lastItem.key,e)&&(this.lastItem=void 0),t=this.indexOf(e),t>=0)return this.size--,this.list.splice(t,1)[0]},r.prototype.has=function(e){var t;return this.lastItem&&this.isEqual(this.lastItem.key,e)?!0:(t=this.indexOf(e),t>=0?(this.lastItem=this.list[t],!0):!1)},r.prototype.forEach=function(e,t){var n;for(n=0;n0&&(f[d]={cacheItem:c,arg:arguments[d]},p?i(n,f):n.push(f),n.length>e&&a(n.shift())),s.wasMemoized=p,s.numArgs=d+1,u};return s.limit=e,s.wasMemoized=!1,s.cache=t,s.lru=n,s}};function i(e,t){var n=e.length,r=t.length,i,a,s;for(a=0;a=0&&(n=e[i],r=n.cacheItem.get(n.arg),!r||!r.size);i--)n.cacheItem.delete(n.arg)}function o(e,t){return e===t||e!==e&&t!==t}},{"map-or-similar":1}]},{},[3])(3)})}})}));function o(e){var t=[...arguments].slice(1),n=Array.from(typeof e==`string`?[e]:e);n[n.length-1]=n[n.length-1].replace(/\r?\n([\t ]*)$/,``);var r=n.reduce(function(e,t){var n=t.match(/\n([\t ]+|(?!\s).)/g);return n?e.concat(n.map(function(e){return e.match(/[\t ]/g)?.length??0})):e},[]);if(r.length){var i=RegExp(` [ ]{`+Math.min.apply(Math,r)+`}`,`g`);n=n.map(function(e){return e.replace(i,` `)})}n[0]=n[0].replace(/^\r?\n/,``);var a=n[0];return t.forEach(function(e,t){var r=a.match(/(?:^|\n)( *)$/),i=r?r[1]:``,o=e;typeof e==`string`&&e.includes(` `)&&(o=String(e).split(` diff --git a/storybook/static/assets/chunk-RD3KTAHR-ocB0pi6q.js b/storybook/static/assets/chunk-RD3KTAHR-0PUE-gja.js similarity index 99% rename from storybook/static/assets/chunk-RD3KTAHR-ocB0pi6q.js rename to storybook/static/assets/chunk-RD3KTAHR-0PUE-gja.js index 40cb39d6b9..917779a07b 100644 --- a/storybook/static/assets/chunk-RD3KTAHR-ocB0pi6q.js +++ b/storybook/static/assets/chunk-RD3KTAHR-0PUE-gja.js @@ -1,4 +1,4 @@ -import{a as e,n as t,t as n}from"./chunk-BneVvdWh.js";import{t as r}from"./react-B_0iYUWB.js";import{a as i,c as a}from"./theming-DzOc7WGW.js";import{r as o}from"./chunk-242VQQM5-CsveGrTV.js";var s=n((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.fragment`);function r(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.Fragment=n,e.jsx=r,e.jsxs=r})),c=n(((e,t)=>{t.exports=s()}));function l(e,t){typeof e==`function`?e(t):e!=null&&(e.current=t)}function u(...e){return t=>e.forEach(e=>l(e,t))}function d(...e){return de.useCallback(u(...e),e)}function ee(e){return M.isValidElement(e)&&e.type===be}function f(e,t){let n={...t};for(let r in t){let i=e[r],a=t[r];/^on[A-Z]/.test(r)?i&&a?n[r]=(...e)=>{a(...e),i(...e)}:i&&(n[r]=i):r===`style`?n[r]={...i,...a}:r===`className`&&(n[r]=[i,a].filter(Boolean).join(` `))}return{...e,...n}}function p(e){let t=Object.getOwnPropertyDescriptor(e.props,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning;return n?e.ref:(t=Object.getOwnPropertyDescriptor(e,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning,n?e.props.ref:e.props.ref||e.ref)}function m(e,t){return he.useReducer((e,n)=>t[e][n]??e,e)}function h(e){let[t,n]=P.useState(),r=P.useRef({}),i=P.useRef(e),a=P.useRef(`none`),[o,s]=m(e?`mounted`:`unmounted`,{mounted:{UNMOUNT:`unmounted`,ANIMATION_OUT:`unmountSuspended`},unmountSuspended:{MOUNT:`mounted`,ANIMATION_END:`unmounted`},unmounted:{MOUNT:`mounted`}});return P.useEffect(()=>{let e=g(r.current);a.current=o===`mounted`?e:`none`},[o]),U(()=>{let t=r.current,n=i.current;if(n!==e){let r=a.current,o=g(t);e?s(`MOUNT`):o===`none`||t?.display===`none`?s(`UNMOUNT`):s(n&&r!==o?`ANIMATION_OUT`:`UNMOUNT`),i.current=e}},[e,s]),U(()=>{if(t){let e=e=>{let n=g(r.current).includes(e.animationName);e.target===t&&n&&pe.flushSync(()=>s(`ANIMATION_END`))},n=e=>{e.target===t&&(a.current=g(r.current))};return t.addEventListener(`animationstart`,n),t.addEventListener(`animationcancel`,e),t.addEventListener(`animationend`,e),()=>{t.removeEventListener(`animationstart`,n),t.removeEventListener(`animationcancel`,e),t.removeEventListener(`animationend`,e)}}else s(`ANIMATION_END`)},[t,s]),{isPresent:[`mounted`,`unmountSuspended`].includes(o),ref:P.useCallback(e=>{e&&(r.current=getComputedStyle(e)),n(e)},[])}}function g(e){return e?.animationName||`none`}function _(e){let t=Object.getOwnPropertyDescriptor(e.props,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning;return n?e.ref:(t=Object.getOwnPropertyDescriptor(e,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning,n?e.props.ref:e.props.ref||e.ref)}function v(e,t=[]){let n=[];function r(t,r){let i=F.createContext(r),a=n.length;n=[...n,r];function o(t){let{scope:n,children:r,...o}=t,s=n?.[e][a]||i,c=F.useMemo(()=>o,Object.values(o));return(0,ge.jsx)(s.Provider,{value:c,children:r})}function s(n,o){let s=o?.[e][a]||i,c=F.useContext(s);if(c)return c;if(r!==void 0)return r;throw Error(`\`${n}\` must be used within \`${t}\``)}return o.displayName=t+`Provider`,[o,s]}let i=()=>{let t=n.map(e=>F.createContext(e));return function(n){let r=n?.[e]||t;return F.useMemo(()=>({[`__scope${e}`]:{...n,[e]:r}}),[n,r])}};return i.scopeName=e,[r,y(i,...t)]}function y(...e){let t=e[0];if(e.length===1)return t;let n=()=>{let n=e.map(e=>({useScope:e(),scopeName:e.scopeName}));return function(e){let r=n.reduce((t,{useScope:n,scopeName:r})=>{let i=n(e)[`__scope${r}`];return{...t,...i}},{});return F.useMemo(()=>({[`__scope${t.scopeName}`]:r}),[r])}};return n.scopeName=t.scopeName,n}function b(e){let t=I.useRef(e);return I.useEffect(()=>{t.current=e}),I.useMemo(()=>(...e)=>t.current?.(...e),[])}function te(e){let t=L.useContext(xe);return e||t||`ltr`}function x(e,[t,n]){return Math.min(n,Math.max(t,e))}function S(e,t,{checkForDefaultPrevented:n=!0}={}){return function(r){if(e?.(r),n===!1||!r.defaultPrevented)return t?.(r)}}function C(e,t){return _e.useReducer((e,n)=>t[e][n]??e,e)}function w(e){return e?parseInt(e,10):0}function T(e,t){let n=e/t;return isNaN(n)?0:n}function E(e){let t=T(e.viewport,e.content),n=e.scrollbar.paddingStart+e.scrollbar.paddingEnd,r=(e.scrollbar.size-n)*t;return Math.max(r,18)}function ne(e,t,n,r=`ltr`){let i=E(n),a=i/2,o=t||a,s=i-o,c=n.scrollbar.paddingStart+o,l=n.scrollbar.size-n.scrollbar.paddingEnd-s,u=n.content-n.viewport,d=r===`ltr`?[0,u]:[u*-1,0];return ie([c,l],d)(e)}function re(e,t,n=`ltr`){let r=E(t),i=t.scrollbar.paddingStart+t.scrollbar.paddingEnd,a=t.scrollbar.size-i,o=t.content-t.viewport,s=a-r,c=x(e,n===`ltr`?[0,o]:[o*-1,0]);return ie([0,o],[0,s])(c)}function ie(e,t){return n=>{if(e[0]===e[1]||t[0]===t[1])return t[0];let r=(t[1]-t[0])/(e[1]-e[0]);return t[0]+r*(n-e[0])}}function ae(e,t){return e>0&&e()=>window.clearTimeout(r.current),[]),j.useCallback(()=>{window.clearTimeout(r.current),r.current=window.setTimeout(n,t)},[n,t])}function O(e,t){let n=b(t);U(()=>{let t=0;if(e){let r=new ResizeObserver(()=>{cancelAnimationFrame(t),t=window.requestAnimationFrame(n)});return r.observe(e),()=>{window.cancelAnimationFrame(t),r.unobserve(e)}}},[e,n])}function oe(e,t){let{asChild:n,children:r}=e;if(!n)return typeof t==`function`?t(r):t;let i=j.Children.only(r);return j.cloneElement(i,{children:typeof t==`function`?t(i.props.children):t})}async function se(e){try{await $.top?.navigator.clipboard.writeText(e)}catch{await $.navigator.clipboard.writeText(e)}}async function ce(e){let t=Q.createElement(`TEXTAREA`),n=Q.activeElement;t.value=e,Q.body.appendChild(t),t.select(),Q.execCommand(`copy`),Q.body.removeChild(t),n.focus()}function le(){return $.navigator?.clipboard?se:ce}var k,A,j,ue,M,de,N,fe,P,pe,me,he,F,ge,I,L,_e,R,ve,z,ye,B,V,be,H,U,W,xe,G,K,Se,Ce,q,we,Te,Ee,J,De,Oe,ke,Ae,Y,je,Me,Ne,Pe,Fe,X,Ie,Le,Z,Re,ze,Be,Ve,He,Ue,We,Ge,Ke,qe,Je,Ye,Xe,Ze,Q,$,Qe=t((()=>{k=e(r(),1),i(),A=e(r(),1),j=e(r(),1),ue=e(r(),1),o(),M=e(r(),1),de=e(r(),1),N=c(),fe=c(),P=e(r(),1),pe=e(o(),1),me=e(r(),1),he=e(r(),1),F=e(r(),1),ge=c(),I=e(r(),1),L=e(r(),1),c(),_e=e(r(),1),R=c(),ve=a.div(({theme:e,$flexLayout:t=!1})=>[{background:e.background.content},t?{display:`inline-flex`,marginInlineStart:`auto`,alignSelf:`flex-end`}:{position:`absolute`,bottom:0,right:0,maxWidth:`100%`,display:`flex`,zIndex:1}]),z=a.button(({theme:e})=>({margin:0,border:`0 none`,padding:`4px 10px`,cursor:`pointer`,display:`flex`,alignItems:`center`,color:e.color.defaultText,background:e.background.content,fontSize:12,lineHeight:`16px`,fontFamily:e.typography.fonts.base,fontWeight:e.typography.weight.bold,borderTop:`1px solid ${e.appBorderColor}`,borderLeft:`1px solid ${e.appBorderColor}`,marginLeft:-1,borderRadius:`4px 0 0 0`,"&:not(:last-child)":{borderRight:`1px solid ${e.appBorderColor}`},"& + *":{borderLeft:`1px solid ${e.appBorderColor}`,borderRadius:0},"&:focus":{boxShadow:`${e.color.secondary} 0 -3px 0 0 inset`,outline:`0 none`,"@media (forced-colors: active)":{outline:`1px solid highlight`}}}),({disabled:e})=>e&&{cursor:`not-allowed`,opacity:.5}),z.displayName=`ActionButton`,ye=({actionItems:e,flexLayout:t=!1,...n})=>k.createElement(ve,{...n,$flexLayout:t},e.map(({title:e,className:t,onClick:n,disabled:r},i)=>k.createElement(z,{key:i,className:t,onClick:n,disabled:!!r},e))),B=M.forwardRef((e,t)=>{let{children:n,...r}=e,i=M.Children.toArray(n),a=i.find(ee);if(a){let e=a.props.children,n=i.map(t=>t===a?M.Children.count(e)>1?M.Children.only(null):M.isValidElement(e)?e.props.children:null:t);return(0,N.jsx)(V,{...r,ref:t,children:M.isValidElement(e)?M.cloneElement(e,void 0,n):null})}return(0,N.jsx)(V,{...r,ref:t,children:n})}),B.displayName=`Slot`,V=M.forwardRef((e,t)=>{let{children:n,...r}=e;if(M.isValidElement(n)){let e=p(n);return M.cloneElement(n,{...f(r,n.props),ref:t?u(t,e):e})}return M.Children.count(n)>1?M.Children.only(null):null}),V.displayName=`SlotClone`,be=({children:e})=>(0,N.jsx)(N.Fragment,{children:e}),H=[`a`,`button`,`div`,`form`,`h2`,`h3`,`img`,`input`,`label`,`li`,`nav`,`ol`,`p`,`span`,`svg`,`ul`].reduce((e,t)=>{let n=ue.forwardRef((e,n)=>{let{asChild:r,...i}=e,a=r?B:t;return typeof window<`u`&&(window[Symbol.for(`radix-ui`)]=!0),(0,fe.jsx)(a,{...i,ref:n})});return n.displayName=`Primitive.${t}`,{...e,[t]:n}},{}),U=globalThis?.document?me.useLayoutEffect:()=>{},W=e=>{let{present:t,children:n}=e,r=h(t),i=typeof n==`function`?n({present:r.isPresent}):P.Children.only(n),a=d(r.ref,_(i));return typeof n==`function`||r.isPresent?P.cloneElement(i,{ref:a}):null},W.displayName=`Presence`,xe=L.createContext(void 0),G=`ScrollArea`,[K,Se]=v(G),[Ce,q]=K(G),we=j.forwardRef((e,t)=>{let{__scopeScrollArea:n,type:r=`hover`,dir:i,scrollHideDelay:a=600,...o}=e,[s,c]=j.useState(null),[l,u]=j.useState(null),[ee,f]=j.useState(null),[p,m]=j.useState(null),[h,g]=j.useState(null),[_,v]=j.useState(0),[y,b]=j.useState(0),[x,S]=j.useState(!1),[C,w]=j.useState(!1),T=d(t,e=>c(e)),E=te(i);return(0,R.jsx)(Ce,{scope:n,type:r,dir:E,scrollHideDelay:a,scrollArea:s,viewport:l,onViewportChange:u,content:ee,onContentChange:f,scrollbarX:p,onScrollbarXChange:m,scrollbarXEnabled:x,onScrollbarXEnabledChange:S,scrollbarY:h,onScrollbarYChange:g,scrollbarYEnabled:C,onScrollbarYEnabledChange:w,onCornerWidthChange:v,onCornerHeightChange:b,children:(0,R.jsx)(H.div,{dir:E,...o,ref:T,style:{position:`relative`,"--radix-scroll-area-corner-width":_+`px`,"--radix-scroll-area-corner-height":y+`px`,...e.style}})})}),we.displayName=G,Te=`ScrollAreaViewport`,Ee=j.forwardRef((e,t)=>{let{__scopeScrollArea:n,children:r,asChild:i,nonce:a,...o}=e,s=q(Te,n),c=d(t,j.useRef(null),s.onViewportChange);return(0,R.jsxs)(R.Fragment,{children:[(0,R.jsx)(`style`,{dangerouslySetInnerHTML:{__html:` +import{a as e,n as t,t as n}from"./chunk-BneVvdWh.js";import{t as r}from"./react-B_0iYUWB.js";import{a as i,c as a}from"./theming-DLWRz99i.js";import{r as o}from"./chunk-242VQQM5-CsveGrTV.js";var s=n((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.fragment`);function r(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.Fragment=n,e.jsx=r,e.jsxs=r})),c=n(((e,t)=>{t.exports=s()}));function l(e,t){typeof e==`function`?e(t):e!=null&&(e.current=t)}function u(...e){return t=>e.forEach(e=>l(e,t))}function d(...e){return de.useCallback(u(...e),e)}function ee(e){return M.isValidElement(e)&&e.type===be}function f(e,t){let n={...t};for(let r in t){let i=e[r],a=t[r];/^on[A-Z]/.test(r)?i&&a?n[r]=(...e)=>{a(...e),i(...e)}:i&&(n[r]=i):r===`style`?n[r]={...i,...a}:r===`className`&&(n[r]=[i,a].filter(Boolean).join(` `))}return{...e,...n}}function p(e){let t=Object.getOwnPropertyDescriptor(e.props,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning;return n?e.ref:(t=Object.getOwnPropertyDescriptor(e,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning,n?e.props.ref:e.props.ref||e.ref)}function m(e,t){return he.useReducer((e,n)=>t[e][n]??e,e)}function h(e){let[t,n]=P.useState(),r=P.useRef({}),i=P.useRef(e),a=P.useRef(`none`),[o,s]=m(e?`mounted`:`unmounted`,{mounted:{UNMOUNT:`unmounted`,ANIMATION_OUT:`unmountSuspended`},unmountSuspended:{MOUNT:`mounted`,ANIMATION_END:`unmounted`},unmounted:{MOUNT:`mounted`}});return P.useEffect(()=>{let e=g(r.current);a.current=o===`mounted`?e:`none`},[o]),U(()=>{let t=r.current,n=i.current;if(n!==e){let r=a.current,o=g(t);e?s(`MOUNT`):o===`none`||t?.display===`none`?s(`UNMOUNT`):s(n&&r!==o?`ANIMATION_OUT`:`UNMOUNT`),i.current=e}},[e,s]),U(()=>{if(t){let e=e=>{let n=g(r.current).includes(e.animationName);e.target===t&&n&&pe.flushSync(()=>s(`ANIMATION_END`))},n=e=>{e.target===t&&(a.current=g(r.current))};return t.addEventListener(`animationstart`,n),t.addEventListener(`animationcancel`,e),t.addEventListener(`animationend`,e),()=>{t.removeEventListener(`animationstart`,n),t.removeEventListener(`animationcancel`,e),t.removeEventListener(`animationend`,e)}}else s(`ANIMATION_END`)},[t,s]),{isPresent:[`mounted`,`unmountSuspended`].includes(o),ref:P.useCallback(e=>{e&&(r.current=getComputedStyle(e)),n(e)},[])}}function g(e){return e?.animationName||`none`}function _(e){let t=Object.getOwnPropertyDescriptor(e.props,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning;return n?e.ref:(t=Object.getOwnPropertyDescriptor(e,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning,n?e.props.ref:e.props.ref||e.ref)}function v(e,t=[]){let n=[];function r(t,r){let i=F.createContext(r),a=n.length;n=[...n,r];function o(t){let{scope:n,children:r,...o}=t,s=n?.[e][a]||i,c=F.useMemo(()=>o,Object.values(o));return(0,ge.jsx)(s.Provider,{value:c,children:r})}function s(n,o){let s=o?.[e][a]||i,c=F.useContext(s);if(c)return c;if(r!==void 0)return r;throw Error(`\`${n}\` must be used within \`${t}\``)}return o.displayName=t+`Provider`,[o,s]}let i=()=>{let t=n.map(e=>F.createContext(e));return function(n){let r=n?.[e]||t;return F.useMemo(()=>({[`__scope${e}`]:{...n,[e]:r}}),[n,r])}};return i.scopeName=e,[r,y(i,...t)]}function y(...e){let t=e[0];if(e.length===1)return t;let n=()=>{let n=e.map(e=>({useScope:e(),scopeName:e.scopeName}));return function(e){let r=n.reduce((t,{useScope:n,scopeName:r})=>{let i=n(e)[`__scope${r}`];return{...t,...i}},{});return F.useMemo(()=>({[`__scope${t.scopeName}`]:r}),[r])}};return n.scopeName=t.scopeName,n}function b(e){let t=I.useRef(e);return I.useEffect(()=>{t.current=e}),I.useMemo(()=>(...e)=>t.current?.(...e),[])}function te(e){let t=L.useContext(xe);return e||t||`ltr`}function x(e,[t,n]){return Math.min(n,Math.max(t,e))}function S(e,t,{checkForDefaultPrevented:n=!0}={}){return function(r){if(e?.(r),n===!1||!r.defaultPrevented)return t?.(r)}}function C(e,t){return _e.useReducer((e,n)=>t[e][n]??e,e)}function w(e){return e?parseInt(e,10):0}function T(e,t){let n=e/t;return isNaN(n)?0:n}function E(e){let t=T(e.viewport,e.content),n=e.scrollbar.paddingStart+e.scrollbar.paddingEnd,r=(e.scrollbar.size-n)*t;return Math.max(r,18)}function ne(e,t,n,r=`ltr`){let i=E(n),a=i/2,o=t||a,s=i-o,c=n.scrollbar.paddingStart+o,l=n.scrollbar.size-n.scrollbar.paddingEnd-s,u=n.content-n.viewport,d=r===`ltr`?[0,u]:[u*-1,0];return ie([c,l],d)(e)}function re(e,t,n=`ltr`){let r=E(t),i=t.scrollbar.paddingStart+t.scrollbar.paddingEnd,a=t.scrollbar.size-i,o=t.content-t.viewport,s=a-r,c=x(e,n===`ltr`?[0,o]:[o*-1,0]);return ie([0,o],[0,s])(c)}function ie(e,t){return n=>{if(e[0]===e[1]||t[0]===t[1])return t[0];let r=(t[1]-t[0])/(e[1]-e[0]);return t[0]+r*(n-e[0])}}function ae(e,t){return e>0&&e()=>window.clearTimeout(r.current),[]),j.useCallback(()=>{window.clearTimeout(r.current),r.current=window.setTimeout(n,t)},[n,t])}function O(e,t){let n=b(t);U(()=>{let t=0;if(e){let r=new ResizeObserver(()=>{cancelAnimationFrame(t),t=window.requestAnimationFrame(n)});return r.observe(e),()=>{window.cancelAnimationFrame(t),r.unobserve(e)}}},[e,n])}function oe(e,t){let{asChild:n,children:r}=e;if(!n)return typeof t==`function`?t(r):t;let i=j.Children.only(r);return j.cloneElement(i,{children:typeof t==`function`?t(i.props.children):t})}async function se(e){try{await $.top?.navigator.clipboard.writeText(e)}catch{await $.navigator.clipboard.writeText(e)}}async function ce(e){let t=Q.createElement(`TEXTAREA`),n=Q.activeElement;t.value=e,Q.body.appendChild(t),t.select(),Q.execCommand(`copy`),Q.body.removeChild(t),n.focus()}function le(){return $.navigator?.clipboard?se:ce}var k,A,j,ue,M,de,N,fe,P,pe,me,he,F,ge,I,L,_e,R,ve,z,ye,B,V,be,H,U,W,xe,G,K,Se,Ce,q,we,Te,Ee,J,De,Oe,ke,Ae,Y,je,Me,Ne,Pe,Fe,X,Ie,Le,Z,Re,ze,Be,Ve,He,Ue,We,Ge,Ke,qe,Je,Ye,Xe,Ze,Q,$,Qe=t((()=>{k=e(r(),1),i(),A=e(r(),1),j=e(r(),1),ue=e(r(),1),o(),M=e(r(),1),de=e(r(),1),N=c(),fe=c(),P=e(r(),1),pe=e(o(),1),me=e(r(),1),he=e(r(),1),F=e(r(),1),ge=c(),I=e(r(),1),L=e(r(),1),c(),_e=e(r(),1),R=c(),ve=a.div(({theme:e,$flexLayout:t=!1})=>[{background:e.background.content},t?{display:`inline-flex`,marginInlineStart:`auto`,alignSelf:`flex-end`}:{position:`absolute`,bottom:0,right:0,maxWidth:`100%`,display:`flex`,zIndex:1}]),z=a.button(({theme:e})=>({margin:0,border:`0 none`,padding:`4px 10px`,cursor:`pointer`,display:`flex`,alignItems:`center`,color:e.color.defaultText,background:e.background.content,fontSize:12,lineHeight:`16px`,fontFamily:e.typography.fonts.base,fontWeight:e.typography.weight.bold,borderTop:`1px solid ${e.appBorderColor}`,borderLeft:`1px solid ${e.appBorderColor}`,marginLeft:-1,borderRadius:`4px 0 0 0`,"&:not(:last-child)":{borderRight:`1px solid ${e.appBorderColor}`},"& + *":{borderLeft:`1px solid ${e.appBorderColor}`,borderRadius:0},"&:focus":{boxShadow:`${e.color.secondary} 0 -3px 0 0 inset`,outline:`0 none`,"@media (forced-colors: active)":{outline:`1px solid highlight`}}}),({disabled:e})=>e&&{cursor:`not-allowed`,opacity:.5}),z.displayName=`ActionButton`,ye=({actionItems:e,flexLayout:t=!1,...n})=>k.createElement(ve,{...n,$flexLayout:t},e.map(({title:e,className:t,onClick:n,disabled:r},i)=>k.createElement(z,{key:i,className:t,onClick:n,disabled:!!r},e))),B=M.forwardRef((e,t)=>{let{children:n,...r}=e,i=M.Children.toArray(n),a=i.find(ee);if(a){let e=a.props.children,n=i.map(t=>t===a?M.Children.count(e)>1?M.Children.only(null):M.isValidElement(e)?e.props.children:null:t);return(0,N.jsx)(V,{...r,ref:t,children:M.isValidElement(e)?M.cloneElement(e,void 0,n):null})}return(0,N.jsx)(V,{...r,ref:t,children:n})}),B.displayName=`Slot`,V=M.forwardRef((e,t)=>{let{children:n,...r}=e;if(M.isValidElement(n)){let e=p(n);return M.cloneElement(n,{...f(r,n.props),ref:t?u(t,e):e})}return M.Children.count(n)>1?M.Children.only(null):null}),V.displayName=`SlotClone`,be=({children:e})=>(0,N.jsx)(N.Fragment,{children:e}),H=[`a`,`button`,`div`,`form`,`h2`,`h3`,`img`,`input`,`label`,`li`,`nav`,`ol`,`p`,`span`,`svg`,`ul`].reduce((e,t)=>{let n=ue.forwardRef((e,n)=>{let{asChild:r,...i}=e,a=r?B:t;return typeof window<`u`&&(window[Symbol.for(`radix-ui`)]=!0),(0,fe.jsx)(a,{...i,ref:n})});return n.displayName=`Primitive.${t}`,{...e,[t]:n}},{}),U=globalThis?.document?me.useLayoutEffect:()=>{},W=e=>{let{present:t,children:n}=e,r=h(t),i=typeof n==`function`?n({present:r.isPresent}):P.Children.only(n),a=d(r.ref,_(i));return typeof n==`function`||r.isPresent?P.cloneElement(i,{ref:a}):null},W.displayName=`Presence`,xe=L.createContext(void 0),G=`ScrollArea`,[K,Se]=v(G),[Ce,q]=K(G),we=j.forwardRef((e,t)=>{let{__scopeScrollArea:n,type:r=`hover`,dir:i,scrollHideDelay:a=600,...o}=e,[s,c]=j.useState(null),[l,u]=j.useState(null),[ee,f]=j.useState(null),[p,m]=j.useState(null),[h,g]=j.useState(null),[_,v]=j.useState(0),[y,b]=j.useState(0),[x,S]=j.useState(!1),[C,w]=j.useState(!1),T=d(t,e=>c(e)),E=te(i);return(0,R.jsx)(Ce,{scope:n,type:r,dir:E,scrollHideDelay:a,scrollArea:s,viewport:l,onViewportChange:u,content:ee,onContentChange:f,scrollbarX:p,onScrollbarXChange:m,scrollbarXEnabled:x,onScrollbarXEnabledChange:S,scrollbarY:h,onScrollbarYChange:g,scrollbarYEnabled:C,onScrollbarYEnabledChange:w,onCornerWidthChange:v,onCornerHeightChange:b,children:(0,R.jsx)(H.div,{dir:E,...o,ref:T,style:{position:`relative`,"--radix-scroll-area-corner-width":_+`px`,"--radix-scroll-area-corner-height":y+`px`,...e.style}})})}),we.displayName=G,Te=`ScrollAreaViewport`,Ee=j.forwardRef((e,t)=>{let{__scopeScrollArea:n,children:r,asChild:i,nonce:a,...o}=e,s=q(Te,n),c=d(t,j.useRef(null),s.onViewportChange);return(0,R.jsxs)(R.Fragment,{children:[(0,R.jsx)(`style`,{dangerouslySetInnerHTML:{__html:` [data-radix-scroll-area-viewport] { scrollbar-width: none; -ms-overflow-style: none; diff --git a/storybook/static/assets/components-DTTvQz4L.js b/storybook/static/assets/components-DW-5dJuS.js similarity index 74% rename from storybook/static/assets/components-DTTvQz4L.js rename to storybook/static/assets/components-DW-5dJuS.js index cb0e6c075c..51057acae2 100644 --- a/storybook/static/assets/components-DTTvQz4L.js +++ b/storybook/static/assets/components-DW-5dJuS.js @@ -1,5 +1,5 @@ -const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./theming-DzOc7WGW.js","./chunk-BneVvdWh.js","./iframe-DIiqmCNx.js","./preload-helper-CV6hqhE5.js","./react-B_0iYUWB.js","./chunk-3LY4VQVK-DK6VewjT.js","./syntaxhighlighter-OH4MV7E3-D4h-bfW0.js","./chunk-242VQQM5-CsveGrTV.js","./chunk-RD3KTAHR-ocB0pi6q.js","./formatter-EIJCOSYU-B024mPvu.js","./WithTooltip-65CFNBJE-BwYBYwM9.js"])))=>i.map(i=>d[i]); -import{a as e,n as t,r as n,t as r}from"./chunk-BneVvdWh.js";import{n as i,t as a}from"./preload-helper-CV6hqhE5.js";import{C as o,S as s,_ as c,b as l,c as u,d,f,g as p,h as m,m as h,s as g,v as _,x as v,y}from"./iframe-DIiqmCNx.js";import{t as b}from"./react-B_0iYUWB.js";import{C as x,S,_ as C,a as w,b as T,c as E,d as D,f as O,g as k,i as ee,m as A,o as j,p as te,s as M,u as ne,v as re,x as ie,y as ae}from"./theming-DzOc7WGW.js";import{i as oe,n as se,r as ce,t as le}from"./chunk-3LY4VQVK-DK6VewjT.js";import{n as ue,r as de,t as fe}from"./chunk-242VQQM5-CsveGrTV.js";import{a as pe,i as me,n as he,r as ge}from"./chunk-RD3KTAHR-ocB0pi6q.js";function _e(){try{return!!globalThis.__vitest_browser__||!!globalThis.window?.navigator?.userAgent?.match(/StorybookTestRunner/)}catch{return!1}}var ve=t((()=>{})),N,ye,be,xe,Se,Ce,we,Te,Ee,De,Oe,ke,Ae,je,Me,Ne,Pe,Fe,Ie,Le,Re,ze,Be,Ve,He=t((()=>{N=e(b(),1),ye=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M6 3.5a.5.5 0 01.5.5v1.5H8a.5.5 0 010 1H6.5V8a.5.5 0 01-1 0V6.5H4a.5.5 0 010-1h1.5V4a.5.5 0 01.5-.5z`,fill:e}),N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M9.544 10.206a5.5 5.5 0 11.662-.662.5.5 0 01.148.102l3 3a.5.5 0 01-.708.708l-3-3a.5.5 0 01-.102-.148zM10.5 6a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z`,fill:e}))),be=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M4 5.5a.5.5 0 000 1h4a.5.5 0 000-1H4z`,fill:e}),N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M6 11.5c1.35 0 2.587-.487 3.544-1.294a.5.5 0 00.102.148l3 3a.5.5 0 00.708-.708l-3-3a.5.5 0 00-.148-.102A5.5 5.5 0 106 11.5zm0-1a4.5 4.5 0 100-9 4.5 4.5 0 000 9z`,fill:e}))),xe=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M1.5 2.837V1.5a.5.5 0 00-1 0V4a.5.5 0 00.5.5h2.5a.5.5 0 000-1H2.258a4.5 4.5 0 11-.496 4.016.5.5 0 10-.942.337 5.502 5.502 0 008.724 2.353.5.5 0 00.102.148l3 3a.5.5 0 00.708-.708l-3-3a.5.5 0 00-.148-.102A5.5 5.5 0 101.5 2.837z`,fill:e}))),Se=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M10.139 8.725l1.36-1.323a.568.568 0 00.151-.54.534.534 0 00-.377-.396l-2.705-.708 2.22-4.976a.568.568 0 00-.15-.666.497.497 0 00-.648.008L5.464 4.05l.708.71 2.848-2.47-1.64 3.677.697.697 2.164.567-.81.787.708.708zM2.523 6.6a.566.566 0 00-.177.544.534.534 0 00.382.41l2.782.721-1.494 5.013a.563.563 0 00.217.627.496.496 0 00.629-.06l3.843-3.736-.708-.707-2.51 2.44 1.137-3.814-.685-.685-2.125-.55.844-.731-.71-.71L2.524 6.6zM1.854 1.146a.5.5 0 10-.708.708l11 11a.5.5 0 00.708-.708l-11-11z`,fill:e}))),Ce=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M4 5.5a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5zM4.5 7.5a.5.5 0 000 1h5a.5.5 0 000-1h-5zM4 10.5a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5z`,fill:e}),N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M1.5 0a.5.5 0 00-.5.5v13a.5.5 0 00.5.5h11a.5.5 0 00.5-.5V3.207a.5.5 0 00-.146-.353L10.146.146A.5.5 0 009.793 0H1.5zM2 1h7.5v2a.5.5 0 00.5.5h2V13H2V1z`,fill:e}))),we=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 15`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M11.746.07A.5.5 0 0011.5.003h-6a.5.5 0 00-.5.5v2.5H.5a.5.5 0 00-.5.5v10a.5.5 0 00.5.5h8a.5.5 0 00.5-.5v-2.5h4.5a.5.5 0 00.5-.5v-8a.498.498 0 00-.15-.357L11.857.154a.506.506 0 00-.11-.085zM9 10.003h4v-7h-1.5a.5.5 0 01-.5-.5v-1.5H6v2h.5a.5.5 0 01.357.15L8.85 5.147c.093.09.15.217.15.357v4.5zm-8-6v9h7v-7H6.5a.5.5 0 01-.5-.5v-1.5H1z`,fill:e}))),Te=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M8.982 1.632a.5.5 0 00-.964-.263l-3 11a.5.5 0 10.964.263l3-11zM3.32 3.616a.5.5 0 01.064.704L1.151 7l2.233 2.68a.5.5 0 11-.768.64l-2.5-3a.5.5 0 010-.64l2.5-3a.5.5 0 01.704-.064zM10.68 3.616a.5.5 0 00-.064.704L12.849 7l-2.233 2.68a.5.5 0 00.768.64l2.5-3a.5.5 0 000-.64l-2.5-3a.5.5 0 00-.704-.064z`,fill:e}))),Ee=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M13.854 2.146l-2-2a.5.5 0 00-.708 0l-1.5 1.5-8.995 8.995a.499.499 0 00-.143.268L.012 13.39a.495.495 0 00.135.463.5.5 0 00.462.134l2.482-.496a.495.495 0 00.267-.143l8.995-8.995 1.5-1.5a.5.5 0 000-.708zM12 3.293l.793-.793L11.5 1.207 10.707 2 12 3.293zm-2-.586L1.707 11 3 12.293 11.293 4 10 2.707zM1.137 12.863l.17-.849.679.679-.849.17z`,fill:e}))),De=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M1.854 1.146a.5.5 0 10-.708.708L6.293 7l-5.147 5.146a.5.5 0 00.708.708L7 7.707l5.146 5.147a.5.5 0 00.708-.708L7.707 7l5.147-5.146a.5.5 0 00-.708-.708L7 6.293 1.854 1.146z`,fill:e}))),Oe=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M7 3a.5.5 0 01.5.5v3h3a.5.5 0 010 1h-3v3a.5.5 0 01-1 0v-3h-3a.5.5 0 010-1h3v-3A.5.5 0 017 3z`,fill:e}),N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z`,fill:e}))),ke=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M3.5 6.5a.5.5 0 000 1h7a.5.5 0 000-1h-7z`,fill:e}),N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M14 7A7 7 0 110 7a7 7 0 0114 0zm-1 0A6 6 0 111 7a6 6 0 0112 0z`,fill:e}))),Ae=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M9.854 4.146a.5.5 0 010 .708L7.707 7l2.147 2.146a.5.5 0 01-.708.708L7 7.707 4.854 9.854a.5.5 0 01-.708-.708L6.293 7 4.146 4.854a.5.5 0 11.708-.708L7 6.293l2.146-2.147a.5.5 0 01.708 0z`,fill:e}),N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z`,fill:e}))),je=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M7 14A7 7 0 107 0a7 7 0 000 14zm2.854-9.854a.5.5 0 010 .708L7.707 7l2.147 2.146a.5.5 0 01-.708.708L7 7.707 4.854 9.854a.5.5 0 01-.708-.708L6.293 7 4.146 4.854a.5.5 0 11.708-.708L7 6.293l2.146-2.147a.5.5 0 01.708 0z`,fill:e}))),Me=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M11.841 2.159a2.25 2.25 0 00-3.182 0l-2.5 2.5a2.25 2.25 0 000 3.182.5.5 0 01-.707.707 3.25 3.25 0 010-4.596l2.5-2.5a3.25 3.25 0 014.596 4.596l-2.063 2.063a4.27 4.27 0 00-.094-1.32l1.45-1.45a2.25 2.25 0 000-3.182z`,fill:e}),N.createElement(`path`,{d:`M3.61 7.21c-.1-.434-.132-.88-.095-1.321L1.452 7.952a3.25 3.25 0 104.596 4.596l2.5-2.5a3.25 3.25 0 000-4.596.5.5 0 00-.707.707 2.25 2.25 0 010 3.182l-2.5 2.5A2.25 2.25 0 112.159 8.66l1.45-1.45z`,fill:e}))),Ne=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M2 1.004a1 1 0 00-1 1v10a1 1 0 001 1h10a1 1 0 001-1v-4.5a.5.5 0 00-1 0v4.5H2v-10h4.5a.5.5 0 000-1H2z`,fill:e}),N.createElement(`path`,{d:`M7.354 7.357L12 2.711v1.793a.5.5 0 001 0v-3a.5.5 0 00-.5-.5h-3a.5.5 0 100 1h1.793L6.646 6.65a.5.5 0 10.708.707z`,fill:e}))),Pe=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M1.146 4.604l5.5 5.5a.5.5 0 00.708 0l5.5-5.5a.5.5 0 00-.708-.708L7 9.043 1.854 3.896a.5.5 0 10-.708.708z`,fill:e}))),Fe=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M11.104 7.354l-5.5 5.5a.5.5 0 01-.708-.708L10.043 7 4.896 1.854a.5.5 0 11.708-.708l5.5 5.5a.5.5 0 010 .708z`,fill:e}))),Ie=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M3.854 9.104a.5.5 0 11-.708-.708l3.5-3.5a.5.5 0 01.708 0l3.5 3.5a.5.5 0 01-.708.708L7 5.957 3.854 9.104z`,fill:e}))),Le=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M3.854 4.896a.5.5 0 10-.708.708l3.5 3.5a.5.5 0 00.708 0l3.5-3.5a.5.5 0 00-.708-.708L7 8.043 3.854 4.896z`,fill:e}))),Re=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M9.104 10.146a.5.5 0 01-.708.708l-3.5-3.5a.5.5 0 010-.708l3.5-3.5a.5.5 0 11.708.708L5.957 7l3.147 3.146z`,fill:e}))),ze=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M4.896 10.146a.5.5 0 00.708.708l3.5-3.5a.5.5 0 000-.708l-3.5-3.5a.5.5 0 10-.708.708L8.043 7l-3.147 3.146z`,fill:e}))),Be=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M1.146 3.854a.5.5 0 010-.708l2-2a.5.5 0 11.708.708L2.707 3h6.295A4 4 0 019 11H3a.5.5 0 010-1h6a3 3 0 100-6H2.707l1.147 1.146a.5.5 0 11-.708.708l-2-2z`,fill:e}))),Ve=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M7.092.5H7a6.5 6.5 0 106.41 7.583.5.5 0 10-.986-.166A5.495 5.495 0 017 12.5a5.5 5.5 0 010-11h.006a5.5 5.5 0 014.894 3H10a.5.5 0 000 1h3a.5.5 0 00.5-.5V2a.5.5 0 00-1 0v1.535A6.495 6.495 0 007.092.5z`,fill:e})))}));function Ue(e){let t=Yt.filter(t=>e[t]!==void 0).reduce((t,n)=>(t[n]=e[n],t),{});if(e instanceof CustomEvent)for(let n of Xt.filter(t=>e[t]!==void 0))t[n]=e[n];return t}function We(e){return typeof e==`object`&&!!e&&Array.isArray(e)===!1}function Ge(e){var t=Kn.call(e,Jn),n=e[Jn];try{e[Jn]=void 0;var r=!0}catch{}var i=qn.call(e);return r&&(t?e[Jn]=n:delete e[Jn]),i}function Ke(e){return Xn.call(e)}function qe(e){return e==null?e===void 0?$n:Qn:er&&er in Object(e)?Yn(e):Zn(e)}function Je(e){return typeof e==`object`&&!!e}function Ye(e){return typeof e==`symbol`||nr(e)&&tr(e)==rr}function Xe(e,t){for(var n=-1,r=e==null?0:e.length,i=Array(r);++n-1}function vt(e,t){var n=this.__data__,r=Jr(n,e);return r<0?(++this.size,n.push([e,t])):n[r][1]=t,this}function yt(e){var t=-1,n=e==null?0:e.length;for(this.clear();++t{try{t[r]&&t[r].toJSON,e[r]=t[r]}catch{n=!0}return e},{}),n?t:e}var It,Lt,Rt,zt,Bt,Vt,Ht,Ut,Wt,Gt,Kt,P,qt,Jt,Yt,Xt,Zt,Qt,$t,en,tn,nn,rn,an,on,sn,cn,ln,un,dn,fn,pn,mn,hn,gn,_n,vn,yn,bn,xn,Sn,Cn,wn,Tn,En,Dn,On,kn,An,jn,Mn,Nn,Pn,Fn,In,Ln,Rn,zn,Bn,Vn,Hn,Un,Wn,Gn,Kn,qn,Jn,Yn,Xn,Zn,Qn,$n,er,tr,nr,rr,ir,ar,or,sr,cr,lr,ur,dr,fr,pr,mr,hr,gr,_r,vr,yr,br,xr,Sr,Cr,wr,Tr,Er,Dr,Or,kr,Ar,jr,Mr,Nr,Pr,Fr,Ir,Lr,Rr,zr,Br,Vr,Hr,Ur,Wr,Gr,Kr,qr,Jr,Yr,Xr,Zr,Qr,$r,ei,ti,ni,ri,ii,ai,oi,si,ci,li,ui,di,fi,pi,mi,hi,gi,_i,vi,yi,bi,xi,Si,Ci,wi,Ti,Ei,Di,Oi,ki,Ai,ji,Mi=t((()=>{se(),It=new Map,Lt=`UNIVERSAL_STORE:`,Rt={PENDING:`PENDING`,RESOLVED:`RESOLVED`,REJECTED:`REJECTED`},zt=class e{constructor(t,n){if(this.debugging=!1,this.listeners=new Map([[`*`,new Set]]),this.getState=()=>(this.debug(`getState`,{state:this.state}),this.state),this.subscribe=(e,t)=>{let n=typeof e==`function`,r=n?`*`:e,i=n?e:t;if(this.debug(`subscribe`,{eventType:r,listener:i}),!i)throw TypeError(`Missing first subscribe argument, or second if first is the event type, when subscribing to a UniversalStore with id '${this.id}'`);return this.listeners.has(r)||this.listeners.set(r,new Set),this.listeners.get(r).add(i),()=>{this.debug(`unsubscribe`,{eventType:r,listener:i}),this.listeners.has(r)&&(this.listeners.get(r).delete(i),this.listeners.get(r)?.size===0&&this.listeners.delete(r))}},this.send=t=>{if(this.debug(`send`,{event:t}),this.status!==e.Status.READY)throw TypeError(le`Cannot send event before store is ready. You can get the current status with store.status, +const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./theming-DLWRz99i.js","./chunk-BneVvdWh.js","./iframe-B3N_zEeP.js","./preload-helper-CV6hqhE5.js","./iframe-kvNOWOmU.css","./react-B_0iYUWB.js","./chunk-3LY4VQVK-DyJr4LVG.js","./syntaxhighlighter-OH4MV7E3-DFku4BmC.js","./chunk-242VQQM5-CsveGrTV.js","./chunk-RD3KTAHR-0PUE-gja.js","./formatter-EIJCOSYU-CVNaCVyv.js","./WithTooltip-65CFNBJE-DKdOiCBU.js"])))=>i.map(i=>d[i]); +import{a as e,n as t,r as n,t as r}from"./chunk-BneVvdWh.js";import{n as i,t as a}from"./preload-helper-CV6hqhE5.js";import{C as o,S as s,_ as c,b as l,c as u,d,f,g as p,h as m,m as h,s as g,v as _,x as v,y}from"./iframe-B3N_zEeP.js";import{t as b}from"./react-B_0iYUWB.js";import{C as x,S,_ as C,a as w,b as T,c as E,d as D,f as O,g as k,i as ee,m as A,o as j,p as te,s as M,u as ne,v as re,x as ie,y as ae}from"./theming-DLWRz99i.js";import{i as oe,n as se,r as ce,t as le}from"./chunk-3LY4VQVK-DyJr4LVG.js";import{n as ue,r as de,t as fe}from"./chunk-242VQQM5-CsveGrTV.js";import{a as pe,i as me,n as he,r as ge}from"./chunk-RD3KTAHR-0PUE-gja.js";function _e(){try{return!!globalThis.__vitest_browser__||!!globalThis.window?.navigator?.userAgent?.match(/StorybookTestRunner/)}catch{return!1}}var ve=t((()=>{})),N,ye,be,xe,Se,Ce,we,Te,Ee,De,Oe,ke,Ae,je,Me,Ne,Pe,Fe,Ie,Le,Re,ze,Be,Ve,He=t((()=>{N=e(b(),1),ye=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M6 3.5a.5.5 0 01.5.5v1.5H8a.5.5 0 010 1H6.5V8a.5.5 0 01-1 0V6.5H4a.5.5 0 010-1h1.5V4a.5.5 0 01.5-.5z`,fill:e}),N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M9.544 10.206a5.5 5.5 0 11.662-.662.5.5 0 01.148.102l3 3a.5.5 0 01-.708.708l-3-3a.5.5 0 01-.102-.148zM10.5 6a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z`,fill:e}))),be=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M4 5.5a.5.5 0 000 1h4a.5.5 0 000-1H4z`,fill:e}),N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M6 11.5c1.35 0 2.587-.487 3.544-1.294a.5.5 0 00.102.148l3 3a.5.5 0 00.708-.708l-3-3a.5.5 0 00-.148-.102A5.5 5.5 0 106 11.5zm0-1a4.5 4.5 0 100-9 4.5 4.5 0 000 9z`,fill:e}))),xe=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M1.5 2.837V1.5a.5.5 0 00-1 0V4a.5.5 0 00.5.5h2.5a.5.5 0 000-1H2.258a4.5 4.5 0 11-.496 4.016.5.5 0 10-.942.337 5.502 5.502 0 008.724 2.353.5.5 0 00.102.148l3 3a.5.5 0 00.708-.708l-3-3a.5.5 0 00-.148-.102A5.5 5.5 0 101.5 2.837z`,fill:e}))),Se=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M10.139 8.725l1.36-1.323a.568.568 0 00.151-.54.534.534 0 00-.377-.396l-2.705-.708 2.22-4.976a.568.568 0 00-.15-.666.497.497 0 00-.648.008L5.464 4.05l.708.71 2.848-2.47-1.64 3.677.697.697 2.164.567-.81.787.708.708zM2.523 6.6a.566.566 0 00-.177.544.534.534 0 00.382.41l2.782.721-1.494 5.013a.563.563 0 00.217.627.496.496 0 00.629-.06l3.843-3.736-.708-.707-2.51 2.44 1.137-3.814-.685-.685-2.125-.55.844-.731-.71-.71L2.524 6.6zM1.854 1.146a.5.5 0 10-.708.708l11 11a.5.5 0 00.708-.708l-11-11z`,fill:e}))),Ce=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M4 5.5a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5zM4.5 7.5a.5.5 0 000 1h5a.5.5 0 000-1h-5zM4 10.5a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5z`,fill:e}),N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M1.5 0a.5.5 0 00-.5.5v13a.5.5 0 00.5.5h11a.5.5 0 00.5-.5V3.207a.5.5 0 00-.146-.353L10.146.146A.5.5 0 009.793 0H1.5zM2 1h7.5v2a.5.5 0 00.5.5h2V13H2V1z`,fill:e}))),we=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 15`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M11.746.07A.5.5 0 0011.5.003h-6a.5.5 0 00-.5.5v2.5H.5a.5.5 0 00-.5.5v10a.5.5 0 00.5.5h8a.5.5 0 00.5-.5v-2.5h4.5a.5.5 0 00.5-.5v-8a.498.498 0 00-.15-.357L11.857.154a.506.506 0 00-.11-.085zM9 10.003h4v-7h-1.5a.5.5 0 01-.5-.5v-1.5H6v2h.5a.5.5 0 01.357.15L8.85 5.147c.093.09.15.217.15.357v4.5zm-8-6v9h7v-7H6.5a.5.5 0 01-.5-.5v-1.5H1z`,fill:e}))),Te=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M8.982 1.632a.5.5 0 00-.964-.263l-3 11a.5.5 0 10.964.263l3-11zM3.32 3.616a.5.5 0 01.064.704L1.151 7l2.233 2.68a.5.5 0 11-.768.64l-2.5-3a.5.5 0 010-.64l2.5-3a.5.5 0 01.704-.064zM10.68 3.616a.5.5 0 00-.064.704L12.849 7l-2.233 2.68a.5.5 0 00.768.64l2.5-3a.5.5 0 000-.64l-2.5-3a.5.5 0 00-.704-.064z`,fill:e}))),Ee=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M13.854 2.146l-2-2a.5.5 0 00-.708 0l-1.5 1.5-8.995 8.995a.499.499 0 00-.143.268L.012 13.39a.495.495 0 00.135.463.5.5 0 00.462.134l2.482-.496a.495.495 0 00.267-.143l8.995-8.995 1.5-1.5a.5.5 0 000-.708zM12 3.293l.793-.793L11.5 1.207 10.707 2 12 3.293zm-2-.586L1.707 11 3 12.293 11.293 4 10 2.707zM1.137 12.863l.17-.849.679.679-.849.17z`,fill:e}))),De=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M1.854 1.146a.5.5 0 10-.708.708L6.293 7l-5.147 5.146a.5.5 0 00.708.708L7 7.707l5.146 5.147a.5.5 0 00.708-.708L7.707 7l5.147-5.146a.5.5 0 00-.708-.708L7 6.293 1.854 1.146z`,fill:e}))),Oe=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M7 3a.5.5 0 01.5.5v3h3a.5.5 0 010 1h-3v3a.5.5 0 01-1 0v-3h-3a.5.5 0 010-1h3v-3A.5.5 0 017 3z`,fill:e}),N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z`,fill:e}))),ke=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M3.5 6.5a.5.5 0 000 1h7a.5.5 0 000-1h-7z`,fill:e}),N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M14 7A7 7 0 110 7a7 7 0 0114 0zm-1 0A6 6 0 111 7a6 6 0 0112 0z`,fill:e}))),Ae=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M9.854 4.146a.5.5 0 010 .708L7.707 7l2.147 2.146a.5.5 0 01-.708.708L7 7.707 4.854 9.854a.5.5 0 01-.708-.708L6.293 7 4.146 4.854a.5.5 0 11.708-.708L7 6.293l2.146-2.147a.5.5 0 01.708 0z`,fill:e}),N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z`,fill:e}))),je=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M7 14A7 7 0 107 0a7 7 0 000 14zm2.854-9.854a.5.5 0 010 .708L7.707 7l2.147 2.146a.5.5 0 01-.708.708L7 7.707 4.854 9.854a.5.5 0 01-.708-.708L6.293 7 4.146 4.854a.5.5 0 11.708-.708L7 6.293l2.146-2.147a.5.5 0 01.708 0z`,fill:e}))),Me=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M11.841 2.159a2.25 2.25 0 00-3.182 0l-2.5 2.5a2.25 2.25 0 000 3.182.5.5 0 01-.707.707 3.25 3.25 0 010-4.596l2.5-2.5a3.25 3.25 0 014.596 4.596l-2.063 2.063a4.27 4.27 0 00-.094-1.32l1.45-1.45a2.25 2.25 0 000-3.182z`,fill:e}),N.createElement(`path`,{d:`M3.61 7.21c-.1-.434-.132-.88-.095-1.321L1.452 7.952a3.25 3.25 0 104.596 4.596l2.5-2.5a3.25 3.25 0 000-4.596.5.5 0 00-.707.707 2.25 2.25 0 010 3.182l-2.5 2.5A2.25 2.25 0 112.159 8.66l1.45-1.45z`,fill:e}))),Ne=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M2 1.004a1 1 0 00-1 1v10a1 1 0 001 1h10a1 1 0 001-1v-4.5a.5.5 0 00-1 0v4.5H2v-10h4.5a.5.5 0 000-1H2z`,fill:e}),N.createElement(`path`,{d:`M7.354 7.357L12 2.711v1.793a.5.5 0 001 0v-3a.5.5 0 00-.5-.5h-3a.5.5 0 100 1h1.793L6.646 6.65a.5.5 0 10.708.707z`,fill:e}))),Pe=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M1.146 4.604l5.5 5.5a.5.5 0 00.708 0l5.5-5.5a.5.5 0 00-.708-.708L7 9.043 1.854 3.896a.5.5 0 10-.708.708z`,fill:e}))),Fe=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M11.104 7.354l-5.5 5.5a.5.5 0 01-.708-.708L10.043 7 4.896 1.854a.5.5 0 11.708-.708l5.5 5.5a.5.5 0 010 .708z`,fill:e}))),Ie=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M3.854 9.104a.5.5 0 11-.708-.708l3.5-3.5a.5.5 0 01.708 0l3.5 3.5a.5.5 0 01-.708.708L7 5.957 3.854 9.104z`,fill:e}))),Le=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M3.854 4.896a.5.5 0 10-.708.708l3.5 3.5a.5.5 0 00.708 0l3.5-3.5a.5.5 0 00-.708-.708L7 8.043 3.854 4.896z`,fill:e}))),Re=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M9.104 10.146a.5.5 0 01-.708.708l-3.5-3.5a.5.5 0 010-.708l3.5-3.5a.5.5 0 11.708.708L5.957 7l3.147 3.146z`,fill:e}))),ze=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M4.896 10.146a.5.5 0 00.708.708l3.5-3.5a.5.5 0 000-.708l-3.5-3.5a.5.5 0 10-.708.708L8.043 7l-3.147 3.146z`,fill:e}))),Be=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M1.146 3.854a.5.5 0 010-.708l2-2a.5.5 0 11.708.708L2.707 3h6.295A4 4 0 019 11H3a.5.5 0 010-1h6a3 3 0 100-6H2.707l1.147 1.146a.5.5 0 11-.708.708l-2-2z`,fill:e}))),Ve=N.forwardRef(({color:e=`currentColor`,size:t=14,...n},r)=>N.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:r,...n},N.createElement(`path`,{d:`M7.092.5H7a6.5 6.5 0 106.41 7.583.5.5 0 10-.986-.166A5.495 5.495 0 017 12.5a5.5 5.5 0 010-11h.006a5.5 5.5 0 014.894 3H10a.5.5 0 000 1h3a.5.5 0 00.5-.5V2a.5.5 0 00-1 0v1.535A6.495 6.495 0 007.092.5z`,fill:e})))}));function Ue(e){let t=Yt.filter(t=>e[t]!==void 0).reduce((t,n)=>(t[n]=e[n],t),{});if(e instanceof CustomEvent)for(let n of Xt.filter(t=>e[t]!==void 0))t[n]=e[n];return t}function We(e){return typeof e==`object`&&!!e&&Array.isArray(e)===!1}function Ge(e){var t=Kn.call(e,Jn),n=e[Jn];try{e[Jn]=void 0;var r=!0}catch{}var i=qn.call(e);return r&&(t?e[Jn]=n:delete e[Jn]),i}function Ke(e){return Xn.call(e)}function qe(e){return e==null?e===void 0?$n:Qn:er&&er in Object(e)?Yn(e):Zn(e)}function Je(e){return typeof e==`object`&&!!e}function Ye(e){return typeof e==`symbol`||nr(e)&&tr(e)==rr}function Xe(e,t){for(var n=-1,r=e==null?0:e.length,i=Array(r);++n-1}function vt(e,t){var n=this.__data__,r=Jr(n,e);return r<0?(++this.size,n.push([e,t])):n[r][1]=t,this}function yt(e){var t=-1,n=e==null?0:e.length;for(this.clear();++t{try{t[r]&&t[r].toJSON,e[r]=t[r]}catch{n=!0}return e},{}),n?t:e}var It,Lt,Rt,zt,Bt,Vt,Ht,Ut,Wt,Gt,Kt,P,qt,Jt,Yt,Xt,Zt,Qt,$t,en,tn,nn,rn,an,on,sn,cn,ln,un,dn,fn,pn,mn,hn,gn,_n,vn,yn,bn,xn,Sn,Cn,wn,Tn,En,Dn,On,kn,An,jn,Mn,Nn,Pn,Fn,In,Ln,Rn,zn,Bn,Vn,Hn,Un,Wn,Gn,Kn,qn,Jn,Yn,Xn,Zn,Qn,$n,er,tr,nr,rr,ir,ar,or,sr,cr,lr,ur,dr,fr,pr,mr,hr,gr,_r,vr,yr,br,xr,Sr,Cr,wr,Tr,Er,Dr,Or,kr,Ar,jr,Mr,Nr,Pr,Fr,Ir,Lr,Rr,zr,Br,Vr,Hr,Ur,Wr,Gr,Kr,qr,Jr,Yr,Xr,Zr,Qr,$r,ei,ti,ni,ri,ii,ai,oi,si,ci,li,ui,di,fi,pi,mi,hi,gi,_i,vi,yi,bi,xi,Si,Ci,wi,Ti,Ei,Di,Oi,ki,Ai,ji,Mi=t((()=>{se(),It=new Map,Lt=`UNIVERSAL_STORE:`,Rt={PENDING:`PENDING`,RESOLVED:`RESOLVED`,REJECTED:`REJECTED`},zt=class e{constructor(t,n){if(this.debugging=!1,this.listeners=new Map([[`*`,new Set]]),this.getState=()=>(this.debug(`getState`,{state:this.state}),this.state),this.subscribe=(e,t)=>{let n=typeof e==`function`,r=n?`*`:e,i=n?e:t;if(this.debug(`subscribe`,{eventType:r,listener:i}),!i)throw TypeError(`Missing first subscribe argument, or second if first is the event type, when subscribing to a UniversalStore with id '${this.id}'`);return this.listeners.has(r)||this.listeners.set(r,new Set),this.listeners.get(r).add(i),()=>{this.debug(`unsubscribe`,{eventType:r,listener:i}),this.listeners.has(r)&&(this.listeners.get(r).delete(i),this.listeners.get(r)?.size===0&&this.listeners.delete(r))}},this.send=t=>{if(this.debug(`send`,{event:t}),this.status!==e.Status.READY)throw TypeError(le`Cannot send event before store is ready. You can get the current status with store.status, or await store.readyPromise to wait for the store to be ready before sending events. ${JSON.stringify({event:t,id:this.id,actor:this.actor,environment:this.environment},null,2)}`);this.emitToListeners(t,{actor:this.actor}),this.emitToChannel(t,{actor:this.actor})},this.debugging=t.debug??!1,!e.isInternalConstructing)throw TypeError(`UniversalStore is not constructable - use UniversalStore.create() instead`);if(e.isInternalConstructing=!1,this.id=t.id,this.actorId=Date.now().toString(36)+Math.random().toString(36).substring(2),this.actorType=t.leader?e.ActorType.LEADER:e.ActorType.FOLLOWER,this.state=t.initialState,this.channelEventName=`${Lt}${this.id}`,this.debug(`constructor`,{options:t,environmentOverrides:n,channelEventName:this.channelEventName}),this.actor.type===e.ActorType.LEADER)this.syncing={state:Rt.RESOLVED,promise:Promise.resolve()};else{let e,t,n=new Promise((n,r)=>{e=()=>{this.syncing.state===Rt.PENDING&&(this.syncing.state=Rt.RESOLVED,n())},t=e=>{this.syncing.state===Rt.PENDING&&(this.syncing.state=Rt.REJECTED,r(e))}});this.syncing={state:Rt.PENDING,promise:n,resolve:e,reject:t}}this.getState=this.getState.bind(this),this.setState=this.setState.bind(this),this.subscribe=this.subscribe.bind(this),this.onStateChange=this.onStateChange.bind(this),this.send=this.send.bind(this),this.emitToChannel=this.emitToChannel.bind(this),this.prepareThis=this.prepareThis.bind(this),this.emitToListeners=this.emitToListeners.bind(this),this.handleChannelEvents=this.handleChannelEvents.bind(this),this.debug=this.debug.bind(this),this.channel=n?.channel??e.preparation.channel,this.environment=n?.environment??e.preparation.environment,this.channel&&this.environment?(e.preparation.resolve({channel:this.channel,environment:this.environment}),this.prepareThis({channel:this.channel,environment:this.environment})):e.preparation.promise.then(this.prepareThis)}static setupPreparationPromise(){let t,n,r=new Promise((e,r)=>{t=t=>{e(t)},n=(...e)=>{r(e)}});e.preparation={resolve:t,reject:n,promise:r}}get actor(){return Object.freeze({id:this.actorId,type:this.actorType,environment:this.environment??e.Environment.UNKNOWN})}get status(){if(!this.channel||!this.environment)return e.Status.UNPREPARED;switch(this.syncing?.state){case Rt.PENDING:case void 0:return e.Status.SYNCING;case Rt.REJECTED:return e.Status.ERROR;case Rt.RESOLVED:default:return e.Status.READY}}untilReady(){return Promise.all([e.preparation.promise,this.syncing?.promise])}static create(t){if(!t||typeof t?.id!=`string`)throw TypeError(`id is required and must be a string, when creating a UniversalStore`);t.debug&&console.debug(le`[UniversalStore] create`,{options:t});let n=It.get(t.id);if(n)return console.warn(le`UniversalStore with id "${t.id}" already exists in this environment, re-using existing. @@ -182,7 +182,7 @@ Inner error message: ${r?.message}`))}}var Mc,Nc,Pc,Fc,Ic,Lc,Rc,zc,Bc,Vc,Hc,Uc,W it's possible a CORS error happened. Please check your dev-tools network tab. - `});let m=e.versions&&Object.keys(e.versions).length?e.versions:s.versions;await a.setRef(t,{id:t,url:u.url,...s,...m?{versions:m}:{},type:s.storyIndex?`lazy`:`auto-inject`})},getRefs:()=>{let{refs:t={}}=e.getState();return t},setRef:async(i,{storyIndex:o,setStoriesData:s,...c},l=!1)=>{if(n)return;let u,d,f,{filters:p}=e.getState(),{storyMapper:m=Tg}=t.getConfig(),h=a.getRefs()[i];(o||s)&&(u=s?mg(Og(s,h,{storyMapper:m})):o,f=vg(o,{provider:t,docsOptions:r,filters:p,allStatuses:{}}),d=vg(o,{provider:t,docsOptions:r,filters:{},allStatuses:{}})),d&&=Eg(d,h),f&&=Eg(f,h),await a.updateRef(i,{...h,...c,index:d,filteredIndex:f,internal_index:u})},updateRef:async(t,n)=>{let{[t]:r,...i}=a.getRefs();i[t]={...r,...n};let o=Object.keys(s).reduce((e,t)=>(e[t]=i[t],e),{});await e.setState({refs:o})}},o=!n&&lg.REFS||{},s=o;return i&&new Promise(async e=>{for(let e of Object.values(o))await a.checkRef({...e,stories:{}});e(void 0)}),{api:a,state:{refs:s}}},Ag=(e,t)=>{let{source:n,refId:r,type:i}=e,[a,o]=wg(n,r),s;(r||a===`external`)&&(s=r&&t.getRefs()[r]?t.getRefs()[r]:t.findRef(o));let c={source:n,sourceType:a,sourceLocation:o,refId:r,ref:s,type:i};switch(!0){case typeof r==`string`:case a===`local`:case a===`external`:return c;default:return sg.warn(`Received a ${i} frame that was not configured as a ref`),null}},jg=({store:e,fullAPI:t,provider:n})=>{let r={getGlobals(){return e.getState().globals},getUserGlobals(){return e.getState().userGlobals},getStoryGlobals(){return e.getState().storyGlobals},getGlobalTypes(){return e.getState().globalTypes},updateGlobals(e){n.channel?.emit(og,{globals:e,options:{target:`storybook-preview-iframe`}})}},i={globals:{},userGlobals:{},storyGlobals:{},globalTypes:{}},a=({globals:t,storyGlobals:n,userGlobals:r})=>{let{globals:i,userGlobals:a,storyGlobals:o}=e.getState();Wi(t,i)||e.setState({globals:t}),Wi(r,a)||e.setState({userGlobals:r}),Wi(n,o)||e.setState({storyGlobals:n})};return n.channel?.on(ig,function({globals:e,storyGlobals:n,userGlobals:r}){let{ref:i}=Ag(this,t);i?rg.warn(`received a GLOBALS_UPDATED from a non-local ref. This is not currently supported.`):a({globals:e,storyGlobals:n,userGlobals:r})}),n.channel?.on(ag,function({globals:n,globalTypes:i}){let{ref:a}=Ag(this,t),o=e.getState()?.userGlobals;a?Object.keys(n).length>0&&rg.warn(`received globals from a non-local ref. This is not currently supported.`):e.setState({globals:n,userGlobals:n,globalTypes:i}),o&&Object.keys(o).length!==0&&!Wi(n,o)&&r.updateGlobals(o)}),{api:r,state:i}},Mg={},f(Mg,{ActiveTabs:()=>Lg,DEFAULT_BOTTOM_PANEL_HEIGHT:()=>zg,DEFAULT_NAV_SIZE:()=>Rg,DEFAULT_RIGHT_PANEL_WIDTH:()=>Bg,focusableUIElements:()=>Hg,getDefaultLayoutState:()=>Vg,init:()=>qg}),{SET_CONFIG:Ng}=__STORYBOOK_MODULE_CORE_EVENTS__,{global:Pg}=__STORYBOOK_MODULE_GLOBAL__,{document:Fg}=Pg,Ig=e=>typeof e==`function`,Lg={SIDEBAR:`sidebar`,CANVAS:`canvas`,ADDONS:`addons`},Rg=300,zg=300,Bg=400,Vg=()=>({ui:{enableShortcuts:!0},layout:{initialActive:Lg.CANVAS,showToolbar:!0,navSize:Rg,bottomPanelHeight:zg,rightPanelWidth:Bg,recentVisibleSizes:{navSize:Rg,bottomPanelHeight:zg,rightPanelWidth:Bg},panelPosition:`bottom`,showTabs:!0},layoutCustomisations:{showSidebar:void 0,showToolbar:void 0},selectedPanel:void 0,theme:O()}),Hg={addonPanel:`storybook-panel-region`,storySearchField:`storybook-explorer-searchfield`,storyListMenu:`storybook-explorer-menu`,storyPanelRoot:`storybook-panel-root`,showAddonPanel:`storybook-show-addon-panel`,sidebarRegion:`storybook-sidebar-region`,showSidebar:`storybook-show-sidebar`},Ug=e=>e.layout.navSize>0,Wg=e=>{let{bottomPanelHeight:t,rightPanelWidth:n,panelPosition:r}=e.layout;return r===`bottom`&&t>0||r===`right`&&n>0},Gg=e=>!Ug(e)&&!Wg(e),Kg=e=>({navSize:e.navSize>0?e.navSize:e.recentVisibleSizes.navSize,bottomPanelHeight:e.bottomPanelHeight>0?e.bottomPanelHeight:e.recentVisibleSizes.bottomPanelHeight,rightPanelWidth:e.rightPanelWidth>0?e.rightPanelWidth:e.recentVisibleSizes.rightPanelWidth}),qg=({store:e,provider:t,singleStory:n})=>{let r={toggleFullscreen(t){return e.setState(e=>{let n=Gg(e),r=typeof t==`boolean`?t:!n;return r===n?{layout:e.layout}:r?{layout:{...e.layout,navSize:0,bottomPanelHeight:0,rightPanelWidth:0,recentVisibleSizes:Kg(e.layout)}}:{layout:{...e.layout,navSize:e.singleStory?0:e.layout.recentVisibleSizes.navSize,bottomPanelHeight:e.layout.recentVisibleSizes.bottomPanelHeight,rightPanelWidth:e.layout.recentVisibleSizes.rightPanelWidth}}},{persistence:`session`})},togglePanel(t){return e.setState(e=>{let n=Wg(e),r=typeof t==`boolean`?t:!n;return r===n?{layout:e.layout}:r?{layout:{...e.layout,bottomPanelHeight:e.layout.recentVisibleSizes.bottomPanelHeight,rightPanelWidth:e.layout.recentVisibleSizes.rightPanelWidth}}:{layout:{...e.layout,bottomPanelHeight:0,rightPanelWidth:0,recentVisibleSizes:Kg(e.layout)}}},{persistence:`session`})},togglePanelPosition(t){return e.setState(e=>{let n=t||(e.layout.panelPosition===`right`?`bottom`:`right`);return{layout:{...e.layout,panelPosition:n,bottomPanelHeight:e.layout.recentVisibleSizes.bottomPanelHeight,rightPanelWidth:e.layout.recentVisibleSizes.rightPanelWidth}}},{persistence:`permanent`})},toggleNav(t){return e.setState(e=>{if(e.singleStory)return{layout:e.layout};let n=Ug(e),r=typeof t==`boolean`?t:!n;return r===n?{layout:e.layout}:r?{layout:{...e.layout,navSize:e.layout.recentVisibleSizes.navSize}}:{layout:{...e.layout,navSize:0,recentVisibleSizes:Kg(e.layout)}}},{persistence:`session`})},toggleToolbar(t){return e.setState(e=>{let n=typeof t<`u`?t:!e.layout.showToolbar;return{layout:{...e.layout,showToolbar:n}}},{persistence:`session`})},setSizes({navSize:t,bottomPanelHeight:n,rightPanelWidth:r}){return e.setState(e=>{let i={...e.layout,navSize:t??e.layout.navSize,bottomPanelHeight:n??e.layout.bottomPanelHeight,rightPanelWidth:r??e.layout.rightPanelWidth};return{layout:{...i,recentVisibleSizes:Kg(i)}}},{persistence:`session`})},focusOnUIElement(e,t){let{forceFocus:n=!1,select:r=!1,poll:i=!0}=typeof t==`boolean`?{select:t}:t??{};if(!e)return!1;let a=()=>{let t=Fg.getElementById(e);return!t||(t.focus(),t!==Fg.activeElement&&n&&t.getAttribute(`tabindex`)===null&&(t.setAttribute(`tabindex`,`-1`),t.focus()),t!==Fg.activeElement&&t.id!==Fg.activeElement?.id)?!1:(r&&t.select?.(),!0)};return a()?!0:i?new Promise(e=>{let t=Date.now(),n=setInterval(()=>{let r=Date.now()-t;if(a()){clearInterval(n),e(!0);return}r>=500&&(clearInterval(n),e(!1))},50)}):!1},getInitialOptions(){let{theme:e,selectedPanel:r,layoutCustomisations:i,...a}=t.getConfig(),o=Vg();return{...o,layout:{...v(o.layout,l(a,Object.keys(o.layout))),...n&&{navSize:0}},layoutCustomisations:{...o.layoutCustomisations,...i??{}},ui:v(o.ui,l(a,Object.keys(o.ui))),selectedPanel:r||o.selectedPanel,theme:e||o.theme}},getIsFullscreen(){return Gg(e.getState())},getIsPanelShown(){return Wg(e.getState())},getIsNavShown(){return Ug(e.getState())},getShowToolbarWithCustomisations(t){let n=e.getState();return Ig(n.layoutCustomisations.showToolbar)?n.layoutCustomisations.showToolbar(n,t)??t:t},getShowPanelWithCustomisations(t){let n=e.getState();return Ig(n.layoutCustomisations.showPanel)?n.layoutCustomisations.showPanel(n,t)??t:t},getNavSizeWithCustomisations(t){let n=e.getState();if(Ig(n.layoutCustomisations.showSidebar)){let e=n.layoutCustomisations.showSidebar(n,t!==0);if(t===0&&e===!0)return n.layout.recentVisibleSizes.navSize;if(t!==0&&e===!1)return 0}return t},setOptions:t=>{let{layout:r,ui:i,selectedPanel:a,theme:o}=e.getState();if(!t)return;let s={...r,...t.layout||{},...l(t,Object.keys(r)),...n&&{navSize:0}},c={...i,...t.ui,...v(t.ui||{},l(t,Object.keys(i)))},d={...o,...t.theme},f={};u(i,c)||(f.ui=c),u(r,s)||(f.layout=s),t.selectedPanel&&!u(a,t.selectedPanel)&&(f.selectedPanel=t.selectedPanel),Object.keys(f).length&&e.setState(f,{persistence:`permanent`}),u(o,d)||e.setState({theme:d})}},i=l(e.getState(),[`layout`,`selectedPanel`]);return t.channel?.on(Ng,()=>{r.setOptions(Bh(r.getInitialOptions(),i))}),{api:r,state:Bh(r.getInitialOptions(),i)}},Jg={},f(Jg,{init:()=>Yg}),Yg=({store:e})=>({api:{addNotification:t=>{e.setState(({notifications:e})=>{let[n,r]=Gi(e,e=>e.id===t.id);return n.forEach(e=>{e.onClear&&e.onClear({dismissed:!1,timeout:!1})}),{notifications:[...r,t]}})},clearNotification:t=>{e.setState(({notifications:e})=>{let[n,r]=Gi(e,e=>e.id===t);return n.forEach(e=>{e.onClear&&e.onClear({dismissed:!1,timeout:!1})}),{notifications:r}})}},state:{notifications:[]}}),Xg={},f(Xg,{init:()=>$g}),{OPEN_IN_EDITOR_REQUEST:Zg,OPEN_IN_EDITOR_RESPONSE:Qg}=__STORYBOOK_MODULE_CORE_EVENTS__,$g=({provider:e,fullAPI:t})=>({api:{openInEditor(t){return new Promise(n=>{let{file:r,line:i,column:a}=t,o=t=>{t.file===r&&t.line===i&&t.column===a&&(e.channel?.off(Qg,o),n(t))};e.channel?.on(Qg,o),e.channel?.emit(Zg,t)})}},state:{notifications:[]},init:async()=>{let{color:n}=await a(async()=>{let{color:e}=await import(`./theming-DzOc7WGW.js`).then(e=>(e.a(),e.l));return{color:e}},__vite__mapDeps([0,1,2,3,4,5]),import.meta.url);e.channel?.on(Qg,e=>{e.error!==null&&t.addNotification({id:`open-in-editor-error`,content:{headline:`Failed to open in editor`,subHeadline:e.error||`Check the Storybook process on the command line for more details.`},icon:Th.createElement(je,{color:n.negative}),duration:8e3})})}}),e_={},f(e_,{init:()=>t_}),t_=({provider:e,fullAPI:t})=>({api:e.renderPreview?{renderPreview:e.renderPreview}:{},state:{},init:()=>{e.handleAPI(t)}}),n_={},f(n_,{init:()=>r_}),r_=({store:e,navigate:t,fullAPI:n})=>({state:{settings:{lastTrackedStoryId:null}},api:{closeSettings:()=>{let{settings:{lastTrackedStoryId:t}}=e.getState();t?n.selectStory(t):n.selectFirstStory()},changeSettingsTab:e=>{t(`/settings/${e}`)},isSettingsScreenActive:()=>{let{path:e}=n.getUrlState();return!!(e||``).match(/^\/settings/)},retrieveSelection(){let{settings:t}=e.getState();return t.lastTrackedStoryId},storeSelection:async()=>{let{storyId:t,settings:n}=e.getState();await e.setState({settings:{...n,lastTrackedStoryId:t}})}}}),i_={},f(i_,{controlOrMetaKey:()=>C_,defaultShortcuts:()=>w_,init:()=>E_,isMacLike:()=>S_,keys:()=>mh}),a_=h(Ah(),1),{FORCE_REMOUNT:o_,PREVIEW_KEYDOWN:s_,STORIES_COLLAPSE_ALL:c_,STORIES_EXPAND_ALL:l_}=__STORYBOOK_MODULE_CORE_EVENTS__,{global:u_}=__STORYBOOK_MODULE_GLOBAL__,{global:d_}=__STORYBOOK_MODULE_GLOBAL__,{navigator:f_}=d_,p_=()=>f_&&f_.platform?!!f_.platform.match(/(Mac|iPhone|iPod|iPad)/i):!1,m_=()=>p_()?`⌥`:`alt`,h_=e=>{if([`Meta`,`Alt`,`Control`,`Shift`,`Tab`].includes(e.key))return null;let t=[];e.altKey&&t.push(`alt`),e.ctrlKey&&t.push(`control`),e.metaKey&&t.push(`meta`),e.shiftKey&&t.push(`shift`);let n=e.code?.toUpperCase(),r=n?n.startsWith(`KEY`)&&n.length===4?n.replace(`KEY`,``):n.startsWith(`DIGIT`)?n.replace(`DIGIT`,``):{MINUS:`-`,EQUAL:`=`,BRACKETLEFT:`[`,BRACKETRIGHT:`]`,BACKSLASH:`\\`,SEMICOLON:`;`,QUOTE:`'`,BACKQUOTE:"`",COMMA:`,`,PERIOD:`.`,SLASH:`/`}[n]:void 0;if(e.key&&e.key.length===1&&e.key!==` `){let n=e.key.toUpperCase(),i=r;i&&i.length===1&&i!==n?t.push([n,i]):t.push(n)}else e.key===`Dead`&&r&&t.push(r);return e.key===` `&&t.push(`space`),e.key===`Escape`&&t.push(`escape`),e.key===`ArrowRight`&&t.push(`ArrowRight`),e.key===`ArrowDown`&&t.push(`ArrowDown`),e.key===`ArrowUp`&&t.push(`ArrowUp`),e.key===`ArrowLeft`&&t.push(`ArrowLeft`),t.length>0?t:null},g_=(e,t)=>!e||!t||(e.join(``).startsWith(`shift/`)&&e.shift(),e.length!==t.length)?!1:!e.find((e,n)=>Array.isArray(e)?!e.includes(t[n]):e!==t[n]),__=e=>e===`alt`?m_():e===`control`?`⌃`:e===`meta`?`⌘`:e===`shift`?`⇧​`:e===`Enter`||e===`Backspace`||e===`Esc`||e===`escape`?``:e===` `?`SPACE`:e===`ArrowUp`?`↑`:e===`ArrowDown`?`↓`:e===`ArrowLeft`?`←`:e===`ArrowRight`?`→`:e?.toUpperCase(),v_=e=>e.map(__).join(` `),y_=e=>e.map(e=>e===`+`?`plus`:e===` `?`space`:e).join(`+`),{navigator:b_,document:x_}=u_,S_=()=>b_&&b_.platform?!!b_.platform.match(/(Mac|iPhone|iPod|iPad)/i):!1,C_=()=>S_()?`meta`:`control`,w_=Object.freeze({fullScreen:[`alt`,`F`],togglePanel:[`alt`,`A`],panelPosition:[`alt`,`D`],toggleNav:[`alt`,`S`],toolbar:[`alt`,`T`],search:[C_(),`K`],focusNav:[`1`],focusIframe:[`2`],focusPanel:[`3`],prevComponent:[`alt`,`ArrowUp`],nextComponent:[`alt`,`ArrowDown`],prevStory:[`alt`,`ArrowLeft`],nextStory:[`alt`,`ArrowRight`],shortcutsPage:[C_(),`shift`,`,`],aboutPage:[C_(),`,`],escape:[`escape`],collapseAll:[C_(),`shift`,`ArrowUp`],expandAll:[C_(),`shift`,`ArrowDown`],remount:[`alt`,`R`],openInEditor:[`alt`,`shift`,`E`],openInIsolation:[`alt`,`shift`,`I`],copyStoryLink:[`alt`,`shift`,`L`],goToPreviousLandmark:[`shift`,`F6`],goToNextLandmark:[`F6`]}),T_={},E_=({store:e,fullAPI:t,provider:n})=>{let r={getShortcutKeys(){return e.getState().shortcuts},getDefaultShortcuts(){return{...w_,...r.getAddonsShortcutDefaults()}},getAddonsShortcuts(){return T_},getAddonsShortcutLabels(){let e={};return Object.entries(r.getAddonsShortcuts()).forEach(([t,{label:n}])=>{e[t]=n}),e},getAddonsShortcutDefaults(){let e={};return Object.entries(r.getAddonsShortcuts()).forEach(([t,{defaultShortcut:n}])=>{e[t]=n}),e},async setShortcuts(t){let{shortcuts:n}=await e.setState(e=>({shortcuts:typeof t==`function`?t(e.shortcuts):t}),{persistence:`permanent`});return n},async restoreAllDefaultShortcuts(){return r.setShortcuts(r.getDefaultShortcuts())},async setShortcut(e,t){return await r.setShortcuts(n=>({...n,[e]:t})),t},async setAddonShortcut(e,t){return await r.setShortcuts(n=>({...n,[`${e}-${t.actionName}`]:t.defaultShortcut})),T_[`${e}-${t.actionName}`]=t,t},async restoreDefaultShortcut(e){let t=r.getDefaultShortcuts()[e];return r.setShortcut(e,t)},handleKeydownEvent(e){let t=h_(e),n=r.getShortcutKeys(),i=mh(n).find(e=>g_(t,n[e]));i&&r.handleShortcutFeature(i,e)},handleShortcutFeature(n,r){let{ui:{enableShortcuts:i},storyId:a,refId:o,viewMode:s}=e.getState();if(i)switch(r?.preventDefault&&r.preventDefault(),n){case`escape`:t.getIsFullscreen()?t.toggleFullscreen(!1):t.getIsNavShown()&&t.toggleNav(!0);break;case`goToNextLandmark`:case`goToPreviousLandmark`:break;case`focusNav`:t.getIsFullscreen()&&t.toggleFullscreen(!1),t.getIsNavShown()||t.toggleNav(!0),t.focusOnUIElement(Hg.storyListMenu);break;case`search`:t.getIsFullscreen()&&t.toggleFullscreen(!1),t.getIsNavShown()||t.toggleNav(!0),setTimeout(()=>{t.focusOnUIElement(Hg.storySearchField,!0)},0);break;case`focusIframe`:{let e=x_.getElementById(`storybook-preview-iframe`);if(e)try{e.contentWindow.focus()}catch{}break}case`focusPanel`:t.getIsFullscreen()&&t.toggleFullscreen(!1),t.getIsPanelShown()||t.togglePanel(!0),t.focusOnUIElement(Hg.storyPanelRoot);break;case`nextStory`:t.jumpToStory(1);break;case`prevStory`:t.jumpToStory(-1);break;case`nextComponent`:t.jumpToComponent(1);break;case`prevComponent`:t.jumpToComponent(-1);break;case`fullScreen`:t.toggleFullscreen();break;case`togglePanel`:{let e=t.getIsPanelShown(),n=x_.getElementById(Hg.addonPanel);t.togglePanel(),e&&ph(n)&&t.focusOnUIElement(Hg.showAddonPanel,{poll:!0}).then(e=>{e===!1&&x_.body.focus()});break}case`toggleNav`:{let e=t.getIsNavShown(),n=x_.getElementById(Hg.sidebarRegion);t.toggleNav(),e&&ph(n)&&t.focusOnUIElement(Hg.showSidebar,{poll:!0}).then(e=>{e===!1&&x_.body.focus()});break}case`toolbar`:t.toggleToolbar();break;case`panelPosition`:t.getIsFullscreen()&&t.toggleFullscreen(!1),t.getIsPanelShown()||t.togglePanel(!0),t.togglePanelPosition();break;case`aboutPage`:t.navigate(`/settings/about`);break;case`shortcutsPage`:t.navigate(`/settings/shortcuts`);break;case`collapseAll`:t.emit(c_);break;case`expandAll`:t.emit(l_);break;case`remount`:t.emit(o_,{storyId:a});break;case`openInEditor`:u_.CONFIG_TYPE===`DEVELOPMENT`&&t.openInEditor({file:t.getCurrentStoryData().importPath});break;case`openInIsolation`:if(a&&s===`story`){let{previewHref:e}=t.getStoryHrefs(a,{refId:o});window.open(e,`_blank`,`noopener,noreferrer`)}break;case`copyStoryLink`:if(a){let{managerHref:e}=t.getStoryHrefs(a,{refId:o});(0,a_.default)(e)}break;default:T_[n].action();break}}},{shortcuts:i=w_}=e.getState();return{api:r,state:{shortcuts:mh(w_).reduce((e,t)=>({...e,[t]:i[t]||w_[t]}),w_)},init:()=>{x_.addEventListener(`keydown`,e=>{hh(e)||r.handleKeydownEvent(e)}),n.channel?.on(s_,e=>{r.handleKeydownEvent(e.event)})}}},D_={},f(D_,{getDefaultTagsFromPreset:()=>sv,init:()=>dv}),O_=h(oe(),1),{logger:k_}=__STORYBOOK_MODULE_CLIENT_LOGGER__,{CONFIG_ERROR:A_,CURRENT_STORY_WAS_SET:j_,DOCS_PREPARED:M_,PRELOAD_ENTRIES:N_,RESET_STORY_ARGS:P_,SELECT_STORY:F_,SET_CONFIG:I_,SET_CURRENT_STORY:L_,SET_FILTER:R_,SET_INDEX:z_,SET_STORIES:B_,STORY_ARGS_UPDATED:V_,STORY_CHANGED:H_,STORY_INDEX_INVALIDATED:U_,STORY_MISSING:W_,STORY_PREPARED:G_,STORY_SPECIFIED:K_,UPDATE_STORY_ARGS:q_}=__STORYBOOK_MODULE_CORE_EVENTS__,{global:J_}=__STORYBOOK_MODULE_GLOBAL__,h(Yi(),1),Y_=class extends Fi{constructor(e){super({name:`StatusTypeIdMismatchError`,category:`CORE-SERVER`,code:16,message:`Status has typeId "${e.status.typeId}" but was added to store with typeId "${e.typeId}". Full status: ${JSON.stringify(e.status,null,2)}`}),this.data=e}},X_={id:`storybook/status`,leader:!0,initialState:{}},Z_={SELECT:`select`},Q_=(e,t)=>{let n=Eh.useRef(t?t(e.getState()):e.getState()),r=Eh.useCallback(r=>e.onStateChange((e,i)=>{if(!t){n.current=e,r();return}let a=t(e);!u(a,t(i))&&(n.current=a,r())}),[e,t]),i=Eh.useCallback(()=>{let r=e.getState(),i=t?t(r):r;return u(i,n.current)||(n.current=i),n.current},[e,t]);return[Eh.useSyncExternalStore(r,i),e.setState]},{fullStatusStore:$_,getStatusStoreByTypeId:ev,useStatusStore:tv,universalStatusStore:nv}=gh({universalStatusStore:Bt.create({...X_,leader:globalThis.CONFIG_TYPE===`PRODUCTION`}),useUniversalStore:Q_,environment:`manager`}),{fetch:rv}=J_,iv=`./index.json`,av=`tags-filter`,ov=`static-filter`,sv=(0,O_.default)(1)(e=>{let t=Object.entries(e);return{included:t.filter(([,e])=>e.defaultFilterSelection===`include`).map(([e])=>e),excluded:t.filter(([,e])=>e.defaultFilterSelection===`exclude`).map(([e])=>e)}}),cv=e=>{let t=Object.entries(e).reduce((e,t)=>{let[n,r]=t;return r.excludeFromSidebar&&(e[n]=!0),e},{});return e=>{let n=e.tags??[];return(n.includes(Zi.DEV)||e.type===`docs`)&&n.filter(e=>t[e]).length===0}},lv=(e,t)=>{let n=e=>Object.values(e.reduce((e,t)=>(Object.hasOwn(Qi,t)?e[`built-in`].push(Qi[t]):e.user.push($i(t)),e),{"built-in":[],user:[]})).filter(e=>e.length>0);return r=>{let i=n(e),a=n(t);return(!i.length||i.every(e=>e.some(e=>e(r,!1))))&&(!a.length||a.every(e=>e.every(e=>e(r,!0))))}},uv=[`enableShortcuts`,`theme`,`showRoots`],dv=({fullAPI:e,store:t,navigate:n,provider:r,storyId:i,viewMode:a,docsOptions:o={}})=>{let s={storyId:Sf,getData:(e,t)=>{let n=s.resolveStory(e,t);if(n?.type===`story`||n?.type===`docs`)return n},isPrepared:(e,t)=>{let n=s.getData(e,t);return n?n.type===`story`?n.prepared:!0:!1},resolveStory:(e,n)=>{let{refs:r,index:i}=t.getState();if(!(n&&!r[n]))return n?r?.[n]?.index?.[e]??void 0:i?i[e]:void 0},getCurrentStoryData:()=>{let{storyId:e,refId:n}=t.getState();return s.getData(e,n)},getIndex:()=>{let{internal_index:e}=t.getState();return e},getParameters:(e,t)=>{let{storyId:n,refId:r}=typeof e==`string`?{storyId:e,refId:void 0}:e,i=s.getData(n,r);if([`story`,`docs`].includes(i?.type)){let{parameters:e}=i;if(e)return t?e[t]:e}return null},getCurrentParameter:e=>{let{storyId:n,refId:r}=t.getState();return s.getParameters({storyId:n,refId:r},e)||void 0},jumpToComponent:e=>{let{filteredIndex:n,storyId:r,refs:i,refId:a}=t.getState();if(!s.getData(r,a))return;let o=a?i[a].filteredIndex||{}:n;if(!o)return;let c=s.findSiblingStoryId(r,o,e,!0);c&&s.selectStory(c,void 0,{ref:a})},jumpToStory:e=>{let{filteredIndex:n,storyId:r,refs:i,refId:a}=t.getState(),o=s.getData(r,a);if(!o)return;let c=o.refId?i[o.refId].filteredIndex:n;if(!c)return;let l=s.findSiblingStoryId(r,c,e,!1);l&&s.selectStory(l,void 0,{ref:a})},selectFirstStory:()=>{let{index:e}=t.getState();if(!e)return;let r=Object.keys(e).find(t=>e[t].type===`story`);if(r){s.selectStory(r);return}n(`/`)},selectStory:(e=void 0,r=void 0,i={})=>{let{ref:a}=i,{storyId:o,index:c,filteredIndex:l,refs:u,settings:d}=t.getState(),f=e=>e?.type===`docs`||e?.type===`story`?(t.setState({settings:{...d,lastTrackedStoryId:e.id}}),n(`/${e.type}/${e.refId?`${e.refId}_${e.id}`:e.id}`),!0):!1,p=o?.split(`--`,2)[0],m=a?u[a].index:c,h=a?u[a].filteredIndex:l;if(!(!m||!h))if(r)if(!e)f(m[Sf(p,r)]);else{let t=a?`${a}_${Sf(e,r)}`:Sf(e,r);if(m[t])f(m[t]);else{let t=m[bf(e)];if(t?.type===`component`){let e=t.children.find(e=>m[e].name===r);f(e?m[e]:void 0)}}}else{let t=e?m[e]||m[bf(e)]:m[p];if(!t)throw Error(`Unknown id or title: '${e}'`);f(t)||f(s.findLeafEntry(h,t.id))}},findLeafEntry(e,t){let n=e[t];if(n.type===`docs`||n.type===`story`)return n;let r=n.children.find(t=>e[t])||n.children[0];return s.findLeafEntry(e,r)},findLeafStoryId(e,t){return s.findLeafEntry(e,t)?.id},findAllLeafStoryIds(e){let{index:n}=t.getState();if(!n)return[];let r=(e,t=[])=>{let i=n[e];return i&&(i.type===`story`&&t.push(i.id),`children`in i&&i.children?.forEach(e=>r(e,t))),t};return r(e,[])},findSiblingStoryId(e,t,n,r){if(r){let r=bg(t),i=r.findIndex(t=>t.includes(e));return i===r.length-1&&n>0||i===0&&n<0?void 0:r[i+n]?r[i+n][0]:void 0}let i=xg(t),a=i.indexOf(e);if(!(a===i.length-1&&n>0)&&!(a===0&&n<0))return i[a+n]},updateStoryArgs:(e,t)=>{let{id:n,refId:i}=e;r.channel?.emit(q_,{storyId:n,updatedArgs:t,options:{target:i}})},resetStoryArgs:(e,t)=>{let{id:n,refId:i}=e;r.channel?.emit(P_,{storyId:n,argNames:t,options:{target:i}})},fetchIndex:async()=>{try{let e=await rv(iv);if(e.status!==200)throw Error(await e.text());let t=await e.json();if(t.v<3){k_.warn(`Skipping story index with version v${t.v}, awaiting SET_STORIES.`);return}await s.setIndex(t)}catch(e){await t.setState({indexError:e})}},setIndex:async e=>{let{filteredIndex:n,index:i,filters:a}=t.getState(),s=$_.getAll(),c=vg(e,{provider:r,docsOptions:o,filters:a,allStatuses:s}),l=vg(e,{provider:r,docsOptions:o,filters:{},allStatuses:s});await t.setState({internal_index:e,filteredIndex:yg(c,n),index:yg(l,i),indexError:void 0})},updateStory:async(n,r,i)=>{if(i){let{id:t,index:a,filteredIndex:o}=i;a&&a[n]&&(a[n]={...a[n],...r}),o&&o[n]&&(o[n]={...o[n],...r}),await e.updateRef(t,{index:a,filteredIndex:o})}else{let{index:e,filteredIndex:i}=t.getState();e&&e[n]&&(e[n]={...e[n],...r}),i&&i[n]&&(i[n]={...i[n],...r}),(e||i)&&await t.setState({index:e,filteredIndex:i})}},updateDocs:async(n,r,i)=>{if(i){let{id:t,index:a,filteredIndex:o}=i;a[n]={...a[n],...r},o[n]={...o[n],...r},await e.updateRef(t,{index:a,filteredIndex:o})}else{let{index:e,filteredIndex:i}=t.getState();e&&(e[n]={...e[n],...r}),i&&(i[n]={...i[n],...r}),(e||i)&&await t.setState({index:e,filteredIndex:i})}},setPreviewInitialized:async n=>{n?e.updateRef(n.id,{previewInitialized:!0}):t.setState({previewInitialized:!0})},experimental_setFilter:async(n,i)=>{await t.setState({filters:{...t.getState().filters,[n]:i}});let{internal_index:a}=t.getState();if(!a)return;await s.setIndex(a);let o=await e.getRefs();for(let[t,{internal_index:n,...r}]of Object.entries(o))await e.setRef(t,{...r,storyIndex:n},!0);r.channel?.emit(R_,{id:n})},resetTagFilters:async()=>{await t.setState(e=>({includedTagFilters:e.defaultIncludedTagFilters,excludedTagFilters:e.defaultExcludedTagFilters}),{persistence:`permanent`}),c()},setAllTagFilters:async(e,n)=>{await t.setState({includedTagFilters:e,excludedTagFilters:n},{persistence:`permanent`}),c()},addTagFilters:async(e,n)=>{let r=t.getState(),i=new Set(r.includedTagFilters),a=new Set(r.excludedTagFilters);for(let t of e)n?(i.delete(t),a.add(t)):(i.add(t),a.delete(t));await t.setState({includedTagFilters:Array.from(i),excludedTagFilters:Array.from(a)},{persistence:`permanent`}),c()},removeTagFilters:async e=>{let n=t.getState();await t.setState({includedTagFilters:n.includedTagFilters.filter(t=>!e.includes(t)),excludedTagFilters:n.excludedTagFilters.filter(t=>!e.includes(t))},{persistence:`permanent`}),c()}},c=()=>{let{includedTagFilters:e,excludedTagFilters:n}=t.getState();s.experimental_setFilter(av,lv(e,n))};r.channel?.on(K_,function({storyId:i,viewMode:a}){let{sourceType:o}=Ag(this,e);if(o===`local`){let e=t.getState(),o=e.path===`/`||e.viewMode===`story`||e.viewMode===`docs`,s=e.viewMode&&e.storyId,c=e.viewMode!==a||e.storyId!==i,{type:l}=e.index?.[e.storyId]||{};o&&(s&&c&&!(l===`root`||l===`component`||l===`group`)?r.channel?.emit(L_,{storyId:e.storyId,viewMode:e.viewMode}):c&&n(`/${a}/${i}`))}}),r.channel?.on(j_,function(){let{ref:t}=Ag(this,e);s.setPreviewInitialized(t)}),r.channel?.on(H_,function(){let{sourceType:t}=Ag(this,e);if(t===`local`){let t=s.getCurrentParameter(`options`);t&&e.setOptions(_h(t))}}),r.channel?.on(G_,function({id:n,...i}){let{ref:a,sourceType:o}=Ag(this,e);if(s.updateStory(n,{...i,prepared:!0},a),!a&&!t.getState().hasCalledSetOptions){let{options:n}=i.parameters;e.setOptions(_h(n)),t.setState({hasCalledSetOptions:!0})}if(o===`local`){let{storyId:e,index:n,refId:i}=t.getState();if(!n)return;let a=Array.from(new Set([s.findSiblingStoryId(e,n,1,!0),s.findSiblingStoryId(e,n,-1,!0)])).filter(Boolean);r.channel?.emit(N_,{ids:a,options:{target:i}})}}),r.channel?.on(M_,function({id:t,...n}){let{ref:r}=Ag(this,e);s.updateStory(t,{...n,prepared:!0},r)}),r.channel?.on(z_,function(t){let{ref:n}=Ag(this,e);if(n)e.setRef(n.id,{...n,storyIndex:t},!0);else{s.setIndex(t);let n=s.getCurrentParameter(`options`);e.setOptions(_h(n))}}),r.channel?.on(B_,function(t){let{ref:n}=Ag(this,e),r=t.v?pg(t):t.stories;if(n)e.setRef(n.id,{...n,setStoriesData:r},!0);else throw Error(`Cannot call SET_STORIES for local frame`)}),r.channel?.on(F_,function({kind:t,title:n=t,story:r,name:i=r,storyId:a,...o}){let{ref:s}=Ag(this,e);s?e.selectStory(a||n,i,{...o,ref:s.id}):e.selectStory(a||n,i,o)}),r.channel?.on(V_,function({storyId:t,args:n}){let{ref:r}=Ag(this,e);s.updateStory(t,{args:n},r)}),r.channel?.on(A_,function(t){let{ref:n}=Ag(this,e);s.setPreviewInitialized(n)}),r.channel?.on(W_,function(t){let{ref:n}=Ag(this,e);s.setPreviewInitialized(n)}),r.channel?.on(I_,()=>{let e=r.getConfig()?.sidebar?.filters||{},{includedTagFilters:n,excludedTagFilters:i,tagPresets:a}=t.getState();t.setState({filters:{...t.getState().filters,...e,[ov]:cv(a),[av]:lv(n,i)}})}),$_.onAllStatusChange(async()=>{let{internal_index:n}=t.getState();if(!n)return;await s.setIndex(n);let r=await e.getRefs();Object.entries(r).forEach(([t,{internal_index:n,...r}])=>{e.setRef(t,{...r,storyIndex:n},!0)})});let l=r.getConfig()?.sidebar?.filters||{},u=J_.TAGS_OPTIONS||{},d=sv(u),f=t.getState(),p=f.includedTagFilters??f.layout?.includedTagFilters??d.included,m=f.excludedTagFilters??f.layout?.excludedTagFilters??d.excluded;return{api:s,state:{storyId:i,viewMode:a,hasCalledSetOptions:!1,previewInitialized:!1,filters:{...l,[ov]:cv(u),[av]:lv(p,m)},tagPresets:u,defaultIncludedTagFilters:d.included,defaultExcludedTagFilters:d.excluded,includedTagFilters:p,excludedTagFilters:m},init:async()=>{r.channel?.on(U_,()=>s.fetchIndex()),await s.fetchIndex()}}},fv={},f(fv,{init:()=>Tv}),{GLOBALS_UPDATED:pv,NAVIGATE_URL:mv,SET_CURRENT_STORY:hv,STORY_ARGS_UPDATED:gv,UPDATE_QUERY_PARAMS:_v}=__STORYBOOK_MODULE_CORE_EVENTS__,{global:vv}=__STORYBOOK_MODULE_GLOBAL__,yv=h(sa(),1),bv=e=>{if(e===`true`||e===`1`)return!0;if(e===`false`||e===`0`)return!1},xv=e=>Object.fromEntries(e.split(`;`).map(e=>e.split(`:`)).map(([e,t])=>[e,encodeURIComponent(t)]).filter(([e,t])=>e&&t)),Sv=(e,t)=>{let n=xv(e),r=xv(t);return Object.entries({...n,...r}).map(([e,t])=>`${e}:${t}`).join(`;`)},wv=({state:{location:e,path:t,viewMode:n,storyId:r},singleStory:i})=>{let{full:a,panel:o,nav:s,shortcuts:c,addonPanel:l,tabs:u,path:d,...f}=Fp(e),p,m,h;bv(a)===!0?(p=0,m=0,h=0):bv(a)===!1&&(p=Rg,m=zg,h=Bg),i||(bv(s)===!0&&(p=Rg),bv(s)===!1&&(p=0)),bv(o)===!1&&(m=0,h=0);let g={navSize:p,bottomPanelHeight:m,rightPanelWidth:h,panelPosition:[`right`,`bottom`].includes(o)?o:void 0,showTabs:bv(u)},_={enableShortcuts:bv(c)},v=l||void 0,y=r,b=Wi(Cv,f)?Cv:f;return Cv=b,{viewMode:n,layout:g,ui:_,selectedPanel:v,location:e,path:t,customQueryParams:b,storyId:y}},Tv=e=>{let{store:t,navigate:n,provider:r,fullAPI:i}=e,a=(e,t={},r={})=>n([e,...Object.entries(t).filter(([,e])=>e).sort(([e],[t])=>e`${e}=${t}`)].join(`&`),r),o={getStoryHrefs(e,n={}){let{id:r,refId:a}=i.getCurrentStoryData()??{},o=e===r&&n.refId===a,{customQueryParams:s,location:c,refs:l}=t.getState(),{base:u,inheritArgs:d=o,inheritGlobals:f=!0,queryParams:p={},refId:m,viewMode:h=`story`}=n;if(m&&!l[m])throw Error(`Invalid refId: ${m}`);let g=c.pathname||`/`,_=vv.window.location.origin+g,v=vv.STORYBOOK_NETWORK_ADDRESS??_,b=u===`origin`?_:u===`network`?v:g,x=m?l[m].url+`/iframe.html`:vv.PREVIEW_URL||`${b.replace(/\/[^/]*\.html$/,``).replace(/\/?$/,`/`)}iframe.html`,S=m?`&refId=${encodeURIComponent(m)}`:``,{args:C=``,globals:w=``,...T}=p,E=d?Sv(s?.args??``,C):C,D=f?Sv(s?.globals??``,w):w,O=(0,yv.stringify)(T,{nesting:!0,nestingSyntax:`js`}),k=(0,yv.stringify)(y(T,[`id`,`viewMode`]),{nesting:!0,nestingSyntax:`js`});return E&&=`&args=${E}`,D&&=`&globals=${D}`,O&&=`&${O}`,k&&=`&${k}`,{managerHref:`${b}?path=/${h}/${m?`${m}_`:``}${e}${E}${D}${O}`,previewHref:`${x}?id=${e}&viewMode=${h}${S}${E}${m?``:D}${k}`}},getQueryParam(e){let{customQueryParams:n}=t.getState();return n?n[e]:void 0},getUrlState(){let{location:e,path:n,customQueryParams:r,storyId:i,url:a,viewMode:o}=t.getState();return{path:n,hash:e.hash??``,queryParams:r,storyId:i,url:a,viewMode:o}},setQueryParams(e){let{customQueryParams:n}=t.getState(),i={},a={...n,...Object.entries(e).reduce((e,[t,n])=>(n!==null&&(e[t]=n),e),i)};Wi(n,a)||(t.setState({customQueryParams:a}),r.channel?.emit(_v,a))},applyQueryParams(e,t){let{path:n,hash:r=``,queryParams:i}=o.getUrlState();a(`${n}${r}`,{...i,...e},t),o.setQueryParams(e)},navigateUrl(e,t){n(e,{plain:!0,...t})}},s=()=>{let{path:e,hash:t=``,queryParams:n,viewMode:r}=o.getUrlState();if(r!==`story`)return;let s=i.getCurrentStoryData();if(s?.type!==`story`)return;let{args:c,initialArgs:l}=s,u=Np(l,c);a(`${e}${t}`,{...n,args:u},{replace:!0}),o.setQueryParams({args:u})};r.channel?.on(hv,()=>s());let c;return r.channel?.on(gv,()=>{`requestIdleCallback`in vv.window?(c&&vv.window.cancelIdleCallback(c),c=vv.window.requestIdleCallback(s,{timeout:1e3})):(c&&clearTimeout(c),setTimeout(s,100))}),r.channel?.on(pv,({userGlobals:e,initialGlobals:t})=>{let{path:n,hash:r=``,queryParams:i}=o.getUrlState(),s=Np(t,Bh(t,e));a(`${n}${r}`,{...i,globals:s},{replace:!0}),o.setQueryParams({globals:s})}),r.channel?.on(mv,(e,t)=>{o.navigateUrl(e,t)}),{api:o,state:wv(e)}},Ev={},f(Ev,{init:()=>Nv}),Dv=h(oe(),1),{global:Ov}=__STORYBOOK_MODULE_GLOBAL__,kv=`10.3.3`,{VERSIONCHECK:Av}=Ov,jv=(0,Dv.default)(1)(()=>{try{return{...JSON.parse(Av).data||{}}}catch{return{}}}),Mv=e=>e.includes(`vue`)?`vue`:e,Nv=({store:e})=>{let{dismissedVersionNotification:t}=e.getState(),n={versions:{current:{version:kv},...jv()},dismissedVersionNotification:t},r={getCurrentVersion:()=>{let{versions:{current:t}}=e.getState();return t},getLatestVersion:()=>{let{versions:{latest:t,next:n,current:r}}=e.getState();return r&&Dh.default.prerelease(r.version)&&n?t&&Dh.default.gt(t.version,n.version)?t:n:t},getDocsUrl:({asset:t,subpath:n=t,versioned:r,renderer:i,ref:a=`ui`})=>{let{versions:o}=e.getState(),s=o.latest?.version,c=o.current?.version,l=c?.startsWith(`0.0.0`)&&s||c,u=`https://storybook.js.org/${t?`docs-assets`:`docs`}/`;if(t&&l)u+=`${Dh.default.major(l)}.${Dh.default.minor(l)}/`;else if(r&&l&&s){let e=Dh.default.diff(s,l);e===`patch`||e===null||(u+=`${Dh.default.major(l)}.${Dh.default.minor(l)}/`)}let[d,f]=n?.split(`#`)||[];if(d&&(u+=t?d:`${d}/`),i&&typeof Ov.STORYBOOK_RENDERER<`u`){let e=Ov.STORYBOOK_RENDERER;e&&(u+=`?renderer=${Mv(e)}`)}return a&&(u+=`${u.includes(`?`)?`&`:`?`}ref=${a}`),f&&(u+=`#${f}`),u},versionUpdateAvailable:()=>{let e=r.getLatestVersion(),t=r.getCurrentVersion();if(e){if(!e.version||!t.version)return!0;let n=Dh.default.prerelease(t.version)?`${Dh.default.major(t.version)}.${Dh.default.minor(t.version)}.${Dh.default.patch(t.version)}`:t.version,r=Dh.default.diff(n,e.version);return Dh.default.gt(e.version,n)&&r!==`patch`&&!r.includes(`pre`)}return!1}};return{init:async()=>{let{versions:t={}}=e.getState(),{latest:n,next:r}=jv();await e.setState({versions:{...t,latest:n,next:r}})},state:n,api:r}},Pv={},f(Pv,{init:()=>Hv}),{REQUEST_WHATS_NEW_DATA:Fv,RESULT_WHATS_NEW_DATA:Iv,SET_WHATS_NEW_CACHE:Lv,TOGGLE_WHATS_NEW_NOTIFICATIONS:Rv}=__STORYBOOK_MODULE_CORE_EVENTS__,{global:zv}=__STORYBOOK_MODULE_GLOBAL__,Bv=`whats-new`,Vv=({color:e=`currentColor`,size:t=14})=>Oh.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`},Oh.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M2.042.616a.704.704 0 00-.66.729L1.816 12.9c.014.367.306.66.672.677l9.395.422h.032a.704.704 0 00.704-.703V.704c0-.015 0-.03-.002-.044a.704.704 0 00-.746-.659l-.773.049.057 1.615a.105.105 0 01-.17.086l-.52-.41-.617.468a.105.105 0 01-.168-.088L9.746.134 2.042.616zm8.003 4.747c-.247.192-2.092.324-2.092.05.04-1.045-.429-1.091-.689-1.091-.247 0-.662.075-.662.634 0 .57.607.893 1.32 1.27 1.014.538 2.24 1.188 2.24 2.823 0 1.568-1.273 2.433-2.898 2.433-1.676 0-3.141-.678-2.976-3.03.065-.275 2.197-.21 2.197 0-.026.971.195 1.256.753 1.256.43 0 .624-.236.624-.634 0-.602-.633-.958-1.361-1.367-.987-.554-2.148-1.205-2.148-2.7 0-1.494 1.027-2.489 2.86-2.489 1.832 0 2.832.98 2.832 2.845z`,fill:e})),Hv=({fullAPI:e,store:t,provider:n})=>{let r={whatsNewData:void 0};function i(e){t.setState({whatsNewData:e}),r.whatsNewData=e}let a={isWhatsNewUnread(){return r.whatsNewData?.status===`SUCCESS`&&!r.whatsNewData.postIsRead},whatsNewHasBeenRead(){r.whatsNewData?.status===`SUCCESS`&&(s({lastReadPost:r.whatsNewData.url}),i({...r.whatsNewData,postIsRead:!0}),e.clearNotification(Bv))},toggleWhatsNewNotifications(){r.whatsNewData?.status===`SUCCESS`&&(i({...r.whatsNewData,disableWhatsNewNotifications:!r.whatsNewData.disableWhatsNewNotifications}),n.channel?.emit(Rv,{disableWhatsNewNotifications:r.whatsNewData.disableWhatsNewNotifications}))}};function o(){return n.channel?.emit(Fv),new Promise(e=>n.channel?.once(Iv,({data:t})=>e(t)))}function s(e){n.channel?.emit(Lv,e)}return{init:async()=>{if(zv.CONFIG_TYPE!==`DEVELOPMENT`)return;let t=await o();i(t);let n=e.getUrlState();!(n?.path===`/onboarding`||n.queryParams?.onboarding===`true`)&&t.status===`SUCCESS`&&!t.disableWhatsNewNotifications&&t.showNotification&&e.addNotification({id:Bv,link:`/settings/whats-new`,content:{headline:t.title,subHeadline:`Learn what's new in Storybook`},icon:Oh.createElement(Vv,null),onClear({dismissed:e}){e&&s({lastDismissedPost:t.url})}})},state:r,api:a}},Uv=h(jh(),1),Wv=e=>{e.fn(`set`,function(t,n){return e.set(this._area,this._in(t),ki(n,{maxDepth:50}))}),e.fn(`get`,function(t,n){let r=e.get(this._area,this._in(t));return r===null?n||r:ji(r)})},Wv(Uv.default._),Gv=`@storybook/manager/store`,Kv=class{constructor({allowPersistence:e,setState:t,getState:n}){this.upstreamPersistence=e??!0,this.upstreamSetState=t,this.upstreamGetState=n}getInitialState(e){return{...e,...vh(Uv.default.local),...vh(Uv.default.session)}}getState(){return this.upstreamGetState()}async setState(e,t,n){let r,i;typeof t==`function`?(r=t,i=n):i=t;let{persistence:a=`none`}=i||{},o={},s={};typeof e==`function`?o=t=>(s=e(t),s):(o=e,s=o);let c=await new Promise(e=>{this.upstreamSetState(o,()=>{e(this.getState())})});return a!==`none`&&this.upstreamPersistence&&await bh(a===`session`?Uv.default.session:Uv.default.local,s),r&&r(c),c}},{ActiveTabs:qv}=Mg,Jv=Rh({api:void 0,state:Uh({})}),Yv=(...e)=>Vh({},...e),Xv=class extends Ch.Component{constructor(e){super(e),this.api={},this.initModules=()=>{this.modules.forEach(e=>{`init`in e&&e.init()})};let{location:t,path:n,refId:r,viewMode:i=e.docsOptions.docsMode?`docs`:e.viewMode,singleStory:a,storyId:o,docsOptions:s,navigate:c}=e,l=new Kv({getState:()=>this.state,setState:(e,t)=>(this.setState(e,()=>t(this.state)),this.state)}),u={location:t,path:n,viewMode:i,singleStory:a,storyId:o,refId:r},d={docsOptions:s};this.state=l.getInitialState(Uh({...u,...d}));let f={navigate:c,store:l,provider:e.provider};this.modules=[e_,eg,Zh,Mg,Jg,n_,i_,D_,cg,ng,fv,Ev,Pv,Xg].map(e=>e.init({...u,...d,...f,state:this.state,fullAPI:this.api}));let p=Uh(this.state,...this.modules.map(e=>e.state)),m=Object.assign(this.api,{navigate:c},...this.modules.map(e=>e.api));this.state=p,this.api=m}static getDerivedStateFromProps(e,t){return t.path===e.path?null:{...t,location:e.location,path:e.path,refId:e.refId,viewMode:e.viewMode,storyId:e.storyId}}shouldComponentUpdate(e,t){let n=this.props,r=this.state;return n.path!==e.path||!u(r,t)}render(){let{children:e}=this.props,t={state:this.state,api:this.api};return Ch.createElement(Zv,{effect:this.initModules},Ch.createElement(Jv.Provider,{value:t},Ch.createElement(xh,null,e)))}},Xv.displayName=`Manager`,Zv=({children:e,effect:t})=>(Ch.useEffect(t,[]),e),Qv=e=>e,globalThis.STORYBOOK_ADDON_STATE={},{STORYBOOK_ADDON_STATE:$v}=globalThis,{Channel:ey}=__STORYBOOK_MODULE_CHANNELS__,ty={id:`storybook/test-provider`,leader:!0,initialState:{}},{fullTestProviderStore:ny,getTestProviderStoreById:ry,useTestProviderStore:iy,universalTestProviderStore:ay}=Sh({universalTestProviderStore:Bt.create({...ty,leader:globalThis.CONFIG_TYPE===`PRODUCTION`}),useUniversalStore:Q_}),oy={id:`storybook/checklist`,initialState:{items:{accessibilityTests:{status:`open`},autodocs:{status:`open`},ciTests:{status:`open`},controls:{status:`open`},coverage:{status:`open`},guidedTour:{status:`open`},installA11y:{status:`open`},installChromatic:{status:`open`},installDocs:{status:`open`},installVitest:{status:`open`},mdxDocs:{status:`open`},moreComponents:{status:`open`},moreStories:{status:`open`},onboardingSurvey:{status:`open`},organizeStories:{status:`open`},publishStorybook:{status:`open`},renderComponent:{status:`open`},runTests:{status:`open`},viewports:{status:`open`},visualTests:{status:`open`},whatsNewStorybook10:{status:`open`},writeInteractions:{status:`open`}},widget:{}}},sy=e=>({getValue:t=>e.getState().items[t]??{status:`open`,mutedAt:void 0},accept:t=>{e.setState(e=>({...e,items:{...e.items,[t]:{...e.items[t],status:`accepted`}}}))},done:t=>{e.setState(e=>({...e,items:{...e.items,[t]:{...e.items[t],status:`done`}}}))},skip:t=>{e.setState(e=>({...e,items:{...e.items,[t]:{...e.items[t],status:`skipped`}}}))},reset:t=>{e.setState(e=>({...e,items:{...e.items,[t]:{...e.items[t],status:`open`}}}))},mute:t=>{e.setState(e=>({...e,items:t.reduce((t,n)=>({...t,[n]:{...e.items[n],mutedAt:Date.now()}}),e.items)}))},disable:t=>{e.setState(e=>({...e,widget:{...e.widget,disable:t},items:Object.entries(e.items).reduce((e,[t,n])=>({...e,[t]:{...n,mutedAt:void 0}}),e.items)}))}}),cy=Bt.create({...oy,leader:globalThis.CONFIG_TYPE===`PRODUCTION`}),sy(cy)})),uy=r((e=>{var t=b();function n(e,t){return e===t&&(e!==0||1/e==1/t)||e!==e&&t!==t}var r=typeof Object.is==`function`?Object.is:n,i=t.useState,a=t.useEffect,o=t.useLayoutEffect,s=t.useDebugValue;function c(e,t){var n=t(),r=i({inst:{value:n,getSnapshot:t}}),c=r[0].inst,u=r[1];return o(function(){c.value=n,c.getSnapshot=t,l(c)&&u({inst:c})},[e,n,t]),a(function(){return l(c)&&u({inst:c}),e(function(){l(c)&&u({inst:c})})},[e]),s(n),n}function l(e){var t=e.getSnapshot;e=e.value;try{var n=t();return!r(e,n)}catch{return!0}}function u(e,t){return t()}var d=typeof window>`u`||window.document===void 0||window.document.createElement===void 0?u:c;e.useSyncExternalStore=t.useSyncExternalStore===void 0?d:t.useSyncExternalStore})),dy=r(((e,t)=>{t.exports=uy()})),fy=n({A:()=>ZO,ActionList:()=>nP,Bar:()=>NL,Blockquote:()=>QO,Button:()=>VN,Code:()=>ck,DL:()=>lk,Div:()=>uk,EmptyTabContent:()=>YL,ErrorFormatter:()=>oF,FlexBar:()=>LL,Form:()=>KF,H1:()=>dk,H2:()=>fk,H3:()=>pk,H4:()=>mk,H5:()=>hk,H6:()=>gk,HR:()=>_k,IconButton:()=>UN,Img:()=>vk,LI:()=>yk,Link:()=>Ik,ListItem:()=>wL,Loader:()=>JR,OL:()=>xk,P:()=>Sk,Popover:()=>YF,PopoverProvider:()=>uL,Pre:()=>Ck,ResetWrapper:()=>YO,ScrollArea:()=>he,Select:()=>iI,Separator:()=>dR,Span:()=>wk,SyntaxHighlighter:()=>rk,TT:()=>Tk,TabBar:()=>aR,TabButton:()=>UL,TabList:()=>CR,TabPanel:()=>TR,TabWrapper:()=>sR,Table:()=>Ek,Tabs:()=>lR,TabsState:()=>uR,TabsView:()=>jR,ToggleButton:()=>WN,Toolbar:()=>fR,Tooltip:()=>dL,TooltipLinkList:()=>OL,TooltipNote:()=>Uk,TooltipProvider:()=>zN,UL:()=>Ok,Zoom:()=>XP,codeCommon:()=>KO,components:()=>ZR,convertToReactAriaPlacement:()=>LN,createCopyToClipboardFunction:()=>ge,nameSpaceClassNames:()=>J,resetComponents:()=>QR,useTabsState:()=>DR,withReset:()=>qO});function py(e,t){if(typeof e==`function`)return e(t);e!=null&&(e.current=t)}function my(...e){return t=>{let n=!1,r=e.map(e=>{let r=py(e,t);return!n&&typeof r==`function`&&(n=!0),r});if(n)return()=>{for(let t=0;t{let{children:r,...i}=e;gy(r)&&typeof zk==`function`&&(r=zk(r._payload));let a=hE.Children.toArray(r),o=a.find(by);if(o){let e=o.props.children,r=a.map(t=>t===o?hE.Children.count(e)>1?hE.Children.only(null):hE.isValidElement(e)?e.props.children:null:t);return(0,gE.jsx)(t,{...i,ref:n,children:hE.isValidElement(e)?hE.cloneElement(e,void 0,r):null})}return(0,gE.jsx)(t,{...i,ref:n,children:r})});return n.displayName=`${e}.Slot`,n}function vy(e){let t=hE.forwardRef((e,t)=>{let{children:n,...r}=e;if(gy(n)&&typeof zk==`function`&&(n=zk(n._payload)),hE.isValidElement(n)){let e=Sy(n),i=xy(r,n.props);return n.type!==hE.Fragment&&(i.ref=t?my(t,e):e),hE.cloneElement(n,i)}return hE.Children.count(n)>1?hE.Children.only(null):null});return t.displayName=`${e}.SlotClone`,t}function yy(e){let t=({children:e})=>(0,gE.jsx)(gE.Fragment,{children:e});return t.displayName=`${e}.Slottable`,t.__radixId=Vk,t}function by(e){return hE.isValidElement(e)&&typeof e.type==`function`&&`__radixId`in e.type&&e.type.__radixId===Vk}function xy(e,t){let n={...t};for(let r in t){let i=e[r],a=t[r];/^on[A-Z]/.test(r)?i&&a?n[r]=(...e)=>{let t=a(...e);return i(...e),t}:i&&(n[r]=i):r===`style`?n[r]={...i,...a}:r===`className`&&(n[r]=[i,a].filter(Boolean).join(` `))}return{...e,...n}}function Sy(e){let t=Object.getOwnPropertyDescriptor(e.props,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning;return n?e.ref:(t=Object.getOwnPropertyDescriptor(e,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning,n?e.props.ref:e.props.ref||e.ref)}function Cy(e){let[t,n]=(0,xE.useState)(e),r=(0,xE.useRef)(t),i=(0,xE.useRef)(null),a=(0,xE.useRef)(()=>{if(!i.current)return;let e=i.current.next();if(e.done){i.current=null;return}r.current===e.value?a.current():n(e.value)});return Y(()=>{r.current=t,i.current&&a.current()}),[t,(0,xE.useCallback)(e=>{i.current=e(r.current),a.current()},[a])]}function wy(e=!1){let t=(0,CE.useContext)(Kk),n=(0,CE.useRef)(null);if(n.current===null&&!e){var r,i;let e=(i=CE.default.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED)==null||(r=i.ReactCurrentOwner)==null?void 0:r.current;if(e){let n=Jk.get(e);n==null?Jk.set(e,{id:t.current,state:e.memoizedState}):e.memoizedState!==n.state&&(t.current=n.id,Jk.delete(e))}n.current=++t.current}return n.current}function Ty(e){let t=(0,CE.useContext)(Kk),n=wy(!!e),r=`react-aria${t.prefix}`;return e||`${r}-${n}`}function Ey(e){let t=CE.useId(),[n]=(0,CE.useState)(Ay()),r=n?`react-aria`:`react-aria${Gk.prefix}`;return e||`${r}-${t}`}function Dy(){return!1}function Oy(){return!0}function ky(e){return()=>{}}function Ay(){return typeof CE.useSyncExternalStore==`function`?CE.useSyncExternalStore(ky,Dy,Oy):(0,CE.useContext)(qk)}function jy(e){let[t,n]=(0,SE.useState)(e),r=(0,SE.useRef)(null),i=Yk(t),a=(0,SE.useRef)(null);if(Qk&&Qk.register(a,i),Xk){let e=Zk.get(i);e&&!e.includes(r)?e.push(r):Zk.set(i,[r])}return Y(()=>{let e=i;return()=>{Qk&&Qk.unregister(a),Zk.delete(e)}},[i]),(0,SE.useEffect)(()=>{let e=r.current;return e&&n(e),()=>{e&&(r.current=null)}}),i}function My(e,t){if(e===t)return e;let n=Zk.get(e);if(n)return n.forEach(e=>e.current=t),t;let r=Zk.get(t);return r?(r.forEach(t=>t.current=e),e):t}function Ny(e=[]){let t=jy(),[n,r]=Cy(t),i=(0,SE.useCallback)(()=>{r(function*(){yield t,yield document.getElementById(t)?t:void 0})},[t,r]);return Y(i,[t,i,...e]),n}function Py(...e){return(...t)=>{for(let n of e)typeof n==`function`&&n(...t)}}function Fy(e){return typeof e==`object`&&!!e&&`nodeType`in e&&typeof e.nodeType==`number`}function Iy(e){return Fy(e)&&e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&`host`in e}function Ly(){return eA}function Ry(e,t){if(!Ly())return t&&e?e.contains(t):!1;if(!e||!t)return!1;let n=t;for(;n!==null;){if(n===e)return!0;n=n.tagName===`SLOT`&&n.assignedSlot?n.assignedSlot.parentNode:Iy(n)?n.host:n.parentNode}return!1}function zy(e){return Ly()&&e.target.shadowRoot&&e.composedPath?e.composedPath()[0]:e.target}function By(e,t,n,r){return Ly()?new nA(e,t,n,r):e.createTreeWalker(t,n,r)}function Vy(e){var t,n,r=``;if(typeof e==`string`||typeof e==`number`)r+=e;else if(typeof e==`object`)if(Array.isArray(e)){var i=e.length;for(t=0;t=65&&e.charCodeAt(2)<=90?t[e]=Py(n,i):(e===`className`||e===`UNSAFE_className`)&&typeof n==`string`&&typeof i==`string`?t[e]=rA(n,i):e===`id`&&n&&i?t.id=My(n,i):t[e]=i===void 0?n:i}}return t}function Uy(...e){return e.length===1&&e[0]?e[0]:t=>{let n=!1,r=e.map(e=>{let r=Wy(e,t);return n||=typeof r==`function`,r});if(n)return()=>{r.forEach((t,n)=>{typeof t==`function`?t():Wy(e[n],null)})}}}function Wy(e,t){if(typeof e==`function`)return e(t);e!=null&&(e.current=t)}function Gy(e,t={}){let{labelable:n,isLink:r,global:i,events:a=i,propNames:o}=t,s={};for(let t in e)Object.prototype.hasOwnProperty.call(e,t)&&(iA.has(t)||n&&aA.has(t)||r&&oA.has(t)||i&&sA.has(t)||a&&(cA.has(t)||t.endsWith(`Capture`)&&cA.has(t.slice(0,-7)))||o?.has(t)||lA.test(t))&&(s[t]=e[t]);return s}function Ky(e){if(qy())e.focus({preventScroll:!0});else{let t=Jy(e);e.focus(),Yy(t)}}function qy(){if(uA==null){uA=!1;try{document.createElement(`div`).focus({get preventScroll(){return uA=!0,!0}})}catch{}}return uA}function Jy(e){let t=e.parentNode,n=[],r=document.scrollingElement||document.documentElement;for(;t instanceof HTMLElement&&t!==r;)(t.offsetHeight`u`||window.navigator==null)return!1;let t=window.navigator.userAgentData?.brands;return Array.isArray(t)&&t.some(t=>e.test(t.brand))||e.test(window.navigator.userAgent)}function Zy(e){return typeof window<`u`&&window.navigator!=null?e.test(window.navigator.userAgentData?.platform||window.navigator.platform):!1}function Qy(e){let t=null;return()=>(t??=e(),t)}function $y(){return(0,wE.useContext)(bA)}function eb(e,t){let n=e.getAttribute(`target`);return(!n||n===`_self`)&&e.origin===location.origin&&!e.hasAttribute(`download`)&&!t.metaKey&&!t.ctrlKey&&!t.altKey&&!t.shiftKey}function tb(e,t,n=!0){var r,i;let{metaKey:a,ctrlKey:o,altKey:s,shiftKey:c}=t;yA()&&!((i=window.event)==null||(r=i.type)==null)&&r.startsWith(`key`)&&e.target===`_blank`&&(dA()?a=!0:o=!0);let l=gA()&&dA()&&!pA()?new KeyboardEvent(`keydown`,{keyIdentifier:`Enter`,metaKey:a,ctrlKey:o,altKey:s,shiftKey:c}):new MouseEvent(`click`,{metaKey:a,ctrlKey:o,altKey:s,shiftKey:c,detail:1,bubbles:!0,cancelable:!0});tb.isOpening=n,Ky(e),e.dispatchEvent(l),tb.isOpening=!1}function nb(e,t){if(e instanceof HTMLAnchorElement)t(e);else if(e.hasAttribute(`data-href`)){let n=document.createElement(`a`);n.href=e.getAttribute(`data-href`),e.hasAttribute(`data-target`)&&(n.target=e.getAttribute(`data-target`)),e.hasAttribute(`data-rel`)&&(n.rel=e.getAttribute(`data-rel`)),e.hasAttribute(`data-download`)&&(n.download=e.getAttribute(`data-download`)),e.hasAttribute(`data-ping`)&&(n.ping=e.getAttribute(`data-ping`)),e.hasAttribute(`data-referrer-policy`)&&(n.referrerPolicy=e.getAttribute(`data-referrer-policy`)),e.appendChild(n),t(n),e.removeChild(n)}}function rb(e,t){nb(e,e=>tb(e,t))}function ib(e){let t=$y().useHref(e?.href??``);return{href:e?.href?t:void 0,target:e?.target,rel:e?.rel,download:e?.download,ping:e?.ping,referrerPolicy:e?.referrerPolicy}}function ab(e,t,n,r){!t.isNative&&e.currentTarget instanceof HTMLAnchorElement&&e.currentTarget.href&&!e.isDefaultPrevented()&&eb(e.currentTarget,e)&&n&&(e.preventDefault(),t.open(e.currentTarget,e,n,r))}function ob(){if(typeof window>`u`)return;function e(e){return`propertyName`in e}let t=t=>{if(!e(t)||!t.target)return;let r=xA.get(t.target);r||(r=new Set,xA.set(t.target,r),t.target.addEventListener(`transitioncancel`,n,{once:!0})),r.add(t.propertyName)},n=t=>{if(!e(t)||!t.target)return;let r=xA.get(t.target);if(r&&(r.delete(t.propertyName),r.size===0&&(t.target.removeEventListener(`transitioncancel`,n),xA.delete(t.target)),xA.size===0)){for(let e of SA)e();SA.clear()}};document.body.addEventListener(`transitionrun`,t),document.body.addEventListener(`transitionend`,n)}function sb(){for(let[e]of xA)`isConnected`in e&&!e.isConnected&&xA.delete(e)}function cb(e){requestAnimationFrame(()=>{sb(),xA.size===0?e():SA.add(e)})}function lb(){let e=(0,TE.useRef)(new Map),t=(0,TE.useCallback)((t,n,r,i)=>{let a=i?.once?(...t)=>{e.current.delete(r),r(...t)}:r;e.current.set(r,{type:n,eventTarget:t,fn:a,options:i}),t.addEventListener(n,a,i)},[]),n=(0,TE.useCallback)((t,n,r,i)=>{let a=e.current.get(r)?.fn||r;t.removeEventListener(n,a,i),e.current.delete(r)},[]),r=(0,TE.useCallback)(()=>{e.current.forEach((e,t)=>{n(e.eventTarget,e.type,t,e.options)})},[n]);return(0,TE.useEffect)(()=>r,[r]),{addGlobalListener:t,removeGlobalListener:n,removeAllGlobalListeners:r}}function ub(e,t){let{id:n,"aria-label":r,"aria-labelledby":i}=e;return n=jy(n),i&&r?i=[...new Set([n,...i.trim().split(/\s+/)])].join(` `):i&&=i.trim().split(/\s+/).join(` `),!r&&!i&&t&&(r=t),{id:n,"aria-label":r,"aria-labelledby":i}}function db(e){let t=(0,EE.useRef)(null),n=(0,EE.useRef)(void 0),r=(0,EE.useCallback)(t=>{if(typeof e==`function`){let n=e,r=n(t);return()=>{typeof r==`function`?r():n(null)}}else if(e)return e.current=t,()=>{e.current=null}},[e]);return(0,EE.useMemo)(()=>({get current(){return t.current},set current(e){t.current=e,n.current&&=(n.current(),void 0),e!=null&&(n.current=r(e))}}),[r])}function fb(e){let t=(0,DE.useRef)(null);return CA(()=>{t.current=e},[e]),(0,DE.useCallback)((...e)=>{let n=t.current;return n?.(...e)},[])}function pb(e,t){let n=(0,OE.useRef)(!0),r=(0,OE.useRef)(null);Y(()=>(n.current=!0,()=>{n.current=!1}),[]),Y(()=>{n.current?n.current=!1:(!r.current||t.some((e,t)=>!Object.is(e,r[t])))&&e(),r.current=t},t)}function mb(){return typeof window.ResizeObserver<`u`}function hb(e){let{ref:t,box:n,onResize:r}=e,i=fb(r);(0,kE.useEffect)(()=>{let e=t?.current;if(e)if(mb()){let t=new window.ResizeObserver(e=>{e.length&&i()});return t.observe(e,{box:n}),()=>{e&&t.unobserve(e)}}else return window.addEventListener(`resize`,i,!1),()=>{window.removeEventListener(`resize`,i,!1)}},[t,n])}function gb(e,t){Y(()=>{if(e&&e.ref&&t)return e.ref.current=t.current,()=>{e.ref&&(e.ref.current=null)}})}function _b(e,t){if(!e)return!1;let n=window.getComputedStyle(e),r=/(auto|scroll)/.test(n.overflow+n.overflowX+n.overflowY);return r&&t&&(r=e.scrollHeight!==e.clientHeight||e.scrollWidth!==e.clientWidth),r}function vb(e,t){let n=e;for(_b(n,t)&&(n=n.parentElement);n&&!_b(n,t);)n=n.parentElement;return n||document.scrollingElement||document.documentElement}function yb(e,t){let n=[];for(;e&&e!==document.documentElement;)_b(e,t)&&n.push(e),e=e.parentElement;return n}function bb(e){return dA()?e.metaKey:e.ctrlKey}function xb(e){return e instanceof HTMLInputElement&&!wA.has(e.type)||e instanceof HTMLTextAreaElement||e instanceof HTMLElement&&e.isContentEditable}function Sb(e){let[t,n]=(0,AE.useState)();return Y(()=>{if(!e)return;let t=EA.get(e);if(t)n(t.element.id);else{let r=`react-aria-description-${TA++}`;n(r);let i=document.createElement(`div`);i.id=r,i.style.display=`none`,i.textContent=e,document.body.appendChild(i),t={refCount:0,element:i},EA.set(e,t)}return t.refCount++,()=>{t&&--t.refCount===0&&(t.element.remove(),EA.delete(e))}},[e]),{"aria-describedby":e?t:void 0}}function Cb(e,t,n,r){let i=fb(n),a=n==null;(0,jE.useEffect)(()=>{if(a||!e.current)return;let n=e.current;return n.addEventListener(t,i,r),()=>{n.removeEventListener(t,i,r)}},[e,t,r,a])}function wb(e,t){let n=Tb(e,t,`left`),r=Tb(e,t,`top`),i=t.offsetWidth,a=t.offsetHeight,o=e.scrollLeft,s=e.scrollTop,{borderTopWidth:c,borderLeftWidth:l,scrollPaddingTop:u,scrollPaddingRight:d,scrollPaddingBottom:f,scrollPaddingLeft:p}=getComputedStyle(e),m=o+parseInt(l,10),h=s+parseInt(c,10),g=m+e.clientWidth,_=h+e.clientHeight,v=parseInt(u,10)||0,y=parseInt(f,10)||0,b=parseInt(d,10)||0,x=parseInt(p,10)||0;n<=o+x?o=n-parseInt(l,10)-x:n+i>g-b&&(o+=n+i-g+b),r<=h+v?s=r-parseInt(c,10)-v:r+a>_-y&&(s+=r+a-_+y),e.scrollLeft=o,e.scrollTop=s}function Tb(e,t,n){let r=n===`left`?`offsetLeft`:`offsetTop`,i=0;for(;t.offsetParent&&(i+=t[r],t.offsetParent!==e);){if(t.offsetParent.contains(e)){i-=e[r];break}t=t.offsetParent}return i}function Eb(e,t){if(e&&document.contains(e)){let o=document.scrollingElement||document.documentElement,s=window.getComputedStyle(o).overflow===`hidden`;if(s){let t=yb(e);s||t.push(o);for(let n of t)wb(n,e)}else{var n;let{left:o,top:s}=e.getBoundingClientRect();e==null||(n=e.scrollIntoView)==null||n.call(e,{block:`nearest`});let{left:c,top:l}=e.getBoundingClientRect();if(Math.abs(o-c)>1||Math.abs(s-l)>1){var r,i,a;t==null||(i=t.containingElement)==null||(r=i.scrollIntoView)==null||r.call(i,{block:`center`,inline:`center`}),(a=e.scrollIntoView)==null||a.call(e,{block:`nearest`})}}}}function Db(e){return e.pointerType===``&&e.isTrusted?!0:vA()&&e.pointerType?e.type===`click`&&e.buttons===1:e.detail===0&&!e.pointerType}function Ob(e){return!vA()&&e.width===0&&e.height===0||e.width===1&&e.height===1&&e.pressure===0&&e.detail===0&&e.pointerType===`mouse`}function kb(e){let t=ME.version.split(`.`);return parseInt(t[0],10)>=19?e:e?`true`:void 0}function Ab(e,t=!0){let[n,r]=(0,PE.useState)(!0),i=n&&t;return Y(()=>{if(i&&e.current&&`getAnimations`in e.current)for(let t of e.current.getAnimations())t instanceof CSSTransition&&t.cancel()},[e,i]),Mb(e,i,(0,PE.useCallback)(()=>r(!1),[])),i}function jb(e,t){let[n,r]=(0,PE.useState)(t?`open`:`closed`);switch(n){case`open`:t||r(`exiting`);break;case`closed`:case`exiting`:t&&r(`open`);break}let i=n===`exiting`;return Mb(e,i,(0,PE.useCallback)(()=>{r(e=>e===`exiting`?`closed`:e)},[])),i}function Mb(e,t,n){Y(()=>{if(t&&e.current){if(!(`getAnimations`in e.current)){n();return}let t=e.current.getAnimations();if(t.length===0){n();return}let r=!1;return Promise.all(t.map(e=>e.finished)).then(()=>{r||(0,NE.flushSync)(()=>{n()})}).catch(()=>{}),()=>{r=!0}}},[e,t,n])}function Nb(e){let t=$k(e);if(!(e instanceof t.HTMLElement)&&!(e instanceof t.SVGElement))return!1;let{display:n,visibility:r}=e.style,i=n!==`none`&&r!==`hidden`&&r!==`collapse`;if(i){let{getComputedStyle:t}=e.ownerDocument.defaultView,{display:n,visibility:r}=t(e);i=n!==`none`&&r!==`hidden`&&r!==`collapse`}return i}function Pb(e,t){return!e.hasAttribute(`hidden`)&&!e.hasAttribute(`data-react-aria-prevent-focus`)&&(e.nodeName===`DETAILS`&&t&&t.nodeName!==`SUMMARY`?e.hasAttribute(`open`):!0)}function Fb(e,t){return kA?e.checkVisibility({visibilityProperty:!0})&&!e.closest(`[data-react-aria-prevent-focus]`):e.nodeName!==`#comment`&&Nb(e)&&Pb(e,t)&&(!e.parentElement||Fb(e.parentElement,e))}function Ib(e){return e.matches(jA)&&Fb(e)&&!Rb(e)}function Lb(e){return e.matches(MA)&&Fb(e)&&!Rb(e)}function Rb(e){let t=e;for(;t!=null;){if(t instanceof t.ownerDocument.defaultView.HTMLElement&&t.inert)return!0;t=t.parentElement}return!1}function zb(e,t,n){let[r,i]=(0,FE.useState)(e||t),a=(0,FE.useRef)(r),o=(0,FE.useRef)(e!==void 0),s=e!==void 0;(0,FE.useEffect)(()=>{o.current,o.current=s},[s]);let c=s?e:r;NA(()=>{a.current=c});let[,l]=(0,FE.useReducer)(()=>({}),{});return[c,(0,FE.useCallback)((e,...t)=>{let r=typeof e==`function`?e(a.current):e;Object.is(a.current,r)||(a.current=r,i(r),l(),n?.(r,...t))},[n])]}function Bb(e,t=-1/0,n=1/0){return Math.min(Math.max(e,t),n)}function Vb(e){let t=e;return t.nativeEvent=e,t.isDefaultPrevented=()=>t.defaultPrevented,t.isPropagationStopped=()=>t.cancelBubble,t.persist=()=>{},t}function Hb(e,t){Object.defineProperty(e,`target`,{value:t}),Object.defineProperty(e,`currentTarget`,{value:t})}function Ub(e){let t=(0,IE.useRef)({isFocused:!1,observer:null});Y(()=>{let e=t.current;return()=>{e.observer&&=(e.observer.disconnect(),null)}},[]);let n=fb(t=>{e?.(t)});return(0,IE.useCallback)(e=>{if(e.target instanceof HTMLButtonElement||e.target instanceof HTMLInputElement||e.target instanceof HTMLTextAreaElement||e.target instanceof HTMLSelectElement){t.current.isFocused=!0;let r=e.target;r.addEventListener(`focusout`,e=>{t.current.isFocused=!1,r.disabled&&n(Vb(e)),t.current.observer&&(t.current.observer.disconnect(),t.current.observer=null)},{once:!0}),t.current.observer=new MutationObserver(()=>{if(t.current.isFocused&&r.disabled){var e;(e=t.current.observer)==null||e.disconnect();let n=r===document.activeElement?null:document.activeElement;r.dispatchEvent(new FocusEvent(`blur`,{relatedTarget:n})),r.dispatchEvent(new FocusEvent(`focusout`,{bubbles:!0,relatedTarget:n}))}}),t.current.observer.observe(r,{attributes:!0,attributeFilter:[`disabled`]})}},[n])}function Wb(e){for(;e&&!Ib(e);)e=e.parentElement;let t=$k(e),n=t.document.activeElement;if(!n||n===e)return;PA=!0;let r=!1,i=e=>{(e.target===n||r)&&e.stopImmediatePropagation()},a=t=>{(t.target===n||r)&&(t.stopImmediatePropagation(),!e&&!r&&(r=!0,Ky(n),c()))},o=t=>{(t.target===e||r)&&t.stopImmediatePropagation()},s=t=>{(t.target===e||r)&&(t.stopImmediatePropagation(),r||(r=!0,Ky(n),c()))};t.addEventListener(`blur`,i,!0),t.addEventListener(`focusout`,a,!0),t.addEventListener(`focusin`,s,!0),t.addEventListener(`focus`,o,!0);let c=()=>{cancelAnimationFrame(l),t.removeEventListener(`blur`,i,!0),t.removeEventListener(`focusout`,a,!0),t.removeEventListener(`focusin`,s,!0),t.removeEventListener(`focus`,o,!0),PA=!1,r=!1},l=requestAnimationFrame(c);return c}function Gb(e){if(mA()){if(FA===`default`){let t=X(e);IA=t.documentElement.style.webkitUserSelect,t.documentElement.style.webkitUserSelect=`none`}FA=`disabled`}else if(e instanceof HTMLElement||e instanceof SVGElement){let t=`userSelect`in e.style?`userSelect`:`webkitUserSelect`;LA.set(e,e.style[t]),e.style[t]=`none`}}function Kb(e){if(mA()){if(FA!==`disabled`)return;FA=`restoring`,setTimeout(()=>{cb(()=>{if(FA===`restoring`){let t=X(e);t.documentElement.style.webkitUserSelect===`none`&&(t.documentElement.style.webkitUserSelect=IA||``),IA=``,FA=`default`}})},300)}else if((e instanceof HTMLElement||e instanceof SVGElement)&&e&&LA.has(e)){let t=LA.get(e),n=`userSelect`in e.style?`userSelect`:`webkitUserSelect`;e.style[n]===`none`&&(e.style[n]=t),e.getAttribute(`style`)===``&&e.removeAttribute(`style`),LA.delete(e)}}function qb(e,t){return t.get?t.get.call(e):t.value}function Jb(e,t,n){if(!t.has(e))throw TypeError(`attempted to `+n+` private field on non-instance`);return t.get(e)}function Yb(e,t){return qb(e,Jb(e,t,`get`))}function Xb(e,t){if(t.has(e))throw TypeError(`Cannot initialize the same private elements twice on an object`)}function Zb(e,t,n){Xb(e,t),t.set(e,n)}function Qb(e,t,n){if(t.set)t.set.call(e,n);else{if(!t.writable)throw TypeError(`attempted to set read only private field`);t.value=n}}function $b(e,t,n){return Qb(e,Jb(e,t,`set`),n),n}function ex(e){let t=(0,RE.useContext)(RA);if(t){let{register:n,...r}=t;e=B(r,e),n()}return gb(t,e.ref),e}function tx(e){let{onPress:t,onPressChange:n,onPressStart:r,onPressEnd:i,onPressUp:a,onClick:o,isDisabled:s,isPressed:c,preventFocusOnPress:l,shouldCancelOnPointerExit:u,allowTextSelectionOnPress:d,ref:f,...p}=ex(e),[m,h]=(0,RE.useState)(!1),g=(0,RE.useRef)({isPressed:!1,ignoreEmulatedMouseEvents:!1,didFirePressStart:!1,isTriggeringEvent:!1,activePointerId:null,target:null,isOverTarget:!1,pointerType:null,disposables:[]}),{addGlobalListener:_,removeAllGlobalListeners:v}=lb(),y=fb((e,t)=>{let i=g.current;if(s||i.didFirePressStart)return!1;let a=!0;if(i.isTriggeringEvent=!0,r){let n=new BA(`pressstart`,t,e);r(n),a=n.shouldStopPropagation}return n&&n(!0),i.isTriggeringEvent=!1,i.didFirePressStart=!0,h(!0),a}),b=fb((e,r,a=!0)=>{let o=g.current;if(!o.didFirePressStart)return!1;o.didFirePressStart=!1,o.isTriggeringEvent=!0;let c=!0;if(i){let t=new BA(`pressend`,r,e);i(t),c=t.shouldStopPropagation}if(n&&n(!1),h(!1),t&&a&&!s){let n=new BA(`press`,r,e);t(n),c&&=n.shouldStopPropagation}return o.isTriggeringEvent=!1,c}),x=fb((e,t)=>{let n=g.current;if(s)return!1;if(a){n.isTriggeringEvent=!0;let r=new BA(`pressup`,t,e);return a(r),n.isTriggeringEvent=!1,r.shouldStopPropagation}return!0}),S=fb(e=>{let t=g.current;if(t.isPressed&&t.target){t.didFirePressStart&&t.pointerType!=null&&b(ix(t.target,e),t.pointerType,!1),t.isPressed=!1,t.isOverTarget=!1,t.activePointerId=null,t.pointerType=null,v(),d||Kb(t.target);for(let e of t.disposables)e();t.disposables=[]}}),C=fb(e=>{u&&S(e)}),w=fb(e=>{s||o?.(e)}),T=fb((e,t)=>{if(!s&&o){let n=new MouseEvent(`click`,e);Hb(n,t),o(Vb(n))}}),E=(0,RE.useMemo)(()=>{let e=g.current,t={onKeyDown(t){if(rx(t.nativeEvent,t.currentTarget)&&Ry(t.currentTarget,zy(t.nativeEvent))){var r;ox(zy(t.nativeEvent),t.key)&&t.preventDefault();let i=!0;if(!e.isPressed&&!t.repeat){e.target=t.currentTarget,e.isPressed=!0,e.pointerType=`keyboard`,i=y(t,`keyboard`);let r=t.currentTarget;_(X(t.currentTarget),`keyup`,Py(t=>{rx(t,r)&&!t.repeat&&Ry(r,zy(t))&&e.target&&x(ix(e.target,t),`keyboard`)},n),!0)}i&&t.stopPropagation(),t.metaKey&&dA()&&((r=e.metaKeyEvents)==null||r.set(t.key,t.nativeEvent))}else t.key===`Meta`&&(e.metaKeyEvents=new Map)},onClick(t){if(!(t&&!Ry(t.currentTarget,zy(t.nativeEvent)))&&t&&t.button===0&&!e.isTriggeringEvent&&!tb.isOpening){let n=!0;if(s&&t.preventDefault(),!e.ignoreEmulatedMouseEvents&&!e.isPressed&&(e.pointerType===`virtual`||Db(t.nativeEvent))){let e=y(t,`virtual`),r=x(t,`virtual`),i=b(t,`virtual`);w(t),n=e&&r&&i}else if(e.isPressed&&e.pointerType!==`keyboard`){let r=e.pointerType||t.nativeEvent.pointerType||`virtual`,i=x(ix(t.currentTarget,t),r),a=b(ix(t.currentTarget,t),r,!0);n=i&&a,e.isOverTarget=!1,w(t),S(t)}e.ignoreEmulatedMouseEvents=!1,n&&t.stopPropagation()}}},n=t=>{var n;if(e.isPressed&&e.target&&rx(t,e.target)){var r;ox(zy(t),t.key)&&t.preventDefault();let n=zy(t),i=Ry(e.target,zy(t));b(ix(e.target,t),`keyboard`,i),i&&T(t,e.target),v(),t.key!==`Enter`&&nx(e.target)&&Ry(e.target,n)&&!t[VA]&&(t[VA]=!0,tb(e.target,t,!1)),e.isPressed=!1,(r=e.metaKeyEvents)==null||r.delete(t.key)}else if(t.key===`Meta`&&(n=e.metaKeyEvents)!=null&&n.size){var i;let t=e.metaKeyEvents;e.metaKeyEvents=void 0;for(let n of t.values())(i=e.target)==null||i.dispatchEvent(new KeyboardEvent(`keyup`,n))}};if(typeof PointerEvent<`u`){t.onPointerDown=t=>{if(t.button!==0||!Ry(t.currentTarget,zy(t.nativeEvent)))return;if(Ob(t.nativeEvent)){e.pointerType=`virtual`;return}e.pointerType=t.pointerType;let i=!0;if(!e.isPressed){e.isPressed=!0,e.isOverTarget=!0,e.activePointerId=t.pointerId,e.target=t.currentTarget,d||Gb(e.target),i=y(t,e.pointerType);let a=zy(t.nativeEvent);`releasePointerCapture`in a&&a.releasePointerCapture(t.pointerId),_(X(t.currentTarget),`pointerup`,n,!1),_(X(t.currentTarget),`pointercancel`,r,!1)}i&&t.stopPropagation()},t.onMouseDown=t=>{if(Ry(t.currentTarget,zy(t.nativeEvent))&&t.button===0){if(l){let n=Wb(t.target);n&&e.disposables.push(n)}t.stopPropagation()}},t.onPointerUp=t=>{!Ry(t.currentTarget,zy(t.nativeEvent))||e.pointerType===`virtual`||t.button===0&&!e.isPressed&&x(t,e.pointerType||t.pointerType)},t.onPointerEnter=t=>{t.pointerId===e.activePointerId&&e.target&&!e.isOverTarget&&e.pointerType!=null&&(e.isOverTarget=!0,y(ix(e.target,t),e.pointerType))},t.onPointerLeave=t=>{t.pointerId===e.activePointerId&&e.target&&e.isOverTarget&&e.pointerType!=null&&(e.isOverTarget=!1,b(ix(e.target,t),e.pointerType,!1),C(t))};let n=t=>{if(t.pointerId===e.activePointerId&&e.isPressed&&t.button===0&&e.target){if(Ry(e.target,zy(t))&&e.pointerType!=null){let n=!1,r=setTimeout(()=>{e.isPressed&&e.target instanceof HTMLElement&&(n?S(t):(Ky(e.target),e.target.click()))},80);_(t.currentTarget,`click`,()=>n=!0,!0),e.disposables.push(()=>clearTimeout(r))}else S(t);e.isOverTarget=!1}},r=e=>{S(e)};t.onDragStart=e=>{Ry(e.currentTarget,zy(e.nativeEvent))&&S(e)}}return t},[_,s,l,v,d,S,C,b,y,x,w,T]);return(0,RE.useEffect)(()=>{if(!f)return;let e=X(f.current);if(!e||!e.head||e.getElementById(HA))return;let t=e.createElement(`style`);t.id=HA,t.textContent=` + `});let m=e.versions&&Object.keys(e.versions).length?e.versions:s.versions;await a.setRef(t,{id:t,url:u.url,...s,...m?{versions:m}:{},type:s.storyIndex?`lazy`:`auto-inject`})},getRefs:()=>{let{refs:t={}}=e.getState();return t},setRef:async(i,{storyIndex:o,setStoriesData:s,...c},l=!1)=>{if(n)return;let u,d,f,{filters:p}=e.getState(),{storyMapper:m=Tg}=t.getConfig(),h=a.getRefs()[i];(o||s)&&(u=s?mg(Og(s,h,{storyMapper:m})):o,f=vg(o,{provider:t,docsOptions:r,filters:p,allStatuses:{}}),d=vg(o,{provider:t,docsOptions:r,filters:{},allStatuses:{}})),d&&=Eg(d,h),f&&=Eg(f,h),await a.updateRef(i,{...h,...c,index:d,filteredIndex:f,internal_index:u})},updateRef:async(t,n)=>{let{[t]:r,...i}=a.getRefs();i[t]={...r,...n};let o=Object.keys(s).reduce((e,t)=>(e[t]=i[t],e),{});await e.setState({refs:o})}},o=!n&&lg.REFS||{},s=o;return i&&new Promise(async e=>{for(let e of Object.values(o))await a.checkRef({...e,stories:{}});e(void 0)}),{api:a,state:{refs:s}}},Ag=(e,t)=>{let{source:n,refId:r,type:i}=e,[a,o]=wg(n,r),s;(r||a===`external`)&&(s=r&&t.getRefs()[r]?t.getRefs()[r]:t.findRef(o));let c={source:n,sourceType:a,sourceLocation:o,refId:r,ref:s,type:i};switch(!0){case typeof r==`string`:case a===`local`:case a===`external`:return c;default:return sg.warn(`Received a ${i} frame that was not configured as a ref`),null}},jg=({store:e,fullAPI:t,provider:n})=>{let r={getGlobals(){return e.getState().globals},getUserGlobals(){return e.getState().userGlobals},getStoryGlobals(){return e.getState().storyGlobals},getGlobalTypes(){return e.getState().globalTypes},updateGlobals(e){n.channel?.emit(og,{globals:e,options:{target:`storybook-preview-iframe`}})}},i={globals:{},userGlobals:{},storyGlobals:{},globalTypes:{}},a=({globals:t,storyGlobals:n,userGlobals:r})=>{let{globals:i,userGlobals:a,storyGlobals:o}=e.getState();Wi(t,i)||e.setState({globals:t}),Wi(r,a)||e.setState({userGlobals:r}),Wi(n,o)||e.setState({storyGlobals:n})};return n.channel?.on(ig,function({globals:e,storyGlobals:n,userGlobals:r}){let{ref:i}=Ag(this,t);i?rg.warn(`received a GLOBALS_UPDATED from a non-local ref. This is not currently supported.`):a({globals:e,storyGlobals:n,userGlobals:r})}),n.channel?.on(ag,function({globals:n,globalTypes:i}){let{ref:a}=Ag(this,t),o=e.getState()?.userGlobals;a?Object.keys(n).length>0&&rg.warn(`received globals from a non-local ref. This is not currently supported.`):e.setState({globals:n,userGlobals:n,globalTypes:i}),o&&Object.keys(o).length!==0&&!Wi(n,o)&&r.updateGlobals(o)}),{api:r,state:i}},Mg={},f(Mg,{ActiveTabs:()=>Lg,DEFAULT_BOTTOM_PANEL_HEIGHT:()=>zg,DEFAULT_NAV_SIZE:()=>Rg,DEFAULT_RIGHT_PANEL_WIDTH:()=>Bg,focusableUIElements:()=>Hg,getDefaultLayoutState:()=>Vg,init:()=>qg}),{SET_CONFIG:Ng}=__STORYBOOK_MODULE_CORE_EVENTS__,{global:Pg}=__STORYBOOK_MODULE_GLOBAL__,{document:Fg}=Pg,Ig=e=>typeof e==`function`,Lg={SIDEBAR:`sidebar`,CANVAS:`canvas`,ADDONS:`addons`},Rg=300,zg=300,Bg=400,Vg=()=>({ui:{enableShortcuts:!0},layout:{initialActive:Lg.CANVAS,showToolbar:!0,navSize:Rg,bottomPanelHeight:zg,rightPanelWidth:Bg,recentVisibleSizes:{navSize:Rg,bottomPanelHeight:zg,rightPanelWidth:Bg},panelPosition:`bottom`,showTabs:!0},layoutCustomisations:{showSidebar:void 0,showToolbar:void 0},selectedPanel:void 0,theme:O()}),Hg={addonPanel:`storybook-panel-region`,storySearchField:`storybook-explorer-searchfield`,storyListMenu:`storybook-explorer-menu`,storyPanelRoot:`storybook-panel-root`,showAddonPanel:`storybook-show-addon-panel`,sidebarRegion:`storybook-sidebar-region`,showSidebar:`storybook-show-sidebar`},Ug=e=>e.layout.navSize>0,Wg=e=>{let{bottomPanelHeight:t,rightPanelWidth:n,panelPosition:r}=e.layout;return r===`bottom`&&t>0||r===`right`&&n>0},Gg=e=>!Ug(e)&&!Wg(e),Kg=e=>({navSize:e.navSize>0?e.navSize:e.recentVisibleSizes.navSize,bottomPanelHeight:e.bottomPanelHeight>0?e.bottomPanelHeight:e.recentVisibleSizes.bottomPanelHeight,rightPanelWidth:e.rightPanelWidth>0?e.rightPanelWidth:e.recentVisibleSizes.rightPanelWidth}),qg=({store:e,provider:t,singleStory:n})=>{let r={toggleFullscreen(t){return e.setState(e=>{let n=Gg(e),r=typeof t==`boolean`?t:!n;return r===n?{layout:e.layout}:r?{layout:{...e.layout,navSize:0,bottomPanelHeight:0,rightPanelWidth:0,recentVisibleSizes:Kg(e.layout)}}:{layout:{...e.layout,navSize:e.singleStory?0:e.layout.recentVisibleSizes.navSize,bottomPanelHeight:e.layout.recentVisibleSizes.bottomPanelHeight,rightPanelWidth:e.layout.recentVisibleSizes.rightPanelWidth}}},{persistence:`session`})},togglePanel(t){return e.setState(e=>{let n=Wg(e),r=typeof t==`boolean`?t:!n;return r===n?{layout:e.layout}:r?{layout:{...e.layout,bottomPanelHeight:e.layout.recentVisibleSizes.bottomPanelHeight,rightPanelWidth:e.layout.recentVisibleSizes.rightPanelWidth}}:{layout:{...e.layout,bottomPanelHeight:0,rightPanelWidth:0,recentVisibleSizes:Kg(e.layout)}}},{persistence:`session`})},togglePanelPosition(t){return e.setState(e=>{let n=t||(e.layout.panelPosition===`right`?`bottom`:`right`);return{layout:{...e.layout,panelPosition:n,bottomPanelHeight:e.layout.recentVisibleSizes.bottomPanelHeight,rightPanelWidth:e.layout.recentVisibleSizes.rightPanelWidth}}},{persistence:`permanent`})},toggleNav(t){return e.setState(e=>{if(e.singleStory)return{layout:e.layout};let n=Ug(e),r=typeof t==`boolean`?t:!n;return r===n?{layout:e.layout}:r?{layout:{...e.layout,navSize:e.layout.recentVisibleSizes.navSize}}:{layout:{...e.layout,navSize:0,recentVisibleSizes:Kg(e.layout)}}},{persistence:`session`})},toggleToolbar(t){return e.setState(e=>{let n=typeof t<`u`?t:!e.layout.showToolbar;return{layout:{...e.layout,showToolbar:n}}},{persistence:`session`})},setSizes({navSize:t,bottomPanelHeight:n,rightPanelWidth:r}){return e.setState(e=>{let i={...e.layout,navSize:t??e.layout.navSize,bottomPanelHeight:n??e.layout.bottomPanelHeight,rightPanelWidth:r??e.layout.rightPanelWidth};return{layout:{...i,recentVisibleSizes:Kg(i)}}},{persistence:`session`})},focusOnUIElement(e,t){let{forceFocus:n=!1,select:r=!1,poll:i=!0}=typeof t==`boolean`?{select:t}:t??{};if(!e)return!1;let a=()=>{let t=Fg.getElementById(e);return!t||(t.focus(),t!==Fg.activeElement&&n&&t.getAttribute(`tabindex`)===null&&(t.setAttribute(`tabindex`,`-1`),t.focus()),t!==Fg.activeElement&&t.id!==Fg.activeElement?.id)?!1:(r&&t.select?.(),!0)};return a()?!0:i?new Promise(e=>{let t=Date.now(),n=setInterval(()=>{let r=Date.now()-t;if(a()){clearInterval(n),e(!0);return}r>=500&&(clearInterval(n),e(!1))},50)}):!1},getInitialOptions(){let{theme:e,selectedPanel:r,layoutCustomisations:i,...a}=t.getConfig(),o=Vg();return{...o,layout:{...v(o.layout,l(a,Object.keys(o.layout))),...n&&{navSize:0}},layoutCustomisations:{...o.layoutCustomisations,...i??{}},ui:v(o.ui,l(a,Object.keys(o.ui))),selectedPanel:r||o.selectedPanel,theme:e||o.theme}},getIsFullscreen(){return Gg(e.getState())},getIsPanelShown(){return Wg(e.getState())},getIsNavShown(){return Ug(e.getState())},getShowToolbarWithCustomisations(t){let n=e.getState();return Ig(n.layoutCustomisations.showToolbar)?n.layoutCustomisations.showToolbar(n,t)??t:t},getShowPanelWithCustomisations(t){let n=e.getState();return Ig(n.layoutCustomisations.showPanel)?n.layoutCustomisations.showPanel(n,t)??t:t},getNavSizeWithCustomisations(t){let n=e.getState();if(Ig(n.layoutCustomisations.showSidebar)){let e=n.layoutCustomisations.showSidebar(n,t!==0);if(t===0&&e===!0)return n.layout.recentVisibleSizes.navSize;if(t!==0&&e===!1)return 0}return t},setOptions:t=>{let{layout:r,ui:i,selectedPanel:a,theme:o}=e.getState();if(!t)return;let s={...r,...t.layout||{},...l(t,Object.keys(r)),...n&&{navSize:0}},c={...i,...t.ui,...v(t.ui||{},l(t,Object.keys(i)))},d={...o,...t.theme},f={};u(i,c)||(f.ui=c),u(r,s)||(f.layout=s),t.selectedPanel&&!u(a,t.selectedPanel)&&(f.selectedPanel=t.selectedPanel),Object.keys(f).length&&e.setState(f,{persistence:`permanent`}),u(o,d)||e.setState({theme:d})}},i=l(e.getState(),[`layout`,`selectedPanel`]);return t.channel?.on(Ng,()=>{r.setOptions(Bh(r.getInitialOptions(),i))}),{api:r,state:Bh(r.getInitialOptions(),i)}},Jg={},f(Jg,{init:()=>Yg}),Yg=({store:e})=>({api:{addNotification:t=>{e.setState(({notifications:e})=>{let[n,r]=Gi(e,e=>e.id===t.id);return n.forEach(e=>{e.onClear&&e.onClear({dismissed:!1,timeout:!1})}),{notifications:[...r,t]}})},clearNotification:t=>{e.setState(({notifications:e})=>{let[n,r]=Gi(e,e=>e.id===t);return n.forEach(e=>{e.onClear&&e.onClear({dismissed:!1,timeout:!1})}),{notifications:r}})}},state:{notifications:[]}}),Xg={},f(Xg,{init:()=>$g}),{OPEN_IN_EDITOR_REQUEST:Zg,OPEN_IN_EDITOR_RESPONSE:Qg}=__STORYBOOK_MODULE_CORE_EVENTS__,$g=({provider:e,fullAPI:t})=>({api:{openInEditor(t){return new Promise(n=>{let{file:r,line:i,column:a}=t,o=t=>{t.file===r&&t.line===i&&t.column===a&&(e.channel?.off(Qg,o),n(t))};e.channel?.on(Qg,o),e.channel?.emit(Zg,t)})}},state:{notifications:[]},init:async()=>{let{color:n}=await a(async()=>{let{color:e}=await import(`./theming-DLWRz99i.js`).then(e=>(e.a(),e.l));return{color:e}},__vite__mapDeps([0,1,2,3,4,5,6]),import.meta.url);e.channel?.on(Qg,e=>{e.error!==null&&t.addNotification({id:`open-in-editor-error`,content:{headline:`Failed to open in editor`,subHeadline:e.error||`Check the Storybook process on the command line for more details.`},icon:Th.createElement(je,{color:n.negative}),duration:8e3})})}}),e_={},f(e_,{init:()=>t_}),t_=({provider:e,fullAPI:t})=>({api:e.renderPreview?{renderPreview:e.renderPreview}:{},state:{},init:()=>{e.handleAPI(t)}}),n_={},f(n_,{init:()=>r_}),r_=({store:e,navigate:t,fullAPI:n})=>({state:{settings:{lastTrackedStoryId:null}},api:{closeSettings:()=>{let{settings:{lastTrackedStoryId:t}}=e.getState();t?n.selectStory(t):n.selectFirstStory()},changeSettingsTab:e=>{t(`/settings/${e}`)},isSettingsScreenActive:()=>{let{path:e}=n.getUrlState();return!!(e||``).match(/^\/settings/)},retrieveSelection(){let{settings:t}=e.getState();return t.lastTrackedStoryId},storeSelection:async()=>{let{storyId:t,settings:n}=e.getState();await e.setState({settings:{...n,lastTrackedStoryId:t}})}}}),i_={},f(i_,{controlOrMetaKey:()=>C_,defaultShortcuts:()=>w_,init:()=>E_,isMacLike:()=>S_,keys:()=>mh}),a_=h(Ah(),1),{FORCE_REMOUNT:o_,PREVIEW_KEYDOWN:s_,STORIES_COLLAPSE_ALL:c_,STORIES_EXPAND_ALL:l_}=__STORYBOOK_MODULE_CORE_EVENTS__,{global:u_}=__STORYBOOK_MODULE_GLOBAL__,{global:d_}=__STORYBOOK_MODULE_GLOBAL__,{navigator:f_}=d_,p_=()=>f_&&f_.platform?!!f_.platform.match(/(Mac|iPhone|iPod|iPad)/i):!1,m_=()=>p_()?`⌥`:`alt`,h_=e=>{if([`Meta`,`Alt`,`Control`,`Shift`,`Tab`].includes(e.key))return null;let t=[];e.altKey&&t.push(`alt`),e.ctrlKey&&t.push(`control`),e.metaKey&&t.push(`meta`),e.shiftKey&&t.push(`shift`);let n=e.code?.toUpperCase(),r=n?n.startsWith(`KEY`)&&n.length===4?n.replace(`KEY`,``):n.startsWith(`DIGIT`)?n.replace(`DIGIT`,``):{MINUS:`-`,EQUAL:`=`,BRACKETLEFT:`[`,BRACKETRIGHT:`]`,BACKSLASH:`\\`,SEMICOLON:`;`,QUOTE:`'`,BACKQUOTE:"`",COMMA:`,`,PERIOD:`.`,SLASH:`/`}[n]:void 0;if(e.key&&e.key.length===1&&e.key!==` `){let n=e.key.toUpperCase(),i=r;i&&i.length===1&&i!==n?t.push([n,i]):t.push(n)}else e.key===`Dead`&&r&&t.push(r);return e.key===` `&&t.push(`space`),e.key===`Escape`&&t.push(`escape`),e.key===`ArrowRight`&&t.push(`ArrowRight`),e.key===`ArrowDown`&&t.push(`ArrowDown`),e.key===`ArrowUp`&&t.push(`ArrowUp`),e.key===`ArrowLeft`&&t.push(`ArrowLeft`),t.length>0?t:null},g_=(e,t)=>!e||!t||(e.join(``).startsWith(`shift/`)&&e.shift(),e.length!==t.length)?!1:!e.find((e,n)=>Array.isArray(e)?!e.includes(t[n]):e!==t[n]),__=e=>e===`alt`?m_():e===`control`?`⌃`:e===`meta`?`⌘`:e===`shift`?`⇧​`:e===`Enter`||e===`Backspace`||e===`Esc`||e===`escape`?``:e===` `?`SPACE`:e===`ArrowUp`?`↑`:e===`ArrowDown`?`↓`:e===`ArrowLeft`?`←`:e===`ArrowRight`?`→`:e?.toUpperCase(),v_=e=>e.map(__).join(` `),y_=e=>e.map(e=>e===`+`?`plus`:e===` `?`space`:e).join(`+`),{navigator:b_,document:x_}=u_,S_=()=>b_&&b_.platform?!!b_.platform.match(/(Mac|iPhone|iPod|iPad)/i):!1,C_=()=>S_()?`meta`:`control`,w_=Object.freeze({fullScreen:[`alt`,`F`],togglePanel:[`alt`,`A`],panelPosition:[`alt`,`D`],toggleNav:[`alt`,`S`],toolbar:[`alt`,`T`],search:[C_(),`K`],focusNav:[`1`],focusIframe:[`2`],focusPanel:[`3`],prevComponent:[`alt`,`ArrowUp`],nextComponent:[`alt`,`ArrowDown`],prevStory:[`alt`,`ArrowLeft`],nextStory:[`alt`,`ArrowRight`],shortcutsPage:[C_(),`shift`,`,`],aboutPage:[C_(),`,`],escape:[`escape`],collapseAll:[C_(),`shift`,`ArrowUp`],expandAll:[C_(),`shift`,`ArrowDown`],remount:[`alt`,`R`],openInEditor:[`alt`,`shift`,`E`],openInIsolation:[`alt`,`shift`,`I`],copyStoryLink:[`alt`,`shift`,`L`],goToPreviousLandmark:[`shift`,`F6`],goToNextLandmark:[`F6`]}),T_={},E_=({store:e,fullAPI:t,provider:n})=>{let r={getShortcutKeys(){return e.getState().shortcuts},getDefaultShortcuts(){return{...w_,...r.getAddonsShortcutDefaults()}},getAddonsShortcuts(){return T_},getAddonsShortcutLabels(){let e={};return Object.entries(r.getAddonsShortcuts()).forEach(([t,{label:n}])=>{e[t]=n}),e},getAddonsShortcutDefaults(){let e={};return Object.entries(r.getAddonsShortcuts()).forEach(([t,{defaultShortcut:n}])=>{e[t]=n}),e},async setShortcuts(t){let{shortcuts:n}=await e.setState(e=>({shortcuts:typeof t==`function`?t(e.shortcuts):t}),{persistence:`permanent`});return n},async restoreAllDefaultShortcuts(){return r.setShortcuts(r.getDefaultShortcuts())},async setShortcut(e,t){return await r.setShortcuts(n=>({...n,[e]:t})),t},async setAddonShortcut(e,t){return await r.setShortcuts(n=>({...n,[`${e}-${t.actionName}`]:t.defaultShortcut})),T_[`${e}-${t.actionName}`]=t,t},async restoreDefaultShortcut(e){let t=r.getDefaultShortcuts()[e];return r.setShortcut(e,t)},handleKeydownEvent(e){let t=h_(e),n=r.getShortcutKeys(),i=mh(n).find(e=>g_(t,n[e]));i&&r.handleShortcutFeature(i,e)},handleShortcutFeature(n,r){let{ui:{enableShortcuts:i},storyId:a,refId:o,viewMode:s}=e.getState();if(i)switch(r?.preventDefault&&r.preventDefault(),n){case`escape`:t.getIsFullscreen()?t.toggleFullscreen(!1):t.getIsNavShown()&&t.toggleNav(!0);break;case`goToNextLandmark`:case`goToPreviousLandmark`:break;case`focusNav`:t.getIsFullscreen()&&t.toggleFullscreen(!1),t.getIsNavShown()||t.toggleNav(!0),t.focusOnUIElement(Hg.storyListMenu);break;case`search`:t.getIsFullscreen()&&t.toggleFullscreen(!1),t.getIsNavShown()||t.toggleNav(!0),setTimeout(()=>{t.focusOnUIElement(Hg.storySearchField,!0)},0);break;case`focusIframe`:{let e=x_.getElementById(`storybook-preview-iframe`);if(e)try{e.contentWindow.focus()}catch{}break}case`focusPanel`:t.getIsFullscreen()&&t.toggleFullscreen(!1),t.getIsPanelShown()||t.togglePanel(!0),t.focusOnUIElement(Hg.storyPanelRoot);break;case`nextStory`:t.jumpToStory(1);break;case`prevStory`:t.jumpToStory(-1);break;case`nextComponent`:t.jumpToComponent(1);break;case`prevComponent`:t.jumpToComponent(-1);break;case`fullScreen`:t.toggleFullscreen();break;case`togglePanel`:{let e=t.getIsPanelShown(),n=x_.getElementById(Hg.addonPanel);t.togglePanel(),e&&ph(n)&&t.focusOnUIElement(Hg.showAddonPanel,{poll:!0}).then(e=>{e===!1&&x_.body.focus()});break}case`toggleNav`:{let e=t.getIsNavShown(),n=x_.getElementById(Hg.sidebarRegion);t.toggleNav(),e&&ph(n)&&t.focusOnUIElement(Hg.showSidebar,{poll:!0}).then(e=>{e===!1&&x_.body.focus()});break}case`toolbar`:t.toggleToolbar();break;case`panelPosition`:t.getIsFullscreen()&&t.toggleFullscreen(!1),t.getIsPanelShown()||t.togglePanel(!0),t.togglePanelPosition();break;case`aboutPage`:t.navigate(`/settings/about`);break;case`shortcutsPage`:t.navigate(`/settings/shortcuts`);break;case`collapseAll`:t.emit(c_);break;case`expandAll`:t.emit(l_);break;case`remount`:t.emit(o_,{storyId:a});break;case`openInEditor`:u_.CONFIG_TYPE===`DEVELOPMENT`&&t.openInEditor({file:t.getCurrentStoryData().importPath});break;case`openInIsolation`:if(a&&s===`story`){let{previewHref:e}=t.getStoryHrefs(a,{refId:o});window.open(e,`_blank`,`noopener,noreferrer`)}break;case`copyStoryLink`:if(a){let{managerHref:e}=t.getStoryHrefs(a,{refId:o});(0,a_.default)(e)}break;default:T_[n].action();break}}},{shortcuts:i=w_}=e.getState();return{api:r,state:{shortcuts:mh(w_).reduce((e,t)=>({...e,[t]:i[t]||w_[t]}),w_)},init:()=>{x_.addEventListener(`keydown`,e=>{hh(e)||r.handleKeydownEvent(e)}),n.channel?.on(s_,e=>{r.handleKeydownEvent(e.event)})}}},D_={},f(D_,{getDefaultTagsFromPreset:()=>sv,init:()=>dv}),O_=h(oe(),1),{logger:k_}=__STORYBOOK_MODULE_CLIENT_LOGGER__,{CONFIG_ERROR:A_,CURRENT_STORY_WAS_SET:j_,DOCS_PREPARED:M_,PRELOAD_ENTRIES:N_,RESET_STORY_ARGS:P_,SELECT_STORY:F_,SET_CONFIG:I_,SET_CURRENT_STORY:L_,SET_FILTER:R_,SET_INDEX:z_,SET_STORIES:B_,STORY_ARGS_UPDATED:V_,STORY_CHANGED:H_,STORY_INDEX_INVALIDATED:U_,STORY_MISSING:W_,STORY_PREPARED:G_,STORY_SPECIFIED:K_,UPDATE_STORY_ARGS:q_}=__STORYBOOK_MODULE_CORE_EVENTS__,{global:J_}=__STORYBOOK_MODULE_GLOBAL__,h(Yi(),1),Y_=class extends Fi{constructor(e){super({name:`StatusTypeIdMismatchError`,category:`CORE-SERVER`,code:16,message:`Status has typeId "${e.status.typeId}" but was added to store with typeId "${e.typeId}". Full status: ${JSON.stringify(e.status,null,2)}`}),this.data=e}},X_={id:`storybook/status`,leader:!0,initialState:{}},Z_={SELECT:`select`},Q_=(e,t)=>{let n=Eh.useRef(t?t(e.getState()):e.getState()),r=Eh.useCallback(r=>e.onStateChange((e,i)=>{if(!t){n.current=e,r();return}let a=t(e);!u(a,t(i))&&(n.current=a,r())}),[e,t]),i=Eh.useCallback(()=>{let r=e.getState(),i=t?t(r):r;return u(i,n.current)||(n.current=i),n.current},[e,t]);return[Eh.useSyncExternalStore(r,i),e.setState]},{fullStatusStore:$_,getStatusStoreByTypeId:ev,useStatusStore:tv,universalStatusStore:nv}=gh({universalStatusStore:Bt.create({...X_,leader:globalThis.CONFIG_TYPE===`PRODUCTION`}),useUniversalStore:Q_,environment:`manager`}),{fetch:rv}=J_,iv=`./index.json`,av=`tags-filter`,ov=`static-filter`,sv=(0,O_.default)(1)(e=>{let t=Object.entries(e);return{included:t.filter(([,e])=>e.defaultFilterSelection===`include`).map(([e])=>e),excluded:t.filter(([,e])=>e.defaultFilterSelection===`exclude`).map(([e])=>e)}}),cv=e=>{let t=Object.entries(e).reduce((e,t)=>{let[n,r]=t;return r.excludeFromSidebar&&(e[n]=!0),e},{});return e=>{let n=e.tags??[];return(n.includes(Zi.DEV)||e.type===`docs`)&&n.filter(e=>t[e]).length===0}},lv=(e,t)=>{let n=e=>Object.values(e.reduce((e,t)=>(Object.hasOwn(Qi,t)?e[`built-in`].push(Qi[t]):e.user.push($i(t)),e),{"built-in":[],user:[]})).filter(e=>e.length>0);return r=>{let i=n(e),a=n(t);return(!i.length||i.every(e=>e.some(e=>e(r,!1))))&&(!a.length||a.every(e=>e.every(e=>e(r,!0))))}},uv=[`enableShortcuts`,`theme`,`showRoots`],dv=({fullAPI:e,store:t,navigate:n,provider:r,storyId:i,viewMode:a,docsOptions:o={}})=>{let s={storyId:Sf,getData:(e,t)=>{let n=s.resolveStory(e,t);if(n?.type===`story`||n?.type===`docs`)return n},isPrepared:(e,t)=>{let n=s.getData(e,t);return n?n.type===`story`?n.prepared:!0:!1},resolveStory:(e,n)=>{let{refs:r,index:i}=t.getState();if(!(n&&!r[n]))return n?r?.[n]?.index?.[e]??void 0:i?i[e]:void 0},getCurrentStoryData:()=>{let{storyId:e,refId:n}=t.getState();return s.getData(e,n)},getIndex:()=>{let{internal_index:e}=t.getState();return e},getParameters:(e,t)=>{let{storyId:n,refId:r}=typeof e==`string`?{storyId:e,refId:void 0}:e,i=s.getData(n,r);if([`story`,`docs`].includes(i?.type)){let{parameters:e}=i;if(e)return t?e[t]:e}return null},getCurrentParameter:e=>{let{storyId:n,refId:r}=t.getState();return s.getParameters({storyId:n,refId:r},e)||void 0},jumpToComponent:e=>{let{filteredIndex:n,storyId:r,refs:i,refId:a}=t.getState();if(!s.getData(r,a))return;let o=a?i[a].filteredIndex||{}:n;if(!o)return;let c=s.findSiblingStoryId(r,o,e,!0);c&&s.selectStory(c,void 0,{ref:a})},jumpToStory:e=>{let{filteredIndex:n,storyId:r,refs:i,refId:a}=t.getState(),o=s.getData(r,a);if(!o)return;let c=o.refId?i[o.refId].filteredIndex:n;if(!c)return;let l=s.findSiblingStoryId(r,c,e,!1);l&&s.selectStory(l,void 0,{ref:a})},selectFirstStory:()=>{let{index:e}=t.getState();if(!e)return;let r=Object.keys(e).find(t=>e[t].type===`story`);if(r){s.selectStory(r);return}n(`/`)},selectStory:(e=void 0,r=void 0,i={})=>{let{ref:a}=i,{storyId:o,index:c,filteredIndex:l,refs:u,settings:d}=t.getState(),f=e=>e?.type===`docs`||e?.type===`story`?(t.setState({settings:{...d,lastTrackedStoryId:e.id}}),n(`/${e.type}/${e.refId?`${e.refId}_${e.id}`:e.id}`),!0):!1,p=o?.split(`--`,2)[0],m=a?u[a].index:c,h=a?u[a].filteredIndex:l;if(!(!m||!h))if(r)if(!e)f(m[Sf(p,r)]);else{let t=a?`${a}_${Sf(e,r)}`:Sf(e,r);if(m[t])f(m[t]);else{let t=m[bf(e)];if(t?.type===`component`){let e=t.children.find(e=>m[e].name===r);f(e?m[e]:void 0)}}}else{let t=e?m[e]||m[bf(e)]:m[p];if(!t)throw Error(`Unknown id or title: '${e}'`);f(t)||f(s.findLeafEntry(h,t.id))}},findLeafEntry(e,t){let n=e[t];if(n.type===`docs`||n.type===`story`)return n;let r=n.children.find(t=>e[t])||n.children[0];return s.findLeafEntry(e,r)},findLeafStoryId(e,t){return s.findLeafEntry(e,t)?.id},findAllLeafStoryIds(e){let{index:n}=t.getState();if(!n)return[];let r=(e,t=[])=>{let i=n[e];return i&&(i.type===`story`&&t.push(i.id),`children`in i&&i.children?.forEach(e=>r(e,t))),t};return r(e,[])},findSiblingStoryId(e,t,n,r){if(r){let r=bg(t),i=r.findIndex(t=>t.includes(e));return i===r.length-1&&n>0||i===0&&n<0?void 0:r[i+n]?r[i+n][0]:void 0}let i=xg(t),a=i.indexOf(e);if(!(a===i.length-1&&n>0)&&!(a===0&&n<0))return i[a+n]},updateStoryArgs:(e,t)=>{let{id:n,refId:i}=e;r.channel?.emit(q_,{storyId:n,updatedArgs:t,options:{target:i}})},resetStoryArgs:(e,t)=>{let{id:n,refId:i}=e;r.channel?.emit(P_,{storyId:n,argNames:t,options:{target:i}})},fetchIndex:async()=>{try{let e=await rv(iv);if(e.status!==200)throw Error(await e.text());let t=await e.json();if(t.v<3){k_.warn(`Skipping story index with version v${t.v}, awaiting SET_STORIES.`);return}await s.setIndex(t)}catch(e){await t.setState({indexError:e})}},setIndex:async e=>{let{filteredIndex:n,index:i,filters:a}=t.getState(),s=$_.getAll(),c=vg(e,{provider:r,docsOptions:o,filters:a,allStatuses:s}),l=vg(e,{provider:r,docsOptions:o,filters:{},allStatuses:s});await t.setState({internal_index:e,filteredIndex:yg(c,n),index:yg(l,i),indexError:void 0})},updateStory:async(n,r,i)=>{if(i){let{id:t,index:a,filteredIndex:o}=i;a&&a[n]&&(a[n]={...a[n],...r}),o&&o[n]&&(o[n]={...o[n],...r}),await e.updateRef(t,{index:a,filteredIndex:o})}else{let{index:e,filteredIndex:i}=t.getState();e&&e[n]&&(e[n]={...e[n],...r}),i&&i[n]&&(i[n]={...i[n],...r}),(e||i)&&await t.setState({index:e,filteredIndex:i})}},updateDocs:async(n,r,i)=>{if(i){let{id:t,index:a,filteredIndex:o}=i;a[n]={...a[n],...r},o[n]={...o[n],...r},await e.updateRef(t,{index:a,filteredIndex:o})}else{let{index:e,filteredIndex:i}=t.getState();e&&(e[n]={...e[n],...r}),i&&(i[n]={...i[n],...r}),(e||i)&&await t.setState({index:e,filteredIndex:i})}},setPreviewInitialized:async n=>{n?e.updateRef(n.id,{previewInitialized:!0}):t.setState({previewInitialized:!0})},experimental_setFilter:async(n,i)=>{await t.setState({filters:{...t.getState().filters,[n]:i}});let{internal_index:a}=t.getState();if(!a)return;await s.setIndex(a);let o=await e.getRefs();for(let[t,{internal_index:n,...r}]of Object.entries(o))await e.setRef(t,{...r,storyIndex:n},!0);r.channel?.emit(R_,{id:n})},resetTagFilters:async()=>{await t.setState(e=>({includedTagFilters:e.defaultIncludedTagFilters,excludedTagFilters:e.defaultExcludedTagFilters}),{persistence:`permanent`}),c()},setAllTagFilters:async(e,n)=>{await t.setState({includedTagFilters:e,excludedTagFilters:n},{persistence:`permanent`}),c()},addTagFilters:async(e,n)=>{let r=t.getState(),i=new Set(r.includedTagFilters),a=new Set(r.excludedTagFilters);for(let t of e)n?(i.delete(t),a.add(t)):(i.add(t),a.delete(t));await t.setState({includedTagFilters:Array.from(i),excludedTagFilters:Array.from(a)},{persistence:`permanent`}),c()},removeTagFilters:async e=>{let n=t.getState();await t.setState({includedTagFilters:n.includedTagFilters.filter(t=>!e.includes(t)),excludedTagFilters:n.excludedTagFilters.filter(t=>!e.includes(t))},{persistence:`permanent`}),c()}},c=()=>{let{includedTagFilters:e,excludedTagFilters:n}=t.getState();s.experimental_setFilter(av,lv(e,n))};r.channel?.on(K_,function({storyId:i,viewMode:a}){let{sourceType:o}=Ag(this,e);if(o===`local`){let e=t.getState(),o=e.path===`/`||e.viewMode===`story`||e.viewMode===`docs`,s=e.viewMode&&e.storyId,c=e.viewMode!==a||e.storyId!==i,{type:l}=e.index?.[e.storyId]||{};o&&(s&&c&&!(l===`root`||l===`component`||l===`group`)?r.channel?.emit(L_,{storyId:e.storyId,viewMode:e.viewMode}):c&&n(`/${a}/${i}`))}}),r.channel?.on(j_,function(){let{ref:t}=Ag(this,e);s.setPreviewInitialized(t)}),r.channel?.on(H_,function(){let{sourceType:t}=Ag(this,e);if(t===`local`){let t=s.getCurrentParameter(`options`);t&&e.setOptions(_h(t))}}),r.channel?.on(G_,function({id:n,...i}){let{ref:a,sourceType:o}=Ag(this,e);if(s.updateStory(n,{...i,prepared:!0},a),!a&&!t.getState().hasCalledSetOptions){let{options:n}=i.parameters;e.setOptions(_h(n)),t.setState({hasCalledSetOptions:!0})}if(o===`local`){let{storyId:e,index:n,refId:i}=t.getState();if(!n)return;let a=Array.from(new Set([s.findSiblingStoryId(e,n,1,!0),s.findSiblingStoryId(e,n,-1,!0)])).filter(Boolean);r.channel?.emit(N_,{ids:a,options:{target:i}})}}),r.channel?.on(M_,function({id:t,...n}){let{ref:r}=Ag(this,e);s.updateStory(t,{...n,prepared:!0},r)}),r.channel?.on(z_,function(t){let{ref:n}=Ag(this,e);if(n)e.setRef(n.id,{...n,storyIndex:t},!0);else{s.setIndex(t);let n=s.getCurrentParameter(`options`);e.setOptions(_h(n))}}),r.channel?.on(B_,function(t){let{ref:n}=Ag(this,e),r=t.v?pg(t):t.stories;if(n)e.setRef(n.id,{...n,setStoriesData:r},!0);else throw Error(`Cannot call SET_STORIES for local frame`)}),r.channel?.on(F_,function({kind:t,title:n=t,story:r,name:i=r,storyId:a,...o}){let{ref:s}=Ag(this,e);s?e.selectStory(a||n,i,{...o,ref:s.id}):e.selectStory(a||n,i,o)}),r.channel?.on(V_,function({storyId:t,args:n}){let{ref:r}=Ag(this,e);s.updateStory(t,{args:n},r)}),r.channel?.on(A_,function(t){let{ref:n}=Ag(this,e);s.setPreviewInitialized(n)}),r.channel?.on(W_,function(t){let{ref:n}=Ag(this,e);s.setPreviewInitialized(n)}),r.channel?.on(I_,()=>{let e=r.getConfig()?.sidebar?.filters||{},{includedTagFilters:n,excludedTagFilters:i,tagPresets:a}=t.getState();t.setState({filters:{...t.getState().filters,...e,[ov]:cv(a),[av]:lv(n,i)}})}),$_.onAllStatusChange(async()=>{let{internal_index:n}=t.getState();if(!n)return;await s.setIndex(n);let r=await e.getRefs();Object.entries(r).forEach(([t,{internal_index:n,...r}])=>{e.setRef(t,{...r,storyIndex:n},!0)})});let l=r.getConfig()?.sidebar?.filters||{},u=J_.TAGS_OPTIONS||{},d=sv(u),f=t.getState(),p=f.includedTagFilters??f.layout?.includedTagFilters??d.included,m=f.excludedTagFilters??f.layout?.excludedTagFilters??d.excluded;return{api:s,state:{storyId:i,viewMode:a,hasCalledSetOptions:!1,previewInitialized:!1,filters:{...l,[ov]:cv(u),[av]:lv(p,m)},tagPresets:u,defaultIncludedTagFilters:d.included,defaultExcludedTagFilters:d.excluded,includedTagFilters:p,excludedTagFilters:m},init:async()=>{r.channel?.on(U_,()=>s.fetchIndex()),await s.fetchIndex()}}},fv={},f(fv,{init:()=>Tv}),{GLOBALS_UPDATED:pv,NAVIGATE_URL:mv,SET_CURRENT_STORY:hv,STORY_ARGS_UPDATED:gv,UPDATE_QUERY_PARAMS:_v}=__STORYBOOK_MODULE_CORE_EVENTS__,{global:vv}=__STORYBOOK_MODULE_GLOBAL__,yv=h(sa(),1),bv=e=>{if(e===`true`||e===`1`)return!0;if(e===`false`||e===`0`)return!1},xv=e=>Object.fromEntries(e.split(`;`).map(e=>e.split(`:`)).map(([e,t])=>[e,encodeURIComponent(t)]).filter(([e,t])=>e&&t)),Sv=(e,t)=>{let n=xv(e),r=xv(t);return Object.entries({...n,...r}).map(([e,t])=>`${e}:${t}`).join(`;`)},wv=({state:{location:e,path:t,viewMode:n,storyId:r},singleStory:i})=>{let{full:a,panel:o,nav:s,shortcuts:c,addonPanel:l,tabs:u,path:d,...f}=Fp(e),p,m,h;bv(a)===!0?(p=0,m=0,h=0):bv(a)===!1&&(p=Rg,m=zg,h=Bg),i||(bv(s)===!0&&(p=Rg),bv(s)===!1&&(p=0)),bv(o)===!1&&(m=0,h=0);let g={navSize:p,bottomPanelHeight:m,rightPanelWidth:h,panelPosition:[`right`,`bottom`].includes(o)?o:void 0,showTabs:bv(u)},_={enableShortcuts:bv(c)},v=l||void 0,y=r,b=Wi(Cv,f)?Cv:f;return Cv=b,{viewMode:n,layout:g,ui:_,selectedPanel:v,location:e,path:t,customQueryParams:b,storyId:y}},Tv=e=>{let{store:t,navigate:n,provider:r,fullAPI:i}=e,a=(e,t={},r={})=>n([e,...Object.entries(t).filter(([,e])=>e).sort(([e],[t])=>e`${e}=${t}`)].join(`&`),r),o={getStoryHrefs(e,n={}){let{id:r,refId:a}=i.getCurrentStoryData()??{},o=e===r&&n.refId===a,{customQueryParams:s,location:c,refs:l}=t.getState(),{base:u,inheritArgs:d=o,inheritGlobals:f=!0,queryParams:p={},refId:m,viewMode:h=`story`}=n;if(m&&!l[m])throw Error(`Invalid refId: ${m}`);let g=c.pathname||`/`,_=vv.window.location.origin+g,v=vv.STORYBOOK_NETWORK_ADDRESS??_,b=u===`origin`?_:u===`network`?v:g,x=m?l[m].url+`/iframe.html`:vv.PREVIEW_URL||`${b.replace(/\/[^/]*\.html$/,``).replace(/\/?$/,`/`)}iframe.html`,S=m?`&refId=${encodeURIComponent(m)}`:``,{args:C=``,globals:w=``,...T}=p,E=d?Sv(s?.args??``,C):C,D=f?Sv(s?.globals??``,w):w,O=(0,yv.stringify)(T,{nesting:!0,nestingSyntax:`js`}),k=(0,yv.stringify)(y(T,[`id`,`viewMode`]),{nesting:!0,nestingSyntax:`js`});return E&&=`&args=${E}`,D&&=`&globals=${D}`,O&&=`&${O}`,k&&=`&${k}`,{managerHref:`${b}?path=/${h}/${m?`${m}_`:``}${e}${E}${D}${O}`,previewHref:`${x}?id=${e}&viewMode=${h}${S}${E}${m?``:D}${k}`}},getQueryParam(e){let{customQueryParams:n}=t.getState();return n?n[e]:void 0},getUrlState(){let{location:e,path:n,customQueryParams:r,storyId:i,url:a,viewMode:o}=t.getState();return{path:n,hash:e.hash??``,queryParams:r,storyId:i,url:a,viewMode:o}},setQueryParams(e){let{customQueryParams:n}=t.getState(),i={},a={...n,...Object.entries(e).reduce((e,[t,n])=>(n!==null&&(e[t]=n),e),i)};Wi(n,a)||(t.setState({customQueryParams:a}),r.channel?.emit(_v,a))},applyQueryParams(e,t){let{path:n,hash:r=``,queryParams:i}=o.getUrlState();a(`${n}${r}`,{...i,...e},t),o.setQueryParams(e)},navigateUrl(e,t){n(e,{plain:!0,...t})}},s=()=>{let{path:e,hash:t=``,queryParams:n,viewMode:r}=o.getUrlState();if(r!==`story`)return;let s=i.getCurrentStoryData();if(s?.type!==`story`)return;let{args:c,initialArgs:l}=s,u=Np(l,c);a(`${e}${t}`,{...n,args:u},{replace:!0}),o.setQueryParams({args:u})};r.channel?.on(hv,()=>s());let c;return r.channel?.on(gv,()=>{`requestIdleCallback`in vv.window?(c&&vv.window.cancelIdleCallback(c),c=vv.window.requestIdleCallback(s,{timeout:1e3})):(c&&clearTimeout(c),setTimeout(s,100))}),r.channel?.on(pv,({userGlobals:e,initialGlobals:t})=>{let{path:n,hash:r=``,queryParams:i}=o.getUrlState(),s=Np(t,Bh(t,e));a(`${n}${r}`,{...i,globals:s},{replace:!0}),o.setQueryParams({globals:s})}),r.channel?.on(mv,(e,t)=>{o.navigateUrl(e,t)}),{api:o,state:wv(e)}},Ev={},f(Ev,{init:()=>Nv}),Dv=h(oe(),1),{global:Ov}=__STORYBOOK_MODULE_GLOBAL__,kv=`10.3.3`,{VERSIONCHECK:Av}=Ov,jv=(0,Dv.default)(1)(()=>{try{return{...JSON.parse(Av).data||{}}}catch{return{}}}),Mv=e=>e.includes(`vue`)?`vue`:e,Nv=({store:e})=>{let{dismissedVersionNotification:t}=e.getState(),n={versions:{current:{version:kv},...jv()},dismissedVersionNotification:t},r={getCurrentVersion:()=>{let{versions:{current:t}}=e.getState();return t},getLatestVersion:()=>{let{versions:{latest:t,next:n,current:r}}=e.getState();return r&&Dh.default.prerelease(r.version)&&n?t&&Dh.default.gt(t.version,n.version)?t:n:t},getDocsUrl:({asset:t,subpath:n=t,versioned:r,renderer:i,ref:a=`ui`})=>{let{versions:o}=e.getState(),s=o.latest?.version,c=o.current?.version,l=c?.startsWith(`0.0.0`)&&s||c,u=`https://storybook.js.org/${t?`docs-assets`:`docs`}/`;if(t&&l)u+=`${Dh.default.major(l)}.${Dh.default.minor(l)}/`;else if(r&&l&&s){let e=Dh.default.diff(s,l);e===`patch`||e===null||(u+=`${Dh.default.major(l)}.${Dh.default.minor(l)}/`)}let[d,f]=n?.split(`#`)||[];if(d&&(u+=t?d:`${d}/`),i&&typeof Ov.STORYBOOK_RENDERER<`u`){let e=Ov.STORYBOOK_RENDERER;e&&(u+=`?renderer=${Mv(e)}`)}return a&&(u+=`${u.includes(`?`)?`&`:`?`}ref=${a}`),f&&(u+=`#${f}`),u},versionUpdateAvailable:()=>{let e=r.getLatestVersion(),t=r.getCurrentVersion();if(e){if(!e.version||!t.version)return!0;let n=Dh.default.prerelease(t.version)?`${Dh.default.major(t.version)}.${Dh.default.minor(t.version)}.${Dh.default.patch(t.version)}`:t.version,r=Dh.default.diff(n,e.version);return Dh.default.gt(e.version,n)&&r!==`patch`&&!r.includes(`pre`)}return!1}};return{init:async()=>{let{versions:t={}}=e.getState(),{latest:n,next:r}=jv();await e.setState({versions:{...t,latest:n,next:r}})},state:n,api:r}},Pv={},f(Pv,{init:()=>Hv}),{REQUEST_WHATS_NEW_DATA:Fv,RESULT_WHATS_NEW_DATA:Iv,SET_WHATS_NEW_CACHE:Lv,TOGGLE_WHATS_NEW_NOTIFICATIONS:Rv}=__STORYBOOK_MODULE_CORE_EVENTS__,{global:zv}=__STORYBOOK_MODULE_GLOBAL__,Bv=`whats-new`,Vv=({color:e=`currentColor`,size:t=14})=>Oh.createElement(`svg`,{width:t,height:t,viewBox:`0 0 14 14`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`},Oh.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M2.042.616a.704.704 0 00-.66.729L1.816 12.9c.014.367.306.66.672.677l9.395.422h.032a.704.704 0 00.704-.703V.704c0-.015 0-.03-.002-.044a.704.704 0 00-.746-.659l-.773.049.057 1.615a.105.105 0 01-.17.086l-.52-.41-.617.468a.105.105 0 01-.168-.088L9.746.134 2.042.616zm8.003 4.747c-.247.192-2.092.324-2.092.05.04-1.045-.429-1.091-.689-1.091-.247 0-.662.075-.662.634 0 .57.607.893 1.32 1.27 1.014.538 2.24 1.188 2.24 2.823 0 1.568-1.273 2.433-2.898 2.433-1.676 0-3.141-.678-2.976-3.03.065-.275 2.197-.21 2.197 0-.026.971.195 1.256.753 1.256.43 0 .624-.236.624-.634 0-.602-.633-.958-1.361-1.367-.987-.554-2.148-1.205-2.148-2.7 0-1.494 1.027-2.489 2.86-2.489 1.832 0 2.832.98 2.832 2.845z`,fill:e})),Hv=({fullAPI:e,store:t,provider:n})=>{let r={whatsNewData:void 0};function i(e){t.setState({whatsNewData:e}),r.whatsNewData=e}let a={isWhatsNewUnread(){return r.whatsNewData?.status===`SUCCESS`&&!r.whatsNewData.postIsRead},whatsNewHasBeenRead(){r.whatsNewData?.status===`SUCCESS`&&(s({lastReadPost:r.whatsNewData.url}),i({...r.whatsNewData,postIsRead:!0}),e.clearNotification(Bv))},toggleWhatsNewNotifications(){r.whatsNewData?.status===`SUCCESS`&&(i({...r.whatsNewData,disableWhatsNewNotifications:!r.whatsNewData.disableWhatsNewNotifications}),n.channel?.emit(Rv,{disableWhatsNewNotifications:r.whatsNewData.disableWhatsNewNotifications}))}};function o(){return n.channel?.emit(Fv),new Promise(e=>n.channel?.once(Iv,({data:t})=>e(t)))}function s(e){n.channel?.emit(Lv,e)}return{init:async()=>{if(zv.CONFIG_TYPE!==`DEVELOPMENT`)return;let t=await o();i(t);let n=e.getUrlState();!(n?.path===`/onboarding`||n.queryParams?.onboarding===`true`)&&t.status===`SUCCESS`&&!t.disableWhatsNewNotifications&&t.showNotification&&e.addNotification({id:Bv,link:`/settings/whats-new`,content:{headline:t.title,subHeadline:`Learn what's new in Storybook`},icon:Oh.createElement(Vv,null),onClear({dismissed:e}){e&&s({lastDismissedPost:t.url})}})},state:r,api:a}},Uv=h(jh(),1),Wv=e=>{e.fn(`set`,function(t,n){return e.set(this._area,this._in(t),ki(n,{maxDepth:50}))}),e.fn(`get`,function(t,n){let r=e.get(this._area,this._in(t));return r===null?n||r:ji(r)})},Wv(Uv.default._),Gv=`@storybook/manager/store`,Kv=class{constructor({allowPersistence:e,setState:t,getState:n}){this.upstreamPersistence=e??!0,this.upstreamSetState=t,this.upstreamGetState=n}getInitialState(e){return{...e,...vh(Uv.default.local),...vh(Uv.default.session)}}getState(){return this.upstreamGetState()}async setState(e,t,n){let r,i;typeof t==`function`?(r=t,i=n):i=t;let{persistence:a=`none`}=i||{},o={},s={};typeof e==`function`?o=t=>(s=e(t),s):(o=e,s=o);let c=await new Promise(e=>{this.upstreamSetState(o,()=>{e(this.getState())})});return a!==`none`&&this.upstreamPersistence&&await bh(a===`session`?Uv.default.session:Uv.default.local,s),r&&r(c),c}},{ActiveTabs:qv}=Mg,Jv=Rh({api:void 0,state:Uh({})}),Yv=(...e)=>Vh({},...e),Xv=class extends Ch.Component{constructor(e){super(e),this.api={},this.initModules=()=>{this.modules.forEach(e=>{`init`in e&&e.init()})};let{location:t,path:n,refId:r,viewMode:i=e.docsOptions.docsMode?`docs`:e.viewMode,singleStory:a,storyId:o,docsOptions:s,navigate:c}=e,l=new Kv({getState:()=>this.state,setState:(e,t)=>(this.setState(e,()=>t(this.state)),this.state)}),u={location:t,path:n,viewMode:i,singleStory:a,storyId:o,refId:r},d={docsOptions:s};this.state=l.getInitialState(Uh({...u,...d}));let f={navigate:c,store:l,provider:e.provider};this.modules=[e_,eg,Zh,Mg,Jg,n_,i_,D_,cg,ng,fv,Ev,Pv,Xg].map(e=>e.init({...u,...d,...f,state:this.state,fullAPI:this.api}));let p=Uh(this.state,...this.modules.map(e=>e.state)),m=Object.assign(this.api,{navigate:c},...this.modules.map(e=>e.api));this.state=p,this.api=m}static getDerivedStateFromProps(e,t){return t.path===e.path?null:{...t,location:e.location,path:e.path,refId:e.refId,viewMode:e.viewMode,storyId:e.storyId}}shouldComponentUpdate(e,t){let n=this.props,r=this.state;return n.path!==e.path||!u(r,t)}render(){let{children:e}=this.props,t={state:this.state,api:this.api};return Ch.createElement(Zv,{effect:this.initModules},Ch.createElement(Jv.Provider,{value:t},Ch.createElement(xh,null,e)))}},Xv.displayName=`Manager`,Zv=({children:e,effect:t})=>(Ch.useEffect(t,[]),e),Qv=e=>e,globalThis.STORYBOOK_ADDON_STATE={},{STORYBOOK_ADDON_STATE:$v}=globalThis,{Channel:ey}=__STORYBOOK_MODULE_CHANNELS__,ty={id:`storybook/test-provider`,leader:!0,initialState:{}},{fullTestProviderStore:ny,getTestProviderStoreById:ry,useTestProviderStore:iy,universalTestProviderStore:ay}=Sh({universalTestProviderStore:Bt.create({...ty,leader:globalThis.CONFIG_TYPE===`PRODUCTION`}),useUniversalStore:Q_}),oy={id:`storybook/checklist`,initialState:{items:{accessibilityTests:{status:`open`},autodocs:{status:`open`},ciTests:{status:`open`},controls:{status:`open`},coverage:{status:`open`},guidedTour:{status:`open`},installA11y:{status:`open`},installChromatic:{status:`open`},installDocs:{status:`open`},installVitest:{status:`open`},mdxDocs:{status:`open`},moreComponents:{status:`open`},moreStories:{status:`open`},onboardingSurvey:{status:`open`},organizeStories:{status:`open`},publishStorybook:{status:`open`},renderComponent:{status:`open`},runTests:{status:`open`},viewports:{status:`open`},visualTests:{status:`open`},whatsNewStorybook10:{status:`open`},writeInteractions:{status:`open`}},widget:{}}},sy=e=>({getValue:t=>e.getState().items[t]??{status:`open`,mutedAt:void 0},accept:t=>{e.setState(e=>({...e,items:{...e.items,[t]:{...e.items[t],status:`accepted`}}}))},done:t=>{e.setState(e=>({...e,items:{...e.items,[t]:{...e.items[t],status:`done`}}}))},skip:t=>{e.setState(e=>({...e,items:{...e.items,[t]:{...e.items[t],status:`skipped`}}}))},reset:t=>{e.setState(e=>({...e,items:{...e.items,[t]:{...e.items[t],status:`open`}}}))},mute:t=>{e.setState(e=>({...e,items:t.reduce((t,n)=>({...t,[n]:{...e.items[n],mutedAt:Date.now()}}),e.items)}))},disable:t=>{e.setState(e=>({...e,widget:{...e.widget,disable:t},items:Object.entries(e.items).reduce((e,[t,n])=>({...e,[t]:{...n,mutedAt:void 0}}),e.items)}))}}),cy=Bt.create({...oy,leader:globalThis.CONFIG_TYPE===`PRODUCTION`}),sy(cy)})),uy=r((e=>{var t=b();function n(e,t){return e===t&&(e!==0||1/e==1/t)||e!==e&&t!==t}var r=typeof Object.is==`function`?Object.is:n,i=t.useState,a=t.useEffect,o=t.useLayoutEffect,s=t.useDebugValue;function c(e,t){var n=t(),r=i({inst:{value:n,getSnapshot:t}}),c=r[0].inst,u=r[1];return o(function(){c.value=n,c.getSnapshot=t,l(c)&&u({inst:c})},[e,n,t]),a(function(){return l(c)&&u({inst:c}),e(function(){l(c)&&u({inst:c})})},[e]),s(n),n}function l(e){var t=e.getSnapshot;e=e.value;try{var n=t();return!r(e,n)}catch{return!0}}function u(e,t){return t()}var d=typeof window>`u`||window.document===void 0||window.document.createElement===void 0?u:c;e.useSyncExternalStore=t.useSyncExternalStore===void 0?d:t.useSyncExternalStore})),dy=r(((e,t)=>{t.exports=uy()})),fy=n({A:()=>ZO,ActionList:()=>nP,Bar:()=>NL,Blockquote:()=>QO,Button:()=>VN,Code:()=>ck,DL:()=>lk,Div:()=>uk,EmptyTabContent:()=>YL,ErrorFormatter:()=>oF,FlexBar:()=>LL,Form:()=>KF,H1:()=>dk,H2:()=>fk,H3:()=>pk,H4:()=>mk,H5:()=>hk,H6:()=>gk,HR:()=>_k,IconButton:()=>UN,Img:()=>vk,LI:()=>yk,Link:()=>Ik,ListItem:()=>wL,Loader:()=>JR,OL:()=>xk,P:()=>Sk,Popover:()=>YF,PopoverProvider:()=>uL,Pre:()=>Ck,ResetWrapper:()=>YO,ScrollArea:()=>he,Select:()=>iI,Separator:()=>dR,Span:()=>wk,SyntaxHighlighter:()=>rk,TT:()=>Tk,TabBar:()=>aR,TabButton:()=>UL,TabList:()=>CR,TabPanel:()=>TR,TabWrapper:()=>sR,Table:()=>Ek,Tabs:()=>lR,TabsState:()=>uR,TabsView:()=>jR,ToggleButton:()=>WN,Toolbar:()=>fR,Tooltip:()=>dL,TooltipLinkList:()=>OL,TooltipNote:()=>Uk,TooltipProvider:()=>zN,UL:()=>Ok,Zoom:()=>XP,codeCommon:()=>KO,components:()=>ZR,convertToReactAriaPlacement:()=>LN,createCopyToClipboardFunction:()=>ge,nameSpaceClassNames:()=>J,resetComponents:()=>QR,useTabsState:()=>DR,withReset:()=>qO});function py(e,t){if(typeof e==`function`)return e(t);e!=null&&(e.current=t)}function my(...e){return t=>{let n=!1,r=e.map(e=>{let r=py(e,t);return!n&&typeof r==`function`&&(n=!0),r});if(n)return()=>{for(let t=0;t{let{children:r,...i}=e;gy(r)&&typeof zk==`function`&&(r=zk(r._payload));let a=hE.Children.toArray(r),o=a.find(by);if(o){let e=o.props.children,r=a.map(t=>t===o?hE.Children.count(e)>1?hE.Children.only(null):hE.isValidElement(e)?e.props.children:null:t);return(0,gE.jsx)(t,{...i,ref:n,children:hE.isValidElement(e)?hE.cloneElement(e,void 0,r):null})}return(0,gE.jsx)(t,{...i,ref:n,children:r})});return n.displayName=`${e}.Slot`,n}function vy(e){let t=hE.forwardRef((e,t)=>{let{children:n,...r}=e;if(gy(n)&&typeof zk==`function`&&(n=zk(n._payload)),hE.isValidElement(n)){let e=Sy(n),i=xy(r,n.props);return n.type!==hE.Fragment&&(i.ref=t?my(t,e):e),hE.cloneElement(n,i)}return hE.Children.count(n)>1?hE.Children.only(null):null});return t.displayName=`${e}.SlotClone`,t}function yy(e){let t=({children:e})=>(0,gE.jsx)(gE.Fragment,{children:e});return t.displayName=`${e}.Slottable`,t.__radixId=Vk,t}function by(e){return hE.isValidElement(e)&&typeof e.type==`function`&&`__radixId`in e.type&&e.type.__radixId===Vk}function xy(e,t){let n={...t};for(let r in t){let i=e[r],a=t[r];/^on[A-Z]/.test(r)?i&&a?n[r]=(...e)=>{let t=a(...e);return i(...e),t}:i&&(n[r]=i):r===`style`?n[r]={...i,...a}:r===`className`&&(n[r]=[i,a].filter(Boolean).join(` `))}return{...e,...n}}function Sy(e){let t=Object.getOwnPropertyDescriptor(e.props,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning;return n?e.ref:(t=Object.getOwnPropertyDescriptor(e,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning,n?e.props.ref:e.props.ref||e.ref)}function Cy(e){let[t,n]=(0,xE.useState)(e),r=(0,xE.useRef)(t),i=(0,xE.useRef)(null),a=(0,xE.useRef)(()=>{if(!i.current)return;let e=i.current.next();if(e.done){i.current=null;return}r.current===e.value?a.current():n(e.value)});return Y(()=>{r.current=t,i.current&&a.current()}),[t,(0,xE.useCallback)(e=>{i.current=e(r.current),a.current()},[a])]}function wy(e=!1){let t=(0,CE.useContext)(Kk),n=(0,CE.useRef)(null);if(n.current===null&&!e){var r,i;let e=(i=CE.default.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED)==null||(r=i.ReactCurrentOwner)==null?void 0:r.current;if(e){let n=Jk.get(e);n==null?Jk.set(e,{id:t.current,state:e.memoizedState}):e.memoizedState!==n.state&&(t.current=n.id,Jk.delete(e))}n.current=++t.current}return n.current}function Ty(e){let t=(0,CE.useContext)(Kk),n=wy(!!e),r=`react-aria${t.prefix}`;return e||`${r}-${n}`}function Ey(e){let t=CE.useId(),[n]=(0,CE.useState)(Ay()),r=n?`react-aria`:`react-aria${Gk.prefix}`;return e||`${r}-${t}`}function Dy(){return!1}function Oy(){return!0}function ky(e){return()=>{}}function Ay(){return typeof CE.useSyncExternalStore==`function`?CE.useSyncExternalStore(ky,Dy,Oy):(0,CE.useContext)(qk)}function jy(e){let[t,n]=(0,SE.useState)(e),r=(0,SE.useRef)(null),i=Yk(t),a=(0,SE.useRef)(null);if(Qk&&Qk.register(a,i),Xk){let e=Zk.get(i);e&&!e.includes(r)?e.push(r):Zk.set(i,[r])}return Y(()=>{let e=i;return()=>{Qk&&Qk.unregister(a),Zk.delete(e)}},[i]),(0,SE.useEffect)(()=>{let e=r.current;return e&&n(e),()=>{e&&(r.current=null)}}),i}function My(e,t){if(e===t)return e;let n=Zk.get(e);if(n)return n.forEach(e=>e.current=t),t;let r=Zk.get(t);return r?(r.forEach(t=>t.current=e),e):t}function Ny(e=[]){let t=jy(),[n,r]=Cy(t),i=(0,SE.useCallback)(()=>{r(function*(){yield t,yield document.getElementById(t)?t:void 0})},[t,r]);return Y(i,[t,i,...e]),n}function Py(...e){return(...t)=>{for(let n of e)typeof n==`function`&&n(...t)}}function Fy(e){return typeof e==`object`&&!!e&&`nodeType`in e&&typeof e.nodeType==`number`}function Iy(e){return Fy(e)&&e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&`host`in e}function Ly(){return eA}function Ry(e,t){if(!Ly())return t&&e?e.contains(t):!1;if(!e||!t)return!1;let n=t;for(;n!==null;){if(n===e)return!0;n=n.tagName===`SLOT`&&n.assignedSlot?n.assignedSlot.parentNode:Iy(n)?n.host:n.parentNode}return!1}function zy(e){return Ly()&&e.target.shadowRoot&&e.composedPath?e.composedPath()[0]:e.target}function By(e,t,n,r){return Ly()?new nA(e,t,n,r):e.createTreeWalker(t,n,r)}function Vy(e){var t,n,r=``;if(typeof e==`string`||typeof e==`number`)r+=e;else if(typeof e==`object`)if(Array.isArray(e)){var i=e.length;for(t=0;t=65&&e.charCodeAt(2)<=90?t[e]=Py(n,i):(e===`className`||e===`UNSAFE_className`)&&typeof n==`string`&&typeof i==`string`?t[e]=rA(n,i):e===`id`&&n&&i?t.id=My(n,i):t[e]=i===void 0?n:i}}return t}function Uy(...e){return e.length===1&&e[0]?e[0]:t=>{let n=!1,r=e.map(e=>{let r=Wy(e,t);return n||=typeof r==`function`,r});if(n)return()=>{r.forEach((t,n)=>{typeof t==`function`?t():Wy(e[n],null)})}}}function Wy(e,t){if(typeof e==`function`)return e(t);e!=null&&(e.current=t)}function Gy(e,t={}){let{labelable:n,isLink:r,global:i,events:a=i,propNames:o}=t,s={};for(let t in e)Object.prototype.hasOwnProperty.call(e,t)&&(iA.has(t)||n&&aA.has(t)||r&&oA.has(t)||i&&sA.has(t)||a&&(cA.has(t)||t.endsWith(`Capture`)&&cA.has(t.slice(0,-7)))||o?.has(t)||lA.test(t))&&(s[t]=e[t]);return s}function Ky(e){if(qy())e.focus({preventScroll:!0});else{let t=Jy(e);e.focus(),Yy(t)}}function qy(){if(uA==null){uA=!1;try{document.createElement(`div`).focus({get preventScroll(){return uA=!0,!0}})}catch{}}return uA}function Jy(e){let t=e.parentNode,n=[],r=document.scrollingElement||document.documentElement;for(;t instanceof HTMLElement&&t!==r;)(t.offsetHeight`u`||window.navigator==null)return!1;let t=window.navigator.userAgentData?.brands;return Array.isArray(t)&&t.some(t=>e.test(t.brand))||e.test(window.navigator.userAgent)}function Zy(e){return typeof window<`u`&&window.navigator!=null?e.test(window.navigator.userAgentData?.platform||window.navigator.platform):!1}function Qy(e){let t=null;return()=>(t??=e(),t)}function $y(){return(0,wE.useContext)(bA)}function eb(e,t){let n=e.getAttribute(`target`);return(!n||n===`_self`)&&e.origin===location.origin&&!e.hasAttribute(`download`)&&!t.metaKey&&!t.ctrlKey&&!t.altKey&&!t.shiftKey}function tb(e,t,n=!0){var r,i;let{metaKey:a,ctrlKey:o,altKey:s,shiftKey:c}=t;yA()&&!((i=window.event)==null||(r=i.type)==null)&&r.startsWith(`key`)&&e.target===`_blank`&&(dA()?a=!0:o=!0);let l=gA()&&dA()&&!pA()?new KeyboardEvent(`keydown`,{keyIdentifier:`Enter`,metaKey:a,ctrlKey:o,altKey:s,shiftKey:c}):new MouseEvent(`click`,{metaKey:a,ctrlKey:o,altKey:s,shiftKey:c,detail:1,bubbles:!0,cancelable:!0});tb.isOpening=n,Ky(e),e.dispatchEvent(l),tb.isOpening=!1}function nb(e,t){if(e instanceof HTMLAnchorElement)t(e);else if(e.hasAttribute(`data-href`)){let n=document.createElement(`a`);n.href=e.getAttribute(`data-href`),e.hasAttribute(`data-target`)&&(n.target=e.getAttribute(`data-target`)),e.hasAttribute(`data-rel`)&&(n.rel=e.getAttribute(`data-rel`)),e.hasAttribute(`data-download`)&&(n.download=e.getAttribute(`data-download`)),e.hasAttribute(`data-ping`)&&(n.ping=e.getAttribute(`data-ping`)),e.hasAttribute(`data-referrer-policy`)&&(n.referrerPolicy=e.getAttribute(`data-referrer-policy`)),e.appendChild(n),t(n),e.removeChild(n)}}function rb(e,t){nb(e,e=>tb(e,t))}function ib(e){let t=$y().useHref(e?.href??``);return{href:e?.href?t:void 0,target:e?.target,rel:e?.rel,download:e?.download,ping:e?.ping,referrerPolicy:e?.referrerPolicy}}function ab(e,t,n,r){!t.isNative&&e.currentTarget instanceof HTMLAnchorElement&&e.currentTarget.href&&!e.isDefaultPrevented()&&eb(e.currentTarget,e)&&n&&(e.preventDefault(),t.open(e.currentTarget,e,n,r))}function ob(){if(typeof window>`u`)return;function e(e){return`propertyName`in e}let t=t=>{if(!e(t)||!t.target)return;let r=xA.get(t.target);r||(r=new Set,xA.set(t.target,r),t.target.addEventListener(`transitioncancel`,n,{once:!0})),r.add(t.propertyName)},n=t=>{if(!e(t)||!t.target)return;let r=xA.get(t.target);if(r&&(r.delete(t.propertyName),r.size===0&&(t.target.removeEventListener(`transitioncancel`,n),xA.delete(t.target)),xA.size===0)){for(let e of SA)e();SA.clear()}};document.body.addEventListener(`transitionrun`,t),document.body.addEventListener(`transitionend`,n)}function sb(){for(let[e]of xA)`isConnected`in e&&!e.isConnected&&xA.delete(e)}function cb(e){requestAnimationFrame(()=>{sb(),xA.size===0?e():SA.add(e)})}function lb(){let e=(0,TE.useRef)(new Map),t=(0,TE.useCallback)((t,n,r,i)=>{let a=i?.once?(...t)=>{e.current.delete(r),r(...t)}:r;e.current.set(r,{type:n,eventTarget:t,fn:a,options:i}),t.addEventListener(n,a,i)},[]),n=(0,TE.useCallback)((t,n,r,i)=>{let a=e.current.get(r)?.fn||r;t.removeEventListener(n,a,i),e.current.delete(r)},[]),r=(0,TE.useCallback)(()=>{e.current.forEach((e,t)=>{n(e.eventTarget,e.type,t,e.options)})},[n]);return(0,TE.useEffect)(()=>r,[r]),{addGlobalListener:t,removeGlobalListener:n,removeAllGlobalListeners:r}}function ub(e,t){let{id:n,"aria-label":r,"aria-labelledby":i}=e;return n=jy(n),i&&r?i=[...new Set([n,...i.trim().split(/\s+/)])].join(` `):i&&=i.trim().split(/\s+/).join(` `),!r&&!i&&t&&(r=t),{id:n,"aria-label":r,"aria-labelledby":i}}function db(e){let t=(0,EE.useRef)(null),n=(0,EE.useRef)(void 0),r=(0,EE.useCallback)(t=>{if(typeof e==`function`){let n=e,r=n(t);return()=>{typeof r==`function`?r():n(null)}}else if(e)return e.current=t,()=>{e.current=null}},[e]);return(0,EE.useMemo)(()=>({get current(){return t.current},set current(e){t.current=e,n.current&&=(n.current(),void 0),e!=null&&(n.current=r(e))}}),[r])}function fb(e){let t=(0,DE.useRef)(null);return CA(()=>{t.current=e},[e]),(0,DE.useCallback)((...e)=>{let n=t.current;return n?.(...e)},[])}function pb(e,t){let n=(0,OE.useRef)(!0),r=(0,OE.useRef)(null);Y(()=>(n.current=!0,()=>{n.current=!1}),[]),Y(()=>{n.current?n.current=!1:(!r.current||t.some((e,t)=>!Object.is(e,r[t])))&&e(),r.current=t},t)}function mb(){return typeof window.ResizeObserver<`u`}function hb(e){let{ref:t,box:n,onResize:r}=e,i=fb(r);(0,kE.useEffect)(()=>{let e=t?.current;if(e)if(mb()){let t=new window.ResizeObserver(e=>{e.length&&i()});return t.observe(e,{box:n}),()=>{e&&t.unobserve(e)}}else return window.addEventListener(`resize`,i,!1),()=>{window.removeEventListener(`resize`,i,!1)}},[t,n])}function gb(e,t){Y(()=>{if(e&&e.ref&&t)return e.ref.current=t.current,()=>{e.ref&&(e.ref.current=null)}})}function _b(e,t){if(!e)return!1;let n=window.getComputedStyle(e),r=/(auto|scroll)/.test(n.overflow+n.overflowX+n.overflowY);return r&&t&&(r=e.scrollHeight!==e.clientHeight||e.scrollWidth!==e.clientWidth),r}function vb(e,t){let n=e;for(_b(n,t)&&(n=n.parentElement);n&&!_b(n,t);)n=n.parentElement;return n||document.scrollingElement||document.documentElement}function yb(e,t){let n=[];for(;e&&e!==document.documentElement;)_b(e,t)&&n.push(e),e=e.parentElement;return n}function bb(e){return dA()?e.metaKey:e.ctrlKey}function xb(e){return e instanceof HTMLInputElement&&!wA.has(e.type)||e instanceof HTMLTextAreaElement||e instanceof HTMLElement&&e.isContentEditable}function Sb(e){let[t,n]=(0,AE.useState)();return Y(()=>{if(!e)return;let t=EA.get(e);if(t)n(t.element.id);else{let r=`react-aria-description-${TA++}`;n(r);let i=document.createElement(`div`);i.id=r,i.style.display=`none`,i.textContent=e,document.body.appendChild(i),t={refCount:0,element:i},EA.set(e,t)}return t.refCount++,()=>{t&&--t.refCount===0&&(t.element.remove(),EA.delete(e))}},[e]),{"aria-describedby":e?t:void 0}}function Cb(e,t,n,r){let i=fb(n),a=n==null;(0,jE.useEffect)(()=>{if(a||!e.current)return;let n=e.current;return n.addEventListener(t,i,r),()=>{n.removeEventListener(t,i,r)}},[e,t,r,a])}function wb(e,t){let n=Tb(e,t,`left`),r=Tb(e,t,`top`),i=t.offsetWidth,a=t.offsetHeight,o=e.scrollLeft,s=e.scrollTop,{borderTopWidth:c,borderLeftWidth:l,scrollPaddingTop:u,scrollPaddingRight:d,scrollPaddingBottom:f,scrollPaddingLeft:p}=getComputedStyle(e),m=o+parseInt(l,10),h=s+parseInt(c,10),g=m+e.clientWidth,_=h+e.clientHeight,v=parseInt(u,10)||0,y=parseInt(f,10)||0,b=parseInt(d,10)||0,x=parseInt(p,10)||0;n<=o+x?o=n-parseInt(l,10)-x:n+i>g-b&&(o+=n+i-g+b),r<=h+v?s=r-parseInt(c,10)-v:r+a>_-y&&(s+=r+a-_+y),e.scrollLeft=o,e.scrollTop=s}function Tb(e,t,n){let r=n===`left`?`offsetLeft`:`offsetTop`,i=0;for(;t.offsetParent&&(i+=t[r],t.offsetParent!==e);){if(t.offsetParent.contains(e)){i-=e[r];break}t=t.offsetParent}return i}function Eb(e,t){if(e&&document.contains(e)){let o=document.scrollingElement||document.documentElement,s=window.getComputedStyle(o).overflow===`hidden`;if(s){let t=yb(e);s||t.push(o);for(let n of t)wb(n,e)}else{var n;let{left:o,top:s}=e.getBoundingClientRect();e==null||(n=e.scrollIntoView)==null||n.call(e,{block:`nearest`});let{left:c,top:l}=e.getBoundingClientRect();if(Math.abs(o-c)>1||Math.abs(s-l)>1){var r,i,a;t==null||(i=t.containingElement)==null||(r=i.scrollIntoView)==null||r.call(i,{block:`center`,inline:`center`}),(a=e.scrollIntoView)==null||a.call(e,{block:`nearest`})}}}}function Db(e){return e.pointerType===``&&e.isTrusted?!0:vA()&&e.pointerType?e.type===`click`&&e.buttons===1:e.detail===0&&!e.pointerType}function Ob(e){return!vA()&&e.width===0&&e.height===0||e.width===1&&e.height===1&&e.pressure===0&&e.detail===0&&e.pointerType===`mouse`}function kb(e){let t=ME.version.split(`.`);return parseInt(t[0],10)>=19?e:e?`true`:void 0}function Ab(e,t=!0){let[n,r]=(0,PE.useState)(!0),i=n&&t;return Y(()=>{if(i&&e.current&&`getAnimations`in e.current)for(let t of e.current.getAnimations())t instanceof CSSTransition&&t.cancel()},[e,i]),Mb(e,i,(0,PE.useCallback)(()=>r(!1),[])),i}function jb(e,t){let[n,r]=(0,PE.useState)(t?`open`:`closed`);switch(n){case`open`:t||r(`exiting`);break;case`closed`:case`exiting`:t&&r(`open`);break}let i=n===`exiting`;return Mb(e,i,(0,PE.useCallback)(()=>{r(e=>e===`exiting`?`closed`:e)},[])),i}function Mb(e,t,n){Y(()=>{if(t&&e.current){if(!(`getAnimations`in e.current)){n();return}let t=e.current.getAnimations();if(t.length===0){n();return}let r=!1;return Promise.all(t.map(e=>e.finished)).then(()=>{r||(0,NE.flushSync)(()=>{n()})}).catch(()=>{}),()=>{r=!0}}},[e,t,n])}function Nb(e){let t=$k(e);if(!(e instanceof t.HTMLElement)&&!(e instanceof t.SVGElement))return!1;let{display:n,visibility:r}=e.style,i=n!==`none`&&r!==`hidden`&&r!==`collapse`;if(i){let{getComputedStyle:t}=e.ownerDocument.defaultView,{display:n,visibility:r}=t(e);i=n!==`none`&&r!==`hidden`&&r!==`collapse`}return i}function Pb(e,t){return!e.hasAttribute(`hidden`)&&!e.hasAttribute(`data-react-aria-prevent-focus`)&&(e.nodeName===`DETAILS`&&t&&t.nodeName!==`SUMMARY`?e.hasAttribute(`open`):!0)}function Fb(e,t){return kA?e.checkVisibility({visibilityProperty:!0})&&!e.closest(`[data-react-aria-prevent-focus]`):e.nodeName!==`#comment`&&Nb(e)&&Pb(e,t)&&(!e.parentElement||Fb(e.parentElement,e))}function Ib(e){return e.matches(jA)&&Fb(e)&&!Rb(e)}function Lb(e){return e.matches(MA)&&Fb(e)&&!Rb(e)}function Rb(e){let t=e;for(;t!=null;){if(t instanceof t.ownerDocument.defaultView.HTMLElement&&t.inert)return!0;t=t.parentElement}return!1}function zb(e,t,n){let[r,i]=(0,FE.useState)(e||t),a=(0,FE.useRef)(r),o=(0,FE.useRef)(e!==void 0),s=e!==void 0;(0,FE.useEffect)(()=>{o.current,o.current=s},[s]);let c=s?e:r;NA(()=>{a.current=c});let[,l]=(0,FE.useReducer)(()=>({}),{});return[c,(0,FE.useCallback)((e,...t)=>{let r=typeof e==`function`?e(a.current):e;Object.is(a.current,r)||(a.current=r,i(r),l(),n?.(r,...t))},[n])]}function Bb(e,t=-1/0,n=1/0){return Math.min(Math.max(e,t),n)}function Vb(e){let t=e;return t.nativeEvent=e,t.isDefaultPrevented=()=>t.defaultPrevented,t.isPropagationStopped=()=>t.cancelBubble,t.persist=()=>{},t}function Hb(e,t){Object.defineProperty(e,`target`,{value:t}),Object.defineProperty(e,`currentTarget`,{value:t})}function Ub(e){let t=(0,IE.useRef)({isFocused:!1,observer:null});Y(()=>{let e=t.current;return()=>{e.observer&&=(e.observer.disconnect(),null)}},[]);let n=fb(t=>{e?.(t)});return(0,IE.useCallback)(e=>{if(e.target instanceof HTMLButtonElement||e.target instanceof HTMLInputElement||e.target instanceof HTMLTextAreaElement||e.target instanceof HTMLSelectElement){t.current.isFocused=!0;let r=e.target;r.addEventListener(`focusout`,e=>{t.current.isFocused=!1,r.disabled&&n(Vb(e)),t.current.observer&&(t.current.observer.disconnect(),t.current.observer=null)},{once:!0}),t.current.observer=new MutationObserver(()=>{if(t.current.isFocused&&r.disabled){var e;(e=t.current.observer)==null||e.disconnect();let n=r===document.activeElement?null:document.activeElement;r.dispatchEvent(new FocusEvent(`blur`,{relatedTarget:n})),r.dispatchEvent(new FocusEvent(`focusout`,{bubbles:!0,relatedTarget:n}))}}),t.current.observer.observe(r,{attributes:!0,attributeFilter:[`disabled`]})}},[n])}function Wb(e){for(;e&&!Ib(e);)e=e.parentElement;let t=$k(e),n=t.document.activeElement;if(!n||n===e)return;PA=!0;let r=!1,i=e=>{(e.target===n||r)&&e.stopImmediatePropagation()},a=t=>{(t.target===n||r)&&(t.stopImmediatePropagation(),!e&&!r&&(r=!0,Ky(n),c()))},o=t=>{(t.target===e||r)&&t.stopImmediatePropagation()},s=t=>{(t.target===e||r)&&(t.stopImmediatePropagation(),r||(r=!0,Ky(n),c()))};t.addEventListener(`blur`,i,!0),t.addEventListener(`focusout`,a,!0),t.addEventListener(`focusin`,s,!0),t.addEventListener(`focus`,o,!0);let c=()=>{cancelAnimationFrame(l),t.removeEventListener(`blur`,i,!0),t.removeEventListener(`focusout`,a,!0),t.removeEventListener(`focusin`,s,!0),t.removeEventListener(`focus`,o,!0),PA=!1,r=!1},l=requestAnimationFrame(c);return c}function Gb(e){if(mA()){if(FA===`default`){let t=X(e);IA=t.documentElement.style.webkitUserSelect,t.documentElement.style.webkitUserSelect=`none`}FA=`disabled`}else if(e instanceof HTMLElement||e instanceof SVGElement){let t=`userSelect`in e.style?`userSelect`:`webkitUserSelect`;LA.set(e,e.style[t]),e.style[t]=`none`}}function Kb(e){if(mA()){if(FA!==`disabled`)return;FA=`restoring`,setTimeout(()=>{cb(()=>{if(FA===`restoring`){let t=X(e);t.documentElement.style.webkitUserSelect===`none`&&(t.documentElement.style.webkitUserSelect=IA||``),IA=``,FA=`default`}})},300)}else if((e instanceof HTMLElement||e instanceof SVGElement)&&e&&LA.has(e)){let t=LA.get(e),n=`userSelect`in e.style?`userSelect`:`webkitUserSelect`;e.style[n]===`none`&&(e.style[n]=t),e.getAttribute(`style`)===``&&e.removeAttribute(`style`),LA.delete(e)}}function qb(e,t){return t.get?t.get.call(e):t.value}function Jb(e,t,n){if(!t.has(e))throw TypeError(`attempted to `+n+` private field on non-instance`);return t.get(e)}function Yb(e,t){return qb(e,Jb(e,t,`get`))}function Xb(e,t){if(t.has(e))throw TypeError(`Cannot initialize the same private elements twice on an object`)}function Zb(e,t,n){Xb(e,t),t.set(e,n)}function Qb(e,t,n){if(t.set)t.set.call(e,n);else{if(!t.writable)throw TypeError(`attempted to set read only private field`);t.value=n}}function $b(e,t,n){return Qb(e,Jb(e,t,`set`),n),n}function ex(e){let t=(0,RE.useContext)(RA);if(t){let{register:n,...r}=t;e=B(r,e),n()}return gb(t,e.ref),e}function tx(e){let{onPress:t,onPressChange:n,onPressStart:r,onPressEnd:i,onPressUp:a,onClick:o,isDisabled:s,isPressed:c,preventFocusOnPress:l,shouldCancelOnPointerExit:u,allowTextSelectionOnPress:d,ref:f,...p}=ex(e),[m,h]=(0,RE.useState)(!1),g=(0,RE.useRef)({isPressed:!1,ignoreEmulatedMouseEvents:!1,didFirePressStart:!1,isTriggeringEvent:!1,activePointerId:null,target:null,isOverTarget:!1,pointerType:null,disposables:[]}),{addGlobalListener:_,removeAllGlobalListeners:v}=lb(),y=fb((e,t)=>{let i=g.current;if(s||i.didFirePressStart)return!1;let a=!0;if(i.isTriggeringEvent=!0,r){let n=new BA(`pressstart`,t,e);r(n),a=n.shouldStopPropagation}return n&&n(!0),i.isTriggeringEvent=!1,i.didFirePressStart=!0,h(!0),a}),b=fb((e,r,a=!0)=>{let o=g.current;if(!o.didFirePressStart)return!1;o.didFirePressStart=!1,o.isTriggeringEvent=!0;let c=!0;if(i){let t=new BA(`pressend`,r,e);i(t),c=t.shouldStopPropagation}if(n&&n(!1),h(!1),t&&a&&!s){let n=new BA(`press`,r,e);t(n),c&&=n.shouldStopPropagation}return o.isTriggeringEvent=!1,c}),x=fb((e,t)=>{let n=g.current;if(s)return!1;if(a){n.isTriggeringEvent=!0;let r=new BA(`pressup`,t,e);return a(r),n.isTriggeringEvent=!1,r.shouldStopPropagation}return!0}),S=fb(e=>{let t=g.current;if(t.isPressed&&t.target){t.didFirePressStart&&t.pointerType!=null&&b(ix(t.target,e),t.pointerType,!1),t.isPressed=!1,t.isOverTarget=!1,t.activePointerId=null,t.pointerType=null,v(),d||Kb(t.target);for(let e of t.disposables)e();t.disposables=[]}}),C=fb(e=>{u&&S(e)}),w=fb(e=>{s||o?.(e)}),T=fb((e,t)=>{if(!s&&o){let n=new MouseEvent(`click`,e);Hb(n,t),o(Vb(n))}}),E=(0,RE.useMemo)(()=>{let e=g.current,t={onKeyDown(t){if(rx(t.nativeEvent,t.currentTarget)&&Ry(t.currentTarget,zy(t.nativeEvent))){var r;ox(zy(t.nativeEvent),t.key)&&t.preventDefault();let i=!0;if(!e.isPressed&&!t.repeat){e.target=t.currentTarget,e.isPressed=!0,e.pointerType=`keyboard`,i=y(t,`keyboard`);let r=t.currentTarget;_(X(t.currentTarget),`keyup`,Py(t=>{rx(t,r)&&!t.repeat&&Ry(r,zy(t))&&e.target&&x(ix(e.target,t),`keyboard`)},n),!0)}i&&t.stopPropagation(),t.metaKey&&dA()&&((r=e.metaKeyEvents)==null||r.set(t.key,t.nativeEvent))}else t.key===`Meta`&&(e.metaKeyEvents=new Map)},onClick(t){if(!(t&&!Ry(t.currentTarget,zy(t.nativeEvent)))&&t&&t.button===0&&!e.isTriggeringEvent&&!tb.isOpening){let n=!0;if(s&&t.preventDefault(),!e.ignoreEmulatedMouseEvents&&!e.isPressed&&(e.pointerType===`virtual`||Db(t.nativeEvent))){let e=y(t,`virtual`),r=x(t,`virtual`),i=b(t,`virtual`);w(t),n=e&&r&&i}else if(e.isPressed&&e.pointerType!==`keyboard`){let r=e.pointerType||t.nativeEvent.pointerType||`virtual`,i=x(ix(t.currentTarget,t),r),a=b(ix(t.currentTarget,t),r,!0);n=i&&a,e.isOverTarget=!1,w(t),S(t)}e.ignoreEmulatedMouseEvents=!1,n&&t.stopPropagation()}}},n=t=>{var n;if(e.isPressed&&e.target&&rx(t,e.target)){var r;ox(zy(t),t.key)&&t.preventDefault();let n=zy(t),i=Ry(e.target,zy(t));b(ix(e.target,t),`keyboard`,i),i&&T(t,e.target),v(),t.key!==`Enter`&&nx(e.target)&&Ry(e.target,n)&&!t[VA]&&(t[VA]=!0,tb(e.target,t,!1)),e.isPressed=!1,(r=e.metaKeyEvents)==null||r.delete(t.key)}else if(t.key===`Meta`&&(n=e.metaKeyEvents)!=null&&n.size){var i;let t=e.metaKeyEvents;e.metaKeyEvents=void 0;for(let n of t.values())(i=e.target)==null||i.dispatchEvent(new KeyboardEvent(`keyup`,n))}};if(typeof PointerEvent<`u`){t.onPointerDown=t=>{if(t.button!==0||!Ry(t.currentTarget,zy(t.nativeEvent)))return;if(Ob(t.nativeEvent)){e.pointerType=`virtual`;return}e.pointerType=t.pointerType;let i=!0;if(!e.isPressed){e.isPressed=!0,e.isOverTarget=!0,e.activePointerId=t.pointerId,e.target=t.currentTarget,d||Gb(e.target),i=y(t,e.pointerType);let a=zy(t.nativeEvent);`releasePointerCapture`in a&&a.releasePointerCapture(t.pointerId),_(X(t.currentTarget),`pointerup`,n,!1),_(X(t.currentTarget),`pointercancel`,r,!1)}i&&t.stopPropagation()},t.onMouseDown=t=>{if(Ry(t.currentTarget,zy(t.nativeEvent))&&t.button===0){if(l){let n=Wb(t.target);n&&e.disposables.push(n)}t.stopPropagation()}},t.onPointerUp=t=>{!Ry(t.currentTarget,zy(t.nativeEvent))||e.pointerType===`virtual`||t.button===0&&!e.isPressed&&x(t,e.pointerType||t.pointerType)},t.onPointerEnter=t=>{t.pointerId===e.activePointerId&&e.target&&!e.isOverTarget&&e.pointerType!=null&&(e.isOverTarget=!0,y(ix(e.target,t),e.pointerType))},t.onPointerLeave=t=>{t.pointerId===e.activePointerId&&e.target&&e.isOverTarget&&e.pointerType!=null&&(e.isOverTarget=!1,b(ix(e.target,t),e.pointerType,!1),C(t))};let n=t=>{if(t.pointerId===e.activePointerId&&e.isPressed&&t.button===0&&e.target){if(Ry(e.target,zy(t))&&e.pointerType!=null){let n=!1,r=setTimeout(()=>{e.isPressed&&e.target instanceof HTMLElement&&(n?S(t):(Ky(e.target),e.target.click()))},80);_(t.currentTarget,`click`,()=>n=!0,!0),e.disposables.push(()=>clearTimeout(r))}else S(t);e.isOverTarget=!1}},r=e=>{S(e)};t.onDragStart=e=>{Ry(e.currentTarget,zy(e.nativeEvent))&&S(e)}}return t},[_,s,l,v,d,S,C,b,y,x,w,T]);return(0,RE.useEffect)(()=>{if(!f)return;let e=X(f.current);if(!e||!e.head||e.getElementById(HA))return;let t=e.createElement(`style`);t.id=HA,t.textContent=` @layer { [${UA}] { touch-action: pan-x pan-y pinch-zoom; @@ -194,7 +194,7 @@ Try polyfilling it using "@formatjs/intl-pluralrules" * { overscroll-behavior: contain; } -}`,document.head.prepend(r);let i=n=>{if(!(n.touches.length===2||t)){if(!e||e===document.documentElement||e===document.body){n.preventDefault();return}e.scrollHeight===e.clientHeight&&e.scrollWidth===e.clientWidth&&n.preventDefault()}},a=e=>{let t=e.target,n=e.relatedTarget;n&&xb(n)?(n.focus({preventScroll:!0}),ZC(n,xb(t))):n||(t.parentElement?.closest(`[tabindex]`))?.focus({preventScroll:!0})},o=HTMLElement.prototype.focus;HTMLElement.prototype.focus=function(e){let t=document.activeElement!=null&&xb(document.activeElement);o.call(this,{...e,preventScroll:!0}),(!e||!e.preventScroll)&&ZC(this,t)};let s=Py(XC(document,`touchstart`,n,{passive:!1,capture:!0}),XC(document,`touchmove`,i,{passive:!1,capture:!0}),XC(document,`blur`,a,!0));return()=>{s(),r.remove(),HTMLElement.prototype.focus=o}}function YC(e,t,n){let r=e.style[t];return e.style[t]=n,()=>{e.style[t]=r}}function XC(e,t,n,r){return e.addEventListener(t,n,r),()=>{e.removeEventListener(t,n,r)}}function ZC(e,t){t||!FM?QC(e):FM.addEventListener(`resize`,()=>QC(e),{once:!0})}function QC(e){let t=document.scrollingElement||document.documentElement,n=e;for(;n&&n!==t;){let e=vb(n);if(e!==document.documentElement&&e!==document.body&&e!==n){let t=e.getBoundingClientRect(),r=n.getBoundingClientRect();if(r.topt.top+n.clientHeight){let n=t.bottom;FM&&(n=Math.min(n,FM.offsetTop+FM.height));let i=r.top-t.top-((n-t.top)/2-r.height/2);e.scrollTo({top:Math.max(0,Math.min(e.scrollHeight-e.clientHeight,e.scrollTop+i)),behavior:`smooth`})}}n=e.parentElement}}function $C(){return(0,cD.useContext)(RM)??{}}function ew(e){let{children:t}=e,n=(0,lD.useContext)(zM),[r,i]=(0,lD.useState)(0),a=(0,lD.useMemo)(()=>({parent:n,modalCount:r,addModal(){i(e=>e+1),n&&n.addModal()},removeModal(){i(e=>e-1),n&&n.removeModal()}}),[n,r]);return lD.createElement(zM.Provider,{value:a},t)}function tw(){let e=(0,lD.useContext)(zM);return{modalProviderProps:{"aria-hidden":e&&e.modalCount>0?!0:void 0}}}function nw(e){let{modalProviderProps:t}=tw();return lD.createElement(`div`,{"data-overlay-container":!0,...e,...t})}function rw(e){return lD.createElement(ew,null,lD.createElement(nw,e))}function iw(e){let t=Ay(),{portalContainer:n=t?null:document.body,...r}=e,{getContainer:i}=$C();if(!e.portalContainer&&i&&(n=i()),lD.useEffect(()=>{if(n?.closest(`[data-overlay-container]`))throw Error(`An OverlayContainer must not be inside another container. Please change the portalContainer prop.`)},[n]),!n)return null;let a=lD.createElement(rw,r);return uD.createPortal(a,n)}function aw(e={}){let{style:t,isFocusable:n}=e,[r,i]=(0,fD.useState)(!1),{focusWithinProps:a}=kx({isDisabled:!n,onFocusWithinChange:e=>i(e)}),o=(0,fD.useMemo)(()=>r?t:t?{...xN,...t}:xN,[r]);return{visuallyHiddenProps:{...a,style:o}}}function ow(e){let{children:t,elementType:n=`div`,isFocusable:r,style:i,...a}=e,{visuallyHiddenProps:o}=aw(e);return fD.createElement(n,B(a,o),t)}function sw(e){return e&&e.__esModule?e.default:e}function cw(e){let{onDismiss:t,...n}=e,r=ub(n,cC(sw(bN),`@react-aria/overlays`).format(`dismiss`)),i=()=>{t&&t()};return dD.createElement(ow,null,dD.createElement(`button`,{...r,tabIndex:-1,onClick:i,style:{width:1,height:1}}))}function lw(e,t){let n=$k(e?.[0]),r=t instanceof n.Element?{root:t}:t,i=r?.root??document.body,a=r?.shouldUseInert&&SN,o=new Set(e),s=new Set,c=e=>a&&e instanceof n.HTMLElement?e.inert:e.getAttribute(`aria-hidden`)===`true`,l=(e,t)=>{a&&e instanceof n.HTMLElement?e.inert=t:t?e.setAttribute(`aria-hidden`,`true`):(e.removeAttribute(`aria-hidden`),e instanceof n.HTMLElement&&(e.inert=!1))},u=e=>{for(let t of e.querySelectorAll(`[data-live-announcer], [data-react-aria-top-layer]`))o.add(t);let t=e=>{if(s.has(e)||o.has(e)||e.parentElement&&s.has(e.parentElement)&&e.parentElement.getAttribute(`role`)!==`row`)return NodeFilter.FILTER_REJECT;for(let t of o)if(e.contains(t))return NodeFilter.FILTER_SKIP;return NodeFilter.FILTER_ACCEPT},n=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:t}),r=t(e);if(r===NodeFilter.FILTER_ACCEPT&&d(e),r!==NodeFilter.FILTER_REJECT){let e=n.nextNode();for(;e!=null;)d(e),e=n.nextNode()}},d=e=>{let t=CN.get(e)??0;c(e)&&t===0||(t===0&&l(e,!0),s.add(e),CN.set(e,t+1))};wN.length&&wN[wN.length-1].disconnect(),u(i);let f=new MutationObserver(e=>{for(let t of e)if(t.type===`childList`&&![...o,...s].some(e=>e.contains(t.target)))for(let e of t.addedNodes)(e instanceof HTMLElement||e instanceof SVGElement)&&(e.dataset.liveAnnouncer===`true`||e.dataset.reactAriaTopLayer===`true`)?o.add(e):e instanceof Element&&u(e)});f.observe(i,{childList:!0,subtree:!0});let p={visibleNodes:o,hiddenNodes:s,observe(){f.observe(i,{childList:!0,subtree:!0})},disconnect(){f.disconnect()}};return wN.push(p),()=>{f.disconnect();for(let e of s){let t=CN.get(e);t!=null&&(t===1?(l(e,!1),CN.delete(e)):CN.set(e,t-1))}p===wN[wN.length-1]?(wN.pop(),wN.length&&wN[wN.length-1].observe()):wN.splice(wN.indexOf(p),1)}}function uw(e){let t=wN[wN.length-1];if(t&&!t.visibleNodes.has(e))return t.visibleNodes.add(e),()=>{t.visibleNodes.delete(e)}}function dw(e,t){let{triggerRef:n,popoverRef:r,groupRef:i,isNonModal:a,isKeyboardDismissDisabled:o,shouldCloseOnInteractOutside:s,...c}=e,l=c.trigger===`SubmenuTrigger`,{overlayProps:u,underlayProps:d}=WC({isOpen:t.isOpen,onClose:t.close,shouldCloseOnBlur:!0,isDismissable:!a||l,isKeyboardDismissDisabled:o,shouldCloseOnInteractOutside:s},i??r),{overlayProps:f,arrowProps:p,placement:m,triggerAnchorPoint:h}=pC({...c,targetRef:n,overlayRef:r,isOpen:t.isOpen,onClose:a&&!l?t.close:null});return KC({isDisabled:a||!t.isOpen}),(0,pD.useEffect)(()=>{if(t.isOpen&&r.current)return a?uw(i?.current??r.current):lw([i?.current??r.current],{shouldUseInert:!0})},[a,t.isOpen,r,i]),{popoverProps:B(u,f),arrowProps:p,underlayProps:d,placement:m,triggerAnchorPoint:h}}function fw(e){let t=Ay(),{portalContainer:n=t?null:document.body,isExiting:r}=e,[i,a]=(0,mD.useState)(!1),o=(0,mD.useMemo)(()=>({contain:i,setContain:a}),[i,a]),{getContainer:s}=$C();if(!e.portalContainer&&s&&(n=s()),!n)return null;let c=e.children;return e.disableFocusManagement||(c=mD.createElement(gC,{restoreFocus:!0,contain:(e.shouldContainFocus||i)&&!r},c)),c=mD.createElement(TN.Provider,{value:o},mD.createElement(Ox,null,c)),hD.createPortal(c,n)}function pw(){let e=(0,mD.useContext)(TN)?.setContain;Y(()=>{e?.(!0)},[e])}function mw(e,t,n){let{overlayProps:r,underlayProps:i}=WC({...e,isOpen:t.isOpen,onClose:t.close},n);return KC({isDisabled:!t.isOpen}),pw(),(0,gD.useEffect)(()=>{if(t.isOpen&&n.current)return lw([n.current],{shouldUseInert:!0})},[t.isOpen,n]),{modalProps:B(r),underlayProps:i}}function hw(e){let[t,n]=zb(e.isOpen,e.defaultOpen||!1,e.onOpenChange);return{isOpen:t,setOpen:n,open:(0,vD.useCallback)(()=>{n(!0)},[n]),close:(0,vD.useCallback)(()=>{n(!1)},[n]),toggle:(0,vD.useCallback)(()=>{n(!t)},[n,t])}}function gw(e={}){let{delay:t=EN,closeDelay:n=DN}=e,{isOpen:r,open:i,close:a}=hw(e),o=(0,_D.useMemo)(()=>`${++kN}`,[]),s=(0,_D.useRef)(null),c=(0,_D.useRef)(a),l=()=>{ON[o]=f},u=()=>{for(let e in ON)e!==o&&(ON[e](!0),delete ON[e])},d=()=>{s.current&&clearTimeout(s.current),s.current=null,u(),l(),AN=!0,i(),jN&&=(clearTimeout(jN),null),MN&&=(clearTimeout(MN),null)},f=e=>{e||n<=0?(s.current&&clearTimeout(s.current),s.current=null,c.current()):s.current||=setTimeout(()=>{s.current=null,c.current()},n),jN&&=(clearTimeout(jN),null),AN&&(MN&&clearTimeout(MN),MN=setTimeout(()=>{delete ON[o],MN=null,AN=!1},Math.max(DN,n)))},p=()=>{u(),l(),!r&&!jN&&!AN?jN=setTimeout(()=>{jN=null,AN=!0,d()},t):r||d()};return(0,_D.useEffect)(()=>{c.current=a},[a]),(0,_D.useEffect)(()=>()=>{s.current&&clearTimeout(s.current),ON[o]&&delete ON[o]},[o]),{isOpen:r,open:e=>{!e&&t>0&&!s.current?p():d()},close:f}}function _w(e){let t=gw(e),n=(0,yD.useRef)(null),{triggerProps:r,tooltipProps:i}=Ux(e,t,n);return yD.createElement(Lx,{values:[[NN,t],[PN,{...i,triggerRef:n}]]},yD.createElement(ej,{...r,ref:n},e.children))}function vw(e){let t=(0,yD.useContext)(NN),n=(0,yD.useRef)(null),{overlayProps:r,arrowProps:i,placement:a,triggerAnchorPoint:o}=pC({placement:e.placement||`top`,targetRef:e.triggerRef,overlayRef:e.tooltipRef,arrowRef:n,offset:e.offset,crossOffset:e.crossOffset,isOpen:t.isOpen,arrowBoundaryOffset:e.arrowBoundaryOffset,shouldFlip:e.shouldFlip,containerPadding:e.containerPadding,onClose:()=>t.close(!0)}),s=Ab(e.tooltipRef,!!a)||e.isEntering||!1,c=Rx({...e,defaultClassName:`react-aria-Tooltip`,values:{placement:a,isEntering:s,isExiting:e.isExiting,state:t}});e=B(e,r);let{tooltipProps:l}=Hx(e,t),u=Gy(e,{global:!0});return yD.createElement(`div`,{...B(u,c,l),ref:e.tooltipRef,style:{...r.style,"--trigger-anchor-point":o?`${o.x}px ${o.y}px`:void 0,...c.style},"data-placement":a??void 0,"data-entering":s||void 0,"data-exiting":e.isExiting||void 0},yD.createElement(cj.Provider,{value:{...i,placement:a,ref:n}},c.children))}function yw(e=``){let t=e.toLowerCase().trim().replace(/\s+/g,`-`);return{ariaDescriptionAttrs:{"aria-describedby":e?t:void 0},AriaDescription:()=>e?xD.createElement(`span`,{id:t,hidden:!0},e):null}}function bw(e){let t=e=>typeof window<`u`?window.matchMedia(e).matches:!1,[n,r]=(0,DD.useState)(t(e));function i(){r(t(e))}return(0,DD.useEffect)(()=>{let t=window.matchMedia(e);return i(),t.addEventListener(`change`,i),()=>{t.removeEventListener(`change`,i)}},[e]),n}function xw({container:e,portalSelector:t,children:n,width:r,height:i,ariaLabel:a,dismissOnClickOutside:o=!0,dismissOnEscape:s=!0,className:c,open:l,onEscapeKeyDown:u,onInteractOutside:d,onOpenChange:f,defaultOpen:p,transitionDuration:m=200,variant:h=`dialog`,...g}){let _;(a===void 0||a===``)&&(_=`ariaLabel`,dP("The `ariaLabel` prop on `Modal` will become mandatory in Storybook 11.")),u!==void 0&&(_=`onEscapeKeyDown`,dP("The `onEscapeKeyDown` prop is deprecated and will be removed in Storybook 11. Use `dismissOnEscape` instead.")),d!==void 0&&(_=`onInteractOutside`,dP("The `onInteractOutside` prop is deprecated and will be removed in Storybook 11. Use `dismissOnInteractOutside` instead."));let v=(0,TD.useRef)(null),[{status:y,isMounted:b},x]=yP({timeout:bw(`(prefers-reduced-motion: reduce)`)?0:m,mountOnEnter:!0,unmountOnExit:!0}),S=hw({isOpen:l||b,defaultOpen:p,onOpenChange:e=>{x(e),f?.(e)}}),C=()=>{S.close()},{modalProps:w,underlayProps:T}=mw({isDismissable:o,isKeyboardDismissDisabled:!0,shouldCloseOnInteractOutside:d?e=>{let t=new MouseEvent(`click`,{bubbles:!0,cancelable:!0,relatedTarget:e});return d(t),!t.defaultPrevented}:void 0},S,v);if((0,TD.useEffect)(()=>{let e=l??p??!1;e&&!b?x(!0):!e&&b&&x(!1)},[l,p,b,x]),(0,TD.useEffect)(()=>{b&&(l||p)&&f?.(!0)},[b]),(0,TD.useEffect)(()=>{if(b&&(l||p)&&v.current)return lw([v.current],{shouldUseInert:!0})},[b,l,p,v]),!b||y===`exited`||y===`unmounted`)return null;let E=B(w,{onKeyDown:e=>{e.key===`Escape`?s&&(u?.(e.nativeEvent),e.nativeEvent.defaultPrevented||C()):w.onKeyDown?.(e)}}),D=e??(t?document.querySelector(t):void 0);return TD.createElement(fw,{disableFocusManagement:!0,portalContainer:D||void 0},TD.createElement(gC,{restoreFocus:!0,contain:!0,autoFocus:!0},TD.createElement(NP,{$status:y,$transitionDuration:m,...T}),TD.createElement(`div`,{role:`dialog`,"aria-label":a,ref:v,...E},TD.createElement(qP.Provider,{value:{close:C}},TD.createElement(`div`,{tabIndex:-1},TD.createElement(PP,{"data-deprecated":_,$variant:h,$status:y,$transitionDuration:m,className:c,width:r,height:i,...g},n))))))}function Sw(e,t){var n=(0,ND.useRef)(null),r=(0,ND.useRef)(null);r.current=t;var i=(0,ND.useRef)(null);(0,ND.useEffect)(function(){a()});var a=(0,ND.useCallback)(function(){var t=i.current,a=r.current,o=t||(a?a instanceof Element?a:a.current:null);n.current&&n.current.element===o&&n.current.subscriber===e||(n.current&&n.current.cleanup&&n.current.cleanup(),n.current={element:o,subscriber:e,cleanup:o?e(o):void 0})},[e]);return(0,ND.useEffect)(function(){return function(){n.current&&n.current.cleanup&&(n.current.cleanup(),n.current=null)}},[]),(0,ND.useCallback)(function(e){i.current=e,a()},[a])}function Cw(e,t,n){return e[t]?e[t][0]?e[t][0][n]:e[t][n]:t===`contentBoxSize`?e.contentRect[n===`inlineSize`?`width`:`height`]:void 0}function ww(e){e===void 0&&(e={});var t=e.onResize,n=(0,ND.useRef)(void 0);n.current=t;var r=e.round||Math.round,i=(0,ND.useRef)(),a=(0,ND.useState)({width:void 0,height:void 0}),o=a[0],s=a[1],c=(0,ND.useRef)(!1);(0,ND.useEffect)(function(){return c.current=!1,function(){c.current=!0}},[]);var l=(0,ND.useRef)({width:void 0,height:void 0}),u=Sw((0,ND.useCallback)(function(t){return(!i.current||i.current.box!==e.box||i.current.round!==r)&&(i.current={box:e.box,round:r,instance:new ResizeObserver(function(t){var i=t[0],a=e.box===`border-box`?`borderBoxSize`:e.box===`device-pixel-content-box`?`devicePixelContentBoxSize`:`contentBoxSize`,o=Cw(i,a,`inlineSize`),u=Cw(i,a,`blockSize`),d=o?r(o):void 0,f=u?r(u):void 0;if(l.current.width!==d||l.current.height!==f){var p={width:d,height:f};l.current.width=d,l.current.height=f,n.current?n.current(p):c.current||s(p)}})}),i.current.instance.observe(t,{box:e.box}),function(){i.current&&i.current.instance.unobserve(t)}},[e.box,r]),e.ref);return(0,ND.useMemo)(function(){return{ref:u,width:o.width,height:o.height}},[u,o.width,o.height])}function Tw({centered:e,scale:t,children:n}){let r=(0,MD.useRef)(null),[i,a]=(0,MD.useState)(0),o=(0,MD.useCallback)(({height:e})=>{e&&a(e/t)},[t]);return(0,MD.useEffect)(()=>{r.current&&a(r.current.getBoundingClientRect().height)},[t]),ww({ref:r,onResize:o}),MD.createElement(JP,{centered:e,scale:t,elementHeight:i},MD.createElement(`div`,{ref:r,className:`innerZoomElementWrapper`},n))}function Ew(e,t,n,r){n===void 0&&(n=1),r===void 0&&(r=1/0),jF||(jF=document.createElement(`textarea`),jF.setAttribute(`tabindex`,`-1`),jF.setAttribute(`aria-hidden`,`true`),AF(jF)),jF.parentNode===null&&document.body.appendChild(jF);var i=e.paddingSize,a=e.borderSize,o=e.sizingStyle,s=o.boxSizing;Object.keys(o).forEach(function(e){var t=e;jF.style[t]=o[t]}),AF(jF),jF.value=t;var c=MF(jF,e);jF.value=t,c=MF(jF,e),jF.value=`x`;var l=jF.scrollHeight-i,u=l*n;s===`border-box`&&(u=u+i+a),c=Math.max(u,c);var d=l*r;return s===`border-box`&&(d=d+i+a),c=Math.min(d,c),[c,l]}function Dw(e,t,n){var r=TF(n);UD.useLayoutEffect(function(){var n=function(e){return r.current(e)};if(e)return e.addEventListener(t,n),function(){return e.removeEventListener(t,n)}},[])}function Ow(e){return e==null||typeof e==`string`||typeof e==`number`||typeof e==`boolean`||typeof e==`symbol`}function kw(e){return{...e,type:`option`,value:Mw(e.value)}}function Aw(e){return`type`in e&&e.type===`reset`?e:kw(e)}function jw(e){if(e!==QF)return e}function Mw(e){return e===void 0?QF:e}function Nw(e,{value:t}){return`${e}-opt-${String(t)??`sb-reset`}`}function Pw(e,t){return t===void 0?[]:Ow(t)?e.filter(e=>e.value===t).map(kw):e.filter(e=>t.some(t=>e.value===t)).map(kw)}function Fw(e,t,n,r){if(n==null)return[null,null];let i=null,a=null,o=e.getItem(n);for(;o!=null;){let n=o.filter(e,t,r);n!=null&&(n.nextKey=null,a&&(n.prevKey=a.key,a.nextKey=n.key),i??=n,t.addNode(n),a=n),o=o.nextKey?e.getItem(o.nextKey):null}if(a&&a.type===`separator`){let e=a.prevKey;t.removeNode(a.key),e?(a=t.getItem(e),a.nextKey=null):a=null}return[i?.key??null,a?.key??null]}function Iw(e){let{children:t,items:n,idScope:r,addIdAndValue:i,dependencies:a=[]}=e,o=(0,XD.useMemo)(()=>new WeakMap,a);return(0,XD.useMemo)(()=>{if(n&&typeof t==`function`){let e=[];for(let a of n){let n=o.get(a);if(!n){n=t(a);let e=n.props.id??a.key??a.id;if(e==null)throw Error(`Could not determine key for item`);r&&(e=r+`:`+e),n=(0,XD.cloneElement)(n,i?{key:e,id:e,value:a}:{key:e}),o.set(a,n)}e.push(n)}return e}else if(typeof t!=`function`)return t},[t,n,o,r,i])}function Lw(e){if((0,ZD.useContext)(gI))return ZD.createElement(ZD.Fragment,null,e.children);let t=ZD.createElement(gI.Provider,{value:!0},e.children);return ZD.createElement(`template`,{"data-react-aria-hidden":!0},t)}function Rw(e){let t=(t,n)=>(0,ZD.useContext)(gI)?null:e(t,n);return t.displayName=e.displayName||e.name,(0,ZD.forwardRef)(t)}function zw(){return(0,ZD.useContext)(gI)}function Bw(e){if((0,U.useContext)(vI))return e.content;let{collection:t,document:n}=Uw(e.createCollection);return U.createElement(U.Fragment,null,U.createElement(Lw,null,U.createElement(vI.Provider,{value:n},e.content)),U.createElement(Vw,{render:e.children,collection:t}))}function Vw({collection:e,render:t}){return t(e)}function Hw(e,t,n){let r=Ay(),i=(0,U.useRef)(r);return i.current=r,(0,$D.useSyncExternalStore)(e,(0,U.useCallback)(()=>i.current?n():t(),[t,n]))}function Uw(e){let[t]=(0,U.useState)(()=>new hI(e?.()||new fI)),n=yI((0,U.useCallback)(e=>t.subscribe(e),[t]),(0,U.useCallback)(()=>{let e=t.getCollection();return t.isSSR&&t.resetAfterSSR(),e},[t]),(0,U.useCallback)(()=>(t.isSSR=!0,t.getCollection()),[t]));return Y(()=>(t.isMounted=!0,()=>{t.isMounted=!1}),[t]),{collection:n,document:t}}function Ww(e){var t;return t=class extends oI{},t.type=e,t}function Gw(e,t,n,r,i,a){typeof e==`string`&&(e=Ww(e));let o=(0,U.useCallback)(i=>{i?.setProps(t,n,e,r,a)},[t,n,r,a,e]),s=(0,U.useContext)(bI);if(s){let o=s.ownerDocument.nodesByProps.get(t);return o||(o=s.ownerDocument.createElement(e.type),o.setProps(t,n,e,r,a),s.appendChild(o),s.ownerDocument.updateCollection(),s.ownerDocument.nodesByProps.set(t,o)),i?U.createElement(bI.Provider,{value:o},i):null}return U.createElement(e.type,{ref:o},i)}function Kw(e,t){let n=({node:e})=>t(e.props,e.props.ref,e),r=(0,U.forwardRef)((r,i)=>{let a=(0,U.useContext)($A);if(!(0,U.useContext)(_I)){if(t.length>=3)throw Error(t.name+` cannot be rendered outside a collection.`);return t(r,i)}return Gw(e,r,i,`children`in r?r.children:null,null,e=>U.createElement($A.Provider,{value:a},U.createElement(n,{node:e})))});return r.displayName=t.name,r}function qw(e,t,n=Jw){let r=({node:e})=>t(e.props,e.props.ref,e),i=(0,U.forwardRef)((t,i)=>Gw(e,t,i,null,n(t),e=>U.createElement(r,{node:e}))??U.createElement(U.Fragment,null));return i.displayName=t.name,i}function Jw(e){return Iw({...e,addIdAndValue:!0})}function Yw(e){let t=(0,U.useContext)(xI),n=(t?.dependencies||[]).concat(e.dependencies),r=e.idScope||t?.idScope,i=Jw({...e,idScope:r,dependencies:n});return(0,U.useContext)(vI)&&(i=U.createElement(Xw,null,i)),t=(0,U.useMemo)(()=>({dependencies:n,idScope:r}),[r,...n]),U.createElement(xI.Provider,{value:t},i)}function Xw({children:e}){let t=(0,U.useContext)(vI),n=(0,U.useMemo)(()=>U.createElement(vI.Provider,{value:null},U.createElement(_I.Provider,{value:!0},e)),[e]);return Ay()?U.createElement(bI.Provider,{value:t},n):(0,QD.createPortal)(n,t)}function Zw(e){let{id:t,label:n,"aria-labelledby":r,"aria-label":i,labelElementType:a=`label`}=e;t=jy(t);let o=jy(),s={};n&&(r=r?`${o} ${r}`:o,s={id:o,htmlFor:a===`label`?t:void 0});let c=ub({id:t,"aria-label":i,"aria-labelledby":r});return{labelProps:s,fieldProps:c}}function Qw(e){let{value:t=0,minValue:n=0,maxValue:r=100,valueLabel:i,isIndeterminate:a,formatOptions:o={style:`percent`}}=e,s=Gy(e,{labelable:!0}),{labelProps:c,fieldProps:l}=Zw({...e,labelElementType:`span`});t=Bb(t,n,r);let u=(t-n)/(r-n),d=dC(o);if(!a&&!i){let e=o.style===`percent`?u:t;i=d.format(e)}return{progressBarProps:B(s,{...l,"aria-valuenow":a?void 0:t,"aria-valuemin":n,"aria-valuemax":r,"aria-valuetext":a?void 0:i,role:`progressbar`}),labelProps:c}}function $w(e,t=`assertive`,n=7e3){wI?wI.announce(e,t,n):(wI=new TI,(typeof IS_REACT_ACT_ENVIRONMENT==`boolean`?IS_REACT_ACT_ENVIRONMENT:typeof jest<`u`)?wI.announce(e,t,n):setTimeout(()=>{wI?.isAttached()&&wI?.announce(e,t,n)},100))}function eT(e,t){let{elementType:n=`button`,isDisabled:r,onPress:i,onPressStart:a,onPressEnd:o,onPressUp:s,onPressChange:c,preventFocusOnPress:l,allowFocusWhenDisabled:u,onClick:d,href:f,target:p,rel:m,type:h=`button`}=e,g;g=n===`button`?{type:h,disabled:r,form:e.form,formAction:e.formAction,formEncType:e.formEncType,formMethod:e.formMethod,formNoValidate:e.formNoValidate,formTarget:e.formTarget,name:e.name,value:e.value}:{role:`button`,href:n===`a`&&!r?f:void 0,target:n===`a`?p:void 0,type:n===`input`?h:void 0,disabled:n===`input`?r:void 0,"aria-disabled":!r||n===`input`?void 0:r,rel:n===`a`?m:void 0};let{pressProps:_,isPressed:v}=tx({onPressStart:a,onPressEnd:o,onPressChange:c,onPress:i,onPressUp:s,onClick:d,isDisabled:r,preventFocusOnPress:l,ref:t}),{focusableProps:y}=Dx(e,t);u&&(y.tabIndex=r?-1:y.tabIndex);let b=B(y,_,Gy(e,{labelable:!0}));return{isPressed:v,buttonProps:B(g,b,{"aria-haspopup":e[`aria-haspopup`],"aria-expanded":e[`aria-expanded`],"aria-controls":e[`aria-controls`],"aria-pressed":e[`aria-pressed`],"aria-current":e[`aria-current`],"aria-disabled":e[`aria-disabled`]})}}function tT(e){return e.isPending&&(e.onPress=void 0,e.onPressStart=void 0,e.onPressEnd=void 0,e.onPressChange=void 0,e.onPressUp=void 0,e.onKeyDown=void 0,e.onKeyUp=void 0,e.onClick=void 0,e.href=void 0),e}function nT({state:e,isExiting:t,UNSTABLE_portalContainer:n,clearContexts:r,...i}){let a=(0,W.useRef)(null),o=(0,W.useRef)(null),s=(0,W.useContext)(OI),c=s&&i.trigger===`SubmenuTrigger`,{popoverProps:l,underlayProps:u,arrowProps:d,placement:f,triggerAnchorPoint:p}=dw({...i,offset:i.offset??8,arrowRef:a,groupRef:c?s:o},e),m=i.popoverRef,h=Ab(m,!!f)||i.isEntering||!1,g=Rx({...i,defaultClassName:`react-aria-Popover`,values:{trigger:i.trigger||null,placement:f,isEntering:h,isExiting:t}}),_=!i.isNonModal||i.trigger===`SubmenuTrigger`,[v,y]=(0,W.useState)(!1);Y(()=>{m.current&&y(_&&!m.current.querySelector(`[role=dialog]`))},[m,_]),(0,W.useEffect)(()=>{v&&i.trigger!==`SubmenuTrigger`&&m.current&&!m.current.contains(document.activeElement)&&Sx(m.current)},[v,m,i.trigger]);let b=(0,W.useMemo)(()=>{let e=g.children;if(r)for(let t of r)e=W.createElement(t.Provider,{value:null},e);return e},[g.children,r]),x={...l.style,"--trigger-anchor-point":p?`${p.x}px ${p.y}px`:void 0,...g.style},S=W.createElement(`div`,{...B(Gy(i,{global:!0}),l),...g,role:v?`dialog`:void 0,tabIndex:v?-1:void 0,"aria-label":i[`aria-label`],"aria-labelledby":i[`aria-labelledby`],ref:m,slot:i.slot||void 0,style:x,dir:i.dir,"data-trigger":i.trigger,"data-placement":f,"data-entering":h||void 0,"data-exiting":t||void 0},!i.isNonModal&&W.createElement(cw,{onDismiss:e.close}),W.createElement(cj.Provider,{value:{...d,placement:f,ref:a}},b),W.createElement(cw,{onDismiss:e.close}));return c?W.createElement(fw,{...i,shouldContainFocus:v,isExiting:t,portalContainer:n??s?.current??void 0},S):W.createElement(fw,{...i,shouldContainFocus:v,isExiting:t,portalContainer:n},!i.isNonModal&&e.isOpen&&W.createElement(`div`,{"data-testid":`underlay`,...u,style:{position:`fixed`,inset:0}}),W.createElement(`div`,{ref:o,style:{display:`contents`}},W.createElement(OI.Provider,{value:o},S)))}function rT(e,t,n){return Iw({items:t?e.getChildren(t.key):e,dependencies:[n],children(t){let r=t.render(t);return!n||t.type!==`item`?r:rO.createElement(rO.Fragment,null,n({type:`item`,key:t.key,dropPosition:`before`}),r,iT(e,t,n))}})}function iT(e,t,n){let r=t.key,i=e.getKeyAfter(r),a=i==null?null:e.getItem(i);for(;a!=null&&a.type!==`item`;)i=e.getKeyAfter(a.key),a=i==null?null:e.getItem(i);let o=t.nextKey==null?null:e.getItem(t.nextKey);for(;o!=null&&o.type!==`item`;)o=o.nextKey==null?null:e.getItem(o.nextKey);let s=[];if(o==null){let r=t;for(;r&&(!a||r.parentKey!==a.parentKey&&a.levele==null?null:new Set([e]),[e])}function oT(e){let t=Gy(e,{labelable:!0}),n;return e.orientation===`vertical`&&(n=`vertical`),e.elementType===`hr`?{separatorProps:t}:{separatorProps:{...t,role:`separator`,"aria-orientation":n}}}function sT(e){return hA()?e.altKey:e.ctrlKey}function cT(e,t){let n=`[data-key="${CSS.escape(String(t))}"]`,r=e.current?.dataset.collection;return r&&(n=`[data-collection="${CSS.escape(r)}"]${n}`),e.current?.querySelector(n)}function lT(e){let t=jy();return BI.set(e,t),t}function uT(e){return BI.get(e)}function dT(e){let{keyboardDelegate:t,selectionManager:n,onTypeSelect:r}=e,i=(0,cO.useRef)({search:``,timeout:void 0}).current;return{typeSelectProps:{onKeyDownCapture:t.getKeyForSearch?e=>{let a=fT(e.key);if(!(!a||e.ctrlKey||e.metaKey||!e.currentTarget.contains(e.target)||i.search.length===0&&a===` `)){if(a===` `&&i.search.trim().length>0&&(e.preventDefault(),`continuePropagation`in e||e.stopPropagation()),i.search+=a,t.getKeyForSearch!=null){let e=t.getKeyForSearch(i.search,n.focusedKey);e??=t.getKeyForSearch(i.search),e!=null&&(n.setFocusedKey(e),r&&r(e))}clearTimeout(i.timeout),i.timeout=setTimeout(()=>{i.search=``},VI)}}:void 0}}}function fT(e){return e.length===1||!/^[A-Z]/i.test(e)?e:``}function pT(e){let{selectionManager:t,keyboardDelegate:n,ref:r,autoFocus:i=!1,shouldFocusWrap:a=!1,disallowEmptySelection:o=!1,disallowSelectAll:s=!1,escapeKeyBehavior:c=`clearSelection`,selectOnFocus:l=t.selectionBehavior===`replace`,disallowTypeAhead:u=!1,shouldUseVirtualFocus:d,allowsTabNavigation:f=!1,isVirtualized:p,scrollRef:m=r,linkBehavior:h=`action`}=e,{direction:g}=uS(),_=$y(),v=e=>{var i;if(e.altKey&&e.key===`Tab`&&e.preventDefault(),!((i=r.current)!=null&&i.contains(e.target)))return;let u=(n,i)=>{if(n!=null){if(t.isLink(n)&&h===`selection`&&l&&!sT(e)){(0,lO.flushSync)(()=>{t.setFocusedKey(n,i)});let a=cT(r,n),o=t.getItemProps(n);a&&_.open(a,e,o.href,o.routerOptions);return}if(t.setFocusedKey(n,i),t.isLink(n)&&h===`override`)return;e.shiftKey&&t.selectionMode===`multiple`?t.extendSelection(n):l&&!sT(e)&&t.replaceSelection(n)}};switch(e.key){case`ArrowDown`:if(n.getKeyBelow){let r=t.focusedKey==null?n.getFirstKey?.call(n):n.getKeyBelow?.call(n,t.focusedKey);r==null&&a&&(r=n.getFirstKey?.call(n,t.focusedKey)),r!=null&&(e.preventDefault(),u(r))}break;case`ArrowUp`:if(n.getKeyAbove){let r=t.focusedKey==null?n.getLastKey?.call(n):n.getKeyAbove?.call(n,t.focusedKey);r==null&&a&&(r=n.getLastKey?.call(n,t.focusedKey)),r!=null&&(e.preventDefault(),u(r))}break;case`ArrowLeft`:if(n.getKeyLeftOf){let r=t.focusedKey==null?null:n.getKeyLeftOf?.call(n,t.focusedKey);r==null&&a&&(r=g===`rtl`?n.getFirstKey?.call(n,t.focusedKey):n.getLastKey?.call(n,t.focusedKey)),r!=null&&(e.preventDefault(),u(r,g===`rtl`?`first`:`last`))}break;case`ArrowRight`:if(n.getKeyRightOf){let r=t.focusedKey==null?null:n.getKeyRightOf?.call(n,t.focusedKey);r==null&&a&&(r=g===`rtl`?n.getLastKey?.call(n,t.focusedKey):n.getFirstKey?.call(n,t.focusedKey)),r!=null&&(e.preventDefault(),u(r,g===`rtl`?`last`:`first`))}break;case`Home`:if(n.getFirstKey){if(t.focusedKey===null&&e.shiftKey)return;e.preventDefault();let r=n.getFirstKey(t.focusedKey,bb(e));t.setFocusedKey(r),r!=null&&(bb(e)&&e.shiftKey&&t.selectionMode===`multiple`?t.extendSelection(r):l&&t.replaceSelection(r))}break;case`End`:if(n.getLastKey){if(t.focusedKey===null&&e.shiftKey)return;e.preventDefault();let r=n.getLastKey(t.focusedKey,bb(e));t.setFocusedKey(r),r!=null&&(bb(e)&&e.shiftKey&&t.selectionMode===`multiple`?t.extendSelection(r):l&&t.replaceSelection(r))}break;case`PageDown`:if(n.getKeyPageBelow&&t.focusedKey!=null){let r=n.getKeyPageBelow(t.focusedKey);r!=null&&(e.preventDefault(),u(r))}break;case`PageUp`:if(n.getKeyPageAbove&&t.focusedKey!=null){let r=n.getKeyPageAbove(t.focusedKey);r!=null&&(e.preventDefault(),u(r))}break;case`a`:bb(e)&&t.selectionMode===`multiple`&&s!==!0&&(e.preventDefault(),t.selectAll());break;case`Escape`:c===`clearSelection`&&!o&&t.selectedKeys.size!==0&&(e.stopPropagation(),e.preventDefault(),t.clearSelection());break;case`Tab`:if(!f){if(e.shiftKey)r.current.focus();else{let e=FC(r.current,{tabbable:!0}),t,n;do n=e.lastChild(),n&&(t=n);while(n);t&&!t.contains(document.activeElement)&&Ky(t)}break}}},y=(0,uO.useRef)({top:0,left:0});Cb(m,`scroll`,p?void 0:()=>{y.current={top:m.current?.scrollTop??0,left:m.current?.scrollLeft??0}});let b=e=>{if(t.isFocused){e.currentTarget.contains(e.target)||t.setFocused(!1);return}if(e.currentTarget.contains(e.target)){if(t.setFocused(!0),t.focusedKey==null){let r=e=>{e!=null&&(t.setFocusedKey(e),l&&!t.isSelected(e)&&t.replaceSelection(e))},i=e.relatedTarget;i&&e.currentTarget.compareDocumentPosition(i)&Node.DOCUMENT_POSITION_FOLLOWING?r(t.lastSelectedKey??n.getLastKey?.call(n)):r(t.firstSelectedKey??n.getFirstKey?.call(n))}else !p&&m.current&&(m.current.scrollTop=y.current.top,m.current.scrollLeft=y.current.left);if(t.focusedKey!=null&&m.current){let e=cT(r,t.focusedKey);e instanceof HTMLElement&&(!e.contains(document.activeElement)&&!d&&Ky(e),vx()===`keyboard`&&Eb(e,{containingElement:r.current}))}}},x=e=>{e.currentTarget.contains(e.relatedTarget)||t.setFocused(!1)},S=(0,uO.useRef)(!1);Cb(r,OA,d?e=>{let{detail:n}=e;e.stopPropagation(),t.setFocused(!0),n?.focusStrategy===`first`&&(S.current=!0)}:void 0);let C=fb(()=>{let e=n.getFirstKey?.call(n)??null;if(e==null){let e=tA();BC(r.current),HC(e,null),t.collection.size>0&&(S.current=!1)}else t.setFocusedKey(e),S.current=!1});pb(()=>{S.current&&C()},[t.collection,C]);let w=fb(()=>{t.collection.size>0&&(S.current=!1)});pb(()=>{w()},[t.focusedKey,w]),Cb(r,DA,d?e=>{var n;e.stopPropagation(),t.setFocused(!1),(n=e.detail)!=null&&n.clearFocusKey&&t.setFocusedKey(null)}:void 0);let T=(0,uO.useRef)(i),E=(0,uO.useRef)(!1);(0,uO.useEffect)(()=>{if(T.current){let e=null;i===`first`&&(e=n.getFirstKey?.call(n)??null),i===`last`&&(e=n.getLastKey?.call(n)??null);let a=t.selectedKeys;if(a.size){for(let n of a)if(t.canSelectItem(n)){e=n;break}}t.setFocused(!0),t.setFocusedKey(e),e==null&&!d&&r.current&&Sx(r.current),t.collection.size>0&&(T.current=!1,E.current=!0)}});let D=(0,uO.useRef)(t.focusedKey),O=(0,uO.useRef)(null);(0,uO.useEffect)(()=>{if(t.isFocused&&t.focusedKey!=null&&(t.focusedKey!==D.current||E.current)&&m.current&&r.current){let e=vx(),n=cT(r,t.focusedKey);if(!(n instanceof HTMLElement))return;(e===`keyboard`||E.current)&&(O.current&&cancelAnimationFrame(O.current),O.current=requestAnimationFrame(()=>{m.current&&(wb(m.current,n),e!==`virtual`&&Eb(n,{containingElement:r.current}))}))}!d&&t.isFocused&&t.focusedKey==null&&D.current!=null&&r.current&&Sx(r.current),D.current=t.focusedKey,E.current=!1}),(0,uO.useEffect)(()=>()=>{O.current&&cancelAnimationFrame(O.current)},[]),Cb(r,`react-aria-focus-scope-restore`,e=>{e.preventDefault(),t.setFocused(!0)});let k={onKeyDown:v,onFocus:b,onBlur:x,onMouseDown(e){m.current===e.target&&e.preventDefault()}},{typeSelectProps:ee}=dT({keyboardDelegate:n,selectionManager:t});u||(k=B(ee,k));let A;d||(A=t.focusedKey==null?0:-1);let j=lT(t.collection);return{collectionProps:B(k,{tabIndex:A,"data-collection":j})}}function mT(e){let{id:t,selectionManager:n,key:r,ref:i,shouldSelectOnPressUp:a,shouldUseVirtualFocus:o,focus:s,isDisabled:c,onAction:l,allowsDifferentPressOrigin:u,linkBehavior:d=`action`}=e,f=$y();t=jy(t);let p=e=>{if(e.pointerType===`keyboard`&&sT(e))n.toggleSelection(r);else{if(n.selectionMode===`none`)return;if(n.isLink(r)){if(d===`selection`&&i.current){let t=n.getItemProps(r);f.open(i.current,e,t.href,t.routerOptions),n.setSelectedKeys(n.selectedKeys);return}else if(d===`override`||d===`none`)return}n.selectionMode===`single`?n.isSelected(r)&&!n.disallowEmptySelection?n.toggleSelection(r):n.replaceSelection(r):e&&e.shiftKey?n.extendSelection(r):n.selectionBehavior===`toggle`||e&&(bb(e)||e.pointerType===`touch`||e.pointerType===`virtual`)?n.toggleSelection(r):n.replaceSelection(r)}};(0,dO.useEffect)(()=>{r===n.focusedKey&&n.isFocused&&(o?BC(i.current):s?s():document.activeElement!==i.current&&i.current&&Sx(i.current))},[i,r,n.focusedKey,n.childFocusStrategy,n.isFocused,o]),c||=n.isDisabled(r);let m={};!o&&!c?m={tabIndex:r===n.focusedKey?0:-1,onFocus(e){e.target===i.current&&n.setFocusedKey(r)}}:c&&(m.onMouseDown=e=>{e.preventDefault()});let h=n.isLink(r)&&d===`override`,g=l&&e.UNSTABLE_itemBehavior===`action`,_=n.isLink(r)&&d!==`selection`&&d!==`none`,v=!c&&n.canSelectItem(r)&&!h&&!g,y=(l||_)&&!c,b=y&&(n.selectionBehavior===`replace`?!v:!v||n.isEmpty),x=y&&v&&n.selectionBehavior===`replace`,S=b||x,C=(0,dO.useRef)(null),w=S&&v,T=(0,dO.useRef)(!1),E=(0,dO.useRef)(!1),D=n.getItemProps(r),O=e=>{if(l){var t;l(),(t=i.current)==null||t.dispatchEvent(new CustomEvent(`react-aria-item-action`,{bubbles:!0}))}_&&i.current&&f.open(i.current,e,D.href,D.routerOptions)},k={ref:i};if(a?(k.onPressStart=e=>{C.current=e.pointerType,T.current=w,e.pointerType===`keyboard`&&(!S||gT())&&p(e)},u?(k.onPressUp=b?void 0:e=>{e.pointerType===`mouse`&&v&&p(e)},k.onPress=b?O:e=>{e.pointerType!==`keyboard`&&e.pointerType!==`mouse`&&v&&p(e)}):k.onPress=e=>{if(b||x&&e.pointerType!==`mouse`){if(e.pointerType===`keyboard`&&!hT())return;O(e)}else e.pointerType!==`keyboard`&&v&&p(e)}):(k.onPressStart=e=>{C.current=e.pointerType,T.current=w,E.current=b,v&&(e.pointerType===`mouse`&&!b||e.pointerType===`keyboard`&&(!y||gT()))&&p(e)},k.onPress=e=>{(e.pointerType===`touch`||e.pointerType===`pen`||e.pointerType===`virtual`||e.pointerType===`keyboard`&&S&&hT()||e.pointerType===`mouse`&&E.current)&&(S?O(e):v&&p(e))}),m[`data-collection`]=uT(n.collection),m[`data-key`]=r,k.preventFocusOnPress=o,o&&(k=B(k,{onPressStart(e){e.pointerType!==`touch`&&(n.setFocused(!0),n.setFocusedKey(r))},onPress(e){e.pointerType===`touch`&&(n.setFocused(!0),n.setFocusedKey(r))}})),D)for(let e of[`onPressStart`,`onPressEnd`,`onPressChange`,`onPress`,`onPressUp`,`onClick`])D[e]&&(k[e]=Py(k[e],D[e]));let{pressProps:ee,isPressed:A}=tx(k),j=x?e=>{C.current===`mouse`&&(e.stopPropagation(),e.preventDefault(),O(e))}:void 0,{longPressProps:te}=Ix({isDisabled:!w,onLongPress(e){e.pointerType===`touch`&&(p(e),n.setSelectionBehavior(`toggle`))}}),M=e=>{C.current===`touch`&&T.current&&e.preventDefault()},ne=d!==`none`&&n.isLink(r)?e=>{tb.isOpening||e.preventDefault()}:void 0;return{itemProps:B(m,v||b||o&&!c?ee:{},w?te:{},{onDoubleClick:j,onDragStartCapture:M,onClick:ne,id:t},o?{onMouseDown:e=>e.preventDefault()}:void 0),isPressed:A,isSelected:n.isSelected(r),isFocused:n.isFocused&&n.focusedKey===r,isDisabled:c,allowsSelection:v,hasAction:S}}function hT(){return window.event?.key===`Enter`}function gT(){let e=window.event;return e?.key===` `||e?.code===`Space`}function _T(e){let{selectionManager:t,collection:n,disabledKeys:r,ref:i,keyboardDelegate:a,layoutDelegate:o}=e,s=fC({usage:`search`,sensitivity:`base`}),c=t.disabledBehavior,l=(0,fO.useMemo)(()=>a||new UI({collection:n,disabledKeys:r,disabledBehavior:c,ref:i,collator:s,layoutDelegate:o}),[a,o,n,r,i,s,c]),{collectionProps:u}=pT({...e,ref:i,selectionManager:t,keyboardDelegate:l});return{listProps:u}}function vT(e,t,n){let{shouldFocusWrap:r=!0,onKeyDown:i,onKeyUp:a,...o}=e;!e[`aria-label`]&&e[`aria-labelledby`];let s=Gy(e,{labelable:!0}),{listProps:c}=_T({...o,ref:n,selectionManager:t.selectionManager,collection:t.collection,disabledKeys:t.disabledKeys,shouldFocusWrap:r,linkBehavior:`override`});return zI.set(t,{onClose:e.onClose,onAction:e.onAction,shouldUseVirtualFocus:e.shouldUseVirtualFocus}),{menuProps:B(s,{onKeyDown:i,onKeyUp:a},{role:`menu`,...c,onKeyDown:t=>{var n;(t.key!==`Escape`||e.shouldUseVirtualFocus)&&((n=c.onKeyDown)==null||n.call(c,t))}})}}function yT(e){return null}function bT(e){return e.hasChildItems==null?!!(e.childItems||e.title&&pO.Children.count(e.children)>0):e.hasChildItems}function xT(e){return null}function ST(e){let t=[],n=null;return{*[Symbol.iterator](){for(let e of t)yield e;n||=e();for(let e of n)t.push(e),yield e}}}function CT(e,t){if(e&&t)return n=>e(t(n));if(e)return e;if(t)return t}function wT(e){return e[0].toUpperCase()+e.slice(1)}function TT(e,t,n){let r=(0,gO.useMemo)(()=>new GI,[]),{children:i,items:a,collection:o}=e;return(0,gO.useMemo)(()=>o||t(r.build({children:i,items:a},n)),[r,i,a,o,n,t])}function ET(e,t){return typeof t.getChildren==`function`?t.getChildren(e.key):e.childNodes}function DT(e){return OT(e,0)}function OT(e,t){if(t<0)return;let n=0;for(let r of e){if(n===t)return r;n++}}function kT(e,t,n){if(t.parentKey===n.parentKey)return t.index-n.index;let r=[...AT(e,t),t],i=[...AT(e,n),n],a=r.slice(0,i.length).findIndex((e,t)=>e!==i[t]);return a===-1?r.findIndex(e=>e===n)>=0?1:(i.findIndex(e=>e===t),-1):(t=r[a],n=i[a],t.index-n.index)}function AT(e,t){let n=[],r=t;for(;r?.parentKey!=null;)r=e.getItem(r.parentKey),r&&n.unshift(r);return n}function jT(e){let t=KI.get(e);if(t!=null)return t;let n=0,r=t=>{for(let i of t)i.type===`section`?r(ET(i,e)):i.type===`item`&&n++};return r(e),KI.set(e,n),n}function MT(e,t,n){let{id:r,key:i,closeOnSelect:a,isVirtualized:o,"aria-haspopup":s,onPressStart:c,onPressUp:l,onPress:u,onPressChange:d,onPressEnd:f,onClick:p,onHoverStart:m,onHoverChange:h,onHoverEnd:g,onKeyDown:_,onKeyUp:v,onFocus:y,onFocusChange:b,onBlur:x,selectionManager:S=t.selectionManager}=e,C=!!s,w=C&&e[`aria-expanded`]===`true`,T=e.isDisabled??S.isDisabled(i),E=e.isSelected??S.isSelected(i),D=zI.get(t),O=t.collection.getItem(i),k=e.onClose||D.onClose,ee=$y(),A=()=>{var t;if(!C&&(!(O==null||(t=O.props)==null)&&t.onAction?O.props.onAction():e.onAction&&e.onAction(i),D.onAction)){let e=D.onAction;e(i)}},j=`menuitem`;C||(S.selectionMode===`single`?j=`menuitemradio`:S.selectionMode===`multiple`&&(j=`menuitemcheckbox`));let te=Ny(),M=Ny(),ne=Ny(),re={id:r,"aria-disabled":T||void 0,role:j,"aria-label":e[`aria-label`],"aria-labelledby":te,"aria-describedby":[M,ne].filter(Boolean).join(` `)||void 0,"aria-controls":e[`aria-controls`],"aria-haspopup":s,"aria-expanded":e[`aria-expanded`]};S.selectionMode!==`none`&&!C&&(re[`aria-checked`]=E),o&&(re[`aria-posinset`]=O?.index,re[`aria-setsize`]=jT(t.collection));let ie=(0,_O.useRef)(!1),ae=e=>{d?.(e),ie.current=e},oe=(0,_O.useRef)(null),se=e=>{e.pointerType!==`keyboard`&&(oe.current={pointerType:e.pointerType}),e.pointerType===`mouse`&&(ie.current||e.target.click()),l?.(e)},ce=e=>{p?.(e),A(),ab(e,ee,O.props.href,O?.props.routerOptions);let t=oe.current?.pointerType===`keyboard`?oe.current?.key===`Enter`||S.selectionMode===`none`||S.isLink(i):S.selectionMode!==`multiple`||S.isLink(i);t=a??t,k&&!C&&t&&k(),oe.current=null},{itemProps:le,isFocused:ue}=mT({id:r,selectionManager:S,key:i,ref:n,shouldSelectOnPressUp:!0,allowsDifferentPressOrigin:!0,linkBehavior:`none`,shouldUseVirtualFocus:D.shouldUseVirtualFocus}),{pressProps:de,isPressed:fe}=tx({onPressStart:c,onPress:u,onPressUp:se,onPressChange:ae,onPressEnd:f,isDisabled:T}),{hoverProps:pe}=Nx({isDisabled:T,onHoverStart(e){!_x()&&!(w&&s)&&(S.setFocused(!0),S.setFocusedKey(i)),m?.(e)},onHoverChange:h,onHoverEnd:g}),{keyboardProps:me}=Tx({onKeyDown:e=>{if(e.repeat){e.continuePropagation();return}switch(e.key){case` `:oe.current={pointerType:`keyboard`,key:` `},e.target.click();break;case`Enter`:oe.current={pointerType:`keyboard`,key:`Enter`},e.target.tagName!==`A`&&e.target.click();break;default:C||e.continuePropagation(),_?.(e);break}},onKeyUp:v}),{focusProps:he}=Cx({onBlur:x,onFocus:y,onFocusChange:b}),ge=Gy(O?.props);delete ge.id;let _e=ib(O?.props);return{menuItemProps:{...re,...B(ge,_e,C?{onFocus:le.onFocus,"data-collection":le[`data-collection`],"data-key":le[`data-key`]}:le,de,pe,me,he,D.shouldUseVirtualFocus||C?{onMouseDown:e=>e.preventDefault()}:void 0,T?void 0:{onClick:ce}),tabIndex:le.tabIndex!=null&&w&&!D.shouldUseVirtualFocus?-1:le.tabIndex},labelProps:{id:te},descriptionProps:{id:M},keyboardShortcutProps:{id:ne},isFocused:ue,isFocusVisible:ue&&S.isFocused&&_x()&&!w,isSelected:E,isPressed:fe,isDisabled:T}}function NT(e){let{heading:t,"aria-label":n}=e,r=jy();return{itemProps:{role:`presentation`},headingProps:t?{id:r,role:`presentation`}:{},groupProps:{role:`group`,"aria-label":n,"aria-labelledby":t?r:void 0}}}function PT(e){let{menuRef:t,submenuRef:n,isOpen:r,isDisabled:i}=e,a=(0,vO.useRef)(void 0),o=(0,vO.useRef)(void 0),s=(0,vO.useRef)(0),c=(0,vO.useRef)(void 0),l=(0,vO.useRef)(void 0),u=(0,vO.useRef)(void 0),d=(0,vO.useRef)(2),[f,p]=(0,vO.useState)(!1);hb({ref:n,onResize:()=>{n.current&&(o.current=n.current.getBoundingClientRect(),u.current=void 0)}});let m=()=>{p(!1),d.current=qI,a.current=void 0},h=yx(),g=fb(e=>{f&&e.preventDefault()});(0,vO.useEffect)(()=>{f&&t.current?t.current.style.pointerEvents=`none`:t.current.style.pointerEvents=``},[t,f]),(0,vO.useEffect)(()=>{let e=n.current,f=t.current;if(i||!e||!r||h!==`pointer`||!f){m();return}o.current=e.getBoundingClientRect();let _=e=>{if(e.pointerType===`touch`||e.pointerType===`pen`)return;let t=Date.now();if(t-s.currento.current.right?`left`:`right`,nf.getBoundingClientRect().right||rf.getBoundingClientRect().bottom){m();return}let i=a.current.x,h=a.current.y,g=u.current===`right`?o.current.left-i:i-o.current.right,_=Math.atan2(h-o.current.top,g)+XI,v=Math.atan2(h-o.current.bottom,g)-XI,y=Math.atan2(h-r,u.current===`left`?-(n-i):n-i),b=y<_&&y>v;d.current=b?Math.min(d.current+1,qI):Math.max(d.current-1,0),d.current>=qI?p(!0):p(!1),s.current=t,a.current={x:n,y:r},b&&(c.current=setTimeout(()=>{m(),l.current=setTimeout(()=>{let e=document.elementFromPoint(n,r);e&&f.contains(e)&&e.dispatchEvent(new PointerEvent(`pointerover`,{bubbles:!0,cancelable:!0}))},100)},YI))};return window.addEventListener(`pointermove`,_),window.addEventListener(`pointerdown`,g,!0),()=>{window.removeEventListener(`pointermove`,_),window.removeEventListener(`pointerdown`,g,!0),clearTimeout(c.current),clearTimeout(l.current),d.current=qI}},[i,r,t,h,p,g,n])}function FT(e,t,n){let{parentMenuRef:r,submenuRef:i,type:a=`menu`,isDisabled:o,delay:s=200,shouldUseVirtualFocus:c}=e,l=jy(),u=jy(),{direction:d}=uS(),f=(0,yO.useRef)(void 0),p=(0,yO.useCallback)(()=>{f.current&&=(clearTimeout(f.current),void 0)},[f]),m=fb(e=>{p(),t.open(e)}),h=fb(()=>{p(),t.close()});Y(()=>()=>{p()},[p]);let g=e=>{if(e.currentTarget.contains(document.activeElement))switch(e.key){case`ArrowLeft`:d===`ltr`&&e.currentTarget.contains(e.target)&&(e.preventDefault(),e.stopPropagation(),h(),!c&&n.current&&Ky(n.current));break;case`ArrowRight`:d===`rtl`&&e.currentTarget.contains(e.target)&&(e.preventDefault(),e.stopPropagation(),h(),!c&&n.current&&Ky(n.current));break;case`Escape`:var t;(t=i.current)!=null&&t.contains(e.target)&&(e.stopPropagation(),h(),!c&&n.current&&Ky(n.current));break}},_={id:u,"aria-labelledby":l,submenuLevel:t.submenuLevel,...a===`menu`&&{onClose:t.closeAll,autoFocus:t.focusStrategy??void 0,onKeyDown:g}},v=e=>{switch(e.key){case`ArrowRight`:o||(d===`ltr`?(e.preventDefault(),t.isOpen||m(`first`),a===`menu`&&i?.current&&document.activeElement===n?.current&&Ky(i.current)):t.isOpen?h():e.continuePropagation());break;case`ArrowLeft`:o||(d===`rtl`?(e.preventDefault(),t.isOpen||m(`first`),a===`menu`&&i?.current&&document.activeElement===n?.current&&Ky(i.current)):t.isOpen?h():e.continuePropagation());break;default:e.continuePropagation();break}},y=e=>{!o&&(e.pointerType===`virtual`||e.pointerType===`keyboard`)&&m(`first`)},b=e=>{!o&&(e.pointerType===`touch`||e.pointerType===`mouse`)&&m()},x=e=>{o||(e&&!t.isOpen?f.current||=setTimeout(()=>{m()},s):e||p())};Cb(r,`focusin`,e=>{var i;t.isOpen&&(i=r.current)!=null&&i.contains(e.target)&&e.target!==n.current&&h()});let S=e=>e!==n.current;return PT({menuRef:r,submenuRef:i,isOpen:t.isOpen,isDisabled:o}),{submenuTriggerProps:{id:l,"aria-controls":t.isOpen?u:void 0,"aria-haspopup":o?void 0:a,"aria-expanded":t.isOpen?`true`:`false`,onPressStart:y,onPress:b,onHoverChange:x,onKeyDown:v,isOpen:t.isOpen},submenuProps:_,popoverProps:{isNonModal:!0,shouldCloseOnInteractOutside:S}}}function IT(e){let t=hw(e),[n,r]=(0,bO.useState)(null),[i,a]=(0,bO.useState)([]),o=()=>{a([]),t.close()};return{focusStrategy:n,...t,open(e=null){r(e),t.open()},toggle(e=null){r(e),t.toggle()},close(){o()},expandedKeysStack:i,openSubmenu:(e,t)=>{a(n=>t>n.length?n:[...n.slice(0,t),e])},closeSubmenu:(e,t)=>{a(n=>n[t]===e?n.slice(0,t):n)}}}function LT(e,t){let{triggerKey:n}=e,{expandedKeysStack:r,openSubmenu:i,closeSubmenu:a,close:o}=t,[s]=(0,xO.useState)(r?.length),c=(0,xO.useMemo)(()=>r[s]===n,[r,n,s]),[l,u]=(0,xO.useState)(null),d=(0,xO.useCallback)(e=>{u(e??null),i(n,s)},[i,s,n]),f=(0,xO.useCallback)(()=>{u(null),a(n,s)},[a,s,n]),p=(0,xO.useCallback)(e=>{u(e??null),c?f():d(e)},[f,d,c]);return(0,xO.useMemo)(()=>({focusStrategy:l,isOpen:c,open:d,close:f,closeAll:o,submenuLevel:s,setOpen:()=>{},toggle:p}),[c,d,f,o,l,p,s])}function RT(e,t){if(e.size!==t.size)return!1;for(let n of e)if(!t.has(n))return!1;return!0}function zT(e){let{selectionMode:t=`none`,disallowEmptySelection:n=!1,allowDuplicateSelectionEvents:r,selectionBehavior:i=`toggle`,disabledBehavior:a=`all`}=e,o=(0,SO.useRef)(!1),[,s]=(0,SO.useState)(!1),c=(0,SO.useRef)(null),l=(0,SO.useRef)(null),[,u]=(0,SO.useState)(null),[d,f]=zb((0,SO.useMemo)(()=>BT(e.selectedKeys),[e.selectedKeys]),(0,SO.useMemo)(()=>BT(e.defaultSelectedKeys,new QI),[e.defaultSelectedKeys]),e.onSelectionChange),p=(0,SO.useMemo)(()=>e.disabledKeys?new Set(e.disabledKeys):new Set,[e.disabledKeys]),[m,h]=(0,SO.useState)(i);i===`replace`&&m===`toggle`&&typeof d==`object`&&d.size===0&&h(`replace`);let g=(0,SO.useRef)(i);return(0,SO.useEffect)(()=>{i!==g.current&&(h(i),g.current=i)},[i]),{selectionMode:t,disallowEmptySelection:n,selectionBehavior:m,setSelectionBehavior:h,get isFocused(){return o.current},setFocused(e){o.current=e,s(e)},get focusedKey(){return c.current},get childFocusStrategy(){return l.current},setFocusedKey(e,t=`first`){c.current=e,l.current=t,u(e)},selectedKeys:d,setSelectedKeys(e){(r||!RT(e,d))&&f(e)},disabledKeys:p,disabledBehavior:a}}function BT(e,t){return e?e===`all`?`all`:new QI(e):t}function VT(e){let{onExpandedChange:t}=e,[n,r]=zb(e.expandedKeys?new Set(e.expandedKeys):void 0,e.defaultExpandedKeys?new Set(e.defaultExpandedKeys):new Set,t),i=zT(e),a=(0,CO.useMemo)(()=>e.disabledKeys?new Set(e.disabledKeys):new Set,[e.disabledKeys]),o=TT(e,(0,CO.useCallback)(e=>new ZI(e,{expandedKeys:n}),[n]),null);return(0,CO.useEffect)(()=>{i.focusedKey!=null&&!o.getItem(i.focusedKey)&&i.setFocusedKey(null)},[o,i.focusedKey]),{collection:o,expandedKeys:n,disabledKeys:a,toggleKey:e=>{r(HT(n,e))},setExpandedKeys:r,selectionManager:new $I(o,i)}}function HT(e,t){let n=new Set(e);return n.has(t)?n.delete(t):n.add(t),n}function UT({props:e,collection:t,menuRef:n}){[e,n]=Bx(e,n,NI);let{filter:r,...i}=e,a=(0,G.useMemo)(()=>r?t.filter(r):t,[t,r]),o=VT({...e,collection:a,children:void 0}),s=(0,G.useContext)(nL),{isVirtualized:c,CollectionRoot:l}=(0,G.useContext)(MI),{menuProps:u}=vT({...e,isVirtualized:c,onClose:e.onClose||s?.close},o,n),d=Rx({defaultClassName:`react-aria-Menu`,className:e.className,style:e.style,values:{isEmpty:o.collection.size===0}}),f=null;o.collection.size===0&&e.renderEmptyState&&(f=G.createElement(`div`,{role:`menuitem`,style:{display:`contents`}},e.renderEmptyState()));let p=Gy(e,{global:!0});return G.createElement(gC,null,G.createElement(`div`,{...B(p,d,u),ref:n,slot:e.slot||void 0,"data-empty":o.collection.size===0||void 0,onScroll:e.onScroll},G.createElement(Lx,{values:[[tL,o],[LI,{elementType:`div`}],[AI,{name:`MenuSection`,render:WT}],[iL,{parentMenuRef:n,shouldUseVirtualFocus:i?.shouldUseVirtualFocus}],[sL,null],[NI,null],[PI,null],[rL,o.selectionManager],[nL,s??IT({})]]},G.createElement(l,{collection:o.collection,persistedKeys:aT(o.selectionManager.focusedKey),scrollRef:n})),f))}function WT(e,t,n,r=`react-aria-MenuSection`){let i=(0,G.useContext)(tL),{CollectionBranch:a}=(0,G.useContext)(MI),[o,s]=Vx(),{headingProps:c,groupProps:l}=NT({heading:s,"aria-label":n.props[`aria-label`]??void 0}),u=Rx({defaultClassName:r,className:n.props?.className,style:n.props?.style,values:{}}),d=(0,G.useContext)(rL),f=zT(e),p=e.selectionMode==null?d:new oL(d,f),m=Gy(e,{global:!0});return delete m.id,G.createElement(`section`,{...B(m,u,l),ref:t},G.createElement(Lx,{values:[[FI,{...c,ref:o}],[rL,p]]},G.createElement(a,{collection:i.collection,parent:n})))}function GT(e,t){let{role:n=`dialog`}=e,r=Ny();r=e[`aria-label`]?void 0:r;let i=(0,wO.useRef)(!1);return(0,wO.useEffect)(()=>{if(t.current&&!t.current.contains(document.activeElement)){Sx(t.current);let e=setTimeout(()=>{(document.activeElement===t.current||document.activeElement===document.body)&&(i.current=!0,t.current&&(t.current.blur(),Sx(t.current)),i.current=!1)},500);return()=>{clearTimeout(e)}}},[t]),pw(),{dialogProps:{...Gy(e,{labelable:!0}),role:n,tabIndex:-1,"aria-labelledby":e[`aria-labelledby`]||r,onBlur:e=>{i.current&&e.stopPropagation()}},titleProps:{id:r}}}function KT(e){let t=IT(e),n=(0,TO.useRef)(null),{triggerProps:r,overlayProps:i}=GC({type:`dialog`},t,n),[a,o]=(0,TO.useState)(null);return hb({ref:n,onResize:(0,TO.useCallback)(()=>{n.current&&o(n.current.offsetWidth+`px`)},[n])}),r.id=jy(),i[`aria-labelledby`]=r.id,TO.createElement(Lx,{values:[[lL,t],[nL,t],[cL,i],[DI,{trigger:`DialogTrigger`,triggerRef:n,"aria-labelledby":i[`aria-labelledby`],style:{"--trigger-width":a}}]]},TO.createElement(rj,{...r,ref:n,isPressed:t.isOpen},e.children))}function qT({children:e,...t},n){let r={props:t,ref:n};if(zL(r))return MO.createElement(`a`,{ref:r.ref,...r.props},e);if(BL(r))return MO.createElement(`button`,{ref:r.ref,type:`button`,...r.props},e);throw Error(`invalid props`)}function JT(e){$L("The `useList` tabs hook is deprecated. Use `TabsView` instead.");let t=(0,FO.useRef)(),n=(0,FO.useRef)(),r=(0,FO.useRef)(new Map),{width:i=1}=ww({ref:t}),[a,o]=(0,FO.useState)(e),[s,c]=(0,FO.useState)([]),l=(0,FO.useRef)(e),u=(0,FO.useCallback)(({menuName:e,actions:t})=>{let i=s.some(({active:e})=>e),[a,o]=(0,FO.useState)(!1);return FO.createElement(FO.Fragment,null,FO.createElement(uL,{ariaLabel:`Additional tabs`,visible:a,onVisibleChange:o,placement:`bottom`,popover:FO.createElement(OL,{links:s.map(({title:e,id:n,color:r,active:i})=>({id:n,title:e,color:r,active:i,onClick:e=>{e.preventDefault(),t.onSelect(n)}}))})},FO.createElement(tR,{id:`addons-menu-button`,ref:n,active:i,preActive:a,style:{visibility:s.length?`visible`:`hidden`},"aria-hidden":!s.length,className:`tabbutton`,type:`button`,role:`tab`},e,FO.createElement(eR,{className:`addon-collapsible-icon`,isActive:i||a}))),s.map(({title:e,id:t,color:n},i)=>{let a=`index-${i}`;return FO.createElement(UL,{id:`tabbutton-${bf(t)??a}`,style:{visibility:`hidden`},"aria-hidden":!0,tabIndex:-1,ref:e=>{r.current.set(t,e)},className:`tabbutton`,type:`button`,key:t,textColor:n,role:`tab`},e)}))},[s]),d=(0,FO.useCallback)(()=>{if(!t.current||!n.current)return;let{x:i,width:u}=t.current.getBoundingClientRect(),{width:d}=n.current.getBoundingClientRect(),f=s.length?i+u-d:i+u,p=[],m=0,h=e.filter(e=>{let{id:t}=e,n=r.current.get(t),{width:a=0}=n?.getBoundingClientRect()||{},o=i+m+a>f;return(!o||!n)&&p.push(e),m+=a,o});(p.length!==a.length||l.current!==e)&&(o(p),c(h),l.current=e)},[s.length,e,a]);return(0,FO.useLayoutEffect)(d,[d,i]),{tabRefs:r,addonsRef:n,tabBarRef:t,visibleList:a,invisibleList:s,AddonTab:u}}function YT(e,t){let{"aria-label":n,"aria-labelledby":r,orientation:i=`horizontal`}=e,[a,o]=(0,LO.useState)(!1);Y(()=>{var e;o(!!(t.current&&(e=t.current.parentElement)!=null&&e.closest(`[role="toolbar"]`)))});let{direction:s}=uS(),c=s===`rtl`&&i===`horizontal`,l=IC(t),u=e=>{if(e.currentTarget.contains(e.target)){if(i===`horizontal`&&e.key===`ArrowRight`||i===`vertical`&&e.key===`ArrowDown`)c?l.focusPrevious():l.focusNext();else if(i===`horizontal`&&e.key===`ArrowLeft`||i===`vertical`&&e.key===`ArrowUp`)c?l.focusNext():l.focusPrevious();else if(e.key===`Tab`){e.stopPropagation(),d.current=document.activeElement,e.shiftKey?l.focusFirst():l.focusLast();return}else return;e.stopPropagation(),e.preventDefault()}},d=(0,LO.useRef)(null),f=e=>{!e.currentTarget.contains(e.relatedTarget)&&!d.current&&(d.current=e.target)},p=e=>{var n;if(d.current&&!e.currentTarget.contains(e.relatedTarget)&&(n=t.current)!=null&&n.contains(e.target)){var r;(r=d.current)==null||r.focus(),d.current=null}};return{toolbarProps:{...Gy(e,{labelable:!0}),role:a?`group`:`toolbar`,"aria-orientation":i,"aria-label":n,"aria-labelledby":n==null?r:void 0,onKeyDownCapture:a?void 0:u,onFocusCapture:a?void 0:p,onBlurCapture:a?void 0:f}}}function XT(e,t,n){return e?(typeof t==`string`&&(t=t.replace(/\s+/g,``)),`${pR.get(e)}-${n}-${t}`):``}function ZT(e,t,n){let{key:r,isDisabled:i,shouldSelectOnPressUp:a}=e,{selectionManager:o,selectedKey:s}=t,c=r===s,l=i||t.isDisabled||t.selectionManager.isDisabled(r),{itemProps:u,isPressed:d}=mT({selectionManager:o,key:r,ref:n,isDisabled:l,shouldSelectOnPressUp:a,linkBehavior:`selection`}),f=XT(t,r,`tab`),p=XT(t,r,`tabpanel`),{tabIndex:m}=u,h=t.collection.getItem(r),g=Gy(h?.props,{labelable:!0});delete g.id;let _=ib(h?.props),{focusableProps:v}=Dx({isDisabled:l},n);return{tabProps:B(g,v,_,u,{id:f,"aria-selected":c,"aria-disabled":l||void 0,"aria-controls":c?p:void 0,tabIndex:l?void 0:m,role:`tab`}),isSelected:c,isDisabled:l,isPressed:d}}function QT(e,t,n){let r=zC(n)?void 0:0,i=XT(t,e.id??t?.selectedKey,`tabpanel`);return{tabPanelProps:B(ub({...e,id:i,"aria-labelledby":XT(t,t?.selectedKey,`tab`)}),{tabIndex:r,role:`tabpanel`,"aria-describedby":e[`aria-describedby`],"aria-details":e[`aria-details`]})}}function $T(e,t,n){let{orientation:r=`horizontal`,keyboardActivation:i=`automatic`}=e,{collection:a,selectionManager:o,disabledKeys:s}=t,{direction:c}=uS(),{collectionProps:l}=pT({ref:n,selectionManager:o,keyboardDelegate:(0,RO.useMemo)(()=>new mR(a,c,r,s),[a,s,r,c]),selectOnFocus:i===`automatic`,disallowEmptySelection:!0,scrollRef:n,linkBehavior:`selection`}),u=jy();return pR.set(t,u),{tabListProps:{...B(l,ub({...e,id:u})),role:`tablist`,"aria-orientation":r,tabIndex:void 0}}}function eE(e){let{filter:t,layoutDelegate:n}=e,r=zT(e),i=(0,VO.useMemo)(()=>e.disabledKeys?new Set(e.disabledKeys):new Set,[e.disabledKeys]),a=TT(e,(0,VO.useCallback)(e=>t?new ER(t(e)):new ER(e),[t]),(0,VO.useMemo)(()=>({suppressTextValueWarning:e.suppressTextValueWarning}),[e.suppressTextValueWarning])),o=(0,VO.useMemo)(()=>new $I(a,r,{layoutDelegate:n}),[a,r,n]);return tE(a,o),{collection:a,disabledKeys:i,selectionManager:o}}function tE(e,t){let n=(0,VO.useRef)(null);(0,VO.useEffect)(()=>{if(t.focusedKey!=null&&!e.getItem(t.focusedKey)&&n.current){let r=n.current.getItem(t.focusedKey),i=[...n.current.getKeys()].map(e=>{let t=n.current.getItem(e);return t?.type===`item`?t:null}).filter(e=>e!==null),a=[...e.getKeys()].map(t=>{let n=e.getItem(t);return n?.type===`item`?n:null}).filter(e=>e!==null),o=(i?.length??0)-(a?.length??0),s=Math.min(o>1?Math.max((r?.index??0)-o+1,0):r?.index??0,(a?.length??0)-1),c=null,l=!1;for(;s>=0;){if(!t.isDisabled(a[s].key)){c=a[s];break}s(r?.index??0)&&(s=r?.index??0),s--)}t.setFocusedKey(c?c.key:null)}n.current=e},[e,t])}function nE(e){let[t,n]=zb(e.selectedKey,e.defaultSelectedKey??null,e.onSelectionChange),r=(0,HO.useMemo)(()=>t==null?[]:[t],[t]),{collection:i,disabledKeys:a,selectionManager:o}=eE({...e,selectionMode:`single`,disallowEmptySelection:!0,allowDuplicateSelectionEvents:!0,selectedKeys:r,onSelectionChange:r=>{if(r===`all`)return;let i=r.values().next().value??null;i===t&&e.onSelectionChange&&e.onSelectionChange(i),n(i)}});return{collection:i,disabledKeys:a,selectionManager:o,selectedKey:t,setSelectedKey:n,selectedItem:t==null?null:i.getItem(t)}}function rE(e){let t=nE({...e,onSelectionChange:e.onSelectionChange?t=>{var n;t!=null&&((n=e.onSelectionChange)==null||n.call(e,t))}:void 0,suppressTextValueWarning:!0,defaultSelectedKey:e.defaultSelectedKey??iE(e.collection,e.disabledKeys?new Set(e.disabledKeys):new Set)??void 0}),{selectionManager:n,collection:r,selectedKey:i}=t,a=(0,UO.useRef)(i);return(0,UO.useEffect)(()=>{let o=i;e.selectedKey==null&&(n.isEmpty||o==null||!r.getItem(o))&&(o=iE(r,t.disabledKeys),o!=null&&n.setSelectedKeys([o])),(o!=null&&n.focusedKey==null||!n.isFocused&&o!==a.current)&&n.setFocusedKey(o),a.current=o}),{...t,isDisabled:e.isDisabled||!1}}function iE(e,t){let n=null;if(e){var r,i,a,o;for(n=e.getFirstKey();n!=null&&(t.has(n)||!((i=e.getItem(n))==null||(r=i.props)==null)&&r.isDisabled)&&n!==e.getLastKey();)n=e.getKeyAfter(n);n!=null&&(t.has(n)||!((o=e.getItem(n))==null||(a=o.props)==null)&&a.isDisabled)&&n===e.getLastKey()&&(n=e.getFirstKey())}return n}function aE({props:e,tabsRef:t,collection:n}){let{orientation:r=`horizontal`}=e,i=rE({...e,collection:n,children:void 0}),{focusProps:a,isFocused:o,isFocusVisible:s}=RC({within:!0}),c=(0,q.useMemo)(()=>({orientation:r,isFocusWithin:o,isFocusVisible:s}),[r,o,s]),l=Rx({...e,defaultClassName:`react-aria-Tabs`,values:c}),u=Gy(e,{global:!0});return q.createElement(`div`,{...B(u,l,a),ref:t,slot:e.slot||void 0,"data-focused":o||void 0,"data-orientation":r,"data-focus-visible":s||void 0,"data-disabled":i.isDisabled||void 0},q.createElement(Lx,{values:[[MR,e],[NR,i]]},l.children))}function oE({props:e,forwardedRef:t}){let n=(0,q.useContext)(NR),{CollectionRoot:r}=(0,q.useContext)(MI),{orientation:i=`horizontal`,keyboardActivation:a=`automatic`}=zx(MR),o=db(t),{tabListProps:s}=$T({...e,orientation:i,keyboardActivation:a},n,o),c=Rx({...e,children:null,defaultClassName:`react-aria-TabList`,values:{orientation:i,state:n}}),l=Gy(e,{global:!0});return delete l.id,q.createElement(`div`,{...B(l,c,s),ref:o,"data-orientation":i||void 0},q.createElement(r,{collection:n.collection,persistedKeys:aT(n.selectionManager.focusedKey)}))}var sE,cE,lE,uE,dE,fE,pE,mE,hE,gE,_E,vE,yE,bE,xE,SE,CE,wE,TE,EE,DE,OE,kE,AE,jE,ME,NE,PE,FE,IE,LE,RE,zE,BE,VE,HE,UE,WE,GE,KE,qE,JE,YE,XE,ZE,QE,$E,eD,tD,nD,rD,iD,aD,oD,sD,cD,lD,uD,dD,fD,pD,mD,hD,gD,_D,vD,yD,bD,xD,SD,CD,wD,TD,ED,DD,OD,kD,AD,jD,MD,ND,PD,FD,H,ID,LD,RD,zD,BD,VD,HD,UD,WD,GD,KD,qD,JD,YD,XD,ZD,QD,U,$D,eO,tO,nO,W,rO,iO,aO,oO,sO,cO,lO,uO,dO,fO,pO,mO,hO,gO,_O,vO,yO,bO,xO,SO,CO,G,wO,TO,EO,DO,OO,kO,AO,jO,MO,NO,PO,FO,IO,LO,K,RO,zO,BO,VO,HO,UO,q,WO,J,GO,KO,qO,JO,YO,XO,ZO,QO,$O,ek,tk,nk,rk,ik,ak,ok,sk,ck,lk,uk,dk,fk,pk,mk,hk,gk,_k,vk,yk,bk,xk,Sk,Ck,wk,Tk,Ek,Dk,Ok,kk,Ak,jk,Mk,Nk,Pk,Fk,Ik,Lk,Rk,zk,Bk,Vk,Hk,Uk,Wk,Y,Gk,Kk,qk,Jk,Yk,Xk,Zk,Qk,X,$k,eA,tA,nA,rA,iA,aA,oA,sA,cA,lA,uA,dA,fA,pA,mA,hA,gA,_A,vA,yA,bA,xA,SA,CA,wA,TA,EA,DA,OA,kA,AA,jA,MA,NA,PA,FA,IA,LA,RA,zA,BA,VA,HA,UA,WA,GA,KA,qA,JA,YA,XA,ZA,QA,$A,ej,tj,nj,rj,ij,aj,oj,sj,cj,lj,uj,dj,fj,pj,mj,hj,gj,_j,vj,yj,bj,xj,Sj,Cj,Z,wj,Tj,Ej,Dj,Q,Oj,kj,Aj,jj,Mj,Nj,Pj,Fj,Ij,Lj,Rj,zj,Bj,Vj,Hj,Uj,Wj,Gj,Kj,qj,Jj,Yj,Xj,Zj,Qj,$j,eM,tM,nM,rM,iM,aM,oM,sM,cM,lM,uM,dM,fM,pM,mM,hM,gM,_M,vM,yM,bM,xM,SM,CM,wM,TM,EM,DM,OM,kM,AM,$,jM,MM,NM,PM,FM,IM,LM,RM,zM,BM,VM,HM,UM,WM,GM,KM,qM,JM,YM,XM,ZM,QM,$M,eN,tN,nN,rN,iN,aN,oN,sN,cN,lN,uN,dN,fN,pN,mN,hN,gN,_N,vN,yN,bN,xN,SN,CN,wN,TN,EN,DN,ON,kN,AN,jN,MN,NN,PN,FN,IN,LN,RN,zN,BN,VN,HN,UN,WN,GN,KN,qN,JN,YN,XN,ZN,QN,$N,eP,tP,nP,rP,iP,aP,oP,sP,cP,lP,uP,dP,fP,pP,mP,hP,gP,_P,vP,yP,bP,xP,SP,CP,wP,TP,EP,DP,OP,kP,AP,jP,MP,NP,PP,FP,IP,LP,RP,zP,BP,VP,HP,UP,WP,GP,KP,qP,JP,YP,XP,ZP,QP,$P,eF,tF,nF,rF,iF,aF,oF,sF,cF,lF,uF,dF,fF,pF,mF,hF,gF,_F,vF,yF,bF,xF,SF,CF,wF,TF,EF,DF,OF,kF,AF,jF,MF,NF,PF,FF,IF,LF,RF,zF,BF,VF,HF,UF,WF,GF,KF,qF,JF,YF,XF,ZF,QF,$F,eI,tI,nI,rI,iI,aI,oI,sI,cI,lI,uI,dI,fI,pI,mI,hI,gI,_I,vI,yI,bI,xI,SI,CI,wI,TI,EI,DI,OI,kI,AI,jI,MI,NI,PI,FI,II,LI,RI,zI,BI,VI,HI,UI,WI,GI,KI,qI,JI,YI,XI,ZI,QI,$I,eL,tL,nL,rL,iL,aL,oL,sL,cL,lL,uL,dL,fL,pL,mL,hL,gL,_L,vL,yL,bL,xL,SL,CL,wL,TL,EL,DL,OL,kL,AL,jL,ML,NL,PL,FL,IL,LL,RL,zL,BL,VL,HL,UL,WL,GL,KL,qL,JL,YL,XL,ZL,QL,$L,eR,tR,nR,rR,iR,aR,oR,sR,cR,lR,uR,dR,fR,pR,mR,hR,gR,_R,vR,yR,bR,xR,SR,CR,wR,TR,ER,DR,OR,kR,AR,jR,MR,NR,PR,FR,IR,LR,RR,zR,BR,VR,HR,UR,WR,GR,KR,qR,JR,YR,XR,ZR,QR,$R=t((()=>{me(),ue(),T(),x(),ve(),ce(),m(),sE=e(b(),1),cE=e(b(),1),w(),lE=e(b(),1),uE=e(b(),1),dE=e(b(),1),b(),fE=e(b(),1),He(),pE=e(b(),1),mE=e(b(),1),hE=e(b(),1),b(),gE=pe(),ly(),_E=e(b(),1),vE=e(b(),1),yE=e(b(),1),bE=e(b(),1),xE=e(b(),1),SE=e(b(),1),CE=e(b(),1),wE=e(b(),1),b(),TE=e(b(),1),EE=e(b(),1),DE=e(b(),1),b(),OE=e(b(),1),kE=e(b(),1),b(),AE=e(b(),1),jE=e(b(),1),b(),b(),b(),b(),ME=e(b(),1),NE=e(de(),1),PE=e(b(),1),FE=e(b(),1),IE=e(b(),1),LE=e(b(),1),de(),RE=e(b(),1),zE=e(b(),1),BE=e(b(),1),VE=e(b(),1),HE=e(b(),1),UE=e(b(),1),WE=e(b(),1),GE=e(b(),1),KE=e(b(),1),b(),b(),qE=e(b(),1),JE=e(b(),1),YE=e(b(),1),XE=e(b(),1),ZE=e(b(),1),QE=e(b(),1),$E=e(b(),1),eD=e(b(),1),b(),tD=e(b(),1),b(),b(),nD=e(b(),1),b(),rD=e(b(),1),iD=e(b(),1),b(),aD=e(b(),1),oD=e(b(),1),sD=e(b(),1),cD=e(b(),1),lD=e(b(),1),uD=e(de(),1),dD=e(b(),1),fD=e(b(),1),pD=e(b(),1),mD=e(b(),1),hD=e(de(),1),gD=e(b(),1),_D=e(b(),1),vD=e(b(),1),yD=e(b(),1),bD=e(b(),1),xD=e(b(),1),SD=e(b(),1),CD=e(b(),1),wD=e(b(),1),TD=e(b(),1),ED=e(b(),1),b(),DD=e(b(),1),OD=e(b(),1),kD=e(b(),1),AD=e(b(),1),jD=e(b(),1),b(),b(),MD=e(b(),1),ND=e(b(),1),PD=e(b(),1),FD=e(b(),1),H=e(b(),1),ID=e(b(),1),LD=e(b(),1),RD=e(b(),1),zD=e(b(),1),BD=e(b(),1),VD=e(b(),1),HD=e(b(),1),UD=e(b(),1),WD=e(b(),1),GD=e(b(),1),KD=e(b(),1),qD=e(b(),1),JD=e(b(),1),YD=e(b(),1),XD=e(b(),1),ZD=e(b(),1),QD=e(de(),1),U=e(b(),1),$D=dy(),eO=e(b(),1),tO=e(b(),1),b(),nO=e(b(),1),W=e(b(),1),rO=e(b(),1),iO=e(b(),1),aO=e(b(),1),oO=e(b(),1),sO=e(b(),1),cO=e(b(),1),lO=e(de(),1),uO=e(b(),1),dO=e(b(),1),fO=e(b(),1),pO=e(b(),1),mO=e(b(),1),hO=e(b(),1),gO=e(b(),1),_O=e(b(),1),vO=e(b(),1),yO=e(b(),1),bO=e(b(),1),xO=e(b(),1),SO=e(b(),1),CO=e(b(),1),G=e(b(),1),wO=e(b(),1),TO=e(b(),1),EO=e(b(),1),DO=e(b(),1),b(),OO=e(b(),1),kO=e(b(),1),AO=e(b(),1),Cf(),jO=e(b(),1),MO=e(b(),1),NO=e(b(),1),PO=e(b(),1),FO=e(b(),1),b(),b(),IO=e(b(),1),LO=e(b(),1),K=e(b(),1),RO=e(b(),1),zO=e(b(),1),BO=e(b(),1),VO=e(b(),1),HO=e(b(),1),UO=e(b(),1),b(),q=e(b(),1),b(),b(),b(),b(),b(),WO=e(b(),1),b(),b(),i(),J=({...e},t)=>{let n=[e.class,e.className];return delete e.class,e.className=[`sbdocs`,`sbdocs-${t}`,...n].filter(Boolean).join(` `),e},GO=({theme:e})=>({margin:`20px 0 8px`,padding:0,cursor:`text`,position:`relative`,color:e.color.defaultText,"&:first-of-type":{marginTop:0,paddingTop:0},"&:hover a.anchor":{textDecoration:`none`},"& tt, & code":{fontSize:`inherit`}}),KO=({theme:e})=>({lineHeight:1,margin:`0 2px`,padding:`3px 5px`,whiteSpace:`nowrap`,borderRadius:3,fontSize:e.typography.size.s2-1,border:e.base===`light`?`1px solid hsl(0 0 0 / 0.05)`:`1px solid hsl(0 0 100 / 0.05)`,color:e.color.defaultText,backgroundColor:e.base===`light`?`hsl(0 0 0 / 0.01)`:`hsl(0 0 100 / 0.02)`}),qO=({theme:e})=>({fontFamily:e.typography.fonts.base,fontSize:e.typography.size.s3,margin:0,WebkitFontSmoothing:`antialiased`,MozOsxFontSmoothing:`grayscale`,WebkitTapHighlightColor:`rgba(0, 0, 0, 0)`,WebkitOverflowScrolling:`touch`}),JO={margin:`16px 0`},YO=E.div(qO),XO=({href:e=``,...t})=>{let n=/^\//.test(e)?`./?path=${e}`:e,r=/^#.*/.test(e)?`_self`:`_top`;return lE.createElement(`a`,{href:n,target:r,...t})},ZO=E(XO)(({theme:e})=>({...qO({theme:e}),fontSize:`inherit`,lineHeight:`24px`,color:e.color.secondary,textDecoration:`underline`,textDecorationThickness:`0.03125rem`,textUnderlineOffset:`0.11em`,"&.absent":{color:`#cc0000`},"&.anchor":{display:`block`,paddingLeft:30,marginLeft:-30,cursor:`pointer`,position:`absolute`,top:0,left:0,bottom:0,textDecoration:`none`},"&.anchor:hover, &.anchor:focus":{textDecoration:`underline`}})),QO=E.blockquote(({theme:e})=>({...qO({theme:e}),...JO,borderLeft:`4px solid ${e.color.medium}`,padding:`0 15px`,color:e.color.dark,"& > :first-of-type":{marginTop:0},"& > :last-child":{marginBottom:0}})),$O=[],ek=null,tk=(0,dE.lazy)(async()=>{let{SyntaxHighlighter:e}=await a(async()=>{let{SyntaxHighlighter:e}=await import(`./syntaxhighlighter-OH4MV7E3-D4h-bfW0.js`);return{SyntaxHighlighter:e}},__vite__mapDeps([6,1,2,3,7,4,8,0,5]),import.meta.url);return $O.length>0&&($O.forEach(t=>{e.registerLanguage(...t)}),$O=[]),ek===null&&(ek=e),{default:t=>dE.createElement(e,{...t})}}),nk=(0,dE.lazy)(async()=>{let[{SyntaxHighlighter:e},{formatter:t}]=await Promise.all([a(()=>import(`./syntaxhighlighter-OH4MV7E3-D4h-bfW0.js`),__vite__mapDeps([6,1,2,3,7,4,8,0,5]),import.meta.url),a(()=>import(`./formatter-EIJCOSYU-B024mPvu.js`),__vite__mapDeps([9,1,2,3,5]),import.meta.url)]);return $O.length>0&&($O.forEach(t=>{e.registerLanguage(...t)}),$O=[]),ek===null&&(ek=e),{default:n=>dE.createElement(e,{...n,formatter:t})}}),rk=e=>dE.createElement(dE.Suspense,{fallback:dE.createElement(`div`,null)},e.format===!1?dE.createElement(tk,{...e}):dE.createElement(nk,{...e})),rk.registerLanguage=(...e)=>{if(ek!==null){ek.registerLanguage(...e);return}$O.push(e)},ik=e=>typeof e==`string`,ak=/[\n\r]/g,ok=E.code(({theme:e})=>({fontFamily:e.typography.fonts.mono,WebkitFontSmoothing:`antialiased`,MozOsxFontSmoothing:`grayscale`,display:`inline-block`,paddingLeft:2,paddingRight:2,verticalAlign:`baseline`,color:`inherit`,...KO({theme:e})})),sk=E(rk)(({theme:e})=>({fontFamily:e.typography.fonts.mono,fontSize:`${e.typography.size.s2-1}px`,lineHeight:`19px`,margin:`25px 0 40px`,borderRadius:e.appBorderRadius,boxShadow:e.base===`light`?`rgba(0, 0, 0, 0.10) 0 1px 3px 0`:`rgba(0, 0, 0, 0.20) 0 2px 5px 0`,"pre.prismjs":{padding:20,background:`inherit`}})),ck=({className:e,children:t,...n})=>{let r=(e||``).match(/lang-(\S+)/),i=uE.Children.toArray(t);return i.filter(ik).some(e=>e.match(ak))?uE.createElement(sk,{bordered:!0,copyable:!0,language:r?.[1]??`text`,format:!1,...n},t):uE.createElement(ok,{...n,className:e},i)},lk=E.dl(({theme:e})=>({...qO({theme:e}),...JO,padding:0,"& dt":{fontSize:`14px`,fontWeight:`bold`,fontStyle:`italic`,padding:0,margin:`16px 0 4px`},"& dt:first-of-type":{padding:0},"& dt > :first-of-type":{marginTop:0},"& dt > :last-child":{marginBottom:0},"& dd":{margin:`0 0 16px`,padding:`0 15px`},"& dd > :first-of-type":{marginTop:0},"& dd > :last-child":{marginBottom:0}})),uk=E.div(qO),dk=E.h1(({theme:e})=>({...qO({theme:e}),...GO({theme:e}),fontSize:`${e.typography.size.l1}px`,fontWeight:e.typography.weight.bold})),fk=E.h2(({theme:e})=>({...qO({theme:e}),...GO({theme:e}),fontSize:`${e.typography.size.m2}px`,paddingBottom:4,borderBottom:`1px solid ${e.appBorderColor}`})),pk=E.h3(({theme:e})=>({...qO({theme:e}),...GO({theme:e}),fontSize:`${e.typography.size.m1}px`})),mk=E.h4(({theme:e})=>({...qO({theme:e}),...GO({theme:e}),fontSize:`${e.typography.size.s3}px`})),hk=E.h5(({theme:e})=>({...qO({theme:e}),...GO({theme:e}),fontSize:`${e.typography.size.s2}px`})),gk=E.h6(({theme:e})=>({...qO({theme:e}),...GO({theme:e}),fontSize:`${e.typography.size.s2}px`,color:e.color.dark})),_k=E.hr(({theme:e})=>({border:`0 none`,borderTop:`1px solid ${e.appBorderColor}`,height:4,padding:0})),vk=E.img({maxWidth:`100%`}),yk=E.li(({theme:e})=>({...qO({theme:e}),fontSize:e.typography.size.s2,color:e.color.defaultText,lineHeight:`24px`,"& + li":{marginTop:`.25em`},"& ul, & ol":{marginTop:`.25em`,marginBottom:0},"& code":KO({theme:e})})),bk={paddingLeft:30,"& :first-of-type":{marginTop:0},"& :last-child":{marginBottom:0}},xk=E.ol(({theme:e})=>({...qO({theme:e}),...JO,...bk,listStyle:`decimal`})),Sk=E.p(({theme:e})=>({...qO({theme:e}),...JO,fontSize:e.typography.size.s2,lineHeight:`24px`,color:e.color.defaultText,"& code":KO({theme:e})})),Ck=E.pre(({theme:e})=>({...qO({theme:e}),...JO,fontFamily:e.typography.fonts.mono,WebkitFontSmoothing:`antialiased`,MozOsxFontSmoothing:`grayscale`,lineHeight:`18px`,padding:`11px 1rem`,whiteSpace:`pre-wrap`,color:`inherit`,borderRadius:3,margin:`1rem 0`,"&:not(.prismjs)":{background:`transparent`,border:`none`,borderRadius:0,padding:0,margin:0},"& pre, &.prismjs":{padding:15,margin:0,whiteSpace:`pre-wrap`,color:`inherit`,fontSize:`13px`,lineHeight:`19px`,code:{color:`inherit`,fontSize:`inherit`}},"& code":{whiteSpace:`pre`},"& code, & tt":{border:`none`}})),wk=E.span(({theme:e})=>({...qO({theme:e}),"&.frame":{display:`block`,overflow:`hidden`,"& > span":{border:`1px solid ${e.color.medium}`,display:`block`,float:`left`,overflow:`hidden`,margin:`13px 0 0`,padding:7,width:`auto`},"& span img":{display:`block`,float:`left`},"& span span":{clear:`both`,color:e.color.darkest,display:`block`,padding:`5px 0 0`}},"&.align-center":{display:`block`,overflow:`hidden`,clear:`both`,"& > span":{display:`block`,overflow:`hidden`,margin:`13px auto 0`,textAlign:`center`},"& span img":{margin:`0 auto`,textAlign:`center`}},"&.align-right":{display:`block`,overflow:`hidden`,clear:`both`,"& > span":{display:`block`,overflow:`hidden`,margin:`13px 0 0`,textAlign:`right`},"& span img":{margin:0,textAlign:`right`}},"&.float-left":{display:`block`,marginRight:13,overflow:`hidden`,float:`left`,"& span":{margin:`13px 0 0`}},"&.float-right":{display:`block`,marginLeft:13,overflow:`hidden`,float:`right`,"& > span":{display:`block`,overflow:`hidden`,margin:`13px auto 0`,textAlign:`right`}}})),Tk=E.title(KO),Ek=E.table(({theme:e})=>({...qO({theme:e}),...JO,fontSize:e.typography.size.s2,lineHeight:`24px`,padding:0,borderCollapse:`collapse`,"& tr":{borderTop:`1px solid ${e.appBorderColor}`,backgroundColor:e.appContentBg,margin:0,padding:0},"& tr:nth-of-type(2n)":{backgroundColor:e.base===`dark`?e.color.darker:e.color.lighter},"& tr th":{fontWeight:`bold`,color:e.color.defaultText,border:`1px solid ${e.appBorderColor}`,margin:0,padding:`6px 13px`},"& tr td":{border:`1px solid ${e.appBorderColor}`,color:e.color.defaultText,margin:0,padding:`6px 13px`},"& tr th :first-of-type, & tr td :first-of-type":{marginTop:0},"& tr th :last-child, & tr td :last-child":{marginBottom:0}})),Dk={paddingLeft:30,"& :first-of-type":{marginTop:0},"& :last-child":{marginBottom:0}},Ok=E.ul(({theme:e})=>({...qO({theme:e}),...JO,...Dk,listStyle:`disc`})),kk={h1:e=>cE.createElement(dk,{...J(e,`h1`)}),h2:e=>cE.createElement(fk,{...J(e,`h2`)}),h3:e=>cE.createElement(pk,{...J(e,`h3`)}),h4:e=>cE.createElement(mk,{...J(e,`h4`)}),h5:e=>cE.createElement(hk,{...J(e,`h5`)}),h6:e=>cE.createElement(gk,{...J(e,`h6`)}),pre:e=>cE.createElement(Ck,{...J(e,`pre`)}),a:e=>cE.createElement(ZO,{...J(e,`a`)}),hr:e=>cE.createElement(_k,{...J(e,`hr`)}),dl:e=>cE.createElement(lk,{...J(e,`dl`)}),blockquote:e=>cE.createElement(QO,{...J(e,`blockquote`)}),table:e=>cE.createElement(Ek,{...J(e,`table`)}),img:e=>cE.createElement(vk,{...J(e,`img`)}),div:e=>cE.createElement(uk,{...J(e,`div`)}),span:e=>cE.createElement(wk,{...J(e,`span`)}),li:e=>cE.createElement(yk,{...J(e,`li`)}),ul:e=>cE.createElement(Ok,{...J(e,`ul`)}),ol:e=>cE.createElement(xk,{...J(e,`ol`)}),p:e=>cE.createElement(Sk,{...J(e,`p`)}),code:e=>cE.createElement(ck,{...J(e,`code`)}),tt:e=>cE.createElement(Tk,{...J(e,`tt`)}),resetwrapper:e=>cE.createElement(YO,{...J(e,`resetwrapper`)})},E.div(({theme:e,compact:t})=>({display:`inline-flex`,alignItems:`center`,justifyContent:`center`,fontSize:e.typography.size.s1,fontWeight:e.typography.weight.bold,lineHeight:`12px`,minWidth:20,borderRadius:20,padding:t?`4px 7px`:`4px 10px`}),{svg:{height:12,width:12,marginRight:4,marginTop:-2,path:{fill:`currentColor`}}},({theme:e,status:t})=>{switch(t){case`critical`:return{color:e.fgColor.critical,background:e.bgColor.critical,boxShadow:`inset 0 0 0 1px ${e.borderColor.critical}`};case`negative`:return{color:e.fgColor.negative,background:e.bgColor.negative,boxShadow:`inset 0 0 0 1px ${e.borderColor.negative}`};case`warning`:return{color:e.fgColor.warning,background:e.bgColor.warning,boxShadow:`inset 0 0 0 1px ${e.borderColor.warning}`};case`neutral`:return{color:e.fgColor.muted,background:e.base===`dark`?e.barBg:e.background.app,boxShadow:`inset 0 0 0 1px ${ae(.8,e.textMutedColor)}`};case`positive`:return{color:e.fgColor.positive,background:e.bgColor.positive,boxShadow:`inset 0 0 0 1px ${e.borderColor.positive}`};case`active`:return{color:e.base===`light`?C(.1,e.color.secondary):e.color.secondary,background:e.background.hoverable,boxShadow:`inset 0 0 0 1px ${ae(.9,e.color.secondary)}`};default:return{}}}),{deprecate:Ak}=__STORYBOOK_MODULE_CLIENT_LOGGER__,jk=0,Mk=e=>e.button===jk&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey,Nk=(e,t)=>{Mk(e)&&(e.preventDefault(),t(e))},Pk=E.span(({withArrow:e})=>e?{"> svg:last-of-type":{height:`0.7em`,width:`0.7em`,marginRight:0,marginLeft:`0.25em`,bottom:`auto`,verticalAlign:`inherit`}}:{},({containsIcon:e})=>e?{svg:{height:`1em`,width:`1em`,verticalAlign:`middle`,position:`relative`,bottom:0,marginRight:0}}:{}),Fk=E.a(({theme:e})=>({display:`inline-block`,transition:`all 150ms ease-out`,textDecoration:`none`,color:e.color.secondary,"&:hover, &:focus":{cursor:`pointer`,color:C(.07,e.color.secondary),"svg path:not([fill])":{fill:C(.07,e.color.secondary)}},"&:active":{color:C(.1,e.color.secondary),"svg path:not([fill])":{fill:C(.1,e.color.secondary)}},svg:{display:`inline-block`,height:`1em`,width:`1em`,verticalAlign:`text-top`,position:`relative`,bottom:`-0.125em`,marginRight:`0.4em`,"& path":{fill:e.color.secondary}}}),({theme:e,secondary:t,tertiary:n})=>{let r;return t&&(r=[e.textMutedColor,e.color.secondary,e.color.secondary]),n&&(r=[e.color.dark,e.color.secondary,e.color.secondary]),r?{color:r[0],"svg path:not([fill])":{fill:r[0]},"&:hover":{color:r[1],"svg path:not([fill])":{fill:r[1]}},"&:active":{color:r[2],"svg path:not([fill])":{fill:r[2]}}}:{}},({nochrome:e})=>e?{color:`inherit`,"&:hover, &:active":{color:`inherit`,textDecoration:`underline`}}:{},({theme:e,inverse:t})=>t?{color:e.color.lightest,":not([fill])":{fill:e.color.lightest},"&:hover":{color:e.color.lighter,"svg path:not([fill])":{fill:e.color.lighter}},"&:active":{color:e.color.light,"svg path:not([fill])":{fill:e.color.light}}}:{},({isButton:e,theme:t})=>e?{border:0,borderRadius:t.input.borderRadius,background:`none`,padding:0,fontSize:`inherit`,lineHeight:`inherit`,"&:focus-visible":{outline:`2px solid ${t.color.secondary}`,outlineOffset:2,zIndex:`1`}}:{}),Ik=(0,fE.forwardRef)(({cancel:e=!0,children:t,onClick:n=void 0,withArrow:r=!1,containsIcon:i=!1,className:a=void 0,isButton:o=void 0,href:s,...c},l)=>(o!==void 0&&Ak("Link: `isButton` is deprecated and will be removed in Storybook 11. Links without a `href` are automatically rendered as buttons."),fE.createElement(Fk,{as:s?`a`:`button`,href:s,...c,ref:l,isButton:!s||o===!0,onClick:n&&e?e=>Nk(e,n):n,className:a},fE.createElement(Pk,{withArrow:r,containsIcon:i},t,r&&fE.createElement(Fe,null))))),Ik.displayName=`Link`,E.div(({theme:e})=>({fontSize:`${e.typography.size.s2}px`,lineHeight:`1.6`,h1:{fontSize:`${e.typography.size.l1}px`,fontWeight:e.typography.weight.bold},h2:{fontSize:`${e.typography.size.m2}px`,borderBottom:`1px solid ${e.appBorderColor}`},h3:{fontSize:`${e.typography.size.m1}px`},h4:{fontSize:`${e.typography.size.s3}px`},h5:{fontSize:`${e.typography.size.s2}px`},h6:{fontSize:`${e.typography.size.s2}px`,color:e.color.dark},"pre:not(.prismjs)":{background:`transparent`,border:`none`,borderRadius:0,padding:0,margin:0},"pre pre, pre.prismjs":{padding:15,margin:0,whiteSpace:`pre-wrap`,color:`inherit`,fontSize:`13px`,lineHeight:`19px`},"pre pre code, pre.prismjs code":{color:`inherit`,fontSize:`inherit`},"pre code":{margin:0,padding:0,whiteSpace:`pre`,border:`none`,background:`transparent`},"pre code, pre tt":{backgroundColor:`transparent`,border:`none`},"body > *:first-of-type":{marginTop:`0 !important`},"body > *:last-child":{marginBottom:`0 !important`},a:{color:e.color.secondary,textDecoration:`underline`,textDecorationThickness:`0.03125rem`,textUnderlineOffset:`0.11em`},"a.absent":{color:`#cc0000`},"a.anchor":{display:`block`,paddingLeft:30,marginLeft:-30,cursor:`pointer`,position:`absolute`,top:0,left:0,bottom:0,textDecoration:`none`},"&.anchor:hover, &.anchor:focus":{textDecoration:`underline`},"h1, h2, h3, h4, h5, h6":{margin:`20px 0 10px`,padding:0,cursor:`text`,position:`relative`,"&:first-of-type":{marginTop:0,paddingTop:0},"&:hover a.anchor":{textDecoration:`none`},"& tt, & code":{fontSize:`inherit`}},"h1:first-of-type + h2":{marginTop:0,paddingTop:0},"p, blockquote, ul, ol, dl, li, table, pre":{margin:`15px 0`},hr:{border:`0 none`,borderTop:`1px solid ${e.appBorderColor}`,height:4,padding:0},"body > h1:first-of-type, body > h2:first-of-type, body > h3:first-of-type, body > h4:first-of-type, body > h5:first-of-type, body > h6:first-of-type":{marginTop:0,paddingTop:0},"body > h1:first-of-type + h2":{marginTop:0,paddingTop:0},"a:first-of-type h1, a:first-of-type h2, a:first-of-type h3, a:first-of-type h4, a:first-of-type h5, a:first-of-type h6":{marginTop:0,paddingTop:0},"h1 p, h2 p, h3 p, h4 p, h5 p, h6 p":{marginTop:0},"li p.first":{display:`inline-block`},"ul, ol":{paddingLeft:30,"& :first-of-type":{marginTop:0},"& :last-child":{marginBottom:0}},dl:{padding:0},"dl dt":{fontSize:`14px`,fontWeight:`bold`,fontStyle:`italic`,margin:`0 0 15px`,padding:`0 15px`,"&:first-of-type":{padding:0},"& > :first-of-type":{marginTop:0},"& > :last-child":{marginBottom:0}},blockquote:{borderLeft:`4px solid ${e.color.medium}`,padding:`0 15px`,color:e.color.dark,"& > :first-of-type":{marginTop:0},"& > :last-child":{marginBottom:0}},table:{padding:0,borderCollapse:`collapse`,"& tr":{borderTop:`1px solid ${e.appBorderColor}`,backgroundColor:`white`,margin:0,padding:0,"& th":{fontWeight:`bold`,border:`1px solid ${e.appBorderColor}`,textAlign:`left`,margin:0,padding:`6px 13px`},"& td":{border:`1px solid ${e.appBorderColor}`,textAlign:`left`,margin:0,padding:`6px 13px`},"&:nth-of-type(2n)":{backgroundColor:e.color.lighter},"& th :first-of-type, & td :first-of-type":{marginTop:0},"& th :last-child, & td :last-child":{marginBottom:0}}},img:{maxWidth:`100%`},"span.frame":{display:`block`,overflow:`hidden`,"& > span":{border:`1px solid ${e.color.medium}`,display:`block`,float:`left`,overflow:`hidden`,margin:`13px 0 0`,padding:7,width:`auto`},"& span img":{display:`block`,float:`left`},"& span span":{clear:`both`,color:e.color.darkest,display:`block`,padding:`5px 0 0`}},"span.align-center":{display:`block`,overflow:`hidden`,clear:`both`,"& > span":{display:`block`,overflow:`hidden`,margin:`13px auto 0`,textAlign:`center`},"& span img":{margin:`0 auto`,textAlign:`center`}},"span.align-right":{display:`block`,overflow:`hidden`,clear:`both`,"& > span":{display:`block`,overflow:`hidden`,margin:`13px 0 0`,textAlign:`right`},"& span img":{margin:0,textAlign:`right`}},"span.float-left":{display:`block`,marginRight:13,overflow:`hidden`,float:`left`,"& span":{margin:`13px 0 0`}},"span.float-right":{display:`block`,marginLeft:13,overflow:`hidden`,float:`right`,"& > span":{display:`block`,overflow:`hidden`,margin:`13px auto 0`,textAlign:`right`}},"code, tt":{margin:`0 2px`,padding:`0 5px`,whiteSpace:`nowrap`,border:`1px solid ${e.color.mediumlight}`,backgroundColor:e.color.lighter,borderRadius:3,color:e.base===`dark`?e.color.darkest:e.color.dark}})),{deprecate:Lk}=__STORYBOOK_MODULE_CLIENT_LOGGER__,Rk=Symbol.for(`react.lazy`),zk=hE.use,Bk=_y(`Slot`),Vk=Symbol(`radix.slottable`),yy(`Slottable`),Hk=E.div(({theme:e})=>({padding:`2px 6px`,lineHeight:`16px`,fontSize:10,fontWeight:e.typography.weight.bold,color:e.color.lightest,boxShadow:`0 0 5px 0 rgba(0, 0, 0, 0.3)`,borderRadius:4,whiteSpace:`nowrap`,pointerEvents:`none`,zIndex:-1,background:e.base===`light`?`rgba(60, 60, 60, 0.9)`:`rgba(0, 0, 0, 0.95)`})),Uk=({note:e,...t})=>vE.createElement(Hk,{...t},e),{deprecate:Wk}=__STORYBOOK_MODULE_CLIENT_LOGGER__,Y=typeof document<`u`?bE.useLayoutEffect:()=>{},Gk={prefix:String(Math.round(Math.random()*1e10)),current:0},Kk=CE.createContext(Gk),qk=CE.createContext(!1),typeof window<`u`&&window.document&&window.document.createElement,Jk=new WeakMap,Yk=typeof CE.useId==`function`?Ey:Ty,Xk=!!(typeof window<`u`&&window.document&&window.document.createElement),Zk=new Map,typeof FinalizationRegistry<`u`&&(Qk=new FinalizationRegistry(e=>{Zk.delete(e)})),X=e=>e?.ownerDocument??document,$k=e=>e&&`window`in e&&e.window===e?e:X(e).defaultView||window,eA=!1,tA=(e=document)=>{var t;if(!Ly())return e.activeElement;let n=e.activeElement;for(;n&&`shadowRoot`in n&&(t=n.shadowRoot)!=null&&t.activeElement;)n=n.shadowRoot.activeElement;return n},nA=class{get currentNode(){return this._currentNode}set currentNode(e){if(!Ry(this.root,e))throw Error(`Cannot set currentNode to a node that is not contained by the root node.`);let t=[],n=e,r=e;for(this._currentNode=e;n&&n!==this.root;)if(n.nodeType===Node.DOCUMENT_FRAGMENT_NODE){let e=n,i=this._doc.createTreeWalker(e,this.whatToShow,{acceptNode:this._acceptNode});t.push(i),i.currentNode=r,this._currentSetFor.add(i),n=r=e.host}else n=n.parentNode;let i=this._doc.createTreeWalker(this.root,this.whatToShow,{acceptNode:this._acceptNode});t.push(i),i.currentNode=r,this._currentSetFor.add(i),this._walkerStack=t}get doc(){return this._doc}firstChild(){let e=this.currentNode,t=this.nextNode();return Ry(e,t)?(t&&(this.currentNode=t),t):(this.currentNode=e,null)}lastChild(){let e=this._walkerStack[0].lastChild();return e&&(this.currentNode=e),e}nextNode(){let e=this._walkerStack[0].nextNode();if(e){if(e.shadowRoot){var t;let n;if(typeof this.filter==`function`?n=this.filter(e):(t=this.filter)!=null&&t.acceptNode&&(n=this.filter.acceptNode(e)),n===NodeFilter.FILTER_ACCEPT)return this.currentNode=e,e;let r=this.nextNode();return r&&(this.currentNode=r),r}return e&&(this.currentNode=e),e}else if(this._walkerStack.length>1){this._walkerStack.shift();let e=this.nextNode();return e&&(this.currentNode=e),e}else return null}previousNode(){let e=this._walkerStack[0];if(e.currentNode===e.root){if(this._currentSetFor.has(e))if(this._currentSetFor.delete(e),this._walkerStack.length>1){this._walkerStack.shift();let e=this.previousNode();return e&&(this.currentNode=e),e}else return null;return null}let t=e.previousNode();if(t){if(t.shadowRoot){var n;let e;if(typeof this.filter==`function`?e=this.filter(t):(n=this.filter)!=null&&n.acceptNode&&(e=this.filter.acceptNode(t)),e===NodeFilter.FILTER_ACCEPT)return t&&(this.currentNode=t),t;let r=this.lastChild();return r&&(this.currentNode=r),r}return t&&(this.currentNode=t),t}else if(this._walkerStack.length>1){this._walkerStack.shift();let e=this.previousNode();return e&&(this.currentNode=e),e}else return null}nextSibling(){return null}previousSibling(){return null}parentNode(){return null}constructor(e,t,n,r){this._walkerStack=[],this._currentSetFor=new Set,this._acceptNode=e=>{if(e.nodeType===Node.ELEMENT_NODE){let n=e.shadowRoot;if(n){let e=this._doc.createTreeWalker(n,this.whatToShow,{acceptNode:this._acceptNode});return this._walkerStack.unshift(e),NodeFilter.FILTER_ACCEPT}else{var t;if(typeof this.filter==`function`)return this.filter(e);if((t=this.filter)!=null&&t.acceptNode)return this.filter.acceptNode(e);if(this.filter===null)return NodeFilter.FILTER_ACCEPT}}return NodeFilter.FILTER_SKIP},this._doc=e,this.root=t,this.filter=r??null,this.whatToShow=n??NodeFilter.SHOW_ALL,this._currentNode=t,this._walkerStack.unshift(e.createTreeWalker(t,n,this._acceptNode));let i=t.shadowRoot;if(i){let e=this._doc.createTreeWalker(i,this.whatToShow,{acceptNode:this._acceptNode});this._walkerStack.unshift(e)}}},rA=Hy,iA=new Set([`id`]),aA=new Set([`aria-label`,`aria-labelledby`,`aria-describedby`,`aria-details`]),oA=new Set([`href`,`hrefLang`,`target`,`rel`,`download`,`ping`,`referrerPolicy`]),sA=new Set([`dir`,`lang`,`hidden`,`inert`,`translate`]),cA=new Set(`onClick.onAuxClick.onContextMenu.onDoubleClick.onMouseDown.onMouseEnter.onMouseLeave.onMouseMove.onMouseOut.onMouseOver.onMouseUp.onTouchCancel.onTouchEnd.onTouchMove.onTouchStart.onPointerDown.onPointerMove.onPointerUp.onPointerCancel.onPointerEnter.onPointerLeave.onPointerOver.onPointerOut.onGotPointerCapture.onLostPointerCapture.onScroll.onWheel.onAnimationStart.onAnimationEnd.onAnimationIteration.onTransitionCancel.onTransitionEnd.onTransitionRun.onTransitionStart`.split(`.`)),lA=/^(data-.*)$/,uA=null,dA=Qy(function(){return Zy(/^Mac/i)}),fA=Qy(function(){return Zy(/^iPhone/i)}),pA=Qy(function(){return Zy(/^iPad/i)||dA()&&navigator.maxTouchPoints>1}),mA=Qy(function(){return fA()||pA()}),hA=Qy(function(){return dA()||mA()}),gA=Qy(function(){return Xy(/AppleWebKit/i)&&!_A()}),_A=Qy(function(){return Xy(/Chrome/i)}),vA=Qy(function(){return Xy(/Android/i)}),yA=Qy(function(){return Xy(/Firefox/i)}),bA=(0,wE.createContext)({isNative:!0,open:rb,useHref:e=>e}),tb.isOpening=!1,xA=new Map,SA=new Set,typeof document<`u`&&(document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,ob):ob()),CA=DE.useInsertionEffect??Y,wA=new Set([`checkbox`,`radio`,`range`,`color`,`file`,`image`,`button`,`submit`,`reset`]),typeof document<`u`&&window.visualViewport,TA=0,EA=new Map,DA=`react-aria-clear-focus`,OA=`react-aria-focus`,kA=typeof Element<`u`&&`checkVisibility`in Element.prototype,AA=[`input:not([disabled]):not([type=hidden])`,`select:not([disabled])`,`textarea:not([disabled])`,`button:not([disabled])`,`a[href]`,`area[href]`,`summary`,`iframe`,`object`,`embed`,`audio[controls]`,`video[controls]`,`[contenteditable]:not([contenteditable^="false"])`,`permission`],jA=AA.join(`:not([hidden]),`)+`,[tabindex]:not([disabled]):not([hidden])`,AA.push(`[tabindex]:not([tabindex="-1"]):not([disabled])`),MA=AA.join(`:not([hidden]):not([tabindex="-1"]),`),NA=typeof document<`u`?FE.useInsertionEffect??FE.useLayoutEffect:()=>{},PA=!1,FA=`default`,IA=``,LA=new WeakMap,RA=LE.createContext({register:()=>{}}),RA.displayName=`PressResponderContext`,zA=new WeakMap,BA=class{continuePropagation(){$b(this,zA,!1)}get shouldStopPropagation(){return Yb(this,zA)}constructor(e,t,n,r){Zb(this,zA,{writable:!0,value:void 0}),$b(this,zA,!0);let i=(r?.target??n.currentTarget)?.getBoundingClientRect(),a,o=0,s,c=null;n.clientX!=null&&n.clientY!=null&&(s=n.clientX,c=n.clientY),i&&(s!=null&&c!=null?(a=s-i.left,o=c-i.top):(a=i.width/2,o=i.height/2)),this.type=e,this.pointerType=t,this.target=n.currentTarget,this.shiftKey=n.shiftKey,this.metaKey=n.metaKey,this.ctrlKey=n.ctrlKey,this.altKey=n.altKey,this.x=a,this.y=o}},VA=Symbol(`linkClicked`),HA=`react-aria-pressable-style`,UA=`data-react-aria-pressable`,WA=new Set([`checkbox`,`radio`,`range`,`color`,`file`,`image`,`button`,`submit`,`reset`]),GA=null,KA=new Set,qA=new Map,JA=!1,YA=!1,XA={Tab:!0,Escape:!0},ZA=(e,t)=>{let n=$k(e),r=X(e);t&&r.removeEventListener(`DOMContentLoaded`,t),qA.has(n)&&(n.HTMLElement.prototype.focus=qA.get(n).focus,r.removeEventListener(`keydown`,ux,!0),r.removeEventListener(`keyup`,ux,!0),r.removeEventListener(`click`,fx,!0),n.removeEventListener(`focus`,px,!0),n.removeEventListener(`blur`,mx,!1),typeof PointerEvent<`u`&&(r.removeEventListener(`pointerdown`,dx,!0),r.removeEventListener(`pointermove`,dx,!0),r.removeEventListener(`pointerup`,dx,!0)),qA.delete(n))},typeof document<`u`&&gx(),QA=new Set([`checkbox`,`radio`,`range`,`color`,`file`,`image`,`button`,`submit`,`reset`]),$A=VE.createContext(null),ej=VE.forwardRef(function(e,t){let{children:n,...r}=e,i=db(t),a={...r,ref:i};return VE.createElement($A.Provider,{value:a},n)}),tj=(0,VE.forwardRef)(({children:e,...t},n)=>{n=db(n);let{focusableProps:r}=Dx(t,n),i=VE.Children.only(e);(0,VE.useEffect)(()=>{},[n,t.isDisabled]);let a=i.props.ref;return VE.cloneElement(i,{...B(r,i.props),ref:Uy(a,n)})}),nj=HE.forwardRef(({children:e,...t},n)=>{n=db(n);let{pressProps:r}=tx({...t,ref:n}),{focusableProps:i}=Dx(t,n),a=HE.Children.only(e);(0,HE.useEffect)(()=>{},[n,t.isDisabled]);let o=a.props.ref;return HE.cloneElement(a,{...B(r,i,a.props),ref:Uy(o,n)})}),rj=UE.forwardRef(({children:e,...t},n)=>{let r=(0,UE.useRef)(!1),i=(0,UE.useContext)(RA);n=db(n||i?.ref);let a=B(i||{},{...t,ref:n,register(){r.current=!0,i&&i.register()}});return gb(i,n),(0,UE.useEffect)(()=>{r.current||=!0},[]),UE.createElement(RA.Provider,{value:a},e)}),ij=!1,aj=0,oj=500,sj=Symbol(`default`),cj=(0,YE.createContext)({placement:`bottom`}),(0,YE.forwardRef)(function(e,t){[e,t]=Bx(e,t,cj);let n=e.placement,r={position:`absolute`,transform:n===`top`||n===`bottom`?`translateX(-50%)`:`translateY(-50%)`};n!=null&&(r[n]=`100%`);let i=Rx({...e,defaultClassName:`react-aria-OverlayArrow`,values:{placement:n}});i.style&&Object.keys(i.style).forEach(e=>i.style[e]===void 0&&delete i.style[e]);let a=Gy(e);return YE.createElement(`div`,{...a,...i,style:{...r,...i.style},ref:t,"data-placement":n})}),lj={top:`top`,bottom:`top`,left:`left`,right:`left`},uj={top:`bottom`,bottom:`top`,left:`right`,right:`left`},dj={top:`left`,left:`top`},fj={top:`height`,left:`width`},pj={width:`totalWidth`,height:`totalHeight`},mj={},hj=typeof document<`u`?window.visualViewport:null,gj=new WeakMap,_j=new Set([`Arab`,`Syrc`,`Samr`,`Mand`,`Thaa`,`Mend`,`Nkoo`,`Adlm`,`Rohg`,`Hebr`]),vj=new Set([`ae`,`ar`,`arc`,`bcc`,`bqi`,`ckb`,`dv`,`fa`,`glk`,`he`,`ku`,`mzn`,`nqo`,`pnb`,`ps`,`sd`,`ug`,`ur`,`yi`]),yj=Symbol.for(`react-aria.i18n.locale`),bj=sS(),xj=new Set,Sj=eD.createContext(null),Cj=function(e,t){return Cj=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},Cj(e,t)},Z=function(){return Z=Object.assign||function(e){for(var t,n=1,r=arguments.length;nr;){if(i=e[r++],i>1114111)throw RangeError(i+` is not a valid code point`);t+=i<65536?String.fromCharCode(i):String.fromCharCode(((i-=65536)>>10)+55296,i%1024+56320)}return t}),Zj=Hj?Object.fromEntries:(function(e){for(var t={},n=0,r=e;n=n)){var r=e.charCodeAt(t),i;return r<55296||r>56319||t+1===n||(i=e.charCodeAt(t+1))<56320||i>57343?r:(r-55296<<10)+(i-56320)+65536}}),$j=Wj?(function(e){return e.trimStart()}):(function(e){return e.replace(Rj,``)}),eM=Gj?(function(e){return e.trimEnd()}):(function(e){return e.replace(zj,``)}),qj?(nM=US(`([^\\p{White_Space}\\p{Pattern_Syntax}]*)`,`yu`),tM=function(e,t){return nM.lastIndex=t,nM.exec(e)[1]??``}):tM=function(e,t){for(var n=[];;){var r=Qj(e,t);if(r===void 0||qS(r)||JS(r))break;n.push(r),t+=r>=65536?2:1}return Xj.apply(void 0,n)},rM=(function(){function e(e,t){t===void 0&&(t={}),this.message=e,this.position={offset:0,line:1,column:1},this.ignoreTag=!!t.ignoreTag,this.locale=t.locale,this.requiresOtherClause=!!t.requiresOtherClause,this.shouldParseSkeletons=!!t.shouldParseSkeletons}return e.prototype.parse=function(){if(this.offset()!==0)throw Error(`parser can only be used once`);return this.parseMessage(0,``,!1)},e.prototype.parseMessage=function(e,t,n){for(var r=[];!this.isEOF();){var i=this.char();if(i===123){var a=this.parseArgument(e,n);if(a.err)return a;r.push(a.val)}else{if(i===125&&e>0)break;if(i===35&&(t===`plural`||t===`selectordinal`)){var o=this.clonePosition();this.bump(),r.push({type:Oj.pound,location:V(o,this.clonePosition())})}else if(i===60&&!this.ignoreTag&&this.peek()===47){if(n)break;return this.error(Q.UNMATCHED_CLOSING_TAG,V(this.clonePosition(),this.clonePosition()))}else if(i===60&&!this.ignoreTag&&WS(this.peek()||0)){var a=this.parseTag(e,t);if(a.err)return a;r.push(a.val)}else{var a=this.parseLiteral(e,t);if(a.err)return a;r.push(a.val)}}}return{val:r,err:null}},e.prototype.parseTag=function(e,t){var n=this.clonePosition();this.bump();var r=this.parseTagName();if(this.bumpSpace(),this.bumpIf(`/>`))return{val:{type:Oj.literal,value:`<${r}/>`,location:V(n,this.clonePosition())},err:null};if(this.bumpIf(`>`)){var i=this.parseMessage(e+1,t,!0);if(i.err)return i;var a=i.val,o=this.clonePosition();if(this.bumpIf(``)?{val:{type:Oj.tag,value:r,children:a,location:V(n,this.clonePosition())},err:null}:this.error(Q.INVALID_TAG,V(o,this.clonePosition()))):this.error(Q.UNMATCHED_CLOSING_TAG,V(s,this.clonePosition()))}else return this.error(Q.UNCLOSED_TAG,V(n,this.clonePosition()))}else return this.error(Q.INVALID_TAG,V(n,this.clonePosition()))},e.prototype.parseTagName=function(){var e=this.offset();for(this.bump();!this.isEOF()&&KS(this.char());)this.bump();return this.message.slice(e,this.offset())},e.prototype.parseLiteral=function(e,t){for(var n=this.clonePosition(),r=``;;){var i=this.tryParseQuote(t);if(i){r+=i;continue}var a=this.tryParseUnquoted(e,t);if(a){r+=a;continue}var o=this.tryParseLeftAngleBracket();if(o){r+=o;continue}break}var s=V(n,this.clonePosition());return{val:{type:Oj.literal,value:r,location:s},err:null}},e.prototype.tryParseLeftAngleBracket=function(){return!this.isEOF()&&this.char()===60&&(this.ignoreTag||!GS(this.peek()||0))?(this.bump(),`<`):null},e.prototype.tryParseQuote=function(e){if(this.isEOF()||this.char()!==39)return null;switch(this.peek()){case 39:return this.bump(),this.bump(),`'`;case 123:case 60:case 62:case 125:break;case 35:if(e===`plural`||e===`selectordinal`)break;return null;default:return null}this.bump();var t=[this.char()];for(this.bump();!this.isEOF();){var n=this.char();if(n===39)if(this.peek()===39)t.push(39),this.bump();else{this.bump();break}else t.push(n);this.bump()}return Xj.apply(void 0,t)},e.prototype.tryParseUnquoted=function(e,t){if(this.isEOF())return null;var n=this.char();return n===60||n===123||n===35&&(t===`plural`||t===`selectordinal`)||n===125&&e>0?null:(this.bump(),Xj(n))},e.prototype.parseArgument=function(e,t){var n=this.clonePosition();if(this.bump(),this.bumpSpace(),this.isEOF())return this.error(Q.EXPECT_ARGUMENT_CLOSING_BRACE,V(n,this.clonePosition()));if(this.char()===125)return this.bump(),this.error(Q.EMPTY_ARGUMENT,V(n,this.clonePosition()));var r=this.parseIdentifierIfPossible().value;if(!r)return this.error(Q.MALFORMED_ARGUMENT,V(n,this.clonePosition()));if(this.bumpSpace(),this.isEOF())return this.error(Q.EXPECT_ARGUMENT_CLOSING_BRACE,V(n,this.clonePosition()));switch(this.char()){case 125:return this.bump(),{val:{type:Oj.argument,value:r,location:V(n,this.clonePosition())},err:null};case 44:return this.bump(),this.bumpSpace(),this.isEOF()?this.error(Q.EXPECT_ARGUMENT_CLOSING_BRACE,V(n,this.clonePosition())):this.parseArgumentOptions(e,t,r,n);default:return this.error(Q.MALFORMED_ARGUMENT,V(n,this.clonePosition()))}},e.prototype.parseIdentifierIfPossible=function(){var e=this.clonePosition(),t=this.offset(),n=tM(this.message,t),r=t+n.length;return this.bumpTo(r),{value:n,location:V(e,this.clonePosition())}},e.prototype.parseArgumentOptions=function(e,t,n,r){var i=this.clonePosition(),a=this.parseIdentifierIfPossible().value,o=this.clonePosition();switch(a){case``:return this.error(Q.EXPECT_ARGUMENT_TYPE,V(i,o));case`number`:case`date`:case`time`:this.bumpSpace();var s=null;if(this.bumpIf(`,`)){this.bumpSpace();var c=this.clonePosition(),l=this.parseSimpleArgStyleIfPossible();if(l.err)return l;var u=eM(l.val);if(u.length===0)return this.error(Q.EXPECT_ARGUMENT_STYLE,V(this.clonePosition(),this.clonePosition()));s={style:u,styleLocation:V(c,this.clonePosition())}}var d=this.tryParseArgumentClose(r);if(d.err)return d;var f=V(r,this.clonePosition());if(s&&Yj(s?.style,`::`,0)){var p=$j(s.style.slice(2));if(a===`number`){var l=this.parseNumberSkeletonFromString(p,s.styleLocation);return l.err?l:{val:{type:Oj.number,value:n,location:f,style:l.val},err:null}}else{if(p.length===0)return this.error(Q.EXPECT_DATE_TIME_SKELETON,f);var m=p;this.locale&&(m=VS(p,this.locale));var u={type:kj.dateTime,pattern:m,location:s.styleLocation,parsedOptions:this.shouldParseSkeletons?NS(m):{}};return{val:{type:a===`date`?Oj.date:Oj.time,value:n,location:f,style:u},err:null}}}return{val:{type:a===`number`?Oj.number:a===`date`?Oj.date:Oj.time,value:n,location:f,style:s?.style??null},err:null};case`plural`:case`selectordinal`:case`select`:var h=this.clonePosition();if(this.bumpSpace(),!this.bumpIf(`,`))return this.error(Q.EXPECT_SELECT_ARGUMENT_OPTIONS,V(h,Z({},h)));this.bumpSpace();var g=this.parseIdentifierIfPossible(),_=0;if(a!==`select`&&g.value===`offset`){if(!this.bumpIf(`:`))return this.error(Q.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE,V(this.clonePosition(),this.clonePosition()));this.bumpSpace();var l=this.tryParseDecimalInteger(Q.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE,Q.INVALID_PLURAL_ARGUMENT_OFFSET_VALUE);if(l.err)return l;this.bumpSpace(),g=this.parseIdentifierIfPossible(),_=l.val}var v=this.tryParsePluralOrSelectOptions(e,a,t,g);if(v.err)return v;var d=this.tryParseArgumentClose(r);if(d.err)return d;var y=V(r,this.clonePosition());return a===`select`?{val:{type:Oj.select,value:n,options:Zj(v.val),location:y},err:null}:{val:{type:Oj.plural,value:n,options:Zj(v.val),offset:_,pluralType:a===`plural`?`cardinal`:`ordinal`,location:y},err:null};default:return this.error(Q.INVALID_ARGUMENT_TYPE,V(i,o))}},e.prototype.tryParseArgumentClose=function(e){return this.isEOF()||this.char()!==125?this.error(Q.EXPECT_ARGUMENT_CLOSING_BRACE,V(e,this.clonePosition())):(this.bump(),{val:!0,err:null})},e.prototype.parseSimpleArgStyleIfPossible=function(){for(var e=0,t=this.clonePosition();!this.isEOF();)switch(this.char()){case 39:this.bump();var n=this.clonePosition();if(!this.bumpUntil(`'`))return this.error(Q.UNCLOSED_QUOTE_IN_ARGUMENT_STYLE,V(n,this.clonePosition()));this.bump();break;case 123:e+=1,this.bump();break;case 125:if(e>0)--e;else return{val:this.message.slice(t.offset,this.offset()),err:null};break;default:this.bump();break}return{val:this.message.slice(t.offset,this.offset()),err:null}},e.prototype.parseNumberSkeletonFromString=function(e,t){var n=[];try{n=PS(e)}catch{return this.error(Q.INVALID_NUMBER_SKELETON,t)}return{val:{type:kj.number,tokens:n,location:t,parsedOptions:this.shouldParseSkeletons?BS(n):{}},err:null}},e.prototype.tryParsePluralOrSelectOptions=function(e,t,n,r){for(var i,a=!1,o=[],s=new Set,c=r.value,l=r.location;;){if(c.length===0){var u=this.clonePosition();if(t!==`select`&&this.bumpIf(`=`)){var d=this.tryParseDecimalInteger(Q.EXPECT_PLURAL_ARGUMENT_SELECTOR,Q.INVALID_PLURAL_ARGUMENT_SELECTOR);if(d.err)return d;l=V(u,this.clonePosition()),c=this.message.slice(u.offset,this.offset())}else break}if(s.has(c))return this.error(t===`select`?Q.DUPLICATE_SELECT_ARGUMENT_SELECTOR:Q.DUPLICATE_PLURAL_ARGUMENT_SELECTOR,l);c===`other`&&(a=!0),this.bumpSpace();var f=this.clonePosition();if(!this.bumpIf(`{`))return this.error(t===`select`?Q.EXPECT_SELECT_ARGUMENT_SELECTOR_FRAGMENT:Q.EXPECT_PLURAL_ARGUMENT_SELECTOR_FRAGMENT,V(this.clonePosition(),this.clonePosition()));var p=this.parseMessage(e+1,t,n);if(p.err)return p;var m=this.tryParseArgumentClose(f);if(m.err)return m;o.push([c,{value:p.val,location:V(f,this.clonePosition())}]),s.add(c),this.bumpSpace(),i=this.parseIdentifierIfPossible(),c=i.value,l=i.location}return o.length===0?this.error(t===`select`?Q.EXPECT_SELECT_ARGUMENT_SELECTOR:Q.EXPECT_PLURAL_ARGUMENT_SELECTOR,V(this.clonePosition(),this.clonePosition())):this.requiresOtherClause&&!a?this.error(Q.MISSING_OTHER_CLAUSE,V(this.clonePosition(),this.clonePosition())):{val:o,err:null}},e.prototype.tryParseDecimalInteger=function(e,t){var n=1,r=this.clonePosition();this.bumpIf(`+`)||this.bumpIf(`-`)&&(n=-1);for(var i=!1,a=0;!this.isEOF();){var o=this.char();if(o>=48&&o<=57)i=!0,a=a*10+(o-48),this.bump();else break}var s=V(r,this.clonePosition());return i?(a*=n,Kj(a)?{val:a,err:null}:this.error(t,s)):this.error(e,s)},e.prototype.offset=function(){return this.position.offset},e.prototype.isEOF=function(){return this.offset()===this.message.length},e.prototype.clonePosition=function(){return{offset:this.position.offset,line:this.position.line,column:this.position.column}},e.prototype.char=function(){var e=this.position.offset;if(e>=this.message.length)throw Error(`out of bound`);var t=Qj(this.message,e);if(t===void 0)throw Error(`Offset ${e} is at invalid UTF-16 code unit boundary`);return t},e.prototype.error=function(e,t){return{val:null,err:{kind:e,message:this.message,location:t}}},e.prototype.bump=function(){if(!this.isEOF()){var e=this.char();e===10?(this.position.line+=1,this.position.column=1,this.position.offset+=1):(this.position.column+=1,this.position.offset+=e<65536?1:2)}},e.prototype.bumpIf=function(e){if(Yj(this.message,e,this.offset())){for(var t=0;t=0?(this.bumpTo(n),!0):(this.bumpTo(this.message.length),!1)},e.prototype.bumpTo=function(e){if(this.offset()>e)throw Error(`targetOffset ${e} must be greater than or equal to the current offset ${this.offset()}`);for(e=Math.min(e,this.message.length);;){var t=this.offset();if(t===e)break;if(t>e)throw Error(`targetOffset ${e} is at invalid UTF-16 code unit boundary`);if(this.bump(),this.isEOF())break}},e.prototype.bumpSpace=function(){for(;!this.isEOF()&&qS(this.char());)this.bump()},e.prototype.peek=function(){if(this.isEOF())return null;var e=this.char(),t=this.offset();return this.message.charCodeAt(t+(e>=65536?2:1))??null},e})(),(function(e){e.MISSING_VALUE=`MISSING_VALUE`,e.INVALID_VALUE=`INVALID_VALUE`,e.MISSING_INTL_API=`MISSING_INTL_API`})(iM||={}),aM=(function(e){dS(t,e);function t(t,n,r){var i=e.call(this,t)||this;return i.code=n,i.originalMessage=r,i}return t.prototype.toString=function(){return`[formatjs Error: ${this.code}] ${this.message}`},t})(Error),oM=(function(e){dS(t,e);function t(t,n,r,i){return e.call(this,`Invalid values for "${t}": "${n}". Options are "${Object.keys(r).join(`", "`)}"`,iM.INVALID_VALUE,i)||this}return t})(aM),sM=(function(e){dS(t,e);function t(t,n,r){return e.call(this,`Value for "${t}" must be of type ${n}`,iM.INVALID_VALUE,r)||this}return t})(aM),cM=(function(e){dS(t,e);function t(t,n){return e.call(this,`The intl string context variable "${t}" was not provided to the string "${n}"`,iM.MISSING_VALUE,n)||this}return t})(aM),(function(e){e[e.literal=0]=`literal`,e[e.object=1]=`object`})(lM||={}),(function(){function e(t,n,r,i){n===void 0&&(n=e.defaultLocale);var a=this;if(this.formatterCache={number:{},dateTime:{},pluralRules:{}},this.format=function(e){var t=a.formatToParts(e);if(t.length===1)return t[0].value;var n=t.reduce(function(e,t){return!e.length||t.type!==lM.literal||typeof e[e.length-1]!=`string`?e.push(t.value):e[e.length-1]+=t.value,e},[]);return n.length<=1?n[0]||``:n},this.formatToParts=function(e){return $S(a.ast,a.locales,a.formatters,a.formats,e,void 0,a.message)},this.resolvedOptions=function(){return{locale:a.resolvedLocale?.toString()||Intl.NumberFormat.supportedLocalesOf(a.locales)[0]}},this.getAst=function(){return a.ast},this.locales=n,this.resolvedLocale=e.resolveLocale(n),typeof t==`string`){if(this.message=t,!e.__parse)throw TypeError("IntlMessageFormat.__parse must be set to process `message` of type `string`");var o=i||{};o.formatters;var s=fS(o,[`formatters`]);this.ast=e.__parse(t,Z(Z({},s),{locale:this.resolvedLocale}))}else this.ast=t;if(!Array.isArray(this.ast))throw TypeError(`A message must be provided as a String or AST.`);this.formats=tC(e.formats,r),this.formatters=i&&i.formatters||rC(this.formatterCache)}return Object.defineProperty(e,`defaultLocale`,{get:function(){return e.memoizedDefaultLocale||=new Intl.NumberFormat().resolvedOptions().locale,e.memoizedDefaultLocale},enumerable:!1,configurable:!0}),e.memoizedDefaultLocale=null,e.resolveLocale=function(e){if(!(typeof Intl.Locale>`u`)){var t=Intl.NumberFormat.supportedLocalesOf(e);return t.length>0?new Intl.Locale(t[0]):new Intl.Locale(typeof e==`string`?e:e[0])}},e.__parse=XS,e.formats={number:{integer:{maximumFractionDigits:0},currency:{style:`currency`},percent:{style:`percent`}},date:{short:{month:`numeric`,day:`numeric`,year:`2-digit`},medium:{month:`short`,day:`numeric`,year:`numeric`},long:{month:`long`,day:`numeric`,year:`numeric`},full:{weekday:`long`,month:`long`,day:`numeric`,year:`numeric`}},time:{short:{hour:`numeric`,minute:`numeric`},medium:{hour:`numeric`,minute:`numeric`,second:`numeric`},long:{hour:`numeric`,minute:`numeric`,second:`numeric`,timeZoneName:`short`},full:{hour:`numeric`,minute:`numeric`,second:`numeric`,timeZoneName:`short`}}},e})(),uM=Symbol.for(`react-aria.i18n.locale`),dM=Symbol.for(`react-aria.i18n.strings`),pM=class e{getStringForLocale(e,t){let n=this.getStringsForLocale(t)[e];if(!n)throw Error(`Could not find intl message ${e} in ${t} locale`);return n}getStringsForLocale(e){let t=this.strings[e];return t||(t=iC(e,this.strings,this.defaultLocale),this.strings[e]=t),t}static getGlobalDictionaryForPackage(t){if(typeof window>`u`)return null;let n=window[uM];if(fM===void 0){let t=window[dM];if(!t)return null;fM={};for(let r in t)fM[r]=new e({[n]:t[r]},n)}let r=fM?.[t];if(!r)throw Error(`Strings for package "${t}" were not included by LocalizedStringProvider. Please add it to the list passed to createLocalizedStringDictionary.`);return r}constructor(e,t=`en-US`){this.strings=Object.fromEntries(Object.entries(e).filter(([,e])=>e)),this.defaultLocale=t}},mM=new Map,hM=new Map,gM=class{format(e,t){let n=this.strings.getStringForLocale(e,this.locale);return typeof n==`function`?n(t,this):n}plural(e,t,n=`cardinal`){let r=t[`=`+e];if(r)return typeof r==`function`?r():r;let i=this.locale+`:`+n,a=mM.get(i);return a||(a=new Intl.PluralRules(this.locale,{type:n}),mM.set(i,a)),r=t[a.select(e)]||t.other,typeof r==`function`?r():r}number(e){let t=hM.get(this.locale);return t||(t=new Intl.NumberFormat(this.locale),hM.set(this.locale,t)),t.format(e)}select(e,t){let n=e[t]||e.other;return typeof n==`function`?n():n}constructor(e,t){this.locale=e,this.strings=t}},_M=new WeakMap,vM=1080,yM=24*vM,bM=29,xM=12*vM+793,bM*yM+xM,SM=new Map,CM=!1;try{CM=new Intl.NumberFormat(`de-DE`,{signDisplay:`exceptZero`}).resolvedOptions().signDisplay===`exceptZero`}catch{}wM=!1;try{wM=new Intl.NumberFormat(`de-DE`,{style:`unit`,unit:`degree`}).resolvedOptions().style===`unit`}catch{}if(TM={degree:{narrow:{default:`°`,"ja-JP":` 度`,"zh-TW":`度`,"sl-SI":` °`}}},EM=class{format(e){let t=``;if(t=!CM&&this.options.signDisplay!=null?uC(this.numberFormatter,this.options.signDisplay,e):this.numberFormatter.format(e),this.options.style===`unit`&&!wM){let{unit:e,unitDisplay:n=`short`,locale:r}=this.resolvedOptions();if(!e)return t;let i=TM[e]?.[n];t+=i[r]||i.default}return t}formatToParts(e){return this.numberFormatter.formatToParts(e)}formatRange(e,t){if(typeof this.numberFormatter.formatRange==`function`)return this.numberFormatter.formatRange(e,t);if(t= start date`);return`${this.format(e)} \u2013 ${this.format(t)}`}formatRangeToParts(e,t){if(typeof this.numberFormatter.formatRangeToParts==`function`)return this.numberFormatter.formatRangeToParts(e,t);if(t= start date`);let n=this.numberFormatter.formatToParts(e),r=this.numberFormatter.formatToParts(t);return[...n.map(e=>({...e,source:`startRange`})),{type:`literal`,value:` – `,source:`shared`},...r.map(e=>({...e,source:`endRange`}))]}resolvedOptions(){let e=this.numberFormatter.resolvedOptions();return!CM&&this.options.signDisplay!=null&&(e={...e,signDisplay:this.options.signDisplay}),!wM&&this.options.style===`unit`&&(e={...e,style:`unit`,unit:this.options.unit,unitDisplay:this.options.unitDisplay}),e}constructor(e,t={}){this.numberFormatter=lC(e,t),this.options=t}},DM=new Map,OM=typeof document<`u`?window.visualViewport:null,kM=rD.createContext(null),AM=`react-aria-focus-scope-restore`,$=null,jM=class e{get size(){return this.fastMap.size}getTreeNode(e){return this.fastMap.get(e)}addTreeNode(e,t,n){let r=this.fastMap.get(t??null);if(!r)return;let i=new MM({scopeRef:e});r.addChild(i),i.parent=r,this.fastMap.set(e,i),n&&(i.nodeToRestore=n)}addNode(e){this.fastMap.set(e.scopeRef,e)}removeTreeNode(e){if(e===null)return;let t=this.fastMap.get(e);if(!t)return;let n=t.parent;for(let e of this.traverse())e!==t&&t.nodeToRestore&&e.nodeToRestore&&t.scopeRef&&t.scopeRef.current&&CC(e.nodeToRestore,t.scopeRef.current)&&(e.nodeToRestore=t.nodeToRestore);let r=t.children;n&&(n.removeChild(t),r.size>0&&r.forEach(e=>n&&n.addChild(e))),this.fastMap.delete(t.scopeRef)}*traverse(e=this.root){if(e.scopeRef!=null&&(yield e),e.children.size>0)for(let t of e.children)yield*this.traverse(t)}clone(){let t=new e;for(let e of this.traverse())t.addTreeNode(e.scopeRef,e.parent?.scopeRef??null,e.nodeToRestore);return t}constructor(){this.fastMap=new Map,this.root=new MM({scopeRef:null}),this.fastMap.set(null,this.root)}},MM=class{addChild(e){this.children.add(e),e.parent=this}removeChild(e){this.children.delete(e),e.parent=void 0}constructor(e){this.children=new Set,this.contain=!1,this.scopeRef=e.scopeRef}},NM=new jM,PM=[],FM=typeof document<`u`&&window.visualViewport,IM=0,RM=(0,cD.createContext)({}),zM=lD.createContext(null),BM={},BM={dismiss:`تجاهل`},VM={},VM={dismiss:`Отхвърляне`},HM={},HM={dismiss:`Odstranit`},UM={},UM={dismiss:`Luk`},WM={},WM={dismiss:`Schließen`},GM={},GM={dismiss:`Απόρριψη`},KM={},KM={dismiss:`Dismiss`},qM={},qM={dismiss:`Descartar`},JM={},JM={dismiss:`Lõpeta`},YM={},YM={dismiss:`Hylkää`},XM={},XM={dismiss:`Rejeter`},ZM={},ZM={dismiss:`התעלם`},QM={},QM={dismiss:`Odbaci`},$M={},$M={dismiss:`Elutasítás`},eN={},eN={dismiss:`Ignora`},tN={},tN={dismiss:`閉じる`},nN={},nN={dismiss:`무시`},rN={},rN={dismiss:`Atmesti`},iN={},iN={dismiss:`Nerādīt`},aN={},aN={dismiss:`Lukk`},oN={},oN={dismiss:`Negeren`},sN={},sN={dismiss:`Zignoruj`},cN={},cN={dismiss:`Descartar`},lN={},lN={dismiss:`Dispensar`},uN={},uN={dismiss:`Revocare`},dN={},dN={dismiss:`Пропустить`},fN={},fN={dismiss:`Zrušiť`},pN={},pN={dismiss:`Opusti`},mN={},mN={dismiss:`Odbaci`},hN={},hN={dismiss:`Avvisa`},gN={},gN={dismiss:`Kapat`},_N={},_N={dismiss:`Скасувати`},vN={},vN={dismiss:`取消`},yN={},yN={dismiss:`關閉`},bN={},bN={"ar-AE":BM,"bg-BG":VM,"cs-CZ":HM,"da-DK":UM,"de-DE":WM,"el-GR":GM,"en-US":KM,"es-ES":qM,"et-EE":JM,"fi-FI":YM,"fr-FR":XM,"he-IL":ZM,"hr-HR":QM,"hu-HU":$M,"it-IT":eN,"ja-JP":tN,"ko-KR":nN,"lt-LT":rN,"lv-LV":iN,"nb-NO":aN,"nl-NL":oN,"pl-PL":sN,"pt-BR":cN,"pt-PT":lN,"ro-RO":uN,"ru-RU":dN,"sk-SK":fN,"sl-SI":pN,"sr-SP":mN,"sv-SE":hN,"tr-TR":gN,"uk-UA":_N,"zh-CN":vN,"zh-TW":yN},xN={border:0,clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:`1px`,margin:`-1px`,overflow:`hidden`,padding:0,position:`absolute`,width:`1px`,whiteSpace:`nowrap`},SN=typeof HTMLElement<`u`&&`inert`in HTMLElement.prototype,CN=new WeakMap,wN=[],TN=mD.createContext(null),EN=1500,DN=500,ON={},kN=0,AN=!1,jN=null,MN=null,NN=(0,yD.createContext)(null),PN=(0,yD.createContext)(null),FN=(0,yD.forwardRef)(function({UNSTABLE_portalContainer:e,...t},n){[t,n]=Bx(t,n,PN);let r=(0,yD.useContext)(NN),i=gw(t),a=t.isOpen!=null||t.defaultOpen!=null||!r?i:r,o=jb(n,a.isOpen)||t.isExiting||!1;return!a.isOpen&&!o?null:yD.createElement(iw,{portalContainer:e},yD.createElement(vw,{...t,tooltipRef:n,isExiting:o}))}),IN=h(oe(),1),LN=(0,IN.default)(1e3)(e=>e===`left-end`?`left bottom`:e===`right-end`?`right bottom`:e===`left-start`?`left top`:e===`right-start`?`right top`:e.replace(`-`,` `)),E.div({width:500,height:500,paddingTop:100,overflowY:`scroll`,background:`#eee`,position:`relative`}),RN=(0,bD.forwardRef)((e,t)=>bD.createElement(`button`,{...e,ref:t,style:{width:120,height:50,margin:10}})),RN.displayName=`Trigger`,zN=({triggerOnFocusOnly:e=!1,placement:t=`top`,offset:n=8,tooltip:r,children:i,defaultVisible:a,startOpen:o,delayShow:s=400,delayHide:c=200,visible:l,onVisibleChange:u,...d})=>{let f=LN(t),p=yE.Children.only(i);o!==void 0&&Wk("The `startOpen` prop is deprecated. Please use `defaultVisible` instead.");let[m,h]=(0,yE.useState)(a??o??!1),g=(0,yE.useCallback)(e=>{h(e),u?.(e)},[u]);return yE.createElement(_w,{delay:s,closeDelay:c,isOpen:l??m,onOpenChange:g,trigger:e?`focus`:void 0,...d},yE.createElement(tj,null,yE.cloneElement(p,{"aria-describedby":null})),yE.createElement(FN,{"data-testid":`tooltip`,placement:f,offset:n,onOpenChange:g,style:{outline:`none`},...d},r))},BN=({children:e,disableAllTooltips:t,shortcut:n,tooltip:r})=>{let i=(0,_E.useMemo)(()=>{let e=document?.body?.getAttribute(`data-shortcuts-enabled`)!==`false`;if(!(!r&&(!n||!e)))return[r,n&&e&&`[${v_(n)}]`].filter(Boolean).join(` `)},[n,r]);return i?_E.createElement(zN,{placement:`top`,tooltip:_E.createElement(Uk,{note:i}),visible:t?!1:void 0},e):_E.createElement(_E.Fragment,null,e)},BN.displayName=`InteractiveTooltipWrapper`,VN=(0,mE.forwardRef)(({as:e=`button`,asChild:t=!1,animation:n=`none`,size:r=`small`,variant:i=`outline`,padding:a=`medium`,disabled:o=!1,readOnly:s=!1,active:c,onClick:l,ariaLabel:u,ariaDescription:d=void 0,tooltip:f=void 0,shortcut:p=void 0,disableAllTooltips:m=!1,...h},g)=>{let _=t?Bk:e,v;!s&&(u===void 0||u===``)&&(v=`ariaLabel`,Lk(`The 'ariaLabel' prop on 'Button' will become mandatory in Storybook 11. Buttons with text content should set 'ariaLabel={false}' to indicate that they are accessible as-is. Buttons without text content must provide a meaningful 'ariaLabel' for accessibility. The button content is: ${h.children}.`)),c!==void 0&&(v=`active`,Lk("The `active` prop on `Button` is deprecated and will be removed in Storybook 11. Use specialized components like `ToggleButton` or `Select` instead."));let{ariaDescriptionAttrs:y,AriaDescription:b}=yw(d),x=(0,mE.useMemo)(()=>p?y_(p):void 0,[p]),[S,C]=(0,mE.useState)(!1),w=e=>{l&&l(e),n!==`none`&&C(!0)};return(0,mE.useEffect)(()=>{let e=setTimeout(()=>{S&&C(!1)},1e3);return()=>clearTimeout(e)},[S]),mE.createElement(mE.Fragment,null,mE.createElement(BN,{disableAllTooltips:m,shortcut:p,tooltip:f||(u===!1?void 0:u)},mE.createElement(HN,{"data-deprecated":v,as:_,ref:g,variant:i,size:r,padding:a,$disabled:o||s,"aria-disabled":o||s?`true`:void 0,readOnly:s,active:c,animating:S,animation:n,onClick:o||s?void 0:w,"aria-label":!s&&u!==!1?u:void 0,"aria-keyshortcuts":s?void 0:x,...s?{}:y,...h})),mE.createElement(b,null))}),VN.displayName=`Button`,HN=E(`button`,{shouldForwardProp:e=>j(e)})(({theme:e,variant:t,size:n,$disabled:r,readOnly:i,active:a,animating:o,animation:s=`none`,padding:c})=>({border:0,cursor:i?`inherit`:r?`not-allowed`:`pointer`,display:`inline-flex`,gap:`6px`,alignItems:`center`,justifyContent:`center`,overflow:`hidden`,padding:c===`none`?0:c===`small`&&n===`small`?`0 7px`:c===`small`&&n===`medium`?`0 9px`:n===`small`?`0 10px`:n===`medium`?`0 12px`:0,height:n===`small`?`28px`:`32px`,position:`relative`,textAlign:`center`,textDecoration:`none`,transitionProperty:`background, box-shadow`,transitionDuration:`150ms`,transitionTimingFunction:`ease-out`,verticalAlign:`top`,whiteSpace:`nowrap`,userSelect:`none`,opacity:r&&!i?.5:1,margin:0,fontSize:`${e.typography.size.s1}px`,fontWeight:e.typography.weight.bold,lineHeight:`1`,background:t===`solid`?e.base===`light`?e.color.secondary:C(.18,e.color.secondary):t===`outline`?e.button.background:t===`ghost`&&a?ae(.93,e.barSelectedColor):`transparent`,color:t===`solid`?e.color.lightest:t===`outline`?e.input.color:t===`ghost`&&a?e.base===`light`?C(.1,e.color.secondary):e.color.secondary:t===`ghost`?e.textMutedColor:e.input.color,boxShadow:t===`outline`?`${e.button.border} 0 0 0 1px inset`:`none`,borderRadius:e.input.borderRadius,flexShrink:0,...!i&&{"&:hover":{color:t===`ghost`?e.color.secondary:void 0,background:(()=>{let n=e.color.secondary;return t===`solid`&&(n=e.base===`light`?re(.1,e.color.secondary):C(.3,e.color.secondary)),t===`outline`&&(n=e.button.background),t===`ghost`?ae(.86,e.color.secondary):e.base===`light`?C(.02,n):re(.03,n)})()},"&:active":{color:t===`ghost`?e.color.secondary:void 0,background:(()=>{let n=e.color.secondary;return t===`solid`&&(n=e.color.secondary),t===`outline`&&(n=e.button.background),t===`ghost`?e.background.hoverable:e.base===`light`?C(.02,n):re(.03,n)})()},"&:focus-visible":{outline:`2px solid ${ie(e.color.secondary,1)}`,outlineOffset:2,zIndex:`1`},".sb-bar &:focus-visible, .sb-list &:focus-visible":{outlineOffset:0}},"> svg":{flex:`0 0 auto`,animation:o&&s!==`none`?`${e.animation[s]} 1000ms ease-out`:``}})),UN=(0,mE.forwardRef)((e,t)=>(Lk("`IconButton` is deprecated and will be removed in Storybook 11, use `Button` instead."),mE.createElement(VN,{ref:t,...e,"data-deprecated":`IconButton`}))),UN.displayName=`IconButton`,WN=(0,SD.forwardRef)(({pressed:e,...t},n)=>SD.createElement(GN,{role:`switch`,"aria-checked":e,ref:n,pressed:e,...t})),WN.displayName=`ToggleButton`,GN=E(VN)(({theme:e,variant:t=`outline`,pressed:n})=>({...n?{...t===`solid`?{background:e.base===`lighten`?C(.1,e.color.secondary):C(.2,e.color.secondary)}:{},...t===`outline`?{background:ae(.94,e.barSelectedColor),boxShadow:`${e.barSelectedColor} 0 0 0 1px inset`,color:e.barSelectedColor}:{},...t===`ghost`?{background:ae(.93,e.barSelectedColor),color:e.base===`light`?C(.1,e.color.secondary):e.color.secondary}:{}}:{}})),KN=E.li(({active:e,theme:t})=>({display:`flex`,alignItems:`center`,justifyContent:`space-between`,flex:`0 0 auto`,overflow:`hidden`,minHeight:32,gap:4,fontSize:t.typography.size.s1,fontWeight:e?t.typography.weight.bold:t.typography.weight.regular,color:e?`var(--listbox-item-active-color)`:t.color.defaultText,"--listbox-item-active-color":t.base===`light`?C(.1,t.color.secondary):t.color.secondary,"--listbox-item-muted-color":e?`var(--listbox-item-active-color)`:t.color.mediumdark,'&[aria-disabled="true"]':{opacity:.5,cursor:`not-allowed`},'&[aria-selected="true"]':{color:`var(--listbox-item-active-color)`,fontWeight:t.typography.weight.bold,"--listbox-item-muted-color":`var(--listbox-item-active-color)`},"&:not(:hover, :has(:focus-visible)) svg + input":{position:`absolute`,opacity:0},'&[role="option"]':{cursor:`pointer`,borderRadius:t.input.borderRadius,outlineOffset:-2,padding:`0 9px`,gap:8,"&:hover":{background:ae(.86,t.color.secondary)},"&:focus-visible":{outline:`2px solid ${t.color.secondary}`}},"@supports (interpolate-size: allow-keywords)":{interpolateSize:`allow-keywords`,transitionBehavior:`allow-discrete`,transitionDuration:`var(--transition-duration, 0.2s)`,transitionProperty:`opacity, block-size, content-visibility`},"@media (prefers-reduced-motion: reduce)":{transition:`none`}}),({transitionStatus:e})=>{switch(e){case`preEnter`:case`exiting`:case`exited`:return{opacity:0,blockSize:0,contentVisibility:`hidden`};default:return{opacity:1,blockSize:`auto`,contentVisibility:`visible`}}}),qN=E(KN)(({targetId:e})=>({gap:0,[`& [data-target-id="${e}"]`]:{inlineSize:`auto`,marginLeft:4,opacity:1,"@supports (interpolate-size: allow-keywords)":{interpolateSize:`allow-keywords`,transitionProperty:`inline-size, margin-left, opacity, padding-inline`,transitionDuration:`var(--transition-duration, 0.2s)`}},[`&:not(:hover, :has(:focus-visible)) [data-target-id="${e}"]`]:{inlineSize:0,marginLeft:0,opacity:0,paddingInline:0}})),JN=E(VN)(({size:e})=>({gap:e===`small`?6:8,"&:focus-visible":{outlineOffset:-2}})),YN=E(WN)({"&:focus-visible":{outlineOffset:-2}}),XN=(0,pE.forwardRef)(function({padding:e=`small`,size:t=`medium`,variant:n=`ghost`,...r},i){return pE.createElement(JN,{...r,variant:n,padding:e,size:t,ref:i})}),ZN=(0,pE.forwardRef)(function({padding:e=`small`,size:t=`medium`,variant:n=`ghost`,...r},i){return pE.createElement(YN,{...r,variant:n,padding:e,size:t,ref:i})}),QN=E(XN)(({theme:e})=>({height:`auto`,minHeight:32,flex:`0 1 100%`,textAlign:`start`,justifyContent:`space-between`,fontWeight:`inherit`,color:`inherit`,"&:hover":{color:`inherit`},"& input:enabled:focus-visible":{outline:`none`},"&:has(input:focus-visible)":{outline:`2px solid ${e.color.secondary}`,outlineOffset:-2}})),$N=e=>pE.createElement(QN,{as:`a`,...e}),eP=E.div(({theme:e})=>({display:`flex`,flexDirection:`column`,justifyContent:`center`,flexGrow:1,minWidth:0,padding:`8px 0`,lineHeight:`16px`,"& > *":{margin:0,whiteSpace:`normal`},"& > span":{overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},"& small":{fontSize:`inherit`,color:e.textMutedColor},"&:first-child":{paddingLeft:8},"&:last-child":{paddingRight:8},'button > &:first-child, [role="option"] > &:first-child':{paddingLeft:0},'button > &:last-child, [role="option"] > &:last-child':{paddingRight:0}})),tP=E.div({display:`flex`,alignItems:`center`,justifyContent:`center`,flex:`0 0 14px`,width:14,height:14,color:`var(--listbox-item-muted-color)`}),nP=Object.assign(E.ul(({theme:e,onClick:t})=>({listStyle:`none`,margin:0,padding:4,cursor:t?`pointer`:`default`,"& + *":{borderTop:`1px solid ${e.appBorderColor}`}})),{Item:KN,HoverItem:qN,Button:XN,Toggle:ZN,Action:QN,Link:$N,Text:eP,Icon:tP}),rP=E.div(({collapsed:e=!1})=>({blockSize:e?0:`auto`,contentVisibility:e?`hidden`:`visible`,transform:e?`translateY(-10px)`:`translateY(0)`,opacity:e?0:1,overflow:`hidden`,"@supports (interpolate-size: allow-keywords)":{interpolateSize:`allow-keywords`,transition:`all var(--transition-duration, 0.2s)`,transitionBehavior:`allow-discrete`},"@media (prefers-reduced-motion: reduce)":{transition:`none`}})),Object.assign(function({children:e,summary:t,collapsed:n,disabled:r,initialCollapsed:i,storageKey:a,state:o,...s}){let c=aP({collapsed:n,disabled:r,initialCollapsed:i,storageKey:a}),l=o||c;return CD.createElement(CD.Fragment,null,typeof t==`function`?t(l):t,CD.createElement(rP,{...s,id:l.contentId,collapsed:l.isCollapsed,"aria-hidden":l.isCollapsed},typeof e==`function`?e(l):e))},{Content:rP}),iP=(e,t)=>{let[n,r]=(0,CD.useState)(()=>{try{return JSON.parse(sessionStorage.getItem(e))??t}catch{return t}});return(0,CD.useEffect)(()=>{try{e&&sessionStorage.setItem(e,JSON.stringify(n))}catch{}},[e,n]),[n,r]},aP=({collapsed:e,disabled:t,initialCollapsed:n=e,storageKey:r})=>{let[i,a]=iP(r&&`useCollapsible:${r}`,!!n);(0,CD.useEffect)(()=>{e!==void 0&&a(e)},[e,a]);let o=(0,CD.useCallback)(e=>{e?.stopPropagation(),t||a(e=>!e)},[t,a]),s=jy();return{contentId:s,isCollapsed:i,isDisabled:!!t,setCollapsed:a,toggleCollapsed:o,toggleProps:{disabled:t,onClick:o,"aria-controls":s,"aria-expanded":!i}}},oP=M({"0%":{opacity:0},"5%":{opacity:1},"25%":{opacity:1},"30%":{opacity:0}}),sP=M({"0%":{transform:`rotate(0deg)`},"10%":{transform:`rotate(10deg)`},"40%":{transform:`rotate(170deg)`},"50%":{transform:`rotate(180deg)`},"60%":{transform:`rotate(190deg)`},"90%":{transform:`rotate(350deg)`},"100%":{transform:`rotate(360deg)`}}),cP=M({to:{backgroundPositionX:`36%`}}),lP=E.div(({theme:e})=>({borderRadius:e.appBorderRadius,backgroundColor:e.background.content,position:`relative`})),uP=E.div(({animation:e=`none`,color:t,theme:n})=>({position:`relative`,width:`100%`,padding:1,overflow:`hidden`,backgroundColor:n.background.content,borderRadius:n.appBorderRadius+1,boxShadow:`inset 0 0 0 1px ${e===`none`&&t&&n.color[t]||n.appBorderColor}, var(--card-box-shadow, transparent 0 0)`,transition:`box-shadow 1s`,"@supports (interpolate-size: allow-keywords)":{interpolateSize:`allow-keywords`,transition:`all var(--transition-duration, 0.2s), box-shadow 1s`,transitionBehavior:`allow-discrete`},"@media (prefers-reduced-motion: reduce)":{transition:`box-shadow 1s`},"&:before":{content:`""`,display:e===`none`?`none`:`block`,position:`absolute`,left:0,top:0,width:`100%`,height:`100%`,opacity:1,...e===`rainbow`&&{animation:`${cP} 10s infinite linear, ${oP} 60s infinite linear`,backgroundImage:`linear-gradient(45deg,rgb(234, 0, 0),rgb(255, 157, 0),rgb(255, 208, 0),rgb(0, 172, 0),rgb(0, 166, 255),rgb(181, 0, 181), rgb(234, 0, 0),rgb(255, 157, 0),rgb(255, 208, 0),rgb(0, 172, 0),rgb(0, 166, 255),rgb(181, 0, 181))`,backgroundSize:`1000%`,backgroundPositionX:`100%`},...e===`spin`&&{left:`50%`,top:`50%`,marginLeft:`calc(max(100vw, 100vh) * -0.5)`,marginTop:`calc(max(100vw, 100vh) * -0.5)`,height:`max(100vw, 100vh)`,width:`max(100vw, 100vh)`,animation:`${sP} 3s linear infinite`,backgroundImage:t===`negative`?`conic-gradient(transparent 90deg, #FC521F 150deg, #FFAE00 210deg, transparent 270deg)`:`conic-gradient(transparent 90deg, #029CFD 150deg, #37D5D3 210deg, transparent 270deg)`}}})),Object.assign((0,wD.forwardRef)(function({outlineAnimation:e=`none`,outlineColor:t,outlineAttrs:n={},...r},i){return wD.createElement(uP,{animation:e,color:t,ref:i,...n},wD.createElement(lP,{...r}))}),{Content:lP,Outline:uP}),{deprecate:dP}=__STORYBOOK_MODULE_CLIENT_LOGGER__,fP=[`preEnter`,`entering`,`entered`,`preExit`,`exiting`,`exited`,`unmounted`],pP=e=>({_s:e,status:fP[e],isEnter:e<3,isMounted:e!==6,isResolved:e===2||e>4}),mP=e=>e?6:5,hP=(e,t)=>{switch(e){case 1:case 0:return 2;case 4:case 3:return mP(t)}},gP=e=>typeof e==`object`?[e.enter,e.exit]:[e,e],_P=(e,t)=>setTimeout(()=>{isNaN(document.body.offsetTop)||e(t+1)},0),vP=(e,t,n,r,i)=>{clearTimeout(r.current);let a=pP(e);t(a),n.current=a,i&&i({current:a})},yP=({enter:e=!0,exit:t=!0,preEnter:n,preExit:r,timeout:i,initialEntered:a,mountOnEnter:o,unmountOnExit:s,onStateChange:c}={})=>{let[l,u]=(0,ED.useState)(()=>pP(a?2:mP(o))),d=(0,ED.useRef)(l),f=(0,ED.useRef)(),[p,m]=gP(i),h=(0,ED.useCallback)(()=>{let e=hP(d.current._s,s);e&&vP(e,u,d,f,c)},[c,s]);return[l,(0,ED.useCallback)(i=>{let a=e=>{switch(vP(e,u,d,f,c),e){case 1:p>=0&&(f.current=setTimeout(h,p));break;case 4:m>=0&&(f.current=setTimeout(h,m));break;case 0:case 3:f.current=_P(a,e);break}},o=d.current.isEnter;typeof i!=`boolean`&&(i=!o),i?!o&&a(e?n?0:1:2):o&&a(t?r?3:4:mP(s))},[h,c,e,t,n,r,p,m,s]),h]},bP={},f(bP,{Actions:()=>WP,Close:()=>FP,CloseButton:()=>LP,Col:()=>BP,Container:()=>PP,Content:()=>RP,Description:()=>UP,Dialog:()=>IP,Error:()=>KP,ErrorWrapper:()=>GP,Header:()=>VP,Overlay:()=>NP,Row:()=>zP,Title:()=>HP}),{deprecate:xP}=__STORYBOOK_MODULE_CLIENT_LOGGER__,(0,kD.createContext)(null),(0,kD.createContext)(null),(0,kD.createContext)(null),(0,kD.createContext)(null),(0,kD.createContext)(null),SP=(0,kD.createContext)({}),CP=(0,AD.forwardRef)(function(e,t){[e,t]=Bx(e,t,SP);let{children:n,level:r=3,className:i,...a}=e,o=`h${r}`;return AD.createElement(o,{...a,ref:t,className:i??`react-aria-Heading`},n)}),wP=(0,jD.createContext)({}),TP=(0,jD.forwardRef)(function(e,t){[e,t]=Bx(e,t,wP);let{elementType:n=`span`,...r}=e;return jD.createElement(n,{className:`react-aria-Text`,...r,ref:t})}),EP=M({from:{opacity:0},to:{opacity:1}}),DP=M({from:{opacity:1},to:{opacity:0}}),OP=M({from:{maxHeight:0},to:{}}),kP=M({from:{opacity:0,transform:`translate(-50%, -50%) scale(0.9)`},to:{opacity:1,transform:`translate(-50%, -50%) scale(1)`}}),AP=M({from:{opacity:1,transform:`translate(-50%, -50%) scale(1)`},to:{opacity:0,transform:`translate(-50%, -50%) scale(0.9)`}}),jP=M({from:{opacity:0,maxHeight:`0px`},to:{opacity:1,maxHeight:`80vh`}}),MP=M({from:{opacity:1,maxHeight:`80vh`},to:{opacity:0,maxHeight:`0px`}}),NP=E.div(({$status:e,$transitionDuration:t})=>({backdropFilter:`blur(24px)`,background:`rgba(0, 0, 0, 0.4)`,position:`absolute`,inset:0,width:`100%`,height:`100%`,zIndex:1e5,"@media (prefers-reduced-motion: no-preference)":{animation:e===`exiting`||e===`preExit`?`${DP} ${t}ms`:`${EP} ${t}ms`,animationFillMode:`forwards`}})),PP=E.div(({theme:e})=>({backgroundColor:e.background.bar,borderRadius:6,boxShadow:`0px 4px 67px 0px #00000040`,position:`absolute`,overflow:`auto`,zIndex:1e5,"&:focus-visible":{outline:`none`}}),({theme:e,width:t,height:n,$variant:r,$status:i,$transitionDuration:a})=>r===`dialog`?{top:`50%`,left:`50%`,width:t??740,height:n??`auto`,maxWidth:`calc(100% - 40px)`,maxHeight:`85vh`,"@media (prefers-reduced-motion: no-preference)":{willChange:`transform, opacity`,animationTimingFunction:`cubic-bezier(0.32, 0.72, 0, 1)`,animation:i===`exiting`||i===`preExit`?`${AP} ${a}ms`:`${kP} ${a}ms`,animationFillMode:`forwards !important`},"@media (prefers-reduced-motion: reduce)":{transform:`translate(-50%, -50%) scale(1)`}}:{bottom:`0`,left:`0`,right:`0`,borderRadius:`10px 10px 0 0`,overflow:`hidden`,width:t??`100%`,height:n??`80%`,maxWidth:`100%`,background:e.background.content,"@supports (interpolate-size: allow-keywords)":{interpolateSize:`allow-keywords`},"@media (prefers-reduced-motion: no-preference)":{animationTimingFunction:`cubic-bezier(.9,.16,.77,.64)`,animation:i===`exiting`||i===`preExit`?`${MP} ${a}ms`:`${jP} ${a}ms`,animationFillMode:`forwards !important`}}),FP=({asChild:e,children:t,onClick:n,...r})=>{let{close:i}=(0,OD.useContext)(qP);if(e&&OD.isValidElement(t)){let e=e=>{n?.(e),t.props.onClick?.(e),i?.()};return OD.cloneElement(t,{...r,onClick:e})}return OD.createElement(VN,{type:`button`,padding:`small`,ariaLabel:`Close modal`,variant:`ghost`,shortcut:[`Escape`],onClick:i},OD.createElement(De,null))},IP={Close:()=>(xP(`Modal.Dialog.Close is deprecated, please use Modal.Close instead.`),OD.createElement(FP,{"data-deprecated":`Modal.Dialog.Close`}))},LP=({ariaLabel:e,...t})=>(xP(`Modal.CloseButton is deprecated, please use Modal.Close instead.`),OD.createElement(FP,{asChild:!0},OD.createElement(VN,{ariaLabel:e||`Close`,"data-deprecated":`Modal.CloseButton`,...t},OD.createElement(De,null)))),RP=E.div({display:`flex`,flexDirection:`column`,margin:16,gap:16}),zP=E.div({display:`flex`,justifyContent:`space-between`,gap:16}),BP=E.div({display:`flex`,flexDirection:`column`,gap:4}),VP=({hasClose:e=!0,onClose:t,...n})=>OD.createElement(zP,null,OD.createElement(BP,{...n}),e&&OD.createElement(FP,{onClick:t})),HP=E(e=>OD.createElement(CP,{level:2,...e}))(({theme:e})=>({margin:0,fontSize:e.typography.size.s3,fontWeight:e.typography.weight.bold})),UP=E(TP)(({theme:e})=>({position:`relative`,zIndex:1,margin:0,fontSize:e.typography.size.s2})),WP=E.div({display:`flex`,flexDirection:`row-reverse`,gap:8}),GP=E.div(({theme:e})=>({maxHeight:100,overflow:`auto`,"@media (prefers-reduced-motion: no-preference)":{animation:`${OP} 300ms, ${EP} 300ms`},backgroundColor:e.background.critical,color:e.color.lightest,fontSize:e.typography.size.s2,"& > div":{position:`relative`,padding:`8px 16px`}})),KP=({children:e,...t})=>OD.createElement(GP,{...t},OD.createElement(`div`,null,e)),qP=(0,TD.createContext)({}),Object.assign(xw,bP),E.div(({theme:e,col:t,row:n=1})=>t?{display:`inline-block`,verticalAlign:`inherit`,"& > *":{marginLeft:t*e.layoutMargin,verticalAlign:`inherit`},[`& > *:first-child${ee}`]:{marginLeft:0}}:{"& > *":{marginTop:n*e.layoutMargin},[`& > *:first-child${ee}`]:{marginTop:0}},({theme:e,outer:t,col:n,row:r})=>{switch(!0){case!!(t&&n):return{marginLeft:t*e.layoutMargin,marginRight:t*e.layoutMargin};case!!(t&&r):return{marginTop:t*e.layoutMargin,marginBottom:t*e.layoutMargin};default:return{}}}),E.div(({theme:e})=>({fontWeight:e.typography.weight.bold})),E.div(),E.div(({theme:e})=>({padding:30,textAlign:`center`,color:e.color.defaultText,fontSize:e.typography.size.s2-1})),JP=E.div(({centered:e=!1,scale:t=1,elementHeight:n})=>({height:n||`auto`,transformOrigin:e?`center top`:`left top`,transform:`scale(${1/t})`})),YP=class extends PD.Component{constructor(){super(...arguments),this.iframe=null}componentDidMount(){let{iFrameRef:e}=this.props;this.iframe=e.current}shouldComponentUpdate(e){let{scale:t,active:n}=this.props;return t!==e.scale&&this.setIframeInnerZoom(e.scale),n!==e.active&&this.iframe.setAttribute(`data-is-storybook`,e.active?`true`:`false`),e.children.props.src!==this.props.children.props.src}setIframeInnerZoom(e){try{Object.assign(this.iframe.contentDocument.body.style,{width:`${1/e*100}%`,height:`${1/e*100}%`,transform:`scale(${e})`,transformOrigin:`top left`})}catch{this.setIframeZoom(e)}}setIframeZoom(e){Object.assign(this.iframe.style,{width:`${1/e*100}%`,height:`${1/e*100}%`,transform:`scale(${e})`,transformOrigin:`top left`})}render(){let{children:e}=this.props;return PD.createElement(PD.Fragment,null,e)}},XP={Element:Tw,IFrame:YP},{global:ZP}=__STORYBOOK_MODULE_GLOBAL__,{document:QP}=ZP,$P=E.strong(({theme:e})=>({color:e.color.orange})),eF=E.strong(({theme:e})=>({color:e.color.ancillary,textDecoration:`underline`})),tF=E.em(({theme:e})=>({color:e.textMutedColor})),nF=/(Error): (.*)\n/,rF=/at (?:(.*) )?\(?(.+)\)?/,iF=/([^@]+)?(?:\/<)?@(.+)?/,aF=/([^@]+)?@(.+)?/,oF=({error:e})=>{if(!e)return FD.createElement(FD.Fragment,null,`This error has no stack or message`);if(!e.stack)return FD.createElement(FD.Fragment,null,e.message||`This error has no stack or message`);let t=e.stack.toString();t&&e.message&&!t.includes(e.message)&&(t=`Error: ${e.message} +}`,document.head.prepend(r);let i=n=>{if(!(n.touches.length===2||t)){if(!e||e===document.documentElement||e===document.body){n.preventDefault();return}e.scrollHeight===e.clientHeight&&e.scrollWidth===e.clientWidth&&n.preventDefault()}},a=e=>{let t=e.target,n=e.relatedTarget;n&&xb(n)?(n.focus({preventScroll:!0}),ZC(n,xb(t))):n||(t.parentElement?.closest(`[tabindex]`))?.focus({preventScroll:!0})},o=HTMLElement.prototype.focus;HTMLElement.prototype.focus=function(e){let t=document.activeElement!=null&&xb(document.activeElement);o.call(this,{...e,preventScroll:!0}),(!e||!e.preventScroll)&&ZC(this,t)};let s=Py(XC(document,`touchstart`,n,{passive:!1,capture:!0}),XC(document,`touchmove`,i,{passive:!1,capture:!0}),XC(document,`blur`,a,!0));return()=>{s(),r.remove(),HTMLElement.prototype.focus=o}}function YC(e,t,n){let r=e.style[t];return e.style[t]=n,()=>{e.style[t]=r}}function XC(e,t,n,r){return e.addEventListener(t,n,r),()=>{e.removeEventListener(t,n,r)}}function ZC(e,t){t||!FM?QC(e):FM.addEventListener(`resize`,()=>QC(e),{once:!0})}function QC(e){let t=document.scrollingElement||document.documentElement,n=e;for(;n&&n!==t;){let e=vb(n);if(e!==document.documentElement&&e!==document.body&&e!==n){let t=e.getBoundingClientRect(),r=n.getBoundingClientRect();if(r.topt.top+n.clientHeight){let n=t.bottom;FM&&(n=Math.min(n,FM.offsetTop+FM.height));let i=r.top-t.top-((n-t.top)/2-r.height/2);e.scrollTo({top:Math.max(0,Math.min(e.scrollHeight-e.clientHeight,e.scrollTop+i)),behavior:`smooth`})}}n=e.parentElement}}function $C(){return(0,cD.useContext)(RM)??{}}function ew(e){let{children:t}=e,n=(0,lD.useContext)(zM),[r,i]=(0,lD.useState)(0),a=(0,lD.useMemo)(()=>({parent:n,modalCount:r,addModal(){i(e=>e+1),n&&n.addModal()},removeModal(){i(e=>e-1),n&&n.removeModal()}}),[n,r]);return lD.createElement(zM.Provider,{value:a},t)}function tw(){let e=(0,lD.useContext)(zM);return{modalProviderProps:{"aria-hidden":e&&e.modalCount>0?!0:void 0}}}function nw(e){let{modalProviderProps:t}=tw();return lD.createElement(`div`,{"data-overlay-container":!0,...e,...t})}function rw(e){return lD.createElement(ew,null,lD.createElement(nw,e))}function iw(e){let t=Ay(),{portalContainer:n=t?null:document.body,...r}=e,{getContainer:i}=$C();if(!e.portalContainer&&i&&(n=i()),lD.useEffect(()=>{if(n?.closest(`[data-overlay-container]`))throw Error(`An OverlayContainer must not be inside another container. Please change the portalContainer prop.`)},[n]),!n)return null;let a=lD.createElement(rw,r);return uD.createPortal(a,n)}function aw(e={}){let{style:t,isFocusable:n}=e,[r,i]=(0,fD.useState)(!1),{focusWithinProps:a}=kx({isDisabled:!n,onFocusWithinChange:e=>i(e)}),o=(0,fD.useMemo)(()=>r?t:t?{...xN,...t}:xN,[r]);return{visuallyHiddenProps:{...a,style:o}}}function ow(e){let{children:t,elementType:n=`div`,isFocusable:r,style:i,...a}=e,{visuallyHiddenProps:o}=aw(e);return fD.createElement(n,B(a,o),t)}function sw(e){return e&&e.__esModule?e.default:e}function cw(e){let{onDismiss:t,...n}=e,r=ub(n,cC(sw(bN),`@react-aria/overlays`).format(`dismiss`)),i=()=>{t&&t()};return dD.createElement(ow,null,dD.createElement(`button`,{...r,tabIndex:-1,onClick:i,style:{width:1,height:1}}))}function lw(e,t){let n=$k(e?.[0]),r=t instanceof n.Element?{root:t}:t,i=r?.root??document.body,a=r?.shouldUseInert&&SN,o=new Set(e),s=new Set,c=e=>a&&e instanceof n.HTMLElement?e.inert:e.getAttribute(`aria-hidden`)===`true`,l=(e,t)=>{a&&e instanceof n.HTMLElement?e.inert=t:t?e.setAttribute(`aria-hidden`,`true`):(e.removeAttribute(`aria-hidden`),e instanceof n.HTMLElement&&(e.inert=!1))},u=e=>{for(let t of e.querySelectorAll(`[data-live-announcer], [data-react-aria-top-layer]`))o.add(t);let t=e=>{if(s.has(e)||o.has(e)||e.parentElement&&s.has(e.parentElement)&&e.parentElement.getAttribute(`role`)!==`row`)return NodeFilter.FILTER_REJECT;for(let t of o)if(e.contains(t))return NodeFilter.FILTER_SKIP;return NodeFilter.FILTER_ACCEPT},n=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:t}),r=t(e);if(r===NodeFilter.FILTER_ACCEPT&&d(e),r!==NodeFilter.FILTER_REJECT){let e=n.nextNode();for(;e!=null;)d(e),e=n.nextNode()}},d=e=>{let t=CN.get(e)??0;c(e)&&t===0||(t===0&&l(e,!0),s.add(e),CN.set(e,t+1))};wN.length&&wN[wN.length-1].disconnect(),u(i);let f=new MutationObserver(e=>{for(let t of e)if(t.type===`childList`&&![...o,...s].some(e=>e.contains(t.target)))for(let e of t.addedNodes)(e instanceof HTMLElement||e instanceof SVGElement)&&(e.dataset.liveAnnouncer===`true`||e.dataset.reactAriaTopLayer===`true`)?o.add(e):e instanceof Element&&u(e)});f.observe(i,{childList:!0,subtree:!0});let p={visibleNodes:o,hiddenNodes:s,observe(){f.observe(i,{childList:!0,subtree:!0})},disconnect(){f.disconnect()}};return wN.push(p),()=>{f.disconnect();for(let e of s){let t=CN.get(e);t!=null&&(t===1?(l(e,!1),CN.delete(e)):CN.set(e,t-1))}p===wN[wN.length-1]?(wN.pop(),wN.length&&wN[wN.length-1].observe()):wN.splice(wN.indexOf(p),1)}}function uw(e){let t=wN[wN.length-1];if(t&&!t.visibleNodes.has(e))return t.visibleNodes.add(e),()=>{t.visibleNodes.delete(e)}}function dw(e,t){let{triggerRef:n,popoverRef:r,groupRef:i,isNonModal:a,isKeyboardDismissDisabled:o,shouldCloseOnInteractOutside:s,...c}=e,l=c.trigger===`SubmenuTrigger`,{overlayProps:u,underlayProps:d}=WC({isOpen:t.isOpen,onClose:t.close,shouldCloseOnBlur:!0,isDismissable:!a||l,isKeyboardDismissDisabled:o,shouldCloseOnInteractOutside:s},i??r),{overlayProps:f,arrowProps:p,placement:m,triggerAnchorPoint:h}=pC({...c,targetRef:n,overlayRef:r,isOpen:t.isOpen,onClose:a&&!l?t.close:null});return KC({isDisabled:a||!t.isOpen}),(0,pD.useEffect)(()=>{if(t.isOpen&&r.current)return a?uw(i?.current??r.current):lw([i?.current??r.current],{shouldUseInert:!0})},[a,t.isOpen,r,i]),{popoverProps:B(u,f),arrowProps:p,underlayProps:d,placement:m,triggerAnchorPoint:h}}function fw(e){let t=Ay(),{portalContainer:n=t?null:document.body,isExiting:r}=e,[i,a]=(0,mD.useState)(!1),o=(0,mD.useMemo)(()=>({contain:i,setContain:a}),[i,a]),{getContainer:s}=$C();if(!e.portalContainer&&s&&(n=s()),!n)return null;let c=e.children;return e.disableFocusManagement||(c=mD.createElement(gC,{restoreFocus:!0,contain:(e.shouldContainFocus||i)&&!r},c)),c=mD.createElement(TN.Provider,{value:o},mD.createElement(Ox,null,c)),hD.createPortal(c,n)}function pw(){let e=(0,mD.useContext)(TN)?.setContain;Y(()=>{e?.(!0)},[e])}function mw(e,t,n){let{overlayProps:r,underlayProps:i}=WC({...e,isOpen:t.isOpen,onClose:t.close},n);return KC({isDisabled:!t.isOpen}),pw(),(0,gD.useEffect)(()=>{if(t.isOpen&&n.current)return lw([n.current],{shouldUseInert:!0})},[t.isOpen,n]),{modalProps:B(r),underlayProps:i}}function hw(e){let[t,n]=zb(e.isOpen,e.defaultOpen||!1,e.onOpenChange);return{isOpen:t,setOpen:n,open:(0,vD.useCallback)(()=>{n(!0)},[n]),close:(0,vD.useCallback)(()=>{n(!1)},[n]),toggle:(0,vD.useCallback)(()=>{n(!t)},[n,t])}}function gw(e={}){let{delay:t=EN,closeDelay:n=DN}=e,{isOpen:r,open:i,close:a}=hw(e),o=(0,_D.useMemo)(()=>`${++kN}`,[]),s=(0,_D.useRef)(null),c=(0,_D.useRef)(a),l=()=>{ON[o]=f},u=()=>{for(let e in ON)e!==o&&(ON[e](!0),delete ON[e])},d=()=>{s.current&&clearTimeout(s.current),s.current=null,u(),l(),AN=!0,i(),jN&&=(clearTimeout(jN),null),MN&&=(clearTimeout(MN),null)},f=e=>{e||n<=0?(s.current&&clearTimeout(s.current),s.current=null,c.current()):s.current||=setTimeout(()=>{s.current=null,c.current()},n),jN&&=(clearTimeout(jN),null),AN&&(MN&&clearTimeout(MN),MN=setTimeout(()=>{delete ON[o],MN=null,AN=!1},Math.max(DN,n)))},p=()=>{u(),l(),!r&&!jN&&!AN?jN=setTimeout(()=>{jN=null,AN=!0,d()},t):r||d()};return(0,_D.useEffect)(()=>{c.current=a},[a]),(0,_D.useEffect)(()=>()=>{s.current&&clearTimeout(s.current),ON[o]&&delete ON[o]},[o]),{isOpen:r,open:e=>{!e&&t>0&&!s.current?p():d()},close:f}}function _w(e){let t=gw(e),n=(0,yD.useRef)(null),{triggerProps:r,tooltipProps:i}=Ux(e,t,n);return yD.createElement(Lx,{values:[[NN,t],[PN,{...i,triggerRef:n}]]},yD.createElement(ej,{...r,ref:n},e.children))}function vw(e){let t=(0,yD.useContext)(NN),n=(0,yD.useRef)(null),{overlayProps:r,arrowProps:i,placement:a,triggerAnchorPoint:o}=pC({placement:e.placement||`top`,targetRef:e.triggerRef,overlayRef:e.tooltipRef,arrowRef:n,offset:e.offset,crossOffset:e.crossOffset,isOpen:t.isOpen,arrowBoundaryOffset:e.arrowBoundaryOffset,shouldFlip:e.shouldFlip,containerPadding:e.containerPadding,onClose:()=>t.close(!0)}),s=Ab(e.tooltipRef,!!a)||e.isEntering||!1,c=Rx({...e,defaultClassName:`react-aria-Tooltip`,values:{placement:a,isEntering:s,isExiting:e.isExiting,state:t}});e=B(e,r);let{tooltipProps:l}=Hx(e,t),u=Gy(e,{global:!0});return yD.createElement(`div`,{...B(u,c,l),ref:e.tooltipRef,style:{...r.style,"--trigger-anchor-point":o?`${o.x}px ${o.y}px`:void 0,...c.style},"data-placement":a??void 0,"data-entering":s||void 0,"data-exiting":e.isExiting||void 0},yD.createElement(cj.Provider,{value:{...i,placement:a,ref:n}},c.children))}function yw(e=``){let t=e.toLowerCase().trim().replace(/\s+/g,`-`);return{ariaDescriptionAttrs:{"aria-describedby":e?t:void 0},AriaDescription:()=>e?xD.createElement(`span`,{id:t,hidden:!0},e):null}}function bw(e){let t=e=>typeof window<`u`?window.matchMedia(e).matches:!1,[n,r]=(0,DD.useState)(t(e));function i(){r(t(e))}return(0,DD.useEffect)(()=>{let t=window.matchMedia(e);return i(),t.addEventListener(`change`,i),()=>{t.removeEventListener(`change`,i)}},[e]),n}function xw({container:e,portalSelector:t,children:n,width:r,height:i,ariaLabel:a,dismissOnClickOutside:o=!0,dismissOnEscape:s=!0,className:c,open:l,onEscapeKeyDown:u,onInteractOutside:d,onOpenChange:f,defaultOpen:p,transitionDuration:m=200,variant:h=`dialog`,...g}){let _;(a===void 0||a===``)&&(_=`ariaLabel`,dP("The `ariaLabel` prop on `Modal` will become mandatory in Storybook 11.")),u!==void 0&&(_=`onEscapeKeyDown`,dP("The `onEscapeKeyDown` prop is deprecated and will be removed in Storybook 11. Use `dismissOnEscape` instead.")),d!==void 0&&(_=`onInteractOutside`,dP("The `onInteractOutside` prop is deprecated and will be removed in Storybook 11. Use `dismissOnInteractOutside` instead."));let v=(0,TD.useRef)(null),[{status:y,isMounted:b},x]=yP({timeout:bw(`(prefers-reduced-motion: reduce)`)?0:m,mountOnEnter:!0,unmountOnExit:!0}),S=hw({isOpen:l||b,defaultOpen:p,onOpenChange:e=>{x(e),f?.(e)}}),C=()=>{S.close()},{modalProps:w,underlayProps:T}=mw({isDismissable:o,isKeyboardDismissDisabled:!0,shouldCloseOnInteractOutside:d?e=>{let t=new MouseEvent(`click`,{bubbles:!0,cancelable:!0,relatedTarget:e});return d(t),!t.defaultPrevented}:void 0},S,v);if((0,TD.useEffect)(()=>{let e=l??p??!1;e&&!b?x(!0):!e&&b&&x(!1)},[l,p,b,x]),(0,TD.useEffect)(()=>{b&&(l||p)&&f?.(!0)},[b]),(0,TD.useEffect)(()=>{if(b&&(l||p)&&v.current)return lw([v.current],{shouldUseInert:!0})},[b,l,p,v]),!b||y===`exited`||y===`unmounted`)return null;let E=B(w,{onKeyDown:e=>{e.key===`Escape`?s&&(u?.(e.nativeEvent),e.nativeEvent.defaultPrevented||C()):w.onKeyDown?.(e)}}),D=e??(t?document.querySelector(t):void 0);return TD.createElement(fw,{disableFocusManagement:!0,portalContainer:D||void 0},TD.createElement(gC,{restoreFocus:!0,contain:!0,autoFocus:!0},TD.createElement(NP,{$status:y,$transitionDuration:m,...T}),TD.createElement(`div`,{role:`dialog`,"aria-label":a,ref:v,...E},TD.createElement(qP.Provider,{value:{close:C}},TD.createElement(`div`,{tabIndex:-1},TD.createElement(PP,{"data-deprecated":_,$variant:h,$status:y,$transitionDuration:m,className:c,width:r,height:i,...g},n))))))}function Sw(e,t){var n=(0,ND.useRef)(null),r=(0,ND.useRef)(null);r.current=t;var i=(0,ND.useRef)(null);(0,ND.useEffect)(function(){a()});var a=(0,ND.useCallback)(function(){var t=i.current,a=r.current,o=t||(a?a instanceof Element?a:a.current:null);n.current&&n.current.element===o&&n.current.subscriber===e||(n.current&&n.current.cleanup&&n.current.cleanup(),n.current={element:o,subscriber:e,cleanup:o?e(o):void 0})},[e]);return(0,ND.useEffect)(function(){return function(){n.current&&n.current.cleanup&&(n.current.cleanup(),n.current=null)}},[]),(0,ND.useCallback)(function(e){i.current=e,a()},[a])}function Cw(e,t,n){return e[t]?e[t][0]?e[t][0][n]:e[t][n]:t===`contentBoxSize`?e.contentRect[n===`inlineSize`?`width`:`height`]:void 0}function ww(e){e===void 0&&(e={});var t=e.onResize,n=(0,ND.useRef)(void 0);n.current=t;var r=e.round||Math.round,i=(0,ND.useRef)(),a=(0,ND.useState)({width:void 0,height:void 0}),o=a[0],s=a[1],c=(0,ND.useRef)(!1);(0,ND.useEffect)(function(){return c.current=!1,function(){c.current=!0}},[]);var l=(0,ND.useRef)({width:void 0,height:void 0}),u=Sw((0,ND.useCallback)(function(t){return(!i.current||i.current.box!==e.box||i.current.round!==r)&&(i.current={box:e.box,round:r,instance:new ResizeObserver(function(t){var i=t[0],a=e.box===`border-box`?`borderBoxSize`:e.box===`device-pixel-content-box`?`devicePixelContentBoxSize`:`contentBoxSize`,o=Cw(i,a,`inlineSize`),u=Cw(i,a,`blockSize`),d=o?r(o):void 0,f=u?r(u):void 0;if(l.current.width!==d||l.current.height!==f){var p={width:d,height:f};l.current.width=d,l.current.height=f,n.current?n.current(p):c.current||s(p)}})}),i.current.instance.observe(t,{box:e.box}),function(){i.current&&i.current.instance.unobserve(t)}},[e.box,r]),e.ref);return(0,ND.useMemo)(function(){return{ref:u,width:o.width,height:o.height}},[u,o.width,o.height])}function Tw({centered:e,scale:t,children:n}){let r=(0,MD.useRef)(null),[i,a]=(0,MD.useState)(0),o=(0,MD.useCallback)(({height:e})=>{e&&a(e/t)},[t]);return(0,MD.useEffect)(()=>{r.current&&a(r.current.getBoundingClientRect().height)},[t]),ww({ref:r,onResize:o}),MD.createElement(JP,{centered:e,scale:t,elementHeight:i},MD.createElement(`div`,{ref:r,className:`innerZoomElementWrapper`},n))}function Ew(e,t,n,r){n===void 0&&(n=1),r===void 0&&(r=1/0),jF||(jF=document.createElement(`textarea`),jF.setAttribute(`tabindex`,`-1`),jF.setAttribute(`aria-hidden`,`true`),AF(jF)),jF.parentNode===null&&document.body.appendChild(jF);var i=e.paddingSize,a=e.borderSize,o=e.sizingStyle,s=o.boxSizing;Object.keys(o).forEach(function(e){var t=e;jF.style[t]=o[t]}),AF(jF),jF.value=t;var c=MF(jF,e);jF.value=t,c=MF(jF,e),jF.value=`x`;var l=jF.scrollHeight-i,u=l*n;s===`border-box`&&(u=u+i+a),c=Math.max(u,c);var d=l*r;return s===`border-box`&&(d=d+i+a),c=Math.min(d,c),[c,l]}function Dw(e,t,n){var r=TF(n);UD.useLayoutEffect(function(){var n=function(e){return r.current(e)};if(e)return e.addEventListener(t,n),function(){return e.removeEventListener(t,n)}},[])}function Ow(e){return e==null||typeof e==`string`||typeof e==`number`||typeof e==`boolean`||typeof e==`symbol`}function kw(e){return{...e,type:`option`,value:Mw(e.value)}}function Aw(e){return`type`in e&&e.type===`reset`?e:kw(e)}function jw(e){if(e!==QF)return e}function Mw(e){return e===void 0?QF:e}function Nw(e,{value:t}){return`${e}-opt-${String(t)??`sb-reset`}`}function Pw(e,t){return t===void 0?[]:Ow(t)?e.filter(e=>e.value===t).map(kw):e.filter(e=>t.some(t=>e.value===t)).map(kw)}function Fw(e,t,n,r){if(n==null)return[null,null];let i=null,a=null,o=e.getItem(n);for(;o!=null;){let n=o.filter(e,t,r);n!=null&&(n.nextKey=null,a&&(n.prevKey=a.key,a.nextKey=n.key),i??=n,t.addNode(n),a=n),o=o.nextKey?e.getItem(o.nextKey):null}if(a&&a.type===`separator`){let e=a.prevKey;t.removeNode(a.key),e?(a=t.getItem(e),a.nextKey=null):a=null}return[i?.key??null,a?.key??null]}function Iw(e){let{children:t,items:n,idScope:r,addIdAndValue:i,dependencies:a=[]}=e,o=(0,XD.useMemo)(()=>new WeakMap,a);return(0,XD.useMemo)(()=>{if(n&&typeof t==`function`){let e=[];for(let a of n){let n=o.get(a);if(!n){n=t(a);let e=n.props.id??a.key??a.id;if(e==null)throw Error(`Could not determine key for item`);r&&(e=r+`:`+e),n=(0,XD.cloneElement)(n,i?{key:e,id:e,value:a}:{key:e}),o.set(a,n)}e.push(n)}return e}else if(typeof t!=`function`)return t},[t,n,o,r,i])}function Lw(e){if((0,ZD.useContext)(gI))return ZD.createElement(ZD.Fragment,null,e.children);let t=ZD.createElement(gI.Provider,{value:!0},e.children);return ZD.createElement(`template`,{"data-react-aria-hidden":!0},t)}function Rw(e){let t=(t,n)=>(0,ZD.useContext)(gI)?null:e(t,n);return t.displayName=e.displayName||e.name,(0,ZD.forwardRef)(t)}function zw(){return(0,ZD.useContext)(gI)}function Bw(e){if((0,U.useContext)(vI))return e.content;let{collection:t,document:n}=Uw(e.createCollection);return U.createElement(U.Fragment,null,U.createElement(Lw,null,U.createElement(vI.Provider,{value:n},e.content)),U.createElement(Vw,{render:e.children,collection:t}))}function Vw({collection:e,render:t}){return t(e)}function Hw(e,t,n){let r=Ay(),i=(0,U.useRef)(r);return i.current=r,(0,$D.useSyncExternalStore)(e,(0,U.useCallback)(()=>i.current?n():t(),[t,n]))}function Uw(e){let[t]=(0,U.useState)(()=>new hI(e?.()||new fI)),n=yI((0,U.useCallback)(e=>t.subscribe(e),[t]),(0,U.useCallback)(()=>{let e=t.getCollection();return t.isSSR&&t.resetAfterSSR(),e},[t]),(0,U.useCallback)(()=>(t.isSSR=!0,t.getCollection()),[t]));return Y(()=>(t.isMounted=!0,()=>{t.isMounted=!1}),[t]),{collection:n,document:t}}function Ww(e){var t;return t=class extends oI{},t.type=e,t}function Gw(e,t,n,r,i,a){typeof e==`string`&&(e=Ww(e));let o=(0,U.useCallback)(i=>{i?.setProps(t,n,e,r,a)},[t,n,r,a,e]),s=(0,U.useContext)(bI);if(s){let o=s.ownerDocument.nodesByProps.get(t);return o||(o=s.ownerDocument.createElement(e.type),o.setProps(t,n,e,r,a),s.appendChild(o),s.ownerDocument.updateCollection(),s.ownerDocument.nodesByProps.set(t,o)),i?U.createElement(bI.Provider,{value:o},i):null}return U.createElement(e.type,{ref:o},i)}function Kw(e,t){let n=({node:e})=>t(e.props,e.props.ref,e),r=(0,U.forwardRef)((r,i)=>{let a=(0,U.useContext)($A);if(!(0,U.useContext)(_I)){if(t.length>=3)throw Error(t.name+` cannot be rendered outside a collection.`);return t(r,i)}return Gw(e,r,i,`children`in r?r.children:null,null,e=>U.createElement($A.Provider,{value:a},U.createElement(n,{node:e})))});return r.displayName=t.name,r}function qw(e,t,n=Jw){let r=({node:e})=>t(e.props,e.props.ref,e),i=(0,U.forwardRef)((t,i)=>Gw(e,t,i,null,n(t),e=>U.createElement(r,{node:e}))??U.createElement(U.Fragment,null));return i.displayName=t.name,i}function Jw(e){return Iw({...e,addIdAndValue:!0})}function Yw(e){let t=(0,U.useContext)(xI),n=(t?.dependencies||[]).concat(e.dependencies),r=e.idScope||t?.idScope,i=Jw({...e,idScope:r,dependencies:n});return(0,U.useContext)(vI)&&(i=U.createElement(Xw,null,i)),t=(0,U.useMemo)(()=>({dependencies:n,idScope:r}),[r,...n]),U.createElement(xI.Provider,{value:t},i)}function Xw({children:e}){let t=(0,U.useContext)(vI),n=(0,U.useMemo)(()=>U.createElement(vI.Provider,{value:null},U.createElement(_I.Provider,{value:!0},e)),[e]);return Ay()?U.createElement(bI.Provider,{value:t},n):(0,QD.createPortal)(n,t)}function Zw(e){let{id:t,label:n,"aria-labelledby":r,"aria-label":i,labelElementType:a=`label`}=e;t=jy(t);let o=jy(),s={};n&&(r=r?`${o} ${r}`:o,s={id:o,htmlFor:a===`label`?t:void 0});let c=ub({id:t,"aria-label":i,"aria-labelledby":r});return{labelProps:s,fieldProps:c}}function Qw(e){let{value:t=0,minValue:n=0,maxValue:r=100,valueLabel:i,isIndeterminate:a,formatOptions:o={style:`percent`}}=e,s=Gy(e,{labelable:!0}),{labelProps:c,fieldProps:l}=Zw({...e,labelElementType:`span`});t=Bb(t,n,r);let u=(t-n)/(r-n),d=dC(o);if(!a&&!i){let e=o.style===`percent`?u:t;i=d.format(e)}return{progressBarProps:B(s,{...l,"aria-valuenow":a?void 0:t,"aria-valuemin":n,"aria-valuemax":r,"aria-valuetext":a?void 0:i,role:`progressbar`}),labelProps:c}}function $w(e,t=`assertive`,n=7e3){wI?wI.announce(e,t,n):(wI=new TI,(typeof IS_REACT_ACT_ENVIRONMENT==`boolean`?IS_REACT_ACT_ENVIRONMENT:typeof jest<`u`)?wI.announce(e,t,n):setTimeout(()=>{wI?.isAttached()&&wI?.announce(e,t,n)},100))}function eT(e,t){let{elementType:n=`button`,isDisabled:r,onPress:i,onPressStart:a,onPressEnd:o,onPressUp:s,onPressChange:c,preventFocusOnPress:l,allowFocusWhenDisabled:u,onClick:d,href:f,target:p,rel:m,type:h=`button`}=e,g;g=n===`button`?{type:h,disabled:r,form:e.form,formAction:e.formAction,formEncType:e.formEncType,formMethod:e.formMethod,formNoValidate:e.formNoValidate,formTarget:e.formTarget,name:e.name,value:e.value}:{role:`button`,href:n===`a`&&!r?f:void 0,target:n===`a`?p:void 0,type:n===`input`?h:void 0,disabled:n===`input`?r:void 0,"aria-disabled":!r||n===`input`?void 0:r,rel:n===`a`?m:void 0};let{pressProps:_,isPressed:v}=tx({onPressStart:a,onPressEnd:o,onPressChange:c,onPress:i,onPressUp:s,onClick:d,isDisabled:r,preventFocusOnPress:l,ref:t}),{focusableProps:y}=Dx(e,t);u&&(y.tabIndex=r?-1:y.tabIndex);let b=B(y,_,Gy(e,{labelable:!0}));return{isPressed:v,buttonProps:B(g,b,{"aria-haspopup":e[`aria-haspopup`],"aria-expanded":e[`aria-expanded`],"aria-controls":e[`aria-controls`],"aria-pressed":e[`aria-pressed`],"aria-current":e[`aria-current`],"aria-disabled":e[`aria-disabled`]})}}function tT(e){return e.isPending&&(e.onPress=void 0,e.onPressStart=void 0,e.onPressEnd=void 0,e.onPressChange=void 0,e.onPressUp=void 0,e.onKeyDown=void 0,e.onKeyUp=void 0,e.onClick=void 0,e.href=void 0),e}function nT({state:e,isExiting:t,UNSTABLE_portalContainer:n,clearContexts:r,...i}){let a=(0,W.useRef)(null),o=(0,W.useRef)(null),s=(0,W.useContext)(OI),c=s&&i.trigger===`SubmenuTrigger`,{popoverProps:l,underlayProps:u,arrowProps:d,placement:f,triggerAnchorPoint:p}=dw({...i,offset:i.offset??8,arrowRef:a,groupRef:c?s:o},e),m=i.popoverRef,h=Ab(m,!!f)||i.isEntering||!1,g=Rx({...i,defaultClassName:`react-aria-Popover`,values:{trigger:i.trigger||null,placement:f,isEntering:h,isExiting:t}}),_=!i.isNonModal||i.trigger===`SubmenuTrigger`,[v,y]=(0,W.useState)(!1);Y(()=>{m.current&&y(_&&!m.current.querySelector(`[role=dialog]`))},[m,_]),(0,W.useEffect)(()=>{v&&i.trigger!==`SubmenuTrigger`&&m.current&&!m.current.contains(document.activeElement)&&Sx(m.current)},[v,m,i.trigger]);let b=(0,W.useMemo)(()=>{let e=g.children;if(r)for(let t of r)e=W.createElement(t.Provider,{value:null},e);return e},[g.children,r]),x={...l.style,"--trigger-anchor-point":p?`${p.x}px ${p.y}px`:void 0,...g.style},S=W.createElement(`div`,{...B(Gy(i,{global:!0}),l),...g,role:v?`dialog`:void 0,tabIndex:v?-1:void 0,"aria-label":i[`aria-label`],"aria-labelledby":i[`aria-labelledby`],ref:m,slot:i.slot||void 0,style:x,dir:i.dir,"data-trigger":i.trigger,"data-placement":f,"data-entering":h||void 0,"data-exiting":t||void 0},!i.isNonModal&&W.createElement(cw,{onDismiss:e.close}),W.createElement(cj.Provider,{value:{...d,placement:f,ref:a}},b),W.createElement(cw,{onDismiss:e.close}));return c?W.createElement(fw,{...i,shouldContainFocus:v,isExiting:t,portalContainer:n??s?.current??void 0},S):W.createElement(fw,{...i,shouldContainFocus:v,isExiting:t,portalContainer:n},!i.isNonModal&&e.isOpen&&W.createElement(`div`,{"data-testid":`underlay`,...u,style:{position:`fixed`,inset:0}}),W.createElement(`div`,{ref:o,style:{display:`contents`}},W.createElement(OI.Provider,{value:o},S)))}function rT(e,t,n){return Iw({items:t?e.getChildren(t.key):e,dependencies:[n],children(t){let r=t.render(t);return!n||t.type!==`item`?r:rO.createElement(rO.Fragment,null,n({type:`item`,key:t.key,dropPosition:`before`}),r,iT(e,t,n))}})}function iT(e,t,n){let r=t.key,i=e.getKeyAfter(r),a=i==null?null:e.getItem(i);for(;a!=null&&a.type!==`item`;)i=e.getKeyAfter(a.key),a=i==null?null:e.getItem(i);let o=t.nextKey==null?null:e.getItem(t.nextKey);for(;o!=null&&o.type!==`item`;)o=o.nextKey==null?null:e.getItem(o.nextKey);let s=[];if(o==null){let r=t;for(;r&&(!a||r.parentKey!==a.parentKey&&a.levele==null?null:new Set([e]),[e])}function oT(e){let t=Gy(e,{labelable:!0}),n;return e.orientation===`vertical`&&(n=`vertical`),e.elementType===`hr`?{separatorProps:t}:{separatorProps:{...t,role:`separator`,"aria-orientation":n}}}function sT(e){return hA()?e.altKey:e.ctrlKey}function cT(e,t){let n=`[data-key="${CSS.escape(String(t))}"]`,r=e.current?.dataset.collection;return r&&(n=`[data-collection="${CSS.escape(r)}"]${n}`),e.current?.querySelector(n)}function lT(e){let t=jy();return BI.set(e,t),t}function uT(e){return BI.get(e)}function dT(e){let{keyboardDelegate:t,selectionManager:n,onTypeSelect:r}=e,i=(0,cO.useRef)({search:``,timeout:void 0}).current;return{typeSelectProps:{onKeyDownCapture:t.getKeyForSearch?e=>{let a=fT(e.key);if(!(!a||e.ctrlKey||e.metaKey||!e.currentTarget.contains(e.target)||i.search.length===0&&a===` `)){if(a===` `&&i.search.trim().length>0&&(e.preventDefault(),`continuePropagation`in e||e.stopPropagation()),i.search+=a,t.getKeyForSearch!=null){let e=t.getKeyForSearch(i.search,n.focusedKey);e??=t.getKeyForSearch(i.search),e!=null&&(n.setFocusedKey(e),r&&r(e))}clearTimeout(i.timeout),i.timeout=setTimeout(()=>{i.search=``},VI)}}:void 0}}}function fT(e){return e.length===1||!/^[A-Z]/i.test(e)?e:``}function pT(e){let{selectionManager:t,keyboardDelegate:n,ref:r,autoFocus:i=!1,shouldFocusWrap:a=!1,disallowEmptySelection:o=!1,disallowSelectAll:s=!1,escapeKeyBehavior:c=`clearSelection`,selectOnFocus:l=t.selectionBehavior===`replace`,disallowTypeAhead:u=!1,shouldUseVirtualFocus:d,allowsTabNavigation:f=!1,isVirtualized:p,scrollRef:m=r,linkBehavior:h=`action`}=e,{direction:g}=uS(),_=$y(),v=e=>{var i;if(e.altKey&&e.key===`Tab`&&e.preventDefault(),!((i=r.current)!=null&&i.contains(e.target)))return;let u=(n,i)=>{if(n!=null){if(t.isLink(n)&&h===`selection`&&l&&!sT(e)){(0,lO.flushSync)(()=>{t.setFocusedKey(n,i)});let a=cT(r,n),o=t.getItemProps(n);a&&_.open(a,e,o.href,o.routerOptions);return}if(t.setFocusedKey(n,i),t.isLink(n)&&h===`override`)return;e.shiftKey&&t.selectionMode===`multiple`?t.extendSelection(n):l&&!sT(e)&&t.replaceSelection(n)}};switch(e.key){case`ArrowDown`:if(n.getKeyBelow){let r=t.focusedKey==null?n.getFirstKey?.call(n):n.getKeyBelow?.call(n,t.focusedKey);r==null&&a&&(r=n.getFirstKey?.call(n,t.focusedKey)),r!=null&&(e.preventDefault(),u(r))}break;case`ArrowUp`:if(n.getKeyAbove){let r=t.focusedKey==null?n.getLastKey?.call(n):n.getKeyAbove?.call(n,t.focusedKey);r==null&&a&&(r=n.getLastKey?.call(n,t.focusedKey)),r!=null&&(e.preventDefault(),u(r))}break;case`ArrowLeft`:if(n.getKeyLeftOf){let r=t.focusedKey==null?null:n.getKeyLeftOf?.call(n,t.focusedKey);r==null&&a&&(r=g===`rtl`?n.getFirstKey?.call(n,t.focusedKey):n.getLastKey?.call(n,t.focusedKey)),r!=null&&(e.preventDefault(),u(r,g===`rtl`?`first`:`last`))}break;case`ArrowRight`:if(n.getKeyRightOf){let r=t.focusedKey==null?null:n.getKeyRightOf?.call(n,t.focusedKey);r==null&&a&&(r=g===`rtl`?n.getLastKey?.call(n,t.focusedKey):n.getFirstKey?.call(n,t.focusedKey)),r!=null&&(e.preventDefault(),u(r,g===`rtl`?`last`:`first`))}break;case`Home`:if(n.getFirstKey){if(t.focusedKey===null&&e.shiftKey)return;e.preventDefault();let r=n.getFirstKey(t.focusedKey,bb(e));t.setFocusedKey(r),r!=null&&(bb(e)&&e.shiftKey&&t.selectionMode===`multiple`?t.extendSelection(r):l&&t.replaceSelection(r))}break;case`End`:if(n.getLastKey){if(t.focusedKey===null&&e.shiftKey)return;e.preventDefault();let r=n.getLastKey(t.focusedKey,bb(e));t.setFocusedKey(r),r!=null&&(bb(e)&&e.shiftKey&&t.selectionMode===`multiple`?t.extendSelection(r):l&&t.replaceSelection(r))}break;case`PageDown`:if(n.getKeyPageBelow&&t.focusedKey!=null){let r=n.getKeyPageBelow(t.focusedKey);r!=null&&(e.preventDefault(),u(r))}break;case`PageUp`:if(n.getKeyPageAbove&&t.focusedKey!=null){let r=n.getKeyPageAbove(t.focusedKey);r!=null&&(e.preventDefault(),u(r))}break;case`a`:bb(e)&&t.selectionMode===`multiple`&&s!==!0&&(e.preventDefault(),t.selectAll());break;case`Escape`:c===`clearSelection`&&!o&&t.selectedKeys.size!==0&&(e.stopPropagation(),e.preventDefault(),t.clearSelection());break;case`Tab`:if(!f){if(e.shiftKey)r.current.focus();else{let e=FC(r.current,{tabbable:!0}),t,n;do n=e.lastChild(),n&&(t=n);while(n);t&&!t.contains(document.activeElement)&&Ky(t)}break}}},y=(0,uO.useRef)({top:0,left:0});Cb(m,`scroll`,p?void 0:()=>{y.current={top:m.current?.scrollTop??0,left:m.current?.scrollLeft??0}});let b=e=>{if(t.isFocused){e.currentTarget.contains(e.target)||t.setFocused(!1);return}if(e.currentTarget.contains(e.target)){if(t.setFocused(!0),t.focusedKey==null){let r=e=>{e!=null&&(t.setFocusedKey(e),l&&!t.isSelected(e)&&t.replaceSelection(e))},i=e.relatedTarget;i&&e.currentTarget.compareDocumentPosition(i)&Node.DOCUMENT_POSITION_FOLLOWING?r(t.lastSelectedKey??n.getLastKey?.call(n)):r(t.firstSelectedKey??n.getFirstKey?.call(n))}else !p&&m.current&&(m.current.scrollTop=y.current.top,m.current.scrollLeft=y.current.left);if(t.focusedKey!=null&&m.current){let e=cT(r,t.focusedKey);e instanceof HTMLElement&&(!e.contains(document.activeElement)&&!d&&Ky(e),vx()===`keyboard`&&Eb(e,{containingElement:r.current}))}}},x=e=>{e.currentTarget.contains(e.relatedTarget)||t.setFocused(!1)},S=(0,uO.useRef)(!1);Cb(r,OA,d?e=>{let{detail:n}=e;e.stopPropagation(),t.setFocused(!0),n?.focusStrategy===`first`&&(S.current=!0)}:void 0);let C=fb(()=>{let e=n.getFirstKey?.call(n)??null;if(e==null){let e=tA();BC(r.current),HC(e,null),t.collection.size>0&&(S.current=!1)}else t.setFocusedKey(e),S.current=!1});pb(()=>{S.current&&C()},[t.collection,C]);let w=fb(()=>{t.collection.size>0&&(S.current=!1)});pb(()=>{w()},[t.focusedKey,w]),Cb(r,DA,d?e=>{var n;e.stopPropagation(),t.setFocused(!1),(n=e.detail)!=null&&n.clearFocusKey&&t.setFocusedKey(null)}:void 0);let T=(0,uO.useRef)(i),E=(0,uO.useRef)(!1);(0,uO.useEffect)(()=>{if(T.current){let e=null;i===`first`&&(e=n.getFirstKey?.call(n)??null),i===`last`&&(e=n.getLastKey?.call(n)??null);let a=t.selectedKeys;if(a.size){for(let n of a)if(t.canSelectItem(n)){e=n;break}}t.setFocused(!0),t.setFocusedKey(e),e==null&&!d&&r.current&&Sx(r.current),t.collection.size>0&&(T.current=!1,E.current=!0)}});let D=(0,uO.useRef)(t.focusedKey),O=(0,uO.useRef)(null);(0,uO.useEffect)(()=>{if(t.isFocused&&t.focusedKey!=null&&(t.focusedKey!==D.current||E.current)&&m.current&&r.current){let e=vx(),n=cT(r,t.focusedKey);if(!(n instanceof HTMLElement))return;(e===`keyboard`||E.current)&&(O.current&&cancelAnimationFrame(O.current),O.current=requestAnimationFrame(()=>{m.current&&(wb(m.current,n),e!==`virtual`&&Eb(n,{containingElement:r.current}))}))}!d&&t.isFocused&&t.focusedKey==null&&D.current!=null&&r.current&&Sx(r.current),D.current=t.focusedKey,E.current=!1}),(0,uO.useEffect)(()=>()=>{O.current&&cancelAnimationFrame(O.current)},[]),Cb(r,`react-aria-focus-scope-restore`,e=>{e.preventDefault(),t.setFocused(!0)});let k={onKeyDown:v,onFocus:b,onBlur:x,onMouseDown(e){m.current===e.target&&e.preventDefault()}},{typeSelectProps:ee}=dT({keyboardDelegate:n,selectionManager:t});u||(k=B(ee,k));let A;d||(A=t.focusedKey==null?0:-1);let j=lT(t.collection);return{collectionProps:B(k,{tabIndex:A,"data-collection":j})}}function mT(e){let{id:t,selectionManager:n,key:r,ref:i,shouldSelectOnPressUp:a,shouldUseVirtualFocus:o,focus:s,isDisabled:c,onAction:l,allowsDifferentPressOrigin:u,linkBehavior:d=`action`}=e,f=$y();t=jy(t);let p=e=>{if(e.pointerType===`keyboard`&&sT(e))n.toggleSelection(r);else{if(n.selectionMode===`none`)return;if(n.isLink(r)){if(d===`selection`&&i.current){let t=n.getItemProps(r);f.open(i.current,e,t.href,t.routerOptions),n.setSelectedKeys(n.selectedKeys);return}else if(d===`override`||d===`none`)return}n.selectionMode===`single`?n.isSelected(r)&&!n.disallowEmptySelection?n.toggleSelection(r):n.replaceSelection(r):e&&e.shiftKey?n.extendSelection(r):n.selectionBehavior===`toggle`||e&&(bb(e)||e.pointerType===`touch`||e.pointerType===`virtual`)?n.toggleSelection(r):n.replaceSelection(r)}};(0,dO.useEffect)(()=>{r===n.focusedKey&&n.isFocused&&(o?BC(i.current):s?s():document.activeElement!==i.current&&i.current&&Sx(i.current))},[i,r,n.focusedKey,n.childFocusStrategy,n.isFocused,o]),c||=n.isDisabled(r);let m={};!o&&!c?m={tabIndex:r===n.focusedKey?0:-1,onFocus(e){e.target===i.current&&n.setFocusedKey(r)}}:c&&(m.onMouseDown=e=>{e.preventDefault()});let h=n.isLink(r)&&d===`override`,g=l&&e.UNSTABLE_itemBehavior===`action`,_=n.isLink(r)&&d!==`selection`&&d!==`none`,v=!c&&n.canSelectItem(r)&&!h&&!g,y=(l||_)&&!c,b=y&&(n.selectionBehavior===`replace`?!v:!v||n.isEmpty),x=y&&v&&n.selectionBehavior===`replace`,S=b||x,C=(0,dO.useRef)(null),w=S&&v,T=(0,dO.useRef)(!1),E=(0,dO.useRef)(!1),D=n.getItemProps(r),O=e=>{if(l){var t;l(),(t=i.current)==null||t.dispatchEvent(new CustomEvent(`react-aria-item-action`,{bubbles:!0}))}_&&i.current&&f.open(i.current,e,D.href,D.routerOptions)},k={ref:i};if(a?(k.onPressStart=e=>{C.current=e.pointerType,T.current=w,e.pointerType===`keyboard`&&(!S||gT())&&p(e)},u?(k.onPressUp=b?void 0:e=>{e.pointerType===`mouse`&&v&&p(e)},k.onPress=b?O:e=>{e.pointerType!==`keyboard`&&e.pointerType!==`mouse`&&v&&p(e)}):k.onPress=e=>{if(b||x&&e.pointerType!==`mouse`){if(e.pointerType===`keyboard`&&!hT())return;O(e)}else e.pointerType!==`keyboard`&&v&&p(e)}):(k.onPressStart=e=>{C.current=e.pointerType,T.current=w,E.current=b,v&&(e.pointerType===`mouse`&&!b||e.pointerType===`keyboard`&&(!y||gT()))&&p(e)},k.onPress=e=>{(e.pointerType===`touch`||e.pointerType===`pen`||e.pointerType===`virtual`||e.pointerType===`keyboard`&&S&&hT()||e.pointerType===`mouse`&&E.current)&&(S?O(e):v&&p(e))}),m[`data-collection`]=uT(n.collection),m[`data-key`]=r,k.preventFocusOnPress=o,o&&(k=B(k,{onPressStart(e){e.pointerType!==`touch`&&(n.setFocused(!0),n.setFocusedKey(r))},onPress(e){e.pointerType===`touch`&&(n.setFocused(!0),n.setFocusedKey(r))}})),D)for(let e of[`onPressStart`,`onPressEnd`,`onPressChange`,`onPress`,`onPressUp`,`onClick`])D[e]&&(k[e]=Py(k[e],D[e]));let{pressProps:ee,isPressed:A}=tx(k),j=x?e=>{C.current===`mouse`&&(e.stopPropagation(),e.preventDefault(),O(e))}:void 0,{longPressProps:te}=Ix({isDisabled:!w,onLongPress(e){e.pointerType===`touch`&&(p(e),n.setSelectionBehavior(`toggle`))}}),M=e=>{C.current===`touch`&&T.current&&e.preventDefault()},ne=d!==`none`&&n.isLink(r)?e=>{tb.isOpening||e.preventDefault()}:void 0;return{itemProps:B(m,v||b||o&&!c?ee:{},w?te:{},{onDoubleClick:j,onDragStartCapture:M,onClick:ne,id:t},o?{onMouseDown:e=>e.preventDefault()}:void 0),isPressed:A,isSelected:n.isSelected(r),isFocused:n.isFocused&&n.focusedKey===r,isDisabled:c,allowsSelection:v,hasAction:S}}function hT(){return window.event?.key===`Enter`}function gT(){let e=window.event;return e?.key===` `||e?.code===`Space`}function _T(e){let{selectionManager:t,collection:n,disabledKeys:r,ref:i,keyboardDelegate:a,layoutDelegate:o}=e,s=fC({usage:`search`,sensitivity:`base`}),c=t.disabledBehavior,l=(0,fO.useMemo)(()=>a||new UI({collection:n,disabledKeys:r,disabledBehavior:c,ref:i,collator:s,layoutDelegate:o}),[a,o,n,r,i,s,c]),{collectionProps:u}=pT({...e,ref:i,selectionManager:t,keyboardDelegate:l});return{listProps:u}}function vT(e,t,n){let{shouldFocusWrap:r=!0,onKeyDown:i,onKeyUp:a,...o}=e;!e[`aria-label`]&&e[`aria-labelledby`];let s=Gy(e,{labelable:!0}),{listProps:c}=_T({...o,ref:n,selectionManager:t.selectionManager,collection:t.collection,disabledKeys:t.disabledKeys,shouldFocusWrap:r,linkBehavior:`override`});return zI.set(t,{onClose:e.onClose,onAction:e.onAction,shouldUseVirtualFocus:e.shouldUseVirtualFocus}),{menuProps:B(s,{onKeyDown:i,onKeyUp:a},{role:`menu`,...c,onKeyDown:t=>{var n;(t.key!==`Escape`||e.shouldUseVirtualFocus)&&((n=c.onKeyDown)==null||n.call(c,t))}})}}function yT(e){return null}function bT(e){return e.hasChildItems==null?!!(e.childItems||e.title&&pO.Children.count(e.children)>0):e.hasChildItems}function xT(e){return null}function ST(e){let t=[],n=null;return{*[Symbol.iterator](){for(let e of t)yield e;n||=e();for(let e of n)t.push(e),yield e}}}function CT(e,t){if(e&&t)return n=>e(t(n));if(e)return e;if(t)return t}function wT(e){return e[0].toUpperCase()+e.slice(1)}function TT(e,t,n){let r=(0,gO.useMemo)(()=>new GI,[]),{children:i,items:a,collection:o}=e;return(0,gO.useMemo)(()=>o||t(r.build({children:i,items:a},n)),[r,i,a,o,n,t])}function ET(e,t){return typeof t.getChildren==`function`?t.getChildren(e.key):e.childNodes}function DT(e){return OT(e,0)}function OT(e,t){if(t<0)return;let n=0;for(let r of e){if(n===t)return r;n++}}function kT(e,t,n){if(t.parentKey===n.parentKey)return t.index-n.index;let r=[...AT(e,t),t],i=[...AT(e,n),n],a=r.slice(0,i.length).findIndex((e,t)=>e!==i[t]);return a===-1?r.findIndex(e=>e===n)>=0?1:(i.findIndex(e=>e===t),-1):(t=r[a],n=i[a],t.index-n.index)}function AT(e,t){let n=[],r=t;for(;r?.parentKey!=null;)r=e.getItem(r.parentKey),r&&n.unshift(r);return n}function jT(e){let t=KI.get(e);if(t!=null)return t;let n=0,r=t=>{for(let i of t)i.type===`section`?r(ET(i,e)):i.type===`item`&&n++};return r(e),KI.set(e,n),n}function MT(e,t,n){let{id:r,key:i,closeOnSelect:a,isVirtualized:o,"aria-haspopup":s,onPressStart:c,onPressUp:l,onPress:u,onPressChange:d,onPressEnd:f,onClick:p,onHoverStart:m,onHoverChange:h,onHoverEnd:g,onKeyDown:_,onKeyUp:v,onFocus:y,onFocusChange:b,onBlur:x,selectionManager:S=t.selectionManager}=e,C=!!s,w=C&&e[`aria-expanded`]===`true`,T=e.isDisabled??S.isDisabled(i),E=e.isSelected??S.isSelected(i),D=zI.get(t),O=t.collection.getItem(i),k=e.onClose||D.onClose,ee=$y(),A=()=>{var t;if(!C&&(!(O==null||(t=O.props)==null)&&t.onAction?O.props.onAction():e.onAction&&e.onAction(i),D.onAction)){let e=D.onAction;e(i)}},j=`menuitem`;C||(S.selectionMode===`single`?j=`menuitemradio`:S.selectionMode===`multiple`&&(j=`menuitemcheckbox`));let te=Ny(),M=Ny(),ne=Ny(),re={id:r,"aria-disabled":T||void 0,role:j,"aria-label":e[`aria-label`],"aria-labelledby":te,"aria-describedby":[M,ne].filter(Boolean).join(` `)||void 0,"aria-controls":e[`aria-controls`],"aria-haspopup":s,"aria-expanded":e[`aria-expanded`]};S.selectionMode!==`none`&&!C&&(re[`aria-checked`]=E),o&&(re[`aria-posinset`]=O?.index,re[`aria-setsize`]=jT(t.collection));let ie=(0,_O.useRef)(!1),ae=e=>{d?.(e),ie.current=e},oe=(0,_O.useRef)(null),se=e=>{e.pointerType!==`keyboard`&&(oe.current={pointerType:e.pointerType}),e.pointerType===`mouse`&&(ie.current||e.target.click()),l?.(e)},ce=e=>{p?.(e),A(),ab(e,ee,O.props.href,O?.props.routerOptions);let t=oe.current?.pointerType===`keyboard`?oe.current?.key===`Enter`||S.selectionMode===`none`||S.isLink(i):S.selectionMode!==`multiple`||S.isLink(i);t=a??t,k&&!C&&t&&k(),oe.current=null},{itemProps:le,isFocused:ue}=mT({id:r,selectionManager:S,key:i,ref:n,shouldSelectOnPressUp:!0,allowsDifferentPressOrigin:!0,linkBehavior:`none`,shouldUseVirtualFocus:D.shouldUseVirtualFocus}),{pressProps:de,isPressed:fe}=tx({onPressStart:c,onPress:u,onPressUp:se,onPressChange:ae,onPressEnd:f,isDisabled:T}),{hoverProps:pe}=Nx({isDisabled:T,onHoverStart(e){!_x()&&!(w&&s)&&(S.setFocused(!0),S.setFocusedKey(i)),m?.(e)},onHoverChange:h,onHoverEnd:g}),{keyboardProps:me}=Tx({onKeyDown:e=>{if(e.repeat){e.continuePropagation();return}switch(e.key){case` `:oe.current={pointerType:`keyboard`,key:` `},e.target.click();break;case`Enter`:oe.current={pointerType:`keyboard`,key:`Enter`},e.target.tagName!==`A`&&e.target.click();break;default:C||e.continuePropagation(),_?.(e);break}},onKeyUp:v}),{focusProps:he}=Cx({onBlur:x,onFocus:y,onFocusChange:b}),ge=Gy(O?.props);delete ge.id;let _e=ib(O?.props);return{menuItemProps:{...re,...B(ge,_e,C?{onFocus:le.onFocus,"data-collection":le[`data-collection`],"data-key":le[`data-key`]}:le,de,pe,me,he,D.shouldUseVirtualFocus||C?{onMouseDown:e=>e.preventDefault()}:void 0,T?void 0:{onClick:ce}),tabIndex:le.tabIndex!=null&&w&&!D.shouldUseVirtualFocus?-1:le.tabIndex},labelProps:{id:te},descriptionProps:{id:M},keyboardShortcutProps:{id:ne},isFocused:ue,isFocusVisible:ue&&S.isFocused&&_x()&&!w,isSelected:E,isPressed:fe,isDisabled:T}}function NT(e){let{heading:t,"aria-label":n}=e,r=jy();return{itemProps:{role:`presentation`},headingProps:t?{id:r,role:`presentation`}:{},groupProps:{role:`group`,"aria-label":n,"aria-labelledby":t?r:void 0}}}function PT(e){let{menuRef:t,submenuRef:n,isOpen:r,isDisabled:i}=e,a=(0,vO.useRef)(void 0),o=(0,vO.useRef)(void 0),s=(0,vO.useRef)(0),c=(0,vO.useRef)(void 0),l=(0,vO.useRef)(void 0),u=(0,vO.useRef)(void 0),d=(0,vO.useRef)(2),[f,p]=(0,vO.useState)(!1);hb({ref:n,onResize:()=>{n.current&&(o.current=n.current.getBoundingClientRect(),u.current=void 0)}});let m=()=>{p(!1),d.current=qI,a.current=void 0},h=yx(),g=fb(e=>{f&&e.preventDefault()});(0,vO.useEffect)(()=>{f&&t.current?t.current.style.pointerEvents=`none`:t.current.style.pointerEvents=``},[t,f]),(0,vO.useEffect)(()=>{let e=n.current,f=t.current;if(i||!e||!r||h!==`pointer`||!f){m();return}o.current=e.getBoundingClientRect();let _=e=>{if(e.pointerType===`touch`||e.pointerType===`pen`)return;let t=Date.now();if(t-s.currento.current.right?`left`:`right`,nf.getBoundingClientRect().right||rf.getBoundingClientRect().bottom){m();return}let i=a.current.x,h=a.current.y,g=u.current===`right`?o.current.left-i:i-o.current.right,_=Math.atan2(h-o.current.top,g)+XI,v=Math.atan2(h-o.current.bottom,g)-XI,y=Math.atan2(h-r,u.current===`left`?-(n-i):n-i),b=y<_&&y>v;d.current=b?Math.min(d.current+1,qI):Math.max(d.current-1,0),d.current>=qI?p(!0):p(!1),s.current=t,a.current={x:n,y:r},b&&(c.current=setTimeout(()=>{m(),l.current=setTimeout(()=>{let e=document.elementFromPoint(n,r);e&&f.contains(e)&&e.dispatchEvent(new PointerEvent(`pointerover`,{bubbles:!0,cancelable:!0}))},100)},YI))};return window.addEventListener(`pointermove`,_),window.addEventListener(`pointerdown`,g,!0),()=>{window.removeEventListener(`pointermove`,_),window.removeEventListener(`pointerdown`,g,!0),clearTimeout(c.current),clearTimeout(l.current),d.current=qI}},[i,r,t,h,p,g,n])}function FT(e,t,n){let{parentMenuRef:r,submenuRef:i,type:a=`menu`,isDisabled:o,delay:s=200,shouldUseVirtualFocus:c}=e,l=jy(),u=jy(),{direction:d}=uS(),f=(0,yO.useRef)(void 0),p=(0,yO.useCallback)(()=>{f.current&&=(clearTimeout(f.current),void 0)},[f]),m=fb(e=>{p(),t.open(e)}),h=fb(()=>{p(),t.close()});Y(()=>()=>{p()},[p]);let g=e=>{if(e.currentTarget.contains(document.activeElement))switch(e.key){case`ArrowLeft`:d===`ltr`&&e.currentTarget.contains(e.target)&&(e.preventDefault(),e.stopPropagation(),h(),!c&&n.current&&Ky(n.current));break;case`ArrowRight`:d===`rtl`&&e.currentTarget.contains(e.target)&&(e.preventDefault(),e.stopPropagation(),h(),!c&&n.current&&Ky(n.current));break;case`Escape`:var t;(t=i.current)!=null&&t.contains(e.target)&&(e.stopPropagation(),h(),!c&&n.current&&Ky(n.current));break}},_={id:u,"aria-labelledby":l,submenuLevel:t.submenuLevel,...a===`menu`&&{onClose:t.closeAll,autoFocus:t.focusStrategy??void 0,onKeyDown:g}},v=e=>{switch(e.key){case`ArrowRight`:o||(d===`ltr`?(e.preventDefault(),t.isOpen||m(`first`),a===`menu`&&i?.current&&document.activeElement===n?.current&&Ky(i.current)):t.isOpen?h():e.continuePropagation());break;case`ArrowLeft`:o||(d===`rtl`?(e.preventDefault(),t.isOpen||m(`first`),a===`menu`&&i?.current&&document.activeElement===n?.current&&Ky(i.current)):t.isOpen?h():e.continuePropagation());break;default:e.continuePropagation();break}},y=e=>{!o&&(e.pointerType===`virtual`||e.pointerType===`keyboard`)&&m(`first`)},b=e=>{!o&&(e.pointerType===`touch`||e.pointerType===`mouse`)&&m()},x=e=>{o||(e&&!t.isOpen?f.current||=setTimeout(()=>{m()},s):e||p())};Cb(r,`focusin`,e=>{var i;t.isOpen&&(i=r.current)!=null&&i.contains(e.target)&&e.target!==n.current&&h()});let S=e=>e!==n.current;return PT({menuRef:r,submenuRef:i,isOpen:t.isOpen,isDisabled:o}),{submenuTriggerProps:{id:l,"aria-controls":t.isOpen?u:void 0,"aria-haspopup":o?void 0:a,"aria-expanded":t.isOpen?`true`:`false`,onPressStart:y,onPress:b,onHoverChange:x,onKeyDown:v,isOpen:t.isOpen},submenuProps:_,popoverProps:{isNonModal:!0,shouldCloseOnInteractOutside:S}}}function IT(e){let t=hw(e),[n,r]=(0,bO.useState)(null),[i,a]=(0,bO.useState)([]),o=()=>{a([]),t.close()};return{focusStrategy:n,...t,open(e=null){r(e),t.open()},toggle(e=null){r(e),t.toggle()},close(){o()},expandedKeysStack:i,openSubmenu:(e,t)=>{a(n=>t>n.length?n:[...n.slice(0,t),e])},closeSubmenu:(e,t)=>{a(n=>n[t]===e?n.slice(0,t):n)}}}function LT(e,t){let{triggerKey:n}=e,{expandedKeysStack:r,openSubmenu:i,closeSubmenu:a,close:o}=t,[s]=(0,xO.useState)(r?.length),c=(0,xO.useMemo)(()=>r[s]===n,[r,n,s]),[l,u]=(0,xO.useState)(null),d=(0,xO.useCallback)(e=>{u(e??null),i(n,s)},[i,s,n]),f=(0,xO.useCallback)(()=>{u(null),a(n,s)},[a,s,n]),p=(0,xO.useCallback)(e=>{u(e??null),c?f():d(e)},[f,d,c]);return(0,xO.useMemo)(()=>({focusStrategy:l,isOpen:c,open:d,close:f,closeAll:o,submenuLevel:s,setOpen:()=>{},toggle:p}),[c,d,f,o,l,p,s])}function RT(e,t){if(e.size!==t.size)return!1;for(let n of e)if(!t.has(n))return!1;return!0}function zT(e){let{selectionMode:t=`none`,disallowEmptySelection:n=!1,allowDuplicateSelectionEvents:r,selectionBehavior:i=`toggle`,disabledBehavior:a=`all`}=e,o=(0,SO.useRef)(!1),[,s]=(0,SO.useState)(!1),c=(0,SO.useRef)(null),l=(0,SO.useRef)(null),[,u]=(0,SO.useState)(null),[d,f]=zb((0,SO.useMemo)(()=>BT(e.selectedKeys),[e.selectedKeys]),(0,SO.useMemo)(()=>BT(e.defaultSelectedKeys,new QI),[e.defaultSelectedKeys]),e.onSelectionChange),p=(0,SO.useMemo)(()=>e.disabledKeys?new Set(e.disabledKeys):new Set,[e.disabledKeys]),[m,h]=(0,SO.useState)(i);i===`replace`&&m===`toggle`&&typeof d==`object`&&d.size===0&&h(`replace`);let g=(0,SO.useRef)(i);return(0,SO.useEffect)(()=>{i!==g.current&&(h(i),g.current=i)},[i]),{selectionMode:t,disallowEmptySelection:n,selectionBehavior:m,setSelectionBehavior:h,get isFocused(){return o.current},setFocused(e){o.current=e,s(e)},get focusedKey(){return c.current},get childFocusStrategy(){return l.current},setFocusedKey(e,t=`first`){c.current=e,l.current=t,u(e)},selectedKeys:d,setSelectedKeys(e){(r||!RT(e,d))&&f(e)},disabledKeys:p,disabledBehavior:a}}function BT(e,t){return e?e===`all`?`all`:new QI(e):t}function VT(e){let{onExpandedChange:t}=e,[n,r]=zb(e.expandedKeys?new Set(e.expandedKeys):void 0,e.defaultExpandedKeys?new Set(e.defaultExpandedKeys):new Set,t),i=zT(e),a=(0,CO.useMemo)(()=>e.disabledKeys?new Set(e.disabledKeys):new Set,[e.disabledKeys]),o=TT(e,(0,CO.useCallback)(e=>new ZI(e,{expandedKeys:n}),[n]),null);return(0,CO.useEffect)(()=>{i.focusedKey!=null&&!o.getItem(i.focusedKey)&&i.setFocusedKey(null)},[o,i.focusedKey]),{collection:o,expandedKeys:n,disabledKeys:a,toggleKey:e=>{r(HT(n,e))},setExpandedKeys:r,selectionManager:new $I(o,i)}}function HT(e,t){let n=new Set(e);return n.has(t)?n.delete(t):n.add(t),n}function UT({props:e,collection:t,menuRef:n}){[e,n]=Bx(e,n,NI);let{filter:r,...i}=e,a=(0,G.useMemo)(()=>r?t.filter(r):t,[t,r]),o=VT({...e,collection:a,children:void 0}),s=(0,G.useContext)(nL),{isVirtualized:c,CollectionRoot:l}=(0,G.useContext)(MI),{menuProps:u}=vT({...e,isVirtualized:c,onClose:e.onClose||s?.close},o,n),d=Rx({defaultClassName:`react-aria-Menu`,className:e.className,style:e.style,values:{isEmpty:o.collection.size===0}}),f=null;o.collection.size===0&&e.renderEmptyState&&(f=G.createElement(`div`,{role:`menuitem`,style:{display:`contents`}},e.renderEmptyState()));let p=Gy(e,{global:!0});return G.createElement(gC,null,G.createElement(`div`,{...B(p,d,u),ref:n,slot:e.slot||void 0,"data-empty":o.collection.size===0||void 0,onScroll:e.onScroll},G.createElement(Lx,{values:[[tL,o],[LI,{elementType:`div`}],[AI,{name:`MenuSection`,render:WT}],[iL,{parentMenuRef:n,shouldUseVirtualFocus:i?.shouldUseVirtualFocus}],[sL,null],[NI,null],[PI,null],[rL,o.selectionManager],[nL,s??IT({})]]},G.createElement(l,{collection:o.collection,persistedKeys:aT(o.selectionManager.focusedKey),scrollRef:n})),f))}function WT(e,t,n,r=`react-aria-MenuSection`){let i=(0,G.useContext)(tL),{CollectionBranch:a}=(0,G.useContext)(MI),[o,s]=Vx(),{headingProps:c,groupProps:l}=NT({heading:s,"aria-label":n.props[`aria-label`]??void 0}),u=Rx({defaultClassName:r,className:n.props?.className,style:n.props?.style,values:{}}),d=(0,G.useContext)(rL),f=zT(e),p=e.selectionMode==null?d:new oL(d,f),m=Gy(e,{global:!0});return delete m.id,G.createElement(`section`,{...B(m,u,l),ref:t},G.createElement(Lx,{values:[[FI,{...c,ref:o}],[rL,p]]},G.createElement(a,{collection:i.collection,parent:n})))}function GT(e,t){let{role:n=`dialog`}=e,r=Ny();r=e[`aria-label`]?void 0:r;let i=(0,wO.useRef)(!1);return(0,wO.useEffect)(()=>{if(t.current&&!t.current.contains(document.activeElement)){Sx(t.current);let e=setTimeout(()=>{(document.activeElement===t.current||document.activeElement===document.body)&&(i.current=!0,t.current&&(t.current.blur(),Sx(t.current)),i.current=!1)},500);return()=>{clearTimeout(e)}}},[t]),pw(),{dialogProps:{...Gy(e,{labelable:!0}),role:n,tabIndex:-1,"aria-labelledby":e[`aria-labelledby`]||r,onBlur:e=>{i.current&&e.stopPropagation()}},titleProps:{id:r}}}function KT(e){let t=IT(e),n=(0,TO.useRef)(null),{triggerProps:r,overlayProps:i}=GC({type:`dialog`},t,n),[a,o]=(0,TO.useState)(null);return hb({ref:n,onResize:(0,TO.useCallback)(()=>{n.current&&o(n.current.offsetWidth+`px`)},[n])}),r.id=jy(),i[`aria-labelledby`]=r.id,TO.createElement(Lx,{values:[[lL,t],[nL,t],[cL,i],[DI,{trigger:`DialogTrigger`,triggerRef:n,"aria-labelledby":i[`aria-labelledby`],style:{"--trigger-width":a}}]]},TO.createElement(rj,{...r,ref:n,isPressed:t.isOpen},e.children))}function qT({children:e,...t},n){let r={props:t,ref:n};if(zL(r))return MO.createElement(`a`,{ref:r.ref,...r.props},e);if(BL(r))return MO.createElement(`button`,{ref:r.ref,type:`button`,...r.props},e);throw Error(`invalid props`)}function JT(e){$L("The `useList` tabs hook is deprecated. Use `TabsView` instead.");let t=(0,FO.useRef)(),n=(0,FO.useRef)(),r=(0,FO.useRef)(new Map),{width:i=1}=ww({ref:t}),[a,o]=(0,FO.useState)(e),[s,c]=(0,FO.useState)([]),l=(0,FO.useRef)(e),u=(0,FO.useCallback)(({menuName:e,actions:t})=>{let i=s.some(({active:e})=>e),[a,o]=(0,FO.useState)(!1);return FO.createElement(FO.Fragment,null,FO.createElement(uL,{ariaLabel:`Additional tabs`,visible:a,onVisibleChange:o,placement:`bottom`,popover:FO.createElement(OL,{links:s.map(({title:e,id:n,color:r,active:i})=>({id:n,title:e,color:r,active:i,onClick:e=>{e.preventDefault(),t.onSelect(n)}}))})},FO.createElement(tR,{id:`addons-menu-button`,ref:n,active:i,preActive:a,style:{visibility:s.length?`visible`:`hidden`},"aria-hidden":!s.length,className:`tabbutton`,type:`button`,role:`tab`},e,FO.createElement(eR,{className:`addon-collapsible-icon`,isActive:i||a}))),s.map(({title:e,id:t,color:n},i)=>{let a=`index-${i}`;return FO.createElement(UL,{id:`tabbutton-${bf(t)??a}`,style:{visibility:`hidden`},"aria-hidden":!0,tabIndex:-1,ref:e=>{r.current.set(t,e)},className:`tabbutton`,type:`button`,key:t,textColor:n,role:`tab`},e)}))},[s]),d=(0,FO.useCallback)(()=>{if(!t.current||!n.current)return;let{x:i,width:u}=t.current.getBoundingClientRect(),{width:d}=n.current.getBoundingClientRect(),f=s.length?i+u-d:i+u,p=[],m=0,h=e.filter(e=>{let{id:t}=e,n=r.current.get(t),{width:a=0}=n?.getBoundingClientRect()||{},o=i+m+a>f;return(!o||!n)&&p.push(e),m+=a,o});(p.length!==a.length||l.current!==e)&&(o(p),c(h),l.current=e)},[s.length,e,a]);return(0,FO.useLayoutEffect)(d,[d,i]),{tabRefs:r,addonsRef:n,tabBarRef:t,visibleList:a,invisibleList:s,AddonTab:u}}function YT(e,t){let{"aria-label":n,"aria-labelledby":r,orientation:i=`horizontal`}=e,[a,o]=(0,LO.useState)(!1);Y(()=>{var e;o(!!(t.current&&(e=t.current.parentElement)!=null&&e.closest(`[role="toolbar"]`)))});let{direction:s}=uS(),c=s===`rtl`&&i===`horizontal`,l=IC(t),u=e=>{if(e.currentTarget.contains(e.target)){if(i===`horizontal`&&e.key===`ArrowRight`||i===`vertical`&&e.key===`ArrowDown`)c?l.focusPrevious():l.focusNext();else if(i===`horizontal`&&e.key===`ArrowLeft`||i===`vertical`&&e.key===`ArrowUp`)c?l.focusNext():l.focusPrevious();else if(e.key===`Tab`){e.stopPropagation(),d.current=document.activeElement,e.shiftKey?l.focusFirst():l.focusLast();return}else return;e.stopPropagation(),e.preventDefault()}},d=(0,LO.useRef)(null),f=e=>{!e.currentTarget.contains(e.relatedTarget)&&!d.current&&(d.current=e.target)},p=e=>{var n;if(d.current&&!e.currentTarget.contains(e.relatedTarget)&&(n=t.current)!=null&&n.contains(e.target)){var r;(r=d.current)==null||r.focus(),d.current=null}};return{toolbarProps:{...Gy(e,{labelable:!0}),role:a?`group`:`toolbar`,"aria-orientation":i,"aria-label":n,"aria-labelledby":n==null?r:void 0,onKeyDownCapture:a?void 0:u,onFocusCapture:a?void 0:p,onBlurCapture:a?void 0:f}}}function XT(e,t,n){return e?(typeof t==`string`&&(t=t.replace(/\s+/g,``)),`${pR.get(e)}-${n}-${t}`):``}function ZT(e,t,n){let{key:r,isDisabled:i,shouldSelectOnPressUp:a}=e,{selectionManager:o,selectedKey:s}=t,c=r===s,l=i||t.isDisabled||t.selectionManager.isDisabled(r),{itemProps:u,isPressed:d}=mT({selectionManager:o,key:r,ref:n,isDisabled:l,shouldSelectOnPressUp:a,linkBehavior:`selection`}),f=XT(t,r,`tab`),p=XT(t,r,`tabpanel`),{tabIndex:m}=u,h=t.collection.getItem(r),g=Gy(h?.props,{labelable:!0});delete g.id;let _=ib(h?.props),{focusableProps:v}=Dx({isDisabled:l},n);return{tabProps:B(g,v,_,u,{id:f,"aria-selected":c,"aria-disabled":l||void 0,"aria-controls":c?p:void 0,tabIndex:l?void 0:m,role:`tab`}),isSelected:c,isDisabled:l,isPressed:d}}function QT(e,t,n){let r=zC(n)?void 0:0,i=XT(t,e.id??t?.selectedKey,`tabpanel`);return{tabPanelProps:B(ub({...e,id:i,"aria-labelledby":XT(t,t?.selectedKey,`tab`)}),{tabIndex:r,role:`tabpanel`,"aria-describedby":e[`aria-describedby`],"aria-details":e[`aria-details`]})}}function $T(e,t,n){let{orientation:r=`horizontal`,keyboardActivation:i=`automatic`}=e,{collection:a,selectionManager:o,disabledKeys:s}=t,{direction:c}=uS(),{collectionProps:l}=pT({ref:n,selectionManager:o,keyboardDelegate:(0,RO.useMemo)(()=>new mR(a,c,r,s),[a,s,r,c]),selectOnFocus:i===`automatic`,disallowEmptySelection:!0,scrollRef:n,linkBehavior:`selection`}),u=jy();return pR.set(t,u),{tabListProps:{...B(l,ub({...e,id:u})),role:`tablist`,"aria-orientation":r,tabIndex:void 0}}}function eE(e){let{filter:t,layoutDelegate:n}=e,r=zT(e),i=(0,VO.useMemo)(()=>e.disabledKeys?new Set(e.disabledKeys):new Set,[e.disabledKeys]),a=TT(e,(0,VO.useCallback)(e=>t?new ER(t(e)):new ER(e),[t]),(0,VO.useMemo)(()=>({suppressTextValueWarning:e.suppressTextValueWarning}),[e.suppressTextValueWarning])),o=(0,VO.useMemo)(()=>new $I(a,r,{layoutDelegate:n}),[a,r,n]);return tE(a,o),{collection:a,disabledKeys:i,selectionManager:o}}function tE(e,t){let n=(0,VO.useRef)(null);(0,VO.useEffect)(()=>{if(t.focusedKey!=null&&!e.getItem(t.focusedKey)&&n.current){let r=n.current.getItem(t.focusedKey),i=[...n.current.getKeys()].map(e=>{let t=n.current.getItem(e);return t?.type===`item`?t:null}).filter(e=>e!==null),a=[...e.getKeys()].map(t=>{let n=e.getItem(t);return n?.type===`item`?n:null}).filter(e=>e!==null),o=(i?.length??0)-(a?.length??0),s=Math.min(o>1?Math.max((r?.index??0)-o+1,0):r?.index??0,(a?.length??0)-1),c=null,l=!1;for(;s>=0;){if(!t.isDisabled(a[s].key)){c=a[s];break}s(r?.index??0)&&(s=r?.index??0),s--)}t.setFocusedKey(c?c.key:null)}n.current=e},[e,t])}function nE(e){let[t,n]=zb(e.selectedKey,e.defaultSelectedKey??null,e.onSelectionChange),r=(0,HO.useMemo)(()=>t==null?[]:[t],[t]),{collection:i,disabledKeys:a,selectionManager:o}=eE({...e,selectionMode:`single`,disallowEmptySelection:!0,allowDuplicateSelectionEvents:!0,selectedKeys:r,onSelectionChange:r=>{if(r===`all`)return;let i=r.values().next().value??null;i===t&&e.onSelectionChange&&e.onSelectionChange(i),n(i)}});return{collection:i,disabledKeys:a,selectionManager:o,selectedKey:t,setSelectedKey:n,selectedItem:t==null?null:i.getItem(t)}}function rE(e){let t=nE({...e,onSelectionChange:e.onSelectionChange?t=>{var n;t!=null&&((n=e.onSelectionChange)==null||n.call(e,t))}:void 0,suppressTextValueWarning:!0,defaultSelectedKey:e.defaultSelectedKey??iE(e.collection,e.disabledKeys?new Set(e.disabledKeys):new Set)??void 0}),{selectionManager:n,collection:r,selectedKey:i}=t,a=(0,UO.useRef)(i);return(0,UO.useEffect)(()=>{let o=i;e.selectedKey==null&&(n.isEmpty||o==null||!r.getItem(o))&&(o=iE(r,t.disabledKeys),o!=null&&n.setSelectedKeys([o])),(o!=null&&n.focusedKey==null||!n.isFocused&&o!==a.current)&&n.setFocusedKey(o),a.current=o}),{...t,isDisabled:e.isDisabled||!1}}function iE(e,t){let n=null;if(e){var r,i,a,o;for(n=e.getFirstKey();n!=null&&(t.has(n)||!((i=e.getItem(n))==null||(r=i.props)==null)&&r.isDisabled)&&n!==e.getLastKey();)n=e.getKeyAfter(n);n!=null&&(t.has(n)||!((o=e.getItem(n))==null||(a=o.props)==null)&&a.isDisabled)&&n===e.getLastKey()&&(n=e.getFirstKey())}return n}function aE({props:e,tabsRef:t,collection:n}){let{orientation:r=`horizontal`}=e,i=rE({...e,collection:n,children:void 0}),{focusProps:a,isFocused:o,isFocusVisible:s}=RC({within:!0}),c=(0,q.useMemo)(()=>({orientation:r,isFocusWithin:o,isFocusVisible:s}),[r,o,s]),l=Rx({...e,defaultClassName:`react-aria-Tabs`,values:c}),u=Gy(e,{global:!0});return q.createElement(`div`,{...B(u,l,a),ref:t,slot:e.slot||void 0,"data-focused":o||void 0,"data-orientation":r,"data-focus-visible":s||void 0,"data-disabled":i.isDisabled||void 0},q.createElement(Lx,{values:[[MR,e],[NR,i]]},l.children))}function oE({props:e,forwardedRef:t}){let n=(0,q.useContext)(NR),{CollectionRoot:r}=(0,q.useContext)(MI),{orientation:i=`horizontal`,keyboardActivation:a=`automatic`}=zx(MR),o=db(t),{tabListProps:s}=$T({...e,orientation:i,keyboardActivation:a},n,o),c=Rx({...e,children:null,defaultClassName:`react-aria-TabList`,values:{orientation:i,state:n}}),l=Gy(e,{global:!0});return delete l.id,q.createElement(`div`,{...B(l,c,s),ref:o,"data-orientation":i||void 0},q.createElement(r,{collection:n.collection,persistedKeys:aT(n.selectionManager.focusedKey)}))}var sE,cE,lE,uE,dE,fE,pE,mE,hE,gE,_E,vE,yE,bE,xE,SE,CE,wE,TE,EE,DE,OE,kE,AE,jE,ME,NE,PE,FE,IE,LE,RE,zE,BE,VE,HE,UE,WE,GE,KE,qE,JE,YE,XE,ZE,QE,$E,eD,tD,nD,rD,iD,aD,oD,sD,cD,lD,uD,dD,fD,pD,mD,hD,gD,_D,vD,yD,bD,xD,SD,CD,wD,TD,ED,DD,OD,kD,AD,jD,MD,ND,PD,FD,H,ID,LD,RD,zD,BD,VD,HD,UD,WD,GD,KD,qD,JD,YD,XD,ZD,QD,U,$D,eO,tO,nO,W,rO,iO,aO,oO,sO,cO,lO,uO,dO,fO,pO,mO,hO,gO,_O,vO,yO,bO,xO,SO,CO,G,wO,TO,EO,DO,OO,kO,AO,jO,MO,NO,PO,FO,IO,LO,K,RO,zO,BO,VO,HO,UO,q,WO,J,GO,KO,qO,JO,YO,XO,ZO,QO,$O,ek,tk,nk,rk,ik,ak,ok,sk,ck,lk,uk,dk,fk,pk,mk,hk,gk,_k,vk,yk,bk,xk,Sk,Ck,wk,Tk,Ek,Dk,Ok,kk,Ak,jk,Mk,Nk,Pk,Fk,Ik,Lk,Rk,zk,Bk,Vk,Hk,Uk,Wk,Y,Gk,Kk,qk,Jk,Yk,Xk,Zk,Qk,X,$k,eA,tA,nA,rA,iA,aA,oA,sA,cA,lA,uA,dA,fA,pA,mA,hA,gA,_A,vA,yA,bA,xA,SA,CA,wA,TA,EA,DA,OA,kA,AA,jA,MA,NA,PA,FA,IA,LA,RA,zA,BA,VA,HA,UA,WA,GA,KA,qA,JA,YA,XA,ZA,QA,$A,ej,tj,nj,rj,ij,aj,oj,sj,cj,lj,uj,dj,fj,pj,mj,hj,gj,_j,vj,yj,bj,xj,Sj,Cj,Z,wj,Tj,Ej,Dj,Q,Oj,kj,Aj,jj,Mj,Nj,Pj,Fj,Ij,Lj,Rj,zj,Bj,Vj,Hj,Uj,Wj,Gj,Kj,qj,Jj,Yj,Xj,Zj,Qj,$j,eM,tM,nM,rM,iM,aM,oM,sM,cM,lM,uM,dM,fM,pM,mM,hM,gM,_M,vM,yM,bM,xM,SM,CM,wM,TM,EM,DM,OM,kM,AM,$,jM,MM,NM,PM,FM,IM,LM,RM,zM,BM,VM,HM,UM,WM,GM,KM,qM,JM,YM,XM,ZM,QM,$M,eN,tN,nN,rN,iN,aN,oN,sN,cN,lN,uN,dN,fN,pN,mN,hN,gN,_N,vN,yN,bN,xN,SN,CN,wN,TN,EN,DN,ON,kN,AN,jN,MN,NN,PN,FN,IN,LN,RN,zN,BN,VN,HN,UN,WN,GN,KN,qN,JN,YN,XN,ZN,QN,$N,eP,tP,nP,rP,iP,aP,oP,sP,cP,lP,uP,dP,fP,pP,mP,hP,gP,_P,vP,yP,bP,xP,SP,CP,wP,TP,EP,DP,OP,kP,AP,jP,MP,NP,PP,FP,IP,LP,RP,zP,BP,VP,HP,UP,WP,GP,KP,qP,JP,YP,XP,ZP,QP,$P,eF,tF,nF,rF,iF,aF,oF,sF,cF,lF,uF,dF,fF,pF,mF,hF,gF,_F,vF,yF,bF,xF,SF,CF,wF,TF,EF,DF,OF,kF,AF,jF,MF,NF,PF,FF,IF,LF,RF,zF,BF,VF,HF,UF,WF,GF,KF,qF,JF,YF,XF,ZF,QF,$F,eI,tI,nI,rI,iI,aI,oI,sI,cI,lI,uI,dI,fI,pI,mI,hI,gI,_I,vI,yI,bI,xI,SI,CI,wI,TI,EI,DI,OI,kI,AI,jI,MI,NI,PI,FI,II,LI,RI,zI,BI,VI,HI,UI,WI,GI,KI,qI,JI,YI,XI,ZI,QI,$I,eL,tL,nL,rL,iL,aL,oL,sL,cL,lL,uL,dL,fL,pL,mL,hL,gL,_L,vL,yL,bL,xL,SL,CL,wL,TL,EL,DL,OL,kL,AL,jL,ML,NL,PL,FL,IL,LL,RL,zL,BL,VL,HL,UL,WL,GL,KL,qL,JL,YL,XL,ZL,QL,$L,eR,tR,nR,rR,iR,aR,oR,sR,cR,lR,uR,dR,fR,pR,mR,hR,gR,_R,vR,yR,bR,xR,SR,CR,wR,TR,ER,DR,OR,kR,AR,jR,MR,NR,PR,FR,IR,LR,RR,zR,BR,VR,HR,UR,WR,GR,KR,qR,JR,YR,XR,ZR,QR,$R=t((()=>{me(),ue(),T(),x(),ve(),ce(),m(),sE=e(b(),1),cE=e(b(),1),w(),lE=e(b(),1),uE=e(b(),1),dE=e(b(),1),b(),fE=e(b(),1),He(),pE=e(b(),1),mE=e(b(),1),hE=e(b(),1),b(),gE=pe(),ly(),_E=e(b(),1),vE=e(b(),1),yE=e(b(),1),bE=e(b(),1),xE=e(b(),1),SE=e(b(),1),CE=e(b(),1),wE=e(b(),1),b(),TE=e(b(),1),EE=e(b(),1),DE=e(b(),1),b(),OE=e(b(),1),kE=e(b(),1),b(),AE=e(b(),1),jE=e(b(),1),b(),b(),b(),b(),ME=e(b(),1),NE=e(de(),1),PE=e(b(),1),FE=e(b(),1),IE=e(b(),1),LE=e(b(),1),de(),RE=e(b(),1),zE=e(b(),1),BE=e(b(),1),VE=e(b(),1),HE=e(b(),1),UE=e(b(),1),WE=e(b(),1),GE=e(b(),1),KE=e(b(),1),b(),b(),qE=e(b(),1),JE=e(b(),1),YE=e(b(),1),XE=e(b(),1),ZE=e(b(),1),QE=e(b(),1),$E=e(b(),1),eD=e(b(),1),b(),tD=e(b(),1),b(),b(),nD=e(b(),1),b(),rD=e(b(),1),iD=e(b(),1),b(),aD=e(b(),1),oD=e(b(),1),sD=e(b(),1),cD=e(b(),1),lD=e(b(),1),uD=e(de(),1),dD=e(b(),1),fD=e(b(),1),pD=e(b(),1),mD=e(b(),1),hD=e(de(),1),gD=e(b(),1),_D=e(b(),1),vD=e(b(),1),yD=e(b(),1),bD=e(b(),1),xD=e(b(),1),SD=e(b(),1),CD=e(b(),1),wD=e(b(),1),TD=e(b(),1),ED=e(b(),1),b(),DD=e(b(),1),OD=e(b(),1),kD=e(b(),1),AD=e(b(),1),jD=e(b(),1),b(),b(),MD=e(b(),1),ND=e(b(),1),PD=e(b(),1),FD=e(b(),1),H=e(b(),1),ID=e(b(),1),LD=e(b(),1),RD=e(b(),1),zD=e(b(),1),BD=e(b(),1),VD=e(b(),1),HD=e(b(),1),UD=e(b(),1),WD=e(b(),1),GD=e(b(),1),KD=e(b(),1),qD=e(b(),1),JD=e(b(),1),YD=e(b(),1),XD=e(b(),1),ZD=e(b(),1),QD=e(de(),1),U=e(b(),1),$D=dy(),eO=e(b(),1),tO=e(b(),1),b(),nO=e(b(),1),W=e(b(),1),rO=e(b(),1),iO=e(b(),1),aO=e(b(),1),oO=e(b(),1),sO=e(b(),1),cO=e(b(),1),lO=e(de(),1),uO=e(b(),1),dO=e(b(),1),fO=e(b(),1),pO=e(b(),1),mO=e(b(),1),hO=e(b(),1),gO=e(b(),1),_O=e(b(),1),vO=e(b(),1),yO=e(b(),1),bO=e(b(),1),xO=e(b(),1),SO=e(b(),1),CO=e(b(),1),G=e(b(),1),wO=e(b(),1),TO=e(b(),1),EO=e(b(),1),DO=e(b(),1),b(),OO=e(b(),1),kO=e(b(),1),AO=e(b(),1),Cf(),jO=e(b(),1),MO=e(b(),1),NO=e(b(),1),PO=e(b(),1),FO=e(b(),1),b(),b(),IO=e(b(),1),LO=e(b(),1),K=e(b(),1),RO=e(b(),1),zO=e(b(),1),BO=e(b(),1),VO=e(b(),1),HO=e(b(),1),UO=e(b(),1),b(),q=e(b(),1),b(),b(),b(),b(),b(),WO=e(b(),1),b(),b(),i(),J=({...e},t)=>{let n=[e.class,e.className];return delete e.class,e.className=[`sbdocs`,`sbdocs-${t}`,...n].filter(Boolean).join(` `),e},GO=({theme:e})=>({margin:`20px 0 8px`,padding:0,cursor:`text`,position:`relative`,color:e.color.defaultText,"&:first-of-type":{marginTop:0,paddingTop:0},"&:hover a.anchor":{textDecoration:`none`},"& tt, & code":{fontSize:`inherit`}}),KO=({theme:e})=>({lineHeight:1,margin:`0 2px`,padding:`3px 5px`,whiteSpace:`nowrap`,borderRadius:3,fontSize:e.typography.size.s2-1,border:e.base===`light`?`1px solid hsl(0 0 0 / 0.05)`:`1px solid hsl(0 0 100 / 0.05)`,color:e.color.defaultText,backgroundColor:e.base===`light`?`hsl(0 0 0 / 0.01)`:`hsl(0 0 100 / 0.02)`}),qO=({theme:e})=>({fontFamily:e.typography.fonts.base,fontSize:e.typography.size.s3,margin:0,WebkitFontSmoothing:`antialiased`,MozOsxFontSmoothing:`grayscale`,WebkitTapHighlightColor:`rgba(0, 0, 0, 0)`,WebkitOverflowScrolling:`touch`}),JO={margin:`16px 0`},YO=E.div(qO),XO=({href:e=``,...t})=>{let n=/^\//.test(e)?`./?path=${e}`:e,r=/^#.*/.test(e)?`_self`:`_top`;return lE.createElement(`a`,{href:n,target:r,...t})},ZO=E(XO)(({theme:e})=>({...qO({theme:e}),fontSize:`inherit`,lineHeight:`24px`,color:e.color.secondary,textDecoration:`underline`,textDecorationThickness:`0.03125rem`,textUnderlineOffset:`0.11em`,"&.absent":{color:`#cc0000`},"&.anchor":{display:`block`,paddingLeft:30,marginLeft:-30,cursor:`pointer`,position:`absolute`,top:0,left:0,bottom:0,textDecoration:`none`},"&.anchor:hover, &.anchor:focus":{textDecoration:`underline`}})),QO=E.blockquote(({theme:e})=>({...qO({theme:e}),...JO,borderLeft:`4px solid ${e.color.medium}`,padding:`0 15px`,color:e.color.dark,"& > :first-of-type":{marginTop:0},"& > :last-child":{marginBottom:0}})),$O=[],ek=null,tk=(0,dE.lazy)(async()=>{let{SyntaxHighlighter:e}=await a(async()=>{let{SyntaxHighlighter:e}=await import(`./syntaxhighlighter-OH4MV7E3-DFku4BmC.js`);return{SyntaxHighlighter:e}},__vite__mapDeps([7,1,2,3,4,8,5,9,0,6]),import.meta.url);return $O.length>0&&($O.forEach(t=>{e.registerLanguage(...t)}),$O=[]),ek===null&&(ek=e),{default:t=>dE.createElement(e,{...t})}}),nk=(0,dE.lazy)(async()=>{let[{SyntaxHighlighter:e},{formatter:t}]=await Promise.all([a(()=>import(`./syntaxhighlighter-OH4MV7E3-DFku4BmC.js`),__vite__mapDeps([7,1,2,3,4,8,5,9,0,6]),import.meta.url),a(()=>import(`./formatter-EIJCOSYU-CVNaCVyv.js`),__vite__mapDeps([10,1,2,3,4,6]),import.meta.url)]);return $O.length>0&&($O.forEach(t=>{e.registerLanguage(...t)}),$O=[]),ek===null&&(ek=e),{default:n=>dE.createElement(e,{...n,formatter:t})}}),rk=e=>dE.createElement(dE.Suspense,{fallback:dE.createElement(`div`,null)},e.format===!1?dE.createElement(tk,{...e}):dE.createElement(nk,{...e})),rk.registerLanguage=(...e)=>{if(ek!==null){ek.registerLanguage(...e);return}$O.push(e)},ik=e=>typeof e==`string`,ak=/[\n\r]/g,ok=E.code(({theme:e})=>({fontFamily:e.typography.fonts.mono,WebkitFontSmoothing:`antialiased`,MozOsxFontSmoothing:`grayscale`,display:`inline-block`,paddingLeft:2,paddingRight:2,verticalAlign:`baseline`,color:`inherit`,...KO({theme:e})})),sk=E(rk)(({theme:e})=>({fontFamily:e.typography.fonts.mono,fontSize:`${e.typography.size.s2-1}px`,lineHeight:`19px`,margin:`25px 0 40px`,borderRadius:e.appBorderRadius,boxShadow:e.base===`light`?`rgba(0, 0, 0, 0.10) 0 1px 3px 0`:`rgba(0, 0, 0, 0.20) 0 2px 5px 0`,"pre.prismjs":{padding:20,background:`inherit`}})),ck=({className:e,children:t,...n})=>{let r=(e||``).match(/lang-(\S+)/),i=uE.Children.toArray(t);return i.filter(ik).some(e=>e.match(ak))?uE.createElement(sk,{bordered:!0,copyable:!0,language:r?.[1]??`text`,format:!1,...n},t):uE.createElement(ok,{...n,className:e},i)},lk=E.dl(({theme:e})=>({...qO({theme:e}),...JO,padding:0,"& dt":{fontSize:`14px`,fontWeight:`bold`,fontStyle:`italic`,padding:0,margin:`16px 0 4px`},"& dt:first-of-type":{padding:0},"& dt > :first-of-type":{marginTop:0},"& dt > :last-child":{marginBottom:0},"& dd":{margin:`0 0 16px`,padding:`0 15px`},"& dd > :first-of-type":{marginTop:0},"& dd > :last-child":{marginBottom:0}})),uk=E.div(qO),dk=E.h1(({theme:e})=>({...qO({theme:e}),...GO({theme:e}),fontSize:`${e.typography.size.l1}px`,fontWeight:e.typography.weight.bold})),fk=E.h2(({theme:e})=>({...qO({theme:e}),...GO({theme:e}),fontSize:`${e.typography.size.m2}px`,paddingBottom:4,borderBottom:`1px solid ${e.appBorderColor}`})),pk=E.h3(({theme:e})=>({...qO({theme:e}),...GO({theme:e}),fontSize:`${e.typography.size.m1}px`})),mk=E.h4(({theme:e})=>({...qO({theme:e}),...GO({theme:e}),fontSize:`${e.typography.size.s3}px`})),hk=E.h5(({theme:e})=>({...qO({theme:e}),...GO({theme:e}),fontSize:`${e.typography.size.s2}px`})),gk=E.h6(({theme:e})=>({...qO({theme:e}),...GO({theme:e}),fontSize:`${e.typography.size.s2}px`,color:e.color.dark})),_k=E.hr(({theme:e})=>({border:`0 none`,borderTop:`1px solid ${e.appBorderColor}`,height:4,padding:0})),vk=E.img({maxWidth:`100%`}),yk=E.li(({theme:e})=>({...qO({theme:e}),fontSize:e.typography.size.s2,color:e.color.defaultText,lineHeight:`24px`,"& + li":{marginTop:`.25em`},"& ul, & ol":{marginTop:`.25em`,marginBottom:0},"& code":KO({theme:e})})),bk={paddingLeft:30,"& :first-of-type":{marginTop:0},"& :last-child":{marginBottom:0}},xk=E.ol(({theme:e})=>({...qO({theme:e}),...JO,...bk,listStyle:`decimal`})),Sk=E.p(({theme:e})=>({...qO({theme:e}),...JO,fontSize:e.typography.size.s2,lineHeight:`24px`,color:e.color.defaultText,"& code":KO({theme:e})})),Ck=E.pre(({theme:e})=>({...qO({theme:e}),...JO,fontFamily:e.typography.fonts.mono,WebkitFontSmoothing:`antialiased`,MozOsxFontSmoothing:`grayscale`,lineHeight:`18px`,padding:`11px 1rem`,whiteSpace:`pre-wrap`,color:`inherit`,borderRadius:3,margin:`1rem 0`,"&:not(.prismjs)":{background:`transparent`,border:`none`,borderRadius:0,padding:0,margin:0},"& pre, &.prismjs":{padding:15,margin:0,whiteSpace:`pre-wrap`,color:`inherit`,fontSize:`13px`,lineHeight:`19px`,code:{color:`inherit`,fontSize:`inherit`}},"& code":{whiteSpace:`pre`},"& code, & tt":{border:`none`}})),wk=E.span(({theme:e})=>({...qO({theme:e}),"&.frame":{display:`block`,overflow:`hidden`,"& > span":{border:`1px solid ${e.color.medium}`,display:`block`,float:`left`,overflow:`hidden`,margin:`13px 0 0`,padding:7,width:`auto`},"& span img":{display:`block`,float:`left`},"& span span":{clear:`both`,color:e.color.darkest,display:`block`,padding:`5px 0 0`}},"&.align-center":{display:`block`,overflow:`hidden`,clear:`both`,"& > span":{display:`block`,overflow:`hidden`,margin:`13px auto 0`,textAlign:`center`},"& span img":{margin:`0 auto`,textAlign:`center`}},"&.align-right":{display:`block`,overflow:`hidden`,clear:`both`,"& > span":{display:`block`,overflow:`hidden`,margin:`13px 0 0`,textAlign:`right`},"& span img":{margin:0,textAlign:`right`}},"&.float-left":{display:`block`,marginRight:13,overflow:`hidden`,float:`left`,"& span":{margin:`13px 0 0`}},"&.float-right":{display:`block`,marginLeft:13,overflow:`hidden`,float:`right`,"& > span":{display:`block`,overflow:`hidden`,margin:`13px auto 0`,textAlign:`right`}}})),Tk=E.title(KO),Ek=E.table(({theme:e})=>({...qO({theme:e}),...JO,fontSize:e.typography.size.s2,lineHeight:`24px`,padding:0,borderCollapse:`collapse`,"& tr":{borderTop:`1px solid ${e.appBorderColor}`,backgroundColor:e.appContentBg,margin:0,padding:0},"& tr:nth-of-type(2n)":{backgroundColor:e.base===`dark`?e.color.darker:e.color.lighter},"& tr th":{fontWeight:`bold`,color:e.color.defaultText,border:`1px solid ${e.appBorderColor}`,margin:0,padding:`6px 13px`},"& tr td":{border:`1px solid ${e.appBorderColor}`,color:e.color.defaultText,margin:0,padding:`6px 13px`},"& tr th :first-of-type, & tr td :first-of-type":{marginTop:0},"& tr th :last-child, & tr td :last-child":{marginBottom:0}})),Dk={paddingLeft:30,"& :first-of-type":{marginTop:0},"& :last-child":{marginBottom:0}},Ok=E.ul(({theme:e})=>({...qO({theme:e}),...JO,...Dk,listStyle:`disc`})),kk={h1:e=>cE.createElement(dk,{...J(e,`h1`)}),h2:e=>cE.createElement(fk,{...J(e,`h2`)}),h3:e=>cE.createElement(pk,{...J(e,`h3`)}),h4:e=>cE.createElement(mk,{...J(e,`h4`)}),h5:e=>cE.createElement(hk,{...J(e,`h5`)}),h6:e=>cE.createElement(gk,{...J(e,`h6`)}),pre:e=>cE.createElement(Ck,{...J(e,`pre`)}),a:e=>cE.createElement(ZO,{...J(e,`a`)}),hr:e=>cE.createElement(_k,{...J(e,`hr`)}),dl:e=>cE.createElement(lk,{...J(e,`dl`)}),blockquote:e=>cE.createElement(QO,{...J(e,`blockquote`)}),table:e=>cE.createElement(Ek,{...J(e,`table`)}),img:e=>cE.createElement(vk,{...J(e,`img`)}),div:e=>cE.createElement(uk,{...J(e,`div`)}),span:e=>cE.createElement(wk,{...J(e,`span`)}),li:e=>cE.createElement(yk,{...J(e,`li`)}),ul:e=>cE.createElement(Ok,{...J(e,`ul`)}),ol:e=>cE.createElement(xk,{...J(e,`ol`)}),p:e=>cE.createElement(Sk,{...J(e,`p`)}),code:e=>cE.createElement(ck,{...J(e,`code`)}),tt:e=>cE.createElement(Tk,{...J(e,`tt`)}),resetwrapper:e=>cE.createElement(YO,{...J(e,`resetwrapper`)})},E.div(({theme:e,compact:t})=>({display:`inline-flex`,alignItems:`center`,justifyContent:`center`,fontSize:e.typography.size.s1,fontWeight:e.typography.weight.bold,lineHeight:`12px`,minWidth:20,borderRadius:20,padding:t?`4px 7px`:`4px 10px`}),{svg:{height:12,width:12,marginRight:4,marginTop:-2,path:{fill:`currentColor`}}},({theme:e,status:t})=>{switch(t){case`critical`:return{color:e.fgColor.critical,background:e.bgColor.critical,boxShadow:`inset 0 0 0 1px ${e.borderColor.critical}`};case`negative`:return{color:e.fgColor.negative,background:e.bgColor.negative,boxShadow:`inset 0 0 0 1px ${e.borderColor.negative}`};case`warning`:return{color:e.fgColor.warning,background:e.bgColor.warning,boxShadow:`inset 0 0 0 1px ${e.borderColor.warning}`};case`neutral`:return{color:e.fgColor.muted,background:e.base===`dark`?e.barBg:e.background.app,boxShadow:`inset 0 0 0 1px ${ae(.8,e.textMutedColor)}`};case`positive`:return{color:e.fgColor.positive,background:e.bgColor.positive,boxShadow:`inset 0 0 0 1px ${e.borderColor.positive}`};case`active`:return{color:e.base===`light`?C(.1,e.color.secondary):e.color.secondary,background:e.background.hoverable,boxShadow:`inset 0 0 0 1px ${ae(.9,e.color.secondary)}`};default:return{}}}),{deprecate:Ak}=__STORYBOOK_MODULE_CLIENT_LOGGER__,jk=0,Mk=e=>e.button===jk&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey,Nk=(e,t)=>{Mk(e)&&(e.preventDefault(),t(e))},Pk=E.span(({withArrow:e})=>e?{"> svg:last-of-type":{height:`0.7em`,width:`0.7em`,marginRight:0,marginLeft:`0.25em`,bottom:`auto`,verticalAlign:`inherit`}}:{},({containsIcon:e})=>e?{svg:{height:`1em`,width:`1em`,verticalAlign:`middle`,position:`relative`,bottom:0,marginRight:0}}:{}),Fk=E.a(({theme:e})=>({display:`inline-block`,transition:`all 150ms ease-out`,textDecoration:`none`,color:e.color.secondary,"&:hover, &:focus":{cursor:`pointer`,color:C(.07,e.color.secondary),"svg path:not([fill])":{fill:C(.07,e.color.secondary)}},"&:active":{color:C(.1,e.color.secondary),"svg path:not([fill])":{fill:C(.1,e.color.secondary)}},svg:{display:`inline-block`,height:`1em`,width:`1em`,verticalAlign:`text-top`,position:`relative`,bottom:`-0.125em`,marginRight:`0.4em`,"& path":{fill:e.color.secondary}}}),({theme:e,secondary:t,tertiary:n})=>{let r;return t&&(r=[e.textMutedColor,e.color.secondary,e.color.secondary]),n&&(r=[e.color.dark,e.color.secondary,e.color.secondary]),r?{color:r[0],"svg path:not([fill])":{fill:r[0]},"&:hover":{color:r[1],"svg path:not([fill])":{fill:r[1]}},"&:active":{color:r[2],"svg path:not([fill])":{fill:r[2]}}}:{}},({nochrome:e})=>e?{color:`inherit`,"&:hover, &:active":{color:`inherit`,textDecoration:`underline`}}:{},({theme:e,inverse:t})=>t?{color:e.color.lightest,":not([fill])":{fill:e.color.lightest},"&:hover":{color:e.color.lighter,"svg path:not([fill])":{fill:e.color.lighter}},"&:active":{color:e.color.light,"svg path:not([fill])":{fill:e.color.light}}}:{},({isButton:e,theme:t})=>e?{border:0,borderRadius:t.input.borderRadius,background:`none`,padding:0,fontSize:`inherit`,lineHeight:`inherit`,"&:focus-visible":{outline:`2px solid ${t.color.secondary}`,outlineOffset:2,zIndex:`1`}}:{}),Ik=(0,fE.forwardRef)(({cancel:e=!0,children:t,onClick:n=void 0,withArrow:r=!1,containsIcon:i=!1,className:a=void 0,isButton:o=void 0,href:s,...c},l)=>(o!==void 0&&Ak("Link: `isButton` is deprecated and will be removed in Storybook 11. Links without a `href` are automatically rendered as buttons."),fE.createElement(Fk,{as:s?`a`:`button`,href:s,...c,ref:l,isButton:!s||o===!0,onClick:n&&e?e=>Nk(e,n):n,className:a},fE.createElement(Pk,{withArrow:r,containsIcon:i},t,r&&fE.createElement(Fe,null))))),Ik.displayName=`Link`,E.div(({theme:e})=>({fontSize:`${e.typography.size.s2}px`,lineHeight:`1.6`,h1:{fontSize:`${e.typography.size.l1}px`,fontWeight:e.typography.weight.bold},h2:{fontSize:`${e.typography.size.m2}px`,borderBottom:`1px solid ${e.appBorderColor}`},h3:{fontSize:`${e.typography.size.m1}px`},h4:{fontSize:`${e.typography.size.s3}px`},h5:{fontSize:`${e.typography.size.s2}px`},h6:{fontSize:`${e.typography.size.s2}px`,color:e.color.dark},"pre:not(.prismjs)":{background:`transparent`,border:`none`,borderRadius:0,padding:0,margin:0},"pre pre, pre.prismjs":{padding:15,margin:0,whiteSpace:`pre-wrap`,color:`inherit`,fontSize:`13px`,lineHeight:`19px`},"pre pre code, pre.prismjs code":{color:`inherit`,fontSize:`inherit`},"pre code":{margin:0,padding:0,whiteSpace:`pre`,border:`none`,background:`transparent`},"pre code, pre tt":{backgroundColor:`transparent`,border:`none`},"body > *:first-of-type":{marginTop:`0 !important`},"body > *:last-child":{marginBottom:`0 !important`},a:{color:e.color.secondary,textDecoration:`underline`,textDecorationThickness:`0.03125rem`,textUnderlineOffset:`0.11em`},"a.absent":{color:`#cc0000`},"a.anchor":{display:`block`,paddingLeft:30,marginLeft:-30,cursor:`pointer`,position:`absolute`,top:0,left:0,bottom:0,textDecoration:`none`},"&.anchor:hover, &.anchor:focus":{textDecoration:`underline`},"h1, h2, h3, h4, h5, h6":{margin:`20px 0 10px`,padding:0,cursor:`text`,position:`relative`,"&:first-of-type":{marginTop:0,paddingTop:0},"&:hover a.anchor":{textDecoration:`none`},"& tt, & code":{fontSize:`inherit`}},"h1:first-of-type + h2":{marginTop:0,paddingTop:0},"p, blockquote, ul, ol, dl, li, table, pre":{margin:`15px 0`},hr:{border:`0 none`,borderTop:`1px solid ${e.appBorderColor}`,height:4,padding:0},"body > h1:first-of-type, body > h2:first-of-type, body > h3:first-of-type, body > h4:first-of-type, body > h5:first-of-type, body > h6:first-of-type":{marginTop:0,paddingTop:0},"body > h1:first-of-type + h2":{marginTop:0,paddingTop:0},"a:first-of-type h1, a:first-of-type h2, a:first-of-type h3, a:first-of-type h4, a:first-of-type h5, a:first-of-type h6":{marginTop:0,paddingTop:0},"h1 p, h2 p, h3 p, h4 p, h5 p, h6 p":{marginTop:0},"li p.first":{display:`inline-block`},"ul, ol":{paddingLeft:30,"& :first-of-type":{marginTop:0},"& :last-child":{marginBottom:0}},dl:{padding:0},"dl dt":{fontSize:`14px`,fontWeight:`bold`,fontStyle:`italic`,margin:`0 0 15px`,padding:`0 15px`,"&:first-of-type":{padding:0},"& > :first-of-type":{marginTop:0},"& > :last-child":{marginBottom:0}},blockquote:{borderLeft:`4px solid ${e.color.medium}`,padding:`0 15px`,color:e.color.dark,"& > :first-of-type":{marginTop:0},"& > :last-child":{marginBottom:0}},table:{padding:0,borderCollapse:`collapse`,"& tr":{borderTop:`1px solid ${e.appBorderColor}`,backgroundColor:`white`,margin:0,padding:0,"& th":{fontWeight:`bold`,border:`1px solid ${e.appBorderColor}`,textAlign:`left`,margin:0,padding:`6px 13px`},"& td":{border:`1px solid ${e.appBorderColor}`,textAlign:`left`,margin:0,padding:`6px 13px`},"&:nth-of-type(2n)":{backgroundColor:e.color.lighter},"& th :first-of-type, & td :first-of-type":{marginTop:0},"& th :last-child, & td :last-child":{marginBottom:0}}},img:{maxWidth:`100%`},"span.frame":{display:`block`,overflow:`hidden`,"& > span":{border:`1px solid ${e.color.medium}`,display:`block`,float:`left`,overflow:`hidden`,margin:`13px 0 0`,padding:7,width:`auto`},"& span img":{display:`block`,float:`left`},"& span span":{clear:`both`,color:e.color.darkest,display:`block`,padding:`5px 0 0`}},"span.align-center":{display:`block`,overflow:`hidden`,clear:`both`,"& > span":{display:`block`,overflow:`hidden`,margin:`13px auto 0`,textAlign:`center`},"& span img":{margin:`0 auto`,textAlign:`center`}},"span.align-right":{display:`block`,overflow:`hidden`,clear:`both`,"& > span":{display:`block`,overflow:`hidden`,margin:`13px 0 0`,textAlign:`right`},"& span img":{margin:0,textAlign:`right`}},"span.float-left":{display:`block`,marginRight:13,overflow:`hidden`,float:`left`,"& span":{margin:`13px 0 0`}},"span.float-right":{display:`block`,marginLeft:13,overflow:`hidden`,float:`right`,"& > span":{display:`block`,overflow:`hidden`,margin:`13px auto 0`,textAlign:`right`}},"code, tt":{margin:`0 2px`,padding:`0 5px`,whiteSpace:`nowrap`,border:`1px solid ${e.color.mediumlight}`,backgroundColor:e.color.lighter,borderRadius:3,color:e.base===`dark`?e.color.darkest:e.color.dark}})),{deprecate:Lk}=__STORYBOOK_MODULE_CLIENT_LOGGER__,Rk=Symbol.for(`react.lazy`),zk=hE.use,Bk=_y(`Slot`),Vk=Symbol(`radix.slottable`),yy(`Slottable`),Hk=E.div(({theme:e})=>({padding:`2px 6px`,lineHeight:`16px`,fontSize:10,fontWeight:e.typography.weight.bold,color:e.color.lightest,boxShadow:`0 0 5px 0 rgba(0, 0, 0, 0.3)`,borderRadius:4,whiteSpace:`nowrap`,pointerEvents:`none`,zIndex:-1,background:e.base===`light`?`rgba(60, 60, 60, 0.9)`:`rgba(0, 0, 0, 0.95)`})),Uk=({note:e,...t})=>vE.createElement(Hk,{...t},e),{deprecate:Wk}=__STORYBOOK_MODULE_CLIENT_LOGGER__,Y=typeof document<`u`?bE.useLayoutEffect:()=>{},Gk={prefix:String(Math.round(Math.random()*1e10)),current:0},Kk=CE.createContext(Gk),qk=CE.createContext(!1),typeof window<`u`&&window.document&&window.document.createElement,Jk=new WeakMap,Yk=typeof CE.useId==`function`?Ey:Ty,Xk=!!(typeof window<`u`&&window.document&&window.document.createElement),Zk=new Map,typeof FinalizationRegistry<`u`&&(Qk=new FinalizationRegistry(e=>{Zk.delete(e)})),X=e=>e?.ownerDocument??document,$k=e=>e&&`window`in e&&e.window===e?e:X(e).defaultView||window,eA=!1,tA=(e=document)=>{var t;if(!Ly())return e.activeElement;let n=e.activeElement;for(;n&&`shadowRoot`in n&&(t=n.shadowRoot)!=null&&t.activeElement;)n=n.shadowRoot.activeElement;return n},nA=class{get currentNode(){return this._currentNode}set currentNode(e){if(!Ry(this.root,e))throw Error(`Cannot set currentNode to a node that is not contained by the root node.`);let t=[],n=e,r=e;for(this._currentNode=e;n&&n!==this.root;)if(n.nodeType===Node.DOCUMENT_FRAGMENT_NODE){let e=n,i=this._doc.createTreeWalker(e,this.whatToShow,{acceptNode:this._acceptNode});t.push(i),i.currentNode=r,this._currentSetFor.add(i),n=r=e.host}else n=n.parentNode;let i=this._doc.createTreeWalker(this.root,this.whatToShow,{acceptNode:this._acceptNode});t.push(i),i.currentNode=r,this._currentSetFor.add(i),this._walkerStack=t}get doc(){return this._doc}firstChild(){let e=this.currentNode,t=this.nextNode();return Ry(e,t)?(t&&(this.currentNode=t),t):(this.currentNode=e,null)}lastChild(){let e=this._walkerStack[0].lastChild();return e&&(this.currentNode=e),e}nextNode(){let e=this._walkerStack[0].nextNode();if(e){if(e.shadowRoot){var t;let n;if(typeof this.filter==`function`?n=this.filter(e):(t=this.filter)!=null&&t.acceptNode&&(n=this.filter.acceptNode(e)),n===NodeFilter.FILTER_ACCEPT)return this.currentNode=e,e;let r=this.nextNode();return r&&(this.currentNode=r),r}return e&&(this.currentNode=e),e}else if(this._walkerStack.length>1){this._walkerStack.shift();let e=this.nextNode();return e&&(this.currentNode=e),e}else return null}previousNode(){let e=this._walkerStack[0];if(e.currentNode===e.root){if(this._currentSetFor.has(e))if(this._currentSetFor.delete(e),this._walkerStack.length>1){this._walkerStack.shift();let e=this.previousNode();return e&&(this.currentNode=e),e}else return null;return null}let t=e.previousNode();if(t){if(t.shadowRoot){var n;let e;if(typeof this.filter==`function`?e=this.filter(t):(n=this.filter)!=null&&n.acceptNode&&(e=this.filter.acceptNode(t)),e===NodeFilter.FILTER_ACCEPT)return t&&(this.currentNode=t),t;let r=this.lastChild();return r&&(this.currentNode=r),r}return t&&(this.currentNode=t),t}else if(this._walkerStack.length>1){this._walkerStack.shift();let e=this.previousNode();return e&&(this.currentNode=e),e}else return null}nextSibling(){return null}previousSibling(){return null}parentNode(){return null}constructor(e,t,n,r){this._walkerStack=[],this._currentSetFor=new Set,this._acceptNode=e=>{if(e.nodeType===Node.ELEMENT_NODE){let n=e.shadowRoot;if(n){let e=this._doc.createTreeWalker(n,this.whatToShow,{acceptNode:this._acceptNode});return this._walkerStack.unshift(e),NodeFilter.FILTER_ACCEPT}else{var t;if(typeof this.filter==`function`)return this.filter(e);if((t=this.filter)!=null&&t.acceptNode)return this.filter.acceptNode(e);if(this.filter===null)return NodeFilter.FILTER_ACCEPT}}return NodeFilter.FILTER_SKIP},this._doc=e,this.root=t,this.filter=r??null,this.whatToShow=n??NodeFilter.SHOW_ALL,this._currentNode=t,this._walkerStack.unshift(e.createTreeWalker(t,n,this._acceptNode));let i=t.shadowRoot;if(i){let e=this._doc.createTreeWalker(i,this.whatToShow,{acceptNode:this._acceptNode});this._walkerStack.unshift(e)}}},rA=Hy,iA=new Set([`id`]),aA=new Set([`aria-label`,`aria-labelledby`,`aria-describedby`,`aria-details`]),oA=new Set([`href`,`hrefLang`,`target`,`rel`,`download`,`ping`,`referrerPolicy`]),sA=new Set([`dir`,`lang`,`hidden`,`inert`,`translate`]),cA=new Set(`onClick.onAuxClick.onContextMenu.onDoubleClick.onMouseDown.onMouseEnter.onMouseLeave.onMouseMove.onMouseOut.onMouseOver.onMouseUp.onTouchCancel.onTouchEnd.onTouchMove.onTouchStart.onPointerDown.onPointerMove.onPointerUp.onPointerCancel.onPointerEnter.onPointerLeave.onPointerOver.onPointerOut.onGotPointerCapture.onLostPointerCapture.onScroll.onWheel.onAnimationStart.onAnimationEnd.onAnimationIteration.onTransitionCancel.onTransitionEnd.onTransitionRun.onTransitionStart`.split(`.`)),lA=/^(data-.*)$/,uA=null,dA=Qy(function(){return Zy(/^Mac/i)}),fA=Qy(function(){return Zy(/^iPhone/i)}),pA=Qy(function(){return Zy(/^iPad/i)||dA()&&navigator.maxTouchPoints>1}),mA=Qy(function(){return fA()||pA()}),hA=Qy(function(){return dA()||mA()}),gA=Qy(function(){return Xy(/AppleWebKit/i)&&!_A()}),_A=Qy(function(){return Xy(/Chrome/i)}),vA=Qy(function(){return Xy(/Android/i)}),yA=Qy(function(){return Xy(/Firefox/i)}),bA=(0,wE.createContext)({isNative:!0,open:rb,useHref:e=>e}),tb.isOpening=!1,xA=new Map,SA=new Set,typeof document<`u`&&(document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,ob):ob()),CA=DE.useInsertionEffect??Y,wA=new Set([`checkbox`,`radio`,`range`,`color`,`file`,`image`,`button`,`submit`,`reset`]),typeof document<`u`&&window.visualViewport,TA=0,EA=new Map,DA=`react-aria-clear-focus`,OA=`react-aria-focus`,kA=typeof Element<`u`&&`checkVisibility`in Element.prototype,AA=[`input:not([disabled]):not([type=hidden])`,`select:not([disabled])`,`textarea:not([disabled])`,`button:not([disabled])`,`a[href]`,`area[href]`,`summary`,`iframe`,`object`,`embed`,`audio[controls]`,`video[controls]`,`[contenteditable]:not([contenteditable^="false"])`,`permission`],jA=AA.join(`:not([hidden]),`)+`,[tabindex]:not([disabled]):not([hidden])`,AA.push(`[tabindex]:not([tabindex="-1"]):not([disabled])`),MA=AA.join(`:not([hidden]):not([tabindex="-1"]),`),NA=typeof document<`u`?FE.useInsertionEffect??FE.useLayoutEffect:()=>{},PA=!1,FA=`default`,IA=``,LA=new WeakMap,RA=LE.createContext({register:()=>{}}),RA.displayName=`PressResponderContext`,zA=new WeakMap,BA=class{continuePropagation(){$b(this,zA,!1)}get shouldStopPropagation(){return Yb(this,zA)}constructor(e,t,n,r){Zb(this,zA,{writable:!0,value:void 0}),$b(this,zA,!0);let i=(r?.target??n.currentTarget)?.getBoundingClientRect(),a,o=0,s,c=null;n.clientX!=null&&n.clientY!=null&&(s=n.clientX,c=n.clientY),i&&(s!=null&&c!=null?(a=s-i.left,o=c-i.top):(a=i.width/2,o=i.height/2)),this.type=e,this.pointerType=t,this.target=n.currentTarget,this.shiftKey=n.shiftKey,this.metaKey=n.metaKey,this.ctrlKey=n.ctrlKey,this.altKey=n.altKey,this.x=a,this.y=o}},VA=Symbol(`linkClicked`),HA=`react-aria-pressable-style`,UA=`data-react-aria-pressable`,WA=new Set([`checkbox`,`radio`,`range`,`color`,`file`,`image`,`button`,`submit`,`reset`]),GA=null,KA=new Set,qA=new Map,JA=!1,YA=!1,XA={Tab:!0,Escape:!0},ZA=(e,t)=>{let n=$k(e),r=X(e);t&&r.removeEventListener(`DOMContentLoaded`,t),qA.has(n)&&(n.HTMLElement.prototype.focus=qA.get(n).focus,r.removeEventListener(`keydown`,ux,!0),r.removeEventListener(`keyup`,ux,!0),r.removeEventListener(`click`,fx,!0),n.removeEventListener(`focus`,px,!0),n.removeEventListener(`blur`,mx,!1),typeof PointerEvent<`u`&&(r.removeEventListener(`pointerdown`,dx,!0),r.removeEventListener(`pointermove`,dx,!0),r.removeEventListener(`pointerup`,dx,!0)),qA.delete(n))},typeof document<`u`&&gx(),QA=new Set([`checkbox`,`radio`,`range`,`color`,`file`,`image`,`button`,`submit`,`reset`]),$A=VE.createContext(null),ej=VE.forwardRef(function(e,t){let{children:n,...r}=e,i=db(t),a={...r,ref:i};return VE.createElement($A.Provider,{value:a},n)}),tj=(0,VE.forwardRef)(({children:e,...t},n)=>{n=db(n);let{focusableProps:r}=Dx(t,n),i=VE.Children.only(e);(0,VE.useEffect)(()=>{},[n,t.isDisabled]);let a=i.props.ref;return VE.cloneElement(i,{...B(r,i.props),ref:Uy(a,n)})}),nj=HE.forwardRef(({children:e,...t},n)=>{n=db(n);let{pressProps:r}=tx({...t,ref:n}),{focusableProps:i}=Dx(t,n),a=HE.Children.only(e);(0,HE.useEffect)(()=>{},[n,t.isDisabled]);let o=a.props.ref;return HE.cloneElement(a,{...B(r,i,a.props),ref:Uy(o,n)})}),rj=UE.forwardRef(({children:e,...t},n)=>{let r=(0,UE.useRef)(!1),i=(0,UE.useContext)(RA);n=db(n||i?.ref);let a=B(i||{},{...t,ref:n,register(){r.current=!0,i&&i.register()}});return gb(i,n),(0,UE.useEffect)(()=>{r.current||=!0},[]),UE.createElement(RA.Provider,{value:a},e)}),ij=!1,aj=0,oj=500,sj=Symbol(`default`),cj=(0,YE.createContext)({placement:`bottom`}),(0,YE.forwardRef)(function(e,t){[e,t]=Bx(e,t,cj);let n=e.placement,r={position:`absolute`,transform:n===`top`||n===`bottom`?`translateX(-50%)`:`translateY(-50%)`};n!=null&&(r[n]=`100%`);let i=Rx({...e,defaultClassName:`react-aria-OverlayArrow`,values:{placement:n}});i.style&&Object.keys(i.style).forEach(e=>i.style[e]===void 0&&delete i.style[e]);let a=Gy(e);return YE.createElement(`div`,{...a,...i,style:{...r,...i.style},ref:t,"data-placement":n})}),lj={top:`top`,bottom:`top`,left:`left`,right:`left`},uj={top:`bottom`,bottom:`top`,left:`right`,right:`left`},dj={top:`left`,left:`top`},fj={top:`height`,left:`width`},pj={width:`totalWidth`,height:`totalHeight`},mj={},hj=typeof document<`u`?window.visualViewport:null,gj=new WeakMap,_j=new Set([`Arab`,`Syrc`,`Samr`,`Mand`,`Thaa`,`Mend`,`Nkoo`,`Adlm`,`Rohg`,`Hebr`]),vj=new Set([`ae`,`ar`,`arc`,`bcc`,`bqi`,`ckb`,`dv`,`fa`,`glk`,`he`,`ku`,`mzn`,`nqo`,`pnb`,`ps`,`sd`,`ug`,`ur`,`yi`]),yj=Symbol.for(`react-aria.i18n.locale`),bj=sS(),xj=new Set,Sj=eD.createContext(null),Cj=function(e,t){return Cj=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},Cj(e,t)},Z=function(){return Z=Object.assign||function(e){for(var t,n=1,r=arguments.length;nr;){if(i=e[r++],i>1114111)throw RangeError(i+` is not a valid code point`);t+=i<65536?String.fromCharCode(i):String.fromCharCode(((i-=65536)>>10)+55296,i%1024+56320)}return t}),Zj=Hj?Object.fromEntries:(function(e){for(var t={},n=0,r=e;n=n)){var r=e.charCodeAt(t),i;return r<55296||r>56319||t+1===n||(i=e.charCodeAt(t+1))<56320||i>57343?r:(r-55296<<10)+(i-56320)+65536}}),$j=Wj?(function(e){return e.trimStart()}):(function(e){return e.replace(Rj,``)}),eM=Gj?(function(e){return e.trimEnd()}):(function(e){return e.replace(zj,``)}),qj?(nM=US(`([^\\p{White_Space}\\p{Pattern_Syntax}]*)`,`yu`),tM=function(e,t){return nM.lastIndex=t,nM.exec(e)[1]??``}):tM=function(e,t){for(var n=[];;){var r=Qj(e,t);if(r===void 0||qS(r)||JS(r))break;n.push(r),t+=r>=65536?2:1}return Xj.apply(void 0,n)},rM=(function(){function e(e,t){t===void 0&&(t={}),this.message=e,this.position={offset:0,line:1,column:1},this.ignoreTag=!!t.ignoreTag,this.locale=t.locale,this.requiresOtherClause=!!t.requiresOtherClause,this.shouldParseSkeletons=!!t.shouldParseSkeletons}return e.prototype.parse=function(){if(this.offset()!==0)throw Error(`parser can only be used once`);return this.parseMessage(0,``,!1)},e.prototype.parseMessage=function(e,t,n){for(var r=[];!this.isEOF();){var i=this.char();if(i===123){var a=this.parseArgument(e,n);if(a.err)return a;r.push(a.val)}else{if(i===125&&e>0)break;if(i===35&&(t===`plural`||t===`selectordinal`)){var o=this.clonePosition();this.bump(),r.push({type:Oj.pound,location:V(o,this.clonePosition())})}else if(i===60&&!this.ignoreTag&&this.peek()===47){if(n)break;return this.error(Q.UNMATCHED_CLOSING_TAG,V(this.clonePosition(),this.clonePosition()))}else if(i===60&&!this.ignoreTag&&WS(this.peek()||0)){var a=this.parseTag(e,t);if(a.err)return a;r.push(a.val)}else{var a=this.parseLiteral(e,t);if(a.err)return a;r.push(a.val)}}}return{val:r,err:null}},e.prototype.parseTag=function(e,t){var n=this.clonePosition();this.bump();var r=this.parseTagName();if(this.bumpSpace(),this.bumpIf(`/>`))return{val:{type:Oj.literal,value:`<${r}/>`,location:V(n,this.clonePosition())},err:null};if(this.bumpIf(`>`)){var i=this.parseMessage(e+1,t,!0);if(i.err)return i;var a=i.val,o=this.clonePosition();if(this.bumpIf(``)?{val:{type:Oj.tag,value:r,children:a,location:V(n,this.clonePosition())},err:null}:this.error(Q.INVALID_TAG,V(o,this.clonePosition()))):this.error(Q.UNMATCHED_CLOSING_TAG,V(s,this.clonePosition()))}else return this.error(Q.UNCLOSED_TAG,V(n,this.clonePosition()))}else return this.error(Q.INVALID_TAG,V(n,this.clonePosition()))},e.prototype.parseTagName=function(){var e=this.offset();for(this.bump();!this.isEOF()&&KS(this.char());)this.bump();return this.message.slice(e,this.offset())},e.prototype.parseLiteral=function(e,t){for(var n=this.clonePosition(),r=``;;){var i=this.tryParseQuote(t);if(i){r+=i;continue}var a=this.tryParseUnquoted(e,t);if(a){r+=a;continue}var o=this.tryParseLeftAngleBracket();if(o){r+=o;continue}break}var s=V(n,this.clonePosition());return{val:{type:Oj.literal,value:r,location:s},err:null}},e.prototype.tryParseLeftAngleBracket=function(){return!this.isEOF()&&this.char()===60&&(this.ignoreTag||!GS(this.peek()||0))?(this.bump(),`<`):null},e.prototype.tryParseQuote=function(e){if(this.isEOF()||this.char()!==39)return null;switch(this.peek()){case 39:return this.bump(),this.bump(),`'`;case 123:case 60:case 62:case 125:break;case 35:if(e===`plural`||e===`selectordinal`)break;return null;default:return null}this.bump();var t=[this.char()];for(this.bump();!this.isEOF();){var n=this.char();if(n===39)if(this.peek()===39)t.push(39),this.bump();else{this.bump();break}else t.push(n);this.bump()}return Xj.apply(void 0,t)},e.prototype.tryParseUnquoted=function(e,t){if(this.isEOF())return null;var n=this.char();return n===60||n===123||n===35&&(t===`plural`||t===`selectordinal`)||n===125&&e>0?null:(this.bump(),Xj(n))},e.prototype.parseArgument=function(e,t){var n=this.clonePosition();if(this.bump(),this.bumpSpace(),this.isEOF())return this.error(Q.EXPECT_ARGUMENT_CLOSING_BRACE,V(n,this.clonePosition()));if(this.char()===125)return this.bump(),this.error(Q.EMPTY_ARGUMENT,V(n,this.clonePosition()));var r=this.parseIdentifierIfPossible().value;if(!r)return this.error(Q.MALFORMED_ARGUMENT,V(n,this.clonePosition()));if(this.bumpSpace(),this.isEOF())return this.error(Q.EXPECT_ARGUMENT_CLOSING_BRACE,V(n,this.clonePosition()));switch(this.char()){case 125:return this.bump(),{val:{type:Oj.argument,value:r,location:V(n,this.clonePosition())},err:null};case 44:return this.bump(),this.bumpSpace(),this.isEOF()?this.error(Q.EXPECT_ARGUMENT_CLOSING_BRACE,V(n,this.clonePosition())):this.parseArgumentOptions(e,t,r,n);default:return this.error(Q.MALFORMED_ARGUMENT,V(n,this.clonePosition()))}},e.prototype.parseIdentifierIfPossible=function(){var e=this.clonePosition(),t=this.offset(),n=tM(this.message,t),r=t+n.length;return this.bumpTo(r),{value:n,location:V(e,this.clonePosition())}},e.prototype.parseArgumentOptions=function(e,t,n,r){var i=this.clonePosition(),a=this.parseIdentifierIfPossible().value,o=this.clonePosition();switch(a){case``:return this.error(Q.EXPECT_ARGUMENT_TYPE,V(i,o));case`number`:case`date`:case`time`:this.bumpSpace();var s=null;if(this.bumpIf(`,`)){this.bumpSpace();var c=this.clonePosition(),l=this.parseSimpleArgStyleIfPossible();if(l.err)return l;var u=eM(l.val);if(u.length===0)return this.error(Q.EXPECT_ARGUMENT_STYLE,V(this.clonePosition(),this.clonePosition()));s={style:u,styleLocation:V(c,this.clonePosition())}}var d=this.tryParseArgumentClose(r);if(d.err)return d;var f=V(r,this.clonePosition());if(s&&Yj(s?.style,`::`,0)){var p=$j(s.style.slice(2));if(a===`number`){var l=this.parseNumberSkeletonFromString(p,s.styleLocation);return l.err?l:{val:{type:Oj.number,value:n,location:f,style:l.val},err:null}}else{if(p.length===0)return this.error(Q.EXPECT_DATE_TIME_SKELETON,f);var m=p;this.locale&&(m=VS(p,this.locale));var u={type:kj.dateTime,pattern:m,location:s.styleLocation,parsedOptions:this.shouldParseSkeletons?NS(m):{}};return{val:{type:a===`date`?Oj.date:Oj.time,value:n,location:f,style:u},err:null}}}return{val:{type:a===`number`?Oj.number:a===`date`?Oj.date:Oj.time,value:n,location:f,style:s?.style??null},err:null};case`plural`:case`selectordinal`:case`select`:var h=this.clonePosition();if(this.bumpSpace(),!this.bumpIf(`,`))return this.error(Q.EXPECT_SELECT_ARGUMENT_OPTIONS,V(h,Z({},h)));this.bumpSpace();var g=this.parseIdentifierIfPossible(),_=0;if(a!==`select`&&g.value===`offset`){if(!this.bumpIf(`:`))return this.error(Q.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE,V(this.clonePosition(),this.clonePosition()));this.bumpSpace();var l=this.tryParseDecimalInteger(Q.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE,Q.INVALID_PLURAL_ARGUMENT_OFFSET_VALUE);if(l.err)return l;this.bumpSpace(),g=this.parseIdentifierIfPossible(),_=l.val}var v=this.tryParsePluralOrSelectOptions(e,a,t,g);if(v.err)return v;var d=this.tryParseArgumentClose(r);if(d.err)return d;var y=V(r,this.clonePosition());return a===`select`?{val:{type:Oj.select,value:n,options:Zj(v.val),location:y},err:null}:{val:{type:Oj.plural,value:n,options:Zj(v.val),offset:_,pluralType:a===`plural`?`cardinal`:`ordinal`,location:y},err:null};default:return this.error(Q.INVALID_ARGUMENT_TYPE,V(i,o))}},e.prototype.tryParseArgumentClose=function(e){return this.isEOF()||this.char()!==125?this.error(Q.EXPECT_ARGUMENT_CLOSING_BRACE,V(e,this.clonePosition())):(this.bump(),{val:!0,err:null})},e.prototype.parseSimpleArgStyleIfPossible=function(){for(var e=0,t=this.clonePosition();!this.isEOF();)switch(this.char()){case 39:this.bump();var n=this.clonePosition();if(!this.bumpUntil(`'`))return this.error(Q.UNCLOSED_QUOTE_IN_ARGUMENT_STYLE,V(n,this.clonePosition()));this.bump();break;case 123:e+=1,this.bump();break;case 125:if(e>0)--e;else return{val:this.message.slice(t.offset,this.offset()),err:null};break;default:this.bump();break}return{val:this.message.slice(t.offset,this.offset()),err:null}},e.prototype.parseNumberSkeletonFromString=function(e,t){var n=[];try{n=PS(e)}catch{return this.error(Q.INVALID_NUMBER_SKELETON,t)}return{val:{type:kj.number,tokens:n,location:t,parsedOptions:this.shouldParseSkeletons?BS(n):{}},err:null}},e.prototype.tryParsePluralOrSelectOptions=function(e,t,n,r){for(var i,a=!1,o=[],s=new Set,c=r.value,l=r.location;;){if(c.length===0){var u=this.clonePosition();if(t!==`select`&&this.bumpIf(`=`)){var d=this.tryParseDecimalInteger(Q.EXPECT_PLURAL_ARGUMENT_SELECTOR,Q.INVALID_PLURAL_ARGUMENT_SELECTOR);if(d.err)return d;l=V(u,this.clonePosition()),c=this.message.slice(u.offset,this.offset())}else break}if(s.has(c))return this.error(t===`select`?Q.DUPLICATE_SELECT_ARGUMENT_SELECTOR:Q.DUPLICATE_PLURAL_ARGUMENT_SELECTOR,l);c===`other`&&(a=!0),this.bumpSpace();var f=this.clonePosition();if(!this.bumpIf(`{`))return this.error(t===`select`?Q.EXPECT_SELECT_ARGUMENT_SELECTOR_FRAGMENT:Q.EXPECT_PLURAL_ARGUMENT_SELECTOR_FRAGMENT,V(this.clonePosition(),this.clonePosition()));var p=this.parseMessage(e+1,t,n);if(p.err)return p;var m=this.tryParseArgumentClose(f);if(m.err)return m;o.push([c,{value:p.val,location:V(f,this.clonePosition())}]),s.add(c),this.bumpSpace(),i=this.parseIdentifierIfPossible(),c=i.value,l=i.location}return o.length===0?this.error(t===`select`?Q.EXPECT_SELECT_ARGUMENT_SELECTOR:Q.EXPECT_PLURAL_ARGUMENT_SELECTOR,V(this.clonePosition(),this.clonePosition())):this.requiresOtherClause&&!a?this.error(Q.MISSING_OTHER_CLAUSE,V(this.clonePosition(),this.clonePosition())):{val:o,err:null}},e.prototype.tryParseDecimalInteger=function(e,t){var n=1,r=this.clonePosition();this.bumpIf(`+`)||this.bumpIf(`-`)&&(n=-1);for(var i=!1,a=0;!this.isEOF();){var o=this.char();if(o>=48&&o<=57)i=!0,a=a*10+(o-48),this.bump();else break}var s=V(r,this.clonePosition());return i?(a*=n,Kj(a)?{val:a,err:null}:this.error(t,s)):this.error(e,s)},e.prototype.offset=function(){return this.position.offset},e.prototype.isEOF=function(){return this.offset()===this.message.length},e.prototype.clonePosition=function(){return{offset:this.position.offset,line:this.position.line,column:this.position.column}},e.prototype.char=function(){var e=this.position.offset;if(e>=this.message.length)throw Error(`out of bound`);var t=Qj(this.message,e);if(t===void 0)throw Error(`Offset ${e} is at invalid UTF-16 code unit boundary`);return t},e.prototype.error=function(e,t){return{val:null,err:{kind:e,message:this.message,location:t}}},e.prototype.bump=function(){if(!this.isEOF()){var e=this.char();e===10?(this.position.line+=1,this.position.column=1,this.position.offset+=1):(this.position.column+=1,this.position.offset+=e<65536?1:2)}},e.prototype.bumpIf=function(e){if(Yj(this.message,e,this.offset())){for(var t=0;t=0?(this.bumpTo(n),!0):(this.bumpTo(this.message.length),!1)},e.prototype.bumpTo=function(e){if(this.offset()>e)throw Error(`targetOffset ${e} must be greater than or equal to the current offset ${this.offset()}`);for(e=Math.min(e,this.message.length);;){var t=this.offset();if(t===e)break;if(t>e)throw Error(`targetOffset ${e} is at invalid UTF-16 code unit boundary`);if(this.bump(),this.isEOF())break}},e.prototype.bumpSpace=function(){for(;!this.isEOF()&&qS(this.char());)this.bump()},e.prototype.peek=function(){if(this.isEOF())return null;var e=this.char(),t=this.offset();return this.message.charCodeAt(t+(e>=65536?2:1))??null},e})(),(function(e){e.MISSING_VALUE=`MISSING_VALUE`,e.INVALID_VALUE=`INVALID_VALUE`,e.MISSING_INTL_API=`MISSING_INTL_API`})(iM||={}),aM=(function(e){dS(t,e);function t(t,n,r){var i=e.call(this,t)||this;return i.code=n,i.originalMessage=r,i}return t.prototype.toString=function(){return`[formatjs Error: ${this.code}] ${this.message}`},t})(Error),oM=(function(e){dS(t,e);function t(t,n,r,i){return e.call(this,`Invalid values for "${t}": "${n}". Options are "${Object.keys(r).join(`", "`)}"`,iM.INVALID_VALUE,i)||this}return t})(aM),sM=(function(e){dS(t,e);function t(t,n,r){return e.call(this,`Value for "${t}" must be of type ${n}`,iM.INVALID_VALUE,r)||this}return t})(aM),cM=(function(e){dS(t,e);function t(t,n){return e.call(this,`The intl string context variable "${t}" was not provided to the string "${n}"`,iM.MISSING_VALUE,n)||this}return t})(aM),(function(e){e[e.literal=0]=`literal`,e[e.object=1]=`object`})(lM||={}),(function(){function e(t,n,r,i){n===void 0&&(n=e.defaultLocale);var a=this;if(this.formatterCache={number:{},dateTime:{},pluralRules:{}},this.format=function(e){var t=a.formatToParts(e);if(t.length===1)return t[0].value;var n=t.reduce(function(e,t){return!e.length||t.type!==lM.literal||typeof e[e.length-1]!=`string`?e.push(t.value):e[e.length-1]+=t.value,e},[]);return n.length<=1?n[0]||``:n},this.formatToParts=function(e){return $S(a.ast,a.locales,a.formatters,a.formats,e,void 0,a.message)},this.resolvedOptions=function(){return{locale:a.resolvedLocale?.toString()||Intl.NumberFormat.supportedLocalesOf(a.locales)[0]}},this.getAst=function(){return a.ast},this.locales=n,this.resolvedLocale=e.resolveLocale(n),typeof t==`string`){if(this.message=t,!e.__parse)throw TypeError("IntlMessageFormat.__parse must be set to process `message` of type `string`");var o=i||{};o.formatters;var s=fS(o,[`formatters`]);this.ast=e.__parse(t,Z(Z({},s),{locale:this.resolvedLocale}))}else this.ast=t;if(!Array.isArray(this.ast))throw TypeError(`A message must be provided as a String or AST.`);this.formats=tC(e.formats,r),this.formatters=i&&i.formatters||rC(this.formatterCache)}return Object.defineProperty(e,`defaultLocale`,{get:function(){return e.memoizedDefaultLocale||=new Intl.NumberFormat().resolvedOptions().locale,e.memoizedDefaultLocale},enumerable:!1,configurable:!0}),e.memoizedDefaultLocale=null,e.resolveLocale=function(e){if(!(typeof Intl.Locale>`u`)){var t=Intl.NumberFormat.supportedLocalesOf(e);return t.length>0?new Intl.Locale(t[0]):new Intl.Locale(typeof e==`string`?e:e[0])}},e.__parse=XS,e.formats={number:{integer:{maximumFractionDigits:0},currency:{style:`currency`},percent:{style:`percent`}},date:{short:{month:`numeric`,day:`numeric`,year:`2-digit`},medium:{month:`short`,day:`numeric`,year:`numeric`},long:{month:`long`,day:`numeric`,year:`numeric`},full:{weekday:`long`,month:`long`,day:`numeric`,year:`numeric`}},time:{short:{hour:`numeric`,minute:`numeric`},medium:{hour:`numeric`,minute:`numeric`,second:`numeric`},long:{hour:`numeric`,minute:`numeric`,second:`numeric`,timeZoneName:`short`},full:{hour:`numeric`,minute:`numeric`,second:`numeric`,timeZoneName:`short`}}},e})(),uM=Symbol.for(`react-aria.i18n.locale`),dM=Symbol.for(`react-aria.i18n.strings`),pM=class e{getStringForLocale(e,t){let n=this.getStringsForLocale(t)[e];if(!n)throw Error(`Could not find intl message ${e} in ${t} locale`);return n}getStringsForLocale(e){let t=this.strings[e];return t||(t=iC(e,this.strings,this.defaultLocale),this.strings[e]=t),t}static getGlobalDictionaryForPackage(t){if(typeof window>`u`)return null;let n=window[uM];if(fM===void 0){let t=window[dM];if(!t)return null;fM={};for(let r in t)fM[r]=new e({[n]:t[r]},n)}let r=fM?.[t];if(!r)throw Error(`Strings for package "${t}" were not included by LocalizedStringProvider. Please add it to the list passed to createLocalizedStringDictionary.`);return r}constructor(e,t=`en-US`){this.strings=Object.fromEntries(Object.entries(e).filter(([,e])=>e)),this.defaultLocale=t}},mM=new Map,hM=new Map,gM=class{format(e,t){let n=this.strings.getStringForLocale(e,this.locale);return typeof n==`function`?n(t,this):n}plural(e,t,n=`cardinal`){let r=t[`=`+e];if(r)return typeof r==`function`?r():r;let i=this.locale+`:`+n,a=mM.get(i);return a||(a=new Intl.PluralRules(this.locale,{type:n}),mM.set(i,a)),r=t[a.select(e)]||t.other,typeof r==`function`?r():r}number(e){let t=hM.get(this.locale);return t||(t=new Intl.NumberFormat(this.locale),hM.set(this.locale,t)),t.format(e)}select(e,t){let n=e[t]||e.other;return typeof n==`function`?n():n}constructor(e,t){this.locale=e,this.strings=t}},_M=new WeakMap,vM=1080,yM=24*vM,bM=29,xM=12*vM+793,bM*yM+xM,SM=new Map,CM=!1;try{CM=new Intl.NumberFormat(`de-DE`,{signDisplay:`exceptZero`}).resolvedOptions().signDisplay===`exceptZero`}catch{}wM=!1;try{wM=new Intl.NumberFormat(`de-DE`,{style:`unit`,unit:`degree`}).resolvedOptions().style===`unit`}catch{}if(TM={degree:{narrow:{default:`°`,"ja-JP":` 度`,"zh-TW":`度`,"sl-SI":` °`}}},EM=class{format(e){let t=``;if(t=!CM&&this.options.signDisplay!=null?uC(this.numberFormatter,this.options.signDisplay,e):this.numberFormatter.format(e),this.options.style===`unit`&&!wM){let{unit:e,unitDisplay:n=`short`,locale:r}=this.resolvedOptions();if(!e)return t;let i=TM[e]?.[n];t+=i[r]||i.default}return t}formatToParts(e){return this.numberFormatter.formatToParts(e)}formatRange(e,t){if(typeof this.numberFormatter.formatRange==`function`)return this.numberFormatter.formatRange(e,t);if(t= start date`);return`${this.format(e)} \u2013 ${this.format(t)}`}formatRangeToParts(e,t){if(typeof this.numberFormatter.formatRangeToParts==`function`)return this.numberFormatter.formatRangeToParts(e,t);if(t= start date`);let n=this.numberFormatter.formatToParts(e),r=this.numberFormatter.formatToParts(t);return[...n.map(e=>({...e,source:`startRange`})),{type:`literal`,value:` – `,source:`shared`},...r.map(e=>({...e,source:`endRange`}))]}resolvedOptions(){let e=this.numberFormatter.resolvedOptions();return!CM&&this.options.signDisplay!=null&&(e={...e,signDisplay:this.options.signDisplay}),!wM&&this.options.style===`unit`&&(e={...e,style:`unit`,unit:this.options.unit,unitDisplay:this.options.unitDisplay}),e}constructor(e,t={}){this.numberFormatter=lC(e,t),this.options=t}},DM=new Map,OM=typeof document<`u`?window.visualViewport:null,kM=rD.createContext(null),AM=`react-aria-focus-scope-restore`,$=null,jM=class e{get size(){return this.fastMap.size}getTreeNode(e){return this.fastMap.get(e)}addTreeNode(e,t,n){let r=this.fastMap.get(t??null);if(!r)return;let i=new MM({scopeRef:e});r.addChild(i),i.parent=r,this.fastMap.set(e,i),n&&(i.nodeToRestore=n)}addNode(e){this.fastMap.set(e.scopeRef,e)}removeTreeNode(e){if(e===null)return;let t=this.fastMap.get(e);if(!t)return;let n=t.parent;for(let e of this.traverse())e!==t&&t.nodeToRestore&&e.nodeToRestore&&t.scopeRef&&t.scopeRef.current&&CC(e.nodeToRestore,t.scopeRef.current)&&(e.nodeToRestore=t.nodeToRestore);let r=t.children;n&&(n.removeChild(t),r.size>0&&r.forEach(e=>n&&n.addChild(e))),this.fastMap.delete(t.scopeRef)}*traverse(e=this.root){if(e.scopeRef!=null&&(yield e),e.children.size>0)for(let t of e.children)yield*this.traverse(t)}clone(){let t=new e;for(let e of this.traverse())t.addTreeNode(e.scopeRef,e.parent?.scopeRef??null,e.nodeToRestore);return t}constructor(){this.fastMap=new Map,this.root=new MM({scopeRef:null}),this.fastMap.set(null,this.root)}},MM=class{addChild(e){this.children.add(e),e.parent=this}removeChild(e){this.children.delete(e),e.parent=void 0}constructor(e){this.children=new Set,this.contain=!1,this.scopeRef=e.scopeRef}},NM=new jM,PM=[],FM=typeof document<`u`&&window.visualViewport,IM=0,RM=(0,cD.createContext)({}),zM=lD.createContext(null),BM={},BM={dismiss:`تجاهل`},VM={},VM={dismiss:`Отхвърляне`},HM={},HM={dismiss:`Odstranit`},UM={},UM={dismiss:`Luk`},WM={},WM={dismiss:`Schließen`},GM={},GM={dismiss:`Απόρριψη`},KM={},KM={dismiss:`Dismiss`},qM={},qM={dismiss:`Descartar`},JM={},JM={dismiss:`Lõpeta`},YM={},YM={dismiss:`Hylkää`},XM={},XM={dismiss:`Rejeter`},ZM={},ZM={dismiss:`התעלם`},QM={},QM={dismiss:`Odbaci`},$M={},$M={dismiss:`Elutasítás`},eN={},eN={dismiss:`Ignora`},tN={},tN={dismiss:`閉じる`},nN={},nN={dismiss:`무시`},rN={},rN={dismiss:`Atmesti`},iN={},iN={dismiss:`Nerādīt`},aN={},aN={dismiss:`Lukk`},oN={},oN={dismiss:`Negeren`},sN={},sN={dismiss:`Zignoruj`},cN={},cN={dismiss:`Descartar`},lN={},lN={dismiss:`Dispensar`},uN={},uN={dismiss:`Revocare`},dN={},dN={dismiss:`Пропустить`},fN={},fN={dismiss:`Zrušiť`},pN={},pN={dismiss:`Opusti`},mN={},mN={dismiss:`Odbaci`},hN={},hN={dismiss:`Avvisa`},gN={},gN={dismiss:`Kapat`},_N={},_N={dismiss:`Скасувати`},vN={},vN={dismiss:`取消`},yN={},yN={dismiss:`關閉`},bN={},bN={"ar-AE":BM,"bg-BG":VM,"cs-CZ":HM,"da-DK":UM,"de-DE":WM,"el-GR":GM,"en-US":KM,"es-ES":qM,"et-EE":JM,"fi-FI":YM,"fr-FR":XM,"he-IL":ZM,"hr-HR":QM,"hu-HU":$M,"it-IT":eN,"ja-JP":tN,"ko-KR":nN,"lt-LT":rN,"lv-LV":iN,"nb-NO":aN,"nl-NL":oN,"pl-PL":sN,"pt-BR":cN,"pt-PT":lN,"ro-RO":uN,"ru-RU":dN,"sk-SK":fN,"sl-SI":pN,"sr-SP":mN,"sv-SE":hN,"tr-TR":gN,"uk-UA":_N,"zh-CN":vN,"zh-TW":yN},xN={border:0,clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:`1px`,margin:`-1px`,overflow:`hidden`,padding:0,position:`absolute`,width:`1px`,whiteSpace:`nowrap`},SN=typeof HTMLElement<`u`&&`inert`in HTMLElement.prototype,CN=new WeakMap,wN=[],TN=mD.createContext(null),EN=1500,DN=500,ON={},kN=0,AN=!1,jN=null,MN=null,NN=(0,yD.createContext)(null),PN=(0,yD.createContext)(null),FN=(0,yD.forwardRef)(function({UNSTABLE_portalContainer:e,...t},n){[t,n]=Bx(t,n,PN);let r=(0,yD.useContext)(NN),i=gw(t),a=t.isOpen!=null||t.defaultOpen!=null||!r?i:r,o=jb(n,a.isOpen)||t.isExiting||!1;return!a.isOpen&&!o?null:yD.createElement(iw,{portalContainer:e},yD.createElement(vw,{...t,tooltipRef:n,isExiting:o}))}),IN=h(oe(),1),LN=(0,IN.default)(1e3)(e=>e===`left-end`?`left bottom`:e===`right-end`?`right bottom`:e===`left-start`?`left top`:e===`right-start`?`right top`:e.replace(`-`,` `)),E.div({width:500,height:500,paddingTop:100,overflowY:`scroll`,background:`#eee`,position:`relative`}),RN=(0,bD.forwardRef)((e,t)=>bD.createElement(`button`,{...e,ref:t,style:{width:120,height:50,margin:10}})),RN.displayName=`Trigger`,zN=({triggerOnFocusOnly:e=!1,placement:t=`top`,offset:n=8,tooltip:r,children:i,defaultVisible:a,startOpen:o,delayShow:s=400,delayHide:c=200,visible:l,onVisibleChange:u,...d})=>{let f=LN(t),p=yE.Children.only(i);o!==void 0&&Wk("The `startOpen` prop is deprecated. Please use `defaultVisible` instead.");let[m,h]=(0,yE.useState)(a??o??!1),g=(0,yE.useCallback)(e=>{h(e),u?.(e)},[u]);return yE.createElement(_w,{delay:s,closeDelay:c,isOpen:l??m,onOpenChange:g,trigger:e?`focus`:void 0,...d},yE.createElement(tj,null,yE.cloneElement(p,{"aria-describedby":null})),yE.createElement(FN,{"data-testid":`tooltip`,placement:f,offset:n,onOpenChange:g,style:{outline:`none`},...d},r))},BN=({children:e,disableAllTooltips:t,shortcut:n,tooltip:r})=>{let i=(0,_E.useMemo)(()=>{let e=document?.body?.getAttribute(`data-shortcuts-enabled`)!==`false`;if(!(!r&&(!n||!e)))return[r,n&&e&&`[${v_(n)}]`].filter(Boolean).join(` `)},[n,r]);return i?_E.createElement(zN,{placement:`top`,tooltip:_E.createElement(Uk,{note:i}),visible:t?!1:void 0},e):_E.createElement(_E.Fragment,null,e)},BN.displayName=`InteractiveTooltipWrapper`,VN=(0,mE.forwardRef)(({as:e=`button`,asChild:t=!1,animation:n=`none`,size:r=`small`,variant:i=`outline`,padding:a=`medium`,disabled:o=!1,readOnly:s=!1,active:c,onClick:l,ariaLabel:u,ariaDescription:d=void 0,tooltip:f=void 0,shortcut:p=void 0,disableAllTooltips:m=!1,...h},g)=>{let _=t?Bk:e,v;!s&&(u===void 0||u===``)&&(v=`ariaLabel`,Lk(`The 'ariaLabel' prop on 'Button' will become mandatory in Storybook 11. Buttons with text content should set 'ariaLabel={false}' to indicate that they are accessible as-is. Buttons without text content must provide a meaningful 'ariaLabel' for accessibility. The button content is: ${h.children}.`)),c!==void 0&&(v=`active`,Lk("The `active` prop on `Button` is deprecated and will be removed in Storybook 11. Use specialized components like `ToggleButton` or `Select` instead."));let{ariaDescriptionAttrs:y,AriaDescription:b}=yw(d),x=(0,mE.useMemo)(()=>p?y_(p):void 0,[p]),[S,C]=(0,mE.useState)(!1),w=e=>{l&&l(e),n!==`none`&&C(!0)};return(0,mE.useEffect)(()=>{let e=setTimeout(()=>{S&&C(!1)},1e3);return()=>clearTimeout(e)},[S]),mE.createElement(mE.Fragment,null,mE.createElement(BN,{disableAllTooltips:m,shortcut:p,tooltip:f||(u===!1?void 0:u)},mE.createElement(HN,{"data-deprecated":v,as:_,ref:g,variant:i,size:r,padding:a,$disabled:o||s,"aria-disabled":o||s?`true`:void 0,readOnly:s,active:c,animating:S,animation:n,onClick:o||s?void 0:w,"aria-label":!s&&u!==!1?u:void 0,"aria-keyshortcuts":s?void 0:x,...s?{}:y,...h})),mE.createElement(b,null))}),VN.displayName=`Button`,HN=E(`button`,{shouldForwardProp:e=>j(e)})(({theme:e,variant:t,size:n,$disabled:r,readOnly:i,active:a,animating:o,animation:s=`none`,padding:c})=>({border:0,cursor:i?`inherit`:r?`not-allowed`:`pointer`,display:`inline-flex`,gap:`6px`,alignItems:`center`,justifyContent:`center`,overflow:`hidden`,padding:c===`none`?0:c===`small`&&n===`small`?`0 7px`:c===`small`&&n===`medium`?`0 9px`:n===`small`?`0 10px`:n===`medium`?`0 12px`:0,height:n===`small`?`28px`:`32px`,position:`relative`,textAlign:`center`,textDecoration:`none`,transitionProperty:`background, box-shadow`,transitionDuration:`150ms`,transitionTimingFunction:`ease-out`,verticalAlign:`top`,whiteSpace:`nowrap`,userSelect:`none`,opacity:r&&!i?.5:1,margin:0,fontSize:`${e.typography.size.s1}px`,fontWeight:e.typography.weight.bold,lineHeight:`1`,background:t===`solid`?e.base===`light`?e.color.secondary:C(.18,e.color.secondary):t===`outline`?e.button.background:t===`ghost`&&a?ae(.93,e.barSelectedColor):`transparent`,color:t===`solid`?e.color.lightest:t===`outline`?e.input.color:t===`ghost`&&a?e.base===`light`?C(.1,e.color.secondary):e.color.secondary:t===`ghost`?e.textMutedColor:e.input.color,boxShadow:t===`outline`?`${e.button.border} 0 0 0 1px inset`:`none`,borderRadius:e.input.borderRadius,flexShrink:0,...!i&&{"&:hover":{color:t===`ghost`?e.color.secondary:void 0,background:(()=>{let n=e.color.secondary;return t===`solid`&&(n=e.base===`light`?re(.1,e.color.secondary):C(.3,e.color.secondary)),t===`outline`&&(n=e.button.background),t===`ghost`?ae(.86,e.color.secondary):e.base===`light`?C(.02,n):re(.03,n)})()},"&:active":{color:t===`ghost`?e.color.secondary:void 0,background:(()=>{let n=e.color.secondary;return t===`solid`&&(n=e.color.secondary),t===`outline`&&(n=e.button.background),t===`ghost`?e.background.hoverable:e.base===`light`?C(.02,n):re(.03,n)})()},"&:focus-visible":{outline:`2px solid ${ie(e.color.secondary,1)}`,outlineOffset:2,zIndex:`1`},".sb-bar &:focus-visible, .sb-list &:focus-visible":{outlineOffset:0}},"> svg":{flex:`0 0 auto`,animation:o&&s!==`none`?`${e.animation[s]} 1000ms ease-out`:``}})),UN=(0,mE.forwardRef)((e,t)=>(Lk("`IconButton` is deprecated and will be removed in Storybook 11, use `Button` instead."),mE.createElement(VN,{ref:t,...e,"data-deprecated":`IconButton`}))),UN.displayName=`IconButton`,WN=(0,SD.forwardRef)(({pressed:e,...t},n)=>SD.createElement(GN,{role:`switch`,"aria-checked":e,ref:n,pressed:e,...t})),WN.displayName=`ToggleButton`,GN=E(VN)(({theme:e,variant:t=`outline`,pressed:n})=>({...n?{...t===`solid`?{background:e.base===`lighten`?C(.1,e.color.secondary):C(.2,e.color.secondary)}:{},...t===`outline`?{background:ae(.94,e.barSelectedColor),boxShadow:`${e.barSelectedColor} 0 0 0 1px inset`,color:e.barSelectedColor}:{},...t===`ghost`?{background:ae(.93,e.barSelectedColor),color:e.base===`light`?C(.1,e.color.secondary):e.color.secondary}:{}}:{}})),KN=E.li(({active:e,theme:t})=>({display:`flex`,alignItems:`center`,justifyContent:`space-between`,flex:`0 0 auto`,overflow:`hidden`,minHeight:32,gap:4,fontSize:t.typography.size.s1,fontWeight:e?t.typography.weight.bold:t.typography.weight.regular,color:e?`var(--listbox-item-active-color)`:t.color.defaultText,"--listbox-item-active-color":t.base===`light`?C(.1,t.color.secondary):t.color.secondary,"--listbox-item-muted-color":e?`var(--listbox-item-active-color)`:t.color.mediumdark,'&[aria-disabled="true"]':{opacity:.5,cursor:`not-allowed`},'&[aria-selected="true"]':{color:`var(--listbox-item-active-color)`,fontWeight:t.typography.weight.bold,"--listbox-item-muted-color":`var(--listbox-item-active-color)`},"&:not(:hover, :has(:focus-visible)) svg + input":{position:`absolute`,opacity:0},'&[role="option"]':{cursor:`pointer`,borderRadius:t.input.borderRadius,outlineOffset:-2,padding:`0 9px`,gap:8,"&:hover":{background:ae(.86,t.color.secondary)},"&:focus-visible":{outline:`2px solid ${t.color.secondary}`}},"@supports (interpolate-size: allow-keywords)":{interpolateSize:`allow-keywords`,transitionBehavior:`allow-discrete`,transitionDuration:`var(--transition-duration, 0.2s)`,transitionProperty:`opacity, block-size, content-visibility`},"@media (prefers-reduced-motion: reduce)":{transition:`none`}}),({transitionStatus:e})=>{switch(e){case`preEnter`:case`exiting`:case`exited`:return{opacity:0,blockSize:0,contentVisibility:`hidden`};default:return{opacity:1,blockSize:`auto`,contentVisibility:`visible`}}}),qN=E(KN)(({targetId:e})=>({gap:0,[`& [data-target-id="${e}"]`]:{inlineSize:`auto`,marginLeft:4,opacity:1,"@supports (interpolate-size: allow-keywords)":{interpolateSize:`allow-keywords`,transitionProperty:`inline-size, margin-left, opacity, padding-inline`,transitionDuration:`var(--transition-duration, 0.2s)`}},[`&:not(:hover, :has(:focus-visible)) [data-target-id="${e}"]`]:{inlineSize:0,marginLeft:0,opacity:0,paddingInline:0}})),JN=E(VN)(({size:e})=>({gap:e===`small`?6:8,"&:focus-visible":{outlineOffset:-2}})),YN=E(WN)({"&:focus-visible":{outlineOffset:-2}}),XN=(0,pE.forwardRef)(function({padding:e=`small`,size:t=`medium`,variant:n=`ghost`,...r},i){return pE.createElement(JN,{...r,variant:n,padding:e,size:t,ref:i})}),ZN=(0,pE.forwardRef)(function({padding:e=`small`,size:t=`medium`,variant:n=`ghost`,...r},i){return pE.createElement(YN,{...r,variant:n,padding:e,size:t,ref:i})}),QN=E(XN)(({theme:e})=>({height:`auto`,minHeight:32,flex:`0 1 100%`,textAlign:`start`,justifyContent:`space-between`,fontWeight:`inherit`,color:`inherit`,"&:hover":{color:`inherit`},"& input:enabled:focus-visible":{outline:`none`},"&:has(input:focus-visible)":{outline:`2px solid ${e.color.secondary}`,outlineOffset:-2}})),$N=e=>pE.createElement(QN,{as:`a`,...e}),eP=E.div(({theme:e})=>({display:`flex`,flexDirection:`column`,justifyContent:`center`,flexGrow:1,minWidth:0,padding:`8px 0`,lineHeight:`16px`,"& > *":{margin:0,whiteSpace:`normal`},"& > span":{overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},"& small":{fontSize:`inherit`,color:e.textMutedColor},"&:first-child":{paddingLeft:8},"&:last-child":{paddingRight:8},'button > &:first-child, [role="option"] > &:first-child':{paddingLeft:0},'button > &:last-child, [role="option"] > &:last-child':{paddingRight:0}})),tP=E.div({display:`flex`,alignItems:`center`,justifyContent:`center`,flex:`0 0 14px`,width:14,height:14,color:`var(--listbox-item-muted-color)`}),nP=Object.assign(E.ul(({theme:e,onClick:t})=>({listStyle:`none`,margin:0,padding:4,cursor:t?`pointer`:`default`,"& + *":{borderTop:`1px solid ${e.appBorderColor}`}})),{Item:KN,HoverItem:qN,Button:XN,Toggle:ZN,Action:QN,Link:$N,Text:eP,Icon:tP}),rP=E.div(({collapsed:e=!1})=>({blockSize:e?0:`auto`,contentVisibility:e?`hidden`:`visible`,transform:e?`translateY(-10px)`:`translateY(0)`,opacity:e?0:1,overflow:`hidden`,"@supports (interpolate-size: allow-keywords)":{interpolateSize:`allow-keywords`,transition:`all var(--transition-duration, 0.2s)`,transitionBehavior:`allow-discrete`},"@media (prefers-reduced-motion: reduce)":{transition:`none`}})),Object.assign(function({children:e,summary:t,collapsed:n,disabled:r,initialCollapsed:i,storageKey:a,state:o,...s}){let c=aP({collapsed:n,disabled:r,initialCollapsed:i,storageKey:a}),l=o||c;return CD.createElement(CD.Fragment,null,typeof t==`function`?t(l):t,CD.createElement(rP,{...s,id:l.contentId,collapsed:l.isCollapsed,"aria-hidden":l.isCollapsed},typeof e==`function`?e(l):e))},{Content:rP}),iP=(e,t)=>{let[n,r]=(0,CD.useState)(()=>{try{return JSON.parse(sessionStorage.getItem(e))??t}catch{return t}});return(0,CD.useEffect)(()=>{try{e&&sessionStorage.setItem(e,JSON.stringify(n))}catch{}},[e,n]),[n,r]},aP=({collapsed:e,disabled:t,initialCollapsed:n=e,storageKey:r})=>{let[i,a]=iP(r&&`useCollapsible:${r}`,!!n);(0,CD.useEffect)(()=>{e!==void 0&&a(e)},[e,a]);let o=(0,CD.useCallback)(e=>{e?.stopPropagation(),t||a(e=>!e)},[t,a]),s=jy();return{contentId:s,isCollapsed:i,isDisabled:!!t,setCollapsed:a,toggleCollapsed:o,toggleProps:{disabled:t,onClick:o,"aria-controls":s,"aria-expanded":!i}}},oP=M({"0%":{opacity:0},"5%":{opacity:1},"25%":{opacity:1},"30%":{opacity:0}}),sP=M({"0%":{transform:`rotate(0deg)`},"10%":{transform:`rotate(10deg)`},"40%":{transform:`rotate(170deg)`},"50%":{transform:`rotate(180deg)`},"60%":{transform:`rotate(190deg)`},"90%":{transform:`rotate(350deg)`},"100%":{transform:`rotate(360deg)`}}),cP=M({to:{backgroundPositionX:`36%`}}),lP=E.div(({theme:e})=>({borderRadius:e.appBorderRadius,backgroundColor:e.background.content,position:`relative`})),uP=E.div(({animation:e=`none`,color:t,theme:n})=>({position:`relative`,width:`100%`,padding:1,overflow:`hidden`,backgroundColor:n.background.content,borderRadius:n.appBorderRadius+1,boxShadow:`inset 0 0 0 1px ${e===`none`&&t&&n.color[t]||n.appBorderColor}, var(--card-box-shadow, transparent 0 0)`,transition:`box-shadow 1s`,"@supports (interpolate-size: allow-keywords)":{interpolateSize:`allow-keywords`,transition:`all var(--transition-duration, 0.2s), box-shadow 1s`,transitionBehavior:`allow-discrete`},"@media (prefers-reduced-motion: reduce)":{transition:`box-shadow 1s`},"&:before":{content:`""`,display:e===`none`?`none`:`block`,position:`absolute`,left:0,top:0,width:`100%`,height:`100%`,opacity:1,...e===`rainbow`&&{animation:`${cP} 10s infinite linear, ${oP} 60s infinite linear`,backgroundImage:`linear-gradient(45deg,rgb(234, 0, 0),rgb(255, 157, 0),rgb(255, 208, 0),rgb(0, 172, 0),rgb(0, 166, 255),rgb(181, 0, 181), rgb(234, 0, 0),rgb(255, 157, 0),rgb(255, 208, 0),rgb(0, 172, 0),rgb(0, 166, 255),rgb(181, 0, 181))`,backgroundSize:`1000%`,backgroundPositionX:`100%`},...e===`spin`&&{left:`50%`,top:`50%`,marginLeft:`calc(max(100vw, 100vh) * -0.5)`,marginTop:`calc(max(100vw, 100vh) * -0.5)`,height:`max(100vw, 100vh)`,width:`max(100vw, 100vh)`,animation:`${sP} 3s linear infinite`,backgroundImage:t===`negative`?`conic-gradient(transparent 90deg, #FC521F 150deg, #FFAE00 210deg, transparent 270deg)`:`conic-gradient(transparent 90deg, #029CFD 150deg, #37D5D3 210deg, transparent 270deg)`}}})),Object.assign((0,wD.forwardRef)(function({outlineAnimation:e=`none`,outlineColor:t,outlineAttrs:n={},...r},i){return wD.createElement(uP,{animation:e,color:t,ref:i,...n},wD.createElement(lP,{...r}))}),{Content:lP,Outline:uP}),{deprecate:dP}=__STORYBOOK_MODULE_CLIENT_LOGGER__,fP=[`preEnter`,`entering`,`entered`,`preExit`,`exiting`,`exited`,`unmounted`],pP=e=>({_s:e,status:fP[e],isEnter:e<3,isMounted:e!==6,isResolved:e===2||e>4}),mP=e=>e?6:5,hP=(e,t)=>{switch(e){case 1:case 0:return 2;case 4:case 3:return mP(t)}},gP=e=>typeof e==`object`?[e.enter,e.exit]:[e,e],_P=(e,t)=>setTimeout(()=>{isNaN(document.body.offsetTop)||e(t+1)},0),vP=(e,t,n,r,i)=>{clearTimeout(r.current);let a=pP(e);t(a),n.current=a,i&&i({current:a})},yP=({enter:e=!0,exit:t=!0,preEnter:n,preExit:r,timeout:i,initialEntered:a,mountOnEnter:o,unmountOnExit:s,onStateChange:c}={})=>{let[l,u]=(0,ED.useState)(()=>pP(a?2:mP(o))),d=(0,ED.useRef)(l),f=(0,ED.useRef)(),[p,m]=gP(i),h=(0,ED.useCallback)(()=>{let e=hP(d.current._s,s);e&&vP(e,u,d,f,c)},[c,s]);return[l,(0,ED.useCallback)(i=>{let a=e=>{switch(vP(e,u,d,f,c),e){case 1:p>=0&&(f.current=setTimeout(h,p));break;case 4:m>=0&&(f.current=setTimeout(h,m));break;case 0:case 3:f.current=_P(a,e);break}},o=d.current.isEnter;typeof i!=`boolean`&&(i=!o),i?!o&&a(e?n?0:1:2):o&&a(t?r?3:4:mP(s))},[h,c,e,t,n,r,p,m,s]),h]},bP={},f(bP,{Actions:()=>WP,Close:()=>FP,CloseButton:()=>LP,Col:()=>BP,Container:()=>PP,Content:()=>RP,Description:()=>UP,Dialog:()=>IP,Error:()=>KP,ErrorWrapper:()=>GP,Header:()=>VP,Overlay:()=>NP,Row:()=>zP,Title:()=>HP}),{deprecate:xP}=__STORYBOOK_MODULE_CLIENT_LOGGER__,(0,kD.createContext)(null),(0,kD.createContext)(null),(0,kD.createContext)(null),(0,kD.createContext)(null),(0,kD.createContext)(null),SP=(0,kD.createContext)({}),CP=(0,AD.forwardRef)(function(e,t){[e,t]=Bx(e,t,SP);let{children:n,level:r=3,className:i,...a}=e,o=`h${r}`;return AD.createElement(o,{...a,ref:t,className:i??`react-aria-Heading`},n)}),wP=(0,jD.createContext)({}),TP=(0,jD.forwardRef)(function(e,t){[e,t]=Bx(e,t,wP);let{elementType:n=`span`,...r}=e;return jD.createElement(n,{className:`react-aria-Text`,...r,ref:t})}),EP=M({from:{opacity:0},to:{opacity:1}}),DP=M({from:{opacity:1},to:{opacity:0}}),OP=M({from:{maxHeight:0},to:{}}),kP=M({from:{opacity:0,transform:`translate(-50%, -50%) scale(0.9)`},to:{opacity:1,transform:`translate(-50%, -50%) scale(1)`}}),AP=M({from:{opacity:1,transform:`translate(-50%, -50%) scale(1)`},to:{opacity:0,transform:`translate(-50%, -50%) scale(0.9)`}}),jP=M({from:{opacity:0,maxHeight:`0px`},to:{opacity:1,maxHeight:`80vh`}}),MP=M({from:{opacity:1,maxHeight:`80vh`},to:{opacity:0,maxHeight:`0px`}}),NP=E.div(({$status:e,$transitionDuration:t})=>({backdropFilter:`blur(24px)`,background:`rgba(0, 0, 0, 0.4)`,position:`absolute`,inset:0,width:`100%`,height:`100%`,zIndex:1e5,"@media (prefers-reduced-motion: no-preference)":{animation:e===`exiting`||e===`preExit`?`${DP} ${t}ms`:`${EP} ${t}ms`,animationFillMode:`forwards`}})),PP=E.div(({theme:e})=>({backgroundColor:e.background.bar,borderRadius:6,boxShadow:`0px 4px 67px 0px #00000040`,position:`absolute`,overflow:`auto`,zIndex:1e5,"&:focus-visible":{outline:`none`}}),({theme:e,width:t,height:n,$variant:r,$status:i,$transitionDuration:a})=>r===`dialog`?{top:`50%`,left:`50%`,width:t??740,height:n??`auto`,maxWidth:`calc(100% - 40px)`,maxHeight:`85vh`,"@media (prefers-reduced-motion: no-preference)":{willChange:`transform, opacity`,animationTimingFunction:`cubic-bezier(0.32, 0.72, 0, 1)`,animation:i===`exiting`||i===`preExit`?`${AP} ${a}ms`:`${kP} ${a}ms`,animationFillMode:`forwards !important`},"@media (prefers-reduced-motion: reduce)":{transform:`translate(-50%, -50%) scale(1)`}}:{bottom:`0`,left:`0`,right:`0`,borderRadius:`10px 10px 0 0`,overflow:`hidden`,width:t??`100%`,height:n??`80%`,maxWidth:`100%`,background:e.background.content,"@supports (interpolate-size: allow-keywords)":{interpolateSize:`allow-keywords`},"@media (prefers-reduced-motion: no-preference)":{animationTimingFunction:`cubic-bezier(.9,.16,.77,.64)`,animation:i===`exiting`||i===`preExit`?`${MP} ${a}ms`:`${jP} ${a}ms`,animationFillMode:`forwards !important`}}),FP=({asChild:e,children:t,onClick:n,...r})=>{let{close:i}=(0,OD.useContext)(qP);if(e&&OD.isValidElement(t)){let e=e=>{n?.(e),t.props.onClick?.(e),i?.()};return OD.cloneElement(t,{...r,onClick:e})}return OD.createElement(VN,{type:`button`,padding:`small`,ariaLabel:`Close modal`,variant:`ghost`,shortcut:[`Escape`],onClick:i},OD.createElement(De,null))},IP={Close:()=>(xP(`Modal.Dialog.Close is deprecated, please use Modal.Close instead.`),OD.createElement(FP,{"data-deprecated":`Modal.Dialog.Close`}))},LP=({ariaLabel:e,...t})=>(xP(`Modal.CloseButton is deprecated, please use Modal.Close instead.`),OD.createElement(FP,{asChild:!0},OD.createElement(VN,{ariaLabel:e||`Close`,"data-deprecated":`Modal.CloseButton`,...t},OD.createElement(De,null)))),RP=E.div({display:`flex`,flexDirection:`column`,margin:16,gap:16}),zP=E.div({display:`flex`,justifyContent:`space-between`,gap:16}),BP=E.div({display:`flex`,flexDirection:`column`,gap:4}),VP=({hasClose:e=!0,onClose:t,...n})=>OD.createElement(zP,null,OD.createElement(BP,{...n}),e&&OD.createElement(FP,{onClick:t})),HP=E(e=>OD.createElement(CP,{level:2,...e}))(({theme:e})=>({margin:0,fontSize:e.typography.size.s3,fontWeight:e.typography.weight.bold})),UP=E(TP)(({theme:e})=>({position:`relative`,zIndex:1,margin:0,fontSize:e.typography.size.s2})),WP=E.div({display:`flex`,flexDirection:`row-reverse`,gap:8}),GP=E.div(({theme:e})=>({maxHeight:100,overflow:`auto`,"@media (prefers-reduced-motion: no-preference)":{animation:`${OP} 300ms, ${EP} 300ms`},backgroundColor:e.background.critical,color:e.color.lightest,fontSize:e.typography.size.s2,"& > div":{position:`relative`,padding:`8px 16px`}})),KP=({children:e,...t})=>OD.createElement(GP,{...t},OD.createElement(`div`,null,e)),qP=(0,TD.createContext)({}),Object.assign(xw,bP),E.div(({theme:e,col:t,row:n=1})=>t?{display:`inline-block`,verticalAlign:`inherit`,"& > *":{marginLeft:t*e.layoutMargin,verticalAlign:`inherit`},[`& > *:first-child${ee}`]:{marginLeft:0}}:{"& > *":{marginTop:n*e.layoutMargin},[`& > *:first-child${ee}`]:{marginTop:0}},({theme:e,outer:t,col:n,row:r})=>{switch(!0){case!!(t&&n):return{marginLeft:t*e.layoutMargin,marginRight:t*e.layoutMargin};case!!(t&&r):return{marginTop:t*e.layoutMargin,marginBottom:t*e.layoutMargin};default:return{}}}),E.div(({theme:e})=>({fontWeight:e.typography.weight.bold})),E.div(),E.div(({theme:e})=>({padding:30,textAlign:`center`,color:e.color.defaultText,fontSize:e.typography.size.s2-1})),JP=E.div(({centered:e=!1,scale:t=1,elementHeight:n})=>({height:n||`auto`,transformOrigin:e?`center top`:`left top`,transform:`scale(${1/t})`})),YP=class extends PD.Component{constructor(){super(...arguments),this.iframe=null}componentDidMount(){let{iFrameRef:e}=this.props;this.iframe=e.current}shouldComponentUpdate(e){let{scale:t,active:n}=this.props;return t!==e.scale&&this.setIframeInnerZoom(e.scale),n!==e.active&&this.iframe.setAttribute(`data-is-storybook`,e.active?`true`:`false`),e.children.props.src!==this.props.children.props.src}setIframeInnerZoom(e){try{Object.assign(this.iframe.contentDocument.body.style,{width:`${1/e*100}%`,height:`${1/e*100}%`,transform:`scale(${e})`,transformOrigin:`top left`})}catch{this.setIframeZoom(e)}}setIframeZoom(e){Object.assign(this.iframe.style,{width:`${1/e*100}%`,height:`${1/e*100}%`,transform:`scale(${e})`,transformOrigin:`top left`})}render(){let{children:e}=this.props;return PD.createElement(PD.Fragment,null,e)}},XP={Element:Tw,IFrame:YP},{global:ZP}=__STORYBOOK_MODULE_GLOBAL__,{document:QP}=ZP,$P=E.strong(({theme:e})=>({color:e.color.orange})),eF=E.strong(({theme:e})=>({color:e.color.ancillary,textDecoration:`underline`})),tF=E.em(({theme:e})=>({color:e.textMutedColor})),nF=/(Error): (.*)\n/,rF=/at (?:(.*) )?\(?(.+)\)?/,iF=/([^@]+)?(?:\/<)?@(.+)?/,aF=/([^@]+)?@(.+)?/,oF=({error:e})=>{if(!e)return FD.createElement(FD.Fragment,null,`This error has no stack or message`);if(!e.stack)return FD.createElement(FD.Fragment,null,e.message||`This error has no stack or message`);let t=e.stack.toString();t&&e.message&&!t.includes(e.message)&&(t=`Error: ${e.message} ${t}`);let n=t.match(nF);if(!n)return FD.createElement(FD.Fragment,null,t);let[,r,i]=n,[,...a]=t.split(/\n/).slice(1).map(e=>{let t=e.match(rF)||e.match(iF)||e.match(aF);return t?{name:(t[1]||``).replace(`/<`,``),location:t[2].replace(QP.location.origin,``)}:null}).filter(Boolean);return FD.createElement(FD.Fragment,null,FD.createElement(`span`,null,r),`: `,FD.createElement($P,null,i),FD.createElement(`br`,null),a.map((e,t)=>e?.name?FD.createElement(FD.Fragment,{key:t},` `,`at `,FD.createElement(eF,null,e.name),` (`,FD.createElement(tF,null,e.location),`)`,FD.createElement(`br`,null)):FD.createElement(FD.Fragment,{key:t},` `,`at `,FD.createElement(tF,null,e?.location),FD.createElement(`br`,null))))},sF=E.input(({theme:e})=>({appearance:`none`,backgroundColor:e.input.background,border:`1px solid ${e.base===`dark`?`hsl(0 0 100 / 0.4)`:`hsl(0 0 0 / 0.44)`}`,borderRadius:2,display:`grid`,flexShrink:0,height:14,margin:0,placeContent:`center`,transition:`background-color 0.1s`,width:14,"&:enabled":{cursor:`pointer`},"&:disabled":{backgroundColor:`transparent`,borderColor:e.input.border},"&:disabled:checked, &:disabled:indeterminate":{backgroundColor:e.base===`dark`?D.dark:e.color.mediumdark},"&:checked, &:indeterminate":{border:`none`,backgroundColor:D.secondary},"&:checked::before":{content:`""`,width:14,height:14,background:`no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='m3 7 2.5 2.5L11 4'/%3E%3C/svg%3E")`},"&:indeterminate::before":{content:`""`,width:8,height:2,background:`white`},"&:enabled:focus-visible":{outline:`2px solid ${e.color.secondary}`,outlineOffset:2}})),cF=e=>ID.createElement(sF,{...e,type:`checkbox`}),lF=E.label(({theme:e})=>({display:`flex`,borderBottom:`1px solid ${e.appBorderColor}`,margin:`0 15px`,padding:`8px 0`,"&:last-child":{marginBottom:`3rem`}})),uF=E.span(({theme:e})=>({minWidth:100,fontWeight:e.typography.weight.bold,marginRight:15,display:`flex`,justifyContent:`flex-start`,alignItems:`center`,lineHeight:`16px`})),dF=({label:e,children:t,...n})=>LD.createElement(lF,{...n},e?LD.createElement(uF,null,LD.createElement(`span`,null,e)):null,t),fF=(({size:e})=>{switch(e){case`100%`:return{width:`100%`};case`flex`:return{flex:1};default:return{display:`inline`}}}),pF=(({align:e})=>{switch(e){case`end`:return{textAlign:`right`};case`center`:return{textAlign:`center`};default:return{textAlign:`left`}}}),mF=(({valid:e,theme:t})=>{switch(e){case`valid`:return{boxShadow:`${t.color.positive} 0 0 0 1px inset !important`};case`error`:return{boxShadow:`${t.color.negative} 0 0 0 1px inset !important`};case`warn`:return{boxShadow:`${t.color.warning} 0 0 0 1px inset`};case void 0:default:return{}}}),hF={appearance:`none`,border:`0 none`,boxSizing:`inherit`,display:`block`,margin:` 0`,background:`transparent`,padding:0,fontSize:`inherit`,position:`relative`},gF=(({theme:e})=>({...hF,transition:`box-shadow 200ms ease-out, opacity 200ms ease-out`,color:e.input.color||`inherit`,background:e.input.background,boxShadow:`${e.input.border} 0 0 0 1px inset`,borderRadius:e.input.borderRadius,fontSize:e.typography.size.s2-1,lineHeight:`20px`,padding:`6px 10px`,boxSizing:`border-box`,height:32,'&[type="file"]':{height:`auto`},"&:focus":{boxShadow:`${e.color.secondary} 0 0 0 1px inset`,outline:`none`,"@media (forced-colors: active)":{outline:`1px solid highlight`}},'&[disabled], &[aria-disabled="true"]':{background:e.base===`light`?e.color.lighter:`transparent`,cursor:`not-allowed`},"&:-webkit-autofill":{WebkitBoxShadow:`0 0 0 3em ${e.color.lightest} inset`},"&::placeholder":{color:e.textMutedColor,opacity:1}})),_F=E.div({position:`relative`,width:`100%`}),vF=E.div(({theme:e})=>({position:`absolute`,left:0,right:0,top:0,bottom:0,display:`flex`,alignItems:`center`,pointerEvents:`none`,overflow:`hidden`,color:e.textMutedColor,"span:first-of-type":{opacity:0}}),e=>{let{fontSize:t,lineHeight:n,padding:r}=gF(e);return{fontSize:t,lineHeight:n,padding:r}}),yF=Object.assign(E((0,zD.forwardRef)(function({size:e,valid:t,align:n,value:r,suffix:i,...a},o){let s=jy();return RD.createElement(_F,null,RD.createElement(`input`,{...a,value:r,ref:o,"aria-describedby":i?s:void 0}),i&&RD.createElement(vF,{"aria-hidden":!0},RD.createElement(`span`,null,r),RD.createElement(`span`,{id:s},i)))}))(gF,fF,pF,mF,{minHeight:32,width:`100%`}),{displayName:`Input`}),bF=E.input(({theme:e})=>({appearance:`none`,backgroundColor:e.input.background,border:`1px solid ${e.base===`dark`?`hsl(0 0 100 / 0.4)`:`hsl(0 0 0 / 0.44)`}`,borderRadius:8,display:`grid`,flexShrink:0,height:16,margin:-1,placeContent:`center`,transition:`background-color 0.1s`,width:16,"&:enabled":{cursor:`pointer`},"&:disabled":{backgroundColor:`transparent`,borderColor:e.input.border},"&:disabled:checked":{backgroundColor:e.base===`dark`?D.dark:e.color.mediumdark,borderColor:e.base===`dark`?D.dark:e.color.mediumdark},"&:checked":{backgroundColor:D.secondary,borderColor:D.secondary,boxShadow:`inset 0 0 0 2px ${e.input.background}`},"&:enabled:focus-visible":{outline:`2px solid ${e.color.secondary}`,outlineOffset:2}})),xF=e=>BD.createElement(bF,{...e,type:`radio`}),SF=E.select(fF,({theme:e})=>({appearance:`none`,background:`calc(100% - 12px) center no-repeat url("data:image/svg+xml,%3Csvg width='8' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.30303 0.196815C1.13566 0.0294472 0.864304 0.0294472 0.696937 0.196815C0.529569 0.364182 0.529569 0.635539 0.696937 0.802906L3.69694 3.80291C3.8643 3.97027 4.13566 3.97027 4.30303 3.80291L7.30303 0.802906C7.4704 0.635539 7.4704 0.364182 7.30303 0.196815C7.13566 0.0294473 6.8643 0.0294473 6.69694 0.196815L3.99998 2.89377L1.30303 0.196815Z' fill='%2373828C'/%3E%3C/svg%3E%0A")`,backgroundSize:10,padding:`6px 30px 6px 10px`,"@supports (appearance: base-select)":{appearance:`base-select`,background:e.input.background,padding:`6px 10px`},transition:`box-shadow 200ms ease-out, opacity 200ms ease-out`,color:e.input.color||`inherit`,boxShadow:`${e.input.border} 0 0 0 1px inset`,borderRadius:e.input.borderRadius,fontSize:e.typography.size.s2-1,lineHeight:`20px`,boxSizing:`border-box`,border:`none`,cursor:`pointer`,"& > button":{display:`flex`,alignItems:`center`,justifyContent:`space-between`,width:`100%`,gap:8,"& > svg":{width:14,height:14,color:e.textMutedColor}},"&:has(option:not([hidden]):checked)":{color:e.color.defaultText},"&:focus-visible, &:focus-within":{outline:`none`,boxShadow:`${e.color.secondary} 0 0 0 1px inset`},"&::picker-icon":{display:`none`},"&::picker(select)":{appearance:`base-select`,border:`1px solid ${e.input.border}`,padding:4,marginTop:4,background:e.base===`light`?A(e.background.app):e.background.app,filter:` drop-shadow(0 5px 5px rgba(0,0,0,0.05)) @@ -202,7 +202,7 @@ ${t}`);let n=t.match(nF);if(!n)return FD.createElement(FD.Fragment,null,t);let[, `,borderRadius:e.appBorderRadius+2,fontSize:e.typography.size.s1,cursor:`default`,transition:`opacity 100ms ease-in-out, transform 100ms ease-in-out`,transformOrigin:`top`,transform:`translateY(0)`,opacity:1,"@starting-style":{transform:`translateY(-0.25rem) scale(0.95)`,opacity:0}},"& optgroup label":{display:`block`,padding:`3px 6px`},"& option":{lineHeight:`18px`,padding:`7px 10px`,borderRadius:4,outline:`none`,cursor:`pointer`,color:e.color.defaultText,"&::checkmark":{display:`none`},"&:hover, &:focus-visible":{backgroundColor:e.background.hoverable},"&:checked":{color:e.color.secondary,fontWeight:e.typography.weight.bold},"&:disabled":{backgroundColor:`transparent`,cursor:`default`,color:e.color.defaultText}}})),CF=({children:e,...t})=>VD.createElement(SF,{...t},!_e()&&VD.createElement(`button`,null,VD.createElement(`selectedcontent`,null),VD.createElement(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`},VD.createElement(`path`,{d:`m6 9 6 6 6-6`}))),VD.createElement(`optgroup`,null,e)),wF=GD.useLayoutEffect,TF=function(e){var t=WD.useRef(e);return wF(function(){t.current=e}),t},EF=function(e,t){if(typeof e==`function`){e(t);return}e.current=t},DF=function(e,t){var n=KD.useRef();return KD.useCallback(function(r){e.current=r,n.current&&EF(n.current,null),n.current=t,t&&EF(t,r)},[t])},OF={"min-height":`0`,"max-height":`none`,height:`0`,visibility:`hidden`,overflow:`hidden`,position:`absolute`,"z-index":`-1000`,top:`0`,right:`0`,display:`block`},kF=function(e){Object.keys(OF).forEach(function(t){e.style.setProperty(t,OF[t],`important`)})},AF=kF,jF=null,MF=function(e,t){var n=e.scrollHeight;return t.sizingStyle.boxSizing===`border-box`?n+t.borderSize:n-t.paddingSize},NF=function(){},PF=function(e,t){return e.reduce(function(e,n){return e[n]=t[n],e},{})},FF=[`borderBottomWidth`,`borderLeftWidth`,`borderRightWidth`,`borderTopWidth`,`boxSizing`,`fontFamily`,`fontSize`,`fontStyle`,`fontWeight`,`letterSpacing`,`lineHeight`,`paddingBottom`,`paddingLeft`,`paddingRight`,`paddingTop`,`tabSize`,`textIndent`,`textRendering`,`textTransform`,`width`,`wordBreak`,`wordSpacing`,`scrollbarGutter`],IF=!!document.documentElement.currentStyle,LF=function(e){var t=window.getComputedStyle(e);if(t===null)return null;var n=PF(FF,t),r=n.boxSizing;return r===``?null:(IF&&r===`border-box`&&(n.width=parseFloat(n.width)+parseFloat(n.borderRightWidth)+parseFloat(n.borderLeftWidth)+parseFloat(n.paddingRight)+parseFloat(n.paddingLeft)+`px`),{sizingStyle:n,paddingSize:parseFloat(n.paddingBottom)+parseFloat(n.paddingTop),borderSize:parseFloat(n.borderBottomWidth)+parseFloat(n.borderTopWidth)})},RF=LF,zF=function(e,t){Dw(document.body,`reset`,function(n){e.current.form===n.target&&t(n)})},BF=function(e){Dw(window,`resize`,e)},VF=function(e){Dw(document.fonts,`loadingdone`,e)},HF=[`cacheMeasurements`,`maxRows`,`minRows`,`onChange`,`onHeightChange`],UF=function(e,t){var n=e.cacheMeasurements,r=e.maxRows,i=e.minRows,a=e.onChange,o=a===void 0?NF:a,s=e.onHeightChange,c=s===void 0?NF:s,l=fe(e,HF),u=l.value!==void 0,d=UD.useRef(null),f=DF(d,t),p=UD.useRef(0),m=UD.useRef(),h=function(){var e=d.current,t=n&&m.current?m.current:RF(e);if(t){m.current=t;var a=Ew(t,e.value||e.placeholder||`x`,i,r),o=a[0],s=a[1];p.current!==o&&(p.current=o,e.style.setProperty(`height`,o+`px`,`important`),c(o,{rowHeight:s}))}};return UD.useLayoutEffect(h),zF(d,function(){if(!u){var e=d.current.value;requestAnimationFrame(function(){var t=d.current;t&&e!==t.value&&h()})}}),BF(h),VF(h),UD.createElement(`textarea`,S({},l,{onChange:function(e){u||h(),o(e)},ref:f}))},WF=UD.forwardRef(UF),GF=Object.assign(E((0,HD.forwardRef)(function({size:e,valid:t,align:n,...r},i){return HD.createElement(WF,{...r,ref:i})}))(gF,fF,pF,mF,({height:e=400})=>({overflow:`visible`,maxHeight:e})),{displayName:`Textarea`}),KF=Object.assign(E.form({boxSizing:`border-box`,width:`100%`}),{Field:dF,Input:yF,Select:CF,Textarea:GF,Button:VN,Checkbox:cF,Radio:xF}),qF=E.div(({hasCloseButton:e,padding:t})=>({display:`inline-block`,position:`relative`,minHeight:e?36:void 0,zIndex:2147483647,colorScheme:`light dark`,padding:t}),({theme:e,hasChrome:t})=>t?{filter:` drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)) - `,borderRadius:e.appBorderRadius+2,fontSize:e.typography.size.s1}:{},({theme:e,bgColor:t})=>t===`default`&&{background:e.base===`light`?A(e.background.app):e.background.app,color:e.color.defaultText},({theme:e,bgColor:t})=>t===`inverse`&&{background:e.base===`light`?e.color.darkest:e.color.lightest,color:e.color.inverseText},({theme:e,bgColor:t})=>(t===`positive`||t===`negative`||t===`warning`)&&{background:e.background[t],color:e.color[`${t}Text`]}),JF=E(VN)({position:`absolute`,top:4,right:4}),YF=(0,qD.forwardRef)(({children:e,color:t=`default`,hasChrome:n=!0,hideLabel:r=`Close`,onHide:i,padding:a=8,...o},s)=>qD.createElement(qF,{bgColor:t,hasChrome:n,hasCloseButton:!!i,padding:a,ref:s,...o},e,i&&qD.createElement(JF,{ariaLabel:r,onClick:i,padding:`small`,variant:`ghost`,size:`small`},qD.createElement(Ae,null)))),YF.displayName=`Popover`,XF=({id:e,title:t,description:n,icon:r,aside:i,children:a,isSelected:o,isActive:s,onClick:c,onFocus:l,onKeyDown:u,shouldLookDisabled:d=!1,...f})=>JD.createElement(nP.Item,{...f,id:e,role:`option`,tabIndex:s?0:-1,"aria-selected":o,"aria-disabled":d?!0:void 0,onClick:c,onFocus:l,onKeyDown:u},a??JD.createElement(JD.Fragment,null,r&&JD.createElement(nP.Icon,null,r),JD.createElement(nP.Text,null,JD.createElement(`p`,null,t),n&&JD.createElement(`small`,null,n)),i)),XF.displayName=`SelectOption`,ZF=5,QF=Symbol.for(`undefined`),$F=E(`ul`)({minWidth:180,height:`100%`,borderRadius:6,overflow:`hidden auto`,listStyle:`none`,margin:0,padding:4}),eI=E.span(({theme:e})=>({appearance:`none`,color:e.textMutedColor,fontSize:12})),tI=E(VN)(({$isOpen:e,$hasSelection:t,theme:n})=>e||t?{boxShadow:`none`,background:ae(.93,n.barSelectedColor),color:n.base===`light`?C(.1,n.color.secondary):n.color.secondary}:{}),nI=E.div({position:`fixed`,inset:0,zIndex:1e3}),rI=({children:e,handleClose:t,triggerRef:n})=>{let r=H.useRef(null);Px({ref:r,onInteractOutside:t}),(0,H.useEffect)(()=>{if(r.current)return lw([r.current],{shouldUseInert:!0})},[]);let{overlayProps:i}=pC({targetRef:n,overlayRef:r,placement:`bottom start`,offset:8,maxHeight:504,isOpen:!0}),{overlayProps:a,underlayProps:o}=WC({isOpen:!0,onClose:t,isDismissable:!0,shouldCloseOnBlur:!1,isKeyboardDismissDisabled:!0},r),s=ne();return i.style={...i.style,overflow:`hidden auto`,scrollbarColor:`${s.barTextColor} transparent`,scrollbarWidth:`thin`},H.createElement(fw,{disableFocusManagement:!0,...a},H.createElement(nI,{...o}),H.createElement(YF,{hasChrome:!0,ref:r,padding:0,...i},e))},iI=(0,H.forwardRef)(({children:e,icon:t,disabled:n=!1,options:r,defaultOptions:i,multiSelect:a=!1,onReset:o,padding:s=`small`,resetLabel:c,onSelect:l,onDeselect:u,onChange:d,tooltip:f,ariaLabel:p,showSelectedOptionTitle:m=!0,...h},g)=>{let[_,v]=(0,H.useState)(h.defaultOpen||!1),[y,b]=(0,H.useState)(!1),x=db(g),S=(0,H.useMemo)(()=>`select-`+Math.random().toString(36).substring(2,15),[]),C=`${S}-listbox`,w=(0,H.useRef)(null),T=hw({isOpen:_&&!n,onOpenChange:v}),E=(0,H.useCallback)(()=>{v(!1),b(!0)},[]);(0,H.useEffect)(()=>{!T.isOpen&&y&&(x.current?.focus(),b(!1))},[T.isOpen,y,x]);let[D,O]=(0,H.useState)(Pw(r,i)),k=(0,H.useCallback)(e=>{e.type===`reset`?(d?.([]),o?.(),O([])):O(a?t=>{let n=[];return t?.some(t=>t.value===e.value)?(u?.(jw(e.value)),n=t?.filter(t=>t.value!==e.value)??[]):(l?.(jw(e.value)),n=[...t??[],e]),d?.(n.map(e=>jw(e.value))),n}:t=>t.every(t=>t.value!==e.value)?(l?.(jw(e.value)),d?.([jw(e.value)]),[e]):t)},[a,d,l,u,o]),ee=(0,H.useMemo)(()=>o?{type:`reset`,value:void 0,title:c??`Reset selection`,icon:H.createElement(Ve,null),description:void 0,children:void 0}:void 0,[o,c]),A=(0,H.useMemo)(()=>ee?[ee,...r]:r,[r,ee]);(0,H.useEffect)(()=>{i&&O(Pw(r,i))},[i,r]);let[j,te]=(0,H.useState)(void 0),M=(0,H.useCallback)((e,t=!0)=>{te(Aw(e)),!a&&t&&k(Aw(e))},[a,k]),ne=(0,H.useCallback)((e=1)=>{if(!_||!j){M(A[e===1?0:Math.min(e,A.length-1)]);return}let t=A.findIndex(e=>j.type===`reset`?`type`in e&&e.type===`reset`:Mw(e.value)===j.value),n=t+e,r;r=n>=A.length&&t===A.length-1?A[0]:A[Math.min(A.length-1,n)],M(r)},[_,j,M,A]),re=(0,H.useCallback)((e=1)=>{if(!_||!j){M(A[Math.max(0,A.length-e)]);return}let t=A.findIndex(e=>j.type===`reset`?`type`in e&&e.type===`reset`:Mw(e.value)===j.value),n=t-e,r;r=n<0&&t===0?A[A.length-1]:A[Math.max(0,n)],M(r)},[_,j,M,A]),ie=(0,H.useCallback)(e=>{let t=t=>{e.preventDefault(),M(A[t]),v(!0)},n=A.findIndex(e=>D.some(t=>t.value===Mw(e.value))),r=n!==-1,i=ee&&!r?1:0,a=A.length-1;e.key===`Enter`||e.key===` `?t(r?Math.min(n,a):i):e.key===`ArrowDown`?t(r?Math.min(n+1,a):i):e.key===`ArrowUp`?t(r?Math.max(n-1,i):a):e.key===`Home`?t(i):e.key===`End`?t(a):e.key===`PageDown`?t(Math.min((r?n:i)+ZF,a)):e.key===`PageUp`&&t(Math.max(0,(r?n:a)-ZF))},[A,ee,M,D]),ae=(0,H.useCallback)(e=>{e.key===`Tab`?E():e.preventDefault(),e.key===`Escape`?E():e.key===`ArrowDown`?ne():e.key===`ArrowUp`?re():e.key===`Home`?M(A[0]):e.key===`End`?M(A[A.length-1]):e.key===`PageDown`?ne(ZF):e.key===`PageUp`&&re(ZF)},[E,ne,re,A,M]);(0,H.useEffect)(()=>{if(_&&j){let e=document.getElementById(Nw(S,j));e&&(e.scrollIntoView({block:`nearest`}),e.focus())}else _&&w.current?.focus()},[_,j,S]);let oe=(0,H.useMemo)(()=>D.length===1?`${p} ${D[0].title}`:D.length?`${p}, ${D.length} values selected`:p,[p,D]);return H.createElement(H.Fragment,null,H.createElement(tI,{...h,variant:`ghost`,ariaLabel:oe,tooltip:f??p,disableAllTooltips:_,id:S,ref:x,padding:s,$isOpen:_,$hasSelection:!!D.length,"aria-disabled":n,disabled:n,onClick:()=>{_?E():v(!0)},tabIndex:_?-1:0,onKeyDown:ie,role:`button`,"aria-controls":_?C:void 0,"aria-expanded":_,"aria-haspopup":`listbox`},!a&&H.createElement(H.Fragment,null,t,m&&D[0]?.title||e),a&&H.createElement(H.Fragment,null,t,e,!!D.length&&H.createElement(eI,{"aria-label":`${D.length} ${D.length>1?`items`:`item`} selected`},D?.length))),T.isOpen&&H.createElement(rI,{handleClose:E,triggerRef:x},H.createElement($F,{"aria-label":p,role:`listbox`,id:C,ref:w,"aria-multiselectable":a,onKeyDown:ae,tabIndex:_?0:-1},A.map(e=>({option:Aw(e),externalOption:e})).map(({externalOption:e,option:t})=>{let n=D?.some(e=>e.value===t.value)&&t!==ee,r=t===ee;return H.createElement(XF,{key:t.value===void 0?`sb-reset`:String(t.value),title:t.title,description:t.description,aside:t.aside,icon:!r&&a?H.createElement(KF.Checkbox,{checked:n,hidden:!0,role:`presentation`}):t.icon,id:Nw(S,t),isActive:_&&j?.value===t.value,isSelected:n,onClick:()=>{k(t),a||E()},onFocus:()=>M(e,!1),shouldLookDisabled:r&&D.length===0&&a,onKeyDown:e=>{e.key===`Enter`||e.key===` `?(e.preventDefault(),k(t),a||E()):e.key===`Tab`&&(a||k(t),E())}},t.children)}))))}),iI.displayName=`Select`,{deprecate:aI}=__STORYBOOK_MODULE_CLIENT_LOGGER__,oI=class{get childNodes(){throw Error(`childNodes is not supported`)}clone(){let e=new this.constructor(this.key);return e.value=this.value,e.level=this.level,e.hasChildNodes=this.hasChildNodes,e.rendered=this.rendered,e.textValue=this.textValue,e[`aria-label`]=this[`aria-label`],e.index=this.index,e.parentKey=this.parentKey,e.prevKey=this.prevKey,e.nextKey=this.nextKey,e.firstChildKey=this.firstChildKey,e.lastChildKey=this.lastChildKey,e.props=this.props,e.render=this.render,e.colSpan=this.colSpan,e.colIndex=this.colIndex,e}filter(e,t,n){let r=this.clone();return t.addDescendants(r,e),r}constructor(e){this.value=null,this.level=0,this.hasChildNodes=!1,this.rendered=null,this.textValue=``,this[`aria-label`]=void 0,this.index=0,this.parentKey=null,this.prevKey=null,this.nextKey=null,this.firstChildKey=null,this.lastChildKey=null,this.props={},this.colSpan=null,this.colIndex=null,this.type=this.constructor.type,this.key=e}},sI=class extends oI{filter(e,t,n){let[r,i]=Fw(e,t,this.firstChildKey,n),a=this.clone();return a.firstChildKey=r,a.lastChildKey=i,a}},cI=class extends oI{},cI.type=`header`,lI=class extends oI{},lI.type=`loader`,uI=class extends sI{filter(e,t,n){if(n(this.textValue,this)){let n=this.clone();return t.addDescendants(n,e),n}return null}},uI.type=`item`,dI=class extends sI{filter(e,t,n){let r=super.filter(e,t,n);if(r&&r.lastChildKey!==null){let t=e.getItem(r.lastChildKey);if(t&&t.type!==`header`)return r}return null}},dI.type=`section`,fI=class{get size(){return this.itemCount}getKeys(){return this.keyMap.keys()}*[Symbol.iterator](){let e=this.firstKey==null?void 0:this.keyMap.get(this.firstKey);for(;e;)yield e,e=e.nextKey==null?void 0:this.keyMap.get(e.nextKey)}getChildren(e){let t=this.keyMap;return{*[Symbol.iterator](){let n=t.get(e),r=n?.firstChildKey==null?null:t.get(n.firstChildKey);for(;r;)yield r,r=r.nextKey==null?void 0:t.get(r.nextKey)}}}getKeyBefore(e){let t=this.keyMap.get(e);if(!t)return null;if(t.prevKey!=null){for(t=this.keyMap.get(t.prevKey);t&&t.type!==`item`&&t.lastChildKey!=null;)t=this.keyMap.get(t.lastChildKey);return t?.key??null}return t.parentKey}getKeyAfter(e){let t=this.keyMap.get(e);if(!t)return null;if(t.type!==`item`&&t.firstChildKey!=null)return t.firstChildKey;for(;t;){if(t.nextKey!=null)return t.nextKey;if(t.parentKey!=null)t=this.keyMap.get(t.parentKey);else return null}return null}getFirstKey(){return this.firstKey}getLastKey(){let e=this.lastKey==null?null:this.keyMap.get(this.lastKey);for(;e?.lastChildKey!=null;)e=this.keyMap.get(e.lastChildKey);return e?.key??null}getItem(e){return this.keyMap.get(e)??null}at(){throw Error(`Not implemented`)}clone(){let e=this.constructor,t=new e;return t.keyMap=new Map(this.keyMap),t.firstKey=this.firstKey,t.lastKey=this.lastKey,t.itemCount=this.itemCount,t}addNode(e){if(this.frozen)throw Error(`Cannot add a node to a frozen collection`);e.type===`item`&&this.keyMap.get(e.key)==null&&this.itemCount++,this.keyMap.set(e.key,e)}addDescendants(e,t){this.addNode(e);let n=t.getChildren(e.key);for(let e of n)this.addDescendants(e,t)}removeNode(e){if(this.frozen)throw Error(`Cannot remove a node to a frozen collection`);let t=this.keyMap.get(e);t!=null&&t.type===`item`&&this.itemCount--,this.keyMap.delete(e)}commit(e,t,n=!1){if(this.frozen)throw Error(`Cannot commit a frozen collection`);this.firstKey=e,this.lastKey=t,this.frozen=!n}filter(e){let t=new this.constructor,[n,r]=Fw(this,t,this.firstKey,e);return t?.commit(n,r),t}constructor(){this.keyMap=new Map,this.firstKey=null,this.lastKey=null,this.frozen=!1,this.itemCount=0}},pI=class{*[Symbol.iterator](){let e=this.firstChild;for(;e;)yield e,e=e.nextSibling}get firstChild(){return this._firstChild}set firstChild(e){this._firstChild=e,this.ownerDocument.markDirty(this)}get lastChild(){return this._lastChild}set lastChild(e){this._lastChild=e,this.ownerDocument.markDirty(this)}get previousSibling(){return this._previousSibling}set previousSibling(e){this._previousSibling=e,this.ownerDocument.markDirty(this)}get nextSibling(){return this._nextSibling}set nextSibling(e){this._nextSibling=e,this.ownerDocument.markDirty(this)}get parentNode(){return this._parentNode}set parentNode(e){this._parentNode=e,this.ownerDocument.markDirty(this)}get isConnected(){return this.parentNode?.isConnected||!1}invalidateChildIndices(e){(this._minInvalidChildIndex==null||!this._minInvalidChildIndex.isConnected||e.indexthis.subscriptions.delete(e)}resetAfterSSR(){this.isSSR&&(this.isSSR=!1,this.firstChild=null,this.lastChild=null,this.nodeId=0)}constructor(e){super(null),this.nodeType=11,this.ownerDocument=this,this.dirtyNodes=new Set,this.isSSR=!1,this.nodeId=0,this.nodesByProps=new WeakMap,this.isMounted=!0,this.nextCollection=null,this.subscriptions=new Set,this.queuedRender=!1,this.inSubscription=!1,this.collection=e,this.nextCollection=e}},typeof HTMLTemplateElement<`u`){let e=Object.getOwnPropertyDescriptor(Node.prototype,`firstChild`).get;Object.defineProperty(HTMLTemplateElement.prototype,`firstChild`,{configurable:!0,enumerable:!0,get:function(){return this.dataset.reactAriaHidden?this.content.firstChild:e.call(this)}})}gI=(0,ZD.createContext)(!1),_I=(0,U.createContext)(!1),vI=(0,U.createContext)(null),yI=typeof U.useSyncExternalStore==`function`?U.useSyncExternalStore:Hw,bI=(0,U.createContext)(null),xI=(0,U.createContext)(null),SI=(0,eO.createContext)({}),Rw(function(e,t){[e,t]=Bx(e,t,SI);let{elementType:n=`label`,...r}=e;return eO.createElement(n,{className:`react-aria-Label`,...r,ref:t})}),CI=(0,tO.createContext)(null),(0,tO.forwardRef)(function(e,t){[e,t]=Bx(e,t,CI);let{value:n=0,minValue:r=0,maxValue:i=100,isIndeterminate:a=!1}=e;n=Bb(n,r,i);let[o,s]=Vx(!e[`aria-label`]&&!e[`aria-labelledby`]),{progressBarProps:c,labelProps:l}=Qw({...e,label:s}),u=a?void 0:(n-r)/(i-r)*100,d=Rx({...e,defaultClassName:`react-aria-ProgressBar`,values:{percentage:u,valueText:c[`aria-valuetext`],isIndeterminate:a}}),f=Gy(e,{global:!0});return tO.createElement(`div`,{...B(f,d,c),ref:t,slot:e.slot||void 0},tO.createElement(SI.Provider,{value:{...l,ref:o,elementType:`span`}},d.children))}),wI=null,TI=class{isAttached(){return this.node?.isConnected}createLog(e){let t=document.createElement(`div`);return t.setAttribute(`role`,`log`),t.setAttribute(`aria-live`,e),t.setAttribute(`aria-relevant`,`additions`),t}destroy(){this.node&&=(document.body.removeChild(this.node),null)}announce(e,t=`assertive`,n=7e3){var r,i;if(!this.node)return;let a=document.createElement(`div`);typeof e==`object`?(a.setAttribute(`role`,`img`),a.setAttribute(`aria-labelledby`,e[`aria-labelledby`])):a.textContent=e,t===`assertive`?(r=this.assertiveLog)==null||r.appendChild(a):(i=this.politeLog)==null||i.appendChild(a),e!==``&&setTimeout(()=>{a.remove()},n)}clear(e){this.node&&((!e||e===`assertive`)&&this.assertiveLog&&(this.assertiveLog.innerHTML=``),(!e||e===`polite`)&&this.politeLog&&(this.politeLog.innerHTML=``))}constructor(){this.node=null,this.assertiveLog=null,this.politeLog=null,typeof document<`u`&&(this.node=document.createElement(`div`),this.node.dataset.liveAnnouncer=`true`,Object.assign(this.node.style,{border:0,clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:`1px`,margin:`-1px`,overflow:`hidden`,padding:0,position:`absolute`,width:`1px`,whiteSpace:`nowrap`}),this.assertiveLog=this.createLog(`assertive`),this.node.appendChild(this.assertiveLog),this.politeLog=this.createLog(`polite`),this.node.appendChild(this.politeLog),document.body.prepend(this.node))}},EI=(0,nO.createContext)({}),Rw(function(e,t){[e,t]=Bx(e,t,EI),e=tT(e);let n=e,{isPending:r}=n,{buttonProps:i,isPressed:a}=eT(e,t),{focusProps:o,isFocused:s,isFocusVisible:c}=RC(e),{hoverProps:l,isHovered:u}=Nx({...e,isDisabled:e.isDisabled||r}),d={isHovered:u,isPressed:(n.isPressed||a)&&!r,isFocused:s,isFocusVisible:c,isDisabled:e.isDisabled||!1,isPending:r??!1},f=Rx({...e,values:d,defaultClassName:`react-aria-Button`}),p=jy(i.id),m=jy(),h=i[`aria-labelledby`];r&&(h?h=`${h} ${m}`:i[`aria-label`]&&(h=`${p} ${m}`));let g=(0,nO.useRef)(r);(0,nO.useEffect)(()=>{let e={"aria-labelledby":h||p};(!g.current&&s&&r||g.current&&s&&!r)&&$w(e,`assertive`),g.current=r},[r,s,h,p]);let _=Gy(e,{global:!0});return delete _.onClick,nO.createElement(`button`,{...B(_,f,i,o,l),type:i.type===`submit`&&r?`button`:i.type,id:p,ref:t,"aria-labelledby":h,slot:e.slot||void 0,"aria-disabled":r?`true`:i[`aria-disabled`],"data-disabled":e.isDisabled||void 0,"data-pressed":d.isPressed||void 0,"data-hovered":u||void 0,"data-focused":s||void 0,"data-pending":r||void 0,"data-focus-visible":c||void 0},nO.createElement(CI.Provider,{value:{id:m}},f.children))}),DI=(0,W.createContext)(null),OI=(0,W.createContext)(null),kI=(0,W.forwardRef)(function(e,t){[e,t]=Bx(e,t,DI);let n=(0,W.useContext)(lL),r=hw(e),i=e.isOpen!=null||e.defaultOpen!=null||!n?r:n,a=jb(t,i.isOpen)||e.isExiting||!1,o=zw(),{direction:s}=uS();if(o){let t=e.children;return typeof t==`function`&&(t=t({trigger:e.trigger||null,placement:`bottom`,isEntering:!1,isExiting:!1,defaultChildren:null})),W.createElement(W.Fragment,null,t)}return i&&!i.isOpen&&!a?null:W.createElement(nT,{...e,triggerRef:e.triggerRef,state:i,popoverRef:t,isExiting:a,dir:s})}),AI=(0,rO.createContext)(null),qw(`section`,(e,t,n)=>{let{name:r,render:i}=(0,rO.useContext)(AI);return i(e,t,n,`react-aria-Section`)}),jI={CollectionRoot({collection:e,renderDropIndicator:t}){return rT(e,null,t)},CollectionBranch({collection:e,parent:t,renderDropIndicator:n}){return rT(e,t,n)}},MI=(0,rO.createContext)(jI),NI=(0,iO.createContext)(null),PI=(0,iO.createContext)(null),FI=(0,aO.createContext)({}),Kw(cI,function(e,t){return[e,t]=Bx(e,t,FI),aO.createElement(`header`,{className:`react-aria-Header`,...e,ref:t},e.children)}),II=(0,oO.createContext)({}),(0,oO.forwardRef)(function(e,t){return[e,t]=Bx(e,t,II),oO.createElement(`kbd`,{dir:`ltr`,...e,ref:t})}),LI=(0,sO.createContext)({}),RI=class extends oI{filter(e,t){let n=t.getItem(this.prevKey);if(n&&n.type!==`separator`){let n=this.clone();return t.addDescendants(n,e),n}return null}},RI.type=`separator`,Kw(RI,function(e,t){[e,t]=Bx(e,t,LI);let{elementType:n,orientation:r,style:i,className:a,slot:o,...s}=e,c=n||`hr`;c===`hr`&&r===`vertical`&&(c=`div`);let{separatorProps:l}=oT({...s,elementType:n,orientation:r}),u=Gy(e,{global:!0});return sO.createElement(c,{...B(u,l),style:i,className:a??`react-aria-Separator`,ref:t,slot:o||void 0})}),zI=new WeakMap,BI=new WeakMap,VI=1e3,HI=class{getItemRect(e){let t=this.ref.current;if(!t)return null;let n=e==null?null:cT(this.ref,e);if(!n)return null;let r=t.getBoundingClientRect(),i=n.getBoundingClientRect();return{x:i.left-r.left-t.clientLeft+t.scrollLeft,y:i.top-r.top-t.clientTop+t.scrollTop,width:i.width,height:i.height}}getContentSize(){let e=this.ref.current;return{width:e?.scrollWidth??0,height:e?.scrollHeight??0}}getVisibleRect(){let e=this.ref.current;return{x:e?.scrollLeft??0,y:e?.scrollTop??0,width:e?.clientWidth??0,height:e?.clientHeight??0}}constructor(e){this.ref=e}},UI=class{isDisabled(e){return this.disabledBehavior===`all`&&(e.props?.isDisabled||this.disabledKeys.has(e.key))}findNextNonDisabled(e,t){let n=e;for(;n!=null;){let e=this.collection.getItem(n);if(e?.type===`item`&&!this.isDisabled(e))return n;n=t(n)}return null}getNextKey(e){let t=e;return t=this.collection.getKeyAfter(t),this.findNextNonDisabled(t,e=>this.collection.getKeyAfter(e))}getPreviousKey(e){let t=e;return t=this.collection.getKeyBefore(t),this.findNextNonDisabled(t,e=>this.collection.getKeyBefore(e))}findKey(e,t,n){let r=e,i=this.layoutDelegate.getItemRect(r);if(!i||r==null)return null;let a=i;do{if(r=t(r),r==null)break;i=this.layoutDelegate.getItemRect(r)}while(i&&n(a,i)&&r!=null);return r}isSameRow(e,t){return e.y===t.y||e.x!==t.x}isSameColumn(e,t){return e.x===t.x||e.y!==t.y}getKeyBelow(e){return this.layout===`grid`&&this.orientation===`vertical`?this.findKey(e,e=>this.getNextKey(e),this.isSameRow):this.getNextKey(e)}getKeyAbove(e){return this.layout===`grid`&&this.orientation===`vertical`?this.findKey(e,e=>this.getPreviousKey(e),this.isSameRow):this.getPreviousKey(e)}getNextColumn(e,t){return t?this.getPreviousKey(e):this.getNextKey(e)}getKeyRightOf(e){let t=this.direction===`ltr`?`getKeyRightOf`:`getKeyLeftOf`;return this.layoutDelegate[t]?(e=this.layoutDelegate[t](e),this.findNextNonDisabled(e,e=>this.layoutDelegate[t](e))):this.layout===`grid`?this.orientation===`vertical`?this.getNextColumn(e,this.direction===`rtl`):this.findKey(e,e=>this.getNextColumn(e,this.direction===`rtl`),this.isSameColumn):this.orientation===`horizontal`?this.getNextColumn(e,this.direction===`rtl`):null}getKeyLeftOf(e){let t=this.direction===`ltr`?`getKeyLeftOf`:`getKeyRightOf`;return this.layoutDelegate[t]?(e=this.layoutDelegate[t](e),this.findNextNonDisabled(e,e=>this.layoutDelegate[t](e))):this.layout===`grid`?this.orientation===`vertical`?this.getNextColumn(e,this.direction===`ltr`):this.findKey(e,e=>this.getNextColumn(e,this.direction===`ltr`),this.isSameColumn):this.orientation===`horizontal`?this.getNextColumn(e,this.direction===`ltr`):null}getFirstKey(){let e=this.collection.getFirstKey();return this.findNextNonDisabled(e,e=>this.collection.getKeyAfter(e))}getLastKey(){let e=this.collection.getLastKey();return this.findNextNonDisabled(e,e=>this.collection.getKeyBefore(e))}getKeyPageAbove(e){let t=this.ref.current,n=this.layoutDelegate.getItemRect(e);if(!n)return null;if(t&&!_b(t))return this.getFirstKey();let r=e;if(this.orientation===`horizontal`){let e=Math.max(0,n.x+n.width-this.layoutDelegate.getVisibleRect().width);for(;n&&n.x>e&&r!=null;)r=this.getKeyAbove(r),n=r==null?null:this.layoutDelegate.getItemRect(r)}else{let e=Math.max(0,n.y+n.height-this.layoutDelegate.getVisibleRect().height);for(;n&&n.y>e&&r!=null;)r=this.getKeyAbove(r),n=r==null?null:this.layoutDelegate.getItemRect(r)}return r??this.getFirstKey()}getKeyPageBelow(e){let t=this.ref.current,n=this.layoutDelegate.getItemRect(e);if(!n)return null;if(t&&!_b(t))return this.getLastKey();let r=e;if(this.orientation===`horizontal`){let e=Math.min(this.layoutDelegate.getContentSize().width,n.y-n.width+this.layoutDelegate.getVisibleRect().width);for(;n&&n.x{e.push({type:`item`,element:t})}),yield*e}}}},WI=yT,xT.getCollectionNode=function*(e){let{children:t,title:n,items:r}=e;yield{type:`section`,props:e,hasChildNodes:!0,rendered:n,"aria-label":e[`aria-label`],*childNodes(){if(typeof t==`function`){if(!r)throw Error(`props.children was a function but props.items is missing`);for(let e of r)yield{type:`item`,value:e,renderer:t}}else{let e=[];mO.Children.forEach(t,t=>{e.push({type:`item`,element:t})}),yield*e}}}},GI=class{build(e,t){return this.context=t,ST(()=>this.iterateCollection(e))}*iterateCollection(e){let{children:t,items:n}=e;if(hO.isValidElement(t)&&t.type===hO.Fragment)yield*this.iterateCollection({children:t.props.children,items:n});else if(typeof t==`function`){if(!n)throw Error(`props.children was a function but props.items is missing`);let e=0;for(let r of n)yield*this.getFullNode({value:r,index:e},{renderer:t}),e++}else{let e=[];hO.Children.forEach(t,t=>{t&&e.push(t)});let n=0;for(let t of e){let e=this.getFullNode({element:t,index:n},{});for(let t of e)n++,yield t}}}getKey(e,t,n,r){if(e.key!=null)return e.key;if(t.type===`cell`&&t.key!=null)return`${r}${t.key}`;let i=t.value;if(i!=null){let e=i.key??i.id;if(e==null)throw Error(`No key found for item`);return e}return r?`${r}.${t.index}`:`$.${t.index}`}getChildState(e,t){return{renderer:t.renderer||e.renderer}}*getFullNode(e,t,n,r){if(hO.isValidElement(e.element)&&e.element.type===hO.Fragment){let i=[];hO.Children.forEach(e.element.props.children,e=>{i.push(e)});let a=e.index??0;for(let e of i)yield*this.getFullNode({element:e,index:a++},t,n,r);return}let i=e.element;if(!i&&e.value&&t&&t.renderer){let n=this.cache.get(e.value);if(n&&(!n.shouldInvalidate||!n.shouldInvalidate(this.context))){n.index=e.index,n.parentKey=r?r.key:null,yield n;return}i=t.renderer(e.value)}if(hO.isValidElement(i)){let a=i.type;if(typeof a!=`function`&&typeof a.getCollectionNode!=`function`){let e=i.type;throw Error(`Unknown element <${e}> in collection.`)}let o=a.getCollectionNode(i.props,this.context),s=e.index??0,c=o.next();for(;!c.done&&c.value;){let a=c.value;e.index=s;let l=a.key??null;l??=a.element?null:this.getKey(i,e,t,n);let u=[...this.getFullNode({...a,key:l,index:s,wrapper:CT(e.wrapper,a.wrapper)},this.getChildState(t,a),n?`${n}${i.key}`:i.key,r)];for(let t of u){if(t.value=a.value??e.value??null,t.value&&this.cache.set(t.value,t),e.type&&t.type!==e.type)throw Error(`Unsupported type <${wT(t.type)}> in <${wT(r?.type??`unknown parent type`)}>. Only <${wT(e.type)}> is supported.`);s++,yield t}c=o.next(u)}return}if(e.key==null||e.type==null)return;let a=this,o={type:e.type,props:e.props,key:e.key,parentKey:r?r.key:null,value:e.value??null,level:r?r.level+1:0,index:e.index,rendered:e.rendered,textValue:e.textValue??``,"aria-label":e[`aria-label`],wrapper:e.wrapper,shouldInvalidate:e.shouldInvalidate,hasChildNodes:e.hasChildNodes||!1,childNodes:ST(function*(){if(!e.hasChildNodes||!e.childNodes)return;let n=0;for(let r of e.childNodes()){r.key!=null&&(r.key=`${o.key}${r.key}`);let e=a.getFullNode({...r,index:n},a.getChildState(t,r),o.key,o);for(let t of e)n++,yield t}})};yield o}constructor(){this.cache=new WeakMap}},KI=new WeakMap,qI=2,JI=50,YI=1e3,XI=Math.PI/12,ZI=class{*[Symbol.iterator](){yield*this.iterable}get size(){return this.keyMap.size}getKeys(){return this.keyMap.keys()}getKeyBefore(e){let t=this.keyMap.get(e);var n;return t&&(n=t.prevKey)!=null?n:null}getKeyAfter(e){let t=this.keyMap.get(e);var n;return t&&(n=t.nextKey)!=null?n:null}getFirstKey(){return this.firstKey}getLastKey(){return this.lastKey}getItem(e){return this.keyMap.get(e)??null}at(e){let t=[...this.getKeys()];return this.getItem(t[e])}constructor(e,{expandedKeys:t}={}){this.keyMap=new Map,this.firstKey=null,this.lastKey=null,this.iterable=e,t||=new Set;let n=e=>{if(this.keyMap.set(e.key,e),e.childNodes&&(e.type===`section`||t.has(e.key)))for(let t of e.childNodes)n(t)};for(let t of e)n(t);let r=null,i=0;for(let[e,t]of this.keyMap)r?(r.nextKey=e,t.prevKey=r.key):(this.firstKey=e,t.prevKey=void 0),t.type===`item`&&(t.index=i++),r=t,r.nextKey=void 0;this.lastKey=r?.key??null}},QI=class e extends Set{constructor(t,n,r){super(t),t instanceof e?(this.anchorKey=n??t.anchorKey,this.currentKey=r??t.currentKey):(this.anchorKey=n??null,this.currentKey=r??null)}},$I=class e{get selectionMode(){return this.state.selectionMode}get disallowEmptySelection(){return this.state.disallowEmptySelection}get selectionBehavior(){return this.state.selectionBehavior}setSelectionBehavior(e){this.state.setSelectionBehavior(e)}get isFocused(){return this.state.isFocused}setFocused(e){this.state.setFocused(e)}get focusedKey(){return this.state.focusedKey}get childFocusStrategy(){return this.state.childFocusStrategy}setFocusedKey(e,t){(e==null||this.collection.getItem(e))&&this.state.setFocusedKey(e,t)}get selectedKeys(){return this.state.selectedKeys===`all`?new Set(this.getSelectAllKeys()):this.state.selectedKeys}get rawSelection(){return this.state.selectedKeys}isSelected(e){if(this.state.selectionMode===`none`)return!1;let t=this.getKey(e);return t==null?!1:this.state.selectedKeys===`all`?this.canSelectItem(t):this.state.selectedKeys.has(t)}get isEmpty(){return this.state.selectedKeys!==`all`&&this.state.selectedKeys.size===0}get isSelectAll(){if(this.isEmpty)return!1;if(this.state.selectedKeys===`all`)return!0;if(this._isSelectAll!=null)return this._isSelectAll;let e=this.getSelectAllKeys(),t=this.state.selectedKeys;return this._isSelectAll=e.every(e=>t.has(e)),this._isSelectAll}get firstSelectedKey(){let e=null;for(let t of this.state.selectedKeys){let n=this.collection.getItem(t);(!e||n&&kT(this.collection,n,e)<0)&&(e=n)}return e?.key??null}get lastSelectedKey(){let e=null;for(let t of this.state.selectedKeys){let n=this.collection.getItem(t);(!e||n&&kT(this.collection,n,e)>0)&&(e=n)}return e?.key??null}get disabledKeys(){return this.state.disabledKeys}get disabledBehavior(){return this.state.disabledBehavior}extendSelection(e){if(this.selectionMode===`none`)return;if(this.selectionMode===`single`){this.replaceSelection(e);return}let t=this.getKey(e);if(t==null)return;let n;if(this.state.selectedKeys===`all`)n=new QI([t],t,t);else{let e=this.state.selectedKeys,r=e.anchorKey??t;n=new QI(e,r,t);for(let i of this.getKeyRange(r,e.currentKey??t))n.delete(i);for(let e of this.getKeyRange(t,r))this.canSelectItem(e)&&n.add(e)}this.state.setSelectedKeys(n)}getKeyRange(e,t){let n=this.collection.getItem(e),r=this.collection.getItem(t);return n&&r?kT(this.collection,n,r)<=0?this.getKeyRangeInternal(e,t):this.getKeyRangeInternal(t,e):[]}getKeyRangeInternal(e,t){var n;if((n=this.layoutDelegate)!=null&&n.getKeyRange)return this.layoutDelegate.getKeyRange(e,t);let r=[],i=e;for(;i!=null;){let e=this.collection.getItem(i);if(e&&(e.type===`item`||e.type===`cell`&&this.allowsCellSelection)&&r.push(i),i===t)return r;i=this.collection.getKeyAfter(i)}return[]}getKey(e){let t=this.collection.getItem(e);if(!t||t.type===`cell`&&this.allowsCellSelection)return e;for(;t&&t.type!==`item`&&t.parentKey!=null;)t=this.collection.getItem(t.parentKey);return!t||t.type!==`item`?null:t.key}toggleSelection(e){if(this.selectionMode===`none`)return;if(this.selectionMode===`single`&&!this.isSelected(e)){this.replaceSelection(e);return}let t=this.getKey(e);if(t==null)return;let n=new QI(this.state.selectedKeys===`all`?this.getSelectAllKeys():this.state.selectedKeys);n.has(t)?n.delete(t):this.canSelectItem(t)&&(n.add(t),n.anchorKey=t,n.currentKey=t),!(this.disallowEmptySelection&&n.size===0)&&this.state.setSelectedKeys(n)}replaceSelection(e){if(this.selectionMode===`none`)return;let t=this.getKey(e);if(t==null)return;let n=this.canSelectItem(t)?new QI([t],t,t):new QI;this.state.setSelectedKeys(n)}setSelectedKeys(e){if(this.selectionMode===`none`)return;let t=new QI;for(let n of e){let e=this.getKey(n);if(e!=null&&(t.add(e),this.selectionMode===`single`))break}this.state.setSelectedKeys(t)}getSelectAllKeys(){let e=[],t=n=>{for(;n!=null;){if(this.canSelectItem(n)){let r=this.collection.getItem(n);r?.type===`item`&&e.push(n),r?.hasChildNodes&&(this.allowsCellSelection||r.type!==`item`)&&t(DT(ET(r,this.collection))?.key??null)}n=this.collection.getKeyAfter(n)}};return t(this.collection.getFirstKey()),e}selectAll(){!this.isSelectAll&&this.selectionMode===`multiple`&&this.state.setSelectedKeys(`all`)}clearSelection(){!this.disallowEmptySelection&&(this.state.selectedKeys===`all`||this.state.selectedKeys.size>0)&&this.state.setSelectedKeys(new QI)}toggleSelectAll(){this.isSelectAll?this.clearSelection():this.selectAll()}select(e,t){this.selectionMode!==`none`&&(this.selectionMode===`single`?this.isSelected(e)&&!this.disallowEmptySelection?this.toggleSelection(e):this.replaceSelection(e):this.selectionBehavior===`toggle`||t&&(t.pointerType===`touch`||t.pointerType===`virtual`)?this.toggleSelection(e):this.replaceSelection(e))}isSelectionEqual(e){if(e===this.state.selectedKeys)return!0;let t=this.selectedKeys;if(e.size!==t.size)return!1;for(let n of e)if(!t.has(n))return!1;for(let n of t)if(!e.has(n))return!1;return!0}canSelectItem(e){var t;if(this.state.selectionMode===`none`||this.state.disabledKeys.has(e))return!1;let n=this.collection.getItem(e);return!(!n||!(n==null||(t=n.props)==null)&&t.isDisabled||n.type===`cell`&&!this.allowsCellSelection)}isDisabled(e){var t,n;return this.state.disabledBehavior===`all`&&(this.state.disabledKeys.has(e)||!!(!((n=this.collection.getItem(e))==null||(t=n.props)==null)&&t.isDisabled))}isLink(e){var t,n;return!!(!((n=this.collection.getItem(e))==null||(t=n.props)==null)&&t.href)}getItemProps(e){return this.collection.getItem(e)?.props}withCollection(t){return new e(t,this.state,{allowsCellSelection:this.allowsCellSelection,layoutDelegate:this.layoutDelegate||void 0})}constructor(e,t,n){this.collection=e,this.state=t,this.allowsCellSelection=n?.allowsCellSelection??!1,this._isSelectAll=null,this.layoutDelegate=n?.layoutDelegate||null}},eL=(0,G.createContext)(null),tL=(0,G.createContext)(null),nL=(0,G.createContext)(null),rL=(0,G.createContext)(null),iL=(0,G.createContext)(null),aL=class extends oI{filter(e,t,n){let r=e.getItem(this.firstChildKey);if(r&&n(r.textValue,this)){let n=this.clone();return t.addDescendants(n,e),n}return null}},aL.type=`submenutrigger`,qw(aL,(e,t,n)=>{let{CollectionBranch:r}=(0,G.useContext)(MI),i=(0,G.useContext)(tL),a=(0,G.useContext)(nL),o=LT({triggerKey:n.key},a),s=(0,G.useRef)(null),c=db(t),{parentMenuRef:l,shouldUseVirtualFocus:u}=(0,G.useContext)(iL),{submenuTriggerProps:d,submenuProps:f,popoverProps:p}=FT({parentMenuRef:l,submenuRef:s,delay:e.delay,shouldUseVirtualFocus:u},o,c);return G.createElement(Lx,{values:[[sL,{...d,onAction:void 0,ref:c}],[eL,{ref:s,...f}],[lL,o],[DI,{trigger:`SubmenuTrigger`,triggerRef:c,placement:`end top`,"aria-labelledby":f[`aria-labelledby`],...p}]]},G.createElement(r,{collection:i.collection,parent:n}),e.children[1])},e=>e.children[0]),(0,G.forwardRef)(function(e,t){return[e,t]=Bx(e,t,eL),G.createElement(Bw,{content:G.createElement(Yw,e)},n=>G.createElement(UT,{props:e,collection:n,menuRef:t}))}),oL=class extends $I{get focusedKey(){return this.parent.focusedKey}get isFocused(){return this.parent.isFocused}setFocusedKey(e,t){return this.parent.setFocusedKey(e,t)}setFocused(e){this.parent.setFocused(e)}get childFocusStrategy(){return this.parent.childFocusStrategy}constructor(e,t){super(e.collection,t),this.parent=e}},qw(dI,WT),sL=(0,G.createContext)(null),Kw(uI,function(e,t,n){[e,t]=Bx(e,t,sL);let r=zx(sL)?.id,i=(0,G.useContext)(tL),a=db(t),o=(0,G.useContext)(rL),{menuItemProps:s,labelProps:c,descriptionProps:l,keyboardShortcutProps:u,...d}=MT({...e,id:r,key:n.key,selectionManager:o},i,a),{hoverProps:f,isHovered:p}=Nx({isDisabled:d.isDisabled}),m=Rx({...e,id:void 0,children:n.rendered,defaultClassName:`react-aria-MenuItem`,values:{...d,isHovered:p,isFocusVisible:d.isFocusVisible,selectionMode:o.selectionMode,selectionBehavior:o.selectionBehavior,hasSubmenu:!!e[`aria-haspopup`],isOpen:e[`aria-expanded`]===`true`}}),h=e.href?`a`:`div`,g=Gy(e,{global:!0});return delete g.id,delete g.onClick,G.createElement(h,{...B(g,m,s,f),ref:a,"data-disabled":d.isDisabled||void 0,"data-hovered":p||void 0,"data-focused":d.isFocused||void 0,"data-focus-visible":d.isFocusVisible||void 0,"data-pressed":d.isPressed||void 0,"data-selected":d.isSelected||void 0,"data-selection-mode":o.selectionMode===`none`?void 0:o.selectionMode,"data-has-submenu":!!e[`aria-haspopup`]||void 0,"data-open":e[`aria-expanded`]===`true`||void 0},G.createElement(Lx,{values:[[wP,{slots:{[sj]:c,label:c,description:l}}],[II,u]]},m.children))}),cL=(0,TO.createContext)(null),lL=(0,TO.createContext)(null),(0,TO.forwardRef)(function(e,t){let n=e[`aria-labelledby`];[e,t]=Bx(e,t,cL);let{dialogProps:r,titleProps:i}=GT({...e,"aria-labelledby":n},t),a=(0,TO.useContext)(lL);!r[`aria-label`]&&!r[`aria-labelledby`]&&e[`aria-labelledby`]&&(r[`aria-labelledby`]=e[`aria-labelledby`]);let o=Rx({defaultClassName:`react-aria-Dialog`,className:e.className,style:e.style,children:e.children,values:{close:a?.close||(()=>{})}}),s=Gy(e,{global:!0});return TO.createElement(`section`,{...B(s,o,r),ref:t,slot:e.slot||void 0},TO.createElement(Lx,{values:[[SP,{slots:{[sj]:{},title:{...i,level:2}}}],[EI,{slots:{[sj]:{},close:{onPress:()=>a?.close()}}}]]},o.children))}),uL=({ariaLabel:e,placement:t=`bottom-start`,hasChrome:n=!0,hasCloseButton:r=!1,closeLabel:i,offset:a=8,padding:o,popover:s,children:c,defaultVisible:l,visible:u,onVisibleChange:d,...f})=>{e||aI(`The 'ariaLabel' prop on 'PopoverProvider' will become mandatory in Storybook 11. Provide a concise, accessible label describing the popover's purpose.`);let p=LN(t),[m,h]=(0,YD.useState)(l??!1),g=(0,YD.useCallback)(e=>{h(e),d?.(e)},[d]),_=(0,YD.useCallback)(()=>g(!1),[g]);return YD.createElement(KT,{defaultOpen:l,isOpen:u??m,onOpenChange:g,...f},YD.createElement(nj,null,(0,YD.cloneElement)(c,{"aria-haspopup":`dialog`})),YD.createElement(kI,{"aria-label":e,placement:p,offset:a,style:{outline:`none`}},YD.createElement(YF,{hasChrome:n,hideLabel:i,onHide:r?_:void 0,padding:o},typeof s==`function`?s({onHide:_}):s)))},dL=(0,EO.forwardRef)((e,t)=>EO.createElement(YF,{ref:t,...e})),dL.displayName=`Tooltip`,(0,DO.lazy)(()=>a(()=>import(`./WithTooltip-65CFNBJE-BwYBYwM9.js`).then(e=>({default:e.WithTooltip})),__vite__mapDeps([10,1,2,3,7,4,5,0]),import.meta.url)),(0,DO.lazy)(()=>a(()=>import(`./WithTooltip-65CFNBJE-BwYBYwM9.js`).then(e=>({default:e.WithTooltipPure})),__vite__mapDeps([10,1,2,3,7,4,5,0]),import.meta.url)),{deprecate:fL}=__STORYBOOK_MODULE_CLIENT_LOGGER__,E.div(({theme:e})=>({fontWeight:e.typography.weight.bold})),E.span(),E.div(({theme:e})=>({marginTop:8,textAlign:`center`,"> *":{margin:`0 8px`,fontWeight:e.typography.weight.bold}})),E.div(({theme:e})=>({color:e.color.defaultText,lineHeight:`18px`})),E.div({padding:15,width:280,boxSizing:`border-box`}),{deprecate:pL}=__STORYBOOK_MODULE_CLIENT_LOGGER__,mL=h(oe(),1),{deprecate:hL}=__STORYBOOK_MODULE_CLIENT_LOGGER__,gL=E(({active:e,loading:t,disabled:n,...r})=>kO.createElement(`span`,{...r}))(({theme:e})=>({color:e.color.defaultText,fontWeight:e.typography.weight.regular}),({active:e,theme:t})=>e?{color:t.color.secondary,fontWeight:t.typography.weight.bold}:{},({loading:e,theme:t})=>e?{display:`inline-block`,flex:`none`,...t.animation.inlineGlow}:{},({disabled:e,theme:t})=>e?{color:t.textMutedColor}:{}),_L=E.span({display:`flex`,"& svg":{height:12,width:12,margin:`3px 0`,verticalAlign:`top`}}),vL=E.span({flex:1,textAlign:`left`,display:`flex`,flexDirection:`column`,minWidth:0},({isIndented:e})=>e?{marginLeft:24}:{}),yL=E.span(({theme:e})=>({fontSize:`11px`,lineHeight:`14px`}),({active:e,theme:t})=>e?{color:t.color.secondary}:{},({theme:e,disabled:t})=>t?{color:e.textMutedColor}:{}),bL=E.span(({active:e,theme:t})=>e?{color:t.color.secondary}:{},()=>({display:`flex`,maxWidth:14})),xL=E.button(({theme:e})=>({width:`100%`,minWidth:0,border:`none`,borderRadius:e.appBorderRadius,background:`none`,fontSize:e.typography.size.s1,transition:`background 150ms ease-out`,color:e.color.dark,textDecoration:`none`,justifyContent:`space-between`,lineHeight:`18px`,padding:`7px 10px`,display:`flex`,alignItems:`center`,"& > * + *":{paddingLeft:10},"&:focus-visible":{outline:`2px solid ${e.color.secondary}`,outlineOffset:0}}),({theme:e,href:t,onClick:n})=>(t||n)&&{cursor:`pointer`,"&:hover":{background:e.background.hoverable},"&:hover svg":{opacity:1}},({theme:e,as:t})=>t===`label`&&{"&:has(input:not(:disabled))":{cursor:`pointer`,"&:hover":{background:e.background.hoverable}}},({disabled:e})=>e&&{cursor:`not-allowed`}),SL=(0,mL.default)(100)(({onClick:e,input:t,href:n,LinkWrapper:r})=>({...e&&{as:`button`,role:`button`,onClick:e},...t&&{as:`label`},...n&&{as:`a`,role:`link`,href:n,...r&&{as:r,to:n}}})),CL=(0,kO.forwardRef)((e,t)=>{let{loading:n=!1,title:r=kO.createElement(`span`,null,`Loading state`),center:i=null,right:a=null,active:o=!1,disabled:s=!1,isIndented:c=!1,href:l=void 0,onClick:u=void 0,icon:d,input:f,LinkWrapper:p=void 0,...m}=e,h={active:o,disabled:s},g=SL(e),_=d||f;return hL("`ListItem` is deprecated and will be removed in Storybook 11, use `MenuItem` instead."),kO.createElement(xL,{"data-deprecated":`ListItem`,ref:t,...m,...h,...g},kO.createElement(kO.Fragment,null,_&&kO.createElement(bL,{...h},_),r||i?kO.createElement(vL,{isIndented:c&&!_},r&&kO.createElement(gL,{...h,loading:n},r),i&&kO.createElement(yL,{...h},i)):null,a&&kO.createElement(_L,{...h},a)))}),CL.displayName=`ListItem`,wL=CL,TL=E.div({minWidth:180,overflow:`hidden`,overflowY:`auto`,maxHeight:504},({theme:e})=>({borderRadius:e.appBorderRadius+2}),({theme:e})=>e.base===`dark`?{background:e.background.content}:{}),EL=E.div(({theme:e})=>({padding:4,"& + &":{borderTop:`1px solid ${e.appBorderColor}`}})),DL=({id:e,onClick:t,...n})=>{let{active:r,disabled:i,title:a,href:o}=n,s=(0,OO.useCallback)(n=>t?.(n,{id:e,active:r,disabled:i,title:a,href:o}),[t,e,r,i,a,o]);return OO.createElement(wL,{id:`list-item-${e}`,...n,...t&&{onClick:s}})},OL=({links:e,LinkWrapper:t,...n})=>{pL("`TooltipLinkList` is deprecated and will be removed in Storybook 11, use `ActionList` or `MenuItem` and `WithMenu` instead.");let r=Array.isArray(e[0])?e:[e],i=r.some(e=>e.some(e=>`icon`in e&&e.icon||`input`in e&&e.input));return OO.createElement(TL,{"data-deprecated":`TooltipLinkList`,...n,className:`sb-list`},r.filter(e=>e.length).map((e,n)=>OO.createElement(EL,{key:e.map(e=>e.id).join(`~${n}~`)},e.map(e=>`content`in e?OO.createElement(OO.Fragment,{key:e.id},e.content):OO.createElement(DL,{key:e.id,isIndented:i,LinkWrapper:t,...e})))))},{deprecate:kL}=__STORYBOOK_MODULE_CLIENT_LOGGER__,{deprecate:AL}=__STORYBOOK_MODULE_CLIENT_LOGGER__,jL=E.div(({backgroundColor:e,border:t=!1,innerStyle:n={},scrollable:r,theme:i})=>({color:i.barTextColor,width:`100%`,minHeight:40,flexShrink:0,scrollbarColor:`${i.barTextColor} ${t?e||i.barBg:`transparent`}`,scrollbarWidth:`thin`,overflow:r?`auto`:`hidden`,overflowY:`hidden`,display:`flex`,alignItems:`center`,gap:r?0:6,paddingInline:r?0:6,...t?{boxShadow:`${i.appBorderColor} 0 -1px 0 0 inset`,background:e||i.barBg}:{},...n})),ML=E.div(({innerStyle:e})=>({minHeight:40,display:`flex`,alignItems:`center`,width:`100%`,gap:6,paddingInline:6,...e})),NL=(0,jO.forwardRef)(({scrollable:e=!0,children:t,innerStyle:n,...r},i)=>jO.createElement(jL,{...r,ref:i,innerStyle:e?void 0:n,scrollable:e},e?jO.createElement(ML,{innerStyle:n},t):t)),NL.displayName=`Bar`,PL=E.div({display:`flex`,whiteSpace:`nowrap`,flexBasis:`auto`,marginLeft:3,marginRight:10},({scrollable:e})=>e?{flexShrink:0}:{},({left:e})=>e?{"& > *":{marginLeft:4}}:{},({right:e})=>e?{gap:6}:{}),PL.displayName=`Side`,FL=E.div(({bgColor:e})=>({display:`flex`,justifyContent:`space-between`,position:`relative`,flexWrap:`nowrap`,flexShrink:0,height:40,width:`100%`,backgroundColor:e||``})),IL=E(NL)({paddingInline:0}),LL=({children:e,backgroundColor:t,className:n=``,...r})=>{AL(`FlexBar is deprecated. Use Bar with justifyContent: "space-between" instead.`);let[i,a]=jO.Children.toArray(e);return jO.createElement(IL,{"data-deprecated":`FlexBar`,backgroundColor:t,className:`sb-bar ${n}`,...r},jO.createElement(FL,{bgColor:t},jO.createElement(PL,{scrollable:r.scrollable,left:!0},i),a?jO.createElement(PL,{right:!0},a):null))},LL.displayName=`FlexBar`,{deprecate:RL}=__STORYBOOK_MODULE_CLIENT_LOGGER__,zL=e=>typeof e.props.href==`string`,BL=e=>typeof e.props.href!=`string`,VL=(0,MO.forwardRef)(qT),VL.displayName=`ButtonOrLink`,HL=E(VL,{shouldForwardProp:j})({whiteSpace:`normal`,display:`inline-flex`,overflow:`hidden`,verticalAlign:`top`,justifyContent:`center`,alignItems:`center`,textAlign:`center`,textDecoration:`none`,"&:empty":{display:`none`},"&[hidden]":{display:`none`}},({theme:e})=>({padding:`0 15px`,transition:`color 0.2s linear, border-bottom-color 0.2s linear`,height:40,lineHeight:`12px`,cursor:`pointer`,background:`transparent`,border:`0 solid transparent`,borderTop:`3px solid transparent`,borderBottom:`3px solid transparent`,fontWeight:`bold`,fontSize:13,"&:focus":{outline:`0 none`,borderBottomColor:e.barSelectedColor}}),({active:e,textColor:t,theme:n})=>e?{color:t||n.barSelectedColor,borderBottomColor:n.barSelectedColor}:{color:t||n.barTextColor,borderBottomColor:`transparent`,"&:hover":{color:n.barHoverColor}}),UL=(0,MO.forwardRef)((e,t)=>(RL("The `TabButton` component is deprecated. Use `TabList` instead."),MO.createElement(HL,{"data-deprecated":`TabButton`,ref:t,...e}))),UL.displayName=`TabButton`,WL=E.div(({theme:e})=>({height:`100%`,display:`flex`,padding:30,alignItems:`center`,justifyContent:`center`,flexDirection:`column`,gap:15,background:e.background.content})),GL=E.div({display:`flex`,flexDirection:`column`,gap:4,maxWidth:415}),KL=E.div(({theme:e})=>({fontWeight:e.typography.weight.bold,fontSize:e.typography.size.s2-1,textAlign:`center`,color:e.color.defaultText})),qL=E.div(({theme:e})=>({fontSize:e.typography.size.s2-1})),JL=E.div(({theme:e})=>({fontWeight:e.typography.weight.regular,fontSize:e.typography.size.s2-1,textAlign:`center`,color:e.textMutedColor})),YL=({title:e,description:t,footer:n})=>NO.createElement(WL,null,NO.createElement(GL,null,NO.createElement(KL,null,e),t&&NO.createElement(JL,null,t)),n&&NO.createElement(qL,null,n)),{deprecate:XL}=__STORYBOOK_MODULE_CLIENT_LOGGER__,ZL=E.div(({active:e})=>e?{display:`block`}:{display:`none`}),QL=e=>(XL("The `childrenToList` tabs helper is deprecated. Use `TabsView` instead."),PO.Children.toArray(e).map(({props:{title:e,id:t,color:n,children:r}})=>{let i=Array.isArray(r)?r[0]:r;return{title:e,id:t,...n?{color:n}:{},render:typeof i==`function`?i:({active:e})=>PO.createElement(ZL,{active:e,role:`tabpanel`},i)}})),{deprecate:$L}=__STORYBOOK_MODULE_CLIENT_LOGGER__,eR=E.span(({theme:e,isActive:t})=>({display:`inline-block`,width:0,height:0,marginLeft:8,color:t?e.color.secondary:e.color.mediumdark,borderRight:`3px solid transparent`,borderLeft:`3px solid transparent`,borderTop:`3px solid`,transition:`transform .1s ease-out`})),tR=E(UL)(({active:e,theme:t,preActive:n})=>` + `,borderRadius:e.appBorderRadius+2,fontSize:e.typography.size.s1}:{},({theme:e,bgColor:t})=>t===`default`&&{background:e.base===`light`?A(e.background.app):e.background.app,color:e.color.defaultText},({theme:e,bgColor:t})=>t===`inverse`&&{background:e.base===`light`?e.color.darkest:e.color.lightest,color:e.color.inverseText},({theme:e,bgColor:t})=>(t===`positive`||t===`negative`||t===`warning`)&&{background:e.background[t],color:e.color[`${t}Text`]}),JF=E(VN)({position:`absolute`,top:4,right:4}),YF=(0,qD.forwardRef)(({children:e,color:t=`default`,hasChrome:n=!0,hideLabel:r=`Close`,onHide:i,padding:a=8,...o},s)=>qD.createElement(qF,{bgColor:t,hasChrome:n,hasCloseButton:!!i,padding:a,ref:s,...o},e,i&&qD.createElement(JF,{ariaLabel:r,onClick:i,padding:`small`,variant:`ghost`,size:`small`},qD.createElement(Ae,null)))),YF.displayName=`Popover`,XF=({id:e,title:t,description:n,icon:r,aside:i,children:a,isSelected:o,isActive:s,onClick:c,onFocus:l,onKeyDown:u,shouldLookDisabled:d=!1,...f})=>JD.createElement(nP.Item,{...f,id:e,role:`option`,tabIndex:s?0:-1,"aria-selected":o,"aria-disabled":d?!0:void 0,onClick:c,onFocus:l,onKeyDown:u},a??JD.createElement(JD.Fragment,null,r&&JD.createElement(nP.Icon,null,r),JD.createElement(nP.Text,null,JD.createElement(`p`,null,t),n&&JD.createElement(`small`,null,n)),i)),XF.displayName=`SelectOption`,ZF=5,QF=Symbol.for(`undefined`),$F=E(`ul`)({minWidth:180,height:`100%`,borderRadius:6,overflow:`hidden auto`,listStyle:`none`,margin:0,padding:4}),eI=E.span(({theme:e})=>({appearance:`none`,color:e.textMutedColor,fontSize:12})),tI=E(VN)(({$isOpen:e,$hasSelection:t,theme:n})=>e||t?{boxShadow:`none`,background:ae(.93,n.barSelectedColor),color:n.base===`light`?C(.1,n.color.secondary):n.color.secondary}:{}),nI=E.div({position:`fixed`,inset:0,zIndex:1e3}),rI=({children:e,handleClose:t,triggerRef:n})=>{let r=H.useRef(null);Px({ref:r,onInteractOutside:t}),(0,H.useEffect)(()=>{if(r.current)return lw([r.current],{shouldUseInert:!0})},[]);let{overlayProps:i}=pC({targetRef:n,overlayRef:r,placement:`bottom start`,offset:8,maxHeight:504,isOpen:!0}),{overlayProps:a,underlayProps:o}=WC({isOpen:!0,onClose:t,isDismissable:!0,shouldCloseOnBlur:!1,isKeyboardDismissDisabled:!0},r),s=ne();return i.style={...i.style,overflow:`hidden auto`,scrollbarColor:`${s.barTextColor} transparent`,scrollbarWidth:`thin`},H.createElement(fw,{disableFocusManagement:!0,...a},H.createElement(nI,{...o}),H.createElement(YF,{hasChrome:!0,ref:r,padding:0,...i},e))},iI=(0,H.forwardRef)(({children:e,icon:t,disabled:n=!1,options:r,defaultOptions:i,multiSelect:a=!1,onReset:o,padding:s=`small`,resetLabel:c,onSelect:l,onDeselect:u,onChange:d,tooltip:f,ariaLabel:p,showSelectedOptionTitle:m=!0,...h},g)=>{let[_,v]=(0,H.useState)(h.defaultOpen||!1),[y,b]=(0,H.useState)(!1),x=db(g),S=(0,H.useMemo)(()=>`select-`+Math.random().toString(36).substring(2,15),[]),C=`${S}-listbox`,w=(0,H.useRef)(null),T=hw({isOpen:_&&!n,onOpenChange:v}),E=(0,H.useCallback)(()=>{v(!1),b(!0)},[]);(0,H.useEffect)(()=>{!T.isOpen&&y&&(x.current?.focus(),b(!1))},[T.isOpen,y,x]);let[D,O]=(0,H.useState)(Pw(r,i)),k=(0,H.useCallback)(e=>{e.type===`reset`?(d?.([]),o?.(),O([])):O(a?t=>{let n=[];return t?.some(t=>t.value===e.value)?(u?.(jw(e.value)),n=t?.filter(t=>t.value!==e.value)??[]):(l?.(jw(e.value)),n=[...t??[],e]),d?.(n.map(e=>jw(e.value))),n}:t=>t.every(t=>t.value!==e.value)?(l?.(jw(e.value)),d?.([jw(e.value)]),[e]):t)},[a,d,l,u,o]),ee=(0,H.useMemo)(()=>o?{type:`reset`,value:void 0,title:c??`Reset selection`,icon:H.createElement(Ve,null),description:void 0,children:void 0}:void 0,[o,c]),A=(0,H.useMemo)(()=>ee?[ee,...r]:r,[r,ee]);(0,H.useEffect)(()=>{i&&O(Pw(r,i))},[i,r]);let[j,te]=(0,H.useState)(void 0),M=(0,H.useCallback)((e,t=!0)=>{te(Aw(e)),!a&&t&&k(Aw(e))},[a,k]),ne=(0,H.useCallback)((e=1)=>{if(!_||!j){M(A[e===1?0:Math.min(e,A.length-1)]);return}let t=A.findIndex(e=>j.type===`reset`?`type`in e&&e.type===`reset`:Mw(e.value)===j.value),n=t+e,r;r=n>=A.length&&t===A.length-1?A[0]:A[Math.min(A.length-1,n)],M(r)},[_,j,M,A]),re=(0,H.useCallback)((e=1)=>{if(!_||!j){M(A[Math.max(0,A.length-e)]);return}let t=A.findIndex(e=>j.type===`reset`?`type`in e&&e.type===`reset`:Mw(e.value)===j.value),n=t-e,r;r=n<0&&t===0?A[A.length-1]:A[Math.max(0,n)],M(r)},[_,j,M,A]),ie=(0,H.useCallback)(e=>{let t=t=>{e.preventDefault(),M(A[t]),v(!0)},n=A.findIndex(e=>D.some(t=>t.value===Mw(e.value))),r=n!==-1,i=ee&&!r?1:0,a=A.length-1;e.key===`Enter`||e.key===` `?t(r?Math.min(n,a):i):e.key===`ArrowDown`?t(r?Math.min(n+1,a):i):e.key===`ArrowUp`?t(r?Math.max(n-1,i):a):e.key===`Home`?t(i):e.key===`End`?t(a):e.key===`PageDown`?t(Math.min((r?n:i)+ZF,a)):e.key===`PageUp`&&t(Math.max(0,(r?n:a)-ZF))},[A,ee,M,D]),ae=(0,H.useCallback)(e=>{e.key===`Tab`?E():e.preventDefault(),e.key===`Escape`?E():e.key===`ArrowDown`?ne():e.key===`ArrowUp`?re():e.key===`Home`?M(A[0]):e.key===`End`?M(A[A.length-1]):e.key===`PageDown`?ne(ZF):e.key===`PageUp`&&re(ZF)},[E,ne,re,A,M]);(0,H.useEffect)(()=>{if(_&&j){let e=document.getElementById(Nw(S,j));e&&(e.scrollIntoView({block:`nearest`}),e.focus())}else _&&w.current?.focus()},[_,j,S]);let oe=(0,H.useMemo)(()=>D.length===1?`${p} ${D[0].title}`:D.length?`${p}, ${D.length} values selected`:p,[p,D]);return H.createElement(H.Fragment,null,H.createElement(tI,{...h,variant:`ghost`,ariaLabel:oe,tooltip:f??p,disableAllTooltips:_,id:S,ref:x,padding:s,$isOpen:_,$hasSelection:!!D.length,"aria-disabled":n,disabled:n,onClick:()=>{_?E():v(!0)},tabIndex:_?-1:0,onKeyDown:ie,role:`button`,"aria-controls":_?C:void 0,"aria-expanded":_,"aria-haspopup":`listbox`},!a&&H.createElement(H.Fragment,null,t,m&&D[0]?.title||e),a&&H.createElement(H.Fragment,null,t,e,!!D.length&&H.createElement(eI,{"aria-label":`${D.length} ${D.length>1?`items`:`item`} selected`},D?.length))),T.isOpen&&H.createElement(rI,{handleClose:E,triggerRef:x},H.createElement($F,{"aria-label":p,role:`listbox`,id:C,ref:w,"aria-multiselectable":a,onKeyDown:ae,tabIndex:_?0:-1},A.map(e=>({option:Aw(e),externalOption:e})).map(({externalOption:e,option:t})=>{let n=D?.some(e=>e.value===t.value)&&t!==ee,r=t===ee;return H.createElement(XF,{key:t.value===void 0?`sb-reset`:String(t.value),title:t.title,description:t.description,aside:t.aside,icon:!r&&a?H.createElement(KF.Checkbox,{checked:n,hidden:!0,role:`presentation`}):t.icon,id:Nw(S,t),isActive:_&&j?.value===t.value,isSelected:n,onClick:()=>{k(t),a||E()},onFocus:()=>M(e,!1),shouldLookDisabled:r&&D.length===0&&a,onKeyDown:e=>{e.key===`Enter`||e.key===` `?(e.preventDefault(),k(t),a||E()):e.key===`Tab`&&(a||k(t),E())}},t.children)}))))}),iI.displayName=`Select`,{deprecate:aI}=__STORYBOOK_MODULE_CLIENT_LOGGER__,oI=class{get childNodes(){throw Error(`childNodes is not supported`)}clone(){let e=new this.constructor(this.key);return e.value=this.value,e.level=this.level,e.hasChildNodes=this.hasChildNodes,e.rendered=this.rendered,e.textValue=this.textValue,e[`aria-label`]=this[`aria-label`],e.index=this.index,e.parentKey=this.parentKey,e.prevKey=this.prevKey,e.nextKey=this.nextKey,e.firstChildKey=this.firstChildKey,e.lastChildKey=this.lastChildKey,e.props=this.props,e.render=this.render,e.colSpan=this.colSpan,e.colIndex=this.colIndex,e}filter(e,t,n){let r=this.clone();return t.addDescendants(r,e),r}constructor(e){this.value=null,this.level=0,this.hasChildNodes=!1,this.rendered=null,this.textValue=``,this[`aria-label`]=void 0,this.index=0,this.parentKey=null,this.prevKey=null,this.nextKey=null,this.firstChildKey=null,this.lastChildKey=null,this.props={},this.colSpan=null,this.colIndex=null,this.type=this.constructor.type,this.key=e}},sI=class extends oI{filter(e,t,n){let[r,i]=Fw(e,t,this.firstChildKey,n),a=this.clone();return a.firstChildKey=r,a.lastChildKey=i,a}},cI=class extends oI{},cI.type=`header`,lI=class extends oI{},lI.type=`loader`,uI=class extends sI{filter(e,t,n){if(n(this.textValue,this)){let n=this.clone();return t.addDescendants(n,e),n}return null}},uI.type=`item`,dI=class extends sI{filter(e,t,n){let r=super.filter(e,t,n);if(r&&r.lastChildKey!==null){let t=e.getItem(r.lastChildKey);if(t&&t.type!==`header`)return r}return null}},dI.type=`section`,fI=class{get size(){return this.itemCount}getKeys(){return this.keyMap.keys()}*[Symbol.iterator](){let e=this.firstKey==null?void 0:this.keyMap.get(this.firstKey);for(;e;)yield e,e=e.nextKey==null?void 0:this.keyMap.get(e.nextKey)}getChildren(e){let t=this.keyMap;return{*[Symbol.iterator](){let n=t.get(e),r=n?.firstChildKey==null?null:t.get(n.firstChildKey);for(;r;)yield r,r=r.nextKey==null?void 0:t.get(r.nextKey)}}}getKeyBefore(e){let t=this.keyMap.get(e);if(!t)return null;if(t.prevKey!=null){for(t=this.keyMap.get(t.prevKey);t&&t.type!==`item`&&t.lastChildKey!=null;)t=this.keyMap.get(t.lastChildKey);return t?.key??null}return t.parentKey}getKeyAfter(e){let t=this.keyMap.get(e);if(!t)return null;if(t.type!==`item`&&t.firstChildKey!=null)return t.firstChildKey;for(;t;){if(t.nextKey!=null)return t.nextKey;if(t.parentKey!=null)t=this.keyMap.get(t.parentKey);else return null}return null}getFirstKey(){return this.firstKey}getLastKey(){let e=this.lastKey==null?null:this.keyMap.get(this.lastKey);for(;e?.lastChildKey!=null;)e=this.keyMap.get(e.lastChildKey);return e?.key??null}getItem(e){return this.keyMap.get(e)??null}at(){throw Error(`Not implemented`)}clone(){let e=this.constructor,t=new e;return t.keyMap=new Map(this.keyMap),t.firstKey=this.firstKey,t.lastKey=this.lastKey,t.itemCount=this.itemCount,t}addNode(e){if(this.frozen)throw Error(`Cannot add a node to a frozen collection`);e.type===`item`&&this.keyMap.get(e.key)==null&&this.itemCount++,this.keyMap.set(e.key,e)}addDescendants(e,t){this.addNode(e);let n=t.getChildren(e.key);for(let e of n)this.addDescendants(e,t)}removeNode(e){if(this.frozen)throw Error(`Cannot remove a node to a frozen collection`);let t=this.keyMap.get(e);t!=null&&t.type===`item`&&this.itemCount--,this.keyMap.delete(e)}commit(e,t,n=!1){if(this.frozen)throw Error(`Cannot commit a frozen collection`);this.firstKey=e,this.lastKey=t,this.frozen=!n}filter(e){let t=new this.constructor,[n,r]=Fw(this,t,this.firstKey,e);return t?.commit(n,r),t}constructor(){this.keyMap=new Map,this.firstKey=null,this.lastKey=null,this.frozen=!1,this.itemCount=0}},pI=class{*[Symbol.iterator](){let e=this.firstChild;for(;e;)yield e,e=e.nextSibling}get firstChild(){return this._firstChild}set firstChild(e){this._firstChild=e,this.ownerDocument.markDirty(this)}get lastChild(){return this._lastChild}set lastChild(e){this._lastChild=e,this.ownerDocument.markDirty(this)}get previousSibling(){return this._previousSibling}set previousSibling(e){this._previousSibling=e,this.ownerDocument.markDirty(this)}get nextSibling(){return this._nextSibling}set nextSibling(e){this._nextSibling=e,this.ownerDocument.markDirty(this)}get parentNode(){return this._parentNode}set parentNode(e){this._parentNode=e,this.ownerDocument.markDirty(this)}get isConnected(){return this.parentNode?.isConnected||!1}invalidateChildIndices(e){(this._minInvalidChildIndex==null||!this._minInvalidChildIndex.isConnected||e.indexthis.subscriptions.delete(e)}resetAfterSSR(){this.isSSR&&(this.isSSR=!1,this.firstChild=null,this.lastChild=null,this.nodeId=0)}constructor(e){super(null),this.nodeType=11,this.ownerDocument=this,this.dirtyNodes=new Set,this.isSSR=!1,this.nodeId=0,this.nodesByProps=new WeakMap,this.isMounted=!0,this.nextCollection=null,this.subscriptions=new Set,this.queuedRender=!1,this.inSubscription=!1,this.collection=e,this.nextCollection=e}},typeof HTMLTemplateElement<`u`){let e=Object.getOwnPropertyDescriptor(Node.prototype,`firstChild`).get;Object.defineProperty(HTMLTemplateElement.prototype,`firstChild`,{configurable:!0,enumerable:!0,get:function(){return this.dataset.reactAriaHidden?this.content.firstChild:e.call(this)}})}gI=(0,ZD.createContext)(!1),_I=(0,U.createContext)(!1),vI=(0,U.createContext)(null),yI=typeof U.useSyncExternalStore==`function`?U.useSyncExternalStore:Hw,bI=(0,U.createContext)(null),xI=(0,U.createContext)(null),SI=(0,eO.createContext)({}),Rw(function(e,t){[e,t]=Bx(e,t,SI);let{elementType:n=`label`,...r}=e;return eO.createElement(n,{className:`react-aria-Label`,...r,ref:t})}),CI=(0,tO.createContext)(null),(0,tO.forwardRef)(function(e,t){[e,t]=Bx(e,t,CI);let{value:n=0,minValue:r=0,maxValue:i=100,isIndeterminate:a=!1}=e;n=Bb(n,r,i);let[o,s]=Vx(!e[`aria-label`]&&!e[`aria-labelledby`]),{progressBarProps:c,labelProps:l}=Qw({...e,label:s}),u=a?void 0:(n-r)/(i-r)*100,d=Rx({...e,defaultClassName:`react-aria-ProgressBar`,values:{percentage:u,valueText:c[`aria-valuetext`],isIndeterminate:a}}),f=Gy(e,{global:!0});return tO.createElement(`div`,{...B(f,d,c),ref:t,slot:e.slot||void 0},tO.createElement(SI.Provider,{value:{...l,ref:o,elementType:`span`}},d.children))}),wI=null,TI=class{isAttached(){return this.node?.isConnected}createLog(e){let t=document.createElement(`div`);return t.setAttribute(`role`,`log`),t.setAttribute(`aria-live`,e),t.setAttribute(`aria-relevant`,`additions`),t}destroy(){this.node&&=(document.body.removeChild(this.node),null)}announce(e,t=`assertive`,n=7e3){var r,i;if(!this.node)return;let a=document.createElement(`div`);typeof e==`object`?(a.setAttribute(`role`,`img`),a.setAttribute(`aria-labelledby`,e[`aria-labelledby`])):a.textContent=e,t===`assertive`?(r=this.assertiveLog)==null||r.appendChild(a):(i=this.politeLog)==null||i.appendChild(a),e!==``&&setTimeout(()=>{a.remove()},n)}clear(e){this.node&&((!e||e===`assertive`)&&this.assertiveLog&&(this.assertiveLog.innerHTML=``),(!e||e===`polite`)&&this.politeLog&&(this.politeLog.innerHTML=``))}constructor(){this.node=null,this.assertiveLog=null,this.politeLog=null,typeof document<`u`&&(this.node=document.createElement(`div`),this.node.dataset.liveAnnouncer=`true`,Object.assign(this.node.style,{border:0,clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:`1px`,margin:`-1px`,overflow:`hidden`,padding:0,position:`absolute`,width:`1px`,whiteSpace:`nowrap`}),this.assertiveLog=this.createLog(`assertive`),this.node.appendChild(this.assertiveLog),this.politeLog=this.createLog(`polite`),this.node.appendChild(this.politeLog),document.body.prepend(this.node))}},EI=(0,nO.createContext)({}),Rw(function(e,t){[e,t]=Bx(e,t,EI),e=tT(e);let n=e,{isPending:r}=n,{buttonProps:i,isPressed:a}=eT(e,t),{focusProps:o,isFocused:s,isFocusVisible:c}=RC(e),{hoverProps:l,isHovered:u}=Nx({...e,isDisabled:e.isDisabled||r}),d={isHovered:u,isPressed:(n.isPressed||a)&&!r,isFocused:s,isFocusVisible:c,isDisabled:e.isDisabled||!1,isPending:r??!1},f=Rx({...e,values:d,defaultClassName:`react-aria-Button`}),p=jy(i.id),m=jy(),h=i[`aria-labelledby`];r&&(h?h=`${h} ${m}`:i[`aria-label`]&&(h=`${p} ${m}`));let g=(0,nO.useRef)(r);(0,nO.useEffect)(()=>{let e={"aria-labelledby":h||p};(!g.current&&s&&r||g.current&&s&&!r)&&$w(e,`assertive`),g.current=r},[r,s,h,p]);let _=Gy(e,{global:!0});return delete _.onClick,nO.createElement(`button`,{...B(_,f,i,o,l),type:i.type===`submit`&&r?`button`:i.type,id:p,ref:t,"aria-labelledby":h,slot:e.slot||void 0,"aria-disabled":r?`true`:i[`aria-disabled`],"data-disabled":e.isDisabled||void 0,"data-pressed":d.isPressed||void 0,"data-hovered":u||void 0,"data-focused":s||void 0,"data-pending":r||void 0,"data-focus-visible":c||void 0},nO.createElement(CI.Provider,{value:{id:m}},f.children))}),DI=(0,W.createContext)(null),OI=(0,W.createContext)(null),kI=(0,W.forwardRef)(function(e,t){[e,t]=Bx(e,t,DI);let n=(0,W.useContext)(lL),r=hw(e),i=e.isOpen!=null||e.defaultOpen!=null||!n?r:n,a=jb(t,i.isOpen)||e.isExiting||!1,o=zw(),{direction:s}=uS();if(o){let t=e.children;return typeof t==`function`&&(t=t({trigger:e.trigger||null,placement:`bottom`,isEntering:!1,isExiting:!1,defaultChildren:null})),W.createElement(W.Fragment,null,t)}return i&&!i.isOpen&&!a?null:W.createElement(nT,{...e,triggerRef:e.triggerRef,state:i,popoverRef:t,isExiting:a,dir:s})}),AI=(0,rO.createContext)(null),qw(`section`,(e,t,n)=>{let{name:r,render:i}=(0,rO.useContext)(AI);return i(e,t,n,`react-aria-Section`)}),jI={CollectionRoot({collection:e,renderDropIndicator:t}){return rT(e,null,t)},CollectionBranch({collection:e,parent:t,renderDropIndicator:n}){return rT(e,t,n)}},MI=(0,rO.createContext)(jI),NI=(0,iO.createContext)(null),PI=(0,iO.createContext)(null),FI=(0,aO.createContext)({}),Kw(cI,function(e,t){return[e,t]=Bx(e,t,FI),aO.createElement(`header`,{className:`react-aria-Header`,...e,ref:t},e.children)}),II=(0,oO.createContext)({}),(0,oO.forwardRef)(function(e,t){return[e,t]=Bx(e,t,II),oO.createElement(`kbd`,{dir:`ltr`,...e,ref:t})}),LI=(0,sO.createContext)({}),RI=class extends oI{filter(e,t){let n=t.getItem(this.prevKey);if(n&&n.type!==`separator`){let n=this.clone();return t.addDescendants(n,e),n}return null}},RI.type=`separator`,Kw(RI,function(e,t){[e,t]=Bx(e,t,LI);let{elementType:n,orientation:r,style:i,className:a,slot:o,...s}=e,c=n||`hr`;c===`hr`&&r===`vertical`&&(c=`div`);let{separatorProps:l}=oT({...s,elementType:n,orientation:r}),u=Gy(e,{global:!0});return sO.createElement(c,{...B(u,l),style:i,className:a??`react-aria-Separator`,ref:t,slot:o||void 0})}),zI=new WeakMap,BI=new WeakMap,VI=1e3,HI=class{getItemRect(e){let t=this.ref.current;if(!t)return null;let n=e==null?null:cT(this.ref,e);if(!n)return null;let r=t.getBoundingClientRect(),i=n.getBoundingClientRect();return{x:i.left-r.left-t.clientLeft+t.scrollLeft,y:i.top-r.top-t.clientTop+t.scrollTop,width:i.width,height:i.height}}getContentSize(){let e=this.ref.current;return{width:e?.scrollWidth??0,height:e?.scrollHeight??0}}getVisibleRect(){let e=this.ref.current;return{x:e?.scrollLeft??0,y:e?.scrollTop??0,width:e?.clientWidth??0,height:e?.clientHeight??0}}constructor(e){this.ref=e}},UI=class{isDisabled(e){return this.disabledBehavior===`all`&&(e.props?.isDisabled||this.disabledKeys.has(e.key))}findNextNonDisabled(e,t){let n=e;for(;n!=null;){let e=this.collection.getItem(n);if(e?.type===`item`&&!this.isDisabled(e))return n;n=t(n)}return null}getNextKey(e){let t=e;return t=this.collection.getKeyAfter(t),this.findNextNonDisabled(t,e=>this.collection.getKeyAfter(e))}getPreviousKey(e){let t=e;return t=this.collection.getKeyBefore(t),this.findNextNonDisabled(t,e=>this.collection.getKeyBefore(e))}findKey(e,t,n){let r=e,i=this.layoutDelegate.getItemRect(r);if(!i||r==null)return null;let a=i;do{if(r=t(r),r==null)break;i=this.layoutDelegate.getItemRect(r)}while(i&&n(a,i)&&r!=null);return r}isSameRow(e,t){return e.y===t.y||e.x!==t.x}isSameColumn(e,t){return e.x===t.x||e.y!==t.y}getKeyBelow(e){return this.layout===`grid`&&this.orientation===`vertical`?this.findKey(e,e=>this.getNextKey(e),this.isSameRow):this.getNextKey(e)}getKeyAbove(e){return this.layout===`grid`&&this.orientation===`vertical`?this.findKey(e,e=>this.getPreviousKey(e),this.isSameRow):this.getPreviousKey(e)}getNextColumn(e,t){return t?this.getPreviousKey(e):this.getNextKey(e)}getKeyRightOf(e){let t=this.direction===`ltr`?`getKeyRightOf`:`getKeyLeftOf`;return this.layoutDelegate[t]?(e=this.layoutDelegate[t](e),this.findNextNonDisabled(e,e=>this.layoutDelegate[t](e))):this.layout===`grid`?this.orientation===`vertical`?this.getNextColumn(e,this.direction===`rtl`):this.findKey(e,e=>this.getNextColumn(e,this.direction===`rtl`),this.isSameColumn):this.orientation===`horizontal`?this.getNextColumn(e,this.direction===`rtl`):null}getKeyLeftOf(e){let t=this.direction===`ltr`?`getKeyLeftOf`:`getKeyRightOf`;return this.layoutDelegate[t]?(e=this.layoutDelegate[t](e),this.findNextNonDisabled(e,e=>this.layoutDelegate[t](e))):this.layout===`grid`?this.orientation===`vertical`?this.getNextColumn(e,this.direction===`ltr`):this.findKey(e,e=>this.getNextColumn(e,this.direction===`ltr`),this.isSameColumn):this.orientation===`horizontal`?this.getNextColumn(e,this.direction===`ltr`):null}getFirstKey(){let e=this.collection.getFirstKey();return this.findNextNonDisabled(e,e=>this.collection.getKeyAfter(e))}getLastKey(){let e=this.collection.getLastKey();return this.findNextNonDisabled(e,e=>this.collection.getKeyBefore(e))}getKeyPageAbove(e){let t=this.ref.current,n=this.layoutDelegate.getItemRect(e);if(!n)return null;if(t&&!_b(t))return this.getFirstKey();let r=e;if(this.orientation===`horizontal`){let e=Math.max(0,n.x+n.width-this.layoutDelegate.getVisibleRect().width);for(;n&&n.x>e&&r!=null;)r=this.getKeyAbove(r),n=r==null?null:this.layoutDelegate.getItemRect(r)}else{let e=Math.max(0,n.y+n.height-this.layoutDelegate.getVisibleRect().height);for(;n&&n.y>e&&r!=null;)r=this.getKeyAbove(r),n=r==null?null:this.layoutDelegate.getItemRect(r)}return r??this.getFirstKey()}getKeyPageBelow(e){let t=this.ref.current,n=this.layoutDelegate.getItemRect(e);if(!n)return null;if(t&&!_b(t))return this.getLastKey();let r=e;if(this.orientation===`horizontal`){let e=Math.min(this.layoutDelegate.getContentSize().width,n.y-n.width+this.layoutDelegate.getVisibleRect().width);for(;n&&n.x{e.push({type:`item`,element:t})}),yield*e}}}},WI=yT,xT.getCollectionNode=function*(e){let{children:t,title:n,items:r}=e;yield{type:`section`,props:e,hasChildNodes:!0,rendered:n,"aria-label":e[`aria-label`],*childNodes(){if(typeof t==`function`){if(!r)throw Error(`props.children was a function but props.items is missing`);for(let e of r)yield{type:`item`,value:e,renderer:t}}else{let e=[];mO.Children.forEach(t,t=>{e.push({type:`item`,element:t})}),yield*e}}}},GI=class{build(e,t){return this.context=t,ST(()=>this.iterateCollection(e))}*iterateCollection(e){let{children:t,items:n}=e;if(hO.isValidElement(t)&&t.type===hO.Fragment)yield*this.iterateCollection({children:t.props.children,items:n});else if(typeof t==`function`){if(!n)throw Error(`props.children was a function but props.items is missing`);let e=0;for(let r of n)yield*this.getFullNode({value:r,index:e},{renderer:t}),e++}else{let e=[];hO.Children.forEach(t,t=>{t&&e.push(t)});let n=0;for(let t of e){let e=this.getFullNode({element:t,index:n},{});for(let t of e)n++,yield t}}}getKey(e,t,n,r){if(e.key!=null)return e.key;if(t.type===`cell`&&t.key!=null)return`${r}${t.key}`;let i=t.value;if(i!=null){let e=i.key??i.id;if(e==null)throw Error(`No key found for item`);return e}return r?`${r}.${t.index}`:`$.${t.index}`}getChildState(e,t){return{renderer:t.renderer||e.renderer}}*getFullNode(e,t,n,r){if(hO.isValidElement(e.element)&&e.element.type===hO.Fragment){let i=[];hO.Children.forEach(e.element.props.children,e=>{i.push(e)});let a=e.index??0;for(let e of i)yield*this.getFullNode({element:e,index:a++},t,n,r);return}let i=e.element;if(!i&&e.value&&t&&t.renderer){let n=this.cache.get(e.value);if(n&&(!n.shouldInvalidate||!n.shouldInvalidate(this.context))){n.index=e.index,n.parentKey=r?r.key:null,yield n;return}i=t.renderer(e.value)}if(hO.isValidElement(i)){let a=i.type;if(typeof a!=`function`&&typeof a.getCollectionNode!=`function`){let e=i.type;throw Error(`Unknown element <${e}> in collection.`)}let o=a.getCollectionNode(i.props,this.context),s=e.index??0,c=o.next();for(;!c.done&&c.value;){let a=c.value;e.index=s;let l=a.key??null;l??=a.element?null:this.getKey(i,e,t,n);let u=[...this.getFullNode({...a,key:l,index:s,wrapper:CT(e.wrapper,a.wrapper)},this.getChildState(t,a),n?`${n}${i.key}`:i.key,r)];for(let t of u){if(t.value=a.value??e.value??null,t.value&&this.cache.set(t.value,t),e.type&&t.type!==e.type)throw Error(`Unsupported type <${wT(t.type)}> in <${wT(r?.type??`unknown parent type`)}>. Only <${wT(e.type)}> is supported.`);s++,yield t}c=o.next(u)}return}if(e.key==null||e.type==null)return;let a=this,o={type:e.type,props:e.props,key:e.key,parentKey:r?r.key:null,value:e.value??null,level:r?r.level+1:0,index:e.index,rendered:e.rendered,textValue:e.textValue??``,"aria-label":e[`aria-label`],wrapper:e.wrapper,shouldInvalidate:e.shouldInvalidate,hasChildNodes:e.hasChildNodes||!1,childNodes:ST(function*(){if(!e.hasChildNodes||!e.childNodes)return;let n=0;for(let r of e.childNodes()){r.key!=null&&(r.key=`${o.key}${r.key}`);let e=a.getFullNode({...r,index:n},a.getChildState(t,r),o.key,o);for(let t of e)n++,yield t}})};yield o}constructor(){this.cache=new WeakMap}},KI=new WeakMap,qI=2,JI=50,YI=1e3,XI=Math.PI/12,ZI=class{*[Symbol.iterator](){yield*this.iterable}get size(){return this.keyMap.size}getKeys(){return this.keyMap.keys()}getKeyBefore(e){let t=this.keyMap.get(e);var n;return t&&(n=t.prevKey)!=null?n:null}getKeyAfter(e){let t=this.keyMap.get(e);var n;return t&&(n=t.nextKey)!=null?n:null}getFirstKey(){return this.firstKey}getLastKey(){return this.lastKey}getItem(e){return this.keyMap.get(e)??null}at(e){let t=[...this.getKeys()];return this.getItem(t[e])}constructor(e,{expandedKeys:t}={}){this.keyMap=new Map,this.firstKey=null,this.lastKey=null,this.iterable=e,t||=new Set;let n=e=>{if(this.keyMap.set(e.key,e),e.childNodes&&(e.type===`section`||t.has(e.key)))for(let t of e.childNodes)n(t)};for(let t of e)n(t);let r=null,i=0;for(let[e,t]of this.keyMap)r?(r.nextKey=e,t.prevKey=r.key):(this.firstKey=e,t.prevKey=void 0),t.type===`item`&&(t.index=i++),r=t,r.nextKey=void 0;this.lastKey=r?.key??null}},QI=class e extends Set{constructor(t,n,r){super(t),t instanceof e?(this.anchorKey=n??t.anchorKey,this.currentKey=r??t.currentKey):(this.anchorKey=n??null,this.currentKey=r??null)}},$I=class e{get selectionMode(){return this.state.selectionMode}get disallowEmptySelection(){return this.state.disallowEmptySelection}get selectionBehavior(){return this.state.selectionBehavior}setSelectionBehavior(e){this.state.setSelectionBehavior(e)}get isFocused(){return this.state.isFocused}setFocused(e){this.state.setFocused(e)}get focusedKey(){return this.state.focusedKey}get childFocusStrategy(){return this.state.childFocusStrategy}setFocusedKey(e,t){(e==null||this.collection.getItem(e))&&this.state.setFocusedKey(e,t)}get selectedKeys(){return this.state.selectedKeys===`all`?new Set(this.getSelectAllKeys()):this.state.selectedKeys}get rawSelection(){return this.state.selectedKeys}isSelected(e){if(this.state.selectionMode===`none`)return!1;let t=this.getKey(e);return t==null?!1:this.state.selectedKeys===`all`?this.canSelectItem(t):this.state.selectedKeys.has(t)}get isEmpty(){return this.state.selectedKeys!==`all`&&this.state.selectedKeys.size===0}get isSelectAll(){if(this.isEmpty)return!1;if(this.state.selectedKeys===`all`)return!0;if(this._isSelectAll!=null)return this._isSelectAll;let e=this.getSelectAllKeys(),t=this.state.selectedKeys;return this._isSelectAll=e.every(e=>t.has(e)),this._isSelectAll}get firstSelectedKey(){let e=null;for(let t of this.state.selectedKeys){let n=this.collection.getItem(t);(!e||n&&kT(this.collection,n,e)<0)&&(e=n)}return e?.key??null}get lastSelectedKey(){let e=null;for(let t of this.state.selectedKeys){let n=this.collection.getItem(t);(!e||n&&kT(this.collection,n,e)>0)&&(e=n)}return e?.key??null}get disabledKeys(){return this.state.disabledKeys}get disabledBehavior(){return this.state.disabledBehavior}extendSelection(e){if(this.selectionMode===`none`)return;if(this.selectionMode===`single`){this.replaceSelection(e);return}let t=this.getKey(e);if(t==null)return;let n;if(this.state.selectedKeys===`all`)n=new QI([t],t,t);else{let e=this.state.selectedKeys,r=e.anchorKey??t;n=new QI(e,r,t);for(let i of this.getKeyRange(r,e.currentKey??t))n.delete(i);for(let e of this.getKeyRange(t,r))this.canSelectItem(e)&&n.add(e)}this.state.setSelectedKeys(n)}getKeyRange(e,t){let n=this.collection.getItem(e),r=this.collection.getItem(t);return n&&r?kT(this.collection,n,r)<=0?this.getKeyRangeInternal(e,t):this.getKeyRangeInternal(t,e):[]}getKeyRangeInternal(e,t){var n;if((n=this.layoutDelegate)!=null&&n.getKeyRange)return this.layoutDelegate.getKeyRange(e,t);let r=[],i=e;for(;i!=null;){let e=this.collection.getItem(i);if(e&&(e.type===`item`||e.type===`cell`&&this.allowsCellSelection)&&r.push(i),i===t)return r;i=this.collection.getKeyAfter(i)}return[]}getKey(e){let t=this.collection.getItem(e);if(!t||t.type===`cell`&&this.allowsCellSelection)return e;for(;t&&t.type!==`item`&&t.parentKey!=null;)t=this.collection.getItem(t.parentKey);return!t||t.type!==`item`?null:t.key}toggleSelection(e){if(this.selectionMode===`none`)return;if(this.selectionMode===`single`&&!this.isSelected(e)){this.replaceSelection(e);return}let t=this.getKey(e);if(t==null)return;let n=new QI(this.state.selectedKeys===`all`?this.getSelectAllKeys():this.state.selectedKeys);n.has(t)?n.delete(t):this.canSelectItem(t)&&(n.add(t),n.anchorKey=t,n.currentKey=t),!(this.disallowEmptySelection&&n.size===0)&&this.state.setSelectedKeys(n)}replaceSelection(e){if(this.selectionMode===`none`)return;let t=this.getKey(e);if(t==null)return;let n=this.canSelectItem(t)?new QI([t],t,t):new QI;this.state.setSelectedKeys(n)}setSelectedKeys(e){if(this.selectionMode===`none`)return;let t=new QI;for(let n of e){let e=this.getKey(n);if(e!=null&&(t.add(e),this.selectionMode===`single`))break}this.state.setSelectedKeys(t)}getSelectAllKeys(){let e=[],t=n=>{for(;n!=null;){if(this.canSelectItem(n)){let r=this.collection.getItem(n);r?.type===`item`&&e.push(n),r?.hasChildNodes&&(this.allowsCellSelection||r.type!==`item`)&&t(DT(ET(r,this.collection))?.key??null)}n=this.collection.getKeyAfter(n)}};return t(this.collection.getFirstKey()),e}selectAll(){!this.isSelectAll&&this.selectionMode===`multiple`&&this.state.setSelectedKeys(`all`)}clearSelection(){!this.disallowEmptySelection&&(this.state.selectedKeys===`all`||this.state.selectedKeys.size>0)&&this.state.setSelectedKeys(new QI)}toggleSelectAll(){this.isSelectAll?this.clearSelection():this.selectAll()}select(e,t){this.selectionMode!==`none`&&(this.selectionMode===`single`?this.isSelected(e)&&!this.disallowEmptySelection?this.toggleSelection(e):this.replaceSelection(e):this.selectionBehavior===`toggle`||t&&(t.pointerType===`touch`||t.pointerType===`virtual`)?this.toggleSelection(e):this.replaceSelection(e))}isSelectionEqual(e){if(e===this.state.selectedKeys)return!0;let t=this.selectedKeys;if(e.size!==t.size)return!1;for(let n of e)if(!t.has(n))return!1;for(let n of t)if(!e.has(n))return!1;return!0}canSelectItem(e){var t;if(this.state.selectionMode===`none`||this.state.disabledKeys.has(e))return!1;let n=this.collection.getItem(e);return!(!n||!(n==null||(t=n.props)==null)&&t.isDisabled||n.type===`cell`&&!this.allowsCellSelection)}isDisabled(e){var t,n;return this.state.disabledBehavior===`all`&&(this.state.disabledKeys.has(e)||!!(!((n=this.collection.getItem(e))==null||(t=n.props)==null)&&t.isDisabled))}isLink(e){var t,n;return!!(!((n=this.collection.getItem(e))==null||(t=n.props)==null)&&t.href)}getItemProps(e){return this.collection.getItem(e)?.props}withCollection(t){return new e(t,this.state,{allowsCellSelection:this.allowsCellSelection,layoutDelegate:this.layoutDelegate||void 0})}constructor(e,t,n){this.collection=e,this.state=t,this.allowsCellSelection=n?.allowsCellSelection??!1,this._isSelectAll=null,this.layoutDelegate=n?.layoutDelegate||null}},eL=(0,G.createContext)(null),tL=(0,G.createContext)(null),nL=(0,G.createContext)(null),rL=(0,G.createContext)(null),iL=(0,G.createContext)(null),aL=class extends oI{filter(e,t,n){let r=e.getItem(this.firstChildKey);if(r&&n(r.textValue,this)){let n=this.clone();return t.addDescendants(n,e),n}return null}},aL.type=`submenutrigger`,qw(aL,(e,t,n)=>{let{CollectionBranch:r}=(0,G.useContext)(MI),i=(0,G.useContext)(tL),a=(0,G.useContext)(nL),o=LT({triggerKey:n.key},a),s=(0,G.useRef)(null),c=db(t),{parentMenuRef:l,shouldUseVirtualFocus:u}=(0,G.useContext)(iL),{submenuTriggerProps:d,submenuProps:f,popoverProps:p}=FT({parentMenuRef:l,submenuRef:s,delay:e.delay,shouldUseVirtualFocus:u},o,c);return G.createElement(Lx,{values:[[sL,{...d,onAction:void 0,ref:c}],[eL,{ref:s,...f}],[lL,o],[DI,{trigger:`SubmenuTrigger`,triggerRef:c,placement:`end top`,"aria-labelledby":f[`aria-labelledby`],...p}]]},G.createElement(r,{collection:i.collection,parent:n}),e.children[1])},e=>e.children[0]),(0,G.forwardRef)(function(e,t){return[e,t]=Bx(e,t,eL),G.createElement(Bw,{content:G.createElement(Yw,e)},n=>G.createElement(UT,{props:e,collection:n,menuRef:t}))}),oL=class extends $I{get focusedKey(){return this.parent.focusedKey}get isFocused(){return this.parent.isFocused}setFocusedKey(e,t){return this.parent.setFocusedKey(e,t)}setFocused(e){this.parent.setFocused(e)}get childFocusStrategy(){return this.parent.childFocusStrategy}constructor(e,t){super(e.collection,t),this.parent=e}},qw(dI,WT),sL=(0,G.createContext)(null),Kw(uI,function(e,t,n){[e,t]=Bx(e,t,sL);let r=zx(sL)?.id,i=(0,G.useContext)(tL),a=db(t),o=(0,G.useContext)(rL),{menuItemProps:s,labelProps:c,descriptionProps:l,keyboardShortcutProps:u,...d}=MT({...e,id:r,key:n.key,selectionManager:o},i,a),{hoverProps:f,isHovered:p}=Nx({isDisabled:d.isDisabled}),m=Rx({...e,id:void 0,children:n.rendered,defaultClassName:`react-aria-MenuItem`,values:{...d,isHovered:p,isFocusVisible:d.isFocusVisible,selectionMode:o.selectionMode,selectionBehavior:o.selectionBehavior,hasSubmenu:!!e[`aria-haspopup`],isOpen:e[`aria-expanded`]===`true`}}),h=e.href?`a`:`div`,g=Gy(e,{global:!0});return delete g.id,delete g.onClick,G.createElement(h,{...B(g,m,s,f),ref:a,"data-disabled":d.isDisabled||void 0,"data-hovered":p||void 0,"data-focused":d.isFocused||void 0,"data-focus-visible":d.isFocusVisible||void 0,"data-pressed":d.isPressed||void 0,"data-selected":d.isSelected||void 0,"data-selection-mode":o.selectionMode===`none`?void 0:o.selectionMode,"data-has-submenu":!!e[`aria-haspopup`]||void 0,"data-open":e[`aria-expanded`]===`true`||void 0},G.createElement(Lx,{values:[[wP,{slots:{[sj]:c,label:c,description:l}}],[II,u]]},m.children))}),cL=(0,TO.createContext)(null),lL=(0,TO.createContext)(null),(0,TO.forwardRef)(function(e,t){let n=e[`aria-labelledby`];[e,t]=Bx(e,t,cL);let{dialogProps:r,titleProps:i}=GT({...e,"aria-labelledby":n},t),a=(0,TO.useContext)(lL);!r[`aria-label`]&&!r[`aria-labelledby`]&&e[`aria-labelledby`]&&(r[`aria-labelledby`]=e[`aria-labelledby`]);let o=Rx({defaultClassName:`react-aria-Dialog`,className:e.className,style:e.style,children:e.children,values:{close:a?.close||(()=>{})}}),s=Gy(e,{global:!0});return TO.createElement(`section`,{...B(s,o,r),ref:t,slot:e.slot||void 0},TO.createElement(Lx,{values:[[SP,{slots:{[sj]:{},title:{...i,level:2}}}],[EI,{slots:{[sj]:{},close:{onPress:()=>a?.close()}}}]]},o.children))}),uL=({ariaLabel:e,placement:t=`bottom-start`,hasChrome:n=!0,hasCloseButton:r=!1,closeLabel:i,offset:a=8,padding:o,popover:s,children:c,defaultVisible:l,visible:u,onVisibleChange:d,...f})=>{e||aI(`The 'ariaLabel' prop on 'PopoverProvider' will become mandatory in Storybook 11. Provide a concise, accessible label describing the popover's purpose.`);let p=LN(t),[m,h]=(0,YD.useState)(l??!1),g=(0,YD.useCallback)(e=>{h(e),d?.(e)},[d]),_=(0,YD.useCallback)(()=>g(!1),[g]);return YD.createElement(KT,{defaultOpen:l,isOpen:u??m,onOpenChange:g,...f},YD.createElement(nj,null,(0,YD.cloneElement)(c,{"aria-haspopup":`dialog`})),YD.createElement(kI,{"aria-label":e,placement:p,offset:a,style:{outline:`none`}},YD.createElement(YF,{hasChrome:n,hideLabel:i,onHide:r?_:void 0,padding:o},typeof s==`function`?s({onHide:_}):s)))},dL=(0,EO.forwardRef)((e,t)=>EO.createElement(YF,{ref:t,...e})),dL.displayName=`Tooltip`,(0,DO.lazy)(()=>a(()=>import(`./WithTooltip-65CFNBJE-DKdOiCBU.js`).then(e=>({default:e.WithTooltip})),__vite__mapDeps([11,1,2,3,4,8,5,6,0]),import.meta.url)),(0,DO.lazy)(()=>a(()=>import(`./WithTooltip-65CFNBJE-DKdOiCBU.js`).then(e=>({default:e.WithTooltipPure})),__vite__mapDeps([11,1,2,3,4,8,5,6,0]),import.meta.url)),{deprecate:fL}=__STORYBOOK_MODULE_CLIENT_LOGGER__,E.div(({theme:e})=>({fontWeight:e.typography.weight.bold})),E.span(),E.div(({theme:e})=>({marginTop:8,textAlign:`center`,"> *":{margin:`0 8px`,fontWeight:e.typography.weight.bold}})),E.div(({theme:e})=>({color:e.color.defaultText,lineHeight:`18px`})),E.div({padding:15,width:280,boxSizing:`border-box`}),{deprecate:pL}=__STORYBOOK_MODULE_CLIENT_LOGGER__,mL=h(oe(),1),{deprecate:hL}=__STORYBOOK_MODULE_CLIENT_LOGGER__,gL=E(({active:e,loading:t,disabled:n,...r})=>kO.createElement(`span`,{...r}))(({theme:e})=>({color:e.color.defaultText,fontWeight:e.typography.weight.regular}),({active:e,theme:t})=>e?{color:t.color.secondary,fontWeight:t.typography.weight.bold}:{},({loading:e,theme:t})=>e?{display:`inline-block`,flex:`none`,...t.animation.inlineGlow}:{},({disabled:e,theme:t})=>e?{color:t.textMutedColor}:{}),_L=E.span({display:`flex`,"& svg":{height:12,width:12,margin:`3px 0`,verticalAlign:`top`}}),vL=E.span({flex:1,textAlign:`left`,display:`flex`,flexDirection:`column`,minWidth:0},({isIndented:e})=>e?{marginLeft:24}:{}),yL=E.span(({theme:e})=>({fontSize:`11px`,lineHeight:`14px`}),({active:e,theme:t})=>e?{color:t.color.secondary}:{},({theme:e,disabled:t})=>t?{color:e.textMutedColor}:{}),bL=E.span(({active:e,theme:t})=>e?{color:t.color.secondary}:{},()=>({display:`flex`,maxWidth:14})),xL=E.button(({theme:e})=>({width:`100%`,minWidth:0,border:`none`,borderRadius:e.appBorderRadius,background:`none`,fontSize:e.typography.size.s1,transition:`background 150ms ease-out`,color:e.color.dark,textDecoration:`none`,justifyContent:`space-between`,lineHeight:`18px`,padding:`7px 10px`,display:`flex`,alignItems:`center`,"& > * + *":{paddingLeft:10},"&:focus-visible":{outline:`2px solid ${e.color.secondary}`,outlineOffset:0}}),({theme:e,href:t,onClick:n})=>(t||n)&&{cursor:`pointer`,"&:hover":{background:e.background.hoverable},"&:hover svg":{opacity:1}},({theme:e,as:t})=>t===`label`&&{"&:has(input:not(:disabled))":{cursor:`pointer`,"&:hover":{background:e.background.hoverable}}},({disabled:e})=>e&&{cursor:`not-allowed`}),SL=(0,mL.default)(100)(({onClick:e,input:t,href:n,LinkWrapper:r})=>({...e&&{as:`button`,role:`button`,onClick:e},...t&&{as:`label`},...n&&{as:`a`,role:`link`,href:n,...r&&{as:r,to:n}}})),CL=(0,kO.forwardRef)((e,t)=>{let{loading:n=!1,title:r=kO.createElement(`span`,null,`Loading state`),center:i=null,right:a=null,active:o=!1,disabled:s=!1,isIndented:c=!1,href:l=void 0,onClick:u=void 0,icon:d,input:f,LinkWrapper:p=void 0,...m}=e,h={active:o,disabled:s},g=SL(e),_=d||f;return hL("`ListItem` is deprecated and will be removed in Storybook 11, use `MenuItem` instead."),kO.createElement(xL,{"data-deprecated":`ListItem`,ref:t,...m,...h,...g},kO.createElement(kO.Fragment,null,_&&kO.createElement(bL,{...h},_),r||i?kO.createElement(vL,{isIndented:c&&!_},r&&kO.createElement(gL,{...h,loading:n},r),i&&kO.createElement(yL,{...h},i)):null,a&&kO.createElement(_L,{...h},a)))}),CL.displayName=`ListItem`,wL=CL,TL=E.div({minWidth:180,overflow:`hidden`,overflowY:`auto`,maxHeight:504},({theme:e})=>({borderRadius:e.appBorderRadius+2}),({theme:e})=>e.base===`dark`?{background:e.background.content}:{}),EL=E.div(({theme:e})=>({padding:4,"& + &":{borderTop:`1px solid ${e.appBorderColor}`}})),DL=({id:e,onClick:t,...n})=>{let{active:r,disabled:i,title:a,href:o}=n,s=(0,OO.useCallback)(n=>t?.(n,{id:e,active:r,disabled:i,title:a,href:o}),[t,e,r,i,a,o]);return OO.createElement(wL,{id:`list-item-${e}`,...n,...t&&{onClick:s}})},OL=({links:e,LinkWrapper:t,...n})=>{pL("`TooltipLinkList` is deprecated and will be removed in Storybook 11, use `ActionList` or `MenuItem` and `WithMenu` instead.");let r=Array.isArray(e[0])?e:[e],i=r.some(e=>e.some(e=>`icon`in e&&e.icon||`input`in e&&e.input));return OO.createElement(TL,{"data-deprecated":`TooltipLinkList`,...n,className:`sb-list`},r.filter(e=>e.length).map((e,n)=>OO.createElement(EL,{key:e.map(e=>e.id).join(`~${n}~`)},e.map(e=>`content`in e?OO.createElement(OO.Fragment,{key:e.id},e.content):OO.createElement(DL,{key:e.id,isIndented:i,LinkWrapper:t,...e})))))},{deprecate:kL}=__STORYBOOK_MODULE_CLIENT_LOGGER__,{deprecate:AL}=__STORYBOOK_MODULE_CLIENT_LOGGER__,jL=E.div(({backgroundColor:e,border:t=!1,innerStyle:n={},scrollable:r,theme:i})=>({color:i.barTextColor,width:`100%`,minHeight:40,flexShrink:0,scrollbarColor:`${i.barTextColor} ${t?e||i.barBg:`transparent`}`,scrollbarWidth:`thin`,overflow:r?`auto`:`hidden`,overflowY:`hidden`,display:`flex`,alignItems:`center`,gap:r?0:6,paddingInline:r?0:6,...t?{boxShadow:`${i.appBorderColor} 0 -1px 0 0 inset`,background:e||i.barBg}:{},...n})),ML=E.div(({innerStyle:e})=>({minHeight:40,display:`flex`,alignItems:`center`,width:`100%`,gap:6,paddingInline:6,...e})),NL=(0,jO.forwardRef)(({scrollable:e=!0,children:t,innerStyle:n,...r},i)=>jO.createElement(jL,{...r,ref:i,innerStyle:e?void 0:n,scrollable:e},e?jO.createElement(ML,{innerStyle:n},t):t)),NL.displayName=`Bar`,PL=E.div({display:`flex`,whiteSpace:`nowrap`,flexBasis:`auto`,marginLeft:3,marginRight:10},({scrollable:e})=>e?{flexShrink:0}:{},({left:e})=>e?{"& > *":{marginLeft:4}}:{},({right:e})=>e?{gap:6}:{}),PL.displayName=`Side`,FL=E.div(({bgColor:e})=>({display:`flex`,justifyContent:`space-between`,position:`relative`,flexWrap:`nowrap`,flexShrink:0,height:40,width:`100%`,backgroundColor:e||``})),IL=E(NL)({paddingInline:0}),LL=({children:e,backgroundColor:t,className:n=``,...r})=>{AL(`FlexBar is deprecated. Use Bar with justifyContent: "space-between" instead.`);let[i,a]=jO.Children.toArray(e);return jO.createElement(IL,{"data-deprecated":`FlexBar`,backgroundColor:t,className:`sb-bar ${n}`,...r},jO.createElement(FL,{bgColor:t},jO.createElement(PL,{scrollable:r.scrollable,left:!0},i),a?jO.createElement(PL,{right:!0},a):null))},LL.displayName=`FlexBar`,{deprecate:RL}=__STORYBOOK_MODULE_CLIENT_LOGGER__,zL=e=>typeof e.props.href==`string`,BL=e=>typeof e.props.href!=`string`,VL=(0,MO.forwardRef)(qT),VL.displayName=`ButtonOrLink`,HL=E(VL,{shouldForwardProp:j})({whiteSpace:`normal`,display:`inline-flex`,overflow:`hidden`,verticalAlign:`top`,justifyContent:`center`,alignItems:`center`,textAlign:`center`,textDecoration:`none`,"&:empty":{display:`none`},"&[hidden]":{display:`none`}},({theme:e})=>({padding:`0 15px`,transition:`color 0.2s linear, border-bottom-color 0.2s linear`,height:40,lineHeight:`12px`,cursor:`pointer`,background:`transparent`,border:`0 solid transparent`,borderTop:`3px solid transparent`,borderBottom:`3px solid transparent`,fontWeight:`bold`,fontSize:13,"&:focus":{outline:`0 none`,borderBottomColor:e.barSelectedColor}}),({active:e,textColor:t,theme:n})=>e?{color:t||n.barSelectedColor,borderBottomColor:n.barSelectedColor}:{color:t||n.barTextColor,borderBottomColor:`transparent`,"&:hover":{color:n.barHoverColor}}),UL=(0,MO.forwardRef)((e,t)=>(RL("The `TabButton` component is deprecated. Use `TabList` instead."),MO.createElement(HL,{"data-deprecated":`TabButton`,ref:t,...e}))),UL.displayName=`TabButton`,WL=E.div(({theme:e})=>({height:`100%`,display:`flex`,padding:30,alignItems:`center`,justifyContent:`center`,flexDirection:`column`,gap:15,background:e.background.content})),GL=E.div({display:`flex`,flexDirection:`column`,gap:4,maxWidth:415}),KL=E.div(({theme:e})=>({fontWeight:e.typography.weight.bold,fontSize:e.typography.size.s2-1,textAlign:`center`,color:e.color.defaultText})),qL=E.div(({theme:e})=>({fontSize:e.typography.size.s2-1})),JL=E.div(({theme:e})=>({fontWeight:e.typography.weight.regular,fontSize:e.typography.size.s2-1,textAlign:`center`,color:e.textMutedColor})),YL=({title:e,description:t,footer:n})=>NO.createElement(WL,null,NO.createElement(GL,null,NO.createElement(KL,null,e),t&&NO.createElement(JL,null,t)),n&&NO.createElement(qL,null,n)),{deprecate:XL}=__STORYBOOK_MODULE_CLIENT_LOGGER__,ZL=E.div(({active:e})=>e?{display:`block`}:{display:`none`}),QL=e=>(XL("The `childrenToList` tabs helper is deprecated. Use `TabsView` instead."),PO.Children.toArray(e).map(({props:{title:e,id:t,color:n,children:r}})=>{let i=Array.isArray(r)?r[0]:r;return{title:e,id:t,...n?{color:n}:{},render:typeof i==`function`?i:({active:e})=>PO.createElement(ZL,{active:e,role:`tabpanel`},i)}})),{deprecate:$L}=__STORYBOOK_MODULE_CLIENT_LOGGER__,eR=E.span(({theme:e,isActive:t})=>({display:`inline-block`,width:0,height:0,marginLeft:8,color:t?e.color.secondary:e.color.mediumdark,borderRight:`3px solid transparent`,borderLeft:`3px solid transparent`,borderTop:`3px solid`,transition:`transform .1s ease-out`})),tR=E(UL)(({active:e,theme:t,preActive:n})=>` color: ${n||e?t.barSelectedColor:t.barTextColor}; .addon-collapsible-icon { color: ${n||e?t.barSelectedColor:t.barTextColor}; diff --git a/storybook/static/assets/formatter-EIJCOSYU-B024mPvu.js b/storybook/static/assets/formatter-EIJCOSYU-CVNaCVyv.js similarity index 51% rename from storybook/static/assets/formatter-EIJCOSYU-B024mPvu.js rename to storybook/static/assets/formatter-EIJCOSYU-CVNaCVyv.js index b0c610f7af..b1a340b839 100644 --- a/storybook/static/assets/formatter-EIJCOSYU-B024mPvu.js +++ b/storybook/static/assets/formatter-EIJCOSYU-CVNaCVyv.js @@ -1 +1 @@ -import{n as e}from"./chunk-BneVvdWh.js";import{h as t,m as n}from"./iframe-DIiqmCNx.js";import{i as r,n as i,r as a,t as o}from"./chunk-3LY4VQVK-DK6VewjT.js";var s;e((()=>{a(),i(),t(),s=(0,n(r(),1).default)(2)(async(e,t)=>e===!1?t:o(t))}))();export{s as formatter}; \ No newline at end of file +import{n as e}from"./chunk-BneVvdWh.js";import{h as t,m as n}from"./iframe-B3N_zEeP.js";import{i as r,n as i,r as a,t as o}from"./chunk-3LY4VQVK-DyJr4LVG.js";var s;e((()=>{a(),i(),t(),s=(0,n(r(),1).default)(2)(async(e,t)=>e===!1?t:o(t))}))();export{s as formatter}; \ No newline at end of file diff --git a/storybook/static/assets/iframe-DIiqmCNx.js b/storybook/static/assets/iframe-B3N_zEeP.js similarity index 95% rename from storybook/static/assets/iframe-DIiqmCNx.js rename to storybook/static/assets/iframe-B3N_zEeP.js index f5d19ec0a5..e2cec5c9a7 100644 --- a/storybook/static/assets/iframe-DIiqmCNx.js +++ b/storybook/static/assets/iframe-B3N_zEeP.js @@ -1,4 +1,4 @@ -const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./Button.stories-BNVkmgFt.js","./chunk-BneVvdWh.js","./Checkbox.stories-BNK6M1li.js","./ComboBox.stories-BvilNb8W.js","./Input.stories-B6c_Nqyu.js","./Label.stories-D0hjcsiH.js","./Loader.stories-5dXu2Cov.js","./Separator.stories-DebYhaq-.js","./DocsRenderer-LL677BLK-D2xToRfx.js","./preload-helper-CV6hqhE5.js","./react-CMQ2J9Vz.js","./react-B_0iYUWB.js","./chunk-CYSK6WYR-C0tTbXjk.js","./components-DTTvQz4L.js","./chunk-242VQQM5-CsveGrTV.js","./chunk-RD3KTAHR-ocB0pi6q.js","./theming-DzOc7WGW.js","./chunk-3LY4VQVK-DK6VewjT.js"])))=>i.map(i=>d[i]); +const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./Typography.stories-Ceegr84L.js","./chunk-BneVvdWh.js","./Colors.stories-rQ7Q-hFW.js","./Icons.stories-Bkqwk1IY.js","./DialogButtonsPrimary.stories-UfH9kkhS.js","./theme-utils-B-KYefhh.js","./DialogButtonsSecondary.stories-B06GAowc.js","./PanelButtons.stories-DdNpWdK_.js","./IconButtons.stories-ThZx5UJ6.js","./LinkButtons.stories-CWnL9o1m.js","./SplitButtonsDropdown.stories-BvWeee5D.js","./SplitButton-Bq4l2hJH.js","./SplitButtonsIconLeft.stories-Dr4wDcvI.js","./SplitButtonsTabs.stories-CXQRjRm_.js","./Checkbox.stories-DFvCkgPP.js","./Radio.stories-CumHEb3o.js","./Switches.stories-BfGUao-L.js","./Slider.stories-DM-7D2v4.js","./TextField.stories-CNWuOQ51.js","./TextArea.stories-HtLcKLcL.js","./Cards.stories-H_KY1O8E.js","./InfoBlock.stories-C737cNEY.js","./Tabs.stories-suHzVPGv.js","./Header.stories-Bpjh8rah.js","./Header-D2BDzFwA.js","./ModalWindow.stories-C8D3NSUk.js","./Scroll.stories-Dq4Wwl6Z.js","./Loader.stories-Wu8QxO3T.js","./Tooltip.stories-CprkHbDd.js","./ContextMenu.stories-C550WoUl.js","./PreviewControls.stories-CUmA5ook.js","./Button.stories-BNVkmgFt.js","./Checkbox.stories-BNK6M1li.js","./ComboBox.stories-BvilNb8W.js","./Input.stories-B6c_Nqyu.js","./Label.stories-D0hjcsiH.js","./Loader.stories-5dXu2Cov.js","./Separator.stories-DebYhaq-.js","./DocsRenderer-LL677BLK-BKqUrJM_.js","./preload-helper-CV6hqhE5.js","./react-CMQ2J9Vz.js","./react-B_0iYUWB.js","./chunk-CYSK6WYR-C0tTbXjk.js","./components-DW-5dJuS.js","./chunk-242VQQM5-CsveGrTV.js","./chunk-RD3KTAHR-0PUE-gja.js","./theming-DLWRz99i.js","./chunk-3LY4VQVK-DyJr4LVG.js"])))=>i.map(i=>d[i]); import{i as e,n as t,r as n}from"./chunk-BneVvdWh.js";import{n as r,t as i}from"./preload-helper-CV6hqhE5.js";var a=t((()=>{(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin===`use-credentials`?t.credentials=`include`:e.crossOrigin===`anonymous`?t.credentials=`omit`:t.credentials=`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})()})),o=t((()=>{}));function s(e){var t=[...arguments].slice(1),n=Array.from(typeof e==`string`?[e]:e);n[n.length-1]=n[n.length-1].replace(/\r?\n([\t ]*)$/,``);var r=n.reduce(function(e,t){var n=t.match(/\n([\t ]+|(?!\s).)/g);return n?e.concat(n.map(function(e){return e.match(/[\t ]/g)?.length??0})):e},[]);if(r.length){var i=RegExp(` [ ]{`+Math.min.apply(Math,r)+`}`,`g`);n=n.map(function(e){return e.replace(i,` `)})}n[0]=n[0].replace(/^\r?\n/,``);var a=n[0];return t.forEach(function(e,t){var r=a.match(/(?:^|\n)( *)$/),i=r?r[1]:``,o=e;typeof e==`string`&&e.includes(` @@ -1008,7 +1008,7 @@ See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf- font-weight: bold; color: hsl(212 100 46); } - `,document.head.appendChild(o),a.querySelector(`.sb-navigator-story-link.active`)?.closest(`details`)?.scrollIntoView({block:`center`})},fH=Kv(CS(),1),Iv()})),hH,gH,_H,vH=t((()=>{({createBrowserChannel:hH}=__STORYBOOK_MODULE_CHANNELS__),{addons:gH}=__STORYBOOK_MODULE_PREVIEW_API__,_H=hH({page:`preview`}),gH.setChannel(_H),window.__STORYBOOK_ADDONS_CHANNEL__=_H,window.CONFIG_TYPE===`DEVELOPMENT`&&(window.__STORYBOOK_SERVER_CHANNEL__=_H)}));async function yH(e){return await bH[e]()}var bH,xH=t((()=>{r(),bH={"./stories/Button.stories.js":()=>i(()=>import(`./Button.stories-BNVkmgFt.js`),__vite__mapDeps([0,1]),import.meta.url),"./stories/Checkbox.stories.js":()=>i(()=>import(`./Checkbox.stories-BNK6M1li.js`),__vite__mapDeps([2,1]),import.meta.url),"./stories/ComboBox.stories.js":()=>i(()=>import(`./ComboBox.stories-BvilNb8W.js`),__vite__mapDeps([3,1]),import.meta.url),"./stories/Input.stories.js":()=>i(()=>import(`./Input.stories-B6c_Nqyu.js`),__vite__mapDeps([4,1]),import.meta.url),"./stories/Label.stories.js":()=>i(()=>import(`./Label.stories-D0hjcsiH.js`),__vite__mapDeps([5,1]),import.meta.url),"./stories/Loader.stories.js":()=>i(()=>import(`./Loader.stories-5dXu2Cov.js`),__vite__mapDeps([6,1]),import.meta.url),"./stories/Separator.stories.js":()=>i(()=>import(`./Separator.stories-DebYhaq-.js`),__vite__mapDeps([7,1]),import.meta.url)}})),SH,CH,wH=t((()=>{SH=Object.defineProperty,CH=(e,t)=>{for(var n in t)SH(e,n,{get:t[n],enumerable:!0})}}));function TH(e){if(!e||typeof e!=`object`)return!1;let t=Object.getPrototypeOf(e);return t===null||t===Object.prototype||Object.getPrototypeOf(t)===null?Object.prototype.toString.call(e)===`[object Object]`:!1}function EH(e){return e==null||typeof e!=`object`&&typeof e!=`function`}function DH(e){return ArrayBuffer.isView(e)&&!(e instanceof DataView)}function OH(e){return Object.getOwnPropertySymbols(e).filter(t=>Object.prototype.propertyIsEnumerable.call(e,t))}function kH(e){return e==null?e===void 0?`[object Undefined]`:`[object Null]`:Object.prototype.toString.call(e)}var AH,jH,MH,NH,PH,FH,IH,LH,RH,zH,BH,VH,HH,UH,WH,GH,KH,qH,JH,YH,XH,ZH,QH,$H,eU,tU=t((()=>{AH=`[object RegExp]`,jH=`[object String]`,MH=`[object Number]`,NH=`[object Boolean]`,PH=`[object Symbol]`,FH=`[object Date]`,IH=`[object Map]`,LH=`[object Set]`,RH=`[object Array]`,zH=`[object Function]`,BH=`[object ArrayBuffer]`,VH=`[object Object]`,HH=`[object Error]`,UH=`[object DataView]`,WH=`[object Uint8Array]`,GH=`[object Uint8ClampedArray]`,KH=`[object Uint16Array]`,qH=`[object Uint32Array]`,JH=`[object BigUint64Array]`,YH=`[object Int8Array]`,XH=`[object Int16Array]`,ZH=`[object Int32Array]`,QH=`[object BigInt64Array]`,$H=`[object Float32Array]`,eU=`[object Float64Array]`}));function nU(e,t){let n={},r=Object.keys(e);for(let i=0;i{tU()})),uU,dU,fU,pU,mU,hU,gU,_U,vU,yU,bU,xU=t((()=>{uU=Object.create,dU=Object.defineProperty,fU=Object.getOwnPropertyDescriptor,pU=Object.getOwnPropertyNames,mU=Object.getPrototypeOf,hU=Object.prototype.hasOwnProperty,gU=(t=>typeof e<`u`?e:typeof Proxy<`u`?new Proxy(t,{get:(t,n)=>(typeof e<`u`?e:t)[n]}):t)(function(t){if(typeof e<`u`)return e.apply(this,arguments);throw Error(`Dynamic require of "`+t+`" is not supported`)}),_U=(e,t)=>function(){return t||(0,e[pU(e)[0]])((t={exports:{}}).exports,t),t.exports},vU=(e,t)=>{for(var n in t)dU(e,n,{get:t[n],enumerable:!0})},yU=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(let i of pU(t))!hU.call(e,i)&&i!==n&&dU(e,i,{get:()=>t[i],enumerable:!(r=fU(t,i))||r.enumerable});return e},bU=(e,t,n)=>(n=e==null?{}:uU(mU(e)),yU(t||!e||!e.__esModule?dU(n,`default`,{value:e,enumerable:!0}):n,e))})),SU,CU,wU,TU,EU,DU,OU,kU,AU,jU,MU,NU,PU=t((()=>{tU(),xU(),SU=_U({"../../node_modules/jsdoc-type-pratt-parser/dist/index.js"(e,t){(function(n,r){typeof e==`object`&&typeof t<`u`?r(e):typeof define==`function`&&define.amd?define([`exports`],r):(n=typeof globalThis<`u`?globalThis:n||self,r(n.jtpp={}))})(e,(function(e){function t(e){return e.text!==void 0&&e.text!==``?`'${e.type}' with value '${e.text}'`:`'${e.type}'`}class n extends Error{constructor(e){super(`No parslet found for token: ${t(e)}`),this.token=e,Object.setPrototypeOf(this,n.prototype)}getToken(){return this.token}}class r extends Error{constructor(e){super(`The parsing ended early. The next token was: ${t(e)}`),this.token=e,Object.setPrototypeOf(this,r.prototype)}getToken(){return this.token}}class i extends Error{constructor(e,t){let n=`Unexpected type: '${e.type}'.`;t!==void 0&&(n+=` Message: ${t}`),super(n),Object.setPrototypeOf(this,i.prototype)}}function a(e){return t=>t.startsWith(e)?{type:e,text:e}:null}function o(e){let t=0,n,r=e[0],i=!1;if(r!==`'`&&r!==`"`)return null;for(;t{let t=l(e);return t==null?null:{type:`Identifier`,text:t}};function p(e){return t=>{if(!t.startsWith(e))return null;let n=t[e.length];return n!==void 0&&c.test(n)?null:{type:e,text:e}}}let m=[e=>e.length>0?null:{type:`EOF`,text:``},a(`=>`),a(`(`),a(`)`),a(`{`),a(`}`),a(`[`),a(`]`),a(`|`),a(`&`),a(`<`),a(`>`),a(`,`),a(`;`),a(`*`),a(`?`),a(`!`),a(`=`),a(`:`),a(`...`),a(`.`),a(`#`),a(`~`),a(`/`),a(`@`),p(`undefined`),p(`null`),p(`function`),p(`this`),p(`new`),p(`module`),p(`event`),p(`extends`),p(`external`),p(`infer`),p(`typeof`),p(`keyof`),p(`readonly`),p(`import`),p(`is`),p(`in`),p(`asserts`),e=>{let t=d(e);return t===null?null:{type:`Number`,text:t}},f,e=>{let t=o(e);return t==null?null:{type:`StringValue`,text:t}}],h=/^\s*\n\s*/;class g{static create(e){let t=this.read(e);e=t.text;let n=this.read(e);return e=n.text,new g(e,void 0,t.token,n.token)}constructor(e,t,n,r){this.text=``,this.text=e,this.previous=t,this.current=n,this.next=r}static read(e,t=!1){t||=h.test(e),e=e.trim();for(let n of m){let r=n(e);if(r!==null){let n=Object.assign(Object.assign({},r),{startOfLine:t});return e=e.slice(n.text.length),{text:e,token:n}}}throw Error(`Unexpected Token `+e)}advance(){let e=g.read(this.text);return new g(e.text,this.current,this.next,e.token)}}function _(e){if(e===void 0)throw Error(`Unexpected undefined`);if(e.type===`JsdocTypeKeyValue`||e.type===`JsdocTypeParameterList`||e.type===`JsdocTypeProperty`||e.type===`JsdocTypeReadonlyProperty`||e.type===`JsdocTypeObjectField`||e.type===`JsdocTypeJsdocObjectField`||e.type===`JsdocTypeIndexSignature`||e.type===`JsdocTypeMappedType`||e.type===`JsdocTypeTypeParameter`)throw new i(e);return e}function v(e){return e.type===`JsdocTypeKeyValue`?b(e):_(e)}function y(e){return e.type===`JsdocTypeName`?e:b(e)}function b(e){if(e.type!==`JsdocTypeKeyValue`)throw new i(e);return e}function x(e){if(e.type===`JsdocTypeVariadic`){if(e.element?.type===`JsdocTypeName`)return e;throw new i(e)}if(e.type!==`JsdocTypeNumber`&&e.type!==`JsdocTypeName`)throw new i(e);return e}function S(e){if(e.type===`JsdocTypeTuple`||e.type===`JsdocTypeGeneric`&&e.meta.brackets===`square`)return e;throw new i(e)}function C(e){return e.type===`JsdocTypeIndexSignature`||e.type===`JsdocTypeMappedType`}var w;(function(e){e[e.ALL=0]=`ALL`,e[e.PARAMETER_LIST=1]=`PARAMETER_LIST`,e[e.OBJECT=2]=`OBJECT`,e[e.KEY_VALUE=3]=`KEY_VALUE`,e[e.INDEX_BRACKETS=4]=`INDEX_BRACKETS`,e[e.UNION=5]=`UNION`,e[e.INTERSECTION=6]=`INTERSECTION`,e[e.PREFIX=7]=`PREFIX`,e[e.INFIX=8]=`INFIX`,e[e.TUPLE=9]=`TUPLE`,e[e.SYMBOL=10]=`SYMBOL`,e[e.OPTIONAL=11]=`OPTIONAL`,e[e.NULLABLE=12]=`NULLABLE`,e[e.KEY_OF_TYPE_OF=13]=`KEY_OF_TYPE_OF`,e[e.FUNCTION=14]=`FUNCTION`,e[e.ARROW=15]=`ARROW`,e[e.ARRAY_BRACKETS=16]=`ARRAY_BRACKETS`,e[e.GENERIC=17]=`GENERIC`,e[e.NAME_PATH=18]=`NAME_PATH`,e[e.PARENTHESIS=19]=`PARENTHESIS`,e[e.SPECIAL_TYPES=20]=`SPECIAL_TYPES`})(w||={});class T{constructor(e,t,n){this.grammar=e,typeof t==`string`?this._lexer=g.create(t):this._lexer=t,this.baseParser=n}get lexer(){return this._lexer}parse(){let e=this.parseType(w.ALL);if(this.lexer.current.type!==`EOF`)throw new r(this.lexer.current);return e}parseType(e){return _(this.parseIntermediateType(e))}parseIntermediateType(e){let t=this.tryParslets(null,e);if(t===null)throw new n(this.lexer.current);return this.parseInfixIntermediateType(t,e)}parseInfixIntermediateType(e,t){let n=this.tryParslets(e,t);for(;n!==null;)e=n,n=this.tryParslets(e,t);return e}tryParslets(e,t){for(let n of this.grammar){let r=n(this,t,e);if(r!==null)return r}return null}consume(e){return Array.isArray(e)||(e=[e]),e.includes(this.lexer.current.type)?(this._lexer=this.lexer.advance(),!0):!1}acceptLexerState(e){this._lexer=e.lexer}}function E(e){return e===`}`||e===`EOF`||e===`|`||e===`,`||e===`)`||e===`>`}let D=(e,t,n)=>{let r=e.lexer.current.type,i=e.lexer.next.type;return n==null&&r===`?`&&!E(i)||n!=null&&r===`?`?(e.consume(`?`),n==null?{type:`JsdocTypeNullable`,element:e.parseType(w.NULLABLE),meta:{position:`prefix`}}:{type:`JsdocTypeNullable`,element:_(n),meta:{position:`suffix`}}):null};function O(e){let t=(t,n,r)=>{let i=t.lexer.current.type,a=t.lexer.next.type;if(r===null){if(`parsePrefix`in e&&e.accept(i,a))return e.parsePrefix(t)}else if(`parseInfix`in e&&e.precedence>n&&e.accept(i,a))return e.parseInfix(t,r);return null};return Object.defineProperty(t,`name`,{value:e.name}),t}let k=O({name:`optionalParslet`,accept:e=>e===`=`,precedence:w.OPTIONAL,parsePrefix:e=>(e.consume(`=`),{type:`JsdocTypeOptional`,element:e.parseType(w.OPTIONAL),meta:{position:`prefix`}}),parseInfix:(e,t)=>(e.consume(`=`),{type:`JsdocTypeOptional`,element:_(t),meta:{position:`suffix`}})}),A=O({name:`numberParslet`,accept:e=>e===`Number`,parsePrefix:e=>{let t=parseFloat(e.lexer.current.text);return e.consume(`Number`),{type:`JsdocTypeNumber`,value:t}}}),j=O({name:`parenthesisParslet`,accept:e=>e===`(`,parsePrefix:e=>{if(e.consume(`(`),e.consume(`)`))return{type:`JsdocTypeParameterList`,elements:[]};let t=e.parseIntermediateType(w.ALL);if(!e.consume(`)`))throw Error(`Unterminated parenthesis`);return t.type===`JsdocTypeParameterList`?t:t.type===`JsdocTypeKeyValue`?{type:`JsdocTypeParameterList`,elements:[t]}:{type:`JsdocTypeParenthesis`,element:_(t)}}}),M=O({name:`specialTypesParslet`,accept:(e,t)=>e===`?`&&E(t)||e===`null`||e===`undefined`||e===`*`,parsePrefix:e=>{if(e.consume(`null`))return{type:`JsdocTypeNull`};if(e.consume(`undefined`))return{type:`JsdocTypeUndefined`};if(e.consume(`*`))return{type:`JsdocTypeAny`};if(e.consume(`?`))return{type:`JsdocTypeUnknown`};throw Error(`Unacceptable token: `+e.lexer.current.text)}}),ee=O({name:`notNullableParslet`,accept:e=>e===`!`,precedence:w.NULLABLE,parsePrefix:e=>(e.consume(`!`),{type:`JsdocTypeNotNullable`,element:e.parseType(w.NULLABLE),meta:{position:`prefix`}}),parseInfix:(e,t)=>(e.consume(`!`),{type:`JsdocTypeNotNullable`,element:_(t),meta:{position:`suffix`}})});function N({allowTrailingComma:e}){return O({name:`parameterListParslet`,accept:e=>e===`,`,precedence:w.PARAMETER_LIST,parseInfix:(e,t)=>{let r=[v(t)];e.consume(`,`);do try{let t=e.parseIntermediateType(w.PARAMETER_LIST);r.push(v(t))}catch(e){if(e instanceof n)break;throw e}while(e.consume(`,`));if(r.length>0&&r.slice(0,-1).some(e=>e.type===`JsdocTypeVariadic`))throw Error(`Only the last parameter may be a rest parameter`);return{type:`JsdocTypeParameterList`,elements:r}}})}let te=O({name:`genericParslet`,accept:(e,t)=>e===`<`||e===`.`&&t===`<`,precedence:w.GENERIC,parseInfix:(e,t)=>{let n=e.consume(`.`);e.consume(`<`);let r=[],a=!1;if(e.consume(`infer`)){a=!0;let t=e.parseIntermediateType(w.SYMBOL);if(t.type!==`JsdocTypeName`)throw new i(t,`A typescript asserts always has to have a name on the left side.`);r.push(t)}else do r.push(e.parseType(w.PARAMETER_LIST));while(e.consume(`,`));if(!e.consume(`>`))throw Error(`Unterminated generic parameter list`);return Object.assign(Object.assign({type:`JsdocTypeGeneric`,left:_(t),elements:r},a?{infer:!0}:{}),{meta:{brackets:`angle`,dot:n}})}}),ne=O({name:`unionParslet`,accept:e=>e===`|`,precedence:w.UNION,parseInfix:(e,t)=>{e.consume(`|`);let n=[];do n.push(e.parseType(w.UNION));while(e.consume(`|`));return{type:`JsdocTypeUnion`,elements:[_(t),...n]}}}),re=[D,k,A,j,M,ee,N({allowTrailingComma:!0}),te,ne,k];function ie({allowSquareBracketsOnAnyType:e,allowJsdocNamePaths:t,pathGrammar:n}){return function(r,a,o){if(o==null||a>=w.NAME_PATH)return null;let s=r.lexer.current.type,c=r.lexer.next.type;if(!(s===`.`&&c!==`<`||s===`[`&&(e||o.type===`JsdocTypeName`)||t&&(s===`~`||s===`#`)))return null;let l,u=!1;r.consume(`.`)?l=`property`:r.consume(`[`)?(l=`property-brackets`,u=!0):r.consume(`~`)?l=`inner`:(r.consume(`#`),l=`instance`);let d=n===null?r:new T(n,r.lexer,r),f=d.parseIntermediateType(w.NAME_PATH);r.acceptLexerState(d);let p;switch(f.type){case`JsdocTypeName`:p={type:`JsdocTypeProperty`,value:f.value,meta:{quote:void 0}};break;case`JsdocTypeNumber`:p={type:`JsdocTypeProperty`,value:f.value.toString(10),meta:{quote:void 0}};break;case`JsdocTypeStringValue`:p={type:`JsdocTypeProperty`,value:f.value,meta:{quote:f.meta.quote}};break;case`JsdocTypeSpecialNamePath`:if(f.specialType===`event`)p=f;else throw new i(f,`Type 'JsdocTypeSpecialNamePath' is only allowed with specialType 'event'`);break;default:throw new i(f,`Expecting 'JsdocTypeName', 'JsdocTypeNumber', 'JsdocStringValue' or 'JsdocTypeSpecialNamePath'`)}if(u&&!r.consume(`]`)){let e=r.lexer.current;throw Error(`Unterminated square brackets. Next token is '${e.type}' with text '${e.text}'`)}return{type:`JsdocTypeNamePath`,left:_(o),right:p,pathType:l}}}function ae({allowedAdditionalTokens:e}){return O({name:`nameParslet`,accept:t=>t===`Identifier`||t===`this`||t===`new`||e.includes(t),parsePrefix:e=>{let{type:t,text:n}=e.lexer.current;return e.consume(t),{type:`JsdocTypeName`,value:n}}})}let oe=O({name:`stringValueParslet`,accept:e=>e===`StringValue`,parsePrefix:e=>{let t=e.lexer.current.text;return e.consume(`StringValue`),{type:`JsdocTypeStringValue`,value:t.slice(1,-1),meta:{quote:t[0]===`'`?`single`:`double`}}}});function se({pathGrammar:e,allowedTypes:t}){return O({name:`specialNamePathParslet`,accept:e=>t.includes(e),parsePrefix:t=>{let n=t.lexer.current.type;if(t.consume(n),!t.consume(`:`))return{type:`JsdocTypeName`,value:n};let r,i=t.lexer.current;if(t.consume(`StringValue`))r={type:`JsdocTypeSpecialNamePath`,value:i.text.slice(1,-1),specialType:n,meta:{quote:i.text[0]===`'`?`single`:`double`}};else{let e=``,a=[`Identifier`,`@`,`/`];for(;a.some(e=>t.consume(e));)e+=i.text,i=t.lexer.current;r={type:`JsdocTypeSpecialNamePath`,value:e,specialType:n,meta:{quote:void 0}}}let a=new T(e,t.lexer,t),o=a.parseInfixIntermediateType(r,w.ALL);return t.acceptLexerState(a),_(o)}})}let P=[ae({allowedAdditionalTokens:[`external`,`module`]}),oe,A,ie({allowSquareBracketsOnAnyType:!1,allowJsdocNamePaths:!0,pathGrammar:null})],ce=[...P,se({allowedTypes:[`event`],pathGrammar:P})];function le(e){let t;if(e.type===`JsdocTypeParameterList`)t=e.elements;else if(e.type===`JsdocTypeParenthesis`)t=[e.element];else throw new i(e);return t.map(e=>v(e))}function ue(e){let t=le(e);if(t.some(e=>e.type===`JsdocTypeKeyValue`))throw Error(`No parameter should be named`);return t}function de({allowNamedParameters:e,allowNoReturnType:t,allowWithoutParenthesis:n,allowNewAsFunctionKeyword:r}){return O({name:`functionParslet`,accept:(e,t)=>e===`function`||r&&e===`new`&&t===`(`,parsePrefix:r=>{let i=r.consume(`new`);r.consume(`function`);let a=r.lexer.current.type===`(`;if(!a){if(!n)throw Error(`function is missing parameter list`);return{type:`JsdocTypeName`,value:`function`}}let o={type:`JsdocTypeFunction`,parameters:[],arrow:!1,constructor:i,parenthesis:a},s=r.parseIntermediateType(w.FUNCTION);if(e===void 0)o.parameters=ue(s);else{if(i&&s.type===`JsdocTypeFunction`&&s.arrow)return o=s,o.constructor=!0,o;o.parameters=le(s);for(let t of o.parameters)if(t.type===`JsdocTypeKeyValue`&&!e.includes(t.key))throw Error(`only allowed named parameters are ${e.join(`, `)} but got ${t.type}`)}if(r.consume(`:`))o.returnType=r.parseType(w.PREFIX);else if(!t)throw Error(`function is missing return type`);return o}})}function fe({allowPostfix:e,allowEnclosingBrackets:t}){return O({name:`variadicParslet`,accept:e=>e===`...`,precedence:w.PREFIX,parsePrefix:e=>{e.consume(`...`);let r=t&&e.consume(`[`);try{let t=e.parseType(w.PREFIX);if(r&&!e.consume(`]`))throw Error(`Unterminated variadic type. Missing ']'`);return{type:`JsdocTypeVariadic`,element:_(t),meta:{position:`prefix`,squareBrackets:r}}}catch(e){if(e instanceof n){if(r)throw Error(`Empty square brackets for variadic are not allowed.`);return{type:`JsdocTypeVariadic`,meta:{position:void 0,squareBrackets:!1}}}else throw e}},parseInfix:e?(e,t)=>(e.consume(`...`),{type:`JsdocTypeVariadic`,element:_(t),meta:{position:`suffix`,squareBrackets:!1}}):void 0})}let pe=O({name:`symbolParslet`,accept:e=>e===`(`,precedence:w.SYMBOL,parseInfix:(e,t)=>{if(t.type!==`JsdocTypeName`)throw Error(`Symbol expects a name on the left side. (Reacting on '(')`);e.consume(`(`);let n={type:`JsdocTypeSymbol`,value:t.value};if(!e.consume(`)`)&&(n.element=x(e.parseIntermediateType(w.SYMBOL)),!e.consume(`)`)))throw Error(`Symbol does not end after value`);return n}}),me=O({name:`arrayBracketsParslet`,precedence:w.ARRAY_BRACKETS,accept:(e,t)=>e===`[`&&t===`]`,parseInfix:(e,t)=>(e.consume(`[`),e.consume(`]`),{type:`JsdocTypeGeneric`,left:{type:`JsdocTypeName`,value:`Array`},elements:[_(t)],meta:{brackets:`square`,dot:!1}})});function he({objectFieldGrammar:e,allowKeyTypes:t}){return O({name:`objectParslet`,accept:e=>e===`{`,parsePrefix:n=>{n.consume(`{`);let r={type:`JsdocTypeObject`,meta:{separator:`comma`},elements:[]};if(!n.consume(`}`)){let a,o=new T(e,n.lexer,n);for(;;){o.acceptLexerState(n);let e=o.parseIntermediateType(w.OBJECT);n.acceptLexerState(o),e===void 0&&t&&(e=n.parseIntermediateType(w.OBJECT));let s=!1;if(e.type===`JsdocTypeNullable`&&(s=!0,e=e.element),e.type===`JsdocTypeNumber`||e.type===`JsdocTypeName`||e.type===`JsdocTypeStringValue`){let t;e.type===`JsdocTypeStringValue`&&(t=e.meta.quote),r.elements.push({type:`JsdocTypeObjectField`,key:e.value.toString(),right:void 0,optional:s,readonly:!1,meta:{quote:t}})}else if(e.type===`JsdocTypeObjectField`||e.type===`JsdocTypeJsdocObjectField`)r.elements.push(e);else throw new i(e);if(n.lexer.current.startOfLine)a=`linebreak`,n.consume(`,`)||n.consume(`;`);else if(n.consume(`,`))a=`comma`;else if(n.consume(`;`))a=`semicolon`;else break;if(n.lexer.current.type===`}`)break}if(r.meta.separator=a??`comma`,a===`linebreak`&&(r.meta.propertyIndent=` `),!n.consume(`}`))throw Error(`Unterminated record type. Missing '}'`)}return r}})}function ge({allowSquaredProperties:e,allowKeyTypes:t,allowReadonly:n,allowOptional:r}){return O({name:`objectFieldParslet`,precedence:w.KEY_VALUE,accept:e=>e===`:`,parseInfix:(a,o)=>{let s=!1,c=!1;r&&o.type===`JsdocTypeNullable`&&(s=!0,o=o.element),n&&o.type===`JsdocTypeReadonlyProperty`&&(c=!0,o=o.element);let l=a.baseParser??a;if(l.acceptLexerState(a),o.type===`JsdocTypeNumber`||o.type===`JsdocTypeName`||o.type===`JsdocTypeStringValue`||C(o)){if(C(o)&&!e)throw new i(o);l.consume(`:`);let t;o.type===`JsdocTypeStringValue`&&(t=o.meta.quote);let n=l.parseType(w.KEY_VALUE);return a.acceptLexerState(l),{type:`JsdocTypeObjectField`,key:C(o)?o:o.value.toString(),right:n,optional:s,readonly:c,meta:{quote:t}}}else{if(!t)throw new i(o);l.consume(`:`);let e=l.parseType(w.KEY_VALUE);return a.acceptLexerState(l),{type:`JsdocTypeJsdocObjectField`,left:_(o),right:e}}}})}function _e({allowOptional:e,allowVariadic:t}){return O({name:`keyValueParslet`,precedence:w.KEY_VALUE,accept:e=>e===`:`,parseInfix:(n,r)=>{let a=!1,o=!1;if(e&&r.type===`JsdocTypeNullable`&&(a=!0,r=r.element),t&&r.type===`JsdocTypeVariadic`&&r.element!==void 0&&(o=!0,r=r.element),r.type!==`JsdocTypeName`)throw new i(r);n.consume(`:`);let s=n.parseType(w.KEY_VALUE);return{type:`JsdocTypeKeyValue`,key:r.value,right:s,optional:a,variadic:o}}})}let ve=[...re,de({allowWithoutParenthesis:!0,allowNamedParameters:[`this`,`new`],allowNoReturnType:!0,allowNewAsFunctionKeyword:!1}),oe,se({allowedTypes:[`module`,`external`,`event`],pathGrammar:ce}),fe({allowEnclosingBrackets:!0,allowPostfix:!0}),ae({allowedAdditionalTokens:[`keyof`]}),pe,me,ie({allowSquareBracketsOnAnyType:!1,allowJsdocNamePaths:!0,pathGrammar:ce})],ye=[...ve,he({objectFieldGrammar:[ae({allowedAdditionalTokens:[`typeof`,`module`,`in`]}),ge({allowSquaredProperties:!1,allowKeyTypes:!0,allowOptional:!1,allowReadonly:!1}),...ve],allowKeyTypes:!0}),_e({allowOptional:!0,allowVariadic:!0})],be=O({name:`typeOfParslet`,accept:e=>e===`typeof`,parsePrefix:e=>(e.consume(`typeof`),{type:`JsdocTypeTypeof`,element:e.parseType(w.KEY_OF_TYPE_OF)})}),xe=[ae({allowedAdditionalTokens:[`typeof`,`module`,`keyof`,`event`,`external`,`in`]}),D,k,oe,A,ge({allowSquaredProperties:!1,allowKeyTypes:!1,allowOptional:!1,allowReadonly:!1})],Se=[...re,he({allowKeyTypes:!1,objectFieldGrammar:xe}),ae({allowedAdditionalTokens:[`event`,`external`,`in`]}),be,de({allowWithoutParenthesis:!1,allowNamedParameters:[`this`,`new`],allowNoReturnType:!0,allowNewAsFunctionKeyword:!1}),fe({allowEnclosingBrackets:!1,allowPostfix:!1}),ae({allowedAdditionalTokens:[`keyof`]}),se({allowedTypes:[`module`],pathGrammar:ce}),ie({allowSquareBracketsOnAnyType:!1,allowJsdocNamePaths:!0,pathGrammar:ce}),_e({allowOptional:!1,allowVariadic:!1}),pe],Ce=O({name:`assertsParslet`,accept:e=>e===`asserts`,parsePrefix:e=>{e.consume(`asserts`);let t=e.parseIntermediateType(w.SYMBOL);if(t.type!==`JsdocTypeName`)throw new i(t,`A typescript asserts always has to have a name on the left side.`);return e.consume(`is`)?{type:`JsdocTypeAsserts`,left:t,right:_(e.parseIntermediateType(w.INFIX))}:{type:`JsdocTypeAssertsPlain`,element:t}}});function we({allowQuestionMark:e}){return O({name:`tupleParslet`,accept:e=>e===`[`,parsePrefix:e=>{e.consume(`[`);let t={type:`JsdocTypeTuple`,elements:[]};if(e.consume(`]`))return t;let n=e.parseIntermediateType(w.ALL);if(n.type===`JsdocTypeParameterList`?n.elements[0].type===`JsdocTypeKeyValue`?t.elements=n.elements.map(b):t.elements=n.elements.map(_):n.type===`JsdocTypeKeyValue`?t.elements=[b(n)]:t.elements=[_(n)],!e.consume(`]`))throw Error(`Unterminated '['`);if(t.elements.some(e=>e.type===`JsdocTypeUnknown`))throw Error(`Question mark in tuple not allowed`);return t}})}let Te=O({name:`keyOfParslet`,accept:e=>e===`keyof`,parsePrefix:e=>(e.consume(`keyof`),{type:`JsdocTypeKeyof`,element:_(e.parseType(w.KEY_OF_TYPE_OF))})}),Ee=O({name:`importParslet`,accept:e=>e===`import`,parsePrefix:e=>{if(e.consume(`import`),!e.consume(`(`))throw Error(`Missing parenthesis after import keyword`);let t=e.parseType(w.PREFIX);if(t.type!==`JsdocTypeStringValue`)throw Error(`Only string values are allowed as paths for imports`);if(!e.consume(`)`))throw Error(`Missing closing parenthesis after import keyword`);return{type:`JsdocTypeImport`,element:t}}}),De=O({name:`readonlyPropertyParslet`,accept:e=>e===`readonly`,parsePrefix:e=>(e.consume(`readonly`),{type:`JsdocTypeReadonlyProperty`,element:e.parseIntermediateType(w.KEY_VALUE)})}),Oe=O({name:`arrowFunctionParslet`,precedence:w.ARROW,accept:e=>e===`=>`,parseInfix:(e,t)=>(e.consume(`=>`),{type:`JsdocTypeFunction`,parameters:le(t).map(y),arrow:!0,constructor:!1,parenthesis:!0,returnType:e.parseType(w.OBJECT)})}),ke=O({name:`genericArrowFunctionParslet`,accept:e=>e===`<`,parsePrefix:e=>{let t=[];e.consume(`<`);do{let n,r=e.parseIntermediateType(w.SYMBOL);if(r.type===`JsdocTypeOptional`&&(r=r.element,n=e.parseType(w.SYMBOL)),r.type!==`JsdocTypeName`)throw new i(r);let a;e.consume(`extends`)&&(a=e.parseType(w.SYMBOL),a.type===`JsdocTypeOptional`&&(a=a.element,n=e.parseType(w.SYMBOL)));let o={type:`JsdocTypeTypeParameter`,name:r};if(a!==void 0&&(o.constraint=a),n!==void 0&&(o.defaultValue=n),t.push(o),e.consume(`>`))break}while(e.consume(`,`));let n=e.parseIntermediateType(w.SYMBOL);return n.typeParameters=t,n}}),Ae=O({name:`intersectionParslet`,accept:e=>e===`&`,precedence:w.INTERSECTION,parseInfix:(e,t)=>{e.consume(`&`);let n=[];do n.push(e.parseType(w.INTERSECTION));while(e.consume(`&`));return{type:`JsdocTypeIntersection`,elements:[_(t),...n]}}}),je=O({name:`predicateParslet`,precedence:w.INFIX,accept:e=>e===`is`,parseInfix:(e,t)=>{if(t.type!==`JsdocTypeName`)throw new i(t,`A typescript predicate always has to have a name on the left side.`);return e.consume(`is`),{type:`JsdocTypePredicate`,left:t,right:_(e.parseIntermediateType(w.INFIX))}}}),Me=O({name:`objectSquareBracketPropertyParslet`,accept:e=>e===`[`,parsePrefix:e=>{if(e.baseParser===void 0)throw Error(`Only allowed inside object grammar`);e.consume(`[`);let t=e.lexer.current.text;e.consume(`Identifier`);let n;if(e.consume(`:`)){let r=e.baseParser;r.acceptLexerState(e),n={type:`JsdocTypeIndexSignature`,key:t,right:r.parseType(w.INDEX_BRACKETS)},e.acceptLexerState(r)}else if(e.consume(`in`)){let r=e.baseParser;r.acceptLexerState(e),n={type:`JsdocTypeMappedType`,key:t,right:r.parseType(w.ARRAY_BRACKETS)},e.acceptLexerState(r)}else throw Error(`Missing ':' or 'in' inside square bracketed property.`);if(!e.consume(`]`))throw Error(`Unterminated square brackets`);return n}}),Ne=O({name:`readonlyArrayParslet`,accept:e=>e===`readonly`,parsePrefix:e=>(e.consume(`readonly`),{type:`JsdocTypeReadonlyArray`,element:S(e.parseIntermediateType(w.ALL))})}),Pe=O({name:`conditionalParslet`,precedence:w.INFIX,accept:e=>e===`extends`,parseInfix:(e,t)=>{e.consume(`extends`);let n=e.parseType(w.KEY_OF_TYPE_OF).element,r=e.parseType(w.INFIX);return e.consume(`:`),{type:`JsdocTypeConditional`,checksType:_(t),extendsType:n,trueType:r,falseType:e.parseType(w.INFIX)}}}),Fe=[De,ae({allowedAdditionalTokens:[`typeof`,`module`,`keyof`,`event`,`external`,`in`]}),D,k,oe,A,ge({allowSquaredProperties:!0,allowKeyTypes:!1,allowOptional:!0,allowReadonly:!0}),Me],Ie=[...re,he({allowKeyTypes:!1,objectFieldGrammar:Fe}),Ne,be,Te,Ee,oe,de({allowWithoutParenthesis:!0,allowNoReturnType:!1,allowNamedParameters:[`this`,`new`,`args`],allowNewAsFunctionKeyword:!0}),we({allowQuestionMark:!1}),fe({allowEnclosingBrackets:!1,allowPostfix:!1}),Ce,Pe,ae({allowedAdditionalTokens:[`event`,`external`,`in`]}),se({allowedTypes:[`module`],pathGrammar:ce}),me,Oe,ke,ie({allowSquareBracketsOnAnyType:!0,allowJsdocNamePaths:!1,pathGrammar:ce}),Ae,je,_e({allowVariadic:!0,allowOptional:!0})];function Le(e,t){switch(t){case`closure`:return new T(Se,e).parse();case`jsdoc`:return new T(ye,e).parse();case`typescript`:return new T(Ie,e).parse()}}function Re(e,t=[`typescript`,`closure`,`jsdoc`]){let n;for(let r of t)try{return Le(e,r)}catch(e){n=e}throw n}function ze(e,t){let n=e[t.type];if(n===void 0)throw Error(`In this set of transform rules exists no rule for type ${t.type}.`);return n(t,t=>ze(e,t))}function F(e){throw Error(`This transform is not available. Are you trying the correct parsing mode?`)}function Be(e){let t={params:[]};for(let n of e.parameters)n.type===`JsdocTypeKeyValue`?n.key===`this`?t.this=n.right:n.key===`new`?t.new=n.right:t.params.push(n):t.params.push(n);return t}function Ve(e,t,n){return e===`prefix`?n+t:t+n}function He(e,t){switch(t){case`double`:return`"${e}"`;case`single`:return`'${e}'`;case void 0:return e}}function Ue(){return{JsdocTypeParenthesis:(e,t)=>`(${e.element===void 0?``:t(e.element)})`,JsdocTypeKeyof:(e,t)=>`keyof ${t(e.element)}`,JsdocTypeFunction:(e,t)=>{if(e.arrow){if(e.returnType===void 0)throw Error(`Arrow function needs a return type.`);let n=`${e.typeParameters===void 0?``:`<${e.typeParameters.map(t).join(`, `)??``}>`}(${e.parameters.map(t).join(`, `)}) => ${t(e.returnType)}`;return e.constructor&&(n=`new `+n),n}else{let n=e.constructor?`new`:`function`;return e.parenthesis&&(n+=`(${e.parameters.map(t).join(`, `)})`,e.returnType!==void 0&&(n+=`: ${t(e.returnType)}`)),n}},JsdocTypeName:e=>e.value,JsdocTypeTuple:(e,t)=>`[${e.elements.map(t).join(`, `)}]`,JsdocTypeVariadic:(e,t)=>e.meta.position===void 0?`...`:Ve(e.meta.position,t(e.element),`...`),JsdocTypeNamePath:(e,t)=>{let n=t(e.left),r=t(e.right);switch(e.pathType){case`inner`:return`${n}~${r}`;case`instance`:return`${n}#${r}`;case`property`:return`${n}.${r}`;case`property-brackets`:return`${n}[${r}]`}},JsdocTypeStringValue:e=>He(e.value,e.meta.quote),JsdocTypeAny:()=>`*`,JsdocTypeGeneric:(e,t)=>{if(e.meta.brackets===`square`){let n=e.elements[0],r=t(n);return n.type===`JsdocTypeUnion`||n.type===`JsdocTypeIntersection`?`(${r})[]`:`${r}[]`}else return`${t(e.left)}${e.meta.dot?`.`:``}<${e.infer===!0?`infer `:``}${e.elements.map(t).join(`, `)}>`},JsdocTypeImport:(e,t)=>`import(${t(e.element)})`,JsdocTypeObjectField:(e,t)=>{let n=``;return e.readonly&&(n+=`readonly `),typeof e.key==`string`?n+=He(e.key,e.meta.quote):n+=t(e.key),e.optional&&(n+=`?`),e.right===void 0?n:n+`: ${t(e.right)}`},JsdocTypeJsdocObjectField:(e,t)=>`${t(e.left)}: ${t(e.right)}`,JsdocTypeKeyValue:(e,t)=>{let n=e.key;return e.optional&&(n+=`?`),e.variadic&&(n=`...`+n),e.right===void 0?n:n+`: ${t(e.right)}`},JsdocTypeSpecialNamePath:e=>`${e.specialType}:${He(e.value,e.meta.quote)}`,JsdocTypeNotNullable:(e,t)=>Ve(e.meta.position,t(e.element),`!`),JsdocTypeNull:()=>`null`,JsdocTypeNullable:(e,t)=>Ve(e.meta.position,t(e.element),`?`),JsdocTypeNumber:e=>e.value.toString(),JsdocTypeObject:(e,t)=>`{${(e.meta.separator===`linebreak`&&e.elements.length>1?` + `,document.head.appendChild(o),a.querySelector(`.sb-navigator-story-link.active`)?.closest(`details`)?.scrollIntoView({block:`center`})},fH=Kv(CS(),1),Iv()})),hH,gH,_H,vH=t((()=>{({createBrowserChannel:hH}=__STORYBOOK_MODULE_CHANNELS__),{addons:gH}=__STORYBOOK_MODULE_PREVIEW_API__,_H=hH({page:`preview`}),gH.setChannel(_H),window.__STORYBOOK_ADDONS_CHANNEL__=_H,window.CONFIG_TYPE===`DEVELOPMENT`&&(window.__STORYBOOK_SERVER_CHANNEL__=_H)}));async function yH(e){return await bH[e]()}var bH,xH=t((()=>{r(),bH={"./stories/foundations/Typography.stories.js":()=>i(()=>import(`./Typography.stories-Ceegr84L.js`),__vite__mapDeps([0,1]),import.meta.url),"./stories/foundations/Colors.stories.js":()=>i(()=>import(`./Colors.stories-rQ7Q-hFW.js`),__vite__mapDeps([2,1]),import.meta.url),"./stories/foundations/Icons.stories.js":()=>i(()=>import(`./Icons.stories-Bkqwk1IY.js`),__vite__mapDeps([3,1]),import.meta.url),"./stories/components/DialogButtonsPrimary.stories.js":()=>i(()=>import(`./DialogButtonsPrimary.stories-UfH9kkhS.js`),__vite__mapDeps([4,1,5]),import.meta.url),"./stories/components/DialogButtonsSecondary.stories.js":()=>i(()=>import(`./DialogButtonsSecondary.stories-B06GAowc.js`),__vite__mapDeps([6,1,5]),import.meta.url),"./stories/components/PanelButtons.stories.js":()=>i(()=>import(`./PanelButtons.stories-DdNpWdK_.js`),__vite__mapDeps([7,1,5]),import.meta.url),"./stories/components/IconButtons.stories.js":()=>i(()=>import(`./IconButtons.stories-ThZx5UJ6.js`),__vite__mapDeps([8,1,5]),import.meta.url),"./stories/components/LinkButtons.stories.js":()=>i(()=>import(`./LinkButtons.stories-CWnL9o1m.js`),__vite__mapDeps([9,1,5]),import.meta.url),"./stories/components/SplitButtonsDropdown.stories.js":()=>i(()=>import(`./SplitButtonsDropdown.stories-BvWeee5D.js`),__vite__mapDeps([10,1,11,5]),import.meta.url),"./stories/components/SplitButtonsIconLeft.stories.js":()=>i(()=>import(`./SplitButtonsIconLeft.stories-Dr4wDcvI.js`),__vite__mapDeps([12,1,11,5]),import.meta.url),"./stories/components/SplitButtonsTabs.stories.js":()=>i(()=>import(`./SplitButtonsTabs.stories-CXQRjRm_.js`),__vite__mapDeps([13,1,11,5]),import.meta.url),"./stories/components/Checkbox.stories.js":()=>i(()=>import(`./Checkbox.stories-DFvCkgPP.js`),__vite__mapDeps([14,1,5]),import.meta.url),"./stories/components/Radio.stories.js":()=>i(()=>import(`./Radio.stories-CumHEb3o.js`),__vite__mapDeps([15,1,5]),import.meta.url),"./stories/components/Switches.stories.js":()=>i(()=>import(`./Switches.stories-BfGUao-L.js`),__vite__mapDeps([16,1,5]),import.meta.url),"./stories/components/Slider.stories.js":()=>i(()=>import(`./Slider.stories-DM-7D2v4.js`),__vite__mapDeps([17,1,5]),import.meta.url),"./stories/components/TextField.stories.js":()=>i(()=>import(`./TextField.stories-CNWuOQ51.js`),__vite__mapDeps([18,1,5]),import.meta.url),"./stories/components/TextArea.stories.js":()=>i(()=>import(`./TextArea.stories-HtLcKLcL.js`),__vite__mapDeps([19,1,5]),import.meta.url),"./stories/components/Cards.stories.js":()=>i(()=>import(`./Cards.stories-H_KY1O8E.js`),__vite__mapDeps([20,1,5]),import.meta.url),"./stories/components/InfoBlock.stories.js":()=>i(()=>import(`./InfoBlock.stories-C737cNEY.js`),__vite__mapDeps([21,1,5]),import.meta.url),"./stories/components/Tabs.stories.js":()=>i(()=>import(`./Tabs.stories-suHzVPGv.js`),__vite__mapDeps([22,1,5]),import.meta.url),"./stories/components/Header.stories.js":()=>i(()=>import(`./Header.stories-Bpjh8rah.js`),__vite__mapDeps([23,1,24,5]),import.meta.url),"./stories/components/ModalWindow.stories.js":()=>i(()=>import(`./ModalWindow.stories-C8D3NSUk.js`),__vite__mapDeps([25,1,24,5]),import.meta.url),"./stories/components/Scroll.stories.js":()=>i(()=>import(`./Scroll.stories-Dq4Wwl6Z.js`),__vite__mapDeps([26,1,5]),import.meta.url),"./stories/components/Loader.stories.js":()=>i(()=>import(`./Loader.stories-Wu8QxO3T.js`),__vite__mapDeps([27,1,5]),import.meta.url),"./stories/components/Tooltip.stories.js":()=>i(()=>import(`./Tooltip.stories-CprkHbDd.js`),__vite__mapDeps([28,1,5]),import.meta.url),"./stories/components/ContextMenu.stories.js":()=>i(()=>import(`./ContextMenu.stories-C550WoUl.js`),__vite__mapDeps([29,1,5]),import.meta.url),"./stories/components/PreviewControls.stories.js":()=>i(()=>import(`./PreviewControls.stories-CUmA5ook.js`),__vite__mapDeps([30,1,5]),import.meta.url),"./stories/Button.stories.js":()=>i(()=>import(`./Button.stories-BNVkmgFt.js`),__vite__mapDeps([31,1]),import.meta.url),"./stories/Checkbox.stories.js":()=>i(()=>import(`./Checkbox.stories-BNK6M1li.js`),__vite__mapDeps([32,1]),import.meta.url),"./stories/ComboBox.stories.js":()=>i(()=>import(`./ComboBox.stories-BvilNb8W.js`),__vite__mapDeps([33,1]),import.meta.url),"./stories/Input.stories.js":()=>i(()=>import(`./Input.stories-B6c_Nqyu.js`),__vite__mapDeps([34,1]),import.meta.url),"./stories/Label.stories.js":()=>i(()=>import(`./Label.stories-D0hjcsiH.js`),__vite__mapDeps([35,1]),import.meta.url),"./stories/Loader.stories.js":()=>i(()=>import(`./Loader.stories-5dXu2Cov.js`),__vite__mapDeps([36,1]),import.meta.url),"./stories/Separator.stories.js":()=>i(()=>import(`./Separator.stories-DebYhaq-.js`),__vite__mapDeps([37,1]),import.meta.url)}})),SH,CH,wH=t((()=>{SH=Object.defineProperty,CH=(e,t)=>{for(var n in t)SH(e,n,{get:t[n],enumerable:!0})}}));function TH(e){if(!e||typeof e!=`object`)return!1;let t=Object.getPrototypeOf(e);return t===null||t===Object.prototype||Object.getPrototypeOf(t)===null?Object.prototype.toString.call(e)===`[object Object]`:!1}function EH(e){return e==null||typeof e!=`object`&&typeof e!=`function`}function DH(e){return ArrayBuffer.isView(e)&&!(e instanceof DataView)}function OH(e){return Object.getOwnPropertySymbols(e).filter(t=>Object.prototype.propertyIsEnumerable.call(e,t))}function kH(e){return e==null?e===void 0?`[object Undefined]`:`[object Null]`:Object.prototype.toString.call(e)}var AH,jH,MH,NH,PH,FH,IH,LH,RH,zH,BH,VH,HH,UH,WH,GH,KH,qH,JH,YH,XH,ZH,QH,$H,eU,tU=t((()=>{AH=`[object RegExp]`,jH=`[object String]`,MH=`[object Number]`,NH=`[object Boolean]`,PH=`[object Symbol]`,FH=`[object Date]`,IH=`[object Map]`,LH=`[object Set]`,RH=`[object Array]`,zH=`[object Function]`,BH=`[object ArrayBuffer]`,VH=`[object Object]`,HH=`[object Error]`,UH=`[object DataView]`,WH=`[object Uint8Array]`,GH=`[object Uint8ClampedArray]`,KH=`[object Uint16Array]`,qH=`[object Uint32Array]`,JH=`[object BigUint64Array]`,YH=`[object Int8Array]`,XH=`[object Int16Array]`,ZH=`[object Int32Array]`,QH=`[object BigInt64Array]`,$H=`[object Float32Array]`,eU=`[object Float64Array]`}));function nU(e,t){let n={},r=Object.keys(e);for(let i=0;i{tU()})),uU,dU,fU,pU,mU,hU,gU,_U,vU,yU,bU,xU=t((()=>{uU=Object.create,dU=Object.defineProperty,fU=Object.getOwnPropertyDescriptor,pU=Object.getOwnPropertyNames,mU=Object.getPrototypeOf,hU=Object.prototype.hasOwnProperty,gU=(t=>typeof e<`u`?e:typeof Proxy<`u`?new Proxy(t,{get:(t,n)=>(typeof e<`u`?e:t)[n]}):t)(function(t){if(typeof e<`u`)return e.apply(this,arguments);throw Error(`Dynamic require of "`+t+`" is not supported`)}),_U=(e,t)=>function(){return t||(0,e[pU(e)[0]])((t={exports:{}}).exports,t),t.exports},vU=(e,t)=>{for(var n in t)dU(e,n,{get:t[n],enumerable:!0})},yU=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(let i of pU(t))!hU.call(e,i)&&i!==n&&dU(e,i,{get:()=>t[i],enumerable:!(r=fU(t,i))||r.enumerable});return e},bU=(e,t,n)=>(n=e==null?{}:uU(mU(e)),yU(t||!e||!e.__esModule?dU(n,`default`,{value:e,enumerable:!0}):n,e))})),SU,CU,wU,TU,EU,DU,OU,kU,AU,jU,MU,NU,PU=t((()=>{tU(),xU(),SU=_U({"../../node_modules/jsdoc-type-pratt-parser/dist/index.js"(e,t){(function(n,r){typeof e==`object`&&typeof t<`u`?r(e):typeof define==`function`&&define.amd?define([`exports`],r):(n=typeof globalThis<`u`?globalThis:n||self,r(n.jtpp={}))})(e,(function(e){function t(e){return e.text!==void 0&&e.text!==``?`'${e.type}' with value '${e.text}'`:`'${e.type}'`}class n extends Error{constructor(e){super(`No parslet found for token: ${t(e)}`),this.token=e,Object.setPrototypeOf(this,n.prototype)}getToken(){return this.token}}class r extends Error{constructor(e){super(`The parsing ended early. The next token was: ${t(e)}`),this.token=e,Object.setPrototypeOf(this,r.prototype)}getToken(){return this.token}}class i extends Error{constructor(e,t){let n=`Unexpected type: '${e.type}'.`;t!==void 0&&(n+=` Message: ${t}`),super(n),Object.setPrototypeOf(this,i.prototype)}}function a(e){return t=>t.startsWith(e)?{type:e,text:e}:null}function o(e){let t=0,n,r=e[0],i=!1;if(r!==`'`&&r!==`"`)return null;for(;t{let t=l(e);return t==null?null:{type:`Identifier`,text:t}};function p(e){return t=>{if(!t.startsWith(e))return null;let n=t[e.length];return n!==void 0&&c.test(n)?null:{type:e,text:e}}}let m=[e=>e.length>0?null:{type:`EOF`,text:``},a(`=>`),a(`(`),a(`)`),a(`{`),a(`}`),a(`[`),a(`]`),a(`|`),a(`&`),a(`<`),a(`>`),a(`,`),a(`;`),a(`*`),a(`?`),a(`!`),a(`=`),a(`:`),a(`...`),a(`.`),a(`#`),a(`~`),a(`/`),a(`@`),p(`undefined`),p(`null`),p(`function`),p(`this`),p(`new`),p(`module`),p(`event`),p(`extends`),p(`external`),p(`infer`),p(`typeof`),p(`keyof`),p(`readonly`),p(`import`),p(`is`),p(`in`),p(`asserts`),e=>{let t=d(e);return t===null?null:{type:`Number`,text:t}},f,e=>{let t=o(e);return t==null?null:{type:`StringValue`,text:t}}],h=/^\s*\n\s*/;class g{static create(e){let t=this.read(e);e=t.text;let n=this.read(e);return e=n.text,new g(e,void 0,t.token,n.token)}constructor(e,t,n,r){this.text=``,this.text=e,this.previous=t,this.current=n,this.next=r}static read(e,t=!1){t||=h.test(e),e=e.trim();for(let n of m){let r=n(e);if(r!==null){let n=Object.assign(Object.assign({},r),{startOfLine:t});return e=e.slice(n.text.length),{text:e,token:n}}}throw Error(`Unexpected Token `+e)}advance(){let e=g.read(this.text);return new g(e.text,this.current,this.next,e.token)}}function _(e){if(e===void 0)throw Error(`Unexpected undefined`);if(e.type===`JsdocTypeKeyValue`||e.type===`JsdocTypeParameterList`||e.type===`JsdocTypeProperty`||e.type===`JsdocTypeReadonlyProperty`||e.type===`JsdocTypeObjectField`||e.type===`JsdocTypeJsdocObjectField`||e.type===`JsdocTypeIndexSignature`||e.type===`JsdocTypeMappedType`||e.type===`JsdocTypeTypeParameter`)throw new i(e);return e}function v(e){return e.type===`JsdocTypeKeyValue`?b(e):_(e)}function y(e){return e.type===`JsdocTypeName`?e:b(e)}function b(e){if(e.type!==`JsdocTypeKeyValue`)throw new i(e);return e}function x(e){if(e.type===`JsdocTypeVariadic`){if(e.element?.type===`JsdocTypeName`)return e;throw new i(e)}if(e.type!==`JsdocTypeNumber`&&e.type!==`JsdocTypeName`)throw new i(e);return e}function S(e){if(e.type===`JsdocTypeTuple`||e.type===`JsdocTypeGeneric`&&e.meta.brackets===`square`)return e;throw new i(e)}function C(e){return e.type===`JsdocTypeIndexSignature`||e.type===`JsdocTypeMappedType`}var w;(function(e){e[e.ALL=0]=`ALL`,e[e.PARAMETER_LIST=1]=`PARAMETER_LIST`,e[e.OBJECT=2]=`OBJECT`,e[e.KEY_VALUE=3]=`KEY_VALUE`,e[e.INDEX_BRACKETS=4]=`INDEX_BRACKETS`,e[e.UNION=5]=`UNION`,e[e.INTERSECTION=6]=`INTERSECTION`,e[e.PREFIX=7]=`PREFIX`,e[e.INFIX=8]=`INFIX`,e[e.TUPLE=9]=`TUPLE`,e[e.SYMBOL=10]=`SYMBOL`,e[e.OPTIONAL=11]=`OPTIONAL`,e[e.NULLABLE=12]=`NULLABLE`,e[e.KEY_OF_TYPE_OF=13]=`KEY_OF_TYPE_OF`,e[e.FUNCTION=14]=`FUNCTION`,e[e.ARROW=15]=`ARROW`,e[e.ARRAY_BRACKETS=16]=`ARRAY_BRACKETS`,e[e.GENERIC=17]=`GENERIC`,e[e.NAME_PATH=18]=`NAME_PATH`,e[e.PARENTHESIS=19]=`PARENTHESIS`,e[e.SPECIAL_TYPES=20]=`SPECIAL_TYPES`})(w||={});class T{constructor(e,t,n){this.grammar=e,typeof t==`string`?this._lexer=g.create(t):this._lexer=t,this.baseParser=n}get lexer(){return this._lexer}parse(){let e=this.parseType(w.ALL);if(this.lexer.current.type!==`EOF`)throw new r(this.lexer.current);return e}parseType(e){return _(this.parseIntermediateType(e))}parseIntermediateType(e){let t=this.tryParslets(null,e);if(t===null)throw new n(this.lexer.current);return this.parseInfixIntermediateType(t,e)}parseInfixIntermediateType(e,t){let n=this.tryParslets(e,t);for(;n!==null;)e=n,n=this.tryParslets(e,t);return e}tryParslets(e,t){for(let n of this.grammar){let r=n(this,t,e);if(r!==null)return r}return null}consume(e){return Array.isArray(e)||(e=[e]),e.includes(this.lexer.current.type)?(this._lexer=this.lexer.advance(),!0):!1}acceptLexerState(e){this._lexer=e.lexer}}function E(e){return e===`}`||e===`EOF`||e===`|`||e===`,`||e===`)`||e===`>`}let D=(e,t,n)=>{let r=e.lexer.current.type,i=e.lexer.next.type;return n==null&&r===`?`&&!E(i)||n!=null&&r===`?`?(e.consume(`?`),n==null?{type:`JsdocTypeNullable`,element:e.parseType(w.NULLABLE),meta:{position:`prefix`}}:{type:`JsdocTypeNullable`,element:_(n),meta:{position:`suffix`}}):null};function O(e){let t=(t,n,r)=>{let i=t.lexer.current.type,a=t.lexer.next.type;if(r===null){if(`parsePrefix`in e&&e.accept(i,a))return e.parsePrefix(t)}else if(`parseInfix`in e&&e.precedence>n&&e.accept(i,a))return e.parseInfix(t,r);return null};return Object.defineProperty(t,`name`,{value:e.name}),t}let k=O({name:`optionalParslet`,accept:e=>e===`=`,precedence:w.OPTIONAL,parsePrefix:e=>(e.consume(`=`),{type:`JsdocTypeOptional`,element:e.parseType(w.OPTIONAL),meta:{position:`prefix`}}),parseInfix:(e,t)=>(e.consume(`=`),{type:`JsdocTypeOptional`,element:_(t),meta:{position:`suffix`}})}),A=O({name:`numberParslet`,accept:e=>e===`Number`,parsePrefix:e=>{let t=parseFloat(e.lexer.current.text);return e.consume(`Number`),{type:`JsdocTypeNumber`,value:t}}}),j=O({name:`parenthesisParslet`,accept:e=>e===`(`,parsePrefix:e=>{if(e.consume(`(`),e.consume(`)`))return{type:`JsdocTypeParameterList`,elements:[]};let t=e.parseIntermediateType(w.ALL);if(!e.consume(`)`))throw Error(`Unterminated parenthesis`);return t.type===`JsdocTypeParameterList`?t:t.type===`JsdocTypeKeyValue`?{type:`JsdocTypeParameterList`,elements:[t]}:{type:`JsdocTypeParenthesis`,element:_(t)}}}),M=O({name:`specialTypesParslet`,accept:(e,t)=>e===`?`&&E(t)||e===`null`||e===`undefined`||e===`*`,parsePrefix:e=>{if(e.consume(`null`))return{type:`JsdocTypeNull`};if(e.consume(`undefined`))return{type:`JsdocTypeUndefined`};if(e.consume(`*`))return{type:`JsdocTypeAny`};if(e.consume(`?`))return{type:`JsdocTypeUnknown`};throw Error(`Unacceptable token: `+e.lexer.current.text)}}),ee=O({name:`notNullableParslet`,accept:e=>e===`!`,precedence:w.NULLABLE,parsePrefix:e=>(e.consume(`!`),{type:`JsdocTypeNotNullable`,element:e.parseType(w.NULLABLE),meta:{position:`prefix`}}),parseInfix:(e,t)=>(e.consume(`!`),{type:`JsdocTypeNotNullable`,element:_(t),meta:{position:`suffix`}})});function N({allowTrailingComma:e}){return O({name:`parameterListParslet`,accept:e=>e===`,`,precedence:w.PARAMETER_LIST,parseInfix:(e,t)=>{let r=[v(t)];e.consume(`,`);do try{let t=e.parseIntermediateType(w.PARAMETER_LIST);r.push(v(t))}catch(e){if(e instanceof n)break;throw e}while(e.consume(`,`));if(r.length>0&&r.slice(0,-1).some(e=>e.type===`JsdocTypeVariadic`))throw Error(`Only the last parameter may be a rest parameter`);return{type:`JsdocTypeParameterList`,elements:r}}})}let te=O({name:`genericParslet`,accept:(e,t)=>e===`<`||e===`.`&&t===`<`,precedence:w.GENERIC,parseInfix:(e,t)=>{let n=e.consume(`.`);e.consume(`<`);let r=[],a=!1;if(e.consume(`infer`)){a=!0;let t=e.parseIntermediateType(w.SYMBOL);if(t.type!==`JsdocTypeName`)throw new i(t,`A typescript asserts always has to have a name on the left side.`);r.push(t)}else do r.push(e.parseType(w.PARAMETER_LIST));while(e.consume(`,`));if(!e.consume(`>`))throw Error(`Unterminated generic parameter list`);return Object.assign(Object.assign({type:`JsdocTypeGeneric`,left:_(t),elements:r},a?{infer:!0}:{}),{meta:{brackets:`angle`,dot:n}})}}),ne=O({name:`unionParslet`,accept:e=>e===`|`,precedence:w.UNION,parseInfix:(e,t)=>{e.consume(`|`);let n=[];do n.push(e.parseType(w.UNION));while(e.consume(`|`));return{type:`JsdocTypeUnion`,elements:[_(t),...n]}}}),re=[D,k,A,j,M,ee,N({allowTrailingComma:!0}),te,ne,k];function ie({allowSquareBracketsOnAnyType:e,allowJsdocNamePaths:t,pathGrammar:n}){return function(r,a,o){if(o==null||a>=w.NAME_PATH)return null;let s=r.lexer.current.type,c=r.lexer.next.type;if(!(s===`.`&&c!==`<`||s===`[`&&(e||o.type===`JsdocTypeName`)||t&&(s===`~`||s===`#`)))return null;let l,u=!1;r.consume(`.`)?l=`property`:r.consume(`[`)?(l=`property-brackets`,u=!0):r.consume(`~`)?l=`inner`:(r.consume(`#`),l=`instance`);let d=n===null?r:new T(n,r.lexer,r),f=d.parseIntermediateType(w.NAME_PATH);r.acceptLexerState(d);let p;switch(f.type){case`JsdocTypeName`:p={type:`JsdocTypeProperty`,value:f.value,meta:{quote:void 0}};break;case`JsdocTypeNumber`:p={type:`JsdocTypeProperty`,value:f.value.toString(10),meta:{quote:void 0}};break;case`JsdocTypeStringValue`:p={type:`JsdocTypeProperty`,value:f.value,meta:{quote:f.meta.quote}};break;case`JsdocTypeSpecialNamePath`:if(f.specialType===`event`)p=f;else throw new i(f,`Type 'JsdocTypeSpecialNamePath' is only allowed with specialType 'event'`);break;default:throw new i(f,`Expecting 'JsdocTypeName', 'JsdocTypeNumber', 'JsdocStringValue' or 'JsdocTypeSpecialNamePath'`)}if(u&&!r.consume(`]`)){let e=r.lexer.current;throw Error(`Unterminated square brackets. Next token is '${e.type}' with text '${e.text}'`)}return{type:`JsdocTypeNamePath`,left:_(o),right:p,pathType:l}}}function ae({allowedAdditionalTokens:e}){return O({name:`nameParslet`,accept:t=>t===`Identifier`||t===`this`||t===`new`||e.includes(t),parsePrefix:e=>{let{type:t,text:n}=e.lexer.current;return e.consume(t),{type:`JsdocTypeName`,value:n}}})}let oe=O({name:`stringValueParslet`,accept:e=>e===`StringValue`,parsePrefix:e=>{let t=e.lexer.current.text;return e.consume(`StringValue`),{type:`JsdocTypeStringValue`,value:t.slice(1,-1),meta:{quote:t[0]===`'`?`single`:`double`}}}});function se({pathGrammar:e,allowedTypes:t}){return O({name:`specialNamePathParslet`,accept:e=>t.includes(e),parsePrefix:t=>{let n=t.lexer.current.type;if(t.consume(n),!t.consume(`:`))return{type:`JsdocTypeName`,value:n};let r,i=t.lexer.current;if(t.consume(`StringValue`))r={type:`JsdocTypeSpecialNamePath`,value:i.text.slice(1,-1),specialType:n,meta:{quote:i.text[0]===`'`?`single`:`double`}};else{let e=``,a=[`Identifier`,`@`,`/`];for(;a.some(e=>t.consume(e));)e+=i.text,i=t.lexer.current;r={type:`JsdocTypeSpecialNamePath`,value:e,specialType:n,meta:{quote:void 0}}}let a=new T(e,t.lexer,t),o=a.parseInfixIntermediateType(r,w.ALL);return t.acceptLexerState(a),_(o)}})}let P=[ae({allowedAdditionalTokens:[`external`,`module`]}),oe,A,ie({allowSquareBracketsOnAnyType:!1,allowJsdocNamePaths:!0,pathGrammar:null})],ce=[...P,se({allowedTypes:[`event`],pathGrammar:P})];function le(e){let t;if(e.type===`JsdocTypeParameterList`)t=e.elements;else if(e.type===`JsdocTypeParenthesis`)t=[e.element];else throw new i(e);return t.map(e=>v(e))}function ue(e){let t=le(e);if(t.some(e=>e.type===`JsdocTypeKeyValue`))throw Error(`No parameter should be named`);return t}function de({allowNamedParameters:e,allowNoReturnType:t,allowWithoutParenthesis:n,allowNewAsFunctionKeyword:r}){return O({name:`functionParslet`,accept:(e,t)=>e===`function`||r&&e===`new`&&t===`(`,parsePrefix:r=>{let i=r.consume(`new`);r.consume(`function`);let a=r.lexer.current.type===`(`;if(!a){if(!n)throw Error(`function is missing parameter list`);return{type:`JsdocTypeName`,value:`function`}}let o={type:`JsdocTypeFunction`,parameters:[],arrow:!1,constructor:i,parenthesis:a},s=r.parseIntermediateType(w.FUNCTION);if(e===void 0)o.parameters=ue(s);else{if(i&&s.type===`JsdocTypeFunction`&&s.arrow)return o=s,o.constructor=!0,o;o.parameters=le(s);for(let t of o.parameters)if(t.type===`JsdocTypeKeyValue`&&!e.includes(t.key))throw Error(`only allowed named parameters are ${e.join(`, `)} but got ${t.type}`)}if(r.consume(`:`))o.returnType=r.parseType(w.PREFIX);else if(!t)throw Error(`function is missing return type`);return o}})}function fe({allowPostfix:e,allowEnclosingBrackets:t}){return O({name:`variadicParslet`,accept:e=>e===`...`,precedence:w.PREFIX,parsePrefix:e=>{e.consume(`...`);let r=t&&e.consume(`[`);try{let t=e.parseType(w.PREFIX);if(r&&!e.consume(`]`))throw Error(`Unterminated variadic type. Missing ']'`);return{type:`JsdocTypeVariadic`,element:_(t),meta:{position:`prefix`,squareBrackets:r}}}catch(e){if(e instanceof n){if(r)throw Error(`Empty square brackets for variadic are not allowed.`);return{type:`JsdocTypeVariadic`,meta:{position:void 0,squareBrackets:!1}}}else throw e}},parseInfix:e?(e,t)=>(e.consume(`...`),{type:`JsdocTypeVariadic`,element:_(t),meta:{position:`suffix`,squareBrackets:!1}}):void 0})}let pe=O({name:`symbolParslet`,accept:e=>e===`(`,precedence:w.SYMBOL,parseInfix:(e,t)=>{if(t.type!==`JsdocTypeName`)throw Error(`Symbol expects a name on the left side. (Reacting on '(')`);e.consume(`(`);let n={type:`JsdocTypeSymbol`,value:t.value};if(!e.consume(`)`)&&(n.element=x(e.parseIntermediateType(w.SYMBOL)),!e.consume(`)`)))throw Error(`Symbol does not end after value`);return n}}),me=O({name:`arrayBracketsParslet`,precedence:w.ARRAY_BRACKETS,accept:(e,t)=>e===`[`&&t===`]`,parseInfix:(e,t)=>(e.consume(`[`),e.consume(`]`),{type:`JsdocTypeGeneric`,left:{type:`JsdocTypeName`,value:`Array`},elements:[_(t)],meta:{brackets:`square`,dot:!1}})});function he({objectFieldGrammar:e,allowKeyTypes:t}){return O({name:`objectParslet`,accept:e=>e===`{`,parsePrefix:n=>{n.consume(`{`);let r={type:`JsdocTypeObject`,meta:{separator:`comma`},elements:[]};if(!n.consume(`}`)){let a,o=new T(e,n.lexer,n);for(;;){o.acceptLexerState(n);let e=o.parseIntermediateType(w.OBJECT);n.acceptLexerState(o),e===void 0&&t&&(e=n.parseIntermediateType(w.OBJECT));let s=!1;if(e.type===`JsdocTypeNullable`&&(s=!0,e=e.element),e.type===`JsdocTypeNumber`||e.type===`JsdocTypeName`||e.type===`JsdocTypeStringValue`){let t;e.type===`JsdocTypeStringValue`&&(t=e.meta.quote),r.elements.push({type:`JsdocTypeObjectField`,key:e.value.toString(),right:void 0,optional:s,readonly:!1,meta:{quote:t}})}else if(e.type===`JsdocTypeObjectField`||e.type===`JsdocTypeJsdocObjectField`)r.elements.push(e);else throw new i(e);if(n.lexer.current.startOfLine)a=`linebreak`,n.consume(`,`)||n.consume(`;`);else if(n.consume(`,`))a=`comma`;else if(n.consume(`;`))a=`semicolon`;else break;if(n.lexer.current.type===`}`)break}if(r.meta.separator=a??`comma`,a===`linebreak`&&(r.meta.propertyIndent=` `),!n.consume(`}`))throw Error(`Unterminated record type. Missing '}'`)}return r}})}function ge({allowSquaredProperties:e,allowKeyTypes:t,allowReadonly:n,allowOptional:r}){return O({name:`objectFieldParslet`,precedence:w.KEY_VALUE,accept:e=>e===`:`,parseInfix:(a,o)=>{let s=!1,c=!1;r&&o.type===`JsdocTypeNullable`&&(s=!0,o=o.element),n&&o.type===`JsdocTypeReadonlyProperty`&&(c=!0,o=o.element);let l=a.baseParser??a;if(l.acceptLexerState(a),o.type===`JsdocTypeNumber`||o.type===`JsdocTypeName`||o.type===`JsdocTypeStringValue`||C(o)){if(C(o)&&!e)throw new i(o);l.consume(`:`);let t;o.type===`JsdocTypeStringValue`&&(t=o.meta.quote);let n=l.parseType(w.KEY_VALUE);return a.acceptLexerState(l),{type:`JsdocTypeObjectField`,key:C(o)?o:o.value.toString(),right:n,optional:s,readonly:c,meta:{quote:t}}}else{if(!t)throw new i(o);l.consume(`:`);let e=l.parseType(w.KEY_VALUE);return a.acceptLexerState(l),{type:`JsdocTypeJsdocObjectField`,left:_(o),right:e}}}})}function _e({allowOptional:e,allowVariadic:t}){return O({name:`keyValueParslet`,precedence:w.KEY_VALUE,accept:e=>e===`:`,parseInfix:(n,r)=>{let a=!1,o=!1;if(e&&r.type===`JsdocTypeNullable`&&(a=!0,r=r.element),t&&r.type===`JsdocTypeVariadic`&&r.element!==void 0&&(o=!0,r=r.element),r.type!==`JsdocTypeName`)throw new i(r);n.consume(`:`);let s=n.parseType(w.KEY_VALUE);return{type:`JsdocTypeKeyValue`,key:r.value,right:s,optional:a,variadic:o}}})}let ve=[...re,de({allowWithoutParenthesis:!0,allowNamedParameters:[`this`,`new`],allowNoReturnType:!0,allowNewAsFunctionKeyword:!1}),oe,se({allowedTypes:[`module`,`external`,`event`],pathGrammar:ce}),fe({allowEnclosingBrackets:!0,allowPostfix:!0}),ae({allowedAdditionalTokens:[`keyof`]}),pe,me,ie({allowSquareBracketsOnAnyType:!1,allowJsdocNamePaths:!0,pathGrammar:ce})],ye=[...ve,he({objectFieldGrammar:[ae({allowedAdditionalTokens:[`typeof`,`module`,`in`]}),ge({allowSquaredProperties:!1,allowKeyTypes:!0,allowOptional:!1,allowReadonly:!1}),...ve],allowKeyTypes:!0}),_e({allowOptional:!0,allowVariadic:!0})],be=O({name:`typeOfParslet`,accept:e=>e===`typeof`,parsePrefix:e=>(e.consume(`typeof`),{type:`JsdocTypeTypeof`,element:e.parseType(w.KEY_OF_TYPE_OF)})}),xe=[ae({allowedAdditionalTokens:[`typeof`,`module`,`keyof`,`event`,`external`,`in`]}),D,k,oe,A,ge({allowSquaredProperties:!1,allowKeyTypes:!1,allowOptional:!1,allowReadonly:!1})],Se=[...re,he({allowKeyTypes:!1,objectFieldGrammar:xe}),ae({allowedAdditionalTokens:[`event`,`external`,`in`]}),be,de({allowWithoutParenthesis:!1,allowNamedParameters:[`this`,`new`],allowNoReturnType:!0,allowNewAsFunctionKeyword:!1}),fe({allowEnclosingBrackets:!1,allowPostfix:!1}),ae({allowedAdditionalTokens:[`keyof`]}),se({allowedTypes:[`module`],pathGrammar:ce}),ie({allowSquareBracketsOnAnyType:!1,allowJsdocNamePaths:!0,pathGrammar:ce}),_e({allowOptional:!1,allowVariadic:!1}),pe],Ce=O({name:`assertsParslet`,accept:e=>e===`asserts`,parsePrefix:e=>{e.consume(`asserts`);let t=e.parseIntermediateType(w.SYMBOL);if(t.type!==`JsdocTypeName`)throw new i(t,`A typescript asserts always has to have a name on the left side.`);return e.consume(`is`)?{type:`JsdocTypeAsserts`,left:t,right:_(e.parseIntermediateType(w.INFIX))}:{type:`JsdocTypeAssertsPlain`,element:t}}});function we({allowQuestionMark:e}){return O({name:`tupleParslet`,accept:e=>e===`[`,parsePrefix:e=>{e.consume(`[`);let t={type:`JsdocTypeTuple`,elements:[]};if(e.consume(`]`))return t;let n=e.parseIntermediateType(w.ALL);if(n.type===`JsdocTypeParameterList`?n.elements[0].type===`JsdocTypeKeyValue`?t.elements=n.elements.map(b):t.elements=n.elements.map(_):n.type===`JsdocTypeKeyValue`?t.elements=[b(n)]:t.elements=[_(n)],!e.consume(`]`))throw Error(`Unterminated '['`);if(t.elements.some(e=>e.type===`JsdocTypeUnknown`))throw Error(`Question mark in tuple not allowed`);return t}})}let Te=O({name:`keyOfParslet`,accept:e=>e===`keyof`,parsePrefix:e=>(e.consume(`keyof`),{type:`JsdocTypeKeyof`,element:_(e.parseType(w.KEY_OF_TYPE_OF))})}),Ee=O({name:`importParslet`,accept:e=>e===`import`,parsePrefix:e=>{if(e.consume(`import`),!e.consume(`(`))throw Error(`Missing parenthesis after import keyword`);let t=e.parseType(w.PREFIX);if(t.type!==`JsdocTypeStringValue`)throw Error(`Only string values are allowed as paths for imports`);if(!e.consume(`)`))throw Error(`Missing closing parenthesis after import keyword`);return{type:`JsdocTypeImport`,element:t}}}),De=O({name:`readonlyPropertyParslet`,accept:e=>e===`readonly`,parsePrefix:e=>(e.consume(`readonly`),{type:`JsdocTypeReadonlyProperty`,element:e.parseIntermediateType(w.KEY_VALUE)})}),Oe=O({name:`arrowFunctionParslet`,precedence:w.ARROW,accept:e=>e===`=>`,parseInfix:(e,t)=>(e.consume(`=>`),{type:`JsdocTypeFunction`,parameters:le(t).map(y),arrow:!0,constructor:!1,parenthesis:!0,returnType:e.parseType(w.OBJECT)})}),ke=O({name:`genericArrowFunctionParslet`,accept:e=>e===`<`,parsePrefix:e=>{let t=[];e.consume(`<`);do{let n,r=e.parseIntermediateType(w.SYMBOL);if(r.type===`JsdocTypeOptional`&&(r=r.element,n=e.parseType(w.SYMBOL)),r.type!==`JsdocTypeName`)throw new i(r);let a;e.consume(`extends`)&&(a=e.parseType(w.SYMBOL),a.type===`JsdocTypeOptional`&&(a=a.element,n=e.parseType(w.SYMBOL)));let o={type:`JsdocTypeTypeParameter`,name:r};if(a!==void 0&&(o.constraint=a),n!==void 0&&(o.defaultValue=n),t.push(o),e.consume(`>`))break}while(e.consume(`,`));let n=e.parseIntermediateType(w.SYMBOL);return n.typeParameters=t,n}}),Ae=O({name:`intersectionParslet`,accept:e=>e===`&`,precedence:w.INTERSECTION,parseInfix:(e,t)=>{e.consume(`&`);let n=[];do n.push(e.parseType(w.INTERSECTION));while(e.consume(`&`));return{type:`JsdocTypeIntersection`,elements:[_(t),...n]}}}),je=O({name:`predicateParslet`,precedence:w.INFIX,accept:e=>e===`is`,parseInfix:(e,t)=>{if(t.type!==`JsdocTypeName`)throw new i(t,`A typescript predicate always has to have a name on the left side.`);return e.consume(`is`),{type:`JsdocTypePredicate`,left:t,right:_(e.parseIntermediateType(w.INFIX))}}}),Me=O({name:`objectSquareBracketPropertyParslet`,accept:e=>e===`[`,parsePrefix:e=>{if(e.baseParser===void 0)throw Error(`Only allowed inside object grammar`);e.consume(`[`);let t=e.lexer.current.text;e.consume(`Identifier`);let n;if(e.consume(`:`)){let r=e.baseParser;r.acceptLexerState(e),n={type:`JsdocTypeIndexSignature`,key:t,right:r.parseType(w.INDEX_BRACKETS)},e.acceptLexerState(r)}else if(e.consume(`in`)){let r=e.baseParser;r.acceptLexerState(e),n={type:`JsdocTypeMappedType`,key:t,right:r.parseType(w.ARRAY_BRACKETS)},e.acceptLexerState(r)}else throw Error(`Missing ':' or 'in' inside square bracketed property.`);if(!e.consume(`]`))throw Error(`Unterminated square brackets`);return n}}),Ne=O({name:`readonlyArrayParslet`,accept:e=>e===`readonly`,parsePrefix:e=>(e.consume(`readonly`),{type:`JsdocTypeReadonlyArray`,element:S(e.parseIntermediateType(w.ALL))})}),Pe=O({name:`conditionalParslet`,precedence:w.INFIX,accept:e=>e===`extends`,parseInfix:(e,t)=>{e.consume(`extends`);let n=e.parseType(w.KEY_OF_TYPE_OF).element,r=e.parseType(w.INFIX);return e.consume(`:`),{type:`JsdocTypeConditional`,checksType:_(t),extendsType:n,trueType:r,falseType:e.parseType(w.INFIX)}}}),Fe=[De,ae({allowedAdditionalTokens:[`typeof`,`module`,`keyof`,`event`,`external`,`in`]}),D,k,oe,A,ge({allowSquaredProperties:!0,allowKeyTypes:!1,allowOptional:!0,allowReadonly:!0}),Me],Ie=[...re,he({allowKeyTypes:!1,objectFieldGrammar:Fe}),Ne,be,Te,Ee,oe,de({allowWithoutParenthesis:!0,allowNoReturnType:!1,allowNamedParameters:[`this`,`new`,`args`],allowNewAsFunctionKeyword:!0}),we({allowQuestionMark:!1}),fe({allowEnclosingBrackets:!1,allowPostfix:!1}),Ce,Pe,ae({allowedAdditionalTokens:[`event`,`external`,`in`]}),se({allowedTypes:[`module`],pathGrammar:ce}),me,Oe,ke,ie({allowSquareBracketsOnAnyType:!0,allowJsdocNamePaths:!1,pathGrammar:ce}),Ae,je,_e({allowVariadic:!0,allowOptional:!0})];function Le(e,t){switch(t){case`closure`:return new T(Se,e).parse();case`jsdoc`:return new T(ye,e).parse();case`typescript`:return new T(Ie,e).parse()}}function Re(e,t=[`typescript`,`closure`,`jsdoc`]){let n;for(let r of t)try{return Le(e,r)}catch(e){n=e}throw n}function ze(e,t){let n=e[t.type];if(n===void 0)throw Error(`In this set of transform rules exists no rule for type ${t.type}.`);return n(t,t=>ze(e,t))}function F(e){throw Error(`This transform is not available. Are you trying the correct parsing mode?`)}function Be(e){let t={params:[]};for(let n of e.parameters)n.type===`JsdocTypeKeyValue`?n.key===`this`?t.this=n.right:n.key===`new`?t.new=n.right:t.params.push(n):t.params.push(n);return t}function Ve(e,t,n){return e===`prefix`?n+t:t+n}function He(e,t){switch(t){case`double`:return`"${e}"`;case`single`:return`'${e}'`;case void 0:return e}}function Ue(){return{JsdocTypeParenthesis:(e,t)=>`(${e.element===void 0?``:t(e.element)})`,JsdocTypeKeyof:(e,t)=>`keyof ${t(e.element)}`,JsdocTypeFunction:(e,t)=>{if(e.arrow){if(e.returnType===void 0)throw Error(`Arrow function needs a return type.`);let n=`${e.typeParameters===void 0?``:`<${e.typeParameters.map(t).join(`, `)??``}>`}(${e.parameters.map(t).join(`, `)}) => ${t(e.returnType)}`;return e.constructor&&(n=`new `+n),n}else{let n=e.constructor?`new`:`function`;return e.parenthesis&&(n+=`(${e.parameters.map(t).join(`, `)})`,e.returnType!==void 0&&(n+=`: ${t(e.returnType)}`)),n}},JsdocTypeName:e=>e.value,JsdocTypeTuple:(e,t)=>`[${e.elements.map(t).join(`, `)}]`,JsdocTypeVariadic:(e,t)=>e.meta.position===void 0?`...`:Ve(e.meta.position,t(e.element),`...`),JsdocTypeNamePath:(e,t)=>{let n=t(e.left),r=t(e.right);switch(e.pathType){case`inner`:return`${n}~${r}`;case`instance`:return`${n}#${r}`;case`property`:return`${n}.${r}`;case`property-brackets`:return`${n}[${r}]`}},JsdocTypeStringValue:e=>He(e.value,e.meta.quote),JsdocTypeAny:()=>`*`,JsdocTypeGeneric:(e,t)=>{if(e.meta.brackets===`square`){let n=e.elements[0],r=t(n);return n.type===`JsdocTypeUnion`||n.type===`JsdocTypeIntersection`?`(${r})[]`:`${r}[]`}else return`${t(e.left)}${e.meta.dot?`.`:``}<${e.infer===!0?`infer `:``}${e.elements.map(t).join(`, `)}>`},JsdocTypeImport:(e,t)=>`import(${t(e.element)})`,JsdocTypeObjectField:(e,t)=>{let n=``;return e.readonly&&(n+=`readonly `),typeof e.key==`string`?n+=He(e.key,e.meta.quote):n+=t(e.key),e.optional&&(n+=`?`),e.right===void 0?n:n+`: ${t(e.right)}`},JsdocTypeJsdocObjectField:(e,t)=>`${t(e.left)}: ${t(e.right)}`,JsdocTypeKeyValue:(e,t)=>{let n=e.key;return e.optional&&(n+=`?`),e.variadic&&(n=`...`+n),e.right===void 0?n:n+`: ${t(e.right)}`},JsdocTypeSpecialNamePath:e=>`${e.specialType}:${He(e.value,e.meta.quote)}`,JsdocTypeNotNullable:(e,t)=>Ve(e.meta.position,t(e.element),`!`),JsdocTypeNull:()=>`null`,JsdocTypeNullable:(e,t)=>Ve(e.meta.position,t(e.element),`?`),JsdocTypeNumber:e=>e.value.toString(),JsdocTypeObject:(e,t)=>`{${(e.meta.separator===`linebreak`&&e.elements.length>1?` `+(e.meta.propertyIndent??``):``)+e.elements.map(t).join(e.meta.separator===`comma`?`, `:e.meta.separator===`linebreak`?` `+(e.meta.propertyIndent??``):`; `)+(e.meta.separator===`linebreak`&&e.elements.length>1?` `:``)}}`,JsdocTypeOptional:(e,t)=>Ve(e.meta.position,t(e.element),`=`),JsdocTypeSymbol:(e,t)=>`${e.value}(${e.element===void 0?``:t(e.element)})`,JsdocTypeTypeof:(e,t)=>`typeof ${t(e.element)}`,JsdocTypeUndefined:()=>`undefined`,JsdocTypeUnion:(e,t)=>e.elements.map(t).join(` | `),JsdocTypeUnknown:()=>`?`,JsdocTypeIntersection:(e,t)=>e.elements.map(t).join(` & `),JsdocTypeProperty:e=>He(e.value,e.meta.quote),JsdocTypePredicate:(e,t)=>`${t(e.left)} is ${t(e.right)}`,JsdocTypeIndexSignature:(e,t)=>`[${e.key}: ${t(e.right)}]`,JsdocTypeMappedType:(e,t)=>`[${e.key} in ${t(e.right)}]`,JsdocTypeAsserts:(e,t)=>`asserts ${t(e.left)} is ${t(e.right)}`,JsdocTypeReadonlyArray:(e,t)=>`readonly ${t(e.element)}`,JsdocTypeAssertsPlain:(e,t)=>`asserts ${t(e.element)}`,JsdocTypeConditional:(e,t)=>`${t(e.checksType)} extends ${t(e.extendsType)} ? ${t(e.trueType)} : ${t(e.falseType)}`,JsdocTypeTypeParameter:(e,t)=>`${t(e.name)}${e.constraint===void 0?``:` extends ${t(e.constraint)}`}${e.defaultValue===void 0?``:` = ${t(e.defaultValue)}`}`}}let We=Ue();function Ge(e){return ze(We,e)}let Ke=`null.true.false.break.case.catch.class.const.continue.debugger.default.delete.do.else.export.extends.finally.for.function.if.import.in.instanceof.new.return.super.switch.this.throw.try.typeof.var.void.while.with.yield`.split(`.`);function qe(e){let t={type:`NameExpression`,name:e};return Ke.includes(e)&&(t.reservedWord=!0),t}let I={JsdocTypeOptional:(e,t)=>{let n=t(e.element);return n.optional=!0,n},JsdocTypeNullable:(e,t)=>{let n=t(e.element);return n.nullable=!0,n},JsdocTypeNotNullable:(e,t)=>{let n=t(e.element);return n.nullable=!1,n},JsdocTypeVariadic:(e,t)=>{if(e.element===void 0)throw Error(`dots without value are not allowed in catharsis mode`);let n=t(e.element);return n.repeatable=!0,n},JsdocTypeAny:()=>({type:`AllLiteral`}),JsdocTypeNull:()=>({type:`NullLiteral`}),JsdocTypeStringValue:e=>qe(He(e.value,e.meta.quote)),JsdocTypeUndefined:()=>({type:`UndefinedLiteral`}),JsdocTypeUnknown:()=>({type:`UnknownLiteral`}),JsdocTypeFunction:(e,t)=>{let n=Be(e),r={type:`FunctionType`,params:n.params.map(t)};return n.this!==void 0&&(r.this=t(n.this)),n.new!==void 0&&(r.new=t(n.new)),e.returnType!==void 0&&(r.result=t(e.returnType)),r},JsdocTypeGeneric:(e,t)=>({type:`TypeApplication`,applications:e.elements.map(e=>t(e)),expression:t(e.left)}),JsdocTypeSpecialNamePath:e=>qe(e.specialType+`:`+He(e.value,e.meta.quote)),JsdocTypeName:e=>e.value===`function`?{type:`FunctionType`,params:[]}:qe(e.value),JsdocTypeNumber:e=>qe(e.value.toString()),JsdocTypeObject:(e,t)=>{let n={type:`RecordType`,fields:[]};for(let r of e.elements)r.type!==`JsdocTypeObjectField`&&r.type!==`JsdocTypeJsdocObjectField`?n.fields.push({type:`FieldType`,key:t(r),value:void 0}):n.fields.push(t(r));return n},JsdocTypeObjectField:(e,t)=>{if(typeof e.key!=`string`)throw Error(`Index signatures and mapped types are not supported`);return{type:`FieldType`,key:qe(He(e.key,e.meta.quote)),value:e.right===void 0?void 0:t(e.right)}},JsdocTypeJsdocObjectField:(e,t)=>({type:`FieldType`,key:t(e.left),value:t(e.right)}),JsdocTypeUnion:(e,t)=>({type:`TypeUnion`,elements:e.elements.map(e=>t(e))}),JsdocTypeKeyValue:(e,t)=>({type:`FieldType`,key:qe(e.key),value:e.right===void 0?void 0:t(e.right)}),JsdocTypeNamePath:(e,t)=>{let n=t(e.left),r;r=e.right.type===`JsdocTypeSpecialNamePath`?t(e.right).name:He(e.right.value,e.right.meta.quote);let i=e.pathType===`inner`?`~`:e.pathType===`instance`?`#`:`.`;return qe(`${n.name}${i}${r}`)},JsdocTypeSymbol:e=>{let t=``,n=e.element,r=!1;return n?.type===`JsdocTypeVariadic`&&(n.meta.position===`prefix`?t=`...`:r=!0,n=n.element),n?.type===`JsdocTypeName`?t+=n.value:n?.type===`JsdocTypeNumber`&&(t+=n.value.toString()),r&&(t+=`...`),qe(`${e.value}(${t})`)},JsdocTypeParenthesis:(e,t)=>t(_(e.element)),JsdocTypeMappedType:F,JsdocTypeIndexSignature:F,JsdocTypeImport:F,JsdocTypeKeyof:F,JsdocTypeTuple:F,JsdocTypeTypeof:F,JsdocTypeIntersection:F,JsdocTypeProperty:F,JsdocTypePredicate:F,JsdocTypeAsserts:F,JsdocTypeReadonlyArray:F,JsdocTypeAssertsPlain:F,JsdocTypeConditional:F,JsdocTypeTypeParameter:F};function Je(e){return ze(I,e)}function Ye(e){switch(e){case void 0:return`none`;case`single`:return`single`;case`double`:return`double`}}function Xe(e){switch(e){case`inner`:return`INNER_MEMBER`;case`instance`:return`INSTANCE_MEMBER`;case`property`:return`MEMBER`;case`property-brackets`:return`MEMBER`}}function Ze(e,t){return t.length===2?{type:e,left:t[0],right:t[1]}:{type:e,left:t[0],right:Ze(e,t.slice(1))}}let Qe={JsdocTypeOptional:(e,t)=>({type:`OPTIONAL`,value:t(e.element),meta:{syntax:e.meta.position===`prefix`?`PREFIX_EQUAL_SIGN`:`SUFFIX_EQUALS_SIGN`}}),JsdocTypeNullable:(e,t)=>({type:`NULLABLE`,value:t(e.element),meta:{syntax:e.meta.position===`prefix`?`PREFIX_QUESTION_MARK`:`SUFFIX_QUESTION_MARK`}}),JsdocTypeNotNullable:(e,t)=>({type:`NOT_NULLABLE`,value:t(e.element),meta:{syntax:e.meta.position===`prefix`?`PREFIX_BANG`:`SUFFIX_BANG`}}),JsdocTypeVariadic:(e,t)=>{let n={type:`VARIADIC`,meta:{syntax:e.meta.position===`prefix`?`PREFIX_DOTS`:e.meta.position===`suffix`?`SUFFIX_DOTS`:`ONLY_DOTS`}};return e.element!==void 0&&(n.value=t(e.element)),n},JsdocTypeName:e=>({type:`NAME`,name:e.value}),JsdocTypeTypeof:(e,t)=>({type:`TYPE_QUERY`,name:t(e.element)}),JsdocTypeTuple:(e,t)=>({type:`TUPLE`,entries:e.elements.map(t)}),JsdocTypeKeyof:(e,t)=>({type:`KEY_QUERY`,value:t(e.element)}),JsdocTypeImport:e=>({type:`IMPORT`,path:{type:`STRING_VALUE`,quoteStyle:Ye(e.element.meta.quote),string:e.element.value}}),JsdocTypeUndefined:()=>({type:`NAME`,name:`undefined`}),JsdocTypeAny:()=>({type:`ANY`}),JsdocTypeFunction:(e,t)=>{let n=Be(e),r={type:e.arrow?`ARROW`:`FUNCTION`,params:n.params.map(e=>{if(e.type===`JsdocTypeKeyValue`){if(e.right===void 0)throw Error(`Function parameter without ':' is not expected to be 'KEY_VALUE'`);return{type:`NAMED_PARAMETER`,name:e.key,typeName:t(e.right)}}else return t(e)}),new:null,returns:null};return n.this===void 0?e.arrow||(r.this=null):r.this=t(n.this),n.new!==void 0&&(r.new=t(n.new)),e.returnType!==void 0&&(r.returns=t(e.returnType)),r},JsdocTypeGeneric:(e,t)=>{let n={type:`GENERIC`,subject:t(e.left),objects:e.elements.map(t),meta:{syntax:e.meta.brackets===`square`?`SQUARE_BRACKET`:e.meta.dot?`ANGLE_BRACKET_WITH_DOT`:`ANGLE_BRACKET`}};return e.meta.brackets===`square`&&e.elements[0].type===`JsdocTypeFunction`&&!e.elements[0].parenthesis&&(n.objects[0]={type:`NAME`,name:`function`}),n},JsdocTypeObjectField:(e,t)=>{if(typeof e.key!=`string`)throw Error(`Index signatures and mapped types are not supported`);if(e.right===void 0)return{type:`RECORD_ENTRY`,key:e.key,quoteStyle:Ye(e.meta.quote),value:null,readonly:!1};let n=t(e.right);return e.optional&&(n={type:`OPTIONAL`,value:n,meta:{syntax:`SUFFIX_KEY_QUESTION_MARK`}}),{type:`RECORD_ENTRY`,key:e.key.toString(),quoteStyle:Ye(e.meta.quote),value:n,readonly:!1}},JsdocTypeJsdocObjectField:()=>{throw Error(`Keys may not be typed in jsdoctypeparser.`)},JsdocTypeKeyValue:(e,t)=>{if(e.right===void 0)return{type:`RECORD_ENTRY`,key:e.key,quoteStyle:`none`,value:null,readonly:!1};let n=t(e.right);return e.optional&&(n={type:`OPTIONAL`,value:n,meta:{syntax:`SUFFIX_KEY_QUESTION_MARK`}}),{type:`RECORD_ENTRY`,key:e.key,quoteStyle:`none`,value:n,readonly:!1}},JsdocTypeObject:(e,t)=>{let n=[];for(let r of e.elements)(r.type===`JsdocTypeObjectField`||r.type===`JsdocTypeJsdocObjectField`)&&n.push(t(r));return{type:`RECORD`,entries:n}},JsdocTypeSpecialNamePath:e=>{if(e.specialType!==`module`)throw Error(`jsdoctypeparser does not support type ${e.specialType} at this point.`);return{type:`MODULE`,value:{type:`FILE_PATH`,quoteStyle:Ye(e.meta.quote),path:e.value}}},JsdocTypeNamePath:(e,t)=>{let n=!1,r,i;e.right.type===`JsdocTypeSpecialNamePath`&&e.right.specialType===`event`?(n=!0,r=e.right.value,i=Ye(e.right.meta.quote)):(r=e.right.value,i=Ye(e.right.meta.quote));let a={type:Xe(e.pathType),owner:t(e.left),name:r,quoteStyle:i,hasEventPrefix:n};if(a.owner.type===`MODULE`){let e=a.owner;return a.owner=a.owner.value,e.value=a,e}else return a},JsdocTypeUnion:(e,t)=>Ze(`UNION`,e.elements.map(t)),JsdocTypeParenthesis:(e,t)=>({type:`PARENTHESIS`,value:t(_(e.element))}),JsdocTypeNull:()=>({type:`NAME`,name:`null`}),JsdocTypeUnknown:()=>({type:`UNKNOWN`}),JsdocTypeStringValue:e=>({type:`STRING_VALUE`,quoteStyle:Ye(e.meta.quote),string:e.value}),JsdocTypeIntersection:(e,t)=>Ze(`INTERSECTION`,e.elements.map(t)),JsdocTypeNumber:e=>({type:`NUMBER_VALUE`,number:e.value.toString()}),JsdocTypeSymbol:F,JsdocTypeProperty:F,JsdocTypePredicate:F,JsdocTypeMappedType:F,JsdocTypeIndexSignature:F,JsdocTypeAsserts:F,JsdocTypeReadonlyArray:F,JsdocTypeAssertsPlain:F,JsdocTypeConditional:F,JsdocTypeTypeParameter:F};function $e(e){return ze(Qe,e)}function et(){return{JsdocTypeIntersection:(e,t)=>({type:`JsdocTypeIntersection`,elements:e.elements.map(t)}),JsdocTypeGeneric:(e,t)=>({type:`JsdocTypeGeneric`,left:t(e.left),elements:e.elements.map(t),meta:{dot:e.meta.dot,brackets:e.meta.brackets}}),JsdocTypeNullable:e=>e,JsdocTypeUnion:(e,t)=>({type:`JsdocTypeUnion`,elements:e.elements.map(t)}),JsdocTypeUnknown:e=>e,JsdocTypeUndefined:e=>e,JsdocTypeTypeof:(e,t)=>({type:`JsdocTypeTypeof`,element:t(e.element)}),JsdocTypeSymbol:(e,t)=>{let n={type:`JsdocTypeSymbol`,value:e.value};return e.element!==void 0&&(n.element=t(e.element)),n},JsdocTypeOptional:(e,t)=>({type:`JsdocTypeOptional`,element:t(e.element),meta:{position:e.meta.position}}),JsdocTypeObject:(e,t)=>({type:`JsdocTypeObject`,meta:{separator:`comma`},elements:e.elements.map(t)}),JsdocTypeNumber:e=>e,JsdocTypeNull:e=>e,JsdocTypeNotNullable:(e,t)=>({type:`JsdocTypeNotNullable`,element:t(e.element),meta:{position:e.meta.position}}),JsdocTypeSpecialNamePath:e=>e,JsdocTypeObjectField:(e,t)=>({type:`JsdocTypeObjectField`,key:e.key,right:e.right===void 0?void 0:t(e.right),optional:e.optional,readonly:e.readonly,meta:e.meta}),JsdocTypeJsdocObjectField:(e,t)=>({type:`JsdocTypeJsdocObjectField`,left:t(e.left),right:t(e.right)}),JsdocTypeKeyValue:(e,t)=>({type:`JsdocTypeKeyValue`,key:e.key,right:e.right===void 0?void 0:t(e.right),optional:e.optional,variadic:e.variadic}),JsdocTypeImport:(e,t)=>({type:`JsdocTypeImport`,element:t(e.element)}),JsdocTypeAny:e=>e,JsdocTypeStringValue:e=>e,JsdocTypeNamePath:e=>e,JsdocTypeVariadic:(e,t)=>{let n={type:`JsdocTypeVariadic`,meta:{position:e.meta.position,squareBrackets:e.meta.squareBrackets}};return e.element!==void 0&&(n.element=t(e.element)),n},JsdocTypeTuple:(e,t)=>({type:`JsdocTypeTuple`,elements:e.elements.map(t)}),JsdocTypeName:e=>e,JsdocTypeFunction:(e,t)=>{let n={type:`JsdocTypeFunction`,arrow:e.arrow,parameters:e.parameters.map(t),constructor:e.constructor,parenthesis:e.parenthesis};return e.returnType!==void 0&&(n.returnType=t(e.returnType)),n},JsdocTypeKeyof:(e,t)=>({type:`JsdocTypeKeyof`,element:t(e.element)}),JsdocTypeParenthesis:(e,t)=>({type:`JsdocTypeParenthesis`,element:t(e.element)}),JsdocTypeProperty:e=>e,JsdocTypePredicate:(e,t)=>({type:`JsdocTypePredicate`,left:t(e.left),right:t(e.right)}),JsdocTypeIndexSignature:(e,t)=>({type:`JsdocTypeIndexSignature`,key:e.key,right:t(e.right)}),JsdocTypeMappedType:(e,t)=>({type:`JsdocTypeMappedType`,key:e.key,right:t(e.right)}),JsdocTypeAsserts:(e,t)=>({type:`JsdocTypeAsserts`,left:t(e.left),right:t(e.right)}),JsdocTypeReadonlyArray:(e,t)=>({type:`JsdocTypeReadonlyArray`,element:t(e.element)}),JsdocTypeAssertsPlain:(e,t)=>({type:`JsdocTypeAssertsPlain`,element:t(e.element)}),JsdocTypeConditional:(e,t)=>({type:`JsdocTypeConditional`,checksType:t(e.checksType),extendsType:t(e.extendsType),trueType:t(e.trueType),falseType:t(e.falseType)}),JsdocTypeTypeParameter:(e,t)=>({type:`JsdocTypeTypeParameter`,name:t(e.name),constraint:e.constraint===void 0?void 0:t(e.constraint),defaultValue:e.defaultValue===void 0?void 0:t(e.defaultValue)})}}let tt={JsdocTypeAny:[],JsdocTypeFunction:[`parameters`,`returnType`],JsdocTypeGeneric:[`left`,`elements`],JsdocTypeImport:[],JsdocTypeIndexSignature:[`right`],JsdocTypeIntersection:[`elements`],JsdocTypeKeyof:[`element`],JsdocTypeKeyValue:[`right`],JsdocTypeMappedType:[`right`],JsdocTypeName:[],JsdocTypeNamePath:[`left`,`right`],JsdocTypeNotNullable:[`element`],JsdocTypeNull:[],JsdocTypeNullable:[`element`],JsdocTypeNumber:[],JsdocTypeObject:[`elements`],JsdocTypeObjectField:[`right`],JsdocTypeJsdocObjectField:[`left`,`right`],JsdocTypeOptional:[`element`],JsdocTypeParenthesis:[`element`],JsdocTypeSpecialNamePath:[],JsdocTypeStringValue:[],JsdocTypeSymbol:[`element`],JsdocTypeTuple:[`elements`],JsdocTypeTypeof:[`element`],JsdocTypeUndefined:[],JsdocTypeUnion:[`elements`],JsdocTypeUnknown:[],JsdocTypeVariadic:[`element`],JsdocTypeProperty:[],JsdocTypePredicate:[`left`,`right`],JsdocTypeAsserts:[`left`,`right`],JsdocTypeReadonlyArray:[`element`],JsdocTypeAssertsPlain:[`element`],JsdocTypeConditional:[`checksType`,`extendsType`,`trueType`,`falseType`],JsdocTypeTypeParameter:[`name`,`constraint`,`defaultValue`]};function nt(e,t,n,r,i){r?.(e,t,n);let a=tt[e.type];for(let t of a){let n=e[t];if(n!==void 0)if(Array.isArray(n))for(let a of n)nt(a,e,t,r,i);else nt(n,e,t,r,i)}i?.(e,t,n)}function rt(e,t,n){nt(e,void 0,void 0,t,n)}e.catharsisTransform=Je,e.identityTransformRules=et,e.jtpTransform=$e,e.parse=Le,e.stringify=Ge,e.stringifyRules=Ue,e.transform=ze,e.traverse=rt,e.tryParse=Re,e.visitorKeys=tt}))}}),{UnknownArgTypesError:CU}=__STORYBOOK_MODULE_CORE_EVENTS_PREVIEW_ERRORS__,{UnknownArgTypesError:wU}=__STORYBOOK_MODULE_CORE_EVENTS_PREVIEW_ERRORS__,(function(e){e.start=`/**`,e.nostart=`/***`,e.delim=`*`,e.end=`*/`})(TU=TU||={}),EU=bU(SU(),1),DU=(0,EU.stringifyRules)(),OU=DU.JsdocTypeObject,DU.JsdocTypeAny=()=>`any`,DU.JsdocTypeObject=(e,t)=>`(${OU(e,t)})`,DU.JsdocTypeOptional=(e,t)=>t(e.element),DU.JsdocTypeNullable=(e,t)=>t(e.element),DU.JsdocTypeNotNullable=(e,t)=>t(e.element),DU.JsdocTypeUnion=(e,t)=>e.elements.map(t).join(`|`),kU=(...e)=>{let t={},n=e.filter(Boolean),r=n.reduce((e,n)=>(Object.entries(n).forEach(([n,r])=>{let i=e[n];Array.isArray(r)||typeof i>`u`?e[n]=r:TH(r)&&TH(i)?t[n]=!0:typeof r<`u`&&(e[n]=r)}),e),{});return Object.keys(t).forEach(e=>{let t=n.filter(Boolean).map(t=>t[e]).filter(e=>typeof e<`u`);t.every(e=>TH(e))?r[e]=kU(...t):r[e]=t[t.length-1]}),r},AU=e=>{let{component:t,argTypes:n,parameters:{docs:r={}}}=e,{extractArgTypes:i}=r;if(!i||!t)return n;let a=i(t);return a?kU(a,n):n},jU=`storybook/docs`,`${jU}`,MU=`${jU}/snippet-rendered`,NU=(e=>(e.AUTO=`auto`,e.CODE=`code`,e.DYNAMIC=`dynamic`,e))(NU||{})}));function FU(){}var IU=t((()=>{}));function LU(e,t){return e===t||Number.isNaN(e)&&Number.isNaN(t)}function RU(e,t,n){return zU(e,t,void 0,void 0,void 0,void 0,n)}function zU(e,t,n,r,i,a,o){let s=o(e,t,n,r,i,a);if(s!==void 0)return s;if(typeof e==typeof t)switch(typeof e){case`bigint`:case`string`:case`boolean`:case`symbol`:case`undefined`:return e===t;case`number`:return e===t||Object.is(e,t);case`function`:return e===t;case`object`:return BU(e,t,a,o)}return BU(e,t,a,o)}function BU(e,t,n,r){if(Object.is(e,t))return!0;let i=kH(e),a=kH(t);if(i===`[object Arguments]`&&(i=`[object Object]`),a===`[object Arguments]`&&(a=`[object Object]`),i!==a)return!1;switch(i){case jH:return e.toString()===t.toString();case MH:return LU(e.valueOf(),t.valueOf());case NH:case FH:case PH:return Object.is(e.valueOf(),t.valueOf());case AH:return e.source===t.source&&e.flags===t.flags;case zH:return e===t}n??=new Map;let o=n.get(e),s=n.get(t);if(o!=null&&s!=null)return o===t;n.set(e,t),n.set(t,e);try{switch(i){case IH:if(e.size!==t.size)return!1;for(let[i,a]of e.entries())if(!t.has(i)||!zU(a,t.get(i),i,e,t,n,r))return!1;return!0;case LH:{if(e.size!==t.size)return!1;let i=Array.from(e.values()),a=Array.from(t.values());for(let o=0;ozU(s,i,void 0,e,t,n,r));if(c===-1)return!1;a.splice(c,1)}return!0}case RH:case WH:case GH:case KH:case qH:case JH:case YH:case XH:case ZH:case QH:case $H:case eU:if(typeof Buffer<`u`&&Buffer.isBuffer(e)!==Buffer.isBuffer(t)||e.length!==t.length)return!1;for(let i=0;i{IU(),tU()})),UU=t((()=>{PU()}));function WU(e){var t=[...arguments].slice(1),n=Array.from(typeof e==`string`?[e]:e);n[n.length-1]=n[n.length-1].replace(/\r?\n([\t ]*)$/,``);var r=n.reduce(function(e,t){var n=t.match(/\n([\t ]+|(?!\s).)/g);return n?e.concat(n.map(function(e){return e.match(/[\t ]/g)?.length??0})):e},[]);if(r.length){var i=RegExp(` @@ -1022,4 +1022,4 @@ See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf- `})}var qU,JU,YU,XU,ZU,QU,$U,eW,tW=t((()=>{wH(),UU(),GU(),qU={},CH(qU,{argTypesEnhancers:()=>eW,parameters:()=>$U,render:()=>QU,renderToCanvas:()=>KU}),{global:JU}=__STORYBOOK_MODULE_GLOBAL__,{simulateDOMContentLoaded:YU,simulatePageLoad:XU}=__STORYBOOK_MODULE_PREVIEW_API__,{Node:ZU}=JU,QU=(e,t)=>{let{id:n,component:r}=t;if(typeof r==`string`){let t=r;return Object.keys(e).forEach(n=>{t=t.replace(`{{${n}}}`,e[n])}),t}if(r instanceof HTMLElement){let t=r.cloneNode(!0);return Object.keys(e).forEach(n=>{t.setAttribute(n,typeof e[n]==`string`?e[n]:JSON.stringify(e[n]))}),t}if(typeof r==`function`)return r(e,t);throw console.warn(WU` Storybook's HTML renderer only supports rendering DOM elements and strings. Received: ${r} - `),Error(`Unable to render story ${n}`)},$U={renderer:`html`},eW=[AU]})),nW=n({argTypesEnhancers:()=>eW,parameters:()=>$U,render:()=>QU,renderToCanvas:()=>KU}),rW=t((()=>{tW()})),iW=n({decorators:()=>uW,parameters:()=>dW});function aW(e){let t=e?.parameters.docs?.source,n=e?.parameters.__isArgsStory;return t?.type===NU.DYNAMIC?!1:!n||t?.code||t?.type===NU.CODE}var oW,sW,cW,lW,uW,dW,fW=t((()=>{UU(),{emitTransformCode:oW,useEffect:sW,useRef:cW}=__STORYBOOK_MODULE_PREVIEW_API__,lW=(e,t)=>{let n=cW(void 0),r=e();return sW(()=>{let e=t?.parameters.docs?.source?.excludeDecorators?t.originalStoryFn(t.args,t):r;aW(t)||(typeof e==`string`&&n.current!==e?(oW(e,t),n.current=e):e instanceof Element&&n.current!==e.outerHTML&&(oW(e.outerHTML,t),n.current=e.outerHTML))}),r},uW=[lW],dW={docs:{story:{inline:!0},source:{type:NU.DYNAMIC,language:`html`,code:void 0,excludeDecorators:void 0}}}})),pW,mW,hW,gW,_W,vW,yW,bW,xW,SW,CW=t((()=>{pW=Object.create,mW=Object.defineProperty,hW=Object.getOwnPropertyDescriptor,gW=Object.getOwnPropertyNames,_W=Object.getPrototypeOf,vW=Object.prototype.hasOwnProperty,yW=(e,t)=>function(){return t||(0,e[gW(e)[0]])((t={exports:{}}).exports,t),t.exports},bW=(e,t)=>{for(var n in t)mW(e,n,{get:t[n],enumerable:!0})},xW=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(let i of gW(t))!vW.call(e,i)&&i!==n&&mW(e,i,{get:()=>t[i],enumerable:!(r=hW(t,i))||r.enumerable});return e},SW=(e,t,n)=>(n=e==null?{}:pW(_W(e)),xW(t||!e||!e.__esModule?mW(n,`default`,{value:e,enumerable:!0}):n,e))})),wW,TW,EW,DW=t((()=>{CW(),r(),wW={},bW(wW,{parameters:()=>EW}),TW=Object.entries(globalThis.TAGS_OPTIONS??{}).reduce((e,t)=>{let[n,r]=t;return r.excludeFromDocsStories&&(e[n]=!0),e},{}),EW={docs:{renderer:async()=>{let{DocsRenderer:e}=await i(async()=>{let{DocsRenderer:e}=await import(`./DocsRenderer-LL677BLK-D2xToRfx.js`);return{DocsRenderer:e}},__vite__mapDeps([8,1,9,10,11,12,13,14,15,16,17]),import.meta.url);return new e},stories:{filter:e=>(e.tags||[]).filter(e=>TW[e]).length===0&&!e.parameters.docs?.disable}}}})),OW=n({parameters:()=>EW}),kW=t((()=>{DW()})),AW=n({decorators:()=>MW,default:()=>jW}),jW,MW,NW,PW=t((()=>{jW={parameters:{controls:{matchers:{color:/(background|color)$/i,date:/Date$/i}}}},MW=[(e,t)=>{let n=t.globals.theme||`light`;return document.documentElement.setAttribute(`data-theme`,n),window.Asc||(window.Asc={}),window.Asc.plugin||(window.Asc.plugin={}),window.Asc.plugin.theme={type:n},e()}],NW=document.createElement(`link`),NW.rel=`stylesheet`,NW.href=`https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css`,document.head.appendChild(NW)}));function FW(e=[]){return IW([e[0]??nW,e[1]??iW,e[2]??OW,e[3]??AW])}var IW,LW=t((()=>{rW(),fW(),kW(),PW(),{composeConfigs:IW}=__STORYBOOK_MODULE_PREVIEW_API__})),RW,zW=t((()=>{mH(),vH(),xH(),LW(),Iv(),{PreviewWeb:RW}=__STORYBOOK_MODULE_PREVIEW_API__,window.__STORYBOOK_PREVIEW__=window.__STORYBOOK_PREVIEW__||new RW(yH,FW),window.__STORYBOOK_STORY_STORE__=window.__STORYBOOK_STORY_STORE__||window.__STORYBOOK_PREVIEW__.storyStore}));t((()=>{a(),o(),zW()}))();export{TH as C,tU as S,nU as _,GU as a,aU as b,VU as c,_U as d,vU as f,lU as g,xU as h,WU as i,MU as l,bU as m,SW as n,UU as o,gU as p,CW as r,HU as s,yW as t,NU as u,iU as v,cU as x,sU as y}; \ No newline at end of file + `),Error(`Unable to render story ${n}`)},$U={renderer:`html`},eW=[AU]})),nW=n({argTypesEnhancers:()=>eW,parameters:()=>$U,render:()=>QU,renderToCanvas:()=>KU}),rW=t((()=>{tW()})),iW=n({decorators:()=>uW,parameters:()=>dW});function aW(e){let t=e?.parameters.docs?.source,n=e?.parameters.__isArgsStory;return t?.type===NU.DYNAMIC?!1:!n||t?.code||t?.type===NU.CODE}var oW,sW,cW,lW,uW,dW,fW=t((()=>{UU(),{emitTransformCode:oW,useEffect:sW,useRef:cW}=__STORYBOOK_MODULE_PREVIEW_API__,lW=(e,t)=>{let n=cW(void 0),r=e();return sW(()=>{let e=t?.parameters.docs?.source?.excludeDecorators?t.originalStoryFn(t.args,t):r;aW(t)||(typeof e==`string`&&n.current!==e?(oW(e,t),n.current=e):e instanceof Element&&n.current!==e.outerHTML&&(oW(e.outerHTML,t),n.current=e.outerHTML))}),r},uW=[lW],dW={docs:{story:{inline:!0},source:{type:NU.DYNAMIC,language:`html`,code:void 0,excludeDecorators:void 0}}}})),pW,mW,hW,gW,_W,vW,yW,bW,xW,SW,CW=t((()=>{pW=Object.create,mW=Object.defineProperty,hW=Object.getOwnPropertyDescriptor,gW=Object.getOwnPropertyNames,_W=Object.getPrototypeOf,vW=Object.prototype.hasOwnProperty,yW=(e,t)=>function(){return t||(0,e[gW(e)[0]])((t={exports:{}}).exports,t),t.exports},bW=(e,t)=>{for(var n in t)mW(e,n,{get:t[n],enumerable:!0})},xW=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(let i of gW(t))!vW.call(e,i)&&i!==n&&mW(e,i,{get:()=>t[i],enumerable:!(r=hW(t,i))||r.enumerable});return e},SW=(e,t,n)=>(n=e==null?{}:pW(_W(e)),xW(t||!e||!e.__esModule?mW(n,`default`,{value:e,enumerable:!0}):n,e))})),wW,TW,EW,DW=t((()=>{CW(),r(),wW={},bW(wW,{parameters:()=>EW}),TW=Object.entries(globalThis.TAGS_OPTIONS??{}).reduce((e,t)=>{let[n,r]=t;return r.excludeFromDocsStories&&(e[n]=!0),e},{}),EW={docs:{renderer:async()=>{let{DocsRenderer:e}=await i(async()=>{let{DocsRenderer:e}=await import(`./DocsRenderer-LL677BLK-BKqUrJM_.js`);return{DocsRenderer:e}},__vite__mapDeps([38,1,39,40,41,42,43,44,45,46,47]),import.meta.url);return new e},stories:{filter:e=>(e.tags||[]).filter(e=>TW[e]).length===0&&!e.parameters.docs?.disable}}}})),OW=n({parameters:()=>EW}),kW=t((()=>{DW()})),AW=t((()=>{})),jW=t((()=>{})),MW=t((()=>{})),NW=t((()=>{})),PW=t((()=>{})),FW=t((()=>{})),IW=t((()=>{})),LW=t((()=>{})),RW=n({default:()=>HW});function zW(e){return e?VW[decodeURIComponent(String(e)).replace(/^!/,``).trim().replace(/[\s_-]+/g,``).toLowerCase()]??`Light`:`Light`}var BW,VW,HW,UW=t((()=>{AW(),jW(),MW(),NW(),PW(),FW(),IW(),LW(),BW={Light:{pageBg:`#FFFFFF`,pageSurface:`#F7F7F7`,pageSurfaceAlt:`#F9F9F9`,pageBorder:`#DFDFDF`,pageFg:`rgba(0, 0, 0, 0.80)`,pageMuted:`rgba(0, 0, 0, 0.60)`},"Light Classic":{pageBg:`#FFFFFF`,pageSurface:`#F1F1F1`,pageSurfaceAlt:`#D8DADC`,pageBorder:`#CBCBCB`,pageFg:`#444444`,pageMuted:`#A5A5A5`},"Modern Light":{pageBg:`#FFFFFF`,pageSurface:`#F3F3F3`,pageSurfaceAlt:`#F9F9F9`,pageBorder:`#E1E1E1`,pageFg:`#383838`,pageMuted:void 0},"Modern Dark":{pageBg:`#404040`,pageSurface:`#404040`,pageSurfaceAlt:`#585858`,pageBorder:`#686868`,pageFg:`#E8E8E8`,pageMuted:`rgba(232, 232, 232, 0.70)`},Dark:{pageBg:`#333333`,pageSurface:`#333333`,pageSurfaceAlt:`#555555`,pageBorder:`#666666`,pageFg:`rgba(255, 255, 255, 0.80)`,pageMuted:`rgba(255, 255, 255, 0.60)`},"Dark Contrast":{pageBg:`#1E1E1E`,pageSurface:`#1E1E1E`,pageSurfaceAlt:`#424242`,pageBorder:`#696969`,pageFg:`#E8E8E8`,pageMuted:`#B8B8B8`}},VW={light:`Light`,lightclassic:`Light Classic`,modernlight:`Modern Light`,moderndark:`Modern Dark`,dark:`Dark`,darkcontrast:`Dark Contrast`},HW={globalTypes:{theme:{name:`Theme`,description:`Global plugin UI theme`,defaultValue:`Light`,toolbar:{icon:`paintbrush`,items:[`Light`,`Light Classic`,`Dark`,`Dark Contrast`,`Modern Light`,`Modern Dark`],dynamicTitle:!0}}},parameters:{backgrounds:{disable:!0},options:{storySort:{order:[`Foundations`,[`Typography`,`Colors`,`Icons`],`Components`,[`Buttons`,[`Dialog Buttons`,`Panel Buttons`,`Icon Buttons`,`Link Buttons`,`Split Buttons`],`Form`,[`Checkbox`,`Radio`,`Switches`,`Slider`,`Text Field`,`Text Area`],`Data Display`,[`Cards`,`Info Block`,`Tabs`],`Layout`,[`Header`,`Modal Window`,`Scroll`],`Feedback`,[`Loader`,`Tooltip`],`Actions`,[`Context Menu`,`Preview Controls`]],`*`]}},docs:{toc:!0,story:{inline:!0},canvas:{withToolbar:!0}},controls:{expanded:!0,matchers:{color:/(background|color)$/i,date:/Date$/i}}},decorators:[(e,t)=>{let n=zW(t.globals.theme),r=BW[n]||BW.Light,i=n===`Dark`||n===`Dark Contrast`||n===`Modern Dark`,a=t.viewMode===`docs`,o=r.pageBg,s=r.pageFg,c=r.pageSurface,l=r.pageSurfaceAlt,u=r.pageBorder,d=r.pageMuted??(i?`rgba(255, 255, 255, 0.60)`:`rgba(0, 0, 0, 0.60)`),f=i?`#4D9DFF`:`#0B6DFF`,p=document.documentElement;p.style.setProperty(`--page-bg`,o),p.style.setProperty(`--page-fg`,s),p.style.setProperty(`--page-border`,u),p.style.setProperty(`--page-surface`,c),p.style.setProperty(`--page-surface-alt`,l),p.style.setProperty(`--page-muted`,d),p.style.setProperty(`--page-accent`,f),p.dataset.pluginTheme=n.replace(/\s+/g,`-`).toLowerCase(),window.Asc||(window.Asc={}),window.Asc.plugin||(window.Asc.plugin={}),window.Asc.plugin.theme={type:n};let m=document.createElement(`div`);m.style.cssText=[`background-color:${o}`,`color:${s}`,`padding:${a?`0`:`20px`}`,`min-height:0`,`width:100%`,`--page-bg:${o}`,`--page-fg:${s}`,`--page-border:${u}`,`--page-surface:${c}`,`--page-surface-alt:${l}`,`--page-muted:${d}`,`--page-accent:${f}`].join(`;`);let h=e();return typeof h==`string`?m.innerHTML=h:h instanceof Node?m.appendChild(h):m.textContent=String(h??``),m}]}}));function WW(e=[]){return GW([e[0]??nW,e[1]??iW,e[2]??OW,e[3]??RW])}var GW,KW=t((()=>{rW(),fW(),kW(),UW(),{composeConfigs:GW}=__STORYBOOK_MODULE_PREVIEW_API__})),qW,JW=t((()=>{mH(),vH(),xH(),KW(),Iv(),{PreviewWeb:qW}=__STORYBOOK_MODULE_PREVIEW_API__,window.__STORYBOOK_PREVIEW__=window.__STORYBOOK_PREVIEW__||new qW(yH,WW),window.__STORYBOOK_STORY_STORE__=window.__STORYBOOK_STORY_STORE__||window.__STORYBOOK_PREVIEW__.storyStore}));t((()=>{a(),o(),JW()}))();export{TH as C,tU as S,nU as _,GU as a,aU as b,VU as c,_U as d,vU as f,lU as g,xU as h,WU as i,MU as l,bU as m,SW as n,UU as o,gU as p,CW as r,HU as s,yW as t,NU as u,iU as v,cU as x,sU as y}; \ No newline at end of file diff --git a/storybook/static/assets/iframe-kvNOWOmU.css b/storybook/static/assets/iframe-kvNOWOmU.css new file mode 100644 index 0000000000..d25cd67e4c --- /dev/null +++ b/storybook/static/assets/iframe-kvNOWOmU.css @@ -0,0 +1 @@ +:root{--page-bg:#fff;--page-fg:#000c;--page-border:#0000001a;--page-surface:#f7f7f7;--page-surface-alt:#efefef;--page-muted:#0009;--page-accent:#0b6dff}body{background:var(--page-bg);color:var(--page-fg);margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}#storybook-root{margin:0;padding:0}.sb-show-main.sb-main-padded{padding:0!important}.sbdocs,.sbdocs-wrapper,.sbdocs-content{background:var(--page-bg)!important;color:var(--page-fg)!important}.sbdocs .docs-story,.sbdocs .sb-story,.sbdocs .sb-story>div,.sbdocs .docs-story>div{height:auto!important;min-height:0!important;max-height:none!important}.sbdocs .sb-story>div,.sbdocs .docs-story>div,.sbdocs .sb-story>div>div,.sbdocs .docs-story>div>div{justify-content:flex-start!important;align-items:flex-start!important;display:block!important}.sbdocs .docs-story{padding:12px!important}.sbdocs .sb-story,.sbdocs .docs-story>div{margin:0!important;padding:0!important}.sbdocs h1,.sbdocs h2,.sbdocs h3,.sbdocs h4,.sbdocs h5,.sbdocs h6,.sbdocs p,.sbdocs li,.sbdocs td,.sbdocs th,.sbdocs label,.sbdocs code,.sbdocs strong{color:var(--page-fg)!important}.sbdocs small,.sbdocs .sbdocs-hint,.sbdocs [class*=subtitle],.sbdocs [class*=description]{color:var(--page-muted)!important}.sbdocs .sbdocs-preview{background:var(--page-bg)!important;border-color:var(--page-border)!important}.sbdocs .docs-story,.sbdocs .sb-story,.sbdocs .docs-story>div,.sbdocs .sb-story>div{border-color:var(--page-border)!important;background:0 0!important}.sbdocs .docblock-argstable,.sbdocs .docblock-argstable table,.sbdocs .docblock-argstable-head,.sbdocs .docblock-argstable-body,.sbdocs .docblock-argstable-head tr,.sbdocs .docblock-argstable-head th{background:var(--page-surface)!important;color:var(--page-fg)!important}.sbdocs .docblock-argstable-body tr:nth-child(odd) td{background:var(--page-bg)!important}.sbdocs .docblock-argstable-body tr:nth-child(2n) td{background:var(--page-surface-alt)!important}.sbdocs .docblock-argstable,.sbdocs .docblock-argstable table,.sbdocs .docblock-argstable-body tr,.sbdocs .docblock-argstable-head tr,.sbdocs .docblock-argstable-body td,.sbdocs .docblock-argstable-head th{border-color:var(--page-border)!important}.sbdocs .docblock-argstable code,.sbdocs .docblock-argstable pre,.sbdocs .docblock-argstable .token{color:var(--page-fg)!important;background:0 0!important}.sbdocs table th,.sbdocs table td,.sbdocs table td *,.sbdocs table th *{color:var(--page-fg)!important}.sbdocs table td:nth-child(2) small,.sbdocs table td:nth-child(2) [class*=hint],.sbdocs table td:nth-child(2) [class*=secondary]{color:var(--page-muted)!important}.sbdocs table td:nth-child(3),.sbdocs table td:nth-child(3) *{color:var(--page-fg)!important;opacity:1!important}.sbdocs .docblock-argstable-body td:nth-child(2) span,.sbdocs .docblock-argstable-body td:nth-child(3) span{background-color:#0000!important}.sbdocs table td code,.sbdocs table td pre,.sbdocs table td [class*=code],.sbdocs :not(pre)>code{color:var(--page-fg)!important;background:var(--page-surface-alt)!important;border:1px solid var(--page-border)!important;border-radius:4px!important}.sbdocs [class*=description] code,.sbdocs [class*=description] code *{color:var(--page-fg)!important}.sbdocs .docblock-argstable input:not([type=checkbox]),.sbdocs .docblock-argstable select,.sbdocs .docblock-argstable textarea{background:var(--page-bg)!important;color:var(--page-fg)!important;border-color:var(--page-border)!important}.sbdocs .docblock-argstable button{color:var(--page-fg)!important;border-color:var(--page-border)!important;background:#00000012!important}.sbdocs .docblock-argstable input::placeholder,.sbdocs .docblock-argstable textarea::placeholder{color:var(--page-muted)!important}html[data-plugin-theme=light] .sbdocs,html[data-plugin-theme=light-classic] .sbdocs,html[data-plugin-theme=modern-light] .sbdocs,html[data-plugin-theme=light] .sbdocs table th,html[data-plugin-theme=light] .sbdocs table td,html[data-plugin-theme=light] .sbdocs table td *,html[data-plugin-theme=light] .sbdocs table th *,html[data-plugin-theme=light-classic] .sbdocs table th,html[data-plugin-theme=light-classic] .sbdocs table td,html[data-plugin-theme=light-classic] .sbdocs table td *,html[data-plugin-theme=light-classic] .sbdocs table th *,html[data-plugin-theme=modern-light] .sbdocs table th,html[data-plugin-theme=modern-light] .sbdocs table td,html[data-plugin-theme=modern-light] .sbdocs table td *,html[data-plugin-theme=modern-light] .sbdocs table th *,html[data-plugin-theme=dark] .sbdocs table th,html[data-plugin-theme=dark] .sbdocs table td,html[data-plugin-theme=dark] .sbdocs table td *,html[data-plugin-theme=dark] .sbdocs table th *,html[data-plugin-theme=dark-contrast] .sbdocs table th,html[data-plugin-theme=dark-contrast] .sbdocs table td,html[data-plugin-theme=dark-contrast] .sbdocs table td *,html[data-plugin-theme=dark-contrast] .sbdocs table th *,html[data-plugin-theme=modern-dark] .sbdocs table th,html[data-plugin-theme=modern-dark] .sbdocs table td,html[data-plugin-theme=modern-dark] .sbdocs table td *,html[data-plugin-theme=modern-dark] .sbdocs table th *{color:var(--page-fg)!important}:is(html[data-plugin-theme=dark] .sbdocs .docblock-argstable label:has(input[type=checkbox][role=switch]),html[data-plugin-theme=dark-contrast] .sbdocs .docblock-argstable label:has(input[type=checkbox][role=switch]),html[data-plugin-theme=modern-dark] .sbdocs .docblock-argstable label:has(input[type=checkbox][role=switch])){box-shadow:inset 0 0 0 1px var(--page-border)!important;background:#ffffff1f!important}:is(html[data-plugin-theme=dark] .sbdocs .docblock-argstable label:has(input[type=checkbox][role=switch]) span,html[data-plugin-theme=dark-contrast] .sbdocs .docblock-argstable label:has(input[type=checkbox][role=switch]) span,html[data-plugin-theme=modern-dark] .sbdocs .docblock-argstable label:has(input[type=checkbox][role=switch]) span){color:#ffffff9e!important}:is(html[data-plugin-theme=dark] .sbdocs .docblock-argstable label:has(input[type=checkbox][role=switch]) input:checked~span:last-of-type,html[data-plugin-theme=dark] .sbdocs .docblock-argstable label:has(input[type=checkbox][role=switch]) input:not(:checked)~span:first-of-type,html[data-plugin-theme=dark-contrast] .sbdocs .docblock-argstable label:has(input[type=checkbox][role=switch]) input:checked~span:last-of-type,html[data-plugin-theme=dark-contrast] .sbdocs .docblock-argstable label:has(input[type=checkbox][role=switch]) input:not(:checked)~span:first-of-type,html[data-plugin-theme=modern-dark] .sbdocs .docblock-argstable label:has(input[type=checkbox][role=switch]) input:checked~span:last-of-type,html[data-plugin-theme=modern-dark] .sbdocs .docblock-argstable label:has(input[type=checkbox][role=switch]) input:not(:checked)~span:first-of-type){color:#1e1e1e!important;box-shadow:none!important;background:#fffffff0!important}.sbdocs .docblock-code-toggle,.sbdocs .docblock-code-toggle>button{background:var(--page-bg)!important;color:var(--page-fg)!important;border-color:var(--page-border)!important}.sbdocs .toc-wrapper,.sbdocs .toc-wrapper a,.sbdocs .table-of-contents,.sbdocs .table-of-contents a,.sbdocs [class*=toc] a{color:var(--page-fg)!important}.sbdocs .toc-wrapper a:hover,.sbdocs .table-of-contents a:hover,.sbdocs [class*=toc] a:hover,.sbdocs .toc-wrapper a[aria-current=true],.sbdocs .table-of-contents a[aria-current=true]{color:var(--page-accent)!important}.ui-dialog-button{background:0 0;border:none;padding:0;font-family:Arial,Helvetica,sans-serif;transition:filter .12s,transform .12s}.ui-dialog-button--hover{filter:brightness(1.03)}.ui-dialog-button--pressed{filter:brightness(.9);transform:translateY(.5px)}.ui-dialog-button__spinner{justify-content:center;align-items:center;animation:.9s linear infinite ui-dialog-spin;display:inline-flex}@keyframes ui-dialog-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ui-panel-button,.ui-icon-button,.ui-link-button{margin:0;font-family:Arial,Helvetica,sans-serif}.ui-panel-button,.ui-icon-button{background:0 0;padding:0;transition:filter .12s,transform .12s}.ui-link-button{all:unset;box-sizing:border-box;appearance:none;text-align:left;cursor:pointer;background:0 0;border:none;min-height:0;padding:0;display:inline-block}.ui-panel-button__spinner{width:var(--spinner-size,16px);height:var(--spinner-size,16px);animation:.9s linear infinite ui-plugin-spin;display:inline-block}.ui-panel-button--pressed,.ui-icon-button--pressed{transform:translateY(.5px)}@keyframes ui-plugin-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ui-card,.ui-card *{box-sizing:border-box}.ui-card button{appearance:none;outline:none;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}.ui-checkbox{all:unset;box-sizing:border-box;cursor:pointer;font-family:Arial,Helvetica,sans-serif;line-height:1}.ui-checkbox *{box-sizing:border-box}.ui-checkbox--disabled{cursor:default}.ui-radio{all:unset;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none}.ui-radio svg{display:block}.ui-radio:not(.ui-radio--disabled):active{transform:translateY(.5px)}.ui-radio--disabled{cursor:default}.ui-loader-spinner{animation:.9s linear infinite ui-loader-spin}@keyframes ui-loader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ui-switch{cursor:pointer;box-sizing:border-box;border:none;align-items:center;padding:1px;transition:all .12s;display:inline-flex}.ui-textarea{box-sizing:border-box;resize:vertical;font-family:Arial,Helvetica,sans-serif}.ui-textarea::-webkit-scrollbar{width:4px}.ui-textarea::-webkit-scrollbar-track{background:0 0}.ui-textarea::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}html[data-plugin-theme=dark] .ui-textarea::-webkit-scrollbar-thumb{background:#fff3}html[data-plugin-theme=dark-contrast] .ui-textarea::-webkit-scrollbar-thumb{background:#fff3}html[data-plugin-theme=modern-dark] .ui-textarea::-webkit-scrollbar-thumb{background:#fff3} diff --git a/storybook/static/assets/syntaxhighlighter-OH4MV7E3-D4h-bfW0.js b/storybook/static/assets/syntaxhighlighter-OH4MV7E3-DFku4BmC.js similarity index 99% rename from storybook/static/assets/syntaxhighlighter-OH4MV7E3-D4h-bfW0.js rename to storybook/static/assets/syntaxhighlighter-OH4MV7E3-DFku4BmC.js index 7c714953ef..f2caa78e36 100644 --- a/storybook/static/assets/syntaxhighlighter-OH4MV7E3-D4h-bfW0.js +++ b/storybook/static/assets/syntaxhighlighter-OH4MV7E3-DFku4BmC.js @@ -1,4 +1,4 @@ -import{a as e,n as t}from"./chunk-BneVvdWh.js";import{d as n,h as r,m as i}from"./iframe-DIiqmCNx.js";import{t as a}from"./react-B_0iYUWB.js";import{C as o,S as s,a as c,c as l}from"./theming-DzOc7WGW.js";import{i as u,r as d}from"./chunk-3LY4VQVK-DK6VewjT.js";import{n as f,t as p}from"./chunk-242VQQM5-CsveGrTV.js";import{i as m,n as h,r as g,t as _}from"./chunk-RD3KTAHR-ocB0pi6q.js";function v(e){"@babel/helpers - typeof";return v=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},v(e)}function ee(e,t){if(v(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(v(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function te(e){var t=ee(e,`string`);return v(t)==`symbol`?t:t+``}function y(e,t,n){return(t=te(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function b(e,t){if(e==null)return{};var n,r,i=p(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r{f()}));function S(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function C(e){for(var t=1;t=4)return[e[0],e[1],e[2],e[3],`${e[0]}.${e[1]}`,`${e[0]}.${e[2]}`,`${e[0]}.${e[3]}`,`${e[1]}.${e[0]}`,`${e[1]}.${e[2]}`,`${e[1]}.${e[3]}`,`${e[2]}.${e[0]}`,`${e[2]}.${e[1]}`,`${e[2]}.${e[3]}`,`${e[3]}.${e[0]}`,`${e[3]}.${e[1]}`,`${e[3]}.${e[2]}`,`${e[0]}.${e[1]}.${e[2]}`,`${e[0]}.${e[1]}.${e[3]}`,`${e[0]}.${e[2]}.${e[1]}`,`${e[0]}.${e[2]}.${e[3]}`,`${e[0]}.${e[3]}.${e[1]}`,`${e[0]}.${e[3]}.${e[2]}`,`${e[1]}.${e[0]}.${e[2]}`,`${e[1]}.${e[0]}.${e[3]}`,`${e[1]}.${e[2]}.${e[0]}`,`${e[1]}.${e[2]}.${e[3]}`,`${e[1]}.${e[3]}.${e[0]}`,`${e[1]}.${e[3]}.${e[2]}`,`${e[2]}.${e[0]}.${e[1]}`,`${e[2]}.${e[0]}.${e[3]}`,`${e[2]}.${e[1]}.${e[0]}`,`${e[2]}.${e[1]}.${e[3]}`,`${e[2]}.${e[3]}.${e[0]}`,`${e[2]}.${e[3]}.${e[1]}`,`${e[3]}.${e[0]}.${e[1]}`,`${e[3]}.${e[0]}.${e[2]}`,`${e[3]}.${e[1]}.${e[0]}`,`${e[3]}.${e[1]}.${e[2]}`,`${e[3]}.${e[2]}.${e[0]}`,`${e[3]}.${e[2]}.${e[1]}`,`${e[0]}.${e[1]}.${e[2]}.${e[3]}`,`${e[0]}.${e[1]}.${e[3]}.${e[2]}`,`${e[0]}.${e[2]}.${e[1]}.${e[3]}`,`${e[0]}.${e[2]}.${e[3]}.${e[1]}`,`${e[0]}.${e[3]}.${e[1]}.${e[2]}`,`${e[0]}.${e[3]}.${e[2]}.${e[1]}`,`${e[1]}.${e[0]}.${e[2]}.${e[3]}`,`${e[1]}.${e[0]}.${e[3]}.${e[2]}`,`${e[1]}.${e[2]}.${e[0]}.${e[3]}`,`${e[1]}.${e[2]}.${e[3]}.${e[0]}`,`${e[1]}.${e[3]}.${e[0]}.${e[2]}`,`${e[1]}.${e[3]}.${e[2]}.${e[0]}`,`${e[2]}.${e[0]}.${e[1]}.${e[3]}`,`${e[2]}.${e[0]}.${e[3]}.${e[1]}`,`${e[2]}.${e[1]}.${e[0]}.${e[3]}`,`${e[2]}.${e[1]}.${e[3]}.${e[0]}`,`${e[2]}.${e[3]}.${e[0]}.${e[1]}`,`${e[2]}.${e[3]}.${e[1]}.${e[0]}`,`${e[3]}.${e[0]}.${e[1]}.${e[2]}`,`${e[3]}.${e[0]}.${e[2]}.${e[1]}`,`${e[3]}.${e[1]}.${e[0]}.${e[2]}`,`${e[3]}.${e[1]}.${e[2]}.${e[0]}`,`${e[3]}.${e[2]}.${e[0]}.${e[1]}`,`${e[3]}.${e[2]}.${e[1]}.${e[0]}`]}function T(e){if(e.length===0||e.length===1)return e;var t=e.join(`.`);return Ze[t]||(Ze[t]=w(e)),Ze[t]}function E(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},n=arguments.length>2?arguments[2]:void 0;return T(e.filter(function(e){return e!==`token`})).reduce(function(e,t){return C(C({},e),n[t])},t)}function D(e){return e.join(` `)}function O(e,t){var n=0;return function(r){return n+=1,r.map(function(r,i){return k({node:r,stylesheet:e,useInlineStyles:t,key:`code-segment-${n}-${i}`})})}}function k(e){var t=e.node,n=e.stylesheet,r=e.style,i=r===void 0?{}:r,a=e.useInlineStyles,o=e.key,c=t.properties,l=t.type,u=t.tagName,d=t.value;if(l===`text`)return d;if(u){var f=O(n,a),p;if(!a)p=C(C({},c),{},{className:D(c.className)});else{var m=Object.keys(n).reduce(function(e,t){return t.split(`.`).forEach(function(t){e.includes(t)||e.push(t)}),e},[]),h=c.className&&c.className.includes(`token`)?[`token`]:[],g=c.className&&h.concat(c.className.filter(function(e){return!m.includes(e)}));p=C(C({},c),{},{className:D(g)||void 0,style:E(c.className,Object.assign({},c.style,i),n)})}var _=f(t.children);return me.createElement(u,s({key:o},p),_)}}function A(e,t){(t==null||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n{f()}));function S(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function C(e){for(var t=1;t=4)return[e[0],e[1],e[2],e[3],`${e[0]}.${e[1]}`,`${e[0]}.${e[2]}`,`${e[0]}.${e[3]}`,`${e[1]}.${e[0]}`,`${e[1]}.${e[2]}`,`${e[1]}.${e[3]}`,`${e[2]}.${e[0]}`,`${e[2]}.${e[1]}`,`${e[2]}.${e[3]}`,`${e[3]}.${e[0]}`,`${e[3]}.${e[1]}`,`${e[3]}.${e[2]}`,`${e[0]}.${e[1]}.${e[2]}`,`${e[0]}.${e[1]}.${e[3]}`,`${e[0]}.${e[2]}.${e[1]}`,`${e[0]}.${e[2]}.${e[3]}`,`${e[0]}.${e[3]}.${e[1]}`,`${e[0]}.${e[3]}.${e[2]}`,`${e[1]}.${e[0]}.${e[2]}`,`${e[1]}.${e[0]}.${e[3]}`,`${e[1]}.${e[2]}.${e[0]}`,`${e[1]}.${e[2]}.${e[3]}`,`${e[1]}.${e[3]}.${e[0]}`,`${e[1]}.${e[3]}.${e[2]}`,`${e[2]}.${e[0]}.${e[1]}`,`${e[2]}.${e[0]}.${e[3]}`,`${e[2]}.${e[1]}.${e[0]}`,`${e[2]}.${e[1]}.${e[3]}`,`${e[2]}.${e[3]}.${e[0]}`,`${e[2]}.${e[3]}.${e[1]}`,`${e[3]}.${e[0]}.${e[1]}`,`${e[3]}.${e[0]}.${e[2]}`,`${e[3]}.${e[1]}.${e[0]}`,`${e[3]}.${e[1]}.${e[2]}`,`${e[3]}.${e[2]}.${e[0]}`,`${e[3]}.${e[2]}.${e[1]}`,`${e[0]}.${e[1]}.${e[2]}.${e[3]}`,`${e[0]}.${e[1]}.${e[3]}.${e[2]}`,`${e[0]}.${e[2]}.${e[1]}.${e[3]}`,`${e[0]}.${e[2]}.${e[3]}.${e[1]}`,`${e[0]}.${e[3]}.${e[1]}.${e[2]}`,`${e[0]}.${e[3]}.${e[2]}.${e[1]}`,`${e[1]}.${e[0]}.${e[2]}.${e[3]}`,`${e[1]}.${e[0]}.${e[3]}.${e[2]}`,`${e[1]}.${e[2]}.${e[0]}.${e[3]}`,`${e[1]}.${e[2]}.${e[3]}.${e[0]}`,`${e[1]}.${e[3]}.${e[0]}.${e[2]}`,`${e[1]}.${e[3]}.${e[2]}.${e[0]}`,`${e[2]}.${e[0]}.${e[1]}.${e[3]}`,`${e[2]}.${e[0]}.${e[3]}.${e[1]}`,`${e[2]}.${e[1]}.${e[0]}.${e[3]}`,`${e[2]}.${e[1]}.${e[3]}.${e[0]}`,`${e[2]}.${e[3]}.${e[0]}.${e[1]}`,`${e[2]}.${e[3]}.${e[1]}.${e[0]}`,`${e[3]}.${e[0]}.${e[1]}.${e[2]}`,`${e[3]}.${e[0]}.${e[2]}.${e[1]}`,`${e[3]}.${e[1]}.${e[0]}.${e[2]}`,`${e[3]}.${e[1]}.${e[2]}.${e[0]}`,`${e[3]}.${e[2]}.${e[0]}.${e[1]}`,`${e[3]}.${e[2]}.${e[1]}.${e[0]}`]}function T(e){if(e.length===0||e.length===1)return e;var t=e.join(`.`);return Ze[t]||(Ze[t]=w(e)),Ze[t]}function E(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},n=arguments.length>2?arguments[2]:void 0;return T(e.filter(function(e){return e!==`token`})).reduce(function(e,t){return C(C({},e),n[t])},t)}function D(e){return e.join(` `)}function O(e,t){var n=0;return function(r){return n+=1,r.map(function(r,i){return k({node:r,stylesheet:e,useInlineStyles:t,key:`code-segment-${n}-${i}`})})}}function k(e){var t=e.node,n=e.stylesheet,r=e.style,i=r===void 0?{}:r,a=e.useInlineStyles,o=e.key,c=t.properties,l=t.type,u=t.tagName,d=t.value;if(l===`text`)return d;if(u){var f=O(n,a),p;if(!a)p=C(C({},c),{},{className:D(c.className)});else{var m=Object.keys(n).reduce(function(e,t){return t.split(`.`).forEach(function(t){e.includes(t)||e.push(t)}),e},[]),h=c.className&&c.className.includes(`token`)?[`token`]:[],g=c.className&&h.concat(c.className.filter(function(e){return!m.includes(e)}));p=C(C({},c),{},{className:D(g)||void 0,style:E(c.className,Object.assign({},c.style,i),n)})}var _=f(t.children);return me.createElement(u,s({key:o},p),_)}}function A(e,t){(t==null||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n1&&arguments[1]!==void 0?arguments[1]:[],n=arguments.length>2&&arguments[2]!==void 0?arguments[2]:[],r=0;r2&&arguments[2]!==void 0?arguments[2]:[],showLineNumbers:r,wrapLongLines:c,wrapLines:t})}function h(e,t){if(r&&t&&i){var n=ce(s,t,o);e.unshift(I(t,n))}return e}function g(e,n){var r=arguments.length>2&&arguments[2]!==void 0?arguments[2]:[];return t||r.length>0?m(e,n,r):h(e,n)}for(var _=function(){var e=u[p],t=e.children[0].value;if(ie(t)){var n=t.split(` diff --git a/storybook/static/assets/theme-utils-B-KYefhh.js b/storybook/static/assets/theme-utils-B-KYefhh.js new file mode 100644 index 0000000000..75895cf77d --- /dev/null +++ b/storybook/static/assets/theme-utils-B-KYefhh.js @@ -0,0 +1 @@ +import{n as e}from"./chunk-BneVvdWh.js";function t(e){return e?o[decodeURIComponent(String(e)).replace(/^!/,``).trim().replace(/[\s_-]+/g,``).toLowerCase()]??`Light`:`Light`}function n(e){let n=t(e),r=a[n];return{theme:n,bg:r.pageBg,surface:r.pageSurface,surfaceAlt:r.pageSurfaceAlt,border:r.pageBorder,fg:r.pageFg,muted:r.pageMuted??r.pageFg,accent:n===`Dark`||n===`Dark Contrast`||n===`Modern Dark`?`#4D9DFF`:`#0B6DFF`,isDark:n===`Dark`||n===`Dark Contrast`||n===`Modern Dark`,isModern:n.startsWith(`Modern`)}}function r(e,n){return t(e&&e!==`Auto`?e:n)}function i(e,{disabled:t=!1,forcedState:n}={}){let r=document.createElement(`div`);if(r.style.display=`contents`,n!==void 0||t)return r.innerHTML=e(n??`default`),r;let i=!1,a=!1,o=()=>{r.innerHTML=e(a?`pressed`:i?`hover`:`default`)};return r.addEventListener(`mouseenter`,()=>{i=!0,o()}),r.addEventListener(`mouseleave`,()=>{i=!1,a=!1,o()}),r.addEventListener(`mousedown`,()=>{a=!0,o()}),r.addEventListener(`mouseup`,()=>{a=!1,o()}),o(),r}var a,o,s,c=e((()=>{a={Light:{pageBg:`#FFFFFF`,pageSurface:`#F7F7F7`,pageSurfaceAlt:`#F9F9F9`,pageBorder:`#DFDFDF`,pageFg:`rgba(0, 0, 0, 0.80)`,pageMuted:`rgba(0, 0, 0, 0.60)`},"Light Classic":{pageBg:`#FFFFFF`,pageSurface:`#F1F1F1`,pageSurfaceAlt:`#D8DADC`,pageBorder:`#CBCBCB`,pageFg:`#444444`,pageMuted:`#A5A5A5`},"Modern Light":{pageBg:`#FFFFFF`,pageSurface:`#F3F3F3`,pageSurfaceAlt:`#F9F9F9`,pageBorder:`#E1E1E1`,pageFg:`#383838`,pageMuted:void 0},"Modern Dark":{pageBg:`#404040`,pageSurface:`#404040`,pageSurfaceAlt:`#585858`,pageBorder:`#686868`,pageFg:`#E8E8E8`,pageMuted:`rgba(232, 232, 232, 0.70)`},Dark:{pageBg:`#333333`,pageSurface:`#333333`,pageSurfaceAlt:`#555555`,pageBorder:`#666666`,pageFg:`rgba(255, 255, 255, 0.80)`,pageMuted:`rgba(255, 255, 255, 0.60)`},"Dark Contrast":{pageBg:`#1E1E1E`,pageSurface:`#1E1E1E`,pageSurfaceAlt:`#424242`,pageBorder:`#696969`,pageFg:`#E8E8E8`,pageMuted:`#B8B8B8`}},o={light:`Light`,lightclassic:`Light Classic`,modernlight:`Modern Light`,moderndark:`Modern Dark`,dark:`Dark`,darkcontrast:`Dark Contrast`},s=[`Light`,`Light Classic`,`Dark`,`Dark Contrast`,`Modern Light`,`Modern Dark`]}));export{r as a,s as i,c as n,t as o,i as r,n as t}; \ No newline at end of file diff --git a/storybook/static/assets/theming-DzOc7WGW.js b/storybook/static/assets/theming-DLWRz99i.js similarity index 99% rename from storybook/static/assets/theming-DzOc7WGW.js rename to storybook/static/assets/theming-DLWRz99i.js index e20985e49f..328c05800a 100644 --- a/storybook/static/assets/theming-DzOc7WGW.js +++ b/storybook/static/assets/theming-DLWRz99i.js @@ -1,4 +1,4 @@ -import{a as e,n as t,r as n}from"./chunk-BneVvdWh.js";import{d as r,h as i,m as a}from"./iframe-DIiqmCNx.js";import{t as o}from"./react-B_0iYUWB.js";import{i as s,n as c,r as l,t as u}from"./chunk-3LY4VQVK-DK6VewjT.js";function d(){return d=Object.assign?Object.assign.bind():function(e){for(var t=1;t{}));function p(e){if(e===void 0)throw ReferenceError(`this hasn't been initialised - super() hasn't been called`);return e}function m(e,t){return m=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},m(e,t)}function h(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,m(e,t)}function g(e){return g=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},g(e)}function _(e){try{return Function.toString.call(e).indexOf(`[native code]`)!==-1}catch{return typeof e==`function`}}function v(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch{}return(v=function(){return!!e})()}function y(e,t,n){if(v())return Reflect.construct.apply(null,arguments);var r=[null];r.push.apply(r,t);var i=new(e.bind.apply(e,r));return n&&m(i,n.prototype),i}function b(e){var t=typeof Map==`function`?new Map:void 0;return b=function(e){if(e===null||!_(e))return e;if(typeof e!=`function`)throw TypeError(`Super expression must either be null or a function`);if(t!==void 0){if(t.has(e))return t.get(e);t.set(e,n)}function n(){return y(e,arguments,g(this).constructor)}return n.prototype=Object.create(e.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),m(n,e)},b(e)}function x(e,t){return e.substr(-t.length)===t}function S(e){return typeof e==`string`&&e.match(we)?parseFloat(e):e}function C(e){return Math.round(e*255)}function ee(e,t,n){return C(e)+`,`+C(t)+`,`+C(n)}function te(e,t,n,r){if(r===void 0&&(r=ee),t===0)return r(n,n,n);var i=(e%360+360)%360/60,a=(1-Math.abs(2*n-1))*t,o=a*(1-Math.abs(i%2-1)),s=0,c=0,l=0;i>=0&&i<1?(s=a,c=o):i>=1&&i<2?(s=o,c=a):i>=2&&i<3?(c=a,l=o):i>=3&&i<4?(c=o,l=a):i>=4&&i<5?(s=o,l=a):i>=5&&i<6&&(s=a,l=o);var u=n-a/2,d=s+u,f=c+u,p=l+u;return r(d,f,p)}function ne(e){if(typeof e!=`string`)return e;var t=e.toLowerCase();return De[t]?`#`+De[t]:e}function w(e){if(typeof e!=`string`)throw new j(3);var t=ne(e);if(t.match(Oe))return{red:parseInt(``+t[1]+t[2],16),green:parseInt(``+t[3]+t[4],16),blue:parseInt(``+t[5]+t[6],16)};if(t.match(ke)){var n=parseFloat((parseInt(``+t[7]+t[8],16)/255).toFixed(2));return{red:parseInt(``+t[1]+t[2],16),green:parseInt(``+t[3]+t[4],16),blue:parseInt(``+t[5]+t[6],16),alpha:n}}if(t.match(Ae))return{red:parseInt(``+t[1]+t[1],16),green:parseInt(``+t[2]+t[2],16),blue:parseInt(``+t[3]+t[3],16)};if(t.match(je)){var r=parseFloat((parseInt(``+t[4]+t[4],16)/255).toFixed(2));return{red:parseInt(``+t[1]+t[1],16),green:parseInt(``+t[2]+t[2],16),blue:parseInt(``+t[3]+t[3],16),alpha:r}}var i=Me.exec(t);if(i)return{red:parseInt(``+i[1],10),green:parseInt(``+i[2],10),blue:parseInt(``+i[3],10)};var a=Ne.exec(t.substring(0,50));if(a)return{red:parseInt(``+a[1],10),green:parseInt(``+a[2],10),blue:parseInt(``+a[3],10),alpha:parseFloat(``+a[4])>1?parseFloat(``+a[4])/100:parseFloat(``+a[4])};var o=Pe.exec(t);if(o){var s=`rgb(`+te(parseInt(``+o[1],10),parseInt(``+o[2],10)/100,parseInt(``+o[3],10)/100)+`)`,c=Me.exec(s);if(!c)throw new j(4,t,s);return{red:parseInt(``+c[1],10),green:parseInt(``+c[2],10),blue:parseInt(``+c[3],10)}}var l=Fe.exec(t.substring(0,50));if(l){var u=`rgb(`+te(parseInt(``+l[1],10),parseInt(``+l[2],10)/100,parseInt(``+l[3],10)/100)+`)`,d=Me.exec(u);if(!d)throw new j(4,t,u);return{red:parseInt(``+d[1],10),green:parseInt(``+d[2],10),blue:parseInt(``+d[3],10),alpha:parseFloat(``+l[4])>1?parseFloat(``+l[4])/100:parseFloat(``+l[4])}}throw new j(5)}function re(e){var t=e.red/255,n=e.green/255,r=e.blue/255,i=Math.max(t,n,r),a=Math.min(t,n,r),o=(i+a)/2;if(i===a)return e.alpha===void 0?{hue:0,saturation:0,lightness:o}:{hue:0,saturation:0,lightness:o,alpha:e.alpha};var s,c=i-a,l=o>.5?c/(2-i-a):c/(i+a);switch(i){case t:s=(n-r)/c+(n=1?oe(e,t,n):`rgba(`+te(e,t,n)+`,`+r+`)`;if(typeof e==`object`&&t===void 0&&n===void 0&&r===void 0)return e.alpha>=1?oe(e.hue,e.saturation,e.lightness):`rgba(`+te(e.hue,e.saturation,e.lightness)+`,`+e.alpha+`)`;throw new j(2)}function le(e,t,n){if(typeof e==`number`&&typeof t==`number`&&typeof n==`number`)return Le(`#`+E(e)+E(t)+E(n));if(typeof e==`object`&&t===void 0&&n===void 0)return Le(`#`+E(e.red)+E(e.green)+E(e.blue));throw new j(6)}function D(e,t,n,r){if(typeof e==`string`&&typeof t==`number`){var i=w(e);return`rgba(`+i.red+`,`+i.green+`,`+i.blue+`,`+t+`)`}else{if(typeof e==`number`&&typeof t==`number`&&typeof n==`number`&&typeof r==`number`)return r>=1?le(e,t,n):`rgba(`+e+`,`+t+`,`+n+`,`+r+`)`;if(typeof e==`object`&&t===void 0&&n===void 0&&r===void 0)return e.alpha>=1?le(e.red,e.green,e.blue):`rgba(`+e.red+`,`+e.green+`,`+e.blue+`,`+e.alpha+`)`}throw new j(7)}function O(e){if(typeof e!=`object`)throw new j(8);if(ze(e))return D(e);if(Re(e))return le(e);if(Ve(e))return ce(e);if(Be(e))return se(e);throw new j(8)}function ue(e,t,n){return function(){var r=n.concat(Array.prototype.slice.call(arguments));return r.length>=t?e.apply(this,r):ue(e,t,r)}}function k(e){return ue(e,e.length,[])}function de(e,t){if(t===`transparent`)return t;var n=T(t);return O(d({},n,{hue:n.hue+parseFloat(e)}))}function A(e,t,n){return Math.max(e,Math.min(t,n))}function fe(e,t){if(t===`transparent`)return t;var n=T(t);return O(d({},n,{lightness:A(0,1,n.lightness-parseFloat(e))}))}function pe(e,t){if(t===`transparent`)return t;var n=T(t);return O(d({},n,{saturation:A(0,1,n.saturation-parseFloat(e))}))}function me(e,t){if(t===`transparent`)return t;var n=T(t);return O(d({},n,{lightness:A(0,1,n.lightness+parseFloat(e))}))}function he(e,t,n){if(t===`transparent`)return n;if(n===`transparent`)return t;if(e===0)return n;var r=w(t),i=d({},r,{alpha:typeof r.alpha==`number`?r.alpha:1}),a=w(n),o=d({},a,{alpha:typeof a.alpha==`number`?a.alpha:1}),s=i.alpha-o.alpha,c=parseFloat(e)*2-1,l=((c*s===-1?c:c+s)/(1+c*s)+1)/2,u=1-l;return D({red:Math.floor(i.red*l+o.red*u),green:Math.floor(i.green*l+o.green*u),blue:Math.floor(i.blue*l+o.blue*u),alpha:i.alpha*parseFloat(e)+o.alpha*(1-parseFloat(e))})}function ge(e,t){if(t===`transparent`)return t;var n=w(t);return D(d({},n,{alpha:A(0,1,((typeof n.alpha==`number`?n.alpha:1)*100+parseFloat(e)*100)/100)}))}function _e(e,t){if(t===`transparent`)return t;var n=T(t);return O(d({},n,{saturation:A(0,1,n.saturation+parseFloat(e))}))}function ve(e,t){return t===`transparent`?t:O(d({},T(t),{hue:parseFloat(e)}))}function ye(e,t){return t===`transparent`?t:O(d({},T(t),{lightness:parseFloat(e)}))}function be(e,t){return t===`transparent`?t:O(d({},T(t),{saturation:parseFloat(e)}))}function xe(e,t){return t===`transparent`?t:We(parseFloat(e),`rgb(0, 0, 0)`,t)}function Se(e,t){return t===`transparent`?t:We(parseFloat(e),`rgb(255, 255, 255)`,t)}function Ce(e,t){if(t===`transparent`)return t;var n=w(t);return D(d({},n,{alpha:A(0,1,((typeof n.alpha==`number`?n.alpha:1)*100-parseFloat(e)*100).toFixed(2)/100)}))}var j,we,Te,Ee,De,Oe,ke,Ae,je,Me,Ne,Pe,Fe,Ie,Le,Re,ze,Be,Ve,He,Ue,We,Ge,Ke,qe=t((()=>{f(),j=(function(e){h(t,e);function t(t){return p(e.call(this,`An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#`+t+` for more information.`)||this)}return t})(b(Error)),we=/^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/,Te=function(e){return function(t,n){n===void 0&&(n=`16px`);var r=t,i=n;if(typeof t==`string`){if(!x(t,`px`))throw new j(69,e,t);r=S(t)}if(typeof n==`string`){if(!x(n,`px`))throw new j(70,e,n);i=S(n)}if(typeof r==`string`)throw new j(71,t,e);if(typeof i==`string`)throw new j(72,n,e);return``+r/i+e}},Ee=Te,Ee(`em`),Ee(`rem`),De={aliceblue:`f0f8ff`,antiquewhite:`faebd7`,aqua:`00ffff`,aquamarine:`7fffd4`,azure:`f0ffff`,beige:`f5f5dc`,bisque:`ffe4c4`,black:`000`,blanchedalmond:`ffebcd`,blue:`0000ff`,blueviolet:`8a2be2`,brown:`a52a2a`,burlywood:`deb887`,cadetblue:`5f9ea0`,chartreuse:`7fff00`,chocolate:`d2691e`,coral:`ff7f50`,cornflowerblue:`6495ed`,cornsilk:`fff8dc`,crimson:`dc143c`,cyan:`00ffff`,darkblue:`00008b`,darkcyan:`008b8b`,darkgoldenrod:`b8860b`,darkgray:`a9a9a9`,darkgreen:`006400`,darkgrey:`a9a9a9`,darkkhaki:`bdb76b`,darkmagenta:`8b008b`,darkolivegreen:`556b2f`,darkorange:`ff8c00`,darkorchid:`9932cc`,darkred:`8b0000`,darksalmon:`e9967a`,darkseagreen:`8fbc8f`,darkslateblue:`483d8b`,darkslategray:`2f4f4f`,darkslategrey:`2f4f4f`,darkturquoise:`00ced1`,darkviolet:`9400d3`,deeppink:`ff1493`,deepskyblue:`00bfff`,dimgray:`696969`,dimgrey:`696969`,dodgerblue:`1e90ff`,firebrick:`b22222`,floralwhite:`fffaf0`,forestgreen:`228b22`,fuchsia:`ff00ff`,gainsboro:`dcdcdc`,ghostwhite:`f8f8ff`,gold:`ffd700`,goldenrod:`daa520`,gray:`808080`,green:`008000`,greenyellow:`adff2f`,grey:`808080`,honeydew:`f0fff0`,hotpink:`ff69b4`,indianred:`cd5c5c`,indigo:`4b0082`,ivory:`fffff0`,khaki:`f0e68c`,lavender:`e6e6fa`,lavenderblush:`fff0f5`,lawngreen:`7cfc00`,lemonchiffon:`fffacd`,lightblue:`add8e6`,lightcoral:`f08080`,lightcyan:`e0ffff`,lightgoldenrodyellow:`fafad2`,lightgray:`d3d3d3`,lightgreen:`90ee90`,lightgrey:`d3d3d3`,lightpink:`ffb6c1`,lightsalmon:`ffa07a`,lightseagreen:`20b2aa`,lightskyblue:`87cefa`,lightslategray:`789`,lightslategrey:`789`,lightsteelblue:`b0c4de`,lightyellow:`ffffe0`,lime:`0f0`,limegreen:`32cd32`,linen:`faf0e6`,magenta:`f0f`,maroon:`800000`,mediumaquamarine:`66cdaa`,mediumblue:`0000cd`,mediumorchid:`ba55d3`,mediumpurple:`9370db`,mediumseagreen:`3cb371`,mediumslateblue:`7b68ee`,mediumspringgreen:`00fa9a`,mediumturquoise:`48d1cc`,mediumvioletred:`c71585`,midnightblue:`191970`,mintcream:`f5fffa`,mistyrose:`ffe4e1`,moccasin:`ffe4b5`,navajowhite:`ffdead`,navy:`000080`,oldlace:`fdf5e6`,olive:`808000`,olivedrab:`6b8e23`,orange:`ffa500`,orangered:`ff4500`,orchid:`da70d6`,palegoldenrod:`eee8aa`,palegreen:`98fb98`,paleturquoise:`afeeee`,palevioletred:`db7093`,papayawhip:`ffefd5`,peachpuff:`ffdab9`,peru:`cd853f`,pink:`ffc0cb`,plum:`dda0dd`,powderblue:`b0e0e6`,purple:`800080`,rebeccapurple:`639`,red:`f00`,rosybrown:`bc8f8f`,royalblue:`4169e1`,saddlebrown:`8b4513`,salmon:`fa8072`,sandybrown:`f4a460`,seagreen:`2e8b57`,seashell:`fff5ee`,sienna:`a0522d`,silver:`c0c0c0`,skyblue:`87ceeb`,slateblue:`6a5acd`,slategray:`708090`,slategrey:`708090`,snow:`fffafa`,springgreen:`00ff7f`,steelblue:`4682b4`,tan:`d2b48c`,teal:`008080`,thistle:`d8bfd8`,tomato:`ff6347`,turquoise:`40e0d0`,violet:`ee82ee`,wheat:`f5deb3`,white:`fff`,whitesmoke:`f5f5f5`,yellow:`ff0`,yellowgreen:`9acd32`},Oe=/^#[a-fA-F0-9]{6}$/,ke=/^#[a-fA-F0-9]{8}$/,Ae=/^#[a-fA-F0-9]{3}$/,je=/^#[a-fA-F0-9]{4}$/,Me=/^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i,Ne=/^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i,Pe=/^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i,Fe=/^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i,Ie=function(e){return e.length===7&&e[1]===e[2]&&e[3]===e[4]&&e[5]===e[6]?`#`+e[1]+e[3]+e[5]:e},Le=Ie,Re=function(e){return typeof e.red==`number`&&typeof e.green==`number`&&typeof e.blue==`number`&&(typeof e.alpha!=`number`||typeof e.alpha>`u`)},ze=function(e){return typeof e.red==`number`&&typeof e.green==`number`&&typeof e.blue==`number`&&typeof e.alpha==`number`},Be=function(e){return typeof e.hue==`number`&&typeof e.saturation==`number`&&typeof e.lightness==`number`&&(typeof e.alpha!=`number`||typeof e.alpha>`u`)},Ve=function(e){return typeof e.hue==`number`&&typeof e.saturation==`number`&&typeof e.lightness==`number`&&typeof e.alpha==`number`},k(de),He=k(fe),k(pe),Ue=k(me),We=k(he),Ge=k(ge),k(_e),k(ve),k(ye),k(be),k(xe),k(Se),Ke=k(Ce)})),M,N,P,Je,Ye,Xe,Ze,Qe,$e,et,tt,nt,rt,it,at,ot,st,ct,F,lt,ut=t((()=>{qe(),M={primary:`#FF4785`,secondary:`#006DEB`,tertiary:`#FAFBFC`,ancillary:`#22a699`,orange:`#FC521F`,gold:`#FFAE00`,green:`#66BF3C`,seafoam:`#37D5D3`,purple:`#6F2CAC`,ultraviolet:`#2A0481`,lightest:`#FFFFFF`,lighter:`#F6F9FC`,light:`#EEF2F6`,mediumlight:`#ECF2F9`,medium:`#D9E5F2`,mediumdark:`#737F8C`,dark:`#5C6570`,darker:`#454C54`,darkest:`#2E3338`,border:`hsl(212 50% 30% / 0.15)`,positive:`#66BF3C`,warning:`#E69D00`,negative:`#FF4400`,critical:`#FFFFFF`,defaultText:`#2E3338`,inverseText:`#FFFFFF`,positiveText:`#427C27`,warningText:`#955B1E`,negativeText:`#C23400`},N={app:`#F6F9FC`,bar:M.lightest,content:M.lightest,preview:M.lightest,gridCellSize:10,hoverable:`#DBECFF`,positive:`#F1FFEB`,warning:`#FFF9EB`,negative:`#FFF0EB`,critical:`#D13800`},P={fonts:{base:[`"Nunito Sans"`,`-apple-system`,`".SFNSText-Regular"`,`"San Francisco"`,`BlinkMacSystemFont`,`"Segoe UI"`,`"Helvetica Neue"`,`Helvetica`,`Arial`,`sans-serif`].join(`, `),mono:[`ui-monospace`,`Menlo`,`Monaco`,`"Roboto Mono"`,`"Oxygen Mono"`,`"Ubuntu Monospace"`,`"Source Code Pro"`,`"Droid Sans Mono"`,`"Courier New"`,`monospace`].join(`, `)},weight:{regular:400,bold:700},size:{s1:12,s2:14,s3:16,m1:20,m2:24,m3:28,l1:32,l2:40,l3:48,code:90}},Je={light:{fgColor:{default:M.darkest,muted:M.dark,accent:M.secondary,inverse:M.lightest,positive:`#427C27`,warning:`#7A4100`,negative:`#C23400`,critical:`#FFFFFF`},bgColor:{default:M.lightest,muted:N.app,positive:`#F1FFEB`,warning:`#FFF7EB`,negative:`#FFF0EB`,critical:`#D13800`},borderColor:{default:M.border,muted:`hsl(0 0% 0% / 0.1)`,inverse:`hsl(0 0% 100% / 0.1)`,positive:`#BFE7AC`,warning:`#FFCE85`,negative:`#FFC3AD`,critical:`hsl(16 100% 100% / 0)`}},dark:{fgColor:{default:`#C9CCCF`,muted:`#95999D`,accent:`#479DFF`,inverse:`#1B1C1D`,positive:`#86CE64`,warning:`#FFAD33`,negative:`#FF6933`,critical:`#FF6933`},bgColor:{default:`#222325`,muted:`#1B1C1D`,positive:`hsl(101 100% 100% / 0)`,warning:`hsl(101 100% 100% / 0)`,negative:`hsl(101 100% 100% / 0)`,critical:`hsl(101 100% 100% / 0)`},borderColor:{default:`hsl(0 0% 100% / 0.1)`,muted:`hsl(0 0% 100% / 0.5)`,inverse:`hsl(0 0% 0% / 0.1)`,positive:`hsl(101 52% 64% / 0.15)`,warning:`hsl(36 100% 64% / 0.15)`,negative:`hsl(16 100% 64% / 0.15)`,critical:`#FF6933`}}},Ye={base:`dark`,colorPrimary:`#FF4785`,colorSecondary:`#479DFF`,appBg:`#1B1C1D`,appContentBg:`#222325`,appHoverBg:`#233952`,appPreviewBg:M.lightest,appBorderColor:`hsl(0 0% 100% / 0.1)`,appBorderRadius:4,fontBase:P.fonts.base,fontCode:P.fonts.mono,textColor:`#C9CCCF`,textInverseColor:`#1B1C1D`,textMutedColor:`#95999D`,barTextColor:`#95999D`,barHoverColor:`#70B3FF`,barSelectedColor:`#479DFF`,barBg:`#222325`,buttonBg:`#1B1C1D`,buttonBorder:`hsl(0 0% 100% / 0.1)`,booleanBg:`#1B1C1D`,booleanSelectedBg:`#292B2E`,inputBg:`#1B1C1D`,inputBorder:`hsl(0 0% 100% / 0.1)`,inputTextColor:`#C9CCCF`,inputBorderRadius:4},Xe={base:`light`,colorPrimary:M.primary,colorSecondary:M.secondary,appBg:N.app,appContentBg:M.lightest,appHoverBg:`#DBECFF`,appPreviewBg:M.lightest,appBorderColor:M.border,appBorderRadius:4,fontBase:P.fonts.base,fontCode:P.fonts.mono,textColor:M.darkest,textInverseColor:M.lightest,textMutedColor:M.dark,barTextColor:M.dark,barHoverColor:`#005CC7`,barSelectedColor:`#0063D6`,barBg:M.lightest,buttonBg:N.app,buttonBorder:M.medium,booleanBg:M.mediumlight,booleanSelectedBg:M.lightest,inputBg:M.lightest,inputBorder:M.border,inputTextColor:M.darkest,inputBorderRadius:4},{logger:Ze}=__STORYBOOK_MODULE_CLIENT_LOGGER__,{global:Qe}=__STORYBOOK_MODULE_GLOBAL__,{window:$e}=Qe,et=e=>({color:e}),tt=e=>typeof e==`string`?!0:(Ze.warn(`Color passed to theme object should be a string. Instead ${e}(${typeof e}) was passed.`),!1),nt=e=>!/(gradient|var|calc)/.test(e),rt=(e,t)=>e===`darken`?D(`${He(1,t)}`,.95):e===`lighten`?D(`${Ue(1,t)}`,.95):t,it=e=>t=>{if(!tt(t)||!nt(t))return t;try{return rt(e,t)}catch{return t}},at=it(`lighten`),it(`darken`),ot=()=>!$e||!$e.matchMedia?`light`:$e.matchMedia(`(prefers-color-scheme: dark)`).matches?`dark`:`light`,st={light:Xe,dark:Ye},ct=ot(),F={...st,normal:st[ct]},lt=(e={base:ct},t)=>{let n={...F[ct],...F[e.base]||{},...e,base:F[e.base]?e.base:ct};return{...t,...n,barSelectedColor:e.barSelectedColor||n.colorSecondary}}})),dt=n({ThemeProvider:()=>$n,background:()=>N,color:()=>M,convert:()=>Nr,createCache:()=>kn,createReset:()=>xr,css:()=>Qt,ensure:()=>Vr,getPreferredColorScheme:()=>ot,ignoreSsrWarning:()=>Hr,isPropValid:()=>lr,jsx:()=>ar,keyframes:()=>H,srOnlyStyles:()=>br,styled:()=>vr,themes:()=>F,tokens:()=>Je,typography:()=>P,useTheme:()=>Xn});function ft(e){if(e.sheet)return e.sheet;for(var t=0;t0?L(Z,--Y):0,J--,X===10&&(J=1,vn--),X}function z(){return X=Y2||Ot(X)>3?``:` `}function Nt(e,t){for(;--t&&z()&&!(X<48||X>102||X>57&&X<65||X>70&&X<97););return Dt(e,Et()+(t<6&&B()==32&&z()==32))}function Pt(e){for(;z();)switch(X){case e:return Y;case 34:case 39:e!==34&&e!==39&&Pt(X);break;case 40:e===41&&Pt(e);break;case 92:z();break}return Y}function Ft(e,t){for(;z()&&e+X!==57&&!(e+X===84&&B()===47););return`/*`+Dt(t,Y-1)+`*`+gn(e===47?e:z())}function It(e){for(;!Ot(B());)z();return Dt(e,Y)}function Lt(e){return At(Rt(``,null,null,null,[``],e=kt(e),0,[0],e))}function Rt(e,t,n,r,i,a,o,s,c){for(var l=0,u=0,d=o,f=0,p=0,m=0,h=1,g=1,_=1,v=0,y=``,b=i,x=a,S=r,C=y;g;)switch(m=v,v=z()){case 40:if(m!=108&&L(C,d-1)==58){_t(C+=I(jt(v),`&`,`&\f`),`&\f`)!=-1&&(_=-1);break}case 34:case 39:case 91:C+=jt(v);break;case 9:case 10:case 13:case 32:C+=Mt(m);break;case 92:C+=Nt(Et()-1,7);continue;case 47:switch(B()){case 42:case 47:bt(Bt(Ft(z(),Et()),t,n),c);break;default:C+=`/`}break;case 123*h:s[l++]=R(C)*_;case 125*h:case 59:case 0:switch(v){case 0:case 125:g=0;case 59+u:_==-1&&(C=I(C,/\f/g,``)),p>0&&R(C)-d&&bt(p>32?Vt(C+`;`,r,n,d-1):Vt(I(C,` `,``)+`;`,r,n,d-2),c);break;case 59:C+=`;`;default:if(bt(S=zt(C,t,n,l,u,i,s,y,b=[],x=[],d),a),v===123)if(u===0)Rt(C,t,S,S,b,a,d,s,x);else switch(f===99&&L(C,3)===110?100:f){case 100:case 108:case 109:case 115:Rt(e,S,S,r&&bt(zt(e,S,S,0,0,i,s,y,i,b=[],d),x),i,x,d,s,r?b:x);break;default:Rt(C,S,S,S,[``],x,0,s,x)}}l=u=p=0,h=_=1,y=C=``,d=o;break;case 58:d=1+R(C),p=m;default:if(h<1){if(v==123)--h;else if(v==125&&h++==0&&Tt()==125)continue}switch(C+=gn(v),v*h){case 38:_=u>0?1:(C+=`\f`,-1);break;case 44:s[l++]=(R(C)-1)*_,_=1;break;case 64:B()===45&&(C+=jt(z())),f=B(),u=d=R(y=C+=It(Et())),v++;break;case 45:m===45&&R(C)==2&&(h=0)}}return a}function zt(e,t,n,r,i,a,o,s,c,l,u){for(var d=i-1,f=i===0?a:[``],p=yt(f),m=0,h=0,g=0;m0?f[_]+` `+v:I(v,/&\f/g,f[_])))&&(c[g++]=y);return St(e,t,n,i===0?un:s,c,l,u)}function Bt(e,t,n){return St(e,t,n,ln,gn(wt()),vt(e,2,-2),0)}function Vt(e,t,n,r){return St(e,t,n,dn,vt(e,0,r),vt(e,r+1,-1),r)}function V(e,t){for(var n=``,r=yt(e),i=0;i6)switch(L(e,t+1)){case 109:if(L(e,t+4)!==45)break;case 102:return I(e,/(.+:)(.+)-([^]+)/,`$1`+q+`$2-$3$1`+cn+(L(e,t+3)==108?`$3`:`$2-$3`))+e;case 115:return~_t(e,`stretch`)?Kt(I(e,`stretch`,`fill-available`),t)+e:e}break;case 4949:if(L(e,t+1)!==115)break;case 6444:switch(L(e,R(e)-3-(~_t(e,`!important`)&&10))){case 107:return I(e,`:`,`:`+q)+e;case 101:return I(e,/(.+:)([^;!]+)(;|!.+)?/,`$1`+q+(L(e,14)===45?`inline-`:``)+`box$3$1`+q+`$2$3$1`+K+`$2box$3`)+e}break;case 5936:switch(L(e,t+11)){case 114:return q+e+K+I(e,/[svh]\w+-[tblr]{2}/,`tb`)+e;case 108:return q+e+K+I(e,/[svh]\w+-[tblr]{2}/,`tb-rl`)+e;case 45:return q+e+K+I(e,/[svh]\w+-[tblr]{2}/,`lr`)+e}return q+e+K+e+e}return e}function qt(e,t,n){var r=``;return n.split(` `).forEach(function(n){e[n]===void 0?n&&(r+=n+` `):t.push(e[n]+`;`)}),r}function Jt(e){for(var t=0,n,r=0,i=e.length;i>=4;++r,i-=4)n=e.charCodeAt(r)&255|(e.charCodeAt(++r)&255)<<8|(e.charCodeAt(++r)&255)<<16|(e.charCodeAt(++r)&255)<<24,n=(n&65535)*1540483477+((n>>>16)*59797<<16),n^=n>>>24,t=(n&65535)*1540483477+((n>>>16)*59797<<16)^(t&65535)*1540483477+((t>>>16)*59797<<16);switch(i){case 3:t^=(e.charCodeAt(r+2)&255)<<16;case 2:t^=(e.charCodeAt(r+1)&255)<<8;case 1:t^=e.charCodeAt(r)&255,t=(t&65535)*1540483477+((t>>>16)*59797<<16)}return t^=t>>>13,t=(t&65535)*1540483477+((t>>>16)*59797<<16),((t^t>>>15)>>>0).toString(36)}function Yt(e,t,n){if(n==null)return``;var r=n;if(r.__emotion_styles!==void 0)return r;switch(typeof n){case`boolean`:return``;case`object`:var i=n;if(i.anim===1)return Q={name:i.name,styles:i.styles,next:Q},i.name;var a=n;if(a.styles!==void 0){var o=a.next;if(o!==void 0)for(;o!==void 0;)Q={name:o.name,styles:o.styles,next:Q},o=o.next;return a.styles+`;`}return Xt(e,t,n);case`function`:if(e!==void 0){var s=Q,c=n(e);return Q=s,Yt(e,t,c)}break}var l=n;if(t==null)return l;var u=t[l];return u===void 0?l:u}function Xt(e,t,n){var r=``;if(Array.isArray(n))for(var i=0;i{ut(),qe(),f(),l(),c(),i(),U=e(o(),1),en=e(o(),1),tn=e(o(),1),W=e(o(),1),G=e(o(),1),o(),nn=r({"../../node_modules/react-is/cjs/react-is.production.min.js"(e){var t=typeof Symbol==`function`&&Symbol.for,n=t?Symbol.for(`react.element`):60103,r=t?Symbol.for(`react.portal`):60106,i=t?Symbol.for(`react.fragment`):60107,a=t?Symbol.for(`react.strict_mode`):60108,o=t?Symbol.for(`react.profiler`):60114,s=t?Symbol.for(`react.provider`):60109,c=t?Symbol.for(`react.context`):60110,l=t?Symbol.for(`react.async_mode`):60111,u=t?Symbol.for(`react.concurrent_mode`):60111,d=t?Symbol.for(`react.forward_ref`):60112,f=t?Symbol.for(`react.suspense`):60113,p=t?Symbol.for(`react.suspense_list`):60120,m=t?Symbol.for(`react.memo`):60115,h=t?Symbol.for(`react.lazy`):60116,g=t?Symbol.for(`react.block`):60121,_=t?Symbol.for(`react.fundamental`):60117,v=t?Symbol.for(`react.responder`):60118,y=t?Symbol.for(`react.scope`):60119;function b(e){if(typeof e==`object`&&e){var t=e.$$typeof;switch(t){case n:switch(e=e.type,e){case l:case u:case i:case o:case a:case f:return e;default:switch(e&&=e.$$typeof,e){case c:case d:case h:case m:case s:return e;default:return t}}case r:return t}}}function x(e){return b(e)===u}e.AsyncMode=l,e.ConcurrentMode=u,e.ContextConsumer=c,e.ContextProvider=s,e.Element=n,e.ForwardRef=d,e.Fragment=i,e.Lazy=h,e.Memo=m,e.Portal=r,e.Profiler=o,e.StrictMode=a,e.Suspense=f,e.isAsyncMode=function(e){return x(e)||b(e)===l},e.isConcurrentMode=x,e.isContextConsumer=function(e){return b(e)===c},e.isContextProvider=function(e){return b(e)===s},e.isElement=function(e){return typeof e==`object`&&!!e&&e.$$typeof===n},e.isForwardRef=function(e){return b(e)===d},e.isFragment=function(e){return b(e)===i},e.isLazy=function(e){return b(e)===h},e.isMemo=function(e){return b(e)===m},e.isPortal=function(e){return b(e)===r},e.isProfiler=function(e){return b(e)===o},e.isStrictMode=function(e){return b(e)===a},e.isSuspense=function(e){return b(e)===f},e.isValidElementType=function(e){return typeof e==`string`||typeof e==`function`||e===i||e===u||e===o||e===a||e===f||e===p||typeof e==`object`&&!!e&&(e.$$typeof===h||e.$$typeof===m||e.$$typeof===s||e.$$typeof===c||e.$$typeof===d||e.$$typeof===_||e.$$typeof===v||e.$$typeof===y||e.$$typeof===g)},e.typeOf=b}}),r({"../../node_modules/react-is/cjs/react-is.development.js"(e){}}),rn=r({"../../node_modules/react-is/index.js"(e,t){t.exports=nn()}}),an=r({"../../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js"(e,t){var n=rn(),r={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},i={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},a={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},o={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},s={};s[n.ForwardRef]=a,s[n.Memo]=o;function c(e){return n.isMemo(e)?o:s[e.$$typeof]||r}var l=Object.defineProperty,u=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,f=Object.getOwnPropertyDescriptor,p=Object.getPrototypeOf,m=Object.prototype;function h(e,t,n){if(typeof t!=`string`){if(m){var r=p(t);r&&r!==m&&h(e,r,n)}var a=u(t);d&&(a=a.concat(d(t)));for(var o=c(e),s=c(t),g=0;g-1&&!e.return)switch(e.type){case dn:e.return=Kt(e.value,e.length);break;case pn:return V([Ct(e,{value:I(e.value,`@`,`@`+q)})],r);case un:if(e.length)return xt(e.props,function(t){switch(gt(t,/(::plac\w+|:read-\w+)/)){case`:read-only`:case`:read-write`:return V([Ct(e,{props:[I(t,/:(read-\w+)/,`:`+cn+`$1`)]})],r);case`::placeholder`:return V([Ct(e,{props:[I(t,/:(plac\w+)/,`:`+q+`input-$1`)]}),Ct(e,{props:[I(t,/:(plac\w+)/,`:`+cn+`$1`)]}),Ct(e,{props:[I(t,/:(plac\w+)/,K+`input-$1`)]})],r)}return``})}},On=[Dn],kn=function(e){var t=e.key;if(t===`css`){var n=document.querySelectorAll(`style[data-emotion]:not([data-s])`);Array.prototype.forEach.call(n,function(e){e.getAttribute(`data-emotion`).indexOf(` `)!==-1&&(document.head.appendChild(e),e.setAttribute(`data-s`,``))})}var r=e.stylisPlugins||On,i={},a,o=[];a=e.container||document.head,Array.prototype.forEach.call(document.querySelectorAll(`style[data-emotion^="`+t+` "]`),function(e){for(var t=e.getAttribute(`data-emotion`).split(` `),n=1;n96?dr:fr},mr=function(e,t,n){var r;if(t){var i=t.shouldForwardProp;r=e.__emotion_forwardProp&&i?function(t){return e.__emotion_forwardProp(t)&&i(t)}:i}return typeof r!=`function`&&n&&(r=e.__emotion_forwardProp),r},hr=function(e){var t=e.cache,n=e.serialized,r=e.isStringTag;return jn(t,n,r),Gn(function(){return Mn(t,n,r)}),null},gr=function e(t,n){var r=t.__emotion_real===t,i=r&&t.__emotion_base||t,a,o;n!==void 0&&(a=n.label,o=n.target);var s=mr(t,n,r),c=s||pr(i),l=!c(`as`);return function(){var u=arguments,f=r&&t.__emotion_styles!==void 0?t.__emotion_styles.slice(0):[];if(a!==void 0&&f.push(`label:`+a+`;`),u[0]==null||u[0].raw===void 0)f.push.apply(f,u);else{var p=u[0];f.push(p[0]);for(var m=u.length,h=1;h({body:{fontFamily:e.fonts.base,fontSize:e.size.s3,margin:0,WebkitFontSmoothing:`antialiased`,MozOsxFontSmoothing:`grayscale`,WebkitTapHighlightColor:`rgba(0, 0, 0, 0)`,WebkitOverflowScrolling:`touch`},"*":{boxSizing:`border-box`},"h1, h2, h3, h4, h5, h6":{fontWeight:e.weight.regular,margin:0,padding:0},"button, input, textarea, select":{fontFamily:`inherit`,fontSize:`inherit`,boxSizing:`border-box`},sub:{fontSize:`0.8em`,bottom:`-0.2em`},sup:{fontSize:`0.8em`,top:`-0.2em`},"b, strong":{fontWeight:e.weight.bold},hr:{border:`none`,borderTop:`1px solid silver`,clear:`both`,marginBottom:`1.25rem`},code:{fontFamily:e.fonts.mono,WebkitFontSmoothing:`antialiased`,MozOsxFontSmoothing:`grayscale`,display:`inline-block`,paddingLeft:2,paddingRight:2,verticalAlign:`baseline`,color:`inherit`},pre:{fontFamily:e.fonts.mono,WebkitFontSmoothing:`antialiased`,MozOsxFontSmoothing:`grayscale`,lineHeight:`18px`,padding:`11px 1rem`,whiteSpace:`pre-wrap`,color:`inherit`,borderRadius:3,margin:`1rem 0`}})),(0,yr.default)(1)(({color:e,background:t,typography:n})=>{let r=xr({typography:n});return{...r,body:{...r.body,position:`fixed`,width:`100vw`,height:`100vh`,overflow:`hidden`,color:e.defaultText,background:t.app},hr:{...r.hr,borderTop:`1px solid ${e.border}`},".sb-sr-only, .sb-hidden-until-focus:not(:focus)":br,".sb-hidden-until-focus":{opacity:0,transition:`opacity 150ms ease-out`},".sb-hidden-until-focus:focus":{opacity:1},"[data-sb-landmark]":{position:`relative`},"[data-sb-landmark]:focus-visible":{outline:`none`},"[data-sb-landmark]:focus-visible::after":{outline:`2px solid ${e.primary}`,outlineOffset:`-2px`},"[data-sb-landmark]::after":{content:`''`,position:`absolute`,inset:0,pointerEvents:`none`},".react-aria-Popover:focus-visible":{outline:`none`}}}),Sr={rubber:`cubic-bezier(0.175, 0.885, 0.335, 1.05)`},Cr=H` +import{a as e,n as t,r as n}from"./chunk-BneVvdWh.js";import{d as r,h as i,m as a}from"./iframe-B3N_zEeP.js";import{t as o}from"./react-B_0iYUWB.js";import{i as s,n as c,r as l,t as u}from"./chunk-3LY4VQVK-DyJr4LVG.js";function d(){return d=Object.assign?Object.assign.bind():function(e){for(var t=1;t{}));function p(e){if(e===void 0)throw ReferenceError(`this hasn't been initialised - super() hasn't been called`);return e}function m(e,t){return m=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},m(e,t)}function h(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,m(e,t)}function g(e){return g=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},g(e)}function _(e){try{return Function.toString.call(e).indexOf(`[native code]`)!==-1}catch{return typeof e==`function`}}function v(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch{}return(v=function(){return!!e})()}function y(e,t,n){if(v())return Reflect.construct.apply(null,arguments);var r=[null];r.push.apply(r,t);var i=new(e.bind.apply(e,r));return n&&m(i,n.prototype),i}function b(e){var t=typeof Map==`function`?new Map:void 0;return b=function(e){if(e===null||!_(e))return e;if(typeof e!=`function`)throw TypeError(`Super expression must either be null or a function`);if(t!==void 0){if(t.has(e))return t.get(e);t.set(e,n)}function n(){return y(e,arguments,g(this).constructor)}return n.prototype=Object.create(e.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),m(n,e)},b(e)}function x(e,t){return e.substr(-t.length)===t}function S(e){return typeof e==`string`&&e.match(we)?parseFloat(e):e}function C(e){return Math.round(e*255)}function ee(e,t,n){return C(e)+`,`+C(t)+`,`+C(n)}function te(e,t,n,r){if(r===void 0&&(r=ee),t===0)return r(n,n,n);var i=(e%360+360)%360/60,a=(1-Math.abs(2*n-1))*t,o=a*(1-Math.abs(i%2-1)),s=0,c=0,l=0;i>=0&&i<1?(s=a,c=o):i>=1&&i<2?(s=o,c=a):i>=2&&i<3?(c=a,l=o):i>=3&&i<4?(c=o,l=a):i>=4&&i<5?(s=o,l=a):i>=5&&i<6&&(s=a,l=o);var u=n-a/2,d=s+u,f=c+u,p=l+u;return r(d,f,p)}function ne(e){if(typeof e!=`string`)return e;var t=e.toLowerCase();return De[t]?`#`+De[t]:e}function w(e){if(typeof e!=`string`)throw new j(3);var t=ne(e);if(t.match(Oe))return{red:parseInt(``+t[1]+t[2],16),green:parseInt(``+t[3]+t[4],16),blue:parseInt(``+t[5]+t[6],16)};if(t.match(ke)){var n=parseFloat((parseInt(``+t[7]+t[8],16)/255).toFixed(2));return{red:parseInt(``+t[1]+t[2],16),green:parseInt(``+t[3]+t[4],16),blue:parseInt(``+t[5]+t[6],16),alpha:n}}if(t.match(Ae))return{red:parseInt(``+t[1]+t[1],16),green:parseInt(``+t[2]+t[2],16),blue:parseInt(``+t[3]+t[3],16)};if(t.match(je)){var r=parseFloat((parseInt(``+t[4]+t[4],16)/255).toFixed(2));return{red:parseInt(``+t[1]+t[1],16),green:parseInt(``+t[2]+t[2],16),blue:parseInt(``+t[3]+t[3],16),alpha:r}}var i=Me.exec(t);if(i)return{red:parseInt(``+i[1],10),green:parseInt(``+i[2],10),blue:parseInt(``+i[3],10)};var a=Ne.exec(t.substring(0,50));if(a)return{red:parseInt(``+a[1],10),green:parseInt(``+a[2],10),blue:parseInt(``+a[3],10),alpha:parseFloat(``+a[4])>1?parseFloat(``+a[4])/100:parseFloat(``+a[4])};var o=Pe.exec(t);if(o){var s=`rgb(`+te(parseInt(``+o[1],10),parseInt(``+o[2],10)/100,parseInt(``+o[3],10)/100)+`)`,c=Me.exec(s);if(!c)throw new j(4,t,s);return{red:parseInt(``+c[1],10),green:parseInt(``+c[2],10),blue:parseInt(``+c[3],10)}}var l=Fe.exec(t.substring(0,50));if(l){var u=`rgb(`+te(parseInt(``+l[1],10),parseInt(``+l[2],10)/100,parseInt(``+l[3],10)/100)+`)`,d=Me.exec(u);if(!d)throw new j(4,t,u);return{red:parseInt(``+d[1],10),green:parseInt(``+d[2],10),blue:parseInt(``+d[3],10),alpha:parseFloat(``+l[4])>1?parseFloat(``+l[4])/100:parseFloat(``+l[4])}}throw new j(5)}function re(e){var t=e.red/255,n=e.green/255,r=e.blue/255,i=Math.max(t,n,r),a=Math.min(t,n,r),o=(i+a)/2;if(i===a)return e.alpha===void 0?{hue:0,saturation:0,lightness:o}:{hue:0,saturation:0,lightness:o,alpha:e.alpha};var s,c=i-a,l=o>.5?c/(2-i-a):c/(i+a);switch(i){case t:s=(n-r)/c+(n=1?oe(e,t,n):`rgba(`+te(e,t,n)+`,`+r+`)`;if(typeof e==`object`&&t===void 0&&n===void 0&&r===void 0)return e.alpha>=1?oe(e.hue,e.saturation,e.lightness):`rgba(`+te(e.hue,e.saturation,e.lightness)+`,`+e.alpha+`)`;throw new j(2)}function le(e,t,n){if(typeof e==`number`&&typeof t==`number`&&typeof n==`number`)return Le(`#`+E(e)+E(t)+E(n));if(typeof e==`object`&&t===void 0&&n===void 0)return Le(`#`+E(e.red)+E(e.green)+E(e.blue));throw new j(6)}function D(e,t,n,r){if(typeof e==`string`&&typeof t==`number`){var i=w(e);return`rgba(`+i.red+`,`+i.green+`,`+i.blue+`,`+t+`)`}else{if(typeof e==`number`&&typeof t==`number`&&typeof n==`number`&&typeof r==`number`)return r>=1?le(e,t,n):`rgba(`+e+`,`+t+`,`+n+`,`+r+`)`;if(typeof e==`object`&&t===void 0&&n===void 0&&r===void 0)return e.alpha>=1?le(e.red,e.green,e.blue):`rgba(`+e.red+`,`+e.green+`,`+e.blue+`,`+e.alpha+`)`}throw new j(7)}function O(e){if(typeof e!=`object`)throw new j(8);if(ze(e))return D(e);if(Re(e))return le(e);if(Ve(e))return ce(e);if(Be(e))return se(e);throw new j(8)}function ue(e,t,n){return function(){var r=n.concat(Array.prototype.slice.call(arguments));return r.length>=t?e.apply(this,r):ue(e,t,r)}}function k(e){return ue(e,e.length,[])}function de(e,t){if(t===`transparent`)return t;var n=T(t);return O(d({},n,{hue:n.hue+parseFloat(e)}))}function A(e,t,n){return Math.max(e,Math.min(t,n))}function fe(e,t){if(t===`transparent`)return t;var n=T(t);return O(d({},n,{lightness:A(0,1,n.lightness-parseFloat(e))}))}function pe(e,t){if(t===`transparent`)return t;var n=T(t);return O(d({},n,{saturation:A(0,1,n.saturation-parseFloat(e))}))}function me(e,t){if(t===`transparent`)return t;var n=T(t);return O(d({},n,{lightness:A(0,1,n.lightness+parseFloat(e))}))}function he(e,t,n){if(t===`transparent`)return n;if(n===`transparent`)return t;if(e===0)return n;var r=w(t),i=d({},r,{alpha:typeof r.alpha==`number`?r.alpha:1}),a=w(n),o=d({},a,{alpha:typeof a.alpha==`number`?a.alpha:1}),s=i.alpha-o.alpha,c=parseFloat(e)*2-1,l=((c*s===-1?c:c+s)/(1+c*s)+1)/2,u=1-l;return D({red:Math.floor(i.red*l+o.red*u),green:Math.floor(i.green*l+o.green*u),blue:Math.floor(i.blue*l+o.blue*u),alpha:i.alpha*parseFloat(e)+o.alpha*(1-parseFloat(e))})}function ge(e,t){if(t===`transparent`)return t;var n=w(t);return D(d({},n,{alpha:A(0,1,((typeof n.alpha==`number`?n.alpha:1)*100+parseFloat(e)*100)/100)}))}function _e(e,t){if(t===`transparent`)return t;var n=T(t);return O(d({},n,{saturation:A(0,1,n.saturation+parseFloat(e))}))}function ve(e,t){return t===`transparent`?t:O(d({},T(t),{hue:parseFloat(e)}))}function ye(e,t){return t===`transparent`?t:O(d({},T(t),{lightness:parseFloat(e)}))}function be(e,t){return t===`transparent`?t:O(d({},T(t),{saturation:parseFloat(e)}))}function xe(e,t){return t===`transparent`?t:We(parseFloat(e),`rgb(0, 0, 0)`,t)}function Se(e,t){return t===`transparent`?t:We(parseFloat(e),`rgb(255, 255, 255)`,t)}function Ce(e,t){if(t===`transparent`)return t;var n=w(t);return D(d({},n,{alpha:A(0,1,((typeof n.alpha==`number`?n.alpha:1)*100-parseFloat(e)*100).toFixed(2)/100)}))}var j,we,Te,Ee,De,Oe,ke,Ae,je,Me,Ne,Pe,Fe,Ie,Le,Re,ze,Be,Ve,He,Ue,We,Ge,Ke,qe=t((()=>{f(),j=(function(e){h(t,e);function t(t){return p(e.call(this,`An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#`+t+` for more information.`)||this)}return t})(b(Error)),we=/^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/,Te=function(e){return function(t,n){n===void 0&&(n=`16px`);var r=t,i=n;if(typeof t==`string`){if(!x(t,`px`))throw new j(69,e,t);r=S(t)}if(typeof n==`string`){if(!x(n,`px`))throw new j(70,e,n);i=S(n)}if(typeof r==`string`)throw new j(71,t,e);if(typeof i==`string`)throw new j(72,n,e);return``+r/i+e}},Ee=Te,Ee(`em`),Ee(`rem`),De={aliceblue:`f0f8ff`,antiquewhite:`faebd7`,aqua:`00ffff`,aquamarine:`7fffd4`,azure:`f0ffff`,beige:`f5f5dc`,bisque:`ffe4c4`,black:`000`,blanchedalmond:`ffebcd`,blue:`0000ff`,blueviolet:`8a2be2`,brown:`a52a2a`,burlywood:`deb887`,cadetblue:`5f9ea0`,chartreuse:`7fff00`,chocolate:`d2691e`,coral:`ff7f50`,cornflowerblue:`6495ed`,cornsilk:`fff8dc`,crimson:`dc143c`,cyan:`00ffff`,darkblue:`00008b`,darkcyan:`008b8b`,darkgoldenrod:`b8860b`,darkgray:`a9a9a9`,darkgreen:`006400`,darkgrey:`a9a9a9`,darkkhaki:`bdb76b`,darkmagenta:`8b008b`,darkolivegreen:`556b2f`,darkorange:`ff8c00`,darkorchid:`9932cc`,darkred:`8b0000`,darksalmon:`e9967a`,darkseagreen:`8fbc8f`,darkslateblue:`483d8b`,darkslategray:`2f4f4f`,darkslategrey:`2f4f4f`,darkturquoise:`00ced1`,darkviolet:`9400d3`,deeppink:`ff1493`,deepskyblue:`00bfff`,dimgray:`696969`,dimgrey:`696969`,dodgerblue:`1e90ff`,firebrick:`b22222`,floralwhite:`fffaf0`,forestgreen:`228b22`,fuchsia:`ff00ff`,gainsboro:`dcdcdc`,ghostwhite:`f8f8ff`,gold:`ffd700`,goldenrod:`daa520`,gray:`808080`,green:`008000`,greenyellow:`adff2f`,grey:`808080`,honeydew:`f0fff0`,hotpink:`ff69b4`,indianred:`cd5c5c`,indigo:`4b0082`,ivory:`fffff0`,khaki:`f0e68c`,lavender:`e6e6fa`,lavenderblush:`fff0f5`,lawngreen:`7cfc00`,lemonchiffon:`fffacd`,lightblue:`add8e6`,lightcoral:`f08080`,lightcyan:`e0ffff`,lightgoldenrodyellow:`fafad2`,lightgray:`d3d3d3`,lightgreen:`90ee90`,lightgrey:`d3d3d3`,lightpink:`ffb6c1`,lightsalmon:`ffa07a`,lightseagreen:`20b2aa`,lightskyblue:`87cefa`,lightslategray:`789`,lightslategrey:`789`,lightsteelblue:`b0c4de`,lightyellow:`ffffe0`,lime:`0f0`,limegreen:`32cd32`,linen:`faf0e6`,magenta:`f0f`,maroon:`800000`,mediumaquamarine:`66cdaa`,mediumblue:`0000cd`,mediumorchid:`ba55d3`,mediumpurple:`9370db`,mediumseagreen:`3cb371`,mediumslateblue:`7b68ee`,mediumspringgreen:`00fa9a`,mediumturquoise:`48d1cc`,mediumvioletred:`c71585`,midnightblue:`191970`,mintcream:`f5fffa`,mistyrose:`ffe4e1`,moccasin:`ffe4b5`,navajowhite:`ffdead`,navy:`000080`,oldlace:`fdf5e6`,olive:`808000`,olivedrab:`6b8e23`,orange:`ffa500`,orangered:`ff4500`,orchid:`da70d6`,palegoldenrod:`eee8aa`,palegreen:`98fb98`,paleturquoise:`afeeee`,palevioletred:`db7093`,papayawhip:`ffefd5`,peachpuff:`ffdab9`,peru:`cd853f`,pink:`ffc0cb`,plum:`dda0dd`,powderblue:`b0e0e6`,purple:`800080`,rebeccapurple:`639`,red:`f00`,rosybrown:`bc8f8f`,royalblue:`4169e1`,saddlebrown:`8b4513`,salmon:`fa8072`,sandybrown:`f4a460`,seagreen:`2e8b57`,seashell:`fff5ee`,sienna:`a0522d`,silver:`c0c0c0`,skyblue:`87ceeb`,slateblue:`6a5acd`,slategray:`708090`,slategrey:`708090`,snow:`fffafa`,springgreen:`00ff7f`,steelblue:`4682b4`,tan:`d2b48c`,teal:`008080`,thistle:`d8bfd8`,tomato:`ff6347`,turquoise:`40e0d0`,violet:`ee82ee`,wheat:`f5deb3`,white:`fff`,whitesmoke:`f5f5f5`,yellow:`ff0`,yellowgreen:`9acd32`},Oe=/^#[a-fA-F0-9]{6}$/,ke=/^#[a-fA-F0-9]{8}$/,Ae=/^#[a-fA-F0-9]{3}$/,je=/^#[a-fA-F0-9]{4}$/,Me=/^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i,Ne=/^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i,Pe=/^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i,Fe=/^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i,Ie=function(e){return e.length===7&&e[1]===e[2]&&e[3]===e[4]&&e[5]===e[6]?`#`+e[1]+e[3]+e[5]:e},Le=Ie,Re=function(e){return typeof e.red==`number`&&typeof e.green==`number`&&typeof e.blue==`number`&&(typeof e.alpha!=`number`||typeof e.alpha>`u`)},ze=function(e){return typeof e.red==`number`&&typeof e.green==`number`&&typeof e.blue==`number`&&typeof e.alpha==`number`},Be=function(e){return typeof e.hue==`number`&&typeof e.saturation==`number`&&typeof e.lightness==`number`&&(typeof e.alpha!=`number`||typeof e.alpha>`u`)},Ve=function(e){return typeof e.hue==`number`&&typeof e.saturation==`number`&&typeof e.lightness==`number`&&typeof e.alpha==`number`},k(de),He=k(fe),k(pe),Ue=k(me),We=k(he),Ge=k(ge),k(_e),k(ve),k(ye),k(be),k(xe),k(Se),Ke=k(Ce)})),M,N,P,Je,Ye,Xe,Ze,Qe,$e,et,tt,nt,rt,it,at,ot,st,ct,F,lt,ut=t((()=>{qe(),M={primary:`#FF4785`,secondary:`#006DEB`,tertiary:`#FAFBFC`,ancillary:`#22a699`,orange:`#FC521F`,gold:`#FFAE00`,green:`#66BF3C`,seafoam:`#37D5D3`,purple:`#6F2CAC`,ultraviolet:`#2A0481`,lightest:`#FFFFFF`,lighter:`#F6F9FC`,light:`#EEF2F6`,mediumlight:`#ECF2F9`,medium:`#D9E5F2`,mediumdark:`#737F8C`,dark:`#5C6570`,darker:`#454C54`,darkest:`#2E3338`,border:`hsl(212 50% 30% / 0.15)`,positive:`#66BF3C`,warning:`#E69D00`,negative:`#FF4400`,critical:`#FFFFFF`,defaultText:`#2E3338`,inverseText:`#FFFFFF`,positiveText:`#427C27`,warningText:`#955B1E`,negativeText:`#C23400`},N={app:`#F6F9FC`,bar:M.lightest,content:M.lightest,preview:M.lightest,gridCellSize:10,hoverable:`#DBECFF`,positive:`#F1FFEB`,warning:`#FFF9EB`,negative:`#FFF0EB`,critical:`#D13800`},P={fonts:{base:[`"Nunito Sans"`,`-apple-system`,`".SFNSText-Regular"`,`"San Francisco"`,`BlinkMacSystemFont`,`"Segoe UI"`,`"Helvetica Neue"`,`Helvetica`,`Arial`,`sans-serif`].join(`, `),mono:[`ui-monospace`,`Menlo`,`Monaco`,`"Roboto Mono"`,`"Oxygen Mono"`,`"Ubuntu Monospace"`,`"Source Code Pro"`,`"Droid Sans Mono"`,`"Courier New"`,`monospace`].join(`, `)},weight:{regular:400,bold:700},size:{s1:12,s2:14,s3:16,m1:20,m2:24,m3:28,l1:32,l2:40,l3:48,code:90}},Je={light:{fgColor:{default:M.darkest,muted:M.dark,accent:M.secondary,inverse:M.lightest,positive:`#427C27`,warning:`#7A4100`,negative:`#C23400`,critical:`#FFFFFF`},bgColor:{default:M.lightest,muted:N.app,positive:`#F1FFEB`,warning:`#FFF7EB`,negative:`#FFF0EB`,critical:`#D13800`},borderColor:{default:M.border,muted:`hsl(0 0% 0% / 0.1)`,inverse:`hsl(0 0% 100% / 0.1)`,positive:`#BFE7AC`,warning:`#FFCE85`,negative:`#FFC3AD`,critical:`hsl(16 100% 100% / 0)`}},dark:{fgColor:{default:`#C9CCCF`,muted:`#95999D`,accent:`#479DFF`,inverse:`#1B1C1D`,positive:`#86CE64`,warning:`#FFAD33`,negative:`#FF6933`,critical:`#FF6933`},bgColor:{default:`#222325`,muted:`#1B1C1D`,positive:`hsl(101 100% 100% / 0)`,warning:`hsl(101 100% 100% / 0)`,negative:`hsl(101 100% 100% / 0)`,critical:`hsl(101 100% 100% / 0)`},borderColor:{default:`hsl(0 0% 100% / 0.1)`,muted:`hsl(0 0% 100% / 0.5)`,inverse:`hsl(0 0% 0% / 0.1)`,positive:`hsl(101 52% 64% / 0.15)`,warning:`hsl(36 100% 64% / 0.15)`,negative:`hsl(16 100% 64% / 0.15)`,critical:`#FF6933`}}},Ye={base:`dark`,colorPrimary:`#FF4785`,colorSecondary:`#479DFF`,appBg:`#1B1C1D`,appContentBg:`#222325`,appHoverBg:`#233952`,appPreviewBg:M.lightest,appBorderColor:`hsl(0 0% 100% / 0.1)`,appBorderRadius:4,fontBase:P.fonts.base,fontCode:P.fonts.mono,textColor:`#C9CCCF`,textInverseColor:`#1B1C1D`,textMutedColor:`#95999D`,barTextColor:`#95999D`,barHoverColor:`#70B3FF`,barSelectedColor:`#479DFF`,barBg:`#222325`,buttonBg:`#1B1C1D`,buttonBorder:`hsl(0 0% 100% / 0.1)`,booleanBg:`#1B1C1D`,booleanSelectedBg:`#292B2E`,inputBg:`#1B1C1D`,inputBorder:`hsl(0 0% 100% / 0.1)`,inputTextColor:`#C9CCCF`,inputBorderRadius:4},Xe={base:`light`,colorPrimary:M.primary,colorSecondary:M.secondary,appBg:N.app,appContentBg:M.lightest,appHoverBg:`#DBECFF`,appPreviewBg:M.lightest,appBorderColor:M.border,appBorderRadius:4,fontBase:P.fonts.base,fontCode:P.fonts.mono,textColor:M.darkest,textInverseColor:M.lightest,textMutedColor:M.dark,barTextColor:M.dark,barHoverColor:`#005CC7`,barSelectedColor:`#0063D6`,barBg:M.lightest,buttonBg:N.app,buttonBorder:M.medium,booleanBg:M.mediumlight,booleanSelectedBg:M.lightest,inputBg:M.lightest,inputBorder:M.border,inputTextColor:M.darkest,inputBorderRadius:4},{logger:Ze}=__STORYBOOK_MODULE_CLIENT_LOGGER__,{global:Qe}=__STORYBOOK_MODULE_GLOBAL__,{window:$e}=Qe,et=e=>({color:e}),tt=e=>typeof e==`string`?!0:(Ze.warn(`Color passed to theme object should be a string. Instead ${e}(${typeof e}) was passed.`),!1),nt=e=>!/(gradient|var|calc)/.test(e),rt=(e,t)=>e===`darken`?D(`${He(1,t)}`,.95):e===`lighten`?D(`${Ue(1,t)}`,.95):t,it=e=>t=>{if(!tt(t)||!nt(t))return t;try{return rt(e,t)}catch{return t}},at=it(`lighten`),it(`darken`),ot=()=>!$e||!$e.matchMedia?`light`:$e.matchMedia(`(prefers-color-scheme: dark)`).matches?`dark`:`light`,st={light:Xe,dark:Ye},ct=ot(),F={...st,normal:st[ct]},lt=(e={base:ct},t)=>{let n={...F[ct],...F[e.base]||{},...e,base:F[e.base]?e.base:ct};return{...t,...n,barSelectedColor:e.barSelectedColor||n.colorSecondary}}})),dt=n({ThemeProvider:()=>$n,background:()=>N,color:()=>M,convert:()=>Nr,createCache:()=>kn,createReset:()=>xr,css:()=>Qt,ensure:()=>Vr,getPreferredColorScheme:()=>ot,ignoreSsrWarning:()=>Hr,isPropValid:()=>lr,jsx:()=>ar,keyframes:()=>H,srOnlyStyles:()=>br,styled:()=>vr,themes:()=>F,tokens:()=>Je,typography:()=>P,useTheme:()=>Xn});function ft(e){if(e.sheet)return e.sheet;for(var t=0;t0?L(Z,--Y):0,J--,X===10&&(J=1,vn--),X}function z(){return X=Y2||Ot(X)>3?``:` `}function Nt(e,t){for(;--t&&z()&&!(X<48||X>102||X>57&&X<65||X>70&&X<97););return Dt(e,Et()+(t<6&&B()==32&&z()==32))}function Pt(e){for(;z();)switch(X){case e:return Y;case 34:case 39:e!==34&&e!==39&&Pt(X);break;case 40:e===41&&Pt(e);break;case 92:z();break}return Y}function Ft(e,t){for(;z()&&e+X!==57&&!(e+X===84&&B()===47););return`/*`+Dt(t,Y-1)+`*`+gn(e===47?e:z())}function It(e){for(;!Ot(B());)z();return Dt(e,Y)}function Lt(e){return At(Rt(``,null,null,null,[``],e=kt(e),0,[0],e))}function Rt(e,t,n,r,i,a,o,s,c){for(var l=0,u=0,d=o,f=0,p=0,m=0,h=1,g=1,_=1,v=0,y=``,b=i,x=a,S=r,C=y;g;)switch(m=v,v=z()){case 40:if(m!=108&&L(C,d-1)==58){_t(C+=I(jt(v),`&`,`&\f`),`&\f`)!=-1&&(_=-1);break}case 34:case 39:case 91:C+=jt(v);break;case 9:case 10:case 13:case 32:C+=Mt(m);break;case 92:C+=Nt(Et()-1,7);continue;case 47:switch(B()){case 42:case 47:bt(Bt(Ft(z(),Et()),t,n),c);break;default:C+=`/`}break;case 123*h:s[l++]=R(C)*_;case 125*h:case 59:case 0:switch(v){case 0:case 125:g=0;case 59+u:_==-1&&(C=I(C,/\f/g,``)),p>0&&R(C)-d&&bt(p>32?Vt(C+`;`,r,n,d-1):Vt(I(C,` `,``)+`;`,r,n,d-2),c);break;case 59:C+=`;`;default:if(bt(S=zt(C,t,n,l,u,i,s,y,b=[],x=[],d),a),v===123)if(u===0)Rt(C,t,S,S,b,a,d,s,x);else switch(f===99&&L(C,3)===110?100:f){case 100:case 108:case 109:case 115:Rt(e,S,S,r&&bt(zt(e,S,S,0,0,i,s,y,i,b=[],d),x),i,x,d,s,r?b:x);break;default:Rt(C,S,S,S,[``],x,0,s,x)}}l=u=p=0,h=_=1,y=C=``,d=o;break;case 58:d=1+R(C),p=m;default:if(h<1){if(v==123)--h;else if(v==125&&h++==0&&Tt()==125)continue}switch(C+=gn(v),v*h){case 38:_=u>0?1:(C+=`\f`,-1);break;case 44:s[l++]=(R(C)-1)*_,_=1;break;case 64:B()===45&&(C+=jt(z())),f=B(),u=d=R(y=C+=It(Et())),v++;break;case 45:m===45&&R(C)==2&&(h=0)}}return a}function zt(e,t,n,r,i,a,o,s,c,l,u){for(var d=i-1,f=i===0?a:[``],p=yt(f),m=0,h=0,g=0;m0?f[_]+` `+v:I(v,/&\f/g,f[_])))&&(c[g++]=y);return St(e,t,n,i===0?un:s,c,l,u)}function Bt(e,t,n){return St(e,t,n,ln,gn(wt()),vt(e,2,-2),0)}function Vt(e,t,n,r){return St(e,t,n,dn,vt(e,0,r),vt(e,r+1,-1),r)}function V(e,t){for(var n=``,r=yt(e),i=0;i6)switch(L(e,t+1)){case 109:if(L(e,t+4)!==45)break;case 102:return I(e,/(.+:)(.+)-([^]+)/,`$1`+q+`$2-$3$1`+cn+(L(e,t+3)==108?`$3`:`$2-$3`))+e;case 115:return~_t(e,`stretch`)?Kt(I(e,`stretch`,`fill-available`),t)+e:e}break;case 4949:if(L(e,t+1)!==115)break;case 6444:switch(L(e,R(e)-3-(~_t(e,`!important`)&&10))){case 107:return I(e,`:`,`:`+q)+e;case 101:return I(e,/(.+:)([^;!]+)(;|!.+)?/,`$1`+q+(L(e,14)===45?`inline-`:``)+`box$3$1`+q+`$2$3$1`+K+`$2box$3`)+e}break;case 5936:switch(L(e,t+11)){case 114:return q+e+K+I(e,/[svh]\w+-[tblr]{2}/,`tb`)+e;case 108:return q+e+K+I(e,/[svh]\w+-[tblr]{2}/,`tb-rl`)+e;case 45:return q+e+K+I(e,/[svh]\w+-[tblr]{2}/,`lr`)+e}return q+e+K+e+e}return e}function qt(e,t,n){var r=``;return n.split(` `).forEach(function(n){e[n]===void 0?n&&(r+=n+` `):t.push(e[n]+`;`)}),r}function Jt(e){for(var t=0,n,r=0,i=e.length;i>=4;++r,i-=4)n=e.charCodeAt(r)&255|(e.charCodeAt(++r)&255)<<8|(e.charCodeAt(++r)&255)<<16|(e.charCodeAt(++r)&255)<<24,n=(n&65535)*1540483477+((n>>>16)*59797<<16),n^=n>>>24,t=(n&65535)*1540483477+((n>>>16)*59797<<16)^(t&65535)*1540483477+((t>>>16)*59797<<16);switch(i){case 3:t^=(e.charCodeAt(r+2)&255)<<16;case 2:t^=(e.charCodeAt(r+1)&255)<<8;case 1:t^=e.charCodeAt(r)&255,t=(t&65535)*1540483477+((t>>>16)*59797<<16)}return t^=t>>>13,t=(t&65535)*1540483477+((t>>>16)*59797<<16),((t^t>>>15)>>>0).toString(36)}function Yt(e,t,n){if(n==null)return``;var r=n;if(r.__emotion_styles!==void 0)return r;switch(typeof n){case`boolean`:return``;case`object`:var i=n;if(i.anim===1)return Q={name:i.name,styles:i.styles,next:Q},i.name;var a=n;if(a.styles!==void 0){var o=a.next;if(o!==void 0)for(;o!==void 0;)Q={name:o.name,styles:o.styles,next:Q},o=o.next;return a.styles+`;`}return Xt(e,t,n);case`function`:if(e!==void 0){var s=Q,c=n(e);return Q=s,Yt(e,t,c)}break}var l=n;if(t==null)return l;var u=t[l];return u===void 0?l:u}function Xt(e,t,n){var r=``;if(Array.isArray(n))for(var i=0;i{ut(),qe(),f(),l(),c(),i(),U=e(o(),1),en=e(o(),1),tn=e(o(),1),W=e(o(),1),G=e(o(),1),o(),nn=r({"../../node_modules/react-is/cjs/react-is.production.min.js"(e){var t=typeof Symbol==`function`&&Symbol.for,n=t?Symbol.for(`react.element`):60103,r=t?Symbol.for(`react.portal`):60106,i=t?Symbol.for(`react.fragment`):60107,a=t?Symbol.for(`react.strict_mode`):60108,o=t?Symbol.for(`react.profiler`):60114,s=t?Symbol.for(`react.provider`):60109,c=t?Symbol.for(`react.context`):60110,l=t?Symbol.for(`react.async_mode`):60111,u=t?Symbol.for(`react.concurrent_mode`):60111,d=t?Symbol.for(`react.forward_ref`):60112,f=t?Symbol.for(`react.suspense`):60113,p=t?Symbol.for(`react.suspense_list`):60120,m=t?Symbol.for(`react.memo`):60115,h=t?Symbol.for(`react.lazy`):60116,g=t?Symbol.for(`react.block`):60121,_=t?Symbol.for(`react.fundamental`):60117,v=t?Symbol.for(`react.responder`):60118,y=t?Symbol.for(`react.scope`):60119;function b(e){if(typeof e==`object`&&e){var t=e.$$typeof;switch(t){case n:switch(e=e.type,e){case l:case u:case i:case o:case a:case f:return e;default:switch(e&&=e.$$typeof,e){case c:case d:case h:case m:case s:return e;default:return t}}case r:return t}}}function x(e){return b(e)===u}e.AsyncMode=l,e.ConcurrentMode=u,e.ContextConsumer=c,e.ContextProvider=s,e.Element=n,e.ForwardRef=d,e.Fragment=i,e.Lazy=h,e.Memo=m,e.Portal=r,e.Profiler=o,e.StrictMode=a,e.Suspense=f,e.isAsyncMode=function(e){return x(e)||b(e)===l},e.isConcurrentMode=x,e.isContextConsumer=function(e){return b(e)===c},e.isContextProvider=function(e){return b(e)===s},e.isElement=function(e){return typeof e==`object`&&!!e&&e.$$typeof===n},e.isForwardRef=function(e){return b(e)===d},e.isFragment=function(e){return b(e)===i},e.isLazy=function(e){return b(e)===h},e.isMemo=function(e){return b(e)===m},e.isPortal=function(e){return b(e)===r},e.isProfiler=function(e){return b(e)===o},e.isStrictMode=function(e){return b(e)===a},e.isSuspense=function(e){return b(e)===f},e.isValidElementType=function(e){return typeof e==`string`||typeof e==`function`||e===i||e===u||e===o||e===a||e===f||e===p||typeof e==`object`&&!!e&&(e.$$typeof===h||e.$$typeof===m||e.$$typeof===s||e.$$typeof===c||e.$$typeof===d||e.$$typeof===_||e.$$typeof===v||e.$$typeof===y||e.$$typeof===g)},e.typeOf=b}}),r({"../../node_modules/react-is/cjs/react-is.development.js"(e){}}),rn=r({"../../node_modules/react-is/index.js"(e,t){t.exports=nn()}}),an=r({"../../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js"(e,t){var n=rn(),r={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},i={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},a={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},o={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},s={};s[n.ForwardRef]=a,s[n.Memo]=o;function c(e){return n.isMemo(e)?o:s[e.$$typeof]||r}var l=Object.defineProperty,u=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,f=Object.getOwnPropertyDescriptor,p=Object.getPrototypeOf,m=Object.prototype;function h(e,t,n){if(typeof t!=`string`){if(m){var r=p(t);r&&r!==m&&h(e,r,n)}var a=u(t);d&&(a=a.concat(d(t)));for(var o=c(e),s=c(t),g=0;g-1&&!e.return)switch(e.type){case dn:e.return=Kt(e.value,e.length);break;case pn:return V([Ct(e,{value:I(e.value,`@`,`@`+q)})],r);case un:if(e.length)return xt(e.props,function(t){switch(gt(t,/(::plac\w+|:read-\w+)/)){case`:read-only`:case`:read-write`:return V([Ct(e,{props:[I(t,/:(read-\w+)/,`:`+cn+`$1`)]})],r);case`::placeholder`:return V([Ct(e,{props:[I(t,/:(plac\w+)/,`:`+q+`input-$1`)]}),Ct(e,{props:[I(t,/:(plac\w+)/,`:`+cn+`$1`)]}),Ct(e,{props:[I(t,/:(plac\w+)/,K+`input-$1`)]})],r)}return``})}},On=[Dn],kn=function(e){var t=e.key;if(t===`css`){var n=document.querySelectorAll(`style[data-emotion]:not([data-s])`);Array.prototype.forEach.call(n,function(e){e.getAttribute(`data-emotion`).indexOf(` `)!==-1&&(document.head.appendChild(e),e.setAttribute(`data-s`,``))})}var r=e.stylisPlugins||On,i={},a,o=[];a=e.container||document.head,Array.prototype.forEach.call(document.querySelectorAll(`style[data-emotion^="`+t+` "]`),function(e){for(var t=e.getAttribute(`data-emotion`).split(` `),n=1;n96?dr:fr},mr=function(e,t,n){var r;if(t){var i=t.shouldForwardProp;r=e.__emotion_forwardProp&&i?function(t){return e.__emotion_forwardProp(t)&&i(t)}:i}return typeof r!=`function`&&n&&(r=e.__emotion_forwardProp),r},hr=function(e){var t=e.cache,n=e.serialized,r=e.isStringTag;return jn(t,n,r),Gn(function(){return Mn(t,n,r)}),null},gr=function e(t,n){var r=t.__emotion_real===t,i=r&&t.__emotion_base||t,a,o;n!==void 0&&(a=n.label,o=n.target);var s=mr(t,n,r),c=s||pr(i),l=!c(`as`);return function(){var u=arguments,f=r&&t.__emotion_styles!==void 0?t.__emotion_styles.slice(0):[];if(a!==void 0&&f.push(`label:`+a+`;`),u[0]==null||u[0].raw===void 0)f.push.apply(f,u);else{var p=u[0];f.push(p[0]);for(var m=u.length,h=1;h({body:{fontFamily:e.fonts.base,fontSize:e.size.s3,margin:0,WebkitFontSmoothing:`antialiased`,MozOsxFontSmoothing:`grayscale`,WebkitTapHighlightColor:`rgba(0, 0, 0, 0)`,WebkitOverflowScrolling:`touch`},"*":{boxSizing:`border-box`},"h1, h2, h3, h4, h5, h6":{fontWeight:e.weight.regular,margin:0,padding:0},"button, input, textarea, select":{fontFamily:`inherit`,fontSize:`inherit`,boxSizing:`border-box`},sub:{fontSize:`0.8em`,bottom:`-0.2em`},sup:{fontSize:`0.8em`,top:`-0.2em`},"b, strong":{fontWeight:e.weight.bold},hr:{border:`none`,borderTop:`1px solid silver`,clear:`both`,marginBottom:`1.25rem`},code:{fontFamily:e.fonts.mono,WebkitFontSmoothing:`antialiased`,MozOsxFontSmoothing:`grayscale`,display:`inline-block`,paddingLeft:2,paddingRight:2,verticalAlign:`baseline`,color:`inherit`},pre:{fontFamily:e.fonts.mono,WebkitFontSmoothing:`antialiased`,MozOsxFontSmoothing:`grayscale`,lineHeight:`18px`,padding:`11px 1rem`,whiteSpace:`pre-wrap`,color:`inherit`,borderRadius:3,margin:`1rem 0`}})),(0,yr.default)(1)(({color:e,background:t,typography:n})=>{let r=xr({typography:n});return{...r,body:{...r.body,position:`fixed`,width:`100vw`,height:`100vh`,overflow:`hidden`,color:e.defaultText,background:t.app},hr:{...r.hr,borderTop:`1px solid ${e.border}`},".sb-sr-only, .sb-hidden-until-focus:not(:focus)":br,".sb-hidden-until-focus":{opacity:0,transition:`opacity 150ms ease-out`},".sb-hidden-until-focus:focus":{opacity:1},"[data-sb-landmark]":{position:`relative`},"[data-sb-landmark]:focus-visible":{outline:`none`},"[data-sb-landmark]:focus-visible::after":{outline:`2px solid ${e.primary}`,outlineOffset:`-2px`},"[data-sb-landmark]::after":{content:`''`,position:`absolute`,inset:0,pointerEvents:`none`},".react-aria-Popover:focus-visible":{outline:`none`}}}),Sr={rubber:`cubic-bezier(0.175, 0.885, 0.335, 1.05)`},Cr=H` from { transform: rotate(0deg); } diff --git a/storybook/static/iframe.html b/storybook/static/iframe.html index 8062e8e445..4b8e8894c0 100644 --- a/storybook/static/iframe.html +++ b/storybook/static/iframe.html @@ -46,7 +46,7 @@ window.FRAMEWORK_OPTIONS = {}; window.CHANNEL_OPTIONS = {}; window.FEATURES = {"argTypeTargetsV7":true,"legacyDecoratorFileOrder":false,"disallowImplicitActionsInRenderV8":true,"viewport":true,"highlight":true,"controls":true,"interactions":true,"actions":true,"backgrounds":true,"outline":true,"measure":true,"sidebarOnboardingChecklist":true,"componentsManifest":true}; - window.STORIES = [{"titlePrefix":"","directory":"./stories","files":"**/*.mdx","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.mdx)$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|mjs|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|mjs|ts|tsx))$"}]; + window.STORIES = [{"titlePrefix":"","directory":"./stories","files":"**/*.mdx","importPathMatcher":"^\\.[\\\\/](?:stories(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.mdx)$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|mjs|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|mjs|ts|tsx))$"}]; window.DOCS_OPTIONS = {"defaultName":"Docs"}; window.TAGS_OPTIONS = {}; @@ -547,9 +547,10 @@ } - + + diff --git a/storybook/static/index.html b/storybook/static/index.html index a2cb7c9a43..0337aabaa7 100644 --- a/storybook/static/index.html +++ b/storybook/static/index.html @@ -60,6 +60,8 @@ + +
diff --git a/storybook/static/index.json b/storybook/static/index.json index a755faf911..2b9532546e 100644 --- a/storybook/static/index.json +++ b/storybook/static/index.json @@ -1 +1 @@ -{"v":5,"entries":{"components-button--docs":{"id":"components-button--docs","title":"Components/Button","name":"Docs","importPath":"./stories/Button.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-button--default":{"type":"story","subtype":"story","id":"components-button--default","name":"Default Button","title":"Components/Button","importPath":"./stories/Button.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-button--primary":{"type":"story","subtype":"story","id":"components-button--primary","name":"Primary Button","title":"Components/Button","importPath":"./stories/Button.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Primary"},"components-button--secondary":{"type":"story","subtype":"story","id":"components-button--secondary","name":"Secondary Button","title":"Components/Button","importPath":"./stories/Button.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Secondary"},"components-button--edit-button":{"type":"story","subtype":"story","id":"components-button--edit-button","name":"Edit Button","title":"Components/Button","importPath":"./stories/Button.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"EditButton"},"components-checkbox--docs":{"id":"components-checkbox--docs","title":"Components/Checkbox","name":"Docs","importPath":"./stories/Checkbox.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-checkbox--basic":{"type":"story","subtype":"story","id":"components-checkbox--basic","name":"Default","title":"Components/Checkbox","importPath":"./stories/Checkbox.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Basic"},"components-combobox--docs":{"id":"components-combobox--docs","title":"Components/ComboBox","name":"Docs","importPath":"./stories/ComboBox.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-combobox--combo-box":{"type":"story","subtype":"story","id":"components-combobox--combo-box","name":"ComboBox","title":"Components/ComboBox","importPath":"./stories/ComboBox.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"ComboBox"},"components-input--docs":{"id":"components-input--docs","title":"Components/Input","name":"Docs","importPath":"./stories/Input.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-input--textarea":{"type":"story","subtype":"story","id":"components-input--textarea","name":"Textarea Control","title":"Components/Input","importPath":"./stories/Input.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Textarea"},"components-input--text-field":{"type":"story","subtype":"story","id":"components-input--text-field","name":"Text Field Control","title":"Components/Input","importPath":"./stories/Input.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"TextField"},"components-label--docs":{"id":"components-label--docs","title":"Components/Label","name":"Docs","importPath":"./stories/Label.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-label--header":{"type":"story","subtype":"story","id":"components-label--header","name":"Header Label","title":"Components/Label","importPath":"./stories/Label.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Header"},"components-label--link":{"type":"story","subtype":"story","id":"components-label--link","name":"Link Label","title":"Components/Label","importPath":"./stories/Label.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Link"},"components-loader--docs":{"id":"components-loader--docs","title":"Components/Loader","name":"Docs","importPath":"./stories/Loader.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-loader--interactive-loader":{"type":"story","subtype":"story","id":"components-loader--interactive-loader","name":"Interactive Loader","title":"Components/Loader","importPath":"./stories/Loader.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"InteractiveLoader"},"components-separator--docs":{"id":"components-separator--docs","title":"Components/Separator","name":"Docs","importPath":"./stories/Separator.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-separator--horizontal":{"type":"story","subtype":"story","id":"components-separator--horizontal","name":"Horizontal Separator","title":"Components/Separator","importPath":"./stories/Separator.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Horizontal"}}} \ No newline at end of file +{"v":5,"entries":{"foundations-typography--text-styles":{"type":"story","subtype":"story","id":"foundations-typography--text-styles","name":"Text Styles","title":"Foundations/Typography","importPath":"./stories/foundations/Typography.stories.js","tags":["dev","test","manifest"],"exportName":"TextStyles"},"foundations-typography--content-example":{"type":"story","subtype":"story","id":"foundations-typography--content-example","name":"Content Example","title":"Foundations/Typography","importPath":"./stories/foundations/Typography.stories.js","tags":["dev","test","manifest"],"exportName":"ContentExample"},"foundations-typography--links":{"type":"story","subtype":"story","id":"foundations-typography--links","name":"Links","title":"Foundations/Typography","importPath":"./stories/foundations/Typography.stories.js","tags":["dev","test","manifest"],"exportName":"Links"},"foundations-colors--palette":{"type":"story","subtype":"story","id":"foundations-colors--palette","name":"Palette","title":"Foundations/Colors","importPath":"./stories/foundations/Colors.stories.js","tags":["dev","test","manifest"],"exportName":"Palette"},"foundations-icons--catalog":{"type":"story","subtype":"story","id":"foundations-icons--catalog","name":"Catalog","title":"Foundations/Icons","importPath":"./stories/foundations/Icons.stories.js","tags":["test","manifest"],"exportName":"Catalog"},"components-buttons-dialog-buttons-primary--docs":{"id":"components-buttons-dialog-buttons-primary--docs","title":"Components/Buttons/Dialog Buttons/Primary","name":"Docs","importPath":"./stories/components/DialogButtonsPrimary.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-buttons-dialog-buttons-primary--default":{"type":"story","subtype":"story","id":"components-buttons-dialog-buttons-primary--default","name":"Default","title":"Components/Buttons/Dialog Buttons/Primary","importPath":"./stories/components/DialogButtonsPrimary.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-buttons-dialog-buttons-primary--hovered":{"type":"story","subtype":"story","id":"components-buttons-dialog-buttons-primary--hovered","name":"Hovered","title":"Components/Buttons/Dialog Buttons/Primary","importPath":"./stories/components/DialogButtonsPrimary.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Hovered"},"components-buttons-dialog-buttons-primary--clicked":{"type":"story","subtype":"story","id":"components-buttons-dialog-buttons-primary--clicked","name":"Clicked","title":"Components/Buttons/Dialog Buttons/Primary","importPath":"./stories/components/DialogButtonsPrimary.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Clicked"},"components-buttons-dialog-buttons-primary--disabled":{"type":"story","subtype":"story","id":"components-buttons-dialog-buttons-primary--disabled","name":"Disabled","title":"Components/Buttons/Dialog Buttons/Primary","importPath":"./stories/components/DialogButtonsPrimary.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Disabled"},"components-buttons-dialog-buttons-primary--loading":{"type":"story","subtype":"story","id":"components-buttons-dialog-buttons-primary--loading","name":"Loading","title":"Components/Buttons/Dialog Buttons/Primary","importPath":"./stories/components/DialogButtonsPrimary.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Loading"},"components-buttons-dialog-buttons-primary--scale":{"type":"story","subtype":"story","id":"components-buttons-dialog-buttons-primary--scale","name":"Scale","title":"Components/Buttons/Dialog Buttons/Primary","importPath":"./stories/components/DialogButtonsPrimary.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Scale"},"components-buttons-dialog-buttons-secondary--docs":{"id":"components-buttons-dialog-buttons-secondary--docs","title":"Components/Buttons/Dialog Buttons/Secondary","name":"Docs","importPath":"./stories/components/DialogButtonsSecondary.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-buttons-dialog-buttons-secondary--default":{"type":"story","subtype":"story","id":"components-buttons-dialog-buttons-secondary--default","name":"Default","title":"Components/Buttons/Dialog Buttons/Secondary","importPath":"./stories/components/DialogButtonsSecondary.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-buttons-dialog-buttons-secondary--hovered":{"type":"story","subtype":"story","id":"components-buttons-dialog-buttons-secondary--hovered","name":"Hovered","title":"Components/Buttons/Dialog Buttons/Secondary","importPath":"./stories/components/DialogButtonsSecondary.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Hovered"},"components-buttons-dialog-buttons-secondary--clicked":{"type":"story","subtype":"story","id":"components-buttons-dialog-buttons-secondary--clicked","name":"Clicked","title":"Components/Buttons/Dialog Buttons/Secondary","importPath":"./stories/components/DialogButtonsSecondary.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Clicked"},"components-buttons-dialog-buttons-secondary--disabled":{"type":"story","subtype":"story","id":"components-buttons-dialog-buttons-secondary--disabled","name":"Disabled","title":"Components/Buttons/Dialog Buttons/Secondary","importPath":"./stories/components/DialogButtonsSecondary.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Disabled"},"components-buttons-dialog-buttons-secondary--loading":{"type":"story","subtype":"story","id":"components-buttons-dialog-buttons-secondary--loading","name":"Loading","title":"Components/Buttons/Dialog Buttons/Secondary","importPath":"./stories/components/DialogButtonsSecondary.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Loading"},"components-buttons-dialog-buttons-secondary--scale":{"type":"story","subtype":"story","id":"components-buttons-dialog-buttons-secondary--scale","name":"Scale","title":"Components/Buttons/Dialog Buttons/Secondary","importPath":"./stories/components/DialogButtonsSecondary.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Scale"},"components-buttons-panel-buttons--docs":{"id":"components-buttons-panel-buttons--docs","title":"Components/Buttons/Panel Buttons","name":"Docs","importPath":"./stories/components/PanelButtons.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-buttons-panel-buttons--default":{"type":"story","subtype":"story","id":"components-buttons-panel-buttons--default","name":"Default","title":"Components/Buttons/Panel Buttons","importPath":"./stories/components/PanelButtons.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-buttons-panel-buttons--hovered-buttons":{"type":"story","subtype":"story","id":"components-buttons-panel-buttons--hovered-buttons","name":"Hovered Buttons","title":"Components/Buttons/Panel Buttons","importPath":"./stories/components/PanelButtons.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"HoveredButtons"},"components-buttons-panel-buttons--clicked-buttons":{"type":"story","subtype":"story","id":"components-buttons-panel-buttons--clicked-buttons","name":"Clicked Buttons","title":"Components/Buttons/Panel Buttons","importPath":"./stories/components/PanelButtons.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"ClickedButtons"},"components-buttons-panel-buttons--disabled-buttons":{"type":"story","subtype":"story","id":"components-buttons-panel-buttons--disabled-buttons","name":"Disabled Buttons","title":"Components/Buttons/Panel Buttons","importPath":"./stories/components/PanelButtons.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"DisabledButtons"},"components-buttons-panel-buttons--is-loading-buttons":{"type":"story","subtype":"story","id":"components-buttons-panel-buttons--is-loading-buttons","name":"Is Loading Buttons","title":"Components/Buttons/Panel Buttons","importPath":"./stories/components/PanelButtons.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"IsLoadingButtons"},"components-buttons-panel-buttons--scale-buttons":{"type":"story","subtype":"story","id":"components-buttons-panel-buttons--scale-buttons","name":"Scale Buttons","title":"Components/Buttons/Panel Buttons","importPath":"./stories/components/PanelButtons.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"ScaleButtons"},"components-buttons-icon-buttons--docs":{"id":"components-buttons-icon-buttons--docs","title":"Components/Buttons/Icon Buttons","name":"Docs","importPath":"./stories/components/IconButtons.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-buttons-icon-buttons--default":{"type":"story","subtype":"story","id":"components-buttons-icon-buttons--default","name":"Default","title":"Components/Buttons/Icon Buttons","importPath":"./stories/components/IconButtons.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-buttons-icon-buttons--outline-buttons":{"type":"story","subtype":"story","id":"components-buttons-icon-buttons--outline-buttons","name":"Outline Buttons","title":"Components/Buttons/Icon Buttons","importPath":"./stories/components/IconButtons.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"OutlineButtons"},"components-buttons-icon-buttons--solid-buttons":{"type":"story","subtype":"story","id":"components-buttons-icon-buttons--solid-buttons","name":"Solid Buttons","title":"Components/Buttons/Icon Buttons","importPath":"./stories/components/IconButtons.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"SolidButtons"},"components-buttons-icon-buttons--right-expander-buttons":{"type":"story","subtype":"story","id":"components-buttons-icon-buttons--right-expander-buttons","name":"Right Expander Buttons","title":"Components/Buttons/Icon Buttons","importPath":"./stories/components/IconButtons.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"RightExpanderButtons"},"components-buttons-icon-buttons--solid-hovered-buttons":{"type":"story","subtype":"story","id":"components-buttons-icon-buttons--solid-hovered-buttons","name":"Solid Hovered Buttons","title":"Components/Buttons/Icon Buttons","importPath":"./stories/components/IconButtons.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"SolidHoveredButtons"},"components-buttons-icon-buttons--solid-clicked-buttons":{"type":"story","subtype":"story","id":"components-buttons-icon-buttons--solid-clicked-buttons","name":"Solid Clicked Buttons","title":"Components/Buttons/Icon Buttons","importPath":"./stories/components/IconButtons.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"SolidClickedButtons"},"components-buttons-icon-buttons--hovered-buttons":{"type":"story","subtype":"story","id":"components-buttons-icon-buttons--hovered-buttons","name":"Hovered Buttons","title":"Components/Buttons/Icon Buttons","importPath":"./stories/components/IconButtons.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"HoveredButtons"},"components-buttons-icon-buttons--clicked-buttons":{"type":"story","subtype":"story","id":"components-buttons-icon-buttons--clicked-buttons","name":"Clicked Buttons","title":"Components/Buttons/Icon Buttons","importPath":"./stories/components/IconButtons.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"ClickedButtons"},"components-buttons-link-buttons--docs":{"id":"components-buttons-link-buttons--docs","title":"Components/Buttons/Link Buttons","name":"Docs","importPath":"./stories/components/LinkButtons.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-buttons-link-buttons--default":{"type":"story","subtype":"story","id":"components-buttons-link-buttons--default","name":"Default","title":"Components/Buttons/Link Buttons","importPath":"./stories/components/LinkButtons.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-buttons-link-buttons--hovered-buttons":{"type":"story","subtype":"story","id":"components-buttons-link-buttons--hovered-buttons","name":"Hovered Buttons","title":"Components/Buttons/Link Buttons","importPath":"./stories/components/LinkButtons.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"HoveredButtons"},"components-buttons-split-buttons-drop-down--docs":{"id":"components-buttons-split-buttons-drop-down--docs","title":"Components/Buttons/Split Buttons/Drop Down","name":"Docs","importPath":"./stories/components/SplitButtonsDropdown.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-buttons-split-buttons-drop-down--default":{"type":"story","subtype":"story","id":"components-buttons-split-buttons-drop-down--default","name":"Default","title":"Components/Buttons/Split Buttons/Drop Down","importPath":"./stories/components/SplitButtonsDropdown.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-buttons-split-buttons-drop-down--open":{"type":"story","subtype":"story","id":"components-buttons-split-buttons-drop-down--open","name":"Open","title":"Components/Buttons/Split Buttons/Drop Down","importPath":"./stories/components/SplitButtonsDropdown.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Open"},"components-buttons-split-buttons-drop-down--disabled":{"type":"story","subtype":"story","id":"components-buttons-split-buttons-drop-down--disabled","name":"Disabled","title":"Components/Buttons/Split Buttons/Drop Down","importPath":"./stories/components/SplitButtonsDropdown.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Disabled"},"components-buttons-split-buttons-icon-left--docs":{"id":"components-buttons-split-buttons-icon-left--docs","title":"Components/Buttons/Split Buttons/Icon Left","name":"Docs","importPath":"./stories/components/SplitButtonsIconLeft.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-buttons-split-buttons-icon-left--default":{"type":"story","subtype":"story","id":"components-buttons-split-buttons-icon-left--default","name":"Default","title":"Components/Buttons/Split Buttons/Icon Left","importPath":"./stories/components/SplitButtonsIconLeft.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-buttons-split-buttons-icon-left--hovered":{"type":"story","subtype":"story","id":"components-buttons-split-buttons-icon-left--hovered","name":"Hovered","title":"Components/Buttons/Split Buttons/Icon Left","importPath":"./stories/components/SplitButtonsIconLeft.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Hovered"},"components-buttons-split-buttons-icon-left--pressed":{"type":"story","subtype":"story","id":"components-buttons-split-buttons-icon-left--pressed","name":"Pressed","title":"Components/Buttons/Split Buttons/Icon Left","importPath":"./stories/components/SplitButtonsIconLeft.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Pressed"},"components-buttons-split-buttons-icon-left--disabled":{"type":"story","subtype":"story","id":"components-buttons-split-buttons-icon-left--disabled","name":"Disabled","title":"Components/Buttons/Split Buttons/Icon Left","importPath":"./stories/components/SplitButtonsIconLeft.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Disabled"},"components-buttons-split-buttons-tabs--docs":{"id":"components-buttons-split-buttons-tabs--docs","title":"Components/Buttons/Split Buttons/Tabs","name":"Docs","importPath":"./stories/components/SplitButtonsTabs.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-buttons-split-buttons-tabs--default":{"type":"story","subtype":"story","id":"components-buttons-split-buttons-tabs--default","name":"Default","title":"Components/Buttons/Split Buttons/Tabs","importPath":"./stories/components/SplitButtonsTabs.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-buttons-split-buttons-tabs--hovered":{"type":"story","subtype":"story","id":"components-buttons-split-buttons-tabs--hovered","name":"Hovered","title":"Components/Buttons/Split Buttons/Tabs","importPath":"./stories/components/SplitButtonsTabs.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Hovered"},"components-buttons-split-buttons-tabs--pressed":{"type":"story","subtype":"story","id":"components-buttons-split-buttons-tabs--pressed","name":"Pressed","title":"Components/Buttons/Split Buttons/Tabs","importPath":"./stories/components/SplitButtonsTabs.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Pressed"},"components-buttons-split-buttons-tabs--disabled":{"type":"story","subtype":"story","id":"components-buttons-split-buttons-tabs--disabled","name":"Disabled","title":"Components/Buttons/Split Buttons/Tabs","importPath":"./stories/components/SplitButtonsTabs.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Disabled"},"components-form-checkbox--docs":{"id":"components-form-checkbox--docs","title":"Components/Form/Checkbox","name":"Docs","importPath":"./stories/components/Checkbox.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-form-checkbox--default":{"type":"story","subtype":"story","id":"components-form-checkbox--default","name":"Default","title":"Components/Form/Checkbox","importPath":"./stories/components/Checkbox.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-form-checkbox--checked":{"type":"story","subtype":"story","id":"components-form-checkbox--checked","name":"Checked","title":"Components/Form/Checkbox","importPath":"./stories/components/Checkbox.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Checked"},"components-form-checkbox--disabled":{"type":"story","subtype":"story","id":"components-form-checkbox--disabled","name":"Disabled","title":"Components/Form/Checkbox","importPath":"./stories/components/Checkbox.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Disabled"},"components-form-checkbox--indeterminate":{"type":"story","subtype":"story","id":"components-form-checkbox--indeterminate","name":"Indeterminate","title":"Components/Form/Checkbox","importPath":"./stories/components/Checkbox.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Indeterminate"},"components-form-radio--docs":{"id":"components-form-radio--docs","title":"Components/Form/Radio","name":"Docs","importPath":"./stories/components/Radio.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-form-radio--default":{"type":"story","subtype":"story","id":"components-form-radio--default","name":"Default","title":"Components/Form/Radio","importPath":"./stories/components/Radio.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-form-radio--checked":{"type":"story","subtype":"story","id":"components-form-radio--checked","name":"Checked","title":"Components/Form/Radio","importPath":"./stories/components/Radio.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Checked"},"components-form-radio--hovered":{"type":"story","subtype":"story","id":"components-form-radio--hovered","name":"Hovered","title":"Components/Form/Radio","importPath":"./stories/components/Radio.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Hovered"},"components-form-radio--disabled":{"type":"story","subtype":"story","id":"components-form-radio--disabled","name":"Disabled","title":"Components/Form/Radio","importPath":"./stories/components/Radio.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Disabled"},"components-form-switches--docs":{"id":"components-form-switches--docs","title":"Components/Form/Switches","name":"Docs","importPath":"./stories/components/Switches.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-form-switches--default":{"type":"story","subtype":"story","id":"components-form-switches--default","name":"Default","title":"Components/Form/Switches","importPath":"./stories/components/Switches.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-form-switches--hovered-switch":{"type":"story","subtype":"story","id":"components-form-switches--hovered-switch","name":"Hovered Switch","title":"Components/Form/Switches","importPath":"./stories/components/Switches.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"HoveredSwitch"},"components-form-switches--disabled-switches":{"type":"story","subtype":"story","id":"components-form-switches--disabled-switches","name":"Disabled Switches","title":"Components/Form/Switches","importPath":"./stories/components/Switches.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"DisabledSwitches"},"components-form-slider--docs":{"id":"components-form-slider--docs","title":"Components/Form/Slider","name":"Docs","importPath":"./stories/components/Slider.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-form-slider--default":{"type":"story","subtype":"story","id":"components-form-slider--default","name":"Default","title":"Components/Form/Slider","importPath":"./stories/components/Slider.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-form-slider--with-value":{"type":"story","subtype":"story","id":"components-form-slider--with-value","name":"With Value","title":"Components/Form/Slider","importPath":"./stories/components/Slider.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"WithValue"},"components-form-slider--min":{"type":"story","subtype":"story","id":"components-form-slider--min","name":"Min","title":"Components/Form/Slider","importPath":"./stories/components/Slider.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Min"},"components-form-slider--max":{"type":"story","subtype":"story","id":"components-form-slider--max","name":"Max","title":"Components/Form/Slider","importPath":"./stories/components/Slider.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Max"},"components-form-text-field--docs":{"id":"components-form-text-field--docs","title":"Components/Form/Text Field","name":"Docs","importPath":"./stories/components/TextField.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-form-text-field--default":{"type":"story","subtype":"story","id":"components-form-text-field--default","name":"Default","title":"Components/Form/Text Field","importPath":"./stories/components/TextField.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-form-text-field--hovered-field":{"type":"story","subtype":"story","id":"components-form-text-field--hovered-field","name":"Hovered Field","title":"Components/Form/Text Field","importPath":"./stories/components/TextField.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"HoveredField"},"components-form-text-field--focused-field":{"type":"story","subtype":"story","id":"components-form-text-field--focused-field","name":"Focused Field","title":"Components/Form/Text Field","importPath":"./stories/components/TextField.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"FocusedField"},"components-form-text-field--error-field":{"type":"story","subtype":"story","id":"components-form-text-field--error-field","name":"Error Field","title":"Components/Form/Text Field","importPath":"./stories/components/TextField.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"ErrorField"},"components-form-text-field--disabled-field":{"type":"story","subtype":"story","id":"components-form-text-field--disabled-field","name":"Disabled Field","title":"Components/Form/Text Field","importPath":"./stories/components/TextField.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"DisabledField"},"components-form-text-field--icon-right-field":{"type":"story","subtype":"story","id":"components-form-text-field--icon-right-field","name":"Icon Right Field","title":"Components/Form/Text Field","importPath":"./stories/components/TextField.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"IconRightField"},"components-form-text-field--hidden-placeholder-field":{"type":"story","subtype":"story","id":"components-form-text-field--hidden-placeholder-field","name":"Hidden Placeholder Field","title":"Components/Form/Text Field","importPath":"./stories/components/TextField.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"HiddenPlaceholderField"},"components-form-text-area--docs":{"id":"components-form-text-area--docs","title":"Components/Form/Text Area","name":"Docs","importPath":"./stories/components/TextArea.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-form-text-area--default":{"type":"story","subtype":"story","id":"components-form-text-area--default","name":"Default","title":"Components/Form/Text Area","importPath":"./stories/components/TextArea.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-form-text-area--scroll-area":{"type":"story","subtype":"story","id":"components-form-text-area--scroll-area","name":"Scroll Area","title":"Components/Form/Text Area","importPath":"./stories/components/TextArea.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"ScrollArea"},"components-form-text-area--no-scroll-area":{"type":"story","subtype":"story","id":"components-form-text-area--no-scroll-area","name":"No Scroll Area","title":"Components/Form/Text Area","importPath":"./stories/components/TextArea.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"NoScrollArea"},"components-form-text-area--disabled-area":{"type":"story","subtype":"story","id":"components-form-text-area--disabled-area","name":"Disabled Area","title":"Components/Form/Text Area","importPath":"./stories/components/TextArea.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"DisabledArea"},"components-form-text-area--no-caption":{"type":"story","subtype":"story","id":"components-form-text-area--no-caption","name":"No Caption","title":"Components/Form/Text Area","importPath":"./stories/components/TextArea.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"NoCaption"},"components-form-text-area--no-copy-button":{"type":"story","subtype":"story","id":"components-form-text-area--no-copy-button","name":"No Copy Button","title":"Components/Form/Text Area","importPath":"./stories/components/TextArea.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"NoCopyButton"},"components-data-display-cards--docs":{"id":"components-data-display-cards--docs","title":"Components/Data Display/Cards","name":"Docs","importPath":"./stories/components/Cards.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-data-display-cards--default":{"type":"story","subtype":"story","id":"components-data-display-cards--default","name":"Default","title":"Components/Data Display/Cards","importPath":"./stories/components/Cards.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-data-display-cards--close-variant":{"type":"story","subtype":"story","id":"components-data-display-cards--close-variant","name":"Close Variant","title":"Components/Data Display/Cards","importPath":"./stories/components/Cards.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"CloseVariant"},"components-data-display-cards--open-with-tags-and-button":{"type":"story","subtype":"story","id":"components-data-display-cards--open-with-tags-and-button","name":"Open With Tags And Button","title":"Components/Data Display/Cards","importPath":"./stories/components/Cards.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"OpenWithTagsAndButton"},"components-data-display-cards--open-with-text-and-button":{"type":"story","subtype":"story","id":"components-data-display-cards--open-with-text-and-button","name":"Open With Text And Button","title":"Components/Data Display/Cards","importPath":"./stories/components/Cards.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"OpenWithTextAndButton"},"components-data-display-cards--stretch-layout":{"type":"story","subtype":"story","id":"components-data-display-cards--stretch-layout","name":"Stretch Layout","title":"Components/Data Display/Cards","importPath":"./stories/components/Cards.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"StretchLayout"},"components-data-display-info-block--docs":{"id":"components-data-display-info-block--docs","title":"Components/Data Display/Info Block","name":"Docs","importPath":"./stories/components/InfoBlock.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-data-display-info-block--default":{"type":"story","subtype":"story","id":"components-data-display-info-block--default","name":"Default","title":"Components/Data Display/Info Block","importPath":"./stories/components/InfoBlock.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-data-display-info-block--without-icon":{"type":"story","subtype":"story","id":"components-data-display-info-block--without-icon","name":"Without Icon","title":"Components/Data Display/Info Block","importPath":"./stories/components/InfoBlock.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"WithoutIcon"},"components-data-display-info-block--icon-right":{"type":"story","subtype":"story","id":"components-data-display-info-block--icon-right","name":"Icon Right","title":"Components/Data Display/Info Block","importPath":"./stories/components/InfoBlock.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"IconRight"},"components-data-display-info-block--icon-left":{"type":"story","subtype":"story","id":"components-data-display-info-block--icon-left","name":"Icon Left","title":"Components/Data Display/Info Block","importPath":"./stories/components/InfoBlock.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"IconLeft"},"components-data-display-info-block--icon-both":{"type":"story","subtype":"story","id":"components-data-display-info-block--icon-both","name":"Icon Both","title":"Components/Data Display/Info Block","importPath":"./stories/components/InfoBlock.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"IconBoth"},"components-data-display-info-block--title-only":{"type":"story","subtype":"story","id":"components-data-display-info-block--title-only","name":"Title Only","title":"Components/Data Display/Info Block","importPath":"./stories/components/InfoBlock.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"TitleOnly"},"components-data-display-info-block--description-only":{"type":"story","subtype":"story","id":"components-data-display-info-block--description-only","name":"Description Only","title":"Components/Data Display/Info Block","importPath":"./stories/components/InfoBlock.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"DescriptionOnly"},"components-data-display-tabs--docs":{"id":"components-data-display-tabs--docs","title":"Components/Data Display/Tabs","name":"Docs","importPath":"./stories/components/Tabs.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-data-display-tabs--default":{"type":"story","subtype":"story","id":"components-data-display-tabs--default","name":"Default","title":"Components/Data Display/Tabs","importPath":"./stories/components/Tabs.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-data-display-tabs--icon-tabs":{"type":"story","subtype":"story","id":"components-data-display-tabs--icon-tabs","name":"Icon Tabs","title":"Components/Data Display/Tabs","importPath":"./stories/components/Tabs.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"IconTabs"},"components-data-display-tabs--hovered-tabs":{"type":"story","subtype":"story","id":"components-data-display-tabs--hovered-tabs","name":"Hovered Tabs","title":"Components/Data Display/Tabs","importPath":"./stories/components/Tabs.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"HoveredTabs"},"components-data-display-tabs--hovered-selected":{"type":"story","subtype":"story","id":"components-data-display-tabs--hovered-selected","name":"Hovered Selected","title":"Components/Data Display/Tabs","importPath":"./stories/components/Tabs.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"HoveredSelected"},"components-layout-header--docs":{"id":"components-layout-header--docs","title":"Components/Layout/Header","name":"Docs","importPath":"./stories/components/Header.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-layout-header--default":{"type":"story","subtype":"story","id":"components-layout-header--default","name":"Panel","title":"Components/Layout/Header","importPath":"./stories/components/Header.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-layout-header--window":{"type":"story","subtype":"story","id":"components-layout-header--window","name":"Window","title":"Components/Layout/Header","importPath":"./stories/components/Header.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Window"},"components-layout-modal-window--docs":{"id":"components-layout-modal-window--docs","title":"Components/Layout/Modal Window","name":"Docs","importPath":"./stories/components/ModalWindow.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-layout-modal-window--default":{"type":"story","subtype":"story","id":"components-layout-modal-window--default","name":"Default","title":"Components/Layout/Modal Window","importPath":"./stories/components/ModalWindow.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-layout-modal-window--small":{"type":"story","subtype":"story","id":"components-layout-modal-window--small","name":"Small","title":"Components/Layout/Modal Window","importPath":"./stories/components/ModalWindow.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Small"},"components-layout-modal-window--large":{"type":"story","subtype":"story","id":"components-layout-modal-window--large","name":"Large","title":"Components/Layout/Modal Window","importPath":"./stories/components/ModalWindow.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Large"},"components-layout-modal-window--with-notification":{"type":"story","subtype":"story","id":"components-layout-modal-window--with-notification","name":"With Notification","title":"Components/Layout/Modal Window","importPath":"./stories/components/ModalWindow.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"WithNotification"},"components-layout-scroll--docs":{"id":"components-layout-scroll--docs","title":"Components/Layout/Scroll","name":"Docs","importPath":"./stories/components/Scroll.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-layout-scroll--default":{"type":"story","subtype":"story","id":"components-layout-scroll--default","name":"Default","title":"Components/Layout/Scroll","importPath":"./stories/components/Scroll.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-layout-scroll--with-buttons-m":{"type":"story","subtype":"story","id":"components-layout-scroll--with-buttons-m","name":"WithBtn M","title":"Components/Layout/Scroll","importPath":"./stories/components/Scroll.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"WithButtonsM"},"components-layout-scroll--without-buttons-m":{"type":"story","subtype":"story","id":"components-layout-scroll--without-buttons-m","name":"WithoutBtn M","title":"Components/Layout/Scroll","importPath":"./stories/components/Scroll.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"WithoutButtonsM"},"components-layout-scroll--without-buttons-s":{"type":"story","subtype":"story","id":"components-layout-scroll--without-buttons-s","name":"WithoutBtn S","title":"Components/Layout/Scroll","importPath":"./stories/components/Scroll.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"WithoutButtonsS"},"components-layout-scroll--without-buttons-xs":{"type":"story","subtype":"story","id":"components-layout-scroll--without-buttons-xs","name":"WithoutBtn XS","title":"Components/Layout/Scroll","importPath":"./stories/components/Scroll.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"WithoutButtonsXS"},"components-layout-scroll--horizontal":{"type":"story","subtype":"story","id":"components-layout-scroll--horizontal","name":"Horizontal","title":"Components/Layout/Scroll","importPath":"./stories/components/Scroll.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Horizontal"},"components-feedback-loader--docs":{"id":"components-feedback-loader--docs","title":"Components/Feedback/Loader","name":"Docs","importPath":"./stories/components/Loader.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-feedback-loader--default":{"type":"story","subtype":"story","id":"components-feedback-loader--default","name":"S","title":"Components/Feedback/Loader","importPath":"./stories/components/Loader.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-feedback-loader--medium":{"type":"story","subtype":"story","id":"components-feedback-loader--medium","name":"M","title":"Components/Feedback/Loader","importPath":"./stories/components/Loader.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Medium"},"components-feedback-loader--overlay-loader":{"type":"story","subtype":"story","id":"components-feedback-loader--overlay-loader","name":"Loader With Background","title":"Components/Feedback/Loader","importPath":"./stories/components/Loader.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"OverlayLoader"},"components-feedback-tooltip--docs":{"id":"components-feedback-tooltip--docs","title":"Components/Feedback/Tooltip","name":"Docs","importPath":"./stories/components/Tooltip.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-feedback-tooltip--default":{"type":"story","subtype":"story","id":"components-feedback-tooltip--default","name":"Default","title":"Components/Feedback/Tooltip","importPath":"./stories/components/Tooltip.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-actions-context-menu--docs":{"id":"components-actions-context-menu--docs","title":"Components/Actions/Context Menu","name":"Docs","importPath":"./stories/components/ContextMenu.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-actions-context-menu--default":{"type":"story","subtype":"story","id":"components-actions-context-menu--default","name":"Default","title":"Components/Actions/Context Menu","importPath":"./stories/components/ContextMenu.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-actions-context-menu--icon-left-items":{"type":"story","subtype":"story","id":"components-actions-context-menu--icon-left-items","name":"Icon Left Items","title":"Components/Actions/Context Menu","importPath":"./stories/components/ContextMenu.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"IconLeftItems"},"components-actions-context-menu--icons-both-items":{"type":"story","subtype":"story","id":"components-actions-context-menu--icons-both-items","name":"Icons Both Items","title":"Components/Actions/Context Menu","importPath":"./stories/components/ContextMenu.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"IconsBothItems"},"components-actions-context-menu--no-icon-items":{"type":"story","subtype":"story","id":"components-actions-context-menu--no-icon-items","name":"No Icon Items","title":"Components/Actions/Context Menu","importPath":"./stories/components/ContextMenu.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"NoIconItems"},"components-actions-context-menu--hovered-item":{"type":"story","subtype":"story","id":"components-actions-context-menu--hovered-item","name":"Hovered Item","title":"Components/Actions/Context Menu","importPath":"./stories/components/ContextMenu.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"HoveredItem"},"components-actions-context-menu--pressed-item":{"type":"story","subtype":"story","id":"components-actions-context-menu--pressed-item","name":"Pressed Item","title":"Components/Actions/Context Menu","importPath":"./stories/components/ContextMenu.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"PressedItem"},"components-actions-context-menu--with-submenu":{"type":"story","subtype":"story","id":"components-actions-context-menu--with-submenu","name":"With Submenu","title":"Components/Actions/Context Menu","importPath":"./stories/components/ContextMenu.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"WithSubmenu"},"components-actions-preview-controls--docs":{"id":"components-actions-preview-controls--docs","title":"Components/Actions/Preview Controls","name":"Docs","importPath":"./stories/components/PreviewControls.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-actions-preview-controls--default":{"type":"story","subtype":"story","id":"components-actions-preview-controls--default","name":"Default","title":"Components/Actions/Preview Controls","importPath":"./stories/components/PreviewControls.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-actions-preview-controls--back":{"type":"story","subtype":"story","id":"components-actions-preview-controls--back","name":"Back","title":"Components/Actions/Preview Controls","importPath":"./stories/components/PreviewControls.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Back"},"components-actions-preview-controls--next":{"type":"story","subtype":"story","id":"components-actions-preview-controls--next","name":"Next","title":"Components/Actions/Preview Controls","importPath":"./stories/components/PreviewControls.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Next"},"components-actions-preview-controls--disabled":{"type":"story","subtype":"story","id":"components-actions-preview-controls--disabled","name":"Disabled","title":"Components/Actions/Preview Controls","importPath":"./stories/components/PreviewControls.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Disabled"},"components-button--docs":{"id":"components-button--docs","title":"Components/Button","name":"Docs","importPath":"./stories/Button.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-button--default":{"type":"story","subtype":"story","id":"components-button--default","name":"Default Button","title":"Components/Button","importPath":"./stories/Button.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Default"},"components-button--primary":{"type":"story","subtype":"story","id":"components-button--primary","name":"Primary Button","title":"Components/Button","importPath":"./stories/Button.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Primary"},"components-button--secondary":{"type":"story","subtype":"story","id":"components-button--secondary","name":"Secondary Button","title":"Components/Button","importPath":"./stories/Button.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Secondary"},"components-button--edit-button":{"type":"story","subtype":"story","id":"components-button--edit-button","name":"Edit Button","title":"Components/Button","importPath":"./stories/Button.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"EditButton"},"components-checkbox--docs":{"id":"components-checkbox--docs","title":"Components/Checkbox","name":"Docs","importPath":"./stories/Checkbox.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-checkbox--basic":{"type":"story","subtype":"story","id":"components-checkbox--basic","name":"Default","title":"Components/Checkbox","importPath":"./stories/Checkbox.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Basic"},"components-combobox--docs":{"id":"components-combobox--docs","title":"Components/ComboBox","name":"Docs","importPath":"./stories/ComboBox.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-combobox--combo-box":{"type":"story","subtype":"story","id":"components-combobox--combo-box","name":"ComboBox","title":"Components/ComboBox","importPath":"./stories/ComboBox.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"ComboBox"},"components-input--docs":{"id":"components-input--docs","title":"Components/Input","name":"Docs","importPath":"./stories/Input.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-input--textarea":{"type":"story","subtype":"story","id":"components-input--textarea","name":"Textarea Control","title":"Components/Input","importPath":"./stories/Input.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Textarea"},"components-input--text-field":{"type":"story","subtype":"story","id":"components-input--text-field","name":"Text Field Control","title":"Components/Input","importPath":"./stories/Input.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"TextField"},"components-label--docs":{"id":"components-label--docs","title":"Components/Label","name":"Docs","importPath":"./stories/Label.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-label--header":{"type":"story","subtype":"story","id":"components-label--header","name":"Header Label","title":"Components/Label","importPath":"./stories/Label.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Header"},"components-label--link":{"type":"story","subtype":"story","id":"components-label--link","name":"Link Label","title":"Components/Label","importPath":"./stories/Label.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Link"},"components-loader--docs":{"id":"components-loader--docs","title":"Components/Loader","name":"Docs","importPath":"./stories/Loader.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-loader--interactive-loader":{"type":"story","subtype":"story","id":"components-loader--interactive-loader","name":"Interactive Loader","title":"Components/Loader","importPath":"./stories/Loader.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"InteractiveLoader"},"components-separator--docs":{"id":"components-separator--docs","title":"Components/Separator","name":"Docs","importPath":"./stories/Separator.stories.js","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"components-separator--horizontal":{"type":"story","subtype":"story","id":"components-separator--horizontal","name":"Horizontal Separator","title":"Components/Separator","importPath":"./stories/Separator.stories.js","tags":["dev","test","manifest","autodocs"],"exportName":"Horizontal"}}} \ No newline at end of file diff --git a/storybook/static/project.json b/storybook/static/project.json index 49c6811e66..a032f281db 100644 --- a/storybook/static/project.json +++ b/storybook/static/project.json @@ -1 +1 @@ -{"generatedAt":1774509888316,"userSince":1749480540825,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"knownPackages":{},"hasRouterPackage":false,"preview":{"usesGlobals":false},"framework":{"name":"@storybook/html-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/html","portableStoriesFileCount":0,"applicationFileCount":0,"storybookVersion":"10.3.3","storybookVersionSpecifier":"^10.3.3","language":"javascript","storybookPackages":{"@storybook/html-vite":{"version":"10.3.3"},"storybook":{}},"addons":{"@storybook/addon-docs":{"version":"10.3.3"}},"packageJsonType":"unknown"} \ No newline at end of file +{"generatedAt":1775731474855,"userSince":1772533110721,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"knownPackages":{},"hasRouterPackage":false,"preview":{"usesGlobals":true},"framework":{"name":"@storybook/html-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/html","portableStoriesFileCount":0,"applicationFileCount":0,"storybookVersion":"10.3.3","storybookVersionSpecifier":"^10.3.3","language":"javascript","storybookPackages":{"@storybook/html-vite":{"version":"10.3.3"},"storybook":{}},"addons":{"@storybook/addon-docs":{"version":"10.3.3"}},"packageJsonType":"unknown"} \ No newline at end of file diff --git a/storybook/static/sb-addons/storybook-2/manager-bundle.css b/storybook/static/sb-addons/storybook-2/manager-bundle.css new file mode 100644 index 0000000000..149c784568 --- /dev/null +++ b/storybook/static/sb-addons/storybook-2/manager-bundle.css @@ -0,0 +1 @@ +.sidebar-header{display:flex;align-items:center;gap:10px;min-height:28px;padding:2px 0;font-family:Segoe UI,Arial,Helvetica,sans-serif;font-size:14px;font-weight:700;line-height:20px;letter-spacing:.28px;color:#dedede}.sidebar-header:before{content:"";flex:0 0 24px;width:24px;height:24px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJtSURBVFhH1VZBjtowFOUIHCFSY9RdZzc2G3KD6Q1qqjjqbuYGsJsWUHOEHIFVMerGArqfI1iKUYHpIkeg+k7IJE4ayCSo7ZOewIn93rP9beh0/kfQzc6h671PN3uhCd/FzjL7tQ5tHBsey3kIoI85rjHOGxvc7MXwx/MHU6cWqJBdunm+p+u9LBhcTlk7iDZe7cZ0fYhKBF9LHaSyTq5kbBC0D0EuCDT0w0LnazMJ0nCPmzKCFaB09VdCCCp+vs9uBdUPix3bphiufw1SYxPw8ko1UW2chT+3uq0U50qfqMuv6Sm3nSlHYsaRnHEU+Nyy0iB16gSMV4cRHG2YzJT3xrMlikD7kdvFq/pkPOXoaPIliIRVqS7YjPHkO7qBsYlxXneBnmb8TXxDQqPQoYQgdkqfK9h4mcVwFV+5VZMpcIGeOtMl8gsvqinS9BnUMk4Ik9KDH/lba8JRYHaoItRJYihKl/lPXKLoy8L2Py9778xJpEEmvAfixcFNqEPao/Hc6pq+BSRBaCtB6hgDlIud0CM+fEL79UHstFZASzEyP2mWImSYKkaEYuSY0iVi6+G4upf2HYgWjUzaYrKw9Y2XGOc0Q4/Ik6bG1iUPipEoZ2wwO2jyDd2UF2xsLB+crmK391uPSFOnVPOcedkg+QlbUCdfF/YACPurjb3+uJYeI7Kzo9jasn5gvjzDKGQ4gJkCdc3UMFYuiWCMpPjlNwKCKA+Ptqx66RrRJZFy8UhSp/pEhB8xbTMILPVFxiYaB3GxCN3+nalbG4qRgWI4f0Sr6Oq+l/35qIPzBXs7v4qxCQgSV76eKdxw9ff3X8Fv4fQIQ6aJCpoAAAAASUVORK5CYII=) center / 24px 24px no-repeat}.sidebar-header img,.sidebar-header svg{display:none} diff --git a/storybook/static/sb-addons/storybook-2/manager-bundle.js b/storybook/static/sb-addons/storybook-2/manager-bundle.js index e1f56bea55..50727e75ee 100644 --- a/storybook/static/sb-addons/storybook-2/manager-bundle.js +++ b/storybook/static/sb-addons/storybook-2/manager-bundle.js @@ -1,3 +1,3 @@ try{ -(()=>{var _=__STORYBOOK_API__,{ActiveTabs:c,Consumer:m,ManagerContext:h,Provider:p,RequestResponseError:d,Tag:T,addons:o,combineParameters:O,controlOrMetaKey:g,controlOrMetaSymbol:y,eventMatchesShortcut:v,eventToShortcut:P,experimental_MockUniversalStore:b,experimental_UniversalStore:x,experimental_getStatusStore:k,experimental_getTestProviderStore:f,experimental_requestResponse:C,experimental_useStatusStore:A,experimental_useTestProviderStore:R,experimental_useUniversalStore:M,internal_checklistStore:K,internal_fullStatusStore:B,internal_fullTestProviderStore:E,internal_universalChecklistStore:G,internal_universalStatusStore:I,internal_universalTestProviderStore:N,isMacLike:U,isShortcutTaken:Y,keyToSymbol:H,merge:L,mockChannel:q,optionOrAltSymbol:D,shortcutMatchesShortcut:V,shortcutToAriaKeyshortcuts:j,shortcutToHumanString:w,types:W,useAddonState:z,useArgTypes:F,useArgs:J,useChannel:Q,useGlobalTypes:X,useGlobals:Z,useParameter:$,useSharedState:ee,useStoryPrepared:te,useStorybookApi:re,useStorybookState:oe}=__STORYBOOK_API__;var ie=__STORYBOOK_THEMING__,{CacheProvider:ue,ClassNames:Se,Global:_e,ThemeProvider:ce,background:me,color:he,convert:pe,create:de,createCache:Te,createGlobal:Oe,createReset:ge,css:ye,darken:ve,ensure:Pe,getPreferredColorScheme:be,ignoreSsrWarning:xe,isPropValid:ke,jsx:fe,keyframes:Ce,lighten:Ae,srOnlyStyles:Re,styled:Me,themes:s,tokens:Ke,typography:Be,useTheme:Ee,withTheme:Ge}=__STORYBOOK_THEMING__;o.setConfig({theme:{...s.normal,brandImage:"./logo.svg",brandUrl:"https://onlyoffice.github.io/"}});})(); +(()=>{var S=__STORYBOOK_API__,{ActiveTabs:c,Consumer:d,ManagerContext:h,Provider:x,RequestResponseError:E,Tag:g,addons:o,combineParameters:m,controlOrMetaKey:C,controlOrMetaSymbol:_,eventMatchesShortcut:b,eventToShortcut:B,experimental_MockUniversalStore:O,experimental_UniversalStore:f,experimental_getStatusStore:P,experimental_getTestProviderStore:T,experimental_requestResponse:I,experimental_useStatusStore:Y,experimental_useTestProviderStore:U,experimental_useUniversalStore:k,internal_checklistStore:v,internal_fullStatusStore:y,internal_fullTestProviderStore:D,internal_universalChecklistStore:R,internal_universalStatusStore:F,internal_universalTestProviderStore:q,isMacLike:K,isShortcutTaken:H,keyToSymbol:M,merge:w,mockChannel:G,optionOrAltSymbol:Q,shortcutMatchesShortcut:V,shortcutToAriaKeyshortcuts:J,shortcutToHumanString:j,types:z,useAddonState:L,useArgTypes:N,useArgs:Z,useChannel:X,useGlobalTypes:W,useGlobals:$,useParameter:ee,useSharedState:re,useStoryPrepared:te,useStorybookApi:oe,useStorybookState:ae}=__STORYBOOK_API__;var pe=__STORYBOOK_THEMING_CREATE__,{create:a,themes:Ae}=__STORYBOOK_THEMING_CREATE__;var n=a({base:"dark",colorPrimary:"#4D9DFF",colorSecondary:"#4D9DFF",appBg:"#1E1E1E",appContentBg:"#252525",appBorderColor:"rgba(255, 255, 255, 0.12)",appBorderRadius:10,barBg:"#1E1E1E",barTextColor:"#A0A0A0",barSelectedColor:"#4D9DFF",barHoverColor:"#E0E0E0",textColor:"#DEDEDE",textInverseColor:"#1E1E1E",inputBg:"#333333",inputBorder:"#555555",inputTextColor:"#DEDEDE",brandTitle:"ONLYOFFICE Plugin UI",brandUrl:"https://www.onlyoffice.com/",brandTarget:"_self"});o.setConfig({theme:n,sidebar:{showRoots:!1}});})(); }catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); }